/* ══════════════════════════════════════════════════════════════════════
   IBM Plex Sans Arabic — مستضاف محليًا (بلا اعتماد على Google Fonts)
   ══════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-500-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-600-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/IBMPlexSansArabic-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ══════════════════════════════════════════════════════════════════════
   نظام إشراف — الإدارة العامة للإشراف بأمانة المنطقة الشرقية
   مبني على «كود المنصات» — هيئة الحكومة الرقمية
   design.dga.gov.sa/guidelines/foundations
   السمة الفاتحة أساسية، والداكنة ثانوية عبر [data-theme="dark"]
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────────── رموز التصميم ─────────────── */
:root {
    /* الألوان الأساسية (SA) */
    --sa-25: #F7FDF9;  --sa-50: #F3FCF6;  --sa-100: #DFF6E7; --sa-200: #B8EACB;
    --sa-300: #88D8AD; --sa-400: #54C08A; --sa-500: #25935F; --sa-600: #1B8354;
    --sa-700: #166A45; --sa-800: #14573A; --sa-900: #104631; --sa-950: #092A1E;

    /* الألوان المحايدة */
    --gray-25: #FCFCFD;  --gray-50: #F9FAFB;  --gray-100: #F3F4F6; --gray-200: #E5E7EB;
    --gray-300: #D2D6DB; --gray-400: #9DA4AE; --gray-500: #6C737F; --gray-600: #4D5761;
    --gray-700: #384250; --gray-800: #1F2A37; --gray-900: #111927; --gray-950: #0D121C;

    /* الألوان الثانوية */
    --gold-100: #FFFCE6; --gold-200: #FCF3BD; --gold-400: #F7D54D;
    --gold-500: #F5BD02; --gold-600: #DBA102; --gold-700: #B87B02;
    --lav-100: #F2E9F5;  --lav-500: #80519F;  --lav-600: #6D428F;

    /* الألوان الدلالية */
    --success-100: #DCFAE6; --success-500: #17B26A; --success-600: #079455; --success-700: #067647;
    --warning-100: #FEF0C7; --warning-500: #F79009; --warning-600: #DC6803; --warning-700: #B54708;
    --error-100: #FEE4E2;   --error-400: #F97066;   --error-500: #F04438;   --error-600: #D92D20;   --error-700: #B42318;
    --info-100: #D1E9FF;    --info-400: #53B1FD;    --info-500: #2E90FA;    --info-600: #1570EF;    --info-700: #175CD3;

    /* الفواصل */
    --sp-xxs: 2px;  --sp-xs: 4px;   --sp-sm: 6px;   --sp-md: 8px;   --sp-lg: 12px;
    --sp-xl: 16px;  --sp-2xl: 20px; --sp-3xl: 24px; --sp-4xl: 32px; --sp-5xl: 40px;
    --sp-6xl: 48px; --sp-7xl: 64px; --sp-8xl: 80px; --sp-9xl: 96px;

    /* نصف القطر */
    --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px;

    /* الظلال (lon 101828) */
    --shadow-xs: 0 1px 2px 0 rgba(16,24,40,.05);
    --shadow-sm: 0 1px 3px 0 rgba(16,24,40,.10), 0 1px 2px 0 rgba(16,24,40,.06);
    --shadow-md: 0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06);
    --shadow-lg: 0 12px 16px -6px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03);
    --shadow-xl: 0 20px 24px -4px rgba(16,24,40,.08), 0 8px 8px -4px rgba(16,24,40,.03);

    /* مقياس الطباعة */
    --display-lg: 48px; --display-lg-lh: 60px;
    --display-md: 36px; --display-md-lh: 44px;
    --display-sm: 30px; --display-sm-lh: 38px;
    --display-xs: 24px; --display-xs-lh: 32px;
    --text-xl: 20px;    --text-xl-lh: 30px;
    --text-lg: 18px;    --text-lg-lh: 28px;
    --text-md: 16px;    --text-md-lh: 24px;
    --text-sm: 14px;    --text-sm-lh: 20px;
    --text-xs: 12px;    --text-xs-lh: 18px;
    --text-2xs: 10px;   --text-2xs-lh: 14px;

    /* قياسات القشرة */
    --header-height: 68px;
    --nav-width: 268px;
    --nav-width-min: 76px;
    --z-fixed: 100;
    --normal-font-size: var(--text-sm);
}

/* ─────────────── السمة الفاتحة (الأساسية) ─────────────── */
:root, [data-theme="light"] {
    --bg: var(--gray-50);
    --surface: #FFFFFF;
    --surface-alt: var(--gray-50);
    --surface-sunken: var(--gray-100);
    --border: var(--gray-200);
    --border-strong: var(--gray-300);

    --text: var(--gray-950);
    --text-2: var(--gray-700);
    --text-3: var(--gray-600);

    --brand: var(--sa-600);
    --brand-hover: var(--sa-700);
    --brand-text: var(--sa-700);
    --brand-soft: var(--sa-50);
    --brand-soft-2: var(--sa-100);
    --brand-soft-border: var(--sa-200);
    --on-brand: #FFFFFF;

    --chip-bg: var(--sa-50);
    --chip-fg: var(--sa-700);
    --chip-bd: var(--sa-200);

    --field-bg: #FFFFFF;
    --track: var(--gray-100);
    --bg-alt: var(--gray-50);
    --hero-pattern: var(--sa-200);
    --hero-pattern-opacity: .30;

    --gold-fg: var(--gold-700);       --gold-bg: var(--gold-100);       --gold-bd: var(--gold-200);
    --error-fg: var(--error-700);     --error-bg: var(--error-100);     --error-bd: var(--error-100);
    --success-fg: var(--success-700); --success-bg: var(--success-100); --success-bd: var(--success-100);
    --info-fg: var(--info-700);       --info-bg: var(--info-100);       --info-bd: var(--info-100);

    /* توافق مع الأسماء القديمة المستخدمة داخل الصفحات */
    --first-color: var(--sa-800);
    --first-color-light: var(--sa-600);
    --frist-color-light2: var(--sa-700);
    --white-color: var(--gray-50);
}

/* ─────────────── السمة الداكنة (الثانوية) ─────────────── */
[data-theme="dark"] {
    --bg: var(--gray-950);
    --surface: var(--gray-900);
    --surface-alt: var(--gray-800);
    --surface-sunken: #0A0F17;
    --border: var(--gray-800);
    --border-strong: var(--gray-700);

    --text: #FFFFFF;
    --text-2: rgba(255,255,255,.72);
    --text-3: rgba(255,255,255,.60);

    --brand: var(--sa-500);
    --brand-hover: var(--sa-600);
    --brand-text: var(--sa-400);
    --brand-soft: rgba(84,192,138,.10);
    --brand-soft-2: rgba(84,192,138,.16);
    --brand-soft-border: rgba(84,192,138,.26);
    --on-brand: #FFFFFF;

    --chip-bg: rgba(84,192,138,.12);
    --chip-fg: var(--sa-400);
    --chip-bd: rgba(84,192,138,.28);

    --field-bg: var(--gray-950);
    --track: var(--gray-800);
    --bg-alt: #0A0F17;
    --hero-pattern: var(--sa-700);
    --hero-pattern-opacity: .45;

    --gold-fg: var(--gold-500);       --gold-bg: rgba(245,189,2,.12);    --gold-bd: rgba(245,189,2,.28);
    --error-fg: var(--error-400);     --error-bg: rgba(249,112,102,.12); --error-bd: rgba(249,112,102,.28);
    --success-fg: var(--success-500); --success-bg: rgba(23,178,106,.12);--success-bd: rgba(23,178,106,.28);
    --info-fg: var(--info-400);       --info-bg: rgba(83,177,253,.12);   --info-bd: rgba(83,177,253,.28);

    --first-color: var(--sa-500);
    --first-color-light: var(--sa-400);
    --frist-color-light2: var(--sa-600);
    --white-color: var(--gray-900);

    --shadow-xs: 0 1px 2px 0 rgba(0,0,0,.40);
    --shadow-sm: 0 1px 3px 0 rgba(0,0,0,.45), 0 1px 2px 0 rgba(0,0,0,.30);
    --shadow-md: 0 4px 8px -2px rgba(0,0,0,.50), 0 2px 4px -2px rgba(0,0,0,.32);
    --shadow-lg: 0 12px 16px -6px rgba(0,0,0,.50), 0 4px 6px -2px rgba(0,0,0,.28);
    --shadow-xl: 0 20px 24px -4px rgba(0,0,0,.55), 0 8px 8px -4px rgba(0,0,0,.30);
}

/* ─────────────── الخطوط ─────────────── */
@font-face { font-family: wt;  src: url('../fonts/wt_ar.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: wt2; src: url('../fonts/wt_en.otf') format('opentype'); font-display: swap; }

*, ::before, ::after { box-sizing: border-box; }
* { margin: 0; padding: 0; outline: 0; }

html, body {
    font-family: 'IBM Plex Sans Arabic', wt, wt2, 'Segoe UI', Tahoma, sans-serif;
    font-size: var(--text-md);
    line-height: var(--text-md-lh);
    color: var(--text);
}
body { background: var(--bg); transition: background-color .25s ease, color .25s ease; }

ul, ol { list-style: none; }
a { color: var(--brand-text); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--brand-hover); text-decoration: none; }
h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 700; letter-spacing: -.02em; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-sunken); }
::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: var(--r-full); border: 3px solid var(--surface-sunken); }

/* ══ القشرة القديمة أُزيلت — استُبدلت بقشرة demo2-dga أدناه ══ */

/* ══════════════ العناصر المشتركة ══════════════ */
.SideTitile {
    display: inline-block;
    border-radius: var(--r-md);
    padding: var(--sp-md) var(--sp-3xl);
    font-size: var(--display-xs);
    line-height: var(--display-xs-lh);
    font-weight: 700;
    color: #FFFFFF;
    background: var(--sa-900);
}

.icon { color: var(--text-3); padding: var(--sp-md); min-width: 40px; font-size: var(--text-xl); }
.input-icons { width: 100%; margin-bottom: var(--sp-lg); }
.input-icons i { z-index: 1; position: absolute; }
.input-button { position: absolute; float: left; }

.txt-primary-color { color: var(--brand-text); }
.bg-primary-color {
    width: 100%;
    max-width: 720px;
    padding: var(--sp-4xl);
    color: #FFFFFF;
    position: relative;
    border-radius: var(--r-lg);
    margin: 0 auto;
    background-color: var(--sa-800);
}

.bgFirst { color: #FFFFFF; background-color: var(--sa-800); }
.bgFirstLight { color: #FFFFFF; background-color: var(--sa-600); }
.cusTxt { color: var(--brand-text) !important; }
.cusTxt:hover { color: var(--brand-hover) !important; }

.custBtn {
    color: var(--on-brand);
    background-color: var(--brand);
    border: 1px solid var(--brand);
    border-radius: var(--r-md);
    font-weight: 600;
}
.custBtn:hover { color: var(--on-brand); background-color: var(--brand-hover); border-color: var(--brand-hover); }

.dropdown { cursor: pointer; }
.dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-md);
    font-size: var(--text-sm);
}
.dropdown-item { color: var(--text-2); border-radius: var(--r-sm); padding: var(--sp-md) var(--sp-lg); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--brand-soft); color: var(--brand-text); }

.height-100 { height: 100vh; }
.iconColor { padding: var(--sp-sm); border-radius: var(--r-full); background-color: var(--brand); color: #FFFFFF; }
.addIcon { font-size: var(--text-xl); }
.imgCover {
    width: 320px; height: 320px;
    object-fit: cover;
    background-color: var(--surface);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
}

/* ── الأزرار ── */
.btn-primary {
    border: 1px solid var(--brand);
    background-color: var(--brand);
    color: var(--on-brand);
    border-radius: var(--r-md);
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
    color: var(--on-brand);
}
.btn-light { background-color: var(--surface-alt); border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--r-md); }
.btn-light:hover { background-color: var(--surface-sunken); color: var(--text); }
.btn-sm { font-size: var(--text-xs) !important; padding: var(--sp-sm) var(--sp-lg) !important; border-radius: var(--r-sm) !important; }

.bigBtn {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    transition: all .2s ease;
}
.bigBtn:hover { background-color: var(--surface); border-color: var(--brand-soft-border); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btnIcon { width: 64px; height: 64px; object-fit: contain; }
.bigBtnLink {
    width: 100%;
    color: var(--on-brand);
    margin: var(--sp-xs) 0;
    padding: var(--sp-lg) var(--sp-2xl);
    border: 1px solid var(--brand);
    text-align: center;
    border-radius: var(--r-md);
    display: inline-block;
    font-weight: 600;
    font-size: var(--text-sm);
    background-color: var(--brand);
}
.bigBtnLink:hover { color: var(--on-brand); background-color: var(--brand-hover); border-color: var(--brand-hover); }

/* ── البطاقات والجداول ── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    color: var(--text);
}
.card-header, .card-footer { background: var(--surface-alt); border-color: var(--border); }
card-title, h5 { font-size: var(--text-lg); }
.proj_sum { border-radius: var(--r-lg); }

table.dataTable, .table {
    color: var(--text-2);
    border-color: var(--border);
    font-size: var(--text-sm);
}
table.dataTable thead th, .table thead th {
    background: var(--surface-alt);
    color: var(--text-2);
    font-size: var(--text-xs);
    font-weight: 700;
    border-bottom: 1px solid var(--border) !important;
}
table.dataTable tbody td, .table tbody td { border-color: var(--border); }
table.dataTable tbody tr:hover td { background: var(--surface-alt); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--field-bg);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    padding: var(--sp-sm) var(--sp-lg);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--r-md) !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text-2) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: var(--on-brand) !important;
}

/* ── الحقول ── */
.form-control, .form-select, input.form-control, textarea.form-control {
    background: var(--field-bg);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-size: var(--text-sm);
}
.form-control:focus, .form-select:focus {
    background: var(--field-bg);
    color: var(--text);
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft-2);
}
.form-label, label { color: var(--text); font-size: var(--text-sm); font-weight: 600; }

.select2 {
    display: block !important;
    width: 100% !important;
    height: calc(1.5em + .75rem + 2px) !important;
    padding: var(--sp-xs) var(--sp-md) !important;
    font-size: var(--text-sm) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--text) !important;
    background-color: var(--field-bg) !important;
    background-clip: padding-box !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--r-md) !important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
}
.select2-container--default .select2-selection--single { border: none !important; background: transparent !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text) !important; }
.select2-dropdown { background: var(--surface); border-color: var(--border); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--brand); color: var(--on-brand); }

/* ── صفحة الدخول ── */
.login-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--sp-6xl) var(--sp-xl);
    background:
        radial-gradient(120% 90% at 80% 0%, var(--sa-100) 0%, transparent 55%),
        linear-gradient(180deg, var(--sa-25), var(--bg));
    overflow: hidden;
}
[data-theme="dark"] .login-page {
    background:
        radial-gradient(120% 90% at 80% 0%, rgba(27,131,84,.20) 0%, transparent 55%),
        linear-gradient(180deg, #0A1A13, var(--gray-950));
}
.login-page:before { content: none; }
.login-page video {
    position: absolute;
    top: 0; right: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .10;
    z-index: 0;
}
.login-left { clip-path: none; position: relative; z-index: 1; }
.login-right { opacity: 1; position: relative; z-index: 1; }
.login-icon {
    position: relative;
    top: auto; right: auto;
    display: grid; place-items: center;
    width: 56px; height: 56px;
    margin: 0 auto var(--sp-2xl);
    font-size: var(--text-xl);
    color: var(--on-brand);
    border-radius: var(--r-full);
    background: var(--brand);
    background-image: none;
}
#login-panel {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0 auto;
    width: min(420px, 100%);
    padding: var(--sp-6xl) var(--sp-4xl);
    border-radius: var(--r-xl);
    background: var(--surface);
    background-image: none;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
}

/* ── المهام ── */
.tasks {
    font-size: var(--text-md);
    color: var(--text);
    padding: var(--sp-2xl);
    margin: 0 var(--sp-md);
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}
.tasks .card {
    color: var(--text);
    margin-top: var(--sp-lg);
    border-radius: var(--r-md);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    box-shadow: none;
}
.tasks .card .person {
    color: var(--brand-text);
    padding: 2px var(--sp-lg);
    background-color: var(--brand-soft);
    border: 1px solid var(--brand-soft-border);
    border-radius: var(--r-full);
    font-size: var(--text-xs);
    font-weight: 600;
}
.tasks a { color: var(--brand-text); }
.tasks a:hover { color: var(--brand-hover); }

/* ── الصفحة الرئيسية الداخلية ── */
.navbar { background-image: none; background-color: var(--surface); }
.home_logo { top: 0; border-radius: var(--r-lg); background-image: none; background-color: var(--surface); }
.home_slides {
    position: relative;
    width: 100%;
    height: 320px;
    opacity: 1;
    background-color: var(--sa-900);
    z-index: 0;
    clip-path: none;
    border-radius: var(--r-xl);
    overflow: hidden;
}
.home_video { position: absolute; width: 100%; height: 100%; top: 0; right: 0; object-fit: cover; opacity: .35; }
.home_slides ul { position: absolute; bottom: 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-lg); padding: var(--sp-2xl); }
.home_slides ul li {
    width: 13.5rem;
    text-align: center;
    padding: var(--sp-2xl) var(--sp-xl);
    border-radius: var(--r-lg);
    background-image: none;
    background-color: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.home_slides ul li i {
    position: static;
    display: grid; place-items: center;
    width: 44px; height: 44px;
    margin: 0 auto var(--sp-lg);
    padding: 0;
    color: var(--chip-fg);
    border-radius: var(--r-full);
    background-image: none;
    background-color: var(--chip-bg);
    border: 1px solid var(--chip-bd);
}
.home_slides ul li span { display: block; font-size: var(--text-sm); color: var(--text); font-weight: 600; }

/* ── التذييل ── */
footer {
    padding-top: var(--sp-5xl);
    color: rgba(255,255,255,.75);
    margin-top: var(--sp-6xl);
    clip-path: none;
    background-image: none;
    background-color: var(--sa-900);
}
footer a { color: rgba(255,255,255,.75); }
footer a:hover { color: #FFFFFF; }
.footer_title {
    padding: 0 0 var(--sp-lg);
    margin-bottom: var(--sp-2xl);
    color: #FFFFFF;
    font-size: var(--text-sm);
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.14);
    border-radius: 0;
}
.footer_links { font-size: var(--text-sm); }
.socialinks a {
    display: inline-grid; place-items: center;
    vertical-align: middle;
    color: #FFFFFF;
    background-color: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    width: 40px; height: 40px;
    padding: 0;
    border-radius: var(--r-full);
}
.socialinks a:hover { color: #FFFFFF; background-color: rgba(255,255,255,.20); }
.copyright {
    padding: var(--sp-lg);
    font-size: var(--text-xs);
    text-align: center;
    color: rgba(255,255,255,.65);
    background-color: var(--sa-950);
    clip-path: none;
}

/* ── الرسائل ── */
.messages { width: 100%; position: relative; margin: 0 auto; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.message { padding: var(--sp-3xl); border-bottom: 1px solid var(--border); }
.message:last-child { border-bottom: 0; }

/* ── روابط الصفحات ── */
.links_pages_title {
    font-size: var(--display-md);
    line-height: var(--display-md-lh);
    padding: var(--sp-6xl) 0 var(--sp-4xl);
    text-align: center;
    color: var(--text);
}
.links_pages {
    width: 180px;
    padding: var(--sp-3xl) var(--sp-xl);
    position: relative;
    margin: 0 auto;
    border-radius: var(--r-lg);
    color: #FFFFFF;
    background-color: var(--sa-800);
    transition: all .2s ease;
}
.links_pages:hover { background-color: var(--sa-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.links_pages_text { font-size: var(--text-md); text-align: center; color: #FFFFFF; }

/* ── المشاريع ── */
.projects_list {
    color: #FFFFFF;
    padding: var(--sp-xl) var(--sp-2xl);
    margin: var(--sp-xl) 0;
    font-size: var(--text-sm);
    border-radius: var(--r-lg);
    background-color: var(--sa-800);
    transition: all .2s ease;
}
.projects_list:hover { background-color: var(--sa-700); }
.project_link { font-size: var(--text-md); position: relative; margin: 0 auto; }
.project_link a { color: var(--text-2); }
.project_link a:hover { color: var(--brand-text); }
.project_link_border { border-right: 2px solid var(--border); }
.project_bg_img { border-radius: var(--r-xl); }
.project_sg_img { border-radius: var(--r-xl); }
.project_header { padding-right: 0; }
.project_info { font-size: var(--text-sm); position: relative; margin: var(--sp-4xl) auto 0; }
.project_info span { color: var(--text-3); display: block; font-size: var(--text-xs); }

/* ── التوافق: .active و .show كانتا عامّتين وتؤثران على مكوّنات Bootstrap ── */
.nav-link.active { color: var(--on-brand) !important; background-color: var(--brand) !important; border-radius: var(--r-md); }
.nav-link.active i { color: var(--on-brand) !important; }

/* ── شارات الحالة ── */
.pill { display: inline-flex; align-items: center; gap: var(--sp-sm); padding: 2px var(--sp-lg); border-radius: var(--r-full); font-size: var(--text-xs); font-weight: 600; border: 1px solid transparent; }
.pill--ok { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-bd); }
.pill--warn { background: var(--gold-bg); color: var(--gold-fg); border-color: var(--gold-bd); }
.pill--err { background: var(--error-bg); color: var(--error-fg); border-color: var(--error-bd); }
.pill--info { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-bd); }
.pill--muted { background: var(--surface-alt); color: var(--text-2); border-color: var(--border); }

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

/* ── زر السمة في الترويسة ── */
[data-theme="light"] #themeToggle .icon-sun,
[data-theme="dark"]  #themeToggle .icon-moon,
[data-theme="light"] .icon-sun,
[data-theme="dark"]  .icon-moon { display: none; }

/* ── أيقونات القائمة الجانبية: تُلوَّن حسب السمة ── */
.snav a img { filter: brightness(0) opacity(.62); transition: filter .2s ease; }
.snav a:hover img,
.snav a.is-active img {
    filter: brightness(0) saturate(100%) invert(30%) sepia(45%) saturate(900%) hue-rotate(110deg) brightness(92%) contrast(95%);
}
[data-theme="dark"] .snav a img { filter: brightness(0) invert(1) opacity(.72); }
[data-theme="dark"] .snav a:hover img,
[data-theme="dark"] .snav a.is-active img {
    filter: brightness(0) saturate(100%) invert(75%) sepia(30%) saturate(500%) hue-rotate(96deg) brightness(96%) contrast(88%);
}
.sidebar__brand img { filter: none; }
[data-theme="light"] .brand__logo--dark,
[data-theme="dark"]  .brand__logo--light { display: none; }

/* شعار الترويسة داكن الأصل: يُقلب في السمة الداكنة ليبقى مقروءًا */
[data-theme="dark"] .header_logo { filter: brightness(0) invert(1); }

/* ══════════════════════════════════════════════════════════════
   مكوّنات شاشات النظام (لوحة التحكم · المشاريع · المهام)
   ══════════════════════════════════════════════════════════════ */

/* ترويسة الشاشة */
.pagehead { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--sp-2xl); margin-bottom:var(--sp-5xl); }
.pagehead h1, .pagehead h2 { font-size:var(--display-xs); line-height:var(--display-xs-lh); margin-bottom:var(--sp-xs); }
.pagehead p { font-size:var(--text-sm); color:var(--text-3); margin:0; }

/* بطاقات الإحصاء */
.stats { display:grid; gap:var(--sp-2xl); grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.stat-tile {
    display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
    box-shadow:var(--shadow-xs); padding:var(--sp-3xl); position:relative; overflow:hidden;
    color:var(--text); transition:all .2s ease;
}
.stat-tile:hover { box-shadow:var(--shadow-md); border-color:var(--border-strong); transform:translateY(-2px); color:var(--text); }
.stat-tile::before { content:''; position:absolute; inset-block:0; inset-inline-end:0; width:4px; background:var(--tone,var(--brand)); }
.stat-tile__num { font-size:var(--display-sm); line-height:var(--display-sm-lh); font-weight:700; color:var(--tone,var(--text)); font-variant-numeric:tabular-nums; }
.stat-tile__lbl { font-size:var(--text-sm); font-weight:600; color:var(--text); }
.stat-tile__ico { position:absolute; inset-block-start:var(--sp-3xl); inset-inline-start:var(--sp-3xl); font-size:22px; color:var(--tone,var(--brand)); opacity:.28; }

/* الألواح */
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-xs); }
.panel__head { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-xl); padding:var(--sp-3xl); border-bottom:1px solid var(--border); }
.panel__head h3 { font-size:var(--text-lg); line-height:var(--text-lg-lh); font-weight:700; margin:0 0 0 auto; display:flex; align-items:center; gap:var(--sp-lg); }
.panel__body { padding:var(--sp-3xl); }
.panel__foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-xl); padding:var(--sp-2xl) var(--sp-3xl); border-top:1px solid var(--border); font-size:var(--text-sm); color:var(--text-3); }

/* حاوية أيقونة */
.icon-chip {
    width:44px; height:44px; border-radius:var(--r-full);
    background:var(--chip-bg); color:var(--chip-fg); border:1px solid var(--chip-bd);
    display:grid; place-items:center; font-size:18px; flex:none;
}
.icon-chip--sm { width:36px; height:36px; font-size:15px; }
.icon-chip--solid { background:var(--brand); color:var(--on-brand); border-color:var(--brand); }

/* الصورة الرمزية */
.avatar { width:38px; height:38px; flex:none; border-radius:var(--r-full); background:var(--brand); color:var(--on-brand); display:grid; place-items:center; font-weight:700; }

/* مؤشرات */
.kpis { display:grid; gap:var(--sp-2xl); grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-xs); padding:var(--sp-2xl); text-align:center; }
.kpi__lbl { font-size:var(--text-xs); color:var(--text-3); margin-bottom:var(--sp-md); }
.kpi__val { font-size:var(--text-xl); line-height:var(--text-xl-lh); font-weight:700; font-variant-numeric:tabular-nums; }
.kpi__val small { font-size:var(--text-xs); font-weight:500; color:var(--text-3); }

/* شبكة معلومات للقراءة */
.info-grid { display:grid; gap:var(--sp-2xl); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.info-item > label { display:block; font-size:var(--text-xs); font-weight:600; color:var(--text-3); margin-bottom:var(--sp-sm); }
.info-item .val { background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-lg) var(--sp-xl); font-size:var(--text-sm); color:var(--text); min-height:44px; }

/* لوحة المهام */
.kanban { display:grid; gap:var(--sp-3xl); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.kcol { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-xs); overflow:hidden; }
.kcol__head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-lg); padding:var(--sp-2xl); color:#FFFFFF; font-weight:700; font-size:var(--text-sm); }
.kcol--doing .kcol__head { background:var(--info-600); }
.kcol--late  .kcol__head { background:var(--error-600); }
.kcol--done  .kcol__head { background:var(--sa-600); }
.kcol__count { background:rgba(255,255,255,.22); border-radius:var(--r-full); padding:0 var(--sp-md); font-size:var(--text-xs); }
.kcol__body { padding:var(--sp-2xl); display:flex; flex-direction:column; gap:var(--sp-2xl); }
.tcard { background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-2xl); }
.tcard__top { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-lg); margin-bottom:var(--sp-md); }
.tcard__title { font-size:var(--text-md); font-weight:700; color:var(--brand-text); }
.tcard__date { font-size:var(--text-xs); font-weight:600; margin-bottom:var(--sp-lg); }
.tcard__text { font-size:var(--text-sm); line-height:var(--text-sm-lh); color:var(--text-2); margin-bottom:var(--sp-2xl); }
.tcard__who { display:inline-flex; align-items:center; gap:var(--sp-md); font-size:var(--text-xs); font-weight:600; background:var(--brand-soft); color:var(--brand-text); border:1px solid var(--brand-soft-border); border-radius:var(--r-full); padding:2px var(--sp-lg); }
.kempty { text-align:center; padding:var(--sp-5xl) var(--sp-2xl); font-size:var(--text-sm); color:var(--text-3); }

/* بطاقات تنقل مربعة */
.tiles { display:grid; gap:var(--sp-3xl); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.tile { display:block; text-align:center; padding:var(--sp-5xl) var(--sp-3xl); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-xs); transition:all .2s ease; color:var(--text); }
.tile:hover { box-shadow:var(--shadow-md); border-color:var(--brand-soft-border); transform:translateY(-2px); color:var(--text); }
.tile__ico { width:64px; height:64px; margin:0 auto var(--sp-2xl); border-radius:var(--r-lg); background:var(--sa-900); color:#FFFFFF; display:grid; place-items:center; font-size:26px; }
.tile h3 { font-size:var(--text-md); line-height:var(--text-md-lh); font-weight:700; margin-bottom:var(--sp-xs); }
.tile p { font-size:var(--text-xs); color:var(--text-3); margin:0; }

/* ══════════════════════════════════════════════════════════════
   تنسيق عناصر Bootstrap المستخدمة في الصفحات
   (يُطبَّق على كل صفحات النظام دون تعديل ماركب‌ها)
   ══════════════════════════════════════════════════════════════ */

/* ── النماذج ── */
.form-group { margin-bottom: var(--sp-2xl); }
.control-label, .form-group > label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--sp-sm);
}
.form-control, .form-select, .custom-select, textarea.form-control {
    display: block;
    width: 100%;
    padding: var(--sp-lg) var(--sp-xl);
    font-family: inherit;
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
    color: var(--text);
    background-color: var(--field-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control::placeholder, textarea::placeholder { color: var(--gray-400); }
.form-control:focus, .form-select:focus, .custom-select:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft-2);
}
.form-control:disabled, .form-control[readonly] { background: var(--surface-sunken); color: var(--text-3); }
.form-control-sm { padding: var(--sp-sm) var(--sp-lg); font-size: var(--text-xs); }
.form-check-input { width: 1.05em; height: 1.05em; accent-color: var(--brand); border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-label { font-size: var(--text-sm); color: var(--text-2); font-weight: 500; }
.input-group-text { background: var(--surface-alt); border-color: var(--border-strong); color: var(--text-2); border-radius: var(--r-md); }
.text-danger, .field-validation-error { color: var(--error-fg) !important; font-size: var(--text-xs); }
.validation-summary-errors { color: var(--error-fg); font-size: var(--text-sm); }

/* ── الأزرار ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-md);
    font-family: inherit; font-size: var(--text-sm); font-weight: 600; line-height: var(--text-sm-lh);
    padding: var(--sp-lg) var(--sp-2xl);
    border: 1px solid transparent; border-radius: var(--r-md);
    transition: all .2s ease; cursor: pointer;
}
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: none; }
.btn-sm { font-size: var(--text-xs) !important; padding: var(--sp-sm) var(--sp-lg) !important; border-radius: var(--r-sm) !important; }
.btn-lg { font-size: var(--text-md); padding: var(--sp-xl) var(--sp-4xl); }
.btn-block { width: 100%; }

.btn-primary, .btn-success {
    background-color: var(--brand); border-color: var(--brand); color: var(--on-brand);
}
.btn-primary:hover, .btn-success:hover, .btn-primary:focus, .btn-success:focus {
    background-color: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand);
}
.btn-danger { background-color: var(--error-600); border-color: var(--error-600); color: #FFFFFF; }
.btn-danger:hover { background-color: var(--error-700); border-color: var(--error-700); color: #FFFFFF; }
.btn-warning { background-color: var(--gold-600); border-color: var(--gold-600); color: var(--gray-950); }
.btn-warning:hover { background-color: var(--gold-700); border-color: var(--gold-700); color: #FFFFFF; }
.btn-info { background-color: var(--info-600); border-color: var(--info-600); color: #FFFFFF; }
.btn-info:hover { background-color: var(--info-700); border-color: var(--info-700); color: #FFFFFF; }
.btn-secondary { background-color: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-secondary:hover { background-color: var(--surface-alt); border-color: var(--text-3); color: var(--text); }
.btn-light { background-color: var(--surface-alt); border-color: var(--border); color: var(--text); }
.btn-light:hover { background-color: var(--surface-sunken); color: var(--text); }
.btn-dark { background-color: var(--sa-900); border-color: var(--sa-900); color: #FFFFFF; }
.btn-outline-primary, .btn-outline-success { background: transparent; border-color: var(--brand); color: var(--brand-text); }
.btn-outline-primary:hover, .btn-outline-success:hover { background: var(--brand); color: var(--on-brand); }
.btn-outline-danger { background: transparent; border-color: var(--error-600); color: var(--error-fg); }
.btn-outline-danger:hover { background: var(--error-600); color: #FFFFFF; }

/* ── الخلفيات المساعدة (كما تستخدمها الصفحات) ── */
.bg-light { background-color: var(--surface-alt) !important; color: var(--text); }
.bg-secondary { background-color: var(--sa-800) !important; color: #FFFFFF; }
.bg-dark { background-color: var(--sa-900) !important; }
.bg-primary { background-color: var(--brand) !important; }
.bg-success { background-color: var(--success-600) !important; }
.bg-danger { background-color: var(--error-600) !important; }
.bg-warning { background-color: var(--gold-600) !important; }
.bg-info { background-color: var(--info-600) !important; }
.bg-white { background-color: var(--surface) !important; }
.border, .border-dark, .border-secondary { border-color: var(--border) !important; }
.rounded { border-radius: var(--r-md) !important; }
.rounded-lg, .rounded-3 { border-radius: var(--r-lg) !important; }
.shadow, .shadow-sm { box-shadow: var(--shadow-sm) !important; }
.text-muted { color: var(--text-3) !important; }
.text-primary { color: var(--brand-text) !important; }
.text-success { color: var(--success-fg) !important; }
.text-warning { color: var(--gold-fg) !important; }
.text-info { color: var(--info-fg) !important; }

/* ── الجداول ── */
.table {
    width: 100%;
    color: var(--text-2);
    font-size: var(--text-sm);
    border-color: var(--border);
    vertical-align: middle;
}
.table > :not(caption) > * > * { padding: var(--sp-lg) var(--sp-xl); background: transparent; }
.table thead th, .table > thead > tr > th {
    background: var(--surface-alt);
    color: var(--text-2);
    font-size: var(--text-xs);
    font-weight: 700;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table tbody tr:hover > * { background: var(--surface-alt); }
.table-bordered, .table-bordered > :not(caption) > * > * { border-color: var(--border); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--surface-alt); }
.table-responsive { border-radius: var(--r-lg); }

/* جداول DataTables */
table.dataTable { border-collapse: collapse !important; }
table.dataTable thead th { background: var(--surface-alt); color: var(--text-2); border-bottom: 1px solid var(--border) !important; font-size: var(--text-xs); }
table.dataTable tbody td { border-color: var(--border); color: var(--text-2); font-size: var(--text-sm); }
table.dataTable tbody tr:hover td { background: var(--surface-alt); }
.dataTables_wrapper { font-size: var(--text-sm); color: var(--text-2); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--field-bg); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--r-md);
    padding: var(--sp-sm) var(--sp-lg); margin-inline: var(--sp-md);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--r-md) !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text-2) !important;
    margin: 0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--brand) !important; border-color: var(--brand) !important; color: var(--on-brand) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--brand-soft) !important; color: var(--brand-text) !important; }

/* ── النوافذ المنبثقة ── */
.modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-xl);
}
.modal-header { border-bottom: 1px solid var(--border); padding: var(--sp-3xl); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.modal-title { font-size: var(--text-lg); font-weight: 700; color: var(--text); }
.modal-body { padding: var(--sp-3xl); color: var(--text-2); font-size: var(--text-sm); }
.modal-footer { border-top: 1px solid var(--border); padding: var(--sp-3xl); gap: var(--sp-lg); }
.modal-backdrop.show { opacity: .55; }

/* ── التنبيهات والشارات ── */
.alert { border-radius: var(--r-lg); border: 1px solid; font-size: var(--text-sm); padding: var(--sp-2xl) var(--sp-3xl); }
.alert-success { background: var(--success-bg); border-color: var(--success-bd); color: var(--success-fg); }
.alert-danger  { background: var(--error-bg);   border-color: var(--error-bd);   color: var(--error-fg); }
.alert-warning { background: var(--gold-bg);    border-color: var(--gold-bd);    color: var(--gold-fg); }
.alert-info    { background: var(--info-bg);    border-color: var(--info-bd);    color: var(--info-fg); }
.badge { border-radius: var(--r-full); font-size: var(--text-xs); font-weight: 600; padding: 3px var(--sp-lg); }

/* ── التبويبات والصفحات ── */
.nav-tabs { border-bottom: 1px solid var(--border); gap: var(--sp-xs); }
.nav-tabs .nav-link { border: 1px solid transparent; border-radius: var(--r-md) var(--r-md) 0 0; color: var(--text-2); font-size: var(--text-sm); font-weight: 600; }
.nav-tabs .nav-link:hover { background: var(--brand-soft); color: var(--brand-text); border-color: transparent; }
.nav-tabs .nav-link.active { background: var(--surface) !important; color: var(--brand-text) !important; border-color: var(--border) var(--border) var(--surface); }
.pagination .page-link { color: var(--text-2); background: var(--surface); border-color: var(--border); border-radius: var(--r-md); margin: 0 2px; font-size: var(--text-sm); }
.pagination .page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.breadcrumb { font-size: var(--text-sm); color: var(--text-3); background: transparent; padding: 0; }
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--brand-text); }

/* ── متنوّع ── */
.accordion-button { background: var(--surface-alt); color: var(--text); font-weight: 600; font-size: var(--text-sm); }
.accordion-button:not(.collapsed) { background: var(--brand-soft); color: var(--brand-text); box-shadow: none; }
.accordion-item { border-color: var(--border); background: var(--surface); }
.list-group-item { background: var(--surface); border-color: var(--border); color: var(--text-2); font-size: var(--text-sm); }
.progress { background: var(--track); border-radius: var(--r-full); height: 8px; }
.progress-bar { background: var(--brand); }
hr { border-color: var(--border); opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   غلاف الصفحات الفرعية الموحّد
   النمط الغالب في الصفحات:
     <div class="w-50 mx-auto bg-light rounded p-5">
        <h1 class="text-center"><i class="fa…"></i> العنوان</h1> …
   يُنسَّق هنا مركزيًا دون تعديل ماركب الصفحات
   ══════════════════════════════════════════════════════════════ */
.bg-light.rounded {
    background: var(--surface) !important;
    border: 1px solid var(--border);
    border-radius: var(--r-xl) !important;
    box-shadow: var(--shadow-sm);
    margin-top: var(--sp-5xl) !important;
    margin-bottom: var(--sp-6xl) !important;
}
.bg-light.rounded.p-5 { padding: var(--sp-6xl) var(--sp-5xl) !important; }
.bg-light.rounded.p-3 { padding: var(--sp-4xl) !important; }

/* عنوان الصفحة داخل الغلاف */
.bg-light.rounded > h1,
.bg-light.rounded > h1.text-center {
    font-size: var(--display-xs);
    line-height: var(--display-xs-lh);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.02em;
    padding-bottom: var(--sp-3xl);
    margin-bottom: var(--sp-4xl);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-lg);
}
.bg-light.rounded > h1 i,
.bg-light.rounded > h1.text-center i {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    font-size: 18px;
    border-radius: var(--r-full);
    background: var(--chip-bg);
    color: var(--chip-fg);
    border: 1px solid var(--chip-bd);
}

/* شريط الإجراءات أعلى القائمة (زر إضافة …) */
.bg-light.rounded > .text-center:not(h1) { margin-bottom: var(--sp-3xl); }

/* الجداول داخل الغلاف تمتد لكامل عرضه */
.bg-light.rounded .table { margin-bottom: 0; }
.bg-light.rounded > .table,
.bg-light.rounded > .table-responsive,
.bg-light.rounded > #DataTable,
.bg-light.rounded > .dataTables_wrapper {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}

/* آخر مجموعة أزرار في النموذج */
.bg-light.rounded form > .form-group:last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-lg);
    padding-top: var(--sp-3xl);
    margin-top: var(--sp-3xl);
    margin-bottom: 0;
    border-top: 1px solid var(--border);
}
/* float-left داخل النماذج لم يعد ضروريًا بعد flex */
.bg-light.rounded form > .form-group:last-child .float-left { float: none !important; margin-inline-start: auto; }

/* عرض الغلاف: يتمدد لكامل الشاشة على الأجهزة الصغيرة */
@media (max-width: 991px) {
    .w-50, .w-75 { width: 100% !important; }
    .bg-light.rounded.p-5 { padding: var(--sp-4xl) var(--sp-3xl) !important; }
}
/* الصفحات ذات الجداول العريضة تحتاج مساحة أكبر */
@media (min-width: 1400px) {
    .bg-light.rounded.w-50:has(table) { width: 80% !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   طبقة الهوية الأساسية — عناصر HTML الخام
   تُنسَّق العناصر بلا أصناف حتى تتناسق كل الصفحات.
   استُخدم :where() في المواضع التي قد تصطدم بأصناف Bootstrap
   حتى تبقى الأصناف هي صاحبة الأولوية دائمًا.
   ══════════════════════════════════════════════════════════════════════ */

/* ── الطباعة ── */
h1 { font-size: var(--display-sm); line-height: var(--display-sm-lh); }
h2 { font-size: var(--display-xs); line-height: var(--display-xs-lh); }
h3 { font-size: var(--text-xl);    line-height: var(--text-xl-lh); }
h4 { font-size: var(--text-lg);    line-height: var(--text-lg-lh); }
h5 { font-size: var(--text-md);    line-height: var(--text-md-lh); }
h6 { font-size: var(--text-sm);    line-height: var(--text-sm-lh); }
h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--text); letter-spacing: -.02em; margin-bottom: var(--sp-xl); }
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child { margin-bottom: 0; }

p { color: var(--text-2); font-size: var(--text-sm); line-height: var(--text-sm-lh); margin-bottom: var(--sp-xl); }
p:last-child { margin-bottom: 0; }
small { font-size: var(--text-xs); color: var(--text-3); }
strong, b { font-weight: 700; color: var(--text); }
em, i:not([class]) { font-style: italic; }
mark { background: var(--gold-bg); color: var(--gold-fg); padding: 0 var(--sp-xs); border-radius: var(--r-xs); }
code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 1px var(--sp-sm); color: var(--brand-text); }
pre { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2xl); overflow-x: auto; }
blockquote {
    border-inline-start: 3px solid var(--brand);
    background: var(--brand-soft);
    padding: var(--sp-2xl) var(--sp-3xl);
    border-radius: var(--r-md);
    color: var(--text-2);
    margin-bottom: var(--sp-2xl);
}
abbr[title] { text-decoration-color: var(--border-strong); }

/* ── الفواصل والوسائط ── */
hr { border: 0; border-top: 1px solid var(--border); opacity: 1; margin: var(--sp-2xl) 0; }
img { max-width: 100%; height: auto; }
figure { margin: 0 0 var(--sp-2xl); }
figcaption { font-size: var(--text-xs); color: var(--text-3); margin-top: var(--sp-md); text-align: center; }
iframe, canvas, video { max-width: 100%; border-radius: var(--r-md); }
:where(iframe) { border: 1px solid var(--border); }

/* ── القوائم ── */
ul, ol { margin: 0 0 var(--sp-2xl); }
/* :where() هنا يُفقد الأولوية أمام القاعدة العامة ul,ol فوق — لذا بلا :where */
ul:not([class]), ol:not([class]) { padding-inline-start: var(--sp-3xl); }
ul:not([class]) { list-style: disc; }
ol:not([class]) { list-style: decimal; }
ul:not([class]) > li, ol:not([class]) > li { color: var(--text-2); font-size: var(--text-sm); line-height: var(--text-sm-lh); margin-bottom: var(--sp-md); list-style: inherit; }
ul:not([class]) > li::marker, ol:not([class]) > li::marker { color: var(--brand); }

/* قوائم التعريف — نمط صفحات التفاصيل والحذف */
dl { margin-bottom: 0; }
dl.row { --bs-gutter-y: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
dl.row > dt {
    background: var(--surface-alt);
    color: var(--text-3);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--sp-lg) var(--sp-xl);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
}
dl.row > dd {
    color: var(--text);
    font-size: var(--text-sm);
    padding: var(--sp-lg) var(--sp-xl);
    margin: 0;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
    word-break: break-word;
}
dl.row > dt:last-of-type, dl.row > dd:last-of-type { border-bottom: 0; }
dl:not(.row) dt { font-size: var(--text-xs); font-weight: 600; color: var(--text-3); margin-bottom: var(--sp-xs); }
dl:not(.row) dd { font-size: var(--text-sm); color: var(--text); margin-bottom: var(--sp-2xl); }

/* ── الروابط ── */
a:not([class]) { color: var(--brand-text); font-weight: 500; }
a:not([class]):hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 3px; }

/* ── الجداول الخام (بلا صنف .table) ── */
:where(table) {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    color: var(--text-2);
    background: var(--surface);
    border-radius: var(--r-lg);
    overflow: hidden;
}
:where(table) caption { caption-side: top; text-align: start; font-size: var(--text-sm); font-weight: 700; color: var(--text); padding-bottom: var(--sp-lg); }
:where(table) th {
    background: var(--surface-alt);
    color: var(--text-2);
    font-size: var(--text-xs);
    font-weight: 700;
    text-align: start;
    padding: var(--sp-lg) var(--sp-xl);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
:where(table) td {
    padding: var(--sp-lg) var(--sp-xl);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
:where(table) tbody tr:last-child td { border-bottom: 0; }
:where(table) tbody tr:hover td { background: var(--surface-alt); }
:where(table) tfoot td { background: var(--surface-alt); font-weight: 600; color: var(--text); }

/* ── حقول الإدخال الخام ── */
:where(input[type="text"], input[type="email"], input[type="password"], input[type="number"],
       input[type="tel"], input[type="url"], input[type="search"], input[type="date"],
       input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
       input:not([type]), select, textarea) {
    display: block;
    width: 100%;
    padding: var(--sp-lg) var(--sp-xl);
    font-family: inherit;
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
    color: var(--text);
    background-color: var(--field-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    transition: border-color .2s ease, box-shadow .2s ease;
}
:where(input, select, textarea):focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft-2);
}
:where(input, textarea)::placeholder { color: var(--gray-400); }
:where(textarea) { min-height: 110px; resize: vertical; }
:where(select) {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
    background-position: calc(var(--sp-xl) + 5px) calc(50% + 2px), calc(var(--sp-xl)) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-inline-start: var(--sp-5xl);
}
:where(option) { background: var(--surface); color: var(--text); }
:where(input[type="checkbox"], input[type="radio"]) {
    width: 1.05em; height: 1.05em;
    accent-color: var(--brand);
    vertical-align: -2px;
}
:where(input[type="file"]) {
    display: block; width: 100%;
    padding: var(--sp-lg) var(--sp-xl);
    font-size: var(--text-sm); color: var(--text-2);
    background: var(--surface-alt);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-md);
}
:where(input[type="file"])::file-selector-button {
    font-family: inherit; font-size: var(--text-xs); font-weight: 600;
    padding: var(--sp-sm) var(--sp-xl); margin-inline-end: var(--sp-xl);
    color: var(--on-brand); background: var(--brand);
    border: 0; border-radius: var(--r-sm); cursor: pointer;
}
:where(input[type="range"]) { accent-color: var(--brand); width: 100%; }
:where(input, select, textarea):disabled { background: var(--surface-sunken); color: var(--text-3); cursor: not-allowed; }
:where(label) { font-size: var(--text-sm); font-weight: 600; color: var(--text); margin-bottom: var(--sp-sm); }
:where(fieldset) { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-3xl); margin-bottom: var(--sp-3xl); }
:where(legend) { font-size: var(--text-sm); font-weight: 700; color: var(--brand-text); padding-inline: var(--sp-lg); width: auto; }

/* ── الأزرار الخام ── */
:where(button, input[type="submit"], input[type="button"], input[type="reset"]) {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-md);
    font-family: inherit; font-size: var(--text-sm); font-weight: 600; line-height: var(--text-sm-lh);
    padding: var(--sp-lg) var(--sp-2xl);
    color: var(--on-brand);
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all .2s ease;
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"]):hover {
    background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand);
}
:where(button):disabled { opacity: .6; cursor: not-allowed; }

/* ── عناصر تفاعلية أخرى ── */
:where(details) { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-2xl); margin-bottom: var(--sp-2xl); }
:where(summary) { font-weight: 600; color: var(--text); cursor: pointer; font-size: var(--text-sm); }
:where(dialog) { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-xl); }
:where(progress) { accent-color: var(--brand); }

/* ── التحديد والتمرير ── */
::selection { background: var(--brand-soft-2); color: var(--text); }

/* ── الطباعة الورقية ── */
@media print {
    body { background: #FFFFFF; color: #000000; }
    .bg-light.rounded { box-shadow: none; border: 1px solid #ccc; margin: 0 !important; }
    a { text-decoration: none; color: #000; }
}

/* ══════════════════════════════════════════════════════════════════════
   بطاقة الصفحة — المكوّن الموحّد لصفحات النظام
   حلّت محل التركيبة القديمة: w-50 mx-auto bg-light rounded p-5
   ══════════════════════════════════════════════════════════════════════ */
.page-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-6xl) var(--sp-5xl);
    margin: var(--sp-5xl) auto var(--sp-6xl);
    width: 100%;
}
.page-card--md { max-width: 720px; }
.page-card--lg { max-width: 1040px; }
.page-card--xl { max-width: 1320px; }
/* الصفحات التي تحتوي جدولاً تحتاج عرضًا أكبر */
.page-card--md:has(table) { max-width: 1040px; }
.page-card--lg:has(table) { max-width: 1320px; }

.page-card + .page-card { margin-top: 0; }

/* عنوان البطاقة */
.page-card__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-lg);
    font-size: var(--display-xs);
    line-height: var(--display-xs-lh);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.02em;
    text-align: center;
    padding-bottom: var(--sp-3xl);
    margin-bottom: var(--sp-4xl);
    border-bottom: 1px solid var(--border);
}
.page-card__title .icon-chip { flex: none; }

/* شريط الإجراءات أسفل العنوان مباشرة */
.page-card > .text-center:first-of-type { margin-bottom: var(--sp-3xl); }

/* الجداول داخل البطاقة */
.page-card > table,
.page-card > .table,
.page-card > .table-responsive,
.page-card > .dataTables_wrapper > table {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.page-card table { margin-bottom: 0; }

/* خلية أزرار الإجراءات في الجداول */
.cell-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-md);
    justify-content: flex-end;
    align-items: center;
}
.cell-actions .btn { white-space: nowrap; }

/* آخر مجموعة أزرار في النماذج */
.page-card form > .form-group:last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-lg);
    padding-top: var(--sp-3xl);
    margin-top: var(--sp-3xl);
    margin-bottom: 0;
    border-top: 1px solid var(--border);
}
.page-card form > .form-group:last-child .float-left { float: none !important; margin-inline-start: auto; }

@media (max-width: 991px) {
    .page-card { padding: var(--sp-4xl) var(--sp-3xl); border-radius: var(--r-lg); }
    .page-card__title { font-size: var(--text-xl); line-height: var(--text-xl-lh); }
    .cell-actions { justify-content: flex-start; }
}

/* أزرار الحفظ القديمة تستخدم float-left داخل مجموعات النماذج —
   تُحوَّل إلى تخطيط مرن حتى لا تخرج عن سياق البطاقة */
.page-card .form-group:has(.float-left),
.page-card .text-center:has(.float-left) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-lg);
}
.page-card .float-left { float: none !important; margin-inline-start: auto; }
.cell-actions .float-left { float: none !important; margin-inline-start: 0; }

/* ══════════════════════════════════════════════════════════════════════
   التقارير والمستندات القابلة للطباعة
   هوية موحّدة على الشاشة وعلى الورق
   ══════════════════════════════════════════════════════════════════════ */
.report {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-5xl);
    margin: var(--sp-5xl) auto var(--sp-6xl);
    max-width: 1320px;
    color: var(--text);
}

/* ترويسة التقرير المطبوعة */
.report__head {
    padding-bottom: var(--sp-3xl);
    margin-bottom: var(--sp-4xl);
    border-bottom: 2px solid var(--brand);
}
.report__head img { height: 84px; width: auto; object-fit: contain; }
.report__head h4 { font-size: var(--text-lg); font-weight: 700; color: var(--text); margin-bottom: var(--sp-xs); }
.report__head h6 { font-size: var(--text-sm); font-weight: 500; color: var(--text-3); margin-bottom: var(--sp-xxs); }

/* عنوان التقرير */
.report__title {
    text-align: center;
    font-size: var(--display-xs);
    line-height: var(--display-xs-lh);
    font-weight: 700;
    color: var(--text);
    padding-bottom: var(--sp-2xl);
    margin-bottom: var(--sp-4xl);
    border-bottom: 1px solid var(--border);
}

/* جداول التقارير: حدود واضحة بلا ثقل بصري */
.report .table, .report table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.report .table-bordered td, .report .table-bordered th,
.report table td, .report table th {
    border: 1px solid var(--border-strong);
    padding: var(--sp-md) var(--sp-lg);
    vertical-align: middle;
}
.report thead th, .report .table thead th {
    background: var(--surface-alt);
    color: var(--text);
    font-weight: 700;
    font-size: var(--text-xs);
    text-align: center;
}
.report .bg-secondary { background-color: var(--surface-alt) !important; color: var(--text) !important; }
.report .bg-secondary * { color: var(--text) !important; }

/* حقول مدمجة داخل خلايا التقرير (نماذج الاستلام والتسليم) */
.report table input[type='text'],
.report table input[type='date'],
.report table input[type='number'] {
    border: 0; outline: 0; box-shadow: none;
    background: transparent;
    text-align: center;
    padding: var(--sp-xs);
    width: 100%;
}
.report table input:focus { box-shadow: none; background: var(--brand-soft); border-radius: var(--r-xs); }

/* مربعات الاختيار في التقارير: تظهر مفرغة وتُملأ عند التحديد */
.report input[type='checkbox'] { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border: 1.5px solid var(--text-3); border-radius: 2px; vertical-align: -2px; }
.report input[type='checkbox']:checked { -webkit-appearance: checkbox; appearance: checkbox; accent-color: var(--brand); }
.report input[type='checkbox'] + label { color: var(--text-3); font-weight: 500; }
.report input[type='checkbox']:checked + label { color: var(--text); font-weight: 600; }

/* كتلة الطباعة القديمة أُزيلت — استُبدلت بورقة A4 في نهاية الملف */


/* ══════════════════════════════════════════════════════════════════════
   صفحة الدخول — تخطيط وهوية
   ══════════════════════════════════════════════════════════════════════ */
.auth-grid {
    position: relative; z-index: 1;
    width: 100%; max-width: 1040px;
    display: grid; gap: var(--sp-8xl);
    align-items: center;
}
@media (min-width: 900px) { .auth-grid { grid-template-columns: 1fr 420px; } }

.auth-brand { text-align: center; }
@media (min-width: 900px) { .auth-brand { text-align: start; } }
.auth-brand img { margin-bottom: var(--sp-3xl); }
.auth-brand__org  { font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--sp-xs); }
.auth-brand__name { font-size: var(--display-sm); line-height: var(--display-sm-lh); font-weight: 700; color: var(--text); margin-bottom: var(--sp-md); }
.auth-brand__tag  { font-size: var(--text-md); font-weight: 600; color: var(--brand-text); }
.auth-brand__seals { display: flex; gap: var(--sp-4xl); align-items: center; justify-content: center; margin-top: var(--sp-6xl); }
@media (min-width: 900px) { .auth-brand__seals { justify-content: flex-start; } }
.auth-brand__seals img { margin: 0; opacity: .9; }

.auth-head { text-align: center; margin-bottom: var(--sp-4xl); }
.auth-head h2 { font-size: var(--text-xl); line-height: var(--text-xl-lh); margin: 0; }
.auth-foot { text-align: center; font-size: var(--text-xs); color: var(--text-3); margin-top: var(--sp-3xl); margin-bottom: 0; }
#login-panel .form-group:last-of-type { margin-bottom: var(--sp-3xl); }

/* عنوان صفحة مستقل (خارج بطاقة) */
.page-title {
    font-size: var(--display-xs);
    line-height: var(--display-xs-lh);
    font-weight: 700;
    color: var(--text);
    text-align: center;
    padding: var(--sp-5xl) 0 var(--sp-3xl);
    margin: 0 0 var(--sp-4xl);
    border-bottom: 1px solid var(--border);
}

/* أعمدة لوحة المهام القديمة (.tasks) بهوية الكانبان */
.tasks { padding: 0; overflow: hidden; }
.tasks--doing, .tasks--late, .tasks--done { color: var(--text); }
.tasks--doing::before, .tasks--late::before, .tasks--done::before {
    content: attr(data-title);
    display: block;
    padding: var(--sp-2xl);
    font-size: var(--text-sm);
    font-weight: 700;
    color: #FFFFFF;
}
.tasks--doing::before { background: var(--info-600); }
.tasks--late::before  { background: var(--error-600); }
.tasks--done::before  { background: var(--sa-600); }
.tasks > .card { margin: var(--sp-2xl); }
.tasks .person {
    display: inline-flex; align-items: center; gap: var(--sp-md);
    background: var(--brand-soft) !important;
    color: var(--brand-text) !important;
    border: 1px solid var(--brand-soft-border);
    border-radius: var(--r-full);
    padding: 2px var(--sp-lg);
    font-size: var(--text-xs); font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   الجوال أولًا — القواعد الأساسية للشاشات الصغيرة
   ثم تُحسَّن تدريجيًا عبر min-width
   ══════════════════════════════════════════════════════════════════════ */

/* ── الشريط العلوي: أدوات أقل على الشاشة الصغيرة ── */
.header { gap: var(--sp-md); }
.header_logo { height: 30px; }
.header > div:last-child { gap: var(--sp-xs); }
/* الأدوات الثانوية (بحث · مكتبة · بنك الأسئلة · فاصل) تُخفى على الجوال */
.header .align-items-center.mx-1:has(> a > img[src*="search"]),
.header .align-items-center.mx-1:has(> a > img[src*="library"]),
.header .align-items-center.mx-1:has(> a > .fa-bank),
.header .align-items-center.mx-2 { display: none; }

@media (min-width: 576px) { .header_logo { height: 36px; } }
@media (min-width: 992px) {
    .header_logo { height: 40px; }
    .header .align-items-center.mx-1:has(> a > img[src*="search"]),
    .header .align-items-center.mx-1:has(> a > img[src*="library"]),
    .header .align-items-center.mx-1:has(> a > .fa-bank),
    .header .align-items-center.mx-2 { display: block; }
}

/* ── بطاقة الصفحة: حواف أضيق على الجوال ── */
.page-card {
    padding: var(--sp-3xl) var(--sp-2xl);
    margin: var(--sp-3xl) auto var(--sp-4xl);
    border-radius: var(--r-lg);
}
.page-card__title { font-size: var(--text-xl); line-height: var(--text-xl-lh); padding-bottom: var(--sp-2xl); margin-bottom: var(--sp-3xl); }
.page-card__title .icon-chip { width: 34px; height: 34px; font-size: 14px; }

@media (min-width: 768px) {
    .page-card { padding: var(--sp-5xl) var(--sp-4xl); margin: var(--sp-4xl) auto var(--sp-5xl); border-radius: var(--r-xl); }
    .page-card__title { font-size: var(--display-xs); line-height: var(--display-xs-lh); }
}
@media (min-width: 1200px) {
    .page-card { padding: var(--sp-6xl) var(--sp-5xl); margin: var(--sp-5xl) auto var(--sp-6xl); }
}

/* ── الجداول: تمرير أفقي بدل الانضغاط ── */
.page-card > table,
.page-card > .table,
.page-card > .dataTables_wrapper,
.report > table,
.report > .table,
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* لا min-width هنا: الجدول نفسه هو حاوية التمرير، فلو تجاوز عرضه الحاوية خرج عنها */
.page-card > table > tbody,
.page-card > .table > tbody,
.report > table > tbody { display: table-row-group; }
.page-card > table th, .page-card > table td,
.page-card > .table th, .page-card > .table td,
.report > table th, .report > table td { white-space: nowrap; }
/* حافة تدلّ على وجود تمرير */
.page-card > table, .page-card > .table, .report > table, .report > .table {
    border-radius: var(--r-lg);
    box-shadow: inset -12px 0 12px -12px rgba(16,24,40,.18);
}

@media (min-width: 992px) {
    .page-card > table, .page-card > .table, .report > table, .report > .table { display: table; box-shadow: none; }
    .page-card > table th, .page-card > table td,
    .page-card > .table th, .page-card > .table td,
    .report > table th, .report > table td { white-space: normal; }
    .page-card > .dataTables_wrapper { display: block; overflow-x: visible; }
}

/* خلية الإجراءات: أزرار متجاورة لا متراكمة */
.cell-actions { flex-wrap: nowrap; justify-content: flex-start; gap: var(--sp-xs); }

/* ── أهداف اللمس: 44px حد أدنى فعلي ── */
.btn { min-height: 40px; }
.btn-sm { min-height: 34px; }
.snav a { min-height: 44px; }
.iconbtn, .user-card { min-width: 40px; min-height: 40px; }
.pagination .page-link, .dataTables_wrapper .dataTables_paginate .paginate_button { min-width: 38px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; }

/* ── الحقول: 16px على الجوال لمنع تكبير iOS التلقائي ── */
@media (max-width: 767px) {
    .form-control, .form-select, .custom-select, textarea.form-control, .select2,
    :where(input, select, textarea) { font-size: 16px !important; }
}

/* ── أدوات DataTables: تتكدّس رأسيًا على الجوال ── */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { float: none !important; text-align: start !important; margin-bottom: var(--sp-lg); }
.dataTables_wrapper .dataTables_filter input { width: 100%; margin-inline: 0; margin-top: var(--sp-sm); }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { float: none !important; text-align: center !important; margin-top: var(--sp-lg); }
@media (min-width: 768px) {
    .dataTables_wrapper .dataTables_length  { float: right !important; }
    .dataTables_wrapper .dataTables_filter  { float: left !important; text-align: left !important; }
    .dataTables_wrapper .dataTables_filter input { width: auto; margin-inline: var(--sp-md); margin-top: 0; }
    .dataTables_wrapper .dataTables_info    { float: right !important; text-align: start !important; }
    .dataTables_wrapper .dataTables_paginate{ float: left !important; }
}

/* ── التقارير على الجوال ── */
.report { padding: var(--sp-3xl) var(--sp-2xl); margin: var(--sp-3xl) auto var(--sp-4xl); border-radius: var(--r-lg); }
.report__head img { height: 56px; }
.report__title { font-size: var(--text-xl); line-height: var(--text-xl-lh); }
@media (min-width: 768px) {
    .report { padding: var(--sp-5xl); border-radius: var(--r-xl); }
    .report__head img { height: 84px; }
    .report__title { font-size: var(--display-xs); line-height: var(--display-xs-lh); }
}

/* ── قوائم التعريف: عمود واحد على الجوال ── */
@media (max-width: 575px) {
    dl.row > dt { border-bottom: 0; padding-bottom: var(--sp-xs); }
    dl.row > dd { padding-top: 0; }
}

/* ── النوافذ المنبثقة: ملء العرض على الجوال ── */
@media (max-width: 575px) {
    .modal-dialog { margin: var(--sp-lg); }
    .modal-header, .modal-body, .modal-footer { padding: var(--sp-2xl); }
    .modal-footer { flex-direction: column; align-items: stretch; }
    .modal-footer .btn { width: 100%; }
}

/* ── صفحة الدخول ── */
@media (max-width: 899px) {
    .auth-grid { gap: var(--sp-5xl); }
    #login-panel { padding: var(--sp-4xl) var(--sp-3xl); }
    .auth-brand__name { font-size: var(--text-xl); line-height: var(--text-xl-lh); }
}

/* ── منع أي فيضان أفقي مهما كان المحتوى ── */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, canvas, iframe, table { max-width: 100%; }

/* ── أهداف اللمس على الجوال: الأزرار الصغيرة تكبر لتبلغ 42px ── */
@media (max-width: 767px) {
    .btn-sm {
        min-height: 42px;
        padding: var(--sp-md) var(--sp-xl) !important;
        font-size: var(--text-sm) !important;
    }
    .cell-actions .btn-sm { padding: var(--sp-md) var(--sp-lg) !important; }
    /* تباعد كافٍ بين الأهداف المتجاورة */
    .cell-actions { gap: var(--sp-md); }
    .page-card form > .form-group:last-child { gap: var(--sp-md); }
}

/* ══════════════════════════════════════════════════════════════════════
   صفحة الخطأ 404
   ══════════════════════════════════════════════════════════════════════ */
.error-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--sp-5xl) var(--sp-xl);
    background:
        radial-gradient(120% 90% at 80% 0%, var(--sa-100) 0%, transparent 55%),
        linear-gradient(180deg, var(--sa-25), var(--bg));
}
[data-theme="dark"] .error-page {
    background:
        radial-gradient(120% 90% at 80% 0%, rgba(27,131,84,.20) 0%, transparent 55%),
        linear-gradient(180deg, #0A1A13, var(--gray-950));
}
.error-page .page-card { margin: 0; }
.error-code { color: var(--brand-soft-border); margin-bottom: var(--sp-2xl); }
.error-code svg { max-width: 100%; height: auto; }
.error-page .page-card__title { justify-content: center; }
.error-lead { font-size: var(--text-md); line-height: var(--text-md-lh); color: var(--text-2); margin-bottom: var(--sp-4xl); }
.error-actions { display: flex; flex-wrap: wrap; gap: var(--sp-lg); justify-content: center; }
.error-actions .btn { min-width: 140px; }

/* ══════════════════════════════════════════════════════════════════════
   أدوات Bootstrap 5 الناقصة من Bootstrap 4 المحمّل في النظام الداخلي
   (النظام يبقى على BS4 لأن 120 نافذة تستخدم data-toggle)
   ══════════════════════════════════════════════════════════════════════ */
.row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; }
.row > * { padding-inline: calc(var(--bs-gutter-x) * .5); margin-top: var(--bs-gutter-y); }
.g-0 { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.g-1 { --bs-gutter-x: .25rem; --bs-gutter-y: .25rem; }
.g-2 { --bs-gutter-x: .5rem;  --bs-gutter-y: .5rem; }
.g-3 { --bs-gutter-x: 1rem;   --bs-gutter-y: 1rem; }
.g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
.g-5 { --bs-gutter-x: 3rem;   --bs-gutter-y: 3rem; }
.row.g-1, .row.g-2, .row.g-3, .row.g-4, .row.g-5 { margin-inline: calc(var(--bs-gutter-x) * -.5); }

.gap-0 { gap: 0 !important; }
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

.text-start { text-align: start !important; }
.text-end   { text-align: end !important; }
.float-start { float: inline-start !important; }
.float-end   { float: inline-end !important; }

.ms-0{margin-inline-start:0!important}      .me-0{margin-inline-end:0!important}
.ms-1{margin-inline-start:.25rem!important} .me-1{margin-inline-end:.25rem!important}
.ms-2{margin-inline-start:.5rem!important}  .me-2{margin-inline-end:.5rem!important}
.ms-3{margin-inline-start:1rem!important}   .me-3{margin-inline-end:1rem!important}
.ms-4{margin-inline-start:1.5rem!important} .me-4{margin-inline-end:1.5rem!important}
.ms-auto{margin-inline-start:auto!important} .me-auto{margin-inline-end:auto!important}
.ps-0{padding-inline-start:0!important}      .pe-0{padding-inline-end:0!important}
.ps-2{padding-inline-start:.5rem!important}  .pe-2{padding-inline-end:.5rem!important}
.ps-3{padding-inline-start:1rem!important}   .pe-3{padding-inline-end:1rem!important}

.visually-hidden, .sr-only {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   قشرة تطبيق «إشراف» — منقولة حرفيًا من demo2-dga (dga-app.css)
   الفاتح أساسي، الداكن ثانوي — RTL: inline-start = يمين
   ══════════════════════════════════════════════════════════════════════ */

:root { --sidebar-w: 268px; --appbar-h: 68px; }

/* ══════════════ قشرة التطبيق ══════════════ */
.shell { min-height: 100vh; }

.sidebar {
  position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--sidebar-w); z-index: 1100;
  background: var(--surface); border-inline-end: 1px solid var(--border);
  display: flex; flex-direction: column; overflow-y: auto;
  transition: transform .25s ease;
}
.sidebar__brand { display: flex; align-items: center; gap: var(--sp-lg); padding: var(--sp-3xl) var(--sp-2xl); border-bottom: 1px solid var(--border); }
.sidebar__brand img { width: 32px; height: 46px; object-fit: contain; }
[data-theme="light"] .sidebar__brand .logo-dark,
[data-theme="dark"]  .sidebar__brand .logo-light { display: none; }
.sidebar__brand strong { display: block; font-size: var(--text-md); font-weight: 700; color: var(--text); }
.sidebar__brand span { font-size: var(--text-xs); color: var(--text-3); }

.snav { flex: 1; padding: var(--sp-2xl) var(--sp-lg); }
.snav__label { font-size: var(--text-xs); font-weight: 600; color: var(--text-3); padding: var(--sp-2xl) var(--sp-lg) var(--sp-md); letter-spacing: .02em; margin: 0; }
.snav a {
  display: flex; align-items: center; gap: var(--sp-lg);
  padding: var(--sp-lg) var(--sp-xl); border-radius: var(--r-md);
  font-size: var(--text-sm); font-weight: 600; color: var(--text-2);
  border: 1px solid transparent; cursor: pointer; transition: all .2s ease;
}
.snav a i:first-child { width: 18px; text-align: center; font-size: 15px; }
.snav a img:first-child { width: 18px; height: 18px; flex: none; object-fit: contain; }
.snav a:hover { background: var(--brand-soft); color: var(--brand-text); text-decoration: none; }
.snav a.is-active { background: var(--brand-soft); color: var(--brand-text); border-color: var(--brand-soft-border); }
.snav__badge { margin-inline-start: auto; background: var(--brand); color: var(--on-brand); font-size: var(--text-xs); font-weight: 700; border-radius: var(--r-full); padding: 1px var(--sp-md); min-width: 22px; text-align: center; }
.snav__badge--gold { background: var(--gold-bg); color: var(--gold-fg); }

.sidebar__user { border-top: 1px solid var(--border); padding: var(--sp-2xl); }
.user-card { display: flex; align-items: center; gap: var(--sp-lg); width: 100%; text-align: start; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-lg); cursor: pointer; font-family: inherit; color: var(--text); }
.user-card:hover { border-color: var(--brand-soft-border); color: var(--text); text-decoration: none; }
.avatar { width: 38px; height: 38px; flex: none; border-radius: var(--r-full); background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-weight: 700; font-size: var(--text-md); }
.avatar--sm { width: 32px; height: 32px; font-size: var(--text-sm); }
.user-card strong { display: block; font-size: var(--text-sm); font-weight: 700; }
.user-card span { font-size: var(--text-xs); color: var(--text-3); }

.sidebar__scrim { display: none; position: fixed; inset: 0; background: rgba(13,18,28,.55); z-index: 1050; }
.sidebar__scrim.is-open { display: block; }

.main { margin-inline-start: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

.appbar {
  position: sticky; top: 0; z-index: 1000; min-height: var(--appbar-h);
  display: flex; align-items: center; gap: var(--sp-2xl);
  padding: var(--sp-lg) var(--sp-4xl);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.appbar__title { font-size: var(--text-lg); line-height: var(--text-lg-lh); font-weight: 700; margin: 0; color: var(--text); }
.appbar__crumb { font-size: var(--text-xs); color: var(--text-3); margin: 0; }
.appbar__tools { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-lg); }
.iconbtn { width: 40px; height: 40px; flex: none; border-radius: var(--r-md); background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-2); font-size: 15px; display: grid; place-items: center; cursor: pointer; transition: all .2s ease; position: relative; }
.iconbtn:hover { background: var(--brand-soft); color: var(--brand-text); border-color: var(--brand-soft-border); text-decoration: none; }
.iconbtn__dot { position: absolute; top: 7px; inset-inline-end: 8px; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--error-500); }
.search { position: relative; }
.search input { width: 240px; padding: var(--sp-md) var(--sp-4xl) var(--sp-md) var(--sp-xl); font-family: inherit; font-size: var(--text-sm); background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-md); }
.search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft-2); }
.search i { position: absolute; inset-inline-start: var(--sp-lg); top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 13px; pointer-events: none; }

.popover { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; width: 320px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); padding: var(--sp-md); display: none; z-index: 1200; }
.popover.is-open { display: block; }
.popover__head { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-lg); font-size: var(--text-sm); font-weight: 700; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-md); color: var(--text); }
.popover__head button, .popover__head a { background: none; border: 0; font-family: inherit; font-size: var(--text-xs); color: var(--brand-text); cursor: pointer; font-weight: 600; }
.notif { display: flex; gap: var(--sp-lg); padding: var(--sp-lg); border-radius: var(--r-md); }
.notif:hover { background: var(--surface-alt); text-decoration: none; }
.notif__dot { width: 8px; height: 8px; flex: none; margin-top: 6px; border-radius: var(--r-full); background: var(--brand); }
.notif p { font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--text); margin: 0; }
.notif time { font-size: var(--text-xs); color: var(--text-3); }

.content { flex: 1; padding: var(--sp-5xl) var(--sp-4xl) var(--sp-8xl); }
.content > .container-fluid { max-width: 1440px; margin-inline: auto; padding-inline: 0; }

@media (max-width: 1199px) {
  .sidebar { transform: translateX(-100%); }
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.is-open { transform: none; box-shadow: var(--shadow-xl); }
  .main { margin-inline-start: 0; }
  .content { padding: var(--sp-4xl) var(--sp-xl) var(--sp-7xl); }
  .appbar { padding-inline: var(--sp-xl); }
  .search input { width: 150px; }
}
@media (max-width: 700px) { .search { display: none; } }

@media print {
  .sidebar, .appbar, .sidebar__scrim, .toast { display: none !important; }
  .main { margin-inline-start: 0 !important; }
  .content { padding: 0 !important; }
}

/* ══════════════ ترويسة الشاشة ══════════════ */
.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-2xl); margin-bottom: var(--sp-5xl); }
.pagehead h2 { font-size: var(--display-xs); line-height: var(--display-xs-lh); margin-bottom: var(--sp-xs); color: var(--text); }
.pagehead p { font-size: var(--text-sm); color: var(--text-3); margin: 0; }

/* ══════════════ بطاقات الإحصاء ══════════════ */
.stats { display: grid; gap: var(--sp-2xl); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs); padding: var(--sp-3xl); position: relative; overflow: hidden;
}
.stat-tile::before { content: ''; position: absolute; inset-block: 0; inset-inline-end: 0; width: 4px; background: var(--tone, var(--brand)); }
.stat-tile__num { font-size: var(--display-sm); line-height: var(--display-sm-lh); font-weight: 700; color: var(--tone, var(--text)); font-variant-numeric: tabular-nums; }
.stat-tile__lbl { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.stat-tile__ico { position: absolute; inset-block-start: var(--sp-3xl); inset-inline-end: var(--sp-3xl); font-size: 22px; color: var(--tone, var(--brand)); opacity: .28; }

/* ══════════════ بطاقات القائمة ══════════════ */
.tiles { display: grid; gap: var(--sp-3xl); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tile { display: block; text-align: center; padding: var(--sp-5xl) var(--sp-3xl); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); transition: all .2s ease; }
.tile:hover { box-shadow: var(--shadow-md); border-color: var(--brand-soft-border); transform: translateY(-2px); text-decoration: none; }
.tile__ico { width: 64px; height: 64px; margin: 0 auto var(--sp-2xl); border-radius: var(--r-lg); background: var(--sa-900); color: #FFFFFF; display: grid; place-items: center; font-size: 26px; }
.tile__ico img { width: 30px; height: 30px; object-fit: contain; filter: brightness(0) invert(1); }
.tile h3 { font-size: var(--text-md); line-height: var(--text-md-lh); font-weight: 700; margin-bottom: var(--sp-xs); color: var(--text); }
.tile p { font-size: var(--text-xs); color: var(--text-3); margin: 0; }

/* ══════════════ الألواح والجداول ══════════════ */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
.panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xl); padding: var(--sp-3xl); border-bottom: 1px solid var(--border); }
.panel__head h3 { font-size: var(--text-lg); line-height: var(--text-lg-lh); font-weight: 700; margin-inline-end: auto; margin-bottom: 0; display: flex; align-items: center; gap: var(--sp-lg); color: var(--text); }
.panel__body { padding: var(--sp-3xl); }
.panel__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-xl); padding: var(--sp-2xl) var(--sp-3xl); border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-3); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.dt { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--text-sm-lh); }
table.dt th, table.dt td { padding: var(--sp-lg) var(--sp-xl); text-align: start; vertical-align: middle; white-space: nowrap; }
table.dt th { font-weight: 700; color: var(--text-2); background: var(--surface-alt); border-bottom: 1px solid var(--border); font-size: var(--text-xs); }
table.dt td { border-bottom: 1px solid var(--border); color: var(--text-2); }
table.dt tbody tr:hover td { background: var(--surface-alt); }
table.dt tbody tr:last-child td { border-bottom: 0; }
table.dt .name { color: var(--brand-text); font-weight: 600; white-space: normal; min-width: 230px; }
table.dt .num { font-variant-numeric: tabular-nums; }
table.dt .wrap { white-space: normal; min-width: 140px; }

.dot { width: 9px; height: 9px; border-radius: var(--r-full); display: inline-block; flex: none; }

.pill { display: inline-flex; align-items: center; gap: var(--sp-sm); padding: 2px var(--sp-lg); border-radius: var(--r-full); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.pill--ok    { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-bd); }
.pill--warn  { background: var(--gold-bg);    color: var(--gold-fg);    border-color: var(--gold-bd); }
.pill--err   { background: var(--error-bg);   color: var(--error-fg);   border-color: var(--error-bd); }
.pill--info  { background: var(--info-bg);    color: var(--info-fg);    border-color: var(--info-bd); }
.pill--muted { background: var(--surface-alt);color: var(--text-2);     border-color: var(--border); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-lg); }
.toolbar select, .toolbar input[type="search"], .toolbar input[type="text"], .toolbar input[type="date"] {
  font-family: inherit; font-size: var(--text-sm); padding: var(--sp-md) var(--sp-xl);
  background: var(--field-bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-md);
}
.toolbar select:focus, .toolbar input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft-2); }

.pager { display: flex; gap: var(--sp-xs); }
.pager button, .pager a { min-width: 34px; height: 34px; padding: 0 var(--sp-lg); display: inline-grid; place-items: center; font-family: inherit; font-size: var(--text-sm); font-weight: 600; background: var(--surface); color: var(--text-2); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; }
.pager button[aria-current="page"], .pager a[aria-current="page"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.pager button:disabled, .pager a.is-disabled { opacity: .5; cursor: not-allowed; }

/* ══════════════ تفاصيل المشروع ══════════════ */
.kpis { display: grid; gap: var(--sp-2xl); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); padding: var(--sp-2xl); text-align: center; }
.kpi__lbl { font-size: var(--text-xs); color: var(--text-3); margin-bottom: var(--sp-md); }
.kpi__val { font-size: var(--text-xl); line-height: var(--text-xl-lh); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.kpi__val small { font-size: var(--text-xs); font-weight: 500; color: var(--text-3); }

.countdown { display: flex; gap: var(--sp-md); justify-content: center; }
.countdown div { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-md) var(--sp-lg); min-width: 56px; text-align: center; }
.countdown b { display: block; font-size: var(--text-lg); font-weight: 700; color: var(--brand-text); font-variant-numeric: tabular-nums; }
.countdown span { font-size: var(--text-2xs); color: var(--text-3); }

.timeline { padding: var(--sp-3xl) 0 var(--sp-2xl); }
.timeline__track { height: 8px; border-radius: var(--r-full); background: var(--track); position: relative; }
.timeline__fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: var(--r-full); background: var(--brand); }
.timeline__nodes { display: flex; justify-content: space-between; gap: var(--sp-lg); margin-top: -11px; }
.timeline__nodes > div { flex: 0 1 auto; max-width: 34%; text-align: center; }
.timeline__nodes > div:first-child { text-align: start; }
.timeline__nodes > div:last-child  { text-align: end; }
.timeline__nodes b { display: block; width: 14px; height: 14px; border-radius: var(--r-full); background: var(--surface); border: 3px solid var(--brand); margin-bottom: var(--sp-lg); }
.timeline__nodes > div:nth-child(2) b { margin-inline: auto; }
.timeline__nodes > div:last-child  b { margin-inline-start: auto; border-color: var(--border-strong); }
.timeline__nodes span { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--text); }
.timeline__nodes time { font-size: var(--text-xs); color: var(--text-3); }

.info-grid { display: grid; gap: var(--sp-2xl); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.info-item label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--text-3); margin-bottom: var(--sp-sm); }
.info-item .val { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-lg) var(--sp-xl); font-size: var(--text-sm); color: var(--text); min-height: 44px; }

.team { display: grid; gap: var(--sp-4xl); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.team__col h4 { font-size: var(--text-md); font-weight: 700; margin-bottom: var(--sp-2xl); display: flex; align-items: center; gap: var(--sp-lg); color: var(--text); }
.member { display: flex; align-items: center; gap: var(--sp-lg); padding: var(--sp-lg) 0; border-top: 1px solid var(--border); font-size: var(--text-sm); }
.member:first-of-type { border-top: 0; }
.member span { flex: 1; color: var(--text); font-weight: 500; }

.linklist { display: grid; gap: var(--sp-lg); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.linklist a { display: flex; align-items: center; gap: var(--sp-lg); padding: var(--sp-xl); background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--text-sm); font-weight: 600; color: var(--text-2); }
.linklist a:hover { background: var(--brand-soft); color: var(--brand-text); border-color: var(--brand-soft-border); text-decoration: none; }

/* ══════════════ لوحة المهام ══════════════ */
.kanban { display: grid; gap: var(--sp-3xl); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kcol { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden; }
.kcol__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-lg); padding: var(--sp-2xl); color: #FFFFFF; font-weight: 700; font-size: var(--text-sm); }
.kcol--doing .kcol__head { background: var(--info-600); }
.kcol--late  .kcol__head { background: var(--error-600); }
.kcol--done  .kcol__head { background: var(--sa-600); }
.kcol__count { background: rgba(255,255,255,.22); border-radius: var(--r-full); padding: 0 var(--sp-md); font-size: var(--text-xs); }
.kcol__body { padding: var(--sp-2xl); display: flex; flex-direction: column; gap: var(--sp-2xl); }
.tcard { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2xl); }
.tcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-lg); margin-bottom: var(--sp-md); }
.tcard__title { font-size: var(--text-md); font-weight: 700; color: var(--brand-text); }
.tcard__date { font-size: var(--text-xs); font-weight: 600; margin-bottom: var(--sp-lg); }
.tcard__text { font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--text-2); margin-bottom: var(--sp-2xl); }
.tcard__who { display: inline-flex; align-items: center; gap: var(--sp-md); font-size: var(--text-xs); font-weight: 600; background: var(--brand-soft); color: var(--brand-text); border: 1px solid var(--brand-soft-border); border-radius: var(--r-full); padding: 2px var(--sp-lg); }
.kempty { text-align: center; padding: var(--sp-5xl) var(--sp-2xl); font-size: var(--text-sm); color: var(--text-3); }

/* ══════════════ الرسوم ══════════════ */
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2xl); justify-content: center; margin-top: var(--sp-2xl); font-size: var(--text-xs); color: var(--text-2); }
.chart-legend span { display: inline-flex; align-items: center; gap: var(--sp-md); }
.bars { display: flex; align-items: flex-end; gap: var(--sp-2xl); height: 180px; padding-top: var(--sp-2xl); }
.bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-md); justify-content: flex-end; height: 100%; }
.bars b { width: 100%; max-width: 56px; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--tone, var(--brand)); }
.bars small { font-size: var(--text-xs); color: var(--text-3); }

/* ══════════════ النوافذ (BEM فقط — لا تمسّ .modal الخاصة ببوتستراب) ══════════════ */
.modal__box { width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-xl); }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-xl); padding: var(--sp-3xl); border-bottom: 1px solid var(--border); }
.modal__head h3 { font-size: var(--text-lg); font-weight: 700; margin: 0; color: var(--text); }
.modal__body { padding: var(--sp-3xl); }
.modal__foot { display: flex; flex-wrap: wrap; gap: var(--sp-lg); justify-content: flex-end; padding: var(--sp-3xl); border-top: 1px solid var(--border); }

/* ══════════════ التنبيه العائم ══════════════ */
.toast {
  position: fixed; inset-block-end: var(--sp-4xl); inset-inline-start: var(--sp-4xl); z-index: 1400;
  display: flex; align-items: center; gap: var(--sp-lg);
  background: var(--surface); border: 1px solid var(--success-bd); border-inline-start: 4px solid var(--success-500);
  border-radius: var(--r-md); box-shadow: var(--shadow-xl); padding: var(--sp-xl) var(--sp-3xl);
  font-size: var(--text-sm); font-weight: 600; color: var(--text);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s ease;
}
.toast.is-open { opacity: 1; visibility: visible; transform: none; }
.toast i { color: var(--success-fg); }

/* ══════════════ تسجيل الدخول ══════════════ */
.auth {
  min-height: 100vh; display: grid; place-items: center;
  padding: var(--sp-5xl) var(--sp-xl);
  background:
    radial-gradient(120% 90% at 80% 0%, var(--sa-100) 0%, transparent 55%),
    linear-gradient(180deg, var(--sa-25), var(--bg-alt));
  position: relative; overflow: hidden;
}
[data-theme="dark"] .auth {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(27,131,84,.20) 0%, transparent 55%),
    linear-gradient(180deg, #0A1A13, var(--gray-950));
}
.auth__pattern { position: absolute; inset: 0; opacity: .28; color: var(--hero-pattern); pointer-events: none; overflow: hidden; }
.auth__pattern svg { width: 100%; height: 100%; display: block; }
.auth__grid { position: relative; width: 100%; max-width: 1000px; display: grid; gap: var(--sp-8xl); align-items: center; }
@media (min-width: 900px) { .auth__grid { grid-template-columns: 1fr 420px; } }

.auth__brand { text-align: center; }
@media (min-width: 900px) { .auth__brand { text-align: start; } }
.auth__brand img { width: 92px; height: auto; margin-bottom: var(--sp-3xl); }
.auth__org { font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--sp-xs); }
.auth__name { font-size: var(--display-sm); line-height: var(--display-sm-lh); font-weight: 700; margin-bottom: var(--sp-md); color: var(--text); }
.auth__tag { font-size: var(--text-md); color: var(--brand-text); font-weight: 600; }
.auth__vision { margin-top: var(--sp-6xl); font-size: var(--text-xs); color: var(--text-3); display: flex; gap: var(--sp-lg); align-items: center; justify-content: center; }
@media (min-width: 900px) { .auth__vision { justify-content: flex-start; } }

.auth__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-xl); padding: var(--sp-6xl) var(--sp-4xl); }
.auth__card h1 { font-size: var(--text-xl); line-height: var(--text-xl-lh); margin-bottom: var(--sp-4xl); display: flex; align-items: center; gap: var(--sp-lg); color: var(--text); }
.auth__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-xl); margin-bottom: var(--sp-3xl); font-size: var(--text-sm); }
.auth__meta label { display: inline-flex; align-items: center; gap: var(--sp-md); color: var(--text-2); font-weight: 500; margin: 0; }
.auth__meta input[type="checkbox"] { width: auto; }

/* أيقونة زر السمة في شريط التطبيق */
[data-theme="light"] #themeToggle .icon-sun,
[data-theme="dark"]  #themeToggle .icon-moon,
[data-theme="light"] .icon-sun,
[data-theme="dark"]  .icon-moon { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   ربط بنية الشاشات القائمة بمكوّنات demo2-dga
   يجعل كل شاشات Views تعرض هوية التصميم نفسها دون تغيير Razor
   ══════════════════════════════════════════════════════════════════════ */

/* ── عنوان الشاشة الأعلى → pagehead ── */
.content > .container-fluid > .page-card__title,
.content > .container-fluid > h1,
.content > .container-fluid > h2 {
  display: block;
  text-align: start;
  font-size: var(--display-xs);
  line-height: var(--display-xs-lh);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
  border: 0;
  padding: 0;
  margin: 0 0 var(--sp-5xl);
}

/* ── page-card → panel ── */
.page-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--sp-3xl);
  margin: 0 0 var(--sp-3xl);
  max-width: none;
}
.page-card + .page-card { margin-top: 0; }
@media (min-width: 768px) { .page-card { padding: var(--sp-3xl); } }
@media (min-width: 1200px) { .page-card { padding: var(--sp-3xl); } }

/* عنوان داخل البطاقة → panel__head */
.page-card > .page-card__title,
.page-card .page-card__title,
.SideTitile {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: start;
  gap: var(--sp-lg);
  font-size: var(--text-lg);
  line-height: var(--text-lg-lh);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0;
  margin: calc(var(--sp-3xl) * -1) calc(var(--sp-3xl) * -1) var(--sp-3xl);
  padding: var(--sp-3xl);
  border-bottom: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.page-card .page-card__title .icon-chip { flex: none; }

/* ── الجداول داخل الشاشات → table.dt ── */
.page-card table,
.report table,
.panel table,
.card table,
table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  background: transparent;
}
.page-card table > thead > tr > th,
.report table > thead > tr > th,
.panel table > thead > tr > th,
.card table > thead > tr > th,
table.table > thead > tr > th {
  padding: var(--sp-lg) var(--sp-xl);
  text-align: start;
  vertical-align: middle;
  white-space: nowrap;
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--text-2);
  background: var(--surface-alt);
  border: 0;
  border-bottom: 1px solid var(--border);
}
.page-card table > tbody > tr > td,
.report table > tbody > tr > td,
.panel table > tbody > tr > td,
.card table > tbody > tr > td,
table.table > tbody > tr > td {
  padding: var(--sp-lg) var(--sp-xl);
  text-align: start;
  vertical-align: middle;
  white-space: nowrap;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
}
.page-card table > tbody > tr:hover > td,
.panel table > tbody > tr:hover > td,
table.table > tbody > tr:hover > td { background: var(--surface-alt); }
.page-card table > tbody > tr:last-child > td,
table.table > tbody > tr:last-child > td { border-bottom: 0; }

/* جدول ملتصق بحواف البطاقة تمامًا كما في demo2-dga */
.page-card > table,
.page-card > .table,
.page-card > .table-responsive,
.page-card > .dataTables_wrapper {
  margin-inline: calc(var(--sp-3xl) * -1);
  width: calc(100% + var(--sp-3xl) * 2);
  max-width: none;
}
.page-card > table:last-child,
.page-card > .table:last-child { margin-bottom: calc(var(--sp-3xl) * -1); }

/* أعمدة الإجراءات */
.cell-actions { display: flex; align-items: center; gap: var(--sp-sm); white-space: nowrap; }

/* ── بطاقات الاختصارات القديمة (bigBtn) → tile ── */
.bigBtn {
  width: 64px !important;
  height: 64px;
  margin: 0 auto var(--sp-2xl) !important;
  padding: 0 !important;
  border-radius: var(--r-lg);
  background: var(--sa-900);
  color: #FFFFFF;
  display: grid;
  place-items: center;
}
.bigBtn .btnIcon,
.btnIcon {
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.bigBtnTxt { text-align: center; }
.bigBtnTxt p {
  font-size: var(--text-md) !important;
  line-height: var(--text-md-lh);
  font-weight: 700;
  color: var(--text);
  margin: 0 !important;
}
/* الحاوية الأب تأخذ مظهر .tile */
.dropdown > a:has(.bigBtn),
a:has(> .bigBtn) {
  display: block;
  text-align: center;
  padding: var(--sp-5xl) var(--sp-3xl);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  transition: all .2s ease;
}
.dropdown > a:has(.bigBtn):hover,
a:has(> .bigBtn):hover {
  box-shadow: var(--shadow-md);
  border-color: var(--brand-soft-border);
  transform: translateY(-2px);
  text-decoration: none;
}
.dropdown > a:has(.bigBtn)::after { display: none; }

.bigBtnLink {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  padding: var(--sp-lg) var(--sp-xl);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-2);
}
.bigBtnLink:hover { background: var(--brand-soft); color: var(--brand-text); text-decoration: none; }
.bigBtnLink img { width: 18px; height: 18px; object-fit: contain; }

/* ── الترقيم → pager ── */
.pagination { display: flex; gap: var(--sp-xs); list-style: none; padding: 0; margin: 0; }
.pagination .page-item .page-link,
.pagination .page-link {
  min-width: 34px; height: 34px; padding: 0 var(--sp-lg);
  display: inline-grid; place-items: center;
  font-family: inherit; font-size: var(--text-sm); font-weight: 600;
  background: var(--surface); color: var(--text-2);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.pagination .page-item.active .page-link {
  background: var(--brand); color: var(--on-brand); border-color: var(--brand);
}
.pagination .page-item.disabled .page-link { opacity: .5; }

/* ── مكوّنات مستخدمة في بعض الشاشات وتحتاج تعريفًا ── */
.field { margin-bottom: var(--sp-2xl); }
.field > label {
  display: flex; align-items: center; gap: var(--sp-md);
  font-size: var(--text-sm); font-weight: 600; color: var(--text-2);
  margin-bottom: var(--sp-sm);
}
.field > input, .field > select, .field > textarea {
  width: 100%; font-family: inherit; font-size: var(--text-sm);
  padding: var(--sp-lg) var(--sp-xl);
  background: var(--field-bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
}
.field > input:focus, .field > select:focus, .field > textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft-2);
}
.hint { font-size: var(--text-xs); color: var(--text-3); }
.req-mark { color: var(--error-fg); font-weight: 700; }

.btn--primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); }
.btn--lg { padding: var(--sp-xl) var(--sp-4xl); font-size: var(--text-md); }
.btn--block { display: flex; width: 100%; justify-content: center; }

.addIcon {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--brand-soft); color: var(--brand-text);
  border: 1px solid var(--brand-soft-border);
}
.addIcon:hover { background: var(--brand); color: var(--on-brand); text-decoration: none; }

/* ── التقارير → panel ── */
.report {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--sp-3xl);
  margin: 0 0 var(--sp-3xl);
}
.report__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xl);
  margin: calc(var(--sp-3xl) * -1) calc(var(--sp-3xl) * -1) var(--sp-3xl);
  padding: var(--sp-3xl);
  border-bottom: 1px solid var(--border);
}
.report__head h1, .report__head h2, .report__head h3 {
  font-size: var(--text-lg); line-height: var(--text-lg-lh);
  font-weight: 700; margin: 0; margin-inline-end: auto; color: var(--text);
}

/* ── نافذة بوتستراب بهوية demo2-dga ── */
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
}
.modal-header {
  padding: var(--sp-3xl); border-bottom: 1px solid var(--border);
  align-items: center;
}
.modal-header .modal-title { font-size: var(--text-lg); font-weight: 700; color: var(--text); }
.modal-body { padding: var(--sp-3xl); }
.modal-footer { padding: var(--sp-3xl); border-top: 1px solid var(--border); gap: var(--sp-lg); }

/* ══════════════════════════════════════════════════════════════════════
   ضبط اللوح بعد تحويل الشاشات إلى panel / panel__head / panel__body
   ══════════════════════════════════════════════════════════════════════ */

.panel { margin-bottom: var(--sp-3xl); }
.panel:last-child { margin-bottom: 0; }
.panel__head h3 { font-size: var(--text-lg); line-height: var(--text-lg-lh); }
.panel__body > *:first-child { margin-top: 0; }
.panel__body > *:last-child  { margin-bottom: 0; }

/* الجدول يمتد إلى حواف اللوح تمامًا كما في demo2-dga */
.panel__body > .table-scroll,
.panel__body > .dataTables_wrapper {
  margin-inline: calc(var(--sp-3xl) * -1);
  width: calc(100% + var(--sp-3xl) * 2);
  max-width: none;
}
.panel__body > .table-scroll:last-child { margin-bottom: calc(var(--sp-3xl) * -1); }
.panel__body > .table-scroll:first-child { margin-top: calc(var(--sp-3xl) * -1); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { margin-bottom: 0; }

/* هوية جدول demo2-dga مطبّقة على كل جداول النظام */
table.dt { width: 100%; border-collapse: collapse; background: transparent; font-size: var(--text-sm); line-height: var(--text-sm-lh); }
table.dt > thead > tr > th,
table.dt > tbody > tr > th {
  padding: var(--sp-lg) var(--sp-xl); text-align: start; vertical-align: middle; white-space: nowrap;
  font-weight: 700; font-size: var(--text-xs); color: var(--text-2);
  background: var(--surface-alt); border: 0; border-bottom: 1px solid var(--border);
}
table.dt > tbody > tr > td,
table.dt > tfoot > tr > td {
  padding: var(--sp-lg) var(--sp-xl); text-align: start; vertical-align: middle; white-space: nowrap;
  color: var(--text-2); background: transparent; border: 0; border-bottom: 1px solid var(--border);
}
table.dt > tbody > tr:hover > td { background: var(--surface-alt); }
table.dt > tbody > tr:last-child > td { border-bottom: 0; }
table.dt td .btn-sm { white-space: nowrap; }

/* شريط أدوات DataTables داخل اللوح */
.panel__body .dataTables_wrapper .dataTables_length,
.panel__body .dataTables_wrapper .dataTables_filter,
.panel__body .dataTables_wrapper .dataTables_info,
.panel__body .dataTables_wrapper .dataTables_paginate {
  padding-inline: var(--sp-3xl);
  font-size: var(--text-sm);
  color: var(--text-3);
}

/* ترويسة اللوح: زر الإضافة على اليسار مثل demo2-dga */
.panel__head > .toolbar,
.panel__head > .btn,
.panel__head > a.btn { margin-inline-start: auto; }

/* أزرار الإضافة المتوسّطة سابقًا → شريط أدوات في الأعلى */
.panel__body > .text-center:first-child:has(> .btn) {
  display: flex; justify-content: flex-end; gap: var(--sp-lg);
  margin-bottom: var(--sp-2xl);
}
.panel__body > .text-center:first-child:has(> .btn) .btn { margin-top: 0 !important; }

/* على الجوال: اللوح بحواف أقل */
@media (max-width: 767px) {
  .panel__head, .panel__body { padding: var(--sp-2xl); }
  .panel__body > .table-scroll,
  .panel__body > .dataTables_wrapper {
    margin-inline: calc(var(--sp-2xl) * -1);
    width: calc(100% + var(--sp-2xl) * 2);
  }
  .panel__body > .table-scroll:last-child  { margin-bottom: calc(var(--sp-2xl) * -1); }
  .panel__body > .table-scroll:first-child { margin-top: calc(var(--sp-2xl) * -1); }
}

/* أزرار الإجراءات داخل خلايا الجدول */
table.dt td > .btn + .btn,
.panel table td > .btn + .btn { margin-inline-start: var(--sp-sm); }
table.dt td:last-child { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════
   شاشات القوائم الرئيسية (bigBtn) → شبكة tiles كما في demo2-dga
   ══════════════════════════════════════════════════════════════════════ */
.row:has(.bigBtn) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3xl);
  margin: 0 0 var(--sp-3xl) !important;
  width: 100% !important;
  max-width: none !important;
}
.row:has(.bigBtn) > [class*="col-"] {
  max-width: none; width: auto; flex: none; padding: 0;
}
.row:has(.bigBtn) .dropdown { margin: 0 !important; position: relative; }
.row:has(.bigBtn) .align-items-center { display: block; }

/* القائمة المنسدلة بهوية demo2-dga */
.dropdown-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--sp-md);
  min-width: 240px;
  color: var(--text);
}
.dropdown-item {
  display: flex; align-items: center; gap: var(--sp-lg);
  padding: var(--sp-lg) var(--sp-xl);
  border-radius: var(--r-md);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--text-2); white-space: normal;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--brand-soft); color: var(--brand-text);
}
.dropdown-divider { border-top: 1px solid var(--border); margin: var(--sp-md) 0; }

/* ══════════════════════════════════════════════════════════════════════
   الحقول والأزرار — بنية demo2-dga / dga.css الحقيقية
   ══════════════════════════════════════════════════════════════════════ */

.field { margin-bottom: var(--sp-2xl); }
.field > label,
.field label:not(.form-check-label) {
  display: block;
  font-size: var(--text-sm); line-height: var(--text-sm-lh);
  font-weight: 600; color: var(--text);
  margin-bottom: var(--sp-sm);
}
.field label i { margin-inline-end: var(--sp-sm); color: var(--text-3); }
.field .req-mark { color: var(--error-600); }

.field input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  width: 100%; font-family: inherit;
  font-size: var(--text-md); line-height: var(--text-md-lh);
  padding: var(--sp-lg) var(--sp-xl);
  background: var(--field-bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--gray-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft-2);
}
.field input[disabled], .field select[disabled], .field textarea[readonly] {
  background: var(--surface-alt); color: var(--text-3); cursor: not-allowed;
}
.field input[type="checkbox"], .field input[type="radio"] {
  width: 18px; height: 18px; accent-color: var(--brand); vertical-align: middle;
}
.field input[type="file"] {
  padding: var(--sp-md); background: var(--surface-alt); cursor: pointer;
}
.field .hint { font-size: var(--text-xs); line-height: var(--text-xs-lh); color: var(--text-3); margin-top: var(--sp-sm); }
.field-error, .field .field-error {
  display: block; font-size: var(--text-xs); line-height: var(--text-xs-lh);
  color: var(--error-fg); margin-top: var(--sp-sm); font-weight: 500;
}
.field:has(.field-error:not(:empty)) input,
.field:has(.field-error:not(:empty)) select,
.field:has(.field-error:not(:empty)) textarea { border-color: var(--error-500); }

/* حقول select2 داخل .field */
.field .select2-container { width: 100% !important; }

/* شريط أزرار النموذج */
.form-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-lg);
  margin-top: var(--sp-3xl); padding-top: var(--sp-2xl);
  border-top: 1px solid var(--border);
}
.form-actions > .float-left,
.form-actions > .float-right { float: none !important; margin-inline-start: auto; }
.form-actions input[type="submit"] { width: auto; }

/* عائلة أزرار dga الكاملة */
.btn--primary   { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); }
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--surface-alt); border-color: var(--text-3); color: var(--text); }
.btn--danger    { background: var(--error-600); color: #FFFFFF; border-color: var(--error-600); }
.btn--danger:hover { background: var(--error-700); border-color: var(--error-700); color: #FFFFFF; }
.btn--warning   { background: var(--gold-600); color: var(--gray-950); border-color: var(--gold-600); }
.btn--info      { background: var(--info-600); color: #FFFFFF; border-color: var(--info-600); }
.btn--ghost     { background: transparent; color: var(--brand-text); border-color: transparent; }
.btn--ghost:hover { background: var(--brand-soft); }
.btn--sm        { padding: var(--sp-sm) var(--sp-lg); font-size: var(--text-xs); line-height: var(--text-xs-lh); }
.btn--sm i      { font-size: 13px; }
.btn--lg        { padding: var(--sp-xl) var(--sp-4xl); font-size: var(--text-md); line-height: var(--text-md-lh); }
.btn--block     { width: 100%; }
.btn:disabled   { opacity: .6; cursor: not-allowed; }

/* شبكة حقول من عمودين على الشاشات الواسعة */
@media (min-width: 900px) {
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-3xl); }
  .form-grid > .field--wide { grid-column: 1 / -1; }
}

/* ══ ضبط النماذج داخل الألواح ══ */
/* نموذج محبوس في عمود ضيّق من السقالة القديمة → عرض كامل */
.panel__body > .row:has(> [class*="col-"] > form):not(:has(.row)) { margin-inline: 0; }
.panel__body > .row > [class*="col-md-"]:only-child,
.panel__body > .row > [class*="col-lg-"]:only-child,
.panel__body > .row > [class*="col-sm-"]:only-child {
  flex: 0 0 100%; max-width: 100%; padding-inline: 0;
}
@media (min-width: 900px) {
  .panel__body > .row > [class*="col-md-"]:only-child:has(form) { max-width: 720px; }
}

/* صف الأزرار المتبقّي في نهاية الشاشة */
.panel__body > div:last-child:not([class]):has(> .btn) {
  display: flex; flex-wrap: wrap; gap: var(--sp-lg);
  margin-top: var(--sp-3xl); padding-top: var(--sp-2xl);
  border-top: 1px solid var(--border);
}
.panel__body > p:has(> .btn) { display: flex; flex-wrap: wrap; gap: var(--sp-lg); margin: 0 0 var(--sp-2xl); }

/* ملخّص أخطاء التحقّق */
[asp-validation-summary] .text-danger,
.validation-summary-errors {
  display: block; background: var(--error-bg); border: 1px solid var(--error-bd);
  color: var(--error-fg); border-radius: var(--r-md);
  padding: var(--sp-lg) var(--sp-xl); margin-bottom: var(--sp-2xl);
  font-size: var(--text-sm); font-weight: 500;
}
.validation-summary-errors ul { margin: 0; padding-inline-start: var(--sp-2xl); }
.validation-summary-valid { display: none; }

/* ══ تنبيه داخل اللوح (callout) ══ */
.callout {
  display: flex; align-items: flex-start; gap: var(--sp-lg);
  padding: var(--sp-2xl);
  background: var(--brand-soft); border: 1px solid var(--brand-soft-border);
  border-radius: var(--r-md);
  font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--text-2);
  margin-bottom: var(--sp-3xl);
}
.callout i { font-size: 16px; color: var(--brand-text); margin-top: 2px; }
.callout--danger  { background: var(--error-bg);   border-color: var(--error-bd);   color: var(--error-fg); }
.callout--danger i{ color: var(--error-fg); }
.callout--warn    { background: var(--gold-bg);    border-color: var(--gold-bd);    color: var(--gold-fg); }
.callout--warn i  { color: var(--gold-fg); }
.callout--info    { background: var(--info-bg);    border-color: var(--info-bd);    color: var(--info-fg); }
.callout--info i  { color: var(--info-fg); }

/* التنبيهات القياسية بهوية demo2-dga */
.alert {
  display: flex; align-items: flex-start; gap: var(--sp-lg);
  padding: var(--sp-2xl); border-radius: var(--r-md);
  font-size: var(--text-sm); line-height: var(--text-sm-lh); font-weight: 500;
  border: 1px solid transparent;
}
.alert-danger  { background: var(--error-bg);   color: var(--error-fg);   border-color: var(--error-bd); }
.alert-success { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-bd); }
.alert-warning { background: var(--gold-bg);    color: var(--gold-fg);    border-color: var(--gold-bd); }
.alert-info    { background: var(--info-bg);    color: var(--info-fg);    border-color: var(--info-bd); }

/* ══════════════════════════════════════════════════════════════════════
   مكوّنات إضافية للهوية الجديدة
   ══════════════════════════════════════════════════════════════════════ */

/* لوح مركزي لصفحات الحالة (خروج، رفض وصول، تأكيد) */
.panel--center { max-width: 560px; margin-inline: auto; }
.panel--center .panel__body { padding: var(--sp-8xl) var(--sp-4xl); }
.state__title { font-size: var(--display-xs); line-height: var(--display-xs-lh); font-weight: 700; color: var(--text); margin: var(--sp-3xl) 0 var(--sp-md); }
.state__text  { font-size: var(--text-md); line-height: var(--text-md-lh); color: var(--text-3); margin-bottom: var(--sp-4xl); }

.icon-chip--xl { width: 88px; height: 88px; font-size: 34px; margin-inline: auto; }
.icon-chip--danger { background: var(--error-bg); color: var(--error-fg); border-color: var(--error-bd); }
.icon-chip--warn   { background: var(--gold-bg);  color: var(--gold-fg);  border-color: var(--gold-bd); }

.callout--ok { background: var(--success-bg); border-color: var(--success-bd); color: var(--success-fg); }
.callout--ok i { color: var(--success-fg); }
.callout a { color: inherit; text-decoration: underline; font-weight: 700; }

.form-actions--center { justify-content: center; border-top: 0; padding-top: 0; }

/* لوح النموذج بعرض مريح */
.panel--form { max-width: 880px; }
.panel--danger { border-color: var(--error-bd); }
.panel--danger .panel__head { background: var(--error-bg); border-bottom-color: var(--error-bd); }
.panel--danger .panel__head h3 { color: var(--error-fg); }

/* عنوان فرعي داخل اللوح */
.subhead {
  font-size: var(--text-md); font-weight: 700; color: var(--text);
  margin: var(--sp-4xl) 0 var(--sp-2xl); padding-top: var(--sp-3xl);
  border-top: 1px solid var(--border);
}
.panel__body > .subhead:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* بطاقة الحساب وقائمة الإعدادات */
.avatar--xl { width: 96px; height: 96px; font-size: 34px; margin: 0 auto var(--sp-2xl); }
.account-card__name { font-size: var(--text-xl); line-height: var(--text-xl-lh); font-weight: 700; color: var(--text); margin: 0 0 var(--sp-xs); }
.account-nav { border-top: 1px solid var(--border); padding: var(--sp-lg) !important; }
.snav--settings { padding: 0; }
.snav--settings a { margin-bottom: var(--sp-xs); }

/* حقل البحث في شريط أدوات اللوح */
.table-filter {
  min-width: 200px; font-family: inherit; font-size: var(--text-sm);
  padding: var(--sp-md) var(--sp-xl);
  background: var(--field-bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
}
.table-filter:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft-2); }

/* تذييل اللوح */
.panel__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-xl); padding: var(--sp-2xl) var(--sp-3xl); border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-3); }

/* ترويسة الصفحة: زر رئيسي على اليسار */
.pagehead > .toolbar { margin-inline-start: auto; }

/* ══ النماذج في عمودين على الشاشات الواسعة (بلا تغيير في Razor) ══ */
@media (min-width: 992px) {
  .panel--form .panel__body form > .field,
  .panel--form .panel__body > form .field {
    display: inline-block;
    width: calc(50% - var(--sp-xl));
    vertical-align: top;
    margin-inline-end: var(--sp-xl);
  }
  .panel--form .panel__body form > .field:has(textarea),
  .panel--form .panel__body form > .field--wide {
    display: block; width: 100%; margin-inline-end: 0;
  }
  .panel--form .panel__body form > .form-actions { display: flex; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   تفاصيل المشروع — أعيد بناؤها على رموز التصميم (كانت داخل الصفحة)
   ══════════════════════════════════════════════════════════════════════ */

/* أقسام الصفحة تصبح ألواحًا */
.project_section,
#proj-files, #proj-cash, #proj-extract, #proj-info, #proj-domain, #proj-team, #project_top {
  display: block !important;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--sp-4xl) var(--sp-3xl);
  margin-bottom: var(--sp-3xl);
}
.project_section img[src*="project_"],
.project_section img[src*="cash_folw"],
.project_section img[src*="extracts"],
.project_section img[src*="request"] { max-width: 180px; height: auto; opacity: .9; }

.project_header h3 {
  font-size: var(--display-xs); line-height: var(--display-xs-lh);
  font-weight: 700; color: var(--text); margin-bottom: var(--sp-lg);
}

/* بطاقات الملخّص → هوية kpi */
.proj_sum {
  background: var(--surface) !important;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: none;
}
.proj_sum .proj_sum {
  padding: var(--sp-2xl) !important;
  margin: 0 !important;
  text-align: center;
  background: var(--surface-alt) !important;
}
.proj_sum .proj_sum > div:first-child {
  font-size: var(--text-xs) !important;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: var(--sp-md);
}
.proj_sum .proj_sum > div:last-child {
  font-size: var(--text-xl) !important;
  line-height: var(--text-xl-lh);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.proj_sum .proj_sum > div span { font-size: var(--text-xs) !important; color: var(--text-3); font-weight: 500; }
.proj_sum hr { display: none; }
.proj_sum > .col, .proj_sum > [class*="col-"] { padding: var(--sp-sm); }

/* العدّادات */
.clock-card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-2xl) var(--sp-xl);
  text-align: center;
  box-shadow: none;
  color: var(--text);
}
.clock-label { color: var(--text-3); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--sp-lg); }
.clock-display {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-md);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-lg) var(--sp-md); box-shadow: none;
}
.clock-display span:first-child {
  font-family: inherit; font-size: var(--display-sm); line-height: 1; font-weight: 700;
  color: var(--brand-text); text-shadow: none; min-width: 56px;
  font-variant-numeric: tabular-nums;
}
.clock-unit { font-family: inherit; font-size: var(--text-xs); color: var(--text-3); font-weight: 600; }
.clock-footer { margin-top: var(--sp-lg); font-size: var(--text-2xs); color: var(--text-3); letter-spacing: .04em; }
.countdown-display { gap: var(--sp-sm); flex-wrap: wrap; }
.countdown-display .time-box {
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-md) var(--sp-lg); min-width: 52px; text-align: center;
}
.countdown-display .time-box span {
  display: block; font-size: var(--text-lg); font-weight: 700; color: var(--brand-text);
  font-variant-numeric: tabular-nums;
}
.countdown-display .time-box small { font-size: var(--text-2xs); color: var(--text-3); }
.countdown-display .separator { color: var(--text-3); font-weight: 700; }

@media (max-width: 767px) {
  .clock-display span:first-child { font-size: var(--text-xl); }
  .clock-card { padding: var(--sp-lg) var(--sp-md); }
  .clock-label { font-size: var(--text-xs); }
}

/* شريط المدة الزمنية */
.bar-wrapper {
  position: absolute; inset-inline: 0; top: 20px;
  width: 100%; height: 30px; display: flex; padding: 0;
  border-radius: var(--r-full); overflow: visible;
  border: 1px solid var(--border); background: var(--track);
  box-sizing: border-box;
}
.bar-original {
  position: absolute; top: 0; inset-inline-start: 0; height: 100%;
  background: var(--surface-alt); border-radius: var(--r-full); z-index: 1;
}
.bar-extension {
  position: absolute; top: 0; height: 100%; z-index: 2;
  background: repeating-linear-gradient(45deg,
      var(--gold-100) 0, var(--gold-100) 10px, var(--gold-500) 10px, var(--gold-500) 20px);
}
.extension-label {
  position: absolute; top: -24px; font-size: var(--text-xs); font-weight: 700;
  color: var(--gold-fg); white-space: nowrap; transform: translateX(50%); direction: rtl; z-index: 20;
}
.progress-overlay {
  position: absolute; top: 0; inset-inline-start: 0; height: 100%;
  pointer-events: none; overflow: hidden; border-radius: var(--r-full); z-index: 5;
}
.prog-time { width: 100%; height: 100%; background: var(--brand); opacity: .55; }

/* علامات التواريخ */
.marker {
  position: absolute; top: -3px; transform: translateX(50%);
  display: flex; flex-direction: column; align-items: center;
  direction: rtl; white-space: nowrap; z-index: 40; cursor: pointer;
  transition: transform .25s ease;
}
.marker .dot { border-radius: var(--r-full); border: 2px solid; margin-bottom: var(--sp-sm); box-sizing: border-box; transition: background-color .3s, border-color .3s; }
.marker:hover { transform: translateX(50%) scale(1.2); z-index: 100; }
.marker:hover .dot { box-shadow: var(--shadow-md); }
.marker.achieved .dot { box-shadow: 0 0 0 4px var(--brand-soft-2); }
.marker .label {
  font-size: var(--text-2xs); color: #FFFFFF; padding: 2px var(--sp-md);
  border-radius: var(--r-sm); white-space: nowrap; margin-top: var(--sp-xs); text-align: center;
}
.marker.achieved .label { background: var(--text); }
.marker.pending  .label { background: var(--gray-400); }
.marker .date-text { font-size: var(--text-2xs); margin-top: 2px; font-weight: 700; }
.marker.achieved .date-text { color: var(--text); }
.marker.pending  .date-text { color: var(--text-3); }

/* عناوين الأقسام داخل تفاصيل المشروع */
#proj-team h1, #proj-domain h1, #proj-info h1, #proj-files h1, #proj-cash h1, #proj-extract h1 {
  font-size: var(--text-lg); line-height: var(--text-lg-lh); font-weight: 700;
  color: var(--text); display: flex; align-items: center; gap: var(--sp-lg);
  margin-bottom: var(--sp-2xl);
}
#proj-domain h1.text-white { color: #FFFFFF; }
#proj-team td h4 { font-size: var(--text-sm); font-weight: 600; margin: 0; color: var(--text); }
#proj-team td h3 { font-size: var(--text-lg); margin: 0; color: var(--text-3); }
.project_section table.w-75 { width: 100% !important; }

/* أزقّة الفراغات القديمة */
.project_section br + br { display: none; }

/* ══ منع الإطار المزدوج: تقرير داخل لوح ══ */
.panel__body > .report,
.panel__body > .panel {
  border: 0; box-shadow: none; padding: 0; margin: 0; background: transparent;
}
.panel__body > .report > .report__head {
  margin: 0 0 var(--sp-3xl); padding: 0 0 var(--sp-2xl);
  border-bottom: 1px solid var(--border);
}

/* ورقة التقرير */
.report h4, .report h5, .report h6 { color: var(--text); }
.report__head h4 { font-size: var(--text-lg); font-weight: 700; margin: 0; }
.report__head h6 { font-size: var(--text-sm); color: var(--text-3); margin: 0; font-weight: 500; }
.report hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-2xl) 0; }

/* جدول الكميات: أرقام مصفوفة والوصف يلتف */
#DataTable td:nth-child(3),
#DataTable td:nth-child(4),
table.dt td.num { font-variant-numeric: tabular-nums; text-align: start; }
table.dt td:nth-child(2) { white-space: normal; min-width: 240px; }

/* أعمدة الإجراءات لا تنكمش */
table.dt th.w-25, table.dt td.w-25 { width: auto !important; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════
   طبقة التصحيحات النهائية — بناءً على المراجعة البصرية
   ══════════════════════════════════════════════════════════════════════ */

/* ── ١· الإشعارات: تُفتح إلى الداخل لا خارج الشاشة ── */
.appbar__tools .popover,
.appbar .popover {
  inset-inline-start: auto;
  inset-inline-end: 0;
  max-width: min(360px, calc(100vw - 24px));
}
[dir="rtl"] .appbar .popover { left: 0; right: auto; }
.popover { max-height: min(70vh, 520px); overflow-y: auto; }
.popover .notif { align-items: flex-start; }
.popover .notif p { white-space: normal; word-break: break-word; }

/* ── ٢· كروت الإحصائيات: الشريط في البداية والأيقونة في النهاية ── */
.stat-tile { padding-inline-end: 64px; }
.stat-tile::before { inset-inline-start: 0; inset-inline-end: auto; }
.stat-tile__ico  { inset-inline-start: auto; inset-inline-end: var(--sp-3xl); z-index: 0; }
[dir="rtl"] .stat-tile::before { right: 0; left: auto; }
[dir="rtl"] .stat-tile__ico    { left: var(--sp-3xl); right: auto; }
.stat-tile__num, .stat-tile__lbl { position: relative; z-index: 1; margin: 0; }
.stat-tile__num { margin-bottom: var(--sp-xs); }
.stat-tile:hover { box-shadow: var(--shadow-md); border-color: var(--brand-soft-border); text-decoration: none; }

/* ── ٣· ألوان الروابط: لا أزرق افتراضي ── */
.btn-link, a.btn-link, button.btn-link {
  color: var(--brand-text) !important;
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: 0;
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--r-md);
}
.btn-link:hover, .btn-link:focus {
  color: var(--brand-hover) !important;
  background: var(--brand-soft);
  text-decoration: none;
}
.text-primary { color: var(--brand-text) !important; }
.bg-primary { background-color: var(--brand) !important; }

/* ── ٤· شريط أقسام المشروع ── */
.project_link {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-md) !important;
  margin: 0 0 var(--sp-3xl) !important;
  font-size: var(--text-sm) !important;
  align-items: stretch;
}
.project_link > [class*="col"] { display: flex; padding: 0; }
.project_link_border { border-inline-start: 1px solid var(--border); }
.project_link button,
.project_link a {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-md);
  padding: var(--sp-lg) var(--sp-md) !important;
  font-family: inherit; font-size: var(--text-sm); font-weight: 600;
  color: var(--text-2) !important;
  background: none !important; border: 0 !important;
  border-radius: var(--r-md);
  text-decoration: none; cursor: pointer;
  transition: all .2s ease;
}
.project_link button:hover,
.project_link a:hover {
  background: var(--brand-soft) !important;
  color: var(--brand-text) !important;
}
.project_link button[aria-expanded="true"] { background: var(--brand-soft) !important; color: var(--brand-text) !important; }
.project_link button[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
.project_link .fa-chevron-down { font-size: 11px; transition: transform .2s ease; }

/* ── ٥· الشريط الزمني لا يتداخل مع البطاقات ── */
.project_section br { display: none; }
[class*="col-"]:has(> .bar-wrapper) {
  position: relative;
  flex: 0 0 100%; max-width: 100%;
  min-height: 118px;
  margin-bottom: var(--sp-2xl);
}
.bar-wrapper { top: 34px; }
.marker .label { max-width: 120px; white-space: normal; line-height: 1.3; }
.row:has(.bar-wrapper) > .col-1 { display: none; }

/* ── ٦· الجداول المباشرة داخل .row تأخذ العرض الكامل ── */
.row > .table-scroll,
.row > table,
.row > .dataTables_wrapper { flex: 1 1 100%; width: 100%; max-width: 100%; }

/* ── ٧· جداول التقارير: خلايا العناوين بهوية التصميم ── */
table.dt td.bg-secondary,
table.dt th.bg-secondary,
.report .bg-secondary {
  background: var(--surface-alt) !important;
  color: var(--text-2) !important;
  font-weight: 700;
  font-size: var(--text-xs);
  white-space: normal;
}
table.dt.table-bordered,
table.dt.table-bordered > thead > tr > th,
table.dt.table-bordered > tbody > tr > td {
  border: 1px solid var(--border) !important;
}
table.dt.border-dark, table.dt.border-dark td, table.dt.border-dark th { border-color: var(--border) !important; }
.report table.dt td { white-space: normal; }
.report table.dt + table.dt { margin-top: var(--sp-2xl); }
.report .row { margin-inline: 0; }

/* ── ٨· أقسام تفاصيل المشروع: أحجام نص منضبطة ── */
#proj-files span[style*="vw"],
#proj-cash span[style*="vw"],
#proj-extract span[style*="vw"],
.project_section span[style*="vw"],
.project_section div[style*="vw"],
.project_section p[style*="vw"] {
  font-size: var(--text-lg) !important;
  line-height: var(--text-lg-lh) !important;
  font-weight: 700;
}
.project_section p[style*="3rem"] { font-size: var(--display-xs) !important; line-height: var(--display-xs-lh) !important; }
.project_section p[style*="1.5rem"] { font-size: var(--text-md) !important; }
#proj-files, #proj-cash, #proj-extract, #proj-requests {
  background-size: 180px auto !important;
  background-position: left bottom !important;
}
#proj-files img, #proj-cash img, #proj-extract img { max-width: 120px !important; height: auto; }
#proj-domain { border-radius: var(--r-lg) !important; background-size: cover !important; }
#proj-domain h1, #proj-domain p { color: #FFFFFF !important; }
#proj-domain .smallMap { width: 100% !important; max-width: 520px; height: 320px !important; }
#proj-domain img[src*="domain_pin"] { width: 88px !important; }
#proj-domain .pt-5 { padding-top: var(--sp-3xl) !important; }

/* ── ٩· فريق العمل: أزرار حذف مصغّرة ── */
#proj-team .btn-danger, #proj-team .btn.btn-danger {
  padding: var(--sp-sm) var(--sp-md) !important;
  font-size: var(--text-xs) !important;
  background: var(--error-bg); color: var(--error-fg);
  border: 1px solid var(--error-bd);
  min-height: 30px;
}
#proj-team .btn-danger:hover { background: var(--error-600); color: #FFFFFF; }
#proj-team table.dt td { border-bottom: 1px solid var(--border); }
#proj-team .col h1 { justify-content: center; }

/* ── ١٠· الشبكة الافتراضية داخل .row لا تنكسر ── */
.panel__body > .row { margin-inline: 0; }

/* ══════════════════════════════════════════════════════════════════════
   توحيد أدوات Bootstrap اللونية مع نظام الألوان (تدعم السمة الداكنة)
   ══════════════════════════════════════════════════════════════════════ */
.bg-secondary  { background-color: var(--surface-alt) !important; color: var(--text-2) !important; }
.bg-light      { background-color: var(--surface-alt) !important; color: var(--text) !important; }
.bg-white      { background-color: var(--surface) !important;     color: var(--text) !important; }
.bg-dark       { background-color: var(--gray-900) !important;    color: #FFFFFF !important; }
.bg-success    { background-color: var(--success-bg) !important;  color: var(--success-fg) !important; }
.bg-danger     { background-color: var(--error-bg) !important;    color: var(--error-fg) !important; }
.bg-warning    { background-color: var(--gold-bg) !important;     color: var(--gold-fg) !important; }
.bg-info       { background-color: var(--info-bg) !important;     color: var(--info-fg) !important; }

.text-muted, .text-black-50 { color: var(--text-3) !important; }
.text-dark      { color: var(--text) !important; }
.text-secondary { color: var(--text-2) !important; }
.text-success   { color: var(--success-fg) !important; }
.text-danger    { color: var(--error-fg) !important; }
.text-warning   { color: var(--gold-fg) !important; }
.text-info      { color: var(--info-fg) !important; }
.text-white     { color: #FFFFFF !important; }

/* الأصناف اللونية داخل الجداول تبقى خفيفة ومقروءة */
table.dt td.bg-success, table.dt td.bg-danger,
table.dt td.bg-warning, table.dt td.bg-info { font-weight: 600; }

/* شارات الحالة */
.badge { font-size: var(--text-xs); font-weight: 700; padding: 3px var(--sp-lg); border-radius: var(--r-full); }
.badge.bg-danger, .badge-danger   { background: var(--error-600) !important;   color: #FFFFFF !important; }
.badge.bg-success, .badge-success { background: var(--success-600) !important; color: #FFFFFF !important; }
.badge.bg-warning, .badge-warning { background: var(--gold-600) !important;    color: var(--gray-950) !important; }
.badge.bg-info, .badge-info       { background: var(--info-600) !important;    color: #FFFFFF !important; }
.badge.bg-secondary, .badge-secondary { background: var(--gray-500) !important; color: #FFFFFF !important; }

/* الفواصل واللمسات العامة */
hr { border: 0; border-top: 1px solid var(--border); opacity: 1; }
.border, .border-dark, .border-secondary { border-color: var(--border) !important; }
.rounded, .rounded-lg { border-radius: var(--r-md) !important; }
.shadow, .shadow-sm { box-shadow: var(--shadow-xs) !important; }

/* ══════════════════════════════════════════════════════════════════════
   نظام الأيقونات — لون موحّد يرث من الحاوية بدل الألوان القسرية
   ══════════════════════════════════════════════════════════════════════ */

/* ١· داخل أي عنصر تفاعلي: الأيقونة ترث لون النص */
.btn i, .btn [class*="fa-"],
.iconbtn i, .iconbtn [class*="fa-"],
.snav a i, .dropdown-item i, .dropdown-toggle i,
.linklist a i, .pill i, .badge i,
.pagehead i, .toolbar i, .form-actions i,
.user-card i, .panel__head h3 i,
.project_link button i, .project_link a i,
.bigBtnLink i, .notif i, .tcard i, .member i,
table.dt td .btn i, table.dt td a i,
.page-link i, .pager i, .nav-link i,
.alert i, .auth__card h1 i, .auth__vision i {
  color: inherit !important;
}

/* ٢· الأيقونة المستقلة داخل النص ترث لون النص المحيط */
p > i, span > i, h1 > i, h2 > i, h3 > i, h4 > i, h5 > i, h6 > i,
td > i, th > i, label > i, li > i, legend > i {
  color: inherit;
}

/* ٣· أيقونات الإضافة: أخضر الهوية بدل الأصفر */
i.fa-square-plus, i.fa-circle-plus, i.fa-plus, i.fa-plus-circle {
  color: var(--brand) !important;
}
.btn i.fa-square-plus, .btn i.fa-circle-plus,
.btn i.fa-plus, .btn i.fa-plus-circle { color: inherit !important; }

button[style*="border:none"], button[style*="border: none"] {
  padding: var(--sp-sm) !important;
  border-radius: var(--r-md) !important;
  color: var(--brand-text) !important;
  transition: background .2s ease;
}
button[style*="border:none"]:hover, button[style*="border: none"]:hover {
  background: var(--brand-soft) !important;
}
button[style*="border:none"] i, button[style*="border: none"] i { font-size: 18px; }

/* ٤· أيقونة الإضافة الدائرية */
.addIcon {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: var(--r-md);
  background: var(--brand-soft) !important; color: var(--brand-text) !important;
  border: 1px solid var(--brand-soft-border);
  font-size: 15px !important;
}
.addIcon:hover { background: var(--brand) !important; color: var(--on-brand) !important; }

/* ٥· أيقونات دلالية تحتفظ بمعناها */
i.fa-trash, i.fa-trash-can, i.fa-circle-xmark, i.fa-xmark, i.fa-ban,
i.fa-triangle-exclamation { color: var(--error-fg); }
.btn i.fa-trash, .btn i.fa-trash-can, .btn i.fa-circle-xmark,
.btn i.fa-xmark, .btn i.fa-ban, .btn i.fa-triangle-exclamation,
.callout i, .alert i { color: inherit !important; }

i.fa-circle-check, i.fa-check, i.fa-floppy-disk { color: var(--success-fg); }
.btn i.fa-circle-check, .btn i.fa-check, .btn i.fa-floppy-disk { color: inherit !important; }

i.fa-pen-to-square, i.fa-pen, i.fa-edit { color: var(--gold-fg); }
.btn i.fa-pen-to-square, .btn i.fa-pen, .btn i.fa-edit { color: inherit !important; }

i.fa-circle-info, i.fa-info-circle, i.fa-eye { color: var(--info-fg); }
.btn i.fa-circle-info, .btn i.fa-info-circle, .btn i.fa-eye { color: inherit !important; }

i.fa-print, i.fa-file-pdf, i.fa-file-excel, i.fa-file-arrow-down { color: var(--text-2); }
.btn i.fa-print, .btn i.fa-file-pdf, .btn i.fa-file-excel, .btn i.fa-file-arrow-down { color: inherit !important; }

/* ٦· ألغِ text-white على الأيقونات خارج الخلفيات الملوّنة */
i.text-white, .fa-solid.text-white, .fa-regular.text-white { color: inherit !important; }
/* الأبيض فقط حيث الخلفية ممتلئة فعلًا — وإلا تختفي الأيقونة */
.bg-primary i, .bg-dark i, .kcol__head i,
.tile__ico i, .icon-chip--solid i,
.avatar i, .stat-tile i.text-white { color: #FFFFFF !important; }
/* في كل زر: الأيقونة ترث لون نص الزر مهما كانت حالته */
.btn i, .btn:hover i, .btn:focus i, .btn:active i,
a.btn i, button.btn i { color: inherit !important; }

/* ٧· أحجام موحّدة */
.btn i { font-size: 14px; }
.btn-sm i, .btn--sm i { font-size: 12px; }
.btn-lg i, .btn--lg i { font-size: 16px; }
.panel__head h3 i { font-size: 14px; }
.pagehead i { font-size: 15px; }
table.dt td i { font-size: 13px; }

/* ٨· أيقونات الصور (PNG/SVG) داخل الأزرار والبطاقات */
.btn img, .toolbar img { width: 16px; height: 16px; object-fit: contain; }
img[src*="/icons/"] { max-width: 100%; height: auto; }
.linklist img, .bigBtnLink img { width: 18px; height: 18px; object-fit: contain; }

/* ٩· أيقونة الطباعة الكبيرة في التقارير */
.report h1 a i, .d-print-none h1 i.fa-print {
  font-size: 20px !important; color: var(--text-2) !important;
}
.report h1:has(a i.fa-print) { margin: 0; }
.report h1 a { display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r-md); background: var(--surface-alt); border: 1px solid var(--border); }
.report h1 a:hover { background: var(--brand-soft); }
.report h1 a:hover i { color: var(--brand-text) !important; }

/* ══════════════════════════════════════════════════════════════════════
   الطباعة — ورقة A4 منسّقة للتقارير (التقرير اليومي وغيره)
   ══════════════════════════════════════════════════════════════════════ */

.print-only { display: none; }

@media print {

  @page { size: A4 portrait; margin: 12mm 10mm 14mm; }

  /* ── ورقة أحادية اللون: لا أزرق ولا رماديات مائلة للأزرق ── */
  :root, [data-theme="dark"], [data-theme="light"] {
    /* الأسطح والنص */
    --surface: #FFFFFF; --surface-alt: #F1F1F1; --surface-sunken: #E9E9E9;
    --bg: #FFFFFF; --bg-alt: #FFFFFF;
    --text: #000000; --text-2: #1A1A1A; --text-3: #444444;
    --border: #000000; --border-strong: #000000;
    --field-bg: #FFFFFF; --track: #E9E9E9;

    /* رماديات محايدة تمامًا (الأصلية مائلة للأزرق) */
    --gray-25: #FCFCFC;  --gray-50: #F9F9F9;  --gray-100: #F3F3F3; --gray-200: #E6E6E6;
    --gray-300: #D4D4D4; --gray-400: #9E9E9E; --gray-500: #6E6E6E; --gray-600: #515151;
    --gray-700: #3A3A3A; --gray-800: #232323; --gray-900: #141414; --gray-950: #000000;

    /* الهوية: أخضر داكن للترويسة فقط */
    --brand: #14573A; --brand-hover: #14573A; --brand-text: #14573A;
    --brand-soft: #F1F1F1; --brand-soft-2: #E9E9E9; --brand-soft-border: #BBBBBB;
    --on-brand: #FFFFFF;
    --sa-25:#FFFFFF; --sa-50:#F7F7F7; --sa-100:#EFEFEF; --sa-200:#DCDCDC;
    --sa-400:#4A7A62; --sa-500:#1F6B47; --sa-600:#14573A; --sa-700:#124A32;
    --sa-800:#0F3E2A; --sa-900:#0C3222; --sa-950:#082116;

    /* الألوان الدلالية → رمادي/أسود حتى لا تُطبع ملوّنة */
    --info-100:#EFEFEF;  --info-400:#8A8A8A; --info-500:#5A5A5A; --info-600:#3A3A3A; --info-700:#232323;
    --info-fg:#232323;   --info-bg:#F1F1F1;  --info-bd:#BBBBBB;
    --gold-100:#F2F2F2;  --gold-500:#7A7A7A; --gold-600:#5A5A5A; --gold-700:#3A3A3A;
    --gold-fg:#3A3A3A;   --gold-bg:#F1F1F1;  --gold-bd:#BBBBBB;
    --success-500:#2F6B4F; --success-600:#1F6B47; --success-700:#14573A;
    --success-fg:#14573A;  --success-bg:#F1F1F1; --success-bd:#BBBBBB;
    --error-500:#5A5A5A; --error-600:#3A3A3A; --error-700:#232323;
    --error-fg:#232323;  --error-bg:#F1F1F1;  --error-bd:#BBBBBB;
    --chip-bg:#F1F1F1;   --chip-fg:#232323;   --chip-bd:#BBBBBB;
    --hero-pattern:#E6E6E6;

    /* أسماء قديمة مستخدمة داخل الصفحات */
    --first-color:#14573A; --first-color-light:#1F6B47;
    --frist-color-light2:#124A32; --white-color:#FFFFFF;

    --shadow-xs: none; --shadow-sm: none; --shadow-md: none;
    --shadow-lg: none; --shadow-xl: none;
  }

  /* أدوات Bootstrap اللونية تُحيَّد عند الطباعة */
  .text-primary, .text-info, .text-secondary, .text-muted, .text-black-50,
  .text-dark, .text-white { color: #000000 !important; }
  .text-success { color: #14573A !important; }
  .text-danger, .text-warning { color: #232323 !important; }
  .bg-primary, .bg-info, .bg-dark, .bg-secondary, .bg-light, .bg-white,
  .bg-success, .bg-danger, .bg-warning {
    background: #F1F1F1 !important; color: #000000 !important;
  }
  .badge, .pill { background: #F1F1F1 !important; color: #000000 !important; border-color: #BBBBBB !important; }
  .pill--ok, .badge-success { color: #14573A !important; }
  svg, svg * { color: #000000 !important; }

  html, body {
    background: #FFFFFF !important; color: #000000 !important;
    font-size: 9.5pt !important; line-height: 1.35 !important;
  }

  /* ── إخفاء قشرة التطبيق وكل ما لا يُطبع ── */
  .sidebar, .appbar, .sidebar__scrim, .toast, .popover,
  .pagehead, .panel__head, .panel__foot,
  .toolbar, .table-filter, .form-actions, .pager, .pagination,
  .modal, .modal-backdrop, .dataTables_length, .dataTables_filter,
  .dataTables_info, .dataTables_paginate, .kempty,
  .d-print-none, .btn, button, .nav_scrim, .skip-link, .to-top {
    display: none !important;
  }

  .main { margin: 0 !important; min-height: 0 !important; }
  .content, .content > .container-fluid {
    padding: 0 !important; margin: 0 !important; max-width: none !important;
  }
  .panel, .panel__body, .report {
    border: 0 !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important;
    background: transparent !important; max-width: none !important;
  }

  /* ── ترويسة وتذييل يتكرران في كل صفحة ── */
  .print-only { display: block !important; }

  /* الترويسة تُطبع مرة واحدة في أعلى أول صفحة — الثابتة تتداخل في كروم */
  .report__head {
    position: static !important;
    display: block !important;
    border-bottom: 1.4pt solid #000000;
    padding-bottom: 2.5mm;
    margin-bottom: 5mm;
    break-inside: avoid; page-break-inside: avoid;
    break-after: avoid; page-break-after: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .report__head-brand {
    display: flex; align-items: center; justify-content: space-between; gap: 4mm;
  }
  .report__logo { height: 15mm !important; max-height: 15mm !important; width: auto !important; max-width: 35mm !important; object-fit: contain; flex: none; }
  .report__org { text-align: center; line-height: 1.25; }
  .report__org strong { display: block; font-size: 11pt; font-weight: 700; color: #000; }
  .report__org span  { display: block; font-size: 8pt; color: #222; }
  .report__head-meta {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2mm;
    margin-top: 2mm; font-size: 8pt; color: #000;
    border-top: .4pt solid #999; padding-top: 1.5mm;
  }
  .report__head-meta b { font-size: 9pt; }

  /* التذييل يظهر مرة واحدة في نهاية التقرير */
  .report__foot {
    position: static !important;
    display: flex !important; justify-content: space-between;
    font-size: 7.5pt; color: #333;
    border-top: .4pt solid #999; padding-top: 1.5mm; margin-top: 5mm;
    order: 99;
  }
  .report { display: flex; flex-direction: column; }
  .report > .report__head { order: -1; }

  /* ── الأقسام: عنوان مطبوع + عدم الانقسام ── */
  .report > div[id] {
    margin: 0 0 4mm !important; padding: 0 !important;
    display: block !important; text-align: start !important;
    break-inside: auto; page-break-inside: auto;
  }
  /* الأقسام القصيرة فقط تُمنع من الانقسام */
  .report > div[id]:not(:has(tbody tr:nth-child(6))) {
    break-inside: avoid; page-break-inside: avoid;
  }
  .report > div[id]::before { break-after: avoid; page-break-after: avoid; }
  .report > div[id]::before {
    display: block; font-size: 10pt; font-weight: 700; color: #000;
    margin: 0 0 1.5mm; padding: 0 0 1mm;
    border-bottom: .8pt solid #000;
  }
  #Visit::before            { content: "بيانات المتابعة اليومية"; }
  #NOTES::before            { content: "التوصيات والملاحظات"; }
  #ReceivedQuantity::before { content: "كميات الأعمال المنفذة"; }
  #Fine::before             { content: "الحسميات"; }
  #VisitCheckLists::before  { content: "القوائم التفقدية وحالات عدم المطابقة"; }
  #Supply::before           { content: "المعدات المتواجدة بالموقع"; }
  #Permit::before           { content: "التصاريح والتنسيق"; }
  #Environment::before      { content: "البيئة والصحة والسلامة"; }
  #Sample::before           { content: "العينات والاختبارات"; }
  #Team::before             { content: "طاقم المقاول المتواجد"; }
  #files::before            { content: "المرفقات"; }

  /* احترام d-print-none حتى داخل التقرير، وإخفاء الأقسام الفارغة */
  .report > div[id].d-print-none { display: none !important; }
  .report > div[id]:not(:has(table)):not(:has(img)) { display: none !important; }
  .report > div[id]:not(:has(table)):not(:has(img))::before { content: none !important; }

  /* عناوين h6 التي كانت تحمل أزرار الإضافة فقط */
  .report h6:empty, .report h6 { display: none !important; }
  .report__title { display: none !important; }

  /* ── الجداول ── */
  .table-scroll, .dataTables_wrapper, .table-responsive {
    overflow: visible !important; width: auto !important;
    margin: 0 !important; max-width: none !important;
  }
  table, table.dt, table.table {
    width: 100% !important; border-collapse: collapse !important;
    page-break-inside: auto; margin: 0 0 2mm !important;
    font-size: 8.5pt !important; table-layout: auto;
  }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr { page-break-inside: avoid; break-inside: avoid; page-break-after: auto; }
  table td, table th,
  table.dt > thead > tr > th, table.dt > tbody > tr > td {
    border: .6pt solid #000000 !important;
    padding: 1.4mm 1.8mm !important;
    font-size: 8.5pt !important;
    line-height: 1.3 !important;
    color: #000000 !important;
    background: #FFFFFF !important;
    white-space: normal !important;
    word-break: break-word; overflow-wrap: anywhere;
    vertical-align: middle;
  }
  table th, table thead th, .bg-secondary, table td.bg-secondary {
    background: #ECECEC !important; font-weight: 700 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  table tbody tr:hover td { background: #FFFFFF !important; }
  table hr { display: none; }
  table tr:has(> td[colspan] > hr) { display: none; }

  /* حقول القراءة داخل التقرير تُطبع كنص */
  .report textarea, .report input[type="text"], .report input:not([type="checkbox"]) {
    border: 0 !important; background: transparent !important;
    width: 100% !important; resize: none !important;
    font-family: inherit !important; font-size: 8.5pt !important;
    color: #000 !important; padding: 0 !important; overflow: visible !important;
  }
  .report textarea { height: auto !important; min-height: 14mm; }
  .report input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    width: 3mm; height: 3mm; border: .6pt solid #000 !important;
    border-radius: 0; vertical-align: -.4mm;
  }
  .report input[type="checkbox"]:checked::after {
    content: "✓"; display: block; font-size: 3mm; line-height: 3mm;
    text-align: center; color: #000;
  }

  /* ── الصور والتواقيع ── */
  .report img:not(.report__logo) { max-width: 100% !important; height: auto !important; }
  .report td img { max-height: 65mm !important; width: auto !important; margin: 0 auto; display: block; }
  .report__head .report__logo {
    height: 15mm !important; max-height: 15mm !important;
    width: auto !important; max-width: 32mm !important;
    object-fit: contain; flex: 0 0 auto; display: block !important;
  }
  .report__head-brand { align-items: center; min-height: 15mm; }
  .report img[src^="data:image"] { max-height: 16mm !important; width: auto !important; }

  /* ── التواقيع في نهاية الورقة ── */
  .report > .p-3:last-of-type { page-break-inside: avoid; margin-top: 4mm !important; }

  /* ── تنظيف عام ── */
  .row { display: block !important; margin: 0 !important; }
  .row > [class*="col"] { width: auto !important; max-width: none !important; padding: 0 !important; float: none !important; }
  a, a[href] { color: #000 !important; text-decoration: none !important; }
  a[href]::after { content: none !important; }
  hr { border-top: .6pt solid #000 !important; margin: 2mm 0 !important; }
  .card, .panel, .report, .info-item .val { box-shadow: none !important; }
  h1, h2, h3, h4, h5 { page-break-after: avoid; break-after: avoid; }
  .info-grid { display: block !important; }
  .info-item { display: flex; gap: 2mm; border-bottom: .4pt solid #ccc; padding: 1mm 0; }
  .info-item label { min-width: 45mm; font-weight: 700; margin: 0; }
  .info-item .val { border: 0 !important; background: transparent !important; padding: 0 !important; min-height: 0 !important; }

  /* ═════ تجاوزات نهائية — يجب أن تبقى آخر قواعد الطباعة ═════ */

  /* .row { display:block } كانت تُبطل .d-print-none — الإخفاء يفوز الآن */
  .d-print-none, .d-print-none *,
  .row.d-print-none, div.d-print-none, tr.d-print-none, td.d-print-none, th.d-print-none,
  .btn, button, .toolbar, .pagehead, .panel__head, .table-filter,
  .modal, .modal-backdrop, .popover, .sidebar, .appbar, .sidebar__scrim { display: none !important; }

  /* ما يجب أن يظهر في الطباعة رغم d-none */
  .d-print-block, .print-only, .report__head, .report__foot,
  .report__head-brand, .report__head-meta, .report__org { display: block !important; }
  .report__head-brand { display: flex !important; }
  .report__head-meta, .report__foot { display: flex !important; }

  /* الجداول العريضة تنكمش بدل أن تُقصّ */
  .report table { table-layout: auto !important; width: 100% !important; }
  .report table td, .report table th {
    word-break: break-word; overflow-wrap: anywhere; hyphens: auto;
  }
  .report table:has(tr > *:nth-child(6)) td,
  .report table:has(tr > *:nth-child(6)) th { font-size: 7.5pt !important; padding: 1mm !important; }
  .report table:has(tr > *:nth-child(9)) td,
  .report table:has(tr > *:nth-child(9)) th { font-size: 7pt !important; padding: .8mm !important; }

  /* الأقسام لا تحمل زخرفة بطاقة عند الطباعة */
  .report > div[id], .report__section {
    background: transparent !important; border: 0 !important;
    border-radius: 0 !important; box-shadow: none !important;
  }
  .report > div[id]::before { background: transparent !important; }
  #dailyPhotos::before { content: "صور الأعمال اليومية"; }
}

/* ══════════════════════════════════════════════════════════════════════
   تفاصيل المشروع — الهوية الجديدة
   ══════════════════════════════════════════════════════════════════════ */

#project_top { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0 0 var(--sp-3xl); }

/* ── ترويسة المشروع ── */
.proj-head { margin-bottom: var(--sp-3xl); }
.proj-head__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-xl); margin-bottom: var(--sp-2xl); }
.proj-head__bar .btn { margin-inline-start: auto; }
.proj-head__bar .pill { margin-inline-start: 0; margin-inline-end: auto; font-size: var(--text-sm); padding: 4px var(--sp-xl); }
.proj-head__name { font-size: var(--display-xs); line-height: var(--display-xs-lh); font-weight: 700; color: var(--text); margin: 0 0 var(--sp-xs); }
.proj-head__meta { font-size: var(--text-sm); color: var(--text-3); margin: 0; }
.proj-head__meta span { color: var(--text-3); }

/* ── بطاقات المدة ── */
.proj-stats { display: grid; gap: var(--sp-2xl); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: var(--sp-2xl); }
.proj-stat .panel__body { padding: var(--sp-3xl); text-align: center; }
.proj-stat__label { font-size: var(--text-xs); font-weight: 600; color: var(--text-3); margin: 0 0 var(--sp-lg); }
.proj-stat__value { font-size: var(--display-xs); line-height: var(--display-xs-lh); font-weight: 700; color: var(--brand-text); margin: 0; font-variant-numeric: tabular-nums; }
.proj-stat__value small { font-size: var(--text-sm); font-weight: 500; color: var(--text-3); }
.proj-stat__value.is-ok   { color: var(--gold-fg); }
.proj-stat__value.is-late { color: var(--error-fg); }
.proj-stat__sub { font-size: var(--text-xs); color: var(--text-3); margin: var(--sp-md) 0 0; }
.proj-stat__sub.is-late { color: var(--error-fg); font-weight: 600; }
.proj-progress { height: 6px; border-radius: var(--r-full); background: var(--track); margin-top: var(--sp-lg); overflow: hidden; }
.proj-progress > span { display: block; height: 100%; border-radius: var(--r-full); background: var(--gold-500); }
.proj-progress.is-late > span { background: var(--error-500); }
.proj-stat .countdown { justify-content: center; }
#projectTimerData { display: none; }

/* ── الخط الزمني ── */
.proj-timeline { margin-bottom: var(--sp-2xl); }
.proj-timeline .panel__body { padding: var(--sp-5xl) var(--sp-4xl) var(--sp-6xl); }
.proj-timeline .bar-wrapper { position: relative; top: 0; height: 10px; border-radius: var(--r-full); background: var(--track); border: 0; }
.proj-timeline .bar-original { background: transparent; }
.proj-timeline .progress-overlay { border-radius: var(--r-full); }
.proj-timeline .prog-time { background: var(--brand); opacity: 1; }
.proj-timeline .marker { top: -4px; }
.proj-timeline .marker .dot { box-shadow: 0 0 0 3px var(--surface); }
.proj-timeline .marker .label { background: var(--text) !important; color: #FFFFFF; font-size: var(--text-2xs); }
.proj-timeline .marker .date-text { color: var(--text-3); font-weight: 600; }

/* ── مؤشّرات الأداء ── */
.proj-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: var(--sp-3xl); }
.proj-kpis .kpi { padding: var(--sp-2xl) var(--sp-xl); }
.proj-kpis .kpi__lbl { font-size: var(--text-xs); color: var(--text-3); margin: 0 0 var(--sp-md); font-weight: 600; }
.proj-kpis .kpi__val { font-size: var(--text-lg); line-height: var(--text-lg-lh); font-weight: 700; color: var(--text); margin: 0; }
.proj-kpis .kpi__val small { font-size: var(--text-xs); color: var(--text-3); font-weight: 500; }
.proj-kpis .kpi__val.is-ok   { color: var(--success-fg); }
.proj-kpis .kpi__val.is-info { color: var(--info-fg); }
.proj-kpis .kpi__val.is-late { color: var(--error-fg); }

/* ── شريط التبويبات ── */
.proj-tabs-wrap { margin-bottom: var(--sp-3xl); }
.proj-tabs-wrap > .project_link {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full);
  padding: var(--sp-sm) !important; gap: var(--sp-xs);
}
.proj-tabs-wrap > .project_link .project_link_border { border: 0; }
.proj-tabs-wrap > .project_link button {
  border-radius: var(--r-full) !important; padding: var(--sp-md) var(--sp-2xl) !important;
}
.proj-tabs-wrap > .project_link button[aria-expanded="true"] {
  background: var(--brand) !important; color: var(--on-brand) !important;
}
.proj-tabs-wrap > .project_link button[aria-expanded="true"] i { color: inherit !important; }

/* ── أقسام المشروع تصبح ألواحًا نظيفة ── */
#proj-info, #proj-domain, #proj-team, #proj-files, #proj-cash, #proj-extract {
  display: block !important;
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-xs);
  padding: 0 !important;
  margin: 0 0 var(--sp-3xl) !important;
  overflow: hidden;
}
#proj-info > div, #proj-domain > div, #proj-team > div,
#proj-files > .row, #proj-cash > .row, #proj-extract > .row { padding: var(--sp-3xl); margin: 0; }

/* عنوان كل قسم */
#proj-info::before, #proj-domain::before, #proj-team::before,
#proj-files::before, #proj-cash::before, #proj-extract::before {
  display: flex; align-items: center; gap: var(--sp-lg);
  padding: var(--sp-3xl); border-bottom: 1px solid var(--border);
  font-size: var(--text-lg); line-height: var(--text-lg-lh); font-weight: 700; color: var(--text);
}
#proj-info::before      { content: "معلومات المشروع"; }
#proj-domain::before    { content: "نطاق المشروع — مواقع المشروع"; }
#proj-team::before      { content: "فريق العمل"; }
#proj-files::before     { content: "ملفات المشروع"; }
#proj-cash::before { content: "التدفقات النقدية"; }
#proj-extract::before   { content: "المستخلصات"; }

/* أخفِ الصور الزخرفية والعناوين المكرّرة داخل الأقسام */
#proj-info img[src*="project_info"], #proj-team img[src*="project_team"],
#proj-files img[src*="project_files"], #proj-cash img[src*="cash_folw"],
#proj-extract img[src*="extracts"], #proj-extract img[src*="request"],
#proj-domain img[src*="domain_pin"] { display: none !important; }
#proj-files > .row > .col-4, #proj-cash > .row > .col-4, #proj-extract > .row > .col-4 { display: none; }
#proj-files > .row > .col-8, #proj-cash > .row > .col-8, #proj-extract > .row > .col-8 { flex: 0 0 100%; max-width: 100%; }
#proj-files span, #proj-cash span, #proj-extract span {
  font-size: var(--text-md) !important; font-weight: 600; color: var(--text);
}
#proj-files .text-center, #proj-cash .text-center, #proj-extract .text-center { text-align: start !important; }

/* النطاق: خريطة داخل إطار فاتح بدل الخلفية الخضراء */
#proj-domain { color: var(--text) !important; }
#proj-domain h1, #proj-domain p, #proj-domain .text-white { color: var(--text) !important; }
#proj-domain p[style*="display"], #proj-domain .auth__name { color: var(--text) !important; }
#proj-domain .smallMap {
  width: 100% !important; max-width: none !important; height: 360px !important;
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin: 0 !important;
}
#proj-domain .smallMap p { padding: var(--sp-lg) !important; margin: 0; background: var(--surface-alt); }
#proj-domain .row > .col-6 { flex: 0 0 100%; max-width: 100%; padding-right: 0 !important; }
#proj-domain h1 { font-size: var(--text-md) !important; font-weight: 700; margin-bottom: var(--sp-lg); }

/* فريق العمل: أعمدة نظيفة */
#proj-team .row > .col { border-inline-start: 1px solid var(--border); padding-inline: var(--sp-2xl); }
#proj-team .row > .col:first-child { border-inline-start: 0; }
#proj-team h1 { font-size: var(--text-md) !important; justify-content: space-between; margin-bottom: var(--sp-2xl); }
#proj-team table.dt { width: 100% !important; }
#proj-team table.dt td { border: 0 !important; border-bottom: 1px solid var(--border) !important; padding: var(--sp-md) var(--sp-lg) !important; }
#proj-team table.dt tr:last-child td { border-bottom: 0 !important; }
#proj-team td h3 { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-full);
  background: var(--brand); color: #FFFFFF; font-size: 13px !important; margin: 0; }
#proj-team td h3 i { color: #FFFFFF !important; }
#proj-team td h4 { font-size: var(--text-sm) !important; font-weight: 600; margin: 0; }
#proj-team img.rounded-circle, #proj-team td img { width: 30px !important; height: 30px !important; border-radius: var(--r-full); object-fit: cover; }

/* الطلبات: شبكة أزرار */
#Project_Requests .project_link, #Project_Records .project_link,
#Project_Record .project_link, #Project_Info .project_link, #Quantity .project_link,
#Reprts .project_link, #Daily_Report .project_link {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-lg); background: transparent; border: 0; padding: 0 !important;
  margin: 0 0 var(--sp-2xl) !important;
}
#Project_Requests .project_link > [class*="col"],
#Project_Records .project_link > [class*="col"],
#Project_Record .project_link > [class*="col"],
#Project_Info .project_link > [class*="col"],
#Quantity .project_link > [class*="col"],
#Reprts .project_link > [class*="col"],
#Daily_Report .project_link > [class*="col"] { border: 0 !important; max-width: none; }
#Project_Requests .project_link a, #Project_Requests .project_link button,
#Project_Records .project_link a, #Project_Records .project_link button,
#Project_Record .project_link a, #Project_Record .project_link button,
#Project_Info .project_link a, #Project_Info .project_link button,
#Quantity .project_link a, #Quantity .project_link button,
#Reprts .project_link a, #Reprts .project_link button,
#Daily_Report .project_link a, #Daily_Report .project_link button {
  justify-content: flex-start !important;
  background: var(--surface-alt) !important;
  border: 1px solid var(--border) !important;
  padding: var(--sp-lg) var(--sp-xl) !important;
  border-radius: var(--r-md) !important;
  width: 100%;
}
#Project_Requests .project_link a:hover, #Project_Requests .project_link button:hover,
#Project_Records .project_link a:hover, #Project_Records .project_link button:hover,
#Project_Record .project_link a:hover, #Project_Record .project_link button:hover,
#Project_Info .project_link a:hover, #Project_Info .project_link button:hover,
#Quantity .project_link a:hover, #Quantity .project_link button:hover,
#Reprts .project_link a:hover, #Reprts .project_link button:hover,
#Daily_Report .project_link a:hover, #Daily_Report .project_link button:hover {
  background: var(--brand-soft) !important; border-color: var(--brand-soft-border) !important;
}

@media (max-width: 991px) {
  .proj-tabs-wrap > .project_link { border-radius: var(--r-lg); }
  .proj-tabs-wrap > .project_link > [class*="col"] { flex: 1 1 45%; }
  #proj-team .row > .col { border-inline-start: 0; border-top: 1px solid var(--border); padding-block: var(--sp-2xl); }
}

/* ══ العدّاد التنازلي: سطر واحد دائمًا ولون موحّد ══ */
.countdown,
.countdown-display,
.clock-display.countdown-display {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  justify-content: center;
  gap: var(--sp-sm) !important;
  width: 100%;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.countdown > div,
.countdown-display .time-box {
  flex: 1 1 0;
  min-width: 0;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-md) var(--sp-xs) !important;
  text-align: center;
}

.countdown > div > b,
.countdown-display .time-box > span {
  display: block;
  font-size: var(--text-lg) !important;
  line-height: 1.15;
  font-weight: 700;
  color: var(--brand-text) !important;
  font-variant-numeric: tabular-nums;
  text-shadow: none !important;
  letter-spacing: 0;
}

.countdown > div > span,
.countdown-display .time-box > small {
  display: block;
  font-size: var(--text-2xs);
  line-height: 1.3;
  color: var(--text-3);
  margin-top: 2px;
  white-space: nowrap;
}

/* الفواصل ":" تُلغى — الصناديق تكفي للفصل */
.countdown-display .separator { display: none !important; }

/* لون موحّد: لا أزرق شاذّ لخانة الأيام */
#daysLeftCount,
#hoursLeftCount,
#minutesLeftCount,
#secondsLeftCount { color: var(--brand-text) !important; text-shadow: none !important; }

/* على الشاشات الضيّقة يبقى سطرًا واحدًا بحجم أصغر */
@media (max-width: 575px) {
  .countdown > div > b,
  .countdown-display .time-box > span { font-size: var(--text-md) !important; }
  .countdown > div,
  .countdown-display .time-box { padding: var(--sp-sm) 2px !important; }
  .countdown > div > span,
  .countdown-display .time-box > small { font-size: 9px; }
}

/* ══════════════════════════════════════════════════════════════════════
   تصحيحات المراجعة البصرية — النماذج والأزرار وبطاقات القيم
   ══════════════════════════════════════════════════════════════════════ */

/* ── ١· نموذج بعمودين حقيقيين (شبكة مرنة بدل inline-block) ── */
.panel--form .panel__body > form,
.panel--form .panel__body > .row > [class*="col"] > form {
  display: flex; flex-wrap: wrap;
  column-gap: var(--sp-3xl); row-gap: 0;
  align-items: flex-start;
}
.panel--form .panel__body form > .field {
  flex: 1 1 calc(50% - var(--sp-3xl));
  min-width: 240px; width: auto;
  display: block; margin-inline-end: 0;
}
.panel--form .panel__body form > .field:has(textarea),
.panel--form .panel__body form > .field--wide,
.panel--form .panel__body form > .form-actions,
.panel--form .panel__body form > .validation-summary-errors,
.panel--form .panel__body form > [asp-validation-summary],
.panel--form .panel__body form > div[class*="validation"],
.panel--form .panel__body form > .callout,
.panel--form .panel__body form > .table-scroll,
.panel--form .panel__body form > h4,
.panel--form .panel__body form > .subhead { flex: 1 1 100%; min-width: 0; }
.panel--form .panel__body form > input[type="hidden"] { display: none; }

.field textarea { min-height: 96px; }

/* ── ٢· دلالات الأزرار: الأخضر للإجراء الرئيسي فقط ── */
.btn-primary,
.btn-primary:focus {
  background-color: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}
.btn-primary:hover {
  background-color: var(--surface-alt) !important;
  border-color: var(--text-3) !important;
  color: var(--text) !important;
}
.btn-primary i { color: var(--text-2) !important; }

/* ── ٣· أزرار الإجراءات في الجداول: هادئة بحدود بدل ألوان صارخة ── */
table.dt td .btn-sm,
.panel table td .btn-sm,
.cell-actions .btn-sm {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  padding: var(--sp-sm) var(--sp-lg) !important;
  font-weight: 600;
}
table.dt td .btn-warning { color: var(--gold-fg) !important; }
table.dt td .btn-warning:hover { background: var(--gold-bg) !important; border-color: var(--gold-bd) !important; }
table.dt td .btn-info    { color: var(--info-fg) !important; }
table.dt td .btn-info:hover { background: var(--info-bg) !important; border-color: var(--info-bd) !important; }
table.dt td .btn-danger  { color: var(--error-fg) !important; }
table.dt td .btn-danger:hover { background: var(--error-bg) !important; border-color: var(--error-bd) !important; }
table.dt td .btn-success { color: var(--success-fg) !important; }
table.dt td .btn-success:hover { background: var(--success-bg) !important; border-color: var(--success-bd) !important; }
table.dt td .btn-primary { color: var(--text-2) !important; }
table.dt td .btn i { color: inherit !important; }

/* ── ٤· بطاقات القيم في التفاصيل: نص لا حقل إدخال ── */
.info-item .val {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: var(--sp-md) 0 !important;
  min-height: 0 !important;
  font-weight: 500;
}
.info-item label { color: var(--text-3); }
.info-grid { gap: var(--sp-lg) var(--sp-3xl); }

/* ── ٥· شريط أدوات ترويسة اللوح ── */
.panel__head .table-filter { min-width: 220px; }
.pagehead > .toolbar .btn { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════
   منع التجاوز الأفقي — سبب قصّ المحتوى على الجوال
   ══════════════════════════════════════════════════════════════════════ */

/* clip لا يجبر المحور الرأسي على auto، فيبقى sticky للـ appbar يعمل */
.main { overflow-x: clip; }
.panel, .panel__body, .content, .content > .container-fluid { max-width: 100%; }

/* على الجوال: الجدول لا يتمدّد خارج اللوح إطلاقًا */
@media (max-width: 767px) {
  .panel__body > .table-scroll,
  .panel__body > .dataTables_wrapper {
    margin-inline: 0 !important;
    width: 100% !important;
  }
  .panel__body > .table-scroll:first-child { margin-top: 0 !important; }
  .panel__body > .table-scroll:last-child  { margin-bottom: 0 !important; }

  .pagehead { gap: var(--sp-lg); }
  .pagehead h2 { font-size: var(--text-xl); line-height: var(--text-xl-lh); }
  .pagehead > .toolbar { margin-inline-start: 0; width: 100%; }
  .pagehead > .toolbar .btn { flex: 1; justify-content: center; }

  .panel__head { flex-wrap: wrap; }
  .panel__head > .toolbar { margin-inline-start: 0; width: 100%; }
  .panel__head .table-filter { width: 100%; min-width: 0; }

  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions > .btn, .form-actions > form, .form-actions input[type="submit"] { width: 100%; justify-content: center; }
  .form-actions > .float-left, .form-actions > .float-right { margin-inline-start: 0; }
}

/* الشبكات لا تفرض حدًّا أدنى يتجاوز الشاشة */
@media (max-width: 480px) {
  .stats, .tiles, .kpis, .proj-stats, .info-grid, .linklist, .kanban, .team {
    grid-template-columns: 1fr !important;
  }
  .panel--form .panel__body form > .field { flex: 1 1 100%; min-width: 0; }
}

/* ══ لمسات المراجعة البصرية النهائية ══ */

/* مسار التنقّل في الشريط العلوي لا يلتفّ */
.appbar__crumb {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 48vw;
}
.appbar__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48vw; }
.appbar > div:nth-child(2) { min-width: 0; }

/* إشارة بصرية أن الجدول يُمرَّر أفقيًا */
.table-scroll {
  background:
    linear-gradient(to left, var(--surface) 30%, rgba(0,0,0,0)) left center,
    linear-gradient(to right, var(--surface) 30%, rgba(0,0,0,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(16,24,40,.10), rgba(0,0,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(16,24,40,.10), rgba(0,0,0,0)) right center;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
[data-theme="dark"] .table-scroll {
  background-image:
    linear-gradient(to left, var(--surface) 30%, rgba(0,0,0,0)),
    linear-gradient(to right, var(--surface) 30%, rgba(0,0,0,0)),
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.45), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), rgba(0,0,0,0));
}

/* عُقد الخط الزمني لا تخرج عن اللوح */
.proj-timeline .marker { max-width: 130px; }
.proj-timeline .marker:first-of-type { transform: translateX(20%); }
.proj-timeline .marker:last-of-type  { transform: translateX(80%); }
.proj-timeline .panel__body { overflow: hidden; }

/* شبكة المعلومات: أعمدة متساوية بلا فجوات غريبة */
.info-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* مقبض تكبير النص لا يقطع الحد */
textarea { border-radius: var(--r-md); }
.field textarea { resize: vertical; }

/* بطاقات الإحصاء: نفس الارتفاع وتباعد داخلي مريح */
.stats { align-items: stretch; }
.stat-tile { display: flex; flex-direction: column; justify-content: center; min-height: 104px; }
.stat-tile:hover .stat-tile__ico { opacity: .45; }

/* ══════════════════════════════════════════════════════════════════════
   الجدول الزمني للمشروع (TimeLine) — نُقلت من <style> داخل الصفحة
   وأُصلح فيها قوس زائد كان يُبطل بقية القواعد
   ══════════════════════════════════════════════════════════════════════ */

.tl-page .summary-box {
  display: flex; gap: var(--sp-2xl); align-items: center; flex-wrap: wrap;
  margin-bottom: var(--sp-2xl); color: var(--text-2); font-size: var(--text-sm);
}
.tl-page .timeline-container {
  position: relative; width: 100%;
  margin: 110px 0 140px; height: 145px;
}
.tl-page .bar-wrapper {
  position: absolute; top: 45px; inset-inline: 0; width: 100%; height: 26px;
  border-radius: var(--r-full); border: 1px solid var(--border);
  background: var(--track); box-sizing: border-box; overflow: visible;
}
.tl-page .bar-original {
  position: absolute; top: 0; inset-inline-start: 0; height: 100%;
  background: var(--surface-alt); border-radius: var(--r-full); z-index: 1;
}
.tl-page .bar-extension {
  position: absolute; top: 0; height: 100%; z-index: 2;
  background: repeating-linear-gradient(45deg,
    var(--gold-100) 0, var(--gold-100) 10px, var(--gold-500) 10px, var(--gold-500) 20px);
}
.tl-page .extension-label {
  position: absolute; top: -24px; font-size: var(--text-xs); font-weight: 700;
  color: var(--gold-fg); white-space: nowrap; transform: translateX(50%); z-index: 20;
}
.tl-page .progress-overlay {
  position: absolute; top: 0; inset-inline-start: 0; height: 100%;
  pointer-events: none; overflow: hidden; border-radius: var(--r-full); z-index: 5;
}
.tl-page .prog-time { width: 100%; height: 100%; background: var(--brand); opacity: .55; }

.tl-page .marker {
  position: absolute; top: -3px; transform: translateX(50%);
  display: flex; flex-direction: column; align-items: center;
  white-space: nowrap; z-index: 40;
}
.tl-page .marker .dot { border-radius: var(--r-full); border: 2px solid; margin-bottom: var(--sp-sm); box-sizing: border-box; }
.tl-page .marker.achieved .dot { box-shadow: 0 0 0 4px var(--brand-soft-2); }
.tl-page .marker .label {
  font-size: var(--text-2xs); color: #FFFFFF; padding: 2px var(--sp-md);
  border-radius: var(--r-sm); margin-top: var(--sp-xs); text-align: center;
}
.tl-page .marker.achieved .label { background: var(--text); }
.tl-page .marker.pending  .label { background: var(--gray-400); }
.tl-page .marker .date-text { font-size: var(--text-2xs); margin-top: 2px; font-weight: 700; }
.tl-page .marker.achieved .date-text { color: var(--text); }
.tl-page .marker.pending  .date-text { color: var(--text-3); }

.tl-page .legend-row {
  position: absolute; inset-inline: 0; bottom: -100px;
  display: flex; justify-content: center; align-items: center;
  gap: var(--sp-xl); flex-wrap: wrap; width: 100%;
}
.tl-page .legend-item {
  display: flex; align-items: center; gap: var(--sp-sm);
  color: var(--text-2); font-size: var(--text-xs); white-space: nowrap;
}
.tl-page .dot-legend {
  width: 12px; height: 12px; flex: 0 0 12px; box-sizing: border-box;
  border-radius: var(--r-full); border: 1px solid var(--text-3);
}

.tl-page .completion-box {
  position: absolute; top: -92px; inset-inline-start: 45%;
  transform: translateX(50%);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--text);
  padding: var(--sp-lg) var(--sp-2xl);
  font-size: var(--text-xs); font-weight: 700; text-align: center;
  white-space: nowrap; z-index: 100; box-shadow: var(--shadow-sm);
}

.tl-page .progress-section {
  margin-top: var(--sp-4xl); background: var(--surface);
  padding: var(--sp-3xl); border-radius: var(--r-lg); border: 1px solid var(--border);
}
.tl-page .progress-item { margin-bottom: var(--sp-3xl); }
.tl-page .progress-item:last-child { margin-bottom: 0; }
.tl-page .progress-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-lg); font-size: var(--text-sm); font-weight: 700; color: var(--text-2);
}
.tl-page .progress-track {
  position: relative; width: 100%; height: 22px; overflow: hidden;
  background: var(--track); border-radius: var(--r-full);
}
.tl-page .progress-fill {
  position: absolute; top: 0; inset-inline-start: 0; height: 100%;
  display: flex; align-items: center; justify-content: flex-start;
  padding-inline-start: var(--sp-lg); border-radius: var(--r-full);
  color: #FFFFFF; font-size: var(--text-xs); font-weight: 700; white-space: nowrap;
}
.tl-page .progress-time   .progress-fill { background: var(--info-600); }
.tl-page .progress-cost   .progress-fill { background: var(--success-600); }
.tl-page .progress-actual .progress-fill { background: var(--brand); }

.tl-page .timeline-dates {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--sp-xl); padding-inline: var(--sp-sm);
}
.tl-page .timeline-date { font-size: var(--text-xs); color: var(--text-3); font-weight: 600; }

@media (max-width: 767px) {
  .tl-page .timeline-container { margin: 90px 0 160px; }
  .tl-page .marker .label { font-size: 9px; }
  .tl-page .completion-box { inset-inline-start: 50%; font-size: 10px; padding: var(--sp-md); }
}

/* ══════════════════════════════════════════════════════════════════════
   قواعد نُقلت من كتل <style> داخل الصفحات
   ══════════════════════════════════════════════════════════════════════ */

/* حقول البحث في تذييل جداول DataTables */
tfoot input, #DTable tfoot input {
  width: 100%; box-sizing: border-box;
  padding: var(--sp-sm) var(--sp-lg);
  font-family: inherit; font-size: var(--text-xs);
  background: var(--field-bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
}
tfoot input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft-2); }
tfoot th { padding: var(--sp-md) var(--sp-lg) !important; background: var(--surface-alt) !important; }

/* شارات التقييم */
.grade {
  display: inline-block; min-width: 34px;
  padding: 2px var(--sp-lg); border-radius: var(--r-full);
  font-weight: 700; font-size: var(--text-xs); text-align: center;
  border: 1px solid transparent;
}
.grade-a { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-bd); }
.grade-b { background: var(--gold-bg);    color: var(--gold-fg);    border-color: var(--gold-bd); }
.grade-c { background: var(--error-bg);   color: var(--error-fg);   border-color: var(--error-bd); }

/* جداول المقاول: حدود متقطّعة خفيفة */
.contractor-grid table tr td { border: 1px dashed var(--border) !important; padding: 2px !important; }

/* ══════════════════════════════════════════════════════════════════════
   ضبط الطفو والعرض — أدوات Bootstrap القديمة داخل التصميم الجديد
   ══════════════════════════════════════════════════════════════════════ */

/* حاويات لا تنهار بسبب العناصر الطافية */
.panel__body::after, .report > div::after,
.panel--form .panel__body > form::after { content: ""; display: table; clear: both; }

/* الأزرار الطافية داخل صفوف الإجراءات تصبح جزءًا من التخطيط */
.form-actions .float-left, .form-actions .float-right,
.panel__head .float-left, .panel__head .float-right,
.pagehead .float-left, .pagehead .float-right {
  float: none !important; margin-inline-start: auto;
}
/* زر طافٍ منفرد داخل لوح: يُحاذى للنهاية بلا كسر التخطيط */
.panel__body > .float-left, .panel__body > .btn.float-left {
  float: none !important; display: inline-flex; margin-inline-start: auto;
}
.panel__body > div:has(> .btn.float-left) { display: flex; flex-wrap: wrap; gap: var(--sp-lg); align-items: center; }

/* عروض النسب الثابتة لا تُضيّق المحتوى داخل الألواح */
.panel__body > .w-25, .panel__body > .w-50, .panel__body > .w-75,
.panel__body > .row.w-25, .panel__body > .row.w-50, .panel__body > .row.w-75,
.panel__body > div.w-50.mx-auto, .panel__body > div.w-75.mx-auto {
  width: 100% !important; max-width: 100% !important; margin-inline: 0 !important;
}
/* تبقى w-* فعّالة داخل الجداول لتحديد عرض الأعمدة */
th.w-25, th.w-50, th.w-75, td.w-25, td.w-50, td.w-75 { width: auto !important; }

/* صور بعرض ثابت لا تتجاوز الشاشة */
img[style*="width:"], img[width] { max-width: 100%; height: auto; }

/* ══════════════════════════════════════════════════════════════════════
   شبكة معلومات المشروع/التفاصيل — ٣ عناصر في السطر
   ══════════════════════════════════════════════════════════════════════ */
.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2xl) var(--sp-3xl);
  align-items: start;
}
@media (min-width: 768px)  { .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* العنصر الممتدّ على عرض السطر عند الحاجة */
.info-item--wide { grid-column: 1 / -1; }

/* اتّساق ارتفاع الحقول مهما طال العنوان أو القيمة */
.info-item { display: flex; flex-direction: column; min-width: 0; }
.info-item label {
  display: block; font-size: var(--text-xs); font-weight: 600;
  color: var(--text-3); margin-bottom: var(--sp-xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.info-item .val {
  flex: 1; display: flex; align-items: center;
  min-height: 38px; word-break: break-word; overflow-wrap: anywhere;
  color: var(--text); font-weight: 500;
}
.info-item .val:empty::before { content: "—"; color: var(--text-3); }

/* داخل ألواح ضيّقة (مثل شاشة الحذف) عمودان يكفيان */
.panel--danger .info-grid,
.panel--center .info-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ══ حقول معلومات المشروع — ٣ في السطر ══ */
.info-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2xl) var(--sp-3xl);
  background: transparent;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px)  { .info-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .info-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.info-fields > .field { margin-bottom: 0; min-width: 0; }
.info-fields > .field > label {
  font-size: var(--text-xs); font-weight: 600; color: var(--text-3);
  margin-bottom: var(--sp-xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* قيمة للقراءة فقط: تُعرض كبيان لا كحقل إدخال */
.info-fields > .field > input[disabled],
.info-fields > .field > input[readonly],
.info-fields > .field > select[disabled] {
  background: var(--surface-alt) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  cursor: default;
  font-size: var(--text-sm);
  padding: var(--sp-md) var(--sp-lg);
  min-height: 40px;
  text-overflow: ellipsis;
}
.info-fields > .field--wide { grid-column: 1 / -1; }
.info-fields .field-error:empty { display: none; }

/* زر التعديل ينتقل إلى ترويسة القسم بدل وسط الصفحة */
#proj-info > div > .text-center:first-child {
  display: flex; justify-content: flex-end; align-items: center;
  margin-bottom: var(--sp-2xl);
}
#proj-info > div > .text-center:first-child > a {
  display: inline-flex; align-items: center; gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-xl);
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--r-md); font-size: var(--text-sm); font-weight: 600;
  color: var(--text-2);
}
#proj-info > div > .text-center:first-child > a::after { content: "تعديل"; }
#proj-info > div > .text-center:first-child > a:hover {
  background: var(--brand-soft); color: var(--brand-text); border-color: var(--brand-soft-border);
}
#proj-info > div > .text-center:first-child > a i { color: inherit !important; font-size: 14px !important; }