/* HvacSim demo — single-page layout: 3D viewer + control panel sidebar. */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
}

body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: #1f2933;
    background: #eee;
}

.layout {
    display: flex;
    height: 100vh;
    width: 100%;
}

/* ---- 3D viewer area ---- */

#viewer {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    background: #eeeeee;          /* brief §12 — light gray scene background */
    overflow: hidden;
}

#three-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Overlay buttons in the viewer's top-right corner. */
.viewer-buttons {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    z-index: 2;
    display: flex;
    gap: 0.4rem;
}

.viewer-btn {
    padding: 0.35rem 0.7rem;
    font-family: inherit;
    font-size: 0.75rem;
    color: #1f2933;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #c4ccd4;
    border-radius: 5px;
    cursor: pointer;
}

.viewer-btn:hover { background: #fff; }

/* ---- control panel ---- */

#panel {
    flex: 0 0 320px;
    padding: 1rem 1.1rem;
    overflow-y: auto;
    background: #fbfcfd;
    border-left: 1px solid #d2d8de;
}

#panel h1 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.tagline {
    margin: 0.15rem 0 1rem;
    font-size: 0.8rem;
    color: #6b7680;
}

fieldset {
    border: 1px solid #d8dee4;
    border-radius: 6px;
    margin: 0 0 0.9rem;
    padding: 0.5rem 0.7rem 0.7rem;
}

legend {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #52606d;
    padding: 0 0.35rem;
}

/* ---- sliders ---- */

.slider-row {
    margin: 0.55rem 0;
}

.slider-row label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.8rem;
    margin-bottom: 0.15rem;
}

.slider-label { color: #3e4c59; }

.slider-value {
    font-variant-numeric: tabular-nums;
    color: #1f2933;
    font-weight: 600;
}

.slider-row input[type="range"] {
    width: 100%;
    accent-color: #2f6db5;
    cursor: pointer;
}

/* Optional sub-line explaining a slider whose effect isn't obvious from the
   label — mirrors `.quality-hint` so the panel reads consistently. */
.slider-hint {
    display: block;
    color: #8a96a3;
    font-size: 0.72rem;
    margin-top: 0.15rem;
}

/* ---- per-diffuser pattern dropdown ---- */

.pattern-row {
    margin: 0.55rem 0;
}

.pattern-row label {
    display: block;
    font-size: 0.8rem;
    color: #3e4c59;
    margin-bottom: 0.15rem;
}

.pattern-select {
    width: 100%;
    font-size: 0.8rem;
    padding: 0.2rem 0.3rem;
    color: #1f2933;
    background: #fff;
    border: 1px solid #c4ccd4;
    border-radius: 4px;
    cursor: pointer;
}

/* ---- calculation-quality radio group ---- */

.quality-options {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.quality-option {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.quality-option input[type="radio"] {
    accent-color: #2f6db5;
    cursor: pointer;
}

.quality-name { color: #3e4c59; font-weight: 600; }
.quality-hint { color: #8a96a3; font-size: 0.72rem; }

/* ---- layer-visibility checkboxes ---- */

.layer-toggles {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.7rem;
}

.layer-toggles-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: #52606d;
}

.layer-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #3e4c59;
    cursor: pointer;
}

.layer-toggle input[type="checkbox"] {
    accent-color: #2f6db5;
    cursor: pointer;
}

/* ---- legend ---- */

.legend {
    margin-top: 0.6rem;
    padding: 0.5rem 0.65rem;
    background: #fbfcfd;
    border: 1px solid #d8dee4;
    border-radius: 6px;
}

.legend-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #52606d;
    margin-bottom: 0.4rem;
}

.legend-item {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.74rem;
    color: #3e4c59;
    line-height: 1.3;
    margin: 0.3rem 0;
}

.legend-swatch {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 0.05rem;
    border-radius: 3px;
}

.swatch-iso      { background: rgba(51, 204, 89, 0.55); }
.swatch-isotemp  { background: rgba(242, 140, 38, 0.55); }
.swatch-isodraught { background: rgba(217, 56, 69, 0.55); }
.swatch-heatmap    { background: linear-gradient(90deg, #33b34d, #f2cc33, #e03333); }
.swatch-hotspot    { background: #ff2424; border-radius: 50%; }
.swatch-flow     { background: linear-gradient(90deg, #3366f2, #9e4d9e, #eb382e); }
.swatch-diffuser { background: #2f6db5; border-radius: 50%; }
.swatch-exit     { background: #cc3333; }
.swatch-occupied { background: rgba(26, 160, 168, 0.18); border: 1.5px solid #1aa0a8; }

/* ---- stats line + debug readout ---- */

.stats {
    margin-top: 0.6rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    background: #eef3f8;
    border: 1px solid #d2dde8;
    border-radius: 5px;
    color: #1f3a5f;
}

.stats-error {
    background: #fdecec;
    border-color: #f0bcbc;
    color: #8a1f1f;
}

/* ---- comfort verdict line (Phase 21) — teal-tinted to match the zone ---- */

.comfort {
    margin-top: 0.35rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    background: #e6f4f4;
    border: 1px solid #bfe0e0;
    border-radius: 5px;
    color: #14595c;
}

.debug {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: #8a96a3;
}

/* ---- loading overlay (HTMX adds .htmx-request during a request) ---- */

.loading-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 247, 250, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 10;
}

.loading-overlay.htmx-request {
    opacity: 1;
}

.loading-overlay span {
    padding: 0.4rem 0.9rem;
    background: #1f2933;
    color: #fff;
    font-size: 0.8rem;
    border-radius: 4px;
    letter-spacing: 0.03em;
}

/* ---- narrow viewports: stack the panel under the viewer ---- */

@media (max-width: 720px) {
    .layout { flex-direction: column; }
    #viewer { flex: 1 1 55%; }
    #panel  { flex: 1 1 45%; border-left: none; border-top: 1px solid #d2d8de; }
}