/* ==========================================================
   منظومة أسمو بسلوكي — الواجهة
   الهوية: إطار ليلي داكن (القائمة والشريط العلوي) تطفو فوقه «ورقة عمل» فاتحة بزوايا واسعة،
   كحلي للنصوص، ووردي للإشارات والأزرار الرئيسية، وأرقام كبيرة خفيفة الوزن.
   الأحمر والذهبي الرسميان محفوظان للمستندات المطبوعة وملفات PDF وترويسة الدخول.
   ========================================================== */

:root {
  /* الإطار الليلي: القائمة الجانبية والشريط العلوي ولوحة البوابة */
  --night: #0B0E19;
  --night-2: #151B2E;
  --night-line: rgba(255, 255, 255, .08);
  --night-text: #C6CEE0;
  --night-muted: #7F88AD;
  --glow: rgba(255, 72, 139, .22);

  /* ورقة العمل */
  --paper: #F5F7FB;
  --surface: #FFFFFF;
  --surface-2: #F3F5FA;
  --slate: #EEF2F5;          /* ألواح ممتلئة: المؤشرات الصغيرة، الإجراءات السريعة، الملاحظات */
  --ink: #172B76;            /* الكحلي: العناوين والنص الأساسي */
  --ink-2: #3E4A7A;
  --ink-3: #5F6893;          /* ≥ 4.8:1 على كل الأسطح الفاتحة */
  --rule: #E4E8F1;
  --rule-strong: #CDD4E4;
  --periwinkle: #7A7FB2;
  --mist: #DDE3F4;
  --hl: #EEF0FA;
  --margin-rule: rgba(23, 43, 118, .14);

  /* الوردي: الأزرار الرئيسية والإشارات (نص داكن فوقه: 5.7:1) */
  --accent: #FF488B;
  --accent-hover: #FF2E7A;
  --accent-ink: #D1135A;     /* وردي للنصوص الصغيرة على الفاتح */
  --accent-soft: #FFE9F1;
  --on-accent: #101421;

  /* الهوية الرسمية: المستندات المطبوعة وملفات PDF وترويسة الدخول فقط */
  --brand: #D7261A;
  --brand-ink: #B21F15;
  --brand-soft: #FBEAE8;
  --gold: #C49016;
  --gold-light: #E3B341;
  --gold-soft: #F7F0DC;

  --late: #B45309;  --late-soft: #FDF1E2; --late-mid: #E3A45F;
  --bad: #B42318;   --bad-soft: #FCEAE7;
  --good: #1F7A3A;  --good-soft: #E6F2E8;
  --info: #3149A6;  --info-soft: #ECEFFB;
  --committee: #5B3F8C; --committee-soft: #EFEAF7;

  /* الفئات — نصوص وأختام */
  --cat1: #C2410C; --cat2: #B42318; --cat3: #8A1C12; --cat4: #5C0F09;
  /* الفئات — تعبئة الرسوم (تدرج أحادي اللون) */
  --cat1-fill: #EFA58C; --cat2-fill: #D9674B; --cat3-fill: #B42318; --cat4-fill: #7A170E;

  /* العناوين بخط 29LT Bukra، والنصوص بخط Readex Pro، والأرقام والبيانات الصغيرة بخط IBM Plex Mono */
  --font-head: "Bukra", "29LT Bukra", "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font: "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, "Readex Pro", monospace;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 24px;
  --shadow: 0 1px 2px rgba(16, 20, 33, .05), 0 14px 34px -18px rgba(16, 20, 33, .28);
  --sidebar-w: 256px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.35; font-weight: 500; font-family: var(--font-head); }
.brand-text strong, .quick strong { font-family: var(--font-head); }
p { margin: 0 0 .6em; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(23, 43, 118, .28); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(255, 72, 139, .55); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-soft); color: var(--ink); }

.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.mono { font-family: var(--font-mono); font-size: .92em; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.strong { font-weight: 700; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- الهيكل: شريط علوي ليلي بقائمة منسدلة، وتحته ورقة عمل فاتحة ---------- */
.app {
  display: flex; flex-direction: column; min-height: 100vh;
  isolation: isolate; background: var(--night);
}
.workspace {
  flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0;
  margin: 0 12px 12px;
  background: var(--paper); border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 30px 90px -50px rgba(255, 72, 139, .55);
}
.content { width: 100%; max-width: 1320px; margin-inline: auto; padding: 30px 32px 60px; }

.masthead {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  height: 72px; padding: 0 22px;
  background: rgba(11, 14, 25, .88); backdrop-filter: blur(12px); color: var(--night-text);
}
.brand { display: flex; align-items: center; gap: 11px; flex: none; min-width: 0; color: #fff; text-decoration: none; }
.brand-emblem { width: 40px; height: 42px; object-fit: contain; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.brand-text strong { font-size: 17px; font-weight: 500; }
.brand-text small { max-width: 200px; font-size: 11px; color: var(--night-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* القائمة: كبسولة داكنة في الوسط، ولكل مجموعة لوحة منسدلة */
.topnav {
  display: flex; align-items: center; gap: 2px; margin-inline: auto; padding: 4px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--night-line); border-radius: 13px;
}
.tn-link, .tn-btn {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 13px; border: 0; border-radius: 9px; background: none;
  color: var(--night-text); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .12s, color .12s;
}
.tn-link .ico { width: 17px; height: 17px; opacity: .85; }
.tn-link:hover, .tn-btn:hover, .tn-group.is-open > .tn-btn { background: rgba(255, 255, 255, .08); color: #fff; }
.tn-link.is-active, .tn-group.is-current > .tn-btn { background: rgba(255, 255, 255, .1); color: #fff; }
.tn-link.is-active::after, .tn-group.is-current > .tn-btn::after {
  content: ""; position: absolute; bottom: 4px; inset-inline: 38%; height: 2px; border-radius: 2px; background: var(--accent);
}
.tn-btn .chev, .mast-cta .chev { width: 14px; height: 14px; opacity: .7; transform: rotate(-90deg); transition: transform .15s; }
.tn-group.is-open > .tn-btn .chev, .tn-group.is-open > .mast-cta .chev { transform: rotate(90deg); }
.tn-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px; font-style: normal;
  background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-size: 11px; font-weight: 500;
}
.tn-group { position: relative; }
.tn-panel {
  position: absolute; top: calc(100% + 14px); left: 50%; z-index: 50;
  width: 340px; padding: 8px; border-radius: 16px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 34px 80px -28px rgba(0, 0, 0, .65), 0 0 0 1px rgba(16, 20, 33, .06);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -6px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.tn-panel.is-wide { width: 590px; }
.tn-panel--end { left: auto; inset-inline-end: 0; width: 300px; transform: translateY(-6px); }
.tn-group.is-open > .tn-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.tn-group.is-open > .tn-panel--end { transform: none; }
.tn-panel-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; font-size: 12px; color: var(--ink-3); font-weight: 500; }
.tn-panel-head::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--accent); }
.tn-items { display: grid; gap: 2px; }
.tn-panel.is-wide .tn-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tn-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 11px; color: var(--ink); text-decoration: none; }
.tn-item:hover { background: var(--surface-2); }
.tn-item:hover .tn-ico { background: var(--mist); }
.tn-item.is-active { background: var(--hl); }
.tn-item.is-active::before { content: ""; position: absolute; inset-block: 12px; inset-inline-start: 0; width: 3px; border-radius: 3px; background: var(--accent); }
.tn-ico { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--slate); color: var(--ink); transition: background .12s; }
.tn-ico .ico { width: 19px; height: 19px; }
.tn-item.is-active .tn-ico { background: var(--ink); color: #fff; }
.tn-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.tn-text strong { font-size: 14px; font-weight: 600; }
.tn-text small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-item .tn-badge { margin-inline-start: auto; }
.tn-foot { display: none; }
/* عند فتح قائمة تخفت الصفحة خلفها بطبقة داكنة مستقلة تحت الشريط العلوي
   (لا تضبيب ولا شفافية للورقة نفسها: كلاهما يعيد رسم الصفحة كلها فيبطئ فتح القائمة) */
.workspace::after {
  content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none;
  background: rgba(11, 14, 25, .45); opacity: 0; transition: opacity .15s ease;
}
body.menu-open .workspace::after { opacity: 1; pointer-events: auto; }

.mast-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.mast-cta { height: 36px; }
.masthead .nav-toggle { display: none; }
.nav-toggle .ico-close { display: none; }
.masthead .icon-btn { color: var(--night-text); }
.masthead .icon-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.icon-btn {
  position: relative; display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--ink-2); cursor: pointer; text-decoration: none;
}
.icon-btn:hover { background: rgba(23, 43, 118, .06); color: var(--ink); }
.icon-btn.danger:hover { color: var(--bad); background: var(--bad-soft); }
.icon-btn .ico { width: 19px; height: 19px; }
.bell .badge {
  position: absolute; top: 3px; inset-inline-end: 2px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px;
  background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--night);
}

.user-chip {
  display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 14px;
  border: 1px solid var(--night-line); background: rgba(255, 255, 255, .04); border-radius: 12px; cursor: pointer; color: #fff;
}
.user-chip:hover { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); }
.avatar {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 14px;
}
.user-chip-text { display: flex; flex-direction: column; line-height: 1.25; text-align: start; }
.user-chip-text strong { font-size: 13px; font-weight: 500; color: #fff; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip-text small { font-size: 11.5px; color: var(--night-muted); }

.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 40;
  min-width: 220px; padding: 6px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow);
  display: none;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-menu a, .dropdown-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font-size: 14px; text-align: start; cursor: pointer; text-decoration: none;
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--surface-2); }
.dropdown-menu form { margin: 0; }

.scrim { display: none; }

/* ---------- عنوان الصفحة ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1 { font-size: 28px; font-weight: 500; line-height: 1.3; }
.page-head p { margin: 6px 0 0; color: var(--ink-3); font-size: 14px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* الرئيسية: ترحيب على لوحة ليلية بتوهج وردي ونقاط خافتة */
.is-home .page-head {
  position: relative; align-items: center; padding: 28px 30px; border-radius: 20px; color: #fff;
  background:
    radial-gradient(36rem 16rem at 10% 130%, rgba(255, 72, 139, .5), transparent 70%),
    radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.3px) 0 0 / 22px 22px,
    var(--night);
}
.is-home .page-head h1 { font-size: 34px; color: #fff; }
.is-home .page-head p { color: var(--night-text); }

/* ---------- الأزرار ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 9px;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink);
  font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.btn:hover { border-color: var(--ink-3); }
.btn .ico { width: 17px; height: 17px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: 0 8px 20px -10px rgba(255, 72, 139, .8); }
.btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-dark:hover { background: #10205C; border-color: #10205C; }
.btn-danger { color: var(--bad); border-color: #E9B8B2; background: var(--surface); }
.btn-danger:hover { background: var(--bad-soft); border-color: var(--bad); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: rgba(23, 43, 118, .06); border-color: transparent; }
.btn-wa { color: #0F6B3A; border-color: #BFDCC9; }
.btn-wa:hover { background: #EAF6EE; border-color: #0F6B3A; }
.btn-lg { height: 52px; padding: 0 22px; font-size: 16px; border-radius: 11px; }
.btn-sm { height: 32px; padding: 0 11px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-busy { opacity: .6; pointer-events: none; }

/* ---------- النماذج ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.field > label, .label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.field .req { color: var(--accent-ink); }
.hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.input, .select, textarea.input {
  width: 100%; height: 42px; padding: 0 12px;
  border: 1px solid var(--rule-strong); border-radius: 9px; background: #fff; color: var(--ink);
  font-size: 14.5px; transition: border-color .12s, box-shadow .12s;
}
textarea.input { height: auto; min-height: 104px; padding: 10px 12px; line-height: 1.7; resize: vertical; }
.select { appearance: none; -webkit-appearance: none; padding-inline-end: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6893' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 16px; background-position: left 12px center; }
.input:focus, .select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(255, 72, 139, .2); outline: none; }
.input::placeholder { color: #9AA1BE; }
.input.ltr { text-align: left; }
.input-sm { height: 36px; font-size: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: 18px; }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-all { grid-column: 1 / -1; }
.form-grid--picker { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 6px; }
.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; }
.check input, input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.fieldset { border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px 4px; margin: 0 0 18px; background: var(--surface); }
.fieldset legend { padding: 0 8px; font-weight: 600; font-size: 15px; }

/* شريط التصفية */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-bottom: 18px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.filters .field { margin: 0; min-width: 150px; flex: 1 1 150px; }
.filters .field.grow { flex: 2 1 240px; }
.filters .field > label { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.filters .input, .filters .select { height: 38px; font-size: 14px; }
.filters .btn { height: 38px; }

/* ---------- البطاقات ---------- */
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); min-width: 0; }
.card + .card { margin-top: 18px; }
/* المسافة بين البطاقات المتتالية للبطاقات المكدسة فقط؛ داخل الشبكات تتولاها فجوة الشبكة
   (وإلا نزلت البطاقة الثانية في كل صف 18px عن جارتها)، ولوحات التبويب تبدأ كلها من الموضع نفسه */
:is(.grid-2, .grid-3, .grid-main, .report-charts, .dash-row) > .card, .card.tab-panel { margin-top: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--rule); }
.card-head h2 { font-size: 15.5px; font-weight: 500; display: flex; align-items: center; gap: 9px; }
.card-head h2 .ico { color: var(--periwinkle); }
.card-head .sub { font-size: 12.5px; color: var(--ink-3); font-weight: 400; }
.card-body { padding: 18px; }
.card-foot { padding: 12px 18px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid-main { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 18px; align-items: start; }

/* لوحة المتابعة: صفوف ثابتة، بطاقات كل صف بارتفاع واحد وتذييلاتها على خط واحد */
.dash-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.dash-row--half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-row > .card { display: flex; flex-direction: column; }
.dash-row > .card > .card-body, .dash-row > .card > .list-rows { flex: 1 1 auto; }
.dash-row > .card > .card-foot { margin-top: auto; }
.queue { scroll-margin-top: 80px; }
.queue > .tabs { margin: 14px 16px 6px; }
.queue > .tab-panel.is-active { display: flex; flex-direction: column; flex: 1 1 auto; }
.queue > .tab-panel > .card-foot { margin-top: auto; }
.queue > .tab-panel > .empty-state { flex: 1 1 auto; padding: 36px 20px; }
.queue .ledger th:first-child, .queue .ledger td:first-child { padding-inline-start: 18px; }
.queue .ledger { table-layout: fixed; }
.queue .ledger th:first-child { width: 34%; }
.queue .ledger .col-cat { width: 96px; }
.queue .ledger .col-when { width: 108px; }
.queue .ledger .col-count { width: 96px; }
.one-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.stack > * + * { margin-top: 18px; }

/* ---------- المؤشرات: رقم كبير خفيف ومربع لون صغير ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { position: relative; display: block; padding: 18px 20px 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; color: var(--ink); text-decoration: none; }
.kpi::after { content: ""; position: absolute; top: 22px; inset-inline-end: 20px; width: 8px; height: 8px; border-radius: 2px; background: var(--kpi-color, var(--periwinkle)); }
.kpi-label { display: flex; align-items: center; gap: 8px; padding-inline-end: 16px; font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.kpi-label .ico { color: var(--kpi-color, var(--ink-3)); width: 16px; height: 16px; }
.kpi-value { font-size: 40px; font-weight: 300; line-height: 1.15; margin-top: 10px; letter-spacing: -.02em; }
.kpi-note { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.kpi--late { --kpi-color: var(--late); }
.kpi--bad { --kpi-color: var(--bad); }
.kpi--good { --kpi-color: var(--good); }
.kpi--info { --kpi-color: var(--info); }
.kpi--committee { --kpi-color: var(--committee); }
a.kpi { transition: border-color .12s, box-shadow .12s; }
a.kpi:hover { border-color: var(--rule-strong); box-shadow: var(--shadow); }

/* ---------- الجداول ---------- */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ledger { width: 100%; border-collapse: collapse; font-size: 14px; }
.ledger th {
  text-align: start; font-weight: 500; font-size: 12px; color: var(--ink-3);
  padding: 11px 14px; background: transparent; border-bottom: 1px solid var(--rule-strong); white-space: nowrap;
}
.ledger td { padding: 12px 14px; border-bottom: 1px solid #EDF0F6; vertical-align: middle; }
.ledger td.num { white-space: nowrap; }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tbody tr:hover { background: #F8F9FD; }
.ledger td.idx, .ledger th.idx { width: 46px; text-align: center; color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; }
.ledger .row-actions { white-space: nowrap; text-align: end; width: 1%; }
.ledger .row-actions .icon-btn { width: 32px; height: 32px; }
.ledger a { text-decoration: none; }
.ledger a:hover { text-decoration: underline; }
.ledger .strong-link { color: var(--ink); font-weight: 600; }
.ledger tr.is-new td { animation: rowIn 1.6s ease-out; }
@keyframes rowIn { from { background: var(--accent-soft); } to { background: transparent; } }
.ledger .sub-line { display: block; font-size: 12.5px; color: var(--ink-3); }
.ledger-compact td { padding: 8px 12px; }
.ledger-compact th { padding: 8px 12px; }
.card > .table-wrap .ledger th:first-child, .card > .table-wrap .ledger td:first-child { padding-inline-start: 18px; }

/* ---------- الأختام (الفئات والحالات) والوسوم ---------- */
.stamp {
  --c: var(--ink-2);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 1px 9px; font-size: 12px; font-weight: 600; line-height: 1.75;
  color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 32%, #fff); border-radius: 6px;
  background: color-mix(in srgb, var(--c) 9%, #fff);
}
.stamp--cat1 { --c: var(--cat1); }
.stamp--cat2 { --c: var(--cat2); }
.stamp--cat3 { --c: var(--cat3); }
.stamp--cat4 { --c: var(--cat4); }
.stamp--new { --c: var(--late); }
.stamp--progress { --c: var(--info); }
.stamp--committee { --c: var(--committee); }
.stamp--closed { --c: var(--good); }
.stamp--lg { font-size: 14px; padding: 3px 14px; }

.tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 6px; line-height: 1.7;
  font-size: 12px; font-weight: 500; background: var(--slate); color: var(--ink-2); border: 1px solid transparent; white-space: nowrap;
}
.tag--good { background: var(--good-soft); color: var(--good); border-color: #CFE6D6; }
.tag--late { background: var(--late-soft); color: var(--late); border-color: #F3D9B8; }
.tag--bad { background: var(--bad-soft); color: var(--bad); border-color: #F3CDC7; }
.tag--info { background: var(--info-soft); color: var(--info); border-color: #D5DCF4; }
.tag--committee { background: var(--committee-soft); color: var(--committee); border-color: #D8CEEA; }
.ref { font-size: 12px; color: var(--ink-3); white-space: nowrap; }

/* ---------- التنبيهات ---------- */
.flash {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin-bottom: 16px;
  border-radius: 12px; border: 1px solid; background: var(--surface);
}
.flash > .ico { margin-top: 3px; }
.flash > div { flex: 1; }
.flash--success { background: var(--good-soft); border-color: #BCDDC5; color: #14532D; }
.flash--error { background: var(--bad-soft); border-color: #EFC0B9; color: #7A1A10; }
.flash--warn { background: var(--late-soft); border-color: #F0D1A8; color: #7A3A06; }
.flash--info { background: var(--info-soft); border-color: #D5DCF4; color: #22357E; }
.flash a { color: inherit; }
.flash-close { border: 0; background: none; padding: 2px; cursor: pointer; color: inherit; opacity: .6; }
.flash-close:hover { opacity: 1; }
.callout { padding: 14px 16px; border-radius: 12px; background: var(--slate); border: 1px solid transparent; font-size: 13.5px; color: var(--ink-2); }
.callout strong { color: var(--ink); }
.callout--warn { background: var(--late-soft); border-color: #F0D1A8; color: #6B3305; }
.callout--committee { background: var(--committee-soft); border-color: #D8CEEA; color: #3F2A66; }
.plain-list { margin: 4px 0 12px; padding-inline-start: 18px; line-height: 1.85; }
/* شاشة التسجيل للطالب المتعاون */
.helper-note { margin-bottom: 16px; border-inline-start: 3px solid var(--accent); }
.helper-note p { margin: 0; }
.helper-note .hint { margin-top: 4px; }
.recorder-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.recorder-filter > span { flex: 1; }
.helper-card { margin-bottom: 18px; border-inline-start: 3px solid var(--accent); }
.helper-card .card-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.helper-card h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 0 0 4px; }
.helper-card p { margin: 0; }

.toasts { position: fixed; bottom: 22px; inset-inline: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 100; pointer-events: none; padding: 0 16px; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px;
  max-width: 560px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--night-line);
  background: var(--night); color: #fff; box-shadow: 0 18px 40px -16px rgba(11, 14, 25, .6); font-size: 14px;
  animation: toastIn .18s ease-out;
}
.toast .ico { color: var(--accent); }
.toast--error { background: #7A1A10; border-color: transparent; }
.toast--error .ico, .toast--warn .ico { color: #fff; }
.toast--warn { background: #7A3A06; border-color: transparent; }
.toast .ico { width: 18px; height: 18px; }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- التبويبات: مفتاح مقسّم ---------- */
.tabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 18px; width: fit-content; max-width: 100%;
  background: var(--slate); border-radius: 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; flex: none;
  border: 0; border-radius: 9px; background: none; color: var(--ink-2);
  font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .12s, color .12s;
}
.tab:hover { color: var(--ink); background: rgba(23, 43, 118, .06); }
.tab.is-active { background: var(--ink); color: #fff; }
.tab .ico { width: 16px; height: 16px; }
.tab .count { font-family: var(--font-mono); font-size: 11.5px; min-width: 22px; padding: 0 6px; border-radius: 6px; background: rgba(23, 43, 118, .08); text-align: center; font-weight: 500; }
.tab.is-active .count { background: rgba(255, 255, 255, .16); color: #fff; }
.tab .count.is-hot { background: var(--accent); color: var(--on-accent); }
.tab-panel:not(.is-active) { display: none; }

/* ---------- البحث عن الطالب ---------- */
.picker { position: relative; }
.picker-input-wrap { position: relative; }
.picker-input-wrap > .ico { position: absolute; top: 50%; inset-inline-start: 13px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.picker-input-wrap .input { padding-inline-start: 40px; }
.picker-results {
  position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 35;
  max-height: 360px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 12px; box-shadow: var(--shadow);
}
.picker-results li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.picker-results li.is-active, .picker-results li:hover { background: var(--hl); }
.picker-results .p-name { font-weight: 600; }
.picker-results .p-meta { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.picker-results .p-empty { color: var(--ink-3); cursor: default; justify-content: center; }
.picker-results mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 1px; box-shadow: inset 0 -2px 0 var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px;
  background: var(--hl); border: 1px solid #D5DBF0; border-radius: 10px; font-size: 13.5px; font-weight: 600;
}
.chip small { color: var(--ink-3); font-weight: 500; }
.chip button { width: 24px; height: 24px; border-radius: 7px; border: 0; background: rgba(23, 43, 118, .08); display: grid; place-items: center; cursor: pointer; }
.chip button:hover { background: rgba(180, 35, 24, .14); color: var(--bad); }
.chip button .ico { width: 14px; height: 14px; }

.class-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin-top: 12px; max-height: 320px; overflow-y: auto; padding: 4px; }
.class-list label { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--rule); border-radius: 8px; cursor: pointer; font-size: 13.5px; background: var(--surface); }
.class-list label:hover { border-color: var(--ink-3); }

/* ---------- شاشة البوابة (التأخر الصباحي) ---------- */
.gate { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.gate-board {
  color: #fff; border-radius: 22px; padding: 24px 26px 26px;
  position: relative; z-index: 2;
  background: radial-gradient(42rem 18rem at 12% 120%, rgba(255, 72, 139, .48), transparent 70%), var(--night);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05);
}
.gate-board::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 80%); mask-image: linear-gradient(to bottom, #000, transparent 80%);
}
.gate-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.gate-clock { font-size: 64px; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; direction: ltr; }
.gate-clock small { font-size: 22px; font-weight: 400; margin-inline-start: 8px; color: var(--night-muted); }
.gate-date { color: var(--night-text); font-size: 14px; margin-top: 8px; }
.gate-meta { display: grid; gap: 8px; min-width: 210px; }
.gate-meta div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 12px; border: 1px solid var(--night-line); background: rgba(255, 255, 255, .03); border-radius: 12px; font-size: 13.5px; color: var(--night-text); }
.gate-meta b { color: #fff; font-weight: 500; font-family: var(--font-mono); }
.gate-meta .late-now b { color: var(--accent); }
.gate-search { position: relative; margin-top: 22px; }
.gate-search .input {
  height: 62px; font-size: 20px; padding-inline-start: 54px; border: 0; border-radius: 14px;
  background: #fff; color: var(--ink);
}
.gate-search .input:focus { box-shadow: 0 0 0 4px rgba(255, 72, 139, .45); }
.gate-search .picker-input-wrap > .ico { width: 24px; height: 24px; inset-inline-start: 18px; }
.gate-search .picker-results { color: var(--ink); }
.gate-search .picker-results li { padding: 12px 14px; font-size: 16px; }
.gate-tools { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--night-muted); }
.gate-tools .check { color: var(--night-text); font-size: 13.5px; }

.gate-panel { position: sticky; top: 80px; }
.gate-student { padding: 18px; }
.gate-student .name { font-size: 19px; font-weight: 600; line-height: 1.4; }
.gate-student .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; color: var(--ink-3); font-size: 13px; }
.gate-student .count-line { display: flex; align-items: center; gap: 10px; margin: 14px 0; padding: 10px 12px; border-radius: 9px; background: var(--late-soft); color: #6B3305; font-size: 13.5px; }
.gate-student .count-line b { font-size: 22px; font-weight: 600; color: var(--late); }
.gate-student .already { background: var(--info-soft); color: var(--info); }
.gate-empty { padding: 26px 18px; text-align: center; color: var(--ink-3); font-size: 14px; }
.gate-empty .ico { width: 40px; height: 40px; margin: 0 auto 10px; color: var(--rule-strong); stroke-width: 1.4; }
.gate-alert { margin: 0 18px 18px; padding: 14px 16px; border-radius: 10px; background: var(--late-soft); border: 1px solid #F0D1A8; color: #6B3305; font-size: 13.5px; }
.gate-alert strong { display: block; color: var(--late); font-size: 14.5px; margin-bottom: 2px; }
.gate-list-head { display: flex; align-items: baseline; gap: 12px; }
.gate-list-head .big { font-size: 28px; font-weight: 300; line-height: 1.1; color: var(--late); }

/* ---------- ملف الطالب ---------- */
.profile-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 24px 26px; background: var(--surface); border: 1px solid var(--rule); border-radius: 20px; margin-bottom: 18px; position: relative; overflow: hidden; }
.profile-hero::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--accent); }
.profile-hero h1 { font-size: 27px; }
.profile-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; color: var(--ink-2); font-size: 13.5px; }
.profile-facts span { display: inline-flex; align-items: center; gap: 7px; }
.profile-facts .ico { width: 16px; height: 16px; color: var(--ink-3); }
.profile-stats { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.pstat { padding: 9px 14px; border-radius: 12px; background: var(--slate); border: 1px solid transparent; flex: 0 1 130px; min-width: 92px; }
.pstat b { display: block; font-size: 27px; font-weight: 300; line-height: 1.25; }
.pstat small { color: var(--ink-3); font-size: 12px; }
.pstat--late b { color: var(--late); }
.pstat--bad b { color: var(--bad); }
.pstat--good b { color: var(--good); }
.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.score { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 150px; }
.score-ring { width: 132px; height: 132px; }
.score-ring .track { stroke: var(--rule); }
.score-ring .bar { transition: stroke-dashoffset .6s ease; }
.score-ring text { font-family: var(--font); }
.score--excellent { --score-c: var(--good); }
.score--good { --score-c: var(--info); }
.score--fair { --score-c: var(--late); }
.score--risk { --score-c: var(--bad); }
.score-ring .bar { stroke: var(--score-c); }
.score-label { font-weight: 700; color: var(--score-c); font-size: 14px; }
.score-caption { font-size: 12px; color: var(--ink-3); }

/* ---------- الخط الزمني للمعالجات ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: 11px; width: 2px; background: var(--rule); }
.timeline li { position: relative; padding-inline-start: 36px; padding-bottom: 18px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline .dot { position: absolute; inset-inline-start: 4px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--info); }
.timeline .dot--committee { border-color: var(--committee); }
.timeline .dot--closed { border-color: var(--good); }
.timeline .dot--start { border-color: var(--late); }
.timeline .t-title { font-weight: 700; font-size: 14.5px; }
.timeline .t-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.timeline .t-notes { margin-top: 6px; padding: 9px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--rule); font-size: 13.5px; white-space: pre-line; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin: 0; }
.facts > div { padding: 11px 14px; border-bottom: 1px solid var(--rule); border-inline-end: 1px solid var(--rule); margin-bottom: -1px; margin-inline-end: -1px; }
.facts dt { font-size: 12px; color: var(--ink-3); }
.facts dd { margin: 2px 0 0; font-weight: 600; font-size: 14px; }
.desc-block { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--rule); white-space: pre-line; }

/* ---------- الرسوم البيانية ---------- */
.chart { width: 100%; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .grid-line { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .axis-label { fill: var(--ink-3); font-size: 11px; font-family: var(--font-mono); }
.chart .value-label { fill: var(--ink); font-size: 12px; font-weight: 600; }
.chart .bar-g { cursor: default; outline: none; }
.chart .bar-g:hover .bar, .chart .bar-g:focus .bar { filter: brightness(1.08); }
.chart .bar-g:focus .hit { stroke: var(--ink); stroke-width: 1.5; }
.chart-tip {
  position: fixed; z-index: 90; pointer-events: none; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--night-line);
  background: var(--night); color: #fff; font-size: 12.5px; box-shadow: var(--shadow); line-height: 1.5;
}
.chart-tip b { display: block; font-size: 15px; }
.chart-data { margin-top: 10px; font-size: 13px; }
.chart-data summary { cursor: pointer; color: var(--ink-3); width: max-content; }
.chart-data summary:hover { color: var(--ink); }
.chart-data table { margin-top: 8px; }

.chart-empty { margin: 0; padding: 26px 0; text-align: center; color: var(--ink-3); }
.chart-note { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }
.chart-legend i { display: inline-block; width: 10px; height: 10px; margin-inline-end: 6px; border-radius: 2px; background: var(--c); vertical-align: -1px; }

/* التقارير: مؤشرات، ثم أقسام رسوم في عمودين */
.report-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; margin-bottom: 18px; }
.report-charts > .wide, .report-section { grid-column: 1 / -1; }
.report-section { display: flex; align-items: center; gap: 9px; margin: 6px 0 -4px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-strong); font-size: 17px; font-weight: 500; }
.report-section .ico { width: 19px; height: 19px; color: var(--accent-ink); }

.hbars { display: grid; gap: 10px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) 40px; align-items: center; gap: 12px; font-size: 13.5px; }
.hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); text-decoration: none; }
.hbar-track { height: 14px; position: relative; background: var(--slate); border-radius: 4px; }
.hbar-fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 4px; min-width: 2px; background: var(--bar-c, var(--late)); }
.hbar-value { font-weight: 600; font-variant-numeric: tabular-nums; text-align: start; }
.hbars--wrap .hbar { grid-template-columns: minmax(120px, 230px) minmax(0, 1fr) 40px; }
.hbars--wrap .hbar-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; line-height: 1.35; }

/* ---------- إشعارات الغياب من أولياء الأمور ---------- */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.guardian .login-card { max-width: 560px; }
.guardian-student { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 16px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface-2); }
.guardian-student > div { display: flex; flex-direction: column; line-height: 1.5; }
.guardian-student strong { font-size: 16px; }
.guardian-h { margin: 22px 0 8px; font-size: 15px; }
.guardian-history li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.guardian-history li > div { display: flex; flex-direction: column; min-width: 0; }
.link-row { display: flex; flex-wrap: wrap; gap: 8px; }
.link-row .input { flex: 1 1 280px; }
.decide { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.attach-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 13px; }
.attach-link .ico { width: 15px; height: 15px; }

/* ---------- الطلبة حسب فئات المخالفات ---------- */
.cat-dot { display: inline-block; width: 9px; height: 9px; margin-inline-end: 2px; border-radius: 50%; background: var(--c); }
.ledger th.cat-col, .ledger td.cat-col { width: 56px; padding-inline: 3px; text-align: center; }
.ledger th.col-name { min-width: 170px; }
.ledger th.cat-col { box-shadow: inset 0 -4px 0 var(--c); }
.ledger th.cat-col a { color: inherit; text-decoration: none; }
.ledger th.cat-col[aria-sort] { color: var(--ink); background: var(--hl); }
.catn { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px; border: 1.5px solid var(--c); border-radius: 6px; background: #fff; color: var(--c); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- رصد الغياب في بداية الحصة ---------- */
.ico.flip { transform: scaleX(-1); }
.lesson-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 8px; margin-bottom: 14px; }
.lesson-chip { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 6px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-3); line-height: 1.3; text-decoration: none; }
.lesson-chip b { font-size: 17px; color: inherit; }
.lesson-chip small { font-size: 11.5px; }
.lesson-chip:hover { border-color: var(--ink-3); }
.lesson-chip.is-done { border-color: #C8E2CF; background: var(--good-soft); color: var(--good); }
.lesson-chip.is-done.has-absent { border-color: #F2C6C0; background: var(--bad-soft); color: var(--bad); }
.lesson-chip.is-current { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.roll-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--rule); background: var(--surface-2); }
.roll-tools-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.roll-list { margin: 0; padding: 0; list-style: none; }
.roll-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 18px 7px 14px; border-bottom: 1px solid var(--rule); transition: background-color .15s; }
.roll-item:last-child { border-bottom: 0; }
.roll-item[data-state="absent"] { background: var(--bad-soft); }
.roll-item[data-state="late"] { background: var(--late-soft); }
.roll-idx { font-size: 13px; color: var(--ink-3); text-align: center; }
.roll-name { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 5px 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.roll-name strong { font-weight: 600; }
.roll-hints { display: flex; flex-wrap: wrap; gap: 4px; }
.roll-hints .tag { font-size: 11.5px; }
.roll-choice { display: inline-flex; overflow: hidden; border: 1px solid var(--rule-strong); border-radius: 9px; background: var(--surface); }
.rc { position: relative; cursor: pointer; }
.rc input { position: absolute; opacity: 0; pointer-events: none; }
.rc span { display: block; padding: 7px 13px; border-inline-start: 1px solid var(--rule); font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.rc:first-child span { border-inline-start: 0; }
.rc input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: -2px; }
.rc--present input:checked + span { background: var(--good-soft); color: var(--good); }
.rc--absent input:checked + span { background: var(--bad); color: #fff; }
.rc--late input:checked + span { background: var(--late); color: #fff; }
.roll-bar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 14px; padding: 12px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: rgba(255, 255, 255, .96); box-shadow: 0 -8px 22px -14px rgba(32, 36, 52, .4); backdrop-filter: blur(4px); }
.roll-counts { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; color: var(--ink-2); }
.roll-counts b { margin-inline-start: 4px; font-size: 18px; color: var(--ink); }
.roll-counts .c-absent b { color: var(--bad); }
.roll-counts .c-late b { color: var(--late); }

/* متابعة الغياب: الشعب (أو الطلبة) × الحصص */
.att-matrix th.am-col, .att-matrix td.am-cell, .att-matrix td.am-total, .att-matrix td.am-foot { width: 54px; padding-inline: 4px; text-align: center; }
.att-matrix th.am-col a { color: inherit; text-decoration: none; }
.am-cell a { display: block; color: inherit; font-weight: 600; text-decoration: none; }
.am-cell.is-missing { color: var(--rule-strong); }
.am-cell.is-clear { color: var(--good); }
.am-cell.is-present { color: #8FBF9C; }
.am-cell.is-absent { background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.am-cell.is-late { background: var(--late-soft); color: var(--late); font-weight: 600; }
.am-cell sup { margin-inline-start: 1px; font-size: 10px; color: var(--late); }
.att-matrix th.is-now { background: var(--ink); color: #fff; }
.att-matrix td.is-now { box-shadow: inset 2px 0 0 rgba(32, 36, 52, .25), inset -2px 0 0 rgba(32, 36, 52, .25); }
.att-matrix tfoot th, .att-matrix tfoot td { padding-block: 8px; border-top: 2px solid var(--rule-strong); background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); }
.att-matrix .am-total { font-weight: 700; }
.am-key { display: inline-block; min-width: 20px; padding: 0 4px; border-radius: 4px; font-weight: 600; text-align: center; }
.am-key.is-clear { color: var(--good); }
.am-key.is-absent { background: var(--bad-soft); color: var(--bad); }
.am-key.is-late { background: var(--late-soft); color: var(--late); }
.am-key.is-missing { color: var(--ink-3); }
.am-chip { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-inline-end: 3px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.am-chip.is-absent { background: var(--bad); color: #fff; }
.am-chip.is-late { background: var(--late); color: #fff; }

/* ---------- حالات فارغة ---------- */
.empty-state { text-align: center; padding: 42px 20px; color: var(--ink-3); }
.empty-state h2, .empty-state h3 { color: var(--ink); font-size: 16px; margin-bottom: 6px; }
.empty-mark { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--slate); border: 1px dashed var(--rule-strong); border-radius: 14px; }
.empty-mark .ico { width: 24px; height: 24px; color: var(--ink-3); }

/* ---------- الترقيم ---------- */
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 16px; }
.pager a, .pager span { min-width: 36px; height: 36px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font-family: var(--font-mono); font-size: 13px; text-decoration: none; }
.pager a:hover { border-color: var(--ink-3); }
.pager .current { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 500; }
.pager .gap { border: 0; background: none; }

/* ---------- قوائم متنوعة ---------- */
.list-plain { list-style: none; margin: 0; padding: 0; }
.list-rows > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--rule); }
.list-rows > li:last-child { border-bottom: 0; }
.list-rows .lr-main { min-width: 0; }
.list-rows .lr-title { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); text-decoration: none; }
.list-rows a.lr-title:hover { text-decoration: underline; }
.list-rows .lr-sub { font-size: 12.5px; color: var(--ink-3); }
.notif-item.unread { background: #FFF6FA; }
.notif-item.unread .lr-title::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); margin-inline-end: 8px; vertical-align: middle; }

.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.quick {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px;
  background: var(--slate); border: 1px solid transparent; color: var(--ink); text-decoration: none; transition: border-color .12s, background .12s;
}
.quick:hover { border-color: var(--rule-strong); background: #E9EEF3; }
.quick .q-ico { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--mist); color: var(--ink); flex: none; }
.quick .q-ico .ico { width: 22px; height: 22px; }
.quick strong { display: block; font-size: 15px; font-weight: 500; }
.quick small { color: var(--ink-3); font-size: 12.5px; }
.quick--bad .q-ico { background: var(--bad-soft); color: var(--bad); }
.quick--good .q-ico { background: var(--good-soft); color: var(--good); }
.quick--late .q-ico { background: var(--late-soft); color: var(--late); }
.quick--info .q-ico { background: var(--info-soft); color: var(--info); }
.lesson-progress { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 10px; }
.lp-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px 9px; border: 1px solid var(--rule); border-radius: var(--radius-sm); color: var(--ink-3); text-align: center; text-decoration: none; }
.lp-item:hover { border-color: var(--ink-3); }
.lp-item.is-now { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.lp-name { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.lp-value { font-size: 27px; font-weight: 300; line-height: 1.15; color: var(--bad); }
.lp-item.is-empty .lp-value { color: var(--rule-strong); }
.lp-caption { font-size: 11.5px; }
.lp-bar { display: block; width: 100%; height: 5px; margin-top: 4px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.lp-bar i { display: block; height: 100%; border-radius: 3px; background: var(--good); -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* ---------- اللائحة ---------- */
.reg-cat { border-inline-start: 4px solid var(--c, var(--ink)); }
.reg-cat .card-head h2 { color: var(--c); }
.reg-list { margin: 0; padding: 0 20px 0 0; }
.reg-list li { padding: 6px 0; border-bottom: 1px dashed var(--rule); }
.reg-list li:last-child { border-bottom: 0; }

/* ---------- صفحة الدخول ---------- */
.bare-main { min-height: 100vh; }
body.bare { background: var(--night); }   /* التوهج والنقاط في طبقة ثابتة مستقلة (قسم الزجاج المصنفر) */
body.bare > .content { background: var(--paper); border-radius: var(--radius-lg); margin-block: 28px; }
.login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 40px 20px 30px; }
.login-logo { width: 100%; max-width: 720px; padding: 22px 26px; background: var(--surface); border: 0; border-radius: 18px; position: relative; }
.login-logo::after { content: ""; position: absolute; inset-inline: 26px; bottom: -1px; height: 3px; background: linear-gradient(to left, var(--brand) 0 50%, var(--gold) 50% 100%); border-radius: 3px; }
.login-logo img { width: 100%; height: auto; }
.login-card { width: 100%; max-width: 440px; margin-top: 26px; padding: 30px 30px 24px; background: var(--surface); border: 0; border-radius: 24px; box-shadow: 0 40px 100px -40px rgba(255, 72, 139, .55), 0 24px 60px -30px rgba(0, 0, 0, .7); }
.login-card h1 { font-size: 27px; margin-bottom: 4px; }
.login-card .lead { color: var(--ink-3); margin-bottom: 22px; font-size: 14px; }
.login-motto { max-width: 560px; text-align: center; color: var(--night-muted); font-size: 13.5px; line-height: 1.9; margin-top: 22px; }
.login-motto a { color: var(--night-text); }
.pw-wrap { position: relative; }
/* حقل كلمة المرور لاتيني الاتجاه، لذا تُستخدم جهات فعلية لا منطقية */
.pw-wrap .input { padding-left: 46px; padding-right: 12px; }
.pw-toggle { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); }

/* ---------- بطاقات الدخول ---------- */
.cred-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cred {
  border: 1px dashed var(--rule-strong); border-radius: 10px; padding: 12px 14px; background: #fff;
  break-inside: avoid; page-break-inside: avoid; font-size: 13px;
}
.cred-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }
.cred-head img { width: 28px; height: 30px; object-fit: contain; }
.cred-head strong { font-size: 13px; }
.cred-head small { display: block; font-size: 10.5px; color: var(--ink-3); }
.cred .c-name { font-weight: 700; font-size: 14px; }
.cred .c-class { color: var(--ink-3); font-size: 12px; margin-bottom: 6px; }
.cred .c-row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.cred .c-row b { font-family: Consolas, "Courier New", monospace; font-size: 14px; letter-spacing: .5px; direction: ltr; }
.cred .c-url { margin-top: 6px; font-size: 10.5px; color: var(--ink-3); direction: ltr; text-align: left; overflow-wrap: anywhere; }

/* ---------- النوافذ الحوارية ---------- */
dialog.modal {
  border: 0; border-radius: 20px; padding: 0; width: min(560px, calc(100vw - 32px));
  color: var(--ink); background: var(--surface); box-shadow: 0 30px 80px -20px rgba(20, 22, 34, .45);
}
dialog.modal::backdrop { background: rgba(11, 14, 25, .6); backdrop-filter: blur(2px); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.modal-head h2 { font-size: 16px; }
.modal-body { padding: 18px 20px 4px; }
.modal-foot { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--rule); background: var(--surface-2); border-radius: 0 0 20px 20px; }

/* ---------- متفرقات ---------- */
.inline-form { display: inline; margin: 0; }
.divider { height: 1px; background: var(--rule); margin: 18px 0; border: 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14px; margin: 0; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; font-weight: 600; }
.pw-reveal { font-family: Consolas, "Courier New", monospace; font-size: 18px; letter-spacing: 1px; padding: 4px 12px; border-radius: 8px; background: var(--surface); border: 1px dashed var(--rule-strong); display: inline-block; direction: ltr; color: var(--ink); }
.map-table td { vertical-align: top; }
.map-table .sample { font-size: 12.5px; color: var(--ink-3); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.step { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--rule); font-size: 13px; color: var(--ink-3); }
.step b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--rule); font-size: 12px; }
.step.is-active { color: var(--ink); border-color: var(--ink); }
.step.is-active b { background: var(--ink); color: #fff; border-color: var(--ink); }
.step.is-done b { background: var(--good); color: #fff; border-color: var(--good); }
.logo-preview { max-width: 520px; padding: 14px; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); }
.logo-preview img { width: 100%; height: auto; }

/* ---------- صفحات تصدير PDF (تُبنى خارج الشاشة ثم تُحوَّل إلى صفحات PDF) ---------- */
.pdf-stage { position: fixed; top: 0; left: -12000px; z-index: -1; pointer-events: none; }
.pdf-page {
  width: 794px; height: 1123px; padding: 36px 40px 24px; box-sizing: border-box;
  display: flex; flex-direction: column; direction: rtl;
  background: #fff; color: #1E2230; font-family: var(--font); font-size: 11.5px; line-height: 1.55;
}
.pdf-page.landscape { width: 1123px; height: 794px; }
.pdf-head img { display: block; width: 100%; max-width: 714px; height: auto; margin: 0 auto; }
.pdf-rule { height: 4px; margin: 8px 0 10px; border-radius: 2px; background: linear-gradient(to left, var(--brand) 0 50%, var(--gold) 50% 100%); }
.pdf-title { font-family: var(--font-head); font-size: 19px; font-weight: 700; text-align: center; margin: 2px 0; }
.pdf-sub { text-align: center; color: var(--ink-3); font-size: 11.5px; margin-bottom: 10px; }
.pdf-head.compact { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 6px; margin-bottom: 10px; border-bottom: 2px solid var(--brand); color: var(--ink-3); font-size: 10.5px; }
.pdf-head.compact strong { font-family: var(--font-head); font-size: 13px; color: var(--ink); }
.pdf-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.pdf-table { width: 100%; border-collapse: collapse; }
.pdf-table th { padding: 6px 7px; background: var(--ink); color: #fff; font-weight: 600; font-size: 10.5px; text-align: start; }
.pdf-table td { padding: 5px 7px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.pdf-table tbody tr:nth-child(even) td { background: #FAF9F5; }
.pdf-table .idx { width: 30px; text-align: center; color: var(--ink-3); }
.pdf-table th.idx { color: #fff; }
.pdf-table .pdf-empty { padding: 30px; text-align: center; color: var(--ink-3); }
.pdf-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 10px; }
.pdf-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; margin-bottom: 12px; }
.pdf-charts > .wide, .pdf-charts > .pdf-section, .pdf-charts > .pdf-kpis { grid-column: 1 / -1; }
.pdf-section { margin: 2px 0 0; padding-bottom: 4px; border-bottom: 2px solid var(--brand); font-family: var(--font-head); font-size: 14px; font-weight: 700; }
.pdf-table-wrap .pdf-section { margin-bottom: 8px; }
.pdf-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pdf-kpi { padding: 7px 10px 8px; border: 1px solid var(--rule); border-top: 3px solid var(--kpi-c, var(--ink)); border-radius: 6px; }
.pdf-kpi--late { --kpi-c: var(--late); }
.pdf-kpi--bad { --kpi-c: var(--bad); }
.pdf-kpi--good { --kpi-c: var(--good); }
.pdf-kpi--info { --kpi-c: var(--info); }
.pdf-kpi-label { display: block; font-size: 10px; color: var(--ink-2); }
.pdf-kpi b { display: block; font-size: 20px; line-height: 1.3; }
.pdf-kpi small { display: block; font-size: 9px; color: var(--ink-3); }
.pdf-chart { padding: 8px 12px 10px; border: 1px solid var(--rule); border-radius: 6px; }
.pdf-chart h3 { margin: 0; font-family: var(--font-head); font-size: 12px; font-weight: 600; }
.pdf-chart-sub { margin-bottom: 6px; font-size: 9px; color: var(--ink-3); }
.pdf-chart .hbars { gap: 5px; }
.pdf-chart .hbars .hbar { grid-template-columns: minmax(64px, 118px) minmax(0, 1fr) 28px; gap: 8px; font-size: 10px; }
.pdf-chart .hbars--wrap .hbar { grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) 28px; }
.pdf-chart .hbar-label { white-space: normal; line-height: 1.25; }
.pdf-chart .hbar-track { height: 10px; }
.pdf-chart .chart-legend { margin-top: 6px; font-size: 9.5px; }
/* ملف PDF يُرسم بمقاسه الفعلي حتى لو صُدِّر من جوال */
.pdf-chart .chart { overflow: visible; }
.pdf-chart .chart svg { min-width: 0; }
.pdf-chart .chart .axis-label { font-size: 11px; }
.pdf-chart .chart .value-label { font-size: 12px; }
.pdf-chart .chart-empty { padding: 14px 0; font-size: 10px; }

/* ---------- الاستجابة للشاشات ---------- */
@media (max-width: 1320px) {
  .brand-text small { display: none; }
}
/* الجوال والشاشات المتوسطة: القائمة شاشة كاملة من بطاقات */
@media (max-width: 1120px) {
  .masthead { height: 64px; padding: 0 12px; gap: 10px; }
  .masthead .nav-toggle { display: inline-grid; }
  .topnav { display: none; }
  .workspace { margin: 0 8px 8px; border-radius: 20px; }
  body.nav-open { overflow: hidden; }
  body.nav-open .masthead { backdrop-filter: none; background: var(--night); }
  body.nav-open .nav-toggle .ico-menu { display: none; }
  body.nav-open .nav-toggle .ico-close { display: block; }
  body.nav-open .topnav {
    display: block; position: fixed; inset: 64px 0 0; z-index: 45; margin: 0; padding: 14px 16px 32px;
    border: 0; border-radius: 0; background: var(--night); overflow-y: auto;
  }
  .topnav > .tn-link { display: flex; height: 46px; margin-bottom: 8px; background: rgba(255, 255, 255, .05); border: 1px solid var(--night-line); }
  .topnav > .tn-link::after { display: none; }
  .topnav .tn-group { margin-top: 18px; }
  .topnav .tn-btn { pointer-events: none; height: auto; padding: 0 2px 10px; background: none !important; font-size: 12px; color: var(--night-muted); }
  .topnav .tn-btn::after, .topnav .tn-btn .chev, .topnav .tn-btn .tn-badge { display: none; }
  .topnav .tn-panel { position: static; width: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .topnav .tn-panel-head { display: none; }
  .topnav .tn-items, .topnav .tn-panel.is-wide .tn-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .topnav .tn-items > .tn-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .topnav .tn-item { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--night-line); color: #fff; }
  .topnav .tn-item:hover { background: rgba(255, 255, 255, .08); }
  .topnav .tn-item.is-active { background: rgba(255, 72, 139, .14); border-color: rgba(255, 72, 139, .45); }
  .topnav .tn-item.is-active::before { display: none; }
  .topnav .tn-ico, .topnav .tn-item:hover .tn-ico { width: 36px; height: 36px; background: rgba(255, 255, 255, .08); color: #fff; }
  .topnav .tn-item.is-active .tn-ico { background: var(--accent); color: var(--on-accent); }
  .topnav .tn-text strong { font-size: 13.5px; font-weight: 500; }
  .topnav .tn-text small { display: none; }
  .topnav .tn-item .tn-badge { position: absolute; top: 10px; inset-inline-end: 10px; }
  .topnav .tn-foot { display: block; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--night-line); font-family: var(--font-mono); font-size: 12px; color: var(--night-muted); }
  body.menu-open .workspace::after { display: none; }
}
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hide-md { display: none !important; }
  .dash-row:not(.dash-row--half) { grid-template-columns: minmax(0, 1fr); }
  .grid-main { grid-template-columns: minmax(0, 1fr); }
  .gate { grid-template-columns: minmax(0, 1fr); }
  .gate-panel { position: static; }
}
@media (max-width: 980px) {
  .content { padding: 22px 18px 50px; }
  .grid-2, .grid-3, .report-charts { grid-template-columns: minmax(0, 1fr); }
  .profile-hero { grid-template-columns: minmax(0, 1fr); }
  .cred-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 14px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 13px 14px; }
  .kpi-value { font-size: 30px; }
  .mast-cta span, .mast-cta .chev { display: none; }
  .mast-cta { width: 38px; padding: 0; }
  .brand-text strong { font-size: 15px; }
  .user-chip-text { display: none; }
  .user-chip { padding: 3px; }
  .page-head h1 { font-size: 23px; }
  .workspace { margin: 0; border-radius: 18px 18px 0 0; }
  .content { padding: 18px 14px 40px; }
  .is-home .page-head { padding: 20px 18px; border-radius: 16px; }
  .is-home .page-head h1 { font-size: 26px; }
  .gate-board { padding: 18px 16px 18px; border-radius: 18px; }
  .gate-clock { font-size: 46px; }
  .gate-meta { min-width: 0; width: 100%; grid-template-columns: 1fr 1fr; }
  .gate-search .input { height: 56px; font-size: 18px; }
  .form-grid .span-2 { grid-column: auto; }
  .form-grid--picker { grid-template-columns: minmax(0, 1fr); }
  .hbar { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) 34px; }
  .hbars--wrap .hbar { grid-template-columns: minmax(0, 45%) minmax(0, 1fr) 34px; }
  .dash-row--half { grid-template-columns: minmax(0, 1fr); }
  .queue .ledger th:first-child { width: 40%; }
  .queue .ledger .col-cat { width: 82px; }
  .queue .strong-link.one-line { white-space: normal; }
  .roll-item { grid-template-columns: 26px minmax(0, 1fr); padding: 8px 12px; }
  .roll-choice { display: grid; grid-template-columns: repeat(3, 1fr); grid-column: 1 / -1; }
  .rc span { padding: 10px 6px; text-align: center; }
  .roll-bar .btn { flex: 1 1 100%; }
  /* الرسوم الزمنية الطويلة تبقى مقروءة على الجوال مع تمرير أفقي، ونصوص الرسوم أكبر لأنها تُصغَّر مع الرسم */
  .chart { overflow-x: auto; }
  .chart svg { min-width: var(--chart-min, 0); }
  .chart .axis-label { font-size: 16px; }
  .chart .value-label { font-size: 17px; }
  .ledger th, .ledger td { padding: 9px 10px; }
  .cred-grid { grid-template-columns: 1fr; }
  .login { padding: 20px 14px; }
  .login-logo { padding: 12px 14px; }
  .login-card { padding: 22px 18px 18px; }
  .hide-sm { display: none !important; }
}

/* ---------- الطباعة ---------- */
@media print {
  @page { size: A4; margin: 12mm; }
  :root { --ink: #1E2230; --ink-2: #3A3F4F; --ink-3: #5A6070; }
  body { background: #fff; font-size: 12.5px; }
  .workspace { margin: 0; background: #fff; border-radius: 0; box-shadow: none; }
  .is-home .page-head { background: none; color: inherit; padding: 0; }
  .is-home .page-head h1 { color: inherit; }
  .is-home .page-head p { color: var(--ink-3); }
  .masthead, .no-print, .flash, .toasts, .page-actions, .filters, .pager, .tabs, .row-actions { display: none !important; }
  .app { display: block; background: none; }
  .content { padding: 0; max-width: none; }
  .card, .kpi, .profile-hero { border-color: #bbb; break-inside: avoid; }
  .ledger th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tab-panel { display: block !important; }
  .print-only { display: block !important; }
  a { color: inherit; text-decoration: none; }
  .cred-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  /* التقارير المطبوعة: المؤشرات في صف واحد والرسوم في عمودين، بألوانها */
  .report-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px; }
  .report-charts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .report-section { break-after: avoid; }
  .chart-data { display: none !important; }
  .chart { overflow: visible; }
  .chart svg { min-width: 0 !important; }
  .report-charts .chart .axis-label { font-size: 15px; }
  .report-charts .chart .value-label { font-size: 16px; }
  .hbar-fill, .kpi::after, .chart-legend i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .roll-bar, .lesson-strip { display: none !important; }
  .am-cell, .am-chip, .att-matrix th.is-now { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.print-only { display: none; }

/* ---------- الصحة المدرسية ---------- */
.tag--health { background: #E6F4F3; color: #0B6E69; border-color: #BFE0DD; }
.tag--health .ico { width: 13px; height: 13px; }
.kpis--mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 0; }
.kpis--mini .kpi { padding: 12px 14px; }
.kpis--mini .kpi-value { font-size: 24px; margin-top: 4px; }
.kpis--mini .kpi-label { font-size: 12.5px; }
.kpis--mini .kpi-label .ico { display: none; }
.health-card { margin: -4px 0 16px; padding: 12px 14px; border: 1px solid #BFE0DD; border-inline-start: 3px solid #0B6E69; border-radius: var(--radius); background: #F3FAF9; font-size: 14px; }
.hc-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.hc-link { margin-inline-start: auto; font-size: 13px; }
.hc-conds { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 5px; }
.hc-conds li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.health-card p { margin: 4px 0 0; }
.hc-warn { color: var(--late); font-weight: 600; }
.outcome-field { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.outcome-field legend { padding: 0; margin-bottom: 6px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-flex; align-items: center; padding: 8px 14px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--surface); font-size: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.choice input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--info); outline-offset: 2px; }
.eyebrow { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; color: #0B6E69; font-size: 13px; font-weight: 600; }
.eyebrow .ico { width: 16px; height: 16px; }
.cond-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.cond-list { list-style: none; margin: 0; padding: 0; }
.cond-item { padding: 14px 18px; border-top: 1px solid var(--rule); }
.cond-item:first-child { border-top: 0; }
.cond-list--compact .cond-item { padding: 10px 0; }
.cond-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cond-head strong { font-size: 15.5px; }
.cond-text { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.cond-emergency { padding: 6px 10px; border-radius: 8px; background: var(--late-soft); color: #6B3305; }
.cond-meta { margin: 6px 0 0; }
.cond-edit { margin-top: 8px; }
.cond-edit > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--info); font-size: 13px; font-weight: 600; list-style: none; }
.cond-edit > summary::-webkit-details-marker { display: none; }
.cond-edit > summary .ico { width: 15px; height: 15px; }
.cond-edit[open] > summary { margin-bottom: 10px; }
.stack-sm > * + * { margin-top: 10px; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 12px; }
.tag-line { margin-top: 4px; }
.health-alert { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; }
.health-alert .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.cond-tabs { flex-wrap: wrap; overflow: visible; }
.btn.danger { color: var(--bad); }
@media print { .cond-edit, .health-card { display: none !important; } }

/* ==========================================================
   أسلوب الزجاج المصنفر (Frosted): أسطح شفافة غير لامعة تضبّب ما خلفها وتأخذ من ألوانه،
   بلا لمعة ولا تدرّجات عاكسة. طبقة مستقلة في آخر الملف؛ حذفها يعيد الأسطح المصمتة.
   ========================================================== */
:root {
  --frost-blur: blur(18px) saturate(150%);
  --frost-blur-sm: blur(12px) saturate(140%);
  --frost-dark: rgba(14, 18, 34, .76);
  --frost-dark-edge: rgba(255, 255, 255, .08);
  --frost-shadow: 0 10px 34px -16px rgba(23, 43, 118, .22);
  /* حبيبات خافتة جداً تعطي ملمس الزجاج المصنفر: فاتحة للأسطح الداكنة، وداكنة للأسطح الفاتحة */
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .17 0 0 0 0 .46 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ألوان خافتة خلف الزجاج: وردي وبنفسجي وأزرق على الليل.
   طبقة ثابتة مستقلة (لا background-attachment: fixed الذي يعيد رسم الصفحة كلها مع كل تمرير) */
body.bare { background: var(--night); }
.app::before, body.bare::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46rem 30rem at 88% -12%, rgba(255, 72, 139, .34), transparent 65%),
    radial-gradient(40rem 28rem at 6% 4%, rgba(122, 127, 178, .32), transparent 65%),
    radial-gradient(44rem 30rem at 50% 115%, rgba(49, 73, 166, .30), transparent 65%);
}
body.bare::before {
  background:
    radial-gradient(46rem 30rem at 85% -12%, rgba(255, 72, 139, .36), transparent 65%),
    radial-gradient(40rem 28rem at 8% 20%, rgba(122, 127, 178, .30), transparent 65%),
    radial-gradient(44rem 30rem at 40% 115%, rgba(49, 73, 166, .30), transparent 65%),
    radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.3px) 0 0 / 26px 26px;
}

/* الشريط العلوي: زجاج مصنفر داكن عائم (معتم بما يكفي ليبقى النص واضحاً فوق المحتوى الفاتح عند التمرير) */
.masthead {
  top: 10px; margin: 10px 12px 12px; height: 64px; padding: 0 12px 0 14px; border-radius: 18px;
  background: var(--grain-light), var(--frost-dark);
  border: 1px solid var(--frost-dark-edge);
  -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur);
  box-shadow: 0 18px 44px -26px rgba(0, 0, 0, .7);
}
/* عند فتح قائمة يتوقف تضبيب الشريط نفسه حتى تضبّب اللوحة المنسدلة الصفحة التي خلفها */
.masthead:has(.tn-group[data-open="1"]), .masthead:has(.dropdown.open) {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: var(--grain-light), rgba(14, 18, 34, .94);
}
.topnav { position: relative; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); box-shadow: none; }
.tn-link.is-active, .tn-group.is-current > .tn-btn { background: rgba(255, 255, 255, .1); box-shadow: none; }
.user-chip { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); box-shadow: none; }
/* عدسة مصنفرة تنزلق تحت عنصر القائمة الذي تمر عليه الفأرة (تحركها GSAP) */
.tn-lens {
  position: absolute; top: 4px; left: 0; z-index: 0; height: 38px; width: 0; border-radius: 9px; pointer-events: none; opacity: 0;
  background: rgba(255, 255, 255, .11); border: 1px solid rgba(255, 255, 255, .07);
}
.topnav > .tn-link, .topnav > .tn-group { position: relative; z-index: 1; }
html.gsap .topnav .tn-link:hover, html.gsap .topnav .tn-btn:hover { background: none; }

/* اللوحات المنسدلة وقائمة الحساب ونتائج البحث: زجاج مصنفر فاتح */
.tn-panel, .dropdown-menu, .picker-results {
  background: var(--grain-dark), rgba(255, 255, 255, .74);
  border: 1px solid rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur);
  box-shadow: 0 28px 70px -28px rgba(11, 14, 25, .5);
}
.dropdown-menu { background: var(--grain-dark), rgba(255, 255, 255, .84); }
html.gsap .tn-panel { transition: none; }
.tn-item:hover { background: rgba(255, 255, 255, .6); }
.tn-item.is-active { background: rgba(255, 255, 255, .78); }
.tn-ico { background: rgba(23, 43, 118, .08); box-shadow: none; }
.tn-item:hover .tn-ico { background: rgba(23, 43, 118, .13); }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: rgba(23, 43, 118, .06); }
/* ورقة العمل: ألوان خافتة منتشرة تتلون بها البطاقات المصنفرة فوقها */
.workspace {
  background:
    radial-gradient(38rem 26rem at 8% 0%, rgba(255, 72, 139, .15), transparent 70%),
    radial-gradient(44rem 30rem at 96% 28%, rgba(122, 127, 178, .22), transparent 70%),
    radial-gradient(40rem 26rem at 30% 100%, rgba(49, 73, 166, .13), transparent 70%),
    #F3F5FB;
  border: 1px solid rgba(255, 255, 255, .4);
  box-shadow: 0 30px 90px -50px rgba(255, 72, 139, .5);
}

/* البطاقات والمؤشرات والتصفية: أبيض مصنفر شبه شفاف، بلا لمعة */
.card, .kpi, .filters, .profile-hero, .fieldset {
  background: rgba(255, 255, 255, .62);
  border-color: rgba(255, 255, 255, .72);
  box-shadow: var(--frost-shadow);
}
a.kpi:hover { background: rgba(255, 255, 255, .78); box-shadow: 0 16px 40px -18px rgba(23, 43, 118, .3); }
.quick, .callout, .pstat { background: rgba(255, 255, 255, .45); border-color: rgba(255, 255, 255, .6); box-shadow: none; }
.quick:hover { background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .9); }
.callout--warn { background: var(--late-soft); border-color: #F0D1A8; }
.callout--committee { background: var(--committee-soft); border-color: #D8CEEA; }
.empty-mark { background: rgba(23, 43, 118, .05); }
.ledger tbody tr:hover { background: rgba(23, 43, 118, .04); }
.input, .select, textarea.input { background-color: rgba(255, 255, 255, .78); }
.input:focus, .select:focus, textarea.input:focus { background-color: #fff; }

/* التبويبات والأزرار: مسطحة غير لامعة */
/* بلا تضبيب خاص بكل زر: عشرات طبقات التضبيب في الجداول تُبطئ التمرير، والورقة خلفها فاتحة شبه مصمتة أصلاً */
.tabs { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .7); box-shadow: none; }
.tab.is-active { background: var(--ink); box-shadow: none; }
.btn { background: rgba(255, 255, 255, .62); border-color: rgba(23, 43, 118, .14); box-shadow: none; }
.btn:hover { background: rgba(255, 255, 255, .8); border-color: rgba(23, 43, 118, .28); }
.btn-primary { background: var(--accent); border-color: var(--accent); box-shadow: none; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: none; }
.btn-dark { background: var(--ink); border-color: var(--ink); }
.btn-dark:hover { background: #10205C; border-color: #10205C; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: rgba(23, 43, 118, .06); }
.btn-danger:hover { background: var(--bad-soft); }
.btn-wa:hover { background: #EAF6EE; }
/* الأزرار فوق الأسطح الداكنة: زجاج مصنفر داكن بنص أبيض */
.is-home .page-head .btn:not(.btn-primary), .toolbar .btn:not(.btn-primary) { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: #fff; }
.is-home .page-head .btn:not(.btn-primary):hover, .toolbar .btn:not(.btn-primary):hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .3); }

/* لوحة الترحيب ولوحة البوابة: ليل مصمت بتوهج ونقاط، بلا لمعة */
.is-home .page-head, .gate-board { border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 24px 60px -34px rgba(11, 14, 25, .75); }
.gate-meta div { background: rgba(255, 255, 255, .05); box-shadow: none; }

/* صفحة الدخول ونوافذ الحوار والتنبيهات العائمة */
.login-card {
  background: var(--grain-dark), rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur);
  box-shadow: 0 40px 100px -40px rgba(255, 72, 139, .4), 0 24px 60px -30px rgba(0, 0, 0, .6);
}
dialog.modal { background: var(--grain-dark), rgba(255, 255, 255, .82); border: 1px solid rgba(255, 255, 255, .5); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); }
dialog.modal::backdrop { background: rgba(11, 14, 25, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-foot { background: rgba(243, 245, 250, .55); }
.toast { background: var(--grain-light), rgba(14, 18, 34, .74); border-color: rgba(255, 255, 255, .1); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); }
.toast--error { background: var(--grain-light), rgba(122, 26, 16, .86); }
.toast--warn { background: var(--grain-light), rgba(122, 58, 6, .86); }
.chart-tip { background: rgba(14, 18, 34, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.roll-bar { background: rgba(255, 255, 255, .62); border-color: rgba(255, 255, 255, .7); box-shadow: 0 -10px 30px -18px rgba(23, 43, 118, .3); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); }

/* شريط تقدم التحميل (التنقل دون إعادة تحميل الصفحة) */
.nav-progress {
  position: fixed; top: 0; inset-inline: 0; z-index: 120; height: 3px; pointer-events: none;
  background: var(--accent); transform: scaleX(0); transform-origin: right center; opacity: 0;
}

/* الجوال: شريط عائم أصغر، والقائمة لوح مصنفر داكن فوق الصفحة */
@media (max-width: 1120px) {
  .masthead { top: 8px; margin: 8px 8px 10px; height: 58px; border-radius: 16px; }
  body.nav-open .masthead { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--grain-light), rgba(14, 18, 34, .94); }
  body.nav-open .topnav {
    inset: 74px 8px 8px; border-radius: 20px;
    background: var(--grain-light), rgba(14, 18, 34, .8); border: 1px solid rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
  }
  .tn-lens { display: none; }
  .topnav .tn-btn { color: var(--night-text); }
  .topnav .tn-item { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .08); box-shadow: none; }
  .topnav .tn-item:hover { background: rgba(255, 255, 255, .1); }
  .topnav .tn-item.is-active { background: rgba(255, 72, 139, .16); border-color: rgba(255, 72, 139, .45); }
  .workspace { margin: 0 8px 8px; }
}
@media (max-width: 640px) {
  .workspace { margin: 0; border-radius: 18px 18px 0 0; }
}

/* الحركة المخففة: بلا عدسة */
@media (prefers-reduced-motion: reduce) {
  .tn-lens { display: none; }
}

/* حركة GSAP: العدسة تتولى إبراز العنصر الحالي في الشاشات الكبيرة، واللوحات تكبر من حافتها العليا */
.tn-panel { transform-origin: 50% 0; }
.tn-panel--end { transform-origin: 0 0; }
#content:focus { outline: none; }
@media (min-width: 1121px) {
  html.gsap .tn-link.is-active, html.gsap .tn-group.is-current > .tn-btn, html.gsap .tn-group.is-open > .tn-btn { background: none; box-shadow: none; }
}
@media (max-width: 1120px) {
  html.gsap .topnav .tn-link:hover { background: rgba(255, 255, 255, .1); }
}

/* بلا زجاج: المتصفحات القديمة التي لا تدعم التضبيب، ومن أوقف «تأثيرات الشفافية» في نظامه — أسطح معتمة بالألوان نفسها */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead, body.nav-open .topnav { background-color: var(--night); }
  .tn-panel, .dropdown-menu, .picker-results, .login-card, dialog.modal, .roll-bar { background-color: #fff; }
}
@media (prefers-reduced-transparency: reduce) {
  .masthead, body.nav-open .topnav { background-color: var(--night); }
  .tn-panel, .dropdown-menu, .picker-results, .login-card, dialog.modal, .roll-bar { background-color: #fff; }
}

/* الطباعة: لا زجاج — صفحة بيضاء وحدود رمادية */
@media print {
  .app, body.bare { background: none !important; }
  .app::before, body.bare::before { display: none !important; }
  .workspace { background: #fff !important; border: 0 !important; box-shadow: none !important; }
  .card, .kpi, .filters, .profile-hero, .fieldset, .quick, .callout, .pstat { background: #fff !important; border-color: #bbb !important; box-shadow: none !important; }
  .is-home .page-head { background: none !important; border: 0 !important; box-shadow: none !important; }
  .btn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .nav-progress { display: none !important; }
}