:root {
  --bg: #f4f6f9; --surface: #fff; --surface-2: #f8fafc; --border: #e2e8f0;
  --text: #0f172a; --muted: #64748b; --primary: #1d4ed8; --primary-weak: #dbeafe;
  --ok: #15803d; --ok-weak: #dcfce7; --warn: #b45309; --warn-weak: #fef3c7;
  --bad: #b91c1c; --bad-weak: #fee2e2; --info: #0369a1; --info-weak: #e0f2fe;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --radius: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220; --surface: #111a2e; --surface-2: #0f172a; --border: #1f2a44;
    --text: #e2e8f0; --muted: #94a3b8; --primary: #60a5fa; --primary-weak: #1e3a8a55;
    --ok: #4ade80; --ok-weak: #14532d66; --warn: #fbbf24; --warn-weak: #78350f66;
    --bad: #f87171; --bad-weak: #7f1d1d66; --info: #38bdf8; --info-weak: #0c4a6e66;
    --shadow: none; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.5 "Cairo", system-ui, sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.grow { flex: 1; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* top bar */
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
.brand { font-weight: 700; font-size: 17px; }
.tabs { display: flex; gap: 4px; }
.tabs a { white-space: nowrap; padding: 6px 14px; border-radius: 8px; text-decoration: none; color: var(--muted); font-weight: 600; }
.tabs a.active { background: var(--primary-weak); color: var(--primary); }
.top-actions { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }

main { padding: 16px 20px 40px; max-width: 1500px; margin: 0 auto; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.status { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 12px; background: var(--info-weak); color: var(--info); }
.status.err { background: var(--bad-weak); color: var(--bad); }

.btn { border: 1px solid var(--border); background: var(--surface); padding: 6px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .6; cursor: wait; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.kpi .lbl { color: var(--muted); font-size: 12px; }
.kpi .val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi .sub { color: var(--muted); font-size: 12px; }
.kpi.bad .val { color: var(--bad); } .kpi.ok .val { color: var(--ok); } .kpi.warn .val { color: var(--warn); }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; margin-bottom: 12px; }
.filters input[type=search] { flex: 1 1 260px; min-width: 200px; }
.filters input, .filters select, .field input, .field select, .field textarea {
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 6px 10px; min-height: 34px; }
.inline { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.chk input { min-height: auto; }

/* tables */
.table-card { overflow: hidden; }
.table-wrap { overflow: auto; max-height: calc(100vh - 290px); }
table.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: right; vertical-align: middle; }
.grid th { position: sticky; top: 0; background: var(--surface-2); font-weight: 600; color: var(--muted); font-size: 12px; cursor: pointer; user-select: none; white-space: nowrap; z-index: 1; }
.grid th.sorted::after { content: " ▾"; } .grid th.sorted.asc::after { content: " ▴"; }
.grid tbody tr { cursor: pointer; }
.grid tbody tr:hover { background: var(--surface-2); }
.grid tbody tr.ro { cursor: default; }
.grid td .sub { display: block; color: var(--muted); font-size: 11px; }
.grid td.wrap { max-width: 260px; white-space: normal; }
.pager { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 12px; color: var(--muted); }
.pager .btns { display: flex; gap: 6px; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap; background: var(--surface-2); border: 1px solid var(--border); }
.badge.ok { background: var(--ok-weak); color: var(--ok); border-color: transparent; }
.badge.bad { background: var(--bad-weak); color: var(--bad); border-color: transparent; }
.badge.warn { background: var(--warn-weak); color: var(--warn); border-color: transparent; }
.badge.info { background: var(--info-weak); color: var(--info); border-color: transparent; }

/* charts */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 12px; margin-bottom: 12px; }
.chart-card { padding: 12px 14px; }
.chart-card h3 { margin: 0 0 8px; font-size: 14px; }
.chart-box { position: relative; height: 240px; }
.chart-box.tall { height: 300px; }

/* customer detail */
.detail-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.detail-head h2 { margin: 0; font-size: 20px; }
.section-title { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.section-title h3 { margin: 0; font-size: 15px; }

/* dialog */
.dlg { border: none; border-radius: 14px; padding: 0; width: min(960px, calc(100vw - 24px)); max-height: calc(100vh - 24px);
  background: var(--surface); color: var(--text); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.dlg.wide { width: min(1200px, calc(100vw - 24px)); }
.paste-box { width: 100%; min-height: 120px; border: 2px dashed var(--border); border-radius: 10px; padding: 10px; background: var(--surface-2);
  font: 12px/1.5 Consolas, monospace; direction: rtl; white-space: pre; resize: vertical; }
.paste-box:focus { outline: none; border-color: var(--primary); }
.date-fmt { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.date-fmt select { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 4px 8px; }
#impMap { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.grid tr.row-bad td { background: var(--bad-weak); }
.grid tr.row-warn td { background: var(--warn-weak); }
#impPreview td { white-space: nowrap; }
.grid td.errs { color: var(--bad); font-size: 12px; white-space: normal; min-width: 180px; }
.dlg.narrow { width: min(520px, calc(100vw - 24px)); }
.dlg::backdrop { background: rgba(15,23,42,.45); }
.dlg form { display: flex; flex-direction: column; max-height: calc(100vh - 24px); }
.dlg-head, .dlg-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.dlg-foot { border-bottom: none; border-top: 1px solid var(--border); }
.dlg-head h2 { margin: 0; font-size: 17px; flex: 1; }
.dlg-body { padding: 14px 18px; overflow: auto; }
.x { border: none; background: none; font-size: 18px; cursor: pointer; color: var(--muted); }
.fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px 12px; margin: 0 0 12px; }
.fieldset legend { padding: 0 6px; font-weight: 700; font-size: 13px; color: var(--primary); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 12px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-size: 12px; color: var(--muted); }
.field.wide { grid-column: 1 / -1; }
.field textarea { min-height: 60px; resize: vertical; }
.field input[readonly] { background: var(--surface-2); color: var(--muted); }
.field.req > span::after { content: " *"; color: var(--bad); }
.field.invalid input { border-color: var(--bad); }
#formMsg.err, #sMsg.err { color: var(--bad); } #formMsg.warn { color: var(--warn); } #sMsg.ok, #sWho.ok { color: var(--ok); }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #0f172a; color: #fff; padding: 10px 18px; border-radius: 10px; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,.25); }

/* التحديد والتعديل الجماعي */
.grid th.selc, .grid td.selc { width: 34px; padding-inline: 8px 4px; cursor: default; text-align: center; }
.selc input { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
.grid tbody tr.selected td { background: var(--primary-weak); }
.sel-bar { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 10px;
  width: min(760px, calc(100vw - 24px)); padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--primary);
  box-shadow: 0 10px 30px rgba(15,23,42,.25); }
.bulk-row { display: grid; grid-template-columns: 200px 1fr 170px 34px; gap: 8px; align-items: center; margin-bottom: 8px; }
.bulk-row select, .bulk-row input { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 6px 10px; min-height: 34px; width: 100%; }
.bulk-row .mode.hidden-keep { visibility: hidden; }
.chg-old { color: var(--muted); text-decoration: line-through; }
.chg-new { color: var(--ok); font-weight: 600; }
/* فلتر الشيت */
.chips { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 999px; background: var(--primary-weak); color: var(--primary); font-size: 12px; cursor: pointer; border: none; }
.chip b { font-weight: 700; }
.chip .rm { border: none; background: none; color: inherit; cursor: pointer; font-size: 13px; padding: 0 2px; }
.cf-tools { display: flex; gap: 6px; margin: 10px 0 6px; }
.cf-tools input { flex: 1; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 6px 10px; }
.cf-list { max-height: 340px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px 0; }
.cf-list label { display: flex; gap: 8px; align-items: center; padding: 4px 10px; cursor: pointer; }
.cf-list label:hover { background: var(--surface-2); }
.cf-list .cnt { margin-inline-start: auto; color: var(--muted); font-size: 12px; }
.field select { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 6px 10px; min-height: 34px; }
/* Pivot */
.chips-inline { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tog { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); cursor: pointer; font-size: 13px; user-select: none; }
.tog input { margin: 0; }
.tog.on { background: var(--primary-weak); border-color: transparent; color: var(--primary); font-weight: 600; }
.tog .cnt { color: var(--muted); font-size: 11px; font-weight: 400; }
.pivot-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.pivot-head h3 { margin: 0; font-size: 14px; }
.pivot-wrap { max-height: calc(100vh - 300px); }
.pivot th, .pivot td { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; padding: 6px 8px; }
.pivot thead th { cursor: default; }
.pivot thead tr:nth-child(2) th { top: 33px; }
.pivot th.rowh, .pivot td.rowh { position: sticky; right: 0; z-index: 2; background: var(--surface); text-align: right; font-weight: 700; min-width: 140px; }
.pivot thead th.rowh { z-index: 3; background: var(--surface-2); }
.pivot td.v { cursor: pointer; }
.pivot td.v:hover { outline: 2px solid var(--primary); outline-offset: -2px; }
.pivot th.past { color: var(--bad); }
.pivot th.cur, .pivot td.cur { background: var(--warn-weak); }
.pivot .yt { background: var(--surface-2); font-weight: 700; }
.pivot .gt { background: var(--primary-weak); font-weight: 700; color: var(--primary); }
/* صف الإجمالي تحت الجدول — ثابت تحت وإنت بتسكرول */
.grid tfoot .total-row td { position: sticky; bottom: 0; background: var(--surface-2); font-weight: 700; border-top: 2px solid var(--border); z-index: 1; }
.pivot tfoot td { position: sticky; bottom: 0; background: var(--surface-2); font-weight: 700; border-top: 2px solid var(--border); }
.pivot tfoot td.rowh { background: var(--surface-2); z-index: 3; }
.pivot td.active { outline: 2px solid var(--primary); outline-offset: -2px; background: var(--primary-weak); }
/* مشاركة الجدول */
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.share-actions .btn { flex: 1 1 160px; min-height: 40px; }
.btn.share-wa { background: #25d366; border-color: #25d366; color: #fff; font-weight: 600; }
.share-preview { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.share-img { border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); max-height: 420px; overflow: auto; min-height: 120px; }
.share-img img { display: block; max-width: 100%; height: auto; }
.share-img.loading::after { content: "جاري تجهيز الصورة…"; display: block; padding: 40px; text-align: center; color: var(--muted); }
.share-text { width: 100%; min-height: 200px; max-height: 420px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--surface);
  font: 12px/1.6 "Cairo", system-ui, sans-serif; resize: vertical; }
@media (max-width: 720px) { .share-preview { grid-template-columns: 1fr; } .share-actions .btn { flex-basis: calc(50% - 8px); } }
@media print { #shareDlg { display: none; } }
/* الاتصال */
.status .btn { margin-inline-start: 8px; padding: 2px 12px; }
.warn-text { color: var(--warn); }
body.offline .topbar { border-bottom: 3px solid var(--bad); }
body.offline .brand::after { content: " • 📴 مفيش نت"; color: var(--bad); font-size: 12px; font-weight: 600; }
.print-only { display: none; }
.print-title h2 { margin: 0 0 4px; font-size: 18px; }
.print-title { margin-bottom: 12px; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: #fff; color: #000; font-size: 11px; }
  .topbar, .no-print, .filters, #status, .toast, dialog, #supKpis, .sel-bar, .selc { display: none !important; }
  .grid tbody tr.selected td { background: none; }
  .print-only { display: block; }
  main { padding: 0; max-width: none; }
  .card { border: none; box-shadow: none; }
  .table-wrap { max-height: none !important; overflow: visible !important; }
  .grid th { position: static; background: #eee !important; color: #000; }
  .grid th, .grid td { padding: 4px 6px; border-bottom: 1px solid #ccc; }
  .grid tr { break-inside: avoid; }
  .pivot th, .pivot td, .pivot tfoot td { position: static !important; }
  .pivot td.past, .pivot td.cur { background: none; }
  .badge { background: none !important; border: none; padding: 0; color: #000 !important; }
  .pager { justify-content: space-between; color: #000; }
}
/* ===== التجاوب مع الشاشات ===== */

/* تابلت وأصغر: التبويبات في سطر لوحدها وتتحرك بالسحب */
@media (max-width: 1024px) {
  .topbar { gap: 8px 12px; padding: 8px 14px 0; }
  .brand { order: 1; }
  .top-actions { order: 2; }
  .tabs { order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  main { padding: 14px 14px 40px; }
  .pivot-wrap { max-height: 70vh; }
  .grid th, .grid td { padding: 6px 8px; }
  .grid td { font-size: 13px; }
  .grid td.wrap { max-width: 200px; }
}

/* شاشة قصيرة (موبايل بالعرض): الجداول بطولها والشريط العلوي مش ثابت */
@media (max-height: 560px) {
  .topbar { position: static; }
  .table-wrap, .pivot-wrap { max-height: none; }
}

/* شاشات اللمس: أهداف ضغط أكبر */
@media (pointer: coarse) {
  .btn { min-height: 38px; }
  .tabs a { padding: 8px 14px; }
  .selc input, .chk input, .tog input, .cf-list input { width: 20px; height: 20px; }
}

/* موبايل */
@media screen and (max-width: 720px) {
  body { font-size: 14px; }
  .brand { font-size: 16px; }
  .top-actions .small, .top-actions .lbl { display: none; }
  .top-actions .btn { padding: 6px 10px; font-size: 16px; }
  main { padding: 12px 10px 110px; }

  /* أقل من 16px بيخلّي iPhone يعمل زووم لما تدوس على الخانة */
  input, select, textarea { font-size: 16px !important; }

  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi .val { font-size: 16px; overflow-wrap: anywhere; }

  /* الفلاتر: عمودين، والبحث بعرض الشاشة */
  .filters { padding: 10px; gap: 8px; }
  .filters > * { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .filters input[type=search], .filters > h3, .filters > .chips, .filters > .chips-inline, .filters > .section-title { flex-basis: 100%; min-width: 0; }
  .filters > .grow { display: none; }
  .filters .inline { justify-content: space-between; }
  .filters .inline input:not([type=checkbox]), .filters .inline select { flex: 1; min-width: 0; }
  .filters .btn { flex: 1 1 auto; }

  .cols { grid-template-columns: 1fr; }
  .chart-box { height: 220px; }
  .chart-box.tall { height: 260px; }
  .detail-head h2 { font-size: 17px; }
  .detail-head .btn { flex: 1 1 auto; }
  .pager { flex-wrap: wrap; justify-content: center; }
  .table-wrap { max-height: none; }

  /* الجداول ككروت: كل صف كارت «العمود: القيمة» (data-label بيتحط من core.js) */
  .grid.cards, .grid.cards tbody { display: block; }
  .grid.cards thead { display: block; }
  .grid.cards thead tr { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
  .grid.cards thead th { position: static; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
  .grid.cards thead th.selc { width: auto; padding: 3px 10px; }
  .grid.cards thead th.selc::after { content: " تحديد الكل"; }
  .grid.cards tbody tr { display: block; position: relative; margin: 10px; padding: 6px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
  .grid.cards tbody tr:hover { background: var(--surface); }
  .grid.cards tbody tr.selected { background: var(--primary-weak); border-color: var(--primary); }
  .grid.cards tbody tr.selected td, .grid.cards tr.row-bad td, .grid.cards tr.row-warn td { background: transparent; }
  .grid.cards tbody td { display: block; position: relative; min-height: 26px; padding: 4px 12px; padding-inline-start: calc(36% + 12px);
    border: none; text-align: start; white-space: normal; max-width: none; overflow-wrap: anywhere; }
  .grid.cards tbody td::before { content: attr(data-label); position: absolute; inset-inline-start: 12px; top: 5px; width: 34%;
    color: var(--muted); font-size: 12px; line-height: 1.4; }
  .grid.cards tbody td:not([data-label]), .grid.cards tbody td[data-label=""] { padding-inline-start: 12px; }
  .grid.cards tbody td:not([data-label])::before, .grid.cards tbody td[data-label=""]::before { content: none; }
  .grid.cards tbody td:empty, .grid.cards tbody td[data-empty] { display: none; }
  .grid.cards tfoot, .grid.cards tfoot tr { display: block; }
  .grid.cards tfoot .total-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
  .grid.cards tfoot .total-row td { position: static; display: block; padding: 0; border: none; background: none; }
  .grid.cards tfoot .total-row td:empty { display: none; }
  .grid.cards tbody td.selc { position: absolute; top: 8px; inset-inline-end: 8px; width: auto; min-height: 0; padding: 0; z-index: 1; }
  .grid.cards tbody td:nth-child(2) { font-weight: 600; }

  /* Pivot يفضل جدول بيتحرك بالعرض */
  .pivot th, .pivot td { padding: 5px 6px; font-size: 12px; }
  .pivot th.rowh, .pivot td.rowh { min-width: 110px; max-width: 140px; white-space: normal; }

  /* النوافذ بملء الشاشة */
  .dlg, .dlg.wide, .dlg.narrow { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .dlg form { height: 100%; max-height: 100dvh; }
  .dlg-body { flex: 1; padding: 12px; }
  .dlg-head { padding: 10px 12px; }
  .dlg-head h2 { font-size: 15px; }
  .dlg-foot { flex-wrap: wrap; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .dlg-foot > span[id] { flex-basis: 100%; }
  .dlg-foot > .grow { display: none; }
  .dlg-foot .btn { flex: 1 1 auto; }
  .fgrid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fgrid .field:has(textarea) { grid-column: 1 / -1; }
  .bulk-row { grid-template-columns: 1fr auto; grid-template-areas: "col x" "val val" "mode mode"; padding-bottom: 8px; border-bottom: 1px dashed var(--border); }
  .bulk-row .col { grid-area: col; } .bulk-row .val { grid-area: val; } .bulk-row .mode { grid-area: mode; } .bulk-row .x { grid-area: x; }
  .bulk-row .mode.hidden-keep { display: none; }
  .paste-box { min-height: 140px; }

  /* شريط التحديد وفوقه التنبيهات */
  .sel-bar { flex-wrap: wrap; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 10px 12px; gap: 8px; }
  .sel-bar #selInfo { flex-basis: 100%; }
  .sel-bar #selInfo .muted, .sel-bar .grow { display: none; }
  .sel-bar .btn { flex: 1 1 auto; }
  .toast { max-width: calc(100vw - 24px); bottom: calc(16px + env(safe-area-inset-bottom)); text-align: center; }
}

/* موبايل صغير جداً */
@media screen and (max-width: 380px) {
  .fgrid { grid-template-columns: 1fr; }
  .kpi .val { font-size: 15px; }
}

/* مراجعة البيانات */
.rv-kpi { text-align: start; font: inherit; color: inherit; cursor: pointer; }
.rv-kpi:hover { border-color: var(--primary); }
.rv-group { padding: 12px 14px; margin-bottom: 12px; scroll-margin-top: 80px; }
.review-table tbody tr { cursor: pointer; }
.review-table tbody tr:hover { background: var(--primary-weak); }

/* ===== الدخول والصلاحيات ===== */
.who { white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); }
/* «مشاهدة»: أزرار الإضافة والتعديل مش بتظهر (والسيرفر بيرفض أصلاً) */
body.ro #addBtn, body.ro #importBtn, body.ro #wAdd, body.ro #wImport, body.ro #dAdd, body.ro #whFillBtn,
body.ro #saveBtn, body.ro #whSaveBtn, body.ro #dupBtn, body.ro #whDupBtn, body.ro #selEdit, body.ro #bulkSave, body.ro #impSave { display: none !important; }
#usersTable input:not([type=checkbox]), #usersTable select { width: 100%; min-width: 80px; }
#usersTable input[data-f=password] { width: 120px; min-width: 0; }
#usersTable tr.muted td { opacity: .65; }
.nowrap { white-space: nowrap; }
#userAddForm.user-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
#userAddForm.user-add h3 { grid-column: 1 / -1; margin: 0; font-size: 15px; }
body.locked main .view { display: none !important; }
.top-actions .who:not(.hidden) { display: inline-block; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }