/* Look: docs/DESIGN-AR.md (Airtable, adapted). Colors stay on the dashboard's theme tokens so light and dark both work;
   from Airtable we take the modest weights (400/500), the 4px spacing scale, the radius ladder (6/10/12px),
   hairline borders with no shadows, the filter rail and the 12px table rows. */
#dash-root { --dash-gutter: clamp(12px, 3vw, 32px); }
.st { direction: rtl; font-family: "IBM Plex Sans Arabic", var(--font-anthropic-sans); color: var(--color-fg); max-width: 1280px; margin-inline: auto;
  --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --hair: 1px solid var(--color-border-line); }
.st.st :is(b, strong) { font-weight: 500; color: var(--color-fg); }
.st h1 { font-family: inherit; font-weight: 400; font-size: var(--cds-font-size-title); line-height: 1.2; margin: 0 0 16px; }
.st h2 { font-size: var(--cds-font-size-heading); font-weight: 500; margin: 48px 0 8px; }
.st h3 { font-size: var(--cds-font-size-body); font-weight: 500; margin: 0 0 8px; }
.st .lead { color: var(--color-fg-muted); margin: 0 0 24px; line-height: 1.7; max-width: 72ch; }
.st .note { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); margin: 0 0 12px; line-height: 1.6; max-width: 90ch; }

/* tabs: the active one is the ink button, the rest hairline buttons */
.st .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.st .tabs button { all: unset; cursor: pointer; padding: 8px 16px; border: var(--hair); border-radius: var(--r-lg); font-size: var(--cds-font-size-body); font-weight: 500; color: var(--color-fg); }
.st .tabs button[aria-selected=true] { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); }
.st .tabs button:focus-visible { outline: 2px solid var(--cds-chart-categorical-1); outline-offset: 2px; }

.st .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 16px; }
.st .kpi { background: var(--color-panel); border: var(--hair); border-radius: var(--r-md); padding: 16px 24px; }
.st .kpi .v { font-weight: 400; font-size: var(--cds-font-size-title); font-variant-numeric: tabular-nums; line-height: 1.2; }
.st .kpi .l { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); margin-top: 4px; line-height: 1.5; }
.st .card { background: var(--color-panel); border: var(--hair); border-radius: var(--r-lg); padding: 24px; position: relative; }
.st .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 16px; }
.st .chart { min-height: 320px; position: relative; direction: ltr; }
.st .chart.tall { min-height: 560px; }
.st .tip { position: absolute; pointer-events: none; background: var(--cds-surface-popover); border: 1px solid var(--cds-border); border-radius: var(--r-sm); box-shadow: var(--cds-shadow-popover); padding: var(--cds-pad-xs) var(--cds-pad-sm); font-size: var(--cds-font-size-caption); direction: rtl; max-width: 280px; line-height: 1.5; z-index: 3; }
.st .tip .k { color: var(--cds-text-secondary); }

/* inputs: 44px, hairline, 6px corners */
.st .controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; align-items: center; }
.st input[type=search] { flex: 1 1 14rem; min-width: 0; height: 44px; box-sizing: border-box; padding: 0 16px; border: var(--hair); border-radius: var(--r-sm); background: var(--color-bg); color: var(--color-fg); font: inherit; }
.st input[type=search]:focus { outline: 2px solid var(--cds-chart-categorical-1); outline-offset: -1px; }
.st .controls .dash-select { min-width: 9rem; }
.st .btn { all: unset; cursor: pointer; padding: 8px 16px; border: var(--hair); border-radius: var(--r-lg); font-weight: 500; font-size: var(--cds-font-size-caption); color: var(--color-fg); background: var(--color-bg); }
.st .btn:focus-visible { outline: 2px solid var(--cds-chart-categorical-1); outline-offset: 2px; }

/* tables: 12px rows, hairline dividers, no shadows */
.st .tbox { max-height: 620px; overflow: auto; border: var(--hair); border-radius: var(--r-md); }
.st table { width: 100%; border-collapse: collapse; font-size: var(--cds-font-size-caption); font-variant-numeric: tabular-nums; }
.st th { position: sticky; top: 0; background: var(--color-panel); text-align: start; padding: 12px; border-bottom: var(--hair); z-index: 1; white-space: nowrap; font-weight: 500; }
.st th button { all: unset; cursor: pointer; font-weight: 500; }
.st th[aria-sort=ascending] button::after { content: ' ▲'; font-size: 9px; }
.st th[aria-sort=descending] button::after { content: ' ▼'; font-size: 9px; }
.st td { padding: 12px; border-bottom: var(--hair); vertical-align: top; line-height: 1.5; }
.st tr:last-child td { border-bottom: 0; }
.st tr.pick { cursor: pointer; }
.st tr.pick:hover td { background: color-mix(in srgb, var(--color-fg) 4%, transparent); }
.st td .co { font-weight: 500; direction: ltr; unicode-bidi: isolate; }
.st td .desc { color: var(--color-fg-muted); unicode-bidi: plaintext; display: block; max-width: 34rem; }
.st td .pf { color: var(--color-fg-muted); display: block; max-width: 30rem; }
.st .bar { display: inline-block; height: 8px; border-radius: 2px; background: var(--cds-chart-categorical-1); vertical-align: middle; margin-inline-start: 6px; }
.st .pill { display: inline-block; padding: 1px 8px; border-radius: var(--r-md); font-size: 11px; border: var(--hair); white-space: nowrap; }
.st .pill.ok { color: var(--color-ok); } .st .pill.bad { color: var(--color-bad); } .st .pill.warn { color: var(--color-warn); }
.st .what { min-width: 14rem; max-width: 28rem; }
.st .what .ev { direction: ltr; unicode-bidi: isolate; display: block; }
.st .what .why { color: var(--color-fg-muted); display: block; }
.st .links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 11px; }
.st .links a { color: var(--cds-chart-categorical-1); text-decoration: none; }
.st .links a:hover { text-decoration: underline; text-underline-offset: 2px; }
.st .meta { color: var(--color-fg-muted); font-size: 11px; display: block; margin-top: 2px; }
.st tr.open td { background: color-mix(in srgb, var(--color-fg) 4%, transparent); }
.st tr.xrow td { background: var(--color-bg); padding: 16px 24px; }
.st .xgrid { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: 8px 16px; line-height: 1.6; }
.st .xgrid dt { font-weight: 500; } .st .xgrid dd { margin: 0; }
.st .xgrid .ltr { direction: ltr; unicode-bidi: isolate; }
.st .muted { color: var(--color-fg-muted); }
.st details { margin-top: 48px; border-top: var(--hair); padding-top: 16px; }
.st details summary { cursor: pointer; font-weight: 500; }
.st details dl { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: 8px 16px; font-size: var(--cds-font-size-caption); line-height: 1.6; }
.st details dt { font-weight: 500; } .st details dd { margin: 0; color: var(--color-fg-muted); }
.st th.grp { text-align: center; border-bottom: var(--hair); color: var(--color-fg-muted); font-weight: 400; }
.st #segTable th[rowspan] { vertical-align: bottom; }
.st #segTable thead tr:nth-child(2) th { top: 41px; }
.st .spark { display: block; }
.st .count { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }

/* company database: filter rail beside the table */
.st .db { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 24px; align-items: start; }
.st .rail { border: var(--hair); border-radius: var(--r-lg); padding: 16px; background: var(--color-panel); }
.st .rail .grp + .grp { border-top: var(--hair); margin-top: 16px; padding-top: 16px; }
.st .rail h3 { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); font-weight: 500; margin: 0 0 8px; }
.st .facet { display: grid; gap: 2px; }
.st .facet label { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 4px 6px; border-radius: var(--r-sm); cursor: pointer; font-size: var(--cds-font-size-caption); line-height: 1.4; }
.st .facet label:hover { background: color-mix(in srgb, var(--color-fg) 5%, transparent); }
.st .facet label.zero { opacity: .45; }
.st .facet input { margin: 0; accent-color: var(--color-fg); }
.st .facet .n { color: var(--color-fg-muted); font-variant-numeric: tabular-nums; font-size: 11px; }
.st .rail .dash-select { width: 100%; }
.st .rail .years { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st .rail .toggle { display: flex; gap: 8px; align-items: center; font-size: var(--cds-font-size-caption); cursor: pointer; }
.st .rail .toggle input { accent-color: var(--color-fg); margin: 0; }
.st .rail .btn { margin-top: 16px; }
.st .dbhead { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 0 0 12px; }
.st .dbhead .count b { font-variant-numeric: tabular-nums; }
.st .more { margin-top: 12px; text-align: center; }
.st #dbTable td.ltr { direction: ltr; unicode-bidi: isolate; text-align: end; white-space: nowrap; }
@media (max-width: 760px) { .st .db { grid-template-columns: 1fr; } .st .db > div:last-child { order: -1; } .st .dbhead input[type=search] { flex-basis: 100%; } }

[data-dash-source-state=refreshing] { opacity: .5; transition: opacity var(--cds-dur-slow); }
@media (max-width: 640px) { .st .hide-sm { display: none; } }