/* Fieldwork Geo — self-hosted weights (Regular / Semi-Bold / Bold /
   Black). The CSS family name matches the Adobe Fonts slug
   "fieldwork-geo" so the same heading tokens work whether self-hosted
   files or an Adobe kit is in play. font-display: swap keeps text
   visible during the woff2 fetch. Body text uses Arial (system) so
   no @font-face is needed for it. */
@font-face {
    font-family: 'fieldwork-geo';
    src: url('/fonts/Fieldwork-Geo-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'fieldwork-geo';
    src: url('/fonts/Fieldwork-Semi-Bold-Geo.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'fieldwork-geo';
    src: url('/fonts/Fieldwork-Geo-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'fieldwork-geo';
    src: url('/fonts/Fieldwork-Geo-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Arial', sans-serif;
}

#modal {
    /* Underlay covers entire screen. */
    position: fixed;
    top:0;
    bottom: 0;
    left:0;
    right:0;
    background-color:rgba(0,0,0,0.5);
    z-index:1000;

    /* Flexbox centers the .modal-content vertically and horizontally */
    display:flex;
    flex-direction:column;
    align-items:center;

    /* Animate when opening */
    animation-name: fadeIn;
    animation-duration:150ms;
    animation-timing-function: ease;
}

#modal > .modal-underlay {
    /* underlay takes up the entire viewport. This is only
    required if you want to click to dismiss the popup */
    position: absolute;
    z-index: -1;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
}

#modal > .modal-content {
    /* Position visible dialog near the top of the window */
    margin-top:10vh;

    /* Sizing for visible dialog */
    width:80%;
    max-width:900px;
    max-height: 80%;
    overflow: auto;

    /* Display properties for visible dialog*/
    border:solid 1px #999;
    border-radius:8px;
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
    background-color:white;
    padding:20px;

    /* Animate when opening */
    animation-name:zoomIn;
    animation-duration:150ms;
    animation-timing-function: ease;
}

#modal.closing {
    /* Animate when closing */
    animation-name: fadeOut;
    animation-duration:150ms;
    animation-timing-function: ease;
}

#modal.closing > .modal-content {
    /* Animate when closing */
    animation-name: zoomOut;
    animation-duration:150ms;
    animation-timing-function: ease;
}

@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes zoomIn {
    0% {transform: scale(0.9);}
    100% {transform: scale(1);}
}

@keyframes zoomOut {
    0% {transform: scale(1);}
    100% {transform: scale(0.9);}
}

/* Suppress the default root cross-fade so only named elements animate.
   Without this the browser cross-fades the entire viewport on every
   transition, causing a visible flash on unchanged parts (sidebar, header). */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
}

::view-transition-old(manage-chart-main),
::view-transition-new(manage-chart-main),
::view-transition-old(manage-chart-overview),
::view-transition-new(manage-chart-overview),
::view-transition-old(manage-summary-rows),
::view-transition-new(manage-summary-rows) {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(manage-chart-main),
::view-transition-old(manage-chart-overview),
::view-transition-old(manage-summary-rows) {
    animation-name: beamFadeOut;
}

::view-transition-new(manage-chart-main),
::view-transition-new(manage-chart-overview),
::view-transition-new(manage-summary-rows) {
    animation-name: beamFadeIn;
}

@keyframes beamFadeIn {
    0% {
        opacity: 0;
        transform: translateY(14px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes beamFadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* ===== Diagno Design Tokens ===== */
:root {
    --bd-border: #E5E7EB;
    --bd-text: #111827;
    --bd-text-secondary: #6B7280;
    --bd-text-muted: #9CA3AF;
    --bd-bg: #FFFFFF;
    --bd-btn-bg: #FFFFFF;
    --bd-btn-border: #CCD3E4;
    --bd-btn-active-bg: #111827;
    --bd-btn-active-text: #FFFFFF;
    --bd-sidebar-bg: #000000;
    --bd-sidebar-sep: #1F2937;
    --bd-sidebar-text: #8888AA;
    --bd-sidebar-active: #FFFFFF;
    --bd-logo-bg: #00C19F;
    --bd-solar-orange: #E8961E;
    --bd-chart-green: #10B981;
    --bd-status-green: #22C55E;
    --bd-status-amber: #D97706;
    --bd-status-gray: #94A3B8;
    --bd-status-red: #EF4444;
}

/* === Main Layout === */
.beam-manage {
    display: flex;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background: var(--bd-bg);
    color: var(--bd-text);
}

/* === Sidebar === */
.beam-manage__sidebar {
    width: 180px;
    flex-shrink: 0;
    background: var(--bd-sidebar-bg);
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    position: sticky;
    top: 0;
    color: var(--bd-sidebar-text);
}

.beam-manage__logo {
    background: var(--bd-logo-bg);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    height: 48px;
}

.beam-manage__logo-text {
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.beam-manage__nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 0 12px;
    gap: 8px;
}

.beam-manage__nav-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.beam-manage__nav-section {
    display: flex;
    flex-direction: column;
}

.beam-manage__nav-footer {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--bd-sidebar-sep);
}

.beam-manage__nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--bd-sidebar-text);
    text-decoration: none;
    font-size: 13px;
}

.beam-manage__nav-item:hover {
    color: var(--bd-sidebar-active);
}

.beam-manage__nav-item--active {
    color: var(--bd-sidebar-active);
    font-weight: 600;
}

.beam-manage__nav-sub {
    display: block;
    padding: 8px 16px 8px 40px;
    color: var(--bd-sidebar-text);
    text-decoration: none;
    font-size: 12px;
}

.beam-manage__nav-sub:hover {
    color: var(--bd-sidebar-active);
}

/* === Content Area === */
.beam-manage__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* === Dividers === */
.beam-manage__divider {
    height: 1px;
    background: var(--bd-border);
    flex-shrink: 0;
}

.beam-manage__vdivider {
    width: 1px;
    background: var(--bd-border);
    flex-shrink: 0;
    align-self: stretch;
}

/* === Header Row === */
.beam-manage__header {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.beam-manage__header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 40px 8px;
}

.beam-manage__header-left {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.beam-manage__breadcrumbs {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
}

.beam-manage__breadcrumb-link {
    color: var(--bd-logo-bg);
    text-decoration: none;
}

.beam-manage__breadcrumb-sep {
    color: var(--coredark-300);
}

.beam-manage__breadcrumb-current {
    color: var(--bd-logo-bg);
}

.beam-manage__title-row {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
}

.beam-manage__title {
    font-family: 'Arial', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 34px;
    margin: 0;
    color: #171B1F;
}

.beam-manage__header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.beam-manage__header-brand {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--bd-text);
}

.beam-manage__header-updated {
    font-size: 11px;
    color: var(--bd-text-muted);
}

.beam-manage__telemetry-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.beam-manage__telemetry-pill--live {
    color: #166534;
    background: rgba(34, 197, 94, 0.10);
}

.beam-manage__telemetry-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bd-status-green);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35);
    animation: beam-telemetry-pulse 1.8s ease-out infinite;
}

@keyframes beam-telemetry-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.30);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* === Tab Bar === */
.beam-manage__tab-bar {
    display: flex;
    align-items: flex-end;
    padding: 5px 40px 0 0;
    border-bottom: 1px solid #CCD3E4;
}

.beam-manage__tab-item {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    padding: 14px 20px;
    text-decoration: none;
    border-radius: 5px 5px 0 0;
    color: var(--bd-logo-bg);
}

.beam-manage__tab-item--active {
    background: #FFFFFF;
    border: 1px solid #CCD3E4;
    border-bottom: 1px solid #FFFFFF;
    margin-bottom: -1px;
}

.beam-manage__tab-item--disabled {
    color: #9CA3AF;
    cursor: default;
}

/* === System Bar === */
.beam-manage__sysbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    flex-shrink: 0;
}

@keyframes beam-gauge-wobble-1 {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(1.2deg); }
}

@keyframes beam-gauge-wobble-2 {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-0.7deg); }
}

@keyframes beam-gauge-wobble-3 {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(0.4deg); }
}

.beam-performance-gauge__wobble-1,
.beam-performance-gauge__wobble-2,
.beam-performance-gauge__wobble-3 {
    transform-origin: 20.23px 19.6px;
}

.beam-performance-gauge__wobble-1 {
    animation: beam-gauge-wobble-1 2.87s ease-in-out infinite;
}

.beam-performance-gauge__wobble-2 {
    animation: beam-gauge-wobble-2 2.13s ease-in-out infinite;
}

.beam-performance-gauge__wobble-3 {
    animation: beam-gauge-wobble-3 3.88s ease-in-out infinite;
}

.beam-manage__sysbar-left,
.beam-manage__sysbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.beam-manage__sysbar-right {
    gap: 20px;
    align-items: flex-start;
}

.beam-manage__sysbar-left {
    flex-wrap: wrap;
}

/* .beam-capacity-metric doesn't set its own colour (see extra.css's
   "Capacity metric" section) — Manage's own is beam-green, applied here
   rather than baked into the shared component. */
.beam-manage__sysbar-left .beam-capacity-metric {
    color: var(--beam-green);
}

.beam-manage__sysbar-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--bd-text-secondary);
}

.beam-manage__sysbar-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.beam-manage__sysbar-col-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 33.6px;
}

.beam-manage__sysbar-col-value--performance {
    align-self: stretch;
}

.beam-manage__performance-widget {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

.beam-manage__performance-widget-value {
    font-size: 28.8px;
    font-weight: 600;
    line-height: 33.6px;
}

.beam-manage__performance-widget [data-performance-gauge] {
    width: 48px !important;
    height: 33.6px !important;
}

.beam-manage__performance-widget [data-performance-gauge] svg {
    width: 100%;
    height: 100%;
}

.beam-manage__sysbar-col-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--bd-text-secondary);
}

/* ── Capacity metric (icon + two-line number/unit values) ────────────
   The canonical "icon, two lines stacked to its right — number right-
   aligned, unit left-aligned in their own columns" component (CLAUDE.md
   "System units"). One implementation for every place that needs it:
   the Manage site heading, the Assess System Diagram, and the System
   Units styleguide chip all render through this (see
   resources/public/js/components/capacity-metric.js for the shared
   markup builder). NOT the table-cell variant — capacityLines /
   capacityCell in resources/public/js/dashboard/cost-benefit-table.js
   is deliberately separate, for a narrower grid/leaderboard column;
   extend that one for table cells, this one for a standalone chip.

   --beam-capacity-font is the single dial: icon size is calc()'d from
   it (ratio 35/15, the size this was first proven at on the Manage
   sysbar), so a caller wanting a bigger or smaller chip changes ONE
   number and both the text and the icon scale together — see the
   Assess System Diagram's own --sd-cap-font history for what goes
   wrong when a consumer scales the text but leaves the icon on a
   fixed size (they drift apart). Colour is deliberately NOT set here —
   it's `currentColor`-based (icon) or inherited (text), left for each
   consumer's own context (e.g. Manage sets --beam-green on its own
   wrapper; the System Diagram inherits --sd-block-ink per block). */
.beam-capacity-metric {
    --beam-capacity-font: 15px;
    display: inline-flex;
    flex-direction: row;
    /* flex-end, not center: with the two lines now different sizes (see the
       2026-09-16 block below), a centred pair drifts off the icon at both
       ends as the top line grows — bottom-anchoring keeps the second line
       flush with the icon's base regardless of how tall the first line
       gets, matching the reviewed look (top line reaches the icon's top,
       bottom line sits on its base). */
    align-items: flex-end;
    gap: 10px;
    font-size: var(--beam-capacity-font);
    font-weight: 600;
    line-height: 1.1;
    text-align: left;
    white-space: nowrap;
}

.beam-capacity-metric-icon {
    display: inline-block;
    height: calc(var(--beam-capacity-font) * 35 / 15);
    aspect-ratio: var(--beam-capacity-icon-ratio);
    background-color: currentColor;
    flex-shrink: 0;
    -webkit-mask-image: var(--beam-capacity-icon-url);
    mask-image: var(--beam-capacity-icon-url);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    /* The mask fills this box edge-to-edge, but the values' line-height
       leaves leading space inside its box — so even under flex-end
       (bottom) alignment the icon's visual ink still reads a couple of px
       lower than the text's ink at the shared bottom edge. This nudges it
       up to read flush (proportionally, so it holds at any
       --beam-capacity-font size). Re-verify this offset if the line-height
       or either line's font-size changes again — it's tuned empirically
       against the current values, not derived. */
    margin-top: calc(var(--beam-capacity-font) * -3 / 15);
}

/* Grid, not flex-column: CLAUDE.md's Numbers rule requires the number
   right-aligned and the unit left-aligned, in their own columns, not one
   left-aligned "value unit" string per line. */
.beam-capacity-metric-values {
    display: inline-grid;
    grid-template-columns: max-content max-content;
    row-gap: 0px;
    /* max-content, not auto — an "auto" track is the one CSS Grid stretches
       to fill any leftover row width, which would shove a right-aligned
       number away from the icon. */
    column-gap: 4px;
}

/* `display: contents` so a row wrapper can exist for :first-child targeting
   below without breaking out of the parent's 2-column grid track layout —
   the row's own number/unit children still lay out directly on the grid as
   if this element weren't here. */
.beam-capacity-metric-row {
    display: contents;
}

.beam-capacity-metric-number {
    grid-column: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.beam-capacity-metric-unit {
    grid-column: 2;
    text-align: left;
}

/* 2026-09-15 boss-directed change: both lines are set in Fieldwork Geo
   Black (900), the top line (primary capacity, e.g. kW/kWh) bigger than
   the second (its kVA connection size).

   2026-09-16: top line bumped 17px → 19px (at the --beam-capacity-font: 15px
   baseline), .beam-capacity-metric-values' row-gap dropped to 0, and the
   parent switched to align-items: flex-end (see above) — review feedback
   was that the top line should reach the icon's top and the two lines read
   too far apart.

   These sizes were originally FIXED px, not scaled off --beam-capacity-font
   — a deliberate deviation flagged for follow-up review. That review found
   a real problem on the live Assess System Diagram (--beam-capacity-font:
   12px): fixed sizes meant the chip's text no longer shrank with the icon
   the way every other consumer's dial-driven sizing does, so it read as
   oversized next to the rest of that diagram. Switched to calc() ratios off
   the 15px baseline (matching how .beam-capacity-metric-icon's own height
   already scales) so the chip is "one dial scales everything" again, while
   the styleguide/Manage default (15px) renders pixel-identical to before
   this change. */
.beam-capacity-metric-number,
.beam-capacity-metric-unit {
    font-family: 'fieldwork-geo', sans-serif;
    font-weight: 900;
}

.beam-capacity-metric-row:first-child .beam-capacity-metric-number,
.beam-capacity-metric-row:first-child .beam-capacity-metric-unit {
    font-size: calc(var(--beam-capacity-font) * 19 / 15);
    /* fieldwork-geo Black's own ascent metric reserves ~5px of headroom
       above the glyphs' actual ink at the 19px/15px-dial size (measured via
       canvas measureText: fontBoundingBoxAscent 18px vs
       actualBoundingBoxAscent 13px for "1,000") — that gap is baked into
       the font file, not something line-height or grid layout can close.
       Pulling the line up closes most of that gap; -3px at the 15px dial
       (not the full -5px) deliberately leaves a couple of px so the top
       line reads with the same small padding above it that the bottom
       line already has below it (from its own font's descent metric —
       digits have no descenders, so that space reads as padding too),
       rather than sitting flush against the icon. Scaled by the same
       15px-baseline ratio as the font-size above, so the correction stays
       proportionate at any dial. Safe to overflow
       .beam-capacity-metric-values' own box here: nothing clips it, and
       flex-end alignment (above) anchors the icon/values pair by their
       grid-track box, not by this visual overflow. */
    margin-top: calc(var(--beam-capacity-font) * -3 / 15);
}

.beam-capacity-metric-row:not(:first-child) .beam-capacity-metric-number,
.beam-capacity-metric-row:not(:first-child) .beam-capacity-metric-unit {
    font-size: calc(var(--beam-capacity-font) * 14 / 15);
}

.beam-manage__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.beam-manage__status-dot--green { background: var(--bd-status-green); }
.beam-manage__status-dot--amber { background: var(--bd-status-amber); }
.beam-manage__status-dot--gray { background: var(--bd-status-gray); }
.beam-manage__status-dot--red { background: var(--bd-status-red); }

.beam-manage__status-text {
    font-size: 13px;
    font-weight: 500;
}

.beam-manage__status-text--green { color: var(--bd-status-green); }
.beam-manage__status-text--amber { color: var(--bd-status-amber); }
.beam-manage__status-text--gray { color: var(--bd-status-gray); }
.beam-manage__status-text--red { color: var(--bd-status-red); }

/* === Level Bar === */
.beam-manage__levelbar {
    display: flex;
    align-items: center;
    padding: 10px 24px;
    flex-shrink: 0;
    background: var(--bd-bg);
}

.beam-manage__levelbar > :first-child {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

/* === Main Body (Split Panels) === */
.beam-manage__performance-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.beam-manage__management-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.beam-manage__body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.beam-manage__panel-left {
    width: 380px;
    flex-shrink: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.beam-manage__panel-left > .beam-manage__levelbar {
    margin: -20px -20px 0;
    padding: 12px 20px 10px;
    border-bottom: 1px solid var(--bd-border);
}

.beam-manage__panel-left > .beam-manage__levelbar .beam-manage__tabs {
    flex-wrap: wrap;
}

.beam-manage__panel-right {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.beam-manage__tree-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.beam-manage__tree-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.beam-manage__tree-head {
    display: flex;
    align-items: center;
    height: 28px;
    padding: 8px 0;
    border-bottom: 1px solid var(--bd-border);
}

.beam-manage__tree-head-label {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--bd-text);
}

.beam-manage__tree-head-val {
    width: 70px;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: var(--bd-text);
}

.beam-manage__tree-head-unit {
    width: 40px;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: var(--bd-text);
}

.beam-manage__tree-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.beam-manage__tree-row--chart {
    color: inherit;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
}

.beam-manage__tree-row--chart:hover {
    background: rgba(148, 163, 184, 0.08);
}

.beam-manage__tree-row--chart:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(30, 64, 175, 0.18);
    background: rgba(59, 130, 246, 0.08);
}

.beam-manage__tree-row--hidden {
    opacity: 0.56;
}

.beam-manage__tree-row--placeholder {
    opacity: 0.9;
}

.beam-manage__tree-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.beam-manage__tree-swatch {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.14);
}

.beam-manage__tree-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bd-text);
}

.beam-manage__tree-val {
    width: 70px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--bd-text);
}

.beam-manage__tree-val--placeholder,
.beam-manage__tree-unit--placeholder {
    color: var(--bd-text-muted);
}

.beam-manage__tree-val--state,
.beam-manage__tree-unit--muted {
    color: var(--bd-text-muted);
}

.beam-manage__tree-val--state {
    font-size: 10px;
    letter-spacing: 0.01em;
}

.beam-manage__tree-unit {
    width: 40px;
    text-align: right;
    flex-shrink: 0;
    color: var(--bd-text-secondary);
}

.beam-manage__chart-main {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.beam-manage__chart-header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 16px;
}

.beam-manage__chart-range {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    color: var(--bd-text-secondary);
    font-size: 12px;
}

.beam-manage__chart-range-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.beam-manage__chart-range-value[data-pending="true"] {
    color: var(--bd-logo-bg);
}

.beam-manage__chart-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.beam-manage__chart-area > div {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.beam-manage__chart-area .highcharts-contextbutton,
.beam-mgmt__chart-area .highcharts-contextbutton {
    opacity: 0;
    transition: opacity 160ms ease, filter 160ms ease;
}

.beam-manage__chart-area:hover .highcharts-contextbutton,
.beam-manage__chart-area:focus-within .highcharts-contextbutton,
.beam-mgmt__chart-area:hover .highcharts-contextbutton,
.beam-mgmt__chart-area:focus-within .highcharts-contextbutton,
.beam-manage__chart-area .highcharts-contextbutton.highcharts-button-hover,
.beam-mgmt__chart-area .highcharts-contextbutton.highcharts-button-hover {
    opacity: 0.82;
}

.beam-manage__chart-area .highcharts-contextbutton:hover,
.beam-mgmt__chart-area .highcharts-contextbutton:hover {
    opacity: 1;
    filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.12));
}

.beam-manage__chart-stack {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.beam-manage__chart-empty {
    flex: 1;
    display: grid;
    place-items: center;
    color: var(--bd-text-muted);
    border: 1px dashed var(--bd-border);
    border-radius: 4px;
    min-height: 300px;
}

.beam-manage__chart-empty--compact {
    min-height: 80px;
}

.beam-manage__timeline-area {
    flex: 0 0 80px;
    min-height: 0;
    overflow: visible;
}

.beam-manage__timeline-area > div {
    width: 100%;
    height: 100%;
    min-height: 0;
}

#beam-manage__performance-overview-chart {
    width: calc(100% - 32px);
    overflow: visible !important;
}

#beam-manage__performance-overview-chart .highcharts-navigator-mask-inside {
    fill: var(--corelight-900, #ccd3e4) !important;
    fill-opacity: 0.5;
    cursor: grab;
}

#beam-manage__performance-overview-chart .highcharts-navigator-outline {
    stroke: transparent !important;
    stroke-width: 0 !important;
}

#beam-manage__performance-overview-chart .highcharts-navigator-handle {
    fill: var(--coredark-500, #202c3a) !important;
    opacity: 0;
    pointer-events: none;
    stroke: var(--coredark-500, #202c3a) !important;
    transition: opacity 120ms ease;
}

#beam-manage__performance-overview-chart .highcharts-navigator-mask-inside:hover ~ .highcharts-navigator-handle,
#beam-manage__performance-overview-chart .highcharts-navigator-handle:hover,
#beam-manage__performance-overview-chart.beam-manage__overview-mask-hover .highcharts-navigator-handle,
#beam-manage__performance-overview-chart.beam-manage__overview-range-active .highcharts-navigator-handle {
    opacity: 1;
    pointer-events: auto;
}

#beam-manage__performance-main-chart,
#beam-manage__management-main-chart {
    overflow: visible !important;
}

.beam-manage__timeline-area .highcharts-container,
.beam-manage__timeline-area .highcharts-root {
    overflow: visible !important;
}

.beam-manage__loading {
    position: relative;
}

.beam-manage__loading .beam-manage__tree-table,
.beam-manage__loading .beam-manage__controls {
    opacity: 0.55;
    transition: opacity 120ms ease;
}

.beam-manage__loading .beam-manage__chart-area,
#beam-manage__performance-main:has([data-beam-chart-loading-url]) .beam-manage__chart-area {
    opacity: 0.55;
    filter: blur(2px);
    transition: filter 120ms ease, opacity 120ms ease;
}

.beam-manage__loading .beam-manage__tree-body {
    filter: blur(2px);
    transition: filter 120ms ease, opacity 120ms ease;
}

/* === Bottom Bar === */
.beam-manage__bottombar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    min-height: 52px;
    flex-shrink: 0;
    gap: 16px;
    position: relative;
    z-index: 2;
    background: var(--bd-bg);
}

.beam-manage__tabs {
    display: flex;
    align-items: center;
    gap: 6px;
}

.beam-manage__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid var(--bd-btn-border);
    background: var(--bd-btn-bg);
    color: var(--bd-text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
    white-space: nowrap;
}

.beam-manage__tab:hover {
    background: #F3F4F6;
}

.beam-manage__tab--pending,
.beam-manage__tab--pending:hover {
    background: #F3F4F6;
    color: var(--bd-text-primary);
    border-color: #CBD5E1;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35);
}

.beam-manage__tab--active {
    background: var(--bd-btn-active-bg);
    color: var(--bd-btn-active-text);
    font-weight: 600;
    border-color: var(--bd-btn-active-bg);
}

.beam-manage__tab--active:hover {
    background: var(--bd-btn-active-bg);
}

.beam-manage__controls {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.beam-manage__btn-group--chart {
    order: 100;
    margin-left: auto;
}

.beam-manage__btn-group {
    display: inline-flex;
    border-radius: 4px;
    border: 1px solid var(--bd-btn-border);
    background: var(--bd-btn-bg);
    overflow: hidden;
}

.beam-manage__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--bd-text-secondary);
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
    white-space: nowrap;
}

.beam-manage__btn:hover {
    background: #F3F4F6;
}

.beam-manage__btn--active {
    background: var(--bd-btn-active-bg);
    color: var(--bd-btn-active-text);
    font-weight: 600;
}

.beam-manage__btn--active:hover {
    background: var(--bd-btn-active-bg);
}

.beam-manage__separator {
    width: 1px;
    height: 20px;
    background: var(--bd-border);
    flex-shrink: 0;
}

.beam-manage__date-compact {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 4px;
    border: 1px solid var(--bd-border);
    background: var(--bd-btn-bg);
}

.beam-manage__date-compact input[type="date"] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 10px;
    color: var(--bd-text-secondary);
    padding: 0;
    width: 90px;
    font-family: inherit;
}

.beam-manage__nav-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--bd-text-secondary);
    text-decoration: none;
    font-size: 16px;
    border-radius: 4px;
    transition: background 120ms ease;
}

.beam-manage__nav-arrow:hover {
    background: #F3F4F6;
}

.beam-manage__nav-arrow--disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* === Issues === */
.beam-manage__issues {
    padding: 20px 24px;
}

.beam-manage__issues .mt-8 {
    margin-top: 0;
}

/* === Management Tab === */
.beam-mgmt__content {
    display: flex;
    flex: 1;
    min-height: 0;
    position: relative;
}

.beam-mgmt__chart-region.beam-manage__loading .beam-mgmt__chart-body,
#beam-manage__management-chart-region:has([data-beam-chart-loading-url]) .beam-mgmt__chart-body {
    opacity: 0.45;
    filter: blur(2px);
    transition: filter 120ms ease, opacity 120ms ease;
}

.beam-mgmt__chart-region.beam-manage__loading .beam-mgmt__chart-area,
#beam-manage__management-chart-region:has([data-beam-chart-loading-url]) .beam-mgmt__chart-area {
    opacity: 0.45;
    filter: blur(2px);
    transition: filter 120ms ease, opacity 120ms ease;
}

/* -- Event Log Panel -- */
.beam-mgmt__event-log {
    width: 580px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0,0,0,0.1);
    height: 100%;
}

.beam-mgmt__event-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px;
    background: rgba(0,0,0,0.05);
    min-height: 64px;
}

.beam-mgmt__event-log-title {
    font-family: 'Arial', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: #171B1F;
    margin: 0;
}

.beam-mgmt__event-log-subtitle {
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: 16px;
    color: #171B1F;
    margin: 0;
}

.beam-mgmt__add-event {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: var(--bd-logo-bg);
    cursor: pointer;
}

.beam-mgmt__add-event--disabled {
    color: #9CA3AF;
    cursor: default;
    pointer-events: none;
}

.beam-mgmt__event-log-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    min-height: 0;
}

.beam-mgmt__event-table-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
}

.beam-mgmt__event-col-desc {
    width: 320px;
    color: var(--bd-logo-bg);
}

.beam-mgmt__event-col-date,
.beam-mgmt__event-col-status {
    flex: 1;
    text-align: right;
    color: #171B1F;
}

.beam-mgmt__event-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* -- Event Entry -- */
.beam-mgmt__event {
    display: flex;
    flex-direction: column;
}

.beam-mgmt__event-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

.beam-mgmt__event-fault {
    width: 320px;
    color: #171B1F;
}

.beam-mgmt__event-date {
    flex: 1;
    text-align: right;
    color: #171B1F;
}

.beam-mgmt__event-status {
    flex: 1;
    text-align: right;
    font-weight: 700;
}

.beam-mgmt__event-status--resolved {
    color: #1D9477;
}

.beam-mgmt__event-status--unresolved {
    color: var(--energy-gas);
}

.beam-mgmt__event-body {
    padding: 4px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.beam-mgmt__event-text {
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: 16px;
    color: #171B1F;
    margin: 0;
}

.beam-mgmt__event-empty {
    padding: 20px 0;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    color: var(--bd-text-muted);
}

/* -- Generation Chart -- */
.beam-mgmt__chart {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
    min-width: 0;
}

.beam-mgmt__chart-stream,
.beam-mgmt__chart-region {
    flex: 1;
    display: flex;
    min-width: 0;
    min-height: 0;
    position: relative;
}

.beam-mgmt__chart-title {
    font-family: 'Arial', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: #171B1F;
    margin: 0;
    text-align: center;
}

.beam-mgmt__chart-subtitle {
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: 16px;
    color: #171B1F;
    margin: 4px 0 0;
    text-align: center;
}

.beam-mgmt__chart-stack {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.beam-mgmt__chart-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

.beam-mgmt__chart-body > div {
    flex: 1;
    min-width: 0;
}

.beam-mgmt__chart-area {
    flex: 1;
    min-height: 0;
    overflow: visible;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.beam-manage__chart-area .highcharts-container,
.beam-manage__chart-area .highcharts-root,
.beam-mgmt__chart-area .highcharts-container,
.beam-mgmt__chart-area .highcharts-root {
    overflow: visible !important;
}

.beam-mgmt__chart-area > div {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.beam-mgmt__chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 2px dashed #CCD3E4;
    border-radius: 8px;
    color: var(--bd-text-muted);
    font-family: 'Arial', sans-serif;
    font-size: 14px;
}

/* ===== Documentation Page ===== */
.beam-docs__content {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 40px;
    padding: 40px;
    overflow: auto;
}

.beam-docs__sidebar {
    width: 445px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.beam-docs__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.beam-docs__title {
    margin: 0;
    font-family: 'Arial', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 34px;
    color: #000000;
}

.beam-docs__meta {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.beam-docs__meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.beam-docs__meta-label,
.beam-docs__status-label {
    margin: 0;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #000000;
}

.beam-docs__meta-value,
.beam-docs__meta-link {
    margin: 0;
    font-family: 'Work Sans', 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.beam-docs__meta-value {
    color: #000000;
}

.beam-docs__meta-link {
    color: var(--beam-teal);
    text-decoration: none;
}

.beam-docs__meta-link:hover {
    text-decoration: underline;
}

.beam-docs__meta-divider {
    width: 100%;
    height: 1px;
    background: #E8EAED;
}

.beam-docs__status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.beam-docs__primary-btn,
.beam-docs__secondary-btn,
.beam-docs__icon-btn {
    cursor: pointer;
    border-radius: 4px;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.beam-docs__primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 40px;
    padding: 4px 20px;
    border: 1px solid var(--beam-teal);
    background: var(--beam-teal);
    color: #FFFFFF;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}

.beam-docs__primary-btn:hover {
    background: var(--primary-300);
    border-color: var(--primary-300);
}

.beam-docs__primary-btn:disabled,
.beam-docs__primary-btn[disabled] {
    background: #CCD3E4;
    border-color: #CCD3E4;
    color: #FFFFFF;
    cursor: not-allowed;
    opacity: 1;
}

.beam-docs__primary-btn:disabled:hover,
.beam-docs__primary-btn[disabled]:hover {
    background: #CCD3E4;
    border-color: #CCD3E4;
    opacity: 1;
}

.beam-docs__secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 40px;
    padding: 4px 20px;
    border: 1px solid #CCD3E4;
    background: #FFFFFF;
    color: #000000;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}

.beam-docs__secondary-btn:hover,
.beam-docs__icon-btn:hover {
    background: #F7F8FB;
}

.beam-docs__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #CCD3E4;
    background: #FFFFFF;
    color: var(--beam-teal);
}

.beam-docs__btn-icon,
.beam-docs__icon-btn svg,
.beam-docs__file-icon svg {
    display: inline-flex;
    width: 20px;
    height: 20px;
}

.beam-docs__btn-icon--download {
    color: var(--beam-teal);
}

.beam-docs__main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.beam-docs__files-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.beam-docs__files-title,
.beam-docs__panel-title {
    margin: 0;
    font-family: 'Arial', sans-serif;
    color: #000000;
}

.beam-docs__files-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
}

.beam-docs__files-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.beam-docs__files-tabs {
    display: flex;
    align-items: flex-end;
    gap: 28px;
    min-height: 36px;
    padding-bottom: 1px;
    border-bottom: 1px solid #E8EAED;
    overflow-x: auto;
}

.beam-docs__files-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #546683;
    text-decoration: none;
}

.beam-docs__files-tab--active {
    border-bottom-color: var(--beam-teal);
    color: #000000;
}

.beam-docs__files-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

.beam-docs__files-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.beam-docs__files-panel-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.beam-docs__panel-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}

.beam-docs__upload-status {
    margin: 0;
    font-family: 'Work Sans', 'Arial', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: #546683;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

/* ===== Configured Site Debug Page ===== */
.beam-debug__content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px 40px;
}

.beam-debug__heading,
.beam-debug__section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.beam-debug__eyebrow {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bd-text-secondary);
}

.beam-debug__title {
    margin: 0;
    font-family: 'Arial', sans-serif;
    font-size: 28px;
    line-height: 34px;
    color: var(--bd-text);
}

.beam-debug__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.beam-debug__diagnostic-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.beam-debug__diagnostic-stats--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
}

.beam-debug__stat,
.beam-debug__card {
    background: #FFFFFF;
    border: 1px solid var(--bd-border);
    border-radius: 6px;
}

.beam-debug__stat {
    padding: 16px;
}

.beam-debug__stat-label,
.beam-debug__muted {
    font-size: 12px;
    color: var(--bd-text-secondary);
}

.beam-debug__stat-value {
    margin-top: 6px;
    font-family: 'Arial', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: var(--bd-text);
    overflow-wrap: anywhere;
}

.beam-debug__stat-detail {
    margin-top: 4px;
    font-size: 13px;
    color: var(--bd-text-secondary);
    overflow-wrap: anywhere;
}

.beam-debug__layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.beam-debug__sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.beam-debug__card {
    padding: 18px;
}

.beam-debug__card--main {
    min-width: 0;
}

.beam-debug__card--wide {
    min-width: 0;
}

.beam-debug__section-title {
    margin: 0 0 14px;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--bd-text);
}

.beam-debug__section-head .beam-debug__section-title {
    margin-bottom: 0;
}

.beam-debug__kv,
.beam-debug__table-row {
    display: grid;
    gap: 10px;
    align-items: center;
}

.beam-debug__kv {
    grid-template-columns: 110px minmax(0, 1fr);
    padding: 8px 0;
    border-bottom: 1px solid #EEF1F6;
}

.beam-debug__kv:last-child {
    border-bottom: none;
}

.beam-debug__table {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.beam-debug__table-row {
    grid-template-columns: 74px minmax(0, 1fr) 70px;
    padding: 8px 0;
    border-bottom: 1px solid #EEF1F6;
    font-size: 13px;
}

.beam-debug__table-row--head {
    font-weight: 700;
    color: var(--bd-text-secondary);
}

.beam-debug__table--energy {
    margin-top: 16px;
}

.beam-debug__table--energy .beam-debug__table-row {
    grid-template-columns: 170px minmax(150px, 1fr) 120px 120px 120px 72px;
}

.beam-debug__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: #27364A;
    overflow-wrap: anywhere;
}

.beam-debug__tree,
.beam-debug__device-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.beam-debug__tree {
    margin-top: 14px;
}

.beam-debug__tree-node {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.beam-debug__tree-row,
.beam-debug__root-meter {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #EEF1F6;
}

.beam-debug__tree-copy {
    min-width: 0;
    flex: 1;
}

.beam-debug__tree-title {
    font-weight: 700;
    color: var(--bd-text);
}

.beam-debug__tree-meta,
.beam-debug__device {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.beam-debug__tree-device {
    display: flex;
}

.beam-debug__kind,
.beam-debug__count {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.beam-debug__kind {
    background: #EEF2FF;
    color: #3347C0;
}

.beam-debug__count {
    background: #F3F4F6;
    color: var(--bd-text-secondary);
}

.beam-debug__details {
    margin-left: 28px;
    padding: 8px 12px;
    border-left: 2px solid #DDE3F0;
}

.beam-debug__details summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--bd-text-secondary);
}

.beam-debug__warning {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid #FBBF24;
    border-radius: 6px;
    background: #FFFBEB;
}

.beam-debug__notice {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #FBBF24;
    border-radius: 6px;
    background: #FFFBEB;
    color: #78350F;
    font-size: 13px;
}

.beam-debug__notice p {
    margin: 0;
}

.beam-debug__window-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
}

.beam-debug__window-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--bd-text-secondary);
}

.beam-debug__window-form input {
    min-height: 36px;
    border: 1px solid var(--bd-border);
    border-radius: 6px;
    padding: 6px 8px;
    color: var(--bd-text);
}

.beam-docs__upload-input {
    display: none;
}

.beam-docs__files-collection--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(392px, 100%), 1fr));
    gap: 24px;
    align-items: stretch;
}

.beam-docs__files-collection--list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.beam-docs__file-card {
    display: flex;
    flex-direction: column;
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #E8EAED;
    border-radius: 5px;
    background: #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15);
}

.beam-docs__file-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 6px 0;
}

.beam-docs__file-name {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    color: #171B1F;
}

.beam-docs__file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.beam-docs__file-name-copy,
.beam-docs__file-row-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.beam-docs__file-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Work Sans', 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.beam-docs__file-meta {
    font-family: 'Work Sans', 'Arial', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: #546683;
}

.beam-docs__file-preview {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 0;
    margin: 6px;
    border-radius: 4px;
    overflow: hidden;
    background: #E8EAED;
}

.beam-docs__file-preview-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.beam-docs__file-preview-icon {
    display: inline-flex;
    width: 58px;
    height: 50px;
}

.beam-docs__file-card-meta {
    padding: 0 6px 6px;
}

.beam-docs__file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid #E8EAED;
    border-radius: 5px;
    background: #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.08);
}

.beam-docs__file-row-main {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.beam-docs__file-menu {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
}

.beam-docs__file-menu:focus-within,
.beam-docs__file-menu:hover {
    z-index: 4;
}

.beam-docs__file-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #FFFFFF;
    color: #546683;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.beam-docs__file-menu-trigger:hover,
.beam-docs__file-menu:focus-within .beam-docs__file-menu-trigger {
    border-color: #CCD3E4;
    background: #F7F8FB;
    color: #171B1F;
}

.beam-docs__file-menu-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 150px;
    padding: 8px;
    border: 1px solid #E8EAED;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 12px 24px rgba(23, 27, 31, 0.16);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 120ms ease, transform 120ms ease;
}

.beam-docs__file-menu:focus-within .beam-docs__file-menu-popover,
.beam-docs__file-menu:hover .beam-docs__file-menu-popover {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.beam-docs__file-menu-form {
    margin: 0;
}

.beam-docs__file-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #171B1F;
    text-decoration: none;
    text-align: left;
    font-family: 'Work Sans', 'Arial', sans-serif;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
}

.beam-docs__file-menu-item:hover {
    background: #F7F8FB;
}

.beam-docs__file-menu-item--danger {
    color: #B42318;
}

.beam-docs__file-menu-item--danger:hover {
    background: #FEF3F2;
}

.beam-docs__file-menu-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.beam-docs__file-icon--row {
    flex-shrink: 0;
    color: #171B1F;
}

/* ===== Overview (Landing) Page — 2×2 quadrant ===== */
.beam-overview__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    flex: 1;
    min-height: 0;
}

/* Shared quadrant cell */
.beam-overview__q {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Top-left: map */
.beam-overview__q--map {
    border-right: 1px solid var(--bd-border);
    border-bottom: 1px solid var(--bd-border);
    background: #1a1a2e;
}

/* Top-right: site info */
.beam-overview__q--info {
    border-bottom: 1px solid var(--bd-border);
    display: flex;
    flex-direction: column;
    padding: 24px 28px;
    gap: 20px;
    overflow-y: auto;
}

.beam-overview__info-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.beam-overview__info-org {
    font-size: 20px;
    font-weight: 700;
    color: var(--bd-text);
    font-family: 'Arial', sans-serif;
}

.beam-overview__info-addr {
    font-size: 14px;
    color: var(--bd-text-secondary);
}

.beam-overview__info-meta {
    font-size: 12px;
    color: var(--bd-text-muted);
    margin-top: 2px;
}

.beam-overview__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    flex: 1;
    align-content: start;
}

.beam-overview__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.beam-overview__stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--bd-text);
    font-family: 'Arial', sans-serif;
    line-height: 1.2;
}

.beam-overview__stat-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--bd-text-secondary);
}

.beam-overview__info-period {
    font-size: 11px;
    color: var(--bd-text-muted);
    margin-top: auto;
    padding-top: 4px;
}

.beam-overview__info-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.beam-overview__info-group-title {
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--bd-text-muted);
    border-bottom: 1px solid var(--bd-border);
    padding-bottom: 4px;
}

.beam-overview__info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.beam-overview__info-list-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.beam-overview__info-list-label {
    color: var(--bd-text-secondary);
}

.beam-overview__info-list-value {
    font-weight: 600;
    color: var(--bd-text);
    text-align: right;
}

/* Bottom-left: chart */
.beam-overview__q--chart {
    border-right: 1px solid var(--bd-border);
    display: flex;
    flex-direction: column;
    padding: 16px 24px;
}

/* Bottom-right: issues */
.beam-overview__q--issues {
    display: flex;
    flex-direction: column;
    padding: 16px 24px;
}

/* Quadrant header (chart + issues) */
.beam-overview__q-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.beam-overview__q-title {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--bd-text);
    margin: 0;
}

.beam-overview__link {
    font-size: 12px;
    font-weight: 500;
    color: var(--bd-logo-bg);
    text-decoration: none;
}

.beam-overview__link:hover {
    text-decoration: underline;
}

/* Chart */
.beam-overview__chart {
    flex: 1;
    min-height: 0;
    display: flex;
}

.beam-overview__chart > div {
    flex: 1;
    min-height: 0;
}

.beam-overview__chart-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bd-text-muted);
    font-size: 13px;
    border: 2px dashed var(--bd-border);
    border-radius: 8px;
}

/* Issues list */
.beam-overview__issues-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.beam-overview__issue {
    padding: 8px 0;
    border-bottom: 1px solid var(--bd-border);
}

.beam-overview__issue:last-child {
    border-bottom: none;
}

.beam-overview__issue-header {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
}

.beam-overview__issue-fault {
    flex: 1;
    font-weight: 500;
    color: var(--bd-text);
    min-width: 0;
}

.beam-overview__issue-date {
    color: var(--bd-text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

.beam-overview__issue-status {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.beam-overview__issue-status--resolved {
    color: var(--bd-status-green);
}

.beam-overview__issue-status--unresolved {
    color: var(--bd-status-red);
}

.beam-overview__issue-body {
    font-size: 12px;
    color: var(--bd-text-secondary);
    margin-top: 4px;
    line-height: 1.4;
}

.beam-overview__issues-empty {
    font-size: 13px;
    color: var(--bd-text-muted);
    padding: 12px 0;
}

/* ===== Sites List Page ===== */
.beam-sites {
    display: flex;
    min-height: 100vh;
    background: var(--bd-bg);
    color: #171B1F;
    font-family: 'Arial', sans-serif;
}

.beam-sites__content {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #F2F2F2;
}

/* -- Header -- */
.beam-sites__page-header {
    background: #fff;
    padding: 20px 40px 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.beam-sites__breadcrumbs {
    display: flex;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
}

.beam-sites__breadcrumb-link {
    color: var(--beam-teal);
    text-decoration: none;
}

.beam-sites__breadcrumb-sep {
    color: var(--coredark-300);
}

/* -- Map -- */
.beam-sites__map-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin: 40px 40px 0;
    align-items: stretch;
}

.beam-sites__map-shell--has-selection {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.beam-sites__map {
    height: 40vh;
    min-height: 320px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.1);
    overflow: hidden;
    background: #e8e8e8;
    position: relative;
}

.beam-sites__summary {
    display: none;
    padding: 24px;
    border-radius: 4px;
    border: 1px solid #CCD3E4;
    background: #FFFFFF;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}

.beam-sites__summary--visible {
    display: flex;
    height: 40vh;
    min-height: 320px;
}

.beam-sites__summary-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.beam-sites__summary-eyebrow {
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--beam-teal);
}

.beam-sites__summary-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
    color: #171B1F;
}

.beam-sites__summary-copy {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    color: #546683;
}

.beam-sites__summary-metrics {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
}

.beam-sites__summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #E1E7F2;
}

.beam-sites__summary-row:last-child {
    margin-top: auto;
    padding-bottom: 0;
    border-bottom: none;
}

.beam-sites__summary-row--status {
    flex: 1;
    align-items: stretch;
    justify-content: center;
}

.beam-sites__summary-row--split {
    justify-content: space-between;
    gap: 24px;
}

.beam-sites__summary-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    color: #546683;
}

.beam-sites__summary-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.beam-sites__summary-data--status {
    flex: 1;
    width: 100%;
    align-items: center;
    height: 100%;
    text-align: center;
}

.beam-sites__summary-status-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin-top: auto;
}

.beam-sites__summary-data--end {
    align-items: flex-end;
    text-align: right;
}

.beam-sites__summary-status-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.beam-sites__summary-status-bar-track {
    display: flex;
    width: 100%;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background-color: #E1E7F2;
}

.beam-sites__summary-status-bar-segment {
    border: none;
    padding: 0;
    margin: 0;
    height: 100%;
    cursor: pointer;
    transition: filter 120ms ease-in-out;
}

.beam-sites__summary-status-bar-segment:hover {
    filter: brightness(1.08);
}

.beam-sites__summary-status-bar-segment:focus-visible {
    outline: 2px solid #171B1F;
    outline-offset: 1px;
}

.beam-sites__summary-status-bar-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.beam-sites__summary-status-bar-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 16px;
    color: #171B1F;
    text-align: left;
}

.beam-sites__summary-status-bar-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.beam-sites__summary-status-bar-legend-label {
    color: #546683;
    font-weight: 500;
}

.beam-sites__summary-status-bar-legend-count {
    margin-left: auto;
    font-weight: 700;
    color: #171B1F;
}

.beam-sites__summary-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
    color: #171B1F;
    white-space: nowrap;
}

.beam-sites__summary-data--status .beam-sites__summary-value {
    font-size: 48px;
    line-height: 48px;
}

.beam-sites__summary-meta {
    font-size: 13px;
    font-weight: 300;
    line-height: 18px;
    color: #546683;
    white-space: nowrap;
    min-height: 18px;
}

.beam-sites__summary-status-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    width: 100%;
}

.beam-sites__summary-status-gauge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 63px;
    flex-shrink: 0;
}

.beam-sites__summary-status-gauge [data-performance-gauge] {
    width: 100% !important;
    height: 100% !important;
}

.beam-sites__summary-status-gauge [data-performance-gauge] svg {
    width: 100%;
    height: 100%;
}

.beam-sites__map-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #546683;
    font-size: 14px;
}

/* -- Toolbar -- */
.beam-sites__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 40px 0;
}

.beam-sites__toolbar-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.beam-sites__toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.beam-sites__btn {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 4px 20px;
    background: #fff;
    border: 1px solid #CCD3E4;
    border-radius: 4px;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.beam-sites__btn:hover {
    background: #f8f9fb;
}

.beam-sites__btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.beam-sites__search {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 40px;
    width: 240px;
    padding: 4px 14px 4px 20px;
    background: #fff;
    border: 1px solid #CCD3E4;
    border-radius: 4px;
}

.beam-sites__search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    color: #171B1F;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.beam-sites__search input:focus,
.beam-sites__search input:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none;
}

.beam-sites__search:focus-within {
    border-color: var(--beam-teal);
}

.beam-sites__search input::placeholder {
    color: #546683;
}

.beam-sites__search svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: #546683;
}

.beam-sites__dropdown {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 40px;
    width: 186px;
    padding: 4px 20px;
    background: #fff;
    border: 1px solid #CCD3E4;
    border-radius: 4px;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #171B1F;
    cursor: pointer;
    appearance: none;
    text-align: left;
}

.beam-sites__dropdown span {
    flex: 1;
}

.beam-sites__dropdown svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* -- Table -- */
.beam-sites__table-wrap {
    margin: 20px 40px 40px;
    border-radius: 4px;
    border: 1px solid var(--bd-btn-border);
    overflow: hidden;
    background: #fff;
}

.beam-sites__ag-grid {
    height: 100%;
    width: 100%;
    --ag-font-family: 'Arial', sans-serif;
    --ag-font-size: 16px;
    --ag-list-item-height: 24px;
    --ag-background-color: #fff;
    --ag-foreground-color: #171B1F;
    --ag-header-background-color: #fff;
    --ag-header-foreground-color: #000;
    --ag-border-color: #CCD3E4;
    --ag-row-border-color: #F1F1F1;
    --ag-row-hover-color: #F9FAFB;
    --ag-selected-row-background-color: #F6F8FF;
    --ag-header-height: 48px;
    --ag-row-height: 56px;
    --ag-cell-horizontal-padding: 20px;
    --ag-wrapper-border-radius: 0;
    --ag-wrapper-border: none;
    --ag-borders: none;
}

.beam-sites__ag-grid .ag-root-wrapper,
.beam-sites__ag-grid .ag-root-wrapper-body {
    border: none;
}

.beam-sites__ag-grid .ag-header {
    border-bottom: 1px solid #CCD3E4;
}

.beam-sites__ag-grid .ag-header-cell,
.beam-sites__ag-grid .ag-cell {
    display: flex;
    align-items: center;
}

.beam-sites__ag-grid .ag-header-cell-text {
    font-weight: 600;
    color: #000;
}

.beam-sites__ag-grid .ag-cell {
    font-weight: 300;
    color: #171B1F;
}

.beam-sites__ag-grid .ag-cell-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beam-sites__ag-grid .ag-cell a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--beam-teal);
    text-decoration: none;
}

.beam-sites__ag-grid .ag-cell a:hover {
    text-decoration: underline;
}

.beam-sites__ag-grid .ag-selection-checkbox,
.beam-sites__ag-grid .ag-checkbox-input-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.beam-sites__ag-grid {
    --ag-selected-row-background-color: transparent;
}

.beam-sites__ag-grid .ag-row-selected::before {
    background-color: transparent;
}

.beam-sites__ag-grid .ag-column-select-header-filter-wrapper,
.beam-sites__ag-grid .ag-filter-toolpanel-search,
.beam-sites__ag-grid .ag-filter-toolpanel-search-input {
    display: none !important;
}

.beam-sites__ag-grid .ag-side-bar {
    border-left: 1px solid #E5E7EB;
    background: #fff;
}

.beam-sites__ag-grid .ag-tool-panel-wrapper,
.beam-sites__ag-grid .ag-column-drop-wrapper {
    font-family: 'Arial', sans-serif;
}

.beam-sites__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
}

.beam-sites__table th {
    background: #fff;
    border-bottom: 1px solid #CCD3E4;
    padding: 14px 20px;
    text-align: left;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #000;
    white-space: nowrap;
}

.beam-sites__table th.beam-sites__col-check,
.beam-sites__table td.beam-sites__col-check {
    width: 60px;
    text-align: center;
    padding: 14px 20px;
}

.beam-sites__table th.beam-sites__col-name,
.beam-sites__table td.beam-sites__col-name {
    width: 200px;
}

.beam-sites__table th.beam-sites__col-address,
.beam-sites__table td.beam-sites__col-address {
    width: 280px;
}

.beam-sites__table th.beam-sites__col-state,
.beam-sites__table td.beam-sites__col-state {
    width: 119px;
}

.beam-sites__table th.beam-sites__col-date,
.beam-sites__table td.beam-sites__col-date {
    width: 200px;
}

.beam-sites__table th.beam-sites__col-system,
.beam-sites__table td.beam-sites__col-system {
    width: 240px;
}

.beam-sites__table th.beam-sites__col-savings,
.beam-sites__table td.beam-sites__col-savings {
    width: 140px;
}

.beam-sites__table th.beam-sites__col-emissions,
.beam-sites__table td.beam-sites__col-emissions {
    width: 220px;
}

.beam-sites__table th.beam-sites__col-status,
.beam-sites__table td.beam-sites__col-status {
    width: 220px;
}

.beam-sites__table th.beam-sites__col-actions,
.beam-sites__table td.beam-sites__col-actions {
    width: 40px;
    text-align: center;
    padding: 14px 10px;
}

.beam-sites__table tbody tr {
    border-bottom: 1px solid #F1F1F1;
    cursor: pointer;
}

.beam-sites__table tbody tr:hover {
    background: #F9FAFB;
}

.beam-sites__table td {
    padding: 12px 20px;
    font-weight: 300;
    line-height: 24px;
    color: #171B1F;
    vertical-align: middle;
}

.beam-sites__table td a {
    color: var(--beam-teal);
    text-decoration: none;
    font-weight: 300;
}

.beam-sites__truncate-link,
.beam-sites__truncate-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beam-sites__truncate-link {
    max-width: 100%;
}

.beam-sites__table td a:hover {
    text-decoration: underline;
}

/* -- Leaflet map override -- */
.beam-sites__map .leaflet-container {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

@media (max-width: 1100px) {
    .beam-sites__map-shell--has-selection {
        grid-template-columns: minmax(0, 1fr);
    }

    .beam-sites__summary--visible {
        height: auto;
        min-height: 0;
    }

    .beam-sites__summary-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .beam-sites__summary-row--split {
        flex-direction: row;
        align-items: flex-start;
    }

    .beam-sites__summary-data {
        align-items: flex-start;
        text-align: left;
    }

    .beam-sites__summary-data--end {
        align-items: flex-end;
        text-align: right;
    }

    .beam-sites__summary-band-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* System size icons */
.beam-sites__system-row {
    display: flex;
    gap: 16px;
    align-items: center;
    line-height: 24px;
}

.beam-sites__system-item {
    display: flex;
    gap: 4px;
    align-items: center;
    white-space: nowrap;
}

.beam-sites__system-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Status column */
.beam-sites__status-gauge {
    display: flex;
    gap: 8px;
    align-items: center;
    white-space: nowrap;
}

.beam-sites__status-pct {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: #1D9477;
    line-height: 1;
    white-space: nowrap;
}

.beam-sites__status-text {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 28px;
    height: 100%;
    font-weight: 300;
    color: #171B1F;
    line-height: 1;
    white-space: nowrap;
}

/* Checkbox */
.beam-sites__checkbox {
    width: 20px;
    height: 20px;
    border: 1px solid #CCD3E4;
    border-radius: 2px;
    background: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
}

.beam-sites__checkbox:checked {
    background: var(--beam-teal);
    border-color: var(--beam-teal);
}

.beam-sites__checkbox:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* -- Summary footer -- */
.beam-sites__footer {
    background: var(--bd-sidebar-bg);
    display: none;
    color: #fff;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 10;
    margin-left: 158px;
    padding: 0 40px;      /* match table-wrap horizontal margin */
}

.beam-sites__footer--visible {
    display: block;
}

.beam-sites__footer-table {
    width: 100%;
    border-collapse: collapse;
}

.beam-sites__footer-table td {
    padding: 8px 20px;
    font-weight: 300;
    line-height: 20px;
    white-space: nowrap;
    vertical-align: middle;
}

.beam-sites__footer-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.beam-sites__footer-label strong {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
}

.beam-sites__footer-sub {
    font-weight: 300;
    font-size: 12px;
    line-height: 20px;
    color: var(--bd-btn-border);
}

.beam-sites__footer-stat {
    display: flex;
    gap: 4px;
    align-items: center;
    white-space: nowrap;
    font-weight: 300;
}

.beam-sites__footer-stat svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* -- Actions menu dots -- */
.beam-sites__dots {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    cursor: pointer;
    padding: 4px;
}

.beam-sites__dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #546683;
}

/* === Responsive === */
@media (max-width: 1200px) {
    .beam-manage__panel-left {
        width: 300px;
    }

    .beam-manage__controls {
        flex-wrap: wrap;
    }

    .beam-overview__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(4, minmax(0, auto));
    }

    .beam-overview__q--map,
    .beam-overview__q--chart {
        border-right: none;
    }

    .beam-overview__q--issues {
        border-top: 1px solid var(--bd-border);
    }
}

@media (max-width: 900px) {
    .beam-manage {
        flex-direction: column;
    }

    .beam-manage__sidebar {
        width: 100%;
        min-height: auto;
        position: relative;
        flex-direction: row;
    }

    .beam-manage__body {
        flex-direction: column;
    }

    .beam-docs__content {
        flex-direction: column;
    }

    .beam-debug__stats,
    .beam-debug__diagnostic-stats,
    .beam-debug__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .beam-debug__table--energy {
        overflow-x: auto;
    }

    .beam-debug__table--energy .beam-debug__table-row {
        min-width: 780px;
    }

    .beam-docs__sidebar {
        width: 100%;
    }

    .beam-docs__files-head,
    .beam-docs__files-panel-head {
        flex-direction: column;
        align-items: stretch;
    }

    .beam-docs__upload-status {
        max-width: none;
        white-space: normal;
    }

    .beam-docs__files-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .beam-manage__panel-left {
        width: 100%;
    }

    .beam-manage__vdivider {
        width: 100%;
        height: 1px;
    }

    .beam-manage__bottombar {
        flex-wrap: wrap;
        min-height: auto;
    }
}

@media (max-width: 640px) {
    .beam-manage__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .beam-manage__bottombar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 16px;
    }

    .beam-manage__controls {
        flex-wrap: wrap;
    }

    .beam-docs__content {
        gap: 24px;
        padding: 24px 16px;
    }

    .beam-docs__files-tabs {
        gap: 20px;
    }

    .beam-docs__files-collection--grid {
        grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
        gap: 16px;
    }

    .beam-docs__file-row {
        flex-direction: column;
        align-items: stretch;
    }

    .beam-docs__file-row .beam-docs__file-menu {
        align-self: flex-start;
    }

    .beam-docs__file-row .beam-docs__file-menu-popover {
        left: 0;
        right: auto;
    }
}