/* Copied unchanged from the Technical Support system (TECHNICAL_SUPPORT_IT/Styles/design-system.css, 2026-10-09)
   so both Al-Andalus internal systems share one identity. Project-specific rules live in site.css; edit there, not here. */
/* ==========================================================================
   نظام التصميم الموحّد — نظام الدعم الفني (شركة الأندلس التعليمية)
   الأساس فاتح وواضح، ألوان النجمة للتصنيفات والحالات، والقوس لمسة للعنصر النشط.
   كل الألوان متغيرات؛ الوضع الليلي يعيد تعريفها تحت html[data-theme="dark"].
   ========================================================================== */

:root {
    /* الأرضية والأسطح */
    --ds-ground: #F5F6FA;
    --ds-surface: #FFFFFF;
    --ds-surface-2: #EEF0FA;
    --ds-line: #E3E5EF;
    --ds-line-strong: #CDD1E2;

    /* النص */
    --ds-ink: #151E5C;
    --ds-muted: #5A6080;
    --ds-faint: #8A90AE;

    /* الهوية: نيلي الشركة */
    --ds-brand: #22307F;
    --ds-brand-hover: #1A2668;
    --ds-brand-soft: #EEF0FA;
    --ds-on-brand: #FFFFFF;

    /* ألوان النجمة — للتصنيفات */
    --ds-blue: #1166B0;
    --ds-cyan: #0A93B8;
    --ds-coral: #C9473F;
    --ds-violet: #8E4A93;
    --ds-amber: #C98A12;
    --ds-green: #3E8F5A;

    /* الحالات: لون العلامة / النص / الخلفية */
    --ds-st-new: #0A93B8;      --ds-st-new-ink: #0B6F8C;      --ds-st-new-bg: #E1F4FA;
    --ds-st-progress: #22307F; --ds-st-progress-ink: #22307F; --ds-st-progress-bg: #E8EAF6;
    --ds-st-pending: #E9A825;  --ds-st-pending-ink: #8A5A0B;  --ds-st-pending-bg: #FCF0D9;
    /* المتأخرة أحمر أعمق من مرجاني تصنيف الطابعات حتى لا يختلطا */
    --ds-st-overdue: #B42318;  --ds-st-overdue-ink: #9F1F15;  --ds-st-overdue-bg: #FDE8E6;
    --ds-st-done: #2F7A4A;     --ds-st-done-ink: #22704A;     --ds-st-done-bg: #E3F3EA;

    /* الرأس النيلي للصفحات الرئيسية وعلاماته الفاتحة */
    --ds-hero: #22307F;
    --ds-hero-ink: #FFFFFF;
    --ds-hero-muted: rgba(255, 255, 255, .78);
    --ds-hero-tile: rgba(255, 255, 255, .10);
    --ds-hero-new: #5FD0EC;
    --ds-hero-progress: #B7C0FF;
    --ds-hero-pending: #F2B532;
    --ds-hero-overdue: #FF8A84;
    --ds-hero-done: #7FDCA6;
    /* نقش الهوية: نجمة ثمانية من مربعين متراكبين */
    --ds-hero-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='1.1'%3E%3Crect x='17' y='17' width='38' height='38'/%3E%3Crect x='17' y='17' width='38' height='38' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");

    /* الخطوط */
    --ds-font: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    --ds-font-display: 'Cairo', 'Segoe UI', Tahoma, sans-serif;

    /* المقاسات */
    --ds-radius: 12px;
    --ds-radius-sm: 9px;
    --ds-radius-lg: 14px;
    --ds-rail: 96px;
    --ds-topbar: 64px;
    --ds-shadow: 0 1px 2px rgba(21, 30, 92, .05), 0 8px 24px -14px rgba(21, 30, 92, .18);
    color-scheme: light;
}

html[data-theme="dark"] {
    --ds-ground: #0E1330;
    --ds-surface: #161C3E;
    --ds-surface-2: #1E2650;
    --ds-line: #262E5A;
    --ds-line-strong: #343E72;
    --ds-ink: #EAECF7;
    --ds-muted: #A0A7CC;
    --ds-faint: #7D84AA;
    --ds-brand: #8C99FF;
    --ds-brand-hover: #A5AFFF;
    --ds-brand-soft: #232B5C;
    --ds-on-brand: #0E1330;
    --ds-blue: #6FA8E6;
    --ds-cyan: #6FD6F0;
    --ds-coral: #FF8A82;
    --ds-violet: #D59BDA;
    --ds-amber: #F5C55A;
    --ds-green: #5FCB8E;
    --ds-st-new: #4CC9EA;      --ds-st-new-ink: #6FD6F0;      --ds-st-new-bg: #16344A;
    --ds-st-progress: #8C99FF; --ds-st-progress-ink: #AEB8FF; --ds-st-progress-bg: #232B5C;
    --ds-st-pending: #F2B532;  --ds-st-pending-ink: #F5C55A;  --ds-st-pending-bg: #3A3016;
    --ds-st-overdue: #FF6B60;  --ds-st-overdue-ink: #FF9C95;  --ds-st-overdue-bg: #3A2030;
    --ds-st-done: #5FCB8E;     --ds-st-done-ink: #7FDCA6;     --ds-st-done-bg: #173A2C;
    --ds-hero: #1A2358;
    --ds-hero-tile: rgba(255, 255, 255, .07);
    --ds-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -18px rgba(0, 0, 0, .8);
    color-scheme: dark;
}

/* ---------- الأساس ---------- */
/* لا height:100% ولا overflow-x:hidden على body: كلاهما معاً يجعل body حاوية تمرير مستقلة
   فيتعطّل التمرير الطبيعي والعناصر الثابتة على الجوال. clip يمنع التمرير الأفقي دون ذلك. */
body.ds {
    margin: 0;
    font-family: var(--ds-font);
    background: var(--ds-ground);
    color: var(--ds-ink);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
.ds-display { font-family: var(--ds-font-display); }
.ds-num { font-variant-numeric: tabular-nums; }

/* ---------- الغلاف: شريط جانبي + شريط علوي + المحتوى ---------- */
.ds-shell { display: flex; min-height: 100vh; }

.ds-rail {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--ds-rail);
    background: var(--ds-surface);
    border-inline-end: 1.5px solid var(--ds-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 0 16px;
    z-index: 1030;
}
.ds-rail-logo { display: block; width: 72px; margin-bottom: 12px; }
.ds-rail-logo img { width: 100%; height: auto; display: block; }
.ds-rail-spacer { flex: 1; }

.ds-group-btn {
    position: relative;
    width: 76px;
    padding: 9px 0 8px;
    border: 0;
    border-radius: var(--ds-radius);
    background: transparent;
    color: var(--ds-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font: 500 11.5px/1.25 var(--ds-font);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.ds-group-btn i { font-size: 19px; }
.ds-group-btn:hover { background: var(--ds-surface-2); color: var(--ds-ink); }
.ds-group-btn:focus-visible { outline: 2px solid var(--ds-brand); outline-offset: 2px; }
.ds-group-btn.is-active { background: var(--ds-brand-soft); color: var(--ds-brand); font-weight: 600; }
/* لمسة القوس: مؤشر العنصر النشط */
.ds-group-btn.is-active::before {
    content: "";
    position: absolute;
    inset-inline-start: -10px;
    top: 14px;
    width: 5px;
    height: 26px;
    border-start-end-radius: 13px;
    border-end-end-radius: 13px;
    background: var(--ds-brand);
}
.ds-group-btn.is-open { background: var(--ds-surface-2); color: var(--ds-ink); }

/* لوحة روابط المجموعة */
.ds-flyout {
    position: fixed;
    inset-block-start: 12px;
    inset-inline-start: calc(var(--ds-rail) + 10px);
    width: 270px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    background: var(--ds-surface);
    border: 1.5px solid var(--ds-line);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow);
    padding: 10px;
    z-index: 1040;
}
.ds-flyout[hidden] { display: none !important; }
.ds-flyout-title { font: 600 16px var(--ds-font-display); padding: 6px 10px 10px; color: var(--ds-ink); }
.ds-flyout ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-flyout a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--ds-radius-sm);
    color: var(--ds-ink);
    text-decoration: none;
    font-size: 14.5px;
}
.ds-flyout a i { width: 20px; text-align: center; color: var(--ds-muted); }
.ds-flyout a:hover { background: var(--ds-surface-2); color: var(--ds-ink); }
.ds-flyout a.is-current { background: var(--ds-brand-soft); color: var(--ds-brand); font-weight: 600; }
.ds-flyout a.is-current i { color: var(--ds-brand); }
.ds-scrim { position: fixed; inset: 0; background: rgba(14, 19, 48, .35); z-index: 1035; }
.ds-scrim[hidden] { display: none !important; }

.ds-main {
    flex: 1;
    min-width: 0;
    margin-inline-start: var(--ds-rail);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.ds-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: var(--ds-topbar);
    background: color-mix(in srgb, var(--ds-ground) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ds-line);
    display: flex;
    align-items: center;
    gap: 12px;
    padding-inline: clamp(16px, 3vw, 32px);
}
.ds-topbar-title { flex: 1; min-width: 0; font: 600 18px var(--ds-font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-topbar-tools { display: flex; align-items: center; gap: 8px; }
.ds-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: 1.5px solid var(--ds-line);
    background: var(--ds-surface);
    color: var(--ds-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ds-icon-btn:hover { border-color: var(--ds-line-strong); }
.ds-lang { height: 40px; border-radius: 11px; border: 1.5px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-ink);
           font: 500 13.5px var(--ds-font); padding-inline: 10px 28px; width: auto; }
.ds-user { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding-inline: 6px 12px; border-radius: 11px;
           border: 1.5px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-ink); font: 500 13.5px var(--ds-font); }
.ds-user .ds-avatar { width: 28px; height: 28px; border-radius: 9px; background: var(--ds-brand-soft); color: var(--ds-brand);
                      display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.ds-user-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ds-content { flex: 1; padding: clamp(16px, 3vw, 30px); }

.ds-footer { padding: 14px clamp(16px, 3vw, 32px); font-size: 12.5px; color: var(--ds-faint); border-top: 1px solid var(--ds-line); text-align: center; }

/* شريط التنقل السفلي (الجوال) */
.ds-bottomnav { display: none; }

@media (max-width: 991.98px) {
    .ds-rail { display: none; }
    .ds-main { margin-inline-start: 0; }
    .ds-content { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
    .ds-footer { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
    .ds-user-name { display: none; }
    .ds-bottomnav {
        display: flex;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1030;
        background: var(--ds-surface);
        border-top: 1px solid var(--ds-line);
        padding: 0 4px env(safe-area-inset-bottom, 0px);
    }
    .ds-bottomnav .ds-group-btn { flex: 1; width: auto; border-radius: 0; padding: 10px 0 8px; background: transparent; }
    .ds-bottomnav .ds-group-btn.is-active { background: transparent; }
    .ds-bottomnav .ds-group-btn.is-active::before { inset-inline-start: 50%; top: 0; width: 26px; height: 5px; transform: translateX(50%);
        border-radius: 0 0 13px 13px; }
    html[dir="ltr"] .ds-bottomnav .ds-group-btn.is-active::before { transform: translateX(-50%); }
    /* لوحة المجموعة تفتح من الأسفل */
    .ds-flyout {
        inset-inline: 0;
        inset-block-start: auto;
        bottom: 0;
        width: auto;
        max-height: 75vh;
        border-radius: 18px 18px 0 0;
        border-bottom: 0;
        padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

@media print {
    .ds-rail, .ds-topbar, .ds-bottomnav, .ds-flyout, .ds-scrim, .ds-footer { display: none !important; }
    .ds-main { margin: 0 !important; }
}

/* ---------- مكوّنات ---------- */
.ds-card { background: var(--ds-surface); border: 1.5px solid var(--ds-line); border-radius: var(--ds-radius-lg); padding: 18px; }

/* لا يُستخدم اسم progress: يتصادم مع مكوّن Bootstrap بالاسم نفسه. شارة الحالة: خلفية خفيفة + معيّن + نص. ألوان الحالات لهذه الشارة فقط. */
.ds-st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
         line-height: 1.5; white-space: nowrap; color: var(--ds-st-new-ink); background: var(--ds-st-new-bg); }
.ds-st::before { content: ""; width: 7px; height: 7px; border-radius: 1.5px; transform: rotate(45deg); background: var(--ds-st-new); flex: none; }
.ds-st.prog { color: var(--ds-st-progress-ink); background: var(--ds-st-progress-bg); } .ds-st.prog::before { background: var(--ds-st-progress); }
.ds-st.pending { color: var(--ds-st-pending-ink); background: var(--ds-st-pending-bg); }    .ds-st.pending::before { background: var(--ds-st-pending); }
.ds-st.overdue { color: var(--ds-st-overdue-ink); background: var(--ds-st-overdue-bg); }    .ds-st.overdue::before { background: var(--ds-st-overdue); }
.ds-st.done { color: var(--ds-st-done-ink); background: var(--ds-st-done-bg); }             .ds-st.done::before { background: var(--ds-st-done); }
/* علامة بلا خلفية (داخل عنوان أو بطاقة رقم) */
.ds-st.plain { padding: 0; background: transparent; }

/* أيقونة التصنيف: ألوان النجمة لهوية التصنيف فقط. اللون والأيقونة يضعهما Scripts/ds.js من data-cat. */
.ds-cat-ic { --cat: var(--ds-muted); width: 40px; height: 40px; flex: none; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
             background: color-mix(in srgb, var(--cat) 14%, var(--ds-surface)); color: var(--cat); font-size: 16px; }
.ds-cat-ic.sm { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; }

/* أيقونة عنوان القسم */
.ds-sec-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
             background: var(--ds-brand-soft); color: var(--ds-brand); font-size: 14px; }
.ds-sec-ic.done { background: var(--ds-st-done-bg); color: var(--ds-st-done-ink); }

/* الرأس النيلي: المساحة اللونية الكبيرة الوحيدة في الصفحة، بنقش معيّنات من شعار المدارس */
.ds-hero {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background-color: var(--ds-hero);
    background-image: var(--ds-hero-pattern);
    color: var(--ds-hero-ink);
    padding: clamp(18px, 3vw, 26px);
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ds-hero-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ds-hero h1 { margin: 0; font: 600 clamp(22px, 4vw, 30px)/1.25 var(--ds-font-display); color: var(--ds-hero-ink); }
.ds-hero-sub { font-size: 13.5px; color: var(--ds-hero-muted); margin-top: 4px; }
.ds-hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ds-hero-stat { background: var(--ds-hero-tile); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ds-hero-stat .lbl { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ds-hero-muted); }
.ds-hero-stat .lbl::before { content: ""; width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); background: var(--mk, #FFFFFF); flex: none; }
.ds-hero-stat b { font: 700 28px/1.15 var(--ds-font-display); color: var(--ds-hero-ink); font-variant-numeric: tabular-nums; }
.ds-hero-stat.new { --mk: var(--ds-hero-new); }
.ds-hero-stat.prog { --mk: var(--ds-hero-progress); }
.ds-hero-stat.pending { --mk: var(--ds-hero-pending); }
.ds-hero-stat.overdue { --mk: var(--ds-hero-overdue); }
.ds-hero-stat.done { --mk: var(--ds-hero-done); }
.ds-hero-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: var(--ds-radius); background: #FFFFFF;
               color: var(--ds-hero); font-weight: 600; text-decoration: none; }
.ds-hero-btn:hover { background: #EEF0FA; color: var(--ds-hero); }
.ds-hero .ds-hero-meta { font-size: 12.5px; color: var(--ds-hero-muted); }
@media (max-width: 575.98px) {
    .ds-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-hero-btn { width: 100%; justify-content: center; }
}

/* ---------- مواءمة Bootstrap مع الهوية (يشمل الصفحات قبل نقلها) ---------- */
body.ds {
    --bs-primary: #22307F;
    --bs-primary-rgb: 34, 48, 127;
    --bs-link-color: #22307F;
    --bs-link-color-rgb: 34, 48, 127;
    --bs-link-hover-color: #1A2668;
    --bs-body-font-family: var(--ds-font);
}
body.ds .btn-primary {
    --bs-btn-bg: var(--ds-brand);
    --bs-btn-border-color: var(--ds-brand);
    --bs-btn-hover-bg: var(--ds-brand-hover);
    --bs-btn-hover-border-color: var(--ds-brand-hover);
    --bs-btn-active-bg: var(--ds-brand-hover);
    --bs-btn-active-border-color: var(--ds-brand-hover);
    --bs-btn-color: var(--ds-on-brand);
    --bs-btn-hover-color: var(--ds-on-brand);
    background-image: none;
}
body.ds .form-control:focus, body.ds .form-select:focus {
    border-color: var(--ds-brand);
    box-shadow: 0 0 0 .2rem rgba(34, 48, 127, .15);
}

/* شريط المتأخرة والمعلّقة أعلى الصفحات الرئيسية (OverdueDigestService.BuildStripHtml) */
.issue-strip { display: flex; align-items: center; gap: 10px; padding-block: 7px; padding-inline: 14px 8px; margin-bottom: 14px;
               border-radius: var(--ds-radius); background: var(--ds-st-overdue-bg); border: 1.5px solid color-mix(in srgb, var(--ds-st-overdue) 30%, transparent);
               font-size: .9rem; color: var(--ds-ink); }
.issue-strip > i { color: var(--ds-st-overdue); }
.issue-strip > span { white-space: nowrap; }
.issue-strip b.o { color: var(--ds-st-overdue-ink); }
.issue-strip b.p { color: var(--ds-st-pending-ink); }
.issue-strip .sep { color: var(--ds-line-strong); }
.issue-strip a { margin-inline-start: auto; font-size: .82rem; font-weight: 700; padding: 4px 12px; border-radius: var(--ds-radius-sm);
                 background: var(--ds-st-overdue); color: #FFFFFF; text-decoration: none; white-space: nowrap; }
.issue-strip a:hover { filter: brightness(.92); color: #FFFFFF; }

/* ---------- صفحات التقارير والجداول ---------- */
/* زر على الرأس النيلي (إطار أبيض) */
.ds-hero-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--ds-radius);
                 background: transparent; border: 1.5px solid rgba(255, 255, 255, .45); color: #FFFFFF; font-weight: 600; text-decoration: none; }
.ds-hero-ghost:hover, .ds-hero-ghost:focus { background: rgba(255, 255, 255, .12); color: #FFFFFF; border-color: rgba(255, 255, 255, .7); }
.ds-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* بطاقة قسم بعنوان وأيقونة */
.ds-panel { background: var(--ds-surface); border: 1.5px solid var(--ds-line); border-radius: var(--ds-radius-lg); padding: clamp(14px, 2.5vw, 20px); margin-bottom: 16px; }
.ds-panel-title { font: 600 17px var(--ds-font-display); color: var(--ds-ink); display: flex; align-items: center; gap: 9px; margin: 0 0 14px; }
.ds-panel-sub { font: 600 14.5px var(--ds-font); color: var(--ds-ink); margin: 0 0 10px; }
.ds-panel .form-label { font-size: 13px; font-weight: 600; color: var(--ds-ink); }
.ds-panel .form-control, .ds-panel .form-select { min-height: 44px; border: 1.5px solid var(--ds-line); border-radius: var(--ds-radius); }
.ds-panel .btn { min-height: 44px; border-radius: var(--ds-radius); font-weight: 600; }

/* صف الفلاتر */
.ds-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.ds-checks { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 14px; }
.ds-checks .form-check { margin: 0; }
.ds-checks small { display: block; color: var(--ds-faint); font-size: 12px; }

/* أرقام فاتحة خارج الرأس */
.ds-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.ds-kpi { background: var(--ds-surface); border: 1.5px solid var(--ds-line); border-radius: var(--ds-radius); padding: 12px 14px; display: flex; gap: 12px; align-items: center; min-width: 0; }
.ds-kpi .ds-sec-ic { width: 38px; height: 38px; border-radius: 11px; font-size: 15px; }
.ds-kpi small { display: block; color: var(--ds-muted); font-size: 12.5px; }
.ds-kpi b { font: 700 17px/1.4 var(--ds-font-display); color: var(--ds-ink); overflow-wrap: anywhere; }
.ds-sec-ic.pending { background: var(--ds-st-pending-bg); color: var(--ds-st-pending-ink); }
.ds-sec-ic.new { background: var(--ds-st-new-bg); color: var(--ds-st-new-ink); }
.ds-sec-ic.overdue { background: var(--ds-st-overdue-bg); color: var(--ds-st-overdue-ink); }

/* حاوية المخطط */
.ds-chart { position: relative; height: 300px; }
.ds-chart.tall { height: 360px; }

/* جداول البيانات */
.ds-table { overflow-x: auto; }
.ds-table .table { margin: 0; --bs-table-bg: transparent; --bs-table-striped-bg: var(--ds-ground); --bs-table-hover-bg: var(--ds-surface-2); color: var(--ds-ink); }
.ds-table .table th { font-size: 12px; color: var(--ds-muted); font-weight: 600; border-bottom: 1.5px solid var(--ds-line); white-space: nowrap; background: transparent; }
.ds-table .table td { font-size: 14px; vertical-align: middle; border-color: var(--ds-line); }
.ds-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border-radius: 8px;
           background: var(--ds-brand-soft); color: var(--ds-brand); font-weight: 700; font-size: 13px; }

/* الأولوية: نص فقط (الألوان الكاملة للحالات) */
.ds-prio { font-size: 12.5px; color: var(--ds-muted); white-space: nowrap; }
.ds-prio.high { color: var(--ds-st-overdue-ink); font-weight: 600; }

/* مستوى الأداء */
.ds-perf { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ds-perf.good { background: var(--ds-st-done-bg); color: var(--ds-st-done-ink); }
.ds-perf.mid { background: var(--ds-st-pending-bg); color: var(--ds-st-pending-ink); }
.ds-perf.low { background: var(--ds-st-overdue-bg); color: var(--ds-st-overdue-ink); }

@media print {
    .ds-hero { background: #FFFFFF !important; color: #000000 !important; border: 1px solid #999999; }
    .ds-hero h1, .ds-hero .ds-hero-sub, .ds-hero-stat b, .ds-hero-stat .lbl { color: #000000 !important; }
    .ds-hero-actions, .ds-noprint { display: none !important; }
    .ds-panel { break-inside: avoid; }
}

/* ---------- صفحات الإدارة والتعديل (.ds-page) ----------
   أسماء الأصناف القديمة في هذه الصفحات (form-section، info-card، branch-checkbox-item...) تُنسَّق هنا مرة واحدة */
.ds-page { max-width: 1100px; margin: 0 auto; padding: 0; }
.ds-page.wide { max-width: 1300px; }
.ds-page .form-label { font-size: 13px; font-weight: 600; color: var(--ds-ink); }
.ds-page .required-field::after { content: " *"; color: var(--ds-st-overdue); }
.ds-page .form-control, .ds-page .form-select { min-height: 44px; border: 1.5px solid var(--ds-line); border-radius: var(--ds-radius); background-color: var(--ds-surface); }
.ds-page .form-control-sm, .ds-page .form-select-sm { min-height: 36px; }
.ds-page select[multiple].form-control, .ds-page select[size].form-control { min-height: 140px; }
.ds-page textarea.form-control { min-height: 88px; }
.ds-page .input-group-text { border: 1.5px solid var(--ds-line); background: var(--ds-surface-2); color: var(--ds-muted); }
.ds-page .btn { min-height: 44px; border-radius: var(--ds-radius); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ds-page .btn-sm, .ds-page .btn-action { min-height: 34px; padding: 0 10px; font-size: 12.5px; border-radius: var(--ds-radius-sm); margin: 2px; }
.ds-page .text-danger { color: var(--ds-st-overdue-ink) !important; }

/* الحاويات والأقسام */
.ds-page .edit-user-container, .ds-page .edit-technician-container, .ds-page .levels-container, .ds-page .manage-container,
.ds-page .categories-container, .ds-page .dashboard-card {
    background: var(--ds-surface); border: 1.5px solid var(--ds-line); border-radius: var(--ds-radius-lg); padding: clamp(14px, 2.5vw, 22px); margin-bottom: 16px; box-shadow: none;
}
.ds-page .form-section { background: var(--ds-ground); border: 1.5px solid var(--ds-line); border-radius: var(--ds-radius); padding: 16px; margin-bottom: 16px; box-shadow: none; }
.ds-page .form-section-title, .ds-page .section-title, .ds-page .form-section > h5 {
    font: 600 16px var(--ds-font-display); color: var(--ds-ink); display: flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 0; border: 0;
}
.ds-page .form-section-title > i, .ds-page .section-title > i, .ds-page .form-section > h5 > i {
    width: 30px; height: 30px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--ds-brand-soft); color: var(--ds-brand); font-size: 13px; margin: 0 !important;
}
.ds-page .field-info { font-size: 12.5px; color: var(--ds-muted); margin-top: 4px; }
.ds-page .password-section { background: var(--ds-st-pending-bg); border: 1.5px solid color-mix(in srgb, var(--ds-st-pending) 35%, transparent); border-radius: var(--ds-radius); padding: 14px; }
.ds-page .password-section h6 { color: var(--ds-st-pending-ink); font-weight: 700; }
.ds-page .validation-summary, .ds-page .validation-error { background: var(--ds-st-overdue-bg); color: var(--ds-st-overdue-ink); border-radius: var(--ds-radius); padding: 10px 14px; font-size: 13.5px; }
.ds-page .validation-summary ul { margin: 0; padding-inline-start: 18px; }
.ds-page .action-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; padding-top: 16px; margin-top: 8px; border-top: 1.5px solid var(--ds-line); }
.ds-page .action-buttons .btn { min-width: 140px; }

/* شارة نوع الحساب */
.ds-page .info-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
                       background: var(--ds-brand-soft); color: var(--ds-brand); margin-bottom: 6px; }
.ds-page .info-badge.user-type-admin { background: var(--ds-brand); color: var(--ds-on-brand); }

/* بطاقة معلومات (مدير، فني، فرع) */
.ds-page .manager-info-card, .ds-page .technician-info-card, .ds-page .branch-info-card, .ds-page .technician-info {
    background: var(--ds-brand-soft); border: 0; border-radius: var(--ds-radius); padding: 14px 16px; margin-bottom: 16px; color: var(--ds-ink); box-shadow: none;
}
.ds-page .branch-info-card h4, .ds-page .branch-info-card .h4 { font: 600 17px var(--ds-font-display); color: var(--ds-brand); margin: 0; }
.ds-page .info-label { font-size: 12.5px; color: var(--ds-muted); display: flex; align-items: center; gap: 6px; }
.ds-page .info-value { font-weight: 600; font-size: 15px; color: var(--ds-ink); margin-top: 2px; overflow-wrap: anywhere; }

/* اختيار فروع/تصنيفات بمربعات */
.ds-page .branch-selection-container, .ds-page .categories-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: 460px;
                                                                 overflow-y: auto; padding: 4px; }
/* CheckBoxList يلفّ العناصر بعنصر واحد: يُذاب ليصبح كل مربع خلية في الشبكة */
.ds-page .categories-list > span[id], .ds-page .branch-selection-container > span[id] { display: contents; }
.ds-page .categories-list br, .ds-page .branch-selection-container br { display: none; }
.ds-page .branch-checkbox-item, .ds-page .category-checkbox { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0; border: 1.5px solid var(--ds-line);
                                                              border-radius: var(--ds-radius); background: var(--ds-surface); cursor: pointer; }
.ds-page .branch-checkbox-item:hover, .ds-page .category-checkbox:hover { border-color: var(--ds-line-strong); }
.ds-page .branch-checkbox-item.selected, .ds-page .category-checkbox:has(input:checked) { border-color: var(--ds-brand); background: var(--ds-brand-soft); }
.ds-page .branch-checkbox-item input[type="checkbox"], .ds-page .category-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ds-brand); margin: 0; flex: none; }
.ds-page .category-checkbox label { margin: 0; cursor: pointer; font-weight: 500; }
.ds-page .category-icon { color: var(--ds-brand); }
.ds-page .branch-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ds-page .branch-type-badge { display: inline-flex; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--ds-surface-2); color: var(--ds-muted); }
.ds-page .branch-type-boys { color: var(--ds-blue); }
.ds-page .branch-type-girls { color: var(--ds-violet); }
.ds-page .branch-type-mixed { color: var(--ds-green); }
.ds-page .category-card { background: var(--ds-surface); border: 1.5px solid var(--ds-line); border-radius: var(--ds-radius); padding: 10px 12px; margin-bottom: 8px; box-shadow: none; }

/* الجداول */
.ds-page .levels-table, .ds-page .locations-table, .ds-page .table-responsive { background: var(--ds-surface); border: 1.5px solid var(--ds-line); border-radius: var(--ds-radius); overflow-x: auto; box-shadow: none; }
.ds-page .table { margin: 0; --bs-table-bg: transparent; --bs-table-striped-bg: var(--ds-ground); --bs-table-hover-bg: var(--ds-ground); color: var(--ds-ink); }
.ds-page .table th, .ds-page .table thead th { font-size: 12px; color: var(--ds-muted); font-weight: 600; border-bottom: 1.5px solid var(--ds-line); white-space: nowrap; background: transparent !important; padding: 10px; }
.ds-page .table td { font-size: 14px; vertical-align: middle; border-color: var(--ds-line); padding: 10px; }
.ds-page .status-active, .ds-page .status-inactive { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ds-page .status-active { background: var(--ds-st-done-bg); color: var(--ds-st-done-ink); }
.ds-page .status-inactive { background: var(--ds-surface-2); color: var(--ds-muted); }
.ds-page .table .badge { font-weight: 600; font-size: 12px; border-radius: 999px; padding: 4px 10px; }
.ds-page .edit-controls { display: flex; flex-wrap: wrap; gap: 4px; }
.ds-page .pagination .page-link { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; margin: 0 2px;
                                  border: 1.5px solid var(--ds-line); border-radius: var(--ds-radius-sm) !important; color: var(--ds-ink); }
.ds-page .pagination .active .page-link { background: var(--ds-brand); border-color: var(--ds-brand); color: var(--ds-on-brand); }

/* حالات فارغة ورسائل */
.ds-page .empty-state, .ds-page .no-branches-message { text-align: center; padding: 36px 12px; color: var(--ds-faint); }
.ds-page .empty-state i, .ds-page .no-branches-message i { font-size: 2.2rem; color: var(--ds-line-strong); display: block; margin-bottom: 8px; }
.ds-page .upload-info { background: var(--ds-ground); border: 1.5px dashed var(--ds-line-strong); border-radius: var(--ds-radius); padding: 12px 14px; font-size: 13px; color: var(--ds-muted); }
.ds-page .upload-info code { background: var(--ds-surface-2); color: var(--ds-brand); padding: 1px 6px; border-radius: 6px; }
.ds-page .alert { border-radius: var(--ds-radius); border: 0; }

/* ---------- صفحات التقييم (.ds-eval): رؤوسها بهيئة الرأس النيلي، وبطاقاتها بحدّ رفيع ---------- */
.ds-eval { max-width: 1200px; margin: 0 auto; padding-inline: 0; }
body.ds .ds-eval .page-header, body.ds .ds-eval .evaluation-header, body.ds .ds-eval .page-header-card {
    background-color: var(--ds-hero); background-image: var(--ds-hero-pattern); color: #FFFFFF; border-radius: 18px; box-shadow: none; border: 0;
    padding: clamp(18px, 3vw, 26px); margin-bottom: 18px;
}
body.ds .ds-eval .page-header h2, body.ds .ds-eval .evaluation-header h2, body.ds .ds-eval .page-header-card h2 {
    font: 600 clamp(22px, 4vw, 30px)/1.3 var(--ds-font-display); color: #FFFFFF; margin: 0;
}
body.ds .ds-eval .page-header h2 > i, body.ds .ds-eval .evaluation-header h2 > i, body.ds .ds-eval .page-header-card h2 > i { display: none; }
body.ds .ds-eval .page-header p, body.ds .ds-eval .page-header-card p { color: var(--ds-hero-muted); margin: 4px 0 0; opacity: 1; }
body.ds .ds-eval .stats-card { background-color: var(--ds-hero); background-image: var(--ds-hero-pattern); color: #FFFFFF; border-radius: var(--ds-radius-lg); box-shadow: none; }
body.ds .ds-eval .period-section, body.ds .ds-eval .questions-container, body.ds .ds-eval .periods-container, body.ds .ds-eval .info-card,
body.ds .ds-eval .evaluation-card, body.ds .ds-eval .summary-card, body.ds .ds-eval .empty-state, body.ds .ds-eval .no-period-card,
body.ds .ds-eval .already-evaluated, body.ds .ds-eval .card, body.ds .ds-eval .stat-card:not(.primary):not(.success):not(.info) {
    border: 1.5px solid var(--ds-line); box-shadow: none; border-radius: var(--ds-radius-lg);
}
body.ds .ds-eval .question-item, body.ds .ds-eval .technician-select-card, body.ds .ds-eval .form-section { border: 1.5px solid var(--ds-line); box-shadow: none; }
/* بطاقات الأرقام: فاتحة، واللون للرقم وحده (الرأس هو المساحة الملوّنة الوحيدة) */
body.ds .ds-eval .stat-card.primary, body.ds .ds-eval .stat-card.success, body.ds .ds-eval .stat-card.info {
    background: var(--ds-surface); color: var(--ds-ink); border: 1.5px solid var(--ds-line); box-shadow: none; border-radius: var(--ds-radius-lg); }
body.ds .ds-eval .stat-card .stat-label { color: var(--ds-muted); opacity: 1; }
body.ds .ds-eval .stat-card.primary .stat-number { color: var(--ds-brand); }
body.ds .ds-eval .stat-card.success .stat-number { color: var(--ds-st-done-ink); }
body.ds .ds-eval .stat-card.info .stat-number { color: var(--ds-st-new-ink); }
body.ds .ds-eval .card-header { background: var(--ds-ground) !important; border-bottom: 1.5px solid var(--ds-line); }
body.ds .ds-eval .form-control, body.ds .ds-eval .form-select { min-height: 44px; border: 1.5px solid var(--ds-line); border-radius: var(--ds-radius); }
body.ds .ds-eval .btn { border-radius: var(--ds-radius); font-weight: 600; }
body.ds .ds-eval .table th { font-size: 12px; color: var(--ds-muted); font-weight: 600; background: transparent; border-bottom: 1.5px solid var(--ds-line); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}