@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
    --ink: #eef6fa;
    --muted: #9ab0ba;
    --panel: rgba(8, 23, 31, 0.88);
    --panel-soft: rgba(13, 35, 45, 0.78);
    --line: rgba(201, 231, 236, 0.18);
    --cyan: #55d9dc;
    --blue: #1877c9;
    --green: #61d095;
    --amber: #f5c96b;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
    background: #12252a;
    color: var(--ink);
    font-family: 'DM Sans', sans-serif;
}
button, a { font: inherit; }
button { cursor: pointer; }

.tank-header {
    position: absolute;
    inset: 0 0 auto;
    height: 88px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
    background: #0f172a;
    font-family: 'Inter', sans-serif;
}
.tank-brand-area, .tank-header-controls { display: flex; align-items: center; }
.tank-brand-area { min-width: 0; gap: 12px; }
.tank-brand-logo { display: block; width: auto; height: 68px; }
.tank-brand-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
    animation: tank-header-pulse 2s infinite;
}
@keyframes tank-header-pulse {
    0%, 100% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 1; }
}
.tank-heading { min-width: 0; }
.back-link {
    width: max-content;
    color: #38bdf8;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.back-link:hover { color: #fff; }
h1 { margin: 0; color: var(--ink); font-size: 1.1rem; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.tank-header-controls { flex: 0 0 auto; gap: 14px; }
.header-status {
    display: flex;
    flex: 0 0 92px;
    min-width: 0;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: var(--muted);
    font: 0.58rem 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.header-status[hidden] { visibility: hidden; }
.status-light {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 12px var(--amber);
}
.header-status #model-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-light.ready { background: var(--green); box-shadow: 0 0 12px var(--green); }
.status-light.error { background: #f27575; box-shadow: 0 0 12px #f27575; }

@media (max-width: 680px) {
    .tank-header { gap: 10px; padding: 0 12px; }
    .tank-brand-area { gap: 8px; }
    .tank-brand-logo { height: 48px; }
    .tank-brand-dot { width: 7px; height: 7px; }
    .tank-header h1 { overflow: hidden; font-size: 0.78rem; text-overflow: ellipsis; }
    .tank-header-controls { gap: 8px; }
    .header-status { display: none; }
    .back-link { font-size: 0.66rem; white-space: nowrap; }
}

.tank-workspace { position: absolute; inset: 88px 0 0; overflow: hidden; }
#forge-viewer { position: absolute; inset: 0; }
#pump-pins { position: absolute; inset: 0; z-index: 8; pointer-events: none; }

.viewer-actions {
    position: absolute;
    top: 18px;
    left: 50%;
    z-index: 12;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
}
.viewer-actions button, #bake-btn {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 9px 13px;
    color: var(--ink);
    background: var(--panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    font-size: 0.76rem;
    font-weight: 700;
}
#design-case-button { min-width: 112px; }
.viewer-actions button:hover, #bake-btn:hover:not(:disabled) {
    border-color: rgba(85, 217, 220, 0.7);
    color: var(--cyan);
}
.case-controls {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(85, 217, 220, 0.42);
    border-radius: 6px;
    color: var(--ink);
    background: rgba(8, 23, 31, 0.94);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.case-controls[hidden] { display: none; }
.case-heading, .case-timeline, .case-footer { display: flex; align-items: center; gap: 9px; }
.case-heading { justify-content: space-between; color: var(--muted); font: 0.62rem 'Space Mono', monospace; }
.case-heading strong { color: var(--cyan); font-size: 0.7rem; }
.case-timeline { margin-top: 9px; }
.case-timeline button, .case-footer button, .case-footer select {
    min-height: 30px;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 5px 8px;
    color: var(--ink);
    background: var(--panel-soft);
    font-size: 0.65rem;
}
.case-timeline button:hover, .case-footer button:hover { border-color: var(--cyan); color: var(--cyan); }
.case-timeline input { flex: 1; min-width: 60px; accent-color: var(--cyan); }
.case-timeline output { min-width: 44px; color: var(--cyan); font: 0.6rem 'Space Mono', monospace; text-align: right; white-space: nowrap; }
.case-footer { margin-top: 9px; color: var(--muted); font-size: 0.6rem; }
.case-footer select { padding-right: 18px; }
.case-level-reading { margin-left: auto; color: var(--cyan); font: 700 1.15rem 'Space Mono', monospace; text-align: right; white-space: nowrap; }
.case-footer button { white-space: nowrap; }
.case-chart-stack {
    position: absolute;
    top: 18px;
    left: 18px;
    bottom: 84px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(326px, calc(100vw - 36px));
}
.case-chart-stack[hidden] { display: none; }
.case-chart-stack > .case-series-panel {
    position: relative;
    inset: auto;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}
.case-series-panel .chart-frame { flex: 1 1 auto; min-height: 110px; height: auto; }
.design-case-mode #live-chart-stack, .design-case-mode #asset-telemetry, .design-case-mode #pump-detail { display: none !important; }
#bake-btn {
    position: absolute;
    top: 18px;
    right: calc(326px + 36px);
    z-index: 12;
    color: #08232d;
    border-color: var(--cyan);
    background: var(--cyan);
}
#bake-btn:disabled { cursor: wait; opacity: 0.65; }

.viewer-status {
    position: absolute;
    right: 22px;
    bottom: 24px;
    z-index: 12;
    max-width: 320px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--muted);
    background: rgba(8, 23, 31, 0.72);
    font-size: 0.7rem;
    line-height: 1.35;
}
.viewer-status:empty { display: none; }

.dashboard-panel {
    position: absolute;
    z-index: 14;
    padding: 14px;
    border: 1px solid rgba(85, 217, 220, 0.38);
    border-radius: 7px;
    background: rgba(8, 23, 31, 0.9);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24), 0 0 22px rgba(21, 139, 173, 0.08);
    backdrop-filter: blur(14px);
    pointer-events: auto;
}
.live-dashboard-panel {
    position: absolute;
    top: 18px;
    bottom: 12px;
    left: 18px;
    display: flex;
    flex-direction: column;
    width: min(326px, calc(100vw - 36px));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(85, 217, 220, 0.55) transparent;
}
.live-dashboard-panel[hidden] { display: none; }
.live-dashboard-panel .range-tabs { margin-top: 10px; margin-bottom: 10px; }
.live-series {
    flex: 1 1 0;
    display: flex;
    min-height: 0;
    flex-direction: column;
    padding: 5px 0;
    border-bottom: 1px solid var(--line);
}
.live-series:last-of-type { border-bottom: 0; }
.live-series-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.live-series-heading h3 { margin: 0; color: var(--ink); font-size: 0.74rem; font-weight: 600; }
.live-series .chart-frame { flex: 1 1 auto; min-height: 64px; height: auto; margin-top: 3px; }
#rainfall-panel .rainfall-reading { margin-top: 4px; }
#rainfall-panel { border-top: 1px solid var(--line); }
#rainfall-panel .chart-frame { min-height: 58px; }
#rainfall-panel .panel-note { margin-top: 4px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-kicker { display: block; margin-bottom: 4px; color: var(--cyan); font: 700 0.55rem 'Space Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.panel-heading h2 { margin: 0; color: var(--ink); font-size: 0.85rem; font-weight: 600; }
.chart-unit { color: var(--muted); font: 0.56rem 'Space Mono', monospace; text-transform: uppercase; white-space: nowrap; }
.panel-heading-tools { display: flex; align-items: center; gap: 8px; }
.panel-expand-button { width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: transparent; font-size: 1rem; line-height: 1; }
.panel-expand-button:hover, .panel-expand-button[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); }

#asset-telemetry { right: 18px; bottom: 24px; width: 258px; }
#asset-telemetry .metric-grid { grid-template-columns: 1fr; margin-top: 10px; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 13px; overflow: hidden; border: 1px solid rgba(201, 231, 236, 0.12); border-radius: 5px; background: rgba(201, 231, 236, 0.12); }
.metric-cell { min-height: 64px; padding: 9px 8px 7px; background: rgba(13, 35, 45, 0.74); }
.metric-cell span, .metric-cell em { display: block; color: var(--muted); font-size: 0.57rem; font-style: normal; }
.metric-cell strong { display: inline-block; margin-top: 5px; color: var(--cyan); font: 700 1.05rem 'Space Mono', monospace; }
.metric-cell em { display: inline; margin-left: 3px; font: 0.54rem 'Space Mono', monospace; }
.telemetry-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; color: var(--muted); font: 0.58rem 'Space Mono', monospace; }
.telemetry-footer b { color: var(--ink); font-weight: 700; }

.chart-panel { padding-bottom: 12px; }
.compact-heading { align-items: center; }
.range-tabs { display: flex; gap: 4px; margin-top: 12px; }
.range-tabs button { border: 1px solid rgba(201, 231, 236, 0.18); border-radius: 4px; padding: 4px 8px; color: var(--muted); background: transparent; font: 0.58rem 'Space Mono', monospace; }
.range-tabs button:hover, .range-tabs button.active { border-color: var(--cyan); color: #08232d; background: var(--cyan); }
.chart-frame { position: relative; height: 132px; margin-top: 8px; }
.chart-frame canvas { display: block; width: 100% !important; height: 100% !important; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font: 0.62rem 'Space Mono', monospace; pointer-events: none; }
.chart-empty.hidden { display: none; }
.dashboard-panel.is-expanded {
    position: fixed !important;
    inset: 94px 24px 24px;
    width: auto !important;
    height: auto !important;
    max-width: none;
    overflow: auto;
    z-index: 40;
}
.dashboard-panel.is-expanded.chart-panel { display: flex; flex-direction: column; }
.dashboard-panel.is-expanded.chart-panel .chart-frame { flex: 1 1 auto; min-height: 260px; height: auto; }
.live-dashboard-panel.is-expanded .live-series .chart-frame { flex: 1 1 auto; min-height: 150px; height: auto; }
.rainfall-reading { display: flex; align-items: baseline; gap: 5px; margin-top: 12px; }
.rainfall-reading strong { color: var(--cyan); font: 700 1.45rem 'Space Mono', monospace; }
.rainfall-reading span { color: var(--cyan); font: 0.65rem 'Space Mono', monospace; }
.rainfall-reading small { margin-left: auto; max-width: 140px; color: var(--muted); font-size: 0.56rem; line-height: 1.2; text-align: right; }
.panel-note { margin: 8px 0 0; color: var(--muted); font-size: 0.58rem; line-height: 1.35; }

.pump-detail-panel { top: 18px; right: 18px; z-index: 16; width: 326px; }
.icon-button { width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: transparent; font-size: 1.1rem; line-height: 1; }
.icon-button:hover { border-color: var(--cyan); color: var(--cyan); }
.detail-status { display: flex; align-items: center; gap: 7px; margin-top: 16px; color: var(--muted); font: 0.62rem 'Space Mono', monospace; }
.detail-status strong { color: var(--green); font-size: 0.65rem; }
.detail-status strong.off-label { color: var(--muted); }
.detail-status span:last-child { margin-left: auto; color: var(--amber); }
.state-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }
.state-dot.off { background: #7c8a8e; box-shadow: none; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.detail-grid div { padding: 8px; border-left: 2px solid rgba(85, 217, 220, 0.45); background: rgba(13, 35, 45, 0.72); }
.detail-grid span, .detail-grid strong { display: block; }
.detail-grid span { color: var(--muted); font-size: 0.56rem; }
.detail-grid strong { margin-top: 4px; color: var(--ink); font: 700 0.69rem 'Space Mono', monospace; }

#water-marker {
    position: fixed;
    right: 0;
    z-index: 100;
    display: none;
    width: min(310px, 34vw);
    height: 60px;
    transform: translateY(-100%);
    cursor: pointer;
    pointer-events: auto;
}
.water-marker-line { position: absolute; right: 0; bottom: -2px; left: auto; width: 100%; height: 4px; background: linear-gradient(90deg, transparent, var(--cyan)); }
.water-marker-content { position: absolute; right: 7px; bottom: 2px; display: flex; align-items: center; gap: 9px; padding: 6px; border: 1px solid transparent; border-radius: 6px; }
.water-marker:hover .water-marker-content, .water-marker.active .water-marker-content { border-color: rgba(85, 217, 220, 0.5); background: rgba(8, 23, 31, 0.88); }
#water-marker-label { color: var(--cyan); font: 600 0.95rem 'Space Mono', monospace; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.98), 0 0 7px rgba(0, 0, 0, 0.95); }
.water-fill-circle { overflow: hidden; display: block; }
.water-fill-bg { fill: rgba(24, 119, 201, 0.18); stroke: var(--cyan); stroke-width: 2; }
.water-marker.active .water-fill-bg { stroke: #fff; }
#water-level-group { transition: transform 1.4s ease; }
.wave { fill: var(--blue); }
.wave-back { opacity: 0.5; animation: wave-back 3.1s linear infinite; }
.wave-front { opacity: 0.9; animation: wave-front 2.2s linear infinite; }
@keyframes wave-back { from { transform: translateX(-40px); } to { transform: translateX(0); } }
@keyframes wave-front { from { transform: translateX(0); } to { transform: translateX(-40px); } }
#water-fill-pct { fill: #fff; font: 700 0.52rem 'Space Mono', monospace; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: rgba(0, 0, 0, 0.55); stroke-width: 2px; }

.pump-pin {
    position: absolute;
    display: block;
    transform: translate(-50%, -100%);
    pointer-events: auto;
    cursor: pointer;
    text-align: center;
}
.pump-pin-circle { width: 18px; height: 18px; margin: 0 auto; border: 3px solid rgba(255,255,255,0.8); border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.pump-pin-stem { width: 3px; height: 12px; margin: 0 auto; background: rgba(255,255,255,0.7); }
.pump-pin-label { color: #fff; font-size: 0.72rem; font-weight: 700; white-space: nowrap; text-shadow: 0 1px 4px #000; }
.pump-pin-freq { display: none; color: var(--amber); font: 0.66rem 'Space Mono', monospace; text-shadow: 0 1px 4px #000; }
.pump-pin.on .pump-pin-freq { display: block; }
.pump-pin.on .pump-pin-circle { color: var(--green); background: var(--green); }
.pump-pin.off .pump-pin-circle { color: #7c8a8e; background: #7c8a8e; }
.pump-pin.unknown { opacity: 0.55; }
.pump-pin.unknown .pump-pin-circle { color: #9ab0ba; background: transparent; border-style: dashed; box-shadow: none; }
.pump-pin.unknown .pump-pin-freq { display: block; color: var(--muted); }
.pump-pin:hover .pump-pin-circle { border-color: #fff; box-shadow: 0 0 16px 5px currentColor; }
.pump-pin.selected .pump-pin-circle { border-color: #fff; box-shadow: 0 0 16px 5px var(--cyan); }

.adsk-viewing-viewer { outline: none; }
@media (max-width: 680px) {
    .tank-header { height: 68px; gap: 8px; padding: 0 14px; }
    .tank-brand-area { gap: 8px; }
    .tank-brand-logo { height: 48px; }
    .tank-brand-dot { width: 8px; height: 8px; }
    h1 { font-size: 0.84rem; }
    .tank-header-controls { gap: 9px; }
    .back-link { font-size: 0.63rem; }
    .header-status { width: 80px; flex-basis: 80px; gap: 4px; font-size: 0.46rem; letter-spacing: 0.01em; }
    .tank-workspace { inset: 68px 0 0; }
    .viewer-actions { top: 12px; left: 12px; transform: none; }
    .case-chart-stack { top: 56px; right: 12px; bottom: 72px; left: 12px; width: auto; }
    .case-heading { font-size: 0.55rem; }
    .case-timeline, .case-footer { gap: 6px; }
    .case-timeline output { min-width: 40px; font-size: 0.54rem; }
    .case-footer { flex-wrap: wrap; }
    .case-level-reading { font-size: 1.05rem; }
    .viewer-status { right: 12px; bottom: 12px; max-width: 190px; }
    #water-marker { width: 50px; }
    #water-marker-label { display: none; }
    .water-marker-content { right: 0; gap: 0; padding: 2px; }
    #bake-btn { top: 12px; right: 12px; }
    .dashboard-panel { max-width: calc(100vw - 24px); }
    .live-dashboard-panel { top: 55px; right: auto; bottom: 212px; left: 12px; width: min(300px, calc(100vw - 24px)); }
    .live-series { flex: 0 0 auto; padding: 6px 0; }
    .live-series .chart-frame { flex: 0 0 76px; min-height: 76px; height: 76px; }
    #rainfall-panel .chart-frame { flex-basis: 62px; min-height: 62px; height: 62px; }
    #asset-telemetry { right: 12px; bottom: 72px; width: min(248px, calc(100vw - 24px)); }
    .pump-detail-panel { top: 55px; right: 12px; width: 250px; }
    .metric-cell { min-height: 58px; }
    .metric-cell strong { font-size: 0.92rem; }
}
@media (max-width: 420px) {
    .tank-header { gap: 6px; padding: 0 10px; }
    .tank-brand-area { gap: 6px; }
    .tank-brand-logo { height: 40px; }
    h1 { font-size: 0.7rem; }
    .tank-header-controls { flex-direction: column; align-items: flex-end; gap: 2px; }
    .back-link { font-size: 0.58rem; }
    .header-status { flex-basis: auto; gap: 4px; font-size: 0.45rem; letter-spacing: 0.01em; }
    .status-light { width: 7px; height: 7px; flex-basis: 7px; }
}
@media (min-width: 681px) and (max-width: 1207px) {
    .case-chart-stack { top: 56px; }
}
@media (min-width: 681px) and (max-width: 980px) {
    #asset-telemetry { bottom: 24px; width: 230px; }
}
@media (max-width: 560px) {
    .panel-heading { gap: 6px; }
    .panel-heading h2 { font-size: 0.76rem; }
    .panel-kicker { font-size: 0.48rem; }
    .chart-unit { font-size: 0.48rem; }
    .metric-grid { grid-template-columns: 1fr; }
    #asset-telemetry .metric-grid { grid-template-columns: 1fr; }
    .metric-cell { min-height: 43px; padding: 6px; }
    .metric-cell strong { margin-top: 3px; font-size: 0.82rem; }
    .metric-cell em { font-size: 0.46rem; }
    .telemetry-footer { display: block; font-size: 0.52rem; line-height: 1.6; }
    .rainfall-reading { flex-wrap: wrap; }
    .rainfall-reading small { width: 100%; margin-left: 0; max-width: none; text-align: left; }
    .live-series .chart-frame { flex-basis: 64px; min-height: 64px; height: 64px; }
    #rainfall-panel .chart-frame { flex-basis: 54px; min-height: 54px; height: 54px; }
}