/* ============================================================
   Carp Insights — beige / amber "dawn on the water" design system
   Rustig, aards thema geïnspireerd op karpervissen bij ochtendgloren:
   perkamentkleurige achtergrond, warm amber-accent, mos/oker/roest als
   status-kleuren. Alle kleurparen hieronder zijn gevalideerd met de
   dataviz-skill (scripts/validate_palette.js — categorische zes checks
   voor good/warn/danger, WCAG-contrast voor elke tekstkleur).
   Mobile-first: telefoon-PWA met een tab-bar ipv topbar-navigatie.
   ============================================================ */
:root {
    /* Achtergronden */
    --bg:        #F3EDE0;
    --bg-soft:   #ECE3D0;
    --surface:   #FFFCF5;
    --surface-2: #EFE6D3;

    /* Tekst */
    --ink:       #3B2E22;
    --ink-soft:  #6E5D48;
    --ink-muted: #A79A85;

    /* Randen */
    --line:      #DCD0B8;
    --border:    #DCD0B8;

    /* Amber-accent (branding, knoppen, fills) */
    --amber:      #B9793A;
    --amber-dim:  #A2652C;
    --amber-dark: #7C4F22;
    --amber-bg:   rgba(185,121,58,.12);
    --amber-text: #8B5A28; /* donkerder, alleen voor lopende tekst/links/actieve tab */

    --grad-brand: linear-gradient(135deg, #C68A46 0%, #E0AD6B 100%);

    /* Status (score: hoog/midden/laag) — gevalideerd trio, elk met -bg wash */
    --good:       #1F7A54;
    --good-bg:    rgba(31,122,84,.12);
    --warn:       #C1861B;
    --warn-bg:    rgba(193,134,27,.14);
    --warn-text:  #8A5D14; /* donkerder warn-variant voor lopende tekst */
    --danger:     #A23E23;
    --danger-bg:  rgba(162,62,35,.12);

    --shadow-card: 0 2px 8px rgba(59,46,34,.07), 0 0 0 1px var(--line);

    --font-display: 'Fraunces', Georgia, 'Iowan Old Style', serif;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --tabbar-h: 64px;
}

@font-face {
    font-family: 'Fraunces';
    src: url('/fonts/fraunces-variable-latin.woff2') format('woff2-variations'),
         url('/fonts/fraunces-variable-latin.woff2') format('woff2');
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
}

a { color: var(--amber-text); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; }

/* ─────────────────────────────────────────────
   App shell
───────────────────────────────────────────── */
.app-header {
    position: sticky;
    top: 0;
    z-index: 40;
    padding: calc(12px + var(--safe-top)) 16px 12px;
    background: rgba(243, 237, 224, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand-icon {
    width: 30px; height: 30px;
}
.brand-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: .2px;
}
.header-glow {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--grad-brand);
}

.locbtn {
    background: var(--surface-2);
    color: var(--amber-text);
    border: 1px solid rgba(185,121,58,.30);
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.locbtn:active { transform: scale(.97); }

main {
    padding: 16px 16px calc(var(--tabbar-h) + var(--safe-bottom) + 24px);
    max-width: 640px;
    margin: 0 auto;
    min-height: 100vh;
}

.view { display: none; }
.view.active { display: block; }

/* ─────────────────────────────────────────────
   Tab bar
───────────────────────────────────────────── */
.tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    display: flex;
    background: rgba(243, 237, 224, 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding-bottom: var(--safe-bottom);
}
.tab {
    flex: 1;
    background: none;
    border: none;
    color: var(--ink-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 4px 8px;
    font-size: 11px;
    cursor: pointer;
}
.tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.tab.active { color: var(--amber-text); }

/* ─────────────────────────────────────────────
   Cards / generic
───────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    padding: 14px;
    margin-bottom: 12px;
}

.section-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--ink-soft);
    margin: 18px 0 8px;
}
.section-title:first-child { margin-top: 0; }

.hint {
    color: var(--ink-soft);
    font-size: 13px;
}
.error-text { color: var(--danger); font-size: 13px; }
.empty-state {
    text-align: center;
    color: var(--ink-soft);
    padding: 40px 12px;
}

/* ─────────────────────────────────────────────
   Score badge / stars
───────────────────────────────────────────── */
.score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 18px;
    background: var(--good-bg);
    color: var(--good);
    border: 1px solid rgba(31,122,84,.30);
}
.score-badge.mid { color: var(--warn-text); background: var(--warn-bg); border-color: rgba(193,134,27,.35); }
.score-badge.low { color: var(--danger); background: var(--danger-bg); border-color: rgba(162,62,35,.3); }

.stars { color: var(--amber); letter-spacing: 2px; font-size: 14px; }
.stars .dim { color: var(--ink-muted); }

/* ─────────────────────────────────────────────
   Day cards (forecast)
───────────────────────────────────────────── */
.day-card {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.day-card:active { transform: scale(.99); }
.day-main { flex: 1; min-width: 0; }
.day-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.day-label { color: var(--ink-soft); font-size: 13px; }
.day-drivers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.chip {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 12px;
    color: var(--ink-soft);
    white-space: nowrap;
}

.detail-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-soft);
    background: none;
    border: none;
    font-size: 14px;
    padding: 6px 0 12px;
    cursor: pointer;
}
.detail-back:hover { color: var(--amber-text); text-decoration: none; }

.hour-row {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}
.hour-row:last-child { border-bottom: none; }
.hour-time { color: var(--ink-soft); }
.hour-meta { color: var(--ink-soft); display: flex; gap: 10px; flex-wrap: wrap; }
.hour-score { font-weight: 700; }

.chart-wrap { margin: 8px 0 4px; position: relative; }

/* Score-strip onder de luchtdruk-grafiek (status-gekleurde balkjes, één per uur) */
.score-strip {
    display: flex;
    gap: 2px;
    height: 10px;
    margin-top: 6px;
    border-radius: 4px;
    overflow: hidden;
}
.score-strip span { flex: 1; }

/* Custom uPlot-tooltip (crosshair-gebonden, zie renderPressureChart in app.js) */
.chart-tooltip {
    position: absolute;
    pointer-events: none;
    z-index: 5;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    padding: 8px 10px;
    font-size: 12px;
    color: var(--ink);
    white-space: nowrap;
    opacity: 0;
    transition: opacity .08s ease;
}
.chart-tooltip.visible { opacity: 1; }
.chart-tooltip .tt-time { color: var(--ink-soft); font-size: 11px; margin-bottom: 3px; }
.chart-tooltip .tt-row { display: flex; align-items: center; gap: 6px; }
.chart-tooltip .tt-value { font-weight: 700; }
.chart-tooltip .tt-key { display: inline-block; width: 10px; height: 2px; background: var(--amber); border-radius: 1px; }

/* ─────────────────────────────────────────────
   Forms
───────────────────────────────────────────── */
label { display: block; font-size: 13px; color: var(--ink-soft); margin: 12px 0 5px; }
label:first-child { margin-top: 0; }

input[type="text"], input[type="number"], input[type="datetime-local"], textarea, select {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    padding: 10px 12px;
    font-size: 15px;
    font-family: inherit;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--amber-dim);
    box-shadow: 0 0 0 3px rgba(185,121,58,.25);
}
textarea { resize: vertical; min-height: 70px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    width: 100%;
}
.btn-primary {
    background: var(--grad-brand);
    color: #2A1B0C;
}
.btn-primary:active { transform: scale(.98); }
.btn-outline {
    background: var(--surface-2);
    color: var(--amber-text);
    border: 1px solid rgba(185,121,58,.30);
}
.btn-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(162,62,35,.3);
}
.btn-row { display: flex; gap: 10px; margin-top: 16px; }
.btn-row .btn { width: auto; flex: 1; }

.fab {
    position: fixed;
    right: 18px;
    bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px);
    width: 54px; height: 54px;
    border-radius: 50%;
    background: var(--grad-brand);
    color: #2A1B0C;
    border: none;
    box-shadow: 0 4px 16px rgba(185,121,58,.35);
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 45;
}
.fab:active { transform: scale(.95); }

/* ─────────────────────────────────────────────
   Logboek list
───────────────────────────────────────────── */
.catch-card { display: flex; gap: 12px; cursor: pointer; }
.catch-card:active { transform: scale(.99); }
.catch-thumb {
    width: 56px; height: 56px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--surface-2);
    flex-shrink: 0;
}
.catch-main { flex: 1; min-width: 0; }
.catch-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.catch-sub { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.catch-weather { color: var(--ink-muted); font-size: 12px; margin-top: 4px; }

.photo-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.photo-grid img {
    width: 84px; height: 84px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--line);
}
.photo-add {
    width: 84px; height: 84px;
    border-radius: 10px;
    border: 1px dashed var(--line);
    background: var(--surface-2);
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
}

/* ─────────────────────────────────────────────
   Kaart
───────────────────────────────────────────── */
#map {
    width: 100%;
    height: calc(100vh - var(--tabbar-h) - var(--safe-bottom) - 120px);
    min-height: 320px;
    border-radius: 14px;
    border: 1px solid var(--line);
}
.leaflet-popup-content-wrapper {
    background: var(--surface);
    color: var(--ink);
    border-radius: 10px;
}
.leaflet-popup-tip { background: var(--surface); }
.leaflet-container a.leaflet-popup-close-button { color: var(--ink-soft); }

/* ─────────────────────────────────────────────
   Login gate
───────────────────────────────────────────── */
.gate {
    max-width: 320px;
    margin: 80px auto;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}