/* Shared component vocabulary. Layout remains in the page stylesheets. */
.badge { display:inline-flex; align-items:center; border-radius:var(--r-pill); padding:3px 9px; font:600 var(--type-11) var(--font-text); text-transform:none; letter-spacing:0; color:var(--text-secondary); background:var(--surface-3); border:1px solid transparent; }
.badge-channel.google { color:var(--mavroon); background:var(--gold-dim); border-color:var(--mavroon-border); }
.badge-channel.meta-ads { color:var(--mavroon); background:var(--mavroon-dim); }
.badge-type { color:var(--text-secondary); background:var(--surface-3); }
.kpi-card { background:var(--surface-2); border:0; border-radius:var(--radius-18); padding:20px; box-shadow:var(--shadow-card); font-variant-numeric:tabular-nums; }
.kpi-label,.card-metric-label,.cm-kpi-label { color:var(--text-muted); font:500 var(--type-12) var(--font-text); letter-spacing:0; text-transform:none; }
.kpi-value { color:var(--text); font:600 var(--type-28)/1.1 var(--font-display); letter-spacing:0; }
.kpi-compact .kpi-value { font-size:var(--type-24); }
.kpi-caption { color:var(--text-muted); font:400 var(--type-12) var(--font-text); }
.channel-summary { padding:20px; background:var(--surface-2); border:0; border-radius:var(--radius-18); box-shadow:var(--shadow-card); }
.channel-summary .card-label,.totals .channel-summary .card-label { color:var(--text); font:600 var(--type-15) var(--font-text); text-transform:none; letter-spacing:0; margin:0 0 16px; }
.channel-summary-metrics { display:grid; gap:12px; }
.channel-summary-metric { display:flex; justify-content:space-between; gap:16px; font-size:var(--type-12); font-variant-numeric:tabular-nums; }
.channel-summary-metric span { color:var(--text-muted); }
.chart-card,.cm-card { background:var(--surface-2); padding:24px 28px; border:0; border-radius:var(--radius-18); box-shadow:var(--shadow-card); }
.chart-wrap { height:245px; }
.campaign-modal .chart-wrap { height:220px; }
table,.data-table { font:400 var(--type-13) var(--font-text); font-variant-numeric:tabular-nums; }
table thead th { background:var(--surface-2); color:var(--text-muted); font-size:var(--type-12); font-weight:600; text-transform:none; letter-spacing:0; }
table tbody td { font-size:var(--type-13); font-weight:400; color:var(--text); padding:13px 11px; }
table :is(th,td):first-child { padding-left:24px; }
table :is(th,td):last-child { padding-right:24px; }
table :is(th,td).num { text-align:right; }
.empty-state,.empty,.cm-empty,.admin-empty { color:var(--text-muted); padding:24px; text-align:center; font:400 var(--type-13) var(--font-text); }
.benchmarks-callout,.cm-clicks-note { color:var(--text-muted); font:400 var(--type-12)/1.55 var(--font-text); font-style:normal; background:none; border:0; padding:0; margin:16px 0; }
button { font-family:var(--font-text); }
button:hover,.login-btn:hover { transform:none; box-shadow:var(--shadow-xs); }
.button-primary,.login-btn,#login-form button[type=submit] { color:var(--bg); background:var(--mavroon); font:600 var(--type-13) var(--font-text); border-radius:var(--radius-8); }
button:focus-visible,input:focus-visible { outline:2px solid var(--mavroon); outline-offset:3px; box-shadow:none; }
input:focus,.password-input:focus,#password:focus { box-shadow:none; }
.channel-tabs,.drilldown-tabs,.admin-sub-tabs { box-shadow:none; border:0; border-bottom:1px solid var(--border-subtle); }
.channel-tab,.drilldown-tab,.admin-sub-tab { min-height:32px; border-radius:var(--r-pill); font:500 var(--type-13) var(--font-text); }
.channel-tab.active,.drilldown-tab.active,.admin-sub-tab.active { background:var(--mavroon-dim); color:var(--mavroon); border:1px solid var(--mavroon-border); }
.preset-group { border-radius:var(--radius-track); }
.preset,.admin-controls .preset { border-radius:var(--radius-segment); }
.header .view-nav-btn { position:relative; }
.header .view-nav-btn.active::after { content:""; position:absolute; left:16px; right:16px; bottom:0; height:2px; background:var(--gold); }
.menu-group h2 { font-size:var(--type-11); }
.campaign-modal { overflow:hidden; background:var(--scrim); }
.campaign-modal-overlay { background:transparent; backdrop-filter:none; }
.campaign-modal-panel { overflow:hidden; max-height:calc(100dvh - 80px); display:flex; flex-direction:column; }
.campaign-modal-header { position:static; flex:none; }
.campaign-modal-body { overflow-y:auto; min-height:0; }
.cm-section-body { background:var(--bg); border:0; padding:0; }
.cm-section-header { background:var(--bg); color:var(--text); border:0; border-radius:0; padding:0; margin-bottom:16px; font:600 var(--type-24) var(--font-display); letter-spacing:0; text-transform:none; }
.cm-section-sub { color:var(--text-muted); font:400 var(--type-14) var(--font-text); text-transform:none; letter-spacing:0; }
.cm-kpi { border:0; }
.cm-kpi-label { text-transform:none; letter-spacing:0; font-weight:500; }
.dashboard > .data-availability:not(.header):not(.brand-strip):not(.controls):not(.print-client-logo) { width:calc(100% - 2 * var(--shell-gutter)); max-width:calc(var(--content-wide) - 2 * var(--shell-gutter)); padding:12px 16px; }
.fleet-footer,.updated-footer,.data-freshness-footer { font-size:var(--type-12); color:var(--text-muted); gap:12px; margin-top:12px; padding-top:12px; padding-bottom:12px; }
.header-poweredby { font-size:var(--type-11); }
@media(max-width:1000px) {
 .overview-kpis .exec-kpi-grid .kpi-card:last-child { grid-column:span 2; }
}
@media(max-width:680px) {
 .overview-kpis .exec-kpi-grid .kpi-card:last-child { grid-column:1/-1; }
 .campaign-modal-panel { max-height:calc(100dvh - 32px); }
}

.page-eyebrow,.campaign-modal-eyebrow { font:600 var(--type-11) var(--font-text); text-transform:uppercase; letter-spacing:.09em; }
.page-eyebrow { color:var(--mavroon); }
.campaign-modal-eyebrow { color:var(--text-muted); }
.menu-group h2 { text-transform:uppercase; letter-spacing:.09em; }
.badge { font:600 var(--type-11) var(--font-text); border-radius:var(--r-pill); padding:3px 9px; text-transform:none; letter-spacing:0; background:var(--surface-3); color:var(--text-secondary); }
.badge-channel.google,.badge-channel[data-source=google_ads] { color:var(--mavroon); background:var(--gold-dim); border:1px solid var(--mavroon-border); }
.badge-channel.meta-ads,.badge-channel[data-source=meta_ads] { color:var(--mavroon); background:var(--mavroon-dim); }
.badge-status { background:var(--surface-3); color:var(--text-secondary); }
.badge-status[data-tone=good],.badge-status.up { color:var(--status-good); }
.badge-status[data-tone=bad],.badge-status.down { color:var(--status-bad); }
.badge-status[data-tone=warn] { color:var(--status-warn); }
.campaign-modal-close { width:36px; height:36px; border:1px solid var(--border); border-radius:var(--radius-8); }
.data-table-scroll { overflow-x:auto; max-width:100%; }
.data-table-scroll--ads { max-height:400px; overflow-y:auto; }
.data-table-scroll--ads th { position:sticky; top:0; }
.admin-dashboard .trend-card { background:var(--surface-2); border:0; }
.admin-dashboard .trend-card-value { font:600 var(--type-28)/1.1 var(--font-display); }
.admin-dashboard .trend-card-label { font:500 var(--type-12) var(--font-text); text-transform:none; letter-spacing:0; color:var(--text-muted); }
.cm-section-header { display:block; }
.cm-section-sub { display:block; margin-top:8px; }

.totals .channel-summary { padding:20px; }

.summary-stat.kpi-card { background:var(--surface-2); border:0; border-radius:var(--radius-18); padding:20px; box-shadow:var(--shadow-card); }
.summary-stat .kpi-label { font:500 var(--type-12) var(--font-text); }
.summary-stat .kpi-value { font:600 var(--type-28)/1.1 var(--font-display); }
.cm-tooltip { font:400 var(--type-12) var(--font-text); background:var(--tooltip-bg); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-12); box-shadow:var(--shadow-pop); }
.cm-tooltip-title { font:600 var(--type-12) var(--font-text); color:var(--text); }
.cm-tooltip-row,.cm-tooltip-row strong { color:var(--text); }

.empty-state { color:var(--text-muted); font:400 var(--type-13) var(--font-text); text-align:center; padding:24px; }
.header .ghost-btn { border-radius:var(--r-pill); }
.badge-status.is-diag-healthy { color:var(--status-good); }
.badge-status.is-diag-budget,.badge-status.is-diag-bid,.badge-status.is-diag-mixed { color:var(--status-warn); }
.badge-status.is-diag-quality,.badge-status.is-diag-delivery { color:var(--status-bad); }
/* Pointer actions do not borrow the keyboard focus treatment. */
:is(button,a,[role=tab]):focus:not(:focus-visible) { outline:none; box-shadow:none; }
html[data-input-modality=pointer] :is(button,a,[role=tab]):focus { outline:none !important; box-shadow:none; }
.header :focus-visible { outline:2px solid var(--bg); outline-offset:-4px; }
.channel-kpi-row { grid-column:1/-1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }

.channel-kpi-row .card-label { font:500 var(--type-12) var(--font-text); color:var(--text-muted); margin:0 0 8px; }
.channel-kpi-row .card-value { font:600 var(--type-28)/1.1 var(--font-display); }
.footer-band { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.footer-status { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-band .data-freshness-footer,.footer-band .updated-footer { display:flex; align-items:center; gap:12px; margin:0; padding:0; border:0; }
.footer-band .data-freshness-footer:empty { display:none; }
.footer-band .fleet-credit { margin-left:auto; flex-shrink:0; }
@media(max-width:1000px) { .channel-kpi-row { grid-template-columns:repeat(3,minmax(0,1fr)); } .channel-kpi-row .card:last-child { grid-column:span 2; } }
@media(max-width:680px) { .channel-kpi-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .channel-kpi-row .card:last-child { grid-column:1/-1; } .footer-band { flex-wrap:wrap; gap:12px; } }