/* ---------------------------------------------------------------
   The UI consistency pass, 2026-10-07 (shared spec §2–§4, §8): loaded after
   every other stylesheet on dashboard.html, so it can set the shell's look
   once for the staff console and the customer portal, in light and dark.

   Colours come only from the tokens in /assets/tech9-ui.css, whose dark set
   (:root[data-theme="dark"]) the theme switches; this file adds what a
   token alone can't: which logo shows, the shell's new pieces (the sidebar's
   fold arrow, the folded breadcrumbs, the legal footer, Settings >
   Appearance) and the few components that need a different treatment on
   dark rather than a different colour.
----------------------------------------------------------------- */

/* ── Logo: on the background, never on a plate (spec §2) ─────────────── */
.t9-logo--dark { display: none !important; }
:root[data-theme="dark"] .t9-logo--light { display: none !important; }
/* 2026-10-07 (logo pass): the dark logo is the sign-in app's transparent PNG (coloured lettering, light
   tagline), so no blending. Was, for the website's light-on-dark wordmark drawn on black:
   :root[data-theme="dark"] .t9-logo--dark { display: block !important; mix-blend-mode: screen; } */
:root[data-theme="dark"] .t9-logo--dark { display: block !important; }
@media (min-width: 721px) {
  .sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar__brand > img.t9-logo { display: none !important; }
  .sidebar-collapsed .sidebar.just-folded .sidebar__brand > img.t9-logo { display: none !important; }
}

/* ── The fixed shell: only the content scrolls (spec §8.3) ───────────── */
html, body { height: 100%; overflow: hidden; }
.t9-app { height: 100vh; height: 100dvh; overflow: hidden; }
.main-col { min-height: 0; }
.content { overflow-x: hidden; overscroll-behavior: contain; }
/* Wide tables scroll inside their own box, never the page. */
.table-wrap { max-width: 100%; overflow-x: auto; }
html.t9-preload, html.t9-preload body { overflow: hidden; }

/* ── Sidebar: the fold arrow at its foot (spec §4) ─────────────────── */
/* The top bar's menu button is the phone's drawer only now. */
@media (min-width: 721px) { button.hamburger-btn { display: none; } }
.sidebar__footer { display: flex; flex-direction: column; gap: 2px; }
.sidebar__collapse {
  align-self: flex-end; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: 2px 2px 0 0; padding: 0; border: 0; border-radius: var(--t9-radius-md);
  background: none; color: var(--t9-icon); cursor: pointer;
}
.sidebar__collapse:hover { background: var(--t9-bg-hover); color: var(--t9-text); }
.sidebar__collapse:focus-visible { outline: 2px solid var(--t9-focus); outline-offset: 1px; }
@media (max-width: 720px) { .sidebar__collapse { display: none; } }
@media (min-width: 721px) {
  .sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar__collapse,
  .sidebar-collapsed .sidebar.just-folded .sidebar__collapse { align-self: center; margin: 2px 0 0; }
  .sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar__footer,
  .sidebar-collapsed .sidebar.just-folded .sidebar__footer { padding: 8px 4px; }
  /* Just folded with the pointer still on it: stay folded until it leaves (dashboard.js). */
  .sidebar-collapsed .sidebar.just-folded { width: 48px !important; overflow: hidden !important; box-shadow: none !important; }
  .sidebar-collapsed .sidebar.just-folded .sidebar__brand { padding: 0 11px; }
  .sidebar-collapsed .sidebar.just-folded .sidebar__brand .sidebar__brand-mark { display: block; }
  .sidebar-collapsed .sidebar.just-folded :is(
    .sidebar__brand-divider, .sidebar__brand-name, .sidebar__heading, .sidebar__conn, .sidebar__item,
    .sidebar__who-text, .badge, .truncate, .eyebrow, .sidebar__topLink > span, .sidebar__group > span,
    .sidebar__back > span, .sidebar__signout > span, .sidebar__whoChev
  ) { display: none; }
  .sidebar-collapsed .sidebar.just-folded .sidebar__who { padding: 4px 0 8px; }
  /* Folded, the rail is the icons alone, centred. */
  .sidebar-collapsed .sidebar:not(:hover):not(:focus-within) :is(.sidebar__row, .sidebar__group, .sidebar__topLink, .sidebar__back),
  .sidebar-collapsed .sidebar.just-folded :is(.sidebar__row, .sidebar__group, .sidebar__topLink, .sidebar__back) { justify-content: center; padding-left: 0; padding-right: 0; }
  .sidebar-collapsed .sidebar:not(:hover):not(:focus-within) .sidebar__whoBtn,
  .sidebar-collapsed .sidebar.just-folded .sidebar__whoBtn { justify-content: center; padding: 6px 0; }
}

/* Monochrome icons in the portal's icon colour, the accent when active (spec §4). */
.sidebar__row-label .i:not(.i-brand), .sidebar__group .i, .sidebar__topLink .i, .sidebar__back .i, .sidebar__groupHead .i { color: var(--t9-icon); }
.sidebar .is-active .i:not(.i-brand) { color: var(--t9-icon-active); }
/* The sidebar's hover, on the chrome's own colour. */
.sidebar__row:hover, .sidebar__group:hover, .sidebar__topLink:hover, .sidebar__back:hover, .sidebar__item:hover { background: var(--t9-bg-hover) !important; }
.service-card__icon { color: var(--t9-icon-active); }

/* ── Top bar: search left, breadcrumbs right-aligned, icon buttons ──── */
.topbar { justify-content: flex-start; gap: 12px; }
.topbar > .search-wrap { flex: 0 1 280px; width: 280px; min-width: 0; }
.topbar .search-results { left: 0; right: auto; }
.topbar > .crumbs { margin-left: auto; justify-content: flex-end; flex: 0 1 auto; }
.topbar > .topbar__right { margin-left: 4px; }
@media (max-width: 720px) {
  .topbar > .search-wrap { flex: 1; width: auto; }
  .topbar > .topbar__right { flex: 0 0 auto; }
}
.refresh-btn { border: 0; }
.icon-btn-t9:hover { background: var(--t9-bg-hover); }

/* The user button: the initial alone; the name and email are in its tooltip and menu (spec §4). */
.user-btn { padding: 0 3px; gap: 0; border-radius: var(--t9-radius-full); }
.user-btn__name, .user-btn__chev { display: none !important; }
.avatar { background: var(--t9-brand-50); color: var(--t9-brand-700); font-size: var(--t9-fs-xs); }
.user-btn .avatar { width: 30px; height: 30px; box-shadow: inset 0 0 0 1px var(--t9-border); }
.profile-menu__email { font-size: var(--t9-fs-xs); line-height: var(--t9-lh-xs); color: var(--t9-text-secondary); }
.profile-menu, .search-results, .notif-dropdown { background: var(--t9-bg-raised); }

/* NoviQ's button: its own picture (the website's NoviQ still), round. */
.nq-launch__img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; background: #ecf0f1; flex: none; }
.nq-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 22%; background: #ecf0f1; display: block; }

/* ── Breadcrumbs: "… › Nutanix › Compute" (crumbs.js) ─────────────── */
.crumbs .crumbs__more { display: inline-flex; flex: none; }
.crumbs .crumbs__ellipsis {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 4px;
  border-radius: var(--t9-radius-sm); color: var(--t9-text-secondary); text-decoration: none; letter-spacing: .05em;
}
.crumbs .crumbs__ellipsis:hover, .crumbs .crumbs__ellipsis[aria-expanded="true"] { background: var(--t9-bg-hover); color: var(--t9-text); text-decoration: none; }
.crumbs__menu {
  position: fixed; z-index: 720; display: flex; flex-direction: column; min-width: 180px; max-width: 320px; padding: 4px;
  background: var(--t9-bg-raised); border: 1px solid var(--t9-border); border-radius: var(--t9-radius-lg); box-shadow: var(--t9-shadow-xl);
}
.crumbs__menu[hidden] { display: none; }
.crumbs .crumbs__menu .crumbs__menuItem {
  display: block; width: 100%; padding: 6px 10px; border-radius: var(--t9-radius-md); text-align: left;
  font-size: var(--t9-fs-sm); line-height: var(--t9-lh-sm); color: var(--t9-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crumbs .crumbs__menu button.crumbs__menuItem:hover, .crumbs .crumbs__menu button.crumbs__menuItem:focus-visible { background: var(--t9-bg-hover); color: var(--t9-text); text-decoration: none; outline: none; }
.crumbs .crumbs__menuItem--text { color: var(--t9-text-faint); }
.crumbs__current { color: var(--t9-text-title2); }
.crumbs > .crumbs__text { overflow: hidden; text-overflow: ellipsis; }

/* ── Footer: the website's legal pages (spec §4/§5) ────────────────── */
.app-legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 0; padding: 0 0 8px; }
.app-legal > a { color: var(--t9-text-secondary); text-decoration: none; }
.app-legal > a::before { content: '·'; margin: 0 8px; color: var(--t9-text-faint); }
.app-legal > a:hover { color: var(--t9-link); text-decoration: underline; }

/* ── Settings > Appearance (appearance-ui.js) ────────────────────── */
.ap-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; }
.ap-option { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--t9-border); border-radius: var(--t9-radius-lg); background: var(--t9-bg-surface); cursor: pointer; }
.ap-option:hover { border-color: var(--t9-border-control); }
.ap-option:has(input:checked) { border-color: var(--t9-accent-500); box-shadow: 0 0 0 1px var(--t9-accent-500) inset; }
.ap-option:has(input:focus-visible) { outline: 2px solid var(--t9-focus); outline-offset: 2px; }
.ap-option input { position: absolute; opacity: 0; pointer-events: none; }
.ap-text { display: flex; flex-direction: column; gap: 2px; }
.ap-text b { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--t9-fw-semibold); color: var(--t9-text); }
.ap-text b .i { color: var(--t9-icon); }
.ap-option:has(input:checked) .ap-text b .i { color: var(--t9-icon-active); }
.ap-preview { display: grid; grid-template-columns: 28% 1fr; grid-template-rows: 14px 1fr; gap: 4px; height: 76px; padding: 6px; border-radius: var(--t9-radius-md); border: 1px solid var(--t9-border); }
.ap-preview > span { border-radius: 3px; }
.ap-preview > span:nth-child(1) { grid-row: 1 / span 2; }
.ap-preview > span:nth-child(2) { grid-column: 2; }
.ap-preview--light { background: #f8fafc; }
.ap-preview--light > span:nth-child(1) { background: #ffffff; box-shadow: inset 0 0 0 1px #e2e8f0; }
.ap-preview--light > span:nth-child(2) { background: #e2e8f0; }
.ap-preview--light > span:nth-child(3) { background: #ffffff; box-shadow: inset 0 0 0 1px #e2e8f0; }
.ap-preview--dark { background: #05080b; }
.ap-preview--dark > span:nth-child(1) { background: #0a0e12; box-shadow: inset 0 0 0 1px #212c35; }
.ap-preview--dark > span:nth-child(2) { background: #212c35; }
.ap-preview--dark > span:nth-child(3) { background: #0d1217; box-shadow: inset 0 0 0 1px #212c35; }
.ap-preview--system { background: linear-gradient(90deg, #f8fafc 0 50%, #05080b 50% 100%); }
.ap-preview--system > span { background: rgba(127, 140, 152, .28); box-shadow: inset 0 0 0 1px rgba(127, 140, 152, .35); }
.ap-now { margin: 12px 0 0; }

/* ── Toasts: one look, newest on top (spec §8.7) ─────────────────── */
.toast { background: var(--t9-bg-raised); }
.toast.warning { border-left-color: var(--t9-warning-200); }
.toast.warning .toast-icon { background: var(--t9-warning-50); color: var(--t9-warning-700); }
#toast-host:empty { display: none; }

/* ── KPI tiles: the brand palette, an accent outline for "needs attention" (spec §8.1) ── */
.kpi.warn, .kpi.is-warn, .kpi--warn, .bz-tile--warn, .cmap-kpi--warn, .dk-kpi--warn {
  background: var(--t9-bg-surface) !important; border-color: var(--t9-accent-500) !important; box-shadow: inset 0 0 0 1px var(--t9-accent-500);
}
.bz-tile--bad { background: var(--t9-bg-surface) !important; border-color: var(--t9-border) !important; box-shadow: inset 3px 0 0 var(--t9-danger-500); }

/* ── Dark: components that need more than a token ─────────────────── */
:root[data-theme="dark"] body { background: var(--t9-bg-page); }
:root[data-theme="dark"] .panel, :root[data-theme="dark"] .kpi, :root[data-theme="dark"] .service-card,
:root[data-theme="dark"] .hyper-card, :root[data-theme="dark"] .t9-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); }
:root[data-theme="dark"] .service-card:hover { border-color: var(--t9-brand-300); }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { color-scheme: dark; }
:root[data-theme="dark"] img.os-logo, :root[data-theme="dark"] .vm-os-logo img { filter: none; }
/* Third-party marks drawn dark on transparent (os-logos.js, cloud-icons.svg): a
   subtle plate only where the mark would be unreadable on dark (spec §2). */
:root[data-theme="dark"] .vm-os-logo { background: var(--t9-logo-plate); }
:root[data-theme="dark"] code, :root[data-theme="dark"] kbd { background: var(--t9-code-bg); color: var(--t9-code-text); }
:root[data-theme="dark"] .modal-overlay, :root[data-theme="dark"] .form-dialog-overlay { background: var(--t9-overlay); }
:root[data-theme="dark"] ::selection { background: rgba(70, 196, 242, .28); color: var(--t9-text); }
/* The preloader's own inline style is light; on dark its page and bar follow the theme. */
:root[data-theme="dark"].t9-preload #t9-preload { background: var(--t9-bg-page, #05080b); color: #8f9fab; }
:root[data-theme="dark"] #t9-preload .t9-preload__bar { background: #212c35; }
:root[data-theme="dark"] #t9-preload .t9-preload__bar::before { background: #46c4f2; }

/* ── Bars and meters: the brand palette, darker as they fill (spec §8.1) ── */
.bar-fill.critical, .fo-bb-fill.critical, .nq-meter.is-bad > span { background: var(--t9-chart-3); }
.bar-fill.warn, .nq-meter.is-warn > span { background: var(--t9-chart-1); }
.bar-fill.good { background: var(--t9-accent-500); }
.dk-kpi.warn { background: var(--t9-bg-surface); border-color: var(--t9-accent-500); }
.dk-kpi.warn .dk-kpi-value { color: var(--t9-text); }
/* The preloader's light wordmark, readable on the dark page. */
:root[data-theme="dark"] #t9-preload img { filter: brightness(1.45); }

/* NoviQ's picture (the website's NoviQ still, /assets/noviq.webp) in its chat
   and panel, where the sparkles mark was. */
.nq-avatar--img { padding: 0; overflow: hidden; border-radius: 50%; background: #ecf0f1; box-shadow: 0 0 0 1px rgba(70, 196, 242, .45); }
.nq-empty__mark--img { width: 64px; height: 64px; padding: 0; overflow: hidden; border-radius: 50%; background: #ecf0f1; box-shadow: 0 0 0 1px rgba(70, 196, 242, .45); }
/* A card's footnote, moved behind an ⓘ in its header (dash-kit.js footnotesToTip). */
.panel-head .dk-foot-tip { display: inline-flex; align-items: center; margin-left: 4px; }
/* A failing KPI tile or health ring: one small error mark, not a red tile (spec §8.1). */
.dk-kpi.critical { background: var(--t9-bg-surface); border-color: var(--t9-border); box-shadow: inset 3px 0 0 var(--t9-danger-500); }
.health-ring.critical { background: var(--t9-bg-surface); color: var(--t9-text); border-color: var(--t9-danger-500); }
.kpi-value.critical, .kpi .critical-text { color: var(--t9-text); }