/* سنتر الأول — الهيكل والمكونات. الألوان كلها متغيرات في :root. */
:root {
  --navy: #1E3A6B; --gold: #D4A437; --maroon: #6B1A2B;
  --bg: #F7F5F0; --surface: #FFFFFF; --surface-2: #F1EEE6;
  --text: #1B2333; --muted: #5B6475; --line: #E4E0D6;
  --ok: #1F7A4D; --warn: #B7791F; --err: #B42318; --info: var(--navy);
  /* نسخ آمنة للنص (تباين ≥ 4.5) وخلفيات الحالات */
  --ok-t: #17603D; --warn-t: #8A5A0F; --err-t: #B42318; --info-t: #1E3A6B;
  --ok-bg: rgba(31, 122, 77, .12); --warn-bg: rgba(183, 121, 31, .16); --err-bg: rgba(180, 35, 24, .10); --info-bg: rgba(30, 58, 107, .10);
  --primary: #1E3A6B;             /* لون هوية المركز (يُضبط من me.brand.color) */
  --accent: var(--primary);       /* لون العناوين/الروابط */
  --on-gold: #0F1D36;             /* نص الزر الذهبي */
  --header: var(--primary); --on-header: #FFFFFF;
  --active-bg: rgba(212, 164, 55, .16);
  --radius: 12px; --radius-btn: 10px;
  --shadow: 0 1px 3px rgba(15, 29, 54, .10), 0 2px 8px rgba(15, 29, 54, .06);
  --head-h: 56px; --nav-h: 64px; --side-w: 240px; --side-w-min: 72px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0F1D36; --surface: #16284A; --surface-2: #1C3158;
  --text: #EEF1F6; --muted: #A8B3C7; --line: #2A3E63;
  --ok-t: #6FD39C; --warn-t: #F0C36A; --err-t: #FF9B91; --info-t: #A9C4F5;
  --ok-bg: rgba(111, 211, 156, .14); --warn-bg: rgba(240, 195, 106, .16); --err-bg: rgba(255, 155, 145, .14); --info-bg: rgba(169, 196, 245, .14);
  --accent: var(--gold); --header: #0B1730; --active-bg: rgba(212, 164, 55, .20);
  --shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1D36; --surface: #16284A; --surface-2: #1C3158;
    --text: #EEF1F6; --muted: #A8B3C7; --line: #2A3E63;
    --ok-t: #6FD39C; --warn-t: #F0C36A; --err-t: #FF9B91; --info-t: #A9C4F5;
    --ok-bg: rgba(111, 211, 156, .14); --warn-bg: rgba(240, 195, 106, .16); --err-bg: rgba(255, 155, 145, .14); --info-bg: rgba(169, 196, 245, .14);
    --accent: var(--gold); --header: #0B1730; --active-bg: rgba(212, 164, 55, .20);
    --shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
html, body { margin: 0; }
body {
  font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.6; background: var(--bg); color: var(--text);
  min-height: 100dvh; overflow-x: hidden; overflow-wrap: anywhere;
}
img, svg { max-width: 100%; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.35; margin: 0; }
h2 { font-size: 24px; color: var(--accent); }
h3 { font-size: 20px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.num, .ltr-num { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; text-align: left; unicode-bidi: plaintext; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i { width: 24px; height: 24px; flex: none; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.i use { fill: none; stroke: currentColor; }
.i-sm { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- أزرار ---------- */
.btn {
  font: inherit; font-weight: 600; line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 24px; border: 0; border-bottom: 3px solid var(--maroon);
  border-radius: var(--radius-btn); cursor: pointer; text-decoration: none; text-align: center;
  background: var(--gold); color: var(--on-gold); box-shadow: var(--shadow);
  transition: transform .15s, opacity .15s, background-color .15s;
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; transform: none; }
.btn-secondary { background: transparent; color: var(--accent); border: 2px solid var(--accent); box-shadow: none; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); box-shadow: none; }
.btn-danger { background: transparent; color: var(--err-t); border: 1px solid var(--err-t); box-shadow: none; }
.btn-wa { background: #1B7F43; color: #fff; border-bottom-color: #0F5A2E; }
.btn-sm { min-height: 44px; padding: 6px 16px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { min-width: 44px; padding: 8px; }
.btn.is-loading { position: relative; pointer-events: none; opacity: .85; }
.btn.is-loading::before {
  content: ''; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-inline-end-color: transparent; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- بطاقات ---------- */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; border: 1px solid var(--line); }
.card > h3 { margin-bottom: 8px; }
.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } .tiles { gap: 16px; } }
@media (min-width: 1200px) { .grid, .tiles { grid-template-columns: repeat(3, 1fr); } }
.stat-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 12px; }
.stat-card .stat-n { font-size: 32px; font-weight: 700; line-height: 1.2; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat-card .stat-l { color: var(--muted); }
.stat-card .i { grid-row: 1 / 3; grid-column: 2; width: 40px; height: 40px; color: var(--gold); }
.tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 112px; padding: 16px 8px; text-align: center; text-decoration: none; font: inherit; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-bottom: 3px solid var(--gold);
  border-radius: var(--radius); box-shadow: var(--shadow); cursor: pointer; width: 100%;
}
.tile .i { width: 36px; height: 36px; color: var(--gold); }
a.tile:hover, button.tile:hover { background: var(--surface-2); }
.tile.soon { opacity: .7; border-bottom-color: var(--line); }
.tile.soon .i { color: var(--muted); }
.soon-b { font-size: 12px; font-weight: 600; padding: 0 8px; border-radius: 999px; background: var(--info-bg); color: var(--info-t); white-space: nowrap; line-height: 1.7; }
.tile .soon-b { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; }

/* ---------- نماذج ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > label { font-weight: 600; font-size: 15px; }
.field input, .field select, .field textarea, .search input, .search select, .toolbar select {
  font: inherit; font-size: 16px; width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--muted); border-radius: var(--radius-btn); background: var(--surface); color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus, .search input:focus, .search select:focus {
  outline: 3px solid var(--gold); outline-offset: 0; border-color: var(--gold);
}
.field.invalid input, .field.invalid select { border-color: var(--err-t); }
.field .err { color: var(--err-t); font-size: 14px; font-weight: 600; margin: 0; }
.field .hint { color: var(--muted); font-size: 14px; margin: 0; }
.pass { position: relative; }
.pass input { padding-right: 76px; }
.pass button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 44px; min-width: 44px;
  font: inherit; font-size: 14px; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 8px;
}
.msg { min-height: 1.6em; margin: 0; font-weight: 600; color: var(--err-t); text-align: center; }
.msg.ok { color: var(--ok-t); }
.msg.inline:empty { display: none; }
.msg.inline { margin-bottom: 8px; }
.note { background: var(--warn-bg); color: var(--text); border-radius: var(--radius-btn); padding: 12px; margin: 0; font-size: 15px; }

/* ---------- شارات ---------- */
.badge { display: inline-block; font-size: 13px; font-weight: 600; line-height: 1.7; padding: 0 10px; border-radius: 999px; white-space: nowrap; background: var(--ok-bg); color: var(--ok-t); }
.badge-active, .badge-paid, .badge-present { background: var(--ok-bg); color: var(--ok-t); }
.badge-suspended, .badge-unpaid, .badge-absent { background: var(--err-bg); color: var(--err-t); }
.badge-archived { background: var(--surface-2); color: var(--muted); }
.badge-partial, .badge-late, .badge-temp { background: var(--warn-bg); color: var(--warn-t); }
.badge-info { background: var(--info-bg); color: var(--info-t); }

/* ---------- جدول متجاوب ---------- */
.list-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.list-table th { text-align: start; font-size: 14px; color: var(--muted); font-weight: 600; background: var(--surface-2); padding: 8px 12px; }
.list-table td { padding: 8px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.list-table .c-act { width: 1%; white-space: nowrap; text-align: end; }
.list-table .c-meta .lbl { display: none; }
@media screen and (max-width: 767px) {
  .list-table, .list-table tbody { display: block; background: none; border: 0; box-shadow: none; overflow: visible; }
  .list-table thead { display: none; }
  .list-table tbody { display: flex; flex-direction: column; gap: 8px; }
  .list-table tr { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 12px; }
  .list-table td { border: 0; padding: 0; min-width: 0; }
  .list-table .c-title { grid-column: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-weight: 700; }
  .list-table .c-act { grid-column: 2; grid-row: 1 / span 3; width: auto; align-self: start; }
  .list-table .c-meta { grid-column: 1; color: var(--muted); font-size: 15px; }
  .list-table .c-meta .lbl { display: inline; }
}

/* ---------- حالات ---------- */
.skeleton { display: block; height: 16px; border-radius: 8px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.skel-row { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.skel-row .skeleton:first-child { width: 55%; height: 20px; }
.skel-row .skeleton:last-child { width: 35%; }
.state { text-align: center; color: var(--muted); padding: 32px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.state .i { width: 56px; height: 56px; color: var(--gold); }
.state.err .i { color: var(--err-t); }
.state p { margin: 0; }
.offline-bar { position: fixed; inset-inline: 0; top: 0; z-index: 60; background: var(--maroon); color: #fff; text-align: center; padding: 6px 16px; font-weight: 600; font-size: 15px; display: flex; gap: 8px; align-items: center; justify-content: center; }
.pager { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 16px; font-variant-numeric: tabular-nums; }
.pager .btn { min-width: 100px; }

/* ---------- تنبيه عابر ---------- */
.toasts { position: fixed; inset-inline: 0; top: calc(env(safe-area-inset-top) + 8px); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { pointer-events: auto; max-width: 480px; padding: 10px 16px; border-radius: var(--radius-btn); font-weight: 600; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); background: var(--navy); color: #fff; border-inline-start: 4px solid var(--gold); animation: pop .2s ease-out; }
.toast.ok { background: #17603D; }
.toast.err { background: #8E1D14; }
.toast.warn { background: #6E4608; }
@keyframes pop { from { transform: translateY(-12px); opacity: 0; } }

/* ---------- نافذة / ورقة سفلية ---------- */
dialog.sheet {
  position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: 88dvh;
  border: 0; padding: 0; background: var(--surface); color: var(--text);
  border-radius: 20px 20px 0 0; border-top: 4px solid var(--gold); box-shadow: 0 -8px 32px rgba(0, 0, 0, .3);
  overflow: auto; animation: slideup .22s ease-out;
}
dialog.sheet::backdrop { background: rgba(15, 29, 54, .6); }
.sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 8px auto 0; }
.sheet-body { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
.sheet-body h3 { text-align: start; }
.sheet-actions { display: flex; gap: 8px; }
.sheet-actions .btn { flex: 1; padding-inline: 12px; }
.sheet-list { display: flex; flex-direction: column; margin: 0 -16px; }
.sheet-list > * { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; font: inherit; font-weight: 600; color: var(--text); background: none; border: 0; border-top: 1px solid var(--line); text-decoration: none; cursor: pointer; text-align: start; width: 100%; }
.sheet-list > *:first-child { border-top: 0; }
.sheet-list .i { color: var(--gold); }
.sheet-list .danger { color: var(--err-t); }
.sheet-list .soon { color: var(--muted); }
.sheet-list .soon-b { margin-inline-start: auto; }
@keyframes slideup { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 768px) {
  dialog.sheet { inset: 0; margin: auto; width: min(460px, calc(100vw - 32px)); height: fit-content; border-radius: 16px; border: 0; border-top: 4px solid var(--gold); }
  .sheet-grab { display: none; }
  .sheet-body { padding: 20px; }
  .sheet-list { margin: 0 -20px; }
  .sheet-list > * { padding-inline: 20px; }
}
html.noscroll { overflow: hidden; }
.cred { background: var(--bg); border-radius: var(--radius-btn); padding: 12px 16px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; }
.cred b { font-size: 20px; letter-spacing: .05em; direction: ltr; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- صفحات الدخول (بدون قائمة) ---------- */
body.login, body.welcome-body {
  background: var(--primary); background-image: radial-gradient(circle at 15% 10%, rgba(212, 164, 55, .22), transparent 40%);
}
:root[data-theme="dark"] body.login, :root[data-theme="dark"] body.welcome-body { background-color: #0B1730; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.login, :root:not([data-theme="light"]) body.welcome-body { background-color: #0B1730; } }
@media (min-width: 1200px) {
  body.login::before, body.welcome-body::before { content: ''; position: fixed; inset-block: 0; inset-inline-start: 0; width: 38vw; background: linear-gradient(115deg, transparent 55%, rgba(212, 164, 55, .16) 55% 57%, transparent 57%); pointer-events: none; }
}
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; }
.auth-card {
  width: 100%; max-width: 420px; background: #fff; color: #1B2333; border-radius: 20px; padding: 28px 20px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3); border-top: 4px solid var(--gold);
}
:root[data-theme="dark"] .auth-card { background: var(--surface); color: var(--text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-card { background: var(--surface); color: var(--text); } }
.auth-card .field input { background: #fff; color: #1B2333; }
:root[data-theme="dark"] .auth-card .field input { background: var(--bg); color: var(--text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-card .field input { background: var(--bg); color: var(--text); } }
.auth-card[hidden] { display: none; }
.auth-card .brandhead { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.auth-card .brandhead h1 { font-size: 24px; color: var(--primary); }
:root[data-theme="dark"] .auth-card .brandhead h1 { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-card .brandhead h1 { color: var(--gold); } }
.auth-card .slogan { margin: 0; font-size: 15px; font-weight: 600; color: var(--maroon); }
:root[data-theme="dark"] .auth-card .slogan { color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-card .slogan { color: var(--muted); } }
.auth-card .sub { margin: 0; text-align: center; color: var(--muted); }
.logo { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; background: #fff; box-shadow: var(--shadow); border: 3px solid var(--gold); }
.logo-lg { width: 160px; height: 160px; }
.welcome { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px 16px; text-align: center; color: #fff; }
.welcome h1 { font-size: clamp(28px, 6vw, 42px); font-weight: 700; margin-top: 8px; color: #fff; }
.welcome .slogan { margin: 0 0 16px; font-size: clamp(16px, 3.5vw, 20px); color: var(--gold); font-weight: 600; }

/* ---------- الهيكل ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30; grid-area: head; height: calc(var(--head-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0;
  display: flex; align-items: center; gap: 12px; background: var(--header); color: var(--on-header); border-bottom: 3px solid var(--gold);
}
.topbar .brand { display: flex; flex: none; }
.topbar .brand img { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; border: 2px solid var(--gold); object-fit: cover; background: #fff; }
.topbar .ptitle { font-size: 20px; font-weight: 700; min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usermenu { position: relative; min-width: 0; }
.who { display: flex; align-items: center; gap: 8px; min-height: 44px; max-width: 220px; padding: 4px 8px; font: inherit; color: inherit; background: transparent; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; cursor: pointer; }
.who .avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--on-gold); display: grid; place-items: center; font-weight: 700; }
.who .wtxt { display: none; min-width: 0; flex-direction: column; line-height: 1.25; text-align: start; }
.who .wtxt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.who .wtxt small { color: var(--gold); font-size: 13px; }
.who .i { width: 18px; height: 18px; }
@media (min-width: 480px) { .who .wtxt { display: flex; } }
.menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 230px; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0, 0, 0, .3); padding: 4px 0; z-index: 40;
}
.menu > * { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 6px 16px; font: inherit; color: var(--text); background: none; border: 0; text-decoration: none; cursor: pointer; text-align: start; }
.menu > *:hover { background: var(--surface-2); }
.menu .i { color: var(--gold); }
.menu .out { color: var(--err-t); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; min-height: 0; padding: 0; }

body.shell { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "main"; grid-template-rows: auto 1fr; }
body.shell .page { grid-area: main; width: 100%; min-width: 0; max-width: 1200px; margin: 0 auto; padding: 16px 16px calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px); }
body.bare .page { max-width: 460px; padding: 32px 16px; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 16px; min-height: 44px; }
.page-head h2 { margin: 0; }
.page-head .btn { flex: none; white-space: nowrap; }
.page-head .tabs { flex: 1; min-width: 0; }
.hello { margin-bottom: 4px; }
.today { margin: 0 0 16px; color: var(--muted); font-variant-numeric: tabular-nums; }

.side { display: none; grid-area: side; }
.bottomnav {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 30; display: flex; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface); border-top: 2px solid var(--gold); box-shadow: 0 -2px 10px rgba(15, 29, 54, .12);
}
.bottomnav > * {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: inherit; font-size: 11px; font-weight: 600; line-height: 1.2; text-decoration: none; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 2px;
}
.bottomnav span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottomnav .on { color: var(--accent); }
.bottomnav .on .i { color: var(--gold); }
.bottomnav .soon { opacity: .65; }
@media (min-width: 400px) { .bottomnav > * { font-size: 12px; } }

@media (min-width: 768px) {
  body.shell { grid-template-columns: var(--side-w-min) minmax(0, 1fr); grid-template-areas: "head head" "side main"; }
  body.shell.side-open { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  body.shell .page { padding: 24px 24px 32px; }
  .bottomnav { display: none; }
  .side { display: block; position: sticky; top: var(--head-h); align-self: start; height: calc(100dvh - var(--head-h)); overflow-y: auto; background: var(--surface); border-inline-end: 1px solid var(--line); padding: 8px; }
  .side nav { display: flex; flex-direction: column; gap: 2px; }
  .nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border-radius: 10px; border: 0; border-inline-start: 4px solid transparent; font: inherit; font-weight: 600; color: var(--text); background: none; text-decoration: none; cursor: pointer; width: 100%; text-align: start; }
  .nav-item .i { color: var(--muted); }
  .nav-item:hover { background: var(--surface-2); }
  .nav-item.on { background: var(--active-bg); border-inline-start-color: var(--gold); }
  .nav-item.on .i { color: var(--gold); }
  .nav-item.soon { color: var(--muted); }
  .nav-item .lbl, .nav-item .soon-b { display: none; }
  .side-open .nav-item .lbl { display: inline; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-open .nav-item .soon-b { display: inline; }
  .side-toggle { margin-top: 8px; }
  .side-sep { height: 1px; background: var(--line); margin: 6px 4px; }
}
@media (min-width: 1200px) {
  body.shell { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .nav-item .lbl { display: inline; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-item .soon-b { display: inline; }
  .side-toggle { display: none !important; }
}
.side-toggle { display: none; }
@media (min-width: 768px) { .side-toggle { display: flex; } }

/* ---------- صفحة الحسابات ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tabs button { font: inherit; font-size: 15px; font-weight: 600; min-height: 44px; padding: 4px 16px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.tabs button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
:root[data-theme="dark"] .tabs button.on { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabs button.on { background: var(--gold); color: var(--on-gold); border-color: var(--gold); } }
.page-head .tabs { margin-bottom: 0; }
.search { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 12px; }
.search select { width: auto; }
.toolbar { margin-bottom: 12px; }

/* ---------- البيانات الأساسية والملف ---------- */
.tabs-scroll { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-bottom: 12px; padding-bottom: 2px; }
.tabs-scroll::-webkit-scrollbar { display: none; }
.tabs-scroll button { flex: none; white-space: nowrap; }
.flt { font: inherit; font-size: 16px; min-height: 44px; padding: 4px 12px; border-radius: var(--radius-btn); border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.add-btn { display: none; }
@media screen and (max-width: 767px) { .list-table .c-meta:empty { display: none; } }
.nm { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fab { position: fixed; inset-inline-end: 16px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px); z-index: 25; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--gold); color: var(--on-gold); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(15, 29, 54, .3); }
.fab .i { width: 28px; height: 28px; }
.page.has-fab { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 96px) !important; }
@media (min-width: 768px) { .fab { display: none; } .add-btn:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; } .page.has-fab { padding-bottom: 32px !important; } }
.grp { margin-bottom: 20px; }
.grp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-height: 44px; }
.grp-head h3 { font-size: 18px; color: var(--accent); }
.grp-act { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
.list-table .c-act { white-space: nowrap; }
.switch { position: relative; flex: none; width: 52px; min-width: 52px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0; vertical-align: middle; }
.switch span { position: absolute; inset-block: 10px; inset-inline: 0; border-radius: 999px; background: var(--line); transition: background .15s; }
.switch span::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: inset-inline-start .15s; }
.switch[aria-checked="true"] span { background: var(--ok); }
.switch[aria-checked="true"] span::after { inset-inline-start: 31px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--navy); }
.avatar-lg { width: 64px; height: 64px; border-radius: 50%; background: var(--gold); color: var(--on-gold); display: grid; place-items: center; font-size: 28px; font-weight: 700; flex: none; }
.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.profile-head h2 { margin-bottom: 4px; }
.kv { margin: 0 0 16px; display: grid; gap: 0; }
.kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; min-width: 0; }
.profile-actions { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 768px) { .profile { max-width: 560px; } .profile-actions { flex-direction: row; } }

/* ---------- طباعة ---------- */
.print-header, .print-footer { display: none; }
@page { size: A4 portrait; margin: 12mm; }
@page landscape { size: A4 landscape; margin: 12mm; }
.print-landscape { page: landscape; }
@media print {
  html, body { background: #fff !important; color: #000 !important; font-size: 12pt; }
  :root { --bg: #fff; --surface: #fff; --text: #000; --muted: #333; --line: #888; --accent: #000; --shadow: none; --ok-t: #000; --warn-t: #000; --err-t: #000; --info-t: #000; }
  body.shell { display: block; }
  .topbar, .side, .bottomnav, .toasts, .offline-bar, dialog, .no-print, .btn, .pager, .tabs, .search, .toolbar { display: none !important; }
  body.shell .page { max-width: none; padding: 0; }
  .card, .list-table { box-shadow: none; border-color: #888; background: #fff; }
  .print-header { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 12px; }
  .print-header img { width: 56px; height: 56px; border-radius: 50%; }
  .print-header .ph-title { flex: 1; }
  .print-header .ph-title b { display: block; font-size: 16pt; }
  .print-header .ph-date { font-variant-numeric: tabular-nums; }
  .print-footer { display: block; position: fixed; bottom: 0; inset-inline: 0; border-top: 1px solid #000; padding-top: 4px; font-size: 10pt; text-align: center; }
  .print-table, .list-table { display: table !important; width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #000; border-radius: 0; }
  .list-table thead, .print-table thead { display: table-header-group !important; }
  .list-table tbody { display: table-row-group !important; }
  .list-table tr, .print-table tr { display: table-row !important; break-inside: avoid; background: #fff; border: 0; box-shadow: none; }
  .list-table th, .list-table td, .print-table th, .print-table td { display: table-cell !important; border: 1px solid #000; padding: 4px 8px; background: #fff; color: #000; }
  .list-table .c-meta .lbl { display: none; }
  .badge { background: none !important; color: #000 !important; border: 1px solid #000; }
  .page-break { break-after: page; }
  .list-table .c-act, .list-table th.c-act { display: none !important; }
}

/* ---------- الطلاب والمعلمون (0.4.1) ---------- */
.fbar { display: flex; gap: 8px; margin-bottom: 12px; align-items: stretch; }
.fbar input, .fbar select {
  font: inherit; font-size: 16px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--muted);
  border-radius: var(--radius-btn); background: var(--surface); color: var(--text); min-width: 0;
}
.fbar input { flex: 1; }
.fbar input:focus, .fbar select:focus { outline: 3px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.fbar .f-sel { display: none; }
.fbar .f-btn { position: relative; padding-inline: 14px; flex: none; }
.f-count { min-width: 20px; height: 20px; border-radius: 10px; background: var(--maroon); color: #fff; font-size: 12px; display: inline-grid; place-items: center; padding: 0 5px; }
@media (min-width: 768px) { .fbar .f-sel { display: block; } .fbar .f-btn { display: none; } }
.linkbtn { overflow-wrap: anywhere; font: inherit; font-weight: 700; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; text-align: start; min-height: 44px; max-width: 100%; }
.linkbtn:hover { text-decoration: underline; }
.list-table .c-title .linkbtn { min-height: 0; }
.steps { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; font-weight: 600; margin: 0; }
.steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.steps i.on { background: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: inherit; font-size: 15px; font-weight: 600; min-height: 44px; padding: 4px 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip.old { border-style: dashed; }
:root[data-theme="dark"] .chip[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); border-color: var(--gold); } }
.seg { display: flex; gap: 8px; }
.seg .chip { flex: 1; text-align: center; }
.found { background: var(--info-bg); border-radius: var(--radius-btn); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.found p { margin: 0; }
.found .sub { color: var(--muted); font-size: 15px; }
.plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plist li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.plist li:first-child { border-top: 0; }
.plist .grow { flex: 1; min-width: 0; }
.plist .sub { display: block; color: var(--muted); font-size: 14px; }
.sec-title { font-size: 16px; color: var(--accent); margin: 0; }
.detail-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.detail-head h3 { margin: 0; }
.detail-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-acts .btn { flex: 1 1 140px; padding-inline: 12px; }
.cred-blk { display: flex; flex-direction: column; gap: 4px; }
.cred-blk h4 { margin: 0; font-size: 16px; }
.print-slip { display: none; }
@media print {
  body.printing-slip > *:not(.print-slip) { display: none !important; }
  body.printing-slip .print-slip { display: block !important; }
  .print-slip .slip { border: 1px solid #000; padding: 10mm; margin-bottom: 8mm; break-inside: avoid; }
  .print-slip .slip h4 { margin: 0 0 6mm; font-size: 14pt; }
  .print-slip .slip dl { display: grid; grid-template-columns: 30mm 1fr; gap: 3mm 4mm; margin: 0; font-size: 14pt; }
  .print-slip .slip dd { margin: 0; font-weight: 700; direction: ltr; text-align: right; font-variant-numeric: tabular-nums; }
  .print-slip .slip p { margin: 6mm 0 0; font-size: 11pt; }
}

/* ---------- المجموعات والجدول (0.5.0) ---------- */
.fbar.show-btn .f-btn { display: inline-flex; align-items: center; gap: 6px; }
.sline { display: block; }
.row-add { display: flex; gap: 8px; }
.row-add select { flex: 1; min-width: 0; font: inherit; font-size: 16px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--muted); border-radius: var(--radius-btn); background: var(--surface); color: var(--text); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 479px) { .two { grid-template-columns: 1fr; } }
fieldset.slot-blk { border: 1px solid var(--line); border-radius: var(--radius-btn); padding: 12px; display: flex; flex-direction: column; gap: 12px; margin: 0 0 12px; min-width: 0; }
.slot-blk legend { font-weight: 700; padding: 0 6px; color: var(--accent); }
.tfield { display: flex; align-items: center; gap: 4px; direction: ltr; min-width: 0; }
.tfield select { flex: 1; min-width: 0; font: inherit; font-size: 16px; min-height: 44px; padding: 4px 4px; border: 1px solid var(--muted); border-radius: 10px; background: var(--surface); color: var(--text); }
.tfield b { color: var(--muted); }
.sec-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.past summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--muted); font-weight: 600; }
.plist .check { padding: 0; }
.plist .check span { min-width: 0; }
.plist .btn-sm { flex: none; }

.s-bar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.s-sel { display: flex; gap: 8px; }
.s-sel select { flex: 1; min-width: 0; font: inherit; font-size: 16px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--muted); border-radius: var(--radius-btn); background: var(--surface); color: var(--text); }
.s-days .chip { flex: none; }
@media (min-width: 768px) { .s-mobile-only { display: none; } .s-sel select { flex: 0 1 240px; } }
.s-mobile { display: block; }
.s-desktop { display: none; }
@media (min-width: 768px) { .s-mobile { display: none; } .s-desktop { display: block; } }
.s-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.s-card { display: grid; gap: 2px; text-align: start; width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--gold); border-radius: var(--radius-btn); padding: 10px 12px; min-height: 44px; cursor: pointer; }
.s-card small { color: var(--muted); font-size: 14px; }
.s-room { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.s-room h4 { margin: 0; font-size: 18px; color: var(--accent); }
.free-note { margin: 0; color: var(--ok-t); font-weight: 600; }
.sgrid-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.sgrid { width: 100%; border-collapse: collapse; }
.sgrid th, .sgrid td { border: 1px solid var(--line); padding: 4px; vertical-align: top; font-size: 14px; min-width: 84px; }
.sgrid thead th { background: var(--surface-2); position: sticky; top: 0; }
.sgrid tbody th { white-space: nowrap; background: var(--surface-2); font-weight: 600; min-width: 0; width: 1%; }
.cell { display: block; width: 100%; text-align: start; font: inherit; font-size: 13px; line-height: 1.35; padding: 6px 8px; min-height: 44px; margin: 0 0 4px; border: 0; border-inline-start: 3px solid var(--gold); border-radius: 6px; background: var(--active-bg); color: var(--text); cursor: pointer; }
.cell:last-child { margin-bottom: 0; }
.cell.free { text-align: center; border: 1px dashed var(--line); background: none; color: var(--muted); font-size: 20px; }
.cell.free:hover { background: var(--surface-2); }
.busy { color: var(--muted); font-size: 12px; }

/* طباعة الجدول وكشف المجموعة (تُبنى خارج <dialog> وتُظهر وحدها أثناء الطباعة) */
.print-sched, .print-roster { display: none; }
@media print {
  body.printing-sched > *:not(.print-sched), body.printing-roster > *:not(.print-roster) { display: none !important; }
  body.printing-sched .print-sched, body.printing-roster .print-roster { display: block !important; }
  .sp-page { padding-bottom: 14mm; }
  .sp-table { table-layout: fixed; width: 100%; font-size: 10pt; }
  .sp-table th, .sp-table td { padding: 3px 5px; vertical-align: top; overflow-wrap: anywhere; font-size: 10pt; }
  .sp-table tbody th { width: 30mm; font-weight: 700; }
  .sp-table tr { break-inside: avoid; }
  .sp-cell { padding: 2px 0; border-bottom: 1px dotted #888; }
  .sp-cell:last-child { border-bottom: 0; }
  .print-footer span + span::before { content: ""; }
  .pr-title { font-size: 16pt; margin: 0 0 4mm; }
  .pr-meta { display: grid; grid-template-columns: 28mm 1fr; gap: 1mm 4mm; margin: 0 0 5mm; font-size: 11pt; }
  .pr-meta dd { margin: 0; font-weight: 700; }
  .pr-meta dt { color: #333; }
  .print-roster .print-table td { height: 8mm; font-size: 11pt; }
  .print-roster .print-table td.ltr { direction: ltr; text-align: right; }
  .pr-count { margin-top: 4mm; font-weight: 700; }
}

/* ---------- استيراد CSV (0.5.1) ---------- */
.imp-hint { margin: 0 0 12px; color: var(--muted); font-size: 15px; }
.imp-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.imp-stat { display: flex; flex-direction: column; align-items: center; padding: 8px; background: var(--surface-2); border-radius: var(--radius); }
.imp-stat b { font-size: 24px; line-height: 1.3; color: var(--accent); font-variant-numeric: tabular-nums; }
.imp-stat span { font-size: 13px; color: var(--muted); }
.imp-h { margin: 12px 0 6px; font-size: 16px; }
.imp-h.err { color: var(--err-t); }
.imp-ok { margin: 12px 0; font-weight: 600; color: var(--ok-t); background: var(--ok-bg); padding: 8px 12px; border-radius: var(--radius); }
.imp-list { list-style: none; margin: 0 0 8px; padding: 0; max-height: 32vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.imp-list li { padding: 6px 12px; border-top: 1px solid var(--line); font-size: 14px; overflow-wrap: anywhere; }
.imp-list li:first-child { border-top: 0; }
.imp-list.imp-err li { background: var(--err-bg); }
.imp-list.imp-warn li { background: var(--warn-bg); }
.imp-list li b { margin-inline-end: 6px; font-variant-numeric: tabular-nums; }
.imp-more { color: var(--muted); }
.imp-warn { margin: 8px 0; }
.imp-warn summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--warn-t); }
.imp-wsum { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
@media (min-width: 768px) { .imp-stats { grid-template-columns: repeat(4, 1fr); } }

/* ---------- الحضور (0.6.0) ---------- */
.att-tools { display: flex; gap: 8px; align-items: center; }
.datebar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.dpick { position: relative; flex: 1 1 160px; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-btn); padding: 4px 12px; cursor: pointer; }
.dpick b { font-size: 16px; line-height: 1.4; pointer-events: none; }
.dpick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.att-filter { margin-bottom: 12px; }
.att-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.att-card { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; width: 100%; text-align: start; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-inline-start: 5px solid var(--warn); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 12px; min-height: 64px; cursor: pointer; }
.att-card.st-held { border-inline-start-color: var(--ok); }
.att-card.st-cancelled { border-inline-start-color: var(--muted); opacity: .8; }
.att-card.now { outline: 3px solid var(--gold); outline-offset: 1px; }
.att-time { font-weight: 700; color: var(--accent); white-space: nowrap; grid-row: 1 / span 2; }
.att-main { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.att-main small { flex-basis: 100%; color: var(--muted); font-size: 14px; }
.att-state { grid-column: 2; }
@media (min-width: 768px) { .att-card { grid-template-columns: 150px 1fr auto; } .att-time { grid-row: auto; } .att-state { grid-column: auto; } }

dialog.sheet.sheet-full { inset: 0; margin: 0; width: 100%; height: 100dvh; max-height: none; border-radius: 0; border-top: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.sheet-full .sheet-grab { display: none; }
.sheet-full .sheet-body { padding: 0; gap: 0; min-height: 100%; }
.att-bodywrap { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 12px; flex: 1; }
.att-head { position: sticky; top: 0; z-index: 3; background: var(--surface); padding: calc(12px + env(safe-area-inset-top)) 16px 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); }
.att-title b { font-size: 18px; }
.att-title small { display: block; color: var(--muted); font-size: 14px; }
.att-counts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; font-weight: 600; }
.att-counts .c-p b, .att-sum .c-p b { color: var(--ok-t); }
.att-counts .c-a b, .att-sum .c-a b { color: var(--err-t); }
.att-counts .c-l b, .att-sum .c-l b { color: var(--warn-t); }
.att-counts .c-e b, .att-sum .c-e b { color: var(--info-t); }
.att-counts .c-u { color: var(--muted); }
.att-sum { display: flex; flex-wrap: wrap; gap: 4px 16px; font-weight: 600; }
.att-all { width: 100%; min-height: 52px; font-size: 18px; }
.att-find { font: inherit; font-size: 16px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--muted); border-radius: var(--radius-btn); background: var(--surface); color: var(--text); width: 100%; }
.att-list { list-style: none; margin: 0; padding: 0; }
.att-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.att-row:first-child { border-top: 0; }
.att-who { min-width: 0; }
.att-who b { display: block; }
.att-who small { color: var(--muted); font-size: 14px; }
.att-note { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); cursor: pointer; }
.att-note.on { color: var(--accent); border-color: var(--gold); background: var(--active-bg); }
.att-note:disabled { opacity: .4; }
.att-seg { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.att-seg button { min-height: 44px; min-width: 0; font: inherit; font-size: 18px; font-weight: 700; border: 2px solid var(--line); background: var(--surface); color: var(--text); border-radius: 10px; cursor: pointer; }
.att-seg button:disabled { opacity: .55; cursor: default; }
.att-seg button[aria-pressed="true"] { color: var(--bg); border-color: transparent; }
.att-seg [data-s="p"][aria-pressed="true"] { background: var(--ok-t); }
.att-seg [data-s="a"][aria-pressed="true"] { background: var(--err-t); }
.att-seg [data-s="l"][aria-pressed="true"] { background: var(--warn-t); }
.att-seg [data-s="e"][aria-pressed="true"] { background: var(--info-t); }
.att-notetxt { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--muted); background: var(--surface-2); border-radius: 8px; padding: 4px 10px; }
@media (min-width: 480px) { .att-row { grid-template-columns: 1fr auto auto; } .att-seg { grid-column: auto; width: 240px; } }
.att-after { margin: 0; padding: 12px; border-radius: var(--radius); background: var(--ok-bg); display: flex; flex-direction: column; gap: 6px; }
.att-after p { margin: 0; }
.att-after b { color: var(--ok-t); display: flex; align-items: center; gap: 6px; }
.att-more { align-items: center; }
.att-by { flex-basis: 100%; color: var(--muted); font-size: 13px; }
.att-foot { position: sticky; bottom: 0; z-index: 3; background: var(--surface); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 8px; box-shadow: 0 -2px 8px rgba(15, 29, 54, .1); }
.att-foot .att-save { flex: 1; min-height: 52px; font-size: 18px; }
.att-wait { padding: 16px; }
@media (min-width: 768px) {
  dialog.sheet.sheet-full { inset: 0; margin: auto; width: min(680px, calc(100vw - 32px)); height: min(92dvh, 900px); border-radius: 16px; border-top: 4px solid var(--gold); }
  .att-head { padding-top: 12px; }
}

/* طباعة الحضور (تُبنى خارج <dialog>) */
.print-att { display: none; }
@media print {
  body.printing-att > *:not(.print-att) { display: none !important; }
  body.printing-att .print-att { display: block !important; }
  .print-att .pr-title { font-size: 15pt; margin: 0 0 2mm; }
  .print-att .pr-sub { margin: 0 0 4mm; font-size: 10pt; }
  .print-att .att-table { table-layout: fixed; width: 100%; }
  .print-att .att-table th, .print-att .att-table td { padding: 2px 3px; font-size: 9pt; text-align: center; overflow-wrap: anywhere; }
  .print-att .att-table th small { display: block; font-size: 9pt; font-weight: 400; }
  .print-att .att-table .c-n { width: 8mm; }
  .print-att .att-table .c-name { width: 48mm; text-align: start; }
  .print-att .att-table .c-code { width: 24mm; }
  .print-att .att-table .c-tot { width: 14mm; font-weight: 700; }
  .print-att .att-table .c-mk { font-weight: 700; font-size: 10pt; }
  .print-att .att-table .cx { background: #d9d9d9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 9pt; }
  .print-att .att-table tr { break-inside: avoid; }
  .print-att .att-table tbody td { height: 6.5mm; }
  .print-att.print-landscape .att-table tbody td { height: 5.2mm; padding-block: 1px; }
  .print-att.print-landscape .att-table th { padding-block: 1px; }
  .print-att.print-landscape .print-header { margin-bottom: 6px; padding-bottom: 4px; }
  .print-att.print-landscape .print-header img { width: 44px; height: 44px; }
  .print-att .c-box { height: 9mm; }
  .print-att .box { display: inline-block; width: 6mm; height: 6mm; border: 1px solid #000; }
  .print-att .pr-legend { font-size: 9pt; margin-top: 3mm; }
  .print-att .pr-sign { margin-top: 10mm; font-size: 12pt; }
  .print-att .page-break-before { break-before: page; }
}

/* ---------- البوابة (0.6.1) ---------- */
.gate-top { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.gate-scan { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.gate-code { font: inherit; font-size: 28px; font-weight: 700; min-height: 64px; padding: 6px 16px; border: 2px solid var(--navy); border-radius: var(--radius); background: var(--surface); color: var(--text); width: 100%; min-width: 0; direction: ltr; text-align: center; letter-spacing: .04em; text-transform: uppercase; }
.gate-code::placeholder { font-size: 18px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.gate-code:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
.gate-go { min-height: 64px; min-width: 64px; padding: 0 20px; font-size: 18px; }
.gate-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gate-tools .seg { flex: 1 1 260px; }
.gate-q { display: inline-block; }
.gate-res { min-height: 0; }
.gate-card { border-radius: var(--radius); padding: 16px; color: #fff; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); animation: gate-in .15s ease-out; }
.gate-card.g-in { background: var(--ok); }
.gate-card.g-out { background: var(--navy); }
.gate-card.g-warn { background: var(--maroon); }
.gate-card.g-q { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
:root[data-theme="dark"] .gate-card.g-out { background: #2B4C8C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gate-card.g-out { background: #2B4C8C; } }
.gate-head { font-size: 22px; font-weight: 700; line-height: 1.5; }
.gate-head small { display: block; font-size: 15px; font-weight: 400; opacity: .9; }
.gate-dues { align-self: flex-start; background: var(--gold); color: #3a2a00; font-weight: 700; font-size: 15px; padding: 2px 12px; border-radius: 999px; }
.gate-alerts { display: flex; flex-wrap: wrap; gap: 6px; }
.gate-alerts span { background: rgba(255, 255, 255, .92); color: var(--maroon); font-weight: 700; font-size: 15px; padding: 2px 12px; border-radius: 999px; }
.gate-card.g-warn .gate-alerts span { color: var(--maroon); }
.gate-classes { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid rgba(255, 255, 255, .35); display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.gate-classes li { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.gate-classes .gc-when { margin-inline-start: auto; font-weight: 700; }
.gate-card.g-q .gate-classes { border-color: var(--line); }
.gate-inside { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 8px; font-size: 20px; font-weight: 700; }
.gate-inside .num { color: var(--ok-t); font-size: 28px; }
.gate-list { list-style: none; margin: 0; padding: 0; }
.gate-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.gate-row:first-child { border-top: 0; }
.gate-row.void { opacity: .55; }
.gate-row.void b { text-decoration: line-through; }
.gate-row b { display: block; }
.gate-row small { color: var(--muted); font-size: 14px; }
.gate-times { font-weight: 600; font-variant-numeric: tabular-nums; }
.gate-row .badge { margin-inline-end: 4px; }
.gate-more { width: 100%; margin-top: 8px; }
.sr-gate { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.cam-video { width: 100%; max-height: 60vh; border-radius: var(--radius); background: #000; }
@keyframes gate-in { from { transform: scale(.97); opacity: .5; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gate-card { animation: none; } }
@media (min-width: 768px) { .gate-head { font-size: 28px; } .gate-code { font-size: 34px; } .gate-top { max-width: 760px; margin-inline: auto; width: 100%; } .gate-body { max-width: 760px; margin-inline: auto; } }

/* ---------- كروت الطلاب (85.6×54 مم، 10 في صفحة A4) ---------- */
.print-cards { display: none; }
@media print {
  body.printing-cards > *:not(.print-cards) { display: none !important; }
  body.printing-cards .print-cards { display: block !important; }
  .print-cards .ic-page { display: grid; grid-template-columns: repeat(2, 85.6mm); grid-auto-rows: 54mm; justify-content: center; break-after: page; }
  .print-cards .ic-page:last-child { break-after: auto; }
  .print-cards .idcard { width: 85.6mm; height: 54mm; border: .3mm dashed #000; padding: 3mm 4mm; display: flex; flex-direction: column; gap: 1.5mm; overflow: hidden; color: #000; background: #fff; break-inside: avoid; }
  .print-cards .ic-top { display: flex; align-items: center; gap: 2.5mm; border-bottom: .3mm solid #000; padding-bottom: 1.5mm; }
  .print-cards .ic-top img { width: 9mm; height: 9mm; border-radius: 50%; }
  .print-cards .ic-top b { font-size: 11pt; }
  .print-cards .ic-body { flex: 1; display: flex; align-items: center; gap: 3mm; min-height: 0; }
  .print-cards .ic-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1mm; }
  .print-cards .ic-name { font-size: 13pt; font-weight: 700; line-height: 1.3; overflow: hidden; max-height: 11mm; }
  .print-cards .ic-grade { font-size: 9.5pt; }
  .print-cards .ic-code { font-size: 20pt; font-weight: 700; direction: ltr; text-align: right; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
  .print-cards .ic-qr { width: 28mm; height: 28mm; flex: none; }
  .print-cards .ic-qr svg { width: 100%; height: 100%; display: block; fill: #000; }
}

/* ---------- المدفوعات (0.7.0) ---------- */
.pay-sel { min-height: 44px; font: inherit; font-size: 16px; padding: 4px 10px; border-radius: var(--radius-btn); border: 1px solid var(--line); background: var(--surface); color: var(--text); flex: none; max-width: 40%; }
.pay-results { margin-bottom: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 12px; }
.pay-results .linkbtn { text-align: start; min-height: 44px; display: block; width: 100%; }
.acct { display: flex; flex-direction: column; gap: 12px; }
.acct .detail-head { margin: 0; }
.acct-sub { margin: -6px 0 0; color: var(--muted); }
.acct .sec-title { margin: 4px 0 0; }
.bal { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid transparent; }
.bal span { font-weight: 600; font-size: 16px; }
.bal b { font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bal b small { font-size: 16px; font-weight: 600; }
.bal.sm b { font-size: 24px; }
.bal.due { background: var(--err-bg); color: var(--maroon); border-color: var(--maroon); }
.bal.clear { background: var(--ok-bg); color: var(--ok-t); border-color: var(--ok); }
.bal.credit { background: var(--info-bg); color: var(--info-t); border-color: var(--navy); }
:root[data-theme="dark"] .bal.due { color: #FFB3BD; border-color: #FFB3BD; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bal.due { color: #FFB3BD; border-color: #FFB3BD; } }
.acct-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-acts .btn { flex: 1 1 160px; }
.fee-lines li { align-items: center; }
.fee-line.late { border-inline-start: 4px solid var(--maroon); padding-inline-start: 8px; }
.fee-amt { display: flex; flex-direction: column; align-items: flex-end; min-width: 52px; font-variant-numeric: tabular-nums; }
.fee-amt small { color: var(--muted); font-size: 13px; }
.strike { text-decoration: line-through; color: var(--muted); }
.is-void .grow { opacity: .75; }
.pay-done { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; }
.pay-done .i { width: 56px; height: 56px; color: var(--ok-t); }
.pay-done h3 { margin: 4px 0 0; }
.pay-done p { margin: 0; }
.rc-no { font-size: 18px; }
.chips.quick { margin-top: 8px; }
.seg.wrap { flex-wrap: wrap; }
.seg.wrap .chip { flex: 1 1 40%; }
.issue { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.issue-sum { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.kpis > div { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-btn); padding: 8px 12px; display: flex; flex-direction: column; }
.kpis span { color: var(--muted); font-size: 14px; }
.kpis b { font-size: 22px; font-variant-numeric: tabular-nums; }
.price-bar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.price-bar .msg { min-height: 0; }
.pr-in { width: 100%; min-height: 44px; font: inherit; font-size: 16px; padding: 4px 10px; border-radius: var(--radius-btn); border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.pr-in:disabled { opacity: .45; }
.pr-in:focus { outline: 3px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.list-table td .lbl[for] { display: inline-block; margin-bottom: 2px; }
.rules-head { display: flex; justify-content: flex-end; margin-bottom: 12px; }
@media (min-width: 768px) {
  .kpis { grid-template-columns: repeat(4, 1fr); }
  .price-bar { flex-direction: row; align-items: flex-end; }
  .price-bar .field { flex: 0 1 240px; }
  .price-bar .msg { align-self: center; }
  .pr-in { min-width: 90px; }
  .list-table td .lbl[for] { display: none; }
}

/* الإيصال المطبوع: A5 عمودي (الافتراضي) أو 80 مم حراري. أبيض وأسود، صفحة واحدة. */
.print-rcpt { display: none; }
@page rcpt-a5 { size: A5 portrait; margin: 8mm; }
@page rcpt-80 { size: 80mm auto; margin: 3mm; }
.print-rcpt.a5 { page: rcpt-a5; }
.print-rcpt.r80 { page: rcpt-80; }
@media print {
  body.printing-rcpt > *:not(.print-rcpt) { display: none !important; }
  body.printing-rcpt .print-rcpt { display: block !important; position: relative; color: #000; background: #fff; direction: rtl; font-size: 11pt; line-height: 1.5; break-inside: avoid; overflow: hidden; }
  .print-rcpt .rc-head { display: flex; align-items: center; gap: 3mm; border-bottom: .5mm solid #000; padding-bottom: 2mm; }
  .print-rcpt .rc-head img { width: 15mm; height: 15mm; border-radius: 50%; }
  .print-rcpt .rc-org { display: flex; flex-direction: column; font-size: 10pt; }
  .print-rcpt .rc-org b { font-size: 14pt; }
  .print-rcpt .rc-title { text-align: center; font-size: 15pt; margin: 3mm 0 1mm; }
  .print-rcpt .rc-copy { border: .4mm solid #000; padding: 0 2mm; font-size: 10pt; margin-inline-start: 2mm; }
  .print-rcpt .rc-meta { display: flex; justify-content: space-between; gap: 4mm; font-size: 10.5pt; margin-bottom: 2mm; }
  .print-rcpt .rc-stu { display: grid; grid-template-columns: auto 1fr; gap: 0 3mm; margin: 0 0 2mm; }
  .print-rcpt .rc-stu dt { font-weight: 700; }
  .print-rcpt .rc-stu dd { margin: 0; }
  .print-rcpt .ltr { direction: ltr; unicode-bidi: embed; }
  .print-rcpt .rc-tbl { width: 100%; border-collapse: collapse; font-size: 10.5pt; }
  .print-rcpt .rc-tbl th, .print-rcpt .rc-tbl td { border: .3mm solid #000; padding: 1mm 2mm; text-align: start; }
  .print-rcpt .rc-tbl td.num { text-align: end; font-variant-numeric: tabular-nums; }
  .print-rcpt .rc-amount { display: flex; justify-content: space-between; align-items: baseline; border: .6mm solid #000; padding: 2mm 3mm; margin-top: 3mm; font-size: 14pt; }
  .print-rcpt .rc-amount b { font-size: 18pt; }
  .print-rcpt .rc-words, .print-rcpt .rc-pay, .print-rcpt .rc-rest, .print-rcpt .rc-by { margin: 1.5mm 0 0; }
  .print-rcpt .rc-rest { font-size: 12pt; }
  .print-rcpt .rc-by { margin-top: 5mm; }
  .print-rcpt .rc-foot { text-align: center; border-top: .3mm dashed #000; margin: 4mm 0 0; padding-top: 2mm; font-size: 10pt; }
  .print-rcpt .rc-void-note { font-weight: 700; border: .4mm solid #000; padding: 1mm 2mm; margin: 2mm 0 0; }
  .print-rcpt .rc-stamp { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%) rotate(-28deg); font-size: 64pt; font-weight: 700; border: 1.2mm solid #000; padding: 0 8mm; opacity: .38; letter-spacing: 2mm; }
  .print-rcpt.r80 { font-size: 9pt; line-height: 1.35; }
  .print-rcpt.r80 .rc-head img { width: 11mm; height: 11mm; }
  .print-rcpt.r80 .rc-org b { font-size: 11pt; }
  .print-rcpt.r80 .rc-org { font-size: 8.5pt; }
  .print-rcpt.r80 .rc-title { font-size: 12pt; margin: 2mm 0 1mm; }
  .print-rcpt.r80 .rc-meta, .print-rcpt.r80 .rc-tbl { font-size: 8.5pt; }
  .print-rcpt.r80 .rc-tbl th, .print-rcpt.r80 .rc-tbl td { padding: .6mm 1mm; }
  .print-rcpt.r80 .rc-amount { font-size: 10pt; padding: 1.5mm 2mm; }
  .print-rcpt.r80 .rc-amount b { font-size: 13pt; }
  .print-rcpt.r80 .rc-rest { font-size: 9.5pt; }
  .print-rcpt.r80 .rc-stamp { font-size: 34pt; padding: 0 4mm; }
}

/* ---------- المتأخرات واليومية والإقفال (0.7.1) ---------- */
.dues-filters, .day-bar { flex-wrap: wrap; }
.dues-filters select, .day-bar select, .day-bar input { flex: 1 1 140px; min-width: 0; min-height: 44px; font-size: 16px; }
.chip-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--surface); font-size: 16px; flex: 1 1 140px; }
.chip-check input { width: 22px; height: 22px; flex: none; }
.dues-sum { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.dues-sum .sub { margin: 0; color: var(--muted); font-size: 14px; }
.due-total { color: var(--maroon); }
:root[data-theme="dark"] .due-total { color: #FFB3BD; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .due-total { color: #FFB3BD; } }
.dues-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.dues-acts .btn { flex: 1 1 160px; }
.dues-list { gap: 10px; }
.dues-list .due-card { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.dues-list .due-card:first-child { border-top: 1px solid var(--line); }
.due-main { min-width: 0; }
.due-main b { overflow-wrap: anywhere; }
.due-amt { color: var(--maroon); font-size: 24px; line-height: 1.1; white-space: nowrap; align-self: start; }
.due-amt small { font-size: 14px; font-weight: 600; }
:root[data-theme="dark"] .due-amt { color: #FFB3BD; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .due-amt { color: #FFB3BD; } }
.due-acts { grid-column: 1 / -1; display: flex; gap: 8px; }
.due-acts .btn { flex: 1; min-height: 44px; }
.due-rem.fresh { color: var(--ok-t); font-weight: 700; }
.seq-card { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; border: 2px solid var(--gold); }
.seq-card .sub { margin: 0; color: var(--muted); }
.seq-who { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 20px; }
.seq-acts { display: flex; gap: 8px; }
.seq-acts .btn:first-child { flex: 1; }
.seq-card.done { border-color: var(--ok); }
.shift-card { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; border: 2px solid var(--navy); }
.shift-card > div:first-child { display: flex; flex-direction: column; }
.day-sum { margin-bottom: 4px; }
.day-sum .kpis, .close-sum { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.kpi-total b { color: var(--navy); }
:root[data-theme="dark"] .kpi-total b { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kpi-total b { color: var(--gold); } }
.day-list .strike, .strike { text-decoration: line-through; }
.print-dues, .print-day { display: none; }
@media print {
  body.printing-dues > *:not(.print-dues), body.printing-day > *:not(.print-day) { display: none !important; }
  body.printing-dues .print-dues, body.printing-day .print-day { display: block !important; }
  .print-dues .print-table td, .print-day .print-table td { font-size: 11pt; }
  .print-dues .print-table td.ltr, .print-day .print-table td.ltr { direction: ltr; text-align: right; }
  .print-dues tr.tot td, .print-day tr.tot td { font-weight: 700; background: #eee !important; }
  .print-day tr.void td { text-decoration: line-through; color: #555; }
  .print-day .day-tot { width: 70mm; margin-bottom: 6mm; }
  .print-day .pr-legend { font-size: 10pt; margin-top: 4mm; }
  .print-day .day-sign { display: flex; justify-content: space-between; margin-top: 18mm; font-size: 12pt; break-inside: avoid; }
  .print-rcpt.is-refund .rc-tbl { display: none; }
}

/* ---------- الدرجات (0.8.1) ---------- */
.grd-groups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.grd-group { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; min-height: 64px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-inline-start: 5px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); text-decoration: none; }
.grd-gmain { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.grd-gmain b { overflow-wrap: anywhere; }
.grd-gmain small { color: var(--muted); font-size: 14px; }
.grd-gbadges { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; justify-content: flex-start; flex: none; }
.grd-gbadges small { color: var(--muted); font-size: 13px; }
.page-head .att-tools select { font: inherit; font-size: 16px; min-height: 44px; padding: 4px 10px; border: 1px solid var(--muted); border-radius: var(--radius-btn); background: var(--surface); color: var(--text); max-width: 150px; }
@media (min-width: 768px) { .grd-groups { display: grid; grid-template-columns: repeat(2, 1fr); } }
.grd-head, .grd-head .att-tools { flex-wrap: wrap; }
.grd-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 12px; }
.grd-title h2 { margin: 0; overflow-wrap: anywhere; }
.grd-title small { flex-basis: 100%; color: var(--muted); font-size: 14px; }
.grd-pane.hide-m { display: none; }
.grd-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.grd-card { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: start; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-inline-start: 5px solid var(--warn-t); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 12px; min-height: 64px; cursor: pointer; }
.grd-card.pub { border-inline-start-color: var(--ok-t); }
.grd-ctop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.grd-ctop b { overflow-wrap: anywhere; }
.grd-card small { color: var(--muted); font-size: 14px; }
.grd-cstat { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 14px; color: var(--muted); }
.grd-cstat b { color: var(--text); }
.grd-by { margin-inline-start: auto; }
.grd-scard { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 12px; min-height: 56px; }
.b-ex { background: var(--ok-bg); color: var(--ok-t); }
.b-vg { background: var(--info-bg); color: var(--info-t); }
.b-g { background: var(--surface-2); color: var(--text); }
.b-p { background: var(--warn-bg); color: var(--warn-t); }
.b-w { background: var(--err-bg); color: var(--err-t); }
.grd-wide { display: none; }
@media (min-width: 768px) {
  .grd-tabs, .grd-pane { display: none !important; }
  .grd-wide { display: block; }
}
.grd-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); max-width: 100%; }
.grd-tbl { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
.grd-tbl th, .grd-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; background: var(--surface); }
.grd-tbl thead th { position: sticky; top: 0; font-weight: 600; }
.grd-tbl .grd-nm { position: sticky; inset-inline-start: 0; z-index: 2; text-align: start; min-width: 170px; border-inline-end: 1px solid var(--line); box-shadow: 2px 0 4px rgba(15, 29, 54, .06); }
.grd-tbl th.draft, .grd-tbl td.draft { background: var(--warn-bg); }
.grd-th { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 44px; justify-content: center; }
.grd-th small { color: var(--muted); font-weight: 400; font-size: 12px; }
.grd-avg { font-weight: 700; }
.grd-tbl tfoot th, .grd-tbl tfoot td { color: var(--muted); font-size: 14px; border-bottom: 0; }
/* ورقة الرصد */
.grd-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.grd-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.grd-row:first-child { border-top: 0; }
.grd-ctl { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 44px 44px 44px; gap: 6px; }
.grd-in { font: inherit; font-size: 18px; font-weight: 700; min-height: 48px; min-width: 0; text-align: center; border: 2px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); padding: 4px 8px; direction: ltr; font-variant-numeric: tabular-nums; }
.grd-in::placeholder { color: var(--muted); font-weight: 400; font-size: 15px; direction: rtl; }
.grd-in:focus { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.grd-in:disabled { background: var(--surface-2); }
.grd-row.bad .grd-in { border-color: var(--err-t); background: var(--err-bg); }
.grd-ctl button { min-height: 48px; min-width: 44px; display: grid; place-items: center; font: inherit; font-size: 18px; font-weight: 700; border: 2px solid var(--line); background: var(--surface); color: var(--text); border-radius: 10px; cursor: pointer; padding: 0; }
.grd-ctl button:disabled { opacity: .55; cursor: default; }
.grd-ctl button[aria-pressed="true"] { color: var(--bg); border-color: transparent; }
.grd-ctl [data-st="a"][aria-pressed="true"] { background: var(--err-t); }
.grd-ctl [data-st="e"][aria-pressed="true"] { background: var(--info-t); }
@media (min-width: 480px) { .grd-row { grid-template-columns: 1fr auto auto; } .grd-ctl { grid-column: auto; width: 290px; } }

/* طباعة الدرجات: تعيد استعمال حاوية .print-att */
@media print {
  .print-att .g-table .c-name { width: 44mm; }
  .print-att .g-table th.g-as { width: auto; }
  .print-att .g-table th.g-as b { display: block; font-size: 9pt; overflow-wrap: anywhere; }
  .print-att .g-table th.g-as small { font-size: 7.5pt; }
  .print-att .g-table .c-mk { font-size: 11pt; }
  .print-att .g-table .c-tot { width: 19mm; white-space: nowrap; }
  .print-att .g-table .g-band { font-size: 8.5pt; }
  .print-att .pr-title small { font-size: 11pt; font-weight: 400; }
  .print-att .g-res .c-mk { width: 32mm; font-size: 12pt; }
  .print-att .g-res .c-note, .print-att .g-blank .c-note { width: 52mm; text-align: start; }
  .print-att .g-blank .c-box { height: 11mm; }
  .print-att .g-blank .c-mk { width: 32mm; }
  .print-att .g-stats { margin-top: 6mm; }
  .print-att .g-stats th, .print-att .g-stats td { font-size: 10pt; text-align: center; }
  .print-att .g-cert { break-inside: avoid; }
  .print-att .g-who { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm 8mm; margin: 4mm 0 6mm; font-size: 13pt; }
  .print-att .g-who > div { display: flex; gap: 6px; border-bottom: 1px solid #000; padding-bottom: 2mm; }
  .print-att .g-who dt { font-weight: 400; }
  .print-att .g-who dd { margin: 0; font-weight: 700; }
  .print-att .g-ctab td, .print-att .g-ctab th { font-size: 12pt; height: 11mm; }
  .print-att .g-ctab .g-total td { font-weight: 700; border-top: 2px solid #000; }
  .print-att .g-att { margin: 6mm 0 0; font-size: 12pt; }
  .print-att .g-notes { border: 1px solid #000; min-height: 38mm; padding: 3mm; margin-top: 6mm; font-size: 12pt; }
  .print-att .g-sign { margin-top: 16mm; display: flex; justify-content: space-between; }
}

/* ===== المحتوى والأسئلة وملاحظات ولي الأمر (0.8.1) ===== */
.cnt-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cnt-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-inline-start: 5px solid var(--navy); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.cnt-card.k-homework { border-inline-start-color: var(--gold); }
.cnt-card.k-exam_notice { border-inline-start-color: var(--maroon); }
.cnt-card.k-note { border-inline-start-color: var(--muted); }
.cnt-card.faded { opacity: .72; border-style: dashed; border-inline-start-style: solid; }
.cnt-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cnt-ic { display: inline-flex; color: var(--navy); }
.cnt-ic .i { width: 22px; height: 22px; }
.cnt-title { flex: 1 1 140px; min-width: 0; font-size: 17px; overflow-wrap: anywhere; }
.cnt-more { margin-inline-start: auto; min-width: 44px; min-height: 44px; }
.cnt-meta, .cnt-ref, .cnt-reason { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.cnt-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-size: 16px; line-height: 1.7; }
.cnt-due { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.cnt-due .cnt-dn { font-weight: 700; }
.cnt-due.soon .cnt-dn { color: var(--warn-t); }
.cnt-due.late .cnt-dn { color: var(--err-t); }
.cnt-link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--navy); font-weight: 700; text-decoration: none; align-self: flex-start; max-width: 100%; overflow-wrap: anywhere; }
.cnt-link:hover { border-color: var(--navy); }
.cnt-host { color: var(--muted); font-weight: 400; font-size: 13px; }
.q-card.closed { opacity: .8; }
.q-ask { padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius); }
.q-answer { padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius); border-inline-start: 3px solid var(--gold); }
.q-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.q-acts .btn { min-height: 44px; }
.cnt-code { color: var(--muted); font-size: 14px; }
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-inline-start: 6px; border-radius: 999px; background: var(--maroon); color: #fff; font-size: 12px; font-weight: 700; }
.tile .nav-badge { position: absolute; top: 8px; inset-inline-end: 8px; }
.note-list .cnt-body { display: block; margin-top: 4px; }
.note-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
@media (min-width: 768px) { .cnt-list { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; } }
@media print {
  .print-att .cnt-ptable { table-layout: fixed; width: 100%; }
  .print-att .cnt-ptable th, .print-att .cnt-ptable td { padding: 4px 6px; font-size: 11pt; text-align: start; vertical-align: top; overflow-wrap: anywhere; }
  .print-att .cnt-ptable .c-d { width: 42mm; }
  .print-att .cnt-ptable .c-k { width: 26mm; }
  .print-att .cnt-ptable .c-b { font-size: 10pt; margin-top: 2px; white-space: pre-wrap; }
  .print-att .cnt-ptable .c-h { font-size: 9pt; margin-top: 2px; }
  .print-att .cnt-ptable tr { break-inside: avoid; }
  .print-att .cnt-ptable tbody td { min-height: 14mm; }
}

/* ===== بوابة الطالب وولي الأمر (0.9.0) — أصناف pt- ===== */
.pt-preview { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 12px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-t); font-weight: 700; }
.pt-preview .btn { margin-inline-start: auto; }
.pt-kids { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: none; overscroll-behavior-x: contain; }
.pt-kids::-webkit-scrollbar { display: none; }
.pt-kids .chip { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.pt-who { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.pt-who h2 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.pt-who-main { min-width: 0; }
.pt-rng { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.pt-sub { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.pt-actions { display: inline-flex; gap: 8px; align-items: center; }
.pt-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.pt-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: inherit; text-decoration: none; min-width: 0; min-height: 44px; }
.pt-card:hover { border-color: var(--navy); }
.pt-card-h { display: flex; align-items: center; gap: 10px; }
.pt-card-h > .i { width: 28px; height: 28px; color: var(--gold); flex: none; }
.pt-card-h b { font-size: 16px; }
.pt-go { margin-inline-start: auto; color: var(--muted); display: inline-flex; }
.pt-big { font-size: 20px; font-weight: 700; color: var(--accent); overflow-wrap: anywhere; }
.pt-line { font-size: 16px; overflow-wrap: anywhere; }
.pt-empty { margin: 0; color: var(--muted); font-size: 15px; }
.pt-note { margin: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pt-foot { padding-top: 6px; border-top: 1px solid var(--line); color: var(--muted); }
.pt-foot b { color: var(--text); }
.pt-rows, .pt-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pt-rows li, .pt-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.pt-item { padding: 8px 0; border-bottom: 1px solid var(--line); }
.pt-item:last-child { border-bottom: 0; }
.pt-r-t { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.pt-r-t small { color: var(--muted); font-size: 13px; }
.pt-lr { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.muted { color: var(--muted); }
.pt-dots { display: flex; gap: 10px; flex-wrap: wrap; }
.pt-dot { width: 64px; height: 64px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; border: 2px solid transparent; }
.pt-dot b { font-size: 20px; }
.pt-dot span { font-size: 12px; }
.pt-dot.p { background: var(--ok-bg); color: var(--ok-t); border-color: var(--ok-t); }
.pt-dot.a { background: var(--err-bg); color: var(--err-t); border-color: var(--err-t); }
.pt-dot.l { background: var(--warn-bg); color: var(--warn-t); border-color: var(--warn-t); }
.pt-dot.e, .pt-dot.pct { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.pt-dot.pct { color: var(--accent); }
.pt-dots.wide { margin-bottom: 14px; }
.pt-money { font-size: 24px; font-weight: 700; }
.pt-money.owe { color: var(--maroon); }
.pt-money.ok { color: var(--ok-t); }
.pt-money.sm { font-size: 15px; }
.pt-money.big { font-size: 32px; }
:root[data-theme="dark"] .pt-money.owe { color: var(--err-t); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pt-money.owe { color: var(--err-t); } }
.pt-month { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.pt-month b { min-width: 130px; text-align: center; font-size: 17px; }
.pt-days, .pt-slots, .pt-months, .pt-gcards, .pt-kids-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pt-day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.pt-day-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pt-cls { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.pt-cls-t { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.pt-cls-t small { color: var(--muted); font-size: 13px; }
.pt-cls-t small.pt-note { font-size: 12.5px; line-height: 1.5; }
.strike { text-decoration: line-through; color: var(--muted); }
.pt-gate { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.pt-st { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; flex: none; }
.pt-st.p { background: var(--ok-bg); color: var(--ok-t); }
.pt-st.a { background: var(--err-bg); color: var(--err-t); }
.pt-st.l { background: var(--warn-bg); color: var(--warn-t); }
.pt-st.e { background: var(--surface-2); color: var(--muted); }
.pt-st.x { background: transparent; color: var(--muted); text-decoration: line-through; border: 1px dashed var(--line); }
.pt-cal { display: none; }
.pt-week { display: none; }
.pt-gtools { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.pt-gtools select { font: inherit; font-size: 16px; min-height: 44px; padding: 4px 10px; border: 1px solid var(--muted); border-radius: var(--radius-btn); background: var(--surface); color: var(--text); flex: 1; min-width: 0; }
.pt-overall { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pt-overall > div:last-child { display: flex; flex-direction: column; }
.pt-overall b { font-size: 20px; }
.pt-ring { --p: 0; flex: none; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gold) calc(var(--p) * 1%), var(--surface-2) 0); position: relative; }
.pt-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface); }
.pt-ring b { position: relative; font-size: 15px; }
.pt-gcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.pt-gcard.left { border-style: dashed; }
.pt-gh { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 12px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.pt-gm { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.pt-gm small { color: var(--muted); }
.pt-gb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pt-chev { color: var(--muted); transition: transform .15s; flex: none; }
.pt-gh[aria-expanded="true"] .pt-chev { transform: rotate(180deg); }
.pt-gcard .pt-items { padding: 0 14px 10px; border-top: 1px solid var(--line); }
.pt-sec { margin: 16px 0 8px; }
.pt-bal { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.pt-mcard { padding: 10px 14px; }
.pt-mh { display: flex; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.pt-kid { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: inherit; font: inherit; text-align: start; cursor: pointer; }
.pt-kid:hover { border-color: var(--navy); }
.pt-kid-main { display: flex; flex-direction: column; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.pt-kid-main small { color: var(--muted); }
.pt-kid-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.pt-slot { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-inline-start: 5px solid var(--navy); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.pt-slot.live { border-inline-start-color: var(--ok-t); }
.pt-slot.cx { opacity: .75; border-style: dashed; border-inline-start-style: solid; border-inline-start-color: var(--muted); }
.pt-slot-t { flex: none; min-width: 86px; font-weight: 700; color: var(--accent); font-size: 14px; }
.pt-slot-m { display: flex; flex-direction: column; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.pt-slot-m small { color: var(--muted); }
.pt-today-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-inline-start: 6px; }
.pt-faq { margin-top: 24px; }
.pt-faq h3 { margin-bottom: 2px; }
.pt-faq .chips { margin: 10px 0; }
.pt-faq .cnt-list { margin-top: 10px; }
.pt-ptable td, .pt-ptable th { text-align: start; vertical-align: top; }
@media (min-width: 768px) {
  .pt-grid { grid-template-columns: repeat(2, 1fr); }
  .pt-gcards, .pt-kids-list { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; }
  .pt-days { display: none; }
  .pt-cal { display: block; margin-bottom: 12px; }
  .pt-cal-h, .pt-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .pt-cal-h span { text-align: center; font-weight: 700; color: var(--muted); padding: 4px 0; font-size: 14px; }
  .pt-cell { min-height: 92px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-btn); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .pt-cell.empty { background: transparent; border-color: transparent; }
  .pt-cell.today { border-color: var(--gold); border-width: 2px; }
  .pt-cell > b { font-size: 14px; color: var(--muted); }
  .pt-cm { display: flex; flex-wrap: wrap; gap: 3px; }
  .pt-cm .pt-st { min-width: 24px; padding: 1px 6px; font-size: 12px; }
  .pt-cg { color: var(--muted); font-size: 11px; }
  .pt-mobile { display: none; }
  .pt-week { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: start; }
  .pt-wcol { min-width: 0; }
  .pt-wcol h3 { margin: 0 0 6px; font-size: 16px; }
  .pt-wcol.today h3 { color: var(--gold); }
  .pt-wcol .pt-slot { flex-wrap: wrap; padding: 8px 10px; }
  .pt-wcol .pt-slot-t { min-width: 0; width: 100%; }
}
@media (min-width: 1280px) {
  .pt-grid { grid-template-columns: repeat(3, 1fr); }
  .pt-week { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 360px) { .pt-dot { width: 58px; height: 58px; } .pt-slot-t { min-width: 72px; } }
@media print {
  .print-att .pt-ptable { table-layout: auto; width: 100%; }
  .print-att .pt-ptable th, .print-att .pt-ptable td { padding: 4px 6px; font-size: 11pt; text-align: start; vertical-align: top; overflow-wrap: anywhere; }
  .print-att .pt-ptable tr { break-inside: avoid; }
  .pt-preview { display: none !important; }
}

/* ===== 0.9.1: الإشعارات والرسائل والإعلانات والإعدادات ===== */
.nbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: var(--on-gold); font-size: 11px; font-weight: 700; line-height: 1; font-style: normal; }
.nbadge[hidden] { display: none; }
.bottomnav > a, .bottomnav > button { position: relative; }
.bottomnav .nbadge { position: absolute; top: 4px; inset-inline-start: calc(50% + 6px); }
.chip .nbadge { position: static; margin: 0; }
.sheet-list .nbadge { margin-inline-start: auto; }
@media (min-width: 768px) {
  .nav-item { position: relative; }
  .nav-item .nbadge { position: absolute; top: 4px; inset-inline-end: 6px; }
  .side-open .nav-item .nbadge { position: static; margin-inline-start: auto; }
}
.pt-new { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 12px; padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--gold); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 700; }
.pt-new[hidden] { display: none; }
.pt-new .i { color: var(--gold); }
.pt-pin { display: block; margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radius); background: var(--info-bg); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.pt-pin small { display: block; color: var(--muted); }

.nt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nt-item { display: flex; gap: 12px; align-items: flex-start; width: 100%; min-height: 44px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none; text-align: start; font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.nt-item.unread { border-inline-start: 4px solid var(--gold); }
.nt-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--info-bg); color: var(--info-t); }
.nt-ic.t-absent { background: var(--err-bg); color: var(--err-t); }
.nt-ic.t-late, .nt-ic.t-reminder, .nt-ic.t-note { background: var(--warn-bg); color: var(--warn-t); }
.nt-ic.t-answer, .nt-ic.t-receipt, .nt-ic.t-reply, .nt-ic.t-grade { background: var(--ok-bg); color: var(--ok-t); }
.nt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-title { font-weight: 700; }
.nt-sub, .nt-time { color: var(--muted); font-size: 14px; }
.nt-time { font-size: 13px; }
.nt-dot { flex: none; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--gold); }
.nt-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; }
.nt-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.nt-top b { overflow-wrap: anywhere; }
.nt-reply { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--ok-bg); }
.nt-reply small { color: var(--muted); }
.nt-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nt-kids { margin-bottom: 12px; }
.nt-note { color: var(--muted); font-size: 14px; margin: 4px 0 12px; }
.nt-split { display: grid; gap: 16px; grid-template-columns: 1fr; }
.nt-detail { display: none; }
.nt-msg.sel { outline: 2px solid var(--gold); }
.nt-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.nt-bar .search { flex: 1 1 200px; min-width: 0; }
@media (min-width: 768px) {
  .nt-split { grid-template-columns: minmax(280px, 380px) 1fr; align-items: start; }
  .nt-detail { display: block; position: sticky; top: 76px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-height: 160px; }
}
.nt-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font-weight: 600; }
.nt-row span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nt-row small { display: block; color: var(--muted); font-weight: 400; }
.nt-row input[type="checkbox"] { flex: none; width: 24px; height: 24px; accent-color: var(--navy); }
.nt-set { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.nt-set h3 { margin: 8px 0 0; }
.nt-form textarea, .nt-form input, .nt-form select { font-size: 16px; }
.nt-reach { color: var(--muted); font-size: 14px; min-height: 20px; margin: 0; }
@media (max-width: 400px) { .nt-item { padding: 10px; gap: 10px; } .nt-ic { width: 32px; height: 32px; } }
@media print { .nbadge, .pt-new { display: none !important; } }

/* ---------- التقارير (0.9.2) ---------- */
.rp-tabs { display: flex; gap: 8px; overflow-x: auto; white-space: nowrap; margin-bottom: 12px; padding-bottom: 4px; scrollbar-width: thin; }
.rp-tabs button { flex: none; font: inherit; font-size: 15px; font-weight: 600; min-height: 44px; padding: 4px 16px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.rp-tabs button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
:root[data-theme="dark"] .rp-tabs button.on { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rp-tabs button.on { background: var(--gold); color: var(--on-gold); border-color: var(--gold); } }
.rp-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.rp-filters select, .rp-filters input[type="date"] { font: inherit; font-size: 16px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--muted); border-radius: var(--radius-btn); background: var(--surface); color: var(--text); min-width: 0; max-width: 100%; }
.rp-d { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.rp-month { display: inline-flex; align-items: center; gap: 8px; }
.rp-month b { min-width: 110px; text-align: center; }
.rp-chips { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
.rp-chips .chip { flex: none; }
.rp-acts { margin-inline-start: auto; display: inline-flex; gap: 8px; }
.rp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
@media (min-width: 768px) { .rp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .rp-grid { grid-template-columns: repeat(6, 1fr); } .rp-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } }
.rp-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-stat small { color: var(--muted); font-size: 13px; }
.rp-stat b { font-size: 22px; line-height: 1.3; overflow-wrap: anywhere; }
.rp-stat span { font-size: 13px; color: var(--muted); }
.rp-stat.ok b { color: var(--ok-t); } .rp-stat.warn b { color: var(--warn-t); }
.rp-card { margin-bottom: 14px; }
.rp-h { margin: 18px 0 8px; }
.rp-link { color: var(--text); font-weight: 700; text-decoration: none; border-bottom: 1px dotted var(--muted); overflow-wrap: anywhere; }
.rp-link:hover { border-bottom-style: solid; }
.rp-bar { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--surface-2); vertical-align: middle; overflow: hidden; margin-inline-start: 6px; }
.rp-bar i { display: block; height: 100%; background: var(--navy); border-radius: 4px; }
:root[data-theme="dark"] .rp-bar i { background: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rp-bar i { background: var(--gold); } }
.rp-bar.warn i { background: var(--warn-t); }
.rp-top, .rp-kv, .rp-ages { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rp-top li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.rp-top .rp-bar { grid-column: 1 / -1; width: 100%; margin: 0; }
.rp-kv li { display: flex; justify-content: space-between; gap: 10px; }
.rp-ages li { display: grid; grid-template-columns: 110px 1fr auto; gap: 4px 10px; align-items: center; }
.rp-ages .rp-bar { width: 100%; margin: 0; }
.rp-ages small { grid-column: 2 / -1; color: var(--muted); }
.rp-days { display: grid; gap: 6px; margin-bottom: 6px; }
.rp-day { display: grid; grid-template-columns: 44px 1fr 80px; gap: 8px; align-items: center; }
.rp-day .rp-bar { width: 100%; margin: 0; height: 10px; } .rp-day b { text-align: end; font-size: 14px; }
.rp-diff { color: var(--err-t); font-weight: 700; }
.rp-json { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; margin: 6px 0 0; text-align: left; }
.rp-warn { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--surface)); }
.rp-alert { color: var(--warn-t); font-weight: 700; display: flex; gap: 6px; align-items: center; }
.rp-tbl { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rp-tbl th, .rp-tbl td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rp-tbl th { background: var(--surface-2); font-size: 14px; color: var(--muted); font-weight: 600; }
.rp-tbl .rp-n { text-align: end; font-variant-numeric: tabular-nums; }
.rp-tbl details summary { cursor: pointer; min-height: 24px; color: var(--info-t); }
@media (max-width: 767px) {
  .rp-tbl, .rp-tbl tbody { display: block; background: none; border: 0; }
  .rp-tbl thead { display: none; }
  .rp-tbl tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; }
  .rp-tbl td { display: flex; flex-direction: column; border: 0; padding: 2px 0; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
  .rp-tbl td::before { content: attr(data-l); font-size: 12px; color: var(--muted); }
  .rp-tbl td.rp-t { grid-column: 1 / -1; font-size: 16px; font-weight: 700; }
  .rp-tbl td.rp-t::before { display: none; }
  .rp-tbl td.rp-s { display: none; }
  .rp-tbl td.rp-n { text-align: start; }
  .rp-ages li { grid-template-columns: 90px 1fr auto; }
}
@media (min-width: 768px) and (max-width: 1023px) { .rp-tbl .rp-s { display: none; } }
.rp-wide { font-size: 14px; }
@page rp { size: A4 portrait; margin: 12mm 12mm 16mm; @bottom-center { content: "صفحة " counter(page) " من " counter(pages); font-size: 9pt; } }
@page rpl { size: A4 landscape; margin: 12mm 12mm 16mm; @bottom-center { content: "صفحة " counter(page) " من " counter(pages); font-size: 9pt; } }
@media print {
  #rpDoc { page: rp; }
  #rpDoc.rp-land { page: rpl; }
  #rpDoc .rp-tbl { display: table !important; width: 100%; border: 1px solid #000; border-radius: 0; font-size: 10pt; }
  #rpDoc .rp-tbl thead { display: table-header-group !important; }
  #rpDoc .rp-tbl tbody { display: table-row-group !important; }
  #rpDoc .rp-tbl tr { display: table-row !important; break-inside: avoid; border: 0; padding: 0; margin: 0; background: #fff; }
  #rpDoc .rp-tbl th, #rpDoc .rp-tbl td { display: table-cell !important; border: 1px solid #000; padding: 3px 6px; background: #fff; color: #000; font-size: 10pt; }
  #rpDoc .rp-tbl td::before { display: none !important; }
  #rpDoc .rp-tbl td.rp-t { font-size: 10pt; }
  #rpDoc .rp-tbl .rp-s { display: table-cell !important; }
  #rpDoc .rp-stat, #rpDoc .rp-card { box-shadow: none; border: 1px solid #000; break-inside: avoid; background: #fff; }
  #rpDoc .rp-grid { grid-template-columns: repeat(3, 1fr); }
  #rpDoc .rp-bar { border: 1px solid #000; background: #fff; width: 60px; } #rpDoc .rp-bar i { background: #000 !important; }
  #rpDoc .rp-link { border: 0; color: #000; }
  #rpDoc .rp-json { max-height: none; border: 1px solid #888; background: #fff; }
  #rpDoc .rp-h { break-after: avoid; }
}

/* ---------- حارس التكلفة والاستهلاك (1.0.0) ---------- */
.guard-bar { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radius); font-weight: 600; font-size: 15px; line-height: 1.6; border: 1px solid transparent; }
.guard-bar .i { flex: none; margin-top: 4px; }
.guard-bar a { color: inherit; text-decoration: underline; margin-inline-start: 6px; white-space: nowrap; }
.guard-bar.warn { background: var(--warn-bg); color: var(--warn-t); border-color: var(--gold); }
.guard-bar.hot { background: rgba(107, 26, 43, .12); color: var(--maroon); border-color: var(--maroon); }
:root[data-theme="dark"] .guard-bar.hot { background: rgba(255, 155, 145, .14); color: var(--err-t); border-color: var(--err-t); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .guard-bar.hot { background: rgba(255, 155, 145, .14); color: var(--err-t); border-color: var(--err-t); } }
.us-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.us-head input[type="date"] { font: inherit; font-size: 16px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--muted); border-radius: var(--radius-btn); background: var(--surface); color: var(--text); min-width: 0; max-width: 100%; }
.us-note { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0 0 14px; }
.us-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
@media (min-width: 640px) { .us-grid { grid-template-columns: repeat(3, 1fr); } }
.us-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
.us-card small { color: var(--muted); font-size: 13px; display: block; }
.us-card b { font-size: 22px; line-height: 1.4; display: block; overflow-wrap: anywhere; }
.us-card span { font-size: 13px; color: var(--muted); }
.us-meter { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; margin: 6px 0 4px; }
.us-meter i { display: block; height: 100%; width: calc(var(--p, 0) * 1%); max-width: 100%; background: var(--ok); }
.us-meter.gold i { background: var(--gold); } .us-meter.maroon i { background: var(--maroon); }
.us-pct.gold { color: var(--warn-t); } .us-pct.maroon { color: var(--maroon); } .us-pct.green { color: var(--ok-t); }
:root[data-theme="dark"] .us-pct.maroon { color: var(--err-t); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .us-pct.maroon { color: var(--err-t); } }
.us-guard { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 14px; }
.us-guard p { margin: 0; flex: 1 1 240px; line-height: 1.7; }
.us-guard .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.us-state { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: 14px; background: var(--ok-bg); color: var(--ok-t); }
.us-state.warn { background: var(--warn-bg); color: var(--warn-t); } .us-state.hot { background: rgba(107, 26, 43, .12); color: var(--maroon); }
:root[data-theme="dark"] .us-state.hot { color: var(--err-t); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .us-state.hot { color: var(--err-t); } }
.us-two { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
@media (min-width: 1100px) { .us-two { grid-template-columns: 1fr 1fr; } }
.us-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.us-tbl th, .us-tbl td { padding: 8px 6px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.us-tbl th { color: var(--muted); font-weight: 600; font-size: 13px; }
.us-tbl .r { overflow-wrap: anywhere; direction: ltr; text-align: left; }
.us-tbl td.n, .us-tbl th.n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .us-tbl thead { display: none; }
  .us-tbl, .us-tbl tbody, .us-tbl tr, .us-tbl td { display: block; width: 100%; }
  .us-tbl tr { border: 1px solid var(--line); border-radius: var(--radius-btn); padding: 8px 10px; margin-bottom: 8px; background: var(--surface); }
  .us-tbl td { border: 0; padding: 2px 0; display: flex; justify-content: space-between; gap: 10px; text-align: end; }
  .us-tbl td::before { content: attr(data-l); color: var(--muted); font-size: 13px; flex: none; }
  .us-tbl td.r { display: block; text-align: left; font-weight: 700; } .us-tbl td.r::before { content: none; }
}
.us-days { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 8px; direction: ltr; }
.us-day { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 12px; color: var(--muted); }
.us-day .bar { width: 100%; max-width: 44px; height: calc(var(--p, 0) * 1%); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--ok); }
.us-day .bar.gold { background: var(--gold); } .us-day .bar.maroon { background: var(--maroon); }
.us-day b { font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
.us-day.on .lbl { color: var(--text); font-weight: 700; }

/* 1.0.4: أهداف لمس ≥44px على الجوال (شاشة فقط؛ سطح المكتب والطباعة بلا تغيير) */
@media screen and (max-width: 1023px) {
  .topbar .brand { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; margin-inline: -4px; }
  .rp-link { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 0; text-decoration: underline dotted; }
  #dInput { min-height: 44px; }
}
@media screen and (max-width: 767px) {
  .list-table .c-title .linkbtn, .linkbtn { display: inline-flex; align-items: center; min-height: 44px; }
}

#status { min-height: 44px; font-size: 16px; }

/* 1.2.0: بادئة الكود في قائمة الحسابات */
.code-pre { color: var(--gold-d, var(--navy)); margin-inline-end: 1px; }
button.nt-row { font: inherit; font-weight: 600; color: inherit; text-align: start; width: 100%; }

/* اشتراك المركز (1.2.0) */
body.ro form button[type=submit], body.ro form .btn:not([data-close]) { opacity: .55; }
.sub-badge { margin-inline-start: 6px; }

/* 1.2.1: تباين صفحة الاستهلاك (نص ≥4.5:1، أشرطة ≥3:1 في الوضعين) واستهلاك المراكز */
:root { --bar-ok: #1F7A4D; --bar-warn: #8A5A0F; --bar-hot: #B42318; --bar-track: #8A93A5; }
:root[data-theme="dark"] { --bar-ok: #6FD39C; --bar-warn: #F0C36A; --bar-hot: #FF9B91; --bar-track: #5C6F94; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bar-ok: #6FD39C; --bar-warn: #F0C36A; --bar-hot: #FF9B91; --bar-track: #5C6F94; } }
.us-meter { outline: 1px solid var(--bar-track); outline-offset: -1px; }
.us-meter i, .us-day .bar { background: var(--bar-ok); }
.us-meter.gold i, .us-day .bar.gold { background: var(--bar-warn); }
.us-meter.maroon i, .us-day .bar.maroon { background: var(--bar-hot); }
.us-day .bar { outline: 1px solid var(--bar-track); outline-offset: -1px; }
.cu-line { margin-top: 6px; } .cu-line .us-meter { max-width: 260px; }
.cu-days { height: 120px; gap: 2px; } .cu-days .us-day { min-height: 0; }
.rp-warn { background: #FAF1DC; }
:root[data-theme="dark"] .rp-warn { background: #2E2B25; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rp-warn { background: #2E2B25; } }

/* هوية المركز (1.3.2) */
.brand-prev img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--surface-2); margin-bottom: 8px; }
.brand-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-sw { position: relative; display: inline-flex; width: 44px; height: 44px; cursor: pointer; }
.brand-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.brand-sw span { width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent; box-shadow: 0 0 0 1px var(--line); }
.brand-sw input:checked + span { border-color: var(--surface); box-shadow: 0 0 0 3px var(--text); }
.brand-sw input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }

/* 1.3.2: الشعار المخصَّص داخل نفس الصندوق، وتباين بادئة الكود في الوضع الليلي */
.print-header img, .rc-head img, .ic-top img, .brand img { object-fit: contain; }
:root[data-theme="dark"] .code-pre { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .code-pre { color: var(--gold); } }