/* Instrumentenpaneel-thema: bewust één vaste, donkere look (zoals een
   gebrushed-metalen dashboard er 's nachts en overdag hetzelfde uitziet),
   geen aparte lichte variant. */
:root{
  --bg: #17181a;
  --panel: #1f2123;
  --surface: #26282b;
  --ink: #EDE7DC;
  --ink-soft: #9B968C;
  --line: #38393c;
  --accent: #D98A3D;
  --accent-soft: rgba(217,138,61,0.16);
  --danger: #C7443A;
  --zone-start: 201,130,46;
  --zone-end: 199,68,58;
  --radius: 12px;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'IBM Plex Sans', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
  min-height: 100vh;
}
h1,h2,h3{ font-family: var(--serif); font-weight:600; margin: 0 0 8px; letter-spacing:-0.01em;}
h1{ font-size: 1.5rem; }
h2{ font-size: 1.15rem; }
h3{ font-size: 1rem; font-weight:500; }
p{ margin: 0 0 12px; color: var(--ink-soft); }
header.top{
  padding: calc(22px + env(safe-area-inset-top)) 20px 14px;
  position: sticky; top:0; z-index:5;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
header.top .sub{ color: var(--ink-soft); font-size:0.9rem; }
main{ padding: 18px 16px 8px; max-width: 640px; margin: 0 auto; }
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 14px rgba(0,0,0,0.25);
}
label.field-label{ display:block; font-size:0.85rem; color: var(--ink-soft); margin-bottom:6px; }
textarea, input[type=text]{
  width:100%; font-family: var(--sans); font-size:0.95rem; color: var(--ink);
  background: var(--bg); border:1px solid var(--line); border-radius:10px;
  padding: 10px 12px; resize: vertical;
}
textarea:focus, input:focus{ outline: 2px solid var(--accent); outline-offset: 1px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin: 10px 0; }
.chip{
  border:1px solid var(--line); color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.1)), var(--panel);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 3px rgba(0,0,0,0.35);
  border-radius: 8px; padding: 8px 14px; font-size:0.88rem; cursor:pointer;
  user-select:none; transition: transform .08s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
.chip:active{ transform: translateY(1px); }
.chip[aria-pressed="true"]{
  background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.05)), var(--accent);
  color: #221200; border-color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.55) inset, 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(1px);
}
.chip.add-new{ border-style: dashed; color: var(--ink-soft); background: var(--panel); box-shadow:none; }
button{
  font-family: var(--sans); font-weight:500; font-size:0.92rem; cursor:pointer;
  border-radius: 10px; padding: 11px 18px; border: 1px solid transparent;
}
button.primary{ background: var(--ink); color: var(--bg); width:100%; }
button.primary:disabled{ opacity:0.4; cursor:not-allowed; }
button.ghost{ background: transparent; border:1px solid var(--line); color: var(--ink); }
button.subtle{ background: none; border:none; color: var(--ink-soft); padding:6px 8px; font-size:0.85rem; }
button.danger-text{ background:none; border:none; color: var(--danger); font-size:0.82rem; padding:4px; }
button.danger{ background: transparent; border:1px solid var(--danger); color: var(--danger); flex-shrink:0; }
button.icon-btn{
  padding:7px 10px; font-size:1.05rem; line-height:1; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
}
nav.tabs{
  position: fixed; bottom:0; left:0; right:0; z-index:10;
  background: var(--surface); border-top:1px solid var(--line);
  display:flex; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
nav.tabs button{
  flex:1; background:none; border:none; color: var(--ink-soft);
  font-size:0.78rem; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px;
}
nav.tabs button .ic{ font-size:1.2rem; }
nav.tabs button[aria-current="true"]{ color: var(--accent); }
.view{ display:none; }
.view.active{ display:block; }
.fase-badge{
  display:inline-flex; align-items:center; gap:8px; padding: 6px 14px;
  border-radius: 8px; font-family: var(--serif); font-size:1rem; font-weight:600;
  background: var(--panel); border:1px solid var(--line);
}
.fase-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.mono{ font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Analoge naaldmeter */
.gauge-wrap{ text-align:center; padding: 6px 0 4px; }
.gauge{ width:100%; max-width:280px; height:auto; overflow:visible; }
.gauge-face{ fill: var(--panel); }
.gauge-tick{ stroke: var(--ink-soft); opacity:0.5; stroke-width:1.5; }
.gauge-needle{
  transform-origin: 110px 115px;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gauge-needle line{ stroke: var(--ink); stroke-width:3; stroke-linecap:round; }
.gauge-hub{ fill: var(--ink-soft); stroke: var(--bg); stroke-width:2; }
.gauge-label{
  margin-top:2px; font-family: var(--serif); font-weight:600; font-size:1.15rem; color: var(--ink);
  display:flex; align-items:center; justify-content:center; gap:8px;
}

.result-box{ text-align:center; padding: 12px 12px 22px; }
.result-box .scorebar{ display:flex; gap:10px; margin: 14px 0 4px; justify-content:center; flex-wrap:wrap; }
.scoreitem{ font-size:0.76rem; color: var(--ink-soft); font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* LCD-achtig uitleesscherm voor tips */
.tips-screen{
  margin-top:16px; text-align:left; position:relative; overflow:hidden;
  background:#0c0a08; border:1px solid #000; border-radius:8px;
  padding:14px 16px; box-shadow: inset 0 2px 8px rgba(0,0,0,0.65);
  font-family: var(--mono); color: var(--accent);
}
.tips-screen::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 3px);
}
.tips-screen h3{ font-family: var(--mono); font-size:0.82rem; color: var(--accent); text-transform:uppercase; letter-spacing:0.06em; }
.tips-screen p{ font-family: var(--mono); color: var(--accent); opacity:0.85; }
.tip{
  display:flex; gap:10px; align-items:flex-start; padding: 10px 0;
  border-top: 1px solid rgba(217,138,61,0.18); position:relative;
}
.tip:first-of-type{ border-top:none; }
.tip .tag{
  flex-shrink:0; font-size:0.65rem; background: rgba(217,138,61,0.16); color: var(--accent);
  padding: 3px 8px; border-radius: 4px; margin-top:2px; white-space:nowrap; font-family: var(--mono);
}
.manage-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.manage-row:first-of-type{ border-top:none; }
.weight-grid{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.weight-pill{ font-size:0.72rem; border:1px solid var(--line); border-radius:8px; padding:5px 8px; background: var(--bg); }
.weight-pill select{ border:none; background:none; font-family:var(--sans); color:var(--ink); font-size:0.72rem; }
.empty{ text-align:center; padding: 30px 10px; color: var(--ink-soft); }
.history-item{ padding: 12px 0; border-top:1px solid var(--line); }
.history-item:first-of-type{ border-top:none; }
.history-item .meta{ display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.history-item .datum{ font-size:0.78rem; color: var(--ink-soft); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.history-item .situatie{ font-size:0.92rem; margin-bottom:4px; }
.history-item .gedachten{ font-size:0.88rem; font-style:italic; color: var(--ink-soft); }

/* Recorder-strook (seismograaf-achtige golfvorm) voor trends in geschiedenis */
.waveform-card{ padding: 16px 16px 10px; }
.waveform{ width:100%; height:auto; display:block; }
.wave-grid{ stroke: var(--line); stroke-width:1; stroke-dasharray:2,3; }
.wave-glow{ filter: drop-shadow(0 0 3px rgba(217,138,61,0.55)); }
.waveform-legend{
  display:flex; justify-content:space-between; margin-top:8px;
  font-family: var(--mono); font-size:0.7rem; color: var(--ink-soft);
}
.section-title{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.inline-form{ display:flex; gap:8px; margin-top:10px; }
.inline-form input{ flex:1; min-width:0; }
.inline-form select{ min-width:0; }
.manage-row select{ min-width:0; font-family: var(--mono); }
.color-swatch{ width:20px; height:20px; border-radius:50%; border:1px solid var(--line); flex-shrink:0; }
.order-btns{ display:flex; flex-direction:column; }
.order-btns button{ padding:0 4px; font-size:0.7rem; line-height:1; border:none; background:none; color:var(--ink-soft); }

/* Inklapbare per-fase secties in Beheer */
.accordion-item{ border-top:1px solid var(--line); padding:10px 0; }
.accordion-item:first-of-type{ border-top:none; }
.accordion-header{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; padding:4px 0; cursor:pointer; text-align:left;
}
.accordion-header .fase-label{
  display:flex; align-items:center; gap:8px;
  font-family:var(--serif); font-weight:600; font-size:1rem; color:var(--ink);
}
.accordion-header .chevron{ color:var(--ink-soft); font-size:0.8rem; }
.accordion-body{ margin-top:12px; }
.accordion-body h4{ margin:14px 0 6px; font-size:0.78rem; color:var(--ink-soft); font-weight:500; }
.accordion-body h4:first-child{ margin-top:0; }

/* ---------- Statistieken ---------- */
.period-tabs{ display:flex; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:3px; }
.period-tabs button{
  flex:1; background:none; border:none; color:var(--ink-soft); padding:8px 6px;
  border-radius:6px; font-size:0.85rem; font-weight:500;
}
.period-tabs button[aria-current="true"]{ background:var(--accent); color:#221200; }
.period-nav{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-top:12px;
}
.period-nav span{ font-size:0.95rem; min-width:9em; text-align:center; }
.stats-empty{ text-align:center; padding:34px 10px; color:var(--ink-soft); }

.stat-section-title{
  font-family:var(--serif); font-size:0.95rem; font-weight:600; margin:0 0 10px;
}
.donut-wrap{ display:flex; justify-content:center; margin-bottom:6px; }
.donut{ width:150px; height:150px; }
.stat-fase-row{
  display:flex; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--line);
}
.stat-fase-row:first-of-type{ border-top:none; }
.stat-fase-naam{ flex:1; min-width:0; font-size:0.9rem; }
.stat-fase-count{ color:var(--ink-soft); font-size:0.8rem; }
.stat-fase-pct{ font-size:0.85rem; min-width:2.8em; text-align:right; }
.stat-fase-delta{ font-size:0.78rem; min-width:4em; text-align:right; color:var(--ink-soft); }

.stat-signal-row{ padding:8px 0; border-top:1px solid var(--line); }
.stat-signal-row:first-of-type{ border-top:none; }
.stat-signal-row .head{ display:flex; justify-content:space-between; font-size:0.88rem; margin-bottom:4px; }
.stat-signal-bar{ height:5px; border-radius:3px; background:var(--panel); overflow:hidden; }
.stat-signal-bar span{ display:block; height:100%; background:var(--accent); border-radius:3px; }

.stat-tiles{ display:flex; gap:10px; flex-wrap:wrap; }
.stat-tile{
  flex:1; min-width:130px; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:12px 14px;
}
.stat-tile .label{ font-size:0.72rem; color:var(--ink-soft); margin-bottom:4px; }
.stat-tile .value{ font-family:var(--serif); font-size:1.3rem; font-weight:600; }
.stat-tile .sub{ font-size:0.72rem; color:var(--ink-soft); margin-top:2px; font-family:var(--mono); }

.daypart-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.daypart-cell{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 6px; text-align:center; }
.daypart-cell .label{ font-size:0.7rem; color:var(--ink-soft); }
.daypart-cell .value{ font-family:var(--mono); font-size:1.05rem; margin-top:2px; }
.daypart-bar{ height:4px; border-radius:2px; background:var(--bg); margin-top:6px; overflow:hidden; }
.daypart-bar span{ display:block; height:100%; background:var(--accent); }

.stat-note{ font-size:0.74rem; color:var(--ink-soft); margin-top:8px; font-style:italic; }