/* لوحة تحكم بالك: مستقلة بذاتها. لا تستعير تنسيق الموقع، لأنها تُخدم من مجلدها وحده.
   الشكل على نمط لوحة Mora (Mobbin، 2026-10-06): شريط جانبي رمادي فاتح بالأقسام ومجموعاتها
   وفي ذيله التحديثات برقم النسخة، شريط علوي نحيف باسم الصفحة، وبطاقات بيضاء بحدّ رفيع
   ورأس من سطر واحد، وأرقام كبيرة، ولون واحد دافئ للرسوم. المقاسات من الصورة نفسها. */
@font-face { font-family: "Cairo"; font-weight: 200 1000; font-display: swap; src: url("/fonts/cairo-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Cairo"; font-weight: 200 1000; font-display: swap; src: url("/fonts/cairo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD; }
:root {
  --bg: #f7f7f7; --frame: #f7f7f7; --card: #ffffff; --ink: #1f1f1f; --ink-60: #6e6e6e; --ink-40: #a3a3a3; --line: #e8e8e8; --line-soft: #f0f0f0;
  --dark: #1f1f1f; --on-dark: #ffffff; --accent: #2f8a43; --accent-soft: #e3f5e6; --on-accent: #ffffff;
  --warm: #c2652a; --warm-soft: #f7e3d4; --violet: #9a5bd0; --violet-soft: #f1e6fa; --hover: #ededed;
  --danger: #d2443b; --danger-soft: #fde3e3; --shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  /* بالك: الحبري والفيروزي للرسوم والأزرار (سامي 2026-10-06)؛ الفيروزي لا يحمل نصًّا أبيض (تباين 2.6) */
  --brand-ink: #315d90; --brand-teal: #53b0af; --btn: #315d90; --btn-hover: #2a5080; --on-btn: #ffffff;
  --chart-1: #53b0af; --chart-2: #315d90; --chart-3: #a9d8d7; --chart-4: #c7d3e3;
  --lv1: #8a6d00; --lv1-soft: #fbf0c9; --lv2: #c2652a; --lv2-soft: #f7e3d4; --lv3: #b3261e; --lv3-soft: #f7d9d3;
  --r-card: 10px; --r-ctl: 8px; --side-w: 248px; --top-h: 48px;
  color-scheme: light;
}
/* dark: chosen in the console (data-theme="dark"), or the device choice unless light was chosen */
:root[data-theme="dark"] {
    --bg: #141414; --frame: #141414; --card: #1c1c1c; --ink: #ededed; --ink-60: #9b9b9b; --ink-40: #6b6b6b; --line: #2c2c2c; --line-soft: #242424;
    --dark: #ededed; --on-dark: #141414; --accent: #5cc775; --accent-soft: #17301d; --on-accent: #0b1f10;
    --warm: #e39a63; --warm-soft: #3b2a1f; --violet: #c49bea; --violet-soft: #2e2438; --hover: #262626;
    --danger: #ff8a80; --danger-soft: #3d1f1d; --shadow: none;
    --brand-teal: #53b0af; --btn: #315d90; --btn-hover: #3a6aa2; --on-btn: #ffffff;
    --chart-1: #53b0af; --chart-2: #6f95c4; --chart-3: #2f6463; --chart-4: #2b3e57; color-scheme: dark;
    --lv1: #f0d060; --lv1-soft: #3a3113; --lv2: #e39a63; --lv2-soft: #3b2a1f; --lv3: #ffb4ab; --lv3-soft: #5a2b25;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141414; --frame: #141414; --card: #1c1c1c; --ink: #ededed; --ink-60: #9b9b9b; --ink-40: #6b6b6b; --line: #2c2c2c; --line-soft: #242424;
    --dark: #ededed; --on-dark: #141414; --accent: #5cc775; --accent-soft: #17301d; --on-accent: #0b1f10;
    --warm: #e39a63; --warm-soft: #3b2a1f; --violet: #c49bea; --violet-soft: #2e2438; --hover: #262626;
    --danger: #ff8a80; --danger-soft: #3d1f1d; --shadow: none;
    --brand-teal: #53b0af; --btn: #315d90; --btn-hover: #3a6aa2; --on-btn: #ffffff;
    --chart-1: #53b0af; --chart-2: #6f95c4; --chart-3: #2f6463; --chart-4: #2b3e57; color-scheme: dark;
    --lv1: #f0d060; --lv1-soft: #3a3113; --lv2: #e39a63; --lv2-soft: #3b2a1f; --lv3: #ffb4ab; --lv3-soft: #5a2b25;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Cairo", "Segoe UI", system-ui, sans-serif; font-size: 14px; line-height: 1.6; }
h1 { font-size: 24px; font-weight: 600; margin: 0; text-wrap: balance; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
h3 { font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
p { margin: 8px 0; }
svg { flex: none; }
.muted { color: var(--ink-60); font-size: 13px; }
.small { font-size: 12px; }
.err { color: var(--danger); min-height: 20px; }
button { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 2px; }

/* أزرار: داكن للفعل الأساسي، بحدّ رفيع للباقي (زر «New block» في Mora: 28px، زاوية 8) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: var(--r-ctl); padding: 7px 14px; font-weight: 600; cursor: pointer; min-height: 36px; transition: background 0.15s, filter 0.15s; }
.btn.dark { background: var(--btn); color: var(--on-btn); }
.btn.dark:hover { background: var(--btn-hover); }
.btn.ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--hover); }
.btn.small { min-height: 32px; padding: 3px 11px; font-size: 13px; font-weight: 500; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: progress; }
.text { border: 0; background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; cursor: pointer; padding: 4px; }
.x { border: 0; background: transparent; color: var(--ink-60); font-size: 20px; line-height: 1; cursor: pointer; width: 32px; height: 32px; border-radius: 6px; }
.x:hover { background: var(--hover); color: var(--ink); }
.pill { border: 0; background: var(--btn); color: var(--on-btn); border-radius: 6px; padding: 4px 12px; font-weight: 600; font-size: 13px; cursor: pointer; min-height: 30px; }

/* الدخول */
.gate { max-width: 420px; margin: 64px auto; padding: 0 16px; }
.gate-brand, .ws { display: flex; align-items: center; gap: 10px; }
.gate-brand { margin-bottom: 18px; font-size: 17px; }
.mark { width: 28px; height: 28px; border-radius: 7px; background: var(--warm); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 18px; margin: 0 0 12px; box-shadow: var(--shadow); min-width: 0; }
label { display: block; margin: 10px 0; font-size: 13px; color: var(--ink-60); }
input, select, textarea { font: inherit; color: var(--ink); }
.gate input, .panel input:not([type="checkbox"]), textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font-size: 14px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--card); }
label.inline { display: flex; align-items: center; gap: 8px; color: var(--ink); }
label.inline input { width: 18px; height: 18px; accent-color: var(--btn); margin: 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }

/* الهيكل: شريط جانبي بعرض 248px، وعمل بشريط علوي 48px */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.side { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 10px; background: var(--frame); border-inline-end: 1px solid var(--line); min-width: 0; }
.ws { padding: 4px 6px; }
.ws-name { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ws-name b { font-size: 14px; }
.brand-sub { color: var(--ink-60); font-size: 12px; }
.search { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 8px; min-height: 34px; color: var(--ink-60); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-ctl); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 5px 0; font-size: 13px; }
.search input:disabled { opacity: 0.45; }
.search input:focus-visible { outline: none; }
.search:focus-within { color: var(--ink); border-color: var(--ink-40); }
kbd { font: 11px/1 ui-monospace, monospace; color: var(--ink-60); border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; background: var(--frame); }

/* الأقسام: عنصر 30px بخط 13px، والحالي بأرضية رمادية ناعمة */
.tabs { display: flex; flex-direction: column; gap: 1px; }
.nav-h { font-size: 11.5px; color: var(--ink-40); padding: 10px 8px 4px; }
.tab { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 32px; border: 0; background: transparent; color: var(--ink-60); padding: 4px 8px; border-radius: 6px; cursor: pointer; text-align: start; font-size: 13.5px; white-space: nowrap; }
.tab svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tab:hover { background: var(--hover); color: var(--ink); }
.tab.on { background: var(--hover); color: var(--ink); font-weight: 600; }
.tab.on svg { color: var(--brand-teal); }
.tab-sep { height: 1px; background: var(--line); margin: 8px 6px; }
.count { margin-inline-start: auto; background: var(--btn); color: var(--on-btn); border-radius: 999px; font-size: 11px; font-weight: 700; min-width: 20px; padding: 0 6px; text-align: center; line-height: 19px; }
.side-label { font-size: 11.5px; color: var(--ink-40); padding: 6px 8px 0; }
.side-label:empty { display: none; }
.side-nav { display: flex; flex-direction: column; gap: 1px; }
.side-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: transparent; color: var(--ink-60); text-align: start; padding: 5px 8px; min-height: 30px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.side-item:hover, .side-item.on { background: var(--hover); color: var(--ink); }
.side-item.on { font-weight: 600; }
.side-item b { font-weight: 500; font-size: 12px; color: var(--ink-60); font-variant-numeric: tabular-nums; }
/* ذيل الشريط: المؤشر، ثم «التحديثات» برقم النسخة (موضع Changelog 0.1.16 في Mora) */
.side-foot { margin-top: auto; position: sticky; bottom: -12px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding: 10px 0 12px; margin-bottom: -12px; background: var(--frame); }
.side-foot .tab { justify-content: flex-start; }
.side-foot .tab .ver { margin-inline-start: auto; }
.tab-l { overflow: hidden; text-overflow: ellipsis; }
.meter { padding: 0 8px; }
.meter-title { font-size: 12.5px; color: var(--ink-60); }
.meter-bar { height: 4px; border-radius: 4px; background: var(--line); margin: 6px 0; overflow: hidden; }
.meter-bar i { display: block; height: 100%; background: var(--chart-1); border-radius: 4px; transition: width 0.3s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)); }
.meter-num { font-size: 12px; color: var(--ink-60); font-variant-numeric: tabular-nums; }
.meter-num b { font-size: 15px; font-weight: 600; color: var(--ink); }

.work { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--top-h); padding: 6px 20px; background: var(--bg); border-bottom: 1px solid var(--line); }
.crumb { display: flex; align-items: center; gap: 8px; color: var(--ink-60); min-width: 0; }
.crumb h1 { font-size: 14px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-60); min-width: 0; }
.who #whoEmail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 26vw; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--chart-1); color: #1f1f1f; display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.notice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; padding-inline-end: 48px; position: relative; background: var(--card); border: 1px solid var(--line); border-inline-start: 3px solid var(--chart-1); border-radius: var(--r-card); color: var(--ink); }
.notice svg { color: var(--chart-1); }
.notice .x { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); }

.quota { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-inline-start: 3px solid var(--brand-teal); border-radius: var(--r-card); color: var(--ink); font-size: 13px; }
.quota[data-level='warn'] { border-inline-start-color: var(--danger); }
.quota-name { font-weight: 600; }
.quota-meter { display: inline-block; inline-size: 120px; block-size: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.quota-meter > span { display: block; block-size: 100%; inline-size: 0; background: var(--brand-teal); }
.quota[data-level='warn'] .quota-meter > span, .quota #quotaWhen.bad { background: none; }
.quota[data-level='warn'] .quota-meter > span { background: var(--danger); }
.quota #quotaWhen { color: var(--ink-60); }
.quota #quotaWhen.bad { color: var(--danger); font-weight: 600; }
.main { padding: 16px 20px 40px; min-width: 0; }
.main-head { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.main-head:has(> #tools[hidden]) { display: none; }
.tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.select { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--card); color: var(--ink-60); min-height: 34px; }
.select select { border: 0; background: transparent; padding: 5px 0; font-size: 13px; cursor: pointer; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; background: var(--card); }
.seg button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--ink-60); padding: 5px 12px; cursor: pointer; font-size: 13px; min-height: 32px; }
.seg button.on { background: var(--hover); color: var(--ink); }
.seg button.on svg { color: var(--brand-teal); }

/* بطاقات التنبيه */
.hints { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin-bottom: 12px; }
.hints:empty { display: none; }
.hint { display: flex; gap: 10px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; box-shadow: var(--shadow); }
.hint > div { flex: 1; min-width: 0; }
.hint p { margin: 2px 0 8px; }
.spark-ico { width: 28px; height: 28px; border-radius: 7px; background: var(--line-soft); color: var(--chart-1); display: grid; place-items: center; flex: none; }

/* اللوحة الرئيسية: شبكة بطاقات بفجوة 10px (Mora) */
.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.dash > .card { margin: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.dash .kpis { grid-column: 1 / -1; }
.dash .c-wide { grid-column: span 5; }
.dash .c-mid { grid-column: span 4; }
.dash .c-side { grid-column: span 3; }
.dash .c-rest { grid-column: span 7; }
.dash #sec-features { grid-column: span 5; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.card-h h2 { margin: 0; font-size: 13.5px; font-weight: 600; }
.card-b { padding: 12px 14px; }
.dash .kpis .stat-grid { padding: 12px; margin: 0; }

/* الأرقام: رقم كبير في الوسط وعنوانه فوقه (بطاقة Net User Growth) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 6px; }
.stat { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 2px; min-height: 104px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px; text-align: center; }
.stat b { display: block; font-size: 32px; line-height: 1.15; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stat span { font-size: 12.5px; color: var(--ink-60); }
.stat-grid.mini { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.stat-grid.mini .stat { min-height: 64px; padding: 8px; }
.stat-grid.mini .stat b { font-size: 20px; }
/* صحة الخدمات: صفوف «عنوان ... رقم» في عمود ضيق */
.stat-list { display: flex; flex-direction: column; }
.stat-list .stat { flex-direction: row-reverse; justify-content: space-between; min-height: 40px; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; padding: 6px 0; text-align: start; }
.stat-list .stat:last-child { border-bottom: 0; }
.stat-list .stat b { font-size: 18px; }
.stat-list .stat span { font-size: 13px; color: var(--ink); }
.jobs { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.jobs .chip { border: 0; border-radius: 6px; padding: 3px 0; font-size: 12px; color: var(--ink-60); background: transparent; cursor: default; }

/* الرسم الخطّي للآراء (يرسمه admin.js بـSVG) */
.spark { height: 170px; margin: 0; }
.spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.spark .empty { padding: 48px 0; }
.ln-grid { stroke: var(--line); stroke-width: 1; }
.ln-axis { fill: var(--ink-40); font-size: 10px; font-family: inherit; }
.ln-line { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ln-area { fill: var(--chart-1); opacity: 0.12; }
.ln-dot { fill: var(--card); stroke: var(--chart-1); stroke-width: 1.6; }

/* الحلقة: المجموع في الوسط ومفتاح الألوان فوقها (بطاقة Total users in USA) */
.donut { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.donut svg { width: 190px; height: 190px; }
.dn-seg { fill: none; stroke-width: 22; }
.dn-seg.c1 { stroke: var(--chart-1); } .dn-seg.c2 { stroke: var(--chart-2); } .dn-seg.c3 { stroke: var(--chart-3); } .dn-seg.c4 { stroke: var(--chart-4); }
.dn-total { fill: var(--ink-60); font-size: 12px; font-family: inherit; }
.dn-num { fill: var(--ink); font-size: 30px; font-weight: 600; font-family: inherit; }
.legend { display: flex; gap: 6px 14px; flex-wrap: wrap; justify-content: center; font-size: 12.5px; color: var(--ink-60); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-inline-end: 5px; vertical-align: 0; }
.legend .c1 { background: var(--chart-1); } .legend .c2 { background: var(--chart-2); } .legend .c3 { background: var(--chart-3); } .legend .c4 { background: var(--chart-4); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.chips:empty { display: none; }
.chip { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 3px 11px; font-size: 12.5px; cursor: pointer; }
.chip.on { background: var(--btn); color: var(--on-btn); border-color: transparent; }
/* جدول بأشرطة: صف 36px (جدول Top customers)، الاسم ثم شريط ثم الأرقام */
.bars { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.bar { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center; font-size: 13px; }
.bar-t { background: var(--line-soft); border-radius: 999px; height: 6px; overflow: hidden; }
.bar-t i { display: block; height: 100%; background: var(--chart-1); border-radius: 999px; }
.bar-n { color: var(--ink-60); white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-h { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; padding: 8px 14px; font-size: 12px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
.bars.table { gap: 0; margin: 0; }
.bars.table .bar { min-height: 36px; padding: 4px 14px; border-bottom: 1px solid var(--line-soft); }
.bars.table .bar:last-child { border-bottom: 0; }
.bars.table .empty { padding: 20px; }

/* القوائم: رأس أعمدة وصفوف */
.cols { display: grid; gap: 12px; align-items: center; }
.cols-voice { grid-template-columns: minmax(0, 1fr) 84px 96px 150px 150px 40px; }
.cols-people { grid-template-columns: minmax(0, 1fr) 80px 80px 96px 150px 40px; }
.cols-audit { grid-template-columns: minmax(0, 1fr) 220px 150px 40px; }
.panel > .cols { padding: 0 14px 8px; font-size: 13px; color: var(--ink-60); }
.list { display: flex; flex-direction: column; gap: 8px; }
.item { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.item:hover { border-color: #cfcfca; }
.line { display: grid; gap: 12px; align-items: center; padding: 8px 14px; min-height: 54px; }
.line[data-toggle] { cursor: pointer; }
.cell-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ttl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ico { width: 36px; height: 36px; border-radius: 8px; flex: none; background: var(--warm); position: relative; }
.ico::after { content: ""; position: absolute; inset: 9px 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); }
.ico.bug { background: var(--danger); }
.ico.love { background: var(--violet); }
.ico.person { background: var(--dark); border-radius: 50%; }
.ico.person::after { inset: 8px 12px 16px; border-radius: 50%; }
.ico.audit { background: var(--accent); }
.dim { color: var(--ink-60); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; font-size: 14px; }
.tag { display: inline-block; border-radius: 999px; padding: 1px 10px; font-size: 12px; background: var(--hover); color: var(--ink); white-space: nowrap; }
.tag.bug { background: var(--danger-soft); color: var(--danger); }
.tag.love { background: var(--violet-soft); color: var(--violet); }
.tag.idea { background: var(--warm-soft); color: var(--warm); }
.tag.new { background: var(--accent); color: var(--on-accent); }
.dots { border: 0; background: transparent; color: var(--ink-60); width: 36px; height: 36px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; fill: currentColor; }
.dots:hover { background: var(--hover); color: var(--ink); }
.menu { position: absolute; z-index: 5; inset-inline-end: 10px; top: 46px; display: flex; flex-direction: column; min-width: 170px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); }
.menu button { border: 0; background: transparent; color: var(--ink); text-align: start; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.menu button:hover { background: var(--hover); }
.detail { padding: 4px 14px 14px 62px; padding-inline: 62px 14px; border-top: 1px solid var(--line); }
.detail .body { margin: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-edit { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
.note-edit textarea { flex: 1 1 240px; margin: 0; resize: vertical; }
.empty { color: var(--ink-60); padding: 28px; text-align: center; }

/* عرض الشبكة: الصف يصير بطاقة */
.list.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.list.grid .line { display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 14px; align-items: center; }
.list.grid .cell-main { flex: 1 1 100%; }
.list.grid .ttl { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.list.grid .dots { margin-inline-start: auto; }
.list.grid .detail { padding-inline: 14px; }

.toast { position: fixed; z-index: 20; bottom: 24px; inset-inline-start: 50%; transform: translateX(50%); background: var(--dark); color: var(--on-dark); padding: 10px 18px; border-radius: 10px; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); max-width: calc(100vw - 32px); }
html[dir="ltr"] .toast { transform: translateX(-50%); }

@media (max-width: 1000px) {
  .cols-voice { grid-template-columns: minmax(0, 1fr) 84px 96px 40px; }
  .cols-voice > :nth-child(4), .cols-voice > :nth-child(5) { display: none; }
  .cols-people { grid-template-columns: minmax(0, 1fr) 80px 96px 40px; }
  .cols-people > :nth-child(3), .cols-people > :nth-child(5) { display: none; }
  .cols-audit { grid-template-columns: minmax(0, 1fr) 150px 40px; }
  .cols-audit > :nth-child(2) { display: none; }
}
@media (max-width: 1180px) {
  .dash .c-wide, .dash .c-mid { grid-column: span 6; }
  .dash .c-side, .dash .c-rest, .dash #sec-features { grid-column: 1 / -1; }
}
/* الجوال: الشريط الجانبي يصير رأسًا، والأقسام تلتفّ صفوفًا، والبطاقات عمودًا واحدًا */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .tabs { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .tabs .tab { width: auto; }
  .nav-h, .tab-sep { display: none; }
  .side-nav { flex-direction: row; flex-wrap: wrap; }
  .side-foot { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .side-foot .tab { width: auto; }
  .topbar { position: static; padding: 6px 16px; flex-wrap: wrap; }
  .who #whoEmail { display: none; }
  .main { padding: 14px 16px 32px; }
  .dash .c-wide, .dash .c-mid, .dash .c-side, .dash .c-rest, .dash #sec-features { grid-column: 1 / -1; }
  .two { grid-template-columns: 1fr; }
  .bar, .table-h { grid-template-columns: minmax(0, 1fr) auto; }
  .bar-t, .table-h > :nth-child(2) { display: none; }
  .detail { padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* المدارس */
.sch-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px; }
.sch-item .ttl { font-weight: 600; flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.sch-item .dim { font-size: 13px; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.sch-item .acts { display: flex; gap: 6px; margin-inline-start: auto; }
/* moving a seat to a new e-mail: the field sits in the row, beside its two buttons */
.sch-item .acts { flex-wrap: wrap; }
.panel .st-move input { display: inline-block; width: min(260px, 100%); margin: 0; }
.sch-item.on { border-color: var(--accent); }
.chip input { width: 15px; height: 15px; margin: 0 0 0 6px; vertical-align: -2px; accent-color: var(--btn); }
[data-panel="schools"] label > select { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; font-size: 15px; border-radius: 8px; border: 1px solid var(--line); background: var(--frame); }

/* التخزين: ثلاث درجات (تنبيه ٢٥٪، تحذير ٥٠٪، حرج ٧٠٪)، كل واحدة باسمها ولونها */
.st-banner { margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; border: 1.5px solid; font-weight: 600; }
.st-banner.lv-notice { background: var(--lv1-soft); border-color: var(--lv1); color: var(--ink); }
.st-banner.lv-warning { background: var(--lv2-soft); border-color: var(--lv2); color: var(--ink); }
.st-banner.lv-critical { background: var(--lv3-soft); border-color: var(--lv3); color: var(--ink); }
.st-row { margin: 12px 0 18px; }
.st-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.st-num { color: var(--ink-60); font-variant-numeric: tabular-nums; }
.st-track { position: relative; height: 14px; border-radius: 999px; background: var(--accent-soft); margin-top: 6px; overflow: hidden; }
.st-fill { display: block; height: 100%; background: var(--chart-1); border-radius: 999px; }
.st-fill.lv-notice { background: var(--lv1); }
.st-fill.lv-warning { background: var(--lv2); }
.st-fill.lv-critical { background: var(--lv3); }
.st-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink-60); opacity: 0.5; }
.st-legend { display: flex; gap: 8px; flex-wrap: wrap; }
.lv { border-radius: 999px; padding: 1px 10px; font-size: 12.5px; font-weight: 600; }
.lv-notice.lv { background: var(--lv1-soft); color: var(--lv1); }
.lv-warning.lv { background: var(--lv2-soft); color: var(--lv2); }
.lv-critical.lv { background: var(--lv3-soft); color: var(--lv3); }
#stTop .bar-l { font-family: ui-monospace, monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; direction: ltr; }

/* the switches page: one row per feature, its state, and an in-page confirmation */
.sw-list { display: flex; flex-direction: column; gap: 10px; }
.sw-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.sw-title { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sw-meta { color: var(--ink-60); font-size: 13px; }
.sw-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sw-pill { border-radius: 999px; padding: 1px 10px; font-size: 12px; font-weight: 600; }
.sw-pill.on { background: var(--accent-soft); color: var(--accent); }
.sw-pill.off { background: var(--hover); color: var(--ink-60); }
.sw-pill.pilot { background: var(--warm-soft); color: var(--warm); }
.sw-confirm { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--warm-soft); border-radius: 8px; padding: 10px 12px; }
.sw-confirm p { margin: 0; flex: 1 1 260px; }
.pilot-item { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 12px; }
@media (max-width: 640px) { .sw-row { grid-template-columns: 1fr; } .sw-acts { justify-content: flex-start; } }

/* رقم نسخة اللوحة ورقم نسخة التطبيق بجانبه */
.ver { font-size: 12px; color: var(--ink-60); border: 1px solid var(--line, rgba(0, 0, 0, .12)); border-radius: 999px; padding: 2px 9px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* التحديثات: نسخة في كل صف، والحالية معلَّمة */
.updates { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.update { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.update.current { border-color: var(--ink-60); }
.update-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.update p { margin: 6px 0 0; line-height: 1.7; }
.pill-tag { font-size: 11.5px; border-radius: 999px; padding: 1px 8px; background: var(--ink); color: var(--card); }
/* the updates entry in the sidebar foot carries the version under its name when the line is short */
.side-foot .tab[data-tab="updates"] { flex-wrap: wrap; white-space: normal; min-height: 40px; row-gap: 2px; }
.side-foot .tab[data-tab="updates"] .ver { margin-inline-start: 25px; }

/* المظهر واللغة: ثلاثة أزرار صغيرة (فاتح، داكن، حسب الجهاز) وزر اللغة */
.prefs { display: inline-flex; align-items: center; gap: 6px; }
.gate-brand .prefs { margin-inline-start: auto; }
.seg.mini button { min-height: 30px; padding: 4px 8px; }
.seg.mini button[aria-pressed="true"] { background: var(--hover); color: var(--brand-teal); }
.lang-btn { min-width: 74px; }
@media (max-width: 860px) { .prefs { order: 3; } }

/* المراقبة: ما يجب أن تفعله، كل بند بدرجته مكتوبة (لا لون وحده) ثم نصّه ثم فعله */
.dash .c-all { grid-column: 1 / -1; }
.dash .c-half { grid-column: span 6; }
.todo { display: flex; flex-direction: column; }
.todo .empty { padding: 24px; }
.todo-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 48px; padding: 8px 14px; border-bottom: 1px solid var(--line-soft); }
.todo-row:last-child { border-bottom: 0; }
.todo-txt { display: flex; flex-direction: column; min-width: 0; }
.todo-txt b { font-weight: 600; }
.todo-txt .muted { overflow-wrap: anywhere; }
.todo-lv { justify-self: start; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.lv-crit .todo-lv { background: var(--danger-soft); color: var(--danger); }
.lv-warn .todo-lv { background: var(--lv2-soft); color: var(--lv2); }
/* the monitor report is older than six hours (admin.js STALE_H): its age is said in amber */
#monAt.mon-stale { color: var(--lv2); font-weight: 600; }
.lv-info .todo-lv { background: var(--hover); color: var(--ink-60); }
.kv { display: flex; flex-direction: column; }
.kv .empty { padding: 20px; }
.kv-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 36px; padding: 6px 14px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.kv-row:last-child { border-bottom: 0; }
.kv-row span { min-width: 0; overflow-wrap: anywhere; }
.kv-row b { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kv-row.off b { color: var(--danger); }
.kv-row a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1180px) { .dash .c-half { grid-column: 1 / -1; } }
@media (max-width: 860px) { .todo-row { grid-template-columns: minmax(0, 1fr) auto; } .todo-lv { grid-column: 1 / -1; } }

/* خطوات يجب إكمالها: الرقم أولًا ليُنسخ، ثم البند وخطوته التالية، ثم المجال ومن ينفّذ */
.mon-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.mon-head p { flex: 1 1 320px; margin-top: 0; }
.mon-head .btn { flex: none; }
.bl-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; padding: 8px 14px 4px; }
.bl-tools .chips { margin: 0; }
.bl-tools p { margin: 0; }
.bl { display: flex; flex-direction: column; }
.bl .empty { padding: 24px; }
.bl-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 96px; gap: 12px; align-items: center; min-height: 48px; padding: 8px 14px; border-top: 1px solid var(--line-soft); }
.bl-id { font: 600 13px/1 ui-monospace, monospace; user-select: all; }
.bl-txt { display: flex; flex-direction: column; min-width: 0; }
.bl-txt b { font-weight: 600; }
.bl-txt .muted { overflow-wrap: anywhere; }
.bl-src { font-size: 11.5px; color: var(--ink-40); overflow-wrap: anywhere; }
.bl-owner { font-size: 12.5px; color: var(--ink-60); text-align: end; }
@media (max-width: 860px) { .bl-row { grid-template-columns: 56px minmax(0, 1fr); } .bl-row .tag, .bl-owner { grid-column: 2; justify-self: start; text-align: start; } }

/* الحركة (admin/motion.js، أرقام «حركة بالك» 2026-10-13): لا تغيّر لونًا ولا مقاسًا ولا مكانًا.
   الضغط: يصغر الزر قليلًا خلال 160ms بمنحنى يبدأ سريعًا. نستعمل خاصية scale وحدها لا transform،
   فلا تمسّ ما ضبطه هذا الملف بـtransform (زر إغلاق التنبيه، الإشعار). */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }
.btn { transition: background 0.15s, filter 0.15s, scale 160ms var(--ease-out); }
.pill, .chip, .tab, .side-item, .seg button, .dots, .x, .text { transition: background-color 0.15s, color 0.15s, scale 160ms var(--ease-out); }
.btn:active:not(:disabled), .pill:active, .chip:active, .side-item:active, .seg button:active { scale: 0.97; }
.tab:active { scale: 0.98; }
.dots:active, .x:active, .text:active { scale: 0.92; }
/* «أنت هنا» في الشريط الجانبي: الأرضية الرمادية نفسها، تنزلق إلى القسم المختار بدل أن تقفز */
.tabs { position: relative; }
.tabs .tab { position: relative; z-index: 1; }
.tab-glide { position: absolute; top: 0; left: 0; z-index: 0; border-radius: 6px; background: var(--hover); pointer-events: none; }
.tabs.has-glide .tab.on { background: transparent; }
.tabs.has-glide .tab.on:hover { background: transparent; }
/* حركة أقل في الجهاز: لون وشفافية فقط، لا تصغير */
@media (prefers-reduced-motion: reduce) { .btn:active, .pill:active, .chip:active, .side-item:active, .seg button:active, .tab:active, .dots:active, .x:active, .text:active { scale: none; } }

/* subscription usage (B-80): one meter per limit, amber from 80%, red at the limit */
.usage { margin: 6px 0 4px; }
.usage .meter { padding: 4px 0; }
.meter-bar.near i { background: var(--lv2); }
.meter-bar.full i { background: var(--danger); }

/* invoices (B-82): the printable document, and printing only it */
.invoice-doc { border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin: 10px 0 16px; background: var(--card); }
.invoice-doc h3 { margin: 0 0 4px; }
.invoice-doc .inv-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.invoice-doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13.5px; }
.invoice-doc th, .invoice-doc td { border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: start; }
.invoice-doc td.num, .invoice-doc th.num { text-align: end; font-variant-numeric: tabular-nums; }
.invoice-doc .inv-total td { font-weight: 700; }
.invoice-doc .inv-warn { color: var(--danger); font-weight: 600; margin: 8px 0 0; }
@media print {
  body * { visibility: hidden; }
  /* the invoice alone: the console's (#bvDoc) and the accountant's door (#vDoc) share the class */
  .invoice-doc, .invoice-doc * { visibility: visible; }
  .invoice-doc { position: absolute; inset: 0; border: 0; margin: 0; }
}

/* المراقبة: حالة بالك الآن، بلاطة لكل جهة، درجتها مكتوبة وملوّنة معًا، والضغط يقفز إلى بطاقتها */
.mon-health { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; padding: 0 12px 12px; }
.hl { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; padding: 10px 12px; border: 1px solid var(--line); border-inline-start: 4px solid var(--ink-40); border-radius: var(--r-ctl); background: var(--card); color: var(--ink); cursor: pointer; font: inherit; min-width: 0; }
.hl:hover { background: var(--hover); }
.hl b { font-weight: 600; }
.hl-lv { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 0 8px; background: var(--hover); color: var(--ink-60); }
.hl-line { font-size: 12.5px; color: var(--ink-60); overflow-wrap: anywhere; }
.hl-bad { border-inline-start-color: var(--danger); }
.hl-bad .hl-lv { background: var(--danger-soft); color: var(--danger); }
.hl-watch { border-inline-start-color: var(--lv2); }
.hl-watch .hl-lv { background: var(--lv2-soft); color: var(--lv2); }
.hl-ok { border-inline-start-color: var(--accent); }
.hl-ok .hl-lv { background: var(--accent-soft); color: var(--accent); }
.mon-note { margin: 0; padding: 0 14px 8px; max-width: 80ch; }
.mon-sub { font-size: 13px; font-weight: 600; margin: 12px 14px 4px; }
.bl-tools .mon-sub { margin: 0; }

/* الأمن من الخارج: المفتوح أولًا، والمغلق مطويّ */
.pr-id { font: 600 12.5px/1 ui-monospace, monospace; }
.pr-st { font-weight: 600; }
.pr-fail .pr-st { color: var(--danger); }
.pr-skip .pr-st, .pr-note .pr-st { color: var(--lv2); }
.pr-pass .pr-st { color: var(--accent); }
.pr-sum { background: var(--frame); font-weight: 600; }
.pr-more summary { cursor: pointer; padding: 8px 14px; color: var(--ink-60); font-size: 13px; border-top: 1px solid var(--line-soft); }

/* معيار الإطلاق: شريط بالحالات، ثم الجهات (الضغط يصفّي)، ثم الفجوات المرتّبة، ثم ما ليس مغطّى */
.std-bar { padding: 4px 14px 8px; }
.std-track { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); }
.std-track i { display: block; height: 100%; width: 0; }
.std-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 12.5px; color: var(--ink-60); }
.std-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }
.std-legend b { color: var(--ink); font-variant-numeric: tabular-nums; }
.st-covered { background: var(--accent); }
.st-partly { background: var(--lv1); }
.st-waiting { background: var(--chart-2); }
.st-missing { background: var(--danger); }
.st-tag.st-covered { background: var(--accent-soft); color: var(--accent); }
.st-tag.st-partly { background: var(--lv1-soft); color: var(--lv1); }
.st-tag.st-waiting { background: var(--hover); color: var(--ink); }
.st-tag.st-missing { background: var(--danger-soft); color: var(--danger); }
.std-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; padding: 4px 14px 6px; }
.std-area { display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: start; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--card); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; min-width: 0; }
.std-area:hover { background: var(--hover); }
.std-area span { font-size: 12px; color: var(--ink-60); }
.std-area.has-missing { border-color: var(--danger); }
.std-on { padding: 6px 14px; font-weight: 600; border-top: 1px solid var(--line-soft); }
.gap-row .bl-id { color: var(--danger); }
@media (max-width: 860px) { .mon-health { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.gap-row { grid-template-columns: 64px minmax(0, 1fr) 160px; }
.mon-sum { padding: 12px 12px 8px !important; margin: 0; }