/* ========================================
   هيدر الموبايل — Grid نظيف صفّان
   صف1: [☰] [شعار]   [ساعة]
   صف2: [ ] [اسم]    [أزرار]
   ======================================== */

/* ─── الموبايل (≤768px) ─────────────────── */
@media (max-width: 768px) {

    /* ثبّت اتجاه LTR في الهيدر حتى يعمل الـ Grid صح في RTL */
    [dir="rtl"] .modern-navbar { direction: ltr !important; }
    [dir="rtl"] .navbar-header-custom,
    [dir="rtl"] .company-info-center { direction: rtl !important; }
    [dir="rtl"] .navbar-actions      { direction: rtl !important; }

    /* ── الهيدر: Grid 3 أعمدة × صفّان ── */
    .modern-navbar {
        display: grid !important;
        grid-template-columns: 42px 1fr auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        height: auto !important;
        min-height: 68px !important;
        max-height: none !important;
        padding: 6px 10px !important;
        gap: 3px 8px !important;
        position: fixed !important; /* Ensure fixed positioning */
        top: 0 !important; /* Align to top */
        left: 0 !important; /* Align to left */
        right: 0 !important; /* Align to right */
        z-index: 1000 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* ── زر القائمة: col1 يمتد صفّين ── */
    .sidebar-toggle-main {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        align-self: center !important;
        justify-self: center !important;
        width: 38px !important; height: 38px !important;
        display: flex !important;
        align-items: center !important; justify-content: center !important;
        margin: 0 !important;
        position: relative !important;
        left: auto !important; right: auto !important; top: auto !important;
        transform: none !important;
        border-radius: 10px !important;
        font-size: 1.1rem !important;
        flex-shrink: 0 !important;
    }

    /* ── navbar-header-custom: display:contents لتوزيع عناصره على الـ Grid ── */
    .navbar-header-custom {
        display: contents !important;
    }

    /* ── الشعار: col2, row1 ── */
    .company-logo-inline {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .company-logo-inline .company-logo {
        height: 26px !important;
        max-height: 26px !important;
        width: auto !important;
        object-fit: contain !important;
        transform: none !important;
    }

    /* ── اسم الشركة: col2, row2 ── */
    .company-info-center {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important; padding: 0 !important;
        overflow: hidden !important;
        transform: none !important;
        max-width: 100% !important;
    }
    .company-tagline-center { display: none !important; }
    .responsive-company-name {
        font-size: 0.78rem !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* ── navbar-actions: col3, يمتد صفّين — Grid داخلي ── */
    .navbar-actions {
        grid-column: 3 !important;
        grid-row: 1 / span 2 !important;
        align-self: stretch !important;
        justify-self: end !important;
        display: grid !important;
        grid-template-columns: auto auto auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        justify-items: center !important;
        gap: 3px 4px !important;
        margin: 0 !important; padding: 0 !important;
        position: static !important;
        top: auto !important; bottom: auto !important;
        left: auto !important; right: auto !important;
        transform: none !important;
    }

    /* ── الساعة: row1 تمتد على كل الأعمدة ── */
    .navbar-digital-clock {
        grid-row: 1 !important;
        grid-column: 1 / -1 !important;
        justify-self: end !important;
        display: inline-flex !important;
        align-items: center !important;
        height: auto !important; min-height: auto !important;
        padding: 2px 7px !important;
        border-radius: 8px !important;
        background: rgba(255,255,255,.10) !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        backdrop-filter: blur(6px) !important;
        min-width: auto !important;
        width: fit-content !important;
    }
    .navbar-clock-date { display: none !important; }
    .navbar-clock-time {
        font-size: 0.72rem !important;
        line-height: 1 !important;
        letter-spacing: 0.2px !important;
    }
    #navClockS { display: none !important; }
    #navClockM + .clock-colon { display: none !important; }

    /* ── الأزرار الثلاثة: row2 ── */
    .lang-toggle {
        grid-row: 2 !important; grid-column: 1 !important;
    }
    .notification-bell-wrapper {
        grid-row: 2 !important; grid-column: 2 !important;
        position: relative !important;
    }
    .user-profile-dropdown {
        grid-row: 2 !important; grid-column: 3 !important;
        position: relative !important;
    }

    /* ── أحجام الأزرار ── */
    .navbar-action-btn,
    .lang-toggle {
        width: 34px !important; height: 34px !important;
        min-width: 34px !important; min-height: 34px !important;
        border-radius: 8px !important; font-size: 1rem !important;
        display: flex !important; align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        padding: 0 !important; margin: 0 !important;
        box-sizing: border-box !important;
    }
    .navbar-action-btn i, .lang-toggle i { font-size: 1rem !important; }

    .user-profile-btn {
        height: 34px !important; min-height: 34px !important;
        border-radius: 8px !important; padding: 0 6px !important;
        display: flex !important; align-items: center !important;
        flex-shrink: 0 !important; gap: 4px !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
    }
    .user-avatar {
        width: 26px !important; height: 26px !important;
        min-width: 26px !important; min-height: 26px !important;
        font-size: 0.75rem !important; border-radius: 50% !important;
        flex-shrink: 0 !important;
    }

    /* ── إخفاء عناصر غير مهمة ── */
    .navbar-search, .search-wrapper { display: none !important; }
    .user-info { display: none !important; }
    .user-profile-btn .bi-chevron-down { display: none !important; }
    .sidebar-toggle, .sidebar-arrow-toggle { display: none !important; }

    /* ── ضبط المحتوى تحت الهيدر ── */
    :root { --header-height: 70px; }
    .main-content {
        margin-top: var(--header-height) !important;
        padding-top: 1rem !important;
    }

    /* ── User Dropdown ── */
    #userDropdown.dropdown-menu-modern { display: none; }
    #userDropdown.dropdown-menu-modern.show {
        display: block !important;
        animation: slideDown 0.25s ease-out;
    }
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    #userDropdown {
        position: fixed !important;
        top: 75px !important;
        transform: none !important;
        width: min(340px, calc(100vw - 24px)) !important;
        max-width: min(340px, calc(100vw - 24px)) !important;
        margin: 0 !important;
        z-index: 99999 !important;
        box-shadow: 0 10px 40px rgba(0,0,0,.3) !important;
        border: 1px solid rgba(0,0,0,.1) !important;
        max-height: calc(100vh - 90px) !important;
        overflow-y: auto !important;
        background: white !important;
        border-radius: 12px !important;
        padding: 0.5rem 0 !important;
    }
    [dir="rtl"] #userDropdown { right: 12px !important; left: auto !important; }
    [dir="ltr"] #userDropdown { left: 12px !important; right: auto !important; }

    .user-dropdown-overlay {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        right: 0 !important; bottom: 0 !important;
        background: rgba(0,0,0,.5) !important;
        z-index: 99998 !important;
        animation: fadeIn 0.2s ease-out !important;
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    .dropdown-item-modern {
        padding: 12px 16px !important;
        font-size: 0.95rem !important;
        border-bottom: 1px solid rgba(0,0,0,.05) !important;
        display: flex !important; align-items: center !important;
        gap: 12px !important; color: #333 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        touch-action: manipulation !important;
    }
    .dropdown-item-modern:active  { background: rgba(102,126,234,.15) !important; }
    .dropdown-item-modern:hover   { background: rgba(102,126,234,.1) !important; color: #667eea !important; }
    .dropdown-item-modern:last-child { border-bottom: none !important; }
    .dropdown-item-modern i {
        width: 24px !important; height: 24px !important;
        display: flex !important; align-items: center !important;
        justify-content: center !important; font-size: 1.1rem !important;
    }
    .dropdown-divider-modern {
        height: 1px !important; background: rgba(0,0,0,.1) !important;
        margin: 0.5rem 0 !important;
    }

    [dir="rtl"] #notification-badge { right: auto !important; left: -2px !important; }
    .modern-navbar * { box-sizing: border-box !important; }
}

/* ─── شاشات صغيرة جداً (≤480px) ─────────── */
@media (max-width: 480px) {
    .modern-navbar {
        grid-template-columns: 38px 1fr auto !important;
        min-height: 62px !important;
        padding: 5px 8px !important;
    }
    .sidebar-toggle-main { width: 34px !important; height: 34px !important; }
    .company-logo-inline .company-logo { height: 22px !important; max-height: 22px !important; }
    .responsive-company-name { font-size: 0.7rem !important; }
    .navbar-action-btn, .lang-toggle {
        width: 30px !important; height: 30px !important;
        min-width: 30px !important; min-height: 30px !important;
        font-size: 0.85rem !important;
    }
    .user-profile-btn { height: 30px !important; padding: 0 4px !important; }
    .user-avatar { width: 22px !important; height: 22px !important; }
    #notification-badge {
        width: 14px !important; height: 14px !important;
        font-size: 0.5rem !important; top: -1px !important; right: -1px !important;
    }
    :root { --header-height: 64px; }
    .main-content { margin-top: var(--header-height) !important; }
}