/*
 * CowBarn styles. Tokens from docs/FRONTEND.md (sampled from the v1.1 screenshots).
 * Matches docs/reference/ui/p03-dashboard.jpg, p21-dark-mode.jpg, and p21-phone.jpg.
 */
:root {
    --sidebar-bg: #0f241a;
    --sidebar-text: #9eb3a8;
    --sidebar-text-bright: #ffffff;
    --sidebar-active: #21543d;
    --sidebar-active-accent: #4ade80;
    --sidebar-border: rgba(255, 255, 255, 0.08);

    --primary: #1d6b4f;
    --primary-hover: #16563f;
    --primary-light: #e6f4ee;
    --primary-text: #ffffff;
    --series-b: #d39a4f;

    --page-bg: #f3f5f4;
    --card-bg: #ffffff;
    --card-border: #e2e8e4;
    --text: #11241a;
    --muted: #64756b;
    --border: #e2e8e4;
    --grid: rgba(17, 36, 26, 0.07);

    --ok: #22c55e;
    --ok-bg: #eafaf1;
    --ok-border: #a7f3d0;
    --warn: #eab308;
    --warn-bg: #fefce8;
    --warn-border: #fde047;
    --alert: #ef4444;
    --alert-bg: #fef2f2;
    --alert-border: #fca5a5;
    --grey: #94a3b8;
    --grey-bg: #f1f4f2;
    --grey-border: #e2e8e4;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius: 16px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(17, 36, 26, 0.04);
    --shadow: 0 1px 3px rgba(17, 36, 26, 0.05), 0 4px 16px rgba(17, 36, 26, 0.03);
    --shadow-hover: 0 4px 12px rgba(17, 36, 26, 0.08);
    color-scheme: light;
}

:root[data-theme="dark"],
html[data-theme="dark"] {
    --sidebar-bg: #091710;
    --sidebar-text: #7b9487;
    --sidebar-text-bright: #e6f2eb;
    --sidebar-active: #173d2b;
    --sidebar-active-accent: #34d399;
    --sidebar-border: rgba(255, 255, 255, 0.05);

    --primary: #2fa572;
    --primary-hover: #3bbd83;
    --primary-light: #133324;
    --primary-text: #ffffff;
    --series-b: #e2a855;

    --page-bg: #0b1712;
    --card-bg: #12221a;
    --card-border: #1d362a;
    --text: #e6f0eb;
    --muted: #84998e;
    --border: #1d362a;
    --grid: rgba(230, 240, 235, 0.07);

    --ok: #34d399;
    --ok-bg: #0f301e;
    --ok-border: #1b5435;
    --warn: #fbbf24;
    --warn-bg: #302409;
    --warn-border: #523e10;
    --alert: #f87171;
    --alert-bg: #331413;
    --alert-border: #592321;
    --grey: #64748b;
    --grey-bg: #182a21;
    --grey-border: #233a2e;

    --shadow-sm: none;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    /* clip, not hidden: hidden makes body a scroll box and the sticky sidebar stops sticking. */
    overflow-x: clip;
}
body {
    background: var(--page-bg);
    color: var(--text);
    font: 14.5px/1.45 Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
small { color: var(--muted); }

/* ---------- shell layout ---------- */
.shell {
    display: flex;
    min-height: 100vh;
    background: var(--page-bg);
    position: relative;
    width: 100%;
    max-width: 100vw;
}

.nav-toggle { display: none; }
.nav-backdrop { display: none; }

.sidebar {
    width: 252px;
    flex-shrink: 0;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    min-height: 100vh;
    box-sizing: border-box;
}

.sidebar-inner {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
    box-sizing: border-box;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 6px 16px;
    border-bottom: 1px solid var(--sidebar-border);
}
.brand-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.brand-logo svg {
    width: 100%;
    height: 100%;
    display: block;
}
.brand-text strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sidebar-text-bright);
    line-height: 1.2;
}
.brand-text small {
    display: block;
    color: var(--sidebar-text);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 2px;
}

.sidebar-nav {
    flex: 1;
    margin-top: 14px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-border) transparent;
}
.nav-section {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--sidebar-text);
    opacity: 0.6;
    margin: 18px 10px 8px;
}
.sidebar-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.sidebar-nav a,
.sidebar-nav .disabled {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: all 0.15s ease;
}
.nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.sidebar-nav a:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--sidebar-text-bright);
}
.sidebar-nav a.active {
    background: var(--sidebar-active);
    color: #ffffff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--sidebar-active-accent);
}
.sidebar-nav .disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.sidebar-footer {
    padding-top: 14px;
    border-top: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.data-source-block {
    font-size: 0.75rem;
    padding: 2px 4px;
}
.data-source {
    margin: 0;
    color: var(--sidebar-text);
    line-height: 1.35;
}
.data-source[data-simulated="1"] {
    color: var(--series-b);
    font-weight: 600;
}
.data-source[data-simulated="1"]::before {
    content: "• ";
    font-size: 1.1em;
    color: var(--series-b);
}
.logout-form { margin: 0; }
.logout-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    border: 0;
    background: none;
    color: var(--sidebar-text);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    transition: all 0.15s ease;
}
.logout-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* ---------- main & topbar ---------- */
.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    max-width: 100%;
}
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    gap: 16px;
}
.hamburger { display: none; }
.titles { flex: 1; min-width: 0; }
.site-breadcrumb {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}
.page-title {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.locale-toggle {
    padding: 2px;
    border-radius: 9px;
    background: var(--grey-bg);
    border: 1px solid var(--border);
    display: inline-flex;
}
.locale-toggle button {
    min-height: 40px;
    min-width: 40px;
    padding: 0 10px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 7px;
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.locale-toggle button:hover {
    color: var(--text);
}
.locale-toggle button.active {
    background: var(--card-bg);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.locale-toggle button.is-saving {
    opacity: 0.5;
    cursor: wait;
}

.topbar-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    position: relative;
    padding: 0;
}
.topbar-btn:hover {
    color: var(--text);
    border-color: var(--primary);
    background: var(--grey-bg);
}

/* Theme toggle icons */
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Bell badge */
.bell-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--card-bg);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bell-badge[hidden] {
    display: none !important;
}
.bell-badge.badge-alert {
    background: var(--alert);
    color: #ffffff;
}
.bell-badge.badge-warning {
    background: var(--warn);
    color: #11241a;
}

.user-block {
    display: flex;
    align-items: center;
    gap: 12px;
}
.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    border: 1px solid var(--ok-border);
    flex-shrink: 0;
}
.user-details {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: right;
}
.user-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
}
.user-role {
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 500;
}

.content {
    flex: 1;
    padding: 0 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 28px 20px;
    color: var(--muted);
    font-size: 0.8rem;
    border-top: 1px solid var(--border);
}
[data-connection][data-state="error"] {
    color: var(--alert);
    font-weight: 600;
}

/* ---------- card & components ---------- */
.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    border: 1px solid var(--card-border);
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.card-subtitle {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--muted);
    display: block;
    margin-bottom: 2px;
}
.chip {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--grey-bg);
    color: var(--muted);
    border: 1px solid var(--border);
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--grey);
    flex-shrink: 0;
}
.status-dot.status-normal { background: var(--ok); }
.status-dot.status-warning { background: var(--warn); }
.status-dot.status-alert { background: var(--alert); }
.status-dot.status-stale,
.status-dot.status-invalid,
.status-dot.status-none { background: var(--grey); }

.segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    background: var(--grey-bg);
    padding: 3px;
    border-radius: 10px;
    border: 1px solid var(--border);
}
.segmented button {
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 500;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.segmented button:hover { color: var(--text); }
.segmented button.active {
    background: var(--card-bg);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.button {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--card-bg);
    color: var(--text);
    transition: all 0.15s ease;
}
.button.primary {
    background: var(--primary);
    color: var(--primary-text);
    border-color: var(--primary);
}
.button.primary:hover {
    background: var(--primary-hover);
}

/* ---------- KPI Row (9 tiles) ---------- */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
}
@media (min-width: 1200px) {
    .kpi-row {
        grid-template-columns: repeat(9, minmax(0, 1fr));
        gap: 8px;
    }
}
.kpi {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 10px 8px;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 90px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kpi:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}
.kpi-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 4px;
    min-height: 26px;
}
.kpi-title {
    font-size: 0.70rem;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.15;
    word-break: normal;
    overflow: visible;
}
.kpi-icon-pill {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--grey-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kpi-icon {
    display: inline-block;
    width: 13px;
    height: 13px;
    background-color: var(--muted);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.kpi-values {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 2px 0;
}
.kpi-side {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
}
.kpi-set-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    min-width: 10px;
    flex-shrink: 0;
}
.kpi-val {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.15;
    white-space: nowrap;
}
.kpi-side .status-dot {
    margin-left: auto;
    flex-shrink: 0;
}
.kpi-footer {
    display: flex;
    align-items: center;
    margin-top: 2px;
}
.kpi-unit {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--muted);
}

/* ---------- Chart Card ---------- */
.chart-card {
    display: flex;
    flex-direction: column;
}
.chart-header {
    margin-bottom: 12px;
}
.chart-title-wrap h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}
.param-tabs {
    margin-bottom: 16px;
}
.chart-canvas-container {
    width: 100%;
    position: relative;
}
.chart-canvas-container canvas,
canvas[data-chart],
canvas[data-power-chart] {
    width: 100%;
    height: 240px;
    display: block;
}
.chart-legend {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
    font-size: 0.84rem;
    color: var(--muted);
    margin-top: 14px;
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.legend-line {
    display: inline-block;
    width: 22px;
    border-top: 3px solid;
    border-radius: 2px;
    vertical-align: middle;
}
.legend-item.dashed .legend-line {
    border-top-style: dashed;
}

/* ---------- Bottom Row (Zones & Power) ---------- */
.dashboard-bottom-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 16px;
    align-items: stretch;
}
.zones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.card.zone {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
}
.zone-header {
    margin-bottom: 14px;
}
.zone-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.zone-badge {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--grey-bg);
    color: var(--text);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zone-title {
    font-size: 1.05rem;
    font-weight: 700;
}
.chip-active {
    background: var(--ok-bg);
    color: var(--ok);
    border-color: var(--ok-border);
}

.fan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.mist-section {
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: auto;
}
.section-heading {
    margin-bottom: 6px;
}
.section-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.mist-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Output chips */
.output {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--grey-bg);
    border: 1px solid var(--grey-border);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.15s ease;
}
.output-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.output-name {
    font-weight: 600;
}
.output-state {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.05);
    white-space: nowrap;
}
.output.state-on {
    background: var(--ok-bg);
    border-color: var(--ok-border);
    color: var(--ok);
    font-weight: 600;
}
.output.state-on .output-state {
    background: rgba(34, 197, 94, 0.18);
    color: var(--ok);
}
.output.state-unknown .output-state {
    color: var(--muted);
    font-style: italic;
    background: transparent;
}

/* Fan grid output chips (stacked name & state to fit 'Tidak diketahui' on one line) */
.fan-grid .output {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 50px;
    padding: 6px 10px;
    gap: 2px;
}
.fan-grid .output-left {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.fan-grid .output-state {
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    padding: 1px 6px;
    border-radius: 4px;
    line-height: 1.25;
}
.fan-grid .output.state-unknown .output-state {
    padding: 0;
    font-style: italic;
    color: var(--muted);
    background: transparent;
}

/* Output icons */
.output-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.output-icon.icon-fan {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
}
.output-icon.icon-mist {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4M8 4l2 3M16 4l-2 3M4 14a8 8 0 0 0 16 0'/%3E%3Ccircle cx='12' cy='14' r='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4M8 4l2 3M16 4l-2 3M4 14a8 8 0 0 0 16 0'/%3E%3Ccircle cx='12' cy='14' r='3'/%3E%3C/svg%3E");
}

@keyframes fan-spin {
    100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: no-preference) {
    .output-fan.state-on .output-icon.icon-fan {
        animation: fan-spin 3s linear infinite;
    }
}

/* ---------- Power Tile ---------- */
.card.power-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.power-header {
    margin-bottom: 12px;
}
.power-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.power-icon-pill {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--warn-bg);
    color: var(--warn);
    display: flex;
    align-items: center;
    justify-content: center;
}
.power-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: var(--warn);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.power-title {
    font-size: 1.05rem;
    font-weight: 700;
}
.power-values {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.power-metric {
    background: var(--grey-bg);
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
}
.power-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 4px;
    display: block;
}
.power-reading {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.power-val {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}
.power-unit {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
}
.power-note {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--series-b);
    line-height: 1.35;
    margin-top: 5px;
}

/* Dashboard Power Tile - Individual meter rows */
.dashboard-meters-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.dashboard-meter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.85rem;
}
.dashboard-meter-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text);
    min-width: 0;
}
.dashboard-meter-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-meter-values {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-shrink: 0;
}
.meter-sub-val {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
}
.meter-sub-val small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 500;
    margin-left: 2px;
}


/* ---------- KPI parameter icon masks ---------- */
.icon-env-temperature {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z'/%3E%3C/svg%3E");
}
.icon-env-humidity {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E");
}
.icon-pond-do {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12c2.5 2.5 4.5 2.5 7 0s4.5-2.5 7 0 4.5 2.5 7 0M2 17c2.5 2.5 4.5 2.5 7 0s4.5-2.5 7 0 4.5 2.5 7 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12c2.5 2.5 4.5 2.5 7 0s4.5-2.5 7 0 4.5 2.5 7 0M2 17c2.5 2.5 4.5 2.5 7 0s4.5-2.5 7 0 4.5 2.5 7 0'/%3E%3C/svg%3E");
}
.icon-pond-ph {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.31L4.89 18.5A2 2 0 0 0 6.64 21h10.72a2 2 0 0 0 1.75-2.5L14 9.31V2'/%3E%3Cline x1='8.5' y1='2' x2='15.5' y2='2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.31L4.89 18.5A2 2 0 0 0 6.64 21h10.72a2 2 0 0 0 1.75-2.5L14 9.31V2'/%3E%3Cline x1='8.5' y1='2' x2='15.5' y2='2'/%3E%3C/svg%3E");
}
.icon-pond-bod {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='19' cy='5' r='2'/%3E%3Ccircle cx='5' cy='19' r='2'/%3E%3Cpath d='M10.4 10.4L6.4 17.6M13.6 13.6l4-7.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='19' cy='5' r='2'/%3E%3Ccircle cx='5' cy='19' r='2'/%3E%3Cpath d='M10.4 10.4L6.4 17.6M13.6 13.6l4-7.2'/%3E%3C/svg%3E");
}
.icon-pond-cod {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='4' height='16' rx='2'/%3E%3Crect x='15' y='8' width='4' height='12' rx='2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='4' height='16' rx='2'/%3E%3Crect x='15' y='8' width='4' height='12' rx='2'/%3E%3C/svg%3E");
}
.icon-pond-turbidity {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5' stroke-dasharray='2 2'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5' stroke-dasharray='2 2'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3C/svg%3E");
}
.icon-pond-toc {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10 10 10 0 0 1-10-10 10 10 0 0 1 10-10z' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10 10 10 0 0 1-10-10 10 10 0 0 1 10-10z' stroke-dasharray='4 4'/%3E%3C/svg%3E");
}
.icon-pond-temperature {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 11V3.5a2.5 2.5 0 0 0-5 0V11a4.5 4.5 0 1 0 5 0z'/%3E%3Cpath d='M4 19c1.5 1 2.5 1 4 0s2.5-1 4 0 2.5 1 4 0 2.5-1 4 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 11V3.5a2.5 2.5 0 0 0-5 0V11a4.5 4.5 0 1 0 5 0z'/%3E%3Cpath d='M4 19c1.5 1 2.5 1 4 0s2.5-1 4 0 2.5 1 4 0 2.5-1 4 0'/%3E%3C/svg%3E");
}

/* ---------- Auth Page ---------- */
.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    background: var(--sidebar-bg);
    width: 100%;
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--card-border);
}
.auth-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}
.auth-brand .brand-logo {
    width: 38px;
    height: 38px;
}
.auth-brand .brand-text strong {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.auth-brand .brand-text small {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    display: block;
    margin-top: 2px;
}
.auth-form {
    display: grid;
    gap: 14px;
}
.form-group {
    display: grid;
    gap: 6px;
}
.form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}
.form-input {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}
.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    font-size: 0.85rem;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}
.checkbox input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--primary);
    cursor: pointer;
}
.form-error {
    color: var(--alert);
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0;
}
.auth-submit {
    min-height: 44px;
    width: 100%;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 6px;
}
.form-status {
    background: var(--ok-bg);
    color: var(--ok);
    border: 1px solid var(--ok-border);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 500;
    margin: 0 0 16px;
    line-height: 1.4;
}
.auth-note {
    font-size: 0.86rem;
    color: var(--muted);
    margin: -14px 0 18px;
    line-height: 1.45;
}
.form-hint {
    font-size: 0.76rem;
    color: var(--muted);
    line-height: 1.35;
    margin-top: 2px;
}
.auth-switch {
    font-size: 0.88rem;
    color: var(--muted);
    text-align: center;
    margin: 20px 0 0;
}
.auth-switch a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}
.auth-switch a:hover {
    text-decoration: underline;
}
.auth-resend {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 0.86rem;
}
.auth-resend summary {
    cursor: pointer;
    color: var(--muted);
    font-weight: 600;
    padding: 4px 0;
}
.auth-resend summary:hover {
    color: var(--text);
}
.auth-resend form {
    margin-top: 12px;
    display: grid;
    gap: 12px;
}

/* ---------- Error Pages ---------- */
.error-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.error-card .auth-brand {
    justify-content: center;
    margin-bottom: 24px;
}
.error-code {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--primary);
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}
.error-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.3;
}
.error-message {
    font-size: 0.92rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 26px;
    max-width: 320px;
}
.error-actions {
    width: 100%;
}
.error-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    margin-top: 0;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .error-card {
        background: #12221a;
        border-color: #1d362a;
        color: #e6f0eb;
    }
    html:not([data-theme="light"]) .error-title {
        color: #e6f0eb;
    }
    html:not([data-theme="light"]) .error-message {
        color: #84998e;
    }
}

/* ---------- Phone & Responsive (≤ 900px, 390px) ---------- */
@media (max-width: 900px) {
    .nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(2px);
        z-index: 90;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .nav-toggle:checked ~ .nav-backdrop {
        display: block;
        opacity: 1;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
        width: 260px;
        max-width: 82vw;
        box-shadow: none;
        padding: 0;
    }
    .sidebar-inner {
        position: static;
        height: 100%;
        max-height: 100dvh;
    }
    .nav-toggle:checked ~ .sidebar {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45);
    }

    .hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--text);
        cursor: pointer;
        border-radius: 10px;
        margin-right: 4px;
    }
    .topbar {
        padding: 12px 14px;
        gap: 8px;
    }
    .page-title {
        font-size: 1.25rem;
    }
    .topbar .user-block {
        display: none;
    }
    .topbar-actions {
        gap: 6px;
    }
    .topbar-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
    .locale-toggle button {
        min-height: 40px;
        padding: 0 8px;
        font-size: 0.82rem;
    }

    .content {
        padding: 0 16px 20px;
        gap: 14px;
    }

    .kpi-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .dashboard-bottom-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .zones {
        grid-template-columns: 1fr;
        gap: 14px;
    }


    .page-footer {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 16px 20px;
        gap: 8px;
    }
}

/* ---------- Sensor Page ---------- */
.sensor-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.sensor-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px;
    border-radius: var(--radius);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sensor-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}
.sensor-card.tint-normal {
    background: var(--ok-bg);
    border-color: var(--ok-border);
}
.sensor-card.tint-warning {
    background: var(--warn-bg);
    border-color: var(--warn-border);
}
.sensor-card.tint-alert {
    background: var(--alert-bg);
    border-color: var(--alert-border);
}
.sensor-card.tint-stale {
    background: var(--card-bg);
    border-color: var(--card-border);
}

.sensor-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.sensor-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.sensor-location {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-top: 2px;
}

.sensor-readings-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
    flex: 1;
}
.sensor-reading-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--border);
}
.sensor-card.tint-normal .sensor-reading-item {
    background: rgba(255, 255, 255, 0.75);
}
html[data-theme="dark"] .sensor-card.tint-normal .sensor-reading-item {
    background: rgba(18, 34, 26, 0.85);
}
.sensor-card.tint-warning .sensor-reading-item {
    background: rgba(255, 255, 255, 0.75);
}
html[data-theme="dark"] .sensor-card.tint-warning .sensor-reading-item {
    background: rgba(26, 22, 14, 0.85);
}
.sensor-card.tint-alert .sensor-reading-item {
    background: rgba(255, 255, 255, 0.75);
}
html[data-theme="dark"] .sensor-card.tint-alert .sensor-reading-item {
    background: rgba(30, 18, 18, 0.85);
}

.sensor-reading-left {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sensor-reading-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
}
.sensor-reading-val strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}
.sensor-reading-unit {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted);
}

.sensor-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--muted);
}
.sensor-battery {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-light);
    padding: 2px 7px;
    border-radius: 6px;
}
.battery-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='16' height='10' rx='2' ry='2'/%3E%3Cline x1='22' y1='11' x2='22' y2='13'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='16' height='10' rx='2' ry='2'/%3E%3Cline x1='22' y1='11' x2='22' y2='13'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sensor-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.custom-range-bar {
    background: var(--grey-bg);
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    margin-bottom: 14px;
}
.custom-range-inputs {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.custom-range-inputs label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}
.custom-range-inputs input[type="date"] {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
}
.btn-apply-custom {
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.84rem;
}
.custom-range-error {
    color: var(--alert);
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 6px;
}

.chart-tooltip {
    position: absolute;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.78rem;
    pointer-events: none;
    z-index: 10;
    line-height: 1.35;
}
.tooltip-time {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 500;
    margin-bottom: 2px;
}
.tooltip-series.series-a {
    color: var(--primary);
    font-weight: 700;
}
.tooltip-series.series-b {
    color: var(--series-b);
    font-weight: 700;
}

/* ---------- Power Monitoring Page ---------- */
.power-admin-toolbar {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
}
.power-admin-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.toggle-control {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}
.toggle-control input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.toggle-track {
    position: relative;
    width: 38px;
    height: 22px;
    background: var(--grey-bg);
    border: 1px solid var(--border);
    border-radius: 9999px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
    display: inline-block;
}
.toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--muted);
    border-radius: 50%;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
    display: block;
}
.toggle-control input[type="checkbox"]:checked ~ .toggle-track {
    background: var(--primary);
    border-color: var(--primary);
}
.toggle-control input[type="checkbox"]:checked ~ .toggle-track .toggle-thumb {
    transform: translateX(16px);
    background: #ffffff;
}
.toggle-control input[type="checkbox"]:focus-visible ~ .toggle-track {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.power-admin-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.35;
}
.power-admin-status {
    font-size: 0.8rem;
    font-weight: 600;
}
.power-admin-status.is-saving {
    color: var(--muted);
}
.power-admin-status.is-saved {
    color: var(--ok);
}
.power-admin-status.is-error {
    color: var(--alert);
}

.power-meter-switcher-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.power-meter-switcher {
    display: inline-flex;
    white-space: nowrap;
    min-width: fit-content;
}

.power-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.power-kpi-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 14px;
    min-height: 102px;
    min-width: 0;
}
.power-kpi-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 2px;
    padding: 0;
    background: transparent;
    border: none;
}
.power-kpi-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}
.power-kpi-body {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 6px 0;
    min-width: 0;
}
.power-kpi-number {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.power-kpi-unit {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
    flex-shrink: 0;
}
.power-kpi-card.power-kpi-counter .power-kpi-number {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--muted);
}
.power-note {
    font-size: 0.72rem;
    color: var(--muted);
    line-height: 1.25;
}

/* Power Monitoring - Totals strip */
.power-totals-strip {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* Power Monitoring - Side-by-side meters grid */
.power-meters-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 4px;
}
.power-meter-side-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px 20px;
    gap: 14px;
}
.power-meter-side-card .card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
}
.power-meter-side-card .power-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.power-meter-side-card .card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.power-meter-side-card .card-subtitle {
    font-size: 0.8rem;
    color: var(--muted);
}
.power-meter-metrics {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.meter-metric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--grey-bg);
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 0.88rem;
}
.meter-metric-label {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.82rem;
}
.meter-metric-val strong {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 700;
}
.meter-metric-val small {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 2px;
}
.power-counter-row {
    background: transparent;
    border: 1px dashed var(--border);
}
.power-counter-row .meter-metric-val strong {
    color: var(--muted);
    font-weight: 600;
}

.power-phases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.power-phases-grid:empty {
    display: none;
    margin-bottom: 0;
}
.phase-card {
    padding: 18px;
}
.phase-header {
    margin-bottom: 12px;
}
.phase-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}
.phase-metrics {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.phase-metric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: var(--grey-bg);
    border-radius: 8px;
    border: 1px solid var(--border);
}
.phase-metric-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
}
.phase-metric-val strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}
.phase-metric-val small {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
}

/* ---------- Energy Summary Card (Daily / Monthly) ---------- */
.power-summary-card {
    padding: 20px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 0;
    background: transparent;
    border: none;
}
.summary-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.summary-title-wrap h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.summary-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.summary-picker-wrap {
    display: flex;
    align-items: center;
}
.summary-period-input {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 12px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    min-height: 38px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.summary-period-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Stats bar above chart */
.summary-stats-bar {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--grey-bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 0.88rem;
}
.summary-stat-val {
    color: var(--text);
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.summary-stat-val strong {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}
.summary-stat-val small {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
}
.summary-stat-periods {
    color: var(--muted);
    font-weight: 500;
}
.summary-stat-periods strong {
    color: var(--text);
}
.summary-stat-note {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--series-b);
}

/* Chart container & scroll */
.summary-chart-container {
    position: relative;
    width: 100%;
}
.summary-chart-scroll {
    position: relative;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
canvas[data-energy-summary-chart] {
    display: block;
    width: 100%;
    /* Fixed height: power.js reads clientHeight, and without it the canvas grew on every redraw. */
    height: 260px;
}
.summary-chart-tooltip {
    position: absolute;
    pointer-events: none;
    z-index: 20;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.8rem;
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.summary-chart-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 0.84rem;
}
.legend-square {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    vertical-align: middle;
}
.legend-square.hatched {
    background: repeating-linear-gradient(45deg, var(--muted), var(--muted) 2px, transparent 2px, transparent 4px);
    border: 1px solid var(--muted);
}

/* Table collapsible & data styling */
.summary-table-collapsible {
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    overflow: hidden;
}
.summary-table-toggle {
    cursor: pointer;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
    background: var(--grey-bg);
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.summary-table-toggle::-webkit-details-marker {
    display: none;
}
.summary-table-toggle::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-right: 4px;
}
.summary-table-collapsible[open] .summary-table-toggle::after {
    transform: rotate(-135deg);
}
.summary-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 420px;
}
.summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    text-align: left;
}
.summary-table th {
    background: var(--card-bg);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 2;
}
.summary-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    white-space: nowrap;
}
.summary-table tr:last-child td {
    border-bottom: none;
}
.summary-table tr:hover td {
    background: var(--grey-bg);
}
.table-val-col {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.table-gap-val {
    color: var(--muted);
    font-weight: 400;
}
.table-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
}
.table-badge-est {
    background: var(--series-b-bg, rgba(211, 154, 79, 0.15));
    color: var(--series-b);
}
.table-badge-reset {
    background: var(--alert-bg);
    color: var(--alert);
}
.table-badge-future {
    background: var(--grey-bg);
    color: var(--muted);
}
.table-badge-gap {
    background: var(--grey-bg);
    color: var(--muted);
}

.empty-state-notice {
    padding: 24px;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 500;
    background: var(--grey-bg);
    border-radius: 10px;
    border: 1px dashed var(--border);
}

/* ---------- Pelan Tapak Page ---------- */
/* ---------- Pelan Tapak Page ---------- */
.plan-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.plan-scroll-hint {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-light);
    padding: 4px 12px;
    border-radius: 20px;
    user-select: none;
}
.plan-svg-container {
    width: 100%;
    position: relative;
    border-radius: 12px;
    overflow-x: auto;
    background: var(--page-bg);
    border: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.plan-svg {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
}

/* Compound & Buildings */
.plan-compound-box {
    fill: var(--card-bg);
    stroke: var(--text);
    stroke-width: 2.5;
}
.plan-building-box {
    fill: var(--grey-bg);
    stroke: var(--text);
    stroke-width: 2;
}
.plan-building-label {
    font-size: 21px;
    font-weight: 700;
    fill: var(--text);
}
.plan-db-box {
    fill: var(--card-bg);
    stroke: var(--text);
    stroke-width: 2;
}
.plan-db-label {
    font-size: 16px;
    font-weight: 600;
    fill: var(--text);
}
.plan-milking-box {
    fill: rgba(0, 112, 192, 0.04);
    stroke: #0070c0;
    stroke-width: 2;
    stroke-dasharray: 8 6;
}

/* Dimensions */
.plan-dim-line {
    stroke: #005073;
    stroke-width: 2.2;
}
html[data-theme="dark"] .plan-dim-line {
    stroke: #38bdf8;
}
.plan-arrow-head {
    fill: #005073;
}
html[data-theme="dark"] .plan-arrow-head {
    fill: #38bdf8;
}
.plan-dim-label {
    font-size: 21px;
    font-weight: 600;
    fill: #005073;
}
html[data-theme="dark"] .plan-dim-label {
    fill: #38bdf8;
}

/* Pipeline & Valves */
.plan-pipe-main {
    fill: none;
    stroke: #006680;
    stroke-width: 4;
    stroke-linejoin: round;
    stroke-linecap: round;
}
html[data-theme="dark"] .plan-pipe-main {
    stroke: #38bdf8;
}
.plan-pipe-branch {
    stroke: #006680;
    stroke-width: 3.5;
    stroke-linecap: round;
}
html[data-theme="dark"] .plan-pipe-branch {
    stroke: #38bdf8;
}
.plan-pipe-label {
    font-size: 18px;
    font-weight: 700;
    fill: #006680;
}
html[data-theme="dark"] .plan-pipe-label {
    fill: #38bdf8;
}
.plan-solenoid-rect {
    fill: #f59e0b;
    stroke: #000000;
    stroke-width: 1.5;
    transition: all 0.2s ease;
}
.plan-solenoid.state-on .plan-solenoid-rect {
    fill: var(--ok);
    stroke: var(--ok-border);
}
.plan-solenoid-label {
    font-size: 13px;
    font-weight: 800;
    fill: #ffffff;
}

/* Barns */
.plan-barn-outline {
    fill: rgba(22, 163, 74, 0.03);
    stroke: #16a34a;
    stroke-width: 2.5;
    stroke-dasharray: 10 6;
}
html[data-theme="dark"] .plan-barn-outline {
    fill: rgba(22, 163, 74, 0.06);
    stroke: #22c55e;
}
.plan-barn-title {
    font-size: 22px;
    font-weight: 700;
    fill: #16a34a;
}
html[data-theme="dark"] .plan-barn-title {
    fill: #4ade80;
}

/* Fans */
.plan-fan-box {
    fill: var(--card-bg);
    stroke: var(--text);
    stroke-width: 1.5;
    transition: all 0.2s ease;
}
.plan-fan-ring {
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.5;
}
.plan-fan-blades path {
    fill: var(--muted);
    transition: fill 0.2s ease;
}
.plan-fan-center {
    fill: var(--text);
}
.plan-fan-label {
    font-size: 15px;
    font-weight: 700;
    fill: var(--text);
}
.plan-fan.state-on .plan-fan-box {
    stroke: var(--ok);
    background: var(--ok-bg);
}
.plan-fan.state-on .plan-fan-ring {
    stroke: var(--ok);
}
.plan-fan.state-on .plan-fan-blades path {
    fill: var(--ok);
}
.plan-fan.state-on .plan-fan-blades.spin {
    animation: fan-spin 3s linear infinite;
}
.plan-fan.state-unknown .plan-fan-box {
    stroke-dasharray: 4 3;
}

/* Sensors */
.plan-sensor-label {
    font-size: 14px;
    font-weight: 700;
    fill: var(--text);
}

/* Meter badges */
.plan-meter-badge {
    fill: var(--card-bg);
    stroke: var(--border);
    stroke-width: 1.5;
}
.plan-meter-badge.is-fresh {
    stroke: var(--primary);
    fill: var(--primary-light);
}
.plan-meter-text {
    font-size: 13px;
    font-weight: 700;
    fill: var(--text);
}

/* Ponds */
.plan-pond-enclosure {
    fill: var(--card-bg);
    stroke: var(--text);
    stroke-width: 2.5;
}
.plan-pond-outline {
    fill: none;
    stroke: #0070c0;
    stroke-width: 2;
    stroke-dasharray: 8 6;
}
.plan-pond-title {
    font-size: 19px;
    font-weight: 700;
    fill: #0070c0;
}
html[data-theme="dark"] .plan-pond-title {
    fill: #60a5fa;
}
.plan-pond-sub {
    font-size: 15px;
    font-weight: 600;
    fill: var(--muted);
}

/* Legend */
.plan-legend-frame {
    fill: var(--card-bg);
    stroke: var(--text);
    stroke-width: 2;
}
.plan-legend-heading {
    font-size: 24px;
    font-weight: 800;
    fill: var(--text);
}
.plan-legend-label {
    font-size: 16px;
    font-weight: 600;
    fill: var(--text);
}
.plan-legend-subheading {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    fill: var(--muted);
}
.plan-legend-sub {
    font-size: 14px;
    font-weight: 600;
    fill: var(--text);
}
.plan-legend-divider {
    stroke: var(--border);
    stroke-width: 1.5;
}

/* Interactivity & Selection */
.plan-interactive {
    cursor: pointer;
    outline: none;
    transition: transform 0.15s ease;
}
.plan-interactive:hover {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18));
}
.plan-interactive:focus-visible {
    filter: drop-shadow(0 0 8px var(--primary));
}
.plan-hit-area {
    stroke: transparent;
    stroke-width: 16px;
    pointer-events: all;
    cursor: pointer;
}
.plan-select-ring {
    fill: none;
    stroke: var(--primary);
    stroke-width: 2.5;
    stroke-dasharray: 4 3;
    pointer-events: none;
}

/* ---------- Plan Popover & Bottom Sheet ---------- */
.plan-popover {
    position: absolute;
    z-index: 100;
    width: 320px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: auto;
    animation: popover-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.plan-popover[hidden] {
    display: none !important;
}
@keyframes popover-in {
    from { opacity: 0; transform: scale(0.96) translateY(-4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.sheet-drag-handle {
    display: none;
}
.popover-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.popover-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.popover-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.popover-subtitle {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.popover-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.plan-popover-close {
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.plan-popover-close:hover {
    background: var(--grey-bg);
    color: var(--text);
}

/* Env Grid in Popover */
.popover-env-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.popover-reading-box {
    background: var(--grey-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.popover-param-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
}
.popover-reading-value {
    display: flex;
    align-items: baseline;
    gap: 2px;
}
.popover-reading-value .bold-val {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
}
.popover-reading-value .val-unit {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}

/* Pond Grid in Popover */
.popover-pond-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--grey-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
}
.popover-pond-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    padding: 3px 0;
}
.popover-pond-row:not(:last-child) {
    border-bottom: 1px solid var(--border);
}
.popover-param-value strong {
    font-weight: 700;
    color: var(--text);
}
.popover-param-value small {
    color: var(--muted);
    font-size: 0.72rem;
}

/* Energy Grid in Popover */
.popover-energy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.popover-energy-box {
    background: var(--grey-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.popover-bold-val {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
}

/* Actuator Meta in Popover */
.popover-actuator-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--grey-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
}
.popover-meta-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.84rem;
}
.meta-field-label {
    color: var(--muted);
    font-weight: 500;
}
.meta-field-val {
    color: var(--text);
    font-weight: 700;
}

/* Meta Row (battery + timestamp) */
.popover-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--muted);
    padding: 0 2px;
}
.popover-battery {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--text);
}
.popover-device-info {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0;
    padding: 8px 0;
}

/* Popover Actions */
.popover-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}
.popover-actions .button {
    flex: 1;
    font-size: 0.82rem;
    padding: 7px 12px;
    text-align: center;
    justify-content: center;
}

/* Bottom Sheet on Mobile */
.plan-popover-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 140;
}
.plan-popover-backdrop[hidden] {
    display: none !important;
}

@media (max-width: 640px) {
    .plan-popover {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        border-bottom: 0;
        z-index: 150;
        max-height: 85vh;
        overflow-y: auto;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.28);
        animation: sheet-up 0.24s cubic-bezier(0.16, 1, 0.3, 1);
        padding: 16px 20px 24px 20px;
    }
    .sheet-drag-handle {
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--border);
        margin: 0 auto 10px auto;
    }
}
@keyframes sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@media (max-width: 900px) {
    .plan-scroll-hint {
        display: inline-flex;
    }
    .plan-svg {
        min-width: 960px;
    }
}

/* Modal Dialog */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 16px;
}
.modal-backdrop[hidden] {
    display: none !important;
}
.modal-chart-container {
    width: 100%;
    position: relative;
}
.modal-chart-container canvas {
    width: 100%;
    height: 220px;
    display: block;
}
.modal-dialog {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--card-border);
    width: 100%;
    max-width: 620px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 90vh;
    overflow-y: auto;
}
.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.modal-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 2px;
}
.modal-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}
.modal-close {
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.modal-close:hover {
    background: var(--grey-bg);
    color: var(--text);
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
}

/* ---------- Amaran (Alarms) Page ---------- */
.alarms-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.alarms-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.alarm-summary-card {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.alarm-summary-card .card-header {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.summary-label {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.summary-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.summary-dot.status-active { background: var(--primary); }
.summary-dot.status-alert { background: var(--alert); }
.summary-dot.status-warn { background: var(--warn); }

.summary-number {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
}
.alarm-summary-card.alert-tint {
    background: var(--alert-bg);
    border-color: var(--alert-border);
}
.alarm-summary-card.warn-tint {
    background: var(--warn-bg);
    border-color: var(--warn-border);
}
.summary-number.alert-text { color: var(--alert); }
.summary-number.warn-text { color: var(--warn); }

.alarms-filter-card {
    padding: 14px 18px;
}
.alarms-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.alarms-filter-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.alarm-device-select {
    min-height: 38px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    font: inherit;
    font-size: 0.86rem;
}
.btn-reload {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    font-size: 0.85rem;
}

.alarms-list-card {
    padding: 0;
    overflow: hidden;
}
.alarms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    text-align: left;
}
.alarms-table th {
    padding: 14px 18px;
    background: var(--grey-bg);
    color: var(--muted);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
}
.alarms-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.alarms-table tr:last-child td {
    border-bottom: 0;
}
.alarms-table tr:hover td {
    background: rgba(0, 0, 0, 0.015);
}
html[data-theme="dark"] .alarms-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.alarm-level-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.alarm-level-chip.level-alert {
    background: var(--alert-bg);
    color: var(--alert);
    border: 1px solid var(--alert-border);
}
.alarm-level-chip.level-warning {
    background: var(--warn-bg);
    color: var(--warn);
    border: 1px solid var(--warn-border);
}

.cleared-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cleared-reason {
    font-size: 0.75rem;
    color: var(--muted);
}
.alarm-ack-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--muted);
}
.ack-icon {
    color: var(--ok);
    flex-shrink: 0;
}
.btn-acknowledge {
    padding: 6px 14px;
    font-size: 0.82rem;
    min-height: 34px;
}

.alarms-empty-state {
    padding: 60px 20px;
    text-align: center;
    color: var(--muted);
}
.empty-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--grey-bg);
    color: var(--muted);
    margin-bottom: 14px;
}
.empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--muted);
}

.alarms-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px;
}
.pagination-info {
    font-size: 0.84rem;
    color: var(--muted);
    font-weight: 500;
}

.alarms-mobile-list {
    display: none;
}

/* ---------- Tetapan -> Pengguna (Users) Page ---------- */
.settings-nav-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 2px;
    margin-bottom: 4px;
    overflow-x: auto;
}
.settings-nav-tabs .tab-item {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 16px;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.settings-nav-tabs .tab-item:hover:not(:disabled) {
    color: var(--text);
}
.settings-nav-tabs .tab-item.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.settings-nav-tabs .tab-item:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.users-controls-card {
    padding: 14px 18px;
}
.users-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.btn-new-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    font-size: 0.86rem;
}

.users-list-card {
    padding: 0;
    overflow: hidden;
}
.users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    text-align: left;
}
.users-table th {
    padding: 14px 18px;
    background: var(--grey-bg);
    color: var(--muted);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
}
.users-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.users-table tr:last-child td {
    border-bottom: 0;
}
.users-table tr:hover td {
    background: rgba(0, 0, 0, 0.015);
}
html[data-theme="dark"] .users-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.user-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.user-name-line {
    display: flex;
    align-items: center;
    gap: 8px;
}
.user-name-text {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}
.badge-you {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--ok-border);
}
.user-email-line {
    display: flex;
    align-items: center;
    gap: 8px;
}
.user-email {
    font-size: 0.82rem;
    color: var(--muted);
}
.unverified-tag {
    font-size: 0.72rem;
    color: var(--alert);
    font-weight: 600;
    background: var(--alert-bg);
    border: 1px solid var(--alert-border);
    padding: 1px 6px;
    border-radius: 4px;
}
.unverified-tag.block {
    display: inline-block;
    width: fit-content;
    margin-top: 2px;
}

.role-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.role-badge.role-admin {
    background: rgba(147, 51, 234, 0.12);
    color: #9333ea;
    border: 1px solid rgba(147, 51, 234, 0.3);
}
html[data-theme="dark"] .role-badge.role-admin {
    background: rgba(168, 85, 247, 0.18);
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.35);
}
.role-badge.role-user {
    background: var(--grey-bg);
    color: var(--muted);
    border: 1px solid var(--border);
}

.chip-pending {
    background: var(--warn-bg);
    color: var(--warn);
    border-color: var(--warn-border);
}
.chip-active {
    background: var(--ok-bg);
    color: var(--ok);
    border-color: var(--ok-border);
}
.chip-stale,
.chip-none {
    background: var(--grey-bg);
    color: var(--muted);
    border-color: var(--border);
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.btn-action {
    padding: 6px 12px;
    font-size: 0.82rem;
    min-height: 34px;
}
.btn-danger-outline {
    color: var(--alert);
}
.btn-danger-outline:hover {
    background: var(--alert-bg);
    border-color: var(--alert-border);
}

.users-empty-state {
    padding: 60px 20px;
    text-align: center;
    color: var(--muted);
}

.new-user-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.form-select {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
    width: 100%;
    cursor: pointer;
}
.form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}
.form-input.is-invalid,
.form-select.is-invalid {
    border-color: var(--alert);
}
.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}
.btn-cancel {
    min-height: 40px;
    padding: 0 16px;
    font-size: 0.88rem;
}
.btn-save {
    min-height: 40px;
    padding: 0 18px;
    font-size: 0.88rem;
}

.users-mobile-list {
    display: none;
}

/* Responsive overrides for Sensor, Power & Plan pages */
@media (max-width: 1024px) {
    .sensor-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .power-phases-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sensor-charts-grid {
        grid-template-columns: 1fr;
    }
    .power-summary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .power-kpi-card.power-kpi-counter {
        grid-column: span 2;
    }
    .power-totals-strip {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .power-meters-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .alarms-summary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .sensor-cards-grid {
        grid-template-columns: 1fr;
    }
    .sensor-charts-grid {
        grid-template-columns: 1fr;
    }
    .power-summary-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .power-summary-grid .power-flow-card,
    .power-summary-grid .power-ring-container,
    .power-summary-grid .power-ring-card {
        grid-column: 1 / -1;
    }
    .power-kpi-card.power-kpi-counter {
        grid-column: 1 / -1;
    }
    .power-phases-grid {
        grid-template-columns: 1fr;
    }
    .summary-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .summary-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .summary-picker-wrap {
        width: 100%;
    }
    .summary-period-input {
        width: 100%;
    }
    .plan-svg-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .plan-svg {
        min-width: 960px;
    }
    .alarms-filter-row {
        flex-direction: column;
        align-items: stretch;
    }
    .alarms-filter-right {
        flex-direction: column;
        align-items: stretch;
    }
    .alarms-table {
        display: none;
    }
    .alarms-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 14px;
    }
    .alarm-mobile-card {
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .mobile-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    .mobile-device-name {
        font-size: 0.95rem;
        color: var(--text);
    }
    .mobile-card-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }
    .mobile-field {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .mobile-field-label {
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--muted);
        letter-spacing: 0.05em;
    }
    .mobile-field-val {
        font-size: 0.85rem;
        color: var(--text);
    }
    .mobile-card-footer {
        padding-top: 8px;
        border-top: 1px solid var(--border);
    }
    .btn-acknowledge.full-width {
        width: 100%;
        min-height: 40px;
    }

    .users-controls-row {
        flex-direction: column;
        align-items: stretch;
    }
    .users-controls-row .btn-new-user {
        width: 100%;
        min-height: 42px;
        justify-content: center;
    }
    .user-status-tabs {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .users-table {
        display: none;
    }
    .users-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 14px;
    }
    .user-mobile-card {
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .mobile-user-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .mobile-user-identity {
        width: 100%;
        min-width: 0;
    }
    .mobile-user-identity .user-email {
        word-break: break-all;
    }
    .mobile-user-chips {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }
    .mobile-user-footer {
        padding-top: 10px;
        border-top: 1px solid var(--border);
    }
    .user-actions-mobile {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .user-actions-mobile .btn-action {
        width: 100%;
        min-height: 40px;
        font-size: 0.88rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ---------- Tetapan -> Julat, Peranti, Umum (Task 013) ---------- */
.settings-header-card {
    padding: 16px 20px;
}
.settings-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.settings-header-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.settings-header-desc {
    font-size: 0.86rem;
    color: var(--muted);
    margin: 4px 0 0;
    line-height: 1.4;
}
.settings-range-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}
.legend-dot-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.settings-subtabs-row {
    margin: 12px 0 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Julat Parameter Cards */
.range-param-card {
    padding: 20px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.range-param-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
    flex-wrap: wrap;
}
.param-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.param-title-wrap h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.param-title-wrap .param-unit {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--muted);
}
.range-sync-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}
.range-sync-checkbox input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* Conflict notice on 409 revision conflict */
.range-conflict-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.85rem;
}
.conflict-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.conflict-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 4px;
    background: var(--warn);
    color: #ffffff;
}
.conflict-text {
    font-weight: 600;
}
.conflict-meta {
    color: var(--muted);
    font-size: 0.8rem;
}
.conflict-actions {
    display: flex;
    gap: 8px;
}
.conflict-actions button {
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.8rem;
}

.range-sets-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.range-set-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.range-set-row:not(:last-child) {
    border-bottom: 1px dashed var(--border);
    padding-bottom: 20px;
}
.range-set-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.range-set-badge {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 6px;
    background: var(--grey-bg);
    color: var(--muted);
    border: 1px solid var(--border);
}
.range-inputs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.range-input-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.range-input-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 5px;
}
.range-input-label .dot-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.range-input-label .dot-alert { background: var(--alert); }
.range-input-label .dot-normal { background: var(--ok); }
.range-input-col .form-input {
    width: 100%;
}

.range-current-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.84rem;
}
.current-reading-text {
    color: var(--muted);
}
.current-reading-text strong {
    color: var(--text);
    font-weight: 700;
}

.range-band-wrap {
    position: relative;
    padding-top: 10px;
    margin-top: 2px;
}
.range-band-bar {
    display: flex;
    width: 100%;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
}
.band-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    user-select: none;
    transition: width 0.2s ease;
}
.band-seg:last-child {
    border-right: none;
}
.band-seg.seg-alert {
    background: var(--alert-bg);
    color: var(--alert);
}
.band-seg.seg-warn {
    background: var(--warn-bg);
    color: var(--warn);
}
.band-seg.seg-normal {
    background: var(--ok-bg);
    color: var(--ok);
    font-weight: 700;
}
.band-pin {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
    pointer-events: none;
    transition: left 0.25s ease;
}
.band-pin-marker {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--text);
}
.band-pin-line {
    width: 2px;
    height: 32px;
    background: var(--text);
    opacity: 0.75;
}
.range-band-disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--grey-bg);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.range-row-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 20px;
    font-size: 0.76rem;
    color: var(--muted);
    flex-wrap: wrap;
}
.range-row-error {
    color: var(--alert);
    font-weight: 600;
    font-size: 0.8rem;
}

.settings-save-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    box-shadow: var(--shadow);
    margin-top: 20px;
    position: sticky;
    bottom: 20px;
    z-index: 20;
    flex-wrap: wrap;
}
.settings-footnote {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
    max-width: 720px;
    margin: 0;
}
.btn-save-ranges {
    min-height: 42px;
    padding: 0 24px;
    font-size: 0.92rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* Devices Page Styles */
.devices-card {
    padding: 0;
    overflow: hidden;
}
.devices-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    text-align: left;
}
.devices-table th {
    padding: 14px 18px;
    background: var(--grey-bg);
    color: var(--muted);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
}
.devices-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.devices-table tr:last-child td {
    border-bottom: 0;
}
.devices-table tr:hover td {
    background: rgba(0, 0, 0, 0.015);
}
html[data-theme="dark"] .devices-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}
.dev-eui-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.82rem;
    background: var(--grey-bg);
    padding: 3px 7px;
    border-radius: 4px;
    border: 1px solid var(--border);
    color: var(--text);
    display: inline-block;
}
.device-timeout-picker {
    display: flex;
    gap: 8px;
    align-items: center;
}
.device-timeout-picker .form-input {
    flex: 1;
}
.timeout-unit-select {
    width: 110px;
    flex-shrink: 0;
}
.devices-mobile-list {
    display: none;
}

/* General Settings Page */
.settings-general-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.general-card {
    padding: 22px;
}
.general-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.general-display-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
}
.general-display-row:not(:last-child) {
    border-bottom: 1px solid var(--border);
}
.general-display-label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}
.integration-summary-box {
    background: var(--grey-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 10px;
}
.integration-summary-note {
    font-size: 0.88rem;
    color: var(--text);
    font-weight: 500;
    line-height: 1.45;
    margin: 0 0 14px;
}
.integration-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.integration-meta-item {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.35;
}
.integration-meta-item strong {
    display: block;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 600;
    margin-top: 2px;
}

/* Responsive Rules for Settings */
@media (max-width: 900px) {
    .settings-general-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .range-inputs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .settings-save-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-save-ranges {
        width: 100%;
    }
    .devices-table {
        display: none;
    }
    .devices-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 14px;
    }
    .device-mobile-card {
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}


/* ==========================================================================
   ANIMATIONS & MOTION SYSTEM (Tasks 011 / docs/reference/ui-ideas)
   Motion only from real data; only Alert pulses; reduced motion turns all off
   ========================================================================== */

@keyframes cb-spin { to { transform: rotate(360deg); } }
@keyframes cb-air { 0% { opacity: 0; transform: translateX(-6px); } 40% { opacity: 0.9; } 100% { opacity: 0; transform: translateX(14px); } }
@keyframes cb-drop { 0% { opacity: 0; transform: translateY(-4px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(34px); } }
@keyframes cb-mist { 0%, 100% { opacity: 0.35; transform: scale(0.96); } 50% { opacity: 0.7; transform: scale(1.04); } }
@keyframes cb-halo { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); } 100% { box-shadow: 0 0 0 14px rgba(239, 68, 68, 0); } }
@keyframes cb-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.16); } }
@keyframes cb-ping { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes cb-wave { to { transform: translateX(-120px); } }
@keyframes cb-bubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 0.8; } 100% { transform: translateY(-70px); opacity: 0; } }
@keyframes cb-alertpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.22); } }
@keyframes cb-flow { to { stroke-dashoffset: -40; } }
@keyframes cb-toast-in { 0% { transform: translateY(16px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes cb-toast-out { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }

/* Live ping dot */
.live {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
    display: inline-block;
    flex-shrink: 0;
}
.live::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ok);
    animation: cb-ping 1.6s ease-out infinite;
}
.live-stale {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--grey);
    display: inline-block;
    flex-shrink: 0;
}

/* Fans & Misting animation elements */
.fan-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fan-svg {
    display: block;
}
.fan-svg .blades {
    transform-box: view-box;
    transform-origin: 32px 32px;
}
.fan-svg .blades path {
    fill: var(--grey);
    transition: fill 0.3s;
}
.fan-svg .ring {
    fill: none;
    stroke: var(--border);
    stroke-width: 2;
}
.fan-svg .hub {
    fill: var(--muted);
}

.is-on .fan-svg .blades,
.state-on .fan-svg .blades,
.plan-fan.state-on .plan-fan-blades {
    animation: cb-spin var(--spin, 0.8s) linear infinite;
}
.is-on .fan-svg .blades path,
.state-on .fan-svg .blades path,
.plan-fan.state-on .plan-fan-blades path {
    fill: var(--ok);
}
.is-on .fan-svg .ring,
.state-on .fan-svg .ring,
.plan-fan.state-on .plan-fan-bg {
    stroke: var(--ok);
}
.is-on .fan-svg .hub,
.state-on .fan-svg .hub,
.plan-fan.state-on .plan-fan-center {
    fill: var(--primary);
}
.output.state-on,
.tile.is-on {
    background: var(--ok-bg);
    border-color: var(--ok-border);
    animation: cb-glow 2.4s ease-in-out infinite;
}

.is-pending .fan-svg .ring,
.state-pending .fan-svg .ring {
    stroke: var(--warn);
    stroke-dasharray: 5 6;
    animation: cb-spin 2.2s linear infinite;
}
.is-pending .fan-svg .blades path,
.state-pending .fan-svg .blades path {
    fill: var(--warn);
}
.output.state-pending,
.tile.is-pending {
    background: var(--warn-bg);
    border-color: var(--warn-border);
}

.is-unknown .fan-svg .blades path,
.state-unknown .fan-svg .blades path {
    fill: var(--grey);
}
.output.state-unknown,
.tile.is-unknown {
    background: repeating-linear-gradient(135deg, var(--grey-bg) 0 8px, var(--border) 8px 16px);
    border-style: dashed;
}

.is-alert .fan-svg .blades path,
.state-alert .fan-svg .blades path {
    fill: var(--alert);
}
.is-alert .fan-svg .ring,
.state-alert .fan-svg .ring {
    stroke: var(--alert);
}
.output.state-alert,
.tile.is-alert {
    background: var(--alert-bg);
    border-color: var(--alert-border);
    animation: cb-halo 1.8s ease-out infinite;
}

.air {
    position: absolute;
    right: -4px;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--ok);
    opacity: 0;
}
.is-on .air,
.state-on .air {
    animation: cb-air 1.2s ease-out infinite;
}
.is-on .air.a2,
.state-on .air.a2 { animation-delay: 0.4s; }
.is-on .air.a3,
.state-on .air.a3 { animation-delay: 0.8s; }

/* Misting */
.mist-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nozzle-box {
    position: relative;
    width: 64px;
    height: 48px;
    overflow: hidden;
}
.nozzle {
    position: absolute;
    left: 6px;
    right: 6px;
    top: 8px;
    height: 5px;
    border-radius: 4px;
    border: 2px solid var(--muted);
    box-sizing: border-box;
}
.drop {
    position: absolute;
    top: 14px;
    width: 4px;
    height: 7px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: #5aa9d6;
    opacity: 0;
}
.mist-on .drop,
.state-on .drop {
    animation: cb-drop 1.1s ease-in infinite;
}
.drop.d1 { left: 8px; }
.drop.d2 { left: 19px; animation-delay: 0.2s; }
.drop.d3 { left: 30px; animation-delay: 0.45s; }
.drop.d4 { left: 41px; animation-delay: 0.7s; }
.drop.d5 { left: 52px; animation-delay: 0.9s; }
.mist-cloud {
    position: absolute;
    left: 4px;
    right: 4px;
    top: 24px;
    height: 20px;
    border-radius: 20px;
    background: radial-gradient(closest-side, rgba(90, 169, 214, 0.45), rgba(90, 169, 214, 0));
    opacity: 0;
}
.mist-on .mist-cloud,
.state-on .mist-cloud {
    animation: cb-mist 2.6s ease-in-out infinite;
}

/* Gauge & Droplet in Sensor Page */
.gauge-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 4px 0;
}
.gauge-svg {
    display: block;
    width: 100%;
    max-width: 220px;
}
.needle {
    transform-box: view-box;
    transform-origin: 100px 100px;
    transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
    color: var(--text);
}
.gauge-notice {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted);
    text-align: center;
    margin-top: 2px;
}

.drop-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 4px 0;
}
.drop-svg {
    display: block;
}
.lvl {
    transition: transform 0.6s ease;
}
.wave {
    animation: cb-wave 3.2s linear infinite;
}
.wave.w2 {
    animation-duration: 5s;
    opacity: 0.55;
}

/* Pond wave header */
.pond-wave-header {
    position: relative;
    height: 84px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--grey-bg);
    border: 1px solid var(--border);
    margin-bottom: 8px;
}
.bubble {
    animation: cb-bubble 3s ease-in infinite;
}
.bubble.b2 { animation-delay: 1s; }
.bubble.b3 { animation-delay: 2s; }

/* Stale card style on sensor cards */
.sensor-card.tint-stale {
    background: repeating-linear-gradient(135deg, var(--grey-bg) 0 10px, var(--card-bg) 10px 20px);
    border-style: dashed;
}
.sensor-card.tint-alert {
    animation: cb-alertpulse 2s ease-in-out infinite;
}
.stale-notice-box {
    height: 90px;
    border-radius: var(--radius-md);
    border: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.4);
    color: var(--muted);
    margin-bottom: 8px;
}
html[data-theme="dark"] .stale-notice-box {
    background: rgba(0, 0, 0, 0.2);
}

/* Power Flow & Ring */
.flow {
    stroke-dasharray: 10 10;
    animation: cb-flow var(--flow, 1s) linear infinite;
}
.power-flow-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.power-flow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.power-flow-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.power-flow-svg {
    width: 100%;
    height: 70px;
    display: block;
}

.ring-fg {
    transition: stroke-dashoffset 0.8s ease;
}
.power-ring-container {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--grey-bg);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    border: 1px solid var(--border);
}
.power-ring-svg {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
}
.power-ring-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.power-ring-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
}
.power-ring-desc {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.35;
}

/* Plan animations matching idea prototypes */
.ping {
    transform-box: fill-box;
    transform-origin: center;
    animation: cb-ping 1.8s ease-out infinite;
}
.pwave {
    animation: cb-wave 3s linear infinite;
}
.pdrop {
    animation: cb-drop 1s ease-in infinite;
}
.pdrop.d2 {
    animation-delay: 0.33s;
}
.pdrop.d3 {
    animation-delay: 0.66s;
}

/* Power page hero cards in summary grid */
.power-summary-grid .power-flow-card {
    grid-column: span 3;
}
.power-summary-grid .power-ring-container,
.power-summary-grid .power-ring-card {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .power-summary-grid .power-flow-card,
    .power-summary-grid .power-ring-container,
    .power-summary-grid .power-ring-card {
        grid-column: span 2;
    }
}

/* Toast Notification */
.toast-container {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 420px;
}
.toast {
    pointer-events: auto;
    background: #11241a;
    color: #ffffff;
    border-radius: 14px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    font-size: 0.88rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: cb-toast-in 0.3s ease-out forwards;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.toast.is-hiding {
    animation: cb-toast-out 0.3s ease-in forwards;
}
.toast.is-error {
    background: #2b1111;
    border-color: rgba(239, 68, 68, 0.3);
}
.toast-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ok);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.toast.is-error .toast-icon {
    background: var(--alert);
}
.toast-text {
    line-height: 1.35;
    flex: 1;
}
@media (max-width: 640px) {
    .toast-container {
        left: 12px;
        right: 12px;
        bottom: 16px;
        max-width: none;
    }
}

/* Numeric easing */
.ease-val {
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.ease-val.val-change {
    opacity: 0.3;
    transform: translateY(-2px);
}

/* ---------- Kawalan (Control) Page (Task 019) ---------- */
.control-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

/* Not armed banner */
.not-armed-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius-md);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.not-armed-banner[hidden] {
    display: none !important;
}
.banner-icon-wrap {
    color: var(--warn);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.banner-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.banner-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
}
.banner-desc {
    font-size: 0.84rem;
    color: var(--muted);
}

/* 2-column layout */
.control-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 20px;
    align-items: start;
}
.control-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Kind Switcher Tabs */
.control-kind-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.control-kind-nav[hidden] {
    display: none !important;
}
.kind-tab-btn {
    padding: 8px 18px;
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 9999px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 40px;
}
.kind-tab-btn:hover {
    color: var(--text);
    border-color: var(--muted);
}
.kind-tab-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

/* Action & Counter Bar */
.control-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.action-bar-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.control-group-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.control-group-counter {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 500;
}
.action-bar-right {
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn-text-action {
    background: none;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}
.btn-text-action:hover {
    background: var(--primary-light);
    text-decoration: underline;
}
.action-sep {
    color: var(--muted);
}
.badge-read-only {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--grey-bg);
    color: var(--muted);
    border: 1px solid var(--border);
}

/* Zones and Tiles Grid */
.control-zones {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.control-zone-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
}
.zone-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.zone-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.zone-badge-pill {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--grey-bg);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
}
.btn-zone-all {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--grey-bg);
    border: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 40px;
}
.btn-zone-all:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

.control-tiles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.control-tiles-grid.misting-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Control Tile */
.control-tile {
    position: relative;
    background: var(--grey-bg);
    border: 1px solid var(--grey-border);
    border-radius: var(--radius-md);
    padding: 14px 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    min-height: 128px;
}
.control-tile:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}
.control-tile.is-selected {
    background: var(--primary-light);
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary);
}
.control-tile.is-on {
    border-color: var(--ok-border);
}
.control-tile.read-only {
    cursor: default;
}
.control-tile.read-only:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--grey-border);
}

.tile-checkbox-wrap {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tile-checkbox {
    width: 22px;
    height: 22px;
    accent-color: var(--primary);
    cursor: pointer;
    margin: 0;
}
.tile-icon-box {
    margin: 4px 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tile-name {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.tile-mode-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tile-state-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
}
.tile-state-text.state-on {
    color: var(--ok);
}
.tile-state-text.state-off {
    color: var(--muted);
}
.tile-state-text.state-unknown {
    color: var(--muted);
    font-style: italic;
}
.tile-feedback-time {
    font-size: 0.68rem;
    color: var(--muted);
    line-height: 1.2;
}

/* Command discrepancy pill badge */
.tile-discrepancy {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.25;
    margin-top: 2px;
    text-align: center;
    white-space: normal;
    word-break: break-word;
}
.tile-discrepancy.not-dispatched {
    background: var(--warn-bg);
    color: var(--warn);
    border: 1px solid var(--warn-border);
}
.tile-discrepancy.awaiting {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--primary);
}
.tile-discrepancy.delivered {
    background: var(--card-bg);
    color: var(--muted);
    border: 1px dashed var(--border);
}
.tile-discrepancy.timeout {
    background: var(--alert-bg);
    color: var(--alert);
    border: 1px solid var(--alert-border);
}

/* Right Control Panel */
.control-panel-aside {
    position: sticky;
    top: 18px;
}
.control-panel-card {
    padding: 20px;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.panel-header {
    margin-bottom: 14px;
}
.panel-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.panel-sub {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.panel-count-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 10px;
    line-height: 1.2;
}
.selected-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.chip-output {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    border-radius: 6px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 700;
    min-height: 32px;
}
.chip-output button {
    background: none;
    border: none;
    padding: 2px 4px;
    color: inherit;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.15s ease;
}
.chip-output button:hover {
    background: rgba(0, 0, 0, 0.08);
}
.panel-empty-box {
    padding: 60px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Mode Switch Tabs in Panel */
.panel-mode-tabs {
    display: flex;
    background: var(--grey-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px;
    gap: 3px;
    margin-bottom: 14px;
}
.panel-mode-btn {
    flex: 1;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 40px;
}
.panel-mode-btn:hover:not(.active) {
    color: var(--text);
}
.panel-mode-btn.active {
    background: var(--primary);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

/* Mode Switch Warning Callout */
.mode-switch-warning {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 14px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.35;
}
.mode-switch-warning-icon {
    color: var(--warn);
    flex-shrink: 0;
    margin-top: 1px;
}

.differing-settings-notice {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    color: var(--text);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.35;
}
.badge-differing {
    display: inline-block;
    color: var(--warn);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}
.differing-desc {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 500;
}
.field-error-inline {
    color: var(--alert);
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 4px;
    line-height: 1.25;
}

/* Manual Form */
.manual-mode-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
}
.manual-icon-preview {
    display: flex;
    justify-content: center;
    width: 76px;
    height: 76px;
    align-items: center;
    border-radius: 50%;
    background: var(--grey-bg);
}
.manual-switch-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}
.btn-switch {
    min-height: 48px;
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid var(--border);
}
.btn-switch-on {
    background: var(--ok);
    color: #ffffff;
    border-color: var(--ok);
}
.btn-switch-on:hover:not(:disabled) {
    opacity: 0.9;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35);
}
.btn-switch-off {
    background: var(--grey-bg);
    color: var(--text);
    border-color: var(--border);
}
.btn-switch-off:hover:not(:disabled) {
    background: var(--card-border);
}
.btn-switch:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.manual-mode-hint {
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
    margin: 0;
}
.manual-save-first-notice {
    font-size: 0.82rem;
    color: var(--warn);
    font-weight: 700;
    text-align: center;
    line-height: 1.35;
}

/* Schedule Form */
.schedule-mode-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.schedule-slots-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.schedule-slot-item {
    background: var(--grey-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.schedule-slot-item.has-error {
    border-color: var(--alert);
    background: var(--alert-bg);
}
.schedule-slot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.slot-badge {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
}
.btn-delete-slot {
    background: none;
    border: none;
    color: var(--alert);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
    min-height: 32px;
}
.btn-delete-slot:hover {
    text-decoration: underline;
}
.schedule-days-pills {
    display: flex;
    gap: 4px;
}
.day-chip {
    flex: 1;
    padding: 6px 0;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 700;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--muted);
    cursor: pointer;
    transition: all 0.1s ease;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.day-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}
.schedule-times-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: center;
}
.time-field-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.time-field-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
}
.time-field-input {
    min-height: 38px;
    padding: 4px 8px;
    font-size: 0.9rem;
    font-family: inherit;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
}
.slot-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    margin-top: 14px;
    min-height: 38px;
}
.slot-toggle-label input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    margin: 0;
}
.slot-error-msg {
    font-size: 0.78rem;
    color: var(--alert);
    font-weight: 700;
    line-height: 1.3;
}
.btn-add-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-add-slot:hover {
    background: var(--primary-light);
    border-color: var(--primary);
}
.schedule-rules-help {
    font-size: 0.76rem;
    color: var(--muted);
    line-height: 1.4;
    font-style: italic;
    margin: 0;
}

/* Sensor Form */
.sensor-mode-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sensor-source-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sensor-source-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--muted);
}
.sensor-source-select {
    min-height: 42px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.88rem;
    font-family: inherit;
}
.sensor-reading-preview {
    background: var(--grey-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.sensor-thresholds-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.threshold-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.threshold-label {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--muted);
    line-height: 1.25;
}
.threshold-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.threshold-input {
    width: 100%;
    min-height: 44px;
    padding: 6px 36px 6px 12px;
    font-size: 1.25rem;
    font-weight: 800;
    font-family: inherit;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
}
.threshold-unit {
    position: absolute;
    right: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    pointer-events: none;
}
.sensor-deadband-note {
    font-size: 0.76rem;
    color: var(--muted);
    font-style: italic;
    line-height: 1.35;
    margin: 0;
}
.sensor-mixed-warning {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    color: var(--text);
    padding: 14px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Panel Footer */
.panel-footer-actions {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.panel-footer-note {
    font-size: 0.76rem;
    color: var(--muted);
    text-align: center;
    margin: 0;
}
.btn-apply-mode {
    min-height: 44px;
    font-size: 0.95rem;
    font-weight: 700;
    width: 100%;
}
.panel-error-summary {
    font-size: 0.82rem;
    color: var(--alert);
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

/* Mobile Responsiveness */
.mobile-control-bar {
    display: none;
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 100;
}
.btn-mobile-edit {
    width: 100%;
    min-height: 48px;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}
.btn-drawer-close {
    display: none;
    background: none;
    border: none;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 8px;
    min-height: 40px;
}

@media (max-width: 960px) {
    .control-layout {
        display: block;
    }
    .control-panel-aside {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        z-index: 1000;
        transform: translateY(105%);
        transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
        border-radius: 20px 20px 0 0;
        max-height: 85vh;
        overflow-y: auto;
        background: var(--card-bg);
    }
    .control-panel-aside.is-open {
        transform: translateY(0);
    }
    .btn-drawer-close {
        display: block;
    }
    .control-drawer-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        backdrop-filter: blur(2px);
    }
    .mobile-control-bar {
        display: block;
    }
    .control-tiles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .control-tiles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .control-tile {
        padding: 10px 8px;
        min-height: 120px;
    }
    .tile-name {
        font-size: 0.9rem;
    }
}

/* ========================================================
   SISTEM PAGE (Task 014)
   ======================================================== */
.system-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.system-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.system-section-heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.btn-refresh-system {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    min-height: 38px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-refresh-system:hover {
    background: var(--grey-bg);
}
.btn-refresh-system.is-spinning svg {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.system-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.system-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease;
}
.system-card.border-down {
    border-color: var(--alert);
}
.system-card.border-warning {
    border-color: var(--status-warning, #ed6c02);
}
.system-card-subnote.text-warning {
    color: var(--status-warning, #ed6c02);
    font-weight: 600;
}
.system-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.system-card-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--grey-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}
.system-chip {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
}
.chip-ok {
    background: rgba(46, 125, 50, 0.12);
    color: var(--status-normal, #2e7d32);
    border: 1px solid rgba(46, 125, 50, 0.3);
}
.chip-warning {
    background: rgba(237, 108, 2, 0.12);
    color: var(--status-warning, #ed6c02);
    border: 1px solid rgba(237, 108, 2, 0.3);
}
.chip-down {
    background: rgba(211, 47, 47, 0.14);
    color: var(--status-alert, #d32f2f);
    border: 1px solid rgba(211, 47, 47, 0.35);
}
@keyframes pulse-down-chip {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.75; transform: scale(0.96); }
}
.chip-down.is-pulsing {
    animation: pulse-down-chip 2s ease-in-out infinite;
}
.chip-unknown {
    background: var(--grey-bg);
    color: var(--muted);
    border: 1px solid var(--border);
}
.system-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-top: 4px;
}
.system-card-detail {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.35;
}
.system-card-metric {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--text);
    margin: 2px 0;
}
.system-card-subnote {
    font-size: 0.76rem;
    font-style: italic;
    color: var(--muted);
    line-height: 1.35;
}

/* Pipeline Flow */
.system-pipeline-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
}
.pipeline-node {
    flex: 1;
    min-width: 140px;
    background: var(--grey-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pipeline-node-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
}
.pipeline-node-sub {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--muted);
}
.pipeline-status-dot {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.dot-ok {
    background: var(--status-normal, #2e7d32);
    box-shadow: 0 0 6px rgba(46, 125, 50, 0.4);
}
.dot-warning {
    background: var(--status-warning, #ed6c02);
    box-shadow: 0 0 6px rgba(237, 108, 2, 0.4);
}
.dot-down {
    background: var(--status-alert, #d32f2f);
    box-shadow: 0 0 6px rgba(211, 47, 47, 0.4);
}
.dot-unknown {
    background: var(--muted);
}
.pipeline-arrow {
    font-size: 1.3rem;
    color: var(--muted);
    font-weight: 700;
    user-select: none;
    opacity: 0.7;
}

/* Summary Card */
.system-summary-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--shadow-sm);
}
.system-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.summary-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
}
.summary-value {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--text);
}
.summary-highlight {
    font-weight: 700;
}
.summary-meta-time {
    font-size: 0.82rem;
    color: var(--muted);
}
.system-app-line {
    font-size: 0.78rem;
    color: var(--muted);
    font-style: italic;
    text-align: right;
}

/* ========================================================
   AUDIT LOGS PAGE (Task 014)
   ======================================================== */
.audit-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.audit-filters-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--shadow-sm);
}
.audit-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.audit-search-input {
    flex: 1;
    min-height: 42px;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
}
.btn-audit-search {
    min-height: 42px;
    padding: 0 20px;
    font-weight: 700;
}
.audit-groups-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.audit-group-chip {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--grey-bg);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.audit-group-chip:hover {
    border-color: var(--primary);
    color: var(--text);
}
.audit-group-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}
.audit-secondary-filters {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.filter-field-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.filter-date-label {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
}
.audit-filter-select,
.audit-filter-date {
    min-height: 38px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
}
.btn-reset-filters {
    min-height: 38px;
    padding: 0 14px;
    font-size: 0.84rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Audit Table */
.audit-table-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.audit-table-wrap {
    width: 100%;
    overflow-x: auto;
}
.audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    text-align: left;
}
.audit-table th {
    background: var(--grey-bg);
    padding: 12px 16px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}
.audit-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.col-time {
    width: 160px;
    white-space: nowrap;
    color: var(--muted);
    font-size: 0.84rem;
}
.col-user {
    width: 180px;
    font-weight: 600;
}
.col-action {
    width: 180px;
}
.col-target {
    width: 180px;
}
.col-details {
    width: 120px;
    text-align: right;
}
.action-badge {
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(0, 114, 63, 0.1);
    color: var(--primary, #00723f);
}
.action-badge.action-auth {
    background: rgba(33, 150, 243, 0.12);
    color: #1976d2;
}
.action-badge.action-user {
    background: rgba(156, 39, 176, 0.12);
    color: #7b1fa2;
}
.action-badge.action-threshold {
    background: rgba(255, 152, 0, 0.12);
    color: #e65100;
}
.action-badge.action-device {
    background: rgba(0, 150, 136, 0.12);
    color: #00796b;
}
.action-badge.action-alarm {
    background: rgba(244, 67, 54, 0.12);
    color: #d32f2f;
}
.action-badge.action-control {
    background: rgba(76, 175, 80, 0.14);
    color: #2e7d32;
}
.target-tag {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.82rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--grey-bg);
    border: 1px solid var(--border);
    color: var(--text);
}
.btn-details-toggle {
    min-height: 32px;
    padding: 2px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 6px;
}
.btn-details-toggle.is-open {
    background: var(--grey-bg);
}

/* Detail Drawer (before -> after) */
.audit-detail-row td {
    padding: 0 16px 14px 16px;
    background: var(--grey-bg);
}
.audit-detail-drawer {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    margin: 4px 0;
}
.audit-diff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.diff-column {
    background: var(--grey-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 14px;
}
.diff-col-heading {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 8px 0;
}
.diff-entry {
    font-size: 0.84rem;
    padding: 4px 0;
    border-bottom: 1px dashed var(--border);
    word-break: break-all;
}
.diff-entry.is-changed {
    color: var(--primary);
    font-weight: 600;
}
.diff-key {
    color: var(--muted);
    font-weight: 700;
    margin-right: 4px;
}
.diff-val {
    color: var(--text);
}
.detail-keyval-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.keyval-entry {
    font-size: 0.84rem;
    padding: 2px 0;
}
.keyval-key {
    color: var(--muted);
    font-weight: 700;
    margin-right: 4px;
}
.keyval-val {
    color: var(--text);
}
.detail-ip {
    font-size: 0.76rem;
    color: var(--muted);
    margin-top: 10px;
    font-family: monospace;
}
.detail-empty-note {
    font-size: 0.82rem;
    color: var(--muted);
    font-style: italic;
}

/* Pagination Bar */
.audit-pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
}
.audit-total-indicator {
    font-size: 0.84rem;
    color: var(--muted);
    font-weight: 600;
}
.audit-page-buttons {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.audit-page-indicator {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text);
}
.btn-page-prev,
.btn-page-next {
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.btn-page-prev:disabled,
.btn-page-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.audit-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 0.92rem;
}
.audit-mobile-cards {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 960px) {
    .system-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .system-cards-grid {
        grid-template-columns: 1fr;
    }
    .system-pipeline-card {
        padding: 14px;
    }
    .pipeline-node {
        min-width: 110px;
        padding: 10px;
    }
    .pipeline-node-name {
        font-size: 0.82rem;
    }
    .pipeline-node-sub {
        font-size: 0.68rem;
    }
    .pipeline-arrow {
        font-size: 1rem;
    }

    /* Mobile Audit Cards */
    .audit-table-wrap {
        display: none;
    }
    .audit-mobile-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }
    .audit-card {
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .audit-card-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .audit-card-time {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--muted);
    }
    .audit-card-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.85rem;
    }
    .audit-card-label {
        font-weight: 700;
        color: var(--muted);
        font-size: 0.78rem;
        width: 70px;
    }
    .audit-card-footer {
        margin-top: 6px;
    }
    .audit-diff-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ========================================================
   LAPORAN PAGE (Task 020)
   ======================================================== */
.reports-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.report-filter-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: var(--shadow-sm);
}
.report-filter-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.report-dates-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.filter-date-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.input-date {
    min-height: 40px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
}
.input-date.has-error {
    border-color: var(--alert);
    background: var(--alert-bg, rgba(211, 47, 47, 0.05));
}
.field-error-msg {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--alert);
    line-height: 1.3;
}
.params-error-banner {
    background: var(--alert-bg, rgba(211, 47, 47, 0.08));
    border: 1px solid var(--alert);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin-bottom: 10px;
}
.quick-chips-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}
.max-days-hint {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: 0.02em;
}
.quick-chips-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.chip-date {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--grey-bg);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.chip-date:hover {
    border-color: var(--primary);
    background: rgba(0, 114, 63, 0.08);
}

.report-params-section {
    display: flex;
    flex-direction: column;
}
.params-groups-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.params-group-card {
    background: var(--grey-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.params-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.params-group-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.grp-count-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    background: var(--card-bg);
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid var(--border);
}
.params-group-actions {
    display: flex;
    gap: 8px;
}
.btn-grp-action {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}
.btn-grp-action:hover {
    text-decoration: underline;
}
.params-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.param-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    min-height: 40px;
    user-select: none;
}
.param-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    margin: 0;
    cursor: pointer;
}

.report-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.btn-generate-report {
    min-height: 44px;
    padding: 0 24px;
    font-size: 0.95rem;
    font-weight: 700;
}
.report-downloads-wrap {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.btn-download-link {
    min-height: 42px;
    padding: 0 16px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--grey-bg);
    color: var(--text);
    transition: all 0.15s ease;
}
.btn-download-link:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}
.report-pdf-disclaimer {
    font-size: 0.76rem;
    color: var(--muted);
    font-style: italic;
    margin-top: 2px;
}

/* Results Section */
.report-results-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.report-simulated-banner {
    background: rgba(237, 108, 2, 0.08);
    border: 1px solid rgba(237, 108, 2, 0.3);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 12px;
}
.simulated-badge {
    background: #ed6c02;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.report-highlights-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow-sm);
}
.highlights-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.highlights-list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    line-height: 1.5;
    font-size: 0.9rem;
    color: var(--text);
}

.report-parameter-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--shadow-sm);
}
.param-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.param-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.param-diff-badge {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(0, 114, 63, 0.1);
    color: var(--primary, #00723f);
    border: 1px solid rgba(0, 114, 63, 0.25);
}
.report-chart-container {
    width: 100%;
    height: 260px;
    position: relative;
}
.report-canvas {
    width: 100%;
    height: 100%;
    display: block;
}
.report-chart-legend {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.legend-line.solid-line {
    display: inline-block;
    width: 24px;
    height: 0;
    border-top: 2px solid var(--primary);
}
.legend-line.dashed-line {
    display: inline-block;
    width: 24px;
    height: 0;
    border-top: 2px dashed var(--series-b);
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}
.report-summary-table,
.report-daily-table,
.report-energy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    text-align: left;
}
.report-summary-table th,
.report-daily-table th,
.report-energy-table th {
    background: var(--grey-bg);
    padding: 10px 14px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}
.report-summary-table td,
.report-daily-table td,
.report-energy-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.sub-th {
    font-size: 0.72rem !important;
    background: var(--card-bg) !important;
}
.col-device-name,
.col-date-val {
    font-weight: 600;
}
.highlight-avg,
.highlight-total {
    font-weight: 700;
    color: var(--primary);
}
.col-notes-cell {
    font-size: 0.78rem;
    color: var(--muted);
}
.btn-toggle-daily {
    align-self: flex-start;
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}
.report-daily-wrap {
    margin-top: 8px;
    background: var(--grey-bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    padding: 6px;
}

.report-energy-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--shadow-sm);
}
.energy-rule-note {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--muted);
    margin: 0;
}
.table-total-row td {
    font-weight: 800;
    background: var(--grey-bg);
    border-top: 2px solid var(--border);
}

.report-loading-card,
.report-empty-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 40px 20px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.report-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    margin: 0 auto 14px auto;
    animation: spin 0.9s linear infinite;
}
.report-loading-text {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--muted);
    margin: 0;
}
.report-empty-prompt {
    font-size: 0.92rem;
    color: var(--muted);
    margin: 0;
}

@media (max-width: 960px) {
    .params-groups-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .report-dates-row {
        flex-direction: column;
    }
    .filter-date-group {
        width: 100%;
    }
    .input-date {
        width: 100%;
    }
    .btn-generate-report {
        width: 100%;
    }
    .report-downloads-wrap {
        width: 100%;
    }
    .btn-download-link {
        flex: 1;
    }
    .param-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .param-checkbox-label {
        min-height: 40px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .chip-down.is-pulsing,
    .btn-refresh-system.is-spinning svg,
    .is-on .fan-svg .blades,
    .state-on .fan-svg .blades,
    .is-pending .fan-svg .ring,
    .state-pending .fan-svg .ring,
    .plan-fan.state-on .plan-fan-blades,
    .air,
    .drop,
    .mist-cloud,
    .output.state-on,
    .tile.is-on,
    .output.state-alert,
    .tile.is-alert,
    .sensor-card.tint-alert,
    .live::after,
    .ping,
    .wave,
    .pwave,
    .pdrop,
    .bubble,
    .flow,
    .toast {
        animation: none !important;
    }
    .needle,
    .lvl,
    .ring-fg,
    .ease-val {
        transition: none !important;
    }
    .mist-on .drop,
    .state-on .drop { opacity: 0.9; }
    .mist-on .mist-cloud,
    .state-on .mist-cloud { opacity: 0.5; }
}

/* ---------- Page changes (docs/FRONTEND.md Motion) ----------
   Cross-document view transition: the sidebar and top bar stay still and only the content fades, so moving between
   pages does not flash. Browsers without support navigate as before; reduced motion turns it off. */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: sidebar; }
.topbar { view-transition-name: topbar; }
::view-transition-group(sidebar),
::view-transition-group(topbar),
::view-transition-new(sidebar),
::view-transition-new(topbar) { animation: none; }
::view-transition-old(sidebar),
::view-transition-old(topbar) { display: none; }
::view-transition-old(root) { animation: 120ms ease-out both cb-vt-out; }
::view-transition-new(root) { animation: 180ms ease-out both cb-vt-in; }
@keyframes cb-vt-out { to { opacity: 0; } }
@keyframes cb-vt-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* Session expired banner */
.session-expired-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px;
    margin-bottom: 16px;
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius-md);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.session-expired-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.session-expired-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
}
.session-expired-desc {
    font-size: 0.84rem;
    color: var(--muted);
}
.session-expired-link {
    min-height: 38px;
    padding: 0 16px;
    flex-shrink: 0;
}

/* ========================================================
   KAWALAN PELAN VIEW (Task 023)
   ======================================================== */
.control-view-nav {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
.control-view-toggle.segmented {
    display: inline-flex;
    background: var(--grey-bg);
    padding: 3px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    gap: 2px;
}
.btn-view-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    min-height: 38px;
    transition: all 0.15s ease;
}
.btn-view-tab:hover {
    color: var(--text);
}
.btn-view-tab.active {
    background: var(--card-bg);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

/* Pelan View Layout */
.control-plan-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 190px;
    gap: 16px;
    align-items: stretch;
}

/* Barn Card */
.control-barn-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    min-width: 0;
}

.control-barn-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.control-barn-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.control-barn-badge {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 800;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.control-barn-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.btn-barn-all {
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-light);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    transition: all 0.15s ease;
}
.btn-barn-all:hover {
    border-color: var(--primary);
}

/* Misting Pipeline at top of Barn */
.control-barn-pipeline {
    position: relative;
    padding-top: 10px;
    margin-bottom: 4px;
}
.barn-pipe-main-line {
    position: absolute;
    top: 24px;
    left: 20px;
    right: 20px;
    height: 6px;
    background: var(--plan-pipe, #2b7fae);
    opacity: 0.35;
    border-radius: 3px;
    z-index: 1;
}
.barn-pipe-main-line.is-flowing {
    opacity: 0.85;
    background: repeating-linear-gradient(90deg, var(--plan-pipe, #2b7fae) 0 10px, transparent 10px 18px);
    background-size: 28px 100%;
    animation: pipe-flow-h 1.2s linear infinite;
}
@keyframes pipe-flow-h {
    to { background-position: -28px 0; }
}

.barn-valves-row {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-around;
    padding: 0 16px;
}

/* Barn Interior: 2 Columns of Fans + Center Env */
.control-barn-interior {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    background: var(--page-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    padding: 14px 10px;
    position: relative;
}

.barn-fans-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 2;
}

/* Vertical Misting Line down through barn */
.barn-vertical-pipe {
    position: absolute;
    top: -14px;
    bottom: -14px;
    width: 4px;
    background: var(--plan-pipe, #2b7fae);
    opacity: 0.25;
    border-radius: 2px;
    z-index: 1;
}
.barn-vertical-pipe.is-flowing {
    opacity: 0.85;
    background: repeating-linear-gradient(180deg, var(--plan-pipe, #2b7fae) 0 8px, transparent 8px 16px);
    background-size: 100% 24px;
    animation: pipe-flow-v 1.2s linear infinite;
}
@keyframes pipe-flow-v {
    to { background-position: 0 24px; }
}

/* Center Env Reading Pill */
.barn-env-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 0 4px;
}
.barn-env-pill {
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md, 12px);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    min-width: 90px;
}
.barn-env-pill.status-normal { border-color: var(--ok); }
.barn-env-pill.status-warning { border-color: var(--warn); }
.barn-env-pill.status-alert { border-color: var(--alert); }
.barn-env-pill.status-stale { border-color: var(--grey); }

.barn-env-dot-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
}
.barn-env-temp {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.barn-env-rh {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Output Buttons in Plan View */
.control-plan-output {
    position: relative;
    width: 64px;
    height: 64px;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-md, 12px);
    background: var(--card-bg);
    border: 2px solid var(--border);
    color: var(--text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    font-family: inherit;
}
.control-plan-output:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}
.control-plan-output:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Output Selected: Green Ring */
.control-plan-output[aria-pressed="true"],
.control-plan-output.is-selected {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-light), var(--shadow-sm);
}

/* Output State: ON */
.control-plan-output.is-on {
    background: var(--ok-bg);
    border-color: var(--ok);
}
.control-plan-output.is-on.is-mist {
    background: var(--page-bg);
    border-color: var(--plan-pipe, #2b7fae);
}

/* Output State: Unknown (Striped) */
.control-plan-output.state-unknown {
    background: repeating-linear-gradient(45deg, var(--grey-bg) 0 4px, var(--card-bg) 4px 8px);
    border-color: var(--grey);
}

/* Output Read Only (User role) */
.control-plan-output.read-only {
    cursor: default;
}
.control-plan-output.read-only:hover {
    transform: none;
    border-color: var(--border);
}
.control-plan-output.read-only.is-on {
    border-color: var(--ok);
}

/* Output Mode Badge */
.plan-output-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--grey-bg);
    color: var(--muted);
    border: 1px solid var(--border);
    line-height: 1;
}

/* Output Hourglass / Command Status Marks */
.plan-output-cmd {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 3px;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.plan-output-cmd.status-awaiting,
.plan-output-cmd.status-not-dispatched {
    color: var(--warn);
    background: var(--warn-bg);
    border-color: var(--warn-border);
}
.plan-output-cmd.status-delivered {
    color: var(--muted);
    background: var(--card-bg);
    border: 1px dashed var(--border);
}
.plan-output-cmd.status-timeout {
    color: var(--alert);
    background: var(--alert-bg);
    border-color: var(--alert-border);
    font-weight: 900;
}
.plan-cmd-icon {
    display: inline-block;
    line-height: 1;
}

/* Output Label */
.plan-output-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text);
    margin-top: 2px;
    line-height: 1;
}

/* Fan icon spinning in plan view */
.control-plan-output.is-fan .fan-wrap {
    width: 32px !important;
    height: 32px !important;
}
.control-plan-output.is-fan .fan-svg {
    width: 32px !important;
    height: 32px !important;
}
.control-plan-output.is-fan.is-on .blades {
    animation: plan-v2-spin 1.1s linear infinite;
    transform-origin: center;
    transform-box: fill-box;
}

/* Misting spray in plan view */
.control-plan-output.is-mist .mist-svg {
    width: 30px !important;
    height: 30px !important;
}
.control-plan-output.is-mist.is-on .mist-spray {
    animation: plan-v2-spray 1.4s ease-out infinite;
    transform-origin: top center;
    transform-box: fill-box;
}

/* Pump House Card */
.control-pumphouse-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.85rem;
}
.control-pumphouse-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.control-pumphouse-badge {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--grey-bg);
    color: var(--text);
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.control-pumphouse-title {
    font-weight: 700;
    color: var(--text);
}
.control-pumphouse-panel {
    background: var(--page-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.control-pumphouse-sub {
    font-weight: 600;
    color: var(--text);
    font-size: 0.82rem;
}
.control-pumphouse-meter {
    font-size: 0.78rem;
    color: var(--primary);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}
.control-pumphouse-note {
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.35;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .control-plan-output.is-fan.is-on .blades,
    .control-plan-output.is-mist.is-on .mist-spray,
    .barn-pipe-main-line.is-flowing,
    .barn-vertical-pipe.is-flowing {
        animation: none !important;
    }
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .control-plan-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .control-pumphouse-card {
        grid-column: 1 / -1;
    }
}
@media (max-width: 860px) {
    .control-plan-layout {
        grid-template-columns: 1fr;
    }
    .control-barn-interior {
        padding: 12px 6px;
        gap: 8px;
    }
    .control-plan-output {
        width: 58px;
        height: 58px;
    }
    .barn-env-pill {
        min-width: 80px;
        padding: 8px 6px;
    }
    .barn-env-temp {
        font-size: 1rem;
    }
}

/* Visually hidden screen reader helper */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Sidebar data-source hidden state */
.data-source-block[hidden],
.data-source[hidden] {
    display: none !important;
}

/* Plan Status Marks Legend */
.control-plan-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 14px;
    font-size: 0.8rem;
    color: var(--muted);
    padding: 6px 12px;
}
.control-plan-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.legend-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 3px;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    background: var(--card-bg);
    border: 1px solid var(--border);
}
.legend-mark.status-awaiting {
    color: var(--warn);
    background: var(--warn-bg);
    border-color: var(--warn-border);
}
.legend-mark.status-delivered {
    color: var(--muted);
    background: var(--card-bg);
    border: 1px dashed var(--border);
}
.legend-mark.status-timeout {
    color: var(--alert);
    background: var(--alert-bg);
    border-color: var(--alert-border);
    font-weight: 900;
}
.control-plan-legend-sep {
    color: var(--border);
}

/* Dark mode adjustments for delivered chip & status mark */
html[data-theme="dark"] .tile-discrepancy.delivered,
html[data-theme="dark"] .plan-output-cmd.status-delivered,
html[data-theme="dark"] .legend-mark.status-delivered {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--muted);
}

@media (max-width: 640px) {
    .control-plan-legend {
        justify-content: flex-start;
        font-size: 0.75rem;
        gap: 6px 10px;
        padding: 4px 0;
    }
    .chip-output {
        min-height: 38px;
        padding: 5px 10px;
    }
    .chip-output button {
        min-width: 28px;
        min-height: 28px;
    }
}