/* Layout: sticky top bar + side rail (right in Arabic) + scrolling workspace of cards; one accent (signal orange) for action, semantic colours for state. */
:root {
  --bg: #f4f6f9; --surface: #ffffff; --surface2: #eef1f6; --sunk: #e7ebf2; --line: #dfe4ec; --line2: #eceff5;
  --fg: #0e1525; --fg2: #3c4657; --muted: #6b7587; --faint: #98a1b0;
  --accent: #e8590c; --accent-soft: #fde8db; --accent-fg: #ffffff; --blue: #0a6bd6; --blue-soft: #e1eefc;
  --ok: #138a4b; --ok-soft: #dcf3e6; --warn: #b45f06; --warn-soft: #fcefd8; --bad: #d32f2f; --bad-soft: #fbe2e2; --info-soft: #e6eefb;
  --c1: #e8590c; --c2: #0a6bd6; --c3: #7c4ddb; --c4: #0f9f8f; --c5: #c2410c; --c6: #64748b;
  --shadow: 0 1px 2px rgba(14, 21, 37, .06), 0 4px 16px rgba(14, 21, 37, .05);
  --radius: 12px; --radius-sm: 8px;
  --f-ui: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --f-num: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0e1525; --surface: #1c2333; --surface2: #232b3d; --sunk: #2b3245; --line: #2f3850; --line2: #262e41;
  --fg: #f5f9fc; --fg2: #c9d1dc; --muted: #9aa4b2; --faint: #6c768a;
  --accent: #ff7a2e; --accent-soft: #3a2518; --accent-fg: #0e1525; --blue: #4ca3ff; --blue-soft: #16304f;
  --ok: #3ccf86; --ok-soft: #133526; --warn: #f5a524; --warn-soft: #3a2c12; --bad: #ff6464; --bad-soft: #3d1c22; --info-soft: #1b2b45;
  --c1: #ff7a2e; --c2: #4ca3ff; --c3: #a78bfa; --c4: #2dd4bf; --c5: #fb923c; --c6: #94a3b8;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25); color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0e1525; --surface: #1c2333; --surface2: #232b3d; --sunk: #2b3245; --line: #2f3850; --line2: #262e41;
  --fg: #f5f9fc; --fg2: #c9d1dc; --muted: #9aa4b2; --faint: #6c768a;
  --accent: #ff7a2e; --accent-soft: #3a2518; --accent-fg: #0e1525; --blue: #4ca3ff; --blue-soft: #16304f;
  --ok: #3ccf86; --ok-soft: #133526; --warn: #f5a524; --warn-soft: #3a2c12; --bad: #ff6464; --bad-soft: #3d1c22; --info-soft: #1b2b45;
  --c1: #ff7a2e; --c2: #4ca3ff; --c3: #a78bfa; --c4: #2dd4bf; --c5: #fb923c; --c6: #94a3b8;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25); color-scheme: dark }

* { box-sizing: border-box }
html, body { background: var(--bg) }
body { color: var(--fg); font-family: var(--f-ui); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--surface) }
button, input, select { font: inherit; color: inherit }
a { color: var(--blue) }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px }
.num, td.n, .kpi .v, .mono { font-family: var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em }

/* ---------- shell ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); flex-wrap: wrap }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0 }
.brand .logo { width: 32px; height: 32px; border-radius: 9px; background: var(--accent); display: grid; place-items: center; color: var(--accent-fg); flex: none }
.brand b { font-size: 15px; font-weight: 700; display: block; line-height: 1.2 }
.brand small { color: var(--muted); font-size: 12px; display: block }
.top .sp { flex: 1 }
.status { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface2); font-size: 12.5px; color: var(--fg2); white-space: nowrap; cursor: pointer }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft) } .dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft) } .dot.bad { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft) }
.dot.load { background: var(--blue); animation: pulse 1.2s infinite }
@keyframes pulse { 50% { opacity: .35 } }
.ibtn { height: 34px; min-width: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600 }
.ibtn:hover { background: var(--surface2) }
.frame { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: calc(100vh - 56px) }
.side { background: var(--surface); border-inline-end: 1px solid var(--line); padding: 14px 10px; position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); align-self: start; height: calc(100vh - 56px - env(safe-area-inset-top, 0px)); overflow: auto }
.side .grp { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 14px 10px 6px; font-weight: 600 }
.side button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: var(--fg2); font-weight: 500; text-align: start }
.side button:hover { background: var(--surface2) }
.side button[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 700 }
.side button .badge { margin-inline-start: auto; font-family: var(--f-num); font-size: 11px; background: var(--bad); color: #fff; border-radius: 999px; padding: 0 7px; line-height: 18px }
.main { min-width: 0; padding-block: 18px 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 16px; align-content: start }

/* ---------- page head & filters ---------- */
.phead { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap }
.phead h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; text-wrap: balance }
.phead p { margin: 2px 0 0; color: var(--muted); max-width: 72ch }
.phead .sp { flex: 1 }
.meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 12.5px }
.meta b { color: var(--fg); font-weight: 600 }
.fbar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: grid; gap: 10px }
.frow { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end }
.fld { display: grid; gap: 4px; min-width: 0 }
.fld > label, .fld > .lb { font-size: 11.5px; color: var(--muted); font-weight: 600 }
.fld input[type=date], .fld input[type=number], .fld input[type=search], .fld select { height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 0 10px; min-width: 0 }
.fld input[type=search] { width: 220px; max-width: 100% }
.fld input[type=number] { width: 72px }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface2); flex-wrap: wrap }
.seg button { border: 0; background: transparent; padding: 0 11px; height: 32px; cursor: pointer; font-size: 13px; color: var(--fg2); white-space: nowrap }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); font-weight: 600 }
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chip { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; color: var(--fg2) }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700 }
.chip .c { font-family: var(--f-num); font-size: 11.5px; color: var(--muted) }
.toggle { display: inline-flex; align-items: center; gap: 8px; height: 34px; font-size: 13px; cursor: pointer }
.scope { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; border-top: 1px dashed var(--line); padding-top: 8px }
.scope b { color: var(--fg); font-weight: 600 }

/* ---------- cards & grid ---------- */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px }
.c12 { grid-column: span 12 } .c8 { grid-column: span 8 } .c7 { grid-column: span 7 } .c6 { grid-column: span 6 } .c5 { grid-column: span 5 } .c4 { grid-column: span 4 }
@media (max-width: 1180px) { .c8, .c7, .c6, .c5, .c4 { grid-column: span 12 } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; display: flex; flex-direction: column }
.card > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px 0 }
.card > header h2 { margin: 0; font-size: 15px; font-weight: 700 }
.card > header .sub { flex-basis: 100%; color: var(--muted); font-size: 12.5px; margin-top: -4px }
.card > header .sp { flex: 1 }
.card > .body { padding: 12px 16px 16px; min-width: 0 }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 4px; position: relative; overflow: hidden; box-shadow: var(--shadow) }
.kpi::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--line) }
.kpi.t-bad::before { background: var(--bad) } .kpi.t-warn::before { background: var(--warn) } .kpi.t-ok::before { background: var(--ok) } .kpi.t-acc::before { background: var(--accent) } .kpi.t-blue::before { background: var(--blue) }
.kpi .t { font-size: 12px; color: var(--muted); font-weight: 600 }
.kpi .v { font-size: 26px; font-weight: 600; line-height: 1.15 }
.kpi.t-bad .v { color: var(--bad) } .kpi.t-warn .v { color: var(--warn) }
.kpi .s { font-size: 12px; color: var(--muted) }
.kpi.click { cursor: pointer } .kpi.click:hover { border-color: var(--accent) }
.kpi.sm .v { font-size: 20px }
.chart { height: 300px; width: 100% } .chart.tall { height: 380px } .chart.short { height: 230px }
.lead { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; box-shadow: var(--shadow) }
.lead .ico { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none }
.lead p { margin: 0; line-height: 1.75; color: var(--fg2) } .lead b { color: var(--fg) }
.note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--fg2); background: var(--surface2); border-radius: 8px; padding: 8px 10px; margin-top: 10px; line-height: 1.6 }
.note.warn { background: var(--warn-soft) } .note.bad { background: var(--bad-soft) } .note svg { flex: none; margin-top: 2px }

/* ---------- tables ---------- */
.tw { overflow: auto; border: 1px solid var(--line); border-radius: 10px; max-height: 560px }
table { width: 100%; border-collapse: collapse; font-size: 13px }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line2); text-align: start; white-space: nowrap; vertical-align: middle }
th { position: sticky; top: 0; z-index: 1; background: var(--surface2); color: var(--muted); font-weight: 600; font-size: 12px; cursor: pointer; user-select: none }
th.n, td.n { text-align: end }
th .ar { color: var(--accent); margin-inline-start: 4px }
tbody tr:hover td { background: var(--surface2) }
tr.click { cursor: pointer }
td.nm { white-space: normal; min-width: 200px; font-weight: 500 }
td.wrap { white-space: normal; min-width: 220px }
.code { font-family: var(--f-num); font-size: 11.5px; color: var(--muted) }
.na { color: var(--faint) }
.neg { color: var(--bad); font-weight: 600 }
.cnt-line { display: flex; gap: 10px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; margin-bottom: 8px; flex-wrap: wrap }
.more { display: flex; justify-content: center; padding-top: 10px }
.btn { height: 34px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 8px }
.btn:hover { background: var(--surface2) }
.btn.pri { background: var(--accent); color: var(--accent-fg); border-color: var(--accent) }
.btn.pri:hover { filter: brightness(1.06) }
.btn[disabled] { opacity: .5; cursor: not-allowed }
.bar-in { display: inline-block; height: 6px; border-radius: 3px; background: var(--accent); vertical-align: middle; margin-inline-start: 8px; opacity: .8 }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 20px }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.p-bad { background: var(--bad-soft); color: var(--bad) } .p-warn { background: var(--warn-soft); color: var(--warn) } .p-ok { background: var(--ok-soft); color: var(--ok) }
.p-blue { background: var(--blue-soft); color: var(--blue) } .p-grey { background: var(--sunk); color: var(--muted) } .p-acc { background: var(--accent-soft); color: var(--accent) }
.empty { text-align: center; color: var(--muted); padding: 36px 12px; display: grid; gap: 8px; justify-items: center }
.prog { height: 6px; background: var(--sunk); border-radius: 3px; overflow: hidden } .prog i { display: block; height: 100%; background: var(--accent) }
.kv { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden }
.kv > div { padding: 8px 12px; border-bottom: 1px solid var(--line2) } .kv > div:nth-child(odd) { background: var(--surface2); color: var(--muted); font-size: 12.5px; font-weight: 600 }
.secgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px }
.sec { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--surface); display: grid; gap: 10px; cursor: pointer; box-shadow: var(--shadow) }
.sec:hover { border-color: var(--accent) }
.sec h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px }
.sec h3 i { width: 10px; height: 10px; border-radius: 3px; display: inline-block }
.sec .row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted) } .sec .row b { color: var(--fg); font-family: var(--f-num) }
.stack { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--sunk) } .stack i { display: block; height: 100% }
.report { border: 1px solid var(--line); border-radius: 10px; padding: 18px; background: var(--surface); max-height: 640px; overflow: auto }
.report h3 { margin: 18px 0 8px; font-size: 14px } .report h3:first-child { margin-top: 0 }
.rtypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px }
.rtype { border: 1px solid var(--line); border-radius: 10px; padding: 12px; cursor: pointer; background: var(--surface); text-align: start; display: grid; gap: 4px }
.rtype[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft) }
.rtype b { font-size: 13.5px } .rtype span { font-size: 12px; color: var(--muted) }
.toast { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); inset-inline-start: 50%; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 10px; z-index: 50; font-size: 13px; box-shadow: var(--shadow) }
[dir="rtl"] .toast { transform: translateX(50%) }
.skel { background: linear-gradient(90deg, var(--surface2), var(--sunk), var(--surface2)); background-size: 200% 100%; animation: sk 1.4s infinite; border-radius: 8px }
@keyframes sk { to { background-position: -200% 0 } }
.gate { max-width: 720px; margin: 40px auto; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: grid; gap: 14px; box-shadow: var(--shadow) }
.gate h1 { margin: 0; font-size: 22px } .gate p { margin: 0; color: var(--fg2); line-height: 1.75 }
.gate ol { margin: 0; padding-inline-start: 20px; color: var(--fg2); line-height: 1.9 }
details summary { cursor: pointer; color: var(--blue); font-size: 12.5px }

@media (max-width: 860px) {
  .frame { grid-template-columns: minmax(0, 1fr) }
  .side { position: static; height: auto; display: flex; overflow-x: auto; gap: 4px; padding: 8px; border-inline-end: 0; border-bottom: 1px solid var(--line) }
  .side .grp { display: none }
  .side button { width: auto; white-space: nowrap; flex: none }
  .brand small { display: none }
  .kpi .v { font-size: 22px }
  .fbar .frow { flex-direction: column; align-items: stretch }
  .fbar .fld { width: 100% }
  .fbar .fld select, .fbar .fld input { width: 100% !important; max-width: 100% !important }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important } }
.report .meta { margin-bottom: 4px }
.report .kg { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 14px 0 6px }
.report .kg div { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px }
.report .kg span { color: var(--muted); font-size: 12px } .report .kg b { font-family: var(--f-num); font-size: 18px; font-weight: 600 }