/* System layer — the individuals-portal dashboard language, measured 2026-10-06 from the live
   INDIVIDUALS PORTAL file (frames Home_01 15606:26165 / 15606:25192, cards 22622:84309,
   tab list 15606:26171, chart panel 15606:26336, table 20936:36631). Loaded after marsad.css:
   it restates the surface rules that differ from the temp-page measurements. Every colour here
   is a token from tokens.css or a value read from those frames (noted inline). */

:root {
  --sys-panel-radius: 8px;                  /* standard screens: Section Reviews / Payroll List r8; the r12 panels are the report screen's */
  --sys-panel-shadow: none;                 /* standard screen panels carry no effect; --shadow-sm belongs to the report stat strip only */
  --sys-divider-dash: 6px 6px;              /* table rows 20936: dashed #e5e7eb 6/6 */
  --sys-chart-line: #b8eacb;                /* Line 3 stroke */
  --sys-chart-fill-top: #54c08a;            /* Area 3 Shade gradient start */
  --sys-chart-fill-bottom: #079455;         /* Area 3 Shade gradient end (fades to 0) */
  --sys-chart-dot: #0d9762;                 /* Ellipse 1 */
  --sys-chart-grid: #f3f4f6;                /* Grid Y-Axis lines, dashed 4/4 */
  --sys-chart-grid-x: #e5e5e5;              /* Grid X-Axis ticks */
  --sys-chart-highlight: #54c08a;           /* Column, 50% opacity */
  --sys-chart-red: #ff5630;                 /* card sparkline, red state */
  --sys-chart-red-soft: #f97066;            /* --charts-red */
  --sys-insight-bg: #fafdff;                /* AI row 15606:26373 */
  --sys-stat-divider: rgba(57, 64, 73, .08);/* Line 27/28/29: #394049 @ 8% */
  --sys-header-a: #eceef4;                  /* header image 5732:25228, start */
  --sys-header-b: #edf2fb;                  /* header image, middle */
  --sys-header-c: #fbfcfe;                  /* header image, end */
  --sys-selected-bg: #f3fcf6;               /* Arrow tile fill; selected row fill */
  --sys-selected-text: #14573a;
}

/* ===== browser surfaces ===== */
::selection { background: var(--tag-border-success-light); color: var(--button-bg-black-default); }
html { scrollbar-color: var(--border-neutral-primary) transparent; scrollbar-width: thin; }
input, textarea { caret-color: var(--text-primary); }
.num, .mono, .stat-v, .tile-v, .delta b, .vt-score, .pbar-n, .pbar-pct, .sig-key b, .tab-count, .chart text { font-variant-numeric: tabular-nums lining-nums; }

/* ===== page head: the portal's standard Page Header (measured 2026-10-06 on المخالفات 5613:101709, الرخص 15915:84037, الأدوار 6305:72758):
   no fill — it sits on the #f9fafb page; 100px; padding 24/24/20/24; title 24/32 + breadcrumb 14/20 under it; date 14/20 grey and actions at the end; no lines.
   Our scope strip sits above it on the same grey, no fill, no line. ===== */
.app-main { background: var(--background-neutral-50); }
.head-band { background: transparent; border: 0; }
.scope { background: transparent; border: 0; padding: 20px 24px 0; min-height: 0; }
.ph { background: transparent; border: 0; padding: 24px 24px 20px; min-height: 100px; align-items: flex-start; }
.ph-title { font: 700 24px/32px var(--font-family-text); color: var(--text-display); }
.ph-sub { font: 400 14px/20px var(--font-family-text); color: var(--text-secondary); }
.ph-stack { gap: 8px; }
.ph-date { font: 400 14px/20px var(--font-family-text); color: var(--text-secondary); margin-inline-end: 4px; align-self: center; }
.ph-actions { display: flex; align-items: center; gap: 12px; align-self: center; }
.ph-actions .lib-btn--secondary { background: var(--button-bg-neutral-default); border-color: var(--button-bg-neutral-default); } /* header action-secondary is the grey fill */

/* stat strip (kept as a component; not used on main screens) */
.stats { display: flex; align-items: center; gap: 0; padding: 0 24px 20px; }
.stat { display: flex; flex-direction: column; gap: 6px; min-width: 94px; padding: 0 30px; border-inline-start: 1px solid var(--sys-stat-divider); }
.stat:first-child { padding-inline-start: 0; border-inline-start: 0; }
.stat-v { display: inline-flex; align-items: center; gap: 2px; font: 700 24px/32px var(--font-family-text); color: var(--text-display); }
.stat-v small { font: 400 14px/20px var(--font-family-text); color: var(--text-secondary); margin-inline-start: 4px; }
.stat-v.is-bad { color: var(--text-display); } .stat-v .trend { width: 19px; height: 19px; }
.trend.down { color: var(--tag-bg-error); } .trend.up { color: var(--background-success); }
.stat-l { font: 500 14px/20px var(--font-family-text); color: var(--text-secondary); }
.stat--grade .stat-v { color: var(--charts-lavendar); }

/* ===== body + panels (r12, 20px, soft shadow) ===== */
.body { padding: 20px; }
.stack { gap: 20px; }
.panel, .vp-side, .grp, .lib-list { border-radius: var(--sys-panel-radius); box-shadow: var(--sys-panel-shadow); border: 0; }
.panel { padding: 20px; }
.panel-title { font: 700 20px/30px var(--font-family-text); color: var(--text-display); margin-bottom: 16px; }
.grp { border: 1px solid var(--border-neutral-secondary); box-shadow: none; border-radius: var(--sys-panel-radius); }

/* ===== tab list: white bar 52px, 3px green pill indicator (15606:26171) ===== */
.tabs { display: flex; gap: 0; height: 52px; padding: 0 4px; margin: -20px -20px 16px; border-bottom: 1px solid var(--border-neutral-tertiary); border-radius: var(--sys-panel-radius) var(--sys-panel-radius) 0 0; background: var(--background-white); }
.tab { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 52px; padding: 16px; margin: 0; border: 0; border-radius: 4px; font: 400 14px/20px var(--font-family-text); color: var(--text-display); }
.tab:hover { background: var(--background-neutral-50); }
.tab.is-on { color: var(--text-default); font-weight: 600; border: 0; }
.tab.is-on::after { content: ''; position: absolute; inset-inline: 16px; bottom: 0; height: 3px; border-radius: 9999px; background: var(--background-primary); }
.tab-count { margin-inline-start: 4px; padding: 0 8px; height: 20px; line-height: 20px; border-radius: 9999px; background: var(--background-neutral-100); font: 600 12px/20px var(--font-family-text); color: var(--text-primary-paragraph); }
.tab.is-on .tab-count { background: var(--sys-selected-bg); color: var(--text-primary); }

/* ===== toolbar controls: 40px, border #d2d6db, r4 (Dropdown Field) ===== */
.toolbar { gap: 12px; }
.sel, .search { height: 40px; border: 1px solid var(--border-neutral-primary); border-radius: 4px; background: var(--background-white); }
.sel { padding: 0 16px; gap: 4px; font: 400 14px/20px var(--font-family-text); color: var(--text-display); }
.sel-label { color: var(--text-secondary); }
.sel-native { font-weight: 500; }
.sel:focus-within, .search:focus-within { border-color: var(--border-primary); box-shadow: 0 0 0 3px rgba(27, 131, 84, .12); }
.sel--static { border-color: transparent; background: var(--background-neutral-100); }
.search { padding: 0 16px; }
.fchip { height: 40px; }
.segs { height: 40px; padding: 0; gap: 8px; background: transparent; }
.seg { width: 52px; height: 40px; border-radius: 6px; background: var(--background-neutral-50); color: var(--icon-default-400); }
.seg:hover { background: var(--background-neutral-100); }
.seg.is-on { background: var(--background-success); color: var(--text-oncolor-primary); }

/* ===== chart panel (15606:26336): title row, stat tile, chart ===== */
.chart-panel { padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 20px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chart-title { display: inline-flex; align-items: center; gap: 4px; font: 700 20px/30px var(--font-family-text); color: var(--text-display); }
.chart-ctl { display: flex; align-items: center; gap: 12px; }
.tile { display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; }
.tile-main { display: flex; flex-direction: column; gap: 8px; }
.tile-row { display: flex; align-items: center; gap: 8px; }
.tile-v { font: 700 24px/32px var(--font-family-text); color: var(--text-display); }
.tile-l { font: 400 14px/20px var(--font-family-text); color: var(--text-secondary); }
.tile-arrow { display: none; } /* the badge carries the direction now */
.tile-arrow.is-bad { background: var(--background-error-50); color: var(--text-error); }
.delta { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 9999px; border: 1px solid var(--border-neutral-secondary); background: transparent; font: 500 12px/16px var(--font-family-text); color: var(--text-primary-paragraph); } /* shadcn outline badge */
.delta.sm { height: 20px; padding: 0 6px; }
.delta .ic { width: 12px; height: 12px; }
.delta.up .ic { color: var(--tag-text-success); } .delta.down .ic { color: var(--tag-bg-error); }
.delta.up.is-bad .ic { color: var(--tag-bg-error); } .delta.down.is-good .ic { color: var(--tag-text-success); }

.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font-family-text); fill: var(--text-primary-paragraph); }
.chart .y-label { font-size: 10px; font-weight: 500; }
.chart .x-label { font-size: 12px; }
.chart .grid { stroke: var(--sys-chart-grid); stroke-width: 1; stroke-dasharray: 4 4; }
.chart .line { fill: none; stroke: var(--sys-chart-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.is-red { stroke: var(--sys-chart-red-soft); }
.chart .col { fill: url(#sys-col-grad); opacity: .5; }
.chart .dot { fill: var(--sys-chart-dot); stroke: #fff; stroke-width: 2.9; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .12)); }
.chart .bar { fill: var(--sys-chart-line); }
.chart .bar.is-on { fill: var(--background-success); }
.chart .bar:hover { fill: var(--background-primary-400); }
.chart-foot { display: flex; align-items: center; gap: 16px; font: 400 12px/18px var(--font-family-text); color: var(--text-secondary); }

/* sparkline (card 22622:84449: 96×28, gradient fill + 1px stroke) */
.spark { width: 96px; height: 28px; display: block; }
.spark .area { opacity: .9; } .spark .line { fill: none; stroke-width: 1; }
.spark.ok .line { stroke: var(--background-success); } .spark.bad .line { stroke: var(--sys-chart-red); }

/* ===== بصير insight row (AI frame): plain tinted line, no avatar, no chat ===== */
.insight, .baseer-line { display: flex; gap: 8px; padding: 12px; border-radius: 8px; background: var(--sys-insight-bg); border: 0; margin: 0; max-width: none; font: 400 14px/20px var(--font-family-text); color: var(--text-display); }
.baseer-line { margin-top: 8px; }
.insight b, .baseer-line b { font-weight: 600; color: var(--text-display); }
.insight a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }

/* ===== table inside a panel: grey head, dashed row dividers, 88px rows ===== */
.vt-head { min-height: 48px; background: var(--background-neutral-100); border-radius: 0; }
.vt-head span { font: 500 12px/18px var(--font-family-text); color: var(--text-secondary); }
.vt-row { min-height: 88px; padding: 12px 0; border-top: 1px dashed var(--border-neutral-secondary); }
.vt-row:first-of-type, .vt-head + .vt-row { border-top: 0; }
.vt-cell { padding: 8px 16px; }
.vt-main { font: 500 14px/20px var(--font-family-text); color: var(--text-primary-paragraph); }
.vt-meta { font: 400 12px/18px var(--font-family-text); color: var(--text-secondary); }
.score-pill { min-width: 0; height: auto; padding: 0; border-radius: 0; background: transparent; font: 600 16px/24px var(--font-family-text); color: var(--text-display); }
.score-pill.is-low { color: var(--text-error); } .score-pill.is-mid { color: var(--tag-text-warning); } .score-pill.is-high { color: var(--text-display); }
.logo-tile { width: 64px; height: 64px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--background-neutral-50); overflow: hidden; }
.logo-tile img { width: 48px; height: 48px; object-fit: contain; }

/* overview (distribution + pillars) keeps its two columns on the r12 panel */
.ov { padding: 0; }
.ov > div { padding: 20px; }
.ov .sig-bar { height: 12px; }
.sig-bar i { border-radius: 2px; }
.sig-bar .ok { background: var(--background-success); }
.pbar-track { height: 8px; }
.pbar-track i { background: var(--sys-chart-red-soft); }
.pbar.is-on .pbar-track i { background: var(--tag-bg-error); }

/* ===== board cards (r12, 1px border, 20px head) ===== */
.bcol-body { border-radius: 12px; }
.vcard { border-radius: 12px; border: 1px solid var(--border-neutral-secondary); padding: 0; gap: 0; }
.vcard-top { padding: 16px 16px 12px; border-bottom: 1px solid var(--border-neutral-tertiary); }
.vcard-rows { padding: 12px 16px 16px; }
.vcard-rows > div { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }

/* ===== visit page side column ===== */
.vp-side { border-radius: var(--sys-panel-radius); }
.verdict { border-radius: var(--sys-panel-radius); }

/* ===== menu: section header + blur like the portal ===== */
.menu { border-inline-start: 1px solid var(--border-neutral-tertiary); backdrop-filter: blur(48px); }
.m-section-head { padding: 8px 16px; font: 500 12px/18px var(--font-family-text); color: var(--text-secondary); }

/* ===== motion: one authored moment — chart draws in ===== */
@media (prefers-reduced-motion: no-preference) {
  .chart .line { stroke-dasharray: 2000; stroke-dashoffset: -2000; animation: sys-draw .9s cubic-bezier(.2, .8, .2, 1) forwards; }
  .chart .area { opacity: 0; animation: sys-fade .6s .35s cubic-bezier(.2, .8, .2, 1) forwards; }
  .chart .dot, .chart .col { opacity: 0; animation: sys-fade .4s .7s forwards; }
  .chart .col { animation-name: sys-fade-half; }
}
@keyframes sys-draw { to { stroke-dashoffset: 0; } }
@keyframes sys-fade { to { opacity: 1; } }
@keyframes sys-fade-half { to { opacity: .5; } }

/* ===== نظرة عامة ===== */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.lib-kpi { height: auto; min-height: 148px; padding: 20px 24px; gap: 12px; box-shadow: none; }
.lib-kpi-title { font: 500 14px/20px var(--font-family-text); color: var(--text-secondary); }
.lib-kpi-value { display: inline-flex; align-items: baseline; gap: 8px; font: 700 30px/38px var(--font-family-text); color: var(--text-display); font-variant-numeric: tabular-nums; }
.lib-kpi-value small { font: 400 14px/20px var(--font-family-text); color: var(--text-secondary); }
.lib-kpi-sub { display: flex; align-items: center; gap: 8px; font: 400 12px/18px var(--font-family-text); color: var(--text-secondary); }
.lib-kpi .sig-bar { height: 8px; margin: 2px 0 0; }
.lib-kpi .sig-keys { gap: 4px 12px; } .lib-kpi .sig-key { font-size: 11px; } .lib-kpi .sig-key b { font-size: 12px; }
@media (max-width: 1240px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .kpis { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.sigstrip { display: flex; align-items: center; gap: 32px; padding: 4px 24px 0; }
.sigstrip-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sigstrip .sig-bar { height: 12px; margin: 0; }
.sigstrip .sig-keys { gap: 6px 20px; }
.sigstrip-side { display: flex; gap: 0; }
.sigstrip-side .stat { padding: 0 24px; } .sigstrip-side .stat:last-child { padding-inline-end: 0; }
.ovg { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ovg2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.chart .line.s-bad { stroke: var(--sys-chart-red-soft); } .chart .line.s-unver { stroke: var(--background-neutral-400); } .chart .line.s-ok { stroke: var(--sys-chart-line); }
.chart .dot.s-bad { fill: var(--tag-bg-error); } .chart .dot.s-unver { fill: var(--text-secondary); } .chart .dot.s-ok { fill: var(--sys-chart-dot); }
.chart .bar.s-bad { fill: var(--sys-chart-red-soft); } .chart .bar.s-unver { fill: var(--background-neutral-400); } .chart .bar.s-ok { fill: var(--sys-chart-line); }
.chart .bar.s-bad.is-on { fill: var(--tag-bg-error); } .chart .bar.s-ok.is-on { fill: var(--background-success); } .chart .bar.s-unver.is-on { fill: var(--text-secondary); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.panel-head .panel-title { margin: 0; }
.panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--border-neutral-tertiary); font: 400 12px/18px var(--font-family-text); color: var(--text-secondary); }
.panel-foot a { color: var(--text-primary); font-weight: 500; }
.insights { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 12px; }
.insight-item { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 8px; background: var(--sys-insight-bg); }
.insight-item p { font: 400 14px/22px var(--font-family-text); color: var(--text-display); text-wrap: pretty; }
.insight-item .basis { font: 400 12px/18px var(--font-family-text); color: var(--text-secondary); }
.insight-item a { align-self: flex-start; font: 500 12px/18px var(--font-family-text); color: var(--text-primary); }
.insight-item a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rk-head, .rk-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) 150px 110px 110px minmax(0, 1.6fr); align-items: center; }
.rk-row { min-height: 72px; padding: 6px 0; border-top: 1px dashed var(--border-neutral-secondary); color: inherit; cursor: pointer; transition: background-color .16s cubic-bezier(.2,.8,.2,1); }
.rk-row:hover { background: var(--background-neutral-50); }
.rk-head + .rk-row { border-top: 0; }
.rk-row .sig-bar { height: 8px; margin: 0; max-width: 220px; }
.rk-bad { display: inline-flex; align-items: center; gap: 8px; }
.rk-bad > b { font: 600 16px/24px var(--font-family-text); }
.rk-bad.is-low > b { color: var(--text-error); } .rk-bad.is-mid > b { color: var(--text-error); }
.segs .seg[disabled] { opacity: .55; cursor: not-allowed; }
.map-off { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 220px; border-radius: 8px; background: var(--background-neutral-50); color: var(--text-secondary); font: 400 14px/20px var(--font-family-text); background-image: linear-gradient(var(--border-neutral-tertiary) 1px, transparent 1px), linear-gradient(90deg, var(--border-neutral-tertiary) 1px, transparent 1px); background-size: 28px 28px; }
.reasons { display: flex; flex-direction: column; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-neutral-tertiary); }
.reason { display: grid; grid-template-columns: minmax(0, 1fr) 64px 56px; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px dashed var(--border-neutral-secondary); color: inherit; }
.reason:first-child { border-top: 0; }
.reason:hover .reason-t { color: var(--text-primary); }
.reason-t { font: 500 14px/20px var(--font-family-text); color: var(--text-display); }
.reason-m { font: 400 12px/18px var(--font-family-text); color: var(--text-secondary); }
.reason-n { font: 600 14px/20px var(--font-family-text); color: var(--text-display); text-align: end; }
.reason-p { font: 400 12px/18px var(--font-family-text); color: var(--text-primary-paragraph); text-align: end; }
.case { display: grid; grid-template-columns: minmax(0, 1.4fr) 96px 120px minmax(0, 1.2fr); align-items: center; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--border-neutral-secondary); color: inherit; }
.case:first-child { border-top: 0; }
.case-name { font: 500 14px/20px var(--font-family-text); color: var(--text-display); }
.case-meta { font: 400 12px/18px var(--font-family-text); color: var(--text-secondary); }
.rc-head, .rc-row { display: grid; grid-template-columns: 140px minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, 1.2fr) 120px; align-items: center; }
.rc-row { min-height: 72px; padding: 6px 0; border-top: 1px dashed var(--border-neutral-secondary); color: inherit; }
.rc-row:hover { background: var(--background-neutral-50); }
.rc-head + .rc-row { border-top: 0; }
.src-visit { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 1099px) { .ovg, .ovg2 { grid-template-columns: minmax(0, 1fr); } .insights { position: static; } .sigstrip { flex-wrap: wrap; } }
@media (max-width: 760px) {
  .sigstrip { padding: 0 16px; gap: 16px; } .sigstrip-side .stat { padding: 0 16px 0 0; }
  .rc-head, .rc-row { grid-template-columns: minmax(0, 1.5fr) 110px; } .rc-head span:nth-child(n+2):not(:last-child), .rc-row .vt-cell:nth-child(n+2):not(:last-child) { display: none; }
  .case { grid-template-columns: minmax(0, 1fr) 96px; } .case > :nth-child(n+3) { display: none; }
}

/* ===== overview, Mobbin pass (2026-10-06): compact tiles · hero chart · leaderboard rows · nested depth · panel sub-lines ===== */
.lib-kpi { min-height: 0; padding: 16px 20px; gap: 10px; border-radius: 8px; }
.lib-kpi-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 4px 8px; align-items: start; }
.lib-kpi-head .lib-kpi-title { grid-column: 1; }
.lib-kpi-head .lib-kpi-value { grid-column: 1; }
.lib-kpi-head .delta { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.lib-kpi-value { font-size: 28px; line-height: 36px; }
.lib-kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.lib-kpi-foot .spark { width: 72px; height: 24px; }
.lib-kpi-foot .sig-bar { flex: 1; max-width: 160px; margin: 0 0 8px; }
.panel-sub { font: 400 13px/20px var(--font-family-text); color: var(--text-secondary); margin: -10px 0 16px; }
.panel-head .panel-sub { margin: 0; }
.panel-head > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.chart-head > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.chart-sub { font: 400 13px/20px var(--font-family-text); color: var(--text-secondary); }
.tile.inset { align-self: flex-start; padding: 0; background: transparent; }
/* leaderboard rows: rank tile · name · dominant bar with the share at its end · delta · mean · count · reason */
.rk-head, .rk-row { grid-template-columns: 40px minmax(0, 1.1fr) minmax(0, 2.2fr) 96px 96px minmax(0, 1.3fr); gap: 0 8px; }
.rk-row { min-height: 64px; padding: 8px 0; }
.rk-row .sig-bar { max-width: none; height: 10px; }
.rk-rank { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--background-neutral-100); font: 600 16px/24px var(--font-family-text); color: var(--text-primary-paragraph); font-variant-numeric: tabular-nums; }
.rk-row:first-of-type .rk-rank, .rk-head + .rk-row .rk-rank { background: var(--background-error-50); color: var(--text-error); }
.rk-barcell { display: flex; align-items: center; gap: 12px; }
.rk-barcell .sig-bar { flex: 1; }
.rk-barcell .rk-bad { flex: none; min-width: 112px; justify-content: flex-start; }
.rk-row:hover .sig-bar .bad { background: var(--tag-bg-error); }
.rk-head span:first-child { padding-inline-start: 0; }
/* cases: number + spark in one inset */
.case { grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1.1fr); }
.case-ins { display: inline-flex; align-items: center; gap: 12px; padding: 0; background: transparent; }
@media (max-width: 760px) {
  .rk-rank { width: 32px; height: 32px; font-size: 14px; }
  .case { grid-template-columns: minmax(0, 1fr) auto; } .case > :nth-child(3) { display: none; }
}

/* ===== overview bento (2026-10-06): three compact blocks, two half blocks; nothing but the chart row is wide ===== */
.ovg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.ovg2 { align-items: stretch; }
.ovg3 .panel, .ovg2 .panel { display: flex; flex-direction: column; }
.ovg3 .panel .panel-foot, .ovg2 .panel .panel-foot { margin-top: auto; }
.lib-kpi-value { font-variant-numeric: proportional-nums lining-nums; } /* dataviz: proportional figures on standalone values */
.rk-mini { display: flex; flex-direction: column; }
.rk-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px dashed var(--border-neutral-secondary); color: inherit; }
.rk-item:first-child { border-top: 0; padding-top: 0; }
.rk-item .rk-rank { width: 32px; height: 32px; font-size: 14px; }
.rk-item:first-child .rk-rank { background: var(--background-error-50); color: var(--text-error); }
.rk-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rk-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rk-line .rk-bad > b { font-size: 14px; line-height: 20px; }
.rk-item .sig-bar { height: 8px; margin: 0; }
.rk-item:hover .vt-main { color: var(--text-primary); }
.reasons--solo { margin-top: 0; padding-top: 0; border-top: 0; }
.rc-mini { display: flex; flex-direction: column; }
.rc-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--border-neutral-secondary); color: inherit; }
.rc-item:first-child { border-top: 0; padding-top: 0; }
.rc-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rc-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rc-line .vt-main { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.rc-item:hover .vt-main { color: var(--text-primary); }
.case { grid-template-columns: minmax(0, 1fr) auto; }
.case > span:nth-child(3) { display: none; }
@media (max-width: 1240px) { .ovg3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ovg3 > :first-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .ovg3 { grid-template-columns: minmax(0, 1fr); } .ovg3 > :first-child { grid-column: auto; } .rc-side { align-items: flex-start; } }

/* ===== responsive ===== */
@media (max-width: 1099px) { .stats { flex-wrap: wrap; row-gap: 16px; } .stat { padding: 0 20px; } }
@media (max-width: 760px) {
  .scope { padding: 16px 16px 0; } .ph { padding: 16px; min-height: 0; }
  .stats { padding: 0 16px; gap: 12px; } .stat { min-width: 0; flex: 1 1 40%; padding: 0; border: 0; }
  .stat-v { font-size: 20px; line-height: 28px; }
  .chart-panel { padding: 16px; } .chart-head { align-items: flex-start; }
  .tabs { margin: -16px -16px 12px; height: 48px; overflow-x: auto; }
  .tab { padding: 14px 12px; height: 48px; }
  .seg { width: 44px; }
}

/* overview fixes after the first render (2026-10-06) */
.reason > span:first-child, .case > span:first-child, .case > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chart .line.s-ok { stroke: var(--background-primary-400); }
@media (max-width: 760px) {
  .sigstrip { flex-direction: column; align-items: stretch; gap: 14px; }
  .sigstrip-side { justify-content: space-between; }
  .sigstrip-side .stat { padding: 0; border: 0; }
  .chart-foot { flex-wrap: wrap; gap: 8px 12px; }
}

/* leaderboard fixes after render */
.rk-barcell { flex-direction: row; }
@media (max-width: 760px) {
  .rk-head { display: none; }
  .rk-row { grid-template-columns: 32px minmax(0, 1fr); row-gap: 6px; }
  .rk-row .vt-cell:nth-child(n+4) { display: none; }
  .rk-row .vt-cell:nth-child(3) { grid-column: 1 / -1; padding-top: 0; }
}

/* cases: compact rows */
.case { padding: 8px 0; gap: 12px; }
.case > span:first-child { gap: 2px; }
.case-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-ins { padding: 4px 8px; }
.case-ins .spark { width: 72px; height: 24px; }
.case-ins .rk-bad > b { font-size: 14px; line-height: 20px; }

/* chart row: both panels stretch; the chart fills its panel */
.ovg { align-items: stretch; }
.ovg .chart-panel { display: flex; flex-direction: column; }
.ovg .chart-wrap { flex: 1; display: flex; align-items: flex-end; }
.chart-wrap { position: relative; width: 100%; }
.chart-wrap .chart { cursor: crosshair; }
.chart .xhair { stroke: var(--border-neutral-primary); stroke-width: 1; stroke-dasharray: 3 3; transition: opacity .12s; }
.sc-tip-row i.tip-bad { background: var(--sys-chart-red-soft); } .sc-tip-row i.tip-unver { background: var(--background-neutral-400); } .sc-tip-row i.tip-ok { background: var(--background-primary-400); }
.sc-tip-row span { color: var(--text-secondary); }
.insights { position: static; }

/* ===== overview story (2026-10-06): notice → locate → act ===== */
.ovg-why { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.ovg-why .panel { display: flex; flex-direction: column; } .ovg-why .panel .panel-foot { margin-top: auto; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.hero-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hero-label { font: 500 14px/20px var(--font-family-text); color: var(--text-secondary); }
.hero-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-v { font: 700 48px/56px var(--font-family-text); color: var(--text-display); letter-spacing: -0.02em; font-variant-numeric: proportional-nums lining-nums; }
.hero-cmp { font: 400 14px/20px var(--font-family-text); color: var(--text-secondary); }
.hero-line { font: 400 16px/24px var(--font-family-text); color: var(--text-primary-paragraph); max-width: 62ch; text-wrap: pretty; }
.hero .sig-bar { height: 12px; margin: 6px 0 0; }
.hero-facts { display: flex; flex-direction: column; gap: 12px; padding-inline-start: 24px; border-inline-start: 1px solid var(--border-neutral-tertiary); min-width: 200px; }
.hero-facts dt { font: 400 12px/18px var(--font-family-text); color: var(--text-secondary); }
.hero-facts dd { font: 600 18px/28px var(--font-family-text); color: var(--text-display); font-variant-numeric: tabular-nums; }
.hero-facts small { font: 400 12px/18px var(--font-family-text); color: var(--text-secondary); }
.attention { display: flex; flex-direction: column; gap: 12px; }
.attention .insights { gap: 8px; }
.attention .insight-item { padding: 10px 12px; gap: 6px; } .attention .insight-item p { font-size: 13px; line-height: 20px; }
.alarm { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0 14px; border-bottom: 1px solid var(--border-neutral-tertiary); color: inherit; }
.alarm-v { font: 700 36px/44px var(--font-family-text); color: var(--text-display); min-width: 48px; text-align: center; font-variant-numeric: proportional-nums; }
.alarm.is-hot .alarm-v { color: var(--text-error); }
.alarm-t { display: flex; flex-direction: column; gap: 2px; }
.alarm-t b { font: 600 14px/20px var(--font-family-text); color: var(--text-display); }
.alarm-t span { font: 400 12px/18px var(--font-family-text); color: var(--text-secondary); }
.alarm:hover .alarm-t b { color: var(--text-primary); }
@media (max-width: 1240px) { .ovg-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ovg-why > :first-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .ovg-why { grid-template-columns: minmax(0, 1fr); } .ovg-why > :first-child { grid-column: auto; } .hero { grid-template-columns: minmax(0, 1fr); } .hero-facts { padding: 12px 0 0; border: 0; border-top: 1px solid var(--border-neutral-tertiary); flex-direction: row; flex-wrap: wrap; gap: 16px 24px; } .hero-v { font-size: 40px; line-height: 48px; } }

/* story row 1: the hero fills its panel; facts sit as a strip at the bottom */
.hero { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.hero-facts { flex-direction: row; flex-wrap: wrap; gap: 16px 40px; padding: 16px 0 0; border-inline-start: 0; border-top: 1px solid var(--border-neutral-tertiary); min-width: 0; }
.hero-v { font-size: 56px; line-height: 64px; }
/* rank rows: name on its own line; share + delta beside the meta */
.rk-line { flex-direction: column; align-items: stretch; gap: 2px; }
.rk-line .vt-main { white-space: normal; }
.rk-body .vt-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* row 1 sizes naturally; no hole under the bar */
.ovg:has(.hero) { align-items: start; }
.hero { justify-content: flex-start; gap: 16px; }
.hero-facts { padding-top: 14px; }
.attention { gap: 10px; }
.attention .panel-title { margin-bottom: 4px; }

/* hero trend: the stat-tile contract's third element (value · delta · trend) */
.ovg:has(.hero) { align-items: stretch; }
.hero { justify-content: space-between; }
.hero-trend { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.spark--wide { width: 100%; height: 56px; }
.spark--wide .line { stroke-width: 1.5; }

/* ===== finish review of نظرة عامة (2026-10-06): 12 fixes ===== */
/* 1 pillar bars in a quarter column: two-line rows */
.ovg-why .pbar { grid-template-columns: minmax(0, 1fr) 48px 44px; grid-template-areas: "name n pct" "track track track"; gap: 4px 8px; margin-inline: 0; padding: 6px 0; }
.ovg-why .pbar-name { grid-area: name; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovg-why .pbar-n { grid-area: n; } .ovg-why .pbar-pct { grid-area: pct; } .ovg-why .pbar-track { grid-area: track; }
/* 3 hero trend fills the column */
.hero-trend { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.spark--wide { flex: 1; height: auto; min-height: 56px; max-height: 160px; width: 100%; }
.spark--wide .line { vector-effect: non-scaling-stroke; }
/* 4 panel head never wraps the control under the title */
.ovg-why .panel-head { flex-wrap: nowrap; align-items: flex-start; } .ovg-why .panel-head > div:first-child { min-width: 0; }
/* 5 record meta wraps instead of clipping the ID */
.rc-main .vt-meta { white-space: normal; display: block; }
/* 6 chart footer wraps as whole items */
.chart-foot { flex-wrap: wrap; row-gap: 6px; } .chart-foot > span { white-space: nowrap; }
/* 7 last row sizes naturally */
.ovg2 { align-items: start; }
/* 9 bar mode: no crosshair, group emphasis */
.chart.is-bar .xhair { display: none; }
.chart .bar.is-hot { fill: var(--background-success); } .chart .bar.s-bad.is-hot { fill: var(--tag-bg-error); } .chart .bar.s-unver.is-hot { fill: var(--text-secondary); } .chart .bar.s-ok.is-hot { fill: var(--background-success); }
.chart-wrap { align-items: stretch; }
.ovg .chart-wrap { align-items: flex-end; }
/* 11 footer links stay on one line */
.panel-foot a { white-space: nowrap; flex: none; }
/* 12 row 1 goes single-column earlier */
@media (max-width: 1240px) { .ovg:has(.hero) { grid-template-columns: minmax(0, 1fr); } }
/* 10 phone facts strip as three columns */
@media (max-width: 760px) { .hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }

.spark--wide { max-height: 210px; }
.segs--sm { height: 28px; } .segs--sm .seg { width: 36px; height: 28px; } .segs--sm .seg .ic { width: 16px; height: 16px; }
.nowrap { white-space: nowrap; }

/* ===== consequence chain (2026-10-07): the overview's first and loudest element ===== */
.chain { display: flex; flex-direction: column; gap: 16px; }
.chain .panel-title { margin: 0; }
.ch-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); align-items: stretch; }
.ch-step { display: flex; flex-direction: column; gap: 4px; padding: 4px 4px 8px; border-radius: 4px; color: inherit; }
.ch-step:hover .ch-l { color: var(--text-primary); }
.ch-n { font: 700 40px/48px var(--font-family-text); color: var(--text-display); letter-spacing: -0.02em; font-variant-numeric: proportional-nums lining-nums; }
.ch-step.is-bad .ch-n { color: var(--text-display); }
.ch-step.is-hot .ch-n { color: var(--text-error); }
.ch-l { font: 600 16px/24px var(--font-family-text); color: var(--text-display); }
.ch-m { font: 400 13px/20px var(--font-family-text); color: var(--text-secondary); }
.ch-inline { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/20px var(--font-family-text); color: var(--text-error); }
.ch-arrow { display: flex; align-items: center; justify-content: center; color: var(--icon-default-400); padding-bottom: 32px; }
.ch-facts { display: flex; align-items: center; gap: 24px; padding-top: 12px; border-top: 1px solid var(--border-neutral-tertiary); font: 400 13px/20px var(--font-family-text); color: var(--text-secondary); flex-wrap: wrap; }
.ch-facts b { font-weight: 600; color: var(--text-display); font-variant-numeric: tabular-nums; }
.ch-read { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; padding: 12px 14px; border-radius: 8px; background: var(--sys-insight-bg); }
.ch-read-t { font: 600 13px/22px var(--font-family-text); color: var(--text-display); white-space: nowrap; }
.ch-read ul { display: flex; flex-direction: column; gap: 4px; }
.ch-read li { font: 400 14px/22px var(--font-family-text); color: var(--text-display); text-wrap: pretty; }
.ch-read li a { font: 500 13px/22px var(--font-family-text); color: var(--text-primary); white-space: nowrap; }
.ovg-why .panel-title, .ovg2 .panel-title { font-size: 18px; line-height: 28px; }
@media (max-width: 1099px) {
  .ch-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .ch-arrow { display: none; }
  .ch-step { padding: 12px; border: 1px solid var(--border-neutral-tertiary); }
}
@media (max-width: 760px) { .ch-n { font-size: 32px; line-height: 40px; } .ch-read { grid-template-columns: minmax(0, 1fr); } }

/* ===== work & resources overview (2026-10-07) ===== */
.ovg:has(.work) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
.work { display: flex; flex-direction: column; gap: 16px; }
.work .panel-head { margin: 0; }
.wk-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.wk-fig { display: flex; flex-direction: column; gap: 4px; padding-inline: 20px; border-inline-start: 1px solid var(--border-neutral-tertiary); }
.wk-fig:first-child { padding-inline-start: 0; border-inline-start: 0; }
.wk-n { font: 700 40px/48px var(--font-family-text); color: var(--text-display); letter-spacing: -0.02em; font-variant-numeric: proportional-nums lining-nums; }
.wk-l { font: 600 16px/24px var(--font-family-text); color: var(--text-display); }
.wk-m { font: 400 13px/20px var(--font-family-text); color: var(--text-secondary); }
.ch-inline.is-neutral { color: var(--text-secondary); font-weight: 400; font-size: 13px; }
.wk-fig .meter { margin-top: 6px; }
.wk-trend { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-neutral-tertiary); }
.wk-trend .spark--wide { min-height: 48px; max-height: 64px; }
.wk-trend .spark.ok .line { stroke: var(--background-success); }
.meter { display: block; height: 6px; border-radius: 9999px; background: var(--background-neutral-100); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 9999px; background: var(--background-success); }
.meter.is-muted i { background: var(--background-neutral-400); }
.quality { display: flex; flex-direction: column; gap: 8px; }
.quality .panel-title { margin-bottom: 4px; }
.q-row { display: flex; align-items: center; gap: 12px; }
.q-n { font: 700 40px/48px var(--font-family-text); color: var(--text-display); letter-spacing: -0.02em; font-variant-numeric: proportional-nums lining-nums; }
.quality .sig-bar { height: 10px; margin: 6px 0 0; }
.q-exposed { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-neutral-tertiary); color: inherit; }
.q-exposed b { font: 700 24px/32px var(--font-family-text); color: var(--text-display); }
.q-exposed span { font: 400 13px/20px var(--font-family-text); color: var(--text-secondary); }
.q-exposed .q-hot { color: var(--text-error); font-weight: 500; }
.q-exposed:hover span:first-of-type { color: var(--text-primary); }
.un-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) 90px 100px minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }
a.un-row { min-height: 72px; padding: 6px 0; border-top: 1px dashed var(--border-neutral-secondary); color: inherit; }
.vt-head + a.un-row { border-top: 0; }
a.un-row:hover { background: var(--background-neutral-50); }
a.un-row:hover .vt-main { color: var(--text-primary); }
.un-row .vt-cell { gap: 6px; }
.un-row .vt-text b { font-weight: 600; color: var(--text-display); }
.un-row .sig-bar { height: 6px; margin: 0; }
.ovg2--stretch { align-items: stretch; } .ovg2--stretch .panel { display: flex; flex-direction: column; } .ovg2--stretch .panel-foot { margin-top: auto; }
.wl { display: flex; flex-direction: column; }
.wl-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) 44px 64px; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px dashed var(--border-neutral-secondary); color: inherit; }
.wl-row:first-child { border-top: 0; }
.wl-row:hover .vt-main { color: var(--text-primary); }
.wl-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wl-name .vt-main { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-bar { height: 8px; border-radius: 9999px; background: var(--background-neutral-100); overflow: hidden; }
.wl-bar i { display: block; height: 100%; border-radius: 9999px; background: var(--background-primary-400); }
.wl-n { font: 600 14px/20px var(--font-family-text); color: var(--text-display); text-align: end; font-variant-numeric: tabular-nums; }
.wl-row .rk-bad { justify-content: flex-end; } .wl-row .rk-bad > b { font-size: 14px; }
.chart .line.s-done { stroke: var(--background-success); } .chart .dot.s-done { fill: var(--background-success); }
.chart .line.s-plan { stroke: var(--background-neutral-400); stroke-dasharray: 5 4; } .chart .dot.s-plan { fill: var(--background-neutral-400); }
.chart .bar.s-done { fill: var(--background-primary-400); } .chart .bar.s-plan { fill: var(--background-neutral-200); }
.chart .bar.s-done.is-hot, .chart .bar.s-done.is-on { fill: var(--background-success); } .chart .bar.s-plan.is-hot, .chart .bar.s-plan.is-on { fill: var(--background-neutral-400); }
.sc-tip-row i.tip-done { background: var(--background-success); } .sc-tip-row i.tip-plan { background: var(--background-neutral-400); }
.sig-dot.done { background: var(--background-success); } .sig-dot.plan { background: var(--background-neutral-400); }
@media (max-width: 1240px) { .ovg:has(.work) { grid-template-columns: minmax(0, 1fr); } .un-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) 80px minmax(0, 1.5fr) minmax(0, 1fr); } .un-row > :nth-child(4), .un-row > :nth-child(5) { display: none; } }
@media (max-width: 760px) {
  .wk-row { grid-template-columns: minmax(0, 1fr); gap: 16px; } .wk-fig { padding: 0; border: 0; } .wk-n, .q-n { font-size: 32px; line-height: 40px; }
  .vt-head.un-row { display: none; } a.un-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 6px; } a.un-row > :nth-child(n+3):not(:nth-child(6)) { display: none; }
  .wl-row { grid-template-columns: minmax(0, 1fr) 44px 64px; } .wl-bar { display: none; }
}

.ch-row { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); }
@media (max-width: 1099px) { .ch-row { grid-template-columns: minmax(0, 1fr); } }

.quality .wk-trend .spark--wide { min-height: 48px; max-height: 64px; }

/* ===== side menu, measured on the portal (24239:138344) ===== */
.menu { padding: 24px 12px; gap: 12px; background: var(--background-white); border-inline-start: 1px solid var(--border-neutral-tertiary); backdrop-filter: none; }
.m-brand { padding: 0 8px; gap: 12px; min-height: 35px; }
.m-brand-title { font: 700 20px/30px var(--font-family-text); color: var(--text-display); }
.m-brand-tile { width: 35px; height: 35px; border: 0; border-radius: 8px; background: var(--background-neutral-100); color: var(--text-default); display: inline-flex; align-items: center; justify-content: center; }
.m-brand-tile:hover { background: var(--background-neutral-200); }
.m-rule { height: 1px; margin: 0 4px; background: var(--border-neutral-tertiary); }
.m-section { display: flex; flex-direction: column; }
.m-section-head { padding: 8px 16px; font: 400 12px/18px var(--font-family-text); color: var(--text-secondary); }
.m-items { gap: 2px; }
.m-item { min-height: 36px; padding: 8px 12px; gap: 8px; border-radius: 4px; font: 400 14px/20px var(--font-family-text); color: var(--text-default); }
.m-item .m-icon { width: 16px; height: 16px; }
.m-item:hover { background: var(--background-neutral-100); }
.m-item.is-active { background: var(--background-neutral-50); color: var(--text-primary); font-weight: 600; }
.m-note { padding: 0 16px 4px; font: 400 12px/18px var(--font-family-text); color: var(--text-secondary); }
.m-userchip { display: flex; align-items: center; gap: 10px; padding: 16px 8px 0; background: transparent; border: 0; border-top: 1px solid var(--border-neutral-secondary); border-radius: 0; }
.m-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--sys-selected-bg); color: var(--text-primary); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--border-neutral-secondary); }
.m-user-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m-user-name { font: 600 14px/20px var(--font-family-text); color: var(--text-display); }
.m-user-role { font: 400 12px/18px var(--font-family-text); color: var(--text-primary-paragraph); }
.m-gear { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--text-primary-paragraph); }
.m-gear:hover { background: var(--background-neutral-100); }
@media (max-width: 760px) { .menu .m-section-head { display: none; } .menu .m-section { display: contents; } }

/* ===== pure UI review (2026-10-07): 15 fixes ===== */
/* 2 menu line on the content edge */
.menu { border-inline-start: 0; border-inline-end: 1px solid var(--border-neutral-tertiary); }
/* 3 hover never outweighs the current page */
.m-item:hover:not(.is-active) { background: var(--background-neutral-50); }
/* 4 icon colour: label #1b8354, icon #009951 when active */
.m-item .m-icon { background: currentColor; }
.m-item.is-active .m-icon { background: #009951; }
/* 5 avatar: white 2px ring only */
.m-avatar { box-shadow: 0 0 0 2px #fff; }
/* 7 static «الفترة» reads as label + value, not a disabled button */
.sel--static { background: transparent; border-color: transparent; padding-inline: 0; }
/* 8 visits table: no frame, head clips at r8 like the overview table */
.vt { border: 0; border-radius: 8px; overflow: hidden; }
/* 9 table heads single-line; «ركن آخر» sub-line ellipsis */
.vt-head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-also { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 10 red highlight column on red series */
.chart .col.is-red { fill: url(#sys-col-grad-red); }
/* 12 bottom row stretches */
.ovg2--stretch { align-items: stretch; }
/* 13 pillar index without the grey tile */
.grp-tile { background: transparent; width: 24px; color: var(--text-secondary); }
.bcol .grp-tile, .bcol.is-on .grp-tile { background: transparent; }
/* 15 dashed dividers in the score table */
.how td, .how tbody th { border-top: 1px dashed var(--border-neutral-secondary); }
@media (max-width: 760px) {
  .menu { border-inline-end: 0; }
  /* 6 phone brand tile at the far end */
  .menu .m-brand .spring { display: block; }
  /* 14 phone header actions on the grid */
  .ph > .spring { display: none; } .ph { flex-wrap: wrap; } .ph-actions { width: 100%; justify-content: flex-start; }
}

.un-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) 80px 80px minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, 1.1fr); }
@media (max-width: 1240px) { .un-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) 80px minmax(0, 1.5fr) minmax(0, 1fr); } }

/* ===== recognition aids (2026-10-07) ===== */
.ico { display: inline-block; flex: none; background: currentColor; vertical-align: -3px; }
.ico-pillar { color: var(--text-primary-paragraph); }
.pbar-name { display: inline-flex; align-items: center; gap: 8px; }
.ovg-why .pbar-name, .ovg2 .pbar-name { display: flex; }
.act-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: 8px; color: var(--text-primary-paragraph); background: var(--background-neutral-50); border: 1px solid var(--border-neutral-tertiary); }
.vt-fac { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.vt-fac .vt-main { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcard-title { display: inline-flex; align-items: center; gap: 8px; }
.vt-pillar { display: inline-flex; align-items: center; gap: 6px; }
.ava { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; font-family: var(--font-family-text); font-weight: 600; line-height: 1; box-shadow: 0 0 0 2px #fff; letter-spacing: 0; }
.person { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.person .vt-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-userchip .ava { box-shadow: 0 0 0 2px #fff; }
.ent-tile { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 8px; background: var(--background-neutral-50); border: 1px solid var(--border-neutral-tertiary); color: var(--text-primary-paragraph); }
.un-scope { flex-direction: row !important; align-items: center; gap: 12px !important; }
.un-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk-l { display: inline-flex; align-items: center; gap: 6px; }
.wk-l .ico { color: var(--text-secondary); }
.rc-type { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/18px var(--font-family-text); color: var(--tag-text-error); flex: none; }
.rc-type.is-obj { color: var(--tag-text-info); }
.rc-line .act-ico { width: 24px; height: 24px; border-radius: 6px; }
.grp-tile { width: 32px; height: 32px; color: var(--text-primary-paragraph); }
.fact dd .person .vt-text, .fact dd .vt-fac { font: inherit; color: inherit; }

/* truncation fixes after adding avatars/icons */
@media (min-width: 1241px) { .vt-head, .vt-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.15fr) minmax(0, 1.3fr) minmax(0, 1.35fr) minmax(0, 1.5fr) minmax(0, .95fr) 104px 84px; } }
.vt-pillar { white-space: nowrap; }
.vt-head span:last-child { overflow: visible; }
.wl-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 40px 60px; }
.un-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) 80px 96px minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1.1fr); }
@media (min-width: 761px) and (max-width: 1240px) {
  .vt-head, .vt-row { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr) minmax(0, 1.6fr) minmax(0, .9fr) 84px; }
  .un-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) 80px minmax(0, 1.4fr) minmax(0, 1fr); }
}

.quality .sig-bar { flex-direction: row-reverse; } .quality .sig-keys { flex-direction: row-reverse; justify-content: flex-end; }
.quality .spark.ok .line { stroke: var(--background-success); }

/* ===== help tooltip (portal Help Icon + Tooltip) ===== */
.help { position: relative; display: inline-flex; align-items: center; }
.help-btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border-radius: 4px; font: 500 12px/18px var(--font-family-text); color: var(--text-secondary); cursor: help; }
.help-btn .ico { color: var(--icon-default-400); }
.help-btn:hover, .help-btn:focus-visible { color: var(--text-display); }
.help-btn:hover .ico, .help-btn:focus-visible .ico { color: var(--text-primary-paragraph); }
.help-tip { position: absolute; z-index: 20; top: calc(100% + 8px); inset-inline-start: -8px; width: 240px; display: flex; gap: 8px; padding: 8px; border-radius: 4px; background: var(--background-white);
  box-shadow: 0 4px 6px -2px rgba(16,24,40,.03), 0 12px 16px -4px rgba(16,24,40,.08), 0 0 0 1px rgba(16,24,40,.04);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s cubic-bezier(.2,.8,.2,1), transform .16s cubic-bezier(.2,.8,.2,1), visibility 0s .16s; pointer-events: none; }
.help-tip::before { content: ''; position: absolute; top: -6px; inset-inline-start: 12px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--background-white); filter: drop-shadow(0 -1px 0 rgba(16,24,40,.06)); }
.help:hover .help-tip, .help-btn:focus-visible + .help-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.help-tip-ico { color: var(--text-primary-paragraph); padding-top: 1px; }
.help-tip-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; font: 400 12px/18px var(--font-family-text); color: var(--text-primary-paragraph); }
.help-tip-text b { font: 600 12px/18px var(--font-family-text); color: var(--text-display); }
.help-tip ul { display: flex; flex-direction: column; gap: 2px; }
.help-tip li { display: flex; justify-content: space-between; gap: 12px; }
.help-tip li span:last-child { font-weight: 600; color: var(--text-display); font-variant-numeric: tabular-nums; }
.help-tip .muted { color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .help-tip { transition: none; } }

.quality .help { align-self: flex-start; }

@media (max-width: 760px) { .un-scope .ent-tile { width: 28px !important; height: 28px !important; } .un-scope { gap: 8px !important; } .un-name .vt-main { white-space: normal; } }

/* functional trend lines (2026-10-07) */
.spark-wrap { position: relative; display: inline-flex; }
.spark-wrap .spark { cursor: crosshair; }
.spark-dot { fill: currentColor; } .spark.ok .spark-dot { fill: var(--background-success); } .spark.bad .spark-dot { fill: var(--sys-chart-red); }
.spark-hot { fill: #fff; stroke: var(--text-display); stroke-width: 1.5; }
.spark-tip { top: -34px; display: flex; gap: 8px; align-items: center; min-width: 0; white-space: nowrap; padding: 4px 8px; }
.spark-tip .sc-tip-label { margin: 0; color: var(--text-secondary); font-weight: 400; }
.q-trend .chart .line { stroke: var(--background-success); }
.q-trend .chart .dot { fill: var(--background-success); }
.q-trend .chart .area { fill: url(#sys-area-grad); }
.chart .end-label { font: 600 12px var(--font-family-text); fill: var(--text-display); }
.q-trend .chart-wrap { margin-top: 4px; }

.wk-trend-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (min-width: 1100px) { .ovg2 .chain .ch-row { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr); } }
.ovg2 .chain .ch-n { font-size: 32px; line-height: 40px; }
.ovg2 .chain .ch-l { font-size: 14px; line-height: 20px; }
.ovg2 .chain .ch-read { grid-template-columns: minmax(0, 1fr); }

/* ===== de-clump pass (2026-10-07) ===== */
.ph { min-height: 0; padding-bottom: 12px; align-items: center; }
.stack { gap: 24px; }
.ovg, .ovg2, .ovg-why { gap: 24px; }
.panel { padding: 24px; }
.panel-title { margin-bottom: 4px; }
.panel-head { margin-bottom: 20px; }
/* reliability panel: title + help icon on one line, clearer groups */
.q-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.q-head .panel-title { margin: 0; }
.q-head .help-tip { inset-inline-start: auto; inset-inline-end: -8px; }
.q-head .help-tip::before { inset-inline-start: auto; inset-inline-end: 12px; }
.quality { gap: 6px; }
.quality .sig-bar { margin-top: 14px; }
.quality .wk-trend { margin-top: 16px; }
/* visits panel: figures breathe; chart separated */
.work .panel-title { margin-bottom: 20px; }
.wk-row { padding-bottom: 4px; }
.wk-trend { padding-top: 16px; margin-top: 20px; }
/* chain: vertical steps at half width */
.ovg2 .chain .ch-row { display: flex !important; flex-direction: column; gap: 0; }
.ovg2 .chain .ch-step { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 10px 0; border: 0; }
.ovg2 .chain .ch-n { grid-row: 1 / span 2; font-size: 32px; line-height: 40px; text-align: start; }
.ovg2 .chain .ch-l { font-size: 15px; line-height: 22px; }
.ovg2 .chain .ch-m, .ovg2 .chain .ch-inline { grid-column: 2; }
.ovg2 .chain .ch-arrow { justify-content: flex-start; padding: 0 0 0 0; padding-inline-start: 46px; height: 16px; color: var(--border-neutral-primary); }
.ovg2 .chain .ch-read { margin-top: 12px; }
.chain .panel-title { margin-bottom: 12px; }
@media (max-width: 760px) { .panel { padding: 16px; } .stack, .ovg, .ovg2, .ovg-why { gap: 16px; } .ovg2 .chain .ch-step { grid-template-columns: 88px minmax(0, 1fr); } .ovg2 .chain .ch-arrow { padding-inline-start: 34px; } }

.ovg2--last { align-items: start; } .ovg2--last .panel-foot { margin-top: 12px; }

/* ===== header filters + portal dropdown (2026-10-07) ===== */
.ph { padding: 24px 24px 8px; align-items: center; gap: 16px; flex-wrap: wrap; }
.ph-actions { gap: 12px; }
.hf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dd { position: relative; display: inline-flex; }
.dd-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border: 1px solid var(--border-neutral-primary); border-radius: 4px; background: var(--background-white); font: 400 14px/20px var(--font-family-text); color: var(--text-default); white-space: nowrap; transition: border-color .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s cubic-bezier(.2,.8,.2,1); }
.dd-btn:hover { border-color: var(--background-neutral-400); }
.dd-label { color: var(--text-secondary); }
.dd-value { font-weight: 500; color: var(--text-display); }
.dd-suffix { color: var(--text-secondary); font-size: 13px; padding-inline-start: 8px; margin-inline-start: 2px; border-inline-start: 1px solid var(--border-neutral-secondary); }
.dd-btn .ic { color: var(--text-default); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.dd.is-open .dd-btn { border-color: var(--background-neutral-400); box-shadow: inset 0 -2px 0 var(--button-bg-black-default), 0 2px 4px -2px rgba(16,24,40,.06), 0 4px 8px -2px rgba(16,24,40,.10); }
.dd.is-open .dd-btn .ic { transform: rotate(180deg); }
.dd-list { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 40; min-width: max(100%, 220px); max-height: 320px; overflow: auto; display: flex; flex-direction: column; padding: 8px; background: var(--background-white); border: 1px solid var(--border-neutral-primary); border-radius: 4px; box-shadow: 0 8px 8px -4px rgba(16,24,40,.03), 0 20px 24px -4px rgba(16,24,40,.08);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s cubic-bezier(.2,.8,.2,1), transform .14s cubic-bezier(.2,.8,.2,1), visibility 0s .14s; }
.dd.is-open .dd-list { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ph-actions .dd-list { inset-inline-start: auto; inset-inline-end: 0; }
.dd-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 37px; padding: 8px; border-radius: 4px; text-align: start; font: 400 14px/21px var(--font-family-text); color: var(--text-default); white-space: nowrap; }
.dd-opt:hover, .dd-opt:focus-visible { background: var(--background-neutral-50); outline: none; }
.dd-opt.is-sel { font-weight: 500; }
.dd-opt .ic { flex: none; color: var(--text-default); }
.dd-opt-t { display: flex; flex-direction: column; }
.dd-opt-t small { font: 400 12px/18px var(--font-family-text); color: var(--text-default-disabled); }
.dd-opt[aria-disabled="true"] { color: var(--text-default-disabled); cursor: default; }
.dd-opt[aria-disabled="true"]:hover { background: transparent; }
.dd-foot { margin-top: 4px; padding: 8px 8px 0; border-top: 1px solid var(--border-neutral-tertiary); font: 400 12px/18px var(--font-family-text); color: var(--text-secondary); white-space: nowrap; }
.chart-ctl .dd-btn, .toolbar .dd-btn { height: 40px; }
@media (prefers-reduced-motion: reduce) { .dd-list, .dd-btn .ic { transition: none; } }
@media (max-width: 760px) { .ph-actions, .hf { width: 100%; } .hf .dd { flex: 1 1 100%; } .hf .dd-btn { width: 100%; } .dd-suffix { display: none; } }
/* units table calmer: one mark per cell */
a.un-row { min-height: 68px; }

@media (max-width: 760px) { .ph-stack { width: 100%; } .ph > .spring { display: none; } }

/* ===== impeccable UI review (2026-10-07): fixes 2–15 ===== */
/* 4 one title→subtitle→content rhythm everywhere */
.panel-sub { margin: 0 0 20px; }
.panel-title + .panel-sub { margin-top: 0; }
/* 5 rows of neighbouring panels on one pitch */
.ovg2 .pbar { min-height: 48px; padding-block: 0; }
.wl-row { min-height: 48px; padding-block: 0; }
/* 6 one green, one red per meaning */
.wl-bar i { background: var(--background-success); }
.pbar-track i { background: var(--sys-chart-red-soft); }
/* 7 workload names keep their room below 1240 */
@media (max-width: 1240px) {
  .wl-name { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; row-gap: 2px; align-items: center; }
  .wl-name .ava { grid-row: 1 / span 2; }
  .wl-name .sc-badge { grid-column: 2; justify-self: start; }
  .wl-name .vt-main { white-space: normal; }
}
/* 8 pillar rows stack on phones */
@media (max-width: 760px) {
  .pbar { grid-template-columns: minmax(0, 1fr) 48px 44px; grid-template-areas: "name n pct" "track track track"; gap: 4px 8px; margin-inline: 0; padding: 6px 0; }
  .pbar-name { grid-area: name; } .pbar-n { grid-area: n; } .pbar-pct { grid-area: pct; } .pbar-track { grid-area: track; }
  /* 10 tiles two by two */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 9 help icon beside the title, 24px target */
.q-head { justify-content: flex-start; }
.help-btn { min-width: 24px; min-height: 24px; justify-content: center; }
/* 11 visits table: reason and scope get room, score column narrow */
@media (min-width: 1241px) { .vt-head, .vt-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.25fr) minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, .9fr) 116px 76px; } }
/* 12 chain: dashed step separators instead of stray chevrons */
.ovg2 .chain .ch-arrow { display: none; }
.ovg2 .chain .ch-arrow + .ch-step { border-top: 1px dashed var(--border-neutral-secondary); }
/* 13 stretched last row: list footer pinned */
.ovg2--stretch .panel-foot { margin-top: auto; }
/* 14 last units column aligned with its head */
.un-row > :last-child { text-align: start; justify-content: flex-start; }
/* 15 radius scale + pillars on the visit page as dashed rows, not a box stack */
.bcol-body { border-radius: var(--radius-md); }
.vp-main .grp-stack { gap: 0; }
.vp-main .grp-stack > .grp { border: 0; border-radius: 0; border-top: 1px dashed var(--border-neutral-secondary); }
.vp-main .grp-stack > .grp:first-child { border-top: 0; }
.vp-main .grp-stack > .grp .grp-head { padding-inline: 0; }
.vp-main .grp-stack > .grp .checks { border-top: 1px solid var(--border-neutral-tertiary); }

/* performance table: head and rows share one grid (the head also carries .vt-head, whose visits-table grid was winning) */
.un .un-row, .un .vt-head.un-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) 88px 96px minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1.1fr); }
@media (max-width: 1240px) { .un .un-row, .un .vt-head.un-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) 80px minmax(0, 1.4fr) minmax(0, 1fr); } }
@media (max-width: 760px) { .un .vt-head.un-row { display: none; } .un a.un-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* performance table, ≤1240: undo the visits-table head-cell hiding; head and rows hide the same cells (4 per-inspector, 5 facilities) */
@media (max-width: 1240px) { .un .vt-head.un-row > span { display: block; } .un .un-row > :nth-child(4), .un .un-row > :nth-child(5), .un .vt-head.un-row > span:nth-child(4), .un .vt-head.un-row > span:nth-child(5) { display: none; } }
@media (max-width: 760px) { .un .vt-head.un-row > span { display: none; } }