/*
 * swissSURFACE3D 2.0 viewer — main stylesheet.
 *
 * Layout:
 *   #topbar  (auto height, sticky at top)
 *   #workarea (flex:1, holds the swappable .pane elements)
 *   #footer  (auto height)
 *
 * Only one .pane has the .active class at a time; the inactive one is taken
 * out of flow so we don't burn GPU cycles rendering the hidden Three.js canvas.
 */

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #1d2330;
    background: #f4f6f9;
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
}

a { color: #c0392b; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- top bar ---------- */
#topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    z-index: 10;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.brand .logo {
    font-size: 28px;
    line-height: 1;
}
.brand h1 {
    font-size: 16px;
    margin: 0;
    font-weight: 600;
    letter-spacing: .2px;
}
.brand h1 .ver {
    color: #c0392b;
    font-weight: 700;
}
.brand .tagline {
    margin: 0;
    font-size: 11px;
    color: #6b7280;
}

/* Address search — autocomplete dropdown sits below the input.
   We absolutely-position #search-results so it overlays the map. */
.search {
    flex: 1 1 auto;
    position: relative;
    max-width: 520px;
}
.search input {
    width: 100%;
    padding: 9px 14px;
    border: 1px solid #d0d4dc;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.search input:focus {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .15);
}
.search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d0d4dc;
    border-radius: 6px;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
    z-index: 20;
}
.search-results .item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f1f3;
    line-height: 1.35;
}
.search-results .item:last-child { border-bottom: 0; }
.search-results .item:hover,
.search-results .item.active { background: #f5f7fa; }
.search-results .item b { color: #c0392b; font-weight: 600; }

/* ---------- buttons ---------- */
.btn {
    appearance: none;
    background: #fff;
    border: 1px solid #d0d4dc;
    color: #1d2330;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.btn:hover:not(:disabled) {
    border-color: #c0392b;
    color: #c0392b;
}
.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.btn.primary {
    background: #c0392b;
    color: #fff;
    border-color: #c0392b;
}
.btn.primary:hover:not(:disabled) {
    background: #a32f24;
    border-color: #a32f24;
    color: #fff;
}

/* ---------- workarea + panes ---------- */
#workarea {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
}

.pane {
    position: absolute;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s ease;
}
.pane.active {
    visibility: visible;
    opacity: 1;
}

/* ---------- map pane ---------- */
#map { width: 100%; height: 100%; }

/* MapLibre's attribution control would duplicate the footer — keep it
   because the licence requires per-tile attribution from swisstopo. */
.maplibregl-ctrl-attrib { font-size: 11px !important; }

/* Floating info panels on the map */
.panel {
    position: absolute;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
    padding: 14px 16px;
    z-index: 5;
}
#tile-info {
    top: 16px;
    right: 16px;
    width: 280px;
}
#tile-info h2 { margin: 0 0 8px 0; font-size: 14px; }
#tile-info dl {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 4px 8px;
    margin: 0 0 12px 0;
    font-size: 12.5px;
}
#tile-info dt { color: #6b7280; }
#tile-info dd { margin: 0; word-break: break-all; }
/* The area-filter dropdown lives in the (light-themed) tile-info panel,
   so it needs its own styling — independent of the dark HUD selects. */
#tile-info select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color-scheme: light;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4 L5 7 L8 4' fill='none' stroke='%236b7280' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 10px;
    color: #1d2330;
    border: 1px solid #d0d4dc;
    border-radius: 4px;
    padding: 3px 24px 3px 8px;
    font-size: 12px;
    cursor: pointer;
}
#tile-info select:focus {
    outline: none;
    border-color: #c0392b;
}
#tile-info .hint {
    margin: 0 0 12px 0;
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.4;
}
#tile-info .btn { width: 100%; }

#help {
    bottom: 16px;
    left: 16px;
    max-width: 330px;
    font-size: 12px;
    line-height: 1.45;
    color: #444;
}
#help p { margin: 0; }
#help em { color: #c0392b; font-style: normal; font-weight: 600; }

/* ---------- 3D viewer pane ---------- */
#viewer-pane { background: #0a0e17; }
#viewer-canvas-container {
    position: absolute;
    inset: 0;
}
/* Pin the canvas to the container size unconditionally. Three.js's setSize()
   only sets the drawing-buffer dimensions when we call it with updateStyle=false
   (which we do so the device-pixel-ratio scaling stays correct on hi-DPI
   displays); without these CSS rules the canvas would otherwise display at
   its intrinsic resolution, leaving the bottom/right unfilled on very wide
   viewports. */
#viewer-canvas-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    touch-action: none;  /* let OrbitControls handle pinch/pan, no page scroll */
}

/* HUD overlay sits on top of the canvas */
#viewer-hud {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    pointer-events: none;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hud-row {
    pointer-events: auto;
    background: rgba(15, 22, 35, .82);
    color: #e8eaef;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 12.5px;
}
.hud-row.controls {
    flex-wrap: wrap;
}
.hud-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #c9d1de;
}
/* The native select widget on Windows/Chrome ignores rgba backgrounds in
   some configurations (e.g. Forced Colors mode, certain dark-theme flags),
   leaving a stark white box in the dark HUD. `appearance: none` forces our
   custom styling, and we draw a small chevron via inline SVG so the widget
   still looks like a dropdown. The <option> elements live in the browser's
   popup layer and need their own colour rules. */
/* The native select widget on Windows/Chrome ignores rgba backgrounds in
   some configurations (e.g. Forced Colors mode, certain dark-theme flags),
   leaving a stark white box in the dark HUD. `appearance: none` forces our
   custom styling, and we draw a small chevron via inline SVG so the widget
   still looks like a dropdown.

   The popup with the <option> list is rendered by the OS / browser process,
   not by our page, and almost completely ignores CSS — `option { background }`
   has no effect in Chrome/Edge unless the form control is in a dark colour
   scheme. `color-scheme: dark` is the key here: it switches the native
   popup to the OS's dark widget chrome (dark background, light text,
   themed scrollbars) on every Chromium browser regardless of the user's
   system theme. Firefox and Safari read it too. */
.hud-row select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color-scheme: dark;
    background-color: rgba(255, 255, 255, .08);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4 L5 7 L8 4' fill='none' stroke='%23c9d1de' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 10px 10px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 4px;
    padding: 3px 22px 3px 8px;
    font-size: 12px;
    line-height: 1.25;
    cursor: pointer;
}
.hud-row select:hover { background-color: rgba(255, 255, 255, .14); }
.hud-row select:focus {
    outline: none;
    border-color: rgba(255, 255, 255, .35);
    background-color: rgba(255, 255, 255, .14);
}
/* Fallback option styling in case `color-scheme: dark` is unsupported
   (very old Chromium, Firefox <99). Newer browsers will still respect
   this for the option highlight colour. */
.hud-row select option {
    background-color: #1d2330;
    color: #fff;
}
.hud-row .btn {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
    color: #fff;
}
.hud-row .btn:hover:not(:disabled) {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.32);
    color: #fff;
}
#hud-tile { font-weight: 600; }
#hud-points { color: #9ba8bd; }

/* Progress bar shown while COPC nodes are streamed */
.progress {
    pointer-events: auto;
    background: rgba(15, 22, 35, .82);
    border-radius: 6px;
    padding: 8px 12px;
    position: relative;
    color: #e8eaef;
    font-size: 12px;
    overflow: hidden;
}
#progress-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, #c0392b, #e76f51);
    transition: width .15s linear;
    opacity: .35;
}
#progress-label { position: relative; }

/* Legend in the lower-left corner of the 3D viewer */
.legend {
    bottom: 16px;
    left: 16px;
    background: rgba(15, 22, 35, .82);
    color: #e8eaef;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: none;
    padding: 10px 14px;
}
.legend h3 {
    margin: 0 0 6px 0;
    font-size: 12px;
    font-weight: 600;
    color: #c9d1de;
}
.legend ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 11.5px;
    display: grid;
    gap: 4px;
}
.legend .swatch {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: -1px;
}

/* ---------- memory-warning modal ---------- */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 23, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
/* `[hidden]` from the user-agent stylesheet has specificity (0,0,0) and is
   therefore beaten by our `.modal { display:flex }` rule above, so toggling
   the JS property `modal.hidden = true` had NO visual effect — the warning
   stayed on screen. Explicit attribute selector with !important to be safe
   against future style additions. */
.modal[hidden] { display: none !important; }
.modal-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
    padding: 22px 24px;
    max-width: 460px;
    width: 100%;
}
.modal-card h2 {
    margin: 0 0 10px 0;
    font-size: 17px;
    color: #c0392b;
}
.modal-card p {
    margin: 0 0 10px 0;
    line-height: 1.45;
    color: #1d2330;
    font-size: 13px;
}
.modal-card p strong { color: #1d2330; }
.modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.modal-actions .btn { flex: 1 1 auto; min-width: 120px; }
.modal-remember {
    display: block;
    margin-top: 14px;
    color: #6b7280;
    font-size: 12px;
    user-select: none;
    cursor: pointer;
}
.modal-remember input { vertical-align: -2px; margin-right: 4px; }

/* ---------- footer ---------- */
#footer {
    flex: 0 0 auto;
    padding: 8px 16px;
    background: #1d2330;
    color: #c9d1de;
    font-size: 11.5px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
}
#footer a { color: #e8eaef; }
#footer a:hover { color: #fff; }

/* Runtime telemetry — small, monospaced, slightly muted so it sits quietly
   next to the attribution text. Tabular numerals keep the digits from
   jittering as values change. */
#footer .stats {
    margin-left: auto;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: #9aa3b2;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}
#footer .stats > span {
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .04);
    cursor: help;
}

/* ---------- responsive tweaks for small screens ---------- */
@media (max-width: 720px) {
    #topbar { flex-wrap: wrap; }
    .brand .tagline { display: none; }
    .search { order: 3; max-width: none; width: 100%; }
    #tile-info { right: 8px; left: 8px; top: 8px; width: auto; }
    #help { display: none; }
    .hud-row { font-size: 11.5px; }
    .legend { display: none; }
}