/* ============================================
   Rabtex Neural Design System - 2026
   ============================================ */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --main-content-bottom: 120px;
    /* ════════════════════════════════════════════════════════════
       هوية دوميرا — بترولي داكن أساسٌ، وتركوازي تمييزاً.
       القيم مثبَّتة بالست عشري لا بـOKLCH لأنها ألوان علامة محدَّدة،
       وتحويلها يغيّر الدرجة بأجزاءٍ تُرى في الأسطح الكبيرة.
       كل زوجٍ نصّ/خلفية هنا مُتحقَّق منه حسابيّاً عند 4.5:1 فأعلى.
       ════════════════════════════════════════════════════════════ */
    --brand-petrol: #15475A;          /* الأساسي: أزرار، شريط جانبي، عناوين */
    --brand-teal:   #1F7A8C;          /* التمييز: العنصر النشط، التقدّم، focus */
    --brand-petrol-deep: #0E3444;     /* تدرّج الشريط عند الحاجة إلى عمق */

    /* Brand Colors (Unified) */
    --primary-color: var(--brand-petrol);
    --primary-600: #0E3444;
    --primary-500: var(--primary-color);
    --primary-400: var(--brand-teal);
    --primary-300: #3D97A8;
    --secondary-color: var(--brand-teal);
    --accent-color: var(--brand-teal);
    --accent-500: var(--accent-color);

    /* Variables for Layout & Components */
    /* بلا توهّج: الهوية الجديدة أسطحٌ مسطّحة بحدٍّ رفيع، لا هالات. */
    --glow-primary: 0 0 0 0 transparent;
    --radius-xl: 16px;
    --radius-lg: 14px;
    --radius-md: 12px;
    --sidebar-width: 260px;
    --border-radius-xl: var(--radius-xl);
    --border-radius-lg: var(--radius-lg);
    --border-radius-md: var(--radius-md);
    --border-radius-sm: 8px;
    --border-radius-full: 9999px;
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    /* -------------------------------- */
    /* Light Mode (Default)             */
    /* -------------------------------- */
    /* Tajawal مُبقًى عمداً: هندسيّ عربيّ مناسب، ومحمَّل في 48 صفحة،
       واسمه مكتوب داخل إعدادات Chart.js في JS — وتبديله تعديلٌ برمجي. */
    --font-main: 'Tajawal', sans-serif;
    --bg-body: #F7F7F7;
    --bg-card: #FFFFFF;
    --bg-glass: rgba(255, 255, 255, 0.92);
    --text-main: #102A35;
    --text-secondary: #2B3F49;
    --text-muted: #5A6B74;
    --border-color: rgba(16, 42, 53, 0.10);

    --bg-primary: var(--bg-card);
    --bg-secondary: #F4F6F7;
    --text-primary: var(--text-main);

    /* Semantic Status Colors (Light context readability) */
    --success-bg: rgba(26, 127, 85, 0.12);
    --success-border: rgba(26, 127, 85, 0.30);
    --success-text: #0F6B45;
    --success-solid: #1A7F55;
    --warning-bg: rgba(138, 90, 0, 0.12);
    --warning-border: rgba(138, 90, 0, 0.30);
    --warning-text: #7A5500;
    --warning-solid: #8A5A00;
    --error-bg: rgba(179, 38, 30, 0.12);
    --error-border: rgba(179, 38, 30, 0.30);
    --error-text: #A32620;
    --error-solid: #B3261E;
    --info-bg: rgba(26, 111, 148, 0.12);
    --info-border: rgba(26, 111, 148, 0.30);
    --info-text: #15607F;
    --info-solid: var(--secondary-color);
    --purple-bg: rgba(95, 75, 182, 0.12);
    
    /* Overlay / Glass helpers (Light) */
    --overlay-hover: rgba(0, 0, 0, 0.06);
    --overlay-subtle: rgba(0, 0, 0, 0.03);
    --overlay-border-hover: rgba(0, 0, 0, 0.15);
    --overlay-input-bg: rgba(0, 0, 0, 0.04);
    --scrollbar-thumb: rgba(0, 0, 0, 0.12);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.2);
    --shadow-card-hover: 0 10px 30px -10px rgba(0, 0, 0, 0.15);
    --shadow-toast: 0 8px 25px rgba(0, 0, 0, 0.12);
    --purple-text: #5F4BB6;
    --stat-gradient-from: #15475A;
    --stat-gradient-to: #1F7A8C;

    /* System color scheme */
    --color-scheme: light;

    /* Spacing scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
    --shadow-glow: 0 0 20px rgba(26,127,85, 0.1);

    /* Modal overlay */
    --modal-overlay: rgba(0,0,0,0.4);
    --modal-blur: blur(8px);

    /* Input styling */
    --input-bg: rgba(0,0,0,0.04);
    --input-border: rgba(0,0,0,0.1);
    --input-focus: var(--primary-color);

    /* Badge colors */
    --badge-blue: rgba(26,111,148,0.12);
    --badge-green: rgba(26,127,85,0.12);
    --badge-amber: rgba(138,90,0,0.12);
    --badge-red: rgba(179,38,30,0.12);
    --badge-purple: rgba(95,75,182,0.12);

    /* Legacy aliases */
    --dark-surface: var(--bg-card);
    --dark-border: var(--border-color);
    --dark-bg-tertiary: #f3f4f6;
    --dark-surface-hover: rgba(0, 0, 0, 0.04);
}

.dark {
    /* -------------------------------- */
    /* Dark Mode                        */
    /* -------------------------------- */
    --font-main: 'Tajawal', sans-serif;
    /* الداكن مشتقٌّ من البترولي نفسه لا من رمادٍ محايد: الهوية واحدة في
       الوضعين، والعين تقرأ القرابة بين الشريط والخلفية. */
    --brand-petrol: #1F7A8C;          /* يُقلب في الداكن: التركوازي هو الأبرز */
    --brand-teal:   #4FB3C7;
    --brand-petrol-deep: #0B1A21;
    --bg-body: #0B1A21;
    --bg-card: #102630;
    --bg-glass: rgba(16, 38, 48, 0.88);
    --text-main: #EEF5F8;
    --text-secondary: #D2E0E6;
    --text-muted: #93A8B2;
    --border-color: rgba(238, 245, 248, 0.12);

    --bg-primary: var(--bg-card);
    --bg-secondary: #15313D;
    --text-primary: var(--text-main);

    /* Semantic Status Colors (Dark context readability) */
    --success-text: #49C08A;
    --warning-text: #fcd34d;
    --error-text: #fca5a5;
    --info-text: #53B2D8;

    /* System color scheme */
    --color-scheme: dark;

    /* Overlay / Glass helpers (Dark) */
    --overlay-hover: rgba(255, 255, 255, 0.08);
    --overlay-subtle: rgba(255, 255, 255, 0.02);
    --overlay-border-hover: rgba(255, 255, 255, 0.12);
    --overlay-input-bg: rgba(255, 255, 255, 0.05);
    --scrollbar-thumb: rgba(255, 255, 255, 0.08);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.15);
    --shadow-card-hover: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    --shadow-toast: 0 8px 25px rgba(0, 0, 0, 0.4);
    --purple-text: #c4b5fd;
    --stat-gradient-from: #fff;
    --stat-gradient-to: #ccc;

    /* Shadows (dark) */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.4);
    --shadow-glow: 0 0 20px rgba(26,127,85, 0.15);

    /* Modal overlay (dark) */
    --modal-overlay: rgba(0,0,0,0.6);
    --modal-blur: blur(8px);

    /* Input styling (dark) */
    --input-bg: rgba(255,255,255,0.05);
    --input-border: rgba(255,255,255,0.1);
    --input-focus: var(--primary-color);

    /* Badge colors (dark) */
    --badge-blue: rgba(26,111,148,0.15);
    --badge-green: rgba(26,127,85,0.15);
    --badge-amber: rgba(138,90,0,0.15);
    --badge-red: rgba(179,38,30,0.15);
    --badge-purple: rgba(95,75,182,0.15);

    /* Legacy aliases */
    --dark-surface: var(--bg-card);
    --dark-border: var(--border-color);
    --dark-bg-tertiary: #0d0d12;
    --dark-surface-hover: rgba(255, 255, 255, 0.06);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
}

html {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    color-scheme: var(--color-scheme);
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-body);
    color: var(--text-main);
    /* كان هنا تدرّجان شعاعيّان — أزرقٌ وأخضرٌ نيونيّ من اللوحة
       القديمة — يصبغان زاويتي كل صفحة. وهما سبب المسحة
       المخضرّة التي كانت تظهر خلف البطاقات البيضاء.
       التصميم سطحٌ مصمت: العمق يأتي من الحدّ لا من اللون. */
    background-image: none;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

/* ============================================
   Improved Scrollbar
   ============================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ============================================
   Glass Panel (reusable)
   ============================================ */
.glass-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.glass-panel:hover {
    box-shadow: var(--shadow-md);
}

/* ============================================
   Improved Buttons
   ============================================ */
.btn {
    transition: all var(--transition-fast);
    border-radius: var(--border-radius-md);
    font-weight: 600;
    cursor: pointer;
}
.btn:active {
    transform: scale(0.97);
}

/* ============================================
   Improved Inputs
   ============================================ */
input[type="text"], input[type="date"], input[type="number"], input[type="tel"],
input[type="email"], input[type="search"], input[type="url"], input[type="password"],
select, textarea {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-main);
    border-radius: var(--border-radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(26,127,85, 0.1);
}

/* ============================================
   Improved Tables
   ============================================ */
.exec-table th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.exec-table td {
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-fast);
}
.exec-table tr:hover td {
    background: var(--overlay-hover);
}

/* ============================================
   Badges (unified)
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--border-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge-success { background: var(--badge-green); color: var(--success-text); }
.badge-warning { background: var(--badge-amber); color: var(--warning-text); }
.badge-error { background: var(--badge-red); color: var(--error-text); }
.badge-info { background: var(--badge-blue); color: var(--info-text); }
.badge-purple { background: var(--badge-purple); color: var(--purple-text); }

/* ============================================
   Toast improvements
   ============================================ */
.toast-container .toast {
    backdrop-filter: blur(12px);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-toast);
}

/* ============================================
   Modal improvements
   ============================================ */
[style*="position:fixed"][style*="backdrop-filter"] {
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
[style*="position:fixed"] > [style*="border-radius:16px"],
[style*="position:fixed"] > [style*="border-radius: 16px"] {
    animation: slideUp 0.25s ease;
}

/* ============================================
   Notification bell animation
   ============================================ */
@keyframes bellShake {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(14deg); }
    30% { transform: rotate(-12deg); }
    45% { transform: rotate(10deg); }
    60% { transform: rotate(-8deg); }
    75% { transform: rotate(4deg); }
}
.notification-bell.ringing svg {
    animation: bellShake 0.6s ease;
}

/* ============================================
   Improved stat cards — quiet hover (no transform)
   ============================================ */
.stat-card, [class*="kpi-card"], [data-perm] .glass-panel {
    transition: border-color var(--imp-dur, 180ms) var(--imp-ease, ease),
                box-shadow var(--imp-dur, 180ms) var(--imp-ease, ease);
}
.stat-card:hover, [class*="kpi-card"]:hover {
    transform: none;
    box-shadow: var(--imp-shadow-md, var(--shadow-md));
    border-color: var(--bd-strong, var(--overlay-border-hover));
}

/* ============================================
   Theme Switch — Pill toggle (global)
   ============================================ */
.theme-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 72px;
    height: 34px;
    background: var(--overlay-hover);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.theme-switch:hover {
    border-color: var(--overlay-border-hover);
}
.theme-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}
.theme-switch-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
    transition: all 0.2s ease;
}
.theme-switch-sun {
    left: 8px;
    color: var(--text-muted);
}
.theme-switch-moon {
    right: 8px;
    color: var(--text-main);
}
/* Default (dark) — thumb on right (moon side) */
.theme-switch-thumb {
    transform: translateX(38px);
}
/* Light mode — thumb on left (sun side) */
body.light-mode .theme-switch-thumb,
:root:not(.dark) .theme-switch-thumb {
    transform: translateX(0) !important;
}
body.light-mode .theme-switch-sun,
:root:not(.dark) .theme-switch-sun {
    color: var(--warn) !important;
}
body.light-mode .theme-switch-moon,
:root:not(.dark) .theme-switch-moon {
    color: var(--text-muted) !important;
}
body.light-mode .theme-switch,
:root:not(.dark) .theme-switch {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.1);
}
body.light-mode .theme-switch-thumb,
:root:not(.dark) .theme-switch-thumb {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* ============================================
   Notes Cell & Popover
   ============================================ */
.notes-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 120px;
    max-width: 200px;
}
.notes-cell:hover {
    background: var(--overlay-hover);
}
.notes-cell:hover svg {
    opacity: 1 !important;
}
.notes-preview {
    font-size: 0.8rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
/* ============================================================
   Notes popover — refined professional surface
   ============================================================
   Design: subtle, no decorative gradients or emojis. Solid surfaces,
   thin borders, clear typographic hierarchy, refined button states. */
.notes-popover {
    background: var(--bg-card, #14141a);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    box-shadow: 0 20px 50px -12px rgba(0,0,0,0.60);
    width: 360px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fadeIn 0.15s ease;
}
.notes-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    letter-spacing: -0.01em;
}
.notes-popover-close {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.50);
    width: 26px; height: 26px;
    border-radius: 6px;
    font-size: 1.05rem;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.notes-popover-close:hover {
    color: rgba(255,255,255,0.95);
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.16);
}

.notes-popover-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Last-note card: muted, accent only on side bar. Label small-caps
   so it reads as a section title not as decoration. */
.notes-popover-last {
    padding: 12px 14px;
    background: rgba(26,127,85,0.05);
    border: 1px solid rgba(26,127,85,0.16);
    border-right: 3px solid rgba(26,127,85,0.85);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.notes-popover-last-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ok);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.notes-popover-last-body {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.92);
    line-height: 1.55;
    word-break: break-word;
}

/* Textarea: solid sunken surface, single clean focus state. */
.notes-popover-textarea {
    width: 100%;
    min-height: 88px;
    padding: 12px 14px;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    color: rgba(255,255,255,0.95);
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.6;
    resize: vertical;
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
}
.notes-popover-textarea:focus {
    border-color: rgba(255,255,255,0.28);
}
.notes-popover-textarea::placeholder {
    color: rgba(255,255,255,0.30);
}

/* Action row: clear hierarchy — primary solid, secondary outlined. */
.notes-popover-actions {
    display: flex;
    gap: 8px;
}
.notes-popover-save,
.notes-popover-to-task {
    flex: 1;
    margin: 0;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    transition: background .15s, border-color .15s, color .15s;
    border: 1px solid transparent;
    letter-spacing: -0.01em;
}
.notes-popover-save {
    background: rgb(22, 163, 74);
    color: #fff;
    border-color: rgb(22, 163, 74);
}
.notes-popover-save:hover {
    background: rgb(21, 128, 61);
    border-color: rgb(21, 128, 61);
}
.notes-popover-save:disabled,
.notes-popover-to-task:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.notes-popover-to-task {
    background: transparent;
    color: rgba(199,210,254,0.95);
    border-color: rgba(95,75,182,0.45);
}
.notes-popover-to-task:hover {
    background: rgba(95,75,182,0.08);
    border-color: rgba(95,75,182,0.70);
}

.notes-popover-foot {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.42);
    line-height: 1.55;
    padding-top: 10px;
    margin-top: 2px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* ============================================
   Customer detail section improvements
   ============================================ */
.customer-detail-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}
.customer-detail-section h5 {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-color);
}
.detail-row:last-child {
    border-bottom: none;
}
.detail-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.detail-value {
    font-weight: 600;
    color: var(--text-main);
}

/* ============================================
   File preview cards
   ============================================ */
.file-preview-card {
    transition: all var(--transition-normal) !important;
    border-radius: var(--radius-md) !important;
}
.file-preview-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   Layout
   ============================================ */
.app-container {
    display: flex;
    height: 100%;
    height: 100vh;
    height: 100dvh;
    width: 100%;
}

/* Legacy alias */
.app-layout {
    display: flex;
    height: 100%;
    height: 100vh;
    height: 100dvh;
    width: 100%;
}

/* ============================================
   Sidebar — Bottom Navigation Bar
   ============================================ */
.app-container,
.app-layout {
    flex-direction: column !important;
}

aside.sidebar,
aside.app-sidebar {
    position: fixed;
    bottom: 0 !important;
    inset-inline: 0 !important;
    margin-inline: 0 !important;
    width: fit-content !important;
    min-width: 320px !important;
    max-width: 90% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    border-radius: 24px !important; /* Make it rounded all around! */
    margin-bottom: 15px !important; /* Float above bottom */
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 0 20px var(--glow-primary) !important;
    
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-top: 1px solid var(--primary-color);
    z-index: 999;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
    display: flex !important;
    justify-content: center;
    align-items: flex-end;
    padding: 6px 8px calc(6px + var(--safe-bottom));
    height: auto;
    min-height: 70px;
}

#sidebarContainer {
    width: 0 !important;
    height: 0 !important;
    flex-shrink: 0;
    transition: width 0.3s ease;
}

/* Hide non-essential sidebar elements globally */
.logo-area,
.sidebar-footer,
.sidebar-header,
.sidebar-user,
.sidebar-toggle,
.sidebar-brand,
.sidebar-mobile-overlay,
.nav-section-title,
aside.sidebar::before,
aside.app-sidebar::before {
    display: none !important;
}

/* Nav links as horizontal scrollable row */
nav.sidebar-nav,
.nav-links {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    gap: 2px;
    overflow-y: visible;
    overflow-x: auto;
    padding: 0 4px;
    margin: 0;
    list-style: none;
    -webkit-overflow-scrolling: touch;
    /* proximity لا mandatory: الإجبار كان يقاوم السحب والتمرير البرمجي
       فيقفز الشريط ويصعب الوصول إلى عنصر بعينه */
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    cursor: grab;
    /* خط تمرير رفيع مرئي: الإخفاء الكامل كان يجعل الشريط يبدو ثابتاً */
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color, #7c3aed) transparent;
    padding-bottom: 7px;
}

nav.sidebar-nav.dragging,
.nav-links.dragging {
    cursor: grabbing;
    scroll-behavior: auto;   /* أثناء السحب يتبع الإصبع فوراً بلا تنعيم */
    scroll-snap-type: none;
}

/* الخط القابل للسحب — ٦ بكسل: ظاهر بما يكفي للإمساك، ورفيع بما يكفي
   ألّا يزاحم الأيقونات */
nav.sidebar-nav::-webkit-scrollbar,
.nav-links::-webkit-scrollbar {
    height: 6px;
}

nav.sidebar-nav::-webkit-scrollbar-track,
.nav-links::-webkit-scrollbar-track {
    background: var(--bd-faint, rgba(255, 255, 255, .07));
    border-radius: 999px;
    margin: 0 10px;
}

nav.sidebar-nav::-webkit-scrollbar-thumb,
.nav-links::-webkit-scrollbar-thumb {
    background: var(--primary-color, #7c3aed);
    border-radius: 999px;
    min-width: 46px;          /* مقبض قصير جداً يصعب الإمساك به */
    transition: background 0.15s ease;
}

nav.sidebar-nav::-webkit-scrollbar-thumb:hover,
.nav-links::-webkit-scrollbar-thumb:hover {
    background: var(--primary-hover, #a855f7);
}

/* الخط يأكل ٧ بكسل من ارتفاع الشريط — نعوّضها كي لا تُقصّ الأيقونات */
@media (hover: hover) and (pointer: fine) {
    aside.sidebar,
    aside.app-sidebar { min-height: 78px; }
}

/* على اللمس لا حاجة للخط — الإصبع يسحب مباشرة والمساحة أثمن */
@media (hover: none) and (pointer: coarse) {
    nav.sidebar-nav,
    .nav-links { scrollbar-width: none; padding-bottom: 0; }

    nav.sidebar-nav::-webkit-scrollbar,
    .nav-links::-webkit-scrollbar { display: none; height: 0; }
}

/* دليل بصري على وجود عناصر خلف الحافة — يظهر فقط حين يوجد مخفيّ.
   بدونه كان الشريط يبدو مقطوعاً لا قابلاً للتمرير. */
aside.app-sidebar::after,
aside.app-sidebar::before,
aside.sidebar::after,
aside.sidebar::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 34px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 2;
    display: block !important;   /* يتجاوز إخفاء ::before العام أعلاه */
}

aside.app-sidebar::before,
aside.sidebar::before {
    right: 0;
    border-radius: 24px 0 0 24px;
    background: linear-gradient(to left, var(--bg-glass, rgba(18, 18, 23, .92)), transparent);
}

aside.app-sidebar::after,
aside.sidebar::after {
    left: 0;
    border-radius: 0 24px 24px 0;
    background: linear-gradient(to right, var(--bg-glass, rgba(18, 18, 23, .92)), transparent);
}

aside.app-sidebar.has-start::before,
aside.sidebar.has-start::before { opacity: 1; }

aside.app-sidebar.has-end::after,
aside.sidebar.has-end::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    nav.sidebar-nav,
    .nav-links { scroll-behavior: auto; }
}

.nav-section {
    display: contents !important;
}

/* Nav items */
.nav-item a,
a.nav-item {
    flex: 0 0 auto;
    width: auto;
    min-width: 58px;
    height: 56px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    border-radius: 14px;
    padding: 6px 8px 6px;
    gap: 3px;
    border-right: none !important;
    background: transparent !important;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin: 0;
    scroll-snap-align: start;
    display: flex;
    text-decoration: none;
    color: var(--text-secondary);
    position: relative;
    transform-origin: bottom center;
    will-change: transform;
}

.nav-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.nav-icon svg,
.nav-icon .icon {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
}

.nav-item a.active .nav-icon svg,
a.nav-item.active .nav-icon svg,
.nav-item a.active .nav-icon,
a.nav-item.active .nav-icon {
    stroke: var(--text-main);
    color: var(--text-main);
    filter: none;
}

.nav-item a:hover,
a.nav-item:hover {
    color: var(--text-main);
    background: var(--dark-surface-hover) !important;
}

.nav-text {
    display: block !important;
    font-size: 0.58rem;
    white-space: nowrap;
    opacity: 0.9;
    text-align: center;
    line-height: 1;
    font-weight: 500;
}

.nav-badge {
    position: absolute;
    top: -4px;
    right: -5px;
    font-size: 9px;
    font-weight: 800;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 0 5px;
    min-width: 17px;
    height: 17px;
    border-radius: 9px;
    background-color: var(--error-solid);
    color: #ffffff; /* Typically badges text is always white */
    box-shadow: 0 0 0 2px var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-sizing: border-box;
    line-height: 1;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Active nav item - solid green background like reference */
.nav-item a.active,
a.nav-item.active {
    background: var(--success-bg) !important;
    border-right: none !important;
    color: var(--success-text) !important;
    box-shadow: none;
    border-radius: 14px;
}

.nav-item a.active .nav-text,
a.nav-item.active .nav-text {
    color: var(--success-text);
    font-weight: 600;
}

.mobile-logout {
    display: flex !important;
}

/* Ensure main content doesnt get covered by bottom nav */
main.main-content, main.app-main {
    padding-bottom: var(--main-content-bottom) !important;
}


/* Sidebar Footer */
.sidebar-footer {
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.logout-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.2s;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
}

.logout-btn:hover {
    background: var(--error-bg);
    color: var(--error-solid);
}

.logout-btn svg {
    width: 20px;
    height: 20px;
}

/* Sidebar User */
.sidebar-user {
    padding: 8px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--border-radius-full);
    background: linear-gradient(135deg, rgba(26,111,148, 0.7), rgba(26,127,85, 0.7));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(26,127,85, 0.15);
}

.user-info {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-main);
}

.user-role {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Notification Bell */
.notification-bell {
    position: relative;
    background: var(--dark-surface-hover);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: all 0.2s;
}

.notification-bell:hover {
    background: var(--overlay-hover);
    color: var(--text-main);
    border-color: var(--overlay-border-hover);
}

.notification-bell svg {
    width: 18px;
    height: 18px;
}

.notification-badge {
    position: absolute;
    top: -2px;
    left: -2px;
    background: var(--error-solid);
    color: white;
    font-size: 0.58rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 2px solid rgba(10, 14, 20, 0.95);
}

/* Notification Dropdown */
/* الموضعُ لا يُكتب هنا. كان هنا ‎top:60px; left:20px; right:20px‎ — وثلاثتُها
   مجتمعةً مع ‎width‎ حالةٌ مُفرَطةُ التقييد، وقاعدةُ CSS فيها أنّ المتصفّحَ
   يُهمل حافّةَ البداية في ‎direction: rtl‎ — أي يُهمل ‎left‎ ويُطبّق ‎right‎.
   فكلُّ ما يكتبه ‎positionDropdown()‎ في ‎style.left‎ كان يُهمَل، ولو كان
   نمطاً سطريّاً: الإفراطُ في التقييد يُحسَم بالقاعدة لا بالأولويّة. ولذلك
   ظهرت اللوحةُ ملاصقةً لليمين فوق القائمة الجانبيّة والجرسُ يساراً.
   الموضعُ كلُّه من JS الآن (‎.notification-dropdown‎ أدناه: ‎inset: auto‎). */
.notification-dropdown {
    display: none;
    position: absolute;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    z-index: 500;
    max-height: 400px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    animation: slideDown 0.2s ease;
}

.notification-dropdown.show {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notif-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
}

.notif-dropdown-header h4 {
    font-size: 0.95rem;
    font-weight: 600;
}

.notif-dropdown-body {
    max-height: 320px;
    overflow-y: auto;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border-color);
}

.notif-item:hover {
    background: var(--dark-surface-hover);
}

.notif-item.unread {
    background: var(--success-bg);
}

.notif-item.read {
    opacity: 0.7;
}

.notif-item-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

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

.notif-item-title {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 2px;
}

.notif-item-body {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Multi-line system notifications (e.g. field-visit memos) preserve newlines
   and wrap long URLs/lines within the dropdown card */
.notif-item-msg {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.5;
}

.notif-item-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 3px;
}

.notif-mark-read {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
}

.notif-mark-read:hover {
    background: rgba(26,127,85, 0.1);
}

/* ---- Collapsed Sidebar ---- */
aside.app-sidebar.collapsed {
    width: 64px;
    padding: 16px 8px;
}

aside.app-sidebar.collapsed .sidebar-brand,
aside.app-sidebar.collapsed .user-info,
aside.app-sidebar.collapsed .nav-text,
aside.app-sidebar.collapsed .nav-section-title,
aside.app-sidebar.collapsed .logo-text {
    display: none !important;
}

/* Nav Badge is kept visible in collapsed now! Just adjust shadow to match nav background */
aside.app-sidebar.collapsed .nav-badge {
    box-shadow: 0 0 0 2px var(--bg-card);
}

/* Header collapsed — center logo, hide toggle & brand */
aside.app-sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding-bottom: 12px;
    margin-bottom: 10px;
    gap: 0;
}

aside.app-sidebar.collapsed .sidebar-toggle {
    margin-right: 0;
    margin-top: 4px;
}

aside.app-sidebar.collapsed .sidebar-logo {
    width: 36px;
    height: 36px;
}

/* User section collapsed — stack vertically and center */
aside.app-sidebar.collapsed .sidebar-user {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
}

aside.app-sidebar.collapsed .user-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.8rem;
}

aside.app-sidebar.collapsed .notification-bell {
    padding: 4px;
}

aside.app-sidebar.collapsed .notification-bell svg {
    width: 16px;
    height: 16px;
}

/* Nav items collapsed — center icons */
aside.app-sidebar.collapsed .nav-item a,
aside.app-sidebar.collapsed a.nav-item {
    justify-content: center;
    padding: 10px 8px;
    border-radius: 10px;
    margin: 1px 0;
}

aside.app-sidebar.collapsed a.nav-item.active {
    border-right: none;
    background: rgba(26,127,85, 0.12);
}

aside.app-sidebar.collapsed .nav-icon {
    width: 24px;
    height: 24px;
}

aside.app-sidebar.collapsed .nav-icon svg {
    width: 22px;
    height: 22px;
}

/* Nav sections collapsed — tighter spacing */
aside.app-sidebar.collapsed .nav-section {
    margin-bottom: 4px;
}

/* Logout button collapsed */
aside.app-sidebar.collapsed .logout-btn {
    justify-content: center;
    padding: 10px 8px;
}

aside.app-sidebar.collapsed .logout-btn .nav-text {
    display: none !important;
}

aside.app-sidebar.collapsed .logout-btn svg {
    width: 20px;
    height: 20px;
}

/* Footer collapsed */
aside.app-sidebar.collapsed .sidebar-footer {
    padding-top: 10px;
}

/* Sidebar Header */
.sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.sidebar-logo {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(26,127,85, 0.2);
}

.sidebar-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sidebar-brand h1 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.3px;
}

.sidebar-brand span {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Sidebar Toggle */
.sidebar-toggle {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--overlay-subtle);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-right: auto;
}

.sidebar-toggle:hover {
    background: var(--overlay-hover);
    color: var(--text-main);
    border-color: var(--overlay-border-hover);
}

/* Sidebar Nav */
.sidebar-nav {
    flex: 1;
    padding: 0;
    overflow-y: auto;
    position: relative;
    z-index: 1;
}

.sidebar-nav::-webkit-scrollbar {
    width: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

/* Mobile overlay */
.sidebar-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
}

.sidebar-mobile-overlay.show {
    display: block;
}

/* Bell animation */
@keyframes bellRing {
    0% {
        transform: rotate(0);
    }

    10% {
        transform: rotate(15deg);
    }

    20% {
        transform: rotate(-15deg);
    }

    30% {
        transform: rotate(12deg);
    }

    40% {
        transform: rotate(-12deg);
    }

    50% {
        transform: rotate(0);
    }
}

.notification-bell.ring svg {
    animation: bellRing 0.8s ease;
}


/* ============================================
   Main Content
   ============================================ */
main.main-content,
main.app-main {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

main.main-content::-webkit-scrollbar,
main.app-main::-webkit-scrollbar {
    width: 6px;
}

main.main-content::-webkit-scrollbar-thumb,
main.app-main::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

/* Top Bar / Content Header */
header.top-bar,
header.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 12px;
}

.page-title h1,
h1.page-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.page-title p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--text-main);
}

.breadcrumb svg {
    width: 14px;
    height: 14px;
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    font-size: 1rem;
}

.action-btn:hover {
    background: var(--overlay-hover);
    transform: translateY(-2px);
}

/* ============================================
   Bento Grid / Stats
   ============================================ */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.bento-card {
    background: var(--srf-raised, var(--bg-card));
    border: 1px solid var(--bd-base, var(--border-color));
    border-radius: var(--r-lg, var(--radius-lg));
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: border-color var(--imp-dur, 180ms) var(--imp-ease, ease),
                box-shadow var(--imp-dur, 180ms) var(--imp-ease, ease);
}

.bento-card:hover {
    border-color: var(--bd-strong, var(--overlay-border-hover));
    box-shadow: var(--imp-shadow-md, var(--shadow-md));
    transform: none;
}

/* Drop the radial-glow decoration — it's pure noise on a modern UI */
.bento-card.primary-glow::after { display: none; }

.bento-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm, var(--radius-md));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.bento-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}

.bento-icon.green  { background: var(--ok-soft,   var(--success-bg)); color: var(--ok,   var(--success-text)); }
.bento-icon.blue   { background: var(--inf-soft,  var(--info-bg));    color: var(--inf,  var(--info-text)); }
.bento-icon.orange { background: var(--warn-soft, var(--warning-bg)); color: var(--warn, var(--warning-text)); }
.bento-icon.red    { background: var(--dng-soft,  var(--error-bg));   color: var(--dng,  var(--error-text)); }

.bento-icon.purple {
    background: var(--purple-bg);
    color: var(--purple-text);
}

.stat-value {
    font-size: 1.85rem;
    font-weight: 700;
    margin: 8px 0 4px 0;
    color: var(--ink-strong, var(--text-main));
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.stat-label {
    color: var(--ink-muted, var(--text-secondary));
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Stat grids — uniform auto-fit, narrower min to allow 4-up on standard widths */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

/* Modern stat card: quiet border, no transform on hover */
.stat-card {
    background: var(--srf-raised, var(--bg-card));
    border: 1px solid var(--bd-base, var(--border-color));
    border-radius: var(--r-lg, var(--radius-lg));
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    transition: border-color var(--imp-dur, 180ms) var(--imp-ease, ease),
                box-shadow var(--imp-dur, 180ms) var(--imp-ease, ease);
}

.stat-card:hover {
    border-color: var(--bd-strong, var(--overlay-border-hover));
    box-shadow: var(--imp-shadow-md, var(--shadow-card-hover));
    transform: none;
}

/* Subtle icon — small, rounded, semantic color but soft */
.stat-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm, var(--radius-md));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.stat-icon svg {
    width: 18px;
    height: 18px;
}

.stat-icon.blue   { background: var(--inf-soft,  var(--info-bg));    color: var(--inf,  var(--info-text)); }
.stat-icon.green  { background: var(--ok-soft,   var(--success-bg)); color: var(--ok,   var(--success-text)); }
.stat-icon.orange { background: var(--warn-soft, var(--warning-bg)); color: var(--warn, var(--warning-text)); }
.stat-icon.red    { background: var(--dng-soft,  var(--error-bg));   color: var(--dng,  var(--error-text)); }
.stat-icon.purple { background: var(--purp-soft, var(--purple-bg));  color: var(--purp, var(--purple-text)); }

/* ============================================
   Cards (generic) — modern, quiet, no transform on hover
   ============================================ */
.card {
    background: var(--srf-raised, var(--bg-card));
    border: 1px solid var(--bd-base, var(--border-color));
    border-radius: var(--r-lg, var(--radius-lg));
    overflow: hidden;
    transition: border-color var(--imp-dur, 180ms) var(--imp-ease, ease);
}

.card:hover {
    border-color: var(--bd-strong, var(--overlay-border-hover));
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bd-faint, var(--border-color));
}

.card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ink-strong, var(--text-main));
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.card-title svg {
    width: 16px;
    height: 16px;
    color: var(--ink-muted, var(--text-secondary));
}

.card-body {
    padding: 18px 20px;
}

.mb-4 {
    margin-bottom: 20px;
}

/* ============================================
   Modern Tables
   ============================================ */
.table-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.table-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

table.modern-table,
table.data-table {
    width: 100%;
    min-width: 600px; /* Forces tables to be scrollable horizontally on mobile */
    border-collapse: collapse;
}

.modern-table th,
.data-table th {
    text-align: right;
    padding: 14px 20px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    background: var(--overlay-subtle);
}

.modern-table td,
.data-table td {
    padding: 14px 20px;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
}

.modern-table tr:hover td,
.data-table tr:hover td {
    background: var(--overlay-subtle);
}

.modern-table tr:last-child td,
.data-table tr:last-child td {
    border-bottom: none;
}

/* Status Chips */
.status-chip {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.status-green {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
}

.status-blue {
    background: var(--info-bg);
    color: var(--info-text);
    border: 1px solid var(--info-border);
}

.status-orange {
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-border);
}

.status-red {
    background: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-border);
}

.status-purple {
    background: var(--purple-bg);
    color: var(--purple-text);
    border: 1px solid rgba(95,75,182, 0.3);
}

/* ============================================
   Badges
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--overlay-hover);
    color: var(--text-secondary);
}

.badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.badge-success,
.badge.badge-success {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
}

.badge-success .badge-dot {
    background: var(--success-text);
}

.badge-error,
.badge.badge-error {
    background: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-border);
}

.badge-error .badge-dot {
    background: var(--error-text);
}

.badge-warning,
.badge.badge-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-border);
}

.badge-warning .badge-dot {
    background: var(--warning-text);
}

.badge-info,
.badge.badge-info {
    background: var(--info-bg);
    color: var(--info-text);
    border: 1px solid var(--info-border);
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    text-decoration: none;
    white-space: nowrap;
}

.btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Impeccable button system — terracotta primary, solid semantic variants,
   no glow shadows, no transform-lift hover. Subtle brightness shift gives
   feedback on solids; ghost shifts surface. (Converted from the legacy
   green-primary block; applies app-wide.) */
.btn:hover {
    filter: brightness(0.96);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: var(--acc);
    color: var(--srf-base);
}

.btn-primary:hover {
    background: var(--acc-strong);
}

.btn-secondary {
    background: var(--inf);
    color: var(--srf-base);
}

.btn-success {
    background: var(--ok);
    color: var(--srf-base);
}

.btn-danger {
    background: var(--dng);
    color: var(--srf-base);
}

.btn-warning {
    background: var(--warn);
    color: var(--srf-base);
}

.btn-ghost {
    background: transparent;
    color: var(--ink-base);
    border: 1px solid var(--bd-base);
}

.btn-ghost:hover {
    background: var(--srf-sunk);
    color: var(--ink-strong);
    filter: none;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.8rem;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 1rem;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon:hover {
    background: var(--overlay-subtle);
    color: var(--text-main);
}

/* ============================================
   Forms
   ============================================ */
.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.form-input,
.form-select {
    width: 100%;
    padding: 10px 14px;
    background: var(--overlay-input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.form-input:focus,
.form-select:focus {
    border-color: var(--primary-color);
    outline: none;
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.form-input[type="date"] {
    color-scheme: light;
}
.dark .form-input[type="date"] {
    color-scheme: dark;
}

/* Select & option theming */
select,
select.form-select,
select.form-input,
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    padding-left: 35px;
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    color-scheme: light;
    cursor: pointer;
}
.dark select,
.dark select.form-select,
.dark select.form-input,
.dark select.form-control {
    color-scheme: dark;
}

select option {
    background-color: var(--bg-card);
    color: var(--text-main);
}

/* form-control dark theme (used by inline modals) */
.form-control {
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: inherit;
}

/* Search */
.search-input {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--overlay-input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0 14px;
}

.search-input svg {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.search-input input {
    flex: 1;
    padding: 10px 0;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
}

.search-input input::placeholder {
    color: var(--text-muted);
}

/* search-box alias */
.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--overlay-input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0 14px;
    position: relative;
}

.search-box svg {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.search-box input {
    flex: 1;
    padding: 10px 0;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
}

.search-box input::placeholder {
    color: var(--text-muted);
}

/* ============================================
   Modals
   ============================================ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-overlay.show {
    display: flex;
}

.modal-overlay.show .modal {
    display: block !important;
}

.modal {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    gap: 16px;
}

.modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    flex: 1;
    word-break: break-word;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 8px;
}

.modal-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: var(--overlay-subtle);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.modal-close:hover {
    background: var(--error-bg);
    color: var(--error-text);
}

.modal-body {
    padding: 20px 24px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
}

/* ============================================
   Toast Notifications
   ============================================ */
.toast-container {
    position: fixed;
    bottom: 24px;
    left: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 0.9rem;
    box-shadow: var(--shadow-toast);
    animation: toastIn 0.3s ease;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.toast.success {
    border-color: var(--success-border);
}

.toast.error {
    border-color: var(--error-border);
}

.toast.warning {
    border-color: var(--warning-border);
}

.toast.info {
    border-color: var(--info-border);
}

/* ============================================
   SVG Icon Utility
   ============================================ */
.icon {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
}

.icon-sm {
    width: 16px;
    height: 16px;
}

.icon-md {
    width: 20px;
    height: 20px;
}

.icon-lg {
    width: 24px;
    height: 24px;
}

.icon-xl {
    width: 32px;
    height: 32px;
}

/* ============================================
   Utilities
   ============================================ */
.text-center {
    text-align: center;
}

.text-muted {
    color: var(--text-muted);
}

.text-secondary {
    color: var(--text-secondary);
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 12px;
}

.gap-4 {
    gap: 16px;
}

.hidden {
    display: none !important;
}

.customer-name-link {
    cursor: pointer;
    color: var(--primary-color);
}

.customer-name-link:hover {
    text-decoration: underline;
}

/* Content body alias */
.content-body {
    padding: 0;
}

.page-content {
    padding: 0;
}

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

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

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

/* ============================================
   Filters / Toolbar
   ============================================ */
.filters-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 16px;
}

.pagination button {
    padding: 8px 14px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.pagination button:hover {
    background: var(--overlay-hover);
    color: var(--text-main);
}

.pagination button.active {
    background: var(--primary-color);
    color: #000;
    border-color: var(--primary-color);
}

.pagination button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ============================================
   Tab System
   ============================================ */
.tabs {
    display: flex;
    gap: 4px;
    background: var(--overlay-subtle);
    padding: 4px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.tab-btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
}

.tab-btn:hover {
    color: var(--text-main);
}

.tab-btn.active {
    background: var(--bg-card);
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* empty state */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Loading */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 30px auto;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   Mobile Responsiveness
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Tablet range: sidebar hidden, revealed via overlay toggle */
    aside.app-sidebar:not(.open) {
        display: none;
    }

    aside.app-sidebar.open {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: var(--sidebar-width);
        z-index: 1000;
        display: flex;
    }

    #sidebarContainer {
        width: 0;
    }

    #sidebarContainer.collapsed {
        width: 0;
    }
}

@media (max-width: 768px) {

    /* ‎.app-container‎ كانت هنا — انضمّت سهواً إلى محدِّد النوافذ
       السفلية. و‎align-items: flex-end‎ في عمودٍ مرن يُلغي التمدّد
       (stretch)، فيأخذ ‎main‎ عرضَ محتواه الطبيعيّ لا عرض الشاشة:
       752px داخل حاويةٍ عرضها 375، و‎overflow-x: hidden‎ يقصّ 377px
       من كل صفحةٍ تستعملها. الفاصلة وحدها كانت العلّة.

       والصفحة الوحيدة التي تستعملها هي accounting.html — ولذلك لم
       تظهر العلّة في الفحص العامّ إلا عندها. */

    /* Mobile Bottom Sheet Modals */
    .modal-overlay {
        align-items: flex-end;
    }

    /* وتثبيتٌ صريح كي لا تعود العلّة من قاعدةٍ أخرى */
    .app-container > main,
    .app-layout > main {
        align-self: stretch;
        width: 100%;
        min-width: 0;
    }

    .modal {
        /* ورقة سفلية بعرض كامل. المودال عنصر flex داخل الـ overlay (ليس
           position:fixed) فـ left/right/translateX تدفعه خارج الشاشة —
           لذا نستعمل العرض الكامل بلا أي transform (نفس نمط تفاصيل العميل). */
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        transform: none !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: var(--shadow-card-hover) !important;
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 90vh !important;
        display: flex;
        flex-direction: column;
    }

    .modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(20px + var(--safe-bottom));
    }

    /* Main content adjustments */
    main.main-content,
    main.app-main {
        padding: 12px;
        padding-top: calc(12px + var(--safe-top));
        -webkit-overflow-scrolling: touch;
    }

    /* Top bar stack */
    header.top-bar,
    header.content-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Table mobile stack view removed as requested for horizontal scrolling capability */

    /* Compact grids: force 2-column on mobile */
    .bento-grid,
    .stats-grid,
    .classification-stats-grid,
    .admin-stats,
    .emp-grid,
    .brokers-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Compact cards on mobile */
    .bento-card,
    .stat-card,
    .a-stat,
    .emp-card,
    .broker-card {
        padding: 12px !important;
    }

    .bento-card .stat-label,
    .stat-card .stat-label,
    .a-stat .a-stat-lbl,
    .emp-card .emp-stat-lbl {
        font-size: 0.7rem;
    }

    .stat-value,
    .a-stat-val,
    .emp-stat-val {
        font-size: 1.2rem !important;
    }

    .stat-label,
    .bento-icon {
        margin-bottom: 6px;
    }

    .bento-icon {
        width: 34px;
        height: 34px;
    }

    .bento-icon svg {
        width: 18px;
        height: 18px;
    }

    /* Responsive table containers */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Mobile menu btn should be hidden since we have bottom nav */
    .mobile-menu-btn {
        display: none !important;
    }
}

@media (max-width: 480px) {

    /* Keep 2-col grids even on small screens to save vertical space */
    .bento-grid,
    .stats-grid,
    .classification-stats-grid,
    .admin-stats,
    .emp-grid,
    .brokers-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    /* Even more compact cards on very small screens */
    .bento-card,
    .stat-card,
    .a-stat,
    .emp-card,
    .broker-card {
        padding: 10px !important;
    }

    .stat-value,
    .a-stat-val,
    .emp-stat-val {
        font-size: 1rem !important;
    }

    /* Toast above bottom nav */
    .toast-container {
        bottom: 80px;
    }
}

/* ============================================
   Star Logout Button (Animated)
   ============================================ */
.star-logout-btn {
    position: relative;
    padding: 0 16px;
    height: 48px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dng); /* red text for logout */
    background: rgba(179,38,30, 0.1);
    border: 2px solid rgba(179,38,30, 0.2);
    border-radius: 24px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-left: 5px;
    margin-right: 5px;
    overflow: visible;
    text-decoration: none;
    flex: 0 0 auto;
}

.star-logout-btn:hover {
    background: transparent;
    color: var(--dng);
    box-shadow: 0 0 15px rgba(179,38,30, 0.4);
    border-color: var(--dng);
}

.star-logout-btn:active {
    transform: scale(0.95);
}

.star-icon {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    fill: var(--dng);
    filter: drop-shadow(0 0 0 transparent);
}

.star-icon svg {
    width: 100%;
    height: auto;
    display: block;
}

.star-logout-btn .star-icon-1 { top: 20%; left: 20%; width: 25px; transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96); opacity: 0; }
.star-logout-btn .star-icon-2 { top: 45%; left: 45%; width: 15px; transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); opacity: 0; }
.star-logout-btn .star-icon-3 { top: 40%; left: 40%; width: 5px; transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); opacity: 0; }
.star-logout-btn .star-icon-4 { top: 20%; left: 40%; width: 8px; transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01); opacity: 0; }
.star-logout-btn .star-icon-5 { top: 25%; left: 45%; width: 15px; transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01); opacity: 0; }
.star-logout-btn .star-icon-6 { top: 5%; left: 50%; width: 5px; transition: all 0.8s ease-in-out; opacity: 0; }

.star-logout-btn:hover .star-icon {
    opacity: 1;
}

.star-logout-btn:hover .star-icon-1 { top: -80%; left: -30%; filter: drop-shadow(0 0 10px rgba(179,38,30, 0.5)); z-index: 2; }
.star-logout-btn:hover .star-icon-2 { top: -25%; left: 10%; filter: drop-shadow(0 0 10px rgba(179,38,30, 0.5)); z-index: 2; }
.star-logout-btn:hover .star-icon-3 { top: 55%; left: 25%; filter: drop-shadow(0 0 10px rgba(179,38,30, 0.5)); z-index: 2; }
.star-logout-btn:hover .star-icon-4 { top: 30%; left: 80%; filter: drop-shadow(0 0 10px rgba(179,38,30, 0.5)); z-index: 2; }
.star-logout-btn:hover .star-icon-5 { top: 25%; left: 115%; filter: drop-shadow(0 0 10px rgba(179,38,30, 0.5)); z-index: 2; }
.star-logout-btn:hover .star-icon-6 { top: 5%; left: 60%; filter: drop-shadow(0 0 10px rgba(179,38,30, 0.5)); z-index: 2; }

/* --------------------------------------
   Table Actions Star Button (Emerald Solid Green & White)
--------------------------------------- */
.star-btn {
    position: relative;
    padding: 10px 30px !important; /* Thick padding to match image aspect ratio */
    min-width: 140px !important; /* Ensure it never squishes */
    white-space: nowrap !important; /* Keep text on one line */
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #ffffff !important; 
    background-color: var(--ok) !important; /* Solid Emerald Green Default */
    border: 2px solid var(--ok) !important; 
    border-radius: 8px !important; /* Match image rounding approx */
    box-shadow: 0 4px 12px rgba(26,127,85, 0.3) !important; /* Default soft shadow */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; 
    cursor: pointer;
    overflow: visible; 
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
}

.star-btn:hover {
    background-color: transparent !important; /* Reveal dark background */
    color: var(--ok) !important; /* Text matches border */
    box-shadow: 0 0 25px rgba(26,127,85, 0.7), inset 0 0 10px rgba(26,127,85, 0.3) !important; 
    transform: translateY(-2px); 
}

.star-btn:active {
    transform: scale(0.96) translateY(0);
}

.star-wrap {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    fill: var(--ok); /* Default matches button base or border */
    opacity: 0;
    transition-property: all;
    filter: drop-shadow(0 0 0 transparent);
}

.star-btn:hover .star-wrap {
    opacity: 1;
    z-index: 2;
    filter: drop-shadow(0 0 10px rgba(26,127,85, 0.8)); /* Green glow on stars */
}

/* Animations perfectly tuned for the table width */
.star-wrap.star-1 { top: 20%; left: 20%; width: 22px; transition: all 1000ms cubic-bezier(0.05, 0.83, 0.43, 0.96); }
.star-btn:hover .star-wrap.star-1 { top: -60%; left: -10%; transform: rotate(45deg); }

.star-wrap.star-2 { top: 45%; left: 45%; width: 14px; transition: all 1000ms cubic-bezier(0, 0.4, 0, 1.01); }
.star-btn:hover .star-wrap.star-2 { top: -20%; left: 15%; transform: rotate(90deg); }

.star-wrap.star-3 { top: 40%; left: 40%; width: 6px; transition: all 1000ms cubic-bezier(0, 0.4, 0, 1.01); }
.star-btn:hover .star-wrap.star-3 { top: 50%; left: 5%; transform: rotate(180deg); }

.star-wrap.star-4 { top: 20%; left: 40%; width: 9px; transition: all 800ms cubic-bezier(0, 0.4, 0, 1.01); }
.star-btn:hover .star-wrap.star-4 { top: 30%; left: 90%; transform: rotate(-45deg); }

.star-wrap.star-5 { top: 25%; left: 45%; width: 13px; transition: all 600ms cubic-bezier(0, 0.4, 0, 1.01); }
.star-btn:hover .star-wrap.star-5 { top: 15%; left: 105%; transform: rotate(-90deg); }

.star-wrap.star-6 { top: 5%; left: 50%; width: 6px; transition: all 800ms ease-in-out; }
.star-btn:hover .star-wrap.star-6 { top: -10%; left: 60%; transform: rotate(45deg); }

/* ============================================
   ⚡ Speed Engine - Loading Bar
   ============================================ */
#speedLoadingBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
}

#speedLoadingBar.active {
    opacity: 1;
}

#speedLoadingBar .speed-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-petrol), var(--brand-teal), var(--brand-petrol));
    background-size: 200% 100%;
    animation: speedBarAnim 0.8s linear infinite;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 10px rgba(26,127,85, 0.5), 0 0 5px rgba(26,127,85, 0.3);
    width: 100%;
    transform-origin: left;
    animation: speedBarProgress 2s ease-out forwards, speedBarShimmer 0.8s linear infinite;
}

@keyframes speedBarProgress {
    0% { transform: scaleX(0); }
    20% { transform: scaleX(0.5); }
    50% { transform: scaleX(0.75); }
    80% { transform: scaleX(0.9); }
    100% { transform: scaleX(0.95); }
}

@keyframes speedBarShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ============================================
   MOBILE RESPONSIVE - Global
   ============================================ */

/* --- Viewport Meta Helpers --- */
@media screen and (max-width: 768px) {

    /* --- Page Header --- */
    header, .page-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }

    header h1, .page-header h1 {
        font-size: 1.2rem !important;
        width: 100%;
    }

    header .header-actions,
    header > div:last-child,
    .page-header .header-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100%;
    }

    header .header-actions .btn,
    header .header-actions button,
    .page-header .header-actions .btn {
        font-size: 0.75rem !important;
        padding: 6px 10px !important;
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
    }

    /* Main Content */
    main.main-content,
    main.app-main {
        padding: calc(10px + var(--safe-top)) 10px calc(180px + var(--safe-bottom)) 10px !important;
        overflow-x: hidden !important;
    }
    
    .app-container,
    .app-layout {
        overflow-x: hidden !important;
    }

    /* --- Tables: Scrollable Container --- */
    .table-wrapper,
    .table-container,
    .table-responsive,
    div[style*="overflow-x"] {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain;
        padding-bottom: 25px; /* So scrollbar doesn't hover over last row */
        scroll-behavior: smooth;
    }

    main table {
        display: table !important;
        width: max-content !important; 
        min-width: 100% !important;
        overflow-x: visible !important;
    }

    table {
        min-width: 600px; /* Reduced so it doesn't break as fast */
        font-size: 0.78rem !important;
    }

    table th,
    table td {
        padding: 8px 6px !important;
        white-space: nowrap;
    }

    /* Target action buttons directly in mobile */
    .btn-action, .btn-small, td .btn, td button {
        padding: 6px 14px !important;
        font-size: 0.75rem !important;
        min-width: max-content !important;
        white-space: nowrap !important;
        flex: 0 0 auto;
    }

    table th:last-child,
    table td:last-child {
        position: static; /* removed sticky as it overlaps tall items on mobile */
        border-right: none;
    }

    .star-btn {
        padding: 8px 16px !important;
        min-width: auto !important;
        font-size: 0.85rem !important;
        white-space: normal !important;
        height: auto !important;
    }

    table th {
        font-size: 0.72rem !important;
        font-weight: 600;
    }

    /* --- Data Cards / Stats --- */
    .stats-grid,
    .grid-4,
    .grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .stat-card,
    .stats-card {
        padding: 12px !important;
    }

    .stat-card h3,
    .stats-card h3 {
        font-size: 1.1rem !important;
    }

    /* --- Modals & Overlays --- */
    .modal-overlay {
        padding: 10px !important;
        align-items: flex-start !important;
        padding-top: 20px !important;
        padding-top: calc(15px + var(--safe-top)) !important;
    }

    .modal-overlay .modal,
    .modal-overlay > div,
    .modal-content {
        /* عرض كامل بلا transform — إصلاح انزياح المودال خارج الشاشة على الجوال. */
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        transform: none !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: var(--shadow-card-hover) !important;
        max-height: 85vh !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
    }

    /* Customer Details Modal */
    .customer-details-modal .modal {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 90vh !important;
    }

    .customer-detail-section {
        padding: 10px !important;
    }

    .detail-row {
        flex-direction: column !important;
        gap: 4px !important;
        padding: 8px 0 !important;
    }

    .detail-value {
        text-align: right !important;
    }

    .action-buttons {
        flex-direction: column !important;
    }

    .action-buttons .btn {
        width: 100% !important;
        min-width: auto !important;
    }

    /* --- Forms & Inputs --- */
    .form-control,
    .form-input,
    .form-select,
    select,
    input[type="text"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"],
    input[type="week"],
    input[type="search"],
    input[type="url"],
    input[type="password"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
        min-height: 42px;
    }

    /* --- Buttons --- */
    .btn {
        font-size: 0.8rem !important;
        padding: 8px 14px !important;
        min-height: 40px;
    }

    /* --- Breadcrumb --- */
    .breadcrumb {
        font-size: 0.72rem !important;
    }

    /* --- Calendar/Date picker --- */
    input[type="date"] {
        min-width: 120px !important;
    }

    /* قاعدةُ موضعٍ قديمةٌ أُزيلت: كانت ‎left/right/top‎ بـ‎!important‎ داخل
       ‎max-width: 768px‎، وورقةُ الهاتف الحقيقيّة ‎max-width: 767.98px‎ — فعند
       عرضٍ يساوي 768px بالضبط كانت هذه تُطبَّق ولا تُطبَّق ورقةُ الورقة
       السفليّة، فتظهر اللوحةُ ممدودةً بلا شكل. واللوحةُ اليومَ تُوضَع من JS
       على الحاسب و‎inset: 0‎ على الهاتف، فلا حاجةَ لأيٍّ منها. */

    /* --- Badge adjustments --- */
    .badge {
        font-size: 0.68rem !important;
        padding: 2px 6px !important;
    }

    /* --- Actions dropdown --- */
    .actions-dropdown {
        min-width: 160px !important;
        right: auto !important;
        left: 0 !important;
    }

    /* --- Employee of Month Widget --- */
    .employee-month-card {
        padding: 12px !important;
    }

    /* --- Filters (common classes) --- */
    .filters-row,
    .filter-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .filters-row > *,
    .filter-row > * {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    /* --- Contacts/Customers inline styles override --- */
    .cust-stats-row {
        gap: 6px !important;
        padding: 0 10px !important;
        flex-wrap: nowrap !important; /* Force scroll */
    }

    .cust-stat-card {
        min-width: 120px !important;
        padding: 8px 10px !important;
        gap: 5px !important;
        flex: 0 0 auto !important; /* Prevent squishing */
    }

    .cust-stat-count {
        font-size: 1rem !important;
    }

    .cust-stat-label {
        font-size: 0.58rem !important;
    }

    .cust-filters-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 0 10px !important;
    }

    .cust-filter-search {
        max-width: 100% !important;
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .cust-filter-select-wrap {
        flex: 1 1 calc(50% - 4px) !important;
    }

    .cust-filter-refresh-btn {
        flex: 0 0 auto;
    }

    /* --- Bulk Actions --- */
    #bulkActionsParams,
    .bulk-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    #bulkActionsParams .btn,
    .bulk-actions .btn {
        font-size: 0.72rem !important;
        padding: 6px 10px !important;
    }

    /* --- Toast Messages --- */
    .toast-container {
        left: 10px !important;
        right: 10px !important;
        bottom: 100px !important;
    }

    /* --- Loading Overlay --- */
    #custDetailLoading > div {
        padding: 20px 30px !important;
    }

    /* --- Page Scroll --- */
    .content-scroll,
    [style*="overflow-y: auto"],
    [style*="overflow-y:auto"] {
        -webkit-overflow-scrolling: touch;
    }

    /* --- Brokers Layout --- */
    .brokers-grid {
        grid-template-columns: 1fr !important;
    }
}

/* --- Extra Small Screens (< 400px) --- */
@media screen and (max-width: 400px) {

    header h1, .page-header h1 {
        font-size: 1rem !important;
    }

    .cust-stat-card {
        min-width: 75px !important;
        padding: 6px 8px !important;
    }

    .cust-stat-count {
        font-size: 0.9rem !important;
    }

    .cust-stat-label {
        font-size: 0.52rem !important;
    }

    .cust-filter-select-wrap {
        flex: 1 1 100% !important;
    }

    table {
        font-size: 0.72rem !important;
    }

    /* Bottom nav spacing */
    aside.sidebar,
    aside.app-sidebar {
        padding: 4px 4px !important;
        min-height: 64px;
        border-radius: 18px;
    }

    .nav-item a,
    a.nav-item {
        min-width: 46px !important;
        height: 50px !important;
        padding: 4px 5px 4px !important;
    }

    .nav-text {
        font-size: 0.5rem !important;
    }

    .nav-icon svg,
    .nav-icon .icon {
        width: 18px !important;
        height: 18px !important;
    }
}

/* --- Dashboard Scrollable Widgets --- */
.activity-list,
.table-responsive,
[id="topEmployees"] {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 5px;
}



/* «تواصل» تخطيط تطبيق كامل الارتفاع، فلا يرث حشوة صفحات المحتوى أو تمريرها. */
html:has(#chatContainer) body main.app-main {
    padding: 0 !important;
    overflow: hidden !important;
    min-height: 0;
}

/* زر المساعد ينافس أدوات المحادثة، لذلك يختفي في واجهتي الدردشة فقط. */
html:has(#chatContainer) body #daRoot,
html:has(.wa-app) body #daRoot {
    display: none;
}

@media (max-width: 768px) {
    aside.sidebar,
    aside.app-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        transform: none !important;
        border-radius: 24px 24px 0 0 !important;
        margin-bottom: 0 !important;
        border-bottom: none !important;
    }
}

/* ============================================
   Light Mode — Override inline dark styles
   Applied when ThemeManager sets light mode (no .dark class)
   ============================================ */

/* Stats Row Cards */
/*  كان ‎--overlay-subtle‎ أي ‎rgba(0,0,0,.03)‎ — رقعةٌ من «الوضع الفاتح»
    القديم تغلب ‎--c-bg‎ الذي تضبطه الصفحة. والتصميم يجعل بطاقة الرقم
    بيضاء بحدٍّ شعريّ، واللون في الرقم. و‎--srf-raised‎ يصحّ في الوضعين. */
.cust-stat-card {
    background: var(--srf-raised) !important;
    border-color: var(--bd-base) !important;
}
.cust-stat-card:hover {
    border-color: var(--overlay-border-hover) !important;
}
.cust-stat-count {
    color: var(--text-main) !important;
}
.cust-stat-label {
    color: var(--text-secondary) !important;
}

/* Filters Row */
.cust-filter-search {
    background: var(--overlay-input-bg) !important;
    border-color: var(--border-color) !important;
}
.cust-filter-search:focus-within {
    background: var(--overlay-hover) !important;
}
.cust-filter-search svg {
    color: var(--text-muted) !important;
}
.cust-filter-search input {
    color: var(--text-main) !important;
}
.cust-filter-search input::placeholder {
    color: var(--text-muted) !important;
}

.cust-filter-select {
    background: var(--overlay-input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
.cust-filter-select:hover,
.cust-filter-select:focus {
    border-color: var(--overlay-border-hover) !important;
    background: var(--overlay-hover) !important;
}
.cust-filter-select option {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
}
.cust-filter-chevron {
    color: var(--text-muted) !important;
}

.cust-filter-refresh-btn {
    background: var(--overlay-input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
.cust-filter-refresh-btn:hover {
    background: var(--overlay-hover) !important;
    border-color: var(--overlay-border-hover) !important;
    color: var(--text-main) !important;
}

/* Table styling overrides */
.cust-table-wrap table th {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}
.cust-table-wrap table td {
    color: var(--text-main) !important;
    border-bottom-color: var(--border-color) !important;
}
.cust-table-wrap table tr:hover td {
    background: var(--overlay-subtle) !important;
}

/* Modals and forms generated by components.js */
.form-label {
    color: var(--text-secondary) !important;
}
.form-input,
.form-control {
    background: var(--overlay-input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* Loading spinner dark bg override */
:root:not(.dark) .loading-spinner-container,
:root:not(.dark) [style*="background:rgba(15,15,20"] {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
:root:not(.dark) [style*="color:rgba(255,255,255,0.7)"] {
    color: var(--text-secondary) !important;
}
:root:not(.dark) [style*="color:rgba(255,255,255,0.5)"] {
    color: var(--text-muted) !important;
}
:root:not(.dark) [style*="color:rgba(255,255,255,0.3)"] {
    color: var(--text-muted) !important;
}
:root:not(.dark) [style*="color:rgba(255,255,255,0.4)"] {
    color: var(--text-muted) !important;
}
:root:not(.dark) [style*="color:#fff"],
:root:not(.dark) [style*="color: #fff"],
:root:not(.dark) [style*="color:white"],
:root:not(.dark) [style*="color: white"] {
    color: var(--text-main) !important;
}
:root:not(.dark) [style*="background:rgba(0,0,0,0.2)"],
:root:not(.dark) [style*="background: rgba(0,0,0,0.2)"],
:root:not(.dark) [style*="background:rgba(0,0,0,0.3)"] {
    background: var(--overlay-input-bg) !important;
}
:root:not(.dark) [style*="border:1px solid rgba(255,255,255"],
:root:not(.dark) [style*="border: 1px solid rgba(255,255,255"] {
    border-color: var(--border-color) !important;
}

/* Customer details profile modal */
:root:not(.dark) [style*="background: linear-gradient(145deg, #0f172a"],
:root:not(.dark) [style*="background:linear-gradient(145deg, #0f172a"] {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Customer edit form labels and inputs */
:root:not(.dark) [style*="color:rgba(255,255,255,0.7)"] {
    color: var(--text-secondary) !important;
}

/* Action buttons in tables */
.actions-dots-btn {
    background: var(--overlay-input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
.actions-dots-btn:hover {
    background: var(--overlay-hover) !important;
}

/* Dropdown menus */
.actions-dropdown {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-toast) !important;
}
.actions-dropdown-item:hover {
    background: var(--overlay-hover) !important;
}

/* Custom date inputs */
.custom-date-input {
    background: var(--overlay-input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
:root:not(.dark) .custom-date-input {
    color-scheme: light !important;
}

/* Table inline selects & inputs */
table .form-input,
table .form-select,
table select {
    background: var(--overlay-input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* ============================================
   Wave 3 — Light-mode parity for Tailwind opacity utilities + A11y basics
   ============================================ */

/* Tailwind's `text-white/X` and `bg-white/X` resolve to literal white at
   reduced opacity, which gives 1) invisible text and 2) ghost surfaces on
   light backgrounds.  Below remaps the most-used opacity tiers to the
   equivalent slate/neutral colours when light mode is active. */

body.light-mode .text-white { color: var(--ink-strong) !important; }
body.light-mode .text-white\/90 { color: rgba(16,42,53, 0.92) !important; }
body.light-mode .text-white\/80 { color: rgba(16,42,53, 0.85) !important; }
body.light-mode .text-white\/70 { color: rgba(16,42,53, 0.75) !important; }
body.light-mode .text-white\/60 { color: rgba(16,42,53, 0.65) !important; }
body.light-mode .text-white\/50 { color: rgba(16,42,53, 0.55) !important; }
body.light-mode .text-white\/40 { color: rgba(16,42,53, 0.45) !important; }
body.light-mode .text-white\/30 { color: rgba(16,42,53, 0.35) !important; }

body.light-mode .bg-white\/5  { background-color: rgba(16,42,53, 0.04) !important; }
body.light-mode .bg-white\/10 { background-color: rgba(16,42,53, 0.06) !important; }
body.light-mode .bg-white\/20 { background-color: rgba(16,42,53, 0.08) !important; }
body.light-mode .bg-black\/30 { background-color: rgba(16,42,53, 0.05) !important; }
body.light-mode .bg-black\/40 { background-color: rgba(16,42,53, 0.06) !important; }

body.light-mode .border-white\/5  { border-color: rgba(16,42,53, 0.06) !important; }
body.light-mode .border-white\/10 { border-color: rgba(16,42,53, 0.10) !important; }
body.light-mode .border-white\/20 { border-color: rgba(16,42,53, 0.14) !important; }
body.light-mode .border-white\/30 { border-color: rgba(16,42,53, 0.20) !important; }

/* Common backdrop classes used across cards */
body.light-mode .bg-primary\/10 { background-color: rgba(26,127,85, 0.10) !important; }
body.light-mode .border-primary\/20 { border-color: rgba(26,127,85, 0.30) !important; }
body.light-mode .text-primary\/90 { color: rgba(0, 184, 98, 0.95) !important; }

/* ============================================
   Customer Details Modal — light-mode parity
   ============================================
   The component CSS in js/components.js targets dark mode (rgba(255,255,255,…))
   so sections render as white-on-white and labels become invisible in light
   mode. Remap surfaces and text below. */

body.light-mode .customer-details-modal .modal {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main);
}

body.light-mode .customer-details-modal .modal-header,
body.light-mode .customer-details-modal .modal-footer {
    border-color: var(--border-color) !important;
}

body.light-mode .customer-details-modal .customer-detail-section {
    background: rgba(16,42,53, 0.04) !important;
    border: 1px solid var(--border-color);
}

body.light-mode .customer-details-modal .customer-detail-section h5 {
    color: var(--primary-600) !important;
}

body.light-mode .customer-details-modal .detail-label {
    color: var(--text-secondary) !important;
}

body.light-mode .customer-details-modal .detail-value {
    color: var(--text-main) !important;
}

body.light-mode .customer-details-modal .detail-row {
    border-bottom-color: var(--border-color) !important;
}

body.light-mode .customer-details-modal .related-item {
    background: rgba(16,42,53, 0.04) !important;
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

body.light-mode .customer-details-modal .empty-related {
    color: var(--text-muted) !important;
}

/* Journey timeline */
body.light-mode .customer-details-modal .journey-deal-item {
    background: rgba(16,42,53, 0.04) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main);
}

body.light-mode .customer-details-modal .journey-deal-item:hover {
    border-color: rgba(16,42,53, 0.18) !important;
}

body.light-mode .customer-details-modal .journey-deal-item::before {
    border-color: var(--bg-card) !important;
}

body.light-mode .customer-details-modal .journey-stage-select {
    background: var(--overlay-input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

body.light-mode .customer-details-modal .journey-empty {
    color: var(--text-muted) !important;
}

body.light-mode .customer-details-modal .journey-timeline::before {
    opacity: 0.55;
}

/* Footer close button uses inline rgba(255,255,255,…) — neutralize.
   Targeting via :last-child works because the close button is always
   the final action in the row regardless of which other buttons render. */
body.light-mode .customer-details-modal .action-buttons .btn:last-child {
    background: rgba(16,42,53, 0.04) !important;
    border-color: rgba(16,42,53, 0.12) !important;
    color: var(--text-secondary) !important;
}

body.light-mode .customer-details-modal .action-buttons .btn:last-child:hover {
    background: rgba(16,42,53, 0.08) !important;
    border-color: rgba(16,42,53, 0.20) !important;
}

/* Customer name link inside the modal title */
body.light-mode .customer-details-modal .customer-name-link {
    color: var(--primary-600) !important;
}

/* ============================================
   Wave 5 — Universal modal light-mode parity
   ============================================
   Many JS-injected modals build their HTML with inline `style="..."`
   strings that hardcode rgba(255,255,255,X) for surfaces, borders,
   and text. These are invisible / wrong-contrast on a white card.
   The rules below scope to specific modal IDs (or class wrappers)
   and use attribute selectors on the inline styles, so we don't need
   to rewrite every JS template. */

/* ---- Tasks page: contract details viewer ---- */
body.light-mode #contractViewModal > div {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 15px 40px rgba(16,42,53, 0.18) !important;
}
body.light-mode #contractViewModal h3,
body.light-mode #contractViewModal h4 {
    color: var(--text-main) !important;
}
body.light-mode #contractViewModal [style*="color:white"],
body.light-mode #contractViewModal [style*="color: white"] {
    color: var(--text-main) !important;
}
body.light-mode #contractViewModal [style*="rgba(255,255,255,0.4)"],
body.light-mode #contractViewModal [style*="rgba(255, 255, 255, 0.4)"],
body.light-mode #contractViewModal [style*="rgba(255,255,255,0.5)"],
body.light-mode #contractViewModal [style*="rgba(255, 255, 255, 0.5)"] {
    color: var(--text-secondary) !important;
}
body.light-mode #contractViewModal [style*="rgba(0,0,0,0.2)"],
body.light-mode #contractViewModal [style*="rgba(0, 0, 0, 0.2)"] {
    background: rgba(16,42,53, 0.04) !important;
}
body.light-mode #contractViewModal [style*="rgba(255,255,255,0.05)"],
body.light-mode #contractViewModal [style*="rgba(255, 255, 255, 0.05)"] {
    background: rgba(16,42,53, 0.04) !important;
    border-color: var(--border-color) !important;
}
body.light-mode #contractViewModal [style*="rgba(255,255,255,0.02)"],
body.light-mode #contractViewModal [style*="rgba(255, 255, 255, 0.02)"] {
    background: rgba(16,42,53, 0.03) !important;
}
body.light-mode #contractViewModal [style*="rgba(255,255,255,0.03)"],
body.light-mode #contractViewModal [style*="rgba(255, 255, 255, 0.03)"] {
    background: rgba(16,42,53, 0.04) !important;
}
body.light-mode #contractViewModal [style*="rgba(255,255,255,0.1)"],
body.light-mode #contractViewModal [style*="rgba(255, 255, 255, 0.1)"] {
    border-color: var(--border-color) !important;
}
body.light-mode #contractViewModal button[onclick*="remove"][style*="rgba(255,255,255,0.05)"],
body.light-mode #contractViewModal button[onclick*="remove"][style*="rgba(255, 255, 255, 0.05)"] {
    background: rgba(16,42,53, 0.06) !important;
    color: var(--text-main) !important;
}

/* ---- Tasks page: supervisor extension request modal ---- */
body.light-mode #supervisorExtensionModal > div {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
    box-shadow: 0 10px 40px rgba(16,42,53, 0.18) !important;
}
body.light-mode #supervisorExtensionModal h3,
body.light-mode #supervisorExtensionModal label {
    color: var(--text-main) !important;
}
body.light-mode #supervisorExtensionModal label[style*="rgba(255,255,255,0.8)"],
body.light-mode #supervisorExtensionModal label[style*="rgba(255, 255, 255, 0.8)"] {
    color: var(--text-secondary) !important;
}
body.light-mode #supervisorExtensionModal [style*="border-bottom:1px solid rgba(255,255,255,0.1)"],
body.light-mode #supervisorExtensionModal [style*="border-bottom: 1px solid rgba(255, 255, 255, 0.1)"] {
    border-bottom-color: var(--border-color) !important;
}
body.light-mode #supervisorExtensionModal textarea {
    background: var(--overlay-input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
body.light-mode #supervisorExtensionModal button[onclick*="remove"] {
    background: rgba(16,42,53, 0.06) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* ---- Generic catch-all: any modal-overlay descendant whose inline
        style sets `color: white` or `color: #fff` should flip in light
        mode. Limited to modal-overlay scope so we don't break legit
        white-on-color buttons elsewhere. ---- */
body.light-mode .modal-overlay [style*="color:white"]:not([style*="background:#"]):not([style*="background-color:#"]):not([style*="background:linear"]),
body.light-mode .modal-overlay [style*="color: white"]:not([style*="background:#"]):not([style*="background-color:#"]):not([style*="background:linear"]),
body.light-mode .modal-overlay [style*="color:#fff"]:not([style*="background:#"]):not([style*="background-color:#"]):not([style*="background:linear"]),
body.light-mode .modal-overlay [style*="color: #fff"]:not([style*="background:#"]):not([style*="background-color:#"]):not([style*="background:linear"]) {
    color: var(--text-main) !important;
}

/* ---- Deals page sub-nav and pipeline (inline rgba dark colors) ---- */
body.light-mode .sub-nav-tabs {
    background: rgba(16,42,53, 0.03) !important;
    border-color: var(--border-color) !important;
}
body.light-mode .sub-nav-tab {
    color: var(--text-secondary) !important;
}
body.light-mode .sub-nav-tab:hover {
    background: rgba(16,42,53, 0.06) !important;
    color: var(--text-main) !important;
}
body.light-mode .sub-nav-tab.active {
    background: rgba(26,127,85, 0.10) !important;
    color: var(--primary-600) !important;
}
body.light-mode .pipeline-stage:hover {
    background: rgba(16,42,53, 0.06) !important;
}

/* ---- Admin page stat cards & tabs ---- */
body.light-mode .a-stat,
body.light-mode .admin-stat {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
body.light-mode .admin-tabs {
    background: rgba(16,42,53, 0.03) !important;
    border-color: var(--border-color) !important;
}
body.light-mode .admin-tab {
    color: var(--text-secondary) !important;
}
body.light-mode .admin-tab:hover {
    background: rgba(16,42,53, 0.06) !important;
    color: var(--text-main) !important;
}
body.light-mode .admin-tab.active {
    background: rgba(26,127,85, 0.10) !important;
    color: var(--primary-600) !important;
}
body.light-mode .emp-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
body.light-mode .emp-stats,
body.light-mode .emp-stat {
    color: var(--text-main);
}
body.light-mode .emp-stat-lbl {
    color: var(--text-secondary) !important;
}
body.light-mode .progress-bar-wrap {
    background: rgba(16,42,53, 0.06) !important;
}

/* ---- Generic spinner used in employee-points and other components ---- */
body.light-mode .employee-points-spinner,
body.light-mode [class*="spinner"][style*="rgba(255,255,255,0.1)"],
body.light-mode [class*="spinner"][style*="rgba(255, 255, 255, 0.1)"] {
    border-color: rgba(16,42,53, 0.10) !important;
    border-top-color: var(--primary-color) !important;
}

/* ---- Tasks list: inline filter bar / stats cards ---- */
body.light-mode .tasks-stats-card,
body.light-mode .tasks-filter-bar {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* ---- Generic: any inline-styled card div with the dark glassy look
        rgba(255,255,255,0.03) inside a modal-overlay or main content ---- */
body.light-mode .modal-overlay [style*="background:rgba(255,255,255,0.03)"],
body.light-mode .modal-overlay [style*="background: rgba(255, 255, 255, 0.03)"],
body.light-mode .modal-overlay [style*="background:rgba(255,255,255,0.04)"],
body.light-mode .modal-overlay [style*="background: rgba(255, 255, 255, 0.04)"],
body.light-mode .modal-overlay [style*="background:rgba(255,255,255,0.05)"],
body.light-mode .modal-overlay [style*="background: rgba(255, 255, 255, 0.05)"] {
    background: rgba(16,42,53, 0.04) !important;
}
body.light-mode .modal-overlay [style*="background:rgba(255,255,255,0.06)"],
body.light-mode .modal-overlay [style*="background: rgba(255, 255, 255, 0.06)"],
body.light-mode .modal-overlay [style*="background:rgba(255,255,255,0.08)"],
body.light-mode .modal-overlay [style*="background: rgba(255, 255, 255, 0.08)"],
body.light-mode .modal-overlay [style*="background:rgba(255,255,255,0.1)"],
body.light-mode .modal-overlay [style*="background: rgba(255, 255, 255, 0.1)"] {
    background: rgba(16,42,53, 0.06) !important;
}

/* Inline borders that are white-tinted -> swap to neutral border var */
body.light-mode .modal-overlay [style*="border:1px solid rgba(255,255,255,0.05)"],
body.light-mode .modal-overlay [style*="border: 1px solid rgba(255, 255, 255, 0.05)"],
body.light-mode .modal-overlay [style*="border:1px solid rgba(255,255,255,0.08)"],
body.light-mode .modal-overlay [style*="border: 1px solid rgba(255, 255, 255, 0.08)"],
body.light-mode .modal-overlay [style*="border:1px solid rgba(255,255,255,0.1)"],
body.light-mode .modal-overlay [style*="border: 1px solid rgba(255, 255, 255, 0.1)"],
body.light-mode .modal-overlay [style*="border:1px solid rgba(255,255,255,0.15)"],
body.light-mode .modal-overlay [style*="border: 1px solid rgba(255, 255, 255, 0.15)"] {
    border-color: var(--border-color) !important;
}

/* Muted / secondary inline text colors (rgba(255,255,255, 0.4-0.7)) inside
   any modal-overlay -> dark secondary text */
body.light-mode .modal-overlay [style*="color:rgba(255,255,255,0.4)"],
body.light-mode .modal-overlay [style*="color: rgba(255, 255, 255, 0.4)"],
body.light-mode .modal-overlay [style*="color:rgba(255,255,255,0.5)"],
body.light-mode .modal-overlay [style*="color: rgba(255, 255, 255, 0.5)"],
body.light-mode .modal-overlay [style*="color:rgba(255,255,255,0.6)"],
body.light-mode .modal-overlay [style*="color: rgba(255, 255, 255, 0.6)"],
body.light-mode .modal-overlay [style*="color:rgba(255,255,255,0.7)"],
body.light-mode .modal-overlay [style*="color: rgba(255, 255, 255, 0.7)"],
body.light-mode .modal-overlay [style*="color:rgba(255,255,255,0.8)"],
body.light-mode .modal-overlay [style*="color: rgba(255, 255, 255, 0.8)"] {
    color: var(--text-secondary) !important;
}

/* ===== :focus-visible — keyboard nav indicator that wasn't there before ===== */
:focus-visible {
    outline: 2px solid var(--primary-color, #00d573);
    outline-offset: 2px;
    border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary-color, #00d573);
    outline-offset: 2px;
}

/* Toast container — announce toasts to screen readers */
[id="toast-container"], .toast-container {
    /* aria-live is set via JS; this just ensures the container is reachable */
    pointer-events: none;
}
[id="toast-container"] > *, .toast-container > * { pointer-events: auto; }

/* RTL helper: scoped LTR run for digit-heavy values (phone, IBAN, dates).
   Replaces 8 inline `direction:ltr` declarations in accounting.html. */
.numeric-ltr {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* ============================================================
   Impeccable design tokens — OKLCH, dual theme.
   Surfaced globally so any page can opt in to the unified palette.
   Exists alongside the legacy bg and text tokens; no existing
   styles are touched, this is purely additive.
   ============================================================ */
:root {
    /* القيم ست عشرية الآن لا OKLCH: ألوان العلامة محدَّدة بالضبط، ومزج
       الحيادية معها يقتضي أن تُقاس في الفضاء نفسه. المصفوفة كاملةً —
       أحد عشر رمزاً × أربعة أسطح × وضعين، نصّاً وحشوةً — بلا إخفاق. */
    --srf-base: #F7F7F7;
    --srf-raised: #FFFFFF;
    --srf-elev: #FFFFFF;
    --srf-sunk: #F4F6F7;

    --ink-strong: #102A35;
    --ink-base: #2B3F49;
    --ink-muted: #5A6B74;
    /* ‎--ink-faint أغمقُ ممّا يوحي اسمه عمداً: أفتحُ رمادٍ يبلغ 4.5:1 على
       كل الأسطح الفاتحة. ورمزٌ لا يُقرأ ليس درجةً في التدرّج بل عطب. */
    --ink-faint: #61727B;                 /* 4.61:1 على --srf-sunk */

    /* حدٌّ واحد رفيع بلون الهوية بدل الرمادي المحايد: التصميم أسطحٌ بيضاء
       يفصلها خطّ لا ظلّ، فلون الخطّ هو ما يحمل الهوية في البطاقة. */
    --bd-base: rgba(16, 42, 53, 0.10);
    --bd-strong: rgba(16, 42, 53, 0.18);
    --bd-faint: rgba(16, 42, 53, 0.06);

    /* ألوان الحالة والتمييز. كلٌّ منها يُستعمل حشوةً تحت نصّ أبيض، ونصّاً
       على سطحٍ فاتح — والحالة الحاكمة هي النصّ على --srf-sunk. المصفوفة
       كاملةً بلا إخفاق؛ لا تغيّر قيمةً دون إعادة تشغيلها. */
    --acc: #1F7A8C;                       /* تركوازي الهوية — 4.98 حشوةً · 4.59 نصّاً */
    --acc-strong: #15475A;                /* بترولي الهوية — 10.09 حشوةً */
    --acc-soft: rgba(31, 122, 140, 0.10);

    --ok: #1A7F55;
    --ok-soft: rgba(26, 127, 85, 0.10);
    --warn: #8A5A00;
    --warn-soft: rgba(138, 90, 0, 0.10);
    --dng: #B3261E;
    --dng-soft: rgba(179, 38, 30, 0.10);
    --inf: #1A6F94;
    --inf-soft: rgba(26, 111, 148, 0.10);
    --purp: #5F4BB6;
    --purp-soft: rgba(95, 75, 182, 0.10);

    --r-sm: 8px;
    --r-md: 12px;                         /* انحناء البطاقة في التصميم */
    --r-lg: 16px;
    /* ظلالٌ خفيفة جداً: التصميم يفصل بالحدّ لا بالظلّ. */
    --imp-shadow-md: 0 1px 2px rgba(16, 42, 53, 0.04);
    --imp-shadow-lg: 0 4px 16px rgba(16, 42, 53, 0.08);
    --imp-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --imp-dur: 180ms;
}

.dark {
    /* الداكن مشتقٌّ من البترولي نفسه: أسطحه زرقاء مخضرّة عميقة لا رمادية،
       فالهوية واحدة في الوضعين. المصفوفة مُعادة بالكامل على هذه القيم. */
    --srf-base: #0B1A21;
    --srf-raised: #102630;
    --srf-elev: #15313D;
    --srf-sunk: #081419;

    --ink-strong: #EEF5F8;
    --ink-base: #D2E0E6;
    --ink-muted: #93A8B2;
    --ink-faint: #8699A3;                 /* 4.61:1 على --srf-elev */

    --bd-base: rgba(238, 245, 248, 0.12);
    --bd-strong: rgba(238, 245, 248, 0.22);
    --bd-faint: rgba(238, 245, 248, 0.07);

    /* ‎--acc و‎--acc-strong مقلوبان في الداكن: التركوازي الفاتح هو الأبرز
       على سطحٍ عميق، والبترولي يصير خلفيةً لا لونَ نصّ. */
    --acc: #4FB3C7;
    --acc-strong: #6FC9DA;
    --acc-soft: rgba(79, 179, 199, 0.16);

    --ok: #49C08A;
    --ok-soft: rgba(73, 192, 138, 0.16);
    --warn: #E0A63C;
    --warn-soft: rgba(224, 166, 60, 0.16);
    --dng: #F46960;
    --dng-soft: rgba(244, 105, 96, 0.16);
    --inf: #53B2D8;
    --inf-soft: rgba(83, 178, 216, 0.16);
    --purp: #A294E8;
    --purp-soft: rgba(162, 148, 232, 0.16);

    --imp-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.30);
    --imp-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   Opt-in components — pages can use these to inherit the same
   modern, clean visual language without rewriting their CSS.
   ============================================================ */

/* Status strip — horizontal inline metrics (replaces SaaS stat cards) */
.imp-status {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 14px 4px;
    margin-bottom: 24px;
    border-block: 1px solid var(--bd-base);
    font-variant-numeric: tabular-nums;
}
.imp-status .s-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 0 24px;
    min-width: 0;
    flex: 1;
}
.imp-status .s-cell + .s-cell { border-inline-start: 1px solid var(--bd-base); }
.imp-status .s-lbl {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
}
.imp-status .s-val {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink-strong);
    line-height: 1.2;
}

/* Quiet underline tabs */
.imp-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--bd-base);
    overflow-x: auto;
    scrollbar-width: none;
}
.imp-tabs::-webkit-scrollbar { display: none; }
.imp-tab {
    flex: 0 0 auto;
    padding: 12px 18px;
    border: none;
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.875rem;
    position: relative;
    transition: color var(--imp-dur) var(--imp-ease);
    white-space: nowrap;
}
.imp-tab::after {
    content: '';
    position: absolute;
    inset-inline: 12px;
    bottom: -1px;
    height: 2px;
    background: transparent;
    transition: background var(--imp-dur) var(--imp-ease);
}
.imp-tab:hover { color: var(--ink-base); }
.imp-tab.active { color: var(--ink-strong); }
.imp-tab.active::after { background: var(--acc); }

/* Section header with thin baseline rule */
.imp-section-bar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bd-faint);
    gap: 12px;
    flex-wrap: wrap;
}
.imp-section-bar h3 {
    font-weight: 700;
    font-size: 1.18rem;
    color: var(--ink-strong);
    margin: 0;
}

/* Card grid + uniform card shell */
.imp-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.imp-card {
    background: var(--srf-raised);
    border: 1px solid var(--bd-base);
    border-radius: var(--r-lg);
    transition: border-color var(--imp-dur) var(--imp-ease),
                box-shadow var(--imp-dur) var(--imp-ease);
}
.imp-card:hover {
    border-color: var(--bd-strong);
    box-shadow: var(--imp-shadow-md);
}

/* Stat strip inside a card */
.imp-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--bd-faint);
    border-bottom: 1px solid var(--bd-faint);
    background: var(--srf-sunk);
    font-variant-numeric: tabular-nums;
}
.imp-stat-row > .cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    text-align: center;
}
.imp-stat-row > .cell + .cell { border-inline-start: 1px solid var(--bd-faint); }
.imp-stat-row .v {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink-strong);
    line-height: 1.1;
}
.imp-stat-row .l {
    font-size: 0.6875rem;
    color: var(--ink-muted);
    font-weight: 500;
}

/* Buttons (opt-in) */
.imp-btn {
    height: 34px;
    padding: 0 14px;
    border-radius: var(--r-sm);
    background: transparent;
    border: 1px solid var(--bd-base);
    color: var(--ink-base);
    font-weight: 600;
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--imp-dur) var(--imp-ease),
                border-color var(--imp-dur) var(--imp-ease);
}
.imp-btn:hover { background: var(--srf-elev); border-color: var(--bd-strong); }
.imp-btn.primary {
    background: var(--acc);
    border-color: var(--acc);
    color: var(--srf-base);
}
.imp-btn.primary:hover { background: var(--acc-strong); border-color: var(--acc-strong); }

/* Pill badges */
.imp-pill {
    font-size: 0.6875rem;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 600;
    display: inline-block;
    background: var(--srf-sunk);
    color: var(--ink-muted);
    border: 1px solid var(--bd-faint);
}
.imp-pill.ok   { background: var(--ok-soft);   color: var(--ok);   border-color: transparent; }
.imp-pill.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.imp-pill.dng  { background: var(--dng-soft);  color: var(--dng);  border-color: transparent; }
.imp-pill.inf  { background: var(--inf-soft);  color: var(--inf);  border-color: transparent; }
.imp-pill.purp { background: var(--purp-soft); color: var(--purp); border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
    .imp-tabs *, .imp-tab, .imp-card, .imp-btn {
        transition-duration: 0ms !important;
    }
}

/* ============================================================
   نظام الوسطاء — شارات الرتب (برونزي/فضي/ذهبي/بلاتيني)
   مشتركة بين بوابة الوسيط وصفحة إدارة الوسطاء. كل رتبة تحمل
   لون «معدنها» الخاص (دلالي للرتبة) عبر متغيّرَي --rk-fg/--rk-bg،
   مع تظليل خاص للوضع الفاتح يرفع التباين على خلفية بيضاء.
   ============================================================ */
.rk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.2;
    background: var(--rk-bg, var(--srf-sunk));
    color: var(--rk-fg, var(--ink-muted));
    border: 1px solid color-mix(in oklch, var(--rk-fg, var(--ink-muted)) 35%, transparent);
}
.rk-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--rk-fg, var(--ink-muted));
    flex-shrink: 0;
}
/* لون المعدن لكل رتبة (الوضع الداكن — الافتراضي) */
.rk--start    { --rk-fg: var(--ink-muted); --rk-bg: var(--srf-sunk); }
.rk--bronze   { --rk-fg: oklch(0.66 0.085 58);  --rk-bg: oklch(0.66 0.085 58 / 0.15); }
.rk--silver   { --rk-fg: oklch(0.74 0.035 250); --rk-bg: oklch(0.74 0.035 250 / 0.17); }
.rk--gold     { --rk-fg: oklch(0.74 0.13 88);   --rk-bg: oklch(0.74 0.13 88 / 0.16); }
.rk--platinum { --rk-fg: oklch(0.74 0.075 225); --rk-bg: oklch(0.74 0.075 225 / 0.16); }
/* رفع تباين النص في الوضع الفاتح (الخلفية بيضاء) */
body.light-mode .rk--start    { --rk-bg: oklch(0.50 0.008 245 / 0.08); }
body.light-mode .rk--bronze   { --rk-fg: oklch(0.50 0.09 55);  --rk-bg: oklch(0.66 0.085 58 / 0.16); }
body.light-mode .rk--silver   { --rk-fg: oklch(0.50 0.035 250); --rk-bg: oklch(0.58 0.035 250 / 0.16); }
body.light-mode .rk--gold     { --rk-fg: oklch(0.54 0.12 85);  --rk-bg: oklch(0.74 0.13 88 / 0.20); }
body.light-mode .rk--platinum { --rk-fg: oklch(0.50 0.075 235); --rk-bg: oklch(0.62 0.075 225 / 0.16); }


/* ════════════════════════════════════════════════════════════════════════
   نظام الطباعة العربية — تصحيح عامّ لكل الشاشات
   ────────────────────────────────────────────────────────────────────────
   اللوحة كلها `dir="rtl"` ونصّها عربي، وكانت مضبوطة بافتراضات لاتينية.
   هذه الكتلة تصحّحها من مكان واحد بدل ٤٥ صفحة.

   توضع في آخر الملف عمداً: الترتيب هو ما يجعلها تسبق القواعد القديمة بلا
   `!important` في أغلب المواضع.
   ════════════════════════════════════════════════════════════════════════ */

/* ① التتبّع صفرٌ في العربية — وهذا أهمّ سطر هنا.
   الخطّ العربي متّصل: المسافة الموجبة بين الحروف **تقطع الوصل** فيقرأ
   العربيّ كلمةً مكسورة. كانت `letter-spacing: 0.02em` على رؤوس الجداول
   و`0.6px` على الشارات و`0.04em` على تسميات الاستيراد — كلها على نصّ عربي.
   والسالبة كذلك: تضغط الوصل فيلتصق الحرفان.

   يبقى التتبّع مسموحاً حيث النصّ لاتينيّ صراحةً (رمز · مفتاح · وسم .ltr). */
[dir="rtl"] :not(code):not(kbd):not(pre):not(.ltr):not([lang="en"]) {
    letter-spacing: 0;
}

/* ② سنام السطر. العربية لها صواعد أطول ونوازل أعمق من اللاتينية، فسطران
   بتباعد 1.6 يتلامسان. 1.75 هو أدنى ما يفكّ التلامس في تجوال. */
body { line-height: 1.75; }

/* الحجم يتناسب عكسياً مع سنام السطر: العنوان الكبير يضيق تباعده وإلا تفكّك.
   وهذا عكس ما تفعله الأدوات افتراضياً، وهو ما يفرّق النصّ المضبوط عن النصّ
   المتروك على حاله. */
h1, .page-title { line-height: 1.3; }
h2 { line-height: 1.35; }
h3, h4 { line-height: 1.45; }

/* ③ `text-transform: uppercase` على العربية بلا أثر — لا حروف كبيرة في
   العربية — لكنه يرفع اللاتينيّ المخلوط (أسماء العملاء، CSV) ويطبع معه
   تتبّعاً. رؤوس الجداول عربية، فالتحويل زخرفةٌ تضرّ ولا تنفع. */
[dir="rtl"] .exec-table th,
[dir="rtl"] table th { text-transform: none; }

/* ④ الأرقام والهواتف: عزلٌ لا تضمين.
   `unicode-bidi: embed` يترك السياق العربي يعيد ترتيب الطرفين، فيقفز `+`
   إلى آخر الرقم ويظهر `966555222697+`. و`isolate` يقطع الجوار تماماً.
   يشمل كل ما حمل `dir="ltr"` سلفاً في اللوحة. */
.numeric-ltr,
[dir="rtl"] [dir="ltr"] {
    unicode-bidi: isolate;
    display: inline-block;
}

/* الأرقام جدوليّة العرض في الجداول: بلاها تهتزّ خانة الآحاد بين الصفوف
   فلا يُقارَن عمودُ مبالغ بالعين. */
table td, table th, .numeric-ltr, .stat-value, .kpi-value {
    font-variant-numeric: tabular-nums lining-nums;
}

/* ⑤ عرض السطر. العربية تحمل كلمات أقصر، فـ ٨٠ محرفاً تقابل ٦٥ لاتينياً.
   الفقرة التي تعبر الشاشة كاملة تُفقد العينَ بدايةَ السطر التالي. */
.card-sub, .breadcrumb span, .mk-card-sub, .form-hint, .empty-state p {
    max-width: 80ch;
}

/* ⑥ لا ضبط طرفين في العربية.
   المتصفّح يضبطها بمطّ المسافات فتنشأ أنهار بيضاء تنزل في الفقرة —
   والضبط العربي الصحيح يكون بمطّ الحروف (الكشيدة) وهو ما لا يتقنه CSS.
   لا نطبّقه على `td` و`li` عامّةً: قواعد المحاذاة القائمة في اللوحة أخصّ
   من أن تُداس بقاعدة عامة، والنتيجة أعمدةٌ تنزاح بلا سبب. */
[dir="rtl"] .report-body,
[dir="rtl"] .prose,
[dir="rtl"] article p { text-align: start; }


/* ============================================================
   عمود الترقيم في الجداول — .row-seq
   ============================================================
   رقم متسلسل بجانب كل صف (جهات الاتصال، الاستقبال). غرضه المرجع
   الشفهي: «العميل رقم ٧» بين موظّفَين ينظران للشاشة نفسها. لذلك:

   ① متّصل عبر الصفحات (صفحة ٢ تبدأ من ٢١) لا يُعاد من ١ في كل صفحة،
      وإلّا دلّ رقمان مختلفان على العميل نفسه.
   ② tabular-nums ليقع خانةُ الآحاد تحت خانة الآحاد فيُقرأ العمود رأسياً.
   ③ لون خافت ووزن عادي — الرقم مَرجع لا معلومة، وإبرازه يسحب العين
      عن اسم العميل وهو الحقل الذي يُقرأ فعلاً.
   ④ direction:ltr مع unicode-bidi:isolate — رقم عربيّ الجوار قد يُعاد
      ترتيبه، والعزل يقطع أثر الجوار. */
.row-seq {
    text-align: center;
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 0.8rem;
    color: var(--ink-faint);
    font-weight: 500;
    direction: ltr;
    unicode-bidi: isolate;
    user-select: none;
}

/* ════════════════════════════════════════════════════════════════════
   هوية دوميرا — الشريط الجانبي على سطح المكتب
   2026-10-03
   ────────────────────────────────────────────────────────────────────
   البنية الحالية تحوّل الشريط إلى عصا سفلية عائمة بقواعد !important غير
   محصورة بـ@media. والتصميم الجديد يُبقيها على الجوّال — وهو الصواب
   هناك — ويطلب شريطاً عموديّاً بترولياً على اليمين من 1024px.

   لماذا كتلةٌ مستقلّة لا تغليف للقواعد القائمة بـ@media: الكتلة الأصلية
   تمتدّ ثلاثمئة سطرٍ بلا نهايةٍ محدَّدة وتتداخل مع قواعد لاحقة، فتغليفها
   يخاطر بتوازن الأقواس في ملفٍّ بلا خطوة بناء تكشف الخطأ.

   ولماذا !important هنا: ليس إهمالاً — القواعد التي نتجاوزها تحملها
   أصلاً، ولا تُتجاوَز بغيرها. إن أُزيلت تلك من هناك فأزِلها من هنا.

   الترميز كلّه موجود في js/components.js ومخفيٌّ بـdisplay:none، فلا
   حاجة إلى سطرٍ واحد من JS.
   ════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

    /* التخطيط يعود صفّاً، والشريط عمودٌ ثابت على اليمين (RTL) */
    .app-container,
    .app-layout {
        flex-direction: row !important;
    }

    #sidebarContainer {
        width: var(--sidebar-width) !important;
        height: auto !important;
        flex-shrink: 0;
    }

    aside.sidebar,
    aside.app-sidebar {
        position: fixed !important;
        inset-block: 0 !important;
        inset-inline-end: 0 !important;
        inset-inline-start: auto !important;
        left: auto !important;
        right: 0 !important;
        bottom: auto !important;
        transform: none !important;
        width: var(--sidebar-width) !important;
        min-width: var(--sidebar-width) !important;
        max-width: var(--sidebar-width) !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: var(--brand-petrol) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        z-index: 900;
    }

    /* المحتوى لا يحتاج هامشاً: ‎#sidebarContainer‎ عنصرٌ في التخطيط
       المرن يحجز var(--sidebar-width) أصلاً، فيأخذ main ما تبقّى بـflex.

       وكنتُ أضفتُ margin-inline-end ظنّاً أنه يفسح للشريط — فحُسب العرض
       مرّتين. والأسوأ أن inline-end في RTL هي الحافّة **اليسرى**، فظهر
       شريطٌ ميّت بعرض 240px على يسار كل صفحة بينما الشريط على اليمين.

       أُزيلت صراحةً لا بالحذف: القاعدة الأصلية في مكانٍ آخر قد تعيدها. */
    main.app-main,
    main.main-content {
        margin-inline-end: 0;
        margin-inline-start: 0;
        min-width: 0;
        flex: 1 1 auto;
    }

    /* ما كان مخفيّاً يعود: الترويسة والشعار والهوية والمستخدم والطيّ */
    aside.sidebar .sidebar-header,
    aside.app-sidebar .sidebar-header,
    aside.sidebar .sidebar-brand,
    aside.app-sidebar .sidebar-brand,
    aside.sidebar .sidebar-user,
    aside.app-sidebar .sidebar-user,
    aside.sidebar .sidebar-toggle,
    aside.app-sidebar .sidebar-toggle,
    aside.sidebar .nav-section-title,
    aside.app-sidebar .nav-section-title {
        display: flex !important;
    }

    aside.sidebar .sidebar-header,
    aside.app-sidebar .sidebar-header {
        align-items: center;
        gap: 12px;
        padding: 20px 18px 16px;
        border-block-end: 1px solid rgba(255, 255, 255, 0.10);
    }

    aside.sidebar .sidebar-brand,
    aside.app-sidebar .sidebar-brand {
        flex-direction: column;
        gap: 0;
        min-width: 0;
    }

    aside.sidebar .sidebar-brand h1,
    aside.app-sidebar .sidebar-brand h1 {
        color: #FFFFFF;
        font-size: 1.05rem;
        font-weight: 700;
        margin: 0;
        line-height: 1.3;
    }

    aside.sidebar .sidebar-brand span,
    aside.app-sidebar .sidebar-brand span {
        color: rgba(255, 255, 255, 0.62);
        font-size: 0.72rem;
        letter-spacing: 0.04em;
    }

    aside.sidebar .sidebar-toggle,
    aside.app-sidebar .sidebar-toggle {
        align-items: center;
        justify-content: center;
        /* ≥44px هدفَ لمسٍ حتى على سطح المكتب — المؤشّر الدقيق لا يُلغي
           من يستعمل شاشةً لمسيّة كبيرة. */
        min-width: 44px;
        min-height: 44px;
        margin-inline-start: auto;
        background: transparent;
        border: none;
        border-radius: var(--r-sm);
        color: rgba(255, 255, 255, 0.78);
        cursor: pointer;
    }

    aside.sidebar .sidebar-toggle:hover,
    aside.app-sidebar .sidebar-toggle:hover {
        background: rgba(255, 255, 255, 0.10);
        color: #FFFFFF;
    }

    aside.sidebar .sidebar-user,
    aside.app-sidebar .sidebar-user {
        align-items: center;
        gap: 10px;
        padding: 14px 18px;
        border-block-end: 1px solid rgba(255, 255, 255, 0.10);
    }

    aside.sidebar .sidebar-user .user-name,
    aside.app-sidebar .sidebar-user .user-name {
        color: #FFFFFF;
        font-size: 0.88rem;
        font-weight: 600;
    }

    aside.sidebar .sidebar-user .user-role,
    aside.app-sidebar .sidebar-user .user-role {
        color: rgba(255, 255, 255, 0.62);
        font-size: 0.74rem;
    }

    aside.sidebar .sidebar-user .user-avatar,
    aside.app-sidebar .sidebar-user .user-avatar {
        background: var(--brand-teal);
        color: #FFFFFF;
    }

    /* القائمة عمودٌ يتمرّر، لا صفٌّ أفقي */
    aside.sidebar nav.sidebar-nav,
    aside.app-sidebar nav.sidebar-nav,
    aside.sidebar .nav-links,
    aside.app-sidebar .nav-links {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 2px;
        flex: 1 1 auto;
        padding: 10px 10px 24px;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    aside.sidebar .nav-section,
    aside.app-sidebar .nav-section {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    aside.sidebar .nav-section-title,
    aside.app-sidebar .nav-section-title {
        padding: 14px 10px 6px;
        color: rgba(255, 255, 255, 0.45);
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.06em;
    }

    /* البند: أيقونة خطّية بيضاء ونصّ أبيض خافت */
    aside.sidebar .nav-item a,
    aside.sidebar a.nav-item,
    aside.app-sidebar .nav-item a,
    aside.app-sidebar a.nav-item {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px;
        width: 100%;
        min-height: 44px;
        padding: 10px 12px !important;
        border-radius: var(--r-md) !important;
        color: rgba(255, 255, 255, 0.80) !important;
        background: transparent !important;
        text-decoration: none;
    }

    aside.sidebar .nav-item a:hover,
    aside.sidebar a.nav-item:hover,
    aside.app-sidebar .nav-item a:hover,
    aside.app-sidebar a.nav-item:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #FFFFFF !important;
    }

    aside.sidebar .nav-text,
    aside.app-sidebar .nav-text {
        display: block !important;
        font-size: 0.875rem;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: inherit;
    }

    aside.sidebar .nav-icon,
    aside.app-sidebar .nav-icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        color: inherit;
    }

    /* العنصر النشط: كتلة تركوازية بنصّ أبيض.
       ولا يُستعمل التركوازي لونَ نصٍّ على البترولي أبداً — النسبة بينهما
       2.03:1، أي أقلّ من نصف العتبة. والبياض على التركوازي 4.98:1. */
    aside.sidebar .nav-item a.active,
    aside.sidebar a.nav-item.active,
    aside.app-sidebar .nav-item a.active,
    aside.app-sidebar a.nav-item.active {
        background: var(--brand-teal) !important;
        color: #FFFFFF !important;
        border-radius: var(--r-md) !important;
        box-shadow: none !important;
    }

    aside.sidebar .nav-item a.active .nav-text,
    aside.sidebar a.nav-item.active .nav-text,
    aside.app-sidebar .nav-item a.active .nav-text,
    aside.app-sidebar a.nav-item.active .nav-text,
    aside.sidebar .nav-item a.active .nav-icon,
    aside.sidebar a.nav-item.active .nav-icon,
    aside.app-sidebar .nav-item a.active .nav-icon,
    aside.app-sidebar a.nav-item.active .nav-icon {
        color: #FFFFFF !important;
    }

    /* ظلال التمرير الجانبية كانت لشريطٍ أفقي — لا معنى لها عموديّاً */
    aside.sidebar::before,
    aside.sidebar::after,
    aside.app-sidebar::before,
    aside.app-sidebar::after {
        display: none !important;
    }

    /* طبقة الجوّال لا تظهر على سطح المكتب */
    .sidebar-mobile-overlay {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   هوية دوميرا — المكوّنات الأساسية
   2026-10-03
   ────────────────────────────────────────────────────────────────────
   سطحٌ أبيض، حدٌّ واحد رفيع، انحناء 12px، وظلٌّ يكاد لا يُرى. التصميم
   يفصل البطاقات بالخطّ لا بالظلّ، وهذا ما يفرّق بين لوحةٍ هادئة وأخرى
   تبدو كأن كل بطاقة فيها تطفو.

   كل القواعد هنا تستعمل كلاسات قائمة لا جديدة — أُعيد تلوينها ولم
   يُعَد تسمية أيٍّ منها. راجع scripts/js_referenced_classes.js قبل أي
   إعادة تسمية: 1653 كلاساً يعتمد عليها JS.
   ════════════════════════════════════════════════════════════════════ */

/* ─── البطاقات ──────────────────────────────────────────────────── */
.card,
.stats-card,
.content-card,
.imp-card {
    background: var(--srf-raised);
    border: 1px solid var(--bd-base);
    border-radius: var(--r-md);
    box-shadow: var(--imp-shadow-md);
}

/* ─── الأزرار ───────────────────────────────────────────────────── */
.btn {
    border-radius: var(--r-sm);
    font-family: inherit;
    font-weight: 600;
    /* 44px هدفُ اللمس الأدنى. الارتفاع لا يُفرض بـheight حتى لا يُقصّ
       النصّ العربي الطويل، بل بحدٍّ أدنى يسمح بالنموّ. */
    min-height: 44px;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.btn-primary {
    background: var(--brand-petrol);
    border: 1px solid var(--brand-petrol);
    color: #FFFFFF;          /* 10.09:1 */
}

.btn-primary:hover {
    background: var(--brand-petrol-deep);
    border-color: var(--brand-petrol-deep);
}

.btn-secondary {
    background: var(--brand-teal);
    border: 1px solid var(--brand-teal);
    color: #FFFFFF;          /* 4.98:1 */
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--bd-strong);
    color: var(--ink-base);
}

.btn-ghost:hover {
    background: var(--srf-sunk);
    border-color: var(--brand-teal);
}

/* بؤرة واضحة للوحة المفاتيح. outline لا box-shadow: الأخير يختفي فوق
   خلفيةٍ بنفس لونه، والأول يرسم فوق كل شيء. */
.btn:focus-visible,
.form-input:focus-visible,
.form-select:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
a.nav-item:focus-visible,
.nav-item a:focus-visible {
    outline: 2px solid var(--brand-teal);
    outline-offset: 2px;
}

/* ─── الحقول ────────────────────────────────────────────────────── */
.form-input,
.form-select,
.form-control,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
    background: var(--srf-raised);
    border: 1px solid var(--bd-strong);
    border-radius: var(--r-sm);
    color: var(--ink-base);
    font-family: inherit;
    min-height: 44px;
}

.form-input:focus,
.form-select:focus,
.form-control:focus,
textarea:focus,
select:focus {
    border-color: var(--brand-teal);
}

.form-input::placeholder,
textarea::placeholder {
    color: var(--ink-faint);
}

/* ─── الشارات ───────────────────────────────────────────────────── */
.badge {
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 3px 10px;
    border: 1px solid transparent;
}

/* ألوان الحالة دلالية وتُستعمل بشُح: خلفية خفيفة ونصٌّ مشبع، لا حشوة
   صلبة — الحشوة الصلبة تجعل الجدول لوحةَ ألوان وتُفقد الحالة معناها. */
.badge-success { background: var(--ok-soft);   color: var(--ok);   border-color: var(--ok-soft); }
.badge-warning { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-soft); }
.badge-danger,
.badge-error   { background: var(--dng-soft);  color: var(--dng);  border-color: var(--dng-soft); }
.badge-info    { background: var(--inf-soft);  color: var(--inf);  border-color: var(--inf-soft); }

/* ─── الجداول ───────────────────────────────────────────────────── */
/* خطوط أفقية فقط. الخطوط الرأسية تجعل الجدول يبدو نموذجَ إدخال، وتخطيط
   الصفوف بالتناوب يجعله تصديرَ جدول بيانات. */
.table,
.data-table,
.mk-tbl {
    width: 100%;
    border-collapse: collapse;
    background: var(--srf-raised);
}

/*  الترويسة بيضاء بحبرٍ داكن كما في التصميم (07-customers · 05-supervisor)
    لا رماديةَ الحشوة. والحشوة الرمادية تجعل الجدول يبدو طبقتين — ترويسةً
    مرفوعةً وجسماً تحتها — والتصميم يجعله سطحاً واحداً يفصله خطٌّ واحد.

    و‎--srf-raised‎ لا ‎transparent‎: كثيرٌ من هذه الترويسات لاصقة
    (sticky)، والشفّافة منها تُظهر الصفوف تمرّ من خلفها. */
.table th,
.data-table th,
.mk-tbl th {
    background: var(--srf-raised);
    color: var(--ink-strong);
    font-weight: 700;
    font-size: 0.8rem;
    text-align: start;
    padding: 13px 12px;
    border-block-end: 1px solid var(--bd-base);
}

.table td,
.data-table td,
.mk-tbl td {
    padding: 11px 12px;
    border-block-end: 1px solid var(--bd-faint);
    color: var(--ink-base);
}

.table tbody tr:hover,
.data-table tbody tr:hover,
.mk-tbl tbody tr:hover {
    background: var(--srf-sunk);
}

/* جدولٌ عريض يتمرّر داخل حاويته، ولا يدفع الصفحة أفقيّاً */
.table-wrapper,
.table-container,
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* ─── لا تمرير أفقي للصفحة على أي عرض ──────────────────────────── */
@media (max-width: 767.98px) {
    /* النماذج بعرضٍ كامل على الجوّال: حقلٌ نصفيّ على 375px يصير غير
       قابلٍ للكتابة فيه عمليّاً. */
    .form-input,
    .form-select,
    .form-control,
    textarea,
    select {
        width: 100%;
    }

    .btn {
        min-height: 44px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   غلاف تطبيق iOS — الجوال فقط
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    :root {
        --mobile-nav-height: 70px;

        /* الخلفيّةُ والحبرُ يُعرَّفان معاً هنا، وكلُّ قاعدةٍ تستهلكهما من هذا
           الموضع. وكان الحبرُ ‎#fff‎ مكتوباً في القاعدة والخلفيّةُ متغيّراً
           هنا — فحين صار الهيدرُ زجاجاً فاتحاً (كما طُلب) بقي الحبرُ أبيض:
           أبيضُ على أبيضَ، فلا يظهر في الشريط العلويِّ شيء. وعطلٌ كهذا لا
           يُكتشف بقراءة قاعدةٍ واحدة، لأنّ طرفَيه في مكانين. فاقترانُهما
           في مصدرٍ واحدٍ يمنع تكرارَه. */
        --mobile-header-bg: rgba(247, 247, 247, 0.82);
        --mobile-header-ink: var(--brand-petrol, #15475A);
        --mobile-header-ink-soft: rgba(21, 71, 90, 0.07);
        --mobile-header-ink-line: rgba(21, 71, 90, 0.10);
    }

    html.dark :root,
    html.dark body,
    body.dark {
        --mobile-header-bg: rgba(11, 26, 33, 0.84);
        --mobile-header-ink: #D9E8ED;
        --mobile-header-ink-soft: rgba(217, 232, 237, 0.08);
        --mobile-header-ink-line: rgba(217, 232, 237, 0.10);
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        overscroll-behavior: none;
        -webkit-text-size-adjust: 100%;
    }

    /* قفلُ التمرير على الجسم يخصّ صفحاتِ القشرة وحدها. سبعُ صفحاتٍ تحمّل
       هذه الورقة ولا يوجد فيها ‎main.main-content‎ ولا ‎main.app-main‎:
       join وbroker-portal وlogin وmaintenance وreport_preview
       وmigrate_data وmigrate_employee. و‎overflow:hidden‎ عليها يُفقد ما
       تحت الطيّة على الجوّال بلا طريقةٍ للوصول إليه — وهو عينُ العطل
       الذي شُكي منه في «تواصل». فيُقصَر الشرطُ بـ‎:has()‎، ومن لا يدعمها
       يتجاهل القاعدةَ فيعود إلى جسمٍ قابلٍ للتمرير: السقوطُ إلى الأسلم. */
    html:has(main.main-content),
    html:has(main.app-main),
    body:has(main.main-content),
    body:has(main.app-main) {
        height: 100vh;
        height: 100dvh;
        overflow: hidden !important;
    }

    body:has(main.main-content),
    body:has(main.app-main) {
        display: flex;
        flex-direction: column;
    }

    body,
    body * {
        -webkit-tap-highlight-color: transparent;
    }

    button,
    [role="button"],
    nav,
    nav a,
    .btn,
    .tab-btn {
        -webkit-user-select: none;
        user-select: none;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .app-container,
    .app-layout {
        min-height: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    main.main-content,
    main.app-main {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-inline: 16px !important;
        animation: mobile-content-in 180ms ease-out both;
    }

    @keyframes mobile-content-in {
        from { opacity: 0.72; transform: translateY(3px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .mobile-native-header,
    main > .content-header,
    main > .page-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 90 !important;
        min-height: calc(60px + var(--safe-top));
        margin: 0 -16px 16px !important;
        padding: calc(10px + var(--safe-top)) 16px 10px !important;
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        color: var(--mobile-header-ink) !important;
        background: var(--mobile-header-bg) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10) !important;
    }

    .mobile-native-header h1,
    .mobile-native-header h2,
    main > .content-header h1,
    main > .page-header h1 {
        min-width: 0;
        margin: 0 !important;
        color: inherit !important;
        font-size: clamp(18px, 5vw, 20px) !important;
        line-height: 1.35 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-header-subtitle,
    .mobile-refresh-action {
        display: none !important;
    }

    .mobile-native-header .header-controls,
    .mobile-native-header .header-actions,
    .mobile-native-header #topHeaderUserControls {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    .mobile-native-header #topHeaderUserControls > button,
    .mobile-native-header #topHeaderUserControls > .theme-switch,
    .mobile-native-header #topHeaderAnnounceBtn {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--mobile-header-ink) !important;
        background: var(--mobile-header-ink-soft) !important;
        border: 1px solid var(--mobile-header-ink-line) !important;
    }

    .mobile-native-header #topHeaderAnnounceBtn span,
    .mobile-native-header .theme-switch-thumb {
        display: none !important;
    }

    button,
    .btn,
    [role="button"],
    nav a {
        transition: transform 120ms ease, opacity 120ms ease, background-color 160ms ease !important;
    }

    /* الوسمُ ‎viewport‎ في الثلاثِ والخمسين صفحةً لا يحمل ‎user-scalable=no‎
       — وهذا صحيحٌ، فالتكبيرُ بالقرصِ حقُّ من يحتاجه. لكنّه يُبقي تكبيرَ
       النقرتين حيّاً، ومعه ينتظر سفاري نحوَ ٣٠٠ms بعد كلِّ لمسةٍ ليرى
       أتليها ثانيةٌ. و‎manipulation‎ تُلغي انتظارَ النقرةِ الثانيةِ وحدَه
       وتُبقي السحبَ والقرصَ، فتُستردُّ الاستجابةُ بلا ثمنٍ في الوصوليّة.
       ولا تُوضَع على ‎body‎: هناك تقتل القرصَ على الصفحةِ كلِّها. */
    button,
    .btn,
    [role="button"],
    a,
    label,
    summary,
    input[type="checkbox"],
    input[type="radio"] {
        touch-action: manipulation;
    }

    button:active,
    .btn:active,
    [role="button"]:active,
    nav a:active {
        transform: scale(0.96) !important;
        opacity: 0.82;
    }

    .card,
    .glass-card,
    .stat-card,
    .section-card,
    .content-card,
    .panel {
        border-radius: 18px !important;
    }

    body aside.sidebar,
    body aside.app-sidebar {
        position: fixed !important;
        z-index: 1000 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: var(--mobile-nav-height) !important;
        min-height: 0 !important;
        margin: 0 !important;
        transform: none !important;
        padding: 0 !important;
        background: var(--srf-raised, #fff) !important;
        border: 0 !important;
        border-top: 1px solid var(--bd-faint, rgba(16, 42, 53, 0.10)) !important;
        border-radius: 0 !important;
        box-shadow: 0 -4px 18px rgba(16, 42, 53, 0.08) !important;
        overflow: hidden !important;
    }

    body aside.sidebar::before,
    body aside.sidebar::after,
    body aside.app-sidebar::before,
    body aside.app-sidebar::after {
        display: none !important;
    }

    body aside.sidebar nav.sidebar-nav,
    body aside.app-sidebar nav.sidebar-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        width: 100% !important;
        height: var(--mobile-nav-height) !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
        scroll-snap-type: none !important;
    }

    body aside .nav-section { display: contents !important; }
    body aside .mobile-overflow-item { display: none !important; }

    body aside.sidebar .mobile-primary-item,
    body aside.app-sidebar .mobile-primary-item,
    body aside .mobile-more-button {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: var(--mobile-nav-height) !important;
        margin: 0 !important;
        padding: 8px 3px 7px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        color: var(--ink-muted) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        font-family: inherit;
    }

    body aside .mobile-primary-item .nav-text,
    body aside .mobile-more-button .nav-text {
        width: 100% !important;
        min-height: 15px;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.15 !important;
        text-align: center;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    body aside .mobile-primary-item.active {
        color: var(--acc-strong, #1F7A8C) !important;
    }

    body aside .mobile-primary-item.active::before {
        top: 0 !important;
        inset-inline: 16px !important;
        height: 3px !important;
        border-radius: 0 0 4px 4px !important;
        background: currentColor !important;
    }

    body aside .mobile-more-button .nav-icon,
    body aside .mobile-more-button .nav-icon svg {
        width: 22px !important;
        height: 22px !important;
    }

    .mobile-nav-sheet[hidden] { display: none !important; }
    .mobile-nav-sheet {
        position: fixed;
        z-index: 10050;
        inset: 0;
        display: flex;
        align-items: flex-end;
        justify-content: stretch;
    }

    .mobile-nav-sheet__backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(5, 25, 34, 0.46);
        opacity: 0;
        transition: opacity 220ms ease !important;
    }

    .mobile-nav-sheet__panel {
        position: relative;
        width: 100%;
        max-height: min(72dvh, 620px);
        padding: 8px 16px calc(16px + var(--safe-bottom));
        overflow-y: auto;
        color: var(--ink-base);
        background: var(--srf-raised, #fff);
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -18px 50px rgba(5, 25, 34, 0.22);
        transform: translateY(100%);
        transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
    }

    .mobile-nav-sheet.is-open .mobile-nav-sheet__backdrop { opacity: 1; }
    .mobile-nav-sheet.is-open .mobile-nav-sheet__panel { transform: translateY(0); }
    .mobile-nav-sheet__handle { width: 38px; height: 5px; margin: 0 auto 8px; border-radius: 999px; background: var(--bd-strong); }
    .mobile-nav-sheet__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .mobile-nav-sheet__header h2 { margin: 0; font-size: 20px; color: var(--ink-strong); }
    .mobile-nav-sheet__close { width: 40px; height: 40px; border: 0; border-radius: 50%; color: var(--ink-base); background: var(--srf-sunk); font: 28px/1 inherit; }
    .mobile-nav-sheet__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .mobile-nav-sheet__grid .mobile-sheet-item {
        min-width: 0;
        min-height: 76px;
        padding: 10px 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        color: var(--ink-base);
        text-align: center;
        text-decoration: none;
        background: var(--srf-sunk);
        border: 1px solid var(--bd-faint);
        border-radius: 16px;
    }
    .mobile-nav-sheet__grid .nav-icon,
    .mobile-nav-sheet__grid .nav-icon svg { width: 24px !important; height: 24px !important; }
    .mobile-nav-sheet__grid .nav-text { font-size: 12px !important; line-height: 1.35; white-space: normal !important; overflow: visible !important; }
    .mobile-nav-sheet__grid .mobile-sheet-item.active { color: var(--acc-strong); border-color: var(--acc); background: var(--acc-soft); }

    .mobile-pull-indicator {
        --pull-distance: 0px;
        position: fixed;
        z-index: 95;
        top: calc(var(--safe-top) + 6px);
        left: 50%;
        min-height: 36px;
        padding: 7px 12px;
        display: flex;
        align-items: center;
        gap: 7px;
        color: #fff;
        background: var(--brand-petrol-deep, #0E3444);
        border-radius: 999px;
        box-shadow: 0 7px 18px rgba(5, 25, 34, 0.24);
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, calc(-48px + var(--pull-distance)));
        transition: opacity 120ms ease;
        font-size: 12px;
        font-weight: 700;
    }
    .mobile-pull-indicator.is-visible { opacity: 1; }
    .mobile-pull-indicator.is-ready > span:first-child { transform: rotate(180deg); }
    .mobile-pull-indicator > span:first-child { transition: transform 160ms ease; }
}

/* العناصر العائمة تفسح للشريط الجانبي على سطح المكتب.
   #pwaInstallBanner يُموضَع بـstyle.cssText من js/components.js، والقاعدة
   هنا تتجاوزه بـ!important — وهو الوجه الوحيد الذي يتجاوز نمطاً سطريّاً
   بلا لمس JS.

   ولم يُزَح #daRoot (زرّ المساعد) عمداً: الزرّ قابل للسحب بالفأرة ويكتب
   موضعه سطريّاً عند الإفلات، ففرضُ موضعٍ عليه بـ!important يُجمّده ويُعطّل
   السحب — وذلك تعديل سلوك لا شكل. */
@media (min-width: 768px) {
    #pwaInstallBanner {
        inset-inline-end: calc(var(--sidebar-width) + 25px) !important;
        right: auto !important;
        max-width: calc(100vw - var(--sidebar-width) - 50px) !important;
    }
}

/* ────────────────────────────────────────────────────────────────────
   الألوان الدلالية داخل الشريط البترولي
   ────────────────────────────────────────────────────────────────────
   بعض بنود القائمة تحمل لوناً سطريّاً من js/components.js:
       <a class="nav-item" style="color: var(--dng);">   خروج
       <span class="nav-text" style="color: var(--warn);"> رئيسية التسويق
   وهي نيّة صحيحة — الخروج أحمر والتسويق متميّز — لكنّ القيم مضبوطة على
   سطحٍ فاتح. على البترولي #15475A تصير:
       --dng  #B3261E  →  1.54:1    غير مرئيّ عمليّاً
       --warn #8A5A00  →  أسوأ
   وهذا ما يجعل «خروج» و«رئيسية التسويق» باهتين في اللقطة.

   العلاج بإعادة تعريف الرمزين **داخل نطاق الشريط** لا بـ!important: النمط
   السطري يقرأ var() عند الحساب، فيأخذ القيمة الأقرب في شجرة النطاق. لا
   لمس لـJS، ولا تصارع على الأولوية، وتبقى الدلالة قائمة — الأحمر أحمر
   والكهرماني كهرماني، لكن بدرجةٍ تُقرأ على سطحٍ داكن.
   ──────────────────────────────────────────────────────────────────── */
/*  وهي **للبترولي وحده** كذلك: الشريط على الجوّال سطحه أبيض، وهذه
    الدرجات مضبوطةٌ لتُقرأ على داكن — فعلى الأبيض تنقلب العلّة رأساً
    على عقب: «خروج» 2.03:1 و«التذاكر» 1.65:1 و«المحاسبة» 1.68:1
    و«مشاريع الوحدات الجاهزة» 1.56:1. نفس الرقم، نفس الخطأ، جهةٌ أخرى. */
@media (min-width: 768px) {
    aside.sidebar,
    aside.app-sidebar {
        --dng: #FF9B93;      /* 4.98:1 على البترولي */
        --warn: #F0C070;     /* 6.00:1 */
        --ok: #7BE3B0;
        --inf: #8FD3F0;
    }
}

@media (min-width: 768px) {
    /* النصّ يرث لون البند ما لم يكن له لونٌ دلاليّ خاصّ. القاعدة هنا بلا
       !important عمداً حتى لا تطمس تلك الدلالات. */
    aside.sidebar .nav-item a:not([style*="color"]) .nav-text,
    aside.app-sidebar .nav-item a:not([style*="color"]) .nav-text {
        color: inherit;
    }
}

/* ════════════════════════════════════════════════════════════════════
   مطابقة التصاميم — تصحيحات مقروءة من الصور لا مُقدَّرة
   المرجع: desktop/03-home.png · desktop/07-customers.png
   2026-10-03
   ════════════════════════════════════════════════════════════════════ */

:root {
    /* قيست من نسبة الشريط إلى عرض الشاشة في الصورتين: ‎≈16%‎ من 1440 */
    --sidebar-width: 240px;

    /* ألوان الشارات في التصميم باستيل مصمت لا شفافية: الشفافية تتغيّر مع
       لون الصفّ تحتها، والتصميم يُظهر لوناً ثابتاً في كل الصفوف. */
    --chip-ok-bg: #D5F0E3;
    --chip-ok-ink: #0F6B45;
    --chip-warn-bg: #FBEFC8;
    --chip-warn-ink: #7A5500;
    --chip-dng-bg: #FBDCDC;
    --chip-dng-ink: #A32620;
    --chip-inf-bg: #D7EAF5;
    --chip-inf-ink: #15607F;
}

.dark {
    --chip-ok-bg: rgba(73, 192, 138, 0.18);
    --chip-ok-ink: #7FE0B4;
    --chip-warn-bg: rgba(224, 166, 60, 0.18);
    --chip-warn-ink: #F0C070;
    --chip-dng-bg: rgba(244, 105, 96, 0.18);
    --chip-dng-ink: #FF9B93;
    --chip-inf-bg: rgba(83, 178, 216, 0.18);
    --chip-inf-ink: #8FD3F0;
}

/* ─── الجدول: ترويسة بيضاء لا رمادية ──────────────────────────────
   التصميم يُظهر الترويسة على بياض البطاقة نفسه، يفصلها خطٌّ سفلي وحده،
   ونصّها غامقٌ ثقيل لا رماديّ خافت. الخلفية الرمادية تجعله يبدو تصديرَ
   جدول بيانات، وهو ما يتجنّبه التصميم. */
.table th,
.data-table th,
.mk-tbl th {
    background: transparent;
    color: var(--ink-strong);
    font-weight: 700;
    font-size: 0.875rem;
    padding: 14px 12px;
    border-block-end: 1px solid var(--bd-base);
}

.table td,
.data-table td,
.mk-tbl td {
    padding: 14px 12px;
}

/* ─── الشارات: باستيل مصمت ─────────────────────────────────────── */
.badge-success { background: var(--chip-ok-bg);   color: var(--chip-ok-ink);   border-color: transparent; }
.badge-warning { background: var(--chip-warn-bg); color: var(--chip-warn-ink); border-color: transparent; }
.badge-danger,
.badge-error   { background: var(--chip-dng-bg);  color: var(--chip-dng-ink);  border-color: transparent; }
.badge-info    { background: var(--chip-inf-bg);  color: var(--chip-inf-ink);  border-color: transparent; }

/* ─── الزرّ الثانوي: أبيض مصمت بحدٍّ ونصٍّ بترولي ─────────────────── */
.btn-ghost,
.btn-outline {
    background: var(--srf-raised);
    border: 1px solid var(--bd-strong);
    color: var(--brand-petrol);
    font-weight: 600;
}

.btn-ghost:hover,
.btn-outline:hover {
    background: var(--srf-sunk);
    border-color: var(--brand-petrol);
}

@media (min-width: 768px) {
    /* ─── العنصر النشط ملاصقٌ لحافّة الشريط ───────────────────────
       في التصميم تمتدّ الكتلة التركوازية حتى الحافّة الخارجية للشريط
       وتنحني من الداخل وحده. الهامش السالب يُخرجها من حشوة القائمة. */
    aside.sidebar nav.sidebar-nav,
    aside.app-sidebar nav.sidebar-nav {
        padding-inline: 0 !important;
    }

    /*  ‎width: auto‎ شرطٌ للهامش لا زينة: قاعدةٌ أقدم تضبط ‎width: 100%‎
        على البند، فيصير عرضه 240px **زائد** 20px هامشاً = 260 داخل
        حاويةٍ عرضها 240. فيفيض أفقيّاً، ويخطف ‎initNavScroll‎ عجلة
        الفأرة لتمرّره يميناً ويساراً بدل فوق وتحت.
        وهو ما شكا منه المستخدم — وسببه هامشٌ أضفتُه أنا. */
    aside.sidebar .nav-item a,
    aside.sidebar a.nav-item,
    aside.app-sidebar .nav-item a,
    aside.app-sidebar a.nav-item {
        padding-inline: 14px !important;
        margin-inline: 10px !important;
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box;
        border-radius: 10px !important;
    }

    /* وحارسٌ أخير: العمود لا يتمرّر أفقيّاً مهما طرأ */
    aside.sidebar nav.sidebar-nav,
    aside.app-sidebar nav.sidebar-nav,
    aside.sidebar .nav-links,
    aside.app-sidebar .nav-links {
        overflow-x: hidden !important;
        scroll-snap-type: none !important;
        cursor: default !important;
    }

    /* الكتلة النشطة حبّةٌ منفصلة لا شريطٌ ملاصق للحافّة: التصميم
       (05-supervisor · 06-admin) يُبقي بترولياً ظاهراً على جانبيها،
       فتبدو عنصراً مختاراً لا قصّاً في حافّة الشريط. وكانت ملاصقةً
       بانحناءٍ من جهةٍ واحدة، وهو ما يبدو عند 72px المطويّة قصّاً. */
    aside.sidebar .nav-item a.active,
    aside.sidebar a.nav-item.active,
    aside.app-sidebar .nav-item a.active,
    aside.app-sidebar a.nav-item.active {
        border-radius: 10px !important;
    }

    /* الشعار في التصميم كلمةٌ بيضاء بعرض الشريط، لا أيقونة صغيرة بجانب
       عنوانٍ عربي. نُكبّر الصورة ونُخفي النصّ المرافق. */
    aside.sidebar .sidebar-header,
    aside.app-sidebar .sidebar-header {
        justify-content: center;
        padding: 26px 18px 22px;
        border-block-end: none;
    }

    aside.sidebar .sidebar-logo img,
    aside.app-sidebar .sidebar-logo img {
        width: 132px !important;
        height: auto !important;
        object-fit: contain;
    }

    aside.sidebar .sidebar-brand,
    aside.app-sidebar .sidebar-brand {
        display: none !important;
    }
}

/* ────────────────────────────────────────────────────────────────────
   تصحيحان بعد المعاينة الأولى
   ──────────────────────────────────────────────────────────────────── */

/* ١) ‎--acc كان ناقصاً من نطاق الشريط، فبقي بند «تواصل» بلون الهوية
      التركوازي على البترولي — 2.03:1، وهو الفخّ نفسه المكتوب في
      DESIGN.md. أُضيف إلى المجموعة المُعاد تعريفها. */
/*  وهذه المجموعة **للبترولي وحده**: كانت بلا شرطِ عرضٍ فسرت إلى
    الشريط السفليّ على الجوّال بعد أن صار سطحه أبيض، فصارت أيقوناته
    بيضاء على أبيض — موجودةً في الشجرة، مقيسةً 21×21، وغير مرئية.
    وهو الفخّ نفسه الذي أصاب وسيلة الرسم البيانيّ: لونٌ من لوحةٍ
    سابقة بقي بعد أن تغيّر السطح من تحته. */
@media (min-width: 768px) {
    aside.sidebar,
    aside.app-sidebar {
        --acc: #7FD4E4;          /* 5.98:1 على البترولي */
        --acc-strong: #A6E4F0;
        --purp: #C9BDF5;
        --ink-muted: rgba(255, 255, 255, 0.70);
        --ink-faint: rgba(255, 255, 255, 0.55);
    }
}

@media (min-width: 768px) {
    /* ٢) الشعار: الملفّ الرسمي الأبيض لا نسخةٌ مشتقّة بمرشّح.
          assets/images/logo.png علامةٌ داكنة، فتختفي على البترولي. وكنتُ
          بيّضتُها بـfilter: brightness(0) invert(1)، وهو حلٌّ يعمل لكنه
          يطمس التدرّج بين المربّع التركوازي ونصّ الكلمة. ولمّا وصلت
          مجموعة الهوية الرسمية صار الملفّ الصحيح متاحاً.

          content: url() يستبدل الصورة المعروضة دون لمس سمة src في
          components.js — وهو الوجه الوحيد لتبديل صورةٍ يكتبها JS من CSS
          وحده. */
    aside.sidebar .sidebar-logo img,
    aside.app-sidebar .sidebar-logo img {
        content: url('../assets/images/brand/domira-wordmark-white.png');
    }

    /* الحاوية كانت مربّعاً صغيراً بخلفية؛ التصميم يجعلها كلمةً بعرض
       الشريط. */
    aside.sidebar .sidebar-logo,
    aside.app-sidebar .sidebar-logo {
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ────────────────────────────────────────────────────────────────────
   زرّ المساعد العائم — موضعه ولونه
   ────────────────────────────────────────────────────────────────────
   js/assistant.js يحقن <style> فيه #daRoot{right:20px} ولونَ الزرّ
   تدرّجاً بنفسجيّاً من خارج الهوية.

   الموضع: على سطح المكتب يقع الزرّ فوق الشريط فيحجب بنداً منه. وكنتُ
   تركتُه لأن إزاحته بـ!important تُجمّده وتُعطّل سحبه بالفأرة.

   والحلّ أن نرفع التخصيص بدل أن نفرض الأولوية: html body #daRoot
   تخصيصها (0,1,2) فتغلب قاعدة assistant.js (0,1,0) المحقونة بعدنا،
   وتبقى أدنى من النمط السطري الذي يكتبه السحب عند الإفلات. فالموضع
   الافتراضي يحترم الشريط، والمستخدم يظلّ يسحبه حيث شاء.

   واللون تدرّجٌ بنفسجي لا صلة له بالهوية، والتصميم لا تدرّج فيه على
   سطح. يُستبدل بالبترولي المصمت. */
@media (min-width: 768px) {
    html body #daRoot {
        right: calc(var(--sidebar-width) + 20px);
    }
}

html body .da-btn {
    background: var(--brand-petrol);
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow: 0 6px 18px rgba(16, 42, 53, 0.28);
}

html body .da-btn:hover {
    background: var(--brand-petrol-deep);
    box-shadow: 0 8px 22px rgba(16, 42, 53, 0.34);
}

/* ════════════════════════════════════════════════════════════════════
   مطابقة التصاميم — المرحلة الثانية: التبويبات والأزرار والقوائم
   المرجع: desktop/13-tasks.png · desktop/03-home.png · mobile/02-home.png
   ════════════════════════════════════════════════════════════════════ */

/* ─── التبويبات ────────────────────────────────────────────────────
   كانت كبسولاتٍ داخل شريطٍ رمادي بظلّ. والتصميم يجعلها نصّاً عارياً
   يفصله خطٌّ سفليّ واحد يمتدّ تحت الصفّ كلّه، والنشط وحده يحمل خطّاً
   تركوازيّاً سميكاً ولونَ نصٍّ تركوازيّاً.

   السبب أن الكبسولة تُنافس المحتوى على الانتباه: مستطيلٌ ملوّن بظلٍّ في
   أعلى الصفحة يسحب العين قبل العنوان. والخطّ السفليّ يدلّ بلا ضجيج.

   صنف active يبدّله JS — يُنسَّق هنا ولا يُمَسّ اسمه. */
.tabs,
.hr-tabs,
.sup-tabs,
.exec-tabs {
    background: transparent;
    padding: 0;
    border-radius: 0;
    gap: 4px;
    border-block-end: 1px solid var(--bd-base);
    margin-bottom: 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar,
.hr-tabs::-webkit-scrollbar,
.sup-tabs::-webkit-scrollbar,
.exec-tabs::-webkit-scrollbar { display: none; }

.tab-btn,
.exec-tab-btn,
.hr-tab,
.sup-tab,
.acc-tab-link {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--ink-muted);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 12px 18px;
    min-height: 44px;
    white-space: nowrap;
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
    transition: color .18s var(--imp-ease), border-color .18s var(--imp-ease);
}

.tab-btn:hover,
.exec-tab-btn:hover,
.hr-tab:hover,
.sup-tab:hover,
.acc-tab-link:hover {
    color: var(--ink-strong);
    background: transparent;
}

.tab-btn.active,
.exec-tab-btn.active,
.hr-tab.active,
.sup-tab.active,
.acc-tab-link.active {
    background: transparent;
    box-shadow: none;
    color: var(--acc);
    border-block-end-color: var(--acc);
    font-weight: 700;
}

/* ─── الزرّ الأساسي: بتروليّ مصمت ─────────────────────────
   البترولي للفعل الأساسيّ — «+ عميل جديد» في 07-customers.png —
   والتركوازي للحالة النشطة وحدها: بند الشريط المختار، والتبويب
   النشط، ورقم الصفحة الحالي.

   والتفريق دلاليّ لا جماليّ: البترولي يقول «افعل» والتركوازي
   يقول «أنت هنا». ولو تشابها لظنّ المستخدم الموضع النشط زرّاً. */
.btn-primary,
.btn.btn-primary,
button.btn-primary {
    background: var(--acc-strong);
    border: 1px solid var(--acc-strong);
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
    min-height: 44px;
    box-shadow: none;
}

.btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover {
    background: var(--brand-petrol-deep, #0E3444);
    border-color: var(--brand-petrol-deep, #0E3444);
}

/* في الوضع الداكن ينقلب التركوازي إلى فاتح، فالنصّ الأبيض عليه يسقط
   إلى 1.9:1. الحبر الداكن هو الصحيح هناك. */
.dark .btn-primary,
.dark .btn.btn-primary,
.dark button.btn-primary {
    color: var(--srf-base);
}

/* ─── صفوف المهام: شريط الحالة على الحافّة ────────────────
   في desktop/13-tasks.png لكل صفّ شريطٌ ملوّن رفيع على حافّته
   الخارجية يحمل حالته. وهو أوضح من تلوين النصّ: العين تمسح
   عموداً واحداً بدل أن تقرأ كل صفّ.

   .task-card هو الصنف الفعليّ الذي يكتبه js/tasks.js:1471 مع
   status-${task.status}، وهو position:relative أصلاً ولا ::after له —
   فُحص قبل الكتابة. واللون يتبع الحالة الموجودة لا حالةً
   مخترعة: المنجَز أخضر، والمؤجّل كهرمانيّ، وما سواهما تركوازيّ. */
.task-card::after {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    inset-block: 0;
    width: 4px;
    background: var(--row-accent, var(--acc));
    border-start-end-radius: var(--r-md);
    border-end-end-radius: var(--r-md);
}

.task-card.status-completed { --row-accent: var(--ok); }
.task-card.status-snoozed   { --row-accent: var(--warn); }

/* ─── بطاقات الإحصاء ──────────────────────────────────────────────
   التصميم: بياضٌ، انحناء 16px، حدٌّ رفيع، بلا ظلّ ثقيل. والرقم ضخمٌ
   بترولي والعنوان فوقه صغيرٌ هادئ. */
.stat-card,
.stats-card,
.bento-card,
.a-stat {
    background: var(--srf-raised);
    border: 1px solid var(--bd-base);
    border-radius: var(--r-lg);
    box-shadow: var(--imp-shadow-md);
}

/* ─── شريط التمرير ────────────────────────────────────────────────
   كان بنفسجيّاً من اللوحة القديمة. */
* {
    scrollbar-color: var(--bd-strong) transparent;
}

/* ════════════════════════════════════════════════════════════════════
   الاستجابة — 375 / 768 / 1024 / 1440
   ════════════════════════════════════════════════════════════════════ */

/* الجداول العريضة تنزلق داخل حاويتها، لا تدفع الصفحة. القاعدة على
   الحاوية لا على الجدول: الجدول نفسه لا يَقبل overflow. */
.table-container,
.table-wrapper,
.table-responsive,
.hr-table-container,
.pq-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

@media (max-width: 767.98px) {
    :root {
        --main-content-bottom: calc(70px + var(--safe-bottom));
    }
    /* النماذج بعرضٍ كامل على الجوّال، ومساحة لمسٍ لا تقلّ عن 44px. */
    .form-control,
    .form-input,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    /* datetime-local وtime كانا خارج القائمتين معاً — خمسةٌ وعشرون حقلاً
       في المستودع، كلّها مواعيدُ مهامٍ ودفعات. والمواعيد أكثر ما يُلمس
       على الجوّال، وسقوطها دون 16px يُقرّب Safari الصفحة عند التركيز
       فلا يعود المستخدم إلى العرض الأصلي إلا يدوياً. */
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"],
    input[type="week"],
    input[type="url"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea {
        width: 100%;
        min-height: 44px;
        font-size: 16px;   /* دون 16px يُقرّب Safari الصفحة عند التركيز */
    }

    .btn,
    button.btn,
    .tab-btn,
    .exec-tab-btn,
    .hr-tab,
    .sup-tab {
        min-height: 44px;
    }

    /* الصفحة لا تنزلق أفقيّاً مهما طال محتوى. */
    html, body { overflow-x: hidden; }
}

@media (max-width: 480px) {
    /* صفّ الأزرار في الترويسة ينسدل بدل أن يَضغط العنوان. */
    header.top-bar,
    header.content-header,
    .page-header {
        gap: 10px;
    }

    .header-actions,
    .toolbar-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .header-actions .btn,
    .toolbar-actions .btn {
        flex: 1 1 auto;
    }
}

/* ─── حاويات الجداول العريضة ───────────────────────────────────────
   الجدول نفسه لا يَقبل overflow — لا بدّ من حاويةٍ تحمله. وهذه كل
   الحاويات المستعملة فعلاً في المشروع، أُحصيت من الوسم المجاور لكل
   <table> في الصفحات وقوالب JS، لا مقدَّرة:

       mk-twrap · acc-table · table-container · hr-table-container
       cnt-scroll-x · table-responsive · table-wrapper · fx-wrap
       custom-scrollbar · overflow-x-auto · pq-table-scroll

   بدونها يدفع جدولُ العملاء (min-width 1270px) الصفحةَ كلّها، فيصير
   التمرير الأفقيّ على مستوى المستند — وهو ما يكسر الترويسة الثابتة
   والشريط السفليّ معاً. */
.mk-twrap,
.acc-table,
.table-container,
.table-wrapper,
.table-responsive,
.hr-table-container,
.cnt-scroll-x,
.fx-wrap,
.custom-scrollbar,
.overflow-x-auto,
.pq-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* ─── صفوف الشارات الأفقية ─────────────────────────────────────────
   صفّ إحصاءٍ من ستّ شاراتٍ لا يسع 375px. والانسدال يجعله أربعة أسطر
   تدفع المحتوى. والتصميم يُبقيه سطراً واحداً — فليَنزلق. */
@media (max-width: 767.98px) {
    .cust-stats-row,
    .stats-row,
    .chips-row,
    .filters-row,
    .tasks-filters-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
        padding-block-end: 4px;
    }

    .cust-stats-row::-webkit-scrollbar,
    .stats-row::-webkit-scrollbar,
    .chips-row::-webkit-scrollbar,
    .filters-row::-webkit-scrollbar,
    .tasks-filters-bar::-webkit-scrollbar { display: none; }

    .cust-stats-row > *,
    .stats-row > *,
    .chips-row > * { flex: 0 0 auto; }
}

/* عنصر flex أو grid لا ينكمش دون عرض محتواه ما لم يُقَل له
   min-width:0 — وهذا سبب بقاء جدول العملاء 1267px رغم أن
   حاويته overflow-x:auto أصلاً. الحاوية كانت تمتدّ لا تنزلق،
   فلم يكن هناك فيضٌ تخفيه.

   القاعدة تشمل الحاويات وأسلافها المعتادة. */
.mk-twrap, .acc-table, .table-container, .table-wrapper, .table-responsive,
.hr-table-container, .cnt-scroll-x, .fx-wrap, .custom-scrollbar,
.overflow-x-auto, .pq-table-scroll,
.content-card, .card, .glass-panel, .imp-card,
main.app-main, main.main-content, .app-content, .page-content {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .cust-stats-row, .stats-row, .chips-row, .filters-row, .tasks-filters-bar {
        min-width: 0;
    }
}

/* ════════════════════════════════════════════════════════════════════
   الإشعارات — الجرس والقائمة المنسدلة والنخب
   المرجع: mobile/02-home.png (نقطة حمراء على الجرس) + لغة التصميم
   ════════════════════════════════════════════════════════════════════ */

/* ‎--dark-surface-hover رمزٌ من اللوحة القديمة، قيمته مضبوطة على سطحٍ
   داكن. على البطاقة البيضاء يصير الجرس مربّعاً رماديّاً غريباً. */
.notification-bell {
    background: var(--srf-elev);
    border: 1px solid var(--bd-base);
    color: var(--ink-base);
    border-radius: 10px;
    min-width: 40px;
    min-height: 40px;
}

.notification-bell:hover {
    background: var(--srf-sunk);
    color: var(--ink-strong);
    border-color: var(--acc);
}

/* حلقة الشارة كانت ‎rgba(10,14,20,0.95)‎ — سوادٌ مثبّت يفترض سطحاً
   داكناً، فيصير طوقاً أسود على الأبيض. ولونُ السطح هو الصحيح: الحلقة
   تفصل الشارة عمّا تحتها أيّاً كان. */
.notification-badge {
    background: var(--dng);
    color: #fff;
    border: 2px solid var(--srf-raised);
    box-shadow: none;
}

.dark .notification-badge { color: var(--srf-base); }

/* القائمة: حدٌّ وظلٌّ خفيف، لا ظلٌّ ثقيل. */
.notification-dropdown {
    background: var(--srf-raised);
    border: 1px solid var(--bd-base);
    border-radius: var(--r-lg);
    box-shadow: var(--imp-shadow-lg);
}

.notif-dropdown-header {
    background: var(--srf-raised);
    border-bottom: 1px solid var(--bd-base);
}

.notif-dropdown-header h4 { color: var(--ink-strong); font-weight: 700; }

.notif-item {
    border-bottom: 1px solid var(--bd-faint);
}

.notif-item:hover { background: var(--srf-sunk); }

/* غير المقروء كان بخلفيةٍ خضراء — والأخضر في هذا النظام يعني «منجَز»،
   فإشعارٌ جديدٌ بلون النجاح يقول عكس ما يعني. التركوازي هو لون الانتباه
   في الهوية. والخطّ الجانبي يبقيه مميّزاً حتى لمن لا يميّز الدرجات. */
.notif-item.unread {
    background: var(--acc-soft);
    border-inline-end: 3px solid var(--acc);
}

.notif-item.read { opacity: 0.68; }

.notif-item-title { color: var(--ink-strong); }
.notif-item-body,
.notif-item-msg { color: var(--ink-muted); }
.notif-item-time { color: var(--ink-faint); }

.notif-mark-read {
    color: var(--acc);
    min-height: 32px;
}

.notif-mark-read:hover { background: var(--acc-soft); }

/* ─── النخب (Toasts) ──────────────────────────────────────────────
   كان النوع يُميَّز بلون الحدّ وحده — فرقٌ لا يُرى على حدٍّ عرضه بكسل.
   شريطٌ عرضه 4px على الحافّة الأمامية يُقرأ فوراً. */
.toast {
    background: var(--srf-raised);
    border: 1px solid var(--bd-base);
    color: var(--ink-strong);
    border-radius: var(--r-md);
    box-shadow: var(--imp-shadow-lg);
    border-inline-start: 4px solid var(--bd-strong);
}

.toast-container .toast { backdrop-filter: none; }

.toast.success { border-color: var(--bd-base); border-inline-start-color: var(--ok); }
.toast.error   { border-color: var(--bd-base); border-inline-start-color: var(--dng); }
.toast.warning { border-color: var(--bd-base); border-inline-start-color: var(--warn); }
.toast.info    { border-color: var(--bd-base); border-inline-start-color: var(--inf); }

@media (max-width: 480px) {
    /* على الجوّال يأخذ النخب عرض الشاشة ناقص هامشاً، ويرتفع فوق
       منطقة الإيماءة السفلية. */
    .toast-container {
        inset-inline: 12px;
        bottom: calc(16px + var(--safe-bottom, 0px));
    }

    .toast { width: 100%; }

    /* قاعدةٌ أُزيلت: ‎inset-inline: 10px‎ تُثبّت حافّتي اللوحة معاً، وهي
       الصورةُ نفسُها من عطلِ الإفراط في التقييد. واللوحةُ عند هذا العرض
       ورقةٌ سفليّةٌ بـ‎inset: 0‎، فالقاعدةُ لا تصف شيئاً قائماً. */
}

/* العنصر الفائض فعلاً حول جدول العملاء div بلا صنف — قاسه
   المسبار 1267px داخل 375. والاستهداف بالاسم لا يبلغه،
   وإضافة صنفٍ له تعني تعقّب كل موضع يُنشَأ فيه من JS. فيُستهدَف
   ببنيته: كل عنصرٍ ابنُه المباشر جدول، أيّاً كان اسمه.

   :has() أساسية في كل المتصفّحات الحالية، ومن لا يدعمها
   يتجاهل القاعدة وحدها فيرجع إلى السلوك السابق لا إلى عطل. */
*:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    min-width: 0;
}

/* والاستثناء: خلية جدولٍ تحوي جدولاً متداخلاً، والجسم نفسه. */
td:has(> table), th:has(> table), body:has(> table) {
    overflow-x: visible;
}

/* ─── الشارات كبسولات ────────────────────────────────
   07-customers.png يُظهر التصنيف كبسولةً مستديرة بالكامل، لا
   مستطيلاً بانحناء 6px. والفرق ليس زخرفيّاً: المستطيل ذو الانحناء
   الخفيف يشبه الزرّ في هذا النظام، والكبسولة لا تُظنّ قابلة للضغط. */
.badge,
.chip,
.status-badge,
.task-badge {
    border-radius: 999px;
    padding: 5px 14px;
    font-weight: 600;
    font-size: 0.78rem;
    border: none;
}

/* ─── الترقيم ──────────────────────────────────────── */
.pagination button {
    min-width: 34px;
    min-height: 34px;
    border-radius: 8px;
    border: 1px solid var(--bd-base);
    background: var(--srf-raised);
    color: var(--ink-base);
    font-weight: 600;
}

.pagination button:hover:not(:disabled) {
    border-color: var(--acc);
    color: var(--acc);
    background: var(--srf-raised);
}

.pagination button.active {
    background: var(--acc);
    border-color: var(--acc);
    color: #fff;
}

.dark .pagination button.active { color: var(--srf-base); }

/* ════════════════════════════════════════════════════════════════════
   إصلاحات الشريط الجانبي — مُبلَّغة من الاستعمال الفعلي
   2026-10-03
   ════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

    /* ─── ١) القائمة لا تتمرّر ────────────────────────────────────
       nav.sidebar-nav يرث height:100% من قواعد الشريط السفليّ. وداخل
       عمودٍ مرن ارتفاعه 100vh، ذلك يعني ارتفاع الشريط **كلّه** — لا ما
       تبقّى بعد الترويسة وبطاقة المستخدم. فينزلق أسفل القائمة تحت حدّ
       الشريط، ويقصّه overflow:hidden الذي على <aside>، بلا شريط تمرير
       لأن العنصر نفسه ليس أطول من صندوقه.

       والعلاج شرطان معاً، وأحدهما وحده لا يكفي:
         height: auto   — ليحسب المرن ارتفاعه من الفراغ المتبقّي
         min-height: 0  — لأن عنصر flex لا ينكمش دون محتواه افتراضيّاً،
                          فيبقى بطول القائمة كاملةً ولو كان overflow
                          مضبوطاً. هذه هي العلّة نفسها التي وجدتُها في
                          جدول العملاء. */
    aside.sidebar nav.sidebar-nav,
    aside.app-sidebar nav.sidebar-nav,
    aside.sidebar .nav-links,
    aside.app-sidebar .nav-links {
        height: auto !important;
        min-height: 0 !important;
        flex: 1 1 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: contain;
        scroll-snap-type: none !important;   /* الالتقاط الأفقي يعرقل العمودي */
        cursor: default !important;          /* grab كان للسحب الأفقي */
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
    }

    /* شريط تمرير مرئيّ على البترولي: الشفّاف التام يجعل القائمة تبدو
       غير قابلة للتمرير، وهي الشكوى نفسها التي تكرّرت في الجداول. */
    aside.sidebar nav.sidebar-nav::-webkit-scrollbar,
    aside.app-sidebar nav.sidebar-nav::-webkit-scrollbar {
        width: 6px;
        height: 0;
    }

    aside.sidebar nav.sidebar-nav::-webkit-scrollbar-thumb,
    aside.app-sidebar nav.sidebar-nav::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.28);
        border-radius: 3px;
    }

    aside.sidebar nav.sidebar-nav::-webkit-scrollbar-thumb:hover,
    aside.app-sidebar nav.sidebar-nav::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.45);
    }

    aside.sidebar nav.sidebar-nav::-webkit-scrollbar-track,
    aside.app-sidebar nav.sidebar-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    /* الترويسة وبطاقة المستخدم ثابتتان: لا تنكمشان ولا تتمرّران مع
       القائمة. بدون flex-shrink:0 يضغطهما المرن حين تطول القائمة. */
    aside.sidebar .sidebar-header,
    aside.app-sidebar .sidebar-header,
    aside.sidebar .sidebar-user,
    aside.app-sidebar .sidebar-user {
        flex: 0 0 auto !important;
    }

    /* ─── ٢) الزرّ العائم يحجب بنود الشريط ───────────────────────
       js/assistant.js:503 يكتب right **نمطاً سطريّاً** عند الإقلاع
       (استعادةً للموضع المحفوظ أو الافتراضي). والنمط السطري يغلب أيّ
       محدِّد مهما علا تخصيصه — فمحاولتي السابقة برفع التخصيص كانت
       تُصارع ما لا يُصارَع.

       ولا أستعمل !important: هي وحدها تغلب السطري، لكنها تُجمّد السحب
       فيصير الزرّ عالقاً.

       والهامش هو المخرج: المتصفّح يحسب الموضع من right **ثم** يزيح
       بالهامش. فـJS يكتب right كما يشاء، والزرّ يبقى دائماً خارج عرض
       الشريط. والسحب يعمل كاملاً.

       وهامشٌ *فيزيائي* لا منطقيّ عمداً: الزرّ نفسه يُوضع بـright
       الفيزيائية في assistant.js، فالمنطقيّة هنا تنقلب عليه في RTL. */
    /* لا هامش بعد اليوم: صار الموضع الافتراضي للزرّ أسفلَ اليسار في
       js/assistant.js، فهو بعيدٌ عن الشريط أصلاً. ولو أُبقي الهامش
       لدفعه 240px إلى اليسار — أي خارج الشاشة.

       وهذا أيضاً يُنهي الحدّ الذي ذكرتُه سابقاً: السحب إلى أقصى اليسار
       كان يُخرج الزرّ لأن حدّ assistant.js يقيس من right ولا يعلم
       بالهامش. لا هامش ← لا خلل. */

    /* ─── ٣) عرض الشريط يتبع الشاشة ──────────────────────────────
       240px ثابتةً تأكل سُدس شاشة 1366 وتبدو ضيّقة على 1920. */
    :root { --sidebar-width: 212px; }
}

@media (min-width: 1280px) {
    :root { --sidebar-width: 240px; }
}

@media (min-width: 1680px) {
    :root { --sidebar-width: 264px; }
}

/* ════════════════════════════════════════════════════════════════════
   طيّ الشريط الجانبي على سطح المكتب
   ════════════════════════════════════════════════════════════════════
   الطيّ كان يعمل قبل الهوية: js/components.js يضيف الصنف collapsed على
   <aside> وعلى #sidebarContainer معاً، وقواعد السطر 1281 تُضيّقه إلى
   64px وتُخفي النصوص.

   ثم جاءت كتلتي فثبّتت ‎width: var(--sidebar-width) !important‎ على
   <aside>، فغلبت قاعدة الطيّ وأبطلتها. الخطأ لي.

   والعلاج أن يتبع **كل شيء** رمزاً واحداً بدل أن يُعاد تعريف كل قاعدة:
   عرض الشريط، وهامش المحتوى، وإزاحة الزرّ العائم، كلّها مكتوبة أصلاً
   بـvar(--sidebar-width). فيكفي تغيير قيمة الرمز وقت الطيّ.

   ويُضبط على <body> لا على .app-layout: الزرّ العائم #daRoot ابنٌ
   مباشر للجسم لا للتخطيط، فلو ضُبط على التخطيط وحده لبقي الزرّ مزاحاً
   بعرض الشريط المفرود بينما الشريط مطويّ.

   :has() أساسية في كل المتصفّحات الحالية، ومن لا يدعمها يرى الشريط
   مفروداً دائماً — تدهورٌ لطيف لا عطل. */

@media (min-width: 768px) {

    body:has(#sidebarContainer.collapsed) {
        --sidebar-width: 72px;
    }

    /* العرض يتبع الرمز بدل القيمة الثابتة 64px في قاعدة السطر 1281 */
    aside.sidebar.collapsed,
    aside.app-sidebar.collapsed {
        width: var(--sidebar-width) !important;
        min-width: var(--sidebar-width) !important;
        max-width: var(--sidebar-width) !important;
        padding: 0 !important;
    }

    /* النصوص تختفي والأيقونات تبقى — هذا هو معنى الطيّ */
    aside.sidebar.collapsed .nav-text,
    aside.app-sidebar.collapsed .nav-text,
    aside.sidebar.collapsed .sidebar-brand,
    aside.app-sidebar.collapsed .sidebar-brand,
    aside.sidebar.collapsed .nav-section-title,
    aside.app-sidebar.collapsed .nav-section-title,
    aside.sidebar.collapsed .user-info,
    aside.app-sidebar.collapsed .user-info {
        display: none !important;
    }

    /* البند يصير مربّعاً والأيقونة في وسطه */
    aside.sidebar.collapsed .nav-item a,
    aside.sidebar.collapsed a.nav-item,
    aside.app-sidebar.collapsed .nav-item a,
    aside.app-sidebar.collapsed a.nav-item {
        justify-content: center !important;
        padding: 10px 0 !important;
        margin-inline: 8px;
        border-radius: var(--r-md) !important;
        gap: 0 !important;
    }

    /* العنصر النشط لا يُلاصق الحافّة وهو مطويّ: الكتلة الملاصقة تبدو
       قصّاً لا تمييزاً حين يكون عرضها 56px. */
    aside.sidebar.collapsed .nav-item a.active,
    aside.sidebar.collapsed a.nav-item.active,
    aside.app-sidebar.collapsed .nav-item a.active,
    aside.app-sidebar.collapsed a.nav-item.active {
        border-radius: var(--r-md) !important;
    }

    aside.sidebar.collapsed nav.sidebar-nav,
    aside.app-sidebar.collapsed nav.sidebar-nav {
        padding-inline: 0 !important;
    }

    /* الترويسة: العلامة المربّعة بدل الشعار الكامل — الكلمة لا تسع
       72px، ولو ضُغطت لصارت لطخة. */
    aside.sidebar.collapsed .sidebar-header,
    aside.app-sidebar.collapsed .sidebar-header {
        flex-direction: column !important;
        gap: 10px;
        padding: 16px 8px 12px !important;
        justify-content: center !important;
    }

    aside.sidebar.collapsed .sidebar-logo img,
    aside.app-sidebar.collapsed .sidebar-logo img {
        content: url('../assets/images/brand/domira-mark-white.png') !important;
        width: 34px !important;
        height: auto !important;
    }

    /* زرّ الطيّ يبقى ظاهراً ومركَّزاً — وإلا تعذّر الفرد مرّةً أخرى */
    aside.sidebar.collapsed .sidebar-toggle,
    aside.app-sidebar.collapsed .sidebar-toggle {
        display: flex !important;
        margin-inline: auto !important;
    }

    aside.sidebar.collapsed .sidebar-user,
    aside.app-sidebar.collapsed .sidebar-user {
        flex-direction: column !important;
        justify-content: center !important;
        padding: 12px 6px !important;
        gap: 8px;
    }

    /* الزرّ العائم يتبع العرض الجديد أيضاً — يَرِث الرمز من <body> */
}

/* ═══════════════════════════════════════════════════════════════════
   تعطيل تكبير Dock على الشريط العموديّ
   ═══════════════════════════════════════════════════════════════════
   js/components.js:5751 فيه initDockMagnify — تكبيرٌ على طريقة Dock
   في macOS، كُتب للعصا السفلية الأفقية وهو صوابٌ هناك.

   لكنه يقيس بُعداً **أفقيّاً** وحده (mouseX مقابل itemCenterX). وعلى
   شريطٍ عموديّ تقع البنود كلّها على المحور الأفقيّ نفسه — فبُعدها
   عن المؤشّر متساوٍ، فتُكبّر **جميعاً دفعةً واحدة** بمجرّد مرور الفأرة
   فوق الشريط. ومع scale(1.45) تتجاوز عرض الشريط فتُقصّ أيقوناتها.

   وهذه من المواضع القليلة التي يصحّ فيها !important: النمط السطريّ
   لا يُغلَب بغيرها، ولا شيء آخر يعتمد على transform هنا — بخلاف الزرّ
   العائم الذي يحمل سحبه في نمطه السطريّ، فلم أستعملها هناك.

   والتأثير يبقى عاملاً دون 1024px حيث الشريط أفقيّ فعلاً. */
@media (min-width: 768px) {
    aside.sidebar .nav-item a,
    aside.sidebar a.nav-item,
    aside.app-sidebar .nav-item a,
    aside.app-sidebar a.nav-item {
        transform: none !important;
        transition: background-color .15s var(--imp-ease), color .15s var(--imp-ease) !important;
        will-change: auto !important;
        transform-origin: center !important;
        /* البند لا يتجاوز عرض الشريط مهما طال نصّه */
        max-width: 100%;
        overflow: hidden;
    }

    /* النصّ يُقصّ بنقاط لا يدفع الأيقونة خارج الحافّة */
    aside.sidebar .nav-text,
    aside.app-sidebar .nav-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    aside.sidebar .nav-icon,
    aside.app-sidebar .nav-icon {
        flex: 0 0 auto;
    }
}

/* ─── شارة العدد ───────────────────────────────────────────────────
   كانت معلّقة فوق الأيقونة (position:absolute · top:-4 · right:-5)،
   وهو الصواب في العصا السفلية: البند هناك أيقونةٌ فوق نصّ، ولا مكان
   للشارة إلا فوقها.

   أمّا على الشريط العمودي فالبند صفٌّ كامل: أيقونة ثم نصّ ثم فراغ. فلا
   داعي للتعليق أصلاً — تصير الشارة عنصراً عاديّاً في الصفّ يدفعه
   margin-inline-start:auto إلى الحافّة المقابلة. فتصطفّ الشارات كلّها
   على خطٍّ واحد بلا تراكب ولا قصّ.

   وهذا أمتن من ضبط إزاحات: الصفّ هو من يحسب الموضع، لا أنا. */
@media (min-width: 768px) {
    aside.sidebar .nav-badge,
    aside.app-sidebar .nav-badge {
        position: static;
        inset: auto;
        right: auto;
        top: auto;
        margin-inline-start: auto;
        margin-inline-end: 0;
        flex: 0 0 auto;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 10px;
        font-size: 0.68rem;
        line-height: 1;
        box-shadow: none;
    }

    /* النصّ يملأ ما بين الأيقونة والشارة، ويُقصّ بنقاطٍ إن طال —
       فلا يدفع الشارة خارج البند. */
    aside.sidebar .nav-text,
    aside.app-sidebar .nav-text {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* شارة التحذير الكهرمانية: الأبيض عليها 2.1:1 — حبرٌ داكن هو
       الصحيح، وهو الفخّ نفسه المكتوب في DESIGN.md. */
    aside.sidebar .nav-badge.warning,
    aside.app-sidebar .nav-badge.warning {
        background: var(--chip-warn-bg, #FBEFC8);
        color: var(--chip-warn-ink, #7A5500);
    }
}


/* ════════════════════════════════════════════════════════════════════
   الشريط السفليّ على الجوّال — إعادة بناءٍ على الهوية
   2026-10-03
   ════════════════════════════════════════════════════════════════════
   الكتلة القديمة (السطر ~720) تحوّل الشريط الجانبي إلى حبّةٍ عائمة:
   زجاجٌ ضبابيّ، وحوافٌّ 24px، وهالةٌ بنفسجية ‎#7c3aed‎ من اللوحة التي
   رحلت. وهي آخر جيبٍ بقي منها، ويقع في أكثر موضعٍ يراه المستخدم.

   والتصميم المرفق (mobile/02-home) يجعله شريطاً ملاصقاً للحافّة بعرض
   الشاشة كاملاً: سطحٌ أبيض، حدٌّ شعريّ علويّ، أيقونات بترولية، والنشط
   يُعلَّم بقضيبٍ فوقه لا بخلفيةٍ تحته.

   وأبقيتُ الانزلاق الأفقيّ ولم أقصره على خمسة بنودٍ كما في التصميم:
   التصميم يرسم تطبيقاً بخمس شاشات، والنظام فيه ثمانية عشر قسماً تتبع
   صلاحيّات الموظّف. قصرُها خمسةً يُخفي أقساماً كاملةً عن أصحابها —
   وذلك قرارُ منتَجٍ لا تنسيق، ويحتاج برمجةً في js/components.js.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    aside.sidebar,
    aside.app-sidebar {
        /* ملاصقٌ للحافّة بعرض الشاشة: الحبّة العائمة تهدر 10% من العرض
           على كلّ جانب، وهي أثمن ما على شاشةٍ عرضها 375. */
        left: 0 !important;
        right: 0 !important;
        inset-inline: 0 !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        background: var(--srf-raised) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-top: 1px solid var(--bd-faint) !important;
        box-shadow: 0 -1px 0 rgba(16, 42, 53, 0.03) !important;
        align-items: stretch !important;
        min-height: 0 !important;
        height: auto !important;
    }

    /* الدليلان الجانبيّان على وجود بنودٍ خلف الحافّة: كانا تدرّجين
       بنفسجيّين على زجاج. صارا تلاشياً بلون السطح نفسه. */
    aside.sidebar::after,
    aside.sidebar::before,
    aside.app-sidebar::after,
    aside.app-sidebar::before {
        top: 0;
        bottom: 0;
        width: 26px;
        /* ثابتٌ عشرةَ بكسلاتٍ ثمّ تلاشٍ: التدرّجُ الخالص يبدأ شفّافاً
           عند الحافّة نفسها فلا يُخفي شيئاً عندها. */
        background: linear-gradient(to left, var(--srf-raised) 0 10px, transparent 100%);
        /* فوق الشارة لا تحتها. الشارةُ ‎z-index: 10‎ والتلاشي ‎2‎، فكان
           البندُ المنزلقُ خلف الحافّة يختفي ويبقى رقمُه الأحمرُ معلّقاً
           وحده عند الطرف — وهو ما ظهر في لقطة الجهاز. */
        z-index: 11;
    }

    aside.sidebar::after,
    aside.app-sidebar::after {
        background: linear-gradient(to right, var(--srf-raised) 0 10px, transparent 100%);
    }

    nav.sidebar-nav,
    .nav-links {
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        scrollbar-width: none;
    }

    nav.sidebar-nav::-webkit-scrollbar,
    .nav-links::-webkit-scrollbar {
        height: 0;
        display: none;
    }

    /* البند: أيقونةٌ فوق نصّ، 56px مساحة لمسٍ لا تقلّ عن المطلوب،
       وعرضٌ أدنى يمنع تهشّم النصوص الطويلة. */
    aside.sidebar .nav-item a,
    aside.sidebar a.nav-item,
    aside.app-sidebar .nav-item a,
    aside.app-sidebar a.nav-item {
        position: relative;
        /* ينمو ليملأ الشريط حين تكون البنود قليلة — كما في التصميم،
           خمسةٌ موزَّعةٌ بالتساوي — وينكمش إلى 52px فينزلق حين تكثر.
           فالعدد تابعٌ لصلاحيّات الموظّف لا ثابتٌ في التصميم: مَن له
           خمسة أقسام يرى شريط التصميم نفسه، ومَن له ثمانية عشر يرى
           شريطاً منزلقاً بدل بنودٍ مهروسة. */
        flex: 1 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        /* ‎!important‎ لازمة لا زينة: قاعدةٌ سابقة (السطر ~3337) تثبّت
           ‎min-width: 46px !important‎ و‎height: 50px !important‎، فتهرس
           البند وتقصّ نصّه. والتخصيص وحده لا يغلب ‎!important‎. */
        min-width: 52px !important;
        max-width: 110px;
        width: auto !important;
        height: 58px !important;
        padding: 8px 4px 7px !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--ink-muted) !important;
        transform: none !important;
    }

    aside.sidebar .nav-icon,
    aside.app-sidebar .nav-icon {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
        color: inherit;
    }

    aside.sidebar .nav-icon svg,
    aside.sidebar .nav-icon .icon,
    aside.app-sidebar .nav-icon svg,
    aside.app-sidebar .nav-icon .icon {
        width: 21px !important;
        height: 21px !important;
        stroke: currentColor;
    }

    aside.sidebar .nav-text,
    aside.app-sidebar .nav-text {
        font-size: 0.6rem !important;
        font-weight: 600;
        line-height: 1.1;
        /* ‎width: 100%‎ لا ‎max-width‎: في عمودٍ مرن محاذاته ‎center‎
           يتمدّد النصّ بعرض محتواه فلا يُقصّ أبداً، ويزحف فوق البند
           المجاور. العرض المصرَّح هو ما يجعل ellipsis تعمل أصلاً. */
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        color: inherit;
    }

    /* النصوص الملوَّنة بنمطٍ سطريّ في components.js (المدير الذكي ·
       الموظفون الأذكياء) تبقى بلونها — وهو مقروءٌ على الأبيض — لكن
       النشط منها يتبع البترولي كبقيّة البنود. */
    aside.sidebar .nav-item a.active .nav-text,
    aside.sidebar a.nav-item.active .nav-text,
    aside.app-sidebar .nav-item a.active .nav-text,
    aside.app-sidebar a.nav-item.active .nav-text {
        color: var(--acc-strong) !important;
    }

    /* النشط: قضيبٌ بتروليّ فوق البند — كما في التصميم. والخلفية تبقى
       بيضاء، فالعلامة في الحافّة لا في السطح. */
    aside.sidebar .nav-item a.active,
    aside.sidebar a.nav-item.active,
    aside.app-sidebar .nav-item a.active,
    aside.app-sidebar a.nav-item.active {
        color: var(--acc-strong) !important;
        background: transparent !important;
        font-weight: 700;
    }

    aside.sidebar .nav-item a.active .nav-icon,
    aside.sidebar a.nav-item.active .nav-icon,
    aside.sidebar .nav-item a.active .nav-icon svg,
    aside.sidebar a.nav-item.active .nav-icon svg,
    aside.app-sidebar .nav-item a.active .nav-icon,
    aside.app-sidebar a.nav-item.active .nav-icon,
    aside.app-sidebar .nav-item a.active .nav-icon svg,
    aside.app-sidebar a.nav-item.active .nav-icon svg {
        color: var(--acc-strong) !important;
        stroke: var(--acc-strong) !important;
    }

    aside.sidebar .nav-item a.active::before,
    aside.sidebar a.nav-item.active::before,
    aside.app-sidebar .nav-item a.active::before,
    aside.app-sidebar a.nav-item.active::before {
        content: '';
        position: absolute;
        top: 0;
        inset-inline: 14px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--acc-strong);
    }

    /* الشارة معلّقةٌ فوق الأيقونة هنا — البند أيقونةٌ فوق نصّ، ولا
       مكان لها في الصفّ كما على الشريط العموديّ. */
    aside.sidebar .nav-badge,
    aside.app-sidebar .nav-badge {
        position: absolute;
        top: 4px;
        inset-inline-end: 12px;
        inset-inline-start: auto;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        font-size: 0.58rem;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
        box-shadow: 0 0 0 2px var(--srf-raised);
    }

    aside.sidebar .nav-badge.warning,
    aside.app-sidebar .nav-badge.warning {
        background: var(--chip-warn-bg, #FBEFC8);
        color: var(--chip-warn-ink, #7A5500);
    }

}


/* ════════════════════════════════════════════════════════════════════
   عائلات التبويب — مِحورٌ واحد
   2026-10-03
   ════════════════════════════════════════════════════════════════════
   في المستودع إحدى عشرة عائلة تبويب كُتبت كلٌّ على حدة: admin-tab ·
   sub-nav-tab · hr-tab · sup-tab · eb-tab · la-tab · filter-tab ·
   profile-tab · udemy-tab · new-chat-tab · exec-tab-btn. ومنها ما
   يحمل شريطاً رمادياً خلفه وصبغةً خضراء تحت النشط — من رُقَع «الوضع
   الفاتح» التي كُتبت للّوحة الراحلة، وهي تغلب تنسيق الصفحة نفسها
   بـ!important وإن كان تنسيق الصفحة صحيحاً أصلاً.

   والتصميم (06-admin · 18-execution) يجعل التبويب مسطَّراً: لا صندوق،
   ولا صبغة، وخطٌّ بتروليٌّ تحت النشط وحده. وهو ما يجعل الشاشات تبدو
   من نظامٍ واحد — وهي الشكوى التي تكرّرت: «الشاشات غير متناسقة».
   ════════════════════════════════════════════════════════════════════ */

body .admin-tabs,
body .sub-nav-tabs,
body.light-mode .admin-tabs,
body.light-mode .sub-nav-tabs {
    background: transparent !important;
    border-color: var(--bd-base) !important;
}

body .admin-tab.active,
body .sub-nav-tab.active,
body.light-mode .admin-tab.active,
body.light-mode .sub-nav-tab.active {
    background: transparent !important;
    color: var(--ink-strong) !important;
}

body .admin-tab:hover,
body .sub-nav-tab:hover,
body.light-mode .admin-tab:hover,
body.light-mode .sub-nav-tab:hover {
    background: transparent !important;
    color: var(--ink-base) !important;
}

/* الخطّ تحت النشط: ‎admin-tab‎ له ::after خاصّ به في admin.html،
   و‎sub-nav-tab‎ لا شيء له — فيُعطى واحداً هنا بالقياس نفسه. */
.sub-nav-tab {
    position: relative;
}

.sub-nav-tab.active::after {
    content: '';
    position: absolute;
    inset-inline: 12px;
    bottom: -1px;
    height: 2px;
    background: var(--acc);
}


/* ════════════════════════════════════════════════════════════════════
   الشريط الجانبي: بندٌ واحد بلونٍ واحد
   ════════════════════════════════════════════════════════════════════
   تسعةَ عشرَ بنداً في js/components.js تحمل لوناً سطريّاً خاصّاً —
   «رئيسية التسويق» كهرمانيّ، و«تواصل» تركوازيّ، و«الدورات» أخضر،
   و«خروج» أحمر. والنيّة مفهومة، لكنّ الحصيلة شريطٌ من ثمانية ألوانٍ
   يُفقد النشطَ تمييزه: حين يكون كلُّ شيءٍ مميَّزاً لا يبقى مميَّز.

   والتصميم (03-home · 05-supervisor · 06-admin) يجعل البنود كلّها
   بلونٍ واحد، والتمييز في الحبّة البترولية تحت النشط وحده.

   ولا حاجة إلى لمس components.js: النمط السطريّ هناك بلا !important،
   فقاعدةٌ بـ!important تغلبه — وهو الاستثناء الوحيد الذي تُغلَب فيه
   الأنماط السطرية من ورقة أنماط.
   ════════════════════════════════════════════════════════════════════ */

aside.sidebar .nav-item a .nav-text,
aside.sidebar a.nav-item .nav-text,
aside.app-sidebar .nav-item a .nav-text,
aside.app-sidebar a.nav-item .nav-text {
    color: inherit !important;
}

/* والنشط يبقى سيّد الشريط */
aside.sidebar .nav-item a.active .nav-text,
aside.sidebar a.nav-item.active .nav-text,
aside.app-sidebar .nav-item a.active .nav-text,
aside.app-sidebar a.nav-item.active .nav-text {
    color: inherit !important;
}


/* ════════════════════════════════════════════════════════════════════
   صفوف الأرقام على الجوّال: عمودان لا عمود
   ════════════════════════════════════════════════════════════════════
   كلّ صفوف الأرقام تنهار إلى عمودٍ واحد تحت 768px، فتأخذ ثلاث بطاقاتٍ
   نصف الشاشة طولاً قبل أن يبدأ المحتوى. والتصميم (mobile/02-home)
   يضعها في عمودين — وهو ما يسع الرقم واللافتة بلا ضيق، ويترك الشاشة
   للعمل لا للعناوين.

   والعمود الواحد يبقى تحت 340px وحدها: 375px هو عرض iPhone SE وmini،
   وهو أكثر العروض شيوعاً — فحدٌّ عند 380 يُخرجه من القاعدة كلّها.
   ════════════════════════════════════════════════════════════════════ */

@media (min-width: 340px) and (max-width: 767.98px) {

    .stats-grid,
    .stats-row,
    .stats-banner,
    .hero-stats,
    .cust-stats-row,
    .classification-stats-grid,
    .ru-stats,
    .tasks-stats-grid,
    .m-stats,
    .admin-status,
    .acc-stat-strip,
    .acc-stat-strip.cols-6,
    .acc-stat-strip.cols-7 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    /* الخليّة لا تنكمش دون محتواها داخل الشبكة */
    .stats-grid > *,
    .stats-row > *,
    .hero-stats > *,
    .cust-stats-row > *,
    .classification-stats-grid > *,
    .ru-stats > *,
    .acc-stat-strip > * {
        min-width: 0;
    }
}


/* الزرّ الثانوي في الوضع الداكن: ‎--brand-petrol‎ يُقلب هناك إلى
   ‎#1F7A8C‎، وهو 3.15:1 على ‎--srf-raised #102630‎ — دون العتبة.
   والتركوازي الفاتح ‎#4FB3C7‎ يبلغ 6.6:1، وهو نفسه لون الهوية في
   الداكن. فالدلالة واحدة والدرجة تتبع السطح. */
.dark .btn-ghost,
.dark .btn-outline {
    color: var(--brand-teal);
}

.dark .btn-ghost:hover,
.dark .btn-outline:hover {
    border-color: var(--brand-teal);
}


/* ════════════════════════════════════════════════════════════════════
   الشريط الجانبي في الوضع الداكن
   ════════════════════════════════════════════════════════════════════
   ‎--brand-petrol‎ يُقلب في الداكن إلى ‎#1F7A8C‎ — «التركوازي هو الأبرز».
   وهو صحيحٌ للأزرار والعناوين، لكنّ الشريط الجانبي يأخذ خلفيّته من
   الرمز نفسه، فينقلب من بتروليٍّ عميق إلى تركوازيٍّ فاتح، ويصير نصّه
   الأبيض 2.44:1 عليه. أي أن الوضع الداكن يجعل الشريط **أفتح** لا أدكن.

   والشريط لونٌ ثابت في الهوية لا تابعٌ للوضع: ‎#15475A‎ في الحالين،
   والأبيض عليه 9.2:1. وهو ما في التصاميم كلّها — لا نسخة داكنة للشريط
   لأن الشريط داكنٌ أصلاً.
   ════════════════════════════════════════════════════════════════════ */

/* والرمزان معاً: ‎--brand-teal‎ يُقلب كذلك إلى ‎#4FB3C7‎، وهو حشوة
   الكتلة النشطة — فيصير نصّها الأبيض 2.44:1. وداخل الشريط يبقى
   التركوازي على درجته الأصلية ‎#1F7A8C‎: الأبيض عليها 4.98:1، وهي
   القيمة المقيسة في مصفوفة الهوية. */
.dark aside.sidebar,
.dark aside.app-sidebar {
    --brand-petrol: #15475A;
    --brand-teal: #1F7A8C;
}

@media (min-width: 768px) {
    .dark aside.sidebar,
    .dark aside.app-sidebar {
        background: #15475A !important;
    }

    /* 0.62 تعطي 2.92:1 — الدور سطرٌ صغير، فيحتاج درجةً أعلى لا أقلّ */
    .dark aside.sidebar .sidebar-user .user-role,
    .dark aside.app-sidebar .sidebar-user .user-role {
        color: rgba(255, 255, 255, 0.78);
    }
}

/* الشارة حبّةٌ مكتفية بنفسها: تباينها بين حشوتها وحبرها، لا بينها وبين
   الصفحة. فتُثبَّت في الوضعين بدل أن تتبع رموزاً تنقلب تحتها. */
aside.sidebar .nav-badge.warning,
aside.app-sidebar .nav-badge.warning,
.dark aside.sidebar .nav-badge.warning,
.dark aside.app-sidebar .nav-badge.warning {
    background: #FBEFC8;
    color: #7A5500;
}


/* ════════════════════════════════════════════════════════════════════
   أزرار الأيقونة المستديرة في الترويسة لا تتمدّد
   ════════════════════════════════════════════════════════════════════
   قاعدةٌ في customers.html و ready-units.html تُمدّد كلّ ‎.btn‎ في آخر
   كتلة بالترويسة ليملأ نصف السطر على الجوّال: ‎flex: 1‎ مع
   ‎min-width: calc(50% - 4px)‎. وهي صحيحةٌ لأزرار النصّ، لكنّ الجرس
   أيضاً ‎.btn‎ — وهو دائرة ‎border-radius: 50%‎. فيصير إهليلجاً بعرض
   249px: شكلٌ لا معنى له، ومساحة لمسٍ لا تدلّ على ما تفعل.

   والمفتاح (theme-switch) معه: كبسولةٌ ثابتة العرض بطبيعتها.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    .content-header .notification-bell,
    .content-header .btn.notification-bell,
    header.content-header .notification-bell {
        flex: 0 0 auto !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    .content-header .theme-switch,
    header.content-header .theme-switch {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }
}


/* ════════════════════════════════════════════════════════════════════
   «خروج» يبقى أحمر
   ════════════════════════════════════════════════════════════════════
   توحيدُ ألوان بنود الشريط أعلاه صحيحٌ للأقسام: تسعةَ عشرَ لوناً تُفقد
   النشطَ تمييزه. لكنّ «خروج» ليس قسماً — هو الفعل الوحيد في الشريط
   الذي **يُنهي** شيئاً، والأحمر فيه تحذيرٌ لا تزيين.

   والدرجة تتبع السطح: ‎--dng‎ داخل نطاق الشريط هو ‎#FF9B93‎ فوق 1024px
   (4.98:1 على البترولي) و‎#B3261E‎ على الشريط السفليّ الأبيض — وكلاهما
   مقيسٌ في مصفوفة الهوية.
   ════════════════════════════════════════════════════════════════════ */

aside.sidebar .nav-item[onclick*="logout"],
aside.sidebar a.nav-item[onclick*="logout"],
aside.app-sidebar .nav-item[onclick*="logout"],
aside.app-sidebar a.nav-item[onclick*="logout"],
aside.sidebar .nav-item[title="تسجيل الخروج"],
aside.app-sidebar .nav-item[title="تسجيل الخروج"] {
    color: var(--dng) !important;
}

aside.sidebar .nav-item[onclick*="logout"] .nav-text,
aside.sidebar a.nav-item[onclick*="logout"] .nav-text,
aside.app-sidebar .nav-item[onclick*="logout"] .nav-text,
aside.app-sidebar a.nav-item[onclick*="logout"] .nav-text,
aside.sidebar .nav-item[title="تسجيل الخروج"] .nav-text,
aside.app-sidebar .nav-item[title="تسجيل الخروج"] .nav-text,
aside.sidebar .nav-item[onclick*="logout"] .nav-icon,
aside.app-sidebar .nav-item[onclick*="logout"] .nav-icon,
aside.sidebar .nav-item[onclick*="logout"] .nav-icon svg,
aside.app-sidebar .nav-item[onclick*="logout"] .nav-icon svg {
    color: var(--dng) !important;
    stroke: var(--dng) !important;
}

aside.sidebar .nav-item[onclick*="logout"]:hover,
aside.app-sidebar .nav-item[onclick*="logout"]:hover {
    background: var(--dng-soft, rgba(179, 38, 30, 0.12)) !important;
}


/* ════════════════════════════════════════════════════════════════════
   الطيّ والفرد — صقل
   2026-10-04
   ════════════════════════════════════════════════════════════════════
   الطيّ كان يعمل لكنه يقفز: العرض يتغيّر دفعةً واحدة، والأيقونات تبقى
   بحجمها فتبدو تائهةً في 72px، والشارة الرقمية تخرج من البند، وزرّ
   الطيّ يُشير إلى الجهة نفسها مفروداً ومطويّاً.

   والصقل هنا أربعة أشياء:
     ١. انتقالٌ على العرض — الشريط والحاوية معاً، وإلا انزلق أحدهما
        قبل الآخر فظهر شقٌّ أبيض بينهما أثناء الحركة.
     ٢. هندسةٌ مربّعة وقت الطيّ: بندٌ 48×48 بانحناء 10px، والأيقونة في
        مركزه — لا بندٌ عريضٌ فارغ.
     ٣. الشارة تصير حبّةً صغيرة على كتف الأيقونة بحلقةٍ بلون الشريط،
        فتبقى مقروءةً ولا تدفع شيئاً.
     ٤. سهم الطيّ ينقلب 180° وهو مطويّ، فيقول «افتح» لا «اطوِ».

   و‎title‎ على كل بند (أُضيف في js/components.js مشتقّاً من نصّه نفسه)
   هو ما يجعل المطويّ قابلاً للاستعمال أصلاً: الأيقونة وحدها لا تقول
   شيئاً، والتلميح الأصليّ يظهر فوق كلّ شيء ولا يقصّه حاوٍ.
   ════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

    /* ─── ١) الحركة ───────────────────────────────────────────────── */
    #sidebarContainer,
    aside.sidebar,
    aside.app-sidebar {
        transition: width .22s cubic-bezier(0.16, 1, 0.3, 1),
                    min-width .22s cubic-bezier(0.16, 1, 0.3, 1),
                    max-width .22s cubic-bezier(0.16, 1, 0.3, 1);
    }

    aside.sidebar .nav-text,
    aside.app-sidebar .nav-text,
    aside.sidebar .sidebar-brand,
    aside.app-sidebar .sidebar-brand,
    aside.sidebar .user-info,
    aside.app-sidebar .user-info {
        transition: opacity .14s linear;
    }

    @media (prefers-reduced-motion: reduce) {
        #sidebarContainer,
        aside.sidebar,
        aside.app-sidebar,
        aside.sidebar .nav-text,
        aside.app-sidebar .nav-text { transition: none !important; }
    }

    /* ─── ٢) هندسة المطويّ ────────────────────────────────────────── */
    body:has(#sidebarContainer.collapsed) { --sidebar-width: 76px; }

    aside.sidebar.collapsed .sidebar-header,
    aside.app-sidebar.collapsed .sidebar-header {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 18px 8px 14px !important;
    }

    aside.sidebar.collapsed .sidebar-logo img,
    aside.app-sidebar.collapsed .sidebar-logo img {
        width: 30px !important;
    }

    aside.sidebar.collapsed .sidebar-user,
    aside.app-sidebar.collapsed .sidebar-user {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 8px 14px !important;
        gap: 0 !important;
    }

    aside.sidebar.collapsed .user-avatar,
    aside.app-sidebar.collapsed .user-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.95rem !important;
    }

    aside.sidebar.collapsed nav.sidebar-nav,
    aside.app-sidebar.collapsed nav.sidebar-nav {
        padding-block: 8px 20px !important;
    }

    aside.sidebar.collapsed .nav-item a,
    aside.sidebar.collapsed a.nav-item,
    aside.app-sidebar.collapsed .nav-item a,
    aside.app-sidebar.collapsed a.nav-item {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        margin-inline: auto !important;
        margin-block: 2px !important;
        padding: 0 !important;
        gap: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 10px !important;
        position: relative;
    }

    aside.sidebar.collapsed .nav-icon svg,
    aside.app-sidebar.collapsed .nav-icon svg,
    aside.sidebar.collapsed .nav-icon .icon,
    aside.app-sidebar.collapsed .nav-icon .icon {
        width: 21px !important;
        height: 21px !important;
    }

    /* ─── ٣) الشارة على كتف الأيقونة ───────────────────────────────── */
    aside.sidebar.collapsed .nav-badge,
    aside.app-sidebar.collapsed .nav-badge {
        position: absolute !important;
        top: 4px !important;
        inset-inline-end: 2px !important;
        inset-inline-start: auto !important;
        margin: 0 !important;
        min-width: 17px !important;
        height: 17px !important;
        padding: 0 4px !important;
        border-radius: 9px !important;
        font-size: 0.6rem !important;
        line-height: 17px !important;
        text-align: center;
        box-shadow: 0 0 0 2px var(--brand-petrol, #15475A) !important;
    }

    /* ─── ٤) سهم الطيّ ينقلب ───────────────────────────────────────── */
    aside.sidebar.collapsed .sidebar-toggle svg,
    aside.app-sidebar.collapsed .sidebar-toggle svg {
        transform: rotate(180deg);
    }

    aside.sidebar .sidebar-toggle svg,
    aside.app-sidebar .sidebar-toggle svg {
        transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1);
    }

    aside.sidebar .sidebar-toggle,
    aside.app-sidebar .sidebar-toggle {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        transition: background-color .15s linear;
    }

    aside.sidebar .sidebar-toggle:hover,
    aside.app-sidebar .sidebar-toggle:hover {
        background: rgba(255, 255, 255, 0.10);
    }

    /* النصوص تختفي بلا أن تترك فراغاً يدفع الأيقونة */
    aside.sidebar.collapsed .nav-text,
    aside.app-sidebar.collapsed .nav-text,
    aside.sidebar.collapsed .nav-section-title,
    aside.app-sidebar.collapsed .nav-section-title,
    aside.sidebar.collapsed .sidebar-brand,
    aside.app-sidebar.collapsed .sidebar-brand,
    aside.sidebar.collapsed .user-info,
    aside.app-sidebar.collapsed .user-info {
        display: none !important;
    }
}


/* ════════════════════════════════════════════════════════════════════
   طبقة الجوّال — من تصاميم mobile/ حرفيّاً
   2026-10-04
   ════════════════════════════════════════════════════════════════════
   تصاميم الجوّال تختلف عن تصاميم سطح المكتب في ثلاثة أشياء، وهي ليست
   سهواً بل اختلافُ وسيط:

     ١. العمق: البطاقة على سطح المكتب تُفصل **بحدٍّ شعريّ**، وعلى
        الجوّال **بظلٍّ ناعم** بلا حدّ. والسبب أن الإصبع يرفع البطاقة
        والفأرة تُحوّم فوقها — والظلّ يقول «هذه قابلةٌ للّمس».
     ٢. الانحناء: 18px على الجوّال لا 12px. البطاقة هناك بعرض الشاشة
        كاملاً، والانحناء الصغير على عرضٍ كبير يبدو حادّاً.
     ٣. الشرائح: حبّاتٌ مصمتة (mobile/03-deals-journey) — النشط بترولي
        بحبرٍ أبيض، والثانوي تركوازيّ فاتح، والخامل رماديّ.

   والمراجع: mobile/02-home · 03-deals-journey · 04-customer-profile ·
   05-tasks · 09-ticket.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    /* ─── ١) البطاقة: ظلٌّ لا حدّ ─────────────────────────────────── */
    .card,
    .set-card,
    .glass-panel,
    .acc-glass-panel,
    .mk-card,
    .stat-card,
    .task-stat-card,
    .cstat-card,
    .cust-stat-card,
    .dash-stat-cell,
    .acc-stat-cell,
    .classification-stat-card,
    .task-card,
    .emp-card {
        border-color: transparent !important;
        border-radius: 18px !important;
        box-shadow: 0 1px 2px rgba(16, 42, 53, 0.05),
                    0 4px 14px rgba(16, 42, 53, 0.07) !important;
    }

    /* في الداكن لا يُرى الظلّ، فيعود الحدّ — وإلا ذابت البطاقة في الخلفية */
    .dark .card,
    .dark .set-card,
    .dark .glass-panel,
    .dark .acc-glass-panel,
    .dark .mk-card,
    .dark .stat-card,
    .dark .task-stat-card,
    .dark .cstat-card,
    .dark .cust-stat-card,
    .dark .dash-stat-cell,
    .dark .acc-stat-cell,
    .dark .classification-stat-card,
    .dark .task-card,
    .dark .emp-card {
        border-color: var(--bd-base) !important;
        box-shadow: none !important;
    }

    /* ─── ٢) الزرّ الأساسي: كتلةٌ بترولية ──────────────────────────── */
    .btn-primary,
    .btn.btn-primary {
        border-radius: 12px;
        min-height: 48px;
    }

    /* ─── ٣) الشرائح: حبّاتٌ مصمتة ────────────────────────────────── */
    .filter-tab,
    .company-filter-btn,
    .mk-bchip,
    .la-tab,
    .sub-nav-tab {
        border-radius: 999px !important;
        min-height: 40px;
        padding-inline: 18px !important;
    }

    /* ─── ٤) العناوين ─────────────────────────────────────────────── */
    .page-title,
    h1.page-title {
        font-size: 1.32rem;
        font-weight: 800;
        letter-spacing: -0.01em;
    }
}


/* ════════════════════════════════════════════════════════════════════
   ترويسةُ الصفحة على الجوّال — صفٌّ للعنوان وشبكةٌ للأفعال
   ════════════════════════════════════════════════════════════════════
   الترويسة ‎flex-wrap‎ وأزرارها مختلفةُ العروض، فكانت تنسدل أسناناً:
   زرٌّ عريض ثم ضيّق، وسطرٌ فيه واحدٌ وآخرُ فيه اثنان، وصندوقُ اختيارٍ
   دخيلٌ بينها. وهو أوّلُ ما تراه العين في كلّ صفحة.

   والتصاميم تضع في هذا الموضع شيئين فقط: العنوانَ يميناً، وأدواتِ
   المستخدم (الجرس والمظهر) يساراً في السطر نفسه. ثمّ تأتي الأفعال.

   فالشبكةُ تُعطي ذلك حرفيّاً:
     صفٌّ أوّل  — العنوان ‎minmax(0,1fr)‎ وأدوات المستخدم ‎auto‎
     صفٌّ ثانٍ  — الأفعالُ عمودين متساويين، والأساسيُّ يملأ العرض

   و‎minmax(0, 1fr)‎ لا ‎1fr‎: العمودُ الشبكيّ عرضُه الأدنى ‎auto‎، فزرٌّ
   نصُّه طويلٌ يوسّع عمودَه ويدفع الآخر. وهذه رابعةُ مرّةٍ في هذا الملف.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    header.content-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px 12px;
        margin-bottom: 20px;
    }

    /* العنوان والمسار — الصفّ الأوّل يميناً */
    header.content-header > *:first-child {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    /* الجرس والمظهر — الصفّ الأوّل يساراً. و‎margin: 0‎ يُبطل
       ‎margin-left: auto‎ السطريَّ الذي يكتبه components.js، فالشبكة
       هي التي تضع العنصر الآن لا الهامش. */
    header.content-header > #topHeaderUserControls {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        flex-wrap: nowrap;
    }

    /* و‎.header-controls‎ مستثناةٌ: هي في ‎index.html‎ وحدها (فحصتُ
       الصفحات كلَّها) وتحمل مُرشِّحَ فترةٍ وزرَّ تحديث لا صفَّ أفعال.
       فتذوب بـ‎display: contents‎ في كتلة «الرئيسيةُ على الجوّال»،
       ويتولّى العنصرين شبكةُ الترويسة نفسها. ولولا الاستثناء لغلبت
       هذه القاعدةُ الذوبانَ — ‎(1,2,2)‎ مقابل ‎(0,2,1)‎ — فيبقى
       المُرشِّحُ محبوساً في ثلث حاويةٍ عرضُها 110px: قِستُه. */
    /* بقيّةُ المجموعات — أفعالٌ تملأ العرضَ عمودين */
    header.content-header > div:not(:first-child):not(#topHeaderUserControls):not(.header-controls) {
        grid-column: 1 / -1;
        display: grid !important;
        /* ثلاثةُ أعمدةٍ لا اثنان: «إدارة العملاء» فيها ستّةُ أفعال،
           وعمودان يعطيان ثلاثةَ صفوف — 394px من الزينة قبل أوّل رقم،
           مقيسةً. وثلاثةٌ تُنزلها إلى صفّين.

           و115px للخليّة تكفي أطولَ تسمية («تصدير Excel») عند 0.8rem؛
           قِستُها قبل أن أُضيّقها. */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        align-items: stretch;
        width: 100%;
        min-width: 0;
    }

    header.content-header > div:not(:first-child):not(#topHeaderUserControls):not(.header-controls) > .btn,
    header.content-header > div:not(:first-child):not(#topHeaderUserControls):not(.header-controls) > button,
    header.content-header > div:not(:first-child):not(#topHeaderUserControls):not(.header-controls) > label {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        justify-content: center;
        /* سطران خيرٌ من بتر. «إظهار المؤرشفة» عند 0.8rem تتجاوز الخليّةَ
           (115px) ببضعة بكسلات، و‎overflow: hidden‎ بلا نقاطٍ كانت تقطعها
           إلى «إظهار المؤرشفـ» — رأيتُها في اللقطة. */
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.2;
        text-align: center;
    }

    /* الفعلُ الرئيسيّ يأخذ سطراً كاملاً — التصاميم تُفرده دائماً */
    header.content-header > div:not(:first-child):not(#topHeaderUserControls):not(.header-controls) > .btn-primary {
        grid-column: 1 / -1;
    }

    /* الأفعالُ الثانوية تنكمش لتسع ثلاثةً في السطر */
    header.content-header > div:not(:first-child):not(#topHeaderUserControls):not(.header-controls) > .btn:not(.btn-primary),
    header.content-header > div:not(:first-child):not(#topHeaderUserControls):not(.header-controls) > button:not(.btn-primary),
    header.content-header > div:not(:first-child):not(#topHeaderUserControls):not(.header-controls) > label {
        min-height: 42px;
        font-size: 0.8rem;
        padding-inline: 6px !important;
        gap: 4px;
    }
    header.content-header > div:not(:first-child):not(#topHeaderUserControls):not(.header-controls) > .btn:not(.btn-primary) svg,
    header.content-header > div:not(:first-child):not(#topHeaderUserControls):not(.header-controls) > button:not(.btn-primary) svg {
        width: 14px; height: 14px; flex: 0 0 auto;
    }

    /* الحقلُ المخفيّ (‎input[type=file]‎) لا يحجز خليّةً في الشبكة */
    header.content-header input[type="file"] { display: none !important; }

    /* وقد يكون الابنُ الثاني زرّاً بنفسه لا مجموعةً (admin.html مثلاً).
       الكتلةُ أعلاه تخصُّ ‎div‎ وحدها الآن: لو شملت الزرَّ لصارت الشبكةُ
       تفصل أيقونتَه عن نصِّه خليّتين — أيقونةٌ يميناً وكلمةٌ يساراً
       بينهما فراغٌ أعمى. أصابني هذا حرفيّاً. */
    header.content-header > .btn:not(:first-child),
    header.content-header > button:not(:first-child) {
        grid-column: 1 / -1;
        justify-self: start;
        margin: 0 !important;
    }
}


/* ════════════════════════════════════════════════════════════════════
   بطاقاتُ الأرقام لا تترك سنّاً في آخر السطر
   ════════════════════════════════════════════════════════════════════
   صفوفُ الأرقام ‎flex-wrap‎، فثلاثُ بطاقاتٍ تُعطي اثنتين ثمّ واحدةً
   معلّقةً في منتصف السطر. والتصاميم تجعلها شبكةً مستوية.

   و‎grid-auto-rows: 1fr‎ يسوّي الارتفاعات: بطاقةٌ نصُّها سطران كانت
   تطول وتترك جارتَها قصيرةً، فيبدو الصفُّ مكسوراً.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    .cust-stats-row,
    .stats-row,
    .hero-stats,
    .acc-stat-strip,
    .ru-stats,
    .tasks-stats-grid,
    .admin-status {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: 1fr;
        gap: 8px !important;
        align-items: stretch;
    }

    .cust-stats-row > *,
    .stats-row > *,
    .hero-stats > *,
    .acc-stat-strip > *,
    .ru-stats > *,
    .tasks-stats-grid > *,
    .admin-status > * {
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* الحشوةُ تنكمش: بطاقةٌ ارتفاعُها 92px لرقمٍ من خانةٍ واحدة
       تدفع المحتوى الحقيقيَّ تحت الطيّة. */
    .cust-stat-card,
    .stat-card,
    .hero-stat,
    .acc-stat {
        padding: 12px 14px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════
   تحيّةُ الرئيسية على الجوّال
   ════════════════════════════════════════════════════════════════════
   ‎mobile/02-home‎ يفتح بـ«صباح الخير» واسمِ الموظّف وصورتِه، لا بعنوان
   «الرئيسية». و‎desktop/03-home‎ يُبقي العنوان. فالعنصران يتبادلان
   الظهور عند 768px بدل أن يجتمعا: اجتماعُهما يُكرّر المعنى ويأكل
   ثلثَ الشاشة قبل أوّل بطاقة.

   مخفيّةٌ افتراضاً لا ظاهرةٌ ثمّ تُخفى: الافتراضيُّ هو سطحُ المكتب في
   هذا الملف، والقاعدةُ تُقلب داخل الاستعلام وحده.
   ════════════════════════════════════════════════════════════════════ */

.home-greet { display: none; }

@media (max-width: 767.98px) {

    /* العنوانُ والمسارُ يختفيان — التحيّةُ تحلّ محلّهما.

       والشرطُ ‎:has(.home-greet)‎ ليس تزيّداً: بدونه تنطبق القاعدةُ على
       **كلّ** صفحة، فتفقد الشاشاتُ كلُّها عناوينها على الجوّال — ولا
       تحيّةَ تحلّ محلّها إلا في الرئيسية. رأيتُها في لقطة «إدارة
       العملاء»: ترويسةٌ بلا عنوان. */
    header.content-header:has(.home-greet) .page-title,
    header.content-header:has(.home-greet) .breadcrumb {
        display: none;
    }

    .home-greet {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    /* قرصٌ بتروليٌّ بالحرف الأوّل. 42px مثلُ الجرس المقابل له في الطرف
       الآخر من السطر، فيستويان بصريّاً. */
    .home-greet-avatar {
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--acc-strong);
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1;
        user-select: none;
    }

    .home-greet-text {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
    }

    /* «صباح الخير» هو التحيّة، والاسمُ هو المُخاطَب — فالاسمُ أثقل.
       وعكسُ ذلك يجعل السطر يبدو إعلاناً لا مخاطبة. */
    .home-greet-hi {
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--ink-muted);
        line-height: 1.2;
    }

    .home-greet-name {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--ink-strong);
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* على الشريط البترولي (لو ظهرت التحيّة داخل سطحٍ داكن) يُقلب القرص
       إلى التركوازي ليبقى الحرفُ مقروءاً. */
    .dark .home-greet-avatar { background: var(--acc); }
}


/* ════════════════════════════════════════════════════════════════════
   أدواتُ المستخدم في ركنها، مهما عُشِّشت
   ════════════════════════════════════════════════════════════════════
   ‎mobile/02-home‎ يضع الجرسَ في الركن العلويّ المقابل للتحيّة. والقاعدةُ
   السابقة وضعته في الصفّ الأوّل عمودَ ‎auto‎ — وهي صحيحةٌ حين يكون
   ‎#topHeaderUserControls‎ ابناً مباشراً للترويسة.

   وقياسُ ‎index.html‎ أظهر أنه ليس كذلك: للترويسة ابنان فقط، والمجموعةُ
   مُعشَّشةٌ داخل ‎.header-controls‎. فالشبكةُ لا تراها أصلاً، ويُعاملها
   الأبُ المُعشِّش كخليّةٍ من خلاياه — فتهبط إلى منتصف الصفّ الثاني بين
   مُرشِّحٍ وزرّ.

   و CSS لا تنقل عنصراً عبر الشجرة. فالموضعُ المطلق هو ما يصل إليه حيثما
   كان: مرجعُه الترويسةُ نفسها (‎position: relative‎)، فيستقرّ في ركنها
   مهما تغيّر تعشيشُه في صفحةٍ أخرى.

   ولا تصادمَ مع التحيّة: هي يميناً بعرض ~150px والمجموعةُ يساراً بعرض
   ~110px على شاشةٍ عرضُها 390 — ومع ذلك يُحجز للصفّ الأوّل ارتفاعٌ أدنى
   كي لا يرتفع المحتوى تحتها إن قصُرت التحيّة.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    header.content-header {
        position: relative;
        padding-block-start: 2px;
    }

    header.content-header > *:first-child {
        min-height: 44px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* الركنُ المثبَّت للرئيسية وحدها.

       التصميمُ يضع الجرسَ في الركن المقابل للتحيّة، وذلك يصحّ هناك: التحيّةُ
       سطرٌ قصير. أمّا في «إدارة العملاء» و«المهام» فالعنوانُ طويلٌ يمتدّ
       تحت المجموعة فيتراكبان — جرّبتُه على كلّ الصفحات فرأيتُ الجرسَ فوق
       حروف العنوان.

       فالتثبيتُ مشروطٌ بوجود التحيّة، وبقيّةُ الشاشات تأخذ المجموعةَ سطراً
       خاصّاً عند الحافّة — لا تراكبَ فيه مهما طال العنوان. */
    header.content-header:has(.home-greet) #topHeaderUserControls {
        position: absolute;
        grid-column: auto !important;
        grid-row: auto !important;
        inset-block-start: 0;
        /* يساراً: و«يسار» في RTL هي ‎inline-end‎ لا ‎inline-start‎. */
        inset-inline-end: 0;
        inset-inline-start: auto;
        margin: 0 !important;
        display: flex;
        align-items: center;
        gap: 8px;
        z-index: 3;
    }

    /* وجرّبتُ رفعَها إلى الصفّ الأوّل بالشبكة بدل الموضع المطلق: لا
       تراكبَ عندها، لكنّ المجموعة على admin.html عرضُها 216px — جرسٌ
       ومفتاحُ مظهرٍ وزرُّ «تعميم» بنصّه — فلم يبقَ للعنوان إلّا 117px من
       أصل 390. والترويسةُ بقيت 120px كما هي، لأن «تحديث» نزل مكانها.
       أي أني بدّلتُ ساكنَ الصفّ الثاني ولم أُسقطه، وخسرتُ نصفَ عرض
       العنوان. فالصفُّ الأوّل للعنوان، والمجموعةُ تحته عند الحافّة. */
    header.content-header:not(:has(.home-greet)) #topHeaderUserControls {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        justify-self: end;
        margin: 0 !important;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    /* الصفُّ الأوّل لا يمتدّ تحت المجموعة المثبَّتة */
    header.content-header > *:first-child { padding-inline-end: 0; }
}


/* ════════════════════════════════════════════════════════════════════
   هيئةُ تطبيقٍ لا صفحةِ ويب
   ════════════════════════════════════════════════════════════════════
   الفرقُ الذي يجعل الشاشة تبدو تطبيقاً ليس زخرفةً بل ثلاثةَ أشياء:
   هامشٌ جانبيٌّ ضيّقٌ ثابت، وأهدافُ لمسٍ لا تقلّ عن 44px، ونصٌّ لا
   يتضاءل تحت 16px في الحقول (دونها يُقرّب iOS الصفحةَ عند التركيز
   فتقفز — وهي أوضحُ علامةٍ على أن ما تراه صفحةٌ لا تطبيق).
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    /* هامشٌ واحدٌ لكلّ الشاشات: 16px كما في التصاميم، بدل ما تتركه كلُّ
       صفحةٍ لنفسها. */
    .content-body,
    .app-main > .content-body {
        padding-inline: 16px !important;
    }

    /* الحقولُ 16px فما فوق — وإلا قرّب iOS الصفحةَ عند التركيز */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important;
        min-height: 46px;
    }

    textarea { min-height: 96px; }

    /* أهدافُ اللمس */
    .btn, button.btn, a.btn {
        min-height: 44px;
    }

    /* عنوانٌ طويلٌ في عمودٍ ضيّقٍ كان يلتفّ ثلاثة أسطرٍ ويكسر البطاقة.
       ‎text-wrap: balance‎ يوزّع الكلمات على أسطرٍ متقاربة الطول بدل
       سطرٍ طويلٍ وآخرَ بكلمة. */
    .card h2, .card h3,
    .section-title,
    .card-title {
        text-wrap: balance;
    }
}


/* ════════════════════════════════════════════════════════════════════
   بطاقةُ الرقم على الجوّال — كما في mobile/02-home
   ════════════════════════════════════════════════════════════════════
   التصميمُ يرتّب البطاقةَ سطرين:
       سطرٌ أوّل  — أيقونةٌ تركوازيّةٌ خطّيّة ثمّ التسمية، صغيرةً هادئة
       سطرٌ ثانٍ  — الرقمُ وحده، كبيراً ثقيلاً بلون الحبر

   وشاشاتُنا ترتّبها **صفّاً واحداً**: أيقونةٌ ثمّ رقمٌ ثمّ تسمية، كلُّها
   بحجمٍ واحدٍ متقارب. فلا يبرز الرقم، وتبدو البطاقةُ سطرَ نصٍّ في إطار.

   وترتيبُ العناصر في الـDOM هو: أيقونة، رقم، تسمية — أي أن التسمية
   تأتي **بعد** الرقم، والتصميمُ يريدها قبله. وCSS لا تنقل عقداً، لكنّ
   الشبكةَ تُسنِد كلَّ ابنٍ إلى خليّةٍ بصرف النظر عن ترتيبه. فالترتيبُ
   البصريُّ يُعاد بلا لمسِ HTML:

       عمودان: ‎auto‎ للأيقونة و‎minmax(0,1fr)‎ لما بعدها
       الأيقونة  → ١/١      التسمية → ٢/١      الرقم → ١..-١ / ٢

   و‎minmax(0, 1fr)‎ لا ‎1fr‎ — خامسةُ مرّةٍ في هذا الملف.

   ولونُ الرقم يصير لونَ الحبر لا لونَ الحالة. التصاميمُ كلُّها تجعل
   الأرقامَ بترولية داكنة والأيقونةَ وحدها ملوّنة؛ وصفُّ أرقامٍ كلٌّ منها
   بلونٍ يجعل الشاشةَ قوسَ قزحٍ لا لوحةَ قياس. والحالةُ لا تضيع: الأيقونةُ
   ملوّنةٌ والتسميةُ تقولها نصّاً.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    .dash-stat-cell,
    .cust-stat-card,
    .acc-stat-cell,
    .emp-stat,
    .m-stat,
    .task-stat-card,
    .admin-status .s-cell {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 2px 8px;
        padding: 14px !important;
        min-width: 0 !important;
        min-height: 86px;
        align-content: center;

        /* سطحُ التصميم: أبيضُ بظلٍّ خفيف وبلا حدّ. الحدُّ الملوّن كان
           يرسم خمسةَ مستطيلاتٍ مختلفةِ الإطار في صفٍّ واحد. */
        background: var(--srf-raised) !important;
        border: 1px solid transparent !important;
        border-radius: 18px !important;
        box-shadow: 0 1px 2px rgba(16, 42, 53, 0.05),
                    0 4px 14px rgba(16, 42, 53, 0.07) !important;
    }

    /* الرمزُ الذي يقود لونَ الرقم في customers.html يُعاد توجيهه إلى
       الحبر بدل لون الحالة — بلا ‎!important‎: المتغيّرُ يُورَّث. */
    .cust-stat-card { --c-val: var(--ink-strong); }

    .dash-stat-cell > svg,
    .cust-stat-card > svg,
    .acc-stat-cell > svg,
    .emp-stat > svg,
    .m-stat > svg,
    .task-stat-card > svg,
    .task-stat-icon {
        grid-column: 1;
        grid-row: 1;
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
    }

    /* التسمية — الصفُّ الأوّل بجوار الأيقونة */
    .dash-stat-cell > span:not(.dash-stat-value),
    .cust-stat-label,
    .acc-stat-label,
    .emp-stat-lbl,
    .m-stat-lbl,
    .task-stat-label,
    .admin-status .s-lbl {
        grid-column: 2;
        grid-row: 1;
        font-size: 0.78rem !important;
        font-weight: 600;
        color: var(--ink-muted) !important;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0 !important;
    }

    /* الرقم — سطرٌ كاملٌ تحتهما. ‎!important‎ على الحجم والوزن لأن
       index.html يكتبهما نمطاً سطريّاً، والسطريُّ لا يُغلَب بغيرها. */
    .dash-stat-value,
    .cust-stat-count,
    .acc-stat-value,
    .emp-stat-val,
    .m-stat-val,
    .task-stat-value,
    .admin-status .s-val {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: 1.55rem !important;
        font-weight: 800 !important;
        line-height: 1.15;
        /* ‎!important‎ لأن صفحاتٍ تُلوّن الرقمَ بلون الحالة بمحدِّدٍ أعلى
           تخصيصاً (‎.dash-stat-cell.s-warn .dash-stat-value‎). والتصاميمُ
           كلُّها تجعل الأرقامَ بترولية داكنة والأيقونةَ وحدها ملوّنة —
           وصفُّ أرقامٍ كلٌّ منها بلونٍ يجعل الشاشة قوسَ قزح. */
        color: var(--ink-strong) !important;
        font-variant-numeric: tabular-nums lining-nums;
        margin: 0 !important;
    }

    /* سطرٌ ثالثٌ إن وُجد (وصفٌ صغير) يمتدّ تحت الرقم بلا كسرِ الشبكة */
    .acc-stat-meta,
    .task-stat-info {
        grid-column: 1 / -1;
        grid-row: 3;
        font-size: 0.72rem;
        color: var(--ink-faint);
    }

    /* صفُّ البطاقات: شبكةٌ مستويةٌ لا شريطٌ يُمرَّر أفقيّاً. التمريرُ
       الأفقيّ يُخفي نصفَ الأرقام خلف الحافّة، والتصميمُ يعرضها كلَّها. */
    .cust-stats-row,
    .dash-stats-row,
    /* صفُّ أرقام الرئيسية حاويتُه ‎<div>‎ بلا صنف وأنماطُها سطريّة —
       لا خطّاف إلا البنية. و‎:has()‎ مدعومةٌ في كلّ المتصفّحات الحالية،
       ومن لا يدعمها يرى الصفَّ مرناً كما كان: تدهورٌ لطيفٌ لا عطل.

       وبدونها انكمشت الخلايا الخمسُ في 390px إلى 62px لكلٍّ منها،
       فاختُزلت التسميةُ إلى حرفٍ واحد. رأيتُها في اللقطة. */
    div:has(> .dash-stat-cell) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: 1fr;
        gap: 10px !important;
        overflow-x: visible !important;
    }
}


/* ════════════════════════════════════════════════════════════════════
   الأفعالُ والشرائح على الجوّال
   ════════════════════════════════════════════════════════════════════
   التصاميم: فعلٌ رئيسيٌّ بعرضِ الشاشة وارتفاعٍ مريح وانحناءٍ ١٤، وشرائحُ
   حالةٍ كبسولاتٍ تامّةَ الاستدارة لا مستطيلاتٍ مُدوَّرةَ الأركان.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    .btn-primary {
        min-height: 50px;
        border-radius: 14px;
        font-weight: 700;
        font-size: 0.98rem;
    }

    .btn-ghost,
    .btn-secondary {
        min-height: 46px;
        border-radius: 12px;
    }

    /* الكبسولة: ‎999px‎ لا ‎8px‎ — وهي أظهرُ فرقٍ شكليٍّ بين التصميم
       وما كان عندنا. */
    .status-badge,
    .class-badge,
    .transfer-badge,
    .emp-role-badge,
    .challenge-status-badge,
    .emp-status-pill,
    .stage-badge {
        border-radius: 999px !important;
        padding: 4px 12px !important;
        font-size: 0.72rem !important;
        font-weight: 700;
        line-height: 1.6;
        white-space: nowrap;
    }
}


/* ════════════════════════════════════════════════════════════════════
   ضغطُ الترويسة — الرقمُ الأوّل فوق الطيّة
   ════════════════════════════════════════════════════════════════════
   لقطةُ جهازٍ حقيقيّ: ثلاثُمئةٍ وثلاثون بكسلاً من الزينة قبل أوّل رقم.
   شريطُ الصيانة، ثمّ العنوان، ثمّ فراغ، ثمّ «تحديث» وحده في سطر، ثمّ
   فراغ، ثمّ الجرسُ والمظهرُ في سطرٍ ثالث، ثمّ فراغ. والشاشةُ 844px —
   أي أن أربعين بالمئة منها ذهبت قبل أن يبدأ المحتوى.

   والسببُ البنيويّ: كلُّ مجموعةٍ أخذت سطراً خاصّاً بها.

   والعلاج أن تذوب الحاويةُ الوسيطة. ‎display: contents‎ تُزيل صندوقَ
   العنصر ويصير أبناؤه أبناءَ الشبكةِ مباشرةً — فينتظمون في خلاياها بدل
   أن يحتلّوا صفّاً كاملاً بصندوقٍ واحد. و‎!important‎ لازمة: الحاويةُ
   تحمل ‎display:flex‎ نمطاً سطريّاً.

   فيصير الترتيب سطرين بدل أربعة:
       ١ — العنوان ‎minmax(0,1fr)‎ ، والجرسُ والمظهر ‎auto‎
       ٢ — الأفعال عمودين

   ولا تراكُبَ كالذي حدث مع الموضع المطلق: العمودُ المرن ينكمش ويُقصّ
   العنوانُ بالقطع الثلاث، ولا يمرّ أحدٌ فوق أحد.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    /* الحاوياتُ الوسيطة تذوب فيصير ما بداخلها خلايا الشبكة */
    header.content-header > .header-controls,
    header.content-header > .page-actions,
    header.content-header > .toolbar-actions {
        display: contents !important;
    }

    header.content-header {
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    /* العنوانُ ينكمش ويُقصّ بدل أن يدفع الجرسَ خارج الشاشة */
    header.content-header > *:first-child { min-width: 0; }
    header.content-header .page-title {
        font-size: 1.15rem !important;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    header.content-header .breadcrumb {
        font-size: 0.72rem;
        margin-top: 0;
    }

    /* بقيّةُ الأبناء — أفعالٌ تملأ العرض عمودين بالترتيب التلقائيّ */
    header.content-header > .btn,
    header.content-header > button,
    header.content-header > .date-filter-container,
    header.content-header > label {
        grid-column: auto !important;
        grid-row: auto !important;
        justify-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* «تعميم» ومفتاحُ المظهر كانا بحجم زرٍّ كامل في صفٍّ خاصّ */
    header.content-header .theme-switch { transform: scale(0.92); transform-origin: center; }

    /* البطاقةُ تضيق: 86px لرقمٍ من خانتين فراغٌ لا هواء */
    .dash-stat-cell,
    .cust-stat-card,
    .acc-stat-cell,
    .emp-stat,
    .m-stat,
    .task-stat-card,
    .admin-status .s-cell {
        min-height: 72px;
        padding: 12px 14px !important;
    }

    /* أوّلُ كتلةٍ بعد الترويسة تبدأ فوراً */
    .content-body > *:first-child { margin-top: 0 !important; }
}


/* ════════════════════════════════════════════════════════════════════
   شريطُ التبويب على الجوّال — ينزلق ولا يلتفّ
   ════════════════════════════════════════════════════════════════════
   كتبتُ أوّلاً كبسولاتٍ مملوءة، ثمّ رجعتُ إلى ‎mobile/04-customer-profile‎
   فإذا التبويب فيه مسطَّرٌ كما على سطح المكتب: «النشاط · الصفقات ·
   الملاحظات» بلا صندوق، وخطٌّ بتروليٌّ عريضٌ تحت النشط وحده. فالقرارُ
   المكتوب في «عائلات التبويب — مِحورٌ واحد» صحيحٌ على المقاسين،
   وكبسولتي كانت زخرفةً تخالف المرجع. حُذفت.

   والذي يحتاجه الجوّال حقّاً شيئان لا ثالثَ لهما:

   أوّلاً — ألّا يلتفّ الشريط. ‎execution.html‎ فيه ثلاثةَ عشرَ تبويباً؛
   على 390px تنسدل أربعةَ أسطر، فيُوهم السطرُ الثاني أنه قسمٌ آخر، وتضيع
   مئةُ بكسلٍ من الطول. والانزلاقُ الأفقيّ هو ما يفعله التصميم.

   ثانياً — هدفُ لمسٍ لا يقلّ عن 44px. التبويبُ كان ارتفاعه ارتفاعَ
   سطرِ نصٍّ، والإصبعُ ليست مؤشّراً.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    .admin-tabs,
    .sup-tabs,
    .profile-tabs,
    .sub-nav-tabs,
    .la-tabs,
    .eb-tabs,
    .mk-tabs,
    .new-chat-tabs,
    .side-panel-tabs,
    .acc-tabs-nav,
    .udemy-tabs-nav,
    .exec-tab-bar,
    .project-tab-bar,
    div:has(> .hr-tab) {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        gap: 0 !important;
        overflow-x: auto;
        /* ‎overflow-y‎ يصير ‎auto‎ حتماً متى كان الأفقيّ كذلك، فالخطّ
           تحت النشط يُقصّ إن خرج بكسلاً. ‎bottom: 0‎ لا ‎-1px‎. */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 !important;
        margin: 0 0 14px !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid var(--bd-faint) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .admin-tabs::-webkit-scrollbar,
    .sup-tabs::-webkit-scrollbar,
    .profile-tabs::-webkit-scrollbar,
    .sub-nav-tabs::-webkit-scrollbar,
    .la-tabs::-webkit-scrollbar,
    .eb-tabs::-webkit-scrollbar,
    .mk-tabs::-webkit-scrollbar,
    .new-chat-tabs::-webkit-scrollbar,
    .side-panel-tabs::-webkit-scrollbar,
    .acc-tabs-nav::-webkit-scrollbar,
    .udemy-tabs-nav::-webkit-scrollbar,
    .exec-tab-bar::-webkit-scrollbar,
    .project-tab-bar::-webkit-scrollbar,
    div:has(> .hr-tab)::-webkit-scrollbar {
        height: 0;
        display: none;
    }

    .admin-tab,
    .sup-tab,
    .profile-tab,
    .hr-tab,
    .acc-tab-link,
    .exec-tab-btn,
    .mk-tab,
    .la-tab,
    .eb-tab,
    .sub-nav-tab,
    .udemy-tab,
    .new-chat-tab,
    .side-panel-tab {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        position: relative;
        min-height: 44px;
        padding: 11px 14px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        font-size: 0.85rem !important;
        white-space: nowrap;
        box-shadow: none !important;
    }

    /* خطُّ النشط عريضٌ بما يُرى من بعيد: بكسلان على الشاشة الكبيرة
       يكفيان، وعلى زجاجٍ بكثافةٍ ثلاثيّةٍ يذوبان. */
    .admin-tab.active::after,
    .sub-nav-tab.active::after,
    .exec-tab-btn.active::after,
    .hr-tab.active::after,
    .sup-tab.active::after,
    .profile-tab.active::after,
    .la-tab.active::after,
    .eb-tab.active::after,
    .udemy-tab.active::after {
        bottom: 0 !important;
        height: 3px !important;
        inset-inline: 8px !important;
        border-radius: 3px 3px 0 0;
    }

    .exec-tab-badge {
        background: var(--srf-sunk);
        color: var(--ink-muted);
        border-radius: 999px;
        padding: 1px 7px;
        font-size: 0.68rem;
        font-weight: 700;
    }
}


/* ════════════════════════════════════════════════════════════════════
   الرئيسيةُ على الجوّال — الصفُّ الثاني والبطاقاتُ الخمس
   ════════════════════════════════════════════════════════════════════
   لقطةُ الجهاز: «الفترة:» كلمةٌ معلّقةٌ في الفراغ، ثمّ صندوقٌ ضيّقٌ فيه
   «كل» مقصوصةً من «كل الفترات»، ثمّ زرٌّ عريضٌ لا يوازنه شيء. ثلاثةُ
   أشياءَ مختلفةِ الارتفاع والعرض في سطرٍ واحد.

   والعلّةُ أن التسمية والقائمة جارتان لا شيءَ يجمعهما بصريّاً، والقائمةُ
   محدودةٌ بـ‎max-width: 180px‎ نمطاً سطريّاً فلا تملأ عمودَها.

   فتصيران حقلاً واحداً: إطارٌ واحدٌ يضمّ التسميةَ ثابتةً والقائمةَ تملأ
   ما بقي، بارتفاع 46px. والتحديثُ زرٌّ بعرض محتواه إلى جانبه.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    header.content-header .date-filter-container {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: center;
        gap: 8px;
        min-width: 0;
        min-height: 46px;
        margin: 0 !important;
        padding: 0 12px !important;
        background: var(--srf-raised);
        border: 1px solid var(--bd-faint);
        border-radius: 12px;
    }

    header.content-header .date-filter-label {
        flex: 0 0 auto;
        font-size: 0.76rem;
        font-weight: 600;
        color: var(--ink-muted);
        white-space: nowrap;
    }

    /* القائمةُ تذوب في الحقل: لا إطارَ لها ولا سطح، وتملأ ما بقي.
       و‎max-width‎ السطريّةُ لا تُغلَب إلّا بـ‎!important‎. */
    header.content-header .date-filter-container select {
        flex: 1 1 auto;
        width: auto !important;
        max-width: none !important;
        min-width: 0;
        min-height: 44px;
        margin: 0 !important;
        padding: 0 !important;
        padding-inline-end: 20px !important;
        border: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        /* ١٦px لا أقلّ: iOS يُكبّر الصفحةَ كلَّها عند التركيز على حقلٍ
           خطُّه أصغرُ من ١٦px، ثمّ لا يُعيدها — فتبقى الشاشةُ مُزاحةً
           والمستخدمُ يُصغّرها بإصبعين. وكان هنا تصغيرٌ بـ!important
           يهزم القاعدةَ العامّةَ التي تمنع ذلك. */
        font-size: 16px !important;
        font-weight: 600;
        color: var(--ink-strong);
        text-overflow: ellipsis;
    }

    /* «تحديث» بعرض محتواه، لا ممدوداً. وهو ليس ابناً مباشراً للترويسة
       — ‎.header-controls‎ بينهما وقد ذابت بـ‎display: contents‎ — فلا
       تمسّه قاعدةُ ‎header > .btn‎ الممدِّدة. */
    header.content-header .header-controls > .btn,
    header.content-header .header-controls > button {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-self: end;
        align-self: center;
        width: auto !important;
        min-height: 46px;
        padding-inline: 16px !important;
        margin: 0 !important;
        white-space: nowrap;
    }

    /* أدواتُ المستخدم على الرئيسية: الجرسُ مربّعُ لمسٍ 42px، والمفتاحُ
       أصغرُ قليلاً كي لا يزن أكثرَ من التحيّة التي يقابلها. */
    header.content-header:has(.home-greet) #topHeaderUserControls {
        gap: 6px !important;
    }

    header.content-header:has(.home-greet) .notification-bell {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0 !important;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    header.content-header:has(.home-greet) .theme-switch {
        transform: scale(0.86);
        transform-origin: center;
        margin: 0 !important;
    }

    /* شارةُ الجرس كانت تخرج من مربّعه إلى حافّة الشاشة */
    header.content-header .notification-bell .notification-badge {
        inset-block-start: 2px !important;
        inset-inline-end: 2px !important;
        inset-inline-start: auto !important;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 9px;
        font-size: 0.6rem;
        font-weight: 800;
        line-height: 17px;
        box-shadow: 0 0 0 2px var(--srf-base);
    }
}


/* ════════════════════════════════════════════════════════════════════
   بطاقاتُ الرئيسية الخمس — حدٌّ واحدٌ ورقمٌ واحد
   ════════════════════════════════════════════════════════════════════
   ‎index.html‎ يكتب في ‎<style>‎ داخليّ:

       .dash-stat-cell { border: 1px solid color-mix(… var(--c) 30% …) }
       .dash-stat-cell .dash-stat-value { color: var(--c-val) !important }

   والأوّلُ يساوي قاعدتي تخصيصاً ويأتي بعدها في الترتيب — الورقةُ
   الداخليةُ بعد الرابط — فيغلبها. والثاني أعلى تخصيصاً منها أصلاً
   (‎0,2,0‎ مقابل ‎0,1,0‎). فظلّت الحدودُ خمسةَ ألوانٍ والأرقامُ خمسةً.

   والنتيجةُ صفٌّ من خمسة مستطيلاتٍ كلٌّ بإطارٍ ولونِ رقمٍ مختلف — وهو
   ما وصفه المستخدم بأنه «شكل سيّئ»، وهو وصفٌ دقيق: حين يصرخ كلُّ رقمٍ
   بلونه لا يبقى في الصفّ ما يُقرأ أوّلاً.

   فأرفع التخصيصَ بحاوية الصفّ نفسها (‎0,2,1‎ و‎0,3,1‎) — وهي موجودةٌ
   أصلاً بـ‎:has()‎ لضبط الشبكة، فلا محدِّدَ جديدٌ ولا صنفٌ مكرَّر.
   واللونُ لا يضيع: الأيقونةُ تحتفظ به، والتسميةُ تقوله نصّاً.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    div:has(> .dash-stat-cell) > .dash-stat-cell {
        background: var(--srf-raised) !important;
        border: 1px solid transparent !important;
        box-shadow: 0 1px 2px rgba(16, 42, 53, 0.05),
                    0 4px 14px rgba(16, 42, 53, 0.07) !important;
    }

    div:has(> .dash-stat-cell) > .dash-stat-cell .dash-stat-value {
        color: var(--ink-strong) !important;
    }

    /* خمسةٌ في عمودين تترك الخامسةَ معلّقةً نصفَ سطر. تمتدّ السطرَ
       كلَّه فتبدو خاتمةً مقصودةً لا بقيّةً من قسمة. */
    div:has(> .dash-stat-cell) > .dash-stat-cell:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}


/* ════════════════════════════════════════════════════════════════════
   بطاقةُ البوت — شريطٌ لا لوحةُ إعلان
   ════════════════════════════════════════════════════════════════════
   هي أوّلُ ما يُفتح على الرئيسية، وتأخذ 265px من 844 — ثلثَ الشاشة
   تقريباً — لثلاث معلومات: اسمٌ وحالةٌ وزرّان. أيقونةٌ كبيرةٌ وسطَ
   السطر، ثمّ الاسمُ وسطَه، ثمّ الشريحةُ وسطَه، ثمّ الزرّان وسطَه. أربعةُ
   أسطرٍ مركزيّةٍ تدفع أرقامَ العمل تحت الطيّة.

   والتصاميم تفتح الرئيسيةَ بالتحيّة ثمّ الأرقام. فتصير البطاقةُ شريطاً:
   أيقونةٌ ثمّ اسمٌ وحالةٌ إلى جانبها بمحاذاة السطر، والزرّان تحتهما
   عمودين متساويين. 128px بدل 265 — والزرّان باقيان بلونيهما، فهما
   دلاليّان حقّاً: تشغيلٌ وإيقاف.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    .bot-status-card {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        gap: 12px !important;
        padding: 14px !important;
        margin-bottom: 16px !important;
        border-radius: 18px !important;
        text-align: start !important;
    }

    .bot-info {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: flex-start;
        gap: 12px !important;
        margin: 0 !important;
        text-align: start !important;
        min-width: 0;
    }

    .bot-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px;
        flex: 0 0 auto;
        margin: 0 !important;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bot-icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    .bot-details {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        min-width: 0;
    }

    .bot-details h2 {
        margin: 0 !important;
        font-size: 1rem !important;
        line-height: 1.2;
    }

    .bot-details .badge {
        margin: 0 !important;
    }

    .bot-controls {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        width: 100%;
        margin: 0 !important;
    }

    .bot-controls .btn {
        width: 100% !important;
        min-height: 44px;
        margin: 0 !important;
    }
}


/* ════════════════════════════════════════════════════════════════════
   صفوفُ الفلاتر على الجوّال — حقولٌ في عمودين
   ════════════════════════════════════════════════════════════════════
   شريطُ فلاتر المهام كان متنازَعاً عليه بين قاعدتين:

       tasks.html  ‎@media‎ →  flex-direction: column; align-items: stretch
       styles.css  ‎@media‎ →  flex-wrap: nowrap; overflow-x: auto

   عمودٌ لا يلتفّ مع تمريرٍ أفقيّ: القوائمُ فيها ‎min-width: 130px‎
   (و‎180px‎ لفلتر الموظّف) زائدَ تسمياتها، فتتجاوز عرضَ الحاوية وتخرج
   من إطارها. وهو ما رأيتُه في اللقطة: صناديقُ تنزلق خارج البطاقة
   و«الحالة:» مقصوصةٌ عند الحافّة.

   والعلاجُ شبكةٌ لا مرونة: عمودان متساويان، وكلُّ فلترٍ حقلٌ واحدٌ
   بإطارٍ يضمّ تسميتَه وقائمتَه — كما صُنع حقلُ الفترة في الرئيسية.

   ولا تُلمس خاصّيةُ ‎display‎ على ‎.filter-group‎: فلترُ الموظّف يحمل
   ‎style="display:none"‎ ويُظهره tasks.js للأدمن وحده. و‎display: flex
   !important‎ هنا كانت ستكشفه لكلّ موظّف — وهو تسريبُ أسماءٍ لا خللٌ
   شكليّ. فالقاعدةُ تضيف الإطار ولا تمسّ الظهور.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    .tasks-filters-bar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        padding: 10px !important;
        margin-bottom: 14px !important;
    }

    .tasks-filters-bar .spacer {
        display: none !important;
    }

    .tasks-filters-bar .filter-group {
        align-items: center;
        gap: 6px;
        min-width: 0;
        min-height: 46px;
        padding: 0 10px;
        background: var(--srf-sunk);
        border: 1px solid var(--bd-faint);
        border-radius: 12px;
    }

    /* فلترُ الموظّف يسبقه اسمٌ كامل، فسطرٌ له وحده حين يظهر */
    .tasks-filters-bar #filterEmployeeGroup {
        grid-column: 1 / -1;
    }

    .tasks-filters-bar label {
        flex: 0 0 auto;
        font-size: 0.72rem !important;
        font-weight: 600;
        color: var(--ink-muted);
        white-space: nowrap;
        margin: 0 !important;
    }

    /* القائمةُ تذوب في الحقل. و‎min-width‎ المصرَّحةُ هي العلّةُ نفسها،
       فتُصفَّر صراحةً. */
    .tasks-filters-bar select {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 44px;
        margin: 0 !important;
        padding: 0 !important;
        padding-inline-end: 18px !important;
        border: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        /* ١٦px لا أقلّ: iOS يُكبّر الصفحةَ كلَّها عند التركيز على حقلٍ
           خطُّه أصغرُ من ١٦px، ثمّ لا يُعيدها — فتبقى الشاشةُ مُزاحةً
           والمستخدمُ يُصغّرها بإصبعين. وكان هنا تصغيرٌ بـ!important
           يهزم القاعدةَ العامّةَ التي تمنع ذلك. */
        font-size: 16px !important;
        font-weight: 600;
        color: var(--ink-strong) !important;
        text-overflow: ellipsis;
    }

    /* صفُّ فلاتر العملاء: بحثٌ بعرض السطر ثمّ القوائمُ عمودين — بدل
       خمسةِ صناديقَ كلٌّ في سطرٍ كامل، وهي 5×46 = 230px من الطول. */
    .cust-filters-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        overflow-x: visible !important;
    }

    .cust-filters-row > .cust-filter-search {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .cust-filters-row > .cust-filter-select-wrap {
        min-width: 0 !important;
        width: auto !important;
    }

    .cust-filters-row .cust-filter-select {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px;
    }
}


/* ════════════════════════════════════════════════════════════════════
   البطاقةُ الأخيرةُ لا تُعلَّق نصفَ سطر
   ════════════════════════════════════════════════════════════════════
   صفوفُ الأرقام على الجوّال عمودان. ومَن كان عددُها فرداً — خمسةٌ في
   العملاء، ثلاثةٌ في المهام — تبقى الأخيرةُ وحدَها في نصف سطرٍ
   والنصفُ الآخر فراغ. تمتدّ السطرَ كلَّه فتبدو خاتمةً مقصودة.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    .cust-stats-row > .cust-stat-card:last-child:nth-child(odd),
    .tasks-stats-grid > .task-stat-card:last-child:nth-child(odd),
    .stats-row > *:last-child:nth-child(odd),
    .hero-stats > *:last-child:nth-child(odd),
    .acc-stat-strip > *:last-child:nth-child(odd),
    .ru-stats > *:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}


/* ════════════════════════════════════════════════════════════════════
   بطاقةُ رقمِ المهام — الحشوةُ الوسيطة تذوب
   ════════════════════════════════════════════════════════════════════
   ‎.task-stat-card‎ ليست أيقونةً ورقماً وتسميةً إخوةً كبقيّة العائلات،
   بل أيقونةٌ و‎.task-stat-info‎ يضمّ الرقمَ والتسمية. فقاعدةُ الشبكة
   رأت ابنين لا ثلاثة: الأيقونةُ في الصفّ الأوّل، والحشوةُ أُسنِدت إلى
   الصفّ الثالث — فبقي الثاني فارغاً والبطاقةُ مئةَ بكسلٍ فيها فجوة.

   و‎display: contents‎ تُذيب الحشوة فيصير الرقمُ والتسميةُ ابنَين
   مباشرين، وتنطبق عليهما قواعدُ العائلة كما على أخواتها.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    .task-stat-card > .task-stat-info {
        display: contents !important;
    }

    .task-stat-card .task-stat-label {
        grid-column: 2;
        grid-row: 1;
        font-size: 0.78rem !important;
        font-weight: 600;
        color: var(--ink-muted) !important;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0 !important;
    }
}


/* ════════════════════════════════════════════════════════════════════
   عائلةُ ‎.stat-card‎ — الرقمُ حبرٌ لا حالة
   ════════════════════════════════════════════════════════════════════
   صوّرتُ ‎supervisor‎ و‎courses‎ و‎brokers‎ و‎manager‎ فإذا أرقامُها خضراءُ
   وبنفسجيّةٌ وكهرمانيّة — النمطُ نفسُه الذي عالجتُه في الرئيسية: كلُّ
   صفحةٍ تكتب ‎--c-val: var(--ok)‎ وأخواتِها في ‎<style>‎ داخليّ.

   ولم أُعِد بناءَ تخطيط ‎.stat-card‎ كما فعلتُ بـ‎.dash-stat-cell‎: العائلةُ
   مستعملةٌ في صفحاتٍ لم أفحصها، وبنيتُها مختلفةٌ بينها (‎courses‎ تُعشِّش
   الرقمَ في ‎.stat-info‎ و‎supervisor‎ لا تُعشِّشه). فاكتفيتُ باللون — وهو
   موضعُ الخلل وحده.

   و‎!important‎ لا تخصيص: قواعدُ الصفحات في ‎<style>‎ داخليٍّ تأتي بعد
   الورقة الخارجية، فتغلبها عند التساوي. ولا ‎!important‎ عندها، فتُغلَب.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    .stat-card .stat-value,
    .stat-card .stat-val,
    .stat-info .stat-value {
        color: var(--ink-strong) !important;
    }

    /* والبطاقةُ الأخيرةُ في صفٍّ فرديٍّ تمتدّ السطر: ثلاثٌ في «الدورات»
       وأربعٌ في «المشرف» — والثالثةُ كانت معلّقةً نصفَ سطر. */
    .stats-grid > *:last-child:nth-child(odd),
    .classification-stats-grid > *:last-child:nth-child(odd),
    .admin-stats > *:last-child:nth-child(odd),
    .emp-grid > *:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}


/* ════════════════════════════════════════════════════════════════════
   PWA safe areas + notification recovery + iOS install guide
   ════════════════════════════════════════════════════════════════════ */

@supports (padding: max(0px, 1px)) {
    /* بوابة الوسيط هي الترويسة العامة الوحيدة المثبتة/اللاصقة عند أعلى
       الشاشة؛ بقية ترويسات اللوحة داخل main الذي يملك حشو top آمناً أصلاً. */
    body .bp-topbar {
        padding-top: max(12px, var(--safe-top));
        padding-left: max(18px, var(--safe-left));
        padding-right: max(18px, var(--safe-right));
    }

    @media (max-width: 767.98px) {
        body main.app-main,
        body main.main-content {
            padding-left: max(10px, var(--safe-left)) !important;
            padding-right: max(10px, var(--safe-right)) !important;
        }

        /* الشريط على الجوّال رصيفٌ مثبّتٌ على الحافّة اليمنى بعرضٍ ثابت
           و‎overflow: hidden‎، وقاعدته الأصلية تضع ‎padding: 0 !important‎
           عن قصد. وكانت هذه القاعدة تكتب 6px علويّة و8px جانبيّة فتغلبها
           بالتخصيص (‎body aside.sidebar‎ أعلى) فتسرق 16px من عرض البنود
           في رصيفٍ ضيّقٍ أصلاً — وهو ليس أمراً تقتضيه المنطقة الآمنة.
           فلم يبقَ إلّا ما تقتضيه فعلاً: مؤشّر الصفحة الرئيسية أسفل
           الشاشة، والنوتش في الوضع الأفقي. وكلاهما صفرٌ في الوضع
           الرأسيّ، فلا يتغيّر شيءٌ حيث لا حاجة. */
        body aside.sidebar,
        body aside.app-sidebar {
            /* env() مجرّدةً تمحو الـ6px الأصلية فتلتصق البنودُ بحافّة
               الرصيف على جهازٍ بلا مؤشّر شاشة (إذ تعود env صفراً).
               max() تحفظ الأصل وتزيد عليه عند الحاجة. */
            padding-bottom: 0 !important;
            padding-right: max(0px, var(--safe-right)) !important;
        }
    }
}

.notif-push-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    color: var(--warn, #8a5a00);
    background: var(--warn-soft, #fbefc8);
    border-bottom: 1px solid var(--bd-base, rgba(16, 42, 53, 0.12));
    font-size: 0.78rem;
    line-height: 1.5;
}

.notif-push-status[hidden] { display: none; }
.notif-push-status .btn { flex: 0 0 auto; white-space: nowrap; }

.ios-install-guide {
    position: fixed;
    z-index: 10020;
    left: max(14px, var(--safe-left));
    right: max(14px, var(--safe-right));
    bottom: max(14px, var(--safe-bottom));
    max-width: 560px;
    margin-inline: auto;
    padding: 18px;
    color: var(--ink-base, #102a35);
    background: var(--srf-raised, #fff);
    border: 1px solid var(--bd-base, rgba(16, 42, 53, 0.12));
    border-radius: var(--r-lg, 16px);
    box-shadow: 0 18px 60px rgba(5, 25, 34, 0.24);
}

.ios-install-guide__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.ios-install-guide__head strong,
.ios-install-guide__head span { display: block; }
.ios-install-guide__head strong { color: var(--ink-strong, #102a35); font-size: 1rem; }
.ios-install-guide__head span { margin-top: 3px; color: var(--ink-muted, #667b85); font-size: 0.78rem; }

.ios-install-guide__later {
    min-height: 36px;
    padding: 7px 12px;
    color: var(--acc, #1f7a8c);
    background: transparent;
    border: 1px solid var(--bd-base, rgba(16, 42, 53, 0.12));
    border-radius: var(--r-sm, 8px);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.ios-install-guide__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.ios-install-guide__steps li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    text-align: center;
    color: var(--ink-base, #294852);
    background: var(--srf-sunk, #f4f6f7);
    border-radius: var(--r-sm, 8px);
    font-size: 0.76rem;
    line-height: 1.55;
}

.ios-install-guide__steps svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: var(--acc, #1f7a8c);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 520px) {
    .notif-push-status { align-items: flex-start; flex-direction: column; }
    .ios-install-guide__steps { grid-template-columns: 1fr; }
    .ios-install-guide__steps li { flex-direction: row; text-align: start; }
}


/* ════════════════════════════════════════════════════════════════════
   الشريطُ السفليُّ على الجوّال — البندُ يُقرأ، والزائدُ يُمرَّر
   ════════════════════════════════════════════════════════════════════
   ‎nav.sidebar-nav‎ تحمل ‎overflow-x: auto‎ وانزلاقاً بالسحب وتلاشياً على
   الحافّتين — أي أنّ الشريط يُمرَّر منذ البداية. ومع ذلك كانت قاعدةُ
   ‎≤400px‎ تسحق البنود: ‎min-width: 46px‎ و‎height: 50px‎ و‎.nav-text‎
   بـ‎0.5rem‎ — أي ثمانيةُ بكسلات. وهذا حجمٌ لا يُقرأ على ذراعٍ ممدودة،
   وهو ما يجعل الشريط يبدو مزدحماً ورديء التنسيق.

   والسحقُ لا لزوم له ما دام الانزلاق قائماً: يأخذ البندُ مقاسَه المريح
   وما زاد يُمرَّر. وثمانيةُ بنودٍ تُقرأ خيرٌ من ثمانيةٍ ظاهرةٍ لا تُقرأ.

   و56px ارتفاعاً هو أدنى هدفٍ يُضغط بالإبهام بلا خطأ. */
@media (max-width: 767.98px) {

    aside.sidebar a.nav-item,
    aside.app-sidebar a.nav-item,
    aside.sidebar .nav-item,
    aside.app-sidebar .nav-item {
        flex: 0 0 auto !important;
        min-width: 64px !important;
        height: 56px !important;
        padding: 6px 8px !important;
    }

    aside.sidebar .nav-text,
    aside.app-sidebar .nav-text {
        font-size: 0.625rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* الرصيفُ يملأ العرض بدل 90% منه: كلُّ بكسلٍ يعني بنداً أظهر قبل
       أن يحتاج المستخدمُ إلى تمرير. */
    aside.sidebar,
    aside.app-sidebar {
        max-width: none !important;
        min-width: 0 !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        transform: none !important;
    }
}

/* قفل سلسلة التخصيص: هذه آخر قاعدة جوال عمداً لأن الورقة التاريخية
   تحتوي رقعاً لاحقة للشريط العائم القديم. */
@media (max-width: 767.98px) {
    :root {
        --main-content-bottom: calc(70px + var(--safe-bottom) + 16px);
    }

    html body main.main-content,
    html body main.app-main {
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-top: 0 !important;
        padding-inline: 16px !important;
    }

    html body aside.sidebar,
    html body aside.app-sidebar {
        left: 16px !important;
        right: 16px !important;
        bottom: calc(var(--safe-bottom) + 8px) !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.68) !important;
        border-radius: 32px !important;
        background: rgba(255, 255, 255, 0.80) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        box-shadow: 0 10px 30px rgba(16, 42, 53, 0.14), 0 1px 0 rgba(255, 255, 255, 0.55) inset !important;
        transform: none !important;
    }

    html.dark body aside.sidebar,
    html.dark body aside.app-sidebar,
    body.dark aside.sidebar,
    body.dark aside.app-sidebar {
        color: #D9E8ED !important;
        background: rgba(11, 26, 33, 0.82) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42), 0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
    }

    html body aside.sidebar nav.sidebar-nav,
    html body aside.app-sidebar nav.sidebar-nav {
        align-items: flex-start !important;
        overflow: hidden !important;
        border-radius: inherit;
    }

    html body aside.sidebar .mobile-overflow-item,
    html body aside.app-sidebar .mobile-overflow-item { display: none !important; }

    html body aside.sidebar a.mobile-primary-item,
    html body aside.app-sidebar a.mobile-primary-item,
    html body aside.sidebar button.mobile-more-button,
    html body aside.app-sidebar button.mobile-more-button {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: var(--mobile-nav-height) !important;
        padding: 7px 3px 5px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        color: var(--ink-muted) !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    html body aside.sidebar .mobile-primary-item > *,
    html body aside.app-sidebar .mobile-primary-item > *,
    html body aside.sidebar .mobile-more-button > *,
    html body aside.app-sidebar .mobile-more-button > * {
        position: relative;
        z-index: 1;
    }

    html body aside.sidebar .mobile-primary-item .nav-icon,
    html body aside.app-sidebar .mobile-primary-item .nav-icon,
    html body aside.sidebar .mobile-more-button .nav-icon,
    html body aside.app-sidebar .mobile-more-button .nav-icon {
        flex: 0 0 24px !important;
        width: 24px !important;
        height: 24px !important;
    }

    html body aside.sidebar .mobile-primary-item .nav-text,
    html body aside.app-sidebar .mobile-primary-item .nav-text,
    html body aside.sidebar .mobile-more-button .nav-text,
    html body aside.app-sidebar .mobile-more-button .nav-text {
        display: block !important;
        width: 100% !important;
        height: 26px !important;
        min-height: 26px !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    html body aside.sidebar .mobile-primary-item.active,
    html body aside.app-sidebar .mobile-primary-item.active {
        color: var(--acc-strong, #1F7A8C) !important;
    }

    html body aside.sidebar .mobile-primary-item.active::before,
    html body aside.app-sidebar .mobile-primary-item.active::before {
        content: '' !important;
        position: absolute !important;
        z-index: 0 !important;
        inset: 4px 2px !important;
        height: auto !important;
        border-radius: 26px !important;
        background: var(--acc-soft, rgba(31, 122, 140, 0.12)) !important;
    }

    html body aside.sidebar .nav-badge,
    html body aside.app-sidebar .nav-badge,
    html body aside.sidebar .nav-badge.warning,
    html body aside.app-sidebar .nav-badge.warning {
        min-width: 16px !important;
        height: 16px !important;
        padding: 0 4px !important;
        color: #FFFFFF !important;
        background: var(--acc-strong, #1F7A8C) !important;
        border-radius: 999px !important;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.88) !important;
    }

    html body main > .content-header.mobile-native-header,
    html body main > .page-header.mobile-native-header {
        top: 0 !important;
        width: 100vw !important;
        min-height: calc(96px + var(--safe-top)) !important;
        height: calc(96px + var(--safe-top)) !important;
        margin-top: 0 !important;
        margin-bottom: 16px !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding: var(--safe-top) 16px 10px !important;
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: flex-end !important;
        color: var(--mobile-header-ink) !important;
        background: var(--mobile-header-bg) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        border: 0 !important;
        box-shadow: none !important;
        transition: background-color 180ms ease, box-shadow 180ms ease !important;
    }

    html body #topHeaderProfileContainer.mobile-native-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 90 !important;
        width: 100vw !important;
        min-height: calc(54px + var(--safe-top)) !important;
        height: calc(54px + var(--safe-top)) !important;
        margin: 0 calc(50% - 50vw) 16px !important;
        padding: var(--safe-top) 16px 0 !important;
        color: var(--mobile-header-ink) !important;
        background: var(--mobile-header-bg) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        border-bottom: 1px solid var(--bd-faint, rgba(16, 42, 53, 0.10)) !important;
    }

    html body main > .content-header.mobile-native-header.is-collapsed,
    html body main > .page-header.mobile-native-header.is-collapsed {
        min-height: calc(54px + var(--safe-top)) !important;
        height: calc(54px + var(--safe-top)) !important;
        align-items: center !important;
        border-bottom: 1px solid var(--bd-faint, rgba(16, 42, 53, 0.10)) !important;
        box-shadow: 0 1px 0 rgba(16, 42, 53, 0.04) !important;
    }

    html body .mobile-native-header > :first-child {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        padding-left: 132px !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        text-align: start !important;
    }

    html body .mobile-native-header h1,
    html body .mobile-native-header h2,
    html body .mobile-native-header .page-title {
        color: inherit !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        transition: font-size 180ms ease, transform 180ms ease !important;
    }

    html body .mobile-native-header.is-collapsed > :first-child {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    html body .mobile-native-header.is-collapsed h1,
    html body .mobile-native-header.is-collapsed h2,
    html body .mobile-native-header.is-collapsed .page-title {
        width: 100% !important;
        font-size: 17px !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    html body .mobile-native-header > #topHeaderUserControls,
    html body .mobile-native-header .header-controls:has(#topHeaderUserControls) {
        position: absolute !important;
        top: calc(8px + var(--safe-top)) !important;
        left: 16px !important;
        right: auto !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    html body .mobile-native-header #topHeaderUserControls > .theme-switch {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--mobile-header-ink) !important;
        background: var(--mobile-header-ink-soft) !important;
        border: 1px solid var(--mobile-header-ink-line) !important;
        border-radius: 50% !important;
    }

    html body .mobile-native-header #topHeaderAnnounceBtn span,
    html body .mobile-native-header .theme-switch-thumb,
    html body .mobile-native-header .theme-switch-icon { display: none !important; }
    html body.light-mode .mobile-native-header .theme-switch-moon { display: inline-flex !important; }
    html.dark body .mobile-native-header .theme-switch-sun,
    body.dark .mobile-native-header .theme-switch-sun { display: inline-flex !important; }

    .mobile-header-sentinel {
        display: block;
        width: 1px;
        height: 1px;
        margin-bottom: -1px;
        pointer-events: none;
    }

    html body .mobile-native-header .breadcrumb { display: none !important; }

    html body .mobile-page-actions-row {
        display: flex;
        align-items: stretch;
        gap: 8px;
        margin: 0 0 16px;
        padding: 0;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }
    html body .mobile-page-actions-row::-webkit-scrollbar { display: none; }
    html body .mobile-page-actions-row > * {
        flex: 0 0 auto !important;
        min-height: 44px;
        white-space: nowrap;
    }

    /* ────────────────────────────────────────────────────────────────
       الهيدر: صفّان، بالترتيب لا بالموضع المطلق
       ────────────────────────────────────────────────────────────────
       عطلان قاسهما المسبار على أربعة أجهزة، وجذرُهما واحد:

       ١) أيقوناتُ الهيدر فوق شريط الحالة. كانت ‎#topHeaderUserControls‎
          بـ‎position: absolute; inset-block-start: 0‎. وإزاحةُ عنصرٍ مطلقٍ
          تُقاس من **حدِّ صندوق الحشوة** لا من داخلها — فـ‎padding-top:
          var(--safe-top)‎ لا يُزيحه قيد شعرة. قاسه المسبار: top=0 والقيمةُ
          ٤٧ ثمّ ٥٩ ثمّ ٦٢ — لم يتحرّك مرّةً واحدة.

       ٢) «عبدالله» والعنوانُ مقصوصان. ولأنّ الأدواتَ خرجت من السياق، حُجز
          مكانُها بـ‎padding-left: 132px‎ على حاوية العنوان. وعرضُ الحاوية
          على الرئيسية 179px — فلم يبقَ للاسم إلّا ٤٧px. رقمٌ سحريٌّ يصحّ
          لعرضٍ واحدٍ ولعدد أزرارٍ واحد، ويكسر ما عداه.

       والعلاجُ يُسقط السببين معاً: الهيدرُ عمودٌ من صفّين — صفُّ الأدوات
       أعلى، والعنوانُ الكبيرُ تحته بعرضِ الشاشة كاملاً. فلا شيءَ يحتاج
       حجزَ مكانٍ لشيء، ولا إزاحةَ تُقاس من خارج الحشوة. وهذا أيضاً ما
       يفعله iOS نفسُه: شريطُ أزرارٍ ثمّ Large Title تحته. */
    html body main > .content-header.mobile-native-header,
    html body main > .page-header.mobile-native-header,
    html body #topHeaderProfileContainer.mobile-native-header {
        flex-flow: column nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        /* الارتفاعُ يتبع المحتوى: ارتفاعٌ ثابتٌ مع صفّين يقصُّ أحدَهما عند
           تكبيرِ خطِّ النظام، وتكبيرُ الخطِّ شرطٌ في المطلوب. */
        height: auto !important;
        min-height: calc(96px + var(--safe-top)) !important;
    }

    /* الأدواتُ تعود إلى السياق الطبيعيّ. و‎inset: auto‎ صريحةٌ لأنّ القواعدَ
       السابقةَ تُثبّت ‎inset-block-start‎ و‎inset-inline-end‎، وإلغاءُ
       ‎position‎ وحدَه يترك قيمَ الإزاحة قائمةً لو عاد أيُّ شيءٍ يُموضعه. */
    html body .mobile-native-header .header-controls,
    html body .mobile-native-header > #topHeaderUserControls,
    html body .mobile-native-header #topHeaderUserControls {
        position: static !important;
        inset: auto !important;
        inset-block-start: auto !important;
        inset-inline-start: auto !important;
        inset-inline-end: auto !important;
        width: auto !important;
        margin: 0 !important;
    }

    html body .mobile-native-header #topHeaderUserControls {
        order: 0 !important;
        flex: 0 0 auto !important;
        /* المحورُ المتقاطعُ في عمودٍ RTL يسير يميناً←يساراً، فـ‎flex-end‎
           هي اليسار — وهي الجهةُ المطلوبة للأيقونات. */
        align-self: flex-end !important;
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        min-height: 44px !important;
    }

    /* العنوانُ/التحيّةُ سطرٌ كاملٌ تحت الأدوات، والرقمُ السحريُّ يُلغى. */
    html body .mobile-native-header > :first-child {
        order: 1 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: start !important;
    }

    /* ومُرشّحُ «الفترة» ينزل سطراً خاصّاً أسفلَ العنوان بدل أن يزاحمه —
       كان داخل ‎.header-controls‎ فيأكل نصفَ الصفّ. */
    html body .mobile-native-header .date-filter-container {
        order: 2 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        margin: 2px 0 0 !important;
        padding-left: 0 !important;
    }

    /* الحالةُ المطويّةُ عند التمرير: عنوانٌ صغيرٌ موسَّطٌ وصفُّ الأدوات باقٍ.
       لا تبديلَ لاتجاه المحور — عكسُ العمود إلى صفٍّ في RTL يقلب ترتيبَ
       الأدواتِ والعنوان، وهو عطلٌ أسوأُ من عنوانٍ لا يُحاذي iOS تماماً. */
    html body main > .content-header.mobile-native-header.is-collapsed,
    html body main > .page-header.mobile-native-header.is-collapsed,
    html body #topHeaderProfileContainer.mobile-native-header.is-collapsed {
        height: auto !important;
        min-height: calc(54px + var(--safe-top)) !important;
        gap: 0 !important;
    }

    html body .mobile-native-header.is-collapsed .date-filter-container {
        display: none !important;
    }

    /* العنوانُ الكبيرُ يلتفّ بدل أن يُقصّ. والسطرُ كاملُ العرضِ الآن فلا
       حاجةَ لـ‎nowrap‎ الذي كان يحمي من التراكب، ولا لقَصٍّ بـ‎line-clamp‎:
       الهيدرُ ‎height: auto‎ فينمو سطراً. و‎display‎ لا يُفرض هنا — فرضُه
       أظهرَ «الرئيسية» على الصفحة الرئيسيّة وهي مخفيّةٌ عمداً لأنّ التحيّةَ
       تنوب عنها، فصار الهيدرُ ٢٤٠px بعنوانين. قاسه المسبار فأعدتُه. */
    html body .mobile-native-header h1,
    html body .mobile-native-header h2,
    html body .mobile-native-header .page-title {
        max-width: 100% !important;
        white-space: normal !important;
        /* ‎normal‎ لا ‎break-word‎: الالتفافُ عند المسافات فقط — كسرُ الكلمة
           العربيّةِ نصفين مرفوضٌ صراحةً في المطلوب. */
        overflow-wrap: normal !important;
        font-size: clamp(21px, 6.6vw, 28px) !important;
        /* ١.٤ لا ١.٢٥: قاس المسبار ‎scrollHeight 35‎ مقابل ‎clientHeight 32‎ عند
           ‎line-height: 1.25‎ وخطٍّ 26px — أي أنّ صندوقَ حبرِ العربيّةِ أطولُ
           من صندوقِ السطر بثلاث بكسلات، و‎overflow: hidden‎ يقصّها. والعربيّةُ
           تحتاج ارتفاعَ سطرٍ أوسعَ من اللاتينيّة لصعودِ «ل» ونزولِ «ع». */
        line-height: 1.4 !important;
        /* ولا قَصَّ ولا «…»: العنوانُ يملك عرضَ الشاشة كاملاً الآن، فالقصُّ
           لا يحمي من تراكبٍ لم يبقَ له سبب. */
        overflow: visible !important;
        text-overflow: clip !important;
    }

    html body .mobile-native-header.is-collapsed h1,
    html body .mobile-native-header.is-collapsed h2,
    html body .mobile-native-header.is-collapsed .page-title {
        font-size: 17px !important;
    }

    /* واسمُ التحيّة يظهر كاملاً: كان ‎nowrap + ellipsis‎ وعرضُه ٤٧px بعد
       أن أكل الرقمُ السحريُّ الحاوية. */
    html body .mobile-native-header .home-greet {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    html body .mobile-native-header .home-greet-text {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }

    /* ────────────────────────────────────────────────────────────────
       أهدافُ اللمس ٤٤px — بتوسيعِ منطقةِ اللمس لا بتكبيرِ الشكل
       ────────────────────────────────────────────────────────────────
       المطلوبُ فيه شرطان ظاهرُهما متناقض: أيقوناتُ الهيدر دوائرُ ٣٦–٤٠px،
       والأزرارُ لا تقلّ عن ٤٤px. وهما لا يتناقضان: حجمُ الشكلِ وحجمُ منطقةِ
       اللمسِ شيئان مختلفان. فالدائرةُ تبقى ٣٨px كما في التصميم، وتتوسّع
       منطقةُ اللمسِ وحدَها إلى ٤٤ بعنصرٍ زائفٍ شفّافٍ موسَّط. والفراغُ بين
       الأيقونات ٦px فالتداخلُ بكسلان — لا يُغيّر أيَّ ضغطةٍ مقصودة.

       وتكبيرُ الشكلِ نفسِه كان سيكسر تصميمَ الهيدر، وتركُه كان سيُبقي
       هدفاً ٣٣px يُخطئه الإصبعُ على جهازٍ يُمسَك بيدٍ واحدة. */
    html body .mobile-native-header #topHeaderUserControls > button,
    html body .mobile-native-header #topHeaderUserControls > .theme-switch,
    html body .mobile-native-header #topHeaderAnnounceBtn,
    html body main .theme-switch,
    html body main .kb-cat,
    html body main [class*="viewMode"],
    html body main .mk-btn {
        position: relative !important;
    }

    html body .mobile-native-header #topHeaderUserControls > button::after,
    html body .mobile-native-header #topHeaderUserControls > .theme-switch::after,
    html body .mobile-native-header #topHeaderAnnounceBtn::after,
    html body main .theme-switch::after,
    html body main .kb-cat::after,
    html body main [class*="viewMode"]::after,
    html body main .mk-btn::after {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 100% !important;
        transform: translate(-50%, -50%) !important;
        /* بلا خلفيّةٍ ولا حدّ: لا يُرى، ويُلتقَط الضغطُ وحده. */
        background: transparent !important;
        border: 0 !important;
        border-radius: inherit !important;
        pointer-events: auto !important;
    }

    /* والأزرارُ العاديّةُ داخل الصفحة تُكبَّر شكلاً — لا سببَ لإبقائها ٣٢px
       وفيها نصّ. ومُستثنىً منها: أزرارُ صفوفِ الجداول (تُكبِّر الصفَّ بلا
       فائدةٍ)، وأدواتُ خريطةِ leaflet (طرفٌ ثالثٌ، ولها سلوكُها)، وزرُّ
       «تعليم كمقروء» في الإشعارات (له قياسُه داخل اللوحة). */
    html body main button:not([class*="leaflet"]):not(.notif-mark-read):not(.btn-action):not(.btn-small):not(.star-btn),
    html body main .btn:not([class*="leaflet"]):not(.btn-action):not(.btn-small),
    html body main [role="button"]:not([class*="leaflet"]) {
        min-height: 44px !important;
    }

    html body main td button,
    html body main td .btn,
    html body main table button,
    html body main table .btn {
        min-height: 32px !important;
    }

    html body .mobile-native-header .home-greet-name {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: clamp(15px, 4.6vw, 19px) !important;
        line-height: 1.45 !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   تحييدُ غلافِ الجوّال عند 768px وما فوق
   ════════════════════════════════════════════════════════════════════
   `js/mobile-shell.js` يفحص العرضَ مرّةً واحدةً عند التحميل ولا يُعيد
   الفحصَ عند التدوير. فهاتفٌ حُمّل رأسيّاً (390px) ثمّ دُوّر أفقيّاً (844px)
   يخرج من استعلامِ الجوّال وتبقى عناصرُ القشرة مُدرَجةً في DOM: زرُّ
   «المزيد» يظهر في الرصيف المكتبيّ، والشيتُ إن كان مفتوحاً يبقى بلا أنماط.
   والمعالجةُ بالأنماط لا بالـJS: إخفاءٌ شرطيٌّ أبسطُ من مستمعِ تدويرٍ
   يُعيد بناءَ التنقّل، وأقلُّ عرضةً للعطل. */
@media (min-width: 768px) {
    .mobile-more-button,
    .mobile-nav-sheet { display: none !important; }

    /* والعناصرُ التي وُسمت للإخفاء على الجوّال تعود كما كانت. */
    .mobile-overflow-item { display: revert; }
}

/* ════════════════════════════════════════════════════════════════════
   لوحة الإشعارات المرتبطة بالجرس
   ════════════════════════════════════════════════════════════════════ */
.notification-dropdown {
    --notif-arrow-x: 28px;
    position: fixed;
    /* صريحٌ لا زائد: يُبطل أيَّ ‎left/right/top/bottom‎ من ورقةٍ أخرى — فحافّةٌ
       واحدةٌ منسيّةٌ تكفي لإهمال ما يحسبه JS كلِّه. يكتب JS بعدها ‎top‎
       و‎left‎ وحدهما، فلا تجتمع الحافّتان أبداً. */
    inset: auto;
    z-index: 10100;
    display: none;
    width: 380px;
    max-width: calc(100vw - 24px);
    max-height: min(70vh, 560px);
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: var(--r-lg);
    box-shadow: none;
    animation: none;
}

.notification-dropdown.show { display: block; }

.notification-dropdown::before {
    position: absolute;
    z-index: 2;
    top: -7px;
    left: calc(var(--notif-arrow-x) - 8px);
    width: 14px;
    height: 14px;
    content: '';
    background: var(--srf-raised);
    border-top: 1px solid var(--bd-base);
    border-left: 1px solid var(--bd-base);
    transform: rotate(45deg);
}

.notification-dropdown__backdrop,
.notification-dropdown .mobile-nav-sheet__handle,
.notification-dropdown__close {
    display: none;
}

.notification-dropdown__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: inherit;
    padding: 0;
    overflow: hidden;
    color: var(--ink-base);
    background: var(--srf-raised);
    border: 1px solid var(--bd-base);
    border-radius: var(--r-lg);
    box-shadow: var(--imp-shadow-lg);
    transform: none;
}

.notification-dropdown .notif-dropdown-header {
    flex: 0 0 auto;
    gap: 12px;
    min-height: 56px;
    margin: 0;
    padding: 10px 14px;
}

.notif-dropdown-title,
.notif-header-actions,
.notif-mark-read-btn {
    display: flex;
    align-items: center;
}

.notif-dropdown-title { gap: 8px; }
.notif-header-actions { gap: 8px; }

.notification-dropdown .notif-dropdown-header h4 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
}

.notif-unread-count {
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    color: var(--acc-strong);
    background: var(--acc-soft);
    border-radius: var(--radius-pill, 999px);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.notif-mark-read-btn,
.notif-enable-btn {
    min-height: 36px;
    padding: 6px 10px;
    color: var(--acc-strong);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: 600 0.78rem/1.4 Tajawal, sans-serif;
    cursor: pointer;
}

.notif-mark-read-btn { gap: 5px; }
.notif-mark-read-btn > span[aria-hidden="true"] { font-weight: 700; letter-spacing: -3px; }
.notif-mark-read-btn:hover { background: var(--acc-soft); }
.notif-mark-read-btn:focus-visible,
.notif-enable-btn:focus-visible,
.notif-tab:focus-visible,
.notif-view-all:focus-visible,
.notif-mark-read:focus-visible {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
}

.notif-tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 18px;
    min-height: 40px;
    padding: 0 14px;
    border-bottom: 1px solid var(--bd-faint);
}

.notif-tab {
    position: relative;
    min-height: 40px;
    padding: 0 2px;
    color: var(--ink-muted);
    background: transparent;
    border: 0;
    font: 600 0.8125rem/1 Tajawal, sans-serif;
    cursor: pointer;
}

.notif-tab::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    content: '';
    background: transparent;
}

.notif-tab.is-active { color: var(--ink-strong); }
.notif-tab.is-active::after { background: var(--acc); }

.notification-dropdown .notif-push-status {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 14px;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.notification-dropdown .notif-push-status > span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.notif-enable-btn {
    flex: 0 0 auto;
    color: var(--warn, #8a5a00);
    background: var(--srf-raised);
    border-color: currentColor;
    white-space: nowrap;
}

/* «كيف أفعّلها؟» رابطٌ لا زرٌّ مُعبَّأ: فعلُه شرحٌ لا تنفيذ، وإظهارُه بهيئةِ
   زرٍّ أساسيٍّ بجانب «تفعيل» يُوهم أنّ الضغطَ يُفعّلها. */
.notif-how-btn {
    padding-inline: 2px;
    background: transparent;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* الشرحُ يأخذ سطرَه كاملاً تحت الصفّ — الشريطُ مرنٌ أفقيّاً، فبلا
   ‎flex-basis: 100%‎ ينضغط النصُّ إلى عمودٍ من كلمةٍ واحدة. */
.notif-howto {
    flex: 1 0 100%;
    margin: 6px 0 0;
    font-size: 0.75rem;
    line-height: 1.6;
    opacity: .9;
}

.notif-howto[hidden] { display: none; }

.notification-dropdown .notif-dropdown-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.notification-dropdown .notif-item {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 32px;
    align-items: start;
    gap: 10px;
    min-height: 0;
    padding: 12px 14px;
    background: var(--srf-raised);
    transition: background 120ms var(--ease, ease-out);
}

.notification-dropdown .notif-item:last-child { border-bottom: 0; }
.notification-dropdown .notif-item:hover { background: var(--srf-sunk); }
.notification-dropdown .notif-item.unread {
    background: var(--acc-soft);
    border-inline-end: 0;
}
.notification-dropdown .notif-item.read { opacity: 1; }

.notification-dropdown .notif-item-icon {
    width: 36px;
    height: 36px;
    color: var(--acc-strong);
    background: var(--acc-soft);
    border-radius: 50%;
}

.notification-dropdown .notif-item-icon svg { width: 18px; height: 18px; }
.notification-dropdown .notif-item-icon.task { color: var(--ok); background: var(--ok-soft, var(--srf-sunk)); }
.notification-dropdown .notif-item-icon.report { color: var(--dng); background: var(--dng-soft, var(--srf-sunk)); }
.notification-dropdown .notif-item-icon.announcement { color: var(--warn); background: var(--warn-soft); }

.notification-dropdown .notif-item-title {
    margin: 0 0 2px;
    overflow: hidden;
    color: var(--ink-strong);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-dropdown .notif-item-msg {
    display: -webkit-box;
    max-height: none;
    overflow: hidden;
    color: var(--ink-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.notification-dropdown .notif-item-time {
    margin-top: 4px;
    color: var(--ink-faint);
    font-size: 0.75rem;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.notification-dropdown .notif-mark-read {
    grid-column: 3;
    align-self: center;
    width: 32px;
    min-height: 32px;
    padding: 0;
    color: var(--acc-strong);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
}

.notification-dropdown .notif-mark-read:hover {
    color: var(--srf-raised);
    background: var(--acc);
}

.notif-unread-dot {
    position: absolute;
    top: 14px;
    inset-inline-start: 5px;
    width: 7px;
    height: 7px;
    background: var(--acc);
    border: 2px solid var(--srf-raised);
    border-radius: 50%;
    box-sizing: content-box;
}

.notif-empty {
    display: flex;
    min-height: 180px;
    padding: 28px 16px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--ink-muted);
    font-size: 0.875rem;
    text-align: center;
}

.notif-empty svg { width: 34px; height: 34px; color: var(--ink-faint); }

.notif-skeleton { padding: 4px 14px; }
.notif-skeleton > span {
    position: relative;
    display: block;
    height: 70px;
    overflow: hidden;
    border-bottom: 1px solid var(--bd-faint);
}
.notif-skeleton > span::before,
.notif-skeleton > span::after {
    position: absolute;
    right: 48px;
    height: 9px;
    content: '';
    background: var(--srf-sunk);
    border-radius: 5px;
}
.notif-skeleton > span::before { top: 18px; left: 22%; }
.notif-skeleton > span::after { top: 37px; left: 10%; }

.notif-view-all {
    display: flex;
    flex: 0 0 auto;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    color: var(--acc-strong);
    border-top: 1px solid var(--bd-base);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}
.notif-view-all:hover { background: var(--srf-sunk); }

@media (max-width: 767.98px) {
    body.mobile-sheet-open { overflow: hidden; }

    html body #pushEnableCard {
        position: relative;
        z-index: 1;
        top: auto;
        inset-inline: auto;
        width: 100%;
        max-width: none;
        margin: 0 0 16px;
    }

    .notification-dropdown,
    .notification-dropdown.show {
        position: fixed;
        z-index: 10060;
        inset: 0 !important;
        width: auto !important;
        max-width: none;
        max-height: none;
        align-items: flex-end;
        justify-content: stretch;
        background: transparent;
    }

    .notification-dropdown.show { display: flex; }
    .notification-dropdown::before { display: none; }
    .notification-dropdown__backdrop { display: block; }

    .notification-dropdown__panel {
        width: 100%;
        height: min(90dvh, 760px);
        max-height: 90dvh;
        padding: 8px 0 var(--safe-bottom);
        border-width: 1px 0 0;
        border-radius: 24px 24px 0 0;
        transform: translateY(100%);
        transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
    }

    .notification-dropdown.is-open .notification-dropdown__panel { transform: translateY(0); }
    .notification-dropdown .mobile-nav-sheet__handle { display: block; flex: 0 0 auto; }
    .notification-dropdown__close { display: block; flex: 0 0 auto; }
    .notification-dropdown__close { width: 44px; height: 44px; }
    .notification-dropdown .notif-mark-read-btn,
    .notification-dropdown .notif-enable-btn { min-height: 44px; }
    .notification-dropdown .notif-item { grid-template-columns: 36px minmax(0, 1fr) 44px; }
    .notification-dropdown .notif-mark-read { width: 44px; min-height: 44px; }
    .notification-dropdown .notif-dropdown-header { padding-inline: 16px; }
    .notification-dropdown .notif-tabs { padding-inline: 16px; }
    .notification-dropdown .notif-push-status { padding-inline: 16px; }
    .notification-dropdown .notif-item { padding-inline: 16px; }
    .notif-unread-dot { inset-inline-start: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .notification-dropdown__panel,
    .notification-dropdown .notif-item {
        transition-duration: 0ms !important;
    }
}


/* ============================================================
   أوراقٌ سفليّةٌ على الجوّال — طبقةٌ واحدةٌ لعائلات النوافذ الأربع
   ------------------------------------------------------------
   كانت المواصفة «ورقةٌ سفليّة» مكتوبةً في كتلة 768px (align-items:
   flex-end)، ثمّ تُلغى بعدها بثلاثمئة سطرٍ بـ flex-start !important.
   فكانت كلُّ نافذةٍ تطفو في وسطِ الشاشة أو تلتصق بأعلاها، بزاويتين
   مستديرتين في الأعلى ومربّعتين في الأسفل — أي بهيئةِ ورقةٍ سفليّةٍ
   مقلوبة. القياس: ٥٢ نافذةً من ٥٢.

   هذه الكتلة في آخر الملف كي تحسم التتابعَ مرّةً واحدة، ولا تُكرَّر
   القاعدةُ في أربعة مواضع.
   ============================================================ */
@media (max-width: 767.98px) {

    html body .modal-overlay,
    html body .mk-modal,
    html body .acc-modal-overlay,
    html body .ru-modal {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        overscroll-behavior: contain;
    }

    html body .modal-overlay > .modal,
    html body .modal-overlay > .modal-box,
    html body .modal-overlay > .modal-content,
    html body .modal-overlay > div:only-child,
    html body .mk-modal > .mk-modal-box,
    html body .acc-modal-overlay > .acc-modal,
    html body .ru-modal > .ru-modal-box {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 20px 20px 0 0 !important;
        border-bottom: 0 !important;
        /* ‎--safe-top‎ كي لا تصل الورقةُ إلى شريطِ الحالة */
        max-height: calc(100vh - var(--safe-top) - 10px) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        padding-top: 10px !important;
        animation: sheetUp 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    }

    /* المقبض. في عمودٍ مرن يصير ‎::before‎ عنصراً مرناً أوّلَ الصفّ،
       فيبقى ثابتاً فوقَ الجسمِ المتمرِّر بلا عنصرٍ إضافيٍّ في الـ HTML. */
    html body .modal-overlay > .modal::before,
    html body .modal-overlay > .modal-box::before,
    html body .modal-overlay > .modal-content::before,
    html body .mk-modal > .mk-modal-box::before,
    html body .acc-modal-overlay > .acc-modal::before,
    html body .ru-modal > .ru-modal-box::before {
        content: '' !important;
        flex: 0 0 auto !important;
        width: 40px;
        height: 4px;
        margin: 0 auto 8px;
        border-radius: 999px;
        background: var(--border-color);
        opacity: 0.9;
    }

    html body .modal-overlay .modal-body,
    html body .mk-modal .mk-modal-body,
    html body .acc-modal-overlay .acc-modal-body,
    html body .ru-modal .ru-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
    }

    /* التذييلُ لاصقٌ فوق منطقةِ الأمان، فلا يختفي الزرُّ الأساسيُّ
       تحت شريطِ الإيماءات ولا يحتاج المستخدمُ إلى تمريرٍ ليجده. */
    html body .modal-overlay .modal-footer,
    html body .modal-overlay .modal-actions,
    html body .mk-modal .mk-modal-foot,
    html body .ru-modal .ru-modal-actions {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 2 !important;
        flex: 0 0 auto !important;
        margin-top: auto !important;
        background: var(--bg-card) !important;
        border-top: 1px solid var(--border-color) !important;
        padding-bottom: calc(12px + var(--safe-bottom)) !important;
        gap: 10px !important;
    }

    html body .modal-overlay .modal-footer > button,
    html body .modal-overlay .modal-footer > .btn,
    html body .modal-overlay .modal-actions > button,
    html body .modal-overlay .modal-actions > .btn,
    html body .mk-modal .mk-modal-foot > button,
    html body .mk-modal .mk-modal-foot > .btn,
    html body .ru-modal .ru-modal-actions > button,
    html body .ru-modal .ru-modal-actions > .btn {
        flex: 1 1 0 !important;
        min-height: 48px !important;
    }

    /* أزرارُ الورقة كلُّها لا متنَها فقط: كثيرٌ من النوافذ لا تملك
       ‎.modal-body‎ أصلاً — ‎.modal-box‎ في admin.html مثلاً تضع الحقولَ
       والأزرارَ مباشرةً فيها، و‎#postponeModal‎ في profile.html يبني
       الصندوقَ من ‎div‎ بلا صنفٍ وبأنماطٍ سطريّة. فالمحدِّدُ على الغلاف
       لا على الصندوق، وإلّا فلت كلُّ نافذةٍ لا تتبع التسميةَ المعتادة.
       وأزرارُ الجداول مستثناةٌ كي لا تتضخّم الصفوف. */
    html body .modal-overlay button,
    html body .modal-overlay .btn,
    html body .mk-modal button,
    html body .mk-modal .btn,
    html body .acc-modal-overlay button,
    html body .acc-modal-overlay .btn,
    html body .ru-modal button,
    html body .ru-modal .btn {
        min-height: 44px !important;
    }

    html body .modal-overlay table button,
    html body .mk-modal table button,
    html body .acc-modal-overlay table button,
    html body .ru-modal table button {
        min-height: 32px !important;
    }

    /* زرُّ الإغلاق: مربّعُ ٤٤ كاملٌ لا مساحةُ لمسٍ وهميّة. جُرِّبت
       ‎::after‎ شفّافةً أوّلاً فلم تَقِس، والزرُّ المربّعُ أصدقُ وأبسط. */
    html body .modal-overlay .modal-close,
    html body .modal-overlay .close-modal,
    html body .modal-overlay .btn-close-modal,
    html body .mk-modal .mk-x,
    html body .acc-modal-overlay .close-modal,
    html body .ru-modal .ru-modal-close {
        flex: 0 0 auto !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    /* السحبُ للإغلاق: يضبطها ‎components.js‎ أثناء اللمس */
    html body .sheet-dragging {
        animation: none !important;
        transition: none !important;
    }

    html body .sheet-closing {
        animation: none !important;
        transition: transform 0.2s ease-in !important;
        transform: translateY(100%) !important;
    }
}

@keyframes sheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    html body .modal-overlay > .modal,
    html body .mk-modal > .mk-modal-box,
    html body .acc-modal-overlay > .acc-modal,
    html body .ru-modal > .ru-modal-box {
        animation: none !important;
    }
}


/* ============================================================
   الجداولُ بطاقاتٌ على الجوّال
   ------------------------------------------------------------
   القياسُ على شاشةِ ٣٩٠px قبل: contacts.html بعرض ١٧١٥px
   (١٣٩١px تمريراً جانبيّاً)، customers.html ١٢٦٧، ready-units ٥٥٤،
   transferred ٦٠٦، offers ٤٢٦. خمسةُ جداولَ تُقرأ بإصبعٍ يسحب يميناً
   ويساراً، ويحفظُ القارئُ العمودَ الأوّلَ في ذاكرته.

   الصنفُ ‎.mobile-card-table‎ يضعه ‎mobile-shell.js‎ على الجداولِ ذاتِ
   أربعةِ أعمدةٍ أو أكثرَ فقط، وينسخ التسمياتَ من ‎thead‎ إلى
   ‎data-label‎. فما دون أربعةٍ يبقى جدولاً — وهو يُقرأ بلا تمرير.
   ============================================================ */
@media (max-width: 767.98px) {

    html body table.mobile-card-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: transparent !important;
    }

    html body table.mobile-card-table thead {
        /* ‎display:none‎ يُخرجها من شجرةِ الوصول أيضاً، وهو المطلوب:
           التسمياتُ صارت في كلِّ خليّةٍ عبر ‎data-label‎. */
        display: none !important;
    }

    html body table.mobile-card-table tbody,
    html body table.mobile-card-table tfoot {
        display: block !important;
        width: 100% !important;
    }

    html body table.mobile-card-table tbody tr {
        display: block !important;
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 12px 14px !important;
        background: var(--bg-card) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }

    html body table.mobile-card-table tbody tr:last-child {
        margin-bottom: 0 !important;
    }

    html body table.mobile-card-table tbody tr > td {
        display: flex !important;
        width: auto !important;
        align-items: baseline !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 7px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--border-color) !important;
        text-align: start !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        max-width: none !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    html body table.mobile-card-table tbody tr > td:last-child {
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    html body table.mobile-card-table tbody tr > td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        color: var(--text-secondary);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.5;
    }

    /* عنوانُ البطاقة: أوّلُ خليّةٍ نصّيّةٍ ذاتِ معنى، بلا تسمية */
    html body table.mobile-card-table tbody tr > td[data-title] {
        display: block !important;
        padding: 0 0 8px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
        color: var(--text-primary) !important;
    }

    html body table.mobile-card-table tbody tr > td[data-title]::before {
        content: none;
    }

    /* مربّعُ التحديد: يبقى صغيراً في زاويةِ البطاقة بلا تسميةٍ فارغة */
    html body table.mobile-card-table tbody tr > td[data-check] {
        display: block !important;
        padding: 0 0 6px !important;
        border-bottom: 0 !important;
    }

    html body table.mobile-card-table tbody tr > td[data-check]::before {
        content: none;
    }

    /* خليّةٌ رأسُها فارغٌ: بلا تسميةٍ وبعرضِ البطاقة */
    html body table.mobile-card-table tbody tr > td[data-plain] {
        display: block !important;
    }

    html body table.mobile-card-table tbody tr > td[data-plain]::before {
        content: none;
    }

    /* خليّةٌ بلا تسمية (أزرارُ إجراءٍ مثلاً) تأخذ عرضَ البطاقة */
    html body table.mobile-card-table tbody tr > td[data-actions] {
        display: flex !important;
        flex-flow: row wrap !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding-top: 10px !important;
    }

    html body table.mobile-card-table tbody tr > td[data-actions]::before {
        content: none;
    }

    /* صفُّ «لا نتائج»: سطرٌ واحدٌ لا بطاقةٌ بتسميةٍ فارغة */
    html body table.mobile-card-table tbody tr[data-empty-row] {
        padding: 18px 14px !important;
        text-align: center !important;
    }

    html body table.mobile-card-table tbody tr[data-empty-row] > td {
        display: block !important;
        border-bottom: 0 !important;
        text-align: center !important;
    }

    html body table.mobile-card-table tbody tr[data-empty-row] > td::before {
        content: none;
    }

    /* الغلافُ لم يبقَ له ما يُمرَّر */
    html body .table-container:has(> table.mobile-card-table),
    html body .table-wrapper:has(> table.mobile-card-table),
    html body .table-responsive:has(> table.mobile-card-table) {
        overflow-x: visible !important;
    }
}

/* ============================================================
   أهداف اللمس للضوابط المقاسة على الجوال
   ------------------------------------------------------------
   يبقى الشكل المرسوم مدمجاً في الترويسة والأشرطة، وتمتد منطقة اللمس
   وحدها إلى 44×44px. الاستثناء هو الحقول ومربعات التحديد: يكبر المرسوم فيها أيضاً
   لوضوحها، ويبقى سطح المكتب بلا تغيير. */

/* شارة الجرس تأخذ عرض محتواها، فلا يُقص الرقم حتى عند تعدد الخانات. */
.notification-badge {
    width: auto !important;
    min-width: 18px;
    max-width: none;
    box-sizing: border-box;
    overflow: visible;
    white-space: nowrap;
    line-height: 1;
}

@media (pointer: coarse), (max-width: 768px) {
    /* مضيف 44px حقيقي، والدائرة المرسومة 38px في وسطه، لكي لا يصنع الهدف الشفاف فيضاً مقصوصاً. */
    html body .mobile-native-header #topHeaderUserControls > button,
    html body .mobile-native-header #topHeaderUserControls > .theme-switch,
    html body .mobile-native-header #topHeaderAnnounceBtn {
        position: relative !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
    }

    html body .mobile-native-header #topHeaderUserControls > .theme-switch::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 0;
        width: 38px;
        height: 38px;
        border: 1px solid var(--mobile-header-ink-line);
        border-radius: 50%;
        background: var(--mobile-header-ink-soft);
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    html body .mobile-native-header #topHeaderUserControls > .theme-switch::after {
        content: none !important;
    }

    html body .mobile-native-header .theme-switch-icon,
    html body .mobile-native-header .notification-badge {
        z-index: 1;
    }

    /* على الهاتف نعرض أيقونة الوضع الواحدة عمداً؛ الكبسولة الكاملة تبقى لسطح المكتب. */
    html body .mobile-native-header .theme-switch .theme-switch-icon {
        right: 0 !important;
        left: 0 !important;
        width: 100%;
        justify-content: center;
    }

    html body .mobile-native-header .notification-badge {
        top: 0 !important;
        right: auto !important;
        left: 0 !important;
    }

    .mobile-nav-sheet__close,
    .acc-dash-head .more,
    #proceduresScrollRight,
    #proceduresScrollLeft,
    .mk-shell .mk-brandsw-btn {
        position: relative;
        overflow: visible;
    }

    .mobile-nav-sheet__close::after,
    .acc-dash-head .more::after,
    #proceduresScrollRight::after,
    #proceduresScrollLeft::after,
    .mk-shell .mk-brandsw-btn::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
        background: transparent;
        border: 0;
        pointer-events: auto;
    }

    label:has(> #custShowClosed),
    label:has(> #includeArchivedCheckbox) {
        min-height: 44px;
    }

    #custShowClosed,
    #includeArchivedCheckbox {
        width: 20px !important;
        min-width: 20px;
        height: 20px !important;
        min-height: 20px;
        flex: 0 0 20px;
        accent-color: var(--acc);
        cursor: pointer;
    }

    #statusFilter,
    #btnSubmitContract {
        min-height: 44px !important;
    }

    /* هدفا التكبير يبقيان مرسومين 30px، ويمتد كل هدف 14px إلى خارج الزوج لكي لا يتداخلا. */
    .leaflet-control-zoom {
        overflow: visible;
    }

    .leaflet-control-zoom-in,
    .leaflet-control-zoom-out {
        position: relative;
        overflow: visible;
    }

    .leaflet-control-zoom-in::after,
    .leaflet-control-zoom-out::after {
        content: '';
        position: absolute;
        left: 50%;
        width: 44px;
        height: 44px;
        background: transparent;
        transform: translateX(-50%);
        pointer-events: auto;
    }

    .leaflet-control-zoom-in::after { bottom: 0; }
    .leaflet-control-zoom-out::after { top: 0; }
}