/* SparkGrid shell consistency v10
   One stable application frame for every route. */
:root{
  --sg-sidebar-width:224px;
  --sg-header-height:78px;
  --sg-content-x:30px;
  --sg-control-height:36px;
}

html,body{min-width:1180px}
body .app-shell,
body[data-page] .app-shell{
  grid-template-columns:var(--sg-sidebar-width) minmax(0,1fr)!important;
}
body .sidebar,
body[data-page] .sidebar{
  width:var(--sg-sidebar-width)!important;
  height:100vh!important;
  padding:0 11px 12px!important;
  background:#0a0f16!important;
  border-right:1px solid rgba(255,255,255,.065)!important;
}
body .brand,
body[data-page] .brand{
  flex:0 0 var(--sg-header-height)!important;
  height:var(--sg-header-height)!important;
  min-height:var(--sg-header-height)!important;
  margin:0!important;
  padding:0 10px!important;
  display:flex!important;
  align-items:center!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
}
body .brand-lockup{gap:10px!important}
body .brand-symbol{
  width:32px!important;
  height:32px!important;
  flex:0 0 32px!important;
}
body .brand-wordmark{
  font-size:17px!important;
  font-weight:690!important;
  letter-spacing:-.042em!important;
}
body #navigation{padding-top:11px}
body .nav-group{margin-bottom:16px!important}
body .nav-label{
  padding:0 9px 7px!important;
  font-size:9px!important;
  line-height:1.2!important;
  letter-spacing:.14em!important;
}
body .nav-button{
  height:37px!important;
  padding:0 10px!important;
  border-radius:9px!important;
  font-size:13px!important;
}
body .nav-icon{width:18px!important;height:18px!important}
body .agent-navigator{
  margin-top:auto!important;
  padding:11px!important;
  border-radius:12px!important;
}

body .workspace{min-width:0!important}
body .topbar,
body[data-page] .topbar{
  box-sizing:border-box!important;
  width:100%!important;
  height:var(--sg-header-height)!important;
  min-height:var(--sg-header-height)!important;
  padding:0 var(--sg-content-x)!important;
  display:flex!important;
  align-items:center!important;
  background:rgba(9,13,19,.96)!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
}
body .page-heading,
body[data-page] .page-heading{
  display:grid!important;
  gap:3px!important;
  align-content:center!important;
  min-height:48px!important;
}
body .page-heading .eyebrow,
body[data-page] .page-heading .eyebrow{
  display:none!important;
}
body .page-heading h1,
body[data-page] .page-heading h1{
  margin:0!important;
  font-size:22px!important;
  line-height:1.08!important;
  font-weight:650!important;
  letter-spacing:-.03em!important;
}
body .page-heading p,
body[data-page] .page-heading p{
  margin:0!important;
  max-width:none!important;
  font-size:12px!important;
  line-height:1.25!important;
  color:#8490a1!important;
  white-space:nowrap!important;
}
body .topbar-actions{
  flex-wrap:nowrap!important;
  gap:8px!important;
}
body .topbar-actions>button,
body .topbar #primaryTopAction,
body .topbar .attention-button{
  height:var(--sg-control-height)!important;
  min-height:var(--sg-control-height)!important;
  padding:0 13px!important;
  border-radius:10px!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:590!important;
  box-shadow:none!important;
}
body .topbar #primaryTopAction{
  background:#f4f5f7!important;
  color:#11151b!important;
  border-color:#f4f5f7!important;
}
body .topbar #primaryTopAction:hover{background:#fff!important;border-color:#fff!important}
body .topbar #primaryTopAction:active{transform:none!important;background:#e7e9ed!important}

body .content,
body[data-page] .content{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:28px var(--sg-content-x) 64px!important;
}
body .content>.stack{width:100%!important}

/* Keep the Web Studio action system visually consistent with the header. */
body .web-studio-refresh{gap:14px!important}
body .web-studio-toolbar{min-height:46px!important}
body .web-run-header .primary-button{
  height:36px!important;
  min-height:36px!important;
  padding:0 14px!important;
  border-radius:10px!important;
  background:#f4f5f7!important;
  border-color:#f4f5f7!important;
  color:#11151b!important;
  font-size:12px!important;
  font-weight:620!important;
  box-shadow:none!important;
}
body .web-run-header .primary-button:hover{background:#fff!important;border-color:#fff!important}
body .web-run-header .primary-button:active{transform:none!important;background:#e7e9ed!important}
body .web-mode-card>.secondary-button,
body .web-accounts-header .secondary-button,
body .web-show-accounts,
body .web-run-actions .secondary-button{
  min-height:34px!important;
  height:34px!important;
  border-radius:9px!important;
  font-size:10px!important;
}

@media(max-width:1280px){
  :root{--sg-sidebar-width:212px;--sg-content-x:24px}
}


/* v10 — dark action hierarchy and unified surface system
   Primary actions use a restrained slate-blue treatment instead of a white SaaS pill.
   Overview panels now share the same surfaces as Web Studio. */
:root{
  --sg-action-bg:#19263a;
  --sg-action-bg-hover:#1d2d45;
  --sg-action-bg-active:#152135;
  --sg-action-border:#344b6b;
  --sg-action-border-hover:#405c82;
  --sg-action-text:#edf3ff;
  --sg-action-accent:#8eafff;
  --sg-secondary-action-bg:#121a25;
  --sg-secondary-action-bg-hover:#17212e;
  --sg-secondary-action-border:#293647;
}

/* Header action: neutral, compact and intentionally secondary to the workflow CTA. */
body .topbar #primaryTopAction{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:0 13px 0 11px!important;
  background:var(--sg-secondary-action-bg)!important;
  color:#e5eaf2!important;
  border:1px solid var(--sg-secondary-action-border)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 1px 2px rgba(0,0,0,.28)!important;
}
body .topbar #primaryTopAction::before{
  content:"+";
  display:grid;
  place-items:center;
  width:14px;
  height:14px;
  color:#9db6e8;
  font-size:15px;
  line-height:1;
  font-weight:480;
}
body .topbar #primaryTopAction:hover{
  background:var(--sg-secondary-action-bg-hover)!important;
  border-color:#35465c!important;
  color:#fff!important;
}
body .topbar #primaryTopAction:active{
  background:#0f1721!important;
  border-color:#263444!important;
  transform:translateY(1px)!important;
}

/* Main workflow action: deep slate-blue, not bright blue and not white. */
body .web-run-header .primary-button{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  min-width:151px!important;
  padding:0 13px 0 15px!important;
  background:var(--sg-action-bg)!important;
  color:var(--sg-action-text)!important;
  border:1px solid var(--sg-action-border)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.34)!important;
}
body .web-run-header .primary-button::after{
  content:"→";
  color:var(--sg-action-accent);
  font-size:14px;
  line-height:1;
  transform:translateY(-.5px);
}
body .web-run-header .primary-button:hover{
  background:var(--sg-action-bg-hover)!important;
  border-color:var(--sg-action-border-hover)!important;
  color:#fff!important;
}
body .web-run-header .primary-button:active{
  background:var(--sg-action-bg-active)!important;
  border-color:#2c4160!important;
  transform:translateY(1px)!important;
}

/* The Overview must use the exact same panel family as Web Studio. */
body[data-page="overview"] .overview-alert-card-v22,
body[data-page="overview"] .overview-analytics-card-v22,
body[data-page="overview"] .overview-panel-v22{
  background:var(--surface-1)!important;
  border-color:var(--border)!important;
  box-shadow:none!important;
}
body[data-page="overview"] .overview-analytics-header-v22,
body[data-page="overview"] .overview-panel-v22>header{
  background:var(--surface-1)!important;
}
body[data-page="overview"] .overview-metric-tabs-v22,
body[data-page="overview"] .overview-chart-shell-v22,
body[data-page="overview"] .overview-account-list-v22,
body[data-page="overview"] .overview-activity-list-v22{
  background:var(--surface-1)!important;
}
body[data-page="overview"] button.overview-metric-tab-v22.active{
  background:rgba(111,147,245,.035)!important;
}

/* Avoid the Overview having a separate blue-black skin from the rest of the app. */
body[data-page="overview"]{
  --surface-1:#0f1620;
  --surface-2:#131c27;
  --surface-3:#182331;
}

/* v11 — exact Overview/Web Studio surface parity.
   The Overview had a separate blue-biased card tone inherited from its old theme.
   Use the same literal card fill and border values as Web Studio instead of route-local variables. */
:root{
  --sg-unified-card:#0e1620;
  --sg-unified-card-subtle:#0f1822;
  --sg-unified-border:#293746;
  --sg-unified-border-soft:#1b2734;
}

body[data-page="overview"]{
  --canvas:#080b10!important;
  --sidebar:#0a0f16!important;
  --surface-1:var(--sg-unified-card)!important;
  --surface-2:#131c27!important;
  --surface-3:#182331!important;
  --border:var(--sg-unified-border)!important;
  --border-soft:var(--sg-unified-border-soft)!important;
}

body[data-page="overview"] .overview-alert-card-v22,
body[data-page="overview"] .overview-analytics-card-v22,
body[data-page="overview"] .overview-panel-v22,
body[data-page="overview"] .overview-analytics-header-v22,
body[data-page="overview"] .overview-panel-v22>header,
body[data-page="overview"] .overview-metric-tabs-v22,
body[data-page="overview"] .overview-chart-shell-v22,
body[data-page="overview"] .overview-account-list-v22,
body[data-page="overview"] .overview-activity-list-v22{
  background:var(--sg-unified-card)!important;
  border-color:var(--sg-unified-border)!important;
  box-shadow:none!important;
}

/* Metric cells stay on the same base surface; only the active state gets a restrained tint. */
body[data-page="overview"] .overview-metric-tab-v22{
  background:var(--sg-unified-card)!important;
}
body[data-page="overview"] button.overview-metric-tab-v22.active{
  background:var(--sg-unified-card-subtle)!important;
}

/* v12 — actual current Overview selectors.
   v11 targeted obsolete .v22 classes while the rendered Overview uses .v30,
   so the visible card fills never changed. These rules deliberately use the
   exact Web Studio base panel tokens. */
:root{
  --sg-web-panel:#0f1620;
  --sg-web-panel-border:#293746;
  --sg-web-panel-divider:#1b2734;
}

body[data-page="overview"]{
  --surface-1:var(--sg-web-panel)!important;
  --border:var(--sg-web-panel-border)!important;
  --border-soft:var(--sg-web-panel-divider)!important;
}

body[data-page="overview"] .overview-alert-card-v30,
body[data-page="overview"] .overview-analytics-card-v30,
body[data-page="overview"] .overview-panel-v30,
body[data-page="overview"] .overview-analytics-header-v30,
body[data-page="overview"] .overview-metric-tabs-v30,
body[data-page="overview"] .overview-chart-wrap-v30,
body[data-page="overview"] .overview-panel-v30 > header,
body[data-page="overview"] .overview-account-list-v30,
body[data-page="overview"] .overview-activity-list-v30{
  background:var(--sg-web-panel)!important;
  border-color:var(--sg-web-panel-border)!important;
  box-shadow:none!important;
}

body[data-page="overview"] .overview-metric-tab-v30,
body[data-page="overview"] button.overview-metric-tab-v30.active,
body[data-page="overview"] button.overview-metric-tab-v30:hover{
  background:var(--sg-web-panel)!important;
}

body[data-page="overview"] .overview-metric-tabs-v30,
body[data-page="overview"] .overview-panel-v30 > header,
body[data-page="overview"] .overview-account-row-v30,
body[data-page="overview"] .overview-activity-row-v30{
  border-color:var(--sg-web-panel-divider)!important;
}