/* MASAR 360 canonical dashboard CARD system (Phase 8).
   ONE definition of the KPI card, its rows, the chart-card frame and the widget primitives. Tokens only, no !important, light/dark/RTL/LTR by construction.
   Anatomy:  .ds-kpi-card > .ds-kpi-top(.ds-kpi-icon + .ds-kpi-label + .ds-kpi-go) + .ds-kpi-value + [.ds-kpi-viz + .ds-kpi-legend | .ds-kpi-foot]
   Tiers: .ds-kpi-primary (headline) · .ds-kpi-secondary (quiet counter) · .ds-kpi-compact (inline).  Tone: .tone-good|warning|critical|info sets --tone. */
.ds-kpi-card{
  --tone:var(--brand-primary); --tone-soft:color-mix(in srgb,var(--tone) 12%,transparent);
  display:flex; flex-direction:column; gap:var(--space-3); min-width:0; text-align:start; font:inherit; color:var(--text-primary);
  background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--radius-lg); padding:var(--space-4);
  box-shadow:var(--shadow-sm); position:relative;
  transition:border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.ds-kpi-card.tone-good{ --tone:var(--status-good); } .ds-kpi-card.tone-warning{ --tone:var(--status-warning); }
.ds-kpi-card.tone-critical{ --tone:var(--status-critical); } .ds-kpi-card.tone-info{ --tone:var(--brand-primary); }
button.ds-kpi-card, a.ds-kpi-card, .ds-kpi-card[role="button"]{ cursor:pointer; width:100%; }
button.ds-kpi-card:hover, a.ds-kpi-card:hover, .ds-kpi-card[role="button"]:hover{ border-color:color-mix(in srgb,var(--tone) 40%,var(--border-hairline)); box-shadow:var(--shadow-md); transform:translateY(-1px); }
button.ds-kpi-card:active, a.ds-kpi-card:active{ transform:none; box-shadow:var(--shadow-sm); }
.ds-kpi-card:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
@media (prefers-reduced-motion: reduce){ .ds-kpi-card{ transition:none; } button.ds-kpi-card:hover{ transform:none; } }

.ds-kpi-top{ display:flex; align-items:center; gap:var(--space-2); min-width:0; }
.ds-kpi-icon{ width:34px; height:34px; border-radius:var(--radius-md); display:inline-flex; align-items:center; justify-content:center; flex:none; background:var(--tone-soft); color:var(--tone); }
.ds-kpi-icon .ds-icon, .ds-kpi-icon svg{ width:18px; height:18px; }
.ds-kpi-label{ flex:1; min-width:0; font:var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-ui); color:var(--text-secondary); overflow-wrap:anywhere; }
.ds-kpi-go{ flex:none; color:var(--text-muted); opacity:0; transition:opacity var(--duration-base) var(--ease-standard); }
.ds-kpi-card:hover .ds-kpi-go, .ds-kpi-card:focus-visible .ds-kpi-go{ opacity:1; }
[dir="rtl"] .ds-kpi-go{ transform:scaleX(-1); }
.ds-kpi-value{ font:var(--fw-kpi) var(--fs-kpi)/var(--lh-kpi) var(--font-ui); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; color:var(--text-primary); overflow-wrap:anywhere; min-width:0; }
.ds-kpi-value small{ font:var(--fw-label) var(--fs-caption)/1 var(--font-ui); color:var(--text-muted); margin-inline-start:4px; letter-spacing:0; }
.ds-kpi-value-money{ white-space:nowrap; }
.ds-kpi-risk{ border-inline-start:3px solid var(--status-critical); }
.ds-kpi-risk .ds-kpi-value{ color:var(--status-critical); }

/* composition bar + legend: only used when the numbers really are parts of a whole */
.ds-kpi-viz{ display:flex; gap:2px; height:8px; border-radius:999px; overflow:hidden; background:var(--surface-sunken); }
.ds-kpi-viz > i{ display:block; height:100%; flex:var(--w,1) 1 0; min-width:4px; background:var(--seg,var(--brand-primary)); }
.ds-kpi-viz > i.seg-good{ --seg:var(--status-good); } .ds-kpi-viz > i.seg-warning{ --seg:var(--status-warning); }
.ds-kpi-viz > i.seg-critical{ --seg:var(--status-critical); } .ds-kpi-viz > i.seg-info{ --seg:var(--brand-primary); } .ds-kpi-viz > i.seg-neutral{ --seg:var(--text-muted); }
.ds-kpi-viz.is-empty{ opacity:.5; }
.ds-kpi-legend{ display:flex; flex-wrap:wrap; gap:4px var(--space-3); font:var(--fw-caption) var(--fs-caption)/1.3 var(--font-ui); color:var(--text-secondary); }
.ds-kpi-legend-item{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.ds-kpi-legend-item::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--seg,var(--text-muted)); flex:none; }
.ds-kpi-legend-item.seg-good{ --seg:var(--status-good); } .ds-kpi-legend-item.seg-warning{ --seg:var(--status-warning); }
.ds-kpi-legend-item.seg-critical{ --seg:var(--status-critical); } .ds-kpi-legend-item.seg-info{ --seg:var(--brand-primary); } .ds-kpi-legend-item.seg-neutral{ --seg:var(--text-muted); }
.ds-kpi-legend-item b{ color:var(--text-primary); font-variant-numeric:tabular-nums; }
.ds-kpi-foot{ font:var(--fw-caption) var(--fs-caption)/1.4 var(--font-ui); color:var(--text-muted); }
/* trend chips (existing markup: .ds-kpi-trend.ds-up|ds-down|ds-flat) */
.ds-kpi-trend-row{ display:flex; flex-wrap:wrap; gap:4px var(--space-3); }
.ds-kpi-trend{ display:inline-flex; align-items:center; gap:4px; font:var(--fw-caption) var(--fs-caption)/1.3 var(--font-ui); color:var(--text-secondary); white-space:nowrap; }
.ds-kpi-trend.ds-up{ color:var(--status-good); } .ds-kpi-trend.ds-down{ color:var(--status-critical); } .ds-kpi-trend.ds-flat{ color:var(--text-secondary); }
.ds-kpi-delta{ display:inline-flex; align-items:center; gap:4px; width:fit-content; padding:2px var(--space-2); border-radius:999px; font:var(--fw-caption) var(--fs-caption)/1.3 var(--font-ui); }
.ds-kpi-delta.is-up{ color:var(--status-good); background:var(--status-good-soft); } .ds-kpi-delta.is-down{ color:var(--status-critical); background:var(--status-critical-soft); }
.ds-kpi-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); min-width:0; }
.ds-kpi-sub{ font:var(--fw-caption) var(--fs-caption)/1.4 var(--font-ui); color:var(--text-muted); }

/* tiers */
.ds-kpi-primary{ padding:var(--space-5); gap:var(--space-3); }
.ds-kpi-primary .ds-kpi-icon{ width:40px; height:40px; }
.ds-kpi-primary .ds-kpi-label{ font-size:var(--fs-body); }
.ds-kpi-secondary{ padding:var(--space-3) var(--space-4); gap:var(--space-2); box-shadow:none; }
.ds-kpi-secondary .ds-kpi-icon{ width:28px; height:28px; } .ds-kpi-secondary .ds-kpi-icon .ds-icon, .ds-kpi-secondary .ds-kpi-icon svg{ width:15px; height:15px; }
.ds-kpi-secondary .ds-kpi-label{ font-size:var(--fs-caption); }
.ds-kpi-secondary .ds-kpi-value{ font-size:var(--fs-section); line-height:1.25; font-weight:var(--fw-section); }
.ds-kpi-compact{ flex-direction:row; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); box-shadow:none; background:var(--surface-sunken); }
.ds-kpi-compact .ds-kpi-icon{ display:none; }
.ds-kpi-compact .ds-kpi-label{ font-size:var(--fs-helper); white-space:nowrap; flex:none; }
.ds-kpi-compact .ds-kpi-value{ font-size:var(--fs-body); font-weight:var(--fw-card-heading); }

/* loading / empty */
.ds-kpi-card.is-loading .ds-kpi-value, .ds-kpi-card.is-loading .ds-kpi-label{ color:transparent; background:linear-gradient(90deg,var(--surface-sunken),var(--surface-2),var(--surface-sunken)); background-size:200% 100%; border-radius:6px; animation:ds-kpi-shimmer 1.2s linear infinite; user-select:none; }
.ds-kpi-card.is-loading .ds-kpi-value{ width:56%; min-height:1.2em; }
@keyframes ds-kpi-shimmer{ from{ background-position:100% 0; } to{ background-position:-100% 0; } }
@media (prefers-reduced-motion: reduce){ .ds-kpi-card.is-loading .ds-kpi-value, .ds-kpi-card.is-loading .ds-kpi-label{ animation:none; } }
.ds-kpi-value.is-empty{ color:var(--text-muted); }

/* rows */
.ds-dashboard-primary-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-4); }
.ds-dashboard-secondary-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--space-3); margin-top:var(--space-3); }
.ds-kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-4); }
@media (max-width:600px){ .ds-dashboard-primary-row, .ds-dashboard-secondary-row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
  .ds-kpi-primary{ padding:var(--space-4); } .ds-kpi-value{ font-size:calc(var(--fs-kpi) * .82); } .ds-kpi-secondary .ds-kpi-value{ font-size:var(--fs-card-heading); } }
.ds-dash-meta{ font:var(--fw-caption) var(--fs-caption)/1.4 var(--font-ui); color:var(--text-muted); margin-block:var(--space-2) var(--space-4); }

/* chart-card frame (bodies: ds/charts.js + the bar/donut markup) */
.ds-dash-charts-grid{ align-items:start; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:var(--space-4); margin-block-start:var(--space-5); }
.ds-chart-card{ background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5) var(--space-5); box-shadow:var(--shadow-sm); min-width:0; display:flex; flex-direction:column; gap:var(--space-3); overflow:hidden; }
.ds-chart-card[data-domain]{ border-top:3px solid var(--domain-accent,var(--border-hairline)); }
.ds-chart-card[data-domain="hr"]{ --domain-accent:var(--domain-hr); } .ds-chart-card[data-domain="fleet"]{ --domain-accent:var(--domain-fleet); }
.ds-chart-card[data-domain="alerts"]{ --domain-accent:var(--domain-alerts); } .ds-chart-card[data-domain="finance"]{ --domain-accent:var(--domain-finance); }
.ds-chart-card[data-domain="documents"]{ --domain-accent:var(--domain-documents); }
.ds-chart-head, .ds-chart-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); }
.ds-chart-title{ font:var(--fw-card-heading) var(--fs-card-heading)/var(--lh-card-heading) var(--font-ui); color:var(--text-primary); }
.ds-chart-meta{ font:var(--fw-caption) var(--fs-caption)/1.4 var(--font-ui); color:var(--text-muted); margin-top:2px; }
.ds-chart-card-body{ padding:0; }

.ds-chart-more{ font:var(--fw-caption) var(--fs-caption)/1.4 var(--font-ui); color:var(--text-muted); }

.ds-qab-collapsed{ justify-content:flex-end; padding-block:2px; }

/* collapsed dashboard filters: a slim toolbar, not an empty framed card */
.ds-dash-filters[data-collapsed="true"]{ background:transparent; border:0; padding:0; box-shadow:none; }
.ds-dash-filters[data-collapsed="true"] .ds-dash-chips{ margin-block-start:0; }

/* filter controls in list toolbars: compact on desktop, full-width on phones */
.ds-filter-ctl{ max-width:220px; }
@media (max-width:640px){ .ds-filter-ctl{ max-width:none; flex:1 1 100%; width:100%; } }

/* expiry filter chips (fleet/HR expiry dashboards): tokenised, wraps instead of scrolling sideways */
.expiry-filter-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); padding:0 0 var(--space-3); }
.expiry-filter-bar button{ min-height:36px; padding:0 var(--space-3); border:1px solid var(--border-hairline); border-radius:var(--radius-md); background:var(--surface-2); color:var(--text-secondary); font:var(--fw-label) var(--fs-label)/1 var(--font-ui); cursor:pointer; }
.expiry-filter-bar button:hover{ border-color:var(--brand-primary); color:var(--brand-primary); }
.expiry-filter-bar button.active{ border-color:var(--brand-ink); background:var(--brand-ink); color:#fff; }
.expiry-filter-bar button:focus-visible{ outline:none; box-shadow:var(--focus-ring); }

/* tables wider than their container scroll inside their own region */
.ds-table-scroll{ overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
.ds-table-scroll:focus-visible{ outline:none; box-shadow:var(--focus-ring); }

/* small print follows the scale instead of the browser's 0.83em default */
small, .small{ font-size:var(--fs-helper); }

/* long money values shrink to their card instead of overflowing it */
.ds-kpi-value{ max-width:100%; overflow-wrap:anywhere; }
.ds-kpi-value-money{ font-size:clamp(20px, 7.2vw, var(--fs-kpi)); }
@media (min-width:601px){ .ds-kpi-value-money{ font-size:var(--fs-kpi); } }

/* list filter rows wrap instead of overflowing on narrow screens */
.flex-filters{ display:flex; flex-wrap:wrap; gap:var(--space-2); min-width:0; }
.flex-filters > *{ min-width:0; }
@media (max-width:600px){ .flex-filters > select, .flex-filters > input{ flex:1 1 100%; box-sizing:border-box; width:100%; max-width:100%; } }

.v16-link-button{ min-height:24px; }

/* grid items may shrink below their content width, so a long money value never widens the page */
.ds-dashboard-primary-row > *, .ds-dashboard-secondary-row > *, .ds-kpi-grid > *, .ds-kpi-card{ min-width:0; }
.ds-kpi-value-money{ white-space:normal; }

/* topbar: the page title shrinks (ellipsis) so the action cluster is never pushed off-screen, in either direction */
.ds-topbar-title{ min-width:0; flex:0 1 auto; overflow:hidden; }
.ds-topbar-title > *{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-topbar-actions{ flex:none; }

/* the floating assistant steps aside while the mobile drawer or a dialog is open, so it never covers their controls */
body.ds-scroll-locked #ai-bubble-root{ visibility:hidden; }

/* quick-actions dialog: comfortable width, the list scrolls (Save always reachable), real 32px move buttons */
.modal-body .ds-stack:has(> .ds-qab-list){ max-width:560px; margin-inline:auto; }
.ds-qab-list{ max-height:min(42vh,360px); overflow-y:auto; }
.ds-qab-tools .ds-btn{ min-width:32px; min-height:32px; font-size:var(--fs-body); }
.ds-qab-tools .ds-btn:disabled{ opacity:.35; }