/* /Components/Charts/LineChart.razor.rz.scp.css */
.line-chart[b-srx351o49e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chart-legend[b-srx351o49e] {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--text-muted);
}

.legend-item[b-srx351o49e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-dot[b-srx351o49e] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chart-range-label[b-srx351o49e] {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.chart-row[b-srx351o49e] {
    display: flex;
    align-items: stretch;
}

.chart-y-axis[b-srx351o49e] {
    position: relative;
    width: 54px;
    flex-shrink: 0;
    height: 200px;
}

.axis-label-y[b-srx351o49e] {
    position: absolute;
    left: 0;
    right: 8px;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.chart-hover-area[b-srx351o49e] {
    position: relative;
    width: 100%;
    height: 200px;
    flex: 1;
    min-width: 0;
}

.chart-main[b-srx351o49e] {
    width: 100%;
    height: 100%;
    display: block;
}

.chart-tooltip[b-srx351o49e] {
    position: absolute;
    top: 6px;
    transform: translateX(-50%);
    background: var(--text-strong);
    color: #fff;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

.tooltip-time[b-srx351o49e] {
    font-weight: 600;
    margin-bottom: 3px;
    opacity: 0.8;
}

.tooltip-row[b-srx351o49e] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.chart-x-axis-row[b-srx351o49e] {
    display: flex;
}

.chart-x-axis-spacer[b-srx351o49e] {
    width: 54px;
    flex-shrink: 0;
}

.chart-x-axis[b-srx351o49e] {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 16px;
}

    .chart-x-axis span[b-srx351o49e] {
        position: absolute;
        transform: translateX(-50%);
        font-size: 11px;
        font-weight: 500;
        color: var(--text-muted);
        white-space: nowrap;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }

.brush[b-srx351o49e] {
    position: relative;
    height: 40px;
    margin-top: 4px;
    margin-left: 54px;
}

.brush-svg[b-srx351o49e] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.brush-select[b-srx351o49e] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--accent-soft);
    border-left: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
    pointer-events: none;
}

.brush-range[b-srx351o49e] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}

    .brush-range[b-srx351o49e]::-webkit-slider-runnable-track {
        background: transparent;
        height: 100%;
    }

    .brush-range[b-srx351o49e]::-moz-range-track {
        background: transparent;
        height: 100%;
    }

    .brush-range[b-srx351o49e]::-webkit-slider-thumb {
        -webkit-appearance: none;
        pointer-events: auto;
        width: 10px;
        height: 24px;
        border-radius: 2px;
        background: var(--accent);
        border: 2px solid #fff;
        cursor: ew-resize;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .brush-range[b-srx351o49e]::-moz-range-thumb {
        pointer-events: auto;
        width: 10px;
        height: 24px;
        border-radius: 2px;
        background: var(--accent);
        border: 2px solid #fff;
        cursor: ew-resize;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

/* Kompakte Mini-Variante fuer Dashboard-Widgets */
.line-chart.compact .chart-legend[b-srx351o49e] {
    font-size: 11px;
    gap: 10px;
}

.line-chart.compact .chart-y-axis[b-srx351o49e],
.line-chart.compact .chart-hover-area[b-srx351o49e] {
    height: 90px;
}

.line-chart.compact .chart-y-axis[b-srx351o49e] {
    width: 40px;
}

.line-chart.compact .chart-x-axis-spacer[b-srx351o49e] {
    width: 40px;
}

.line-chart.compact .axis-label-y[b-srx351o49e],
.line-chart.compact .chart-x-axis span[b-srx351o49e] {
    font-size: 9px;
}
/* /Components/Charts/TimeRangePicker.razor.rz.scp.css */
.range-picker[b-xkh30vfdbi] {
    display: flex;
    gap: 8px;
}

.range-btn[b-xkh30vfdbi] {
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-muted);
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .range-btn:hover[b-xkh30vfdbi] {
        color: var(--text-strong);
    }

    .range-btn.active[b-xkh30vfdbi] {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }
/* /Components/CisternTank.razor.rz.scp.css */
.tank-container[b-8dgw4aabl5] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.overflow-pipe[b-8dgw4aabl5] {
    width: 50px;
    height: 30px;
    transform: translateX(5px);
    z-index: 1000;
    top: -50px;
    position: relative;
    background: #e2e8f0;
    border: 4px solid #334155;
    border-right-color: #e2e8f0;
}

.tank[b-8dgw4aabl5] {
    position: relative;
    width: 264px;
    height: 310px;
    overflow: hidden;
    clip-path: polygon(41% 5%, 29% 5%, 29% 15%, 0% 25%, 0% 100%, 100% 100%, 100% 25%, 71% 15%, 71% 5%, 59% 5%);
    background: #334155;
}

.tank-inner[b-8dgw4aabl5] {
    position: absolute;
    inset: 5px;
    overflow: hidden;
    clip-path: polygon(41% 5%, 29% 5%, 29% 15%, 0% 25%, 0% 100%, 100% 100%, 100% 25%, 71% 15%, 71% 5%, 59% 5%);
    background: #e2e8f0;
}

.water[b-8dgw4aabl5] {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background: #38bdf8;
    transition: height 0.6s ease;
}

    .water[b-8dgw4aabl5]::before {
        content: "";
        position: absolute;
        top: -8px;
        left: -10%;
        width: 120%;
        height: 20px;
        border-radius: 50%;
        background: #7dd3fc;
    }

.tank-value[b-8dgw4aabl5] {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 2;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.9);
}

    .tank-value strong[b-8dgw4aabl5] {
        font-size: 42px;
    }

    .tank-value span[b-8dgw4aabl5] {
        font-size: 18px;
    }

@media (max-width: 700px) {
    .tank[b-8dgw4aabl5] {
        width: 180px;
        height: 300px;
    }
}
/* /Components/DoorbellOverlay.razor.rz.scp.css */
.doorbell-overlay[b-324l0n2iex] {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 30, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.doorbell-card[b-324l0n2iex] {
    background: #ffffff;
    border-radius: 12px;
    padding: 22px;
    width: min(90vw, 1400px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.doorbell-header[b-324l0n2iex] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-strong);
}

.doorbell-camera[b-324l0n2iex] {
    width: 100%;
    /*aspect-ratio: 4 / 3;*/
    object-fit: cover;
    border-radius: 8px;
    background: #10131c;
}

.doorbell-status[b-324l0n2iex] {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

.doorbell-actions[b-324l0n2iex] {
    display: flex;
    gap: 10px;
}

.doorbell-actions .btn[b-324l0n2iex] {
    flex: 1;
    padding: 12px;
    font-size: 14px;
}

.btn-reject[b-324l0n2iex] {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-strong);
}

.btn-open[b-324l0n2iex] {
    background: var(--ok);
    color: #fff;
    touch-action: none;
}

.btn-open:active[b-324l0n2iex]
{
    filter: brightness(0.8);
}
/* /Components/DoorOpenerButton.razor.rz.scp.css */
.door-opener-btn[b-ldin3pno82] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--glass-border);
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.door-opener-btn:hover[b-ldin3pno82] {
    background: rgba(47, 111, 237, 0.22);
}

.door-opener-btn:disabled[b-ldin3pno82] {
    opacity: 0.65;
    cursor: default;
}

.door-opener-btn.door-opener-big[b-ldin3pno82] {
    width: 100%;
    justify-content: center;
    padding: 16px;
    font-size: 15px;
    border-radius: 5px;
    background: var(--accent);
    color: #fff;
}

.door-opener-btn.door-opener-big:hover[b-ldin3pno82] {
    background: #2a63d6;
}
/* /Components/Icon.razor.rz.scp.css */
.icon[b-fae7i6fjlb] {
    display: block;
    flex-shrink: 0;
}
/* /Components/WidgetCard.razor.rz.scp.css */
.widget-card[b-yxxy10n79o] {
    background: var(--panel-bg);
    border: 1px solid var(--glass-border);
    border-radius: 5px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    transition: border-color 0.15s ease;


    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

.widget-card:hover[b-yxxy10n79o] {
    border-color: rgba(0, 0, 0, 0.16);
}

.widget-header[b-yxxy10n79o] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.widget-icon[b-yxxy10n79o] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent);
}

.widget-title[b-yxxy10n79o] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-strong);
}

.widget-subtitle[b-yxxy10n79o] {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
}

.widget-body[b-yxxy10n79o] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* /Components/Widgets/ClockWidget.razor.rz.scp.css */
.time[b-c5b7e2u91q] {
    display: flex;
}

.time_HHHmm[b-c5b7e2u91q],
.time_ss[b-c5b7e2u91q]
{
    font-family: "MyClockFont";
    font-weight: bold;
}

.time_HHHmm[b-c5b7e2u91q] {
    font-size: 80px;
    vertical-align: top;
    transform: translateY(0px);
}

.time_HHHmm[b-c5b7e2u91q]::before
{
    content: "88:88";
    position: absolute;
    
    opacity: 10%;
}

.time_ss[b-c5b7e2u91q]
{
    font-size: 40px;
    vertical-align: top;
    transform: translateY(5px);
}

.time_ss[b-c5b7e2u91q]::before
{
    content: "88";
    position: absolute;

    opacity: 10%;
}
/* /Components/Widgets/PVEnergyWidget.razor.rz.scp.css */
.power-gauge[b-fmz1p301ta] {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
}

.gauge-svg[b-fmz1p301ta] {
    width: 100%;
    height: auto;
    display: block;
}

.gauge-value[b-fmz1p301ta] {
    font-size: 23px;
    font-weight: 600;
    fill: currentColor;
}

.gauge-secondary[b-fmz1p301ta] {
    font-size: 13px;
    opacity: 0.55;
    fill: currentColor;
}

.gauge-label[b-fmz1p301ta] {
    font-size: 20px;
    fill: currentColor;
}

.gauge-pv-stroke[b-fmz1p301ta]
{
    stroke: #2fa563 !important;
}

.gauge-pv-fill[b-fmz1p301ta]
{
    fill: #2fa563 !important;
    color: #2fa563 !important;
}

.gauge-pv-bg[b-fmz1p301ta]
{
    background: #2fa563 !important;
}

.gauge-normal-stroke[b-fmz1p301ta]
{
    stroke: #d64545 !important;
}

.gauge-normal-fill[b-fmz1p301ta]
{
    fill: #d64545 !important;
    color: #d64545 !important;
}

.gauge-normal-bg[b-fmz1p301ta]
{
    background: #d64545 !important;
}


.power-values[b-fmz1p301ta] {
    display: flex;
    width: 100%;
    margin-top: 8px;
    border-top: 1px solid rgba(128, 128, 128, 0.15);
    padding-top: 12px;
}

.power-value[b-fmz1p301ta] {
    flex: 1;
    min-width: 0;
}

.power-value + .power-value[b-fmz1p301ta] {
    margin-left: 5px;
    border-left: 1px solid rgba(128, 128, 128, 0.55);
}

.power-value-title[b-fmz1p301ta] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.75;
}

.power-value-number[b-fmz1p301ta] {
    margin-top: 2px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
}

.power-value-dot[b-fmz1p301ta] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.power-value-normal[b-fmz1p301ta] {
    color: var(--gauge-normal-color);
}

.power-value-normal .power-value-dot[b-fmz1p301ta] {
    background: var(--gauge-normal-color);
}

.power-value-pv[b-fmz1p301ta] {
    color: var(--gauge-pv-color);
}

.power-value-pv .power-value-dot[b-fmz1p301ta] {
    background: var(--gauge-pv-color);
}


.power-capacity[b-fmz1p301ta] {
    text-align: center;
    margin-top: 8px;
    font-weight: 600;
}

.power-capacity-label[b-fmz1p301ta] {
    margin-right: 6px;
    opacity: 0.7;
}

.power-capacity-value[b-fmz1p301ta] {
    font-size: 1.1em;
}

.capacity-positive[b-fmz1p301ta] {
    color: #22c55e;
}

.capacity-negative[b-fmz1p301ta] {
    color: #ef4444;
}
/* /Components/Widgets/WeatherWidget.razor.rz.scp.css */
.stat-container[b-52b1iu6zch]
{
    display: flex;
    flex-direction: row;
    gap: 14px;
}

.weather-current[b-52b1iu6zch] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.forecast-row[b-52b1iu6zch] {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.forecast-item[b-52b1iu6zch] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 56px;
    font-size: 12px;
    color: var(--text-muted);
}

.forecast-temp[b-52b1iu6zch] {
    font-weight: 600;
    color: var(--text-strong);
    font-size: 14px;
}

/* /Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-2rr54gzzgt] {
    display: grid;
    /* minmax(0, 1fr) verhindert, dass breite Inhalte (z. B. Widgets mit fester Breite)
       die Spalte aufblähen und die Navigation aus dem Bild schieben */
    grid-template-columns: minmax(0, 1fr) 84px;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
        "topbar topbar"
        "ticker nav"
        "content nav";
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: transparent;
    position: relative;
    z-index: 1;
}

[b-2rr54gzzgt] .topbar {
    grid-area: topbar;
}

[b-2rr54gzzgt] .news-ticker {
    grid-area: ticker;
}

[b-2rr54gzzgt] .side-nav {
    grid-area: nav;
}

.app-content[b-2rr54gzzgt] {
    grid-area: content;
    overflow-y: auto;
    /* wichtig: ohne diese beiden Werte erzwingt der Inhalt ein Mindestmaß
       und drückt Topbar/Navigation aus dem sichtbaren Bereich */
    min-width: 0;
    min-height: 0;
    padding: 20px 24px 32px;
}

/* Mobile: einspaltig, Navigation unten */
@media (max-width: 700px) {
    .app-shell[b-2rr54gzzgt] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "topbar"
            "content"
            "nav";
        height: 100dvh;
    }

    .app-content[b-2rr54gzzgt] {
        padding: 14px 14px 18px;
    }
}
/* /Layout/NewsTicker.razor.rz.scp.css */
.news-ticker[b-wuqttfuvp3]
{
    background: var(--panel-bg);
    border-bottom: 1px solid var(--glass-border);
    font-size: 16px;
    color: var(--text-muted);
    overflow: hidden;
}

.running-line[b-wuqttfuvp3]
{
    white-space: nowrap;
    width: min-content;
    animation: run-b-wuqttfuvp3 60s linear infinite;
}


@keyframes run-b-wuqttfuvp3
{
    from
    {
        transform: translateX(0%);
    }
    to
    {
        transform: translateX(-50%);
    }
}
/* /Layout/SideNav.razor.rz.scp.css */
.side-nav[b-vtovjulgiy] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 16px 10px;
    background: var(--panel-bg);
    border-left: 1px solid var(--glass-border);
    overflow-y: auto;
}

.side-nav[b-vtovjulgiy]  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 4px;
    border-radius: 5px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background 0.15s ease, color 0.15s ease;
}

.side-nav[b-vtovjulgiy]  .nav-item:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-strong);
}

.side-nav[b-vtovjulgiy]  .nav-item.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
}

/* Mobile: Navigation als kompakte Leiste am unteren Rand */
@media (max-width: 700px) {
    .side-nav[b-vtovjulgiy] {
        flex-direction: row;
        align-items: stretch;
        gap: 2px;
        padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
        border-left: none;
        border-top: 1px solid var(--glass-border);
        overflow-x: hidden;
        overflow-y: hidden;
    }

    /* Wrapper der Einstellungen auflösen, damit alle Einträge gleich breit sind */
    .side-nav > div[b-vtovjulgiy] {
        display: contents;
    }

    .side-nav[b-vtovjulgiy]  .nav-item {
        /* flex-basis auto: jeder Eintrag bekommt seine Textbreite, statt
           gleich breit gequetscht und abgeschnitten zu werden */
        flex: 1 1 auto;
        min-width: 0;
        gap: 3px;
        padding: 6px 2px;
        font-size: 10px;
        border-radius: 4px;
    }

    .side-nav[b-vtovjulgiy]  .nav-item .nav-label {
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .side-nav[b-vtovjulgiy]  .nav-item .icon {
        width: 20px;
        height: 20px;
    }
}
/* /Layout/TopBar.razor.rz.scp.css */
.topbar[b-gzg8ii6kum] {
    display: flex;
    flex-direction: row;
    background: var(--panel-bg);

    border: 1px solid var(--text-muted);
}

.topbar-status[b-gzg8ii6kum] {
    display: flex;
    flex-direction: row;

    justify-content: space-around;
    align-items: center;

    font-size: 13px;
    color: var(--text-muted);

    min-width: 84px;
}

.topbar[b-gzg8ii6kum]  .news-ticker
{
    border-right: 1px solid var(--text-muted);
}

.topbar-status .dot[b-gzg8ii6kum] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d64545;
}

.topbar-status.online .dot[b-gzg8ii6kum] {
    background: #2fa563;
}
/* /Pages/Cameras.razor.rz.scp.css */
.detail-grid[b-b9jpjacz3u]
{
    grid-template-columns: auto auto;
}
/* /Pages/Dashboard.razor.rz.scp.css */
.outer-dashboard-grid[b-aakyadgmwy]
{
    display:flex;
    flex-direction: column;
    gap: 10px;
}
/* /Pages/Settings.razor.rz.scp.css */
.powerOffButton[b-4supae3m39] {
    width: 100%;
    justify-content: center;
    padding: 16px;
    font-size: 15px;
    border-radius: 5px;
    background: red;
    color: #fff;
}

    .powerOffButton:hover[b-4supae3m39] {
        background: darkred;
    }
/* /Pages/Wetter.razor.rz.scp.css */
.weather-current[b-o6menzvzd5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.forecast-row[b-o6menzvzd5] {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.forecast-item[b-o6menzvzd5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 64px;
    font-size: 12px;
    color: var(--text-muted);
}

.forecast-temp[b-o6menzvzd5] {
    font-weight: 600;
    color: var(--text-strong);
    font-size: 14px;
}

.weather-source[b-o6menzvzd5] {
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-muted);
}
/* /Pages/Zisterne.razor.rz.scp.css */
.outerContainer[b-06gku4c792]
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
}

.container[b-06gku4c792] {
    margin-top: 18px;
}

.card[b-06gku4c792] {
    background: var(--panel-bg);
    border-radius: 5px;
    padding: 30px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
}

.card h1[b-06gku4c792] {
    margin: 0 0 25px;
    font-size: 32px;
    color: var(--text-strong);
}

.connection[b-06gku4c792] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    font-size: 14px;
    color: #64748b;
}

.connection-dot[b-06gku4c792] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ef4444;
}

    .connection-dot.connected[b-06gku4c792] {
        background: #22c55e;
    }

.dashboard[b-06gku4c792] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.info[b-06gku4c792] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.value-card[b-06gku4c792] {
    padding: 20px;
    border-radius: 14px;
    background: #f8fafc;
}

.label[b-06gku4c792] {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 14px;
}

.value[b-06gku4c792] {
    font-size: 30px;
    font-weight: bold;
    color: var(--text-strong);
}

.pump-row[b-06gku4c792] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pump-status[b-06gku4c792] {
    font-weight: bold;
}

    .pump-status.on[b-06gku4c792] {
        color: #16a34a;
    }

    .pump-status.off[b-06gku4c792] {
        color: #64748b;
    }

.switch[b-06gku4c792] {
    position: relative;
    width: 64px;
    height: 34px;
}

    .switch input[b-06gku4c792] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider[b-06gku4c792] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #cbd5e1;
    border-radius: 34px;
    transition: background 0.2s;
}

    .slider[b-06gku4c792]::before {
        content: "";
        position: absolute;
        width: 26px;
        height: 26px;
        left: 4px;
        top: 4px;
        background: white;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s ease;
    }

.switch input:checked + .slider[b-06gku4c792] {
    background: #22c55e;
}

.switch input:checked + .slider[b-06gku4c792]::before {
    transform: translateX(30px);
}

.switch.pending .slider[b-06gku4c792] {
    background: #f59e0b;
    cursor: wait;
}

.footer[b-06gku4c792] {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 13px;
}

@media (max-width: 700px) {
    .dashboard[b-06gku4c792] {
        grid-template-columns: 1fr;
    }
}