/* هوية سريا — أنماط الصفحات. فوق sarya-kit.css، بخصائص منطقية، بلا تباعد حروف على العربية. */

@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 600; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 700; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 600; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 700; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF; }

:root {
  --sk-acc: #1f3a5f;
  --sk-acc-ink: #172d4a;
  --sk-acc-soft: #e8eef6;
  --bg: #f5f6f9;
  --misbar: #0E7C86;
  --masaar: #6D4AFF;
  --montad: #2E7CB8;
  --nafitha: #65350F;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sk-acc: #8fb3e3;
    --sk-acc-ink: #b7cff0;
    --sk-acc-soft: #1d2a3d;
    --sk-on-acc: #0e1522;
    --sk-ink: #e8ebf3;
    --sk-mute: #a3abbe;
    --sk-line: #2b3243;
    --sk-paper: #161b26;
    --sk-soft: #1d2331;
    --bg: #0f131b;
    --misbar: #35b3bd;
    --masaar: #a28dff;
    --montad: #6fb1e6;
    --nafitha: #c98a5a;
    color-scheme: dark;
  }
}

/* لون النظام المقصود يحلّ محلّ لون الهوية */
.acc-misbar { --sk-acc: var(--misbar); }
.acc-masaar { --sk-acc: var(--masaar); }
.acc-montad { --sk-acc: var(--montad); }
.acc-nafitha { --sk-acc: var(--nafitha); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--sk-ink);
  font: 400 1rem/1.7 'IBM Plex Sans Arabic', system-ui, 'Segoe UI', Tahoma, sans-serif;
}

.shell { flex: 1; inline-size: 100%; max-inline-size: 440px; margin-inline: auto; padding: 48px 16px 24px; display: grid; gap: 16px; align-content: start; }
.shell.wide { max-inline-size: 1100px; }

.card { background: var(--sk-paper); border: 1px solid var(--sk-line); border-radius: var(--sk-r-lg); padding: 28px 24px; display: grid; gap: 12px; }
.card > * { margin: 0; }
h1 { font-size: 1.45rem; font-weight: 700; line-height: 1.35; margin: 0; }
h2 { font-size: 1.08rem; font-weight: 600; margin: 0; }
.lead { color: var(--sk-mute); }
.hint { color: var(--sk-mute); font-size: var(--sk-fs-sm); }
.eyebrow { margin: 0; color: var(--sk-mute); font-size: var(--sk-fs-sm); }

.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--sk-acc); }
.mark { inline-size: 14px; block-size: 14px; border-radius: 4px; background: var(--sk-acc); }

.form { display: grid; gap: 14px; margin-block-start: 4px; }
.form.inline { gap: 10px; }
label { display: grid; gap: 6px; font-size: var(--sk-fs); font-weight: 500; }
input[type=email], input[type=password], input[type=text], input:not([type]) {
  block-size: var(--sk-field-h);
  padding-inline: 12px;
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-sm);
  background: var(--sk-paper);
  color: var(--sk-ink);
  font: inherit;
  text-align: start;
}
input:focus-visible, .btn:focus-visible, a:focus-visible, .link:focus-visible { outline: 2px solid var(--sk-acc); outline-offset: 2px; }
input[dir=ltr] { text-align: left; }
/* الرمز أرقامٌ لاتينية: التباعد مسموحٌ هنا وحده */
.otp { letter-spacing: .35em; font-variant-numeric: tabular-nums; font-size: 1.15rem; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--sk-mute); }
.choices { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.choice { display: flex; align-items: center; gap: 10px; border: 1px solid var(--sk-line); border-radius: var(--sk-r-sm); padding: 10px 12px; font-weight: 500; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  block-size: var(--sk-field-h); padding-inline: 18px;
  border: 1px solid var(--sk-acc); border-radius: var(--sk-r-sm);
  background: var(--sk-acc); color: var(--sk-on-acc);
  font-family: inherit; font-weight: 600; font-size: var(--sk-fs); text-decoration: none; cursor: pointer;
  justify-self: start;
}
.form > .btn { justify-self: stretch; }
.btn.ghost { background: transparent; color: var(--sk-acc); }
.link { background: none; border: 0; padding: 0; color: var(--sk-acc); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.alert { padding: 10px 14px; border-radius: var(--sk-r-sm); font-size: var(--sk-fs); }
.alert.err { background: color-mix(in srgb, var(--sk-danger) 12%, transparent); color: var(--sk-danger); }
.alert.ok { background: color-mix(in srgb, var(--sk-ok) 12%, transparent); color: var(--sk-ok); }

.top { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.links { display: flex; align-items: center; gap: 16px; }
.links a { color: var(--sk-acc); }
.links form { margin: 0; }

/* الأنظمة أربعةٌ على الأكثر: عمودان، فلا تبقى بطاقةٌ وحدها في صف */
.apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 480px) { .apps { grid-template-columns: 1fr; } }
.app {
  --c: var(--sk-acc);
  position: relative; overflow: hidden;
  display: grid; gap: 4px; padding: 24px 20px 20px; min-block-size: 120px; align-content: end;
  background: var(--sk-paper); border: 1px solid var(--sk-line); border-radius: var(--sk-r-lg);
  color: var(--sk-ink); text-decoration: none;
  transition: transform .18s var(--sk-ease), box-shadow .18s var(--sk-ease);
}
.app::before { content: ''; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 4px; background: var(--c); }
.app:hover { transform: translateY(-2px); box-shadow: var(--sk-shadow); }
@media (max-width: 480px) { .app { min-block-size: 88px; } }
.app-dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--c); }
.app-name { font-size: 1.2rem; font-weight: 700; }
.app-desc { color: var(--sk-mute); font-size: var(--sk-fs-sm); }
.sys-misbar { --c: var(--misbar); }
.sys-masaar { --c: var(--masaar); }
.sys-montad { --c: var(--montad); }
.sys-nafitha { --c: var(--nafitha); }
.empty { color: var(--sk-mute); text-align: center; padding: 40px 0; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.facts dt { color: var(--sk-mute); }
.facts dd { margin: 0; }

.sessions { list-style: none; margin: 0; padding: 0; display: grid; }
.sessions li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; border-block-start: 1px solid var(--sk-line); }
.sessions li:first-child { border-block-start: 0; }
.sessions form { margin: 0; }
.meta { display: block; color: var(--sk-mute); font-size: var(--sk-fs-sm); }
.tag { font-size: .75rem; padding: 1px 8px; border-radius: 99px; background: var(--sk-acc-soft); color: var(--sk-acc-ink); }

.qr-box { justify-self: center; inline-size: 200px; padding: 8px; background: #fff; border-radius: var(--sk-r-sm); border: 1px solid var(--sk-line); }
.qr { display: block; inline-size: 100%; block-size: auto; }
.secret { font-family: ui-monospace, 'SF Mono', Menlo, monospace; text-align: center; letter-spacing: .08em; font-size: .95rem; word-break: break-all; }
.codes { font-family: ui-monospace, 'SF Mono', Menlo, monospace; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; padding-inline-start: 24px; margin: 0; }

.foot { text-align: center; color: var(--sk-mute); font-size: .78rem; padding: 16px; }

/* ── صفحات الإدارة (إدارة المنظمة · لوحة سريا) ── */
.acc-console { --sk-acc: #2b2f3a; }
@media (prefers-color-scheme: dark) { .acc-console { --sk-acc: #c9cedb; } }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-block-end: 1px solid var(--sk-line); }
.tabs a { padding: 10px 14px; color: var(--sk-mute); text-decoration: none; border-block-end: 2px solid transparent; margin-block-end: -1px; font-weight: 500; }
.tabs a.on { color: var(--sk-acc); border-block-end-color: var(--sk-acc); }
.tabs a:hover { color: var(--sk-ink); }
.card.flush { padding: 0; overflow: hidden; }
.card .pad, .card.flush > h2 { padding: 20px 20px 0; }
.tbl-wrap { overflow-x: auto; }
.tbl { inline-size: 100%; border-collapse: collapse; font-size: var(--sk-fs); }
.tbl th, .tbl td { padding: 12px 14px; text-align: start; border-block-end: 1px solid var(--sk-line); vertical-align: middle; }
.tbl thead th { font-size: var(--sk-fs-sm); color: var(--sk-mute); font-weight: 600; background: var(--sk-soft); white-space: nowrap; }
.tbl tbody tr:last-child > * { border-block-end: 0; }
.tbl th[scope=row] { font-weight: 500; }
.tbl a { color: var(--sk-acc); font-weight: 600; }
.tbl .num { inline-size: 6.5rem; }
.matrix .cell { text-align: center; }
.matrix thead th[class^=sys-] { border-block-start: 3px solid var(--c, var(--sk-line)); }
.th-sys { display: block; color: var(--sk-ink); font-size: var(--sk-fs); }
.seats { display: block; font-weight: 400; }
.seats.full { color: var(--sk-danger); }
.bar { display: block; block-size: 4px; border-radius: 4px; background: var(--sk-line); margin-block-start: 6px; overflow: hidden; }
.bar i { display: block; block-size: 100%; background: var(--c, var(--sk-acc)); }
.bar i.w0 { inline-size: 0%; }
.bar i.w10 { inline-size: 10%; }
.bar i.w20 { inline-size: 20%; }
.bar i.w30 { inline-size: 30%; }
.bar i.w40 { inline-size: 40%; }
.bar i.w50 { inline-size: 50%; }
.bar i.w60 { inline-size: 60%; }
.bar i.w70 { inline-size: 70%; }
.bar i.w80 { inline-size: 80%; }
.bar i.w90 { inline-size: 90%; }
.bar i.w100 { inline-size: 100%; }
.who strong { font-weight: 600; }
.matrix .who { min-inline-size: 220px; }
.chk { inline-size: 32px; block-size: 32px; border-radius: 8px; border: 1px dashed var(--sk-line); background: transparent; color: var(--sk-mute); font: inherit; font-size: 1rem; cursor: pointer; }
.chk.on { border: 1px solid var(--c, var(--sk-acc)); background: color-mix(in srgb, var(--c, var(--sk-acc)) 14%, transparent); color: var(--c, var(--sk-acc)); font-weight: 700; }
.chk:hover { border-color: var(--sk-acc); }
form.act { display: inline; margin: 0; }
.acts { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
td.acts { min-inline-size: 220px; }
.tag.ok { background: color-mix(in srgb, var(--sk-ok) 14%, transparent); color: var(--sk-ok); }
.tag.warn { background: color-mix(in srgb, var(--sk-warn) 14%, transparent); color: var(--sk-warn); }
.chip { --c: var(--sk-acc); display: inline-flex; gap: 6px; align-items: center; font-size: .78rem; padding: 2px 10px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); color: var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); white-space: nowrap; }
.chip.off { opacity: .45; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; border-block-start: 1px solid var(--sk-line); }
.rows li:first-child { border-block-start: 0; }
.log li { padding-block: 8px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wide-form { display: grid; gap: 16px; }
.colors { display: flex; flex-wrap: wrap; gap: 16px; margin-block-start: 8px; }
.colors label, label.color { display: grid; gap: 6px; font-weight: 500; }
input[type=color] { inline-size: 64px; block-size: 36px; padding: 2px; border: 1px solid var(--sk-line); border-radius: var(--sk-r-sm); background: var(--sk-paper); }
input[type=number], input[type=date], select { block-size: var(--sk-field-h); padding-inline: 10px; border: 1px solid var(--sk-line); border-radius: var(--sk-r-sm); background: var(--sk-paper); color: var(--sk-ink); font: inherit; }
.sysrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-inline-start: 3px solid var(--c, var(--sk-acc)); }
.choice .meta { display: block; }
.step { display: inline-grid; place-items: center; inline-size: 1.6em; block-size: 1.6em; border-radius: 50%; background: var(--sk-acc); color: var(--sk-on-acc); font-size: .8rem; margin-inline-end: 6px; }
.code-field { max-inline-size: 260px; }
/* الفعل الخطِر لا يتمدّد: الرمز وزرّه في سطرٍ واحد بقدر حاجتهما */
.form.inline { grid-template-columns: minmax(0, 260px) auto; align-items: end; justify-content: start; }
.form.inline > .btn { justify-self: start; }
@media (max-width: 640px) { .form.inline { grid-template-columns: 1fr; } }
.tabs { overflow-x: auto; flex-wrap: nowrap; }
.tabs a { white-space: nowrap; }
.otp.sm { inline-size: 7.5rem; block-size: 32px; font-size: .9rem; }
.secret.big { font-size: 1.4rem; padding: 14px; border: 1px dashed var(--sk-acc); border-radius: var(--sk-r); background: var(--sk-acc-soft); }
.btn.sm { block-size: 32px; padding-inline: 12px; font-size: var(--sk-fs-sm); }
.btn.danger { background: var(--sk-danger); border-color: var(--sk-danger); }
.muted { color: var(--sk-mute); }
.empty { color: var(--sk-mute); }
.links .meta { display: inline; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } td.acts { min-inline-size: 180px; } }

@media (prefers-reduced-motion: reduce) { .app { transition: none; } .app:hover { transform: none; } }
@media (max-width: 480px) { .shell { padding-block-start: 24px; } .card { padding: 22px 18px; } }