/* ================================================================
   Luxury Real Estate SaaS Dashboard - Design System
   Primary: Deep Navy #0d1b2e 
   Accent: Gold #c5a059 / #d4af37
   Alerts: Green (Success), Red (Error), Yellow (Warning), Blue (Info)
   * NO GRAYS OR BLACKS ALLOWED *
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

:root {
    /* Primary Colors */
    --jm-navy-dark: #07101c;
    --jm-navy: #07101c;
    --jm-navy-light: #152744;
    --jm-navy-lighter: #1d355c;

    /* Accent Colors */
    --jm-gold: #c5a059;
    --jm-gold-light: #e0c28f;
    --jm-gold-bright: #d4af37;

    /* Text Colors */
    --jm-text-main: #ffffff;
    --jm-text-muted: #e2e8f0;
    --jm-text-subtle: #94a3b8;

    /* Alert / Status Colors */
    --jm-alert-success: #10b981;
    --jm-alert-success-bg: rgba(16, 185, 129, 0.1);
    --jm-alert-error: #ef4444;
    --jm-alert-error-bg: rgba(239, 68, 68, 0.1);
    --jm-alert-warning: #f59e0b;
    --jm-alert-warning-bg: rgba(245, 158, 11, 0.1);
    --jm-alert-info: #3b82f6;
    --jm-alert-info-bg: rgba(59, 130, 246, 0.1);

    /* UI Elements */
    --jm-border: rgba(197, 160, 89, 0.2);
    --jm-border-subtle: rgba(255, 255, 255, 0.05);

    /* Shadows & Transitions */
    --jm-shadow-sm: 0 4px 12px rgba(7, 16, 28, 0.3);
    --jm-shadow-md: 0 8px 24px rgba(7, 16, 28, 0.4);
    --jm-shadow-gold: 0 4px 15px rgba(197, 160, 89, 0.15);
    --jm-shadow-gold-hover: 0 6px 20px rgba(197, 160, 89, 0.3);

    --jm-transition: all 0.3s ease-in-out;
    --bs-body-bg: #07101c !important;
}

/* مسار التنقل في هيدر الأدمن — فصل واضح بين المستويات (يصلح تلاصق النص على الجوال) */
.jodah-admin-bc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.45rem;
    line-height: 1.5;
    max-width: 100%;
    padding: 4px 0;
    word-break: break-word;
}
.jodah-admin-bc a {
    color: var(--jm-gold-bright) !important;
    text-decoration: none;
    white-space: nowrap;
}
.jodah-admin-bc a:hover {
    text-decoration: underline;
}
.jodah-admin-bc__sep {
    color: var(--jm-text-subtle);
    user-select: none;
    opacity: 0.85;
    padding: 0 0.1rem;
}
.jodah-admin-bc__muted {
    color: var(--jm-text-subtle);
}
.jodah-admin-bc__here {
    color: var(--jm-text-main);
    font-weight: 700;
}

/* لوحي + جوال ≤992px: شريط الأوامر، القوائم المنسدلة كورقة سفلية، أداء التمرير
   backdrop-filter على الشريط يُنشئ containing block في WebKit/Safari فيصبح position:fixed
   للقائمة نسبياً للشريط فيُقصّ الحد السفلي والظل — لذلك نعطّله هنا */
@media (max-width: 991.98px) {
    #changelist-form .fab-container.fab-hide-on-mobile {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .unified-command-bar,
    #fastrequest-command-bar {
        overflow: visible !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(13, 22, 35, 0.97) !important;
        transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
    }

    .unified-command-bar .frosted-dropdown-menu.active,
    #fastrequest-command-bar .frosted-dropdown-menu.active {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin: 0 !important;
        transform: none !important;
        animation: none !important;
        border-radius: 18px 18px 0 0 !important;
        max-height: min(90dvh, 92vh) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        box-sizing: border-box !important;
        z-index: 1080 !important;
        padding-bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 14px)) !important;
        box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.55) !important;
    }

    .unified-command-bar .frosted-dropdown-menu.active .actions-dropdown-scroll,
    .unified-command-bar .frosted-dropdown-menu.active .filter-scroll-area,
    #fastrequest-command-bar .frosted-dropdown-menu.active .actions-dropdown-scroll,
    #fastrequest-command-bar .frosted-dropdown-menu.active .filter-scroll-area {
        max-height: none !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
    }

    /* فتح أقسام الشريط الجانبي: إلغاء انتقالات ثقيلة تبطئ التمرير على الجوال */
    #jazzy-sidebar .nav-treeview,
    .nav-sidebar .nav-treeview {
        transition: none !important;
    }
    #jazzy-sidebar .nav-item > .nav-link,
    #jazzy-sidebar .nav-treeview .nav-link {
        transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease !important;
    }
}

/* ── Reset base ── */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    background-color: var(--jm-navy-dark) !important;
    direction: rtl;
    -webkit-font-smoothing: antialiased;
}

/* Fix for Jazzmin/AdminLTE scroll engagement lag:
   Ensure wrappers do NOT intercept scroll or define their own height constraints on mobile. */
body, .wrapper, .content-wrapper {
    background: var(--jm-navy-dark) !important;
    -webkit-overflow-scrolling: touch !important;
}

.wrapper, .content-wrapper {
    /* Allow AdminLTE to manage heights; only force background */
    background: var(--jm-navy-dark) !important;
}

/* Jazzmin Boxed Layout Centering Fix */
body.layout-boxed .wrapper {
    max-width: 1280px;
    margin: 0 auto !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    background: var(--jm-navy) !important;
    position: relative;
    border-left: 1px solid var(--jm-border);
    border-right: 1px solid var(--jm-border);
}

.app-main, #content, .content-header, .main-footer {
    background-color: var(--jm-navy) !important;
    background: var(--jm-navy) !important;
}

/* Jazzmin/AdminLTE 4: توحيد لون الشريط العلوي مع الخلفية (بدون رمادي من bg-body) */
#jazzy-navbar.app-header.navbar,
nav.app-header.navbar {
    background-color: #07101c !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(197, 160, 89, 0.15) !important;
}


/* Ensure navbar and footer stay within boxed width */
body.layout-boxed .main-header,
body.layout-boxed .main-footer {
    max-width: 1280px;
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
}


/* ═══════════════════════════════════════
   SMART SIDEBAR (Left/Right depends on RTL)
═══════════════════════════════════════ */
aside.main-sidebar,
.sidebar-dark-primary,
.main-sidebar .sidebar {
    background-color: var(--jm-navy-dark) !important;
    background: var(--jm-navy-dark) !important;
    border-left: 1px solid var(--jm-border) !important;
    box-shadow: var(--jm-shadow-md);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ═══════════════════════════════════════
   DESKTOP: Sidebar visible by default
   ═══════════════════════════════════════ */
@media (min-width: 992px) {
    body:not(.sidebar-collapse) .main-sidebar,
    body:not(.sidebar-collapse) .app-sidebar {
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .main-sidebar,
    #jazzy-sidebar.app-sidebar,
    aside.app-sidebar#jazzy-sidebar {
        min-width: 240px !important;
        width: min(100vw - 12px, 272px) !important;
        max-width: min(100vw - 12px, 272px) !important;
        background-color: #07101c !important;
        background-image: none !important;
    }
    #jazzy-sidebar .user-panel,
    #jazzy-sidebar .sidebar-wrapper {
        background: transparent !important;
    }
}

/* ═══════════════════════════════════════
   RTL SIDEBAR: Mobile (hidden until toggle)
   ═══════════════════════════════════════ */
@media (max-width: 991.98px) {
    .main-sidebar,
    .app-sidebar {
        position: fixed !important;
        right: 0 !important;
        left: auto !important;
        transform: translateX(100%) !important; /* مخفي لليمين حتى الفتح */
        z-index: 1040 !important;
        height: 100vh !important;
        height: 100dvh !important; /* تجنب ارتفاع شريط العنوان في الجوال */
        min-width: 240px !important;
        max-width: 280px !important;
        width: 85vw !important; /* على الشاشات الضيقة لا يفيض */
        visibility: visible !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        padding-right: env(safe-area-inset-right, 0) !important;
        padding-top: env(safe-area-inset-top, 0) !important;
        box-sizing: border-box !important;
    }

    /* منطقة تمرير واحدة داخل الشريط (لا تتداخل مع nav / sidebar-menu) */
    #jazzy-sidebar .sidebar-wrapper,
    .main-sidebar .sidebar-wrapper {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        flex: none !important;
    }
    #jazzy-sidebar nav,
    #jazzy-sidebar .sidebar-menu,
    .main-sidebar .sidebar,
    .main-sidebar nav {
        overflow: visible !important;
        overflow-y: visible !important;
        flex: none !important;
        -webkit-overflow-scrolling: auto !important;
    }

    .sidebar-open .main-sidebar,
    .sidebar-open .app-sidebar {
        transform: translateX(0) !important; /* يظهر عند الفتح */
    }

    /* طبقات عالية: منع كروت/شريط الأوامر من «اختراق» القائمة (Safari/WebKit) */
    body.sidebar-open #jazzy-sidebar.app-sidebar,
    body.sidebar-open aside.app-sidebar#jazzy-sidebar,
    body.sidebar-open .main-sidebar {
        z-index: 12000 !important;
        isolation: isolate !important;
        background-color: #07101c !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
    }
    body.sidebar-open #jazzy-sidebar .sidebar-brand,
    body.sidebar-open #jazzy-sidebar .sidebar-wrapper,
    body.sidebar-open #jazzy-sidebar .user-panel,
    body.sidebar-open #jazzy-sidebar nav,
    body.sidebar-open #jazzy-sidebar .sidebar-menu {
        background-color: #07101c !important;
        background-image: none !important;
    }
    /* الهيدر فوق الشريط حتى يبقى زر القائمة قابلاً للضغط */
    body.sidebar-open .app-header#jazzy-navbar,
    body.sidebar-open nav.app-header.navbar {
        z-index: 12060 !important;
    }
    /* خفض كل محتوى الصفحة تحت الطبقة المعتمة */
    body.sidebar-open .app-main,
    body.sidebar-open .app-content,
    body.sidebar-open .app-content-header {
        z-index: 1 !important;
        position: relative !important;
    }
    body.sidebar-open .unified-command-bar,
    body.sidebar-open #fastrequest-command-bar {
        z-index: 2 !important;
    }
    body.sidebar-open .property-card-wrapper,
    body.sidebar-open .luxury-card,
    body.sidebar-open .lead-luxury-card,
    body.sidebar-open .lead-card-box {
        z-index: auto !important;
        transform: none !important;
    }

    /* الجوال: لا نستخدم overflow:hidden على body مع sidebar-open — يُجمّد التمرير العمودي
       لأن القالب يضيف sidebar-open غالباً مع layout-fixed فيصبح التمرير «عالقاً».
       الشريط الجانبي منفصل (position:fixed) ويتمرّر داخلياً. */
    body.sidebar-open {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: auto;
        touch-action: pan-y pinch-zoom;
    }
}

/* Sidebar brand: شعار واسم الشركة أوضح */
.main-sidebar .brand-link,
.brand-link {
    background: #07101c !important;
    border-bottom: 1px solid rgba(197, 160, 89, 0.25) !important;
    padding: 20px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}
.main-sidebar .brand-link img,
.main-sidebar .brand-link .brand-image-xl,
.brand-link img {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}
.main-sidebar .brand-text,
.brand-text {
    color: var(--jm-gold-bright) !important;
    font-weight: 800 !important;
    font-size: 1.15rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0.3px !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.main-sidebar .brand-link small,
.main-sidebar .brand-link .brand-text-secondary {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

/* Navigation Items */
.nav-sidebar .nav-item>.nav-link {
    border-radius: 8px !important;
    margin: 4px 12px !important;
    padding: 12px 16px !important;
    transition: var(--jm-transition) !important;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Hover State */
.nav-sidebar .nav-item>.nav-link:hover {
    background: rgba(197, 160, 89, 0.05) !important;
    color: var(--jm-gold-light) !important;
    transform: translateX(-4px);
    /* Slight bump in RTL */
}

.nav-sidebar .nav-item>.nav-link:hover i {
    color: var(--jm-gold-light) !important;
}

/* Active State */
.nav-sidebar .nav-item>.nav-link.active,
.nav-sidebar .nav-item.menu-open>.nav-link {
    background: rgba(197, 160, 89, 0.1) !important;
    border-right: 3px solid var(--jm-gold-bright) !important;
}

.nav-sidebar .nav-item>.nav-link.active i {
    color: var(--jm-gold-bright) !important;
}

/* Icons: إظهار الأيقونات الذهبية بجانب كل قسم في الشريط */
.nav-sidebar .nav-link i,
.nav-sidebar .nav-link .nav-icon,
.nav-sidebar .nav-item>.nav-link .nav-icon,
.nav-sidebar .nav-item>.nav-link > i,
.nav-sidebar>.nav-item .nav-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--jm-gold) !important;
    font-size: 1.1rem !important;
    width: 24px !important;
    min-width: 24px !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: var(--jm-transition);
}
.nav-sidebar .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.nav-sidebar .nav-link .nav-icon,
.nav-sidebar .nav-link > i:first-child {
    flex-shrink: 0 !important;
}

/* Active Loading State Trick to feel fast */
.nav-sidebar .nav-item>.nav-link.is-loading {
    opacity: 0.7;
    background: rgba(197, 160, 89, 0.1) !important;
    transform: scale(0.98);
}

/* ── Enhanced Sidebar Features ── */
.dash-enhanced {
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    background: linear-gradient(90deg, rgba(7, 16, 28, 1) 0%, rgba(197, 160, 89, 0.1) 100%) !important;
    position: relative;
    overflow: hidden;
}

.dash-enhanced::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--jm-gold), transparent);
    opacity: 0.3;
}

.marketer-list-sidebar {
    background: rgba(7, 16, 28, 0.4) !important;
    border-radius: 0 0 12px 12px;
    margin: 0 12px 10px !important;
    border-right: 1px dashed var(--jm-border);
}

.marketer-link {
    padding: 8px 25px !important;
    font-size: 0.85rem !important;
    opacity: 0.8;
}

.marketer-link:hover {
    opacity: 1 !important;
    background: transparent !important;
    color: var(--jm-gold-bright) !important;
    transform: translateX(-5px) !important;
}

.marketer-link i {
    font-size: 0.75rem !important;
    color: var(--jm-text-subtle) !important;
}

.marketer-link:hover i {
    color: var(--jm-gold) !important;
}

/* ═══════════════════════════════════════
   TOP NAVBAR & SMART SEARCH
═══════════════════════════════════════ */
.main-header.navbar,
.navbar-dark {
    background-color: var(--jm-navy-dark) !important;
    background: var(--jm-navy-dark) !important;
    border-bottom: 1px solid var(--jm-border) !important;
    box-shadow: var(--jm-shadow-sm) !important;
    padding: 10px 20px !important;
}

/* Smart Search Container */
.smart-search-wrapper {
    flex: 1;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.smart-search-input {
    width: 100%;
    background: var(--jm-navy-light) !important;
    border: 1px solid var(--jm-border) !important;
    border-radius: 50px !important;
    color: var(--jm-text-main) !important;
    padding: 12px 20px 12px 45px !important;
    font-size: 0.95rem;
    transition: var(--jm-transition);
}

.smart-search-input:focus {
    border-color: var(--jm-gold-bright) !important;
    box-shadow: var(--jm-shadow-gold);
    outline: none;
    background: var(--jm-navy) !important;
}

.smart-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--jm-gold-bright);
    font-size: 1.1rem;
}

/* ═══════════════════════════════════════
   MODULAR SAAS LAYOUT - CARDS & CONTAINERS
═══════════════════════════════════════ */
.saas-card {
    background: var(--jm-navy-light);
    border: 1px solid var(--jm-border-subtle);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--jm-shadow-sm);
    transition: var(--jm-transition);
    height: 100%;
}

.saas-card:hover {
    border-color: var(--jm-border);
    box-shadow: var(--jm-shadow-md);
}

.saas-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--jm-border-subtle);
    padding-bottom: 15px;
}

.saas-card-title {
    color: var(--jm-gold-bright);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ═══════════════════════════════════════
   KPI METRICS
═══════════════════════════════════════ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

@media (max-width: 1200px) {
    .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

.kpi-card {
    background: var(--jm-navy-light);
    border: 1px solid var(--jm-border-subtle);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: var(--jm-transition);
    box-shadow: var(--jm-shadow-sm);
    cursor: pointer;
}

.kpi-card:hover {
    transform: translateY(-4px);
    border-color: var(--jm-gold);
    box-shadow: var(--jm-shadow-gold-hover);
    background: var(--jm-navy-lighter);
}

.kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.kpi-title {
    color: var(--jm-text-muted);
    font-size: 0.95rem;
    font-weight: 600;
}

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(197, 160, 89, 0.1);
    color: var(--jm-gold-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    border: 1px solid var(--jm-border);
}

.kpi-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.kpi-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--jm-text-main);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.kpi-trend {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.kpi-trend.up {
    color: var(--jm-alert-success);
    background: var(--jm-alert-success-bg);
}

.kpi-trend.down {
    color: var(--jm-alert-error);
    background: var(--jm-alert-error-bg);
}

.kpi-trend.neutral {
    color: var(--jm-text-subtle);
    background: var(--jm-border-subtle);
}

/* ═══════════════════════════════════════
   TIME FILTERS
═══════════════════════════════════════ */
.time-filters {
    display: flex;
    gap: 8px;
    background: var(--jm-navy-dark);
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--jm-border-subtle);
    margin-bottom: 24px;
    overflow-x: auto;
}

.filter-btn {
    background: transparent;
    border: none;
    color: var(--jm-text-subtle);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--jm-transition);
    white-space: nowrap;
}

.filter-btn:hover {
    color: var(--jm-text-main);
    background: var(--jm-navy-light);
}

.filter-btn.active {
    background: rgba(197, 160, 89, 0.15);
    color: var(--jm-gold-bright);
    border: 1px solid var(--jm-border);
}

/* أهداف لمس أوضح + تقليل تكبير iOS على حقول البحث (≥16px) */
@media (max-width: 768px) {
    .filter-btn {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 1rem;
    }
    .time-filters {
        gap: 10px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
}

/* ═══════════════════════════════════════
   ACTIVITY STREAMS (Lists)
═══════════════════════════════════════ */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: var(--jm-navy-dark);
    border-radius: 12px;
    border: 1px solid var(--jm-border-subtle);
    transition: var(--jm-transition);
    text-decoration: none !important;
}

.activity-item:hover {
    border-color: var(--jm-border);
    transform: translateX(-4px);
    background: var(--jm-navy-lighter);
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--jm-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-left: 16px;
    /* RTL */
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-title {
    color: var(--jm-text-main);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-meta {
    color: var(--jm-text-subtle);
    font-size: 0.85rem;
    display: flex;
    gap: 12px;
}

.activity-meta i {
    color: var(--jm-gold);
}

.activity-status-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.activity-time {
    color: var(--jm-text-subtle);
    font-size: 0.8rem;
}

/* Status Badges */
.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.status-new, .status-info, .status-blue {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-matched, .status-success, .status-green {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-pending, .status-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-rejected, .status-error, .status-red {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-purple {
    background: rgba(139, 92, 246, 0.1);
    color: #8B5CF6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.status-gold {
    background: rgba(212, 175, 55, 0.1);
    color: #D4AF37;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

/* ═══════════════════════════════════════
   AI INSIGHTS PANEL 
═══════════════════════════════════════ */
.ai-panel {
    background: linear-gradient(145deg, var(--jm-navy-light) 0%, var(--jm-navy-dark) 100%);
    border: 1px solid var(--jm-gold);
    box-shadow: 0 0 20px rgba(197, 160, 89, 0.1) inset;
}

.ai-header-icon {
    color: var(--jm-gold-bright);
    text-shadow: 0 0 10px rgba(197, 160, 89, 0.5);
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.8;
        text-shadow: 0 0 5px rgba(197, 160, 89, 0.5);
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 15px rgba(197, 160, 89, 0.8);
    }
}

.insight-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--jm-border-subtle);
}

.insight-row:last-child {
    border-bottom: none;
}

.insight-label {
    color: var(--jm-text-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.insight-value {
    color: var(--jm-gold-bright);
    font-weight: 800;
    font-size: 1.1rem;
}

.probability-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid var(--jm-alert-success);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--jm-alert-success);
    font-weight: 800;
    font-size: 1.2rem;
    box-shadow: 0 0 15px var(--jm-alert-success-bg);
}

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn-primary,
input[type=submit],
.button {
    background: var(--jm-gold) !important;
    border-color: var(--jm-gold) !important;
    color: var(--jm-navy-dark) !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    transition: var(--jm-transition) !important;
    padding: 10px 20px !important;
    letter-spacing: 0.5px;
}

.btn-primary:hover,
input[type=submit]:hover {
    background: var(--jm-gold-bright) !important;
    transform: translateY(-2px);
    box-shadow: var(--jm-shadow-gold-hover) !important;
    color: var(--jm-navy-dark) !important;
}

.btn-outline {
    background: transparent !important;
    border: 1px solid var(--jm-gold) !important;
    color: var(--jm-gold) !important;
}

.btn-outline:hover {
    background: rgba(197, 160, 89, 0.1) !important;
    color: var(--jm-gold-bright) !important;
}

/* ═══════════════════════════════════════
   STANDARD DJANGO OVERRIDES (Tables, Forms)
═══════════════════════════════════════ */

/* Tables */
.table,
#changelist table {
    border-color: var(--jm-border-subtle) !important;
}

thead th {
    background: var(--jm-navy-dark) !important;
    color: var(--jm-gold-bright) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-color: var(--jm-border-subtle) !important;
}

tbody tr {
    background: var(--jm-navy-light) !important;
    color: var(--jm-text-muted) !important;
    transition: var(--jm-transition);
}

tbody tr:hover {
    background: var(--jm-navy-lighter) !important;
}

td,
th {
    border-color: var(--jm-border-subtle) !important;
    background-color: transparent !important;
    background: transparent !important;
}

td a,
th a {
    color: var(--jm-gold) !important;
    font-weight: 600;
    text-decoration: none;
}

td a:hover {
    color: var(--jm-gold-bright) !important;
}

/* Cards (Standard) */
.card {
    background: var(--jm-navy-light) !important;
    border: 1px solid var(--jm-border-subtle) !important;
    border-radius: 12px !important;
    box-shadow: var(--jm-shadow-sm) !important;
}

.card-body,
.card-footer {
    background-color: transparent !important;
}

.card-header {
    background: var(--jm-navy-dark) !important;
    border-bottom: 1px solid var(--jm-border-subtle) !important;
    color: var(--jm-gold-bright) !important;
    font-weight: 700 !important;
}

/* Forms */
.form-control,
input,
select,
textarea {
    background: var(--jm-navy-dark) !important;
    border: 1px solid var(--jm-border-subtle) !important;
    color: var(--jm-text-main) !important;
    border-radius: 8px !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--jm-gold) !important;
    box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.2) !important;
    outline: none !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--jm-navy-dark);
}
/* ---------------------------------------
   ADMIN DASHBOARD RESPONSIVENESS (MOBILE-FIRST)
   --------------------------------------- */

@media (max-width: 768px) {
    .kpi-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .navbar-brand {
        max-width: 180px;
        overflow: hidden;
    }
}

/* SHARED CARD VIEW STYLES */
.property-card-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
    padding: 15px;
    direction: rtl;
}

@media (min-width: 768px) {
    .property-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
    .property-card-grid { grid-template-columns: repeat(3, 1fr); }
}

.luxury-card {
    background: var(--jm-navy-light) !important;
    border: 1px solid rgba(212, 175, 55, 0.1) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    text-decoration: none !important;
    display: block;
}

.luxury-card:hover { 
    transform: translateY(-4px); 
    border-color: var(--jm-gold) !important;
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.15) !important;
}

/* أجهزة لمس فقط: بدون hover مزيف — أخف للتمرير وأقل تأخيراً */
@media (hover: none), (max-width: 991.98px) {
    .luxury-card {
        transition: none !important;
    }
    .luxury-card:hover {
        transform: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        border-color: rgba(212, 175, 55, 0.1) !important;
    }
    .luxury-card:active {
        opacity: 0.96;
    }
}

.card-title-lg { color: #FFFFFF !important; font-weight: 800; font-size: 1.25rem; display: block; margin-bottom: 4px; }
.card-subtitle-gold { color: var(--jm-gold) !important; font-size: 0.95rem; font-weight: 600; }
.card-meta-silver { color: #F3F4F6 !important; font-size: 0.85rem; opacity: 0.8; }

/* طبقة التعتيم خلف القائمة (يُنشئها admin_custom.js) — دوماً تحت الشريط */
#admin-sidebar-backdrop {
    z-index: 11990 !important;
}

/* SHARED FAB TOOL — z-index تحت الشريط الجانبي (1040+) حتى لا يطفو فوق القائمة على الجوال */
.fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1019;
}

@media (max-width: 991.98px) {
    .fab-container {
        bottom: calc(22px + env(safe-area-inset-bottom, 0));
        right: calc(18px + env(safe-area-inset-right, 0));
        z-index: 1019 !important;
    }
}

.fab-btn {
    background: var(--jm-gold) !important;
    color: var(--jm-navy-dark) !important;
    width: 60px;
    height: 60px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
    font-size: 24px;
    border: none !important;
    transition: all 0.3s ease;
}

.glow-btn:hover, .fab-btn:hover {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
    transform: translateY(-2px) scale(1.05);
}

/* Prevent horizontal scroll on content only (do not clip sidebar) */
.saas-dashboard, .content-wrapper {
    overflow-x: hidden !important;
    max-width: 100% !important;
}
.wrapper {
    overflow-x: visible !important;
    max-width: 100% !important;
}
::-webkit-scrollbar-thumb {
    background: var(--jm-navy-lighter);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--jm-gold);
}

/* ═══════════════════════════════════════
   SIDEBAR COLLAPSE (RTL): only when body has .sidebar-collapse
   ═══════════════════════════════════════ */
@media (min-width: 992px) {
    body.sidebar-collapse .main-sidebar,
    body.sidebar-collapse .app-sidebar {
        transform: translateX(100%) !important;
        margin-right: 0 !important;
    }
    body.sidebar-collapse .content-wrapper,
    body.sidebar-collapse .main-header,
    body.sidebar-collapse .main-footer {
        margin-right: 0 !important;
    }
}

/* على الموبايل: إخفاء الشريط فقط عندما لا يكون مفتوحاً (بدون .sidebar-open) */
@media (max-width: 991.98px) {
    body.sidebar-collapse:not(.sidebar-open) .main-sidebar,
    body.sidebar-collapse:not(.sidebar-open) .app-sidebar {
        transform: translateX(100%) !important;
        margin-right: 0 !important;
    }
    /* عند فتح الشريط على الموبايل يجب أن يظهر حتى مع وجود sidebar-collapse */
    body.sidebar-open .main-sidebar,
    body.sidebar-open .app-sidebar {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    body.sidebar-collapse .content-wrapper,
    body.sidebar-collapse .main-header,
    body.sidebar-collapse .main-footer {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}
/* ---------------------------------------
   ADMIN DASHBOARD RESPONSIVENESS (MOBILE-FIRST)
   --------------------------------------- */

@media (max-width: 768px) {
    /* KPI Grid - Stack on mobile */
    .kpi-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .kpi-card {
        padding: 18px !important;
    }
    
    .kpi-value {
        font-size: 2rem !important;
    }

    /* Table Responsiveness - Enable horizontal scroll and improve legibility */
    .card-body.table-responsive {
        border-radius: 12px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    table.table {
        min-width: 700px !important; /* Force minimum width to prevent columns from squishing */
    }

    /* Form Layouts - Ensure labels and inputs stack correctly */
    .form-group {
        margin-bottom: 1.25rem !important;
    }
    
    .col-form-label {
        margin-bottom: 0.5rem !important;
        padding-top: 0 !important;
    }

    /* Header & Navbar tweaks */
    .main-header .navbar-nav {
        flex-direction: row !important;
        gap: 10px !important;
    }
    
    .brand-link .brand-text {
        font-size: 0.9rem !important;
    }

    /* Buttons: full width فقط داخل المحتوى وليس في الـ navbar */
    .content-wrapper .btn:not(.navbar .btn):not(.main-header .btn) {
        width: 100% !important;
        margin-bottom: 8px !important;
    }
    .main-header .btn,
    .main-header [data-widget="pushmenu"],
    .navbar .btn {
        width: auto !important;
        min-width: 44px !important;
    }

    .saas-card {
        padding: 16px !important;
    }
}

/* ── Mobile Scroll Engagement Reset ── */
@media (max-width: 991px) {
    html {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-text-size-adjust: 100%;
        touch-action: pan-y pinch-zoom;
        height: auto !important;
        min-height: 100dvh !important;
    }
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scroll-behavior: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-left: env(safe-area-inset-left, 0) !important;
        padding-right: env(safe-area-inset-right, 0) !important;
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
    }
    /* layout-fixed: إلغاء سلسلة ارتفاع ثابتة تمنع التمرير الطبيعي على الجوال */
    body.layout-fixed .app-wrapper {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body.layout-fixed .app-main {
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: 1 1 auto !important;
    }
    body.layout-fixed .app-content {
        overflow: visible !important;
    }
    .wrapper {
        min-height: 0 !important;
        height: auto !important;
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    .content-wrapper {
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
        padding: 12px !important;
        padding-left: calc(12px + env(safe-area-inset-left, 0)) !important;
        padding-right: calc(12px + env(safe-area-inset-right, 0)) !important;
    }

    .kpi-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .kpi-card {
        padding: 18px !important;
    }
    .kpi-value {
        font-size: 2rem !important;
    }

    /* GPU Optimization during scroll */
    .saas-card, .luxury-card, .kpi-card, .card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
        transition: none !important;
    }
    .property-card-grid {
        gap: 12px !important;
        padding: 12px 10px !important;
    }
    /* تقليل تأخير الـ 300ms على الأزرار والروابط التفاعلية */
    .add-action-pill,
    .command-trigger,
    .fab-btn,
    .btn,
    [data-lte-toggle="sidebar"],
    .action-select {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(212, 175, 55, 0.15) !important;
    }
}

/* Very small screens adjustment */
@media (max-width: 480px) {
    .kpi-header {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .kpi-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.2rem !important;
    }
}

/* Sidebar toggle (hamburger) visible and tappable on mobile */
@media (max-width: 991.98px) {
    [data-widget="pushmenu"],
    .navbar .sidebar-toggle,
    .main-header .nav-link[data-widget="pushmenu"],
    .main-header .navbar-nav .nav-link[data-widget="pushmenu"],
    .main-header a[data-widget="pushmenu"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 12px !important;
        color: var(--jm-gold-bright) !important;
    }
    .main-header .navbar {
        flex-wrap: nowrap !important;
        min-height: 56px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .main-header .navbar-nav {
        flex-direction: row !important;
        align-items: center !important;
    }
}

/* ═══════════════════════════════════════
   FIX TAB COLORS
   ═══════════════════════════════════════ */

/* Force all tabs to have white text for better visibility on dark backgrounds */
.nav-tabs .nav-link, 
.nav-pills .nav-link,
.card-header.p-0 .nav-link,
.nav-link.active,
.nav-link:hover {
    color: #ffffff !important;
}

/* Ensure active tab remains clear but with white text and a themed background */
.nav-tabs .nav-link.active, 
.nav-pills .nav-link.active {
    background-color: rgba(197, 160, 89, 0.2) !important;
    border-color: var(--jm-gold) !important;
}

/* ═══════════════════════════════════════
   صلاحيات المستخدم / المجموعات — ودجت القائمتين (FilteredSelectMultiple)
   يصلح: نصوص مقصوصة، مربعات ضيقة، صعوبة القراءة على الخلفية الداكنة
   ═══════════════════════════════════════ */

#content .selector,
#content-main .selector,
.card-body .selector,
fieldset .selector,
.form-row .selector,
body.change-form .selector {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 14px 16px !important;
    padding: 8px 0 16px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.selector-available,
.selector-chosen {
    float: none !important;
    flex: 1 1 340px !important;
    min-width: min(100%, 340px) !important;
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
}

.selector-available select,
.selector-chosen select {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 300px !important;
    height: auto !important;
    max-height: min(55vh, 520px) !important;
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    background: #0f172a !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(197, 160, 89, 0.35) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    unicode-bidi: plaintext !important;
    text-align: start !important;
}

/* خيارات القائمة — مسافات أوضح (يدعمها المتصفح الحديث) */
.selector-available select option,
.selector-chosen select option {
    padding: 6px 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    white-space: normal !important;
}

/* حقول التصفية فوق القوائم */
.selector .selector-filter,
.selector-available input[type="text"],
.selector-chosen input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 8px !important;
    padding: 9px 12px !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    background: rgba(15, 23, 42, 0.95) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(197, 160, 89, 0.35) !important;
    border-radius: 8px !important;
}

.selector-available h2,
.selector-chosen h2 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--jm-gold-light) !important;
    margin: 0 0 8px !important;
    line-height: 1.3 !important;
}

.selector .selector-available p,
.selector .selector-chosen p,
.selector .info {
    font-size: 0.8rem !important;
    color: var(--jm-text-subtle) !important;
    line-height: 1.45 !important;
    margin: 0 0 8px !important;
    max-width: 100% !important;
}

/* أزرار النقل الوسطى */
ul.selector-chooser {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 8px 4px !important;
    list-style: none !important;
}

ul.selector-chooser li {
    margin: 6px 0 !important;
}

ul.selector-chooser .selector-add,
ul.selector-chooser .selector-remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    background: rgba(197, 160, 89, 0.18) !important;
    border: 1px solid rgba(197, 160, 89, 0.45) !important;
    color: #fff !important;
}

ul.selector-chooser .selector-add:hover,
ul.selector-chooser .selector-remove:hover {
    background: rgba(197, 160, 89, 0.32) !important;
}

.selector a.selector-chooseall,
.selector a.selector-clearall {
    display: inline-block !important;
    margin-top: 8px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--jm-gold-bright) !important;
    text-decoration: underline !important;
}

/* صف الحقول الذي يحتوي القائمتين — تمرير أفقي خفيف إن لزم */
.field-user_permissions,
.field-groups,
.form-row:has(.selector),
.form-group:has(.selector) {
    overflow-x: auto !important;
    max-width: 100% !important;
}

/* شاشات ضيقة: عمود واحد */
@media (max-width: 991px) {
    .selector {
        flex-direction: column !important;
    }
    ul.selector-chooser {
        flex-direction: row !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 4px !important;
    }
    ul.selector-chooser li {
        display: inline-block !important;
        margin: 0 6px !important;
    }
}

/* ═══════════════════════════════════════
   Jazzmin — تحسين الشريط الجانبي (قراءة + مسافات + عدم قصّ النص)
   ═══════════════════════════════════════ */

.main-sidebar .nav-sidebar {
    padding-bottom: 1rem !important;
}

.main-sidebar .nav-header {
    font-size: 0.72rem !important;
    letter-spacing: 0.02em !important;
    padding: 14px 12px 6px !important;
    margin-top: 4px !important;
    color: var(--jm-gold) !important;
    opacity: 0.95 !important;
    border-top: 1px solid rgba(197, 160, 89, 0.12) !important;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link,
.main-sidebar .nav-treeview > .nav-item > .nav-link {
    padding: 0.55rem 0.85rem !important;
    min-height: 2.35rem !important;
    align-items: flex-start !important;
}

.main-sidebar .nav-link p {
    margin: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.4 !important;
    font-size: 0.88rem !important;
    max-width: 100% !important;
}

.main-sidebar .nav-link,
.main-sidebar .nav-treeview .nav-link {
    white-space: normal !important;
    overflow: visible !important;
}

/* بعض إصدارات Jazzmin قد تعرض نص العنوان داخل span بدل p */
.main-sidebar .nav-link span,
.main-sidebar .nav-link .nav-text,
.main-sidebar .nav-link .nav-link-text {
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
}

.main-sidebar .nav-sidebar,
.main-sidebar .nav-treeview {
    overflow: visible !important;
}

.main-sidebar .nav-icon {
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

.main-sidebar .brand-text {
    line-height: 1.25 !important;
}

/* Jazzmin 3+ / AdminLTE 4: الشريط الفعلي #jazzy-sidebar (بدون .main-sidebar) */
#jazzy-sidebar .sidebar-menu .nav-link,
#jazzy-sidebar .nav-treeview .nav-link,
.app-sidebar .sidebar-menu .nav-link {
    align-items: flex-start !important;
    white-space: normal !important;
    overflow: visible !important;
}
#jazzy-sidebar,
.app-sidebar#jazzy-sidebar,
aside.app-sidebar#jazzy-sidebar,
.app-sidebar {
    background-color: #07101c !important;
    background-image: none !important;
}
#jazzy-sidebar .sidebar-brand,
#jazzy-sidebar .sidebar-wrapper,
#jazzy-sidebar .user-panel,
#jazzy-sidebar nav.mt-2,
#jazzy-sidebar .sidebar-menu {
    background-color: #07101c !important;
    background-image: none !important;
}
#jazzy-sidebar .sidebar-wrapper {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
}
/* سطح المكتب فقط: تمرير داخلي للقائمة الطويلة. على الجوال يُسبّب تمريراً متداخلاً وبطئاً على iOS */
@media (min-width: 992px) {
    #jazzy-sidebar nav.mt-2,
    #jazzy-sidebar .sidebar-menu {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
}
#jazzy-sidebar .nav-link p,
.app-sidebar .nav-link p {
    display: block !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    min-width: min(100%, 28rem) !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.4 !important;
    max-width: none !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
}
#jazzy-sidebar .nav-header,
.app-sidebar .nav-header {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
    max-width: none !important;
    width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════
   استجابة الجوال — Jazzmin / AdminLTE 4 (جميع الشاشات)
   إصلاح: تمرير، عرض، شريط علوي، قوائم، صندوق layout-boxed
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    html {
        -webkit-text-size-adjust: 100%;
    }

    /* layout-boxed يضيق المحتوى — على الجوال عرض كامل */
    body.layout-boxed .wrapper {
        max-width: 100% !important;
        margin: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }
    body.layout-boxed .app-header#jazzy-navbar,
    body.layout-boxed .app-footer {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .app-wrapper {
        min-height: 100dvh;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* يكمّل قواعد @media (max-width: 991px): تمرير كامل الصفحة مع layout-fixed */
    body.layout-fixed .app-wrapper {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .app-main {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    body.layout-fixed .app-main {
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    body.layout-fixed .app-content {
        overflow: visible !important;
    }

    #jazzy-navbar.app-header {
        position: sticky;
        top: 0;
        z-index: 1030;
        max-width: 100vw;
    }

    #jazzy-navbar .container-fluid {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 4px;
        column-gap: 4px;
        min-width: 0 !important;
        width: 100%;
        max-width: 100%;
        padding-left: calc(8px + env(safe-area-inset-left, 0));
        padding-right: calc(8px + env(safe-area-inset-right, 0));
    }

    #jazzy-navbar .navbar-nav {
        flex-shrink: 0;
    }

    /* زر القائمة (AdminLTE 4) */
    #jazzy-navbar .nav-link[data-lte-toggle="sidebar"],
    #jazzy-navbar a[data-lte-toggle="sidebar"],
    [data-widget="pushmenu"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 10px !important;
    }

    /* علامة العلامة التجارية في الشريط — لا تدفع الصفحة أفقياً */
    #jazzy-navbar .navbar-brand {
        flex: 1 1 auto;
        min-width: 0;
        max-width: min(56vw, 220px);
        overflow: hidden;
    }
    #jazzy-navbar .navbar-brand > div:last-child {
        min-width: 0;
        overflow: hidden;
    }
    #jazzy-navbar .navbar-brand .brand-text,
    #jazzy-navbar .navbar-brand div[style*="font-weight"] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .app-content .container-fluid {
        max-width: 100%;
        padding-left: calc(12px + env(safe-area-inset-left, 0));
        padding-right: calc(12px + env(safe-area-inset-right, 0));
    }

    .app-footer {
        padding-bottom: env(safe-area-inset-bottom, 8px);
    }
}

@media (max-width: 768px) {
    .main-header .btn,
    .main-header [data-widget="pushmenu"],
    .navbar .btn,
    #jazzy-navbar .nav-link[data-lte-toggle="sidebar"] {
        width: auto !important;
        min-width: 48px !important;
    }
}

/* لوحة المسوّق «إحصائياتي»: شريط ظاهر + محتوى مرن */
body.jodah-marketer-dashboard .content-wrapper,
body.jodah-marketer-dashboard .app-main {
    min-width: 0;
    overflow-x: auto;
}

@media (min-width: 992px) {
    body.jodah-marketer-dashboard.sidebar-collapse #jazzy-sidebar.app-sidebar,
    body.jodah-marketer-dashboard.sidebar-collapse .app-sidebar {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}