:root {
    /* ============================================================
       سطح داكن محيّد بميل بارد خفيف - مش كحلي مشبع.
       الكحلي/البنفسجي بتدرّجات كبيرة هو الشكل النمطي المولّد؛ منتجات
       التكنولوجيا الحقيقية أساسها أسود محيّد ولون تمييز واحد متحفّظ فيه.
       ============================================================ */
    --bg: #0b0d10;
    --bg-soft: #101317;
    --card-bg: #14181d;
    --card-bg-2: #1a1f26;
    --text: #e7eaee;
    --text-muted: #8a929c;
    /* التمييز هو نفس أزرق العلامة، مرفوع شوية عشان التباين على الداكن.
       اللون مش بيتغيّر - السطح هو اللي بيتغيّر. */
    --accent: #5b7cfa;
    --accent-dark: #7b95ff;
    --accent-soft: rgba(91, 124, 250, .13);
    --ok: #35c88a;
    --ok-soft: rgba(53, 200, 138, .12);
    --warn: #e0a132;
    --warn-soft: rgba(224, 161, 50, .12);
    --danger: #ef5350;
    --danger-soft: rgba(239, 83, 80, .12);
    --border: #242a32;
    --border-light: #1b2027;
    --border-glow: rgba(91, 124, 250, .30);
    /* أنصاف أقطار أضيق: كثافة أعلى وحسّ أداة مش لوحة تسويق */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    /* الظل على الداكن مبيبانش - الارتفاع بالحدود وفرق السطح */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30);
    --shadow-md: 0 6px 20px -8px rgba(0, 0, 0, .55);
    --space-1: 6px;
    --space-2: 10px;
    --space-3: 16px;
    --space-4: 24px;
    /* أحادي المسافة للأكواد والسيريالات - أقوى إشارة "تقنية" وأصدقها:
       الخانات بتتراصف فعلًا */
    --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Mono",
            Menlo, Consolas, monospace;

    /* ============================================================
       أسماء بديلة لتوكنز مستخدمة في الكود ومكانت معرّفة أبدًا، فكانت
       بتسقط على قيمها الاحتياطية **الفاتحة** (#eee / #111 / #e5e7eb...).
       تعريفها هنا صلّح كل مواضعها من غير لمس أي markup.
       ============================================================ */
    --color-surface-2: var(--card-bg-2);
    --color-text-muted: var(--text-muted);
    --bg-alt: rgba(255, 255, 255, .03);
    --ink: var(--text);
    --line: var(--border);
    --muted: var(--text-muted);
    --text-light: var(--text-muted);
    --success: var(--ok);
}

/* الأرقام جدولية في الداشبورد كله: الأعمدة بتتراصف والعدّادات مبترقصش */
body { font-variant-numeric: tabular-nums; }

/* الأكواد والسيريالات بخط أحادي المسافة - دي حاجات بتتقارن بالعين حرف بحرف */
code, kbd, samp, .mono { font-family: var(--mono); font-size: .94em; }

/* الروابط: الستايل مكانش فيه أي قاعدة ليها، فكانت بتاخد أزرق المتصفح
   الافتراضي (#0000EE) - تباينه على الداكن 2.07 وهو أقل من المقبول. مقيس. */
a { color: var(--accent-dark); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* شبكة خفيفة جدًا على الخلفية - عمق بلا أي عنصر أو تكلفة رسم */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(140, 165, 210, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(140, 165, 210, .022) 1px, transparent 1px);
    background-size: 44px 44px;
}
body > * { position: relative; z-index: 1; }

* { box-sizing: border-box; }

.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

body {
    font-family: "Outfit", "Segoe UI", Tahoma, Arial, sans-serif;
    background: var(--bg);
    margin: 0;
    color: var(--text);
}

/* ================= App shell ================= */
.app-shell {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.sidebar {
    width: 250px;
    flex-shrink: 0;
    background: var(--card-bg);
    border-inline-end: 1px solid var(--border);
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    padding: var(--space-3) var(--space-2);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-brand {
    font-size: 19px;
    font-weight: 700;
    color: var(--text);
    padding: var(--space-2) var(--space-2) var(--space-4);
    display: flex;
    align-items: center;
    gap: 8px;
}

.side-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.side-link {
    text-align: right;
    border: none;
    background: none;
    color: var(--text-muted);
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.side-link:hover { background: var(--border-light); color: var(--text); }
.side-link.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.sidebar-logout {
    margin-top: var(--space-3);
    text-align: center;
    background: var(--danger-soft);
    color: var(--danger);
}
.sidebar-logout:hover { background: rgba(239, 83, 80, .20); }

.sidebar-user-badge {
    margin-top: var(--space-3);
    padding: var(--space-2);
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-light, #667085);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.permissions-box {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-2) 0;
}
.permissions-group {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: var(--space-2);
    min-width: 200px;
}
.permissions-group-title {
    font-weight: 600;
    margin-bottom: 6px;
}
.permissions-check {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-weight: 400;
}
.inline-edit-panel {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: var(--space-3);
    margin: var(--space-2) 0;
    background: var(--bg-soft, #f9fafb);
}

.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    padding: 16px var(--space-4);
    flex-wrap: wrap;
    gap: 10px;
}

.topbar h1 { font-size: 18px; margin: 0; color: var(--text); font-weight: 600; }

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

.last-sync { font-size: 12.5px; color: var(--text-muted); }

.global-filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}
.global-filter-label select {
    padding: 6px 9px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent);
}

/* مبدّل الشركة - قفل دائم بارز، مش قائمة اختيار عادية زي فلتر الفئة، عشان يبقى مستحيل تتلخبط
 * بين "كسر زيرو" و"كويك فيكس" وانت شغال. */
.company-switch {
    display: flex;
    gap: 6px;
    background: var(--card-bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px;
}
.company-btn {
    padding: 8px 16px;
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.company-btn:hover { color: var(--text); }
.company-btn.active { background: var(--accent); color: #fff; }

.content {
    flex: 1;
    padding: var(--space-4);
    min-width: 0;
}

/* ================= Buttons ================= */
.btn {
    border: none;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    display: inline-block;
}
.btn:active { transform: scale(0.97); }

/* ============================================================
   الزرّ الأساسي والحقول: القواعد دي كانت **ناقصة** خالص، فالعناصر كانت
   بتاخد ستايل المتصفح الافتراضي (رمادي فاتح ونص أسود). مقيس: 7 أزرار
   `.btn` و8 `.btn-ghost` و2 `textarea` و1 `pre`.
   ============================================================ */
.btn {
    background: var(--card-bg-2);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--card-bg-2); color: var(--text); border-color: var(--accent); }
/* الأنواع الملوّنة بعد الأساسي عشان تتغلّب عليه */
.btn-primary { background: var(--accent); color: #fff; border-color: transparent; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; border-color: transparent; }

input, select, textarea {
    background: var(--bg-soft);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: #5f6874; }
/* منتقي التاريخ والوقت: الأيقونة سودة على الداكن ومبتبانش */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.75); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); padding: 0; }
input[type="file"] { padding: 6px; }

pre {
    background: var(--bg-soft);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    font-family: var(--mono);
    font-size: 12px;
    overflow-x: auto;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-primary:disabled { background: #262b36; color: #9aa4c0; cursor: wait;
                         border-color: var(--border); }

.btn-secondary { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

.btn-danger { background: var(--danger); color: #fff; }

.status-box {
    margin: 0 0 var(--space-3);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    white-space: pre-line;
}
.status-box.success { background: var(--ok-soft); color: var(--ok); border: 1px solid rgba(53, 200, 138, .34); }
.status-box.error { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(239, 83, 80, .34); }
.status-box.loading { background: var(--warn-soft); color: var(--warn); border: 1px solid rgba(224, 161, 50, .34); }
.hidden { display: none; }
#refreshStatus:not(.hidden) { margin: var(--space-3) var(--space-4) 0; }

/* ================= KPI strip ================= */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: var(--space-4);
}

/* نفس الشريط بالظبط - الاسم التاني مستعمل في نص الصفحات، وكان معرَّف
   في استعلام الموبايل بس، فعلى الديسكتوب كان بيقع على display:block
   وكل كارت بياخد سطر. */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: var(--space-4);
}

/* هامش الربح/الربح الإجمالي/التكلفة مخفيين عن يوزرات معينة (hide_margin_data) - القيم نفسها
   بتتشال من رد الباك إند، هنا بس بنخفي العمود/الكارت بصريًا عشان ميفضلش ظاهر فاضي. */
body.hide-margin-active .margin-col,
body.hide-margin-active .margin-kpi {
    display: none !important;
}

.kpi-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    animation: fade-slide-in 0.35s ease-out backwards;
}
.kpi-card:hover { border-color: var(--border-glow); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.kpi-card.kpi-warn .kpi-value { color: var(--warn); }
.kpi-card.kpi-danger .kpi-value { color: var(--danger); }
.kpi-card.kpi-clickable { cursor: pointer; }
.kpi-card.kpi-clickable:hover { border-color: var(--accent, #4c8bf5); }
.kpi-card.kpi-clickable .kpi-label::after { content: ' 🔍'; font-size: 11px; opacity: 0.6; }

/* دخول خفيف للكارت لما البيانات تتحمل - وتوهين متدرّج بسيط لكل كارت بعد اللي قبله (nth-child)
   عشان الشريط كله محسسك إنه بيتحمّل تدريجيًا مش بيظهر فجأة كله مرة واحدة */
@keyframes fade-slide-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.kpi-strip .kpi-card:nth-child(1) { animation-delay: 0ms; }
.kpi-strip .kpi-card:nth-child(2) { animation-delay: 40ms; }
.kpi-strip .kpi-card:nth-child(3) { animation-delay: 80ms; }
.kpi-strip .kpi-card:nth-child(4) { animation-delay: 120ms; }
.kpi-strip .kpi-card:nth-child(5) { animation-delay: 160ms; }
.kpi-strip .kpi-card:nth-child(6) { animation-delay: 200ms; }

.kpi-label { font-size: 12.5px; color: var(--text-muted); }
.kpi-value { font-size: 26px; font-weight: 700; color: var(--text); }

/* ================= Tab panels ================= */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---- Sub-navigation (مستوى تاني جوه كل تاب رئيسي مجمّع) ---- */
.sub-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.sub-link {
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13.5px;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sub-link:hover { color: var(--accent); border-color: var(--border-glow); }
.sub-link.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent-soft);
    font-weight: 600;
}
.sub-panel { display: none; }
.sub-panel.active { display: block; }

/* ================= مستوى وسيط جوه ERP (المبيعات/الحسابات/شوبيفاي/نظرة عامة قديمًا كانوا
   تابات رئيسية مستقلة - بقوا مجموعات فرعية جوه ERP بس نفس صلاحياتهم القديمة زي ما هي) ============ */
.erp-group-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border);
}
.erp-group-link {
    border: 1px solid var(--border);
    background: var(--card-bg-2);
    color: var(--text-muted);
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}
.erp-group-link:hover { color: var(--accent); border-color: var(--border-glow); }
.erp-group-link.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 600;
}
.erp-group-panel { display: none; }
.erp-group-panel.active { display: block; }

.hrm-dept-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border);
}
.hrm-dept-link {
    border: 1px solid var(--border);
    background: var(--card-bg-2);
    color: var(--text-muted);
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}
.hrm-dept-link:hover { color: var(--accent); border-color: var(--border-glow); }
.hrm-dept-link.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 600;
}
.hrm-dept-group.hrm-dept-hidden { display: none; }

.section-title { margin: 26px 0 12px; font-size: 16px; color: var(--text); font-weight: 700; }
.export-btn { display: block; margin: 0 0 10px auto; font-size: 12.5px; padding: 6px 14px; }
.section-title:first-child { margin-top: 0; }
.filter-label-inline { font-size: 12.5px; font-weight: 400; color: var(--text-muted, #888); margin-inline-start: 6px; }

.filters {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
    font-size: 14px;
    flex-wrap: wrap;
}

.filters input, .filters select {
    padding: 6px 9px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    color: var(--text);
}
.filters input:focus, .filters select:focus, .data-table input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.hint { color: var(--text-muted); font-size: 13px; margin-bottom: 10px; }

/* ================= Tables ================= */
.data-table {
    width: 100%;
    max-width: 100%;
    /* separate + spacing:0 (مش collapse) - عشان position:sticky على الـ th يشتغل؛ ده باج معروف
       في المتصفحات إن sticky بيتجاهَل جوه جدول border-collapse:collapse */
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.data-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

.data-table th, .data-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
    text-align: right;
    color: var(--text);
}

/* الهيدر بيثبت فوق وانت بتعمل اسكرول جوه الجدول (بيتبع أقرب حاوية بتتسكرول - هنا .content) -
   وبيبطل يثبت تلقائيًا أول ما تتعدى نهاية الجدول ده لجدول تاني، من غير أي جافاسكريبت. */
.data-table th {
    background: var(--card-bg-2);
    position: sticky;
    top: 0;
    z-index: 3;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 12.5px;
    box-shadow: 0 1px 0 var(--border);
}

/* كل صف جديد بيدخل بتلاشي خفيف - بيشتغل تلقائي مع أي جدول لأي جدول بيتبني من جديد (innerHTML='')
   بيعمل عناصر tr جديدة فعليًا، فمحتاجش أي جافاسكريبت عشان الأنيميشن يتكرر. */
@keyframes row-fade-in { from { opacity: 0; } to { opacity: 1; } }
.data-table tbody tr { animation: row-fade-in 0.25s ease-out backwards; }
.data-table tbody tr:hover { background: var(--card-bg-2); transition: background 0.1s ease; }
.data-table tr.attention { background: var(--warn-soft); }
.data-table tr.out-of-stock { background: var(--danger-soft); }

.data-table input {
    width: 90px;
    padding: 4px 6px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}

.data-table input.desc-input { width: 130px; }

.auto-spec { color: var(--text); }

.small-btn {
    padding: 5px 9px;
    font-size: 12px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
}

/* ================= Badges ================= */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }

.margin { font-weight: 700; color: var(--ok); }

.sortable-table th[data-sort] {
    cursor: pointer;
    user-select: none;
}
.sortable-table th[data-sort]:hover { color: var(--accent); }

/* ================= Alerts ================= */
.alert-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: var(--space-4);
}

.alert-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    border-inline-start: 4px solid var(--text-muted);
}
.alert-card.alert-danger { border-inline-start-color: var(--danger); }
.alert-card.alert-warn { border-inline-start-color: var(--warn); }

.alert-card-title {
    font-weight: 700;
    font-size: 14.5px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alert-count {
    background: var(--card-bg-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 13px;
    color: var(--text);
}

.alert-list { margin: 0; padding-inline-start: 18px; font-size: 13px; color: var(--text); }
.alert-list li { margin-bottom: 4px; }

/* ================= شحنات الاختبار (Snipe-IT) ================= */
.shipment-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
}
.shipment-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.shipment-card-title { font-weight: 700; font-size: 15px; color: var(--text); }

.shipment-quality-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: var(--warn-soft);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text);
}
.shipment-quality-row b { color: var(--warn); }

/* 160px كانت ضيقة على أسماء الموديلات ("Dell Precision 5540") - الاسم كان بيلف على سطرين
   والرقم يقع تحته معلّق لوحده، فالمستخدم بيشوف أرقام مش عارف بتاعة إيه. 240px بتخلي
   السطر الواحد يكفي لمعظم الأسماء. */
.shipment-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 22px;
}
.shipment-breakdown-col h4 {
    margin: 0 0 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 600;
}
.shipment-breakdown-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}
.shipment-breakdown-col li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 0;
    color: var(--text);
    border-bottom: 1px dashed var(--border, rgba(128, 128, 128, .22));
}
.shipment-breakdown-col li:last-child { border-bottom: 0; }

/* الاسم بياخد المساحة كلها وبيتقص بنقط لو طويل (الاسم الكامل في tooltip).
   min-width:0 لازمة: من غيرها العنصر المرن مبيقبلش يتقص وبيدفع الرقم بره. */
.shipment-breakdown-col .bd-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* الرقم مالوش لف أبدًا، والوحدة جنبه - فمفيش رقم عريان مش واضح بتاع إيه */
.shipment-breakdown-col .bd-count {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.shipment-breakdown-col .bd-count em {
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    color: var(--text-muted);
}

/* ================= Charts ================= */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: 20px;
}

.chart-box {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    height: 420px;
}
.chart-box h3 { margin: 0 0 14px; font-size: 15px; color: var(--text); flex: none; }
/* حاجز: الـcanvas مايمدّش الصندوق مهما حصل. من غيره أي قاعدة بتخلّي
   الارتفاع auto بترجّع حلقة النمو. */
.chart-box { overflow: hidden; }
.chart-box canvas { flex: 1; min-height: 0; max-height: none; }
.chart-empty-msg { text-align: center; padding: 40px 0; margin: 0; color: var(--text-muted); }

/* ---- شاشة "مين في الفروع الآن" ----
   شبكة مستقلة عن .charts-grid بقصد: .chart-box ارتفاعه ثابت 420px عشان
   الرسمة اللي جواه، والقايمة هنا طولها بيتغيّر حسب عدد الموجودين. أول ما
   استعملت .chart-box فاضت الأسماء بره الكارت وغطّت على الكارت اللي تحتها. */
.hr-live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    align-items: start;          /* كل كارت بطوله الطبيعي، مش متمدّد لأطول واحد */
}

.hr-live-branch {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;                /* الأسماء الطويلة تتقصّ جوه الكارت مش تمدّه */
    overflow: hidden;            /* حاجز أخير: مفيش أي محتوى يطلع بره الحدود */
}

.hr-live-branch h4 {
    margin: 0 0 4px;
    font-size: 14px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.hr-live-count {
    font-size: 22px;
    font-weight: 800;
    color: #16a34a;
    line-height: 1;
}

/* فرع فيه عدد كبير: تمرير جوه الكارت بدل ما يطوّل الصفحة بلا نهاية */
.hr-live-list { display: flex; flex-direction: column; gap: 4px;
                max-height: 46vh; overflow-y: auto; }

.hr-live-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px; border-radius: 8px;
    background: rgba(22, 163, 74, .10);
}
.hr-live-row .nm { flex: 1 1 auto; min-width: 0; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
.hr-live-row .tm { flex: 0 0 auto; opacity: .7; direction: ltr; font-size: 12px; }
.hr-live-dot { width: 7px; height: 7px; border-radius: 50%;
               background: #16a34a; flex: 0 0 auto; }

/* اللي خرجوا: قسم منفصل بفاصل - مش مكوّمين مع اللي جوّه */
.hr-live-gone { margin-top: 4px; border-top: 1px solid var(--border);
                padding-top: 5px; display: flex; flex-direction: column; gap: 2px;
                max-height: 26vh; overflow-y: auto; }
.hr-live-gone .hr-live-row { background: none; opacity: .55; padding: 3px 8px; }
.hr-live-gone .nm { text-decoration: line-through; }

/* اتجاه المبيعات (Time & Sales) - "تيرمينال" غامق مستقل، عرض كامل وارتفاع أكبر عشان يتفرج
   عليه بوضوح زي TradingView (شارت + تيب فواتير حية جنبه)، مش متضغّط جنب 3 رسومات تانية صغيرة */
.tape-terminal {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}
.tape-terminal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.tape-terminal-title {
    color: #f8fafc;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tape-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #10b981;
    animation: tapePulse 1.5s infinite;
    flex-shrink: 0;
    display: inline-block;
}
@keyframes tapePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.tape-terminal-nav.hrm-dept-nav { margin: 0; padding: 0; border: none; }
.tape-terminal-nav .hrm-dept-link { background: #0f172a; border: 1px solid #334155; color: #94a3b8; }
.tape-terminal-nav .hrm-dept-link:hover { color: #e2e8f0; border-color: #475569; }
.tape-terminal-nav .hrm-dept-link.active { background: #2563eb; border-color: #2563eb; color: #fff; }

.tape-terminal-body { display: flex; gap: 16px; height: 520px; }
.tape-terminal-chart {
    flex: 1;
    min-width: 0;
    height: auto;
    background: #131c2e;
    border: 1px solid #1e293b;
}
.tape-terminal-side {
    width: 300px;
    flex-shrink: 0;
    background: #131c2e;
    border: 1px solid #1e293b;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tape-terminal-side-header {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #e2e8f0;
    border-bottom: 1px solid #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.tape-scale-bar { display: flex; height: 8px; margin: 10px 12px 0; border-radius: 4px; overflow: hidden; }
.tape-scale-up { background: #10b981; }
.tape-scale-down { background: #f43f5e; }
.tape-delta-summary {
    font-family: monospace;
    font-size: 12px;
    color: #cbd5e1;
    text-align: center;
    padding: 8px 12px;
    border-bottom: 1px solid #1e293b;
}
.tape-table-header {
    display: grid;
    grid-template-columns: 1fr 0.6fr 1fr;
    padding: 6px 12px;
    font-size: 10.5px;
    color: #64748b;
    border-bottom: 1px solid #1e293b;
    font-family: monospace;
    text-transform: uppercase;
}
.tape-table-body { flex: 1; overflow-y: auto; font-family: monospace; font-size: 12.5px; }
.tape-row {
    display: grid;
    grid-template-columns: 1fr 0.6fr 1fr;
    padding: 6px 12px;
    align-items: center;
    border-bottom: 1px solid rgba(30,41,59,0.5);
}
.tape-row.up { background: rgba(16,185,129,0.12); color: #6ee7b7; }
.tape-row.down { background: rgba(244,63,94,0.12); color: #fda4af; }
.tape-row-time { color: #94a3b8; font-size: 11px; }

@media (max-width: 900px) {
    .tape-terminal-body { flex-direction: column; height: auto; }
    .tape-terminal-side { width: 100%; height: 300px; }
    .tape-terminal-chart { height: 320px; }
}

/* ================= Chat (بوت أزرار) ================= */
.chat-window {
    background: var(--card-bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    height: 420px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.chat-message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.chat-message.bot {
    background: var(--card-bg);
    color: var(--text);
    align-self: flex-start;
    border: 1px solid var(--border);
    border-bottom-right-radius: 3px;
}

.chat-message.user {
    background: var(--accent);
    color: #fff;
    font-weight: 500;
    align-self: flex-end;
    border-bottom-left-radius: 3px;
}

.chat-card {
    border-inline-start: 3px solid var(--accent);
}
.chat-card-title { font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.chat-card-line { font-size: 13.5px; margin-bottom: 2px; }

.chat-quick-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.chat-option-btn { font-size: 13.5px; }

.chat-input-row { display: flex; gap: 10px; }
.chat-input-row input {
    flex: 1;
    padding: 10px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text);
}

/* ================= بوت الشات كبوب أب عائم ================= */
.chat-fab {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 24px;
    border: none;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    z-index: 999;
}
.chat-fab:hover { background: var(--accent-dark); }

.chat-popup {
    position: fixed;
    bottom: 92px;
    left: 24px;
    width: 380px;
    height: 520px;
    min-width: 300px;
    min-height: 340px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 140px);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    z-index: 998;
    overflow: auto;
    resize: both; /* بيدي مقبض تكبير/تصغير عادي زي أي نافذة، غير الزرار السريع في الهيدر */
}
.chat-popup.hidden { display: none; }

.chat-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--card-bg-2);
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    color: var(--text);
    flex: none;
}
.chat-popup-header-actions { display: flex; align-items: center; gap: 4px; }
.chat-popup-icon-btn, .chat-popup-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 6px;
}
.chat-popup-icon-btn:hover, .chat-popup-close:hover { color: var(--accent); }

.chat-popup .chat-window {
    flex: 1;
    height: auto;
    min-height: 100px;
    margin: 12px 16px 0;
    border-radius: var(--radius-md);
}
.chat-popup .chat-quick-options,
.chat-popup .chat-input-row {
    margin: 10px 16px 14px;
    flex: none;
}

@media (max-width: 860px) {
    .chat-fab { bottom: 16px; left: 16px; }
    .chat-popup { bottom: 80px; left: 16px; right: 16px; width: auto; resize: none; }
}

/* ================= Login page ================= */
.login-body { margin: 0; }

.login-shell {
    min-height: 100vh;
    display: flex;
}

/* ---- لوحة البراند (يسار) ---- */
.login-brand-panel {
    position: relative;
    flex: 1 1 44%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    overflow: hidden;
    background: linear-gradient(155deg, var(--accent-dark) 0%, var(--accent) 55%, #7c8fff 100%);
    color: #fff;
}
.login-brand-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.16) 0%, transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(255,255,255,0.14) 0%, transparent 45%),
        radial-gradient(circle at 50% 100%, rgba(0,0,0,0.12) 0%, transparent 55%);
    pointer-events: none;
}
.login-brand-content { position: relative; max-width: 380px; }
.login-brand-logo {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 14px;
    margin-bottom: 20px;
}
.login-brand-logo .icon { width: 26px; height: 26px; }
.login-brand-content h2 { font-size: 26px; font-weight: 800; margin: 0 0 12px; }
.login-brand-content > p { font-size: 14.5px; line-height: 1.8; color: rgba(255,255,255,0.85); margin: 0 0 28px; }

.login-brand-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.login-brand-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}
.login-brand-feature-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.14);
    border-radius: 9px;
}
.login-brand-feature-icon .icon { width: 16px; height: 16px; }

/* ---- لوحة الفورم (يمين) ---- */
.login-form-panel {
    flex: 1 1 56%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 24px;
}

.login-box {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 36px 28px;
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 380px;
    text-align: center;
    animation: login-box-in 0.4s ease-out;
}
@keyframes login-box-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.login-logo {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 50%;
}
.login-logo-mobile { display: none; }

.login-box h1 { font-size: 22px; margin: 0 0 6px; color: var(--text); font-weight: 700; }
.login-subtitle { font-size: 13.5px; color: var(--text-muted); margin: 0 0 26px; }

.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-form input {
    width: 100%;
    padding: 13px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 15px;
    text-align: center;
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.login-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.login-form .btn { width: 100%; }
.login-form .btn-primary {
    padding: 13px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 8px 20px -8px rgba(70, 95, 255, 0.55);
}

.login-password-field { position: relative; }
.login-password-field input { padding-inline-start: 42px; padding-inline-end: 42px; }
.login-password-icon {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    pointer-events: none;
}
.login-password-toggle {
    position: absolute;
    inset-inline-end: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
}
.login-password-toggle:hover { color: var(--accent); }
.login-password-toggle.is-visible { color: var(--accent); }

.login-footer { font-size: 11px; color: var(--text-muted); margin: 24px 0 0; }

@media (max-width: 780px) {
    .login-brand-panel { display: none; }
    .login-logo-mobile { display: flex; }
}

/* ================= Responsive ================= */
@media (max-width: 860px) {
    .app-shell { flex-direction: column; }
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        padding: var(--space-2) var(--space-3);
        border-inline-end: none;
        border-bottom: 1px solid var(--border);
    }
    .sidebar-brand { padding: 4px 2px 10px; font-size: 16px; }
    .side-nav { flex-direction: row; flex-wrap: wrap; flex: none; gap: 6px; }
    .side-link {
        white-space: nowrap;
        flex: 1 1 auto;
        text-align: center;
        justify-content: center;
        padding: 10px 8px;
        font-size: 13px;
    }
    .sidebar-logout { margin-top: var(--space-2); }
    .content { padding: var(--space-3); }
    .topbar { padding: 12px var(--space-3); flex-wrap: wrap; gap: 10px; }
    .topbar h1 { font-size: 16px; }
    .company-switch { width: 100%; }
    .company-btn { flex: 1; }
    .actions { width: 100%; }
    .global-filter-label { flex: 1 1 100%; }
    .global-filter-label select { flex: 1; }
}

@media (max-width: 480px) {
    .side-link { flex-basis: calc(50% - 3px); }
}

/* ================= عرض السعر (Quotation) ================= */
.quote-letterhead {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--accent);
}
.quote-company-name { font-size: 22px; font-weight: 700; color: var(--accent); }
.quote-company-meta { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.quote-meta { font-size: 13.5px; color: var(--text); text-align: left; white-space: nowrap; }
.quote-meta div { margin-bottom: 4px; }
#quoteCustomerName { min-width: 220px; }

.quote-summary-box {
    max-width: 340px;
    margin: 18px 0 18px auto;
    background: var(--card-bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 18px;
}
.quote-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 14px;
    color: var(--text-muted);
}
.quote-summary-row input[type="number"] {
    width: 50px;
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--border);
    color: inherit;
    font-size: inherit;
    text-align: center;
}
.quote-summary-total {
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--accent);
}
.quote-thanks { text-align: center; color: var(--text-muted); font-size: 13px; margin-top: 8px; }

/* ================= طباعة (لعرض السعر بس - باقي الداشبورد مخفي وقت الطباعة) ================= */
@media print {
    .sidebar, .topbar, #refreshStatus, .sub-nav, .no-print, .chat-fab, .chat-popup { display: none !important; }
    body, .app-shell, .main-area, .content { background: #fff !important; }
    .tab-panel, .erp-group-panel, .sub-panel { display: none !important; }
    #tab-erp.tab-panel, #erpgroup-sales.erp-group-panel, #subtab-quotation.sub-panel { display: block !important; }
    .erp-group-nav { display: none !important; }
    #quotationPrintArea, #quotationPrintArea * {
        color: #000 !important;
        background: #fff !important;
        box-shadow: none !important;
    }
    #quotationPrintArea table, #quotationPrintArea th, #quotationPrintArea td,
    #quotationPrintArea .quote-summary-box, #quotationPrintArea .quote-letterhead {
        border-color: #999 !important;
    }
}

/* ================= نفس منطق الطباعة، لكن كـ كلاس بدل @media (لالتقاط PDF عبر html2canvas) ================= */
.pdf-export-mode .no-print { display: none !important; }
.pdf-export-mode #quotationPrintArea, .pdf-export-mode #quotationPrintArea * {
    color: #000 !important;
    background: #fff !important;
    box-shadow: none !important;
}
.pdf-export-mode #quotationPrintArea table, .pdf-export-mode #quotationPrintArea th, .pdf-export-mode #quotationPrintArea td,
.pdf-export-mode #quotationPrintArea .quote-summary-box, .pdf-export-mode #quotationPrintArea .quote-letterhead {
    border-color: #999 !important;
}

/* ================= Badge إضافي (ملغي) - نفس نمط .badge-ok/.badge-warn/.badge-danger ================= */
.badge-muted { background: var(--card-bg-2); color: var(--text-muted); }

/* ================= Modal عام (تفاصيل أوردر شوبيفاي - أول استخدام ليه في الداشبورد) ================= */
.dash-modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    align-items: center; justify-content: center;
    z-index: 200;
}
.dash-modal-overlay.open { display: flex; }
.dash-modal {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md, var(--shadow-sm));
    width: min(640px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    padding: 24px;
}
.dash-modal h2 { margin-top: 0; font-size: 18px; color: var(--text); }
.dash-modal .close { float: left; cursor: pointer; color: var(--text-muted); font-size: 20px; }
.dash-modal .section { margin-bottom: 20px; }
.dash-modal .section h3 { font-size: 12.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.dash-modal .li-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; color: var(--text); }
.dash-modal .addr { font-size: 13.5px; line-height: 1.8; color: var(--text); }
.dash-modal .field { margin-bottom: 10px; }
.dash-modal .field label { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 5px; }
.dash-modal .field input, .dash-modal .field select {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 13.5px; background: var(--card-bg); color: var(--text);
}
.dash-modal .row2 { display: flex; gap: 10px; }
.dash-modal .row2 .field { flex: 1; }
.dash-modal .checkline { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13.5px; color: var(--text); }
.dash-modal .msg { margin-top: 8px; font-size: 13px; }
.dash-modal .msg.ok { color: var(--ok); }
.dash-modal .msg.fail { color: var(--danger); }
.dash-modal .cancel-box { background: var(--danger-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.btn-danger { background: var(--danger); color: #fff; border: none; }
.btn-danger:hover { background: var(--danger); opacity: 0.9; }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }


/* ============================================================
   صفحة الموظف — نظام تصميم واحد
   ------------------------------------------------------------
   الصفحة كلها بتشرب من التوكنز اللي تحت: سطح بأربع درجات، مسافات على
   سلّم 4px، ثلاثة أنصاف أقطار، ستة مقاسات خط، ولون تمييز واحد.
   الغرض إن أي حاجة تتضاف بعدين تبان جزء من نفس التصميم تلقائيًا.

   والحركة بـtransform/opacity بس، ومفيش أي مكتبة: الصفحة المفروض تحمّس
   مش تقل.
   ============================================================ */

#hrMyBody {
    /* ============================================================
       الصفحة بتشرب من توكنز الداشبورد، ملهاش لوحة ألوان خاصة.
       كانت بتعرّف كحلي مشبع بنفسها، وبعد ما الداشبورد بقى داكن محيّد
       الكحلي بقى جزيرة - وهو نفسه الشكل النمطي المولّد.
       ============================================================ */
    --hp-bg:     var(--bg);
    --hp-s1:     var(--card-bg);
    --hp-s2:     var(--card-bg-2);
    --hp-s3:     var(--card-bg-2);
    --hp-line:   var(--border);
    --hp-line-2: var(--accent-soft);
    --hp-fg:     var(--text);
    --hp-dim:    var(--text-muted);
    --hp-faint:  #6b727c;
    /* لون تمييز **واحد**. التدرّج الثلاثي للزينة اتشال. */
    --hp-ac:     var(--accent);
    --hp-ac-2:   var(--accent-dark);
    --hp-good:   var(--ok);
    --hp-warn:   var(--warn);
    --hp-bad:    var(--danger);
    /* ---- الإيقاع ---- */
    --hp-r-sm: 10px;  --hp-r-md: 14px;  --hp-r-lg: 18px;
    --hp-sp-1: 6px;   --hp-sp-2: 10px;  --hp-sp-3: 14px;
    --hp-sp-4: 20px;  --hp-sp-5: 26px;

    background: var(--hp-bg);
    color: var(--hp-fg);
    border-radius: var(--hp-r-lg);
    padding: var(--hp-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--hp-sp-3);
}
#hrMyBody :is(h3, h4, p, td, th, small, div, span, a) { color: inherit; }
/* الأرقام جدولية: الأعمدة بتتراصف والعدّاد مبيرقصش وهو بيعدّ */
#hrMyBody { font-variant-numeric: tabular-nums; }
/* الأكواد والتواريخ والأوقات بخط أحادي المسافة - بتتقارن بالعين حرف بحرف */
#hrMyBody .hp-num, #hrMyBody [style*="direction:ltr"] { font-family: var(--mono); }

/* ---------------------------------------------------- الهيرو */
.hrp-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--hp-r-lg);
    padding: var(--hp-sp-5);
    border: 1px solid var(--hp-line);
    /* سطح واحد ولمسة تمييز واحدة خفيفة - مش تدرّجين ملوّنين */
    background:
        radial-gradient(120% 100% at 6% 0%, var(--accent-soft) 0%, transparent 46%),
        linear-gradient(170deg, var(--hp-s2) 0%, var(--hp-s1) 78%);
}
/* شبكة منظورية هادية - عمق بلا أي عنصر زيادة */
.hrp-hero::before {
    content: '';
    position: absolute; inset: -45%;
    background-image:
        linear-gradient(rgba(150, 175, 220, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150, 175, 220, .035) 1px, transparent 1px);
    background-size: 38px 38px;
    transform: perspective(560px) rotateX(60deg);
    transform-origin: 50% 0;
    animation: hrpGrid 34s linear infinite;
    pointer-events: none;
}
@keyframes hrpGrid { to { background-position: 0 38px, 38px 0; } }
.hrp-hero > * { position: relative; z-index: 1; }

.hrp-head { display: flex; align-items: flex-start; gap: var(--hp-sp-3); flex-wrap: wrap; }
.hrp-name { margin: 0; font-size: 21px; font-weight: 750; letter-spacing: -.3px; line-height: 1.2; }
.hrp-sub  { margin: 5px 0 0; font-size: 12.5px; color: var(--hp-dim); }
/* شارة الترتيب: نصّية. الإيموجي في واجهة إدارية أول علامة على شكل مولّد. */
.hrp-badge {
    margin-inline-start: auto;
    display: inline-flex; align-items: baseline; gap: 7px;
    padding: 8px 14px; border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid rgba(91, 124, 250, .30);
}
.hrp-badge-n { font-size: 15px; font-weight: 800; color: var(--hp-ac); letter-spacing: -.3px; }
.hrp-badge-l { font-size: 11px; color: var(--hp-dim); }

.hrp-body {
    display: grid; gap: var(--hp-sp-5); margin-top: var(--hp-sp-4);
    grid-template-columns: 200px 1fr;
    align-items: center;
}
@media (max-width: 760px) { .hrp-body { grid-template-columns: 1fr; gap: var(--hp-sp-4); } }

/* ---- حلقة التحقيق ---- */
.hrp-ring { position: relative; display: grid; place-items: center; }
.hrp-ring svg { width: 100%; height: auto; overflow: visible; transform: rotate(-90deg); }
.hrp-ring-track { stroke: rgba(150, 176, 232, .12); }
.hrp-ring-fill {
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px rgba(91, 124, 250, .35));
    transition: stroke-dashoffset 1.5s cubic-bezier(.16, 1, .3, 1);
}
.hrp-ring-mid { position: absolute; text-align: center; line-height: 1.06; }
.hrp-ring-pct { font-size: 32px; font-weight: 800; letter-spacing: -1.2px; }
.hrp-ring-cap { font-size: 11px; color: var(--hp-dim); margin-top: 4px; }

/* ---- خانات الأرقام ---- */
.hrp-stats { display: grid; gap: var(--hp-sp-2); grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.hrp-stat {
    padding: var(--hp-sp-2) var(--hp-sp-3);
    border-radius: var(--hp-r-sm);
    background: rgba(150, 176, 232, .05);
    border: 1px solid var(--hp-line);
    transition: border-color .2s ease, background .2s ease;
}
.hrp-stat:hover { border-color: var(--hp-line-2); background: rgba(150, 176, 232, .08); }
.hrp-stat-l { font-size: 11px; color: var(--hp-dim); }
.hrp-stat-v { font-size: 18px; font-weight: 750; margin-top: 4px; letter-spacing: -.5px; }
.hrp-stat-s { font-size: 10.5px; color: var(--hp-faint); margin-top: 3px; }
.hrp-pos { color: var(--hp-good); } .hrp-neg { color: var(--hp-bad); } .hrp-warn { color: var(--hp-warn); }

/* ---- شريط التقدّم + علامة الإيقاع ---- */
.hrp-track {
    position: relative; height: 10px; border-radius: 999px; margin-top: var(--hp-sp-4);
    background: rgba(150, 176, 232, .10);
}
.hrp-track-fill {
    /* relative + hidden عشان اللمعة تتموضع على الجزء المتحقّق نفسه، مش على
       الشريط كله (أقرب جدّ عنده position). مقيس. */
    position: relative; overflow: hidden;
    height: 100%; border-radius: 999px; width: 0;
    background: linear-gradient(90deg, var(--hp-ac), var(--hp-ac-2));
    transition: width 1.6s cubic-bezier(.16, 1, .3, 1);
}
.hrp-track-fill::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
    animation: hrpSheen 4.5s ease-in-out infinite;
}
@keyframes hrpSheen { 0%, 62% { transform: translateX(-100%); } 100% { transform: translateX(220%); } }
.hrp-pace {
    position: absolute; top: -5px; width: 2px; height: 20px;
    background: var(--hp-warn); border-radius: 2px;
}
.hrp-track-note { font-size: 11.5px; color: var(--hp-dim); margin-top: var(--hp-sp-2); }

/* ---- سلّم الشرائح ---- */
.hrp-tier { margin-top: var(--hp-sp-4); }
.hrp-ladder { display: flex; gap: var(--hp-sp-1); margin-top: var(--hp-sp-2); }
.hrp-band {
    flex: 1 1 0; min-width: 0; padding: var(--hp-sp-2) var(--hp-sp-1);
    border-radius: var(--hp-r-sm); text-align: center;
    background: rgba(150, 176, 232, .04);
    border: 1px solid var(--hp-line);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s ease;
}
.hrp-band-r { font-size: 14.5px; font-weight: 750; }
.hrp-band-x { font-size: 10.5px; color: var(--hp-faint); margin-top: 3px; direction: ltr; }
/* الشريحة الحالية بارزة - بلا نبض مستمر: المنتج بيحرّك عند تغيّر الحالة
   مش للأبد، والحركة الدايمة أول علامة على شكل مولّد. */
.hrp-band.on {
    /* التمييز بالسطح والحدود، مش بتدرّج - أنضف وأقرب لأدوات المطوّرين */
    background: var(--accent-soft);
    border-color: rgba(91, 124, 250, .45);
    transform: translateY(-3px);
}
.hrp-band.on .hrp-band-r { color: var(--hp-ac); }
.hrp-band.next { border-color: rgba(224, 161, 50, .40); }
.hrp-band.next .hrp-band-r { color: var(--hp-warn); }

/* ---------------------------------------------------- الكروت تحت الهيرو */
/* نفس لغة الهيرو: نفس السطح ونفس الحدود ونفس الإيقاع - وده اللي بيخلّي
   الصفحة تبان مصمّمة مش مركّبة. */
.hp-card {
    border-radius: var(--hp-r-md);
    padding: var(--hp-sp-4);
    background: var(--hp-s1);
    border: 1px solid var(--hp-line);
}
.hp-card + .hp-card { margin-top: 0; }
.hp-title {
    display: flex; align-items: baseline; gap: var(--hp-sp-2);
    margin: 0 0 var(--hp-sp-3);
    font-size: 14px; font-weight: 700; letter-spacing: -.2px;
}
.hp-title small { font-size: 11.5px; font-weight: 400; color: var(--hp-dim); }
.hp-note {
    font-size: 11.5px; color: var(--hp-dim); line-height: 1.65; margin: var(--hp-sp-2) 0 0;
}
.hp-note strong { color: var(--hp-fg); font-weight: 650; }
/* التحفّظ: شريط جانبي كهرماني - نفس المعنى في كل الصفحة */
.hp-caution {
    border-inline-start: 2px solid var(--hp-warn);
    padding-inline-start: var(--hp-sp-2);
    background: var(--warn-soft);
    border-radius: 0 var(--hp-r-sm) var(--hp-r-sm) 0;
    padding-block: var(--hp-sp-1);
}

/* ---- جداول الصفحة ---- */
/* الجدول العريض يمرّر جوه صندوقه - من غير ده بيدفع الصفحة كلها
   (اتقاس على الديسكتوب: تبويب التارجت 1372px على شاشة 1265). */
.table-wrap { overflow-x: auto; max-width: 100%; }
.hp-table-wrap { overflow-x: auto; border-radius: var(--hp-r-sm); }
.hp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.hp-table th, .hp-table td {
    padding: 9px 11px; text-align: start;
    border-bottom: 1px solid var(--hp-line);
    white-space: nowrap;
}
.hp-table thead th {
    font-size: 10.5px; font-weight: 650; color: var(--hp-dim);
    text-transform: none; letter-spacing: .3px;
    background: rgba(150, 176, 232, .04);
}
.hp-table tbody tr { transition: background .16s ease; }
.hp-table tbody tr:hover { background: rgba(150, 176, 232, .05); }
.hp-table tbody tr:last-child td { border-bottom: 0; }
.hp-table tfoot th {
    padding: 9px 11px; font-size: 12.5px; font-weight: 750;
    border-top: 1px solid var(--hp-line-2); text-align: start;
}
.hp-num { direction: ltr; text-align: start; }
.hp-muted { color: var(--hp-faint); }

/* ---- خانات صغيرة داخل الكروت (ملخص البصمة) ---- */
.hp-mini { display: grid; gap: var(--hp-sp-2); grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.hp-mini-c {
    padding: var(--hp-sp-2) var(--hp-sp-3); border-radius: var(--hp-r-sm);
    background: rgba(150, 176, 232, .04); border: 1px solid var(--hp-line);
}
.hp-mini-l { font-size: 10.5px; color: var(--hp-dim); }
.hp-mini-v { font-size: 17px; font-weight: 750; margin-top: 3px; letter-spacing: -.4px; }
.hp-mini-s { font-size: 10.5px; color: var(--hp-faint); margin-top: 2px; }

/* ---- شريط تقدّم صغير في جدول الشهور ---- */
.hp-bar { position: relative; height: 6px; width: 96px; border-radius: 999px;
          background: rgba(150, 176, 232, .12); overflow: hidden; }
.hp-bar-f { height: 100%; border-radius: 999px;
            background: linear-gradient(90deg, var(--hp-ac), var(--hp-ac-2)); }

/* ---- شرائط التحذير على نظام الصفحة ---- */
/* كلاسات مش ستايل مباشر: الستايل المباشر مبيتغلبش عليه بـCSS، وكان بيطلع
   صندوق أبيض بيقطع الصفحة الداكنة. */
.hp-warns { display: flex; flex-direction: column; gap: var(--hp-sp-1); }
.hp-warn {
    padding: 9px 12px; border-radius: var(--hp-r-sm); font-size: 12px; line-height: 1.6;
    border: 1px solid var(--hp-line);
    border-inline-start-width: 2px;
    background: rgba(150, 176, 232, .05);
}
.hp-warn strong { font-weight: 700; }
.hp-warn-ok     { border-inline-start-color: var(--ok);     background: var(--ok-soft); }
.hp-warn-danger { border-inline-start-color: var(--danger); background: var(--danger-soft); }
.hp-warn-warn   { border-inline-start-color: var(--warn);   background: var(--warn-soft); }
.hp-warn-info   { border-inline-start-color: var(--accent); background: var(--accent-soft); }

/* ---- ظهور متدرّج ---- */
.hrp-rise { animation: hrpRise .45s cubic-bezier(.16, 1, .3, 1) both; }
.hrp-rise:nth-of-type(2) { animation-delay: .05s; }
.hrp-rise:nth-of-type(3) { animation-delay: .1s; }
@keyframes hrpRise { from { opacity: 0; transform: translateY(10px); } }

/* اللي مبيستحملش الحركة: نفس التصميم ثابت، مش نسخة أفقر */
@media (prefers-reduced-motion: reduce) {
    .hrp-hero::before, .hrp-track-fill::after { animation: none; }
    .hrp-ring-fill, .hrp-track-fill, .hrp-stat, .hrp-band { transition: none; }
    .hrp-rise { animation: none; }
}

/* ============================================================
   حالة التحميل والوصل
   ------------------------------------------------------------
   التحميل بيبقى في الخلفية: المحتوى القديم بيفضل معروض وبيهدى شوية،
   والجديد بيبدّله لما يوصل. الشاشة مبتتفضّاش.
   ============================================================ */

/* شريط رقيق أعلى الصفحة - المؤشر الوحيد إن في حاجة بتحمّل */
#apiProgressBar {
    position: fixed; inset-block-start: 0; inset-inline: 0; height: 2px;
    z-index: 9999; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    background-size: 40% 100%; background-repeat: no-repeat;
    opacity: 0; transition: opacity .2s ease;
}
#apiProgressBar.on { opacity: 1; animation: apiBar 1.1s ease-in-out infinite; }
@keyframes apiBar {
    0%   { background-position: -40% 0; }
    100% { background-position: 140% 0; }
}

/* العنصر اللي بيتحدّث: بيهدى شوية ومبيتفضّاش */
.is-refreshing { position: relative; }
.is-refreshing > * { opacity: .55; transition: opacity .2s ease; }
.is-refreshing::after {
    content: 'بيتحدّث…';
    position: absolute; inset-block-start: 6px; inset-inline-end: 8px;
    font-size: 10.5px; color: var(--text-muted);
    background: var(--card-bg-2); border: 1px solid var(--border);
    border-radius: 999px; padding: 2px 9px; z-index: 2;
}

/* سطر التحميل الأول (لما مفيش حاجة معروضة) */
.loading-line { animation: apiPulse 1.4s ease-in-out infinite; }
@keyframes apiPulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }

/* إشعار الوصل: بيبان ويختفي لوحده، مش بيوقف الصفحة زي alert */
.api-notice {
    position: fixed; inset-block-end: 18px; inset-inline-start: 18px;
    max-width: 340px; z-index: 10000;
    padding: 11px 15px; border-radius: var(--radius-md);
    font-size: 12.5px; line-height: 1.6;
    background: var(--card-bg-2); color: var(--text);
    border: 1px solid var(--border); border-inline-start-width: 3px;
    box-shadow: var(--shadow-md);
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.api-notice.on { opacity: 1; transform: translateY(0); }
.api-notice.warn { border-inline-start-color: var(--warn); }
.api-notice.bad  { border-inline-start-color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
    #apiProgressBar.on, .loading-line { animation: none; }
    .api-notice { transition: none; }
}

/* ============================================================
   الموبايل
   ------------------------------------------------------------
   الشل كان شريط جانبي ثابت 250px بلا أي قاعدة للموبايل، فكان بياكل نص
   الشاشة. والجداول كانت بتطلّع تمرير أفقي طويل.
   ============================================================ */

/* زرّ الدرج - مخفي على الشاشات الكبيرة */
#drawerToggle {
    display: none;
    background: var(--card-bg-2); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    width: 38px; height: 38px; align-items: center; justify-content: center;
    cursor: pointer; flex: 0 0 auto;
}
#drawerScrim {
    display: none; position: fixed; inset: 0; z-index: 60;
    /* من غير backdrop-filter بقصد: هو بيرفع كل اللي فوقه لطبقة تركيب،
       والدرج قاعد على موضع كسري (مقيس: left 113.2px، جاي من عرض الشاشة)،
       فنص القايمة كان بيترسم ويتعاد معايرته ويطلع مش حادّ.
       اتجرّب معزولًا: إطفاؤه وحده رجّع النص حادّ، والـtransform والظلّ
       مالهمش دخل. والعتامة زادت من .55 لـ.62 تعويضًا عن التمويه. */
    background: rgba(0, 0, 0, .62);
    opacity: 0; transition: opacity .22s ease;
}
body.shell-open #drawerScrim { display: block; opacity: 1; }

/* الصفحة ورا الدرج متقفلة: من غير ده السحب بيحرّك الصفحة تحت بدل القايمة
   (مقيس: ارتفاع الصفحة 2718 على شاشة 900)، ولما تقفل الدرج تلاقي نفسك
   في مكان تاني. */
/* html كمان مش body بس: حاوية التمرير الفعلية هي html، وقفل body لوحده
   بيسيب الصفحة تتمرّر (اتقاس: التمرير عدّى من 700 لـ1500 والدرج مفتوح). */
html:has(body.shell-open), body.shell-open { overflow: hidden; }
#drawerScrim { touch-action: none; }
/* التمرير لآخر القايمة مايكمّلش على الصفحة اللي وراها */
.sidebar { overscroll-behavior: contain; }

@media (max-width: 900px) {
    #drawerToggle { display: inline-flex; }

    /* الشريط بيطلع بره الشاشة وبيرجع بزرّ */
    .app-shell {
        display: block;
        /* z-index: auto مقصودة: القاعدة العامة `body > * { z-index: 1 }`
           (المضافة مع شبكة الخلفية) بتخلّي .app-shell **سياق طبقات مقفول**،
           فالـ70 بتاعة الدرج بتتنافس جوه الصندوق ده والحجاب (60) بيتقارن
           بالـ1 بتاعة الشِل - فيطلع فوق الدرج ويبلع كل الضغطات.
           `position: relative` مع `z-index: auto` مش بتعمل سياق، فالدرج
           والحجاب بيرجعوا لنفس السياق والترتيب يظبط. */
        z-index: auto;
    }
    .sidebar {
        position: fixed; z-index: 70;
        inset-block: 0; inset-inline-start: 0;
        width: 262px; max-width: 84vw;
        overflow-y: auto;
        transform: translateX(-104%);
        transition: transform .26s cubic-bezier(.16, 1, .3, 1);
        box-shadow: 0 0 40px rgba(0, 0, 0, .6);
    }
    /* RTL: الدرج بيطلع من اليمين */
    html[dir="rtl"] .sidebar { transform: translateX(104%); }
    body.shell-open .sidebar,
    html[dir="rtl"] body.shell-open .sidebar { transform: translateX(0); }

    /* الهوية والخروج تحت: عناصر القايمة بتخلص في تلت الدرج، والباقي كان فاضي */
    .sidebar .sidebar-user-badge { margin-top: auto; }

    .main-area { width: 100%; min-width: 0; }
    .content { padding: 12px !important; }
    /* الهيدر جزء من الصفحة مش طبقة فوقها.
       الخلفية المنفصلة + الحدّ السفلي كانوا بيخلّوه يبان كأنه صفحة تانية
       فوق الصفحة - وعلى الديسكتوب ده شريط علوي سليم، لكن على شاشة الموبايل
       الكتلة بتاخد 21% من الطول فبتبقى قسمة مش شريط. */
    .topbar {
        padding: 8px 12px !important;
        gap: 6px;
        flex-wrap: wrap;
        background: transparent;
        border-bottom: 0;
    }
    .topbar h1, .topbar h2 { font-size: 16px; }
    .topbar .actions { gap: 6px; width: 100%; }
    .topbar .last-sync { font-size: 11px; line-height: 1.45; }

    /* التبويبات تلفّ على أسطر - مش شريط تمرير أفقي.
       الشريط كان عرضه 716px في مساحة 351: نصّه برّه الشاشة دايمًا، والمعروض
       منه بيتغيّر مع كل تنقّل، فبيبان كأن عناصر بتظهر وتختفي. */
    .sub-nav, .erp-group-nav, .tab-nav {
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 14px;
        padding-bottom: 10px;
    }
    .sub-link, .erp-group-link {
        flex: 0 1 auto;
        /* 34px حد أدنى للمس: القياس السابق كان 27px وهو أصغر من الإصبع.
           اللفّ بيستحمل الارتفاع ده عادي - المشكلة كانت العرض مش الطول. */
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
        font-size: 12px;
    }
    .btn, .filters button, .filters input, .filters select { min-height: 36px; }
    /* أي حقل في أي مكان - مش في .filters بس: حقول التارجت جوه الجدول كانت 26px */
    input:not([type="checkbox"]):not([type="radio"]),
    select, textarea { min-height: 34px; }
    /* المربّع مقاسه الأصلي 13px - أصغر من الإصبع بكتير.
       24 مش 18: المربّع اللي جوه label هدف لمسه هو السطر كله، لكن اللي
       لوحده في خانة جدول (زي اختيار المخازن) هدفه هو نفسه. */
    input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }
    /* السطر هو هدف اللمس: الضغط في أي مكان فيه بيبدّل المربّع */
    label.permissions-check, .filters label:has(> input[type="checkbox"]) {
        min-height: 34px; display: flex; align-items: center; gap: 8px;
    }
    /* الأيقونة جوه الشريحة بتاخد مساحة بلا معنى لما الشرائح تصغّر */
    .sub-link .icon, .erp-group-link .icon { display: none; }

    /* الفلاتر: عمود واحد - الحقول جنب بعضها على 360px مبتبانش */
    .filters { flex-direction: column; align-items: stretch; gap: 8px; }
    .filters > * { width: 100%; }
    .filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
    .filters input, .filters select, .filters button { width: 100%; }

    .card, .chart-box { padding: 14px !important; }
    .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .charts-grid { grid-template-columns: 1fr; }
    /* ارتفاع **ثابت** مش auto: الـcanvas جوه الصندوق عنده flex:1 وChart.js
       مستجيب، فـ`height:auto` بتعمل حلقة (الـcanvas بياخد مقاسه من الصندوق
       والصندوق من محتواه) والرسمة بتفضل تكبر. مقيس: وصلت 16,662px.

       والتيرمينال مستثنى: ليه قاعدة موبايل خاصة (320px) وتخطيط مختلف،
       وقاعدتي كانت بتغلب عليه وتنزّله 158px. */
    .chart-box:not(.tape-terminal-chart) { height: 300px; overflow: hidden; }

    /* الجدول العادي: تمرير أفقي مع ظلّ بيوضّح إن فيه كمان */
    .table-wrap, .hp-table-wrap {
        overflow-x: auto;
        background:
            linear-gradient(to left, var(--card-bg) 30%, rgba(0,0,0,0)),
            linear-gradient(to left, rgba(0,0,0,.35), rgba(0,0,0,0) 12px) 100% 0;
        background-repeat: no-repeat;
        background-size: 40px 100%, 14px 100%;
        background-attachment: local, scroll;
    }
    .data-table th, .data-table td { padding: 7px 8px; font-size: 12px; }
    /* اسم الجهاز يلفّ بدل ما يتقص: على 350px علامة الحذف بتيجي بدري أوي
       فمش عارف الموديل أصلًا. سطرين أفيد من نصف اسم. */
    .shipment-breakdown-col .bd-label {
        overflow: visible; text-overflow: clip; white-space: normal;
    }
    /* 10px مش مقروء على شاشة في اليد - 11 هو الأرضية */
    small, .hint small, .kpi-sub { font-size: 11px; }
}

/* ------------------------------------------------------------
   الجدول → صفوف مكدّسة (صفر تمرير أفقي)

   كل خانة بتاخد عنوان عمودها في data-label، والقاعدة دي بتحوّل الجدول
   قايمة كروت.

   القاعدة على `.stackable` **أيًا كان الجدول** - كانت متقيّدة بـ.hp-table
   فكان بروفايل الموظف بس هو المتكدّس، وتبويب الحضور (13 عمود · 752px في
   حاوية 323px) فضل أفقي، وهو بالظبط اللي الشكوى كانت عليه.
   ------------------------------------------------------------ */
@media (max-width: 700px) {
    .stackable thead { display: none; }
    /* tfoot جوه القايمة: صفّ الإجمالي كان الوحيد اللي فاضل أفقي (422px في
       حاوية 323) لأن التكديس كان على tbody بس. وخاناته `th` مش `td`. */
    .stackable, .stackable tbody, .stackable tfoot,
    .stackable tr, .stackable td,
    .stackable tfoot th { display: block; width: 100%; }
    .stackable tr {
        border: 1px solid var(--border); border-radius: var(--radius-sm);
        margin-bottom: 8px; padding: 4px 2px; background: rgba(150, 176, 232, .03);
    }
    .stackable td, .stackable tfoot th {
        display: flex; align-items: baseline; gap: 10px;
        border-bottom: 0; padding: 5px 10px;
        text-align: start;
        /* !important بقصد: الراسم بيحطّ white-space:nowrap **في السطر** على
           بعض الخانات (العنوان، صفّ الأزرار)، والمكتوب في السطر بيغلب الملف.
           كان بيخلّي الخانة ترفض تلفّ فالجدول يفضل عريض رغم التكديس
           ويدفع الصفحة كلها. والتكديس نفسه معناه إن الخانة لازم تلفّ. */
        white-space: normal !important;
        /* اللفّ مش رفاهية: خانة الإجراءات فيها 4 أزرار، ومن غير `wrap`
           الفليكس بيصفّهم في سطر واحد فيخرجوا 121px برّه الحاوية (اتقاس).
           مع اللفّ بينزلوا سطر تحت وخلاص. */
        flex-wrap: wrap;
        row-gap: 4px;
    }
    /* الخانة المكدّسة: القيمة تاخد باقي السطر بعد العنوان */
    .stackable td > * { min-width: 0; }
    .stackable td .btn { margin: 0; }
    .stackable td::before, .stackable tfoot th::before {
        content: attr(data-label);
        flex: 0 0 42%; font-size: 11px; color: var(--text-muted);
    }
    /* خانة مادّة على كل العرض (زي «لا توجد بيانات») مالهاش عنوان عمود */
    .stackable td[colspan]::before { content: none; }
    .stackable td[colspan] { justify-content: center; }
    .stackable td:empty { display: none; }
    .stackable tfoot tr { background: var(--card-bg-2); }
    /* الظلّ بس هو اللي بيتشال. التمرير بيفضل `auto` **بقصد**: لو جدول
       فضل عريض لأي سبب (خاصية مكتوبة في السطر، محتوى مش بيتكسر)، لازم
       يمرّر جوه صندوقه - مع `visible` كان بيدفع الصفحة كلها ويخلّيها
       470px على شاشة 375. حزام أمان، مش تصليح لحالة واحدة. */
    .hp-table-wrap:has(.stackable),
    .table-wrap:has(.stackable) { background: none; }
}

/* ------------------------------------------------------------
   بروفايل السلز على الموبايل
   ------------------------------------------------------------ */
@media (max-width: 700px) {
    #hrMyBody { padding: 12px; gap: 10px; border-radius: 0; }
    .hrp-hero { padding: 16px 14px; }
    .hrp-name { font-size: 18px; }
    .hrp-badge { margin-inline-start: 0; margin-top: 8px; }
    .hrp-head { gap: 6px; }
    /* الحلقة أصغر: 200px على شاشة 360 بتاخد نص الطول */
    .hrp-ring { max-width: 168px; margin-inline: auto; }
    .hrp-ring-pct { font-size: 27px; }
    .hrp-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
    .hrp-stat { padding: 9px 11px; }
    .hrp-stat-v { font-size: 16px; }
    /* السلّم 2×2: 4 في سطر على 360px بتخلّي الخانة 80px ومش مقروءة */
    .hrp-ladder { flex-wrap: wrap; }
    .hrp-band { flex: 1 1 calc(50% - 4px); }
    .hp-card { padding: 14px; }
    .hp-mini { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
    .hrp-stats { grid-template-columns: 1fr; }
    .hrp-ring { max-width: 150px; }
}

/* ============================================================
   الوضع الفاتح
   ------------------------------------------------------------
   القيم دي هي **نفس** التوكنز الأصلية بالظبط قبل التحويل للداكن - فالوضع
   الفاتح رجوع للي كان، مش تصميم تالت.

   التبديل بيغيّر التوكنز بس: مفيش أي راسم أو ماركب بيتأثّر.
   ============================================================ */
html[data-theme="light"] {
    --bg: #f9fafb;
    --bg-soft: #f9fafb;
    --card-bg: #ffffff;
    --card-bg-2: #f9fafb;
    --text: #1d2939;
    --text-muted: #667085;
    --accent: #465fff;
    --accent-dark: #3641e0;
    --accent-soft: #ecf3ff;
    --ok: #039855;
    --ok-soft: #ecfdf3;
    --warn: #dc6803;
    --warn-soft: #fffaeb;
    --danger: #d92d20;
    --danger-soft: #fef3f2;
    --border: #e4e7ec;
    --border-light: #f2f4f7;
    --border-glow: rgba(70, 95, 255, .35);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-md: 0 4px 14px rgba(16, 24, 40, .08);
    --bg-alt: rgba(0, 0, 0, .03);
}
/* الشبكة على الخلفية أخفت على الفاتح - نفس الشفافية بتبان خطوط رمادية ثقيلة */
html[data-theme="light"] body::before {
    background-image:
        linear-gradient(rgba(29, 41, 57, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29, 41, 57, .028) 1px, transparent 1px);
}
/* الزرّ المعطّل والتحويمات اللي اتظبطت للداكن */
/* المعطّل يبان معطّل ومقروء: نص أبيض على #b6c0ff تباينه 1.9 (كان
   موجود قبل التحويل). سطح باهت ونص غامق بدلاً منه. */
html[data-theme="light"] .btn-primary:disabled {
    background: #e6e9f5; color: #6b7280; border-color: #d7dbe8;
}
html[data-theme="light"] .sidebar-logout:hover { background: #fee4e2; }
/* أيقونة منتقي التاريخ: مبتحتاجش قلب على الفاتح */
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="month"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator { filter: none; }

/* زرّ التبديل */
#themeToggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 auto; cursor: pointer;
    background: var(--card-bg-2); color: var(--text-muted);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    transition: color .18s ease, border-color .18s ease;
}
#themeToggle:hover { color: var(--accent); border-color: var(--accent); }
/* أيقونة واحدة بتبان حسب الوضع - مفيش تبديل DOM */
#themeToggle .icon-sun { display: none; }
#themeToggle .icon-moon { display: block; }
html[data-theme="light"] #themeToggle .icon-sun { display: block; }
html[data-theme="light"] #themeToggle .icon-moon { display: none; }

/* ============ ورقة أسعار المورّد ============
   الشكل بيقلّد ورقة المورّد نفسها: شريط عنوان فيه اسمه وتاريخه وتليفونه،
   عمود ماركة متظلّل، ومسافة بين البلوكات زي السطر الفاضي في ورقته.
   التظليل بالمتغيّرات مش بلون ثابت - الورقة أصفر في الصورة، والأصفر
   الثابت بيولّع في الثيم الغامق. */
.qsheet { padding-top: 0; overflow: hidden; }
.qsheet-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 calc(-1 * var(--space-4)) var(--space-3);
    padding: 10px var(--space-4);
    background: var(--accent-soft);
    border-bottom: 1px solid var(--border);
}
.qsheet-name { font-weight: 700; font-size: 15px; letter-spacing: .2px; }
.qsheet-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qsheet-date, .qsheet-tel {
    direction: ltr;
    font-family: var(--mono);
    font-size: 12px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
}
/* بيانات المورّد كلها لاتيني. جوّه صفحة RTL، نص زي "16 INCH" بيتقلب
   ويتقرا "INCH 16" - الاتجاه على مستوى الخانة بيصلّحه من غير ما يقلب
   ترتيب الأعمدة. الخانة اللي فيها عربي بتفضل سليمة: الاتجاه الأساسي
   مبيمنعش المقطع العربي من إنه يتعرض يمين-شمال جوّه. */
.qs-table td { direction: ltr; text-align: center; }
/* عنوان العمود بيرتّب بالضغط - المؤشّر بيوضّح إنه قابل للضغط */
.qs-table th.dm-sort { cursor: pointer; user-select: none; }
.qs-table th.dm-sort:hover { text-decoration: underline; }
.qs-table th.dm-sorted { color: var(--accent); }
.dm-arrow { font-weight: 700; }

.qs-table th { text-align: center; }

.qs-table td.qs-brand {
    background: var(--warn-soft);
    font-weight: 600;
    white-space: nowrap;
}
.qs-table td.qs-price { font-weight: 700; }
.qs-table tr.qs-gap td { padding: 0; height: 10px; border: 0; background: transparent; }
@media (max-width: 700px) {
    .qsheet-head { margin-inline: calc(-1 * var(--space-3)); padding-inline: var(--space-3); }
    .qs-table tr.qs-gap { display: none; }
}


/* ============ قائمة الطلب ============
   الصف الناقص لازم يبان من مسافة، مش بعد ما حد يقرا العمود الأخير.
   التظليل خفيف عشان النص يفضل مقروء - الشارة هي اللي بتقول الحالة. */
.qs-table tr.dm-out td { background: var(--danger-soft); }
.qs-table tr.dm-low td { background: var(--warn-soft); }
.qs-table tr.dm-unknown_code td,
.qs-table tr.dm-no_code td { background: var(--bg-alt); }
.qs-table td.mono { font-family: var(--mono); direction: ltr; }

.dm-pick-box { display: flex; align-items: center; gap: 4px; justify-content: center; }
.dm-pick-box select { max-width: 190px; font-size: 11px; }


/* ============ شريط موافقة الموقع ============
   تحت الشاشة مش فوقها: الشريط العلوي فيه معلومات الصفحة، وطلب إذن بيقطع
   القراءة بيتقفل من غير ما يتقرا. */
.loc-consent {
    position: fixed;
    inset-inline: 12px;
    bottom: 12px;
    z-index: 80;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: 13px;
    line-height: 1.7;
}
.loc-consent-btns { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 700px) {
    .loc-consent { inset-inline: 8px; bottom: 8px; font-size: 12px; }
    .loc-consent-btns { width: 100%; }
    .loc-consent-btns .btn { flex: 1; }
}


/* شريط التنبيه الأمني - نفس مكان شريط الموافقة وفوقه لو ظهروا مع بعض */
.sec-bar {
    position: fixed;
    inset-inline: 12px;
    bottom: 12px;
    z-index: 81;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--danger);
    border-inline-start: 3px solid var(--danger);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: 13px;
}
.loc-consent:has(~ .sec-bar), .sec-bar ~ .loc-consent { bottom: 76px; }
.sec-bar-btns { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 700px) {
    .sec-bar { inset-inline: 8px; bottom: 8px; font-size: 12px; }
    .sec-bar-btns { width: 100%; }
    .sec-bar-btns .btn { flex: 1; }
}


/* ============ فلاتر الأعمدة في قائمة الطلب ============
   صفّ الفلترة تحت العناوين مباشرة: الخانة فوق عمودها يعني مفيش سؤال
   «الخانة دي بتفلتر إيه». */
.qs-table thead tr.dm-filter th {
    padding: 4px 6px;
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
}
.qs-table thead tr.dm-filter input {
    width: 100%;
    min-width: 60px;
    padding: 3px 6px;
    font-size: 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--text);
}
.dm-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 6px;
    margin: 10px 0;
}
.dm-col-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    font-size: 12px;
}
.dm-col-row label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.dm-col-row .btn { min-width: 30px; padding: 2px 6px; }
@media (max-width: 700px) {
    /* الجدول متكدّس على الموبايل، وصفّ الفلترة فيه مالوش معنى - الخانة
       بتبقى تحت عنوان مش فوق عمود */
    .qs-table.stackable thead tr.dm-filter { display: none; }
}

/* جدول الناقص: حدّ أحمر في الرأس - ده الجدول اللي فيه قرار شراء */
.qsheet-danger .qsheet-head { background: var(--danger-soft); border-bottom-color: var(--danger); }
.qsheet-danger { border-color: var(--danger); }


/* توزيع الأصناف على الفروع - صفّ تفصيل تحت الصف */
.qs-table tr.dm-br-row td { background: var(--bg-soft); padding: 8px 12px; }
.dm-br-box { display: flex; flex-wrap: wrap; gap: 8px; }
.dm-br-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    font-size: 12px;
}
.dm-br-name { color: var(--text-muted); }