/* PowerManagerPro Cortex — site styles (foundation slice)
   Visual tokens from [008 §5.2]. */

:root {
    /* Typography (doc 050 §5 — themeable font stack). */
    --pmpc-font: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Chrome — dark, matching the Cortex login. */
    --pmpc-header-bg-from: #1a1a1a;
    --pmpc-header-bg-to:   #0d0d0d;
    --pmpc-sidebar-bg:     #000;
    --pmpc-sidebar-text:   #cccccc;
    --pmpc-footer-bg:      #0d0d0d;
    --pmpc-footer-text:    #cccccc;

    /* Brand accent. doc 048 §4.5 (Option C): brand is BLUE; orange is freed to
       mean heat/caution. The dim variants are for focus rings / hover tints. */
    --pmpc-accent:         #2563EB;
    --pmpc-accent-soft:    rgba(37, 99, 235, 0.18);
    --pmpc-accent-tint:    rgba(37, 99, 235, 0.08);
    --pmpc-accent-text:    #ffffff;   /* readable on the blue accent fill */
    --pmpc-accent-bright:  #3b82f6;   /* lighter accent — small text on dark chrome */
    --pmpc-accent-hover:   #1d4ed8;   /* primary-button hover */
    --pmpc-accent-active:  #1e40af;   /* primary-button active */

    /* Sidebar active state — full brand background, white text. */
    --pmpc-sidebar-active:      var(--pmpc-accent);
    --pmpc-sidebar-active-text: var(--pmpc-accent-text);

    /* Panel header — unified navy (doc 048 §4.3); neutral against the accent. */
    --pmpc-panel-header-bg:   #1f2733;
    --pmpc-panel-header-text: #ffffff;
    --pmpc-heading-ink:       #1f2733;   /* dark heading text on light surfaces */

    /* Content + data-area tokens. Light backgrounds stay for readability. */
    --pmpc-content-bg:     #f5f5f5;
    --pmpc-card-bg:        #ffffff;
    --pmpc-text:           #333333;
    --pmpc-text-muted:     #6c757d;
    --pmpc-border:         #dddddd;

    /* CTA / "→ link" color — matches the brand accent. */
    --pmpc-link:           var(--pmpc-accent);

    --pmpc-success:        #16A34A;
    --pmpc-warning:        #F59E0B;
    --pmpc-danger:         #DC2626;
    --pmpc-info:           #0891B2;
    --pmpc-header-height:  60px;
    --pmpc-sidebar-width:  210px;
    --pmpc-footer-height:  30px;
    --pmpc-radius:         4px;   /* small elements: inputs, pills, badges */
    /* doc 048 §10 — one card radius + one subtle resting elevation. */
    --pmpc-card-radius:    8px;
    --pmpc-card-shadow:    0 1px 2px rgba(0, 0, 0, 0.04);
}

html, body {
    height: 100%;
    margin: 0;
}

.pmpc-body {
    font-family: var(--pmpc-font);
    font-size: 12px;
    color: var(--pmpc-text);
    background: var(--pmpc-content-bg);
}

/* ── App shell ─────────────────────────────────────────────────────── */
.app-shell {
    display: grid;
    grid-template-rows: var(--pmpc-header-height) 1fr var(--pmpc-footer-height);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* ── Header ────────────────────────────────────────────────────────── */
.app-header {
    background: linear-gradient(to bottom, var(--pmpc-header-bg-from), var(--pmpc-header-bg-to));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    /* Two shadows in one rule: a 3px inset top stripe (Cortex accent, doesn't
       change the layout box) + the existing drop-shadow. */
    box-shadow:
        inset 0 3px 0 var(--pmpc-accent),
        0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 10;
}
.app-header__brand   { font-size: 16px; font-weight: 600; letter-spacing: 0.2px; }
.app-brand-mark      { color: #fff; }
.app-brand-mark--accent { color: var(--pmpc-accent); margin-left: 6px; }
.app-header__nav     { display: flex; align-items: center; gap: 16px; }
.app-header__link    { color: #ddd; text-decoration: none; font-size: 12px; }
.app-header__link:hover { color: var(--pmpc-accent); text-decoration: none; }
/* Per-page Help trigger styled as a header link (doc 054). */
button.page-help-trigger { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.page-help-trigger .bi { font-size: 13px; vertical-align: -1px; }
.app-header__user    { color: #fff; font-size: 12px; padding-left: 12px; border-left: 1px solid #444; }
.app-header__logout-form { margin: 0; }
.app-header__logout-btn {
    background: transparent;
    border: 1px solid var(--pmpc-accent);
    color: var(--pmpc-accent);
    padding: 4px 10px; border-radius: var(--pmpc-radius); font-size: 11px; cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}
.app-header__logout-btn:hover {
    background: var(--pmpc-accent);
    color: var(--pmpc-accent-text);
}
/* Header account dropdown (doc 069 nav refresh) — My Account / Change Password / Logout. */
.app-header__account { padding-left: 12px; border-left: 1px solid #444; }
.app-header__account-toggle {
    background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
    color: #fff; font-size: 12px; display: inline-flex; align-items: center; gap: 6px;
}
.app-header__account-toggle:hover { color: var(--pmpc-accent); }
.app-header__account .dropdown-menu { font-size: 13px; }
.app-header__account .dropdown-item { display: flex; align-items: center; gap: 8px; }
.app-header__account .app-header__logout-form { margin: 0; }

/* ── Header enhancements (doc 048 §4.4): logo, search, status badge ──── */
/* Brand is now a home link: hawk logo + wordmark. */
.app-header__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.app-header__brand:hover { text-decoration: none; }
.app-header__logo { display: inline-flex; align-items: center; }
.app-header__logo .brand-logo-svg { height: 30px; width: auto; display: block; }
/* Custom uploaded logo (doc 051) — same footprint as the default mark. */
.app-header__logo-img { height: 30px; width: auto; max-width: 180px; display: block; object-fit: contain; }

/* Right cluster holds search + status + the existing nav. */
.app-header__right { display: flex; align-items: center; gap: 18px; }

/* Global meter search. */
.header-search { position: relative; display: flex; align-items: center; }
.header-search__icon { position: absolute; left: 10px; color: #888; font-size: 13px; pointer-events: none; }
.header-search__input {
    width: 220px; max-width: 30vw;
    background: rgba(255,255,255,0.08);
    border: 1px solid #333;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    font-family: inherit;
    padding: 6px 10px 6px 30px;
    transition: border-color .15s, background .15s;
}
.header-search__input::placeholder { color: #999; }
.header-search__input:focus {
    outline: none;
    border-color: var(--pmpc-accent);
    background: rgba(255,255,255,0.14);
    box-shadow: 0 0 0 3px var(--pmpc-accent-soft);
}
.header-search__results {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 280px;
    background: #fff; color: var(--pmpc-text);
    border: 1px solid var(--pmpc-border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.28);
    overflow: hidden; z-index: 50;
}
.header-search__item {
    display: block; padding: 8px 12px; font-size: 12px; color: var(--pmpc-text);
    text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-search__item:hover, .header-search__item.is-active {
    background: var(--pmpc-accent); color: var(--pmpc-accent-text);
}

/* Fleet-health + active-alarm badges. */
.app-header__status { display: flex; align-items: center; gap: 8px; }
.hstatus {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 12px; font-size: 11px; font-weight: 600;
    text-decoration: none; border: 1px solid #333; white-space: nowrap;
    background: rgba(255,255,255,0.06); color: #ddd;
    font-variant-numeric: tabular-nums;
}
.hstatus:hover { filter: brightness(1.12); text-decoration: none; }
.hstatus__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.hstatus--health.is-ok   .hstatus__dot { background: var(--pmpc-success); }
.hstatus--health.is-warn .hstatus__dot { background: var(--pmpc-warning); }
.hstatus--health.is-warn { color: #fff; }
.hstatus--alarm.is-quiet { color: #9aa7b4; }
.hstatus--alarm.is-alarm { background: var(--pmpc-danger); color: #fff; border-color: var(--pmpc-danger); }

/* ── Main (sidebar + content) ──────────────────────────────────────── */
.app-main {
    display: grid;
    grid-template-columns: var(--pmpc-sidebar-width) 1fr;
    overflow: hidden;
}

/* ── Sidebar ───────────────────────────────────────────────────────── */
.app-sidebar {
    background: var(--pmpc-sidebar-bg);
    color: var(--pmpc-sidebar-text);
    overflow-y: auto;
    padding: 12px 0;
}
.nav-tree { list-style: none; padding: 0; margin: 0; }
.nav-tree__item { margin: 0; }
.nav-tree__item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: var(--pmpc-sidebar-text);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    font-size: 13px;
}
.nav-tree__item a i {
    width: 18px;
    flex: 0 0 18px;
    text-align: center;
    font-size: 14px;
    opacity: 0.8;
}
.nav-tree__item.is-active a i { opacity: 1; }
.nav-tree__item a:hover { background: var(--pmpc-accent-tint); color: #fff; }
.nav-tree__item.is-active a {
    background: var(--pmpc-sidebar-active);
    color: var(--pmpc-sidebar-active-text);
    font-weight: 600;
}
.nav-tree__item.is-active a:hover {
    /* Don't fade the active item on hover. */
    background: var(--pmpc-sidebar-active);
    color: var(--pmpc-sidebar-active-text);
}
/* Section labels for the grouped nav (doc 048 §4.1). */
.nav-tree__section {
    padding: 10px 16px 5px;
    margin-top: 8px;
    font-size: 10px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    border-top: 1px solid #1c1c1c;
}
.nav-tree__section:first-child { margin-top: 0; border-top: none; }

/* ── Content ───────────────────────────────────────────────────────── */
.app-content {
    background: var(--pmpc-content-bg);
    overflow: auto;
    padding: 20px;
}
.app-content__card {
    background: var(--pmpc-card-bg);
    border: 1px solid var(--pmpc-border);
    border-radius: var(--pmpc-radius);
    padding: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    min-height: 100%;
    box-sizing: border-box;
}

/* ── Footer ────────────────────────────────────────────────────────── */
.app-footer {
    background: var(--pmpc-footer-bg);
    color: var(--pmpc-footer-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    font-size: 11px;
}
.app-footer__center { font-variant-numeric: tabular-nums; }

/* ── Page header (within content) ─────────────────────────────────── */
.page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid var(--pmpc-border);
    padding-bottom: 12px;
    margin-bottom: 16px;
}
.page-title { font-size: 18px; font-weight: 600; margin: 0; }
.page-toolbar { display: flex; align-items: center; gap: 12px; }
/* Low-prominence link to the DashboardPlus showcase (doc 048 §4.2). */
.dbplus-link { font-size: 11px; color: var(--pmpc-text-muted); text-decoration: none; }
.dbplus-link:hover { color: var(--pmpc-link); text-decoration: underline; }

/* ── Dashboard tiles ──────────────────────────────────────────────── */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.dashboard-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.kpi-tile {
    background: #fafafa;
    border: 1px solid var(--pmpc-border);
    border-radius: 8px;   /* standardized to match DashboardPlus cards */
    padding: 14px;
    display: flex;
    flex-direction: column;
    min-height: 120px;
}
.kpi-tile__label {
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--pmpc-text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.kpi-tile__value { font-size: 24px; font-weight: 600; color: var(--pmpc-text); }
.kpi-tile__sub   { font-size: 11px; color: var(--pmpc-text-muted); margin-top: 4px; }
.kpi-tile__link {
    margin-top: auto;
    font-size: 11px;
    color: var(--pmpc-link);
    text-decoration: none;
    align-self: flex-end;
}
.kpi-tile__link:hover { text-decoration: underline; }
/* Plain-number KPI tiles (Meters/System/Circuits at Risk) have no chart, so when the grid
   stretches them to the gauge tiles' height they'd show a big gap above the bottom link.
   margin-top:auto on the value + the link's own margin-top:auto split the free space evenly,
   vertically centring the value block. (doc 052 Item 10 — #1 vertical balance.) */
.kpi-tile--stat .kpi-tile__value { margin-top: auto; }

/* ── Panel (the wider dashboard cards) ────────────────────────────── */
.panel {
    background: #fafafa;
    border: 1px solid var(--pmpc-border);
    border-radius: 8px;   /* standardized to match DashboardPlus cards */
    overflow: hidden;
}
.panel__header {
    background: var(--pmpc-panel-header-bg);   /* DashboardPlus dark-navy header */
    color: var(--pmpc-panel-header-text);
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
/* ⓘ help pill sits muted on the dark header, brightens on hover (mirrors .dbp-card__header). */
.panel__header .info-pill { color: #9aa7b4; }
.panel__header .info-pill:hover { color: #fff; }
.panel__body { padding: 14px; }
.panel__body--placeholder {
    color: var(--pmpc-text-muted);
    font-style: italic;
    min-height: 100px;
}

/* Full-width dashboard row (status pill grid lives here). */
.dashboard-grid--full { grid-template-columns: 1fr; }

/* ── Top consumers table ──────────────────────────────────────────── */
.top-consumers { width: 100%; border-collapse: collapse; font-size: 12px; }
.top-consumers td { padding: 4px 6px; vertical-align: middle; }
.top-consumers .rank { width: 26px; color: var(--pmpc-text-muted); }
.top-consumers .name { font-weight: 500; }
.top-consumers .kwh  { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.top-consumers .bar  { width: 38%; }
.top-consumers .bar-fill {
    height: 8px;
    background: var(--pmpc-accent);
    border-radius: 4px;
}

/* ── Recent alarms list ──────────────────────────────────────────── */
.recent-alarms { width: 100%; border-collapse: collapse; font-size: 12px; }
.recent-alarms td { padding: 4px 6px; vertical-align: middle; }
.recent-alarms .dot   { width: 24px; }
.recent-alarms .ts    { width: 80px; font-variant-numeric: tabular-nums; color: var(--pmpc-text-muted); }
.recent-alarms .what  { font-weight: 500; }
.recent-alarms .where { font-size: 11px; }

/* ── Breaker utilization panel ───────────────────────────────────── */
.breaker-util { width: 100%; border-collapse: collapse; font-size: 12px; }
.breaker-util td { padding: 4px 6px; vertical-align: middle; }
.breaker-util .rank { width: 26px; color: var(--pmpc-text-muted); }
.breaker-util .name { font-weight: 500; }
.breaker-util .num  { width: 72px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.breaker-util .bar  { width: 35%; }
.breaker-util .bar-fill         { height: 8px; border-radius: 4px; min-width: 2px; }
.breaker-util .bar-fill--ok     { background: var(--pmpc-success); }
.breaker-util .bar-fill--warn   { background: var(--pmpc-warning); }
.breaker-util .bar-fill--crit   { background: var(--pmpc-danger); }

/* ── Meter status pill grid ──────────────────────────────────────── */
.meter-pill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
}
.meter-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #fff;
    border: 1px solid var(--pmpc-border);
    border-radius: var(--pmpc-radius);
    font-size: 12px;
}
.meter-pill__dot { flex: 0 0 auto; }
.meter-pill__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Monitoring · picker grid ────────────────────────────────────── */
.monitor-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.monitor-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--pmpc-border);
    border-left-width: 3px;          /* status accent rail (doc 052 Item 12) — grey by default */
    border-radius: var(--pmpc-radius);
    padding: 12px 14px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.monitor-card:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
/* Status rail — worst of connectivity + alarms (mirrors the KPI/Dashboard accent language). */
.monitor-card--ok   { border-left-color: var(--pmpc-success); }
.monitor-card--warn { border-left-color: var(--pmpc-warning); }
.monitor-card--crit { border-left-color: var(--pmpc-danger);  }
.monitor-card--off  { border-left-color: #aaa; opacity: 0.85; }
/* The meter you last looked at (shared across views, doc 052 Item 11) — a brand-blue
   ring marks it; the status rail stays visible. */
.monitor-card.is-last-meter {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.22);
}
.monitor-card__head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    margin-bottom: 4px;
}
/* Head: name on the left, live kW pushed to the right. */
.monitor-card__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monitor-card__kw   { font-weight: 600; font-size: 13px; color: var(--pmpc-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Meta line: a small protocol badge + the (de-emphasised) model/IP. */
.monitor-card__sub {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--pmpc-text-muted); margin-bottom: 6px;
}
.monitor-card__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monitor-card__type {
    flex: 0 0 auto; font-size: 9px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
    padding: 1px 5px; border-radius: 999px; line-height: 1.5;
}
.monitor-card__type--cortex { background: #e7effb; color: #2563EB; }
.monitor-card__type--modbus { background: #ede7fb; color: #7c3aed; }
/* Mini-sparkline (server SVG). */
.monitor-card__spark-wrap { margin: 2px 0 6px; }
.monitor-card__spark { display: block; width: 100%; height: 26px; }
/* Stats row: sub-meters · peak util · alarm pill (wraps if tight). */
.monitor-card__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; }
.monitor-card__stat { color: var(--pmpc-text-muted); }
.monitor-card__stat strong { color: var(--pmpc-text); }
.monitor-card__stat--util.is-warn strong { color: var(--pmpc-warning); }
.monitor-card__stat--util.is-crit strong { color: var(--pmpc-danger); }
.monitor-card__alarm-pill {
    font-size: 11px; font-weight: 600; line-height: 1.5;
    padding: 1px 7px; border-radius: 999px;
    background: var(--pmpc-danger); color: #fff;
}
.monitor-card__noalarm { font-size: 11px; color: var(--pmpc-success); }
/* Foot pinned to the bottom so cards in a row align. */
.monitor-card__foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: auto; padding-top: 8px;
}
.monitor-card__seen { font-size: 11px; color: var(--pmpc-text-muted); }
.monitor-card__cta  { font-size: 11px; color: var(--pmpc-sidebar-active); }

/* ── Monitoring · per-meter live page ───────────────────────────── */
.monitor-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--pmpc-border);
    border-radius: var(--pmpc-radius);
    background: #fff;
    font-size: 11px;
}
.monitor-status__dot { color: var(--pmpc-success); animation: pulse 2s ease-in-out infinite; }
.monitor-status.is-paused { background: #fff8e1; border-color: var(--pmpc-warning); }
.monitor-status.is-paused .monitor-status__dot { animation: none; color: var(--pmpc-warning); }
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* Gently glowing "working…" pill shown while the on-prem LLM processes (accent tokens, no
   hardcoded hex; respects reduced-motion). Two users share the one effect:
     • #ask-spinner.ask-thinking — the Ask box "Thinking…" indicator (shown/hidden by htmx
       via .htmx-indicator; this only styles its visible state).
     • .pmpc-thinking — the Briefing "Generating briefing… (processing for N seconds)"
       placeholder (a live counter driven by a small inline script in Insights/Index.cshtml). */
#ask-spinner.ask-thinking,
.pmpc-thinking {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    color: var(--pmpc-accent);
    font-weight: 600;
    animation: ask-thinking-glow 1.8s ease-in-out infinite;
}
@keyframes ask-thinking-glow {
    0%, 100% { background: var(--pmpc-accent-tint); box-shadow: 0 0 0 0 transparent; }
    50%      { background: var(--pmpc-accent-soft); box-shadow: 0 0 14px 2px var(--pmpc-accent-soft); }
}
@media (prefers-reduced-motion: reduce) {
    #ask-spinner.ask-thinking,
    .pmpc-thinking { animation: none; background: var(--pmpc-accent-tint); }
}

/* AI Insights "Ask" result table — right-aligned numeric columns use tabular (fixed-width)
   figures so digits line up cleanly down the column. Alignment itself is set per-column in
   _AskResult.cshtml (AskTableFormat.AlignClass); this only refines the numeric cells. */
.ask-result-table td.text-end,
.ask-result-table th.text-end { font-variant-numeric: tabular-nums; }

.monitor-table { font-size: 12px; }
.monitor-table .col-toggle { width: 28px; }
.monitor-table .fm-toggle {
    background: none;
    border: 1px solid transparent;
    padding: 0 4px;
    font-size: 12px;
    cursor: pointer;
    color: var(--pmpc-text-muted);
    border-radius: 3px;
}
.monitor-table .fm-toggle:hover { border-color: var(--pmpc-border); color: var(--pmpc-text); }
.monitor-table .fm-row.is-expanded { background: #f4f6f8; }
.monitor-table .fm-row.is-expanded .fm-toggle { color: var(--pmpc-sidebar-active); }

.channel-host { background: #f8fafb; }
.channel-host__body { padding: 8px 12px 12px !important; }
.channel-table { background: #fff; margin-bottom: 0; font-size: 11px; }
.channel-table thead th {
    background: #eef2f5;
    color: #555;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Utilization color thresholds (009 §4.2 notes) */
.util-warn     { color: #fff; background: var(--pmpc-warning); }
.util-critical { color: #fff; background: var(--pmpc-danger); font-weight: 600; }

/* ── Charts page ─────────────────────────────────────────────────── */
.charts-toolbar {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pmpc-border);
    flex-wrap: wrap;
    font-size: 12px;
}
.charts-toolbar label { margin: 0; }

/* Small info icon used next to form labels — pairs with
   Bootstrap's data-bs-toggle="tooltip" (init lives in shell.js). */
.info-pill {
    display: inline-block;
    margin: 0 4px 0 2px;
    color: var(--pmpc-text-muted);
    font-size: 11px;
    cursor: help;
    user-select: none;
}
.info-pill:hover { color: var(--pmpc-link); }

/* FlexMeter multi-select picker on the Charts toolbar. JS-populated from
   /Meters/FlexMeters when the user picks a Meter. */
.flex-multi-picker__wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-right: 8px;
    min-width: 220px;
}
.flex-multi-picker__label {
    font-size: 12px;
    color: var(--pmpc-text);
}
.flex-multi-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 6px;
    background: #fafafa;
    border: 1px solid var(--pmpc-border);
    border-radius: var(--pmpc-radius);
    max-width: 520px;
    max-height: 80px;
    overflow-y: auto;
}
.flex-multi-picker label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #fff;
    border: 1px solid var(--pmpc-border);
    border-radius: 12px;
    font-size: 11px;
    cursor: pointer;
    user-select: none;
}
.flex-multi-picker label:hover { background: #eef2f5; }
.flex-multi-picker label.is-checked {
    background: var(--pmpc-link);
    color: #fff;
    border-color: var(--pmpc-link);
}
.flex-multi-picker input { margin: 0; display: none; }
.flex-multi-picker__actions {
    display: flex;
    gap: 0;
    font-size: 11px;
}
.flex-multi-picker__actions .btn-link {
    padding: 0 6px;
    font-size: 11px;
    text-decoration: none;
}

.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 16px;
}
/* Full-width chart tile (e.g. Breaker Utilization Trend in row 4). */
.chart-tile--full { grid-column: 1 / -1; }
.chart-tile {
    background: #fff;
    border: 1px solid var(--pmpc-border);
    border-radius: 8px;   /* doc 048 §4.3 — unified card radius */
    overflow: hidden;
}
.chart-tile__header {
    background: var(--pmpc-panel-header-bg);
    color: var(--pmpc-panel-header-text);
    padding: 6px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    border-bottom: 1px solid var(--pmpc-border);
}
.chart-tile__canvas { padding: 4px 8px; min-height: 240px; }
.chart-tile__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chart-tile__expand {
    color: #9aa7b4;
    font-size: 13px;
    text-decoration: none;
    opacity: 0.6;
    flex-shrink: 0;
    padding: 0 2px;
    line-height: 1;
}
.chart-tile__expand:hover { opacity: 1; color: var(--pmpc-accent, #2563EB); }

/* ── Charts: single-tile zoom page ─────────────────────────────── */
.chart-zoom__canvas { padding: 8px; height: 520px; }

/* ── Heat Map page ───────────────────────────────────────────────── */
.heatmap-toolbar {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pmpc-border);
    flex-wrap: wrap;
    font-size: 12px;
}
.heatmap-toolbar label { margin: 0; }

.heatmap-card {
    background: #fff;
    border: 1px solid var(--pmpc-border);
    border-radius: 8px;   /* doc 048 §4.3 — unified card radius */
    overflow: hidden;
}
.heatmap-card__header {
    background: var(--pmpc-panel-header-bg);
    color: var(--pmpc-panel-header-text);
    padding: 6px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    border-bottom: 1px solid var(--pmpc-border);
}
.heatmap-canvas { padding: 4px 8px; min-height: 400px; }

/* ── Admin pages ─────────────────────────────────────────────────── */
.admin-form { max-width: 880px; }
.admin-form--narrow { max-width: 440px; }
.admin-form .form-text { font-size: 11px; color: var(--pmpc-text-muted); }

.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px;
}
.about-section {
    background: #fff;
    border: 1px solid var(--pmpc-border);
    border-radius: var(--pmpc-radius);
    padding: 14px 18px;
}
.about-section__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--pmpc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pmpc-border);
}
.about-dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 12px; margin: 0; }
.about-dl dt { color: var(--pmpc-text-muted); font-weight: 600; }
.about-dl dd { margin: 0; }
.about-dl__multiline { white-space: pre-wrap; word-break: break-word; }
.about-table { font-size: 12px; margin-bottom: 0; }
.about-table code { font-size: 11px; }

/* ── HTTPS / Certificate runbook (doc 069 Phase C) ───────────────── */
.cert-runbook { border: 1px solid var(--pmpc-border); border-radius: var(--pmpc-radius); margin-top: 10px; }
.cert-runbook > summary {
    cursor: pointer; font-weight: 600; font-size: 13px;
    padding: 8px 12px; color: var(--pmpc-accent);
}
.cert-runbook[open] > summary { border-bottom: 1px solid var(--pmpc-border); }
.cert-runbook > ol { font-size: 12px; margin: 10px 0 12px; padding-left: 28px; }
.cert-runbook > ol li { margin-bottom: 4px; }

/* ── My Account (doc 061) ────────────────────────────────────────── */
.acct-id { display: flex; align-items: center; gap: 14px; }
.acct-monogram {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--pmpc-accent, #2563EB);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; line-height: 1;
}
.acct-id__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.acct-badge {
    font-size: 11px; font-weight: 600;
    color: var(--pmpc-accent, #2563EB);
    background: color-mix(in srgb, var(--pmpc-accent, #2563EB) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--pmpc-accent, #2563EB) 35%, transparent);
    border-radius: 999px; padding: 1px 9px;
}
.acct-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.acct-dot--ok  { background: var(--pmpc-success, #16A34A); }
.acct-dot--bad { background: var(--pmpc-danger,  #DC2626); }
.acct-table { font-size: 12px; }
.acct-ua { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Alarms page ─────────────────────────────────────────────────── */
.alarms-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--pmpc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 8px 0 8px;
}
.alarms-table .alarm-bits {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
    color: var(--pmpc-danger);
}

/* doc 083 — operator "Seen" awareness + triage (STRICTLY ADDITIVE; never changes alarm state). */
.btn-xs {
    padding: 0.05rem 0.4rem;
    font-size: 11px;
    line-height: 1.4;
    border-radius: 4px;
}
.ack-toolbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0 0 12px;
}
.ack-note-input { width: 18rem; max-width: 60vw; }
.ack-chips { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }
.ack-unack-toggle { font-size: 12px; color: var(--pmpc-text-muted); white-space: nowrap; }
.alarms-triage { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ack-cell { white-space: nowrap; }
.ack-seen-label { font-size: 11px; color: var(--pmpc-text-muted); }
/* "Unacknowledged only" filter — hide rows already marked Seen (client-side, re-applied after refresh). */
.alarms-unack-only .ack-row.ack-seen { display: none; }
.alarms-decoder {
    margin-top: 18px;
    padding: 10px 14px;
    background: #f8fafb;
    border: 1px solid var(--pmpc-border);
    border-radius: var(--pmpc-radius);
    font-size: 12px;
}
.alarms-decoder summary {
    cursor: pointer;
    color: var(--pmpc-sidebar-active);
    font-weight: 600;
}

/* ── Reports page ────────────────────────────────────────────────── */
.report-section {
    background: #fff;
    border: 1px solid var(--pmpc-border);
    border-radius: var(--pmpc-radius);
    padding: 14px 18px;
    margin-bottom: 14px;
}
.report-section__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--pmpc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pmpc-border);
}
.meter-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
}

/* Per-meter grouped FlexMeter picker on the Reports page. Each selected
   meter gets its own card so the user can pick exact (meter, slot) pairs. */
.flex-meter-group {
    background: #fafafa;
    border: 1px solid var(--pmpc-border);
    border-radius: var(--pmpc-radius);
    margin-bottom: 8px;
    overflow: hidden;
}
.flex-meter-group__header {
    background: #f0f2f4;
    color: var(--pmpc-text);
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    border-bottom: 1px solid var(--pmpc-border);
}
.flex-meter-group__body {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
}
.meter-picker-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #fafafa;
    border: 1px solid var(--pmpc-border);
    border-radius: var(--pmpc-radius);
    font-size: 12px;
    cursor: pointer;
}
.meter-picker-option:hover { background: #eef2f5; }
.meter-picker-option input { margin: 0; }

/* ── Coming soon ──────────────────────────────────────────────────── */
.coming-soon { padding: 40px 20px; text-align: center; }
.coming-soon__title { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.coming-soon__lead  { color: var(--pmpc-text); margin-bottom: 6px; }
.coming-soon__meta  { color: var(--pmpc-text-muted); font-size: 12px; }

/* ── Login page (Cortex Systems dark theme) ──────────────────────────
   Adapted from the InventoryWeb login design (2026-05-12). All assets
   (Inter font, Bootstrap Icons, Cortex logo) are vendored under
   wwwroot/lib and wwwroot/images so the app runs air-gapped. */
.pmpc-login-body {
    background: #111111;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pmpc-font);
    position: relative;
    overflow: hidden;
    margin: 0;
}
.pmpc-login-body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(37,99,235,0.10) 0%, transparent 70%);
    pointer-events: none;
}

.login-shell {
    width: 100%;
    min-width: 560px;
    max-width: 560px;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.login-top-bar {
    text-align: center;
    margin-bottom: 20px;
    font-size: 0.78rem;
    color: #aaaaaa;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.login-top-bar span {
    color: var(--pmpc-accent-bright);
    font-weight: 600;
}

.login-card {
    background: #1a1a1a;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    border: 1px solid #2a2a2a;
}

.login-card__header {
    background: #0d0d0d;
    border-top: 3px solid var(--pmpc-accent);
    color: #ffffff;
    padding: 36px 30px 28px;
    text-align: center;
}
.login-card__logo {
    max-width: 260px;
    width: 78%;
    height: auto;
    margin-bottom: 14px;
}
.login-card__title {
    margin: 0;
    font-weight: 700;
    font-size: 1.4rem;
    color: #cccccc;
    letter-spacing: 0.01em;
}

.login-card__body {
    padding: 36px 35px 32px;
    background: #1a1a1a;
}

.login-card__footer {
    background: #0d0d0d;
    border-top: 1px solid #222222;
    padding: 14px 20px;
    text-align: center;
    font-size: 0.8rem;
    color: #999999;
    line-height: 1.6;
}

/* Form ───────────────────────────────────────────── */
.login-form .form-label {
    font-weight: 600;
    color: #cccccc;
    margin-bottom: 6px;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}
.login-form__field { margin-bottom: 16px; }
.login-form__input-wrap { position: relative; }
.login-form__input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #666666;
    z-index: 10;
    font-size: 0.95rem;
}
.login-form__input,
.login-form .form-control {
    border-radius: 8px;
    border: 1.5px solid #333333;
    padding: 11px 15px 11px 40px;
    font-size: 0.95rem;
    font-family: var(--pmpc-font);
    background: #0d0d0d;
    color: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}
.login-form__input:focus,
.login-form .form-control:focus {
    background: #0d0d0d;
    color: #ffffff;
    border-color: var(--pmpc-accent);
    box-shadow: 0 0 0 3px var(--pmpc-accent-soft);
    outline: none;
}
.login-form__input::placeholder,
.login-form .form-control::placeholder { color: #555555; }

.login-form__field-error {
    color: #f1aeb5;
    font-size: 0.85rem;
    display: block;
    margin-top: 4px;
}
.login-form__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(248, 215, 218, 0.1);
    border: 1px solid rgba(245, 194, 199, 0.4);
    color: #f1aeb5;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}
.login-form__summary i { flex-shrink: 0; color: #ea868f; }
.login-form__summary:empty { display: none; }
.login-form__summary ul { margin: 0; padding: 0; list-style: none; }

.login-form__remember { margin: 14px 0 4px 0; }
.login-form__remember .form-check-label {
    color: #888888;
    font-size: 0.88rem;
}
.login-form__remember .form-check-input {
    accent-color: var(--pmpc-accent);
    border-color: #444444;
    background-color: #0d0d0d;
}
.login-form__remember .form-check-input:checked {
    background-color: var(--pmpc-accent);
    border-color: var(--pmpc-accent);
}

.login-form__submit {
    width: 100%;
    padding: 13px;
    background: var(--pmpc-accent);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--pmpc-font);
    letter-spacing: 0.02em;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    margin-top: 12px;
    cursor: pointer;
}
.login-form__submit:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
    color: #ffffff;
}

/* ── Bootstrap density tweak ──────────────────────────────────────── */
.form-control { font-size: 13px; }
.form-label   { font-size: 12px; margin-bottom: 4px; font-weight: 600; }

/* ── Cortex theme overrides for Bootstrap defaults ────────────────────
   Bootstrap ships with blue primary / blue focus rings. Replace those
   with the Cortex orange accent so the whole app reads as one design.
   The login page has its own scoped styles and is unaffected by these. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--pmpc-accent);
    box-shadow: 0 0 0 0.2rem var(--pmpc-accent-soft);
    outline: 0;
}
.form-check-input:checked {
    background-color: var(--pmpc-accent);
    border-color: var(--pmpc-accent);
}

.btn-primary {
    --bs-btn-color: var(--pmpc-accent-text);
    --bs-btn-bg: var(--pmpc-accent);
    --bs-btn-border-color: var(--pmpc-accent);
    --bs-btn-hover-color: var(--pmpc-accent-text);
    --bs-btn-hover-bg: var(--pmpc-accent-hover);
    --bs-btn-hover-border-color: var(--pmpc-accent-hover);
    --bs-btn-focus-shadow-rgb: 37, 99, 235;   /* residual: RGB triplet can't ref a hex token */
    --bs-btn-active-color: var(--pmpc-accent-text);
    --bs-btn-active-bg: var(--pmpc-accent-active);
    --bs-btn-active-border-color: var(--pmpc-accent-active);
    --bs-btn-disabled-color: var(--pmpc-accent-text);
    --bs-btn-disabled-bg: var(--pmpc-accent);
    --bs-btn-disabled-border-color: var(--pmpc-accent);
    font-weight: 600;
}

/* Links inside Bootstrap text-styled spans pick up our accent. */
.text-primary,
a.text-primary { color: var(--pmpc-accent) !important; }
.bg-primary    { background-color: var(--pmpc-accent) !important; color: var(--pmpc-accent-text); }

/* ── Meters page ──────────────────────────────────────────────────── */
.meters-toolbar {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pmpc-border);
}
.meters-toolbar__search { max-width: 280px; }
.meters-toolbar__status { display: flex; gap: 12px; align-items: center; font-size: 12px; }
.meters-table { font-size: 12px; }
.meters-table thead th {
    background: #f0f0f0;
    border-bottom: 2px solid var(--pmpc-border);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #555;
}
.meters-table thead th.sort-th { padding: 0; }
.sort-header {
    display: block;
    padding: 8px 12px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}
.sort-header:hover { background: #e4e9ee; color: #111; }
.sort-header.is-active { color: var(--pmpc-sidebar-active); background: #e8eef5; }
.meters-table tbody td { vertical-align: middle; }
.meters-table tbody tr:hover { background: #f8f9fa; }
.meters-table__error {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pmpc-danger);
    font-size: 11px;
}
.meters-table__footer { margin-top: 8px; }
.meters-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--pmpc-text-muted);
    font-style: italic;
    border: 1px dashed var(--pmpc-border);
    border-radius: var(--pmpc-radius);
}

/* ── Busway view (doc 026) ──────────────────────────────────────────── */
.busway-card {
    background: var(--pmpc-card-bg);
    border: 1px solid var(--pmpc-border);
    border-radius: 8px;   /* doc 048 §4.3 — unified card radius */
    margin-bottom: 16px;
}
.busway-card__header {
    background: var(--pmpc-panel-header-bg);
    color: var(--pmpc-panel-header-text);
    padding: 8px 14px;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
}
.busway-card__body { padding: 14px; }

/* Topology chain — horizontal scroll of anchor + card boxes */
.busway-chain {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
    padding-bottom: 6px;
}
.busway-box {
    border: 2px solid var(--pmpc-border);
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 150px;
    max-width: 190px;
    background: #fafafa;
    text-align: center;
    flex-shrink: 0;
}
.busway-box--anchor { background: #ececec; border-color: #999; }
.busway-box--card {
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.busway-box--card:hover {
    border-color: var(--pmpc-accent);
    box-shadow: 0 0 0 2px var(--pmpc-accent-soft);
}
.busway-box--card.is-selected {
    border-color: var(--pmpc-accent);
    border-width: 3px;
    box-shadow: 0 0 0 3px var(--pmpc-accent-soft);
    background: var(--pmpc-accent-tint);
}
.busway-box__title { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.busway-box__status { font-size: 11px; font-weight: 600; margin-bottom: 2px; }
.busway-box__detail { font-size: 11px; color: var(--pmpc-text-muted); line-height: 1.5; }
.busway-box__total { font-size: 11px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.busway-connector {
    align-self: center;
    height: 2px;
    min-width: 28px;
    flex: 0 0 28px;
    background: #999;
}
.busway-chain-help { text-align: center; color: var(--pmpc-text-muted); font-size: 12px; margin-top: 8px; }

/* Detail panel */
.busway-detail__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.busway-detail__title { font-weight: 700; font-size: 14px; }
.busway-detail__sub { font-size: 12px; color: var(--pmpc-text-muted); }
.busway-detail__stats { display: flex; gap: 24px; }
.busway-stat { text-align: center; }
.busway-stat__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--pmpc-text-muted);
}
.busway-stat__value { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Utilization levels — shared by chain status, peak stat, and bar fill */
.busway-util--none   { color: var(--pmpc-text-muted); }
.busway-util--ok     { color: var(--pmpc-success); }
.busway-util--warn   { color: var(--pmpc-warning); }
.busway-util--danger { color: var(--pmpc-danger); }

.busway-tap-util { display: flex; align-items: center; gap: 8px; }
.busway-util-bar {
    background: #e9ecef;
    height: 7px;
    border-radius: 4px;
    overflow: hidden;
    flex-grow: 1;
    min-width: 70px;
}
.busway-util-bar__fill { height: 100%; border-radius: 4px; transition: width 0.4s, background 0.4s; }
.busway-util-bar__fill.busway-util--none   { background: var(--pmpc-text-muted); }
.busway-util-bar__fill.busway-util--ok     { background: var(--pmpc-success); }
.busway-util-bar__fill.busway-util--warn   { background: var(--pmpc-warning); }
.busway-util-bar__fill.busway-util--danger { background: var(--pmpc-danger); }

.busway-phase {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    background: #eef2f7;
    color: #44546a;
}

/* ── BuswayPlus view (doc 031) ──────────────────────────────────────── */
/* Self-contained bwp-* classes (not shared with the frozen Busway view); reuse
   only the shared colour tokens so the two pages evolve independently. */
.bwp-card {
    background: var(--pmpc-card-bg);
    border: 1px solid var(--pmpc-border);
    border-radius: 8px;   /* doc 048 §4.3 — unified card radius */
    margin-bottom: 16px;
}
.bwp-card__header {
    background: var(--pmpc-panel-header-bg);
    color: var(--pmpc-panel-header-text);
    padding: 8px 14px;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.bwp-card__header-title { font-weight: 600; }
.bwp-card__header-info  { font-weight: 400; font-size: 12px; opacity: .85; font-variant-numeric: tabular-nums; }
.bwp-card__body { padding: 14px; }

.bwp-chain {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
    padding-bottom: 6px;
}
.bwp-connector { align-self: center; height: 2px; background: #999; flex: 0 0 24px; }
.bwp-chain-help { text-align: center; color: var(--pmpc-text-muted); font-size: 12px; margin-top: 8px; }

/* Boxes (End Feed + sub-meters) */
.bwp-box {
    position: relative;
    border: 2px solid var(--pmpc-border);
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    text-align: center;
    flex-shrink: 0;
    transition: border-color .12s, box-shadow .12s, background .12s;
}
/* The clickable select region (sibling of the ✎ edit button, so clicking ✎ never selects).
   Grid head/bars/foot so the breaker bars sit dead-centre and align across boxes regardless
   of the friendly-name / status / serial text above or below them (doc 031 §16, req 1). */
.bwp-box__hit {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    flex: 1 1 auto;
    cursor: pointer;
    row-gap: 4px;
    width: 100%;
}
.bwp-box__head { align-self: start;  width: 100%; }
.bwp-box__foot { align-self: end;    width: 100%; }
.bwp-endfeed--unset[role="button"] { cursor: pointer; }
.bwp-box:hover { border-color: var(--pmpc-accent); box-shadow: 0 0 0 2px var(--pmpc-accent-soft); }
.bwp-box.is-selected {
    border-color: var(--pmpc-accent);
    border-width: 3px;
    box-shadow: 0 0 0 3px var(--pmpc-accent-soft);
    background: var(--pmpc-accent-tint);
}
/* Admin ✎ edit affordance — absolutely positioned corner, outside the select region. */
.bwp-box__edit {
    position: absolute; top: 3px; right: 3px; z-index: 2;
    border: none; background: transparent; cursor: pointer;
    font-size: 12px; line-height: 1; padding: 2px 4px; border-radius: 3px;
    color: var(--pmpc-text-muted); opacity: .55;
}
.bwp-box__edit:hover { opacity: 1; background: var(--pmpc-accent-soft); color: var(--pmpc-accent); }
.bwp-box__friendly { font-weight: 700; font-size: 13px; line-height: 1.2; margin-bottom: 1px; }
.bwp-box__title  { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.bwp-box__sub    { font-size: 11px; color: var(--pmpc-text-muted); margin-bottom: 6px; }
.bwp-box__status { font-size: 11px; font-weight: 600; margin-bottom: 6px; }
.bwp-box__serial { font-size: 10px; color: var(--pmpc-text-muted); margin-top: 6px; line-height: 1.25; word-break: break-word; }

/* End Feed — enlarged 3-pole box on the left */
.bwp-endfeed {
    background: #ececec;
    border-color: #999;
    align-self: center;
    flex: 0 0 auto;
    min-width: 156px;
}
.bwp-endfeed--unset { color: var(--pmpc-text-muted); justify-content: center; min-height: 96px; }
.bwp-endfeed__cta { font-size: 11px; color: var(--pmpc-accent); font-weight: 600; margin-top: 6px; }

/* Pair bounding rectangle — groups two sub-meters */
.bwp-pair {
    display: flex;
    gap: 10px;
    align-items: stretch;
    border: 2px solid #6ea8e0;   /* E3: solid light-blue pair border (was grey dashed) */
    border-radius: 10px;
    padding: 8px;
    flex-shrink: 0;
}
.bwp-submeter { flex: 0 0 132px; min-width: 132px; }
.bwp-submeter--empty { border: none; background: transparent; }

/* Breaker bars — one per phase; the centre cell carries the status colour.
   align-self:center → the bars row is vertically centred in the box (see .bwp-box__hit grid). */
.bwp-bars { display: flex; gap: 8px; justify-content: center; align-self: center; }
.bwp-bar  { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bwp-bar__label { font-size: 10px; font-weight: 600; color: #44546a; }
.bwp-bar__cells {
    display: flex;
    flex-direction: column;
    width: 22px;
    border: 1px solid #333;
    background: #d8d8d8;
}
.bwp-bar__cell { height: 12px; }
.bwp-bar__cell--mid { border-top: 1px solid #b0b0b0; border-bottom: 1px solid #b0b0b0; }
.bwp-bar__amps { font-size: 10px; font-variant-numeric: tabular-nums; color: var(--pmpc-text-muted); }

.bwp-util--none   .bwp-bar__cell--mid { background: #cfcfcf; }
.bwp-util--ok     .bwp-bar__cell--mid { background: var(--pmpc-success); }
.bwp-util--warn   .bwp-bar__cell--mid { background: var(--pmpc-warning); }
.bwp-util--danger .bwp-bar__cell--mid { background: var(--pmpc-danger); }

/* Utilization level text colours (status line, peak stat) */
.bwp-util--none   { color: var(--pmpc-text-muted); }
.bwp-util--ok     { color: var(--pmpc-success); }
.bwp-util--warn   { color: var(--pmpc-warning); }
.bwp-util--danger { color: var(--pmpc-danger); }

/* Detail panel */
.bwp-detail__head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.bwp-detail__title { font-weight: 700; font-size: 14px; }
.bwp-detail__sub { font-size: 12px; color: var(--pmpc-text-muted); }
.bwp-detail__stats { display: flex; gap: 24px; }
.bwp-stat { text-align: center; }
.bwp-stat__label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--pmpc-text-muted); }
.bwp-stat__value { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bwp-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 3px; background: #ececec; color: #44546a; margin-left: 6px; vertical-align: middle; }

.bwp-tap-util { display: flex; align-items: center; gap: 8px; }
.bwp-util-bar { background: #e9ecef; height: 7px; border-radius: 4px; overflow: hidden; flex-grow: 1; min-width: 70px; }
.bwp-util-bar__fill { height: 100%; border-radius: 4px; transition: width .4s, background .4s; }
.bwp-util-bar__fill.bwp-util--none   { background: var(--pmpc-text-muted); }
.bwp-util-bar__fill.bwp-util--ok     { background: var(--pmpc-success); }
.bwp-util-bar__fill.bwp-util--warn   { background: var(--pmpc-warning); }
.bwp-util-bar__fill.bwp-util--danger { background: var(--pmpc-danger); }
.bwp-phase { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; background: #eef2f7; color: #44546a; }
.bwp-total-row td { font-weight: 700; border-top: 2px solid var(--pmpc-border); font-variant-numeric: tabular-nums; }

/* ── Details modal grid ───────────────────────────────────────────── */
.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
    font-size: 12px;
}
.details-grid > div { padding: 4px 0; border-bottom: 1px dotted #eee; }
.details-grid__label {
    display: inline-block;
    min-width: 140px;
    color: var(--pmpc-text-muted);
    font-weight: 600;
    margin-right: 12px;
}

/* ── Modal density tweak ──────────────────────────────────────────── */
.pmpc-modal .modal-header { background: #f4f6f8; padding: 12px 16px; }
.pmpc-modal .modal-title  { font-size: 14px; font-weight: 600; }
.pmpc-modal .modal-body   { padding: 16px; }
.pmpc-modal .modal-footer { padding: 10px 16px; }

/* Scrollable list inside a modal (doc 040 sub-meter curation): cap the list to the
   viewport so the header/intro stay put and the Close/Save footer is always reachable
   even when a meter has many sub-meters. Mirrors the Discover modal's inner-scroll
   pattern (more robust here than Bootstrap's .modal-dialog-scrollable). */
.pmpc-submeter-list { max-height: calc(100vh - 19rem); overflow-y: auto; }

/* ── Support page ─────────────────────────────────────────────────── */
.about-section--full { grid-column: 1 / -1; }

/* Numbered quick-start step list */
.support-steps {
    list-style: none;
    padding: 0; margin: 0;
    counter-reset: support-step;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}
.support-steps li {
    counter-increment: support-step;
    position: relative;
    padding: 10px 12px 10px 38px;
    background: var(--pmpc-bg);
    border: 1px solid var(--pmpc-border);
    border-radius: var(--pmpc-radius);
    font-size: 13px;
    line-height: 1.5;
}
.support-steps li::before {
    content: counter(support-step);
    position: absolute;
    left: 10px;
    top: 12px;
    width: 20px;
    height: 20px;
    background: var(--pmpc-accent);
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 20px;
}
.support-steps li strong { display: block; margin-bottom: 3px; }

/* Device / firmware compatibility badge */
.support-compat {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.support-compat--ok     { background: #d4edda; color: #155724; }
.support-compat--warn   { background: #fff3cd; color: #856404; }
.support-compat--legacy { background: #f8d7da; color: #721c24; }

/* FAQ accordion density */
.support-faq-body { font-size: 13px; }
.support-faq-body ol, .support-faq-body ul { padding-left: 20px; margin-bottom: 8px; }
.support-faq-body p:last-child { margin-bottom: 0; }

/* Contact grid */
.support-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    font-size: 13px;
}
.support-contact-grid dl { margin: 0; }
.support-contact-grid dt {
    font-size: 11px;
    font-weight: 600;
    color: var(--pmpc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 3px;
}
.support-contact-grid dd { margin: 0; }

/* ── Database Details admin page ─────────────────────────────────── */
.db-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--pmpc-text-muted);
    margin: 24px 0 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--pmpc-border);
}
.db-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}
.db-stat-card {
    background: #fff;
    border: 1px solid var(--pmpc-border);
    border-radius: var(--pmpc-radius);
    padding: 12px 14px;
}
.db-stat-card__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pmpc-text-muted);
    margin-bottom: 4px;
}
.db-stat-card__value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-stat-card__value--sm { font-size: 14px; }
.db-stat-card__sub {
    font-size: 11px;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-card {
    background: #fff;
    border: 1px solid var(--pmpc-border);
    border-radius: var(--pmpc-radius);
    overflow: hidden;
}
.db-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--pmpc-bg);
    border-bottom: 1px solid var(--pmpc-border);
}
.db-card__title { font-size: 14px; font-weight: 600; }
.db-card__badges { display: flex; gap: 6px; margin-left: auto; }
.db-card__body { padding: 12px 14px; }
.db-ht-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
}
.db-expand-btn { font-size: 11px; }
.db-chunk-table { font-size: 11px; }

/* ── Discover on Network modal ────────────────────────────────────── */
.discover-modal .progress    { background: #e9ecef; }
.discover-modal .progress-bar { background-color: var(--pmpc-sidebar-active); }
.discover-modal .table       { font-size: 11px; }
.discover-modal .badge       { font-size: 10px; font-weight: 500; }
.discover-modal #scan-results tr { animation: pmpc-row-pop 0.2s ease-out; }
@keyframes pmpc-row-pop {
    from { background-color: #fffbcc; }
    to   { background-color: transparent; }
}

/* ── Room Map feature ──────────────────────────────────────────────────────── */

/* Rooms list grid */
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.room-card  { border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden; background: #fff; }
.room-card__map   { height: 120px; background: #f0f0f0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.room-card__thumb { width: 100%; height: 100%; object-fit: cover; }
.room-card__no-map { color: #aaa; font-size: 12px; }
.room-card__body   { padding: 0.75rem; }
.room-card__name   { font-weight: 600; font-size: 0.95rem; }
/* Orderly card actions: the primary "View Map" spans the full width on top,
   the admin actions (Images/Edit/Delete) sit in an even 3-column row below.
   minmax(0,1fr) lets the columns shrink without overflowing the card. */
.room-card__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
.room-card__actions .btn { width: 100%; }
.room-card__actions .room-action--primary { grid-column: 1 / -1; }

/* Map viewport — fixed height with clipping; Panzoom operates inside .room-map-canvas */
.room-map-viewport { width: 100%; height: 600px; overflow: hidden; border: 1px solid #dee2e6; border-radius: 4px; background: #f8f9fa; cursor: grab; position: relative; }
.room-map-viewport:active { cursor: grabbing; }
.room-map-canvas   { display: inline-block; position: relative; transform-origin: 50% 50%; }
.room-map-img      { display: block; max-width: none; user-select: none; }
#dot-layer         { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Dot overlay */
@keyframes dot-place {
    0%   { transform: translate(-50%, -50%) scale(6); opacity: 0.6; }
    60%  { transform: translate(-50%, -50%) scale(1.8); opacity: 1;   }
    100% { transform: translate(-50%, -50%) scale(1);   opacity: 1;   }
}
.map-dot {
    position: absolute;
    width:  var(--dot-size, 14px);
    height: var(--dot-size, 14px);
    border-radius: 50%;
    border: 2px solid #fff;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform 0.1s;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    z-index: 10;
}
.map-dot:hover { transform: translate(-50%, -50%) scale(1.5); z-index: 20; }
.map-dot.dot--ok      { background: var(--pmpc-success); }
.map-dot.dot--warn    { background: var(--pmpc-warning); }
.map-dot.dot--alarm   { background: var(--pmpc-danger); }
.map-dot.dot--offline { background: #6c757d; }
.map-dot--new      { animation: dot-place 1.2s ease-out forwards; z-index: 30; }

/* ═══════════════════════════════════════════════════════════════════
   Dashboard visual upgrade styles
   ═══════════════════════════════════════════════════════════════════ */

/* ── KPI tile status accent strips (3px coloured top border) ─────── */
.kpi-tile--ok   { border-top: 3px solid var(--pmpc-success); }
.kpi-tile--warn { border-top: 3px solid var(--pmpc-warning); }
.kpi-tile--crit { border-top: 3px solid var(--pmpc-danger);  }

/* ── KPI tile gauge variant (taller, holds an ApexCharts radialBar) ─ */
.kpi-tile--gauge {
    min-height: 165px;   /* trimmed from 190 with the 160→140 gauge height (doc 052 Item 10 — #3) */
    padding-bottom: 10px;
}
.kpi-tile--gauge .kpi-tile__chart {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 -4px;   /* let ApexCharts bleed a little wider */
}
.kpi-tile--gauge .kpi-tile__sub { text-align: center; }

/* ── Live pulse indicator ─────────────────────────────────────────── */
@keyframes pmpc-pulse-ring {
    0%   { transform: scale(0.6); opacity: 0.8; }
    70%  { transform: scale(1.6); opacity: 0;   }
    100% { transform: scale(1.6); opacity: 0;   }
}
@keyframes pmpc-pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}
.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--pmpc-text-muted);
}
.live-indicator__dot {
    position: relative;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
}
.live-indicator__dot::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--pmpc-success);
    border-radius: 50%;
    animation: pmpc-pulse-dot 2s ease-in-out infinite;
}
.live-indicator__dot::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--pmpc-success);
    border-radius: 50%;
    animation: pmpc-pulse-ring 2s ease-out infinite;
}

/* ── Dashboard grid: 5-column tile row ───────────────────────────── */
.dashboard-grid--five {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 1200px) {
    .dashboard-grid--five { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
    .dashboard-grid--five { grid-template-columns: repeat(2, 1fr); }
}

/* ── Dashboard grid: 7-column KPI row (5 KPIs + Circuits-at-Risk + THD) ──── */
.dashboard-grid--seven {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 1400px) {
    .dashboard-grid--seven { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .dashboard-grid--seven { grid-template-columns: repeat(2, 1fr); }
}

/* ── Meter cards (upgraded status grid) ─────────────────────────── */
.meter-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.meter-card {
    background: #fff;
    border: 1px solid var(--pmpc-border);
    border-radius: var(--pmpc-radius);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.meter-card--ok     { border-left: 3px solid var(--pmpc-success); }
.meter-card--warn   { border-left: 3px solid var(--pmpc-warning); }
.meter-card--crit   { border-left: 3px solid var(--pmpc-danger);  }
.meter-card--off    { border-left: 3px solid #aaa; opacity: 0.7; }
.meter-card__head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 12px;
}
.meter-card__sub {
    font-size: 11px;
    color: var(--pmpc-text-muted);
}
.meter-card__metrics {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.meter-card__kw {
    font-weight: 600;
    font-size: 13px;
    color: var(--pmpc-text);
    font-variant-numeric: tabular-nums;
}
.meter-card__age { color: var(--pmpc-text-muted); }
.meter-card__chart { margin: 2px -4px 0; }
.meter-card__spark-range {
    font-size: 10px;
    color: var(--pmpc-text-muted);
    text-align: center;
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}

/* ── ApexCharts donut in alarm tile — constrain size ────────────── */
.alarm-tile-donut {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.alarm-tile-donut__chart { flex: 0 0 70px; }
.alarm-tile-donut__legend { font-size: 11px; color: var(--pmpc-text-muted); line-height: 1.7; }

/* ── Consumers / Breaker chart panels (ApexCharts replaces tables) ─ */
.panel__chart { padding: 4px 0 0; min-height: 160px; }
/* Admin drag-to-reposition */
.dot-layer--admin .map-dot { cursor: grab; }
.map-dot--dragging { cursor: grabbing !important; z-index: 50; transition: none !important; opacity: 0.8; }

/* Remove button — hidden until dot hover */
.map-dot__remove {
    display: none;
    position: absolute;
    top: -8px; right: -8px;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: none;
    background: #343a40;
    color: #fff;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    padding: 0;
}
.map-dot:hover .map-dot__remove { display: block; }

/* Available FlexMeters panel */
.fm-card-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.fm-card {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 6px 10px;
    background: #fff;
    cursor: grab;
    user-select: none;
    min-width: 90px;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.fm-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,.15); border-color: var(--pmpc-accent); }
.fm-card:active { cursor: grabbing; }

/* Legend dots (inline, not positioned) */
.room-map-legend .map-dot {
    position: static;
    display: inline-block;
    transform: none;
    vertical-align: middle;
    width: 12px; height: 12px;
    border-width: 1px;
}
.room-map-legend .map-dot:hover { transform: none; }
}

/* ── Sortable table headers — single standard everywhere (doc 071 E) ──────────
   Idle sortable header shows a faint ⇅; the active one shows an accent ↑ / ↓.
   Add `sort-key` to each sortable <th> (or the clickable <a> inside it) and set
   data-sort-dir="asc|desc" on the active one (client JS, or a server Razor helper). */
#room-summary-table { white-space: nowrap; }
.sort-key { cursor: pointer; user-select: none; }
.sort-key::after { content: ' ⇅'; opacity: 0.28; font-size: 0.75em; font-weight: normal; }
.sort-key[data-sort-dir="asc"]::after  { content: ' ↑'; opacity: 1; color: var(--pmpc-accent); }
.sort-key[data-sort-dir="desc"]::after { content: ' ↓'; opacity: 1; color: var(--pmpc-accent); }
th.sort-key:hover { background: #e4e9ee; }

/* Monitoring FM row → one-line diagram deep-link (subtle, reveals on row hover). */
.fm-oneline-link {
    margin-left: 6px;
    text-decoration: none;
    opacity: 0.35;
    font-size: 12px;
}
.fm-row:hover .fm-oneline-link { opacity: 1; }
.fm-oneline-link:hover { opacity: 1; }

/* ── Meter View one-line diagram (doc 015 §27) ───────────────────────────
   Switchboard-style SVG one-line: coloured bus bars (L1/L2/L3/N), dashed
   double-headed voltage arrows with value boxes, and per-phase measurement
   boxes (Current/Breaker Util/Real/Reactive/THD) on the bars. Ported from the
   Cortex meterview2.html "Live Measurement Values" card. The diagram is
   server-rendered (MeterViewSvg computes fill widths/ticks/colours), so these
   styles only cover the static skeleton + value-box chrome. */
.lmv-scroll { overflow-x: auto; }
.lmv-svg-wrap { min-width: 1050px; }   /* keep the schematic legible; scroll on narrow screens */
.lmv-svg { width: 100%; height: auto; display: block; }
.lmv-note { font-size: 11px; color: #6c757d; margin-bottom: 8px; }

/* Bus bars + phase labels */
.lmv-bus-l1 { stroke: #8a4b42; stroke-width: 4; }
.lmv-bus-l2 { stroke: #2f2f2f; stroke-width: 4; }
.lmv-bus-l3 { stroke: #9298a0; stroke-width: 4; }
.lmv-bus-n  { stroke: #2f6fb0; stroke-width: 4; }
.lmv-bus-t { font-size: 13px; font-weight: 700; }
.lmv-busname-l1 { fill: #8a4b42; }
.lmv-busname-l2 { fill: #2f2f2f; }
.lmv-busname-l3 { fill: #5f656c; }
.lmv-busname-n  { fill: #2f6fb0; }

/* Voltage arrows, connection dots, headers, and value boxes */
.lmv-arrow { stroke: #555; stroke-width: 1; stroke-dasharray: 3 3; }
.lmv-dot { fill: #1d3248; }
.lmv-head-t { fill: #5a6b7b; font-size: 12px; font-weight: 600; }
.lmv-box-r { fill: #fff; stroke: #9ec3e6; stroke-width: 1; }
.lmv-box-t { fill: #1d3248; font-size: 12px; font-variant-numeric: tabular-nums; }

/* In-box value fill (translucent so the value text reads over it) + orange max tick. */
.lmv-bar-fill { fill-opacity: 0.30; }
.lmv-bar-max { stroke: var(--pmpc-warning); stroke-width: 2; }
.lmv-max-t { fill: var(--pmpc-warning); font-size: 11px; font-variant-numeric: tabular-nums; }
.lmv-size-t { fill: #6c757d; font-size: 10px; }

/* Totals strip below the diagram */
.lmv-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #dae3ee;
}
.lmv-tot { flex: 1 1 150px; text-align: center; }
.lmv-tot-label {
    font-size: 12px;
    font-weight: 600;
    color: #5a6b7b;
    margin-bottom: 4px;
}
.lmv-box {
    display: inline-block;
    background: #fff;
    border: 1px solid #9ec3e6;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    padding: 8px 14px;
    min-width: 140px;
    white-space: nowrap;
}
/* Real Energy can grow many digits in the field (cumulative kWh) — give just that
   cell + box extra room so 2–3 more digits read comfortably without crowding the row. */
.lmv-tot--energy { flex-basis: 210px; }
.lmv-tot--energy .lmv-box { min-width: 210px; }

/* Phasor diagram card (server-rendered SVG vector diagram + four data tables). */
.phasor-canvas-wrap { text-align: center; margin-bottom: 14px; }
.phasor-svg { width: 240px; max-width: 100%; height: auto; display: inline-block; }
.phasor-tables { font-size: 11px; }
.phasor-tables td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.phasor-th {
    text-align: center;
    background-color: #1d3248;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

/* ── DashboardPlus (doc 029) ───────────────────────────────────────────── */
.dbp-plus { color: var(--pmpc-accent); font-weight: 800; }
.dbp-live { color: var(--pmpc-success); font-size: 12px; margin-right: 6px; }

.dbp-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    align-items: start;
}
.dbp-span-4  { grid-column: span 4; }
.dbp-span-6  { grid-column: span 6; }
.dbp-span-8  { grid-column: span 8; }
.dbp-span-12 { grid-column: span 12; }
@media (max-width: 1100px) {
    .dbp-span-4, .dbp-span-6, .dbp-span-8 { grid-column: span 12; }
}

.dbp-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.dbp-card__header {
    background: var(--pmpc-panel-header-bg);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dbp-card__sub { color: #9aa7b4; font-weight: 400; font-size: 11px; }
.dbp-card__body { padding: 12px; }
.dbp-empty { color: #6c757d; font-size: 13px; padding: 24px 8px; text-align: center; }

.dbp-freq-readout { font-size: 24px; font-weight: 700; color: var(--pmpc-heading-ink); text-align: center; line-height: 1.1; }
.dbp-freq-unit { font-size: 12px; color: #6c757d; font-weight: 500; }
.dbp-clock-svg { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; }

/* AI Insights feed (T10) */
.dbp-feed { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.dbp-feed__row { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 8px; border-bottom: 1px solid #f0f2f5; }
.dbp-feed__row:last-child { border-bottom: 0; }
.dbp-feed__body { min-width: 0; }
.dbp-feed__title { font-size: 12px; font-weight: 600; color: var(--pmpc-heading-ink); }
.dbp-feed__time { color: #9aa7b4; font-weight: 400; }
.dbp-feed__summary { font-size: 12px; color: #5a6b7b; }
.dbp-sev { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 10px; color: #fff; margin-top: 1px; }
.dbp-sev--1 { background: #6c757d; }
.dbp-sev--2 { background: var(--pmpc-warning); }
.dbp-sev--3 { background: var(--pmpc-danger); }

/* Headroom runway (T11) */
.dbp-runway { display: flex; flex-direction: column; gap: 8px; }
.dbp-runway__row { display: grid; grid-template-columns: 1fr 120px 56px; gap: 10px; align-items: center; }
.dbp-runway__label { font-size: 12px; color: var(--pmpc-heading-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbp-runway__bar { height: 10px; background: #eef1f5; border-radius: 5px; overflow: hidden; }
.dbp-runway__fill { height: 100%; background: var(--pmpc-accent); border-radius: 5px; }
.dbp-runway__days { font-size: 12px; font-weight: 700; text-align: right; }
.dbp-run--ok { color: var(--pmpc-success); }
.dbp-run--warn { color: var(--pmpc-warning); }
.dbp-run--danger { color: var(--pmpc-danger); }

/* Hero KPI band (T14) */
.dbp-hero { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 800px) { .dbp-hero { grid-template-columns: repeat(2, 1fr); } }
.dbp-kpi { background: var(--pmpc-panel-header-bg); border-radius: 8px; padding: 14px 16px; color: #fff; }
.dbp-kpi__label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: #9aa7b4; }
.dbp-kpi__value { font-size: 30px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dbp-kpi__unit { font-size: 14px; font-weight: 500; color: #9aa7b4; }
.dbp-kpi__value--ok { color: var(--pmpc-success); }
.dbp-kpi__value--alarm { color: #FF6B7A; }

/* Floor-plan mini (T12) */
.dbp-floorplan { display: inline-block; line-height: 0; text-decoration: none; max-width: 100%; }
.dbp-floorplan__frame { position: relative; display: inline-block; }
.dbp-floorplan__img { display: block; max-width: 100%; max-height: 720px; width: auto; height: auto; border-radius: 4px; }
.dbp-floorplan__dot { position: absolute; width: 13px; height: 13px; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px rgba(255,255,255,0.7); }

/* Power-flow Sankey (T15) */
.dbp-sankey-svg { width: 100%; max-width: 1000px; height: auto; display: block; margin: 0 auto; }
.dbp-sankey-svg path { transition: fill-opacity 0.15s; }
.dbp-sankey-svg path:hover { fill-opacity: 0.7; }

/* Carbon (T13) */
.dbp-carbon { text-align: center; }
.dbp-carbon__leaf { font-size: 28px; }
.dbp-carbon__value { font-size: 30px; font-weight: 800; color: var(--pmpc-heading-ink); line-height: 1.1; }
.dbp-carbon__unit { font-size: 13px; color: #6c757d; font-weight: 500; }
.dbp-carbon__sub { font-size: 12px; color: #5a6b7b; margin-top: 4px; }
.dbp-carbon__note { font-size: 11px; color: #9aa7b4; margin-top: 2px; }

/* ── Help: ⓘ pill + popover + Guide modal (generic, reusable) ──────────── */
.info-pill--btn { background: none; border: 0; padding: 0 0 0 4px; line-height: 1; vertical-align: baseline; cursor: pointer; }
.dbp-card__title { display: inline-flex; align-items: center; min-width: 0; }
/* Light ⓘ on the dark card header (default .info-pill colour is for light toolbars). */
.dbp-card__header .info-pill { color: #9aa7b4; }
.dbp-card__header .info-pill:hover { color: #fff; }
/* Roomier, readable help popover. */
.info-help-popover { --bs-popover-max-width: 340px; }
.info-help-popover .popover-header { font-size: 13px; font-weight: 700; }
.info-help-popover .popover-body { font-size: 12px; line-height: 1.45; }

.dbp-guide-btn { font-size: 12px; }
.dbp-guide__item { padding: 10px 0; border-bottom: 1px solid #eef1f5; }
.dbp-guide__item:last-child { border-bottom: 0; }
.dbp-guide__title { font-size: 13px; font-weight: 700; color: var(--pmpc-heading-ink); margin-bottom: 2px; }

/* ── Per-page Help modal (doc 054) ────────────────────────────────────── */
.page-help__overview { font-size: 13px; color: var(--pmpc-text); margin-bottom: 0.5rem; }
.page-help__section {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--pmpc-text-muted); margin: 1.1rem 0 0.5rem; padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--pmpc-border);
}
.page-help__features { margin: 0; }
.page-help__features dt { font-size: 13px; font-weight: 600; color: var(--pmpc-heading-ink); margin-top: 0.85rem; }
.page-help__features dt:first-child { margin-top: 0; }
.page-help__features dd { margin: 0.2rem 0 0; font-size: 12px; line-height: 1.5; color: var(--pmpc-text); }
.page-help__admin {
    font-size: 9px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
    padding: 1px 6px; border-radius: 999px; background: #fdeeee; color: var(--pmpc-danger);
    vertical-align: middle; margin-left: 4px;
}
.page-help__tips { margin: 0; padding-left: 1.1rem; }
.page-help__tips li { font-size: 12px; line-height: 1.5; color: var(--pmpc-text-muted); margin: 0.3rem 0; }
.dbp-guide__body { font-size: 12px; color: #5a6b7b; line-height: 1.45; }

/* doc 054 Phase 4 — Support → User Manual (generated from the PageHelp registry). */
.support-manual-callout {
    display: flex; align-items: flex-start; gap: 0.75rem;
    border-left: 3px solid var(--pmpc-accent);
}
.support-manual-callout > .bi { font-size: 1.4rem; color: var(--pmpc-accent); line-height: 1; margin-top: 1px; }
.support-manual-callout > div { font-size: 13px; color: var(--pmpc-text); line-height: 1.5; }
.help-manual-toc {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.5rem 1.5rem;
}
.help-manual-toc__group { min-width: 0; }
.help-manual-toc__cat {
    display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.6px;
    text-transform: uppercase; color: var(--pmpc-text-muted); text-decoration: none;
    padding-bottom: 0.25rem; margin-bottom: 0.35rem; border-bottom: 1px solid var(--pmpc-border);
}
.help-manual-toc__group ul { list-style: none; margin: 0; padding: 0; }
.help-manual-toc__group li { margin: 0.15rem 0; }
.help-manual-toc__group a:not(.help-manual-toc__cat) { font-size: 12px; color: var(--pmpc-accent); text-decoration: none; }
.help-manual-toc__group a:hover { text-decoration: underline; }
.help-manual-page { padding: 0.9rem 0; border-top: 1px solid var(--pmpc-border); scroll-margin-top: 1rem; }
.help-manual-page:first-of-type { border-top: 0; }
.help-manual-page__title { font-size: 15px; font-weight: 700; color: var(--pmpc-heading-ink); margin: 0 0 0.4rem; }
.help-manual-page__sub {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--pmpc-text-muted); margin: 1rem 0 0.4rem;
}
.help-manual-page__back { margin: 0.6rem 0 0; }
.help-manual-page__back a { font-size: 11px; color: var(--pmpc-text-muted); text-decoration: none; }
.help-manual-page__back a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   doc 048 §10 — COMPONENT CONVERGENCE (CSS-only; no markup/data/icon changes).
   Grouping selectors that pull the per-feature namespaces onto ONE set of
   values. Placed at end-of-file so these single-class rules win by source order.
   ═══════════════════════════════════════════════════════════════════════════ */

/* P1 — Card containers: one radius, one (white) surface, one subtle elevation. */
.app-content__card,
.panel, .kpi-tile,
.dbp-card,
.busway-card, .bwp-card,
.chart-tile, .heatmap-card,
.about-section, .report-section,
.db-card, .db-stat-card,
.meter-card, .monitor-card,
.flex-meter-group, .fm-card, .room-card {
    background: var(--pmpc-card-bg);
    border-radius: var(--pmpc-card-radius);
    box-shadow: var(--pmpc-card-shadow);
}
/* Off-token border colours → on-token. (Kept OFF kpi-tile/meter-card, which carry
   coloured status border accents we must not clobber.) */
.dbp-card, .fm-card, .room-card { border-color: var(--pmpc-border); }

/* P4a — One padding for the navy card-header bars. */
.panel__header,
.chart-tile__header, .heatmap-card__header,
.busway-card__header, .bwp-card__header,
.dbp-card__header,
.flex-meter-group__header { padding: 8px 14px; }
/* P4b — The lone light-grey header outlier → navy like the rest. */
.flex-meter-group__header {
    background: var(--pmpc-panel-header-bg);
    color: var(--pmpc-panel-header-text);
    border-bottom: none;
}

/* P2 — Section titles: one uppercase-muted label (typography only; each keeps
   its own surrounding margins/underline). */
.about-section__title, .report-section__title,
.alarms-section-title, .db-section-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--pmpc-text-muted);
}

/* P3 — Toolbars: one flex row + bottom divider. */
.meters-toolbar, .charts-toolbar, .heatmap-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pmpc-border);
    flex-wrap: wrap;
}

/* P5 — Stat primitive: shared label + value base. Font SIZES stay per-context
   (hero vs inline are legitimately different) — only the base props converge.
   NOTE: .dbp-kpi__label is excluded — it sits on a dark navy hero tile and keeps
   its own light colour. */
.kpi-tile__label, .busway-stat__label, .bwp-stat__label,
.db-stat-card__label {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: var(--pmpc-text-muted);
}
.kpi-tile__value, .busway-stat__value, .bwp-stat__value,
.db-stat-card__value, .dbp-kpi__value {
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* P6 — Empty / placeholder states: one look. */
.meters-empty, .dbp-empty, .panel__body--placeholder {
    text-align: center;
    color: var(--pmpc-text-muted);
    font-style: italic;
}

/* ── Admin Appearance page (doc 051 P2) ───────────────────────────────── */
.appr-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .appr-grid { grid-template-columns: 1fr; } }
.appr-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.appr-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.appr-row__label { flex: 1; font-size: 12px; }
.appr-row__swatch { width: 42px; height: 28px; padding: 0; border: 1px solid var(--pmpc-border); border-radius: 4px; background: none; cursor: pointer; }
.appr-row__hex { width: 92px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; padding: 3px 6px; border: 1px solid var(--pmpc-border); border-radius: 4px; }
.appr-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.appr-side { position: sticky; top: 12px; }

/* Logo upload (P3) */
.appr-logo { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.appr-logo__previewcol { display: flex; flex-direction: column; gap: 4px; }
.appr-logo__preview { min-width: 120px; min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 8px 12px; background: var(--pmpc-sidebar-bg, #1f2733); border-radius: 6px; }
.appr-logo__img { height: 32px; width: auto; max-width: 200px; display: block; }
.appr-logo__preview .brand-logo-svg { height: 34px; width: auto; max-width: 200px; display: block; }   /* built-in mark in the empty state */
.appr-logo__caption { text-align: center; max-width: 220px; }
.appr-logo__controls { flex: 1; min-width: 240px; }
.appr-danger { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Live preview — children read the --pmpc-* vars set on #appr-preview inline by appearance.js. */
.appr-preview { border: 1px solid var(--pmpc-border); border-radius: 8px; overflow: hidden; }
.appr-prev-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px;
    background: linear-gradient(180deg, var(--pmpc-header-bg-from), var(--pmpc-header-bg-to)); }
.appr-prev-brand { color: var(--pmpc-accent-bright); font-weight: 700; font-size: 13px; letter-spacing: .2px; }
.appr-prev-chip { background: var(--pmpc-danger); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.appr-prev-nav { background: var(--pmpc-sidebar-bg); padding: 6px 0; }
.appr-prev-nav__item { color: var(--pmpc-sidebar-text); font-size: 12px; padding: 6px 12px; }
.appr-prev-nav__item.is-active { background: var(--pmpc-accent); color: var(--pmpc-accent-text); font-weight: 600; }
.appr-prev-body { padding: 12px; background: #fff; }
.appr-prev-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.appr-prev-btn { background: var(--pmpc-accent); color: var(--pmpc-accent-text); border: none; border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; }
.appr-prev-link { color: var(--pmpc-accent); font-size: 12px; font-weight: 600; text-decoration: none; }
.appr-prev-card { border: 1px solid var(--pmpc-border); border-radius: 8px; overflow: hidden; }
.appr-prev-card__head { background: var(--pmpc-panel-header-bg); color: var(--pmpc-panel-header-text); font-size: 10px; font-weight: 600; letter-spacing: .4px; padding: 6px 10px; }
.appr-prev-card__body { padding: 10px; font-size: 12px; display: flex; align-items: center; justify-content: space-between; }
.appr-prev-pill { background: var(--pmpc-warning); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }

/* P4: live contrast readout + active-preset highlight */
.appr-contrast { font-size: 12px; font-weight: 600; min-height: 1em; }
.appr-contrast.is-ok  { color: var(--pmpc-success); }
.appr-contrast.is-bad { color: var(--pmpc-danger); }
.js-preset.is-active { border-color: var(--pmpc-accent); color: var(--pmpc-accent); font-weight: 600; }

/* ── Cortex Meter Updater stepper (doc 066) ───────────────────────────────── */
.updater-stepper {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pmpc-space-2, 8px);
    padding: 0;
    margin: 0;
}
.updater-stepper li {
    flex: 1 1 0;
    min-width: 7rem;
    text-align: center;
    padding: 6px 10px;
    border: 1px solid var(--pmpc-border, #d0d5dd);
    border-radius: var(--pmpc-card-radius, 8px);
    font-size: 13px;
    font-weight: 600;
    color: var(--pmpc-text-muted, #667085);
    background: var(--pmpc-surface, #fff);
}
.updater-stepper li.is-active {
    border-color: var(--pmpc-accent, #2563EB);
    color: var(--pmpc-accent, #2563EB);
}
.updater-stepper li.is-done {
    border-color: var(--pmpc-success, #16A34A);
    color: var(--pmpc-success, #16A34A);
}

/* ── System Configuration tabs (Views/Config/Index.cshtml) ── */
.config-tabs {
    border-bottom: 1px solid var(--pmpc-border);
}
.config-tabs .nav-link {
    color: var(--pmpc-text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.5rem 1rem;
    font-weight: 600;
    background: none;
}
.config-tabs .nav-link:hover {
    color: var(--pmpc-accent);
    border-bottom-color: var(--pmpc-accent-soft);
}
.config-tabs .nav-link.active {
    color: var(--pmpc-accent);
    background: none;
    border-bottom-color: var(--pmpc-accent);
}

/* ── Power Quality page (doc 081) ─────────────────────────────────────── */
.pq-scorecard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.pq-tile {
    background: #fff;
    border: 1px solid var(--pmpc-border);
    border-left: 4px solid var(--pmpc-text-muted);
    border-radius: 8px;
    padding: 10px 12px;
}
.pq-tile__title  { font-weight: 600; font-size: 13px; }
.pq-tile__limit  { color: var(--pmpc-text-muted); font-size: 11px; }
.pq-tile__value  { font-size: 22px; font-weight: 700; margin-top: 4px; }
.pq-tile__detail { color: var(--pmpc-text-muted); font-size: 12px; }
.pq-tile__badge  { font-weight: 700; }
.pq-tile--ok      { border-left-color: var(--pmpc-success); }
.pq-tile--ok      .pq-tile__badge { color: var(--pmpc-success); }
.pq-tile--caution { border-left-color: var(--pmpc-warning); }
.pq-tile--caution .pq-tile__badge { color: var(--pmpc-warning); }
.pq-tile--breach  { border-left-color: var(--pmpc-danger); }
.pq-tile--breach  .pq-tile__value, .pq-tile--breach .pq-tile__badge { color: var(--pmpc-danger); }
.pq-tile--info    { border-left-color: var(--pmpc-border); }

/* Status badge in the EN 50160 table reuses the tile status colours. */
.pq-badge { font-weight: 700; }
.pq-badge.pq-tile--ok      { color: var(--pmpc-success); }
.pq-badge.pq-tile--caution { color: var(--pmpc-warning); }
.pq-badge.pq-tile--breach  { color: var(--pmpc-danger); }
.pq-badge.pq-tile--info    { color: var(--pmpc-text-muted); }

.pq-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 12px;
}
/* Print = a clean compliance report (doc 081). The app shell is dark and never built
   for print, so strip the chrome, force white, and drop the live trend charts (ApexCharts
   canvases don't print reliably) — the scorecard + EN 50160 table + event log carry it. */
@media print {
    .app-header, .app-sidebar, .app-footer, .page-toolbar, #pq-page { display: none !important; }
    html, body, .app-shell, .app-main, .app-content, .app-content__card {
        background: #fff !important;
        margin: 0 !important; padding: 0 !important;
        box-shadow: none !important; border: 0 !important;
        display: block !important; height: auto !important;
        max-width: none !important; width: auto !important; overflow: visible !important;
    }
    /* Panel headers are dark-on-light in the app → force readable for print. */
    .panel { border: 1px solid #999 !important; break-inside: avoid; }
    .panel__header { background: #fff !important; color: #000 !important; border-bottom: 1px solid #999 !important; }
    .pq-tile { break-inside: avoid; }
    a[href]::after { content: ""; }   /* don't append URLs after links */
}