/* ════════════════════════════════════════════════════════════════════════════
   Centaurus EMS - Shared Stylesheet
   All shared/global CSS lives here. Page-specific overrides go in inline
   <style> blocks in the template that needs them.
   ════════════════════════════════════════════════════════════════════════════ */

/* ---- CSS Variables ---- */
:root {
  --bg:      #0b0f15; --bg2:     #13181f; --bg3:     #1a212a;
  --border:  #2d3540; --fg:      #e6edf3; --dim:     #7d8590;
  --acc:     #2b7be4; --acc2:    #6bb8ff; --acc-dim: #1a4880;
  --grn:     #3fb950; --red:     #f85149; --yel:     #d4942b;
  --pur:     #a371f7; --teal:    #3bc9db; --ora:     #f0883e;
  /* Tariff palette (T1 = IESCO grid, T2 = generator) - single source */
  --t1:      #378add; --t2:     #3fb950;
  --font:    'JetBrains Mono', 'Courier New', monospace;
  --body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --radius:  10px; --shadow: 0 4px 24px rgba(0,0,0,.4);
  --sidebar: 240px; --topbar: 56px;
  /* Typographic scale */
  --text-xs: 9px;  --text-sm: 10px;  --text-base: 12px;
  --text-md: 14px; --text-lg: 20px;  --text-xl: 28px;
  /* Health-state colors (system-wide) */
  --health-nominal:  #27ae60;
  --health-degraded: #f39c12;
  --health-critical: #e74c3c;
  --health-neutral:  #3498db;

  /* Severity colors (used in ops center, alarms, etc.) */
  --sev-critical:     var(--red);
  --sev-critical-bg:  rgba(248,81,73,.08);
  --sev-critical-border: rgba(248,81,73,.3);
  --sev-warning:      var(--yel);
  --sev-warning-bg:   rgba(210,153,34,.08);
  --sev-warning-border: rgba(210,153,34,.3);
  --sev-info:         var(--acc2);
  --sev-info-bg:      rgba(47,129,247,.08);
  --sev-info-border:  rgba(47,129,247,.3);
  --sev-ok:           var(--grn);
  --sev-ok-bg:        rgba(63,185,80,.08);
  --sev-ok-border:    rgba(63,185,80,.3);
}
[data-theme="light"] {
  --bg:      #f2f4f7; --bg2:     #ffffff; --bg3:     #eaecf0;
  --border:  #c8ced6; --fg:      #1f2328; --dim:     #656d76;
  --acc:     #1a6ed8; --acc2:    #0550ae; --acc-dim: #d0e4ff;
  --grn:     #1a7f37; --red:     #cf222e; --yel:     #945d00;
  --pur:     #8250df; --teal:    #0d8a99; --ora:     #bc4c00;
  --t1:      #1a6ed8; --t2:      #1a7f37;
  --shadow:  0 4px 24px rgba(0,0,0,.08);
}

/* ────────────────────────────────────────────────────────────────────────────
   Material Design 3 Semantic Tokens
   Maps EMS palette to M3 roles; consumed by ./components/md3/* components.
──────────────────────────────────────────────────────────────────────────── */
:root {
  --md-sys-color-primary: var(--acc);
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: var(--acc-dim);
  --md-sys-color-on-primary-container: var(--acc2);

  --md-sys-color-secondary: var(--teal);
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: rgba(59,201,219,.15);
  --md-sys-color-on-secondary-container: var(--teal);

  --md-sys-color-tertiary: var(--pur);
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: rgba(163,113,247,.15);
  --md-sys-color-on-tertiary-container: var(--pur);

  --md-sys-color-error: var(--red);
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: rgba(248,81,73,.15);
  --md-sys-color-on-error-container: var(--red);

  --md-sys-color-surface: var(--bg2);
  --md-sys-color-on-surface: var(--fg);
  --md-sys-color-surface-variant: var(--bg3);
  --md-sys-color-on-surface-variant: var(--dim);

  --md-sys-color-outline: var(--border);
  --md-sys-color-outline-variant: rgba(45,53,64,.5);

  --md-sys-elevation-1: 0 1px 3px rgba(0,0,0,.3);
  --md-sys-elevation-2: 0 2px 6px rgba(0,0,0,.3);
  --md-sys-elevation-3: 0 4px 12px rgba(0,0,0,.35);
  --md-sys-elevation-4: 0 6px 18px rgba(0,0,0,.4);
  --md-sys-elevation-5: 0 8px 24px rgba(0,0,0,.45);

  --md-sys-state-hover-opacity: .08;
  --md-sys-state-focus-opacity: .12;
  --md-sys-state-pressed-opacity: .12;

  --md-sys-typescale-display-font: var(--font);
  --md-sys-typescale-body-font: var(--body);
}

/* ── MD3 components (chip / button / text-field) ───────────────────────────── */
.md3-chip{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 12px;border-radius:14px;border:1px solid var(--md-sys-color-outline);background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface-variant);font-family:var(--md-sys-typescale-body-font);font-size:var(--text-sm);cursor:pointer;position:relative;overflow:hidden;user-select:none;transition:background .12s,border-color .12s,color .12s}
.md3-chip:hover{background:var(--md-sys-color-surface)}
.md3-chip:active{background:var(--md-sys-color-surface-variant)}
.md3-chip-filter{background:transparent;border-color:var(--md-sys-color-outline)}
.md3-chip-filter:hover{background:var(--md-sys-color-surface-variant)}
.md3-chip-selected{border-color:var(--md-sys-color-primary);background:rgba(47,129,247,.12);color:var(--md-sys-color-on-primary-container)}
.md3-chip-label{position:relative;z-index:1}
.md3-button-state-layer{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .12s;background:currentColor}
.md3-chip:active .md3-button-state-layer{opacity:var(--md-sys-state-pressed-opacity)}

.md3-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border-radius:18px;border:none;font-family:var(--md-sys-typescale-body-font);font-size:var(--text-md);font-weight:600;cursor:pointer;position:relative;overflow:hidden;transition:filter .12s,background .12s,color .12s;user-select:none}
.md3-button-icon,.md3-button-label{position:relative;z-index:1}
.md3-button-filled{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}
.md3-button-filled:hover{filter:brightness(1.1)}
.md3-button-outlined{background:transparent;border:1px solid var(--md-sys-color-outline);color:var(--md-sys-color-primary)}
.md3-button-text{background:transparent;color:var(--md-sys-color-primary)}
.md3-button-tonal{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}
.md3-button-elevated{background:var(--md-sys-color-surface);color:var(--md-sys-color-primary);box-shadow:var(--md-sys-elevation-1)}
.md3-button:active .md3-button-state-layer{opacity:var(--md-sys-state-pressed-opacity)}
.md3-button-sm{height:28px;padding:0 12px;font-size:var(--text-sm);border-radius:14px}

.md3-text-field{display:flex;flex-direction:column;gap:2px}
.md3-text-field-label{font-size:var(--text-xs);color:var(--dim);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.md3-text-field-label.required::after{content:' *';color:var(--md-sys-color-error)}
.md3-text-field-input{padding:var(--space-1) var(--space-2);background:var(--bg3);border:1px solid var(--border);border-radius:var(--space-1);color:var(--fg);font-size:var(--text-sm);font-family:inherit;transition:border-color .12s}
.md3-text-field-input:hover{border-color:var(--md-sys-color-outline)}
.md3-text-field-input:focus{outline:none;border-color:var(--md-sys-color-primary)}
.md3-text-field-input:disabled{opacity:.5;cursor:not-allowed}

/* Light-theme M3 overrides - placed AFTER the M3 :root defaults so the
   equal-specificity cascade picks the light values */
[data-theme="light"] {
  --md-sys-color-surface: #f2f4f7;
  --md-sys-color-on-surface: #1f2328;
  --md-sys-color-surface-variant: #eaecf0;
  --md-sys-color-outline: #c8ced6;
}

/* ────────────────────────────────────────────────────────────────────────────
   Spacing Scale (8px base) + component spacing tokens
   New code MUST use these instead of arbitrary pixel values.
──────────────────────────────────────────────────────────────────────────── */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --page-padding: var(--space-6);
  --card-padding: var(--space-5);
  --form-gap: var(--space-4);
  --button-gap: var(--space-2);
  --modal-padding: var(--space-5);
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);
  font-size:14px;line-height:1.5;min-height:100vh;overflow-x:hidden;
  touch-action:manipulation}
a{color:var(--acc);text-decoration:none}
button,input,select,textarea{font-family:var(--body);font-size:14px}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ── Layout ──────────────────────────────────────────────────────────────────── */
.layout{min-height:100vh;overflow-x:hidden}

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */
.sidebar{
  width:var(--sidebar);background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:fixed;left:0;top:0;height:100vh;z-index:200;
  transition:transform .2s;
}
.sidebar-brand{padding:20px 16px 14px;border-bottom:1px solid var(--border)}
.sidebar-brand .brand-logo{display:flex;justify-content:center;margin-bottom:6px}
.sidebar-brand .brand-logo img{height:38px;width:auto;border-radius:4px}
.sidebar-brand .brand-logo .logo-bg{
  background:#fff;padding:4px 8px;border-radius:6px;
  display:inline-flex;align-items:center;
}
[data-theme="dark"] .sidebar-brand .brand-logo .logo-bg{background:#fff}
[data-theme="light"] .sidebar-brand .brand-logo .logo-bg{background:transparent}
.sidebar-brand h1{
  font-family:var(--font);font-size:13px;font-weight:700;
  color:var(--acc);letter-spacing:.5px;line-height:1.4;display:none
}
.sidebar-brand p{font-size:11px;color:var(--dim);margin-top:0}
.sidebar-nav{flex:1;padding:10px 0;overflow-y:auto}
.nav-section{font-size:10px;color:var(--dim);font-weight:600;
  text-transform:uppercase;letter-spacing:1px;padding:12px 16px 4px}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;font-size:13px;color:var(--dim);
  cursor:pointer;border-left:3px solid transparent;
  transition:all .12s;text-decoration:none;
}
.nav-item:hover{color:var(--fg);background:var(--bg3)}
.nav-item.active{color:var(--acc2);border-left-color:var(--acc);background:rgba(47,129,247,.08)}
.nav-item .icon{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.nav-group{border-left:3px solid transparent}
.nav-group[open]{border-left-color:var(--acc)}
.nav-summary{list-style:none;cursor:pointer;user-select:none}
.nav-summary::-webkit-details-marker{display:none}
.nav-summary:hover{color:var(--fg);background:var(--bg3)}
.nav-chevron{margin-left:auto;font-size:12px;transition:transform .2s;opacity:.5}
.nav-group[open] .nav-chevron{transform:rotate(90deg)}
.nav-child{padding-left:46px !important;font-size:12px !important;border-left-color:transparent !important}
.nav-child.active{color:var(--acc2) !important;background:rgba(47,129,247,.08) !important;border-left-color:var(--acc) !important}
.sidebar-footer{padding:14px 16px;border-top:1px solid var(--border)}
.user-pill{display:flex;align-items:center;gap:10px}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--acc-dim);
  color:var(--acc2);display:flex;align-items:center;justify-content:center;
  font-family:var(--font);font-size:13px;font-weight:700;flex-shrink:0}
.user-info{min-width:0}
.user-name{font-size:13px;font-weight:600;color:var(--fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:11px;color:var(--dim);text-transform:capitalize}

/* ── Main area ───────────────────────────────────────────────────────────────── */
.main{margin-left:var(--sidebar);display:flex;flex-direction:column;min-height:100vh}

/* ── Topbar ──────────────────────────────────────────────────────────────────── */
.topbar{
  height:var(--topbar);background:var(--bg2);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;position:sticky;top:0;z-index:100;flex-shrink:0;
}
.topbar-left{display:flex;align-items:center;gap:12px}
.topbar-title{font-family:var(--font);font-size:14px;font-weight:600;color:var(--fg)}
.topbar-right{display:flex;align-items:center;gap:10px}
.hamburger{display:none;background:none;border:none;color:var(--dim);
  font-size:20px;cursor:pointer;padding:4px}
.topbar-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;
  cursor:pointer;border:1px solid var(--border);
  background:var(--bg3);color:var(--dim);transition:.12s;
}
.topbar-btn:hover{color:var(--fg);border-color:var(--acc)}
.alarm-badge{
  background:var(--red);color:#fff;
  border-radius:50%;width:18px;height:18px;
  font-size:10px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:2px;
}
.alarm-badge.hidden{display:none}

/* ── Page content ────────────────────────────────────────────────────────────── */
.page{padding:var(--page-padding);flex:1;overflow:auto;min-width:0}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-5);flex-wrap:wrap;gap:var(--space-3)}
@media(max-width:768px){.page-header .btn-group{margin-left:auto}}
.page-title{font-family:var(--font);font-size:18px;font-weight:700}
.page-subtitle{font-size:13px;color:var(--dim);margin-top:2px}

/* ── Cards ───────────────────────────────────────────────────────────────────── */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--card-padding);margin-bottom:var(--space-4)}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;margin:-16px -16px 16px;border-bottom:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;background:var(--bg3)}
.rp-chartbox{min-height:240px;position:relative}
.card-sm{padding:var(--space-3)}
.card-title{font-family:var(--font);font-size:11px;font-weight:600;
  color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--space-3)}

/* ── KPI Grid ────────────────────────────────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:20px}
.kpi-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px 18px;
  position:relative;overflow:hidden;
}
.kpi-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--accent-color, var(--acc));
}
.kpi-label{font-size:11px;color:var(--dim);text-transform:uppercase;
  letter-spacing:.8px;margin-bottom:8px;font-weight:600}
.kpi-value{font-family:var(--font);font-size:26px;font-weight:700;
  color:var(--accent-color, var(--fg));line-height:1}
.kpi-sub{font-size:11px;color:var(--dim);margin-top:5px}

/* ── Utility hover lift (for ops items) ──────────────────────────────────────── */
.ops-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 8px;
  font-size: 12px; text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.ops-item:hover { transform: translateX(3px); }

/* ── Focus-visible ring ──────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:7px;font-size:13px;font-weight:600;
  cursor:pointer;border:none;transition:.12s;white-space:nowrap;
}
.btn-primary{background:var(--acc);color:#fff}.btn-primary:hover{background:#1a6fd4}
.btn-secondary{background:var(--bg3);color:var(--fg);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--acc);color:var(--acc)}
.btn-danger{background:var(--red);color:#fff}.btn-danger:hover{background:#c0392b}
.btn-success{background:var(--grn);color:#fff}.btn-success:hover{background:#2d9e42}
.btn-warning{background:var(--yel);color:#fff}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:5px}
.btn-icon{padding:6px 8px}
.btn-group{display:flex;gap:var(--button-gap);flex-wrap:wrap;align-items:center}
.btn svg{vertical-align:middle;margin-right:4px}

/* ── Utility classes (shared across migrated pages) ─────────────────────────── */
.section-label{font-size:11px;color:var(--acc2);font-weight:600;text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.inline-flex{display:flex;align-items:center;gap:8px}
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.meter-context-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 2px 0}
.filter-bar #filter-q{flex:1;min-width:200px}
.filter-bar select{width:130px}
.form-grid-3{grid-template-columns:1fr 2fr 1fr}
.input-inline{background:var(--bg2);color:var(--dim);flex:1}
.readonly-input{background:var(--bg2);color:var(--dim)}
.col-mono-sm{font-size:11px}
.text-muted-sm{font-size:11px;color:var(--dim)}

/* ── Forms ───────────────────────────────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--form-gap);margin-bottom:var(--form-gap)}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group.full{grid-column:1/-1}
.form-label{font-size:12px;font-weight:600;color:var(--dim)}
.form-control{
  background:var(--bg3);border:1px solid var(--border);color:var(--fg);
  padding:8px 11px;border-radius:7px;width:100%;outline:none;transition:.12s;
}
.form-control:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(47,129,247,.15)}
select.form-control option{background:var(--bg2);color:var(--fg)}
select.form-control option:checked{background:var(--acc-dim);color:var(--fg);font-weight:600}
select.form-control option:hover{background:var(--bg3)}
textarea.form-control{resize:vertical;min-height:80px}
.form-hint{font-size:11px;color:var(--dim);margin-top:3px}
.required::after{content:' *';color:var(--red)}

/* ── Form validation states (components/form.html) ─────────────────────────── */
.form-control.error{border-color:var(--red);box-shadow:0 0 0 3px rgba(248,81,73,.15)}
.form-control.success{border-color:var(--grn);box-shadow:0 0 0 3px rgba(63,185,80,.15)}
.form-error{font-size:11px;color:var(--red);margin-top:4px;display:block}
.checkbox-wrapper{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;user-select:none}
.checkbox-wrapper input[type="checkbox"]{width:18px;height:18px;cursor:pointer}
.checkbox-label{font-size:14px;color:var(--fg)}

/* ── Tables ──────────────────────────────────────────────────────────────────── */
.table-wrap{
  overflow:auto;max-height:620px;
  border-radius:var(--radius);
  border-top:3px solid var(--acc);
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.table-wrap table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.table-wrap thead{position:sticky;top:0;z-index:2}
.table-wrap thead th{
  background:var(--bg);color:var(--dim);font-size:11px;
  text-transform:uppercase;letter-spacing:.6px;
  padding:10px 14px;text-align:left;font-weight:600;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
.table-wrap tbody td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.table-wrap tbody tr:last-child td{border-bottom:none}
.table-wrap tbody tr:hover td{background:var(--bg3)}
.table-wrap::-webkit-scrollbar{width:6px}
.table-wrap::-webkit-scrollbar-track{background:transparent}
.table-wrap::-webkit-scrollbar-thumb{background:var(--dim);border-radius:3px}
.table-wrap{scrollbar-width:thin;scrollbar-color:var(--dim) transparent}
.col-mono{font-family:var(--font);font-size:12px}
.col-right{text-align:right}
.col-center{text-align:center}
/* Not redundant with the utilities above: `.table-wrap thead th` wins on
   specificity, so these look deletable but reintroduce centered headers. */
.table-wrap thead th.col-right{text-align:right}
.table-wrap thead th.col-center{text-align:center}
.tenant-table-wrap thead th.col-right{text-align:right}
.tenant-table-wrap thead th.col-center{text-align:center}
/* Meters-specific action-cell treatment, scoped by id: the global .btn-group
   wraps, and letting it wrap freely in a narrow cell stacked five buttons into
   a 160px div that stretched every row to 181px. Capping the group breaks it to
   two tidy lines instead — one long line forces the table to scroll, five lines
   balloon the row. Scoped to #meter because profiles reuses .td-actions with
   *text* buttons, which a fixed icon width would clip. */
#meter .td-actions{min-width:128px}
#meter .td-actions .btn-group{flex-wrap:wrap;gap:3px;max-width:104px}
#meter .td-actions .btn-sm{padding:4px 2px;width:32px;min-width:0;display:inline-flex;align-items:center;justify-content:center}
/* Auto table layout sizes a column for its single longest cell, so one long
   shop name left a visible gap before Label while Label itself was squeezed
   narrow enough to wrap "Meter 1". Cap the former, stop the latter wrapping. */
.meter-tenant-cell{max-width:170px}
.meter-label-cell{white-space:nowrap}
.col-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:0}
.hide-tablet{display:table-cell}
/* Breakpoints are viewport-based, but the table's real constraint is its
   container = viewport minus the ~290px sidebar+padding. At the old 1200px
   breakpoint a 1280px viewport left a 990px container while every hide-tablet
   column stayed visible, so tables overflowed instead of collapsing. Offset the
   breakpoints by the sidebar so columns drop out when the container is narrow. */
@media(max-width:1500px){.hide-tablet{display:none}}
/* Middle tier: lets a wide table shed its widest technical columns before
   shedding operational ones, so it degrades 13 -> 11 -> 9 instead of
   dropping 7 columns at once at the hide-tablet breakpoint. */
.hide-laptop{display:table-cell}
@media(max-width:1400px){.hide-laptop{display:none}}
.hide-mobile{display:table-cell}
@media(max-width:1200px){.hide-mobile{display:none}}

/* ── Sortable columns (components/table.html) ──────────────────────────────── */
th[data-sort]{cursor:pointer;user-select:none;transition:background .15s}
th[data-sort]:hover{background:var(--bg3)}
.sort-arrow{opacity:.25;font-size:10px;margin-left:4px;display:inline-block;transition:opacity .2s}
th[data-sort]:hover .sort-arrow{opacity:.5}
th[data-sort].sorted-asc .sort-arrow{opacity:1}
th[data-sort].sorted-asc .sort-arrow::before{content:'▲'}
th[data-sort].sorted-desc .sort-arrow{opacity:1}
th[data-sort].sorted-desc .sort-arrow::before{content:'▼'}

/* ── Row action buttons (components/table.html) ─────────────────────────────── */
.table-actions{display:flex;gap:var(--space-1);justify-content:flex-end}

/* ── Table component chrome (components/table.html, L18) ─────────────────────── */
.tbl-card-flush{padding:0}
.tbl-empty-cell{text-align:center;color:var(--dim);font-size:13px}

/* ── Tab panes (used by dashboard, analytics, lifecycle) ──────────────────────── */
.tp{display:none}.tp.vis{display:block}

/* ── Badges ──────────────────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:2px 9px;
  border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-critical{background:rgba(248,81,73,.15);color:var(--red);border:1px solid rgba(248,81,73,.3)}
.badge-warning{background:rgba(210,153,34,.15);color:var(--yel);border:1px solid rgba(210,153,34,.3)}
.badge-info{background:rgba(121,192,255,.12);color:var(--acc2);border:1px solid rgba(121,192,255,.25)}
.badge-success{background:rgba(63,185,80,.12);color:var(--grn);border:1px solid rgba(63,185,80,.25)}
.badge-new{background:rgba(248,81,73,.15);color:var(--red)}
.badge-acknowledged{background:rgba(210,153,34,.15);color:var(--yel)}
.badge-resolved{background:rgba(63,185,80,.12);color:var(--grn)}
.badge-active{background:rgba(63,185,80,.12);color:var(--grn)}
.badge-inactive{background:var(--bg3);color:var(--dim)}
.badge-tenant{background:rgba(47,129,247,.12);color:var(--acc2)}
.badge-cam{background:rgba(163,113,247,.12);color:var(--pur)}

/* ── Status dots ─────────────────────────────────────────────────────────────── */
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.dot-ok{background:var(--grn);box-shadow:0 0 6px var(--grn)}
.dot-err{background:var(--red);box-shadow:0 0 6px var(--red)}
.dot-warn{background:var(--yel)}
.dot-off{background:var(--dim)}

/* ── Modal ───────────────────────────────────────────────────────────────────── */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.65);z-index:500;
  align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:14px;width:100%;max-width:580px;
  max-height:90vh;overflow-y:auto;box-shadow:var(--shadow);
}
.modal-header{
  padding:18px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;background:var(--bg2);
  /* Above the sticky theads (z-index:2). A thead whose wrapper is a scrollport
     with no scroll range -- max-height larger than its content -- has nothing
     to stick to and pins to the modal's top instead, painting over the title. */
  z-index:3;
}
.modal-title{font-family:var(--font);font-size:14px;font-weight:700}
.modal-close{background:none;border:none;color:var(--dim);
  font-size:20px;cursor:pointer;padding:2px 6px;border-radius:4px}
.modal-close:hover{color:var(--red);background:var(--bg3)}
.modal-body{padding:20px}
.modal-lg{max-width:680px}
.modal-md{max-width:520px}
.modal-sm{max-width:440px}
.modal-footer{padding:16px 20px;border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:8px}

/* ── Alerts ──────────────────────────────────────────────────────────────────── */
.alert{padding:10px 14px;border-radius:7px;font-size:13px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.alert-error{background:#fff3cd;border:1px solid #ffc107;color:#664d03;padding:var(--space-3);border-radius:var(--radius);display:flex;align-items:flex-start;gap:var(--space-2)}
.alert-error::before{content:"⚠";font-size:1.2em;flex-shrink:0}
.alert-success{background:rgba(63,185,80,.12);border:1px solid rgba(63,185,80,.3);color:var(--grn)}
.alert-warning{background:rgba(210,153,34,.12);border:1px solid rgba(210,153,34,.3);color:var(--yel)}
.alert-info{background:rgba(121,192,255,.1);border:1px solid rgba(121,192,255,.25);color:var(--acc2)}

/* ── Flash messages ──────────────────────────────────────────────────────────── */
.flash-container{padding:0 24px;margin-top:12px}

/* ── Search ──────────────────────────────────────────────────────────────────── */
.search-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.search-bar .form-control{flex:1;min-width:200px}

/* ── Timeline ────────────────────────────────────────────────────────────────── */
.timeline{display:flex;flex-direction:column;gap:0}
.tl-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);position:relative}
.tl-item:last-child{border-bottom:none}
.tl-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12px;flex-shrink:0;margin-top:1px}
.tl-dot-critical{background:rgba(248,81,73,.2);color:var(--red)}
.tl-dot-warning{background:rgba(210,153,34,.2);color:var(--yel)}
.tl-dot-info{background:rgba(121,192,255,.15);color:var(--acc2)}
.tl-dot-success{background:rgba(63,185,80,.15);color:var(--grn)}
.tl-content{flex:1;min-width:0}
.tl-title{font-size:13px;font-weight:600;color:var(--fg)}
.tl-detail{font-size:12px;color:var(--dim);margin-top:2px;word-break:break-word}
.tl-time{font-size:11px;color:var(--dim);white-space:nowrap;font-family:var(--font)}

/* ── Loading ─────────────────────────────────────────────────────────────────── */
.spinner{
  width:20px;height:20px;border:2px solid var(--border);
  border-top-color:var(--acc);border-radius:50%;
  animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-overlay{display:flex;align-items:center;justify-content:center;
  padding:40px;color:var(--dim);gap:10px}

/* ── Skeleton placeholder pulse ─────────────────────────────────────────────── */
.skeleton{animation:sk-pulse 1.2s ease-in-out infinite}
@keyframes sk-pulse{0%,100%{opacity:.25}50%{opacity:.65}}

/* ── Table skeleton rows (shimmer) ──────────────────────────────────────────── */
.skel-row{display:flex;gap:12px;padding:10px 8px;border-bottom:1px solid var(--border)}
.skel-cell{height:14px;border-radius:4px;background:linear-gradient(90deg,var(--bg3) 25%,var(--bg2) 50%,var(--bg3) 75%);background-size:600px 100%;animation:shimmer 1.4s ease-in-out infinite}
.skel-cell:nth-child(1){width:30%}
.skel-cell:nth-child(2){width:10%}
.skel-cell:nth-child(3){width:12%}
.skel-cell:nth-child(4){width:14%}
.skel-cell:nth-child(5){width:20%}
.skel-cell:nth-child(6){width:8%}
.skel-cell:nth-child(7){width:6%}
@keyframes shimmer{0%{background-position:0 0}100%{background-position:600px 0}}

/* ── Pulse ring (for live status dots) ──────────────────────────────────────── */
.dot-pulse{position:relative}
.dot-pulse::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  border:2px solid var(--grn);opacity:0;
  animation:pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring{
  0%{transform:scale(.7);opacity:.8}
  100%{transform:scale(2.5);opacity:0}
}

/* ── Status banner ──────────────────────────────────────────────────────────── */
.status-banner{
  display:flex;align-items:center;gap:16px;
  padding:16px 20px;border-radius:var(--radius);
  margin-bottom:20px;border:1px solid;background:var(--bg2);
}
.status-banner-nominal{border-color:rgba(39,174,96,.35);background:rgba(39,174,96,.06)}
.status-banner-degraded{border-color:rgba(243,156,18,.35);background:rgba(243,156,18,.06)}
.status-banner-critical{border-color:rgba(231,76,60,.35);background:rgba(231,76,60,.06)}
.status-banner-dot{
  width:14px;height:14px;border-radius:50%;flex-shrink:0;position:relative;
}
.status-banner-nominal .status-banner-dot{background:var(--health-nominal);box-shadow:0 0 10px var(--health-nominal)}
.status-banner-degraded .status-banner-dot{background:var(--health-degraded);box-shadow:0 0 10px var(--health-degraded)}
.status-banner-critical .status-banner-dot{background:var(--health-critical);box-shadow:0 0 10px var(--health-critical)}
.status-banner-title{font-size:16px;font-weight:700;font-family:var(--font)}
.status-banner-desc{font-size:12px;color:var(--dim);margin-top:2px}

/* ── Section heading (wide-tracking industrial label) ───────────────────────── */
.sh{font-size:10px;font-weight:600;color:var(--dim);
  text-transform:uppercase;letter-spacing:1.2px;margin-bottom:14px}

/* ── KPI health colour classes ──────────────────────────────────────────────── */
.kpi-health-nominal{--accent-color:var(--health-nominal)}
.kpi-health-degraded{--accent-color:var(--health-degraded)}
.kpi-health-critical{--accent-color:var(--health-critical)}
.kpi-health-neutral{--accent-color:var(--health-neutral)}

/* ── Port health bar dots ───────────────────────────────────────────────────── */
.ph-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}
.ph-dot-ok{background:var(--health-nominal)}
.ph-dot-warn{background:var(--health-degraded)}
.ph-dot-err{background:var(--health-critical)}
.ph-dot-unknown{background:var(--dim)}

/* ── Tooltips / Empty states ─────────────────────────────────────────────────── */
.empty-state{text-align:center;padding:48px 20px;color:var(--dim)}
.empty-state .icon{font-size:40px;margin-bottom:12px}
.empty-state h3{font-size:15px;margin-bottom:6px;color:var(--fg)}
.empty-state p{font-size:13px}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .hamburger{display:block}
  .main{margin-left:0}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
  .page{padding:14px}
  .topbar{padding:0 14px}
  .search-bar .form-control{min-width:120px}
}
@media(pointer:coarse){
  .btn-sm{padding:8px 14px;font-size:13px}
  .nav-item{padding:12px 16px}
  select.form-control, input.form-control{min-height:42px}
}
@media(max-width:480px){
  .kpi-grid{grid-template-columns:1fr}
}

/* ── Responsive tables (opt-in via .resp-table) ──────────────────────────── */
@media(max-width:768px){
  .table-wrap{overflow:visible;max-height:none;border-radius:0;border:none;border-top:none}
  .tenant-table-wrap{overflow:visible;max-height:none;border-radius:0;border:none;border-top:none}
  .sync-anomalies-scroll{overflow:visible;max-height:none;border-radius:0;border:none;border-top:none}
  .rd-detail-tamper-scroll{overflow:visible;max-height:none;border-radius:0;border:none;border-top:none}
  /* Those four wrappers stop being scrollports here, so a sticky thead would
     re-anchor to the nearest scrolling ancestor -- for a modal that is the
     .modal itself, where z-index:2 paints it over the sticky .modal-header
     (z-index:1). With no scrollport there is nothing to stick to. */
  .table-wrap thead,
  .tenant-table-wrap thead,
  .sync-anomalies-scroll thead,
  .rd-detail-tamper-scroll thead{position:static}
  .resp-table thead{display:none}
  .resp-table tbody tr{
    display:block;padding:12px;margin-bottom:10px;
    background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  }
  .resp-table tbody td{
    display:flex;justify-content:space-between;align-items:center;
    padding:5px 0;border:none;text-align:right;gap:8px;
    white-space:normal;word-break:break-word;
  }
  .resp-table tbody td::before{
    content:attr(data-label);font-weight:600;color:var(--dim);
    font-size:10px;text-transform:uppercase;letter-spacing:.3px;
    text-align:left;white-space:nowrap;flex-shrink:0;margin-right:8px;
  }
  .resp-table tbody tr:hover td{background:transparent}
}

/* ── Hide secondary toolbar buttons on mobile ────────────────────────────── */
@media(max-width:768px){
  .tb-extra{display:none!important}
}

/* ── User Dropdown ──────────────────────────────────────────────────────────── */
.user-menu-wrap{position:relative}
.user-pill-top{cursor:pointer;display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:8px;transition:.12s}
.user-pill-top:hover{background:var(--bg3)}
.user-dropdown{
  display:none;position:absolute;top:calc(100% + 6px);right:0;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:10px;box-shadow:var(--shadow);min-width:180px;z-index:300;
  overflow:hidden;
}
.user-dropdown.open{display:block}
.dropdown-header{padding:12px 14px;border-bottom:1px solid var(--border)}
.dropdown-header .user-name{font-size:13px;font-weight:600}
.dropdown-header .user-role{font-size:11px;color:var(--dim);text-transform:capitalize}
.dropdown-item{
  display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:13px;
  color:var(--fg);text-decoration:none;transition:.1s;width:100%;border:none;
  background:none;cursor:pointer;font-family:var(--body);
}
.dropdown-item:hover{background:var(--bg3)}
.dropdown-item.dropdown-signout{color:var(--red)}
.dropdown-item.dropdown-signout:hover{background:rgba(248,81,73,.1)}
.dropdown-divider{height:1px;background:var(--border);margin:0}

/* ── Scroll containers ──────────────────────────────────────────────────────── */
.scroll-v{overflow-y:auto;max-height:600px}
.scroll-h{overflow-x:auto}
.scroll-both{overflow:auto;max-height:600px}

/* ── Responsive grid utilities ────────────────────────────────────────────────── */
.rg-5{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:8px;align-items:center}
.rg-3{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:end}
@media(max-width:640px){
  .rg-5{grid-template-columns:1fr;justify-items:center;text-align:center}
  .rg-5 .rg-arrow{transform:rotate(90deg)}
}
@media(max-width:768px){
  .rg-2{grid-template-columns:1fr!important}
}
/* ════════════════════════════════════════════════════════════════════════════
   DASHBOARD (moved from templates/dashboard.html inline <style>)
   Class names preserved for JS compatibility; values tokenized.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── KPI strip ── */
.krow{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-2)}
@media(max-width:1100px){.krow{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.krow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:450px){.krow{grid-template-columns:1fr;gap:var(--space-1)}}
.kpi{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-3) var(--space-4);position:relative}
@media(max-width:450px){.kpi{padding:var(--space-2) var(--space-3)}}
.kl{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-1);font-weight:600}
@media(max-width:450px){.kl{font-size:9px;letter-spacing:.3px}}
.kv{font-size:20px;font-weight:700;font-family:var(--font);line-height:1.2}
@media(max-width:450px){.kv{font-size:16px}}
.ks{font-size:10px;color:var(--dim);margin-top:var(--space-1)}
@media(max-width:450px){.ks{font-size:9px}}
.delta-bdg{display:inline-block;font-size:9px;font-weight:600;padding:0 var(--space-1);border-radius:var(--radius);margin-left:var(--space-1);vertical-align:middle}
@media(max-width:450px){.delta-bdg{font-size:8px;padding:0 var(--space-1)}}
.delta-up{color:var(--red);background:rgba(248,81,73,.12)}
.delta-dn{color:var(--grn);background:rgba(63,185,80,.12)}
.delta-flat{color:var(--dim);background:var(--bg3)}
.kpi-spark{height:20px;margin-top:var(--space-1)}
@media(max-width:450px){.kpi-spark{height:14px}}
.kpi-basis{font-size:9px;color:var(--dim);font-weight:600;margin-left:var(--space-1);letter-spacing:0;text-transform:none;white-space:nowrap}
@media(max-width:450px){.kpi-basis{font-size:8px;margin-left:var(--space-1)}}
@media(min-width:451px){.kpi .kl{min-height:30px}}

/* ── Widget rows ── */
.ops-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-3)}
@media(max-width:700px){.ops-row{grid-template-columns:1fr}}
@media(max-width:450px){.ops-row{gap:var(--space-1);margin-bottom:var(--space-2)}}
.cr2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-3)}
@media(max-width:700px){.cr2{grid-template-columns:1fr}}
@media(max-width:450px){.cr2{gap:var(--space-1);margin-bottom:var(--space-2)}}
.cr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-3)}
@media(max-width:900px){.cr3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cr3{grid-template-columns:1fr}}
@media(max-width:450px){.cr3{gap:var(--space-1);margin-bottom:var(--space-2)}}

/* ── Cards ── */
.cf{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-4);margin-bottom:var(--space-3)}
@media(max-width:450px){.cf{padding:var(--space-3) var(--space-3);margin-bottom:var(--space-2)}}
.ct{font-size:12px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
@media(max-width:450px){.ct{font-size:10px;letter-spacing:.3px}}
.cs{font-size:10px;color:var(--dim);margin-bottom:var(--space-2)}
@media(max-width:450px){.cs{font-size:9px;margin-bottom:var(--space-1)}}

/* ── Legend ── */
.leg{display:flex;flex-wrap:wrap;gap:var(--space-3);font-size:10px;color:var(--dim)}
.ld{width:8px;height:8px;border-radius:var(--space-1);display:inline-block;margin-right:var(--space-1);vertical-align:middle}

/* ── Power flow hero ── */
.live-hero-flow{min-height:400px;position:relative}
@media(max-width:600px){.live-hero-flow{min-height:160px}}
@media(max-width:450px){.live-hero-flow{min-height:120px}}

/* ── 7-day trends ── */
.trends-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-4) var(--space-4)}
@media(max-width:450px){.trends-card{padding:var(--space-3) var(--space-3)}}
.trends-title{font-size:12px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-1)}
@media(max-width:450px){.trends-title{font-size:10px;letter-spacing:.3px}}
.trends-sub{font-size:10px;color:var(--dim);margin-bottom:var(--space-3)}
@media(max-width:450px){.trends-sub{font-size:9px;margin-bottom:var(--space-2)}}
.trend-bars{display:flex;align-items:flex-end;gap:var(--space-1);height:100px;padding-bottom:var(--space-1)}
@media(max-width:450px){.trend-bars{height:70px;gap:var(--space-1)}}
.trend-bar{flex:1;border-radius:var(--space-1) var(--space-1) 0 0;position:relative;transition:height .3s;cursor:default;min-width:0}
.trend-bar:hover{opacity:.85}
.trend-bar-label{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-size:8px;color:var(--dim);white-space:nowrap}
@media(max-width:450px){.trend-bar-label{font-size:7px;bottom:-12px}}
.trend-bar-val{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:8px;color:var(--fg);white-space:nowrap;opacity:0;transition:opacity .15s}
@media(max-width:450px){.trend-bar-val{font-size:7px;top:-11px}}
.trend-bar:hover .trend-bar-val{opacity:1}
.delta-label{font-size:9px;color:var(--dim);margin-top:var(--space-1)}
@media(max-width:450px){.delta-label{font-size:8px}}

/* ── Period filter bar ── */
.period-bar,.dash-period-bar{display:flex;align-items:center;gap:var(--space-2);background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-2) var(--space-4);margin-bottom:var(--space-3);flex-wrap:wrap}
.period-bar .sep,.dash-period-bar .sep{color:var(--border);font-size:11px}
.period-bar .plabel,.dash-period-bar .dash-label{font-size:10px;color:var(--dim);margin-left:auto;white-space:nowrap}
.dash-period-bar .pf-arrow{color:var(--dim);font-size:11px}
.dash-period-bar .md3-chip-filter{height:24px;padding:0 10px;border-radius:12px;font-size:var(--text-sm)}
.dash-period-bar .md3-text-field{flex-direction:row;align-items:center;gap:4px}
.dash-period-bar .md3-text-field-label{margin-bottom:0}
@media(max-width:600px){.period-bar,.dash-period-bar{gap:var(--space-1);padding:var(--space-1) var(--space-2)}}
@media(max-width:450px){.period-bar,.dash-period-bar{gap:var(--space-1)}.dash-period-bar .md3-chip-filter{font-size:10px;padding:0 8px}}

/* ── Building filter bar ── */
.dash-building-bar{display:flex;align-items:center;gap:var(--space-2);background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-1) var(--space-3);margin:var(--space-2) 0}
.dash-building-bar select{max-width:280px}

/* ── Drag handle ── */
.drag-h{cursor:grab;color:var(--dim);font-size:13px;padding:0 var(--space-1);user-select:none;opacity:.4;transition:opacity .15s}
.drag-h:active{cursor:grabbing}
.card:hover .drag-h,.trends-card:hover .drag-h{opacity:.8}
.sortable-ghost{opacity:.3}
.sortable-chosen{box-shadow:0 4px 16px rgba(0,0,0,.15)}

/* ── Mobile chunk ── */
@media(max-width:450px){
  .card canvas,.trends-card canvas{max-height:120px}
  #power-flow-widget{margin-bottom:var(--space-2)!important}
  [id^="kpi-"] .skeleton{font-size:14px}
  [class*="cr"] .card{padding:0}
}

/* ── Tabs ── */
.tp{display:none}.tp.vis{display:block}
.tabs{display:flex;gap:var(--space-1);margin-bottom:var(--space-4);flex-wrap:wrap}
.tb{font-size:11px;padding:var(--space-1) var(--space-4);border-radius:var(--space-5);border:1px solid var(--border);background:transparent;color:var(--dim);cursor:pointer;font-weight:600;transition:.12s;font-family:inherit}
.tb:hover{color:var(--fg);border-color:var(--acc)}
.tb.on{background:rgba(47,129,247,.12);color:var(--acc2);border-color:rgba(47,129,247,.3)}

.period-bar .tb:not(.on) {
  background-color: #f8f9fa;
  color: #212529;
  border: 1px solid #dee2e6;
}
.period-bar .tb.on {
  background-color: var(--ora);
  color: var(--white);
  border-color: var(--ora);
}
.period-bar .tb:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ── Focus visible (U15) ──────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  outline: none;
}

/* ── Alarm page ─────────────────────────────────────────────────────────────── */
.alarm-page-wrap{display:flex;flex-direction:column;flex:1;overflow:hidden;padding:var(--space-5)}
.alarm-tabs{flex-shrink:0;margin-bottom:var(--space-4);display:flex;gap:4px;padding-bottom:var(--space-3);border-bottom:1px solid var(--border)}
.tab-count{display:inline-flex;align-items:center;justify-content:center;background:var(--bg3);color:var(--dim);border-radius:10px;padding:1px 7px;font-size:11px;margin-left:4px;min-width:20px}
.tb.on .tab-count{background:rgba(47,129,247,.2);color:var(--acc2)}
.alarm-filters{flex-shrink:0;margin-bottom:var(--space-3)}
.alarm-list{flex:1;overflow-y:auto;min-height:0;padding-right:4px}
/* ── Alarm cards ────────────────────────────────────────────────────────────── */
.alarm-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:10px;border-left:4px solid var(--border);transition:.12s}
.alarm-card:hover{border-color:var(--acc)}
.alarm-card.critical{border-left-color:var(--red)}
.alarm-card.warning{border-left-color:var(--yel)}
.alarm-card.info{border-left-color:var(--acc2)}
.alarm-card.resolved{opacity:.6}
.alarm-card-row{display:flex;align-items:flex-start;gap:14px}
.alarm-card-body{flex:1;min-width:0}
.alarm-icon{font-size:24px;flex-shrink:0;margin-top:2px}
.alarm-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.alarm-type-name{font-size:14px;font-weight:700}
.alarm-id-badge{font-size:11px;color:var(--dim);font-weight:400}
.alarm-where{font-size:13px;color:var(--fg);margin-bottom:4px}
.alarm-trigger-detail{font-size:12px;color:var(--dim);background:var(--bg3);padding:6px 10px;border-radius:6px;margin-bottom:8px}
.alarm-timeline{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--dim)}
.alarm-timeline .text-warn{color:var(--yel)}
.alarm-actions{flex-shrink:0;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.alarm-time-ago{font-size:11px;color:var(--dim);text-align:right}
.alarm-btn-stack{display:flex;flex-direction:column;gap:4px}

/* ── Alarm modal ────────────────────────────────────────────────────────────── */
.alarm-modal-info{background:var(--bg3);border-radius:8px;padding:12px;margin-bottom:14px;font-size:13px}
.alarm-modal-title{font-weight:600;margin-bottom:4px}
.alarm-modal-sub{font-size:12px;color:var(--dim)}

/* ── Alarm drill-down links ─────────────────────────────────────────────────── */
.alarm-drill-link{color:var(--acc2);text-decoration:none;transition:color .12s,text-decoration .12s;cursor:pointer}
.alarm-drill-link:hover{color:var(--fg);text-decoration:underline}
.alarm-drill-tenant{font-weight:700}
.alarm-drill-meter{font-weight:500;opacity:.85}
.alarm-drill-meter:hover{opacity:1}
.alarm-drill-btn{font-size:12px;padding:4px 10px;border-radius:6px;transition:background .12s,transform .1s;text-decoration:none}
.alarm-drill-btn:hover{transform:translateY(-1px)}

/* ── Alarm skeleton loaders ─────────────────────────────────────────────────── */
.alarm-skel-wrap{padding:8px}
.alarm-skel-row{display:flex;gap:14px;padding:14px;margin-bottom:8px;border-radius:8px;border:1px solid var(--border)}
.alarm-skel-cell{height:14px;margin:2px 0;border-radius:4px;background:linear-gradient(90deg,var(--bg3) 25%,var(--bg2) 50%,var(--bg3) 75%);background-size:600px 100%;animation:shimmer 1.4s ease-in-out infinite}

/* ── Alarm page layout overrides (full-height alarm view) ───────────────────── */
.alarm-page-wrap ~ .main{height:100vh!important;min-height:100vh!important}
.alarm-page-wrap ~ .page{overflow:hidden!important;display:flex;flex-direction:column;padding:0!important}

/* ── Tenants ─────────────────────────────────────────────────────────────── */
/* .table-wrap and .sort-arrow are scoped here so they do not clobber the
   global rules used by components/table.html and every other page's tables. */
.highlight-flash {
  animation: highlightPulse 2s ease-out;
}
@keyframes highlightPulse {
  0%   { background: rgba(47,129,247,.3); }
  100% { background: transparent; }
}
#tenant-table { min-width:700px }
@media(max-width:768px){ #tenant-table { min-width:0 } }
.tenant-table-wrap{
  overflow:auto;max-height:620px;
  border-radius:var(--radius);
  border-top:3px solid var(--acc);
}
.tenant-table-wrap table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.tenant-table-wrap thead{position:sticky;top:0;z-index:2}
.tenant-table-wrap thead th{
  background:var(--bg);color:var(--dim);font-size:11px;
  text-transform:uppercase;letter-spacing:.6px;
  padding:10px 14px;text-align:left;font-weight:600;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
.tenant-table-wrap tbody td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.tenant-table-wrap tbody tr:last-child td{border-bottom:none}
.tenant-table-wrap tbody tr:hover td{background:rgba(47,129,247,.06)}
.tenant-table-wrap::-webkit-scrollbar{width:6px}
.tenant-table-wrap::-webkit-scrollbar-track{background:transparent}
.tenant-table-wrap::-webkit-scrollbar-thumb{background:var(--dim);border-radius:3px}
.tenant-table-wrap{scrollbar-width:thin;scrollbar-color:var(--dim) transparent}

/* Phase-colored table header accent */
#tenant-table thead tr {
  background: var(--bg3);
  border-top: 2px solid;
  border-image: linear-gradient(90deg, #e74c3c 0%, #f0ad4e 50%, var(--acc2) 100%) 1;
}

/* Row clickable */
#tenant-table tbody tr { cursor:pointer;transition:background .15s }
#tenant-table tbody tr:hover { background:rgba(47,129,247,.06) }
/* Deleted row styling */
.row-deleted { opacity:.5; text-decoration:line-through }
.row-deleted:hover { opacity:.7!important }

/* Action button focus indicator */
#tenant-table .btn-group .btn:focus-visible,
#tenant-table .btn-group a:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(47,129,247,.15);
}

/* Load kW status colors */
.load-ok       { color:var(--grn); font-weight:600 }
.load-warn     { color:#f0ad4e; font-weight:600 }
.load-critical { color:var(--red); font-weight:600 }
/* The load badge classes switch font-weight, and bold digits are wider than
   regular ones, so the decimal point landed at a different x on every row.
   Pin the weight and use tabular figures so the whole column lines up. */
.load-kw{font-weight:600;font-variant-numeric:tabular-nums}
.tenant-table-wrap tbody td.load-kw{vertical-align:top;padding-top:12px}
.load-none{color:var(--fg)}

/* Linked meters table cells */
.td-m { padding:5px 8px;border-bottom:1px solid var(--border);font-size:var(--text-base) }

/* Detail modal metadata cells */
.dt-lbl { color:var(--dim);padding:3px 0;width:130px;font-size:var(--text-md) }
.dt-val { padding:3px 0;font-size:var(--text-md) }

/* Phase indicator dot */
.phase-pt { display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle }
.phase-pt-Red    { background:#e74c3c }
.phase-pt-Yellow { background:#f0ad4e }
.phase-pt-Blue   { background:var(--acc2) }
.phase-pt-L1     { background:#e74c3c }
.phase-pt-L2     { background:#f0ad4e }
.phase-pt-L3     { background:var(--acc2) }

.phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  font-weight: 500;
}
.phase-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.phase-dot.L1 { background: var(--red); }
.phase-dot.L2 { background: var(--yel); }
.phase-dot.L3 { background: var(--acc2); }

/* Sort arrows (CSS borders) ─ scoped to #tenant-table to avoid clobbering the
   global .sort-arrow using text-glyph triangles in components/table.html */
#tenant-table .sort-arrow {
  display:inline-block; width:0; height:0; margin-left:4px;
  vertical-align:middle;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
}
#tenant-table .sort-arrow.asc  { border-bottom:5px solid var(--fg); border-top:0 }
#tenant-table .sort-arrow.desc { border-top:5px solid var(--fg); border-bottom:0 }

/* Alarm notification bubble on button */
.alarm-bubble {
  position:absolute; top:-6px; right:-6px;
  min-width:16px; height:16px;
  padding:0 5px;
  background:#e74c3c; color:#fff;
  border-radius:8px;
  font-size:var(--text-sm); font-weight:700; line-height:16px;
  text-align:center;
  pointer-events:none;
}

/* Form section header */
.f-section { font-size:var(--text-sm);color:var(--acc2);font-weight:600;text-transform:uppercase;letter-spacing:.6px;margin:16px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--border) }

/* Detail modal info grid */
.detail-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px }

/* ── Tenants page extras ─────────────────────────────────────────────────── */
/* Global display utility (hides modal default-state buttons & empty states;
   ".hidden" previously had no standalone rule in app.css) */
.hidden{display:none}

/* Page subtitle */
.tenant-page-subtitle{display:flex;align-items:center;gap:10px}

/* Filter card + row */
.tenant-filter-card{margin-bottom:var(--space-3)}
.filter-bar #filter-floor{width:120px}
.filter-bar #filter-cat{width:140px}
.filter-bar #filter-status{width:130px}
.tenant-filter-check{display:flex;align-items:center;gap:4px;font-size:var(--text-base);cursor:pointer;white-space:nowrap}
.tenant-filter-check span{color:var(--dim)}

/* Table */
.tenant-table-card{padding:0}
.tenant-th{cursor:pointer}
.tenant-empty-row td{text-align:center;color:var(--dim);font-size:var(--text-base)}

/* Detail modal */
.tenant-detail-modal{max-width:720px}

/* Name / meta / load cells */
.tenant-name-cell{font-weight:600;font-size:var(--text-md);display:flex;align-items:center;gap:4px}
.tenant-meta-mono{font-size:var(--text-sm);color:var(--dim);opacity:.65;font-family:monospace}
.tenant-sub-line{font-size:var(--text-sm);color:var(--dim)}
.tenant-pct-sub{font-size:var(--text-xs);opacity:.5}

/* Small badges attached to badges / cells */
.phase-status-badge{font-size:var(--text-xs);margin-left:4px;padding:1px 6px;border-radius:3px}
.phase-verified-badge{display:inline-flex;width:auto;margin-left:8px;padding:1px 6px;font-size:var(--text-xs);border-radius:3px;vertical-align:middle}
.conflict-badge{font-size:var(--text-xs);margin-left:2px;padding:1px 4px;border-radius:3px}
.badge-xs{font-size:var(--text-xs)}

/* Text color / micro utilities */
.text-dim{color:var(--dim)}
.text-grn{color:var(--grn)}
.icon-mid{vertical-align:middle}
.btn-nolink{text-decoration:none;color:inherit}
.tenant-alarm-link{position:relative}

/* Detail modal tables */
.tenant-sub-table{width:100%;font-size:var(--text-base);margin-top:8px}
.dt-table{font-size:var(--text-md);width:100%}
.td-strong{font-weight:600}
.tenant-t1{color:var(--acc2)}
.tenant-t2{color:var(--grn)}
.empty-state-sm{padding:16px}
.tenant-muted-note{color:var(--dim);font-size:var(--text-base)}
.f-section-first{margin-top:0}

/* Load-group edit rows */
.lg-row{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.lg-name-input{flex:2;padding:4px 8px;font-size:var(--text-base)}
.lg-load-input{flex:1;padding:4px 8px;font-size:var(--text-base)}
.lg-btn{font-size:var(--text-sm);padding:3px 8px}
.lg-edit-wrap{margin-top:6px}

/* Edit / add form helpers */
.tenant-form-block{margin-bottom:14px}
.tenant-grid-mt8{margin-top:8px}
.tenant-error-block{margin-top:10px}
.tenant-verified-label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:var(--text-base);font-weight:normal}
.tenant-phase-note{font-size:var(--text-xs);color:var(--dim)}
.lg-section{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.tenant-base-text{font-size:var(--text-base)}
.mb-16{margin-bottom:16px}

/* Sync summary modal */
.tenant-sync-counts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tenant-sync-badge{font-size:var(--text-sm);padding:4px 10px}
.sync-anomalies-scroll{
  overflow:auto;max-height:300px;
  border-radius:var(--radius);
  border-top:3px solid var(--acc);
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.sync-anomalies-scroll table{width:100%;border-collapse:separate;border-spacing:0}
.sync-anomalies-scroll thead{position:sticky;top:0;z-index:2}
.sync-anomalies-scroll thead th{background:var(--bg);color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;padding:8px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
.sync-anomalies-scroll tbody td{padding:8px 12px;border-bottom:1px solid var(--border)}
.sync-anomalies-scroll::-webkit-scrollbar{width:6px}
.sync-anomalies-scroll::-webkit-scrollbar-track{background:transparent}
.sync-anomalies-scroll::-webkit-scrollbar-thumb{background:var(--dim);border-radius:3px}
.sync-anomalies-scroll{scrollbar-width:thin;scrollbar-color:var(--dim) transparent}
.sync-sm-table{font-size:var(--text-sm)}
.tenant-ok-note{color:var(--grn);font-size:var(--text-base)}

/* Import modal */
.import-help{font-size:var(--text-base);color:var(--dim);margin-bottom:12px}
.import-code-line{display:block;margin-top:6px;font-size:var(--text-sm)}
.import-file-input{width:100%;margin-bottom:12px}
.import-status-dim{font-size:var(--text-base);color:var(--dim)}

/* ── Billing ─────────────────────────────────────────────────────────────── */
/* Snapshot list layout ─ left rail + right detail */
.bill-layout{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start}
@media(max-width:900px){.bill-layout{grid-template-columns:1fr}}
.bill-snap-list{max-height:600px;overflow-y:auto}
.bill-card-flush{padding:0}
.bill-card-head{padding:14px 16px;border-bottom:1px solid var(--border);font-size:12px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.6px}
.bill-empty-lg{padding:60px}
.bill-empty-md{padding:24px}
.bill-skel-item{padding:16px;border-bottom:1px solid var(--border)}
.bill-skel-cell{height:12px}

/* Snapshot list items */
.snap-item{padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--border);transition:.12s}
.snap-item:hover{background:var(--bg3)}
.snap-item.active{background:rgba(47,129,247,.1);border-left:3px solid var(--acc)}
.snap-item:last-child{border-bottom:none}
.bill-item-title{font-weight:700;font-size:14px}
.bill-item-sub{font-size:11px;color:var(--dim);margin-top:2px}
.bill-notes{font-size:11px;color:var(--dim);margin-top:4px}

/* Micro-utilities (billing-specific) */
.flex-between{display:flex;justify-content:space-between;align-items:center}
.text-right{text-align:right}
.mb-14{margin-bottom:14px}
.mb-12{margin-bottom:12px}
.bill-t1{color:var(--acc2)}
.bill-t2{color:var(--grn)}
.bill-pur{color:var(--pur)}
.bill-neg{color:var(--red)}
.bill-vtop{vertical-align:top}
.bill-cell-t1{font-weight:600;color:var(--acc2)}
.bill-cell-t2{font-weight:600;color:var(--grn)}
.bill-brand-cell{font-weight:600;vertical-align:top}

/* Snapshot detail header */
.bill-head-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.bill-title-lg{font-size:18px;font-weight:700}
.bill-sub{font-size:12px;color:var(--dim);margin-top:2px}

/* KPI grid */
.bill-kpi-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-bottom:14px}
.bill-kpi-acc2{--accent-color:var(--acc2)}
.bill-kpi-grn{--accent-color:var(--grn)}
.bill-kpi-acc{--accent-color:var(--acc)}
.bill-kpi-pur{--accent-color:var(--pur)}
.bill-kpi-dim{--accent-color:var(--dim)}
.bill-kpi-val{font-size:20px}

/* Floor sections */
.bill-floor-head{padding:12px 16px;background:var(--bg3);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;cursor:pointer;border-radius:10px 10px 0 0}
.bill-floor-title{display:flex;align-items:center;gap:10px}
.bill-floor-name{font-size:13px;font-weight:700}
.bill-floor-totals{display:flex;align-items:center;gap:20px}
.bill-floor-t1{font-size:12px;color:var(--acc2)}
.bill-floor-t2{font-size:12px;color:var(--grn)}
.bill-collapse{color:var(--dim);font-size:12px}
.bill-table-flush{border:none;border-radius:0}
.bill-meter-label{font-size:12px;color:var(--dim)}
.bill-row-neg{background:rgba(248,81,73,.05)}
.bill-row-agg{background:var(--bg3);font-weight:700}
.bill-agg-label{font-size:12px;color:var(--dim);padding-left:20px}
.bill-row-foot{background:var(--bg);font-weight:700;font-size:13px}
.bill-foot-label{text-align:right;padding-right:8px}

/* Grand totals */
.bill-grand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.bill-grand-label{font-size:11px;color:var(--dim);margin-bottom:4px}
.bill-grand-value{font-family:var(--font);font-size:22px;font-weight:700}
.bill-grand-unit{font-size:13px;font-weight:400}

/* Modals */
.bill-modal-480{max-width:480px}
.bill-modal-540{max-width:540px}
.bill-modal-title-warn{color:var(--ylw)}
.bill-meter-info{background:var(--bg3);border-radius:8px;padding:10px 12px;margin-bottom:14px;font-size:13px}
.bill-stale-summary{font-size:13px;color:var(--text);margin-bottom:12px}
.bill-stale-np{font-size:12px;margin-bottom:12px}
.bill-stale-list{max-height:240px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;margin-bottom:14px}
.bill-muted-xs{font-size:11px;color:var(--dim)}
.bill-stale-row{padding:8px 12px;border-bottom:1px solid var(--border);font-size:12px}
.bill-stale-name{font-weight:600}
.bill-stale-meta{color:var(--dim);margin-left:6px}
.bill-stale-time{color:var(--ylw);font-size:11px}
.bill-modal-note{font-size:12px;color:var(--dim);margin-bottom:12px}
.bill-modal-code{display:block;margin-top:6px;font-size:11px}
.bill-file-input{width:100%;margin-bottom:12px}
.bill-modal-status{font-size:12px;color:var(--dim)}
.bill-modal-result{font-size:12px}

/* Building filter */
.filter-bar #filter-building{width:160px}

/* ── Billing (extracted from template inline styles) ──────────────────────────── */
.bill-skel-item{padding:16px;border-bottom:1px solid var(--border)}
.bill-skel-cell{height:12px}
.bill-empty-pad{padding:24px}
.bill-snap-header{display:flex;justify-content:space-between;align-items:center}
.bill-snap-period{font-weight:700;font-size:14px}
.bill-snap-meta{font-size:11px;color:var(--dim);margin-top:2px}
.bill-snap-right{text-align:right}
.bill-snap-notes{font-size:11px;color:var(--dim);margin-top:4px}
.bill-detail-card{margin-bottom:var(--space-3)}
.bill-detail-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.bill-detail-period{font-size:18px;font-weight:700}
.bill-detail-meta{font-size:12px;color:var(--dim);margin-top:2px}
.bill-kpi-row{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-bottom:var(--space-3)}
.bill-kpi-accent2{--accent-color:var(--acc2)}
.bill-kpi-grn{--accent-color:var(--grn)}
.bill-kpi-acc{--accent-color:var(--acc)}
.bill-kpi-pur{--accent-color:var(--pur)}
.bill-kpi-dim{--accent-color:var(--dim)}
.bill-kpi-val-accent2{color:var(--acc2);font-size:20px}
.bill-kpi-val-grn{color:var(--grn);font-size:20px}
.bill-kpi-val-pur{color:var(--pur);font-size:20px}
.bill-kpi-val{font-size:20px}
.bill-floor-card{padding:0;margin-bottom:12px}
.bill-floor-header{padding:12px 16px;background:var(--bg3);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;cursor:pointer;border-radius:10px 10px 0 0}
.bill-floor-label{display:flex;align-items:center;gap:10px}
.bill-floor-name{font-size:13px;font-weight:700}
.bill-floor-totals{display:flex;align-items:center;gap:20px}
.bill-t1-kwh{font-size:12px;color:var(--acc2)}
.bill-t2-kwh{font-size:12px;color:var(--grn)}
.bill-floor-arrow{color:var(--dim);font-size:12px}
.bill-table-wrap{border:none;border-radius:0}
.bill-th-t1{color:var(--acc2)}
.bill-th-t2{color:var(--grn)}
.bill-row-loss{background:rgba(248,81,73,.05)}
.bill-td-brand{font-weight:600;vertical-align:top}
.bill-td-top{vertical-align:top}
.bill-td-dim{font-size:12px;color:var(--dim)}
.bill-td-num{font-size:12px}
.bill-td-t1{font-weight:600;color:var(--acc2)}
.bill-td-t2{font-weight:600;color:var(--grn)}
.bill-agg-row{background:var(--bg3);font-weight:700}
.bill-agg-label{font-size:12px;color:var(--dim);padding-left:20px}
.bill-tfoot-row{background:var(--bg);font-weight:700;font-size:13px}
.bill-tfoot-label{text-align:right;padding-right:8px}
.bill-grand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.bill-grand-label{font-size:11px;color:var(--dim);margin-bottom:4px}
.bill-grand-val-accent2{font-family:var(--font);font-size:22px;font-weight:700;color:var(--acc2)}
.bill-grand-val-grn{font-family:var(--font);font-size:22px;font-weight:700;color:var(--grn)}
.bill-grand-val{font-family:var(--font);font-size:22px;font-weight:700}
.bill-grand-val-pur{font-family:var(--font);font-size:22px;font-weight:700;color:var(--pur)}
.bill-grand-unit{font-size:13px;font-weight:400}
.bill-stale-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border);font-size:12px}
.bill-stale-brand{font-weight:600}
.bill-stale-meter{color:var(--dim);margin-left:6px}
.bill-stale-ago{color:var(--ylw);font-size:11px}
.bill-import-note{font-size:12px;color:var(--dim);margin-bottom:12px}
.bill-import-code{display:block;margin-top:6px;font-size:11px}
.bill-import-file{width:100%;margin-bottom:12px}
.bill-import-status{font-size:12px;color:var(--dim)}
.bill-import-result{font-size:12px}
.text-red{color:var(--red)}

/* ── IESCO (extracted from template inline styles) ────────────────────────────── */
.iesco-rec-title{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.iesco-rec-body{padding:4px 0}
.iesco-mb-4{margin-bottom:16px}
.iesco-period-info{margin-bottom:10px;font-size:12px}
.text-center{text-align:center}
.iesco-dim{color:var(--dim)}
.iesco-dim-sm{color:var(--dim);font-size:10px}
.iesco-kpi-acc2{--accent-color:var(--acc2)}
.iesco-kpi-acc{--accent-color:var(--acc)}
.iesco-kpi-dim{--accent-color:var(--dim)}
.iesco-kpi-grn{--accent-color:var(--grn)}
.iesco-kpi-red{--accent-color:var(--red)}
.iesco-kpi-val-lg{font-size:22px}
.iesco-delta-null{color:var(--dim);font-size:11px}
.iesco-delta-flat{color:var(--dim);font-size:10px}
.iesco-delta-sm{font-size:9px}
.iesco-delta{font-size:11px}
.iesco-delta-short{font-weight:600;font-size:10px}
.iesco-table-mb{margin:8px 0}
.iesco-flow-row{padding:10px 0 6px;margin-bottom:10px;border-bottom:1px solid var(--border)}
.iesco-flow-card-blue{text-align:center;padding:12px 8px;background:rgba(55,138,221,.08);border-radius:8px;border:1px solid rgba(55,138,221,.3)}
.iesco-flow-label-blue{font-size:10px;font-weight:600;color:var(--acc2);text-transform:uppercase;letter-spacing:.5px}
.iesco-flow-val-blue{font-size:18px;font-weight:700;color:var(--acc2);margin-top:4px}
.iesco-flow-card-acc{text-align:center;padding:12px 8px;background:rgba(55,138,221,.08);border-radius:8px;border:1px solid rgba(55,138,221,.3)}
.iesco-flow-label-acc{font-size:10px;font-weight:600;color:var(--acc);text-transform:uppercase;letter-spacing:.5px}
.iesco-flow-val-acc{font-size:18px;font-weight:700;color:var(--acc);margin-top:4px}
.iesco-flow-sub{font-size:10px;color:var(--dim);margin-top:2px}
.iesco-flow-card-grn{text-align:center;padding:12px 8px;background:rgba(63,185,80,.08);border-radius:8px;border:1px solid rgba(63,185,80,.3)}
.iesco-flow-label-grn{font-size:10px;font-weight:600;color:var(--grn);text-transform:uppercase;letter-spacing:.5px}
.iesco-flow-val-grn{font-size:18px;font-weight:700;color:var(--grn);margin-top:4px}
.iesco-flow-arrow{font-size:20px;color:var(--dim)}
.iesco-loss-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.iesco-loss-card{padding:10px 12px;border-radius:8px;background:rgba(248,81,73,.06);border:1px solid rgba(248,81,73,.2)}
.iesco-loss-card-total{padding:10px 12px;border-radius:8px;background:rgba(248,81,73,.08);border:1px solid var(--red)}
.iesco-loss-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.iesco-loss-label-red{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--red)}
.iesco-loss-label-yel{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--yel)}
.iesco-loss-sub{font-size:11px;color:var(--dim);margin:2px 0 6px}
.iesco-loss-val{font-size:16px;font-weight:700}
.iesco-loss-val-lg{font-size:18px;font-weight:700}
.iesco-loss-unit{font-size:12px;font-weight:400}
.iesco-loss-unit-lg{font-size:13px;font-weight:400}
.iesco-details{margin-top:12px;font-size:12px}
.iesco-details summary{cursor:pointer;color:var(--dim);font-weight:600;padding:4px 0}
.iesco-details-grid{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.iesco-meter-label-acc{font-weight:600;font-size:11px;color:var(--acc);margin-bottom:4px}
.iesco-meter-label-grn{font-weight:600;font-size:11px;color:var(--grn);margin-bottom:4px}
.iesco-meter-cell{font-size:11px}
.iesco-no-data{color:var(--dim);font-size:11px}
.iesco-more-text{font-size:10px;color:var(--dim);margin-top:4px}
.iesco-gap-null{color:var(--dim)}
.iesco-gap-val{font-size:11px;font-weight:600}
.iesco-rec-label{font-weight:600;font-size:12px}
.iesco-rec-gap{font-size:11px}
.iesco-compare-card{padding:12px;border-radius:8px;text-align:center}
.iesco-compare-card-blue{background:rgba(55,138,221,.08);border:1px solid rgba(55,138,221,.2)}
.iesco-compare-card-yel{background:rgba(210,153,34,.08);border:1px solid rgba(210,153,34,.2)}
.iesco-compare-card-grn{background:rgba(63,185,80,.08);border:1px solid rgba(63,185,80,.2)}
.iesco-compare-label-blue{font-size:10px;font-weight:600;color:var(--acc2);text-transform:uppercase}
.iesco-compare-label-yel{font-size:10px;font-weight:600;color:#d29922;text-transform:uppercase}
.iesco-compare-label-grn{font-size:10px;font-weight:600;color:var(--grn);text-transform:uppercase}
.iesco-compare-val{font-size:18px;font-weight:700;margin-top:4px}
.iesco-compare-arrow{font-size:24px;font-weight:700;margin-top:2px;color:var(--dim)}
.iesco-compare-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:var(--space-4)}
.iesco-compare-wrap{margin-bottom:var(--space-4)}
.iesco-kpi-table-mb{margin-bottom:12px}
.iesco-kpi-th-blue{color:var(--acc2)}
.iesco-kpi-th-grn{color:var(--grn)}
.iesco-kpi-th-yel{color:#d29922}
.iesco-section-title{font-size:11px;font-weight:600;color:var(--acc2);text-transform:uppercase;letter-spacing:.5px;margin:var(--space-4) 0 var(--space-2)}
.iesco-loss-pct-label{font-size:11px;color:var(--dim)}
.iesco-loss-pct-val{font-size:12px}
.iesco-loss-pct-bold{font-weight:700;font-size:13px}
.iesco-total-delta{font-weight:600}
.iesco-info-mt{margin-top:12px}

/* ═══════════════════════════════════════════════════════════════════════════
   IESCO (moved from templates/iesco.html inline styles)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Filter bar / Month + Building selector ── */
.iesco-filter-label{font-size:13px;font-weight:600;white-space:nowrap}
.iesco-filter-select{width:auto;min-width:160px}
.iesco-filter-select-sm{width:auto;min-width:150px}

/* ── Summary / card spacing ── */
.iesco-summary{margin-bottom:16px}
.iesco-rec-card{margin-bottom:16px;display:none}
.iesco-rec-card.vis{display:block}
.iesco-card-flush{padding:0}
.iesco-card-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.iesco-card-title{margin-bottom:0}
.iesco-card-count{font-size:12px;color:var(--dim)}
.iesco-table-wrap-flush{border:none;border-radius:0}

/* ── Table header/cell ── */
.iesco-th-action{width:60px}

/* ── Loss trend card ── */
.iesco-trend-card{margin-top:16px}
.iesco-trend-title{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.iesco-yoy-label{font-size:11px;color:var(--dim);cursor:pointer;display:flex;align-items:center;gap:4px}
.iesco-trend-chart{min-height:200px;padding:6px 0;position:relative}
.iesco-trend-canvas{width:100%;height:200px}
.iesco-trend-loading{width:100%}

/* ── Modal widths ── */
.iesco-modal-lg{max-width:900px}
.iesco-modal-md{max-width:560px}
.iesco-modal-sm{max-width:520px}

/* ── Comparison modal grid ── */
.iesco-cmp-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:end;margin-bottom:20px}
.iesco-cmp-arrow{font-size:24px;color:var(--dim);padding-bottom:10px}

/* ── Section headers (repeating pattern) ── */
.iesco-section-label{
  font-size:11px;color:var(--acc2);font-weight:600;
  text-transform:uppercase;letter-spacing:.6px;
  margin:14px 0 10px;padding-bottom:6px;
  border-bottom:1px solid var(--border)
}

/* ── Form inputs ── */
.iesco-input-disabled{background:var(--bg3);color:var(--dim)}
.iesco-form-label-sm{font-size:11px;color:var(--dim)}

/* ── rg-5 arrow spans ── */
.iesco-rg-arrow{font-size:20px;color:var(--dim);padding-top:14px}

/* ── Bill preview card ── */
.iesco-preview{display:none;background:var(--bg3);border-radius:8px;padding:14px;margin-top:4px}
.iesco-preview-title{
  font-size:11px;color:var(--dim);font-weight:600;
  text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px
}
.iesco-preview-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.iesco-preview-label{font-size:11px;color:var(--dim)}
.iesco-preview-value{font-family:var(--font);font-size:16px;font-weight:700}
.iesco-preview-value-acc2{color:var(--acc2)}
.iesco-preview-value-grn{color:var(--grn)}
.iesco-preview-value-red{color:var(--red)}

/* ── Form group spacing ── */
.iesco-form-group-mt{margin-top:14px}

/* ── Reconciliation card ── */
.iesco-rec-flow{padding:10px 0 6px;margin-bottom:10px;border-bottom:1px solid var(--border)}
.iesco-rec-source{
  text-align:center;padding:12px 8px;background:rgba(55,138,221,.08);
  border-radius:8px;border:1px solid rgba(55,138,221,.3)
}
.iesco-rec-source-label{
  font-size:10px;font-weight:600;color:var(--acc2);
  text-transform:uppercase;letter-spacing:.5px
}
.iesco-rec-source-value{
  font-size:18px;font-weight:700;color:var(--acc2);margin-top:4px
}
.iesco-rec-arrow{font-size:20px;color:var(--dim)}
.iesco-rec-wapda{
  text-align:center;padding:12px 8px;background:rgba(55,138,221,.08);
  border-radius:8px;border:1px solid rgba(55,138,221,.3)
}
.iesco-rec-wapda-label{
  font-size:10px;font-weight:600;color:var(--acc);
  text-transform:uppercase;letter-spacing:.5px
}
.iesco-rec-wapda-value{
  font-size:18px;font-weight:700;color:var(--acc);margin-top:4px
}
.iesco-rec-wapda-meta{font-size:10px;color:var(--dim);margin-top:2px}
.iesco-rec-load{
  text-align:center;padding:12px 8px;background:rgba(63,185,80,.08);
  border-radius:8px;border:1px solid rgba(63,185,80,.3)
}
.iesco-rec-load-label{
  font-size:10px;font-weight:600;color:var(--grn);
  text-transform:uppercase;letter-spacing:.5px
}
.iesco-rec-load-value{
  font-size:18px;font-weight:700;color:var(--grn);margin-top:4px
}
.iesco-rec-load-meta{font-size:10px;color:var(--dim);margin-top:2px}

/* ── Loss breakdown grid ── */
.iesco-loss-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.iesco-loss-card{
  padding:10px 12px;border-radius:8px;
  background:rgba(248,81,73,.06);border:1px solid rgba(248,81,73,.2)
}
.iesco-loss-card-total{
  background:rgba(248,81,73,.08);border:1px solid var(--red)
}
.iesco-loss-label{
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--red)
}
.iesco-loss-label-yel{color:var(--yel)}
.iesco-loss-desc{font-size:11px;color:var(--dim);margin:2px 0 6px}
.iesco-loss-value{font-size:16px;font-weight:700}
.iesco-loss-value-total{font-size:18px;font-weight:700}
.iesco-loss-pct{font-size:12px;font-weight:400}
.iesco-loss-pct-total{font-size:13px;font-weight:400}

/* ── Detail expandable ── */
.iesco-rec-details{margin-top:12px;font-size:12px}
.iesco-rec-details-summary{cursor:pointer;color:var(--dim);font-weight:600;padding:4px 0}
.iesco-rec-details-grid{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.iesco-rec-section-title{
  font-weight:600;font-size:11px;margin-bottom:4px
}
.iesco-rec-section-title-acc{color:var(--acc)}
.iesco-rec-section-title-grn{color:var(--grn)}
.iesco-rec-table{font-size:11px}
.iesco-rec-nodata{color:var(--dim);font-size:11px}
.iesco-rec-more{font-size:10px;color:var(--dim);margin-top:4px}

/* ── Comparison modal ── */
.iesco-cmp-header{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px
}
.iesco-cmp-card{
  padding:12px;border-radius:8px;text-align:center
}
.iesco-cmp-card-base{background:rgba(55,138,221,.08);border:1px solid rgba(55,138,221,.2)}
.iesco-cmp-card-delta{background:rgba(210,153,34,.08);border:1px solid rgba(210,153,34,.2)}
.iesco-cmp-card-target{background:rgba(63,185,80,.08);border:1px solid rgba(63,185,80,.2)}
.iesco-cmp-card-label{
  font-size:10px;font-weight:600;text-transform:uppercase
}
.iesco-cmp-card-label-base{color:var(--acc2)}
.iesco-cmp-card-label-delta{color:#d29922}
.iesco-cmp-card-label-target{color:var(--grn)}
.iesco-cmp-card-value{font-size:18px;font-weight:700;margin-top:4px}
.iesco-cmp-delta{font-size:24px;font-weight:700;margin-top:2px;color:var(--dim)}
.iesco-cmp-table{margin-bottom:12px}
.iesco-cmp-th-base{color:var(--acc2)}
.iesco-cmp-th-target{color:var(--grn)}
.iesco-cmp-th-delta{color:#d29922}
.iesco-cmp-breakdown-label{
  font-size:11px;font-weight:600;color:var(--acc2);
  text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px
}
.iesco-cmp-pct-cell{font-size:12px}
.iesco-cmp-pct-cell-total{font-weight:700;font-size:13px}
.iesco-cmp-same{margin-top:12px}

/* ── Import modal ── */
.iesco-import-modal{max-width:520px}
.iesco-import-desc{font-size:12px;color:var(--dim);margin-bottom:12px}
.iesco-import-code{display:block;margin-top:6px;font-size:11px}
.iesco-import-file{width:100%;margin-bottom:12px}
.iesco-import-progress{font-size:12px;color:var(--dim)}
.iesco-import-result{font-size:12px}

/* ── JS-generated dynamic styles (these classes replace inline styles in template literals) ── */
.iesco-kpi-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px}
.iesco-kpi-period{font-size:13px;font-weight:600}
.iesco-kpi-period-label{color:var(--acc2)}
.iesco-kpi-period-dates{font-size:11px;color:var(--dim);margin-left:8px}
.iesco-kpi-period-vs{font-size:10px;color:var(--dim);margin-left:8px}
.iesco-kpi-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.iesco-kpi-value-acc2{color:var(--acc2);font-size:22px}
.iesco-kpi-value-grn{color:var(--grn);font-size:22px}
.iesco-kpi-value-red{color:var(--red);font-size:22px}

/* ── Table cell styles (used in JS renderBillsTable) ── */
.iesco-td-period{font-weight:700}
.iesco-td-billing{font-size:11px;color:var(--dim);line-height:1.6}
.iesco-td-meter{font-size:11px;font-family:var(--font-mono)}
.iesco-td-mono{font-size:12px}
.iesco-td-iesco{color:var(--acc2);font-weight:600}
.iesco-td-delta{font-size:11px}
.iesco-td-mdi{font-size:12px}
.iesco-td-tenant{font-size:12px}
.iesco-td-cam{font-size:12px}
.iesco-td-metered{color:var(--grn)}
.iesco-td-loss-kwh{color:var(--red);font-weight:600}
.iesco-td-notes{font-size:12px;color:var(--dim);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Reconciliation JS helpers ── */
.iesco-dim-span{color:var(--dim)}
.iesco-fmt-dim{color:var(--dim)}
.iesco-fmt-delta{font-size:11px}
.iesco-fmt-delta-short{font-weight:600;font-size:10px}
.iesco-fmt-delta-pct{font-size:9px}

/* ── Loss trend chart helpers ── */
.iesco-chart-dim{color:#8b949e;font-size:10px}

/* ── Readings ────────────────────────────────────────────────────────────────── */
/* Subtitle row: the meter counter plus the live poller-status badge. The badge
   is a sibling of #readings-subtitle because readings.js rewrites that
   element's textContent on every page render. */
.rd-subtitle{display:flex;align-items:center;gap:10px}
.rd-poller-badge{font-size:var(--text-xs)}
.rd-view-toggle{display:flex;gap:8px;margin-bottom:12px;align-items:center}
.rd-spacer{flex:1}
.rd-page-controls{display:flex;align-items:center;gap:4px;margin-right:8px}
.rd-page-label{margin:0 8px;font-size:13px;color:var(--dim)}
.rd-search{max-width:220px}
.rd-table-card{padding:0}
.rd-skel-row td{text-align:center;color:var(--dim);font-size:13px}
.rd-cards-view{display:none}
.rd-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.rd-cards-empty{grid-column:1/-1;text-align:center;color:var(--dim);font-size:13px;padding:40px}
.rd-detail-modal{max-width:740px}
.rd-manual-modal{max-width:440px}
.rd-manual-alert{margin-bottom:14px}
.rd-kpi-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));margin-bottom:var(--space-4)}
.rd-kpi-teal{--accent-color:var(--teal)}
.rd-kpi-acc2{--accent-color:var(--acc2)}
.rd-kpi-grn{--accent-color:var(--grn)}
.rd-kpi-red{--accent-color:var(--red)}
.rd-kpi-dim{--accent-color:var(--dim)}
.rd-kpi-pur{--accent-color:var(--pur)}
.rd-kpi-val-teal{color:var(--teal)}
.rd-kpi-val-acc2{color:var(--acc2)}
.rd-kpi-val-grn{color:var(--grn)}
.rd-kpi-val-red{color:var(--red)}
.rd-kpi-val-dim{color:var(--dim)}
.rd-kpi-val-pur{color:var(--pur);font-size:14px;margin-top:4px}
/* The timestamp is the longest KPI string; nowrap lets fitKPI() see the
   overflow and shrink it, instead of wrapping onto a second line. */
.rd-kpi-time{white-space:nowrap}
.rd-th-sub{font-size:9px;font-weight:400}
.rd-td-dim{font-size:12px}
.rd-td-acc2{color:var(--acc2)}
.rd-td-grn{color:var(--grn)}
.rd-td-teal{color:var(--teal);font-weight:600}
.rd-td-status{gap:4px;align-items:center}
.rd-td-updated{font-size:11px;color:var(--dim);white-space:nowrap}
.rd-td-phase{font-size:12px}
.rd-td-meter{font-size:12px}
/* The global .btn-group wraps; in a narrow action cell that stacks the two
   buttons and stretches the row from ~48px to ~85px, so row height ends up
   depending on how wide the other columns happen to be. */
.rd-td-action{white-space:nowrap}
.rd-td-action .btn-group{flex-wrap:nowrap}
.rd-meter-select{font-size:11px;padding:2px 4px;height:auto}
.rd-meter-label{font-size:12px;font-weight:600}
.rd-badge-analog{font-size:9px}
.rd-tamper-row{background:rgba(248,81,73,.05)}
.rd-tenant-name{font-weight:600;font-size:13px}
.rd-tamper-text{font-size:10px;color:var(--red)}
.rd-status-text{font-size:11px;color:var(--dim)}
.rd-load-val{font-weight:600;font-size:12px}
.rd-w-phase{font-size:12px}
.rd-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px;cursor:pointer;transition:.12s}
.rd-card:hover{border-color:var(--acc)}
.rd-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.rd-card-tenant{font-weight:700;font-size:14px}
.rd-card-meter{font-size:11px;color:var(--dim);margin-top:2px}
.rd-card-metric{text-align:center}
.rd-card-metric-val{font-size:14px;font-weight:600}
.rd-card-off{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px;opacity:.55}
.rd-card-tenant{font-weight:700;font-size:13px}
.rd-card-meter{font-size:11px;color:var(--dim)}
.rd-card-not-polled{font-size:11px;color:var(--dim);margin-top:10px;text-align:center}
.rd-card-body{cursor:pointer}
.rd-card-header{margin-bottom:10px}
.rd-card-dot{text-align:right}
.rd-card-tamper{font-size:10px;color:var(--red);margin-top:2px}
.rd-card-gauge{margin-bottom:10px}
.rd-card-gauge-row{margin-bottom:3px}
.rd-card-gauge-label{font-size:11px}
.rd-card-gauge-val{font-family:var(--font);font-size:16px;font-weight:700}
.rd-card-kwh-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.rd-card-kwh-card{background:var(--bg3);border-radius:6px;padding:8px}
.rd-card-kwh-label{font-size:10px;color:var(--dim);margin-bottom:3px}
.rd-card-kwh-val{font-family:var(--font);font-size:14px;font-weight:700}
.rd-card-kwh-unit{font-size:10px;color:var(--dim)}
.rd-card-split-bar{background:var(--bg3);border-radius:3px;height:6px;overflow:hidden;margin-bottom:6px}
.rd-card-phase-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;font-size:11px;color:var(--dim)}
.rd-card-phase-cell{text-align:center;background:var(--bg3);border-radius:4px;padding:3px}
.rd-card-phase-val{font-family:var(--font);font-size:12px}
.rd-card-footer-text{font-size:10px;color:var(--dim);margin-top:8px;text-align:right}
.rd-card-select{font-size:10px;padding:1px 4px;height:auto;max-width:140px}
.rd-no-data{grid-column:1/-1}
.rd-detail-alert-mb{margin-bottom:var(--space-4)}
.rd-detail-alert-mt{margin-top:var(--space-4)}
.rd-detail-alert-sub{font-size:12px;margin-top:4px}
.rd-detail-energy-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:var(--space-4)}
.rd-detail-energy-card{background:var(--bg3);border-radius:8px;padding:14px}
.rd-detail-energy-label{font-size:11px;color:var(--dim);margin-bottom:4px}
.rd-detail-energy-val{font-family:var(--font);font-size:24px;font-weight:700}
.rd-detail-energy-unit{font-size:11px;color:var(--dim)}
.rd-detail-section-title{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;font-weight:600;margin-bottom:8px}
.rd-detail-table-mb{margin-bottom:var(--space-4)}
.rd-detail-table{font-size:12px}
.rd-detail-row-label{color:var(--dim)}
.rd-detail-row-total{font-weight:600}
.rd-detail-row-total-acc{font-weight:600;color:var(--acc)}
.rd-detail-sys-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:var(--space-4)}
.rd-detail-sys-card{background:var(--bg3);border-radius:8px;padding:12px;text-align:center}
.rd-detail-sys-label{font-size:10px;color:var(--dim)}
.rd-detail-sys-val{font-family:var(--font);font-size:18px;font-weight:700}
.rd-detail-sys-val-teal{color:var(--teal)}
.rd-detail-sys-val-red{color:var(--red)}
.rd-detail-sys-val-pur{color:var(--pur)}
.rd-detail-sys-val-acc{color:var(--acc)}
.rd-detail-sys-val-yel{color:var(--yel)}
.rd-detail-sys-val-acc2{color:var(--acc2)}
.rd-detail-hist-table{font-size:12px}
.rd-detail-export-note{font-size:10px;color:var(--red);font-weight:400;text-transform:none}
.rd-detail-ctvt-note{font-size:10px;color:var(--grn);font-weight:400;text-transform:none;margin-left:8px}
.rd-detail-reading-time{font-size:10px;color:var(--dim);font-weight:400;text-transform:none;margin-left:8px}
.rd-detail-ctvt-table{font-size:12px}
.rd-detail-ctvt-verified{font-size:10px;color:var(--dim);margin-top:6px;text-align:right}
.rd-detail-consumption-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:var(--space-4)}
.rd-detail-consumption-card{background:var(--bg3);border-radius:8px;padding:14px}
.rd-detail-consumption-title{font-size:11px;font-weight:600;margin-bottom:8px;text-align:center}
.rd-detail-consumption-title-acc2{color:var(--acc2)}
.rd-detail-consumption-title-grn{color:var(--grn)}
.rd-detail-consumption-table{width:100%;font-size:12px}
.rd-detail-consumption-label{color:var(--dim);padding:3px 6px}
.rd-detail-consumption-val-acc2{color:var(--acc2)}
.rd-detail-consumption-val-grn{color:var(--grn)}
.rd-detail-sys-val-red{color:var(--red)}
.rd-detail-ctvt-val{color:var(--acc2)}
.rd-detail-tamper-section{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;font-weight:600;margin-bottom:8px}
.rd-detail-tamper-scroll{
  overflow:auto;max-height:200px;
  border-radius:var(--radius);
  border-top:3px solid var(--acc);
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.rd-detail-tamper-scroll table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
.rd-detail-tamper-scroll thead{position:sticky;top:0;z-index:2}
.rd-detail-tamper-scroll thead th{background:var(--bg);color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.rd-detail-tamper-scroll tbody td{padding:6px 10px;border-bottom:1px solid var(--border)}
.rd-detail-tamper-scroll::-webkit-scrollbar{width:6px}
.rd-detail-tamper-scroll::-webkit-scrollbar-track{background:transparent}
.rd-detail-tamper-scroll::-webkit-scrollbar-thumb{background:var(--dim);border-radius:3px}
.rd-detail-tamper-scroll{scrollbar-width:thin;scrollbar-color:var(--dim) transparent}
@media(max-width:768px){
  /* The 24h table is also a .resp-table, so it picks up the mobile card layout
     at line 623. Same specificity as the row rule above, and this one is later,
     so its padding and row border have to be undone explicitly. */
  .rd-detail-tamper-scroll tbody td{padding:5px 0;border:none}
}
.rd-detail-tamper-table{font-size:12px;width:100%}
.rd-detail-tamper-time{font-size:11px;white-space:nowrap}
.rd-approvals-modal{max-width:900px}
.rd-approvals-alert{font-size:11px;margin-bottom:12px}
.rd-approvals-filters{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.rd-approvals-filters .form-label{margin:0;white-space:nowrap}
.rd-approvals-filters .form-control{width:auto;min-width:140px}
.rd-approvals-list{max-height:52vh;overflow-y:auto}
.rd-approvals-table{font-size:12px}
.rd-approvals-table th{position:sticky;top:0;background:var(--bg2);z-index:1}
.rd-approvals-table td{padding:6px 8px;border-bottom:1px solid var(--border)}
.rd-approvals-actions .btn-group{flex-wrap:nowrap}
.rd-approvals-note-row td{border-bottom:1px solid var(--border);padding-top:0}
.rd-approvals-count{
  display:inline-block;min-width:16px;padding:0 5px;margin-left:4px;
  border-radius:9px;background:var(--red);color:#fff;
  font-size:10px;font-weight:700;text-align:center;line-height:16px;
}
.rd-badge-nowrap{white-space:nowrap}
.rd-filter-building{width:150px}
.rd-filter-floor{width:120px}
.rd-filter-cat{width:130px}
.rd-filter-interval{width:80px}
.rd-export-grid-4{grid-template-columns:1fr 1fr 1fr 1fr}
.rd-card-kwh-val-acc2{color:var(--acc2)}
.rd-card-kwh-val-grn{color:var(--grn)}
/* ── Dashboard (db-*) ───────────────────────────────────────────── */
.db-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px;flex-wrap:wrap}
.db-header-sm{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:8px;flex-wrap:wrap}
.db-header-wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.db-label{font-size:12px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.db-label-sm{font-size:11px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.db-viewall{font-size:10px;color:var(--acc2);text-decoration:none}
.db-col6{display:flex;flex-direction:column;gap:6px}
.db-col4{display:flex;flex-direction:column;gap:4px}
.db-col{display:flex;flex-direction:column}
.db-caption{font-size:10px;color:var(--dim)}
.db-caption-mt2{font-size:10px;color:var(--dim);margin-top:2px}
.db-caption-400{font-size:10px;font-weight:400;color:var(--dim)}
.db-dim9{color:var(--dim);font-size:9px}
.db-mb12{margin-bottom:12px}
.db-mb8{margin-bottom:8px}
.db-mb4{margin-bottom:4px}
.db-mt6{margin-top:6px}
.db-mb14{margin-bottom:14px}
.db-c-acc{color:var(--acc)}
.db-c-acc2{color:var(--acc2)}
.db-c-grn{color:var(--grn)}
.db-c-teal{color:var(--teal)}
.db-c-pur{color:var(--pur)}
.db-c-ora{color:var(--ora)}
.db-c-red{color:var(--red)}
.db-c-yel{color:var(--yel)}
.db-c-red-sm{color:var(--red);font-size:10px;font-weight:600}
.db-rel{position:relative}
.db-cf-mt{position:relative;margin-top:12px}
.db-chart-flex{flex:1;min-height:180px}
.db-chart-h120{position:relative;height:120px}
.db-chart-h240mt{height:240px;margin-top:4px}
.db-chart-200{position:relative;width:100%;height:200px}
.db-chart-240{position:relative;width:100%;height:240px}
.db-chart-260{position:relative;width:100%;height:260px}
.db-chart-280{position:relative;width:100%;height:280px}
.db-krow4{grid-template-columns:repeat(4,1fr);margin-bottom:10px}
.db-block{display:block;flex-shrink:0}
.db-semi{font-weight:600}
.db-semi-md{font-weight:600;font-size:13px}
.db-ksrc{font-weight:600;font-size:9px}
.ld-t1{background:var(--t1)}
.ld-t2{background:var(--t2)}
.ld-ora{background:#f0883e}
.ld-dim{background:#7d8590}
.db-maxh400{max-height:400px}
.db-empty{text-align:center;color:var(--dim);padding:16px;font-size:11px}
.db-empty-lg{text-align:center;padding:32px;color:var(--dim);font-size:12px}
.db-inline{display:inline}
.db-click{text-decoration:none;cursor:pointer;transition:border-color .12s}
.db-link{font-size:11px;color:var(--acc2);margin-top:6px}
.db-divider{margin-top:24px;border-top:2px solid var(--border);padding-top:16px;margin-bottom:12px}
.db-heading{font-size:13px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.db-pill{padding:3px 8px;background:var(--bg3);border:1px solid var(--border);border-radius:4px;color:var(--fg);font-size:11px;font-family:inherit}
.db-flex1{flex:1}
.db-flex-min{flex:1;min-width:0}
.db-flex-fg{flex:1;color:var(--fg)}
.db-minlabel{min-width:30px;font-size:10px;color:var(--dim)}
.db-minlabel50{min-width:50px;font-size:10px;color:var(--dim)}
.db-rank-val{min-width:80px;text-align:right;font-size:13px;font-weight:700;font-family:var(--font)}
.db-val-grn{min-width:50px;text-align:right;font-size:11px;color:var(--grn)}
.db-val-md{min-width:50px;font-size:12px;font-weight:700;font-family:var(--font);text-align:right}
.db-name{min-width:80px;font-size:11px;font-weight:600;color:var(--fg)}
.db-name-lg{min-width:100px;font-size:11px;font-weight:600}
.db-hgroup{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.db-hgroup-sm{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.db-hgroup-mb{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.db-pbar{padding:4px 10px;margin-bottom:0}
.db-pbar-pad{padding:4px 10px}
.db-fade{font-size:10px;opacity:.7}
.db-sev-ok{background:var(--sev-ok-bg);border:1px solid var(--sev-ok-border);color:var(--sev-ok);cursor:default}
.db-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.db-row-sm{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)}
.db-row-xs{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.db-track{flex:2;height:16px;background:var(--bg3);border-radius:4px;overflow:hidden}
.db-track16{flex:1;height:16px;background:var(--bg3);border-radius:4px;overflow:hidden}
.db-track14{flex:1;height:14px;background:var(--bg3);border-radius:4px;overflow:hidden}
.db-badge-danger{display:inline-block;font-size:9px;font-weight:600;padding:1px 6px;border-radius:4px;background:rgba(248,81,73,.15);color:var(--red)}
.db-badge-warn{display:inline-block;font-size:9px;font-weight:600;padding:1px 6px;border-radius:4px;background:rgba(210,153,34,.15);color:var(--ora)}
.db-badge-ok{display:inline-block;font-size:9px;font-weight:600;padding:1px 6px;border-radius:4px;background:rgba(63,185,80,.15);color:var(--grn)}

/* ── Config (cfg-*) ─────────────────────────────────────────────── */
.cfg-subtitle{font-size:13px;color:var(--dim);margin-bottom:14px}
.cfg-fs11{font-size:11px}
.cfg-tab{color:var(--acc2);font-size:12px;margin-right:14px;text-decoration:none}
.cfg-fs13{font-size:13px}
.cfg-dim12{font-size:12px;color:var(--dim)}
.cfg-grid2{grid-template-columns:1fr 1fr}
.cfg-mono13{font-family:var(--font-mono);font-size:13px}
.cfg-fs12{font-size:12px}
.cfg-mb16{margin-bottom:16px}
.cfg-lbl130{margin:0;flex:0 0 130px}
.cfg-actions{margin-top:14px;display:flex;gap:8px;align-items:center}
.cfg-w120{width:120px}
.cfg-mono12{font-family:var(--font-mono);font-size:12px}
.cfg-center-dim{text-align:center;color:var(--dim)}
.cfg-pad0{padding:0}
.cfg-maxh500{max-height:500px}
.cfg-mb12{margin-bottom:12px}
.cfg-maxh400{max-height:400px}
.cfg-w90{width:90px}
.cfg-flex{display:flex;gap:8px;align-items:center}
.cfg-flexbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:end}
.cfg-lbl140{margin:0;flex:0 0 140px}
.cfg-maxh450{max-height:450px}
.cfg-flexbar2{margin-top:8px;display:flex;gap:8px;align-items:center;font-size:12px}
.cfg-mt16{margin-top:16px}
.cfg-semi{font-weight:600}
.cfg-mt4{margin-top:4px}
.cfg-hint200{width:200px;font-size:10px;color:var(--dim)}
.cfg-w140-11{width:140px;font-size:11px}
.cfg-sep11{font-size:11px;color:var(--dim);margin:0 4px}
.cfg-w60{width:60px;font-size:11px}
.cfg-w70{width:70px;font-size:11px}
.cfg-w100{width:100px}
.cfg-flex-wrap{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.cfg-warn{color:var(--yel);font-weight:600}
.cfg-dim11{font-size:11px;color:var(--dim);}
.cfg-block{padding:12px 16px;margin-bottom:14px}
.cfg-flex4{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.cfg-ulabel{font-size:11px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;margin-right:8px}
/* Single content track. The 240px nav-rail column that used to live here cost
   256px of the width the Port Mapping table needs, and the table then dragged
   the whole page sideways (see the `.page` overflow rule). minmax(0,1fr) rather
   than plain `1fr` because `1fr` is minmax(auto,1fr) and `auto` resolves to the
   content track's min-content width — which would re-introduce that sideways
   scroll the moment a second track is added. */
.cfg-grid320{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.cfg-maxw450{max-width:450px}
.cfg-mt8{margin-top:8px}
.cfg-flex12{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.cfg-lbl220{margin:0;flex:0 0 220px}
.cfg-mono{font-family:var(--font-mono)}
.cfg-dropzone{border:2px dashed var(--border);border-radius:10px;padding:32px;text-align:center;cursor:pointer;transition:.12s}
.cfg-dropicon{font-size:36px;margin-bottom:8px}
.cfg-strong{font-size:13px;font-weight:600;color:var(--dim)}
.cfg-hint{font-size:11px;color:var(--dim);margin-top:4px}
.cfg-hidden-mt14{display:none;margin-top:14px}
.cfg-fg13{font-size:13px;color:var(--fg);font-weight:600}
.cfg-flexbar3{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.cfg-lbl100{margin:0;flex:0 0 100px}
.cfg-maxh300{max-height:300px}
.cfg-maxw520{max-width:520px}
.cfg-mt14{margin-top:14px}
.cfg-grid3{grid-template-columns:1fr 1fr 1fr}
.cfg-actions-end{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.cfg-mono-acc2{font-family:var(--font);color:var(--acc2)}
.cfg-w160{width:160px;font-size:11px}
.cfg-acc2-12{color:var(--acc2);font-size:12px}
.cfg-dim{color:var(--dim)}
.cfg-mono-md{font-size:12px;font-family:monospace}
.cfg-pad24{padding:24px}
.cfg-semi12{font-weight:600;font-size:12px}
.cfg-title14{margin:0 0 4px;font-size:14px;}
.cfg-text12{font-size:12px;color:var(--text);margin:8px 0 6px;}

/* ── My Meters (mm-*) ──────────────────────────────────────────── */
.mm-dim{color:var(--dim)}
.mm-caption{font-size:10px;color:var(--dim)}
.mm-stat{background:var(--bg3);border-radius:8px;padding:12px;text-align:center}
.mm-semi{font-weight:600}
.mm-full{grid-column:1/-1}
.mm-err{font-size:10px;color:var(--red);margin-top:2px}
.mm-mb16{margin-bottom:16px}
.mm-mb8{margin-bottom:8px}
.mm-box6{background:var(--bg3);border-radius:6px;padding:8px}
.mm-cap3{font-size:10px;color:var(--dim);margin-bottom:3px}
.mm-box4{background:var(--bg3);border-radius:4px;padding:3px;text-align:center}
.mm-bold13{font-family:var(--font);font-size:13px;font-weight:600}
.mm-fs12-mt4{font-size:12px;margin-top:4px}
.mm-box8{background:var(--bg3);border-radius:8px;padding:14px}
.mm-cap4{font-size:11px;color:var(--dim);margin-bottom:4px}
.mm-htitle{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;font-weight:600;margin-bottom:8px}
.mm-acc-semi{font-weight:600;color:var(--acc)}
.mm-grid160{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));margin-bottom:16px}
.mm-acc-teal{--accent-color:var(--teal)}
.mm-22-teal{color:var(--teal);font-size:22px}
.mm-acc-acc2{--accent-color:var(--acc2)}
.mm-22-acc2{color:var(--acc2);font-size:22px}
.mm-acc-grn{--accent-color:var(--grn)}
.mm-22-grn{color:var(--grn);font-size:22px}
.mm-acc-red{--accent-color:var(--red)}
.mm-22-red{color:var(--red);font-size:22px}
.mm-hidden-mb16{display:none;margin-bottom:16px}
.mm-grid300{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.mm-maxw740{max-width:740px}
.mm-row6{margin-bottom:6px;padding:8px 12px}
.mm-flex{display:flex;align-items:center;gap:8px}
.mm-dim12{font-size:12px;color:var(--dim)}
.mm-auto11{margin-left:auto;font-size:11px;color:var(--dim)}
.mm-bold700-13{font-weight:700;font-size:13px}
.mm-right{text-align:right}
.mm-mb3{margin-bottom:3px}
.mm-track4{background:var(--bg3);border-radius:3px;height:4px;overflow:hidden;margin-top:4px}
.mm-cap-mt2{font-size:10px;color:var(--dim);margin-top:2px}
.mm-grid2-mb8{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.mm-14-acc2{font-family:var(--font);font-size:14px;font-weight:700;color:var(--acc2)}
.mm-14-grn{font-family:var(--font);font-size:14px;font-weight:700;color:var(--grn)}
.mm-track5{background:var(--bg3);border-radius:3px;height:5px;overflow:hidden;margin-bottom:6px}
.mm-grid2-4{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px;font-size:11px}
.mm-grid3-4{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;font-size:11px;color:var(--dim)}
.mm-center-box{text-align:center;background:var(--bg3);border-radius:4px;padding:3px}
.mm-fs12{font-family:var(--font);font-size:12px}
.mm-cap-right{font-size:10px;color:var(--dim);margin-top:8px;text-align:right}
.mm-grid2-12{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.mm-24-acc2{font-family:var(--font);font-size:24px;font-weight:700;color:var(--acc2)}
.mm-24-grn{font-family:var(--font);font-size:24px;font-weight:700;color:var(--grn)}
.mm-fs12b{font-size:12px}
.mm-grn-semi{color:var(--grn);font-weight:600}
.mm-grid3-12{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px}
.mm-18-teal{font-family:var(--font);font-size:18px;font-weight:700;color:var(--teal)}
.mm-18-red{font-family:var(--font);font-size:18px;font-weight:700;color:var(--red)}
.mm-18-pur{font-family:var(--font);font-size:18px;font-weight:700;color:var(--pur)}
.mm-18-acc{font-family:var(--font);font-size:18px;font-weight:700;color:var(--acc)}
.mm-18-yel{font-family:var(--font);font-size:18px;font-weight:700;color:var(--yel)}
.mm-18-acc2{font-family:var(--font);font-size:18px;font-weight:700;color:var(--acc2)}
.mm-stat12{background:var(--bg3);border-radius:8px;padding:12px;font-size:12px}
.mm-grid2-8{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mm-right11{margin-top:8px;text-align:right;font-size:11px;color:var(--dim)}
.mm-red{color:var(--red)}

/* ── System Health (sh-*) ───────────────────────────────────────── */
.sh-cap4{font-size:11px;color:var(--dim);margin-bottom:4px}
.sh-dim{color:var(--dim)}
.sh-mr6{margin-right:6px}
.sh-xl-bold{font-size:18px;font-weight:700}
.sh-semi{font-weight:600}
.sh-mb10{margin-bottom:10px}
.sh-lg-bold{font-size:15px;font-weight:700}
.sh-center{text-align:center;padding:24px}
.sh-htitle{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.8px;font-weight:600;margin-bottom:12px}
.sh-120sq{width:120px;height:120px}
.sh-score{font-size:28px;font-weight:700;font-family:var(--font);margin-top:-96px}
.sh-cap-mt4{font-size:12px;color:var(--dim);margin-top:4px}
.sh-grid2-10{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:13px}
.sh-mb8{margin-bottom:8px}
.sh-dim12{font-size:12px;color:var(--dim)}
.sh-fs11{font-size:11px}
.sh-grid-fit200{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}
.sh-fs20{font-size:20px}
.sh-grid-fill280{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.sh-mt16{margin-top:16px}
.sh-mb14{margin-bottom:14px}
.sh-mb0{margin-bottom:0}
.sh-title{font-family:var(--font);font-size:16px;font-weight:700;margin-left:8px}
.sh-subtitle{font-size:13px;color:var(--dim);margin-left:8px}
.sh-grid-fit140{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px;padding:12px;background:var(--bg);border-radius:8px}
.sh-maxh300{max-height:300px;margin-bottom:16px}
.sh-maxh400{max-height:400px}
.sh-grid2-start{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-top:4px}
.sh-grid2-14{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sh-lg-semi{font-size:15px;font-weight:600}
.sh-fg{color:var(--fg)}
.sh-dim-normal{font-weight:400;color:var(--dim)}
.sh-grid2-mb14{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:13px;margin-bottom:14px}
.sh-dim-flex{color:var(--dim);display:flex;align-items:center}
.sh-warn{font-size:11px;color:var(--yel);margin-top:4px;display:block}
.sh-bold14{font-weight:600;font-size:14px}
.sh-cap8{font-size:12px;color:var(--dim);margin-bottom:8px}
.sh-ml12{margin-left:12px}
.sh-cap-400{font-size:10px;color:var(--dim);font-weight:400}
.sh-ml6{margin-left:6px}
.sh-cap-mt6{font-size:11px;color:var(--dim);margin-top:6px}
.sh-semi-mr4{font-weight:600;margin-right:4px}
.sh-grn{color:var(--grn)}
.sh-truncate{font-size:11px;color:var(--dim);max-width:200px;overflow:hidden;text-overflow:ellipsis}

/* ── Lifecycle (lc-*) ──────────────────────── */
.lc-w140{width:140px}
.lc-maxw640{max-width:640px}
.lc-x3c7deb{margin-bottom:4px;font-size:var(--text-sm)}
.lc-x5e46a2{max-height:65vh;overflow-y:auto}
.lc-xec1632{font-size:var(--text-base);font-weight:600;color:var(--dim);margin-bottom:8px}
.lc-x844e71{text-align:center;padding:32px;color:var(--dim)}
.lc-xdaa367{font-size:var(--text-sm);color:var(--dim);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-x3fda72{font-size:var(--text-sm);color:var(--dim);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-x30da8d{padding:16px;text-align:center;color:var(--dim);font-size:var(--text-base)}
.lc-xf5e4e1{font-size:var(--text-sm);font-weight:600}
.lc-xb62c3c{padding:16px;color:var(--red);font-size:var(--text-base)}

/* ── History (hs-*) ──────────────────────── */
.hs-xe0ce0c{vertical-align:middle;margin-right:4px}
.hs-x0a8ed4{margin-bottom:14px;display:none;border-color:var(--sev-critical-border);background:var(--sev-critical-bg)}
.hs-xdce600{font-size:12px;color:var(--sev-critical);font-weight:600}
.hs-x39cc94{flex:1;min-width:220px}
.hs-xe9f435{margin-bottom:14px;display:none}
.hs-x582bc7{font-size:10px;color:var(--dim);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.hs-x8ecdb3{cursor:pointer;font-size:10px}
.hs-x5e77ad{text-align:center;color:var(--dim);font-size:13px}
.hs-x38997f{display:flex;align-items:center;gap:10px;cursor:pointer}
.hs-x1bfb7a{margin-top:10px;display:none}
.hs-x891afb{max-height:500px;margin-top:10px}
.hs-xf15066{display:flex;align-items:center;gap:8px;padding:8px 0;justify-content:center}
.hs-xe3a711{margin:8px}
.hs-x8fec68{font-size:11px;white-space:nowrap}
.hs-x4d8ff4{font-size:13px;color:var(--dim)}
/* L18: last static inline styles extracted from history.html */
.hs-mb10{margin-bottom:10px}
.hs-snap-scroll{max-height:300px;overflow-y:auto}
.hs-hidden{display:none}
.hs-mt12{margin-top:12px}
.hs-views-bar{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.hs-views-label{font-size:11px;color:var(--dim);font-weight:600}
.hs-semi{font-weight:600}
.hs-ml8{margin-left:8px}
.hs-fs12{font-size:12px}
.hs-pur{color:var(--pur)}
.hs-empty-pad{padding:12px;color:var(--dim);font-size:12px}
.hs-empty-pad-lg{padding:16px;color:var(--dim);font-size:12px}
/* .ss-snap-compare / .cal-nav declare display:flex in the page's own <style>
   block, which loads after this sheet - two classes out-rank that, so source
   order cannot resurrect a hidden calendar nav or compare row. */
.ss-snap-compare.hs-hidden{display:none}
.cal-nav.hs-hidden{display:none}

/* ── History touch targets (U24) ───────── */
@media(max-width:700px){
  .tb,.btn,button{min-height:44px;min-width:44px}
  .period-bar .tb{min-height:44px;padding:10px 16px}
  .hs-x891afb{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ss-results .ss-item{padding:12px 10px;min-height:44px}
  #raw-pagination .btn{min-height:44px;min-width:44px}
}

/* ── Meters (mt-*) ──────────────────────── */
.mt-xb07875{text-transform:none;letter-spacing:0;margin-left:8px}
.mt-mr4{margin-right:4px}
.mt-x883fb2{color:var(--acc2);text-decoration:none}
.mt-xfa2c76{margin-left:3px;font-size:9px}
.mt-x26198d{font-size:10px;color:var(--acc2)}
.mt-xe1d13a{font-size:11px;text-align:center}
.mt-xb3b705{font-size:11px;color:var(--red);text-decoration:line-through}
.mt-x3cc925{font-size:11px;color:var(--grn)}
.mt-xdd3fc1{font-size:11px;color:var(--acc2)}
.mt-xb1e014{font-size:12px;color:var(--dim);margin-top:4px;
                          background:var(--bg3);padding:4px 8px;border-radius:4px}
.mt-xf4f3bc{vertical-align:middle;margin-right:6px}

/* ── Diagnostics (diag-*) ──────────────────────── */
.diag-x0e65bb{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:20px}
.diag-x06571d{font-family:var(--font);font-size:11px}
.diag-x82d907{font-size:11px;font-family:var(--font)}

/* ── Reports (rp-*) ──────────────────────── */
.rp-x870455{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.rp-x923e95{min-width:180px}
.rp-xa629a3{min-width:160px}
.rp-xb5574d{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.rp-x4694d6{min-width:220px}
.rp-xfac603{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px}
.rp-xfab42b{font-weight:700;margin-bottom:4px}
.rp-xb7924a{font-size:11px;color:var(--dim);margin-bottom:10px}
.rp-xe0e9ec{display:flex;gap:8px;flex-wrap:wrap}
.rp-xe4c3fa{height:220px}
.rp-w220{width:220px}

/* ── Users (us-*) ──────────────────────── */
.us-x3a1b27{padding:0;margin-bottom:16px}
.us-w160{width:160px}
.us-x5c32c0{font-size:12px;color:var(--dim);margin-bottom:14px}
.us-xa91dc3{margin-bottom:16px;overflow-x:auto}
.us-x2899fd{font-size:13px;color:var(--dim);margin-top:4px}
.us-xf95bf5{border:1px solid var(--border);border-radius:8px;overflow:hidden}
.us-xd0096a{padding:6px 12px;background:var(--bg);font-size:10px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--border)}

/* ── Profiles (pf-*) ──────────────────────── */
.pf-maxw550{max-width:550px}
.pf-x546177{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.pf-mt28{margin-top:28px}
.pf-x29b124{font-weight:600;color:var(--acc2);background:var(--bg3)}
.pf-x450526{font-size:12px;margin-left:8px}
.pf-x429f6f{font-size:12px;font-weight:600;margin-bottom:8px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.pf-x084778{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:12px;font-size:11px;max-height:300px;overflow:auto;white-space:pre-wrap;font-family:var(--font);line-height:1.6}
.pf-x2e1331{font-weight:600;font-family:var(--font);font-size:12px}
.pf-xde8fad{font-size:11px;padding:3px 8px}

/* ── Tariff (tf-*) ──────────────────────── */
.tf-x8886c2{display:none;margin-top:16px}
.tf-x0f2b3e{margin-top:12px;display:flex;gap:16px;flex-wrap:wrap}
.tf-xd11666{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end}

/* ── Buildings (bd-*) ──────────────────────── */
.bd-x6c1f5f{width:240px;min-width:200px}
.bd-x7fdd43{display:none;border-top:1px solid var(--border);margin-top:14px;padding-top:12px}
.bd-x9e2ec7{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.bd-xa0fcd8{font-weight:600;font-size:var(--text-base)}
.bd-maxh220{max-height:220px}
.bd-x7c973e{font-size:var(--text-md)}
.bd-w70{width:70px}
.bd-x8258c8{display:flex;gap:6px;align-items:center;margin-top:8px}
.bd-x97aad9{flex:1;min-width:120px}
.bd-maxw400{max-width:400px}
.bd-x248a83{color:var(--dim);margin-right:4px}
.bd-show-inactive{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--dim);cursor:pointer;white-space:nowrap}
.bd-depth-0{padding-left:16px}
.bd-depth-1{padding-left:40px}
.bd-depth-2{padding-left:64px}
.bd-depth-3{padding-left:88px}
.bd-depth-4{padding-left:112px}
.floor-grip{cursor:grab;color:var(--dim);user-select:none;text-align:center;padding:0 4px;touch-action:none}
.floor-dragging{opacity:.4}
.floor-drop-target{outline:2px dashed var(--accent, #3b82f6);outline-offset:-2px}
.bd-w28{width:28px}
.bd-delete-blockers{color:var(--danger, #ef4444);font-size:var(--text-sm);margin-top:8px}

/* ── Equipment (eq-*) ──────────────────────── */
.eq-maxw600{max-width:600px}
.eq-xf37a1b{display:flex;align-items:center;height:36px}
.eq-xb211e9{width:18px;height:18px;accent-color:var(--acc)}
.eq-x751c4d{font-family:monospace;font-size:12px;resize:vertical}

/* ── Integrations (ig-*) ──────────────────────── */
.ig-xa27c25{display:none;padding:12px 16px;border-radius:8px;margin-bottom:14px;font-size:13px}
.ig-x684a29{padding:16px;margin-bottom:16px}
.ig-x1db6be{font-size:14px;margin:0 0 12px}
.ig-xd5cdc7{grid-template-columns:1fr 1fr;align-items:end}
.ig-x68579e{font-size:11px;color:var(--dim);margin-top:8px}
.ig-xa5f1d0{min-width:640px}

/* ── PowerflowTest (pwt-*) ──────────────────────── */
.pwt-x959bb5{gap:6px}
.pwt-x67e5b5{color:#7d8590}
.pwt-x21b993{color:#7d8590;font-size:10px;min-width:20px}
.pwt-x677715{color:#DC2626}
.pwt-x642322{background:#4FC3FF}
.pwt-x7a5882{background:#00FF88}
.pwt-x9ab915{background:#FF9100}
.pwt-x7f793d{background:#00E5FF}
.pwt-xff3155{background:#FF6D00}
.pwt-x0a4a3c{background:#D500F9}

/* ── ProfileDetail (pfd-*) ──────────────────────── */
.pfd-maxw500{max-width:500px}
.pfd-c-danger{color:var(--danger)}
.pfd-x484689{padding:4px 12px 12px}
.pfd-xdb9ef2{font-size:0.85em}

/* ── Base (bs-*) ──────────────────────── */
.bs-x8c6ac7{font-size:10px;color:var(--dim);text-align:center}
.bs-x34f820{font-size:12px;font-weight:600;line-height:1.2}
.bs-xd8303e{font-size:10px;color:var(--dim);text-transform:capitalize;line-height:1.2}
.bs-x1386d5{margin:0}
.bs-x1b0085{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199}
.bs-xd080aa{text-align:center;color:var(--red);padding:40px}

/* ── Panels (pn-*) ──────────────────────── */
.pn-w200{width:200px}

/* ── Profile (prf-*) ──────────────────────── */
.prf-x9c6869{display:flex;gap:8px}

/* ── Login (lg-*) ──────────────────────── */
.lg-x11fb44{position:absolute;top:16px;right:16px}
.lg-x666e02{background:#fff;padding:8px 16px;border-radius:10px;display:inline-block}

/* ── Print styles (U21) ────────────────────────────────────────────────────── */
@media print {
  .sidebar, .page-header .btn-group, .filter-bar .period-bar,
  #btn-compare-toggle, #entity-count, #col-toggles,
  .alert, .card-title .tb, .card-title .hs-x8ecdb3,
  #raw-pagination, .kpi-footer .kpi-delta { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .main-content { margin-left: 0 !important; padding: 0 !important; }
  .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  .resp-table { font-size: 10pt; }
  .resp-table th, .resp-table td { padding: 4px 6px; border: 1px solid #999; }
  canvas#trend-chart { max-width: 100%; height: auto !important; }
  .kpi-footer { grid-template-columns: repeat(6, 1fr); }
  .kf-value { font-size: 14pt; }
  .page-title { font-size: 18pt; }
  a { text-decoration: none; color: #000; }
}

/* ── Reading-integrity review card (System Health) ───────────────────────── */
.ri-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3)}
.ri-sub{font-size:12px;color:var(--dim);max-width:70ch;line-height:1.5;margin-top:2px}
.ri-filter{display:flex;align-items:center;gap:var(--space-2);white-space:nowrap}
.ri-select{width:auto;min-width:150px;padding:5px 10px;font-size:12px}
.ri-counts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--space-3)}
.ri-counts:empty{display:none}
.ri-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;
  border-radius:12px;border:1px solid var(--border);background:var(--bg3);
  font-size:11px;color:var(--dim)}
.ri-chip strong{color:var(--fg);font-size:12px}
.ri-muted{color:var(--dim);font-size:11px}
.ri-nowrap{white-space:nowrap}
.ri-detail{max-width:420px;color:var(--dim);font-size:12px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ri-actions{white-space:nowrap}
.ri-actions .btn + .btn{margin-left:6px}
.ri-actions .ri-danger{color:var(--red)}
.ri-more{display:flex;justify-content:center;padding-top:var(--space-3)}