/*
 * Ahmad Alrefai Insights — theme-only additions on top of components.css:
 * auth screens, the view container, Chart.js wrappers and small shell pieces.
 */

body.no-compare .compare-only { display: none !important; }
.small { font-size: var(--fs-xs); }
.skip-link:focus { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 100; inline-size: auto; block-size: auto; clip-path: none; padding: var(--sp-2) var(--sp-3); background: var(--surface); border-radius: var(--r-sm); box-shadow: var(--shadow-pop); }
.content:focus { outline: none; }
.content-solo { min-block-size: 100dvh; justify-content: center; max-inline-size: 560px; }

/* View: the page module renders into this, same rhythm as .content */
.view { display: flex; flex-direction: column; gap: var(--sp-6); min-inline-size: 0; }
.view > .kpi .sk + .sk, .view .kpi .sk { margin-block: 4px; }
@media (max-width: 767px) { .view { gap: var(--sp-5); } }

/* Top bar extras */
.site-switch select { min-block-size: 36px; padding-block: 0; font-weight: var(--fw-semi); max-inline-size: 240px; }
.range-eyebrow { padding-inline: 12px; }
.range-custom .btn { grid-column: 1 / -1; inline-size: 100%; justify-content: center; }
.range-field { display: grid; gap: 4px; min-inline-size: 0; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted); }
.range-field .input { inline-size: 100%; min-inline-size: 0; padding-inline: var(--sp-2); }
.range-field .input::-webkit-calendar-picker-indicator { margin-inline-start: 2px; opacity: .7; cursor: pointer; }

/* Theme switch: show the icon of the mode you'd switch to */
.theme-toggle { flex: none; color: var(--ink-2); }
.theme-toggle .icon-sun, :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: inline-flex; }
.auth-theme { display: flex; align-items: center; gap: var(--sp-1); position: fixed; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3); z-index: 10; }

/* Language switch: name on wide screens, short code on phones */
.lang-switch { flex: none; gap: 6px; color: var(--ink-2); white-space: nowrap; }
.lang-switch .lang-code { display: none; }
@media (max-width: 767px) {
  .topbar-controls .lang-switch { padding-inline: var(--sp-2); }
  .topbar-controls .lang-switch .lang-name { display: none; }
  .topbar-controls .lang-switch .lang-code { display: inline; }
}

/* Chart.js wrappers: fixed-height box so the canvas never shifts layout */
.chart-body.cjs { block-size: 240px; min-block-size: 0; }
.chart-body.cjs.sm { block-size: 180px; }
.chart-body.cjs canvas { display: block; }
.donut-wrap .donut { position: relative; inline-size: 160px; block-size: 160px; }
.donut-wrap .donut canvas { position: absolute; inset: 0; }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.donut-center b { font-size: 22px; font-weight: var(--fw-semi); color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.donut-center small { font-size: 11px; color: var(--muted); }
@media (max-width: 420px) { .donut-wrap .donut { inline-size: 120px; block-size: 120px; } .donut-center b { font-size: 17px; } }
.kpi .spark svg { display: block; inline-size: 100%; block-size: 36px; }
.chart-tip { min-inline-size: 150px; }
.chart-tip .row { display: flex; justify-content: space-between; gap: var(--sp-3); color: var(--muted); }

/* Heat grid (weekday × hour) */
.heat-legend { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--muted); }

/* Error state inside a card */
.empty .empty-art.is-error { background: var(--bad-soft); color: var(--bad); }

/* Pager buttons */
.pager .btn[disabled] { opacity: 0.4; }

/* ═════════════ Auth screens ═════════════ */
.auth { min-block-size: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.auth-form { display: flex; flex-direction: column; justify-content: center; padding: var(--sp-10) clamp(24px, 6vw, 96px); gap: var(--sp-8); background: var(--surface); }
.auth-form .brand { padding: 0; align-self: flex-start; }
.auth-form form { display: flex; flex-direction: column; gap: var(--sp-4); max-inline-size: 380px; inline-size: 100%; }
.auth-form h1 { font-size: var(--fs-2xl); }
.auth-form h1 + p { margin-block-start: 6px; }
.auth-form .row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }
.auth-form .btn-lg { inline-size: 100%; }
.auth-art { position: relative; overflow: hidden; background: var(--bg); border-inline-start: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: var(--sp-10); }
.auth-quote { max-inline-size: 440px; display: flex; flex-direction: column; gap: var(--sp-5); }
.auth-quote .eyebrow { color: var(--brand); }
.auth-quote h2 { font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); font-weight: var(--fw-medium); letter-spacing: -0.025em; line-height: 1.25; }
.auth-quote h2 mark { background: none; color: var(--brand); font-weight: var(--fw-semi); }
.auth-quote h2 mark.up { color: var(--good); }
.auth-kpi { max-inline-size: 280px; }
.auth-spark { inline-size: 100%; block-size: 36px; }
.pw { position: relative; }
.pw .input { inline-size: 100%; padding-inline-end: 44px; }
.pw button { position: absolute; inset-inline-end: 4px; inset-block-start: 4px; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth-art { display: none; } }

/* Lists, panels, tables */
.legend-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; flex: none; }
.panel { display: flex; flex-direction: column; gap: var(--sp-4); min-inline-size: 0; }
.panel-insight { margin-block-start: calc(var(--sp-2) * -1); font-size: var(--fs-md); }
.table-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.table-empty { text-align: center; padding-block: var(--sp-8) !important; }
.locked.is-full { min-block-size: 480px; }

/* Page modules */
.panel-title { margin-block-end: var(--sp-4); }
.btn-block { inline-size: 100%; margin-block-start: var(--sp-3); }
.side-stack { align-content: start; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.chart-card > .bars, .chart-card > .list-plain { margin-block-start: var(--sp-1); }
.heat { min-inline-size: 0; overflow-x: auto; }
.account-card { display: flex; flex-direction: column; gap: var(--sp-4); }
.account-title { font-size: var(--fs-xl); margin-block-start: 4px; }
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--fs-sm); color: var(--ink-2); }
.feature-list li { display: flex; gap: 8px; align-items: flex-start; }
.feature-list .icon { color: var(--good); margin-block-start: 2px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--sp-4); margin: 0; font-size: var(--fs-sm); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--ink); }
.help-card { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.help-card .grow { flex: 1; min-inline-size: 220px; }
.help-card b { color: var(--ink); }
.help-icon { inline-size: 44px; block-size: 44px; border-radius: 12px; }
.field .error:not([hidden]) { display: flex; align-items: center; gap: 4px; }
.insight-item mark, .panel-insight mark { background: none; color: inherit; font-weight: var(--fw-semi); box-shadow: inset 0 -0.42em 0 var(--brand-soft); padding-inline: 1px; }
.insight-item mark.up { box-shadow: inset 0 -0.42em 0 var(--good-soft); }
.insight-item mark.down { box-shadow: inset 0 -0.42em 0 var(--bad-soft); }

/* Performance */
.device-seg .icon { margin-inline-end: 6px; }
.psi-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
.score-item { display: grid; justify-items: center; gap: 6px; }
.psi-chart { flex: 1; min-inline-size: 220px; block-size: 150px; }
.vitals-section > .insight { margin: 0; }

/* Health */
.stack-sm { gap: var(--sp-3); }
.stack-sm > .section-title { margin: 0; }
.kpi .kpi-of { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.kpi > .badge { align-self: flex-start; }
.check p { color: var(--muted); font-size: var(--fs-sm); margin-block-start: 2px; }

/* Store */
.sub-eyebrow { margin-block-start: var(--sp-3); }
.list-row .num { font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; color: var(--ink); }
.bars .track, .bars .fill, .funnel-step > span:nth-child(2), .funnel-step .bar { display: block; }

/* Heatmaps */
.hm-card { overflow: hidden; }
.hm-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; padding: var(--sp-4) var(--sp-5); border-block-end: 1px solid var(--line); }
.hm-toolbar .page-pick { flex: 1 1 260px; min-inline-size: 0; }
.hm-toolbar select.input { inline-size: 100%; min-block-size: 36px; font-size: var(--fs-sm); }
.hm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.hm-stage { position: relative; block-size: 720px; overflow: hidden; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface-3) 0 50%) 0 0 / 16px 16px; border-inline-end: 1px solid var(--line); display: flex; justify-content: center; padding: var(--sp-5); }
.hm-scaler { position: relative; flex: none; min-inline-size: 200px; }
.hm-frame { position: absolute; inset-block-start: 0; inset-inline-start: 0; border: 0; background: #fff; transform-origin: top left; box-shadow: var(--shadow-2); border-radius: 6px; }
[dir="rtl"] .hm-frame { transform-origin: top right; }
.hm-loading { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--sp-5); color: var(--muted); font-size: var(--fs-sm); min-block-size: 200px; }
.hm-side { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-6); min-inline-size: 0; }
.hm-side h3 { font-size: var(--fs-sm); margin-block-end: var(--sp-3); }
.hm-insight { font-size: var(--fs-md); margin-block: 0 var(--sp-3); }
.hm-note { font-size: var(--fs-xs); color: var(--muted); display: flex; gap: 6px; align-items: flex-start; margin: 0; }
.hm-note .icon { flex: none; }
.hm-scale { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
.hm-scale i { inline-size: 120px; block-size: 8px; border-radius: 4px; background: linear-gradient(90deg, #3b82f6, #22c55e, #facc15, #ef4444); }
[dir="rtl"] .hm-scale i { background: linear-gradient(-90deg, #3b82f6, #22c55e, #facc15, #ef4444); }
code.ltr { font-size: var(--fs-xs); }
@media (max-width: 1023px) {
  .hm-layout { grid-template-columns: minmax(0, 1fr); }
  .hm-stage { border-inline-end: 0; border-block-end: 1px solid var(--line); block-size: 560px; padding: var(--sp-3); }
}
@media (max-width: 599px) {
  .hm-toolbar { padding: var(--sp-3); }
  .hm-toolbar .seg { flex: 1 1 auto; }
  .hm-toolbar .seg button { flex: 1; justify-content: center; }
  .hm-stage { block-size: 480px; }
}

/* Page insights */
.insights-card { display: grid; gap: var(--sp-4); padding: var(--sp-5); }
.insights-card .eyebrow { display: inline-flex; align-items: center; gap: 6px; }

/* Reports */
.report-latest { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; }
.report-art { inline-size: 64px; block-size: 64px; border-radius: 16px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: none; }
.report-art .icon { font-size: 28px; }
.report-latest-body { flex: 1; min-inline-size: 220px; }
.report-latest-body h2 { font-size: var(--fs-xl); margin-block: 4px; }
.report-latest-body p { font-size: var(--fs-sm); }

/* Billing */
.sub { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); overflow: hidden; }
.sub-main { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.sub-main h2 { font-size: var(--fs-xl); }
.sub-title { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.sub-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin: 0; }
.sub-facts dt { font-size: var(--fs-xs); color: var(--muted); }
.sub-facts dd { margin: 2px 0 0; font-weight: var(--fw-semi); color: var(--ink); font-variant-numeric: tabular-nums; }
.sub-side { padding: var(--sp-6); background: var(--surface-2); border-inline-start: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--sp-3); justify-content: center; align-items: flex-start; }
.sub-side p { font-size: var(--fs-sm); color: var(--ink-2); }
.period-bar { block-size: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.period-bar span { display: block; block-size: 100%; background: var(--brand); border-radius: 4px; }
.period-bar.due span { background: var(--warn-mark); }
.period-bar.overdue span { background: var(--bad-mark); }
.period-note { font-size: var(--fs-xs); margin-block-start: 6px; }
.pager-total b { color: var(--ink); }
@media (max-width: 767px) { .sub { grid-template-columns: 1fr; } .sub-side { border-inline-start: 0; border-block-start: 1px solid var(--line); } .sub-facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .table-card .btn-sm .btn-label { display: none; } }