@import '/vendor/filament/filament/resources/css/theme.css';

@layer base {
    :root {
        font-family: 'Inter', 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    :root[dir='rtl'] {
        font-family: 'Cairo', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
}

@layer components {
    /* Fix user menu dropdown overflow - keep it within screen bounds */
    .fi-user-menu [x-data] > div[role="menu"],
    .fi-dropdown [role="menu"] {
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
    }

    /* Ensure dropdown scrollbar is styled */
    .fi-user-menu [x-data] > div[role="menu"]::-webkit-scrollbar,
    .fi-dropdown [role="menu"]::-webkit-scrollbar {
        width: 6px;
    }

    .fi-user-menu [x-data] > div[role="menu"]::-webkit-scrollbar-thumb,
    .fi-dropdown [role="menu"]::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }

    .dark .fi-user-menu [x-data] > div[role="menu"]::-webkit-scrollbar-thumb,
    .dark .fi-dropdown [role="menu"]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
    }

    /* RTL Support for Arabic */
    [dir='rtl'] .fi-main {
        direction: rtl;
    }

    [dir='rtl'] .fi-sidebar,
    [dir='rtl'] .fi-topbar,
    [dir='rtl'] .fi-widget,
    [dir='rtl'] .fi-section,
    [dir='rtl'] .fi-ta-table {
        text-align: right;
    }

    [dir='rtl'] .fi-ta-table table {
        direction: rtl;
    }

    [dir='rtl'] .fi-widget canvas {
        direction: ltr;
    }
}