/* ---------------------------------------------------------------
   Brand colour, 2026-10-07: more of the brand in the details, light and dark.
   Loaded last on dashboard.html and index.html, after theme.css.

   Colours come only from the brand tokens in /assets/tech9-ui.css (the
   "Brand colour" block: the logo's steel, cyan and green, the sign-in's
   button gradient, the website's four category hues). What it does:
     - the primary button and key calls to action in the brand gradient,
       dark lettering, as on the sign-in page and the website;
     - brand teal for the selected item, links, tabs, toggles and focus;
     - one category hue per area of the console (See, Operate, Govern,
       Migrate) for the page title's mark and the module homes' icon chips;
     - a thin brand edge on KPI tiles (brand colours, never traffic
       lights: a real failure keeps its one small red mark, theme.css);
     - the gradient in the empty states, loaders and the search's highlight.
   Status badges keep their brand-tuned success / warning / danger tokens.
----------------------------------------------------------------- */

/* ── Areas: which category hue a page wears (--t9-area / --t9-area-soft) ──
   The website's own grouping: See = dashboards, NoviQ, AssetIQ, analytics;
   Operate = Nutanix, IBM Power and the hyperscalers (compute, network,
   storage); Govern = FinOps360, Billing, ServiceIQ, support, access, audit;
   Migrate = SwiftIQ and DR. A page not listed wears the brand gradient. */
.page { --t9-area: var(--t9-brand-cyan); --t9-area-soft: var(--t9-selected-bg); --t9-area-mark: var(--t9-brand-gradient-v); }
:is(#page-consolidated, #page-customer-home, #page-customer-map, #page-noviq, #page-noviq-settings, #page-mod-ai, #page-mod-cx-ai,
  #page-itam-settings, [id^="page-analytics"], #page-reports, #page-activity, #page-cx-activity) {
  --t9-area: var(--t9-hue-see); --t9-area-soft: var(--t9-hue-see-soft); --t9-area-mark: var(--t9-hue-see);
}
:is(#page-home, #page-mod-power, #page-mod-aws, #page-mod-ibm-cloud, #page-mod-azure, #page-overview, #page-compute,
  #page-vm-detail, #page-all-vms, [id^="page-storage"], #page-object-storage, #page-file-system, #page-network-overview, #page-networking,
  #page-vpc-network, #page-l2-network, #page-nat-gateway, #page-load-balancers, #page-ssl-certificates, #page-firewall, #page-switches,
  #page-ipam, #page-images, #page-templates, #page-snapshots, #page-keypairs, #page-scheduler, #page-specification, #page-recycle-bin,
  #page-container-host, #page-catalog, #page-console, #page-cloud-accounts, #page-platform-connections, #page-cx-cloud-accounts,
  #page-cx-images, #page-cx-runbooks, #page-cx-workflows, #page-marketplace-apps, #page-quotas, #page-quota-requests,
  #page-public-ip-requests, #page-alerts, #page-alert-policies, #page-masked-alerts, #page-metrics-explorer, #page-security-alerts,
  #page-monitoring, #page-cx-monitoring) {
  --t9-area: var(--t9-hue-operate); --t9-area-soft: var(--t9-hue-operate-soft); --t9-area-mark: var(--t9-hue-operate);
}
:is([id^="page-finops"], #page-mod-finops, #page-mod-cx-finops, [id^="page-cx-finops"], #page-cx-spend, #page-billing, #page-mod-billing,
  #page-mod-cx-billing, #page-invoices, #page-account-invoices, #page-account-credits, #page-ratecard, #page-promos, #page-usage-alerts,
  #page-support, #page-support-cases, #page-support-case-detail, #page-cx-tickets, #page-mod-itsm, #page-mod-cx-itsm,
  #page-mod-itam, #page-mod-cx-itam, /* 2026-11-05: AssetIQ's module pages, with ServiceIQ's */
  #page-serviceiq-settings, #page-platform-audit-log, #page-audit, #page-users-access, #page-manage-users, #page-platform-mfa,
  #page-access, #page-console-roles, #page-policy-groups, #page-account-security, #page-account-team) {
  --t9-area: var(--t9-hue-govern); --t9-area-soft: var(--t9-hue-govern-soft); --t9-area-mark: var(--t9-hue-govern);
}
:is(#page-mod-migration, #page-mod-cx-migration, #page-swift-settings, #page-dr) {
  --t9-area: var(--t9-hue-migrate); --t9-area-soft: var(--t9-hue-migrate-soft); --t9-area-mark: var(--t9-hue-migrate);
}

/* A cloud's home (Nutanix; 2026-10-28: IBM Power's, #page-ibm-home, retired): each section card in its own hue, so
   compute, network and storage read apart at a glance.
   2026-10-07 (nav 1007 #2): by the card's kind (sidebar.js SECTION_KIND, one map for both clouds), so the same
   kind of section wears the same hue on the Nutanix and IBM Power homes. Was by section id (kept):
:is(#page-home) :is([data-sidebar-group="compute"], [data-sidebar-group="vms"], [data-sidebar-group="images"],
  [data-sidebar-group="hosts"], [data-sidebar-group="console"], [data-sidebar-group="marketplace"], [data-sidebar-group="automation"]) {
  --t9-area: var(--t9-hue-operate); --t9-area-soft: var(--t9-hue-operate-soft);
}
:is(#page-home) :is([data-sidebar-group="network"], [data-sidebar-group="networks"], [data-sidebar-group="dashboard"],
  [data-sidebar-group="monitoring"], [data-sidebar-group="logs"], [data-sidebar-group="optimization"]) {
  --t9-area: var(--t9-hue-see); --t9-area-soft: var(--t9-hue-see-soft);
}
:is(#page-home) :is([data-sidebar-group="storage"], [data-sidebar-group="storages"], [data-sidebar-group="settings"]) {
  --t9-area: var(--t9-hue-steel); --t9-area-soft: var(--t9-hue-steel-soft);
}
:is(#page-home) :is([data-sidebar-group="iam"], [data-sidebar-group="approvals"], [data-sidebar-group="onboarding"],
  [data-sidebar-group="projects"]) {
  --t9-area: var(--t9-hue-govern); --t9-area-soft: var(--t9-hue-govern-soft);
} */
:is(#page-home) [data-section-kind="operate"] { --t9-area: var(--t9-hue-operate); --t9-area-soft: var(--t9-hue-operate-soft); }
:is(#page-home) [data-section-kind="see"] { --t9-area: var(--t9-hue-see); --t9-area-soft: var(--t9-hue-see-soft); }
:is(#page-home) [data-section-kind="storage"] { --t9-area: var(--t9-hue-steel); --t9-area-soft: var(--t9-hue-steel-soft); }
:is(#page-home) [data-section-kind="govern"] { --t9-area: var(--t9-hue-govern); --t9-area-soft: var(--t9-hue-govern-soft); }

/* ── Page title: a short mark in the gutter, the area's hue ─────────── */
.page .page-head h1, .page .sp-head h1 { position: relative; }
.page .page-head h1::before, .page .sp-head h1::before {
  content: ""; position: absolute; left: -13px; top: 5px; bottom: 5px; width: 3px; border-radius: 3px;
  background: var(--t9-area-mark);
}
@media (max-width: 720px) { .page .page-head h1::before, .page .sp-head h1::before { left: -9px; } }

/* ── Primary buttons and calls to action: the brand gradient ───────── */
.btn.primary, .t9-btn--primary, .auth-submit {
  background: var(--t9-brand-btn); border-color: transparent; color: var(--t9-on-brand); font-weight: var(--t9-fw-semibold);
  box-shadow: 0 2px 10px var(--t9-brand-glow);
  transition: filter var(--t9-dur) var(--t9-ease), box-shadow var(--t9-dur) var(--t9-ease);
}
.btn.primary:hover, .t9-btn--primary:hover:not(:disabled), .auth-submit:hover:not(:disabled) {
  background: var(--t9-brand-btn); border-color: transparent; color: var(--t9-on-brand); filter: brightness(1.05) saturate(1.05);
  box-shadow: 0 4px 18px var(--t9-brand-glow);
}
.btn.primary:disabled, .btn.primary:disabled:hover, .t9-btn--primary:disabled { background: var(--t9-brand-btn); color: var(--t9-on-brand); filter: grayscale(.35); box-shadow: none; }
.btn.primary svg, .t9-btn--primary .i { color: currentColor; }
:root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] .t9-btn--primary, :root[data-theme="dark"] .auth-submit {
  /* Dark: the same fill a touch quieter, so it sits on the black instead of glowing. */
  filter: saturate(.92); box-shadow: 0 2px 8px var(--t9-brand-glow);
}
:root[data-theme="dark"] .btn.primary:hover, :root[data-theme="dark"] .t9-btn--primary:hover:not(:disabled), :root[data-theme="dark"] .auth-submit:hover:not(:disabled) { filter: none; }

/* ── Sidebar: the current page's gradient mark ───────────────────── */
.sidebar .is-active { position: relative; }
.sidebar .is-active::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--t9-brand-gradient-v);
}
.sidebar .is-active .i:not(.i-brand) { color: var(--t9-icon-active); }
/* Folded to its icons: the mark stays on the rail's edge. */
@media (min-width: 721px) {
  .sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .is-active::before { top: 4px; bottom: 4px; }
}

/* ── Top bar: a hairline of the brand under it ───────────────────── */
.topbar { position: relative; }
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: var(--t9-brand-gradient); opacity: .55;
}
:root[data-theme="dark"] .topbar::after { opacity: .45; }

/* ── Tabs: the active one underlined in the gradient ─────────────── */
.t9-tab.is-active, .tabstrip .tab.active, .sp-tab[aria-selected="true"], .fx-tab.active {
  color: var(--t9-selected-text); border-bottom: 2px solid transparent; border-image: var(--t9-brand-gradient) 1;
}
:root[data-theme="dark"] :is(.t9-tab.is-active, .tabstrip .tab.active, .sp-tab[aria-selected="true"], .fx-tab.active) { color: var(--t9-text); }
.sp-tab[aria-selected="true"] .sp-count { background: var(--t9-primary); color: #fff; }

/* ── Eyebrows: the small uppercase headings in brand teal, as on the website ── */
.sidebar__heading, .eyebrow { color: var(--t9-eyebrow); }

/* ── Settings > Appearance: the previews' top bar in the brand ───── */
.ap-preview > span:nth-child(2) { background: var(--t9-brand-gradient) !important; opacity: .8; }

/* ── Selected and pressed: brand teal ─────────────────────────────── */
.segmented button.active, .segmented button[aria-pressed="true"], .segmented button[aria-selected="true"],
.btn.active, .btn[aria-pressed="true"] { border-color: var(--t9-selected-border); }
.segmented button:focus-visible { outline-color: var(--t9-focus); }
.filter-chip.active { box-shadow: inset 0 0 0 1px var(--t9-selected-border); }
/* Native checkboxes, radios and ranges in the brand teal. */
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--t9-primary); }
/* The avatar: a ring of the brand round the initial. */
.user-btn .avatar { background: var(--t9-selected-bg); color: var(--t9-selected-text); box-shadow: inset 0 0 0 1px var(--t9-selected-border); }

/* ── KPI tiles: a thin brand edge along the top ───────────────────── */
.kpi, .bz-tile, .dk-kpi, .fx-score {
  /* The edge, then a breath of the brand fading down from it. */
  background-image: var(--t9-brand-gradient), linear-gradient(180deg, color-mix(in srgb, var(--t9-brand-cyan) 7%, transparent), transparent) !important;
  background-size: 100% 3px, 100% 56px !important;
  background-repeat: no-repeat !important; background-position: 0 0 !important;
}
.kpi-value, .bz-value, .dk-kpi-value { font-variant-numeric: tabular-nums; }
.dk-kpi:hover:not(:disabled) { border-color: var(--t9-selected-border); }
.bz-trend { color: var(--t9-chart-1); }

/* ── Quick access, module homes and service cards: tinted icon chips ── */
.cx-qa-icon { background: var(--t9-hue-operate-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t9-hue-operate) 18%, transparent); }
.cx-qa-tile:hover { border-color: var(--t9-selected-border); box-shadow: 0 2px 12px var(--t9-brand-glow); }
.cx-qa-tile:hover .cx-qa-go { color: var(--t9-link); }
.service-card__icon { background: var(--t9-area-soft, var(--t9-selected-bg)); color: var(--t9-area, var(--t9-icon-active)); }
.service-card:hover { border-color: color-mix(in srgb, var(--t9-area, var(--t9-brand-cyan)) 45%, var(--t9-border)); }
:root[data-theme="dark"] .service-card:hover { border-color: color-mix(in srgb, var(--t9-area, var(--t9-brand-cyan)) 45%, var(--t9-border)); }
.quick-action .qa-icon { background: var(--t9-brand-btn); color: var(--t9-on-brand); }

/* ── Search (Ctrl K): the picked result's mark and highlight ─────── */
.gs-item { position: relative; }
.gs-item[aria-selected="true"]::before {
  content: ""; position: absolute; left: -4px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--t9-brand-gradient-v);
}
.gs-item[aria-selected="true"] .gs-icon { color: var(--t9-icon-active); border-color: var(--t9-selected-border); background: var(--t9-bg-surface); }
.gs-item mark { text-decoration-color: var(--t9-brand-cyan); }

/* ── Empty states and notes ──────────────────────────────────────── */
.fo-empty .fo-empty-icon {
  background: var(--t9-brand-wash); color: var(--t9-area, var(--t9-icon-active));
  box-shadow: inset 0 0 0 1px var(--t9-selected-border);
}
.empty-note {
  border-left-color: transparent;
  background: var(--t9-brand-gradient-v) 0 0 / 3px 100% no-repeat border-box, var(--panel-raised);
}
.empty-note svg { color: var(--t9-icon-active); }

/* ── Loaders ─────────────────────────────────────────────────────── */
.toast .spinner { border-top-color: var(--t9-brand-cyan); }
.skeleton > div { background: linear-gradient(90deg, var(--t9-skeleton) 0%, color-mix(in srgb, var(--t9-brand-cyan) 10%, var(--t9-skeleton)) 50%, var(--t9-skeleton) 100%); }
html.t9-preload #t9-preload .t9-preload__bar::before, :root[data-theme="dark"] #t9-preload .t9-preload__bar::before { background: var(--t9-brand-gradient); }

/* ── Bars, meters and gauges: severity keeps its steel scale (spec §8.1) ── */
.bar-fill.critical, .fo-bb-fill.critical, .nq-meter.is-bad > span { background: var(--t9-sev-critical); }
.bar-fill.warn, .nq-meter.is-warn > span { background: var(--t9-sev-warning); }
.bar-fill.good { background: var(--t9-accent-500); }
.sparkline-line { stroke: var(--t9-chart-1); }
.sparkline-area { fill: var(--t9-chart-1); }