/* Color Palette Mapping Strategy for High-Contrast OLED Panels */
:root {
    --bg-pure: #000000; /* True Black to hide layout container seams */
    --bg-card: #0c0c0e; /* Extremely dark charcoal canvas block */
    --bg-subnode: #131316; /* Elevated layout row element layer */
    --border-main: #1f1f23;
    --text-main: #ffffff;
    --text-muted: #797981;

    /* Strict Functional Telemetry Hex Colors */
    --sys-blue: #0A84FF;
    --sys-green: #30D158;
    --sys-orange: #FF9F0A;
    --sys-amber: #FFCC00;
    --sys-yellow: #FFD60A;


    /* Base Obsidian Matrix Colors */
    --bg-obsidian: #0B0F19;
/ / --bg-card: #161C2A;
    --border-matrix: #222B3E;
    --text-primary: #F3F4F6;
    --text-secondary: #9CA3AF;
/ / --text-muted: #6B7280;

    /* Integrated Chart Accents (Specified by model reversed characteristics) */
    --accent-green: #10B981; /* Production/Generation */
    --accent-orange: #F59E0B; /* Consumption */
    --accent-red: #EF4444; /* Import/Buy */
    --accent-blue: #3B82F6; /* Export/Sell */

    /* Dynamic UI Status Colors */
    --status-paid: #32CD32; /* Vivid Lime Green for clear confirmation */
    --status-unpaid: #EF4444; /* Intense Alarm Red for immediate action */
    --status-generated: #F59E0B; /* Amber Yellow warning buffer window */
    --status-not-generated: #6B7280; /* Neutral Slate Muted gray for idle period */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-pure);
    color: var(--text-main);
    width: 1920px;
    height: 360px;
    overflow: auto;
    padding: 5px;
}

/* Widescreen 4-Segment Main Row Wrapper Config */
.dashboard-strip {
    display: grid;
    grid-template-columns: 360px 750px 430px 356px;
    gap: 5px;
    height: 100%;
    width: 100%;
}

.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-main);
    border-radius: 5px;
    padding: 5px 7px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Structural Header Rule */
.card-title-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 6px;
}

.card-title-header .main-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-main);
}

.subtitle-row {
    display: flex;
    gap: 5px;
    margin-top: 3px;
    background-color: var(--bg-subnode);
    border: 1px solid #1a1a1e;
    border-radius: 6px;
    padding: 6px 10px;
    justify-content: space-between;
    align-items: center;
    height: 40px;
}

.sub-icon-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Color Token Context Styles */
.text-blue {
    color: var(--sys-blue);
}

.text-green {
    color: var(--sys-green);
}

.text-orange {
    color: var(--sys-orange);
}

.text-amber {
    color: var(--sys-amber);
}

.text-yellow {
    color: var(--sys-yellow);
}

.text-muted {
    color: var(--text-muted);
}


/* SECTION 1 MODULE: WATER GRID SYSTEM */
.water-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    height: 100%;
}

.water-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.water-row-node {
    background-color: var(--bg-subnode);
    border: 1px solid #1a1a1e;
    border-radius: 6px;
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

.empty-node {
    background-color: transparent;
    border: 1px dashed #151518;
}

.node-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.node-meta {
    display: flex;
    flex-direction: column;
}

.node-tag {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
}

.node-value {
    font-size: 18px;
    font-weight: 700;
}

.node-right {
    display: flex;
    align-items: center;
    gap: 3px;
}

.temp-value {
    font-size: 12px;
    font-weight: 600;
}

.drop-icon, .therm-icon {
    font-size: 14px;
}

.drop-icon {
    color: var(--accent-blue);
}

.drop-icon-sun {
    color: #ffc107;
}

.icon-temp {
    font-size: 12px;
    color: #ff9800;
}

/* SECTION 2 MODULE: METERS & REVENUE */
.meter-block-top {
    /*height: 60%;*/
    display: flex;
    flex-direction: column;
}

.meter-block-bottom {
    /*height: 38%;
    border-top: 1px solid var(--border-main);*/
    padding-top: 6px;
    display: flex;
    flex-direction: column;
}

.meter-readings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    margin-top: 4px;
}

.meter-box {
    background: var(--bg-subnode);
/ border: 1 px solid #1a1a1e;
    border-radius: 6px;
    padding: 5px 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.box-tag {
    font-size: 8px;
    font-weight: 600;
    color: var(--text-muted);
}

.box-val {
    font-size: 17px;
    font-weight: 700;
    margin: 4px 0;
}

.box-unit {
    font-size: 7px;
    font-weight: bold;
    color: #4a4a52;
}

.bill-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 4px;
}

.bill-box {
    background: var(--bg-subnode);
    border: 1px solid #1a1a1e;
    border-radius: 6px;
    padding: 2px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bill-tag {
    font-size: 10px;
    font-weight: bold;
    color: var(--text-muted);
}

.bill-val {
    font-size: 16px;
    font-weight: 700;
}

.fixed-charge {
    font-size: 10px;
}

/* SECTION 3 MODULE: PROFILE CHARTS MULTI-ROW CONTAINER */
#card-charts {
    display: grid;
    grid-template-columns: calc(46% - 3px) calc(54% - 3px);
    gap: 6px;
    padding: 6px;
}

.chart-wrapper-box {
    background: #060608;
    border: 1px solid #141418;
    border-radius: 6px;
    padding: 6px;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}

.spec-pad {
    padding-left: 6px;
}

.sub-heading {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
}

/* SECTION 4 MODULE: SVG MESH CONNECTOR NODE MATRIX */
.flow-canvas {
    position: relative;
    width: 100%;
    height: 100%;
}

.flow-lines-mesh {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.matrix-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: grid;
    grid-template-columns: 110px 130px 110px;
    justify-content: space-between;
}

.matrix-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 4px 0;
}

.center-flex {
    justify-content: center;
}

.node-box {
    background-color: rgba(19, 19, 22, 0.9);
    border: 1px solid #1f1f25;
    border-radius: 8px;
    height: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.highlight-border-blue {
    border: 1px solid var(--sys-blue);
}

.core-inv {
    height: 80px;
    border: 1px dashed var(--sys-green);
    background: #111115;
}

.node-icon {
    font-size: 16px;
    margin-bottom: 2px;
}

.node-value {
    font-size: 18px;
    font-weight: 700;
}

.node-sub-status {
    font-size: 8px;
    font-weight: bold;
    margin-top: 1px;
}

.core-label {
    font-size: 11px;
    font-weight: bold;
    color: var(--text-muted);
}

.node-badge-soc {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 8px;
    font-weight: bold;
    color: var(--sys-blue);
    background: rgba(10, 132, 255, 0.1);
    padding: 1px 3px;
    border-radius: 3px;
}

.center-align {
    align-items: center;
}


/* --- DEYE INTEGRATED POWER FLOW LAYOUT GRAPHICS --- */

.node {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.node-icon-box {
    background: var(--bg-subnode);
    border-radius: 12px;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--border-main);
    position: relative;
}

.core-inv-box {
    border-color: var(--sys-blue) !important;
    box-shadow: 0 0 6px rgba(10, 132, 255, 0.2);
}

.node-meta-tag-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--sys-blue);
    letter-spacing: 1px;
    margin-top: 4px;
}

.bat-soc-bubble {
    position: absolute;
    top: -14px;
    font-size: 14px;
    font-weight: 800;
    color: var(--sys-blue);
    background: rgba(10, 132, 255, 0.15);
    padding: 1px 4px;
    border-radius: 4px;
    border: 1px solid rgba(10, 132, 255, 0.3);
}

/* Vector Graphic Lines Engine */
.svg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.flow-path {
    fill: none;
    stroke: #222226;
    stroke-width: 2;
}

/* Line Pulse States */
.active-flow {
    stroke: var(--sys-green);
    stroke-dasharray: 6, 4;
    animation: flowAnimation 2s linear infinite;
}

.active-flow-blue {
    stroke: var(--sys-blue);
    stroke-dasharray: 6, 4;
    animation: flowAnimation 2s linear infinite;
}

.reverse-flow {
    stroke: var(--sys-orange);
    stroke-dasharray: 6, 4;
    animation: flowAnimation 2s linear infinite reverse;
}

.no-flow {
    stroke: var(--text-muted);
    stroke-dasharray: 4, 6;
}

@keyframes flowAnimation {
    from {
        stroke-dashoffset: 40;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.grid-check-marker {
    fill: var(--sys-green);
    stroke: var(--bg-card);
    stroke-width: 1.5;
}


/* Ensure the main grid handles the extra columns */
.command-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Unified 4-column system */
    gap: 10px;
    padding: 10px;
    width: 100vw;
    height: 100vh;
}

/* Base Card Styling */
/*.card {
    background-color: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-matrix);
    padding: 15px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}*/

.card-header {
    margin-bottom: 10px;
    border-bottom: 1px solid #1F293D;
    padding-bottom: 8px;
}

.card-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 1px;
    margin-bottom: 3px;
    display: block;
}

.card-subtitle {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    display: block;
}

/* Charts Wrapper: Constrains Chart.js canvas for embedded TV display [e.g., 180px DIP height slot] */
.chart-wrapper {
    position: relative;
    flex-grow: 1;
    width: 100%;
    max-height: 140px;
}

/* 2-Column Grid for Summary Totals */
.summary-stats-grid {
    /*display: grid;*/
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
}

.stat-badge {
    background-color: #1F293D; /* Deep Blue base badge */
    border-radius: 6px;
    padding: 0 10px;
    border: 1px solid #2D3748;
}

.stat-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 3px;
}

.stat-value {
    font-size: 16px;
    font-weight: 800;
}

/* Status-driven utility text transformations */
.bill-status-paid {
    color: var(--status-paid) !important;
}

.bill-status-unpaid {
    color: var(--status-unpaid) !important;
}

.bill-status-generated {
    color: var(--status-generated) !important;
}

.bill-status-not-generated {
    color: var(--status-not-generated) !important;
}

/* Subtle accent glow border tracking styles to frame cards contextually */
.border-status-paid {
    border-color: rgba(50, 205, 50, 0.4) !important;
}

.border-status-unpaid {
    border-color: rgba(239, 68, 68, 0.4) !important;
}

.border-status-generated {
    border-color: rgba(245, 158, 11, 0.4) !important;
}


/* Typography Color Variants matching system layout colors */
.text-blue {
    color: var(--accent-blue);
}

.text-orange {
    color: var(--accent-orange);
}

.text-yellow {
    color: #FBBF24;
}

/* Dynamic Warning States for Low Water Thresholds */
.tank-critical-alert {
    border-color: var(--status-unpaid) !important;
    background-color: rgba(239, 68, 68, 0.1) !important;
    animation: pulseBorder 2s infinite alternate;
}

.text-danger {
    color: var(--status-unpaid) !important;
}

@keyframes pulseBorder {
    0% {
        border-color: rgba(239, 68, 68, 0.4);
    }
    100% {
        border-color: rgba(239, 68, 68, 1);
    }
}


/* main.css - Fixed Diagnostic Matrix Container */

/* Unified master container card that safely overrides default row flex restrictions */
.matrix-card-wrapper {
    background-color: var(--border-matrix);
    border: 1px solid var(--border-matrix);
    border-radius: 5px;
    padding: 4px 5px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-sizing: border-box;
    max-width: 167px;
}

.matrix-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 5px;
}

/* Left Section: Clock and Voltage alignment */
.matrix-pillar-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    padding: 2px 0;
}

.matrix-metric-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.matrix-icon-bolt {
    color: #A855F7;
    text-align: center;
}

.matrix-icon-clock {
    color: var(--accent-blue);
    text-align: center;
}

.matrix-meta-stack {
    display: flex;
    flex-direction: column;
}

.matrix-voltage-display {
    font-size: 34px; /* Slightly scaled down to prevent TV viewport clipping */
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.1;
}

.matrix-time-display {
    font-size: 34px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.2;
    white-space: nowrap; /* Forces AM/PM to stay cleanly pinned on the same horizontal line */
}

/* Right Section: Vertical Thermals Stack */
.matrix-pillar-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2px;
}

.matrix-therm-row {
    background-color: #161C2A;
    border: 1px solid var(--border-matrix);
    padding: 5px 7px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1; /* Ensures rows stretch identically to balance the height of the clock side */
}

.matrix-therm-label {
    font-size: 9px;
    font-weight: 700;
    color: #9CA3AF;
    display: flex;
    align-items: center;
    gap: 6px;
}

.matrix-therm-value {
    font-size: 12px;
    font-weight: 800;
    color: #F59E0B;
}

/* Middle Divider styling */
.matrix-divider {
    height: 1px;
    background-color: var(--border-matrix);
    opacity: 0.25;
    width: 100%;
}


/* Nested Section Matrix Layout */

.energy-profile-card {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Strict spacing between top widgets and the bottom chart */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Top Row Layout wrapper split into 70% and 30% sections */
.energy-profile-top-row {
    display: grid;
    grid-template-columns: 3fr 7fr; /* Perfect 70% / 30% structural split */
    gap: 5px;
    width: 100%;
}

/* Individual generic subsection styling matches your dark theme theme profile */
.profile-sub-section {
    background-color: var(--bg-card);
    border: 1px solid var(--border-main);
    border-radius: 6px;
    padding: 5px 7px;
    box-sizing: border-box;
}

/* Section 1 Specific adjustments (Top Left) */
.sub-sec-top-left {
    display: flex;
    flex-direction: column;
}

/* Section 2 Specific adjustments (Top Right) */
.sub-sec-top-right {
    min-height: 105px; /* Adjust based on your smart meter font heights */
}

.bill-container .meter-box {
    padding: 5px 4px;
    border: 1px solid var(--bg-subnode);
}

.sub-sec-top-full {
    display: flex;
    height: 170px;
    padding: 0;
}

/* Section 3 Layout (100% Bottom Chart Workspace) */
.sub-sec-bottom-full {
    flex: 1; /* Automatically stretches to absorb all remaining vertical card height */
    /*min-height: 200px;  Ensures the Chart.js canvas layout remains readable */
}

.monthly-daily-chart-container {
    display: grid;
    grid-template-columns: 335px 395px;
    gap: 5px;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.monthly-daily-chart-container .container-section {
    display: flex;
    gap: 5px; /* Margin space between your vertical red line area and the data */
    flex-direction: row; /* Aligns header sidebar next to the main data content */
    align-items: stretch; /* Forces sidebar container to match the total height of the chart */
    width: 100%;
}

.monthly-daily-chart-container .card-title-header {
    justify-content: center;
    margin: 0;
    display: flex;
    align-items: center;
}

.monthly-daily-chart-container .main-title {
    font-size: 12px;
    transform: rotate(180deg); /* Flips reading orientation from bottom-to-top */
    writing-mode: vertical-lr;
    margin: 0;
    text-align: center;
    white-space: nowrap;
}

.monthly-daily-chart-container .card-main-content {
    flex: 1; /* Forces the chart canvas matrix to occupy all remaining width */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.monthly-daily-chart-container .container-section:first-child .card-main-content {
    border-right: 1px solid var(--border-main);
    padding-right: 7px;
}

.monthly-daily-chart-container .chart-wrapper {
    max-height: 165px;
}


.load-matrix {
    display: grid;
    /* Defines exactly 3 equal columns spanning across the available footprint width */
    grid-template-columns: repeat(3, 1fr);
    /* Defines exactly 2 explicit row heights; adapts to your text sizing natively */
    grid-template-rows: auto auto;
    gap: 1px; /* Strict uniform margins spacing grid components apart */
    width: 90%;
    box-sizing: border-box;
}

/* Base properties applied universally across all 6 cell nodes */
.matrix-cell {
    display: flex;
    justify-content: center; /* Absolute horizontal center alignment */
    align-items: center; /* Absolute vertical center alignment */
    text-align: center;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
}


/* ====================================================================
   WEATHER DASHBOARD FOOTPRINT MATRIX
   ==================================================================== */
.weather-dashboard-matrix {
    display: grid;
    grid-template-columns: 220px 1fr; /* Exact matching structural blueprint splits */
    padding: 5px;
    gap: 5px;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}


/* ====================================================================
   LEFT PANE: CURRENT WEATHER CONDITIONS PILLAR
   ==================================================================== */
.wx-pillar-current {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid #1f1f23;
    padding-right: 5px;
    box-sizing: border-box;
}

.wx-main-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.wx-condition-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wx-condition-icon img, .wx-condition-icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wx-temp-block {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.wx-temp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    font-size: 10px;
    font-weight: 600;
    color: #797981;
}

.wx-temp-grid div {
    white-space: nowrap;
}

.wx-big-temp {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    color: #ffffff;
    min-width: 55px;
}

.wx-condition-text {
    grid-column: span 2;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 1px;
    color: #9CA3AF;
}

.wx-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #797981;
}

.wx-stats-grid div {
    white-space: nowrap;
}

.wx-cur-wind, .wx-cur-aqi {
    grid-column: span 2;
}

.cur-sun-moon {
    font-size: 8px;
}

/* ====================================================================
   RIGHT PANE: HOURLY (TOP) & DAILY (BOTTOM) FORECAST PANEL STACK
   ==================================================================== */
.wx-pillar-forecasts {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
    height: 100%;
    box-sizing: border-box;
}

/* Row wrapper matching the layout design panels */
.wx-forecast-row-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #1f1f23;;
    padding: 2px;
    box-sizing: border-box;
    height: 50%;
    width: 100%;
    position: relative;
}

.wx-forecast-row-container:last-child {
    border-bottom: none;
}

/* Timeline lane badges (12H / 7D) */
.wx-timeline-tag {
    transform: rotate(-90deg);
    font-size: 8px;
    font-weight: 800;
    color: #0A84FF;
    width: 10px;
    padding: 2px;
    text-align: center;
    vertical-align: center;
    letter-spacing: 1px;
    margin-right: 5px;
    flex-shrink: 0;
    white-space: nowrap; /* Forces AM/PM to stay cleanly pinned on the same horizontal line */
}

.wx-timeline-tag span {
    margin-left: -14px;
}

/* ====================================================================
   SLIDER TRACK CORE ENGINE (Handles horizontal scrolling safely)
   ==================================================================== */
.wx-slider-track {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-x: hidden; /* Drops standard scrolling bars to keep desktop view layout unified */
    overflow-y: hidden;
    height: 100%;
    width: 100%;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    padding: 4px 0;
}

.wx-slider-track::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Edge/Safari */
}

/* ====================================================================
   DYNAMIC DATA WRAPPER CARDS STYLE (Generated via JS)
   ==================================================================== */
.wx-forecast-node {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: center !important;
    border-left: 1px solid #22222a;
    padding: 5px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.wx-slider-track-hours .wx-forecast-node {
    width: 42px;
}

.wx-slider-track-days .wx-forecast-node {
    width: 72px;
}

/* Base style mapping properties universally for your custom classes */
.wx-node-time {
    font-size: 8px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
}

.wx-node-icons {
    display: flex;
    flex-direction: row;
}

.wx-node-icon {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px 0;
}

.wx-node-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wx-node-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 8px;
    line-height: 1.1;
    color: #9CA3AF;
    gap: 1px;
    margin-top: 2px;
    width: 100%;
}

.sun-data {
    flex-direction: row;
    font-size: 6px;
    opacity: 0.6;
    margin-top: 0;
    text-transform: uppercase;
}

.wx-node-hl {
    font-size: 8px;
    font-weight: 700;
    color: #ffffff;
}

.wx-node-pop {
    font-size: 8px;
    font-weight: 600;
    color: #38BDF8; /* Sky Blue for Rain Probabilities */
}

/* Special alignment tweaks for sunrise/sunset metadata blocks */
.wx-node-sun {
    color: #F59E0B !important;
    margin-bottom: 2px;
}

.m0 {
    margin: 0;
}

/* Core indicator alignment structural layout */
.status-tracker-node {
    align-items: center;
    font-variant-numeric: tabular-nums;
}

/* Master indicator tracking element */
.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
    display: inline-block;
    background-color: #4B5563;
}

/* Status States Matched to Conditions */
.status-dot.state-green {
    background-color: #10B981; /* Emerald Green */
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.status-dot.state-yellow {
    background-color: #F59E0B; /* Warning Amber */
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

.status-dot.state-red {
    background-color: #EF4444; /* Alert Red */
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
    animation: criticalPulse 1.8s infinite ease-in-out;
}

/* Optional high-priority alert fade loop for stale modules */
@keyframes criticalPulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 1;
    }
}


.hidden {
    display: none !important;
}