/* UI/UX Pro Max - Ninth Dimension Theme
   Style: Enterprise Calm Light & Soft Sky UI
   Palette: Primary Sky #0284C7, Secondary Slate #0F172A, Background #F8FAFC, Card #FFFFFF
*/

:root {
    --font-sans: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --primary-sky-50: #F0F9FF;
    --primary-sky-100: #E0F2FE;
    --primary-sky-200: #BAE6FD;
    --primary-sky-500: #0EA5E9;
    --primary-sky-600: #0284C7;
    --primary-sky-700: #0369A1;
    --slate-bg: #F8FAFC;
    --slate-card: #FFFFFF;
    --slate-border: #E2E8F0;
    --slate-text: #0F172A;
    --slate-muted: #64748B;
}

/* Base Light Clean Canvas */
body {
    font-family: var(--font-sans) !important;
    background-color: var(--slate-bg) !important;
    color: var(--slate-text) !important;
    letter-spacing: -0.01em;
}

/* Filament Navigation & Header Polish */
.fi-sidebar {
    background-color: #FFFFFF !important;
    border-inline-end: 1px solid var(--slate-border) !important;
    box-shadow: 1px 0 10px rgba(15, 23, 42, 0.02) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, rgba(14, 165, 233, 0.14) 100%) !important;
    color: var(--primary-sky-700) !important;
    border-radius: 0.625rem !important;
    font-weight: 700 !important;
}

.fi-sidebar-item-button {
    transition: all 0.15s ease-in-out !important;
    border-radius: 0.5rem !important;
}

.fi-sidebar-item-button:hover {
    background-color: #F1F5F9 !important;
}

.fi-topbar {
    background-color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid var(--slate-border) !important;
}

/* Card & Section Elevated Design */
.fi-ta-ctn, .fi-section, .fi-card, .fi-wi-card {
    background-color: var(--slate-card) !important;
    border: 1px solid var(--slate-border) !important;
    border-radius: 1rem !important;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.02) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.fi-section:hover, .fi-wi-card:hover {
    box-shadow: 0 6px 16px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
}

/* Stats Overview Cards Polish */
.fi-wi-stats-overview-stat {
    border-radius: 1rem !important;
    background: #FFFFFF !important;
    border: 1px solid var(--slate-border) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.08) !important;
}

/* Table Header & Cells - Crisp Arabic Typography */
.fi-ta-header-cell {
    background-color: #F8FAFC !important;
    font-weight: 700 !important;
    color: #475569 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.02em;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
}

.fi-ta-row {
    transition: background-color 0.12s ease-in-out;
}

.fi-ta-row:hover {
    background-color: rgba(240, 249, 255, 0.6) !important;
}

.fi-ta-table {
    border-collapse: separate !important;
}

/* Primary Button Styling */
.fi-btn.fi-color-primary, .fi-btn-primary {
    background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
    border: 1px solid rgba(2, 132, 199, 0.2) !important;
    box-shadow: 0 1px 2px 0 rgba(2, 132, 199, 0.25) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border-radius: 0.625rem !important;
    transition: all 0.15s ease-in-out !important;
}

.fi-btn.fi-color-primary:hover, .fi-btn-primary:hover {
    background: linear-gradient(135deg, #0369A1 0%, #075985 100%) !important;
    box-shadow: 0 4px 12px 0 rgba(2, 132, 199, 0.35) !important;
    transform: translateY(-1px);
}

/* Secondary / Gray Buttons */
.fi-btn.fi-color-gray {
    background-color: #FFFFFF !important;
    border: 1px solid var(--slate-border) !important;
    color: var(--slate-text) !important;
    font-weight: 600 !important;
    border-radius: 0.625rem !important;
}

.fi-btn.fi-color-gray:hover {
    background-color: #F8FAFC !important;
    border-color: #CBD5E1 !important;
}

/* Badge Polish */
.fi-badge {
    border-radius: 9999px !important;
    font-weight: 600 !important;
    padding: 0.22rem 0.65rem !important;
    font-size: 0.75rem !important;
}

/* Widget Header */
.fi-wi-header-heading {
    font-weight: 800 !important;
    color: #0F172A !important;
    font-size: 1.15rem !important;
}

/* Header Action Buttons */
.fi-header-actions {
    gap: 0.625rem !important;
}

/* Breadcrumbs Polish */
.fi-breadcrumbs-item-label {
    font-weight: 600 !important;
}

/* ==========================================================================
   Mobile & Small Screen Optimizations (UI/UX Pro Max)
   ========================================================================== */
@media (max-width: 768px) {
    /* Prevent iOS auto-zoom on input tap by maintaining minimum 16px font */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Better touch targets for buttons & selects (min 42px) */
    .fi-btn {
        min-height: 2.65rem !important;
        padding-inline: 0.85rem !important;
        font-size: 0.875rem !important;
    }

    /* Topbar on mobile */
    .fi-topbar {
        padding-inline: 0.75rem !important;
    }

    /* Page Content Padding on Mobile */
    .fi-page {
        padding-inline: 0.5rem !important;
    }

    .fi-header {
        margin-bottom: 1rem !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .fi-header-heading {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }

    .fi-header-actions {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .fi-header-actions .fi-btn {
        flex: 1 1 auto !important;
        justify-content: center !important;
    }

    /* Section Cards on Mobile */
    .fi-section {
        border-radius: 0.75rem !important;
        margin-bottom: 0.85rem !important;
    }

    .fi-section-header {
        padding: 0.85rem 1rem !important;
    }

    .fi-section-content {
        padding: 0.85rem 0.85rem !important;
    }

    /* Table Container on Mobile: Smooth Horizontal Scroll */
    .fi-ta-ctn {
        border-radius: 0.75rem !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .fi-ta-table {
        min-width: 600px !important;
    }

    /* Repeater Items Card View on Mobile */
    .fi-fo-repeater-item {
        border-radius: 0.75rem !important;
        border: 1px solid #CBD5E1 !important;
        background-color: #FFFFFF !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
        margin-bottom: 0.75rem !important;
        padding: 0.65rem !important;
    }

    .fi-fo-repeater-item-header {
        padding-bottom: 0.5rem !important;
        border-bottom: 1px solid #F1F5F9 !important;
        margin-bottom: 0.65rem !important;
    }

    /* Form Action Footer on Mobile (Save / Cancel) */
    .fi-form-actions {
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 0.65rem !important;
        width: 100% !important;
        margin-top: 1.25rem !important;
    }

    .fi-form-actions .fi-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Tabs on Mobile: Smooth horizontal swipe */
    .fi-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        padding-bottom: 0.25rem !important;
    }

    .fi-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .fi-tabs-item {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: 0.82rem !important;
    }

    /* Modals on Mobile */
    .fi-modal-window {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 0.5rem auto !important;
        border-radius: 0.85rem !important;
    }
}

/* ==========================================================================
   Login Page Polish - Tailwind Plus Exact Aesthetic
   ========================================================================== */
.fi-fo-field-wrp-label span {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #0F172A !important;
}

/* Auth Input Fields: Clean, Crisp, Minimal (Tailwind Plus) */
.fi-input-wrp {
    background-color: #FFFFFF !important;
    border: 1px solid rgba(15, 23, 42, 0.18) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
    transition: all 0.15s ease-in-out !important;
    min-height: 2.65rem !important;
}

.fi-input-wrp:focus-within {
    border-color: #0284C7 !important;
    outline: 2px solid #0284C7 !important;
    outline-offset: -1px !important;
    box-shadow: none !important;
}

.fi-input-wrp input {
    color: #0F172A !important;
    font-size: 0.9rem !important;
}

/* Auth Submit Button (Tailwind Plus Full-Round Button) */
.fi-form button[type="submit"], 
.fi-form .fi-btn-primary {
    background-color: #0F172A !important;
    color: #FFFFFF !important;
    min-height: 2.75rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    width: 100% !important;
    border: none !important;
    transition: all 0.15s ease-in-out !important;
}

.fi-form button[type="submit"]:hover,
.fi-form .fi-btn-primary:hover {
    background-color: #0284C7 !important;
    transform: none !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;
}