/*
 * TTech OneStop - same look as the TTech Portal and the monitoring system:
 * light background, white panels with a soft shadow, 10px corners, olive accent, pill buttons.
 * Copyright (c) 2026 Toupin Technologies Inc. All rights reserved.
 *
 * Linked by the page shell (TTech.Platform.Server\Components\App.razor), after MudBlazor. Since design system wave 0.4
 *   (V1.62) this file holds only what every page shares: the base, the start-up screen's frame (the shell: os.css since wave 0.7),
 *   panels, pill buttons and .btn, toolbars, tables, the portal editor's shared parts, the shared lists and chips that
 *   several apps use (kpis, status, grid-2, chart-box, timeline, demo bar), the sign-in and legal pages, the menu items of the
 *   context menu, the dark-theme patches of the shared parts.
 *   The rules of one area moved, unchanged, into their own files, linked RIGHT AFTER this one in the order they had here
 *   (so each rule keeps its place in the cascade): home.css (home-, welcome, quick links, chg-), admin.css (app-tile,
 *   admin-, Access's matrix), monitoring.css (client-card, sev, wall-, srv-, if-, incident-), management.css (mg-, pay-),
 *   account.css (client Management ac-), messaging.css (msg-, msg2-, us-), support.css (sup-), training.css (tr-),
 *   azurecosts.css (az-), tools.css (tl-). An app wave edits its own file, never this one.
 *   Targets (tg-), CONNECT Helper (cn-), Downtime (dt-), Reporting portal (rp-, pbi-, piv-) and Weather (wx-) have their
 *   own files (targets.css, connect.css, downtime.css, portal.css, weather.css), linked after this one: their rules win over a rule here of the same weight.
 *   The tokens (colours, radius, shadow) are in tokens.css (design system 1.0, linked right after this file); MudBlazor
 *   gets the same values from Client DesignTokens.cs (a test keeps both equal).
 * Dark theme: <html data-theme="dark"> (set before the first paint by App.razor, switched by the sun | moon of the top bar,
 *   ThemeState.cs) gives every token its dark value (tokens.css). Use the tokens, never a
 *   fixed light colour (#ffffff, #f8f9fb...): a fixed colour stays light in the dark theme. The few colours that have no
 *   token get their dark value in the "Dark theme" section at the end of this file. Check a change in both themes.
 * Before removing a rule, search the class in every .razor and .cs file: some classes are built in code
 * ("ac-" states of AccountClient.cs, the event names of the client Monitoring timeline...).
 */

/* The colour and size tokens (--panel, --muted, --accent, --radius...) are in tokens.css since design system 1.0
   (wave 0 step 2): there they are aliases of the --os- tokens (Source\Docs\Design system), light and dark. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: var(--os-font-ui);   /* Inter (tokens.css) */
  background: var(--background);
  color: var(--text);
}

/* The bar on top, the page below: only the page scrolls */
body { display: flex; flex-direction: column; }

a { color: inherit; }
code { padding: 1px 5px; border-radius: 4px; background: var(--code-bg); font-size: 0.85em; }

/* ---- Start-up screen (until the UI is loaded in the browser) ---- */
.boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--background);
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.3px;
}
/* Its logo and animations (since V1.11): boot.css */

.error-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: none;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bad-soft);
  color: var(--bad);
  font-weight: 700;
}
.error-bar .reload { color: var(--bad); }
.error-bar .dismiss { margin-left: auto; cursor: pointer; }

/* Outfit (SIL Open Font License, fonts.google.com/specimen/Outfit), the typeface of the OneStop wordmark: served by the
   website itself (fonts\outfit-latin.woff2: Latin, every weight), nothing is asked of Google */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/outfit-latin.woff2") format("woff2");
}

.brand-gold { color: var(--brand-gold); }
/* A person's initials (comment threads, answers, Drill Coach): on accent-soft as the design system's .os-avatar (Design
   system.md 4.18, wave 0.7: the hard-coded gradient went) */
.avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--os-accent-soft);
  color: var(--os-accent-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; }
/* Inside a frame (app shown in the Reporting portal's viewer): no bars (the shell: os.css) */
html.framed .content { padding: 8px; }

.content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  /* V1.39: a block of its own for the absolutely placed (the screen readers' hidden texts, .m2-sr): without it they sat below the
     window, outside this scroll area, and made the whole window scroll beside it (two scroll bars side by side on the Training page) */
  position: relative;
}
.content:focus, .content:focus-visible { outline: none; }

/* ---- Panels and pill buttons (the portal's report tabs) ---- */
.subtabs, .panel, .info-card, .viewer-wrap, .dept-tabs {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.subtabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
}
.subtabs-divider { padding: 0 4px; color: var(--muted); }

.subtab {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--chip);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.subtab-count { margin-left: 4px; }   /* "Unknown senders (1)": a flex item loses its leading space */
.subtab:hover { background: var(--chip-hover); }
.subtab.active { background: var(--os-accent-fill); color: var(--os-on-accent-fill); }
.subtab.quiet { background: transparent; color: var(--muted); }
.subtab.quiet:hover { background: var(--chip); }
.subtab.disabled, .subtab:disabled { background: var(--chip); color: var(--faint); cursor: not-allowed; opacity: 0.65; }
/* Applications that open in a separate browser tab */
.subtab.external::after { margin-left: 6px; content: "\2197"; font-weight: 400; opacity: 0.7; }

.btn {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--btn);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
}
.btn:hover:not(:disabled) { background: var(--btn-hover); }
.btn:disabled { cursor: not-allowed; opacity: 0.55; }
/* The main action of a toolbar or a form (V1.62: Tasks and Filon's My pages used "btn primary" with no global rule, so
   their main buttons looked plain). A link styled as a button keeps the same look. */
.btn.primary { border-color: var(--os-accent-fill); background: var(--os-accent-fill); color: var(--os-on-accent-fill); text-decoration: none; }
.btn.primary:hover:not(:disabled) { background: var(--os-accent-fill-hover); }
/* A smaller button inside a panel (AiBriefPanel, the Energy cockpit; V1.62: moved here from emis-cockpit.css, which only
   Energy loads) */
.btn.btn-small { padding: 2px 6px; min-height: 0; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 2px; }
.toolbar .spacer { flex: 1; }
.toolbar-title { padding: 0 6px 0 2px; font-size: 1.05rem; font-weight: 900; }

.panel { min-width: 0; padding: 14px 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.panel h2, .panel h3 { margin: 0; font-size: 1rem; font-weight: 800; }
.panel h3 { margin: 18px 0 6px; }
.panel p { margin: 8px 0; }
.narrow-panel { width: 100%; max-width: 640px; margin: 24px auto; }
.hint { color: var(--muted); font-size: 0.82rem; }
.muted { color: var(--muted); }
.strong { font-weight: 700; }
.warn { color: var(--warn); font-weight: 600; }
.groups { margin: 4px 0; padding-left: 20px; }

.empty { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 24px; color: var(--muted); text-align: center; }
.error { padding: 10px 14px; border-radius: 8px; background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.notice { padding: 10px 14px; border-radius: 8px; background: var(--accent-soft); font-weight: 600; }

/* ---- Side navigation of Administration > Portal configuration (dept-), viewer layout of the incident page ---- */
.sidebar { display: flex; min-height: 0; flex-direction: column; overflow: hidden; }
.dept-list { min-height: 0; flex: 1; overflow: auto; }
.dept-item {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-align: left;
}
.dept-item:hover { background: var(--btn-hover); }
.dept-item.active { background: var(--os-accent-fill); color: var(--os-on-accent-fill); }
.dept-item.sub { padding-left: 22px; font-weight: 600; }
.dept-item.has-error:not(.active) { color: var(--bad); }
.nav-title {
  padding: 14px 16px 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.sidebar-footer { padding: 8px; border-top: 1px solid var(--border); }
.viewer-wrap { display: flex; min-height: 0; flex: 1; flex-direction: column; margin-top: 12px; overflow: hidden; }
.viewer-body-grid { display: grid; grid-template-columns: minmax(0, 1fr) 210px; flex: 1; gap: 12px; min-height: 0; padding: 12px; }

.meta-panel { display: flex; width: 210px; min-width: 0; flex-direction: column; gap: 10px; overflow: hidden; }
.meta-actions { display: flex; width: 100%; flex-direction: column; gap: 10px; }
.meta-actions .btn { width: 100%; white-space: nowrap; }
.info-card { padding: 12px; }
.info-card h4 { margin: 0 0 8px; color: var(--muted); font-size: 0.95rem; }
.info-card .value { font-weight: 700; line-height: 1.35; white-space: pre-wrap; }

/* ---- Tables ---- */
.table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.table th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.table td { padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table tr.link { cursor: pointer; }
.table tr.link:hover td { background: var(--accent-soft); }
.table .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.table .nowrap { white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.edit-table td { padding: 4px 6px; }
.edit-table .narrow { width: 110px; }
.edit-table .action-cell { width: 48px; text-align: center; }

/* ---- Portal configuration editor ---- */
.editor-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; align-items: start; }
.editor-grid .sidebar { position: sticky; top: 0; max-height: calc(100vh - 140px); }
.editor h2 { font-size: 1.1rem; font-weight: 900; margin-bottom: 10px; }
.head-actions { display: flex; align-items: center; gap: 4px; }
.change-status { color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.change-status.dirty { color: var(--warn); }
.form-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.form-row > * { flex: 1 1 220px; }
.report-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-2);
}
.report-row { display: grid; grid-template-columns: minmax(160px, 1.3fr) minmax(140px, 1fr) minmax(150px, 1fr) auto; gap: 10px; align-items: center; }
.row-actions { display: flex; gap: 2px; }
.url-row { display: flex; align-items: flex-start; gap: 10px; }
.url-row > .mud-input-control { flex: 1; }
.url-app-menu { flex: 0 0 auto; margin-top: 6px; }
.issues { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.issues h3 { margin: 6px 0 2px; font-size: 0.85rem; }
.error-title { color: var(--bad); }
.warn-title { color: var(--warn); }
.issue { padding: 3px 0; border: 0; background: none; color: var(--text); cursor: pointer; font: inherit; font-size: 0.85rem; text-align: left; }
.issue:hover { text-decoration: underline; }
.error-issue::before { content: "✕ "; color: var(--bad); font-weight: 800; }
.warn-issue::before { content: "! "; color: var(--warn); font-weight: 800; }

/* ---- Small screens ---- */
@media (max-width: 1000px) {
  .editor-grid { grid-template-columns: 1fr; }
  .editor-grid .sidebar { position: static; max-height: none; }
  .report-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px) {
  .viewer-body-grid { grid-template-columns: 1fr; overflow: auto; }
  .meta-panel { display: grid; grid-template-columns: 1fr 1fr; width: auto; }
  .meta-actions { grid-column: 1 / -1; flex-direction: row; }
}

/* ==== Born with Monitoring (same look as the former monitoring site), now shared by many apps; Monitoring's own rules: monitoring.css ==== */
.updated { color: var(--faint); font-size: 0.78rem; white-space: nowrap; }

/* Headline numbers */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { padding: 12px 16px; }
.kpi .label { color: var(--muted); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; }
.kpi .value { margin-top: 2px; font-size: 1.9rem; font-weight: 900; line-height: 1.15; }
.kpi .sub { color: var(--muted); font-size: 0.8rem; }
.kpi.alert .value { color: var(--bad); }

.status {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--chip);
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}
.status.open { background: var(--text); color: var(--panel); }
.status.acknowledged { background: var(--os-accent); color: var(--os-on-accent); }
.status.resolved { background: var(--chip); color: var(--muted); }
/* Administration > Demo databases */
.status.good { background: var(--good); color: var(--on-accent); }
.status.bad { background: var(--bad-soft); color: var(--bad); }

.table tr.resolved td { color: var(--muted); }
.table .server { font-weight: 700; white-space: nowrap; }
.table .problem { min-width: 180px; overflow-wrap: anywhere; }
.table .problem small { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--muted); }
.table .sub { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 500; }

/* Inline bar of the "most frequent problems" table */
.bar-cell { width: 34%; }
.bar { position: relative; min-width: 3px; height: 10px; border-radius: 0 4px 4px 0; background: var(--sev); }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.grid-2 > .stack { display: flex; min-width: 0; flex-direction: column; gap: 12px; }
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.chart-box { min-height: 270px; }

/* Client demo apps: the demo bar (DemoBar), with the mine of the top bar and its operator for the apps that follow it */
.demo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 12px;
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.demo-badge {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--os-accent);
  color: var(--os-on-accent);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.demo-mine { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; font-size: 0.86rem; }
.demo-mine .mud-icon-root { color: var(--accent); }
.demo-mine b { color: var(--text); font-weight: 900; }
.demo-client { font-weight: 800; }
.demo-sep { color: var(--accent); font-weight: 900; }
.demo-where { color: var(--muted); font-weight: 600; }
/* A phone: where the mine is goes on its own line, without a dot at its start */
@media (max-width: 720px) {
  .demo-sep:has(+ .demo-where) { display: none; }
  .demo-where { flex-basis: 100%; }
}
.demo-note { margin-left: auto; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.demo-top { margin-bottom: 12px; }   /* DemoBar alone at the top of an app (Downtime, Targets) */
.demo-label { color: var(--muted); font-size: 0.8rem; font-weight: 800; }
.demo-select {
  min-width: 220px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}
.kpi .value.small { font-size: 1.15rem; }

/* Incident page: the portal's viewer, content and a panel on the right; the page scrolls (no inner scroll) */
.viewer-wrap.incident { flex: none; margin-top: 0; overflow: visible; }
.viewer-main { display: flex; min-width: 0; flex-direction: column; gap: 12px; }
.meta-actions .mud-button-root { justify-content: center; width: 100%; }
.info-card .hint { margin-top: 6px; color: var(--muted); font-size: 0.78rem; }
.info-card a { color: var(--accent); font-weight: 800; }

.solution { font-size: 0.9rem; line-height: 1.5; }
.solution h2 { margin: 14px 0 4px; font-size: 0.95rem; font-weight: 800; }
.solution h2:first-child { margin-top: 0; }
.solution ol, .solution ul { margin: 4px 0; padding-left: 22px; }
.solution code { padding: 1px 4px; border-radius: 4px; background: var(--code-bg); font-size: 0.85em; }
.solution pre { overflow: auto; padding: 10px; border-radius: 8px; background: var(--background); }
.solution a { color: var(--accent); font-weight: 600; }
.solution-meta { margin-top: 10px; color: var(--faint); font-size: 0.76rem; }

.email-text {
  max-height: 420px;
  margin: 0;
  overflow: auto;
  padding: 12px;
  border-radius: 8px;
  background: var(--background);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
}

.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 0.85rem; }
.timeline .when { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline .what b { font-weight: 800; }
.timeline .details { color: var(--muted); overflow-wrap: anywhere; white-space: pre-wrap; }

@media (max-width: 1100px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .timeline li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---- Sign-in, mine picker, user menu (MainLayout, Pages\Login.razor); Administration > Clients (admin-): admin.css ---- */

/* Welcome page (/login): one card in the middle of the beige page */
.login-page { display: flex; flex: 1; align-items: center; justify-content: center; padding: 24px 0; }
.login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  padding: 32px 28px 24px;
  border-top: 4px solid var(--brand-gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}
.login-logo { width: 64px; height: 64px; }
.login-title { margin: 0; color: var(--text); font-family: var(--brand-font); font-size: 2.2rem; font-weight: 700; letter-spacing: -0.035em; }
.login-sub { margin: 0; color: var(--muted); font-family: var(--brand-font); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.login-text { margin: 6px 0 4px; color: var(--text); }
.login-card .error, .login-card .notice { width: 100%; text-align: left; }

/* Legal pages (Pages\Privacy.razor, Pages\Terms.razor, frame Shared\LegalPage.razor): public, a readable column of text */
.legal-page { display: flex; justify-content: center; padding: 24px 0 40px; }
.legal-card { width: min(100%, 760px); padding: 28px 32px; line-height: 1.55; }
.legal-card h1 { margin: 6px 0 2px; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.legal-card h2 { margin: 22px 0 6px; font-size: 1.02rem; font-weight: 800; }
.legal-card p, .legal-card li { color: var(--text); }
.legal-card ul { padding-left: 20px; }
.legal-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--brand-font); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.035em; text-decoration: none; }
.legal-brand svg { width: 32px; height: 32px; }
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 22px; font-size: 0.82rem; }
.legal-links a { color: var(--muted); }
.legal-links a:hover { color: var(--accent); }
@media (max-width: 600px) { .legal-card { padding: 20px 16px; } }
.login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 6px;
  padding: 11px 16px;
  border: 1px solid #8c8c8c;
  border-radius: 6px;
  background: #ffffff;
  color: #5e5e5e;
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
}
.login-button:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.ms-logo { width: 21px; height: 21px; }
.login-help { margin-top: 6px; }
.signin-refused h2 { display: flex; align-items: center; gap: 8px; }
button.subtab { border: 0; cursor: pointer; font: inherit; }

/* ==== Dark theme (html[data-theme="dark"]): what the tokens of :root cannot do alone ==== */
/* The logos' dark parts would vanish on the dark: their light-grey versions instead (same shapes) */
:root[data-theme="dark"] img[src="ttech-logo.svg"],
:root[data-theme="dark"] img[src="logo.png"] { content: url("ttech-logo-dark.svg"); }
:root[data-theme="dark"] img[src="logo.svg"] { content: url("logo-dark.svg"); }
/* The Microsoft sign-in button in its dark version (Microsoft's own guidelines: dark grey, white text) */
:root[data-theme="dark"] .login-button { border-color: #5e5e5e; background: #2f2f2f; color: #ffffff; }
:root[data-theme="dark"] .login-button:hover { border-color: var(--accent); background: #3a3a3a; }

/* Charts (ApexCharts): every app's chart follows the theme here, without being drawn again. The options of each chart give
   the light colours (axis labels #6b7280, grid #eeeeee, white gaps between stacked bars); CSS wins over those SVG
   attributes. The simulated Power BI reports (.pbi) keep Power BI's light look. */
:root[data-theme="dark"] :is(.apexcharts-xaxis-label, .apexcharts-yaxis-label, .apexcharts-xaxis-title-text, .apexcharts-yaxis-title-text):not(.pbi *) { fill: var(--muted); }
:root[data-theme="dark"] :is(.apexcharts-gridline, .apexcharts-grid-borders line, .apexcharts-xaxis-tick, .apexcharts-xaxis line, .apexcharts-yaxis line):not(.pbi *) { stroke: var(--border); }
:root[data-theme="dark"] .apexcharts-legend-text:not(.pbi *) { color: var(--text) !important; }
:root[data-theme="dark"] :is(.apexcharts-bar-area, .apexcharts-pie-area)[stroke="#ffffff"]:not(.pbi *),
:root[data-theme="dark"] :is(.apexcharts-bar-area, .apexcharts-pie-area)[stroke="#fff"]:not(.pbi *) { stroke: var(--panel); }
:root[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light:not(.pbi *) { border-color: var(--border); background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
:root[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title:not(.pbi *) { border-bottom-color: var(--border); background: var(--head-bg); color: var(--muted); }
:root[data-theme="dark"] .apexcharts-tooltip :is(.apexcharts-tooltip-text, .apexcharts-tooltip-text-y-label, .apexcharts-tooltip-text-y-value):not(.pbi *) { color: var(--text); }
:root[data-theme="dark"] .apexcharts-xaxistooltip:not(.pbi *) { border-color: var(--border); background: var(--head-bg); color: var(--text); }
:root[data-theme="dark"] .apexcharts-xaxistooltip-bottom:not(.pbi *)::after { border-bottom-color: var(--head-bg); }
:root[data-theme="dark"] .apexcharts-xaxistooltip-bottom:not(.pbi *)::before { border-bottom-color: var(--border); }
:root[data-theme="dark"] .apexcharts-menu:not(.pbi *) { border-color: var(--border); background: var(--panel); color: var(--text); }
:root[data-theme="dark"] .apexcharts-menu-item:hover { background: var(--chip); }
.nowrap { white-space: nowrap; }