html, body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100%;
}

a, .btn-link {
    color: #177245;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.eyebrow {
    color: #177245;
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-card,
.info-panel,
.settings-card,
.page-header,
.control-card,
.metric-card,
.automation-card {
    border: 1px solid rgba(17, 53, 31, 0.1);
    border-radius: 1.6rem;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 1.4rem 3.5rem rgba(13, 36, 24, 0.09);
}

.hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
    padding: clamp(1.25rem, 4vw, 2.25rem);
    position: relative;
}

.hero-card::after {
    background: radial-gradient(circle, rgba(34, 197, 94, 0.2), transparent 70%);
    content: "";
    height: 18rem;
    position: absolute;
    right: -7rem;
    top: -8rem;
    width: 18rem;
}

.hero-card h2,
.page-header h2 {
    font-size: clamp(1.7rem, 5vw, 3rem);
    font-weight: 850;
    margin: 0.2rem 0 0.65rem;
}

.hero-card p,
.page-header p,
.info-panel p,
.control-card p,
.automation-card p {
    color: #587062;
    margin: 0;
}

.hero-weather {
    display: grid;
    gap: 0.2rem;
    min-width: 8rem;
    place-items: center;
    z-index: 1;
}

.hero-weather span {
    font-size: 3.5rem;
}

.hero-weather strong {
    font-size: 2rem;
}

.hero-weather small {
    color: #587062;
}

.app-grid,
.dashboard-grid,
.control-grid,
.metric-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    margin-bottom: 1.25rem;
}

.app-card {
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 2rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 11rem;
    overflow: hidden;
    padding: 1rem;
    position: relative;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.app-card::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.32), transparent 70%);
    content: "";
    height: 8rem;
    position: absolute;
    right: -2rem;
    top: -2rem;
    width: 8rem;
}

.app-card:hover {
    color: #fff;
    box-shadow: 0 1.5rem 3rem rgba(13, 36, 24, 0.18);
    transform: translateY(-0.25rem);
}

.app-card strong,
.app-card small,
.app-icon {
    position: relative;
}

.app-card small {
    color: rgba(255, 255, 255, 0.78);
}

.app-icon {
    font-size: 2.5rem;
    margin-bottom: auto;
}

.app-card.water {
    background: linear-gradient(135deg, #0ea5e9, #0369a1);
}

.app-card.solar {
    background: linear-gradient(135deg, #facc15, #ea580c);
}

.app-card.well {
    background: linear-gradient(135deg, #38bdf8, #2563eb);
}

.app-card.billiard {
    background: linear-gradient(135deg, #111827, #16a34a);
}

.app-card.esp32 {
    background: linear-gradient(135deg, #7c3aed, #0f172a);
}

.app-card.sensor {
    background: linear-gradient(135deg, #f97316, #c2410c);
}

.app-card.automation {
    background: linear-gradient(135deg, #22c55e, #15803d);
}

.app-card.settings {
    background: linear-gradient(135deg, #64748b, #334155);
}

.info-panel,
.page-header,
.settings-card {
    padding: 1.25rem;
}

.full-width {
    grid-column: 1 / -1;
}

.control-card,
.automation-card {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
}

.control-card.active,
.automation-card.enabled {
    border-color: rgba(34, 197, 94, 0.34);
}

.control-icon {
    font-size: 2rem;
}

.garden-button {
    border: 0;
    border-radius: 999px;
    background: #177245;
    color: #fff;
    font-weight: 800;
    padding: 0.75rem 1.1rem;
}

.garden-button.danger {
    background: #dc2626;
}

.garden-button.secondary {
    background: #334155;
}

.metric-card {
    display: grid;
    gap: 0.35rem;
    padding: 1.25rem;
}

.metric-card span {
    font-size: 2rem;
}

.metric-card small {
    color: #587062;
}

.metric-card strong {
    font-size: 1.75rem;
}

.automation-list {
    display: grid;
    gap: 1rem;
}

.automation-card {
    align-items: center;
    grid-template-columns: 1fr auto;
}

.toggle-pill {
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.16);
    color: #15803d;
    font-weight: 800;
    padding: 0.5rem 0.8rem;
}

.toggle-pill.off {
    background: rgba(100, 116, 139, 0.16);
    color: #475569;
}

.form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.form-grid label {
    color: #31463a;
    display: grid;
    font-weight: 800;
    gap: 0.45rem;
}

.settings-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.settings-actions span {
    color: #587062;
}

.connection-preview {
    border-radius: 1rem;
    background: #102116;
    color: #d1fae5;
    margin-top: 1rem;
    overflow-x: auto;
    padding: 1rem;
}

.connection-preview .eyebrow {
    color: #86efac;
}

.connection-preview code {
    color: inherit;
    display: block;
    margin-top: 0.35rem;
    white-space: nowrap;
}

.connection-status {
    align-items: center;
    border-radius: 1rem;
    display: flex;
    gap: 0.65rem;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
}

.connection-status.connected {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
}

.connection-status.disconnected {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
}

.connection-status.disconnected .status-dot {
    background: #ef4444;
    box-shadow: 0 0 0 0.25rem rgba(239, 68, 68, 0.18);
}

.sql-script-card {
    margin-top: 1.25rem;
}

.sql-script-card h3 {
    font-size: 1.45rem;
    font-weight: 850;
    margin: 0.2rem 0 0.4rem;
}

.sql-script-card p {
    color: #587062;
}

.sql-script-card pre {
    border-radius: 1rem;
    background: #102116;
    color: #d1fae5;
    overflow-x: auto;
    padding: 1rem;
}

.sql-script-card code {
    color: inherit;
}

.solar-header,
.well-header {
    align-items: center;
    display: flex;
    gap: 1.25rem;
    justify-content: space-between;
    overflow: hidden;
}

.scene-card {
    border-radius: 2rem;
    display: grid;
    min-height: 10rem;
    min-width: 13rem;
    overflow: hidden;
    place-items: center;
    position: relative;
}

.solar-scene {
    background: linear-gradient(135deg, #fde68a, #fb923c);
}

.sun-visual {
    font-size: 4rem;
    position: absolute;
    right: 1rem;
    top: 0.7rem;
}

.panel-visual {
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 0.35rem, transparent 0.35rem 1.4rem), linear-gradient(135deg, #0f172a, #334155);
    border: 0.35rem solid rgba(255, 255, 255, 0.5);
    border-radius: 1rem;
    bottom: 1.3rem;
    height: 4.5rem;
    position: absolute;
    transform: perspective(12rem) rotateX(18deg) rotateZ(-8deg);
    width: 8rem;
}

.well-scene {
    background: linear-gradient(135deg, #bae6fd, #2563eb);
}

.well-visual,
.water-drop-visual {
    font-size: 4rem;
    position: absolute;
}

.well-visual {
    bottom: 1rem;
    left: 1.25rem;
}

.water-drop-visual {
    right: 1rem;
    top: 1rem;
}

.solar-metrics .highlight-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 251, 235, 0.86));
}

.solar-detail-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    margin-bottom: 1.25rem;
}

.solar-detail-grid h3,
.power-flow-card h3 {
    font-size: 1.45rem;
    font-weight: 850;
    margin: 0.2rem 0 0.8rem;
}

.cell-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
}

.cell-card {
    border: 1px solid rgba(250, 204, 21, 0.35);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(254, 249, 195, 0.9), rgba(255, 255, 255, 0.86));
    display: grid;
    gap: 0.25rem;
    padding: 0.8rem;
}

.cell-card small,
.power-flow-row span {
    color: #587062;
    font-weight: 800;
}

.cell-card strong {
    color: #92400e;
    font-size: 1.1rem;
}

.power-flow-card {
    display: grid;
    align-content: start;
    gap: 0.8rem;
}

.power-flow-row {
    align-items: center;
    border-radius: 1rem;
    background: rgba(248, 113, 113, 0.12);
    display: flex;
    justify-content: space-between;
    padding: 0.9rem;
}

.power-flow-row.positive {
    background: rgba(34, 197, 94, 0.14);
}

.power-flow-row strong {
    font-size: 1.35rem;
}

.battery-shell {
    border: 2px solid rgba(17, 53, 31, 0.25);
    border-radius: 999px;
    height: 0.8rem;
    overflow: hidden;
}

.battery-fill {
    background: linear-gradient(90deg, #22c55e, #84cc16);
    height: 100%;
}

.chart-card,
.tank-card,
.pump-card {
    border: 1px solid rgba(17, 53, 31, 0.1);
    border-radius: 1.6rem;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 1.4rem 3.5rem rgba(13, 36, 24, 0.09);
    padding: 1.25rem;
}

.line-plot {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.08), rgba(14, 165, 233, 0.06));
    border-radius: 1rem;
    height: 15rem;
    width: 100%;
}

.line-plot polyline {
    fill: none;
    stroke: #f97316;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
}

.line-plot.multi .well-line {
    stroke: #2563eb;
}

.line-plot.multi .tank-line {
    stroke: #22c55e;
}

.plot-labels,
.plot-legend {
    color: #587062;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: space-between;
    margin-top: 0.75rem;
}

.plot-legend {
    justify-content: flex-start;
}

.legend-dot {
    border-radius: 50%;
    display: inline-block;
    height: 0.7rem;
    margin-right: 0.35rem;
    width: 0.7rem;
}

.legend-dot.well {
    background: #2563eb;
}

.legend-dot.tank {
    background: #22c55e;
}

.well-overview-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin-bottom: 1.25rem;
}

.tank-card h3,
.pump-card h3 {
    font-size: 2.2rem;
    font-weight: 850;
    margin: 0.2rem 0 0.8rem;
}

.tank-card p,
.pump-card p {
    color: #587062;
    margin: 0.8rem 0 0;
}

.tank-visual,
.well-meter {
    align-items: end;
    background: rgba(14, 165, 233, 0.1);
    border: 0.25rem solid rgba(14, 165, 233, 0.22);
    border-radius: 1.25rem;
    display: flex;
    height: 11rem;
    overflow: hidden;
}

.tank-water,
.well-meter-fill {
    background: linear-gradient(180deg, #67e8f9, #0284c7);
    width: 100%;
}

.well-meter-fill {
    background: linear-gradient(180deg, #93c5fd, #2563eb);
}

.pump-card.running {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.16), rgba(255, 255, 255, 0.82));
}

.pump-card.idle {
    background: linear-gradient(180deg, rgba(100, 116, 139, 0.12), rgba(255, 255, 255, 0.82));
}

.pump-card.running .pump-visual {
    filter: drop-shadow(0 0 1rem rgba(34, 197, 94, 0.35));
}

.settings-card .form-check-input {
    justify-self: start;
    min-height: 1.25rem;
    min-width: 1.25rem;
}

.pump-visual {
    display: grid;
    font-size: 4rem;
    min-height: 6rem;
    place-items: center;
}

.billiard-header {
    align-items: center;
    display: flex;
    gap: 1.25rem;
    justify-content: space-between;
    overflow: hidden;
}

.billiard-scene {
    background: linear-gradient(135deg, #14532d, #052e16);
}

.billiard-table-visual {
    background: #15803d;
    border: 0.6rem solid #7c2d12;
    border-radius: 1.4rem;
    box-shadow: inset 0 0 0 0.18rem rgba(255, 255, 255, 0.16);
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(2, 1fr);
    padding: 1.4rem;
    transform: perspective(16rem) rotateX(18deg);
    width: 10rem;
}

.billiard-table-visual span {
    background: radial-gradient(circle at 35% 35%, #fff, #111827 34%, #020617 72%);
    border-radius: 50%;
    height: 1.4rem;
    width: 1.4rem;
}

.billiard-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    margin-bottom: 1.25rem;
}

.no-top-margin {
    margin-top: 0;
}

.queue-list,
.match-list {
    display: grid;
    gap: 0.75rem;
}

.queue-entry,
.match-card {
    align-items: center;
    background: rgba(238, 245, 239, 0.78);
    border-radius: 1.2rem;
    display: flex;
    gap: 0.8rem;
    justify-content: space-between;
    padding: 0.8rem;
}

.queue-position {
    background: #177245;
    border-radius: 999px;
    color: #fff;
    display: grid;
    font-weight: 850;
    height: 2rem;
    place-items: center;
    width: 2rem;
}

.garden-button.compact {
    padding: 0.45rem 0.75rem;
}

.championship-card {
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.14), rgba(255, 255, 255, 0.82));
}

.championship-card p,
.match-card h4 {
    color: #587062;
}

.match-card {
    align-items: flex-start;
    flex-direction: column;
}

.match-card h4 {
    font-size: 1.15rem;
    font-weight: 850;
    margin: 0;
}

.esp32-header {
    align-items: center;
    display: flex;
    gap: 1.25rem;
    justify-content: space-between;
    overflow: hidden;
}

.esp32-scene {
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.28), transparent 45%), linear-gradient(135deg, #7c3aed, #0f172a);
}

.esp32-chip-visual {
    border: 0.35rem solid rgba(255, 255, 255, 0.65);
    border-radius: 1.2rem;
    background: #111827;
    color: #86efac;
    font-weight: 900;
    letter-spacing: 0.12em;
    padding: 2rem 1.4rem;
    position: relative;
}

.esp32-chip-visual::before,
.esp32-chip-visual::after {
    color: rgba(255, 255, 255, 0.8);
    content: "||||||||";
    font-size: 0.75rem;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}

.esp32-chip-visual::before {
    top: -1rem;
}

.esp32-chip-visual::after {
    bottom: -1rem;
}

.command-card h3 {
    font-size: 1.45rem;
    font-weight: 850;
    margin: 0.2rem 0 0.8rem;
}

.device-preset-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    margin-bottom: 1rem;
}

.device-preset {
    border: 1px solid rgba(17, 53, 31, 0.1);
    border-radius: 1.15rem;
    background: rgba(238, 245, 239, 0.78);
    color: #102116;
    display: grid;
    gap: 0.15rem;
    padding: 0.85rem;
    text-align: left;
}

.device-preset span {
    font-size: 1.6rem;
}

.device-preset small {
    color: #587062;
}

.quick-actions {
    display: grid;
    align-content: start;
    gap: 0.75rem;
}

.login-card,
.user-management-card {
    margin-top: 1.25rem;
}

.section-title-row {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.section-title-row h3 {
    font-size: 1.45rem;
    font-weight: 850;
    margin: 0.2rem 0 0.4rem;
}

.section-title-row p,
.settings-message {
    color: #587062;
    margin: 0;
}

.current-user-chip,
.profile-badge,
.admin-note {
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.45rem 0.7rem;
    white-space: nowrap;
}

.current-user-chip,
.profile-badge {
    background: rgba(34, 197, 94, 0.16);
    color: #15803d;
}

.admin-note {
    background: rgba(14, 165, 233, 0.14);
    color: #0369a1;
}

.current-user-panel {
    border-radius: 1.25rem;
    background: rgba(34, 197, 94, 0.08);
    display: grid;
    gap: 0.45rem;
    margin-top: 1rem;
    padding: 1rem;
}

.user-table-wrap {
    overflow-x: auto;
}

.user-table {
    border-collapse: separate;
    border-spacing: 0 0.55rem;
    min-width: 48rem;
    width: 100%;
}

.user-table th {
    color: #587062;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    padding: 0 0.75rem;
    text-align: left;
    text-transform: uppercase;
}

.user-table td {
    background: rgba(238, 245, 239, 0.78);
    padding: 0.85rem 0.75rem;
}

.user-table td:first-child {
    border-radius: 1rem 0 0 1rem;
    font-weight: 800;
}

.user-table td:last-child {
    border-radius: 0 1rem 1rem 0;
}

.profile-select {
    border: 1px solid rgba(17, 53, 31, 0.16);
    border-radius: 999px;
    background: #fff;
    color: #102116;
    font-weight: 800;
    padding: 0.45rem 0.7rem;
}

@media (max-width: 560px) {
    .hero-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-card {
        border-radius: 1.5rem;
        min-height: 9.75rem;
    }

    .automation-card {
        grid-template-columns: 1fr;
    }

    .section-title-row {
        flex-direction: column;
    }

    .solar-header,
    .well-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .scene-card {
        min-width: 100%;
    }

    .billiard-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .queue-entry {
        align-items: flex-start;
        flex-direction: column;
    }

    .esp32-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .solar-detail-grid {
        grid-template-columns: 1fr;
    }
}

.music-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.music-now-playing {
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(17, 53, 31, 0.1);
    border-radius: 1.25rem;
    display: grid;
    gap: 0.15rem;
    min-width: 12rem;
    padding: 1rem;
    text-align: center;
}

.music-now-playing span {
    font-size: 2rem;
}

.music-now-playing small {
    color: #587062;
}

.music-dashboard,
.music-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
    margin-bottom: 1.25rem;
}

.music-player-card {
    border: 1px solid rgba(17, 53, 31, 0.1);
    border-radius: 1.8rem;
    background: linear-gradient(135deg, #111827, #7c3aed);
    box-shadow: 0 1.4rem 3.5rem rgba(13, 36, 24, 0.15);
    color: #fff;
    display: grid;
    gap: 1.1rem;
    padding: 1.25rem;
}

.album-art {
    align-items: center;
    aspect-ratio: 1 / 0.55;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.28), transparent 42%), linear-gradient(135deg, #22c55e, #0f172a);
    border-radius: 1.4rem;
    display: flex;
    justify-content: center;
}

.album-art span {
    font-size: 4rem;
}

.music-track-info h3 {
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    margin: 0.2rem 0;
}

.music-track-info p {
    color: rgba(255, 255, 255, 0.76);
    margin: 0;
}

.music-progress {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto 1fr auto;
}

.music-progress div {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    height: 0.55rem;
    overflow: hidden;
}

.music-progress i {
    background: #fff;
    display: block;
    height: 100%;
}

.music-controls {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
}

.music-controls button {
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 1.35rem;
    height: 3rem;
    width: 3rem;
}

.music-controls button.play {
    background: #fff;
    color: #111827;
    height: 3.6rem;
    width: 3.6rem;
}

.music-provider-grid,
.speaker-list,
.playlist-grid {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.music-provider,
.speaker-card,
.playlist-grid button {
    border: 1px solid rgba(17, 53, 31, 0.12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.86);
    color: #102116;
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    text-align: left;
}

.music-provider {
    grid-template-columns: auto 1fr;
}

.music-provider span,
.speaker-card span,
.playlist-grid span {
    font-size: 1.5rem;
}

.music-provider small,
.speaker-card small,
.playlist-grid small {
    color: #587062;
}

.music-provider.selected,
.speaker-card.selected {
    border-color: rgba(124, 58, 237, 0.35);
    background: rgba(245, 243, 255, 0.94);
}

.speaker-card {
    align-items: center;
    grid-template-columns: auto 1fr;
}

.playlist-grid {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.music-integration-card {
    margin-bottom: 1.25rem;
}

@media (max-width: 860px) {
    .music-dashboard,
    .music-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .music-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNPMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI6Oi02Niw1YSxyOiIyNSswLDM0YjowO2JvnJvbGUtbm90ZS4iIHhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIyOS4zNSA3MUwyMjQuMDQ5IDc0TDIyMC4zNiA3Mi4yMTsNCjxyZWN0IHg9IjIwIiB5PSI5OCIgd2lkdGg9IjU2MHB4IiBoZWlnaHQ9IjUwMHB4IiBjbGFzcz0ic3ZnLWZpbGwtem9vbSIgLz48L2c+PC9zdmc+);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.power-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.power-status-pill {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-weight: 850;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}

.power-status-pill.auto {
    background: rgba(14, 165, 233, 0.12);
    color: #075985;
}

.power-status-pill.running {
    background: rgba(34, 197, 94, 0.14);
    color: #166534;
}

.power-status-pill.idle {
    background: rgba(100, 116, 139, 0.14);
    color: #334155;
}

.power-status-pill.error {
    background: rgba(220, 38, 38, 0.12);
    color: #991b1b;
}

.power-metric-grid,
.power-settings-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin-bottom: 1.25rem;
}

.power-metric p {
    color: #587062;
    margin: 0;
}

.power-progress {
    background: rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    height: 0.7rem;
    overflow: hidden;
}

.power-progress i {
    background: linear-gradient(90deg, #22c55e, #84cc16);
    display: block;
    height: 100%;
}

.power-dashboard {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 0.8fr);
    margin-bottom: 1.25rem;
}

.power-plant-card {
    border: 1px solid rgba(17, 53, 31, 0.1);
    border-radius: 1.6rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 253, 244, 0.78));
    box-shadow: 0 1.4rem 3.5rem rgba(13, 36, 24, 0.09);
    padding: 1.25rem;
}

.power-diagram {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr auto 1.35fr auto 1fr;
    grid-template-rows: auto minmax(2.25rem, auto) auto;
    margin-top: 1rem;
}

.power-node {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 0.35rem;
    min-height: 8.5rem;
    padding: 1rem;
    position: relative;
}

.power-node-icon {
    font-size: 2.4rem;
}

.power-node small,
.power-flow span,
.generator-summary span,
.esp32-roadmap span {
    color: #587062;
}

.solar-node {
    grid-column: 1;
    grid-row: 1;
}

.battery-node {
    grid-column: 3;
    grid-row: 1;
}

.load-node {
    grid-column: 5;
    grid-row: 1;
}

.esp32-node {
    grid-column: 3;
    grid-row: 3;
}

.generator-node {
    grid-column: 1;
    grid-row: 3;
}

.generator-node.running {
    border-color: rgba(34, 197, 94, 0.34);
    background: rgba(240, 253, 244, 0.9);
}

.generator-node.error {
    border-color: rgba(220, 38, 38, 0.34);
    background: rgba(254, 242, 242, 0.9);
}

.power-flow {
    align-items: center;
    display: flex;
    font-size: 0.75rem;
    font-weight: 850;
    justify-content: center;
    letter-spacing: 0.08em;
    position: relative;
    text-transform: uppercase;
}

.power-flow::before {
    background: linear-gradient(90deg, #22c55e, #0ea5e9);
    border-radius: 999px;
    content: "";
    height: 0.35rem;
    left: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.power-flow span {
    background: #fff;
    border-radius: 999px;
    padding: 0.2rem 0.5rem;
    position: relative;
}

.solar-flow {
    grid-column: 2;
    grid-row: 1;
}

.load-flow {
    grid-column: 4;
    grid-row: 1;
}

.generator-flow {
    grid-column: 2;
    grid-row: 3;
}

.esp-flow {
    grid-column: 3;
    grid-row: 2;
    min-height: 2.25rem;
}

.esp-flow::before {
    height: 100%;
    left: 50%;
    right: auto;
    top: 0;
    transform: translateX(-50%);
    width: 0.35rem;
}

.battery-pack {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 0.5rem;
}

.battery-cell {
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 0.8rem;
    background: rgba(240, 253, 244, 0.9);
    display: grid;
    gap: 0.1rem;
    padding: 0.45rem;
}

.battery-cell span {
    color: #587062;
    font-size: 0.72rem;
    font-weight: 850;
}

.battery-cell strong {
    font-size: 0.9rem;
}

.battery-cell.warning {
    border-color: rgba(220, 38, 38, 0.35);
    background: rgba(254, 242, 242, 0.9);
}

.generator-control-card {
    align-self: start;
}

.generator-mode-grid {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0;
}

.generator-mode {
    border: 1px solid rgba(17, 53, 31, 0.12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.86);
    display: grid;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    text-align: left;
}

.generator-mode.selected {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(240, 253, 244, 0.95);
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.16);
}

.generator-summary {
    align-items: center;
    border-top: 1px solid rgba(17, 53, 31, 0.08);
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
}

.power-form-grid {
    margin-top: 1rem;
}

.esp32-roadmap {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.esp32-roadmap div {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto 1fr;
}

.esp32-roadmap strong {
    background: #177245;
    border-radius: 999px;
    color: #fff;
    display: grid;
    height: 2rem;
    place-items: center;
    width: 2rem;
}

.bms-detail-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    margin-top: 1rem;
}

.bms-detail-grid div {
    border: 1px solid rgba(17, 53, 31, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem;
}

.bms-detail-grid span {
    color: #587062;
    font-size: 0.78rem;
    font-weight: 800;
}

.bms-detail-grid strong {
    color: #102116;
    font-size: 1.05rem;
}

.water-plot-card {
    border: 1px solid rgba(17, 53, 31, 0.1);
    border-radius: 1.6rem;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 1.4rem 3.5rem rgba(13, 36, 24, 0.09);
    margin-bottom: 1.25rem;
    padding: 1.25rem;
}

.water-history-plot {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.95), rgba(255, 255, 255, 0.82));
    border: 1px solid rgba(17, 53, 31, 0.08);
    border-radius: 1.2rem;
    height: 18rem;
    overflow: visible;
    padding: 0.5rem;
    width: 100%;
}

.plot-line.well-level {
    stroke: #0ea5e9;
}

.plot-line.tank-level {
    stroke: #2563eb;
}

.legend-dot.well-level {
    background: #0ea5e9;
}

.legend-dot.tank-level {
    background: #2563eb;
}

.water-plot-legend {
    margin-top: 0.9rem;
}

@media (max-width: 860px) {
    .power-dashboard {
        grid-template-columns: 1fr;
    }

    .power-diagram {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .solar-node,
    .battery-node,
    .load-node,
    .esp32-node,
    .generator-node,
    .solar-flow,
    .load-flow,
    .generator-flow,
    .esp-flow {
        grid-column: auto;
        grid-row: auto;
    }

    .power-flow {
        min-height: 1.5rem;
    }

    .power-flow::before,
    .esp-flow::before {
        height: 0.35rem;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
    }
}

@media (max-width: 560px) {
    .power-header,
    .power-plot-card .section-title-row,
    .power-plant-card .section-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .power-metric-grid,
    .power-settings-grid {
        grid-template-columns: 1fr;
    }

    .power-plant-card,
    .power-plot-card,
    .settings-card {
        padding: 1rem;
    }

    .power-node {
        min-height: auto;
    }

    .battery-pack {
        grid-template-columns: repeat(2, 1fr);
    }
}