/* R-84 P0: the admin app's layout. Colors, radii and fonts are sahab-final.css tokens only; sizes are the values of the
   design system's existing components (the users' app sign-in: .h1, .p, .alert, .err; the F15 side column: 300px). No new
   color and no new scale (S-56 §3). Every block below is a deviation candidate for the designer (S-57: ن11, ن13). */
html, body { min-height: 100%; }
body.sb { margin: 0; background: var(--sb-bg); color: var(--sb-text); font-family: var(--sb-font-ui); }
button { font-family: inherit; }
a { color: inherit; }
[aria-disabled="true"] { opacity: .5; cursor: default; }

/* the sign-in (ن13) */
.adm-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.adm-card { width: 100%; max-width: 390px; display: flex; flex-direction: column; gap: 16px; }
.adm-h { font-family: var(--sb-font-display); font-weight: 500; font-size: 30px; line-height: 1.25; margin: 0; }
.adm-p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--sb-muted); }
.adm-note { margin: 0; padding: 12px 14px; border-radius: var(--sb-r-md); background: var(--sb-native); box-shadow: inset 0 0 0 1px var(--sb-border-strong); font-size: 14px; }
.adm-err { margin: 0; padding: 12px 14px; border-radius: var(--sb-r-md); background: var(--sb-danger-soft); color: var(--sb-text); font-size: 14px; }

/* the shell (ن11): phone first, one column; from 1024px the side column of F15 */
.adm-shell { min-height: 100vh; display: flex; flex-direction: column; }
.adm-nav { display: flex; flex-direction: column; gap: 12px; padding: 16px; box-shadow: 0 1px 0 var(--sb-border); }
.adm-seal { padding: 4px 6px; }
.adm-nav .gi { text-decoration: none; }
.adm-on, .adm-nav .gi.adm-on { box-shadow: inset 0 0 0 2px var(--sb-primary); border-radius: 18px; }
.adm-out { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }
.adm-main { flex: 1; min-width: 0; padding: 0 16px 24px; }
.adm-main > .adm-note { margin-top: 12px; }
.adm-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.adm-title { margin: 0; font-size: 16px; font-weight: 600; }
.adm-bar .btn { min-height: 44px; }
.adm-left { font-size: 12.5px; color: var(--sb-muted); }
@media (min-width: 1024px) {
  .adm-shell { flex-direction: row; }
  .adm-nav { width: 300px; flex: none; min-height: 100vh; box-shadow: -1px 0 0 var(--sb-border); }
  .adm-main { padding: 0 32px 32px; max-width: 760px; }
}

/* R-84 P1: the places (A0, A2, A3, A4, A5, A7). Still the tokens only, and the existing components' own sizes; every block
   below is a deviation candidate for the designer (V-10): ن2 the dot's tones, ن6 the attention rows, ن8 «بحسب العقدة»,
   ن9 the summary cards, ن10 the changes bar, ن11 the side column's places, ن12 the key/value rows, ن14 «صدّر JSON». */
.adm-nav .grp + .glbl { margin-top: 6px; }
.adm-navfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.adm-navfoot .btn { min-height: 44px; }
.adm-bar .adm-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-acts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.adm-back { padding: 0 6px; min-width: 44px; min-height: 44px; }
/* the phone: the places as a list on A0 only; elsewhere the back link and the title (S-55 §3.2 (1)) */
@media (max-width: 1023px) {
  .adm-shell:not(.adm-home) .adm-nav { display: none; }
  /* A0 on the phone: what needs attention first, then the places, this device and the way out */
  .adm-home .adm-main { order: 1; }
  .adm-home .adm-nav { order: 2; box-shadow: 0 -1px 0 var(--sb-border); }
}
@media (min-width: 1024px) {
  .adm-phone-only { display: none; }
  .adm-main { max-width: 860px; }
}
.adm-content { padding-bottom: 24px; }
.adm-view .glbl:first-child { margin-top: 6px; }
.adm-sec + .adm-sec { margin-top: 4px; }
/* rows (D10): the whole row is the target; the second line one fact */
a.gi { text-decoration: none; color: inherit; }
.adm-row .gt b { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.adm-row .gt b > bdi, .adm-conv bdi { overflow-wrap: anywhere; }
.adm-row .gt > span { display: block; overflow-wrap: anywhere; }
.adm-row .gt > span .conn { vertical-align: middle; }
.adm-conv { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.adm-when { margin-inline-start: auto; font-size: 12.5px; font-weight: 400; color: var(--sb-muted); font-family: var(--sb-font-mono); direction: ltr; unicode-bidi: isolate; }
.adm-detail { font-size: 12px; color: var(--sb-faint); overflow-wrap: anywhere; white-space: normal; }
/* ن12: key and value on one row, wrapping on the phone */
.adm-kv { justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.adm-k { font-size: 12.5px; color: var(--sb-muted); }
.adm-v { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; font-size: 14px; text-align: end; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.adm-v .meter { width: 120px; flex: none; }
.adm-note-i { font-size: 12px; color: var(--sb-muted); }
.adm-in { color: var(--sb-primary); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.adm-foot { margin: 14px 6px 0; font-size: 12.5px; color: var(--sb-muted); }
/* ن8: what a node says about itself */
.adm-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-inline-start: 8px; border-radius: var(--sb-r-xs); background: var(--sb-surface-2); color: var(--sb-muted); font-size: 11px; font-weight: 700; vertical-align: middle; }
/* ن2: the dot's tones besides the system's green and hollow */
.conn.adm-warn i { background: var(--sb-warning); }
.conn.adm-bad i { background: var(--sb-danger); }
.conn.off.adm-unk i { box-shadow: inset 0 0 0 1.5px var(--sb-faint); }
.conn { white-space: nowrap; }
/* ن9: the summary cards */
.adm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.adm-card-s { display: flex; flex-direction: column; gap: 6px; min-height: 88px; padding: 14px 16px; border-radius: 18px; background: var(--sb-surface); box-shadow: inset 0 0 0 1px var(--sb-border); text-decoration: none; color: inherit; }
.adm-card-t { font-size: 15px; font-weight: 600; }
.adm-card-l { font-size: 12.5px; color: var(--sb-muted); line-height: 1.5; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .adm-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ن6: the attention rows sit on the warning's soft tone */
.adm-att { box-shadow: inset 0 0 0 1px var(--sb-warning); }
/* the active filters (D7: .chip is a mark only) */
.adm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 6px 0; }
/* the filter sheet: the system's .sheet, fixed to the window */
.adm-sheetwrap { position: fixed; inset: 0; z-index: 40; }
.adm-sheetwrap .ov { position: fixed; }
.adm-sheet { position: fixed; max-width: 560px; margin: 0 auto; }
.adm-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.adm-sheet-h b { font-size: 16px; font-weight: 600; }
.adm-facet { display: flex; flex-direction: column; gap: 8px; }
.adm-sheet .seg button { min-height: 44px; }
.adm-sheet .btn-t, .adm-acts .btn { min-height: 44px; }
.adm-changes { font-variant-numeric: tabular-nums; }
/* S-57 §7 (6): the live view stopped, said quietly under the header (it comes back on its own) */
.adm-livedown { margin: 0 0 8px; font-size: 12.5px; color: var(--sb-muted); }
/* the meter's width, in steps of 5% (no inline style: the page's CSP has none) */
.adm-w0{width:0%} .adm-w5{width:5%} .adm-w10{width:10%} .adm-w15{width:15%} .adm-w20{width:20%} .adm-w25{width:25%} .adm-w30{width:30%} .adm-w35{width:35%} .adm-w40{width:40%} .adm-w45{width:45%} .adm-w50{width:50%} .adm-w55{width:55%} .adm-w60{width:60%} .adm-w65{width:65%} .adm-w70{width:70%} .adm-w75{width:75%} .adm-w80{width:80%} .adm-w85{width:85%} .adm-w90{width:90%} .adm-w95{width:95%} .adm-w100{width:100%}
@media (prefers-reduced-motion: reduce) { .adm-sheet { transition: none; } }

/* R-84 P2a: A1, A6 and the charts. The tokens only, and the existing components' own sizes; each block below is a
   deviation candidate for the designer (V-11): ن1 the small chart (its line, its gaps «لا تقرير», its dashed threshold,
   its ends «قبل 24 س» / «الآن»), the period switch on .seg, ن3 the event row («× 4»), and the «أقدم» / «الأحدث» paging. */
.adm-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
@media (min-width: 1024px) { .adm-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm-range { margin: 0 2px; }
.adm-range button { min-height: 44px; }
.adm-chart { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 18px; background: var(--sb-surface); box-shadow: inset 0 0 0 1px var(--sb-border); min-width: 0; }
.adm-chart-wait { min-height: 120px; }
.adm-chart-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.adm-chart-v { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.adm-plot { position: relative; height: 64px; }
.adm-spark { display: block; width: 100%; height: 64px; overflow: visible; }
.adm-spark .adm-line { fill: none; stroke: var(--sb-primary); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.adm-spark .adm-pt { fill: var(--sb-primary); }
.adm-spark .adm-thr { stroke: var(--sb-warning); stroke-width: 1; }
.adm-spark .adm-gap { fill: var(--sb-surface-2); }
.adm-gaplbl { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 11px; font-weight: 700; color: var(--sb-muted); white-space: nowrap; pointer-events: none; }
.adm-chart-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; color: var(--sb-muted); }
.adm-gapnote { display: inline-flex; align-items: center; gap: 6px; }
.adm-gapnote i { display: inline-block; width: 12px; height: 10px; border-radius: var(--sb-r-xs); background: var(--sb-surface-2); box-shadow: inset 0 0 0 1px var(--sb-border-strong); }
/* the gap label's place, in steps of 5% of the chart's width (no inline style: the CSP has none) */
.adm-gx0{left:0%} .adm-gx5{left:5%} .adm-gx10{left:10%} .adm-gx15{left:15%} .adm-gx20{left:20%} .adm-gx25{left:25%} .adm-gx30{left:30%} .adm-gx35{left:35%} .adm-gx40{left:40%} .adm-gx45{left:45%} .adm-gx50{left:50%} .adm-gx55{left:55%} .adm-gx60{left:60%} .adm-gx65{left:65%} .adm-gx70{left:70%} .adm-gx75{left:75%} .adm-gx80{left:80%} .adm-gx85{left:85%} .adm-gx90{left:90%} .adm-gx95{left:95%} .adm-gx100{left:100%}
/* ن3: the event row */
.adm-ev .gt b { font-weight: 600; }
.adm-ev .adm-ev-when { display: block; margin: 0; text-align: end; }
.adm-times { font-size: 12.5px; font-weight: 700; color: var(--sb-muted); font-variant-numeric: tabular-nums; }
.adm-more { display: flex; justify-content: space-between; gap: 12px; margin: 12px 2px 0; }
.adm-more .btn { min-height: 44px; }
.adm-cards .adm-card-s:nth-child(5) { grid-column: 1 / -1; }
@media (min-width: 1024px) { .adm-cards .adm-card-s:nth-child(5) { grid-column: auto; } .adm-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* R-84 P2b: a node's own word (V-12). The tokens only: the detail's two tabs «نظرة» / «لماذا» on .seg (44px, like the
   period switch), the shortened image digest (its whole value in its title), and the decision row («لماذا») on .gi rows. */
.adm-tabs { margin: 0 2px 10px; }
.adm-row .gt > span + span { margin-top: 2px; }