/* Tacho Simulator web-app. Drie indelingen:
   - groot (tablet, laptop): apparaat boven, bediening en tabblad eronder
   - liggende telefoon: apparaat schermvullend, tabbladen als overlay
   - telefoon rechtop: compact bedieningspaneel, de rest scrolt eronder */
:root {
  --navy: #184F8F;
  --navy-dark: #123C6E;
  --bg: #F4F7FB;
  --panel: #FFFFFF;
  --ink: #16273C;
  --muted: #5C6F84;
  --line: #D5DEE9;
  --ok: #2E9E74;
  --warn: #C87B1E;
  --red: #D0453F;
  --rijden: #2C6FD1;
  --werk: #C87B1E;
  --beschikbaarheid: #8FB4DE;
  --rust: #2E9E74;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px;
  overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ startscherm */
#splash { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; padding: 24px; text-align: center; background: var(--navy); color: #fff; }
#splash img { border-radius: 22px; background: #fff; }
#splash h1 { margin: 10px 0 0; font-size: 26px; }
.splash-sub { margin: 0 0 14px; opacity: .8; }
.splash-bar { width: min(320px, 70vw); height: 8px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; }
.splash-bar i { display: block; height: 100%; width: 5%; background: #fff; transition: width .4s; }
#splash-text { margin: 8px 0 0; min-height: 1.4em; }
.splash-note { max-width: 420px; font-size: 13px; opacity: .75; margin: 6px 0 12px; }
#splash .btn.primary { background: #fff; color: var(--navy); border-color: #fff; }

/* ---------------------------------------------------------------- opbouw */
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
#topbar { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 4px 12px;
  padding-top: calc(4px + env(safe-area-inset-top)); background: var(--navy); color: #fff; }
.tb-title { display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.tb-title img { border-radius: 6px; background: #fff; }
.tb-clock { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.tb-clock b { font-size: 20px; font-variant-numeric: tabular-nums; }
.tb-clock span { font-size: 13px; opacity: .85; }
.tb-chips { flex: 1; display: flex; gap: 6px; overflow: hidden; min-width: 0; }
.chip { flex: 0 0 auto; padding: 3px 9px; border-radius: 11px; font-size: 12.5px; white-space: nowrap;
  background: rgba(255,255,255,.16); }
.chip.on { background: #fff; color: var(--navy); font-weight: 600; }
.chip.attention { background: #FFD66B; color: #3A2A00; font-weight: 600; }
.chip:empty { display: none; }
.tb-button { flex: 0 0 auto; width: 40px; height: 36px; border: 0; border-radius: 8px; background: rgba(255,255,255,.14); color: #fff; padding: 6px; }
.tb-button svg { width: 100%; height: 100%; }

#main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#stage { flex: 0 0 auto; padding: 10px 12px 0; display: flex; flex-direction: column; align-items: stretch; }
#front { height: min(44vh, calc((100vw - 24px) / 2.9)); display: flex; align-items: center; justify-content: center; }
#compact { display: none; }
.device-box { position: relative; max-width: 100%; filter: drop-shadow(0 6px 10px rgba(12, 28, 50, .35)); }
.device-svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.device-svg text { pointer-events: none; user-select: none; -webkit-user-select: none; }
.device-svg .hit { cursor: pointer; touch-action: none; }
.device-svg .key.pressed .key-face { fill: #5F666F; }
.device-display { position: absolute; display: block; pointer-events: none; }

#status { display: block; width: 100%; margin: 6px 0 0; padding: 5px 10px; min-height: 30px; border: 0; border-radius: 8px;
  background: #E6EDF6; color: var(--ink); font-size: 13.5px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#status.fresh { background: #FFF1CC; }

#demo-bar { margin-top: 8px; padding: 10px 14px; border: 2px solid var(--navy); border-radius: 12px; background: #fff; }
#demo-caption { font-size: clamp(17px, 2.6vw, 30px); font-weight: 600; line-height: 1.25; min-height: 2.5em; color: var(--navy-dark); }
#demo-controls { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
#demo-progress { margin-right: auto; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- bediening */
#controls { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: stretch; padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
#ctl-vehicle, #dock { display: flex; gap: 6px; align-items: stretch; }
#dock { flex: 1; justify-content: flex-end; }
.ctl { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 62px; min-height: 48px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--navy); font-size: 12px; font-weight: 600; touch-action: manipulation; }
.ctl svg { width: 22px; height: 22px; }
.ctl.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.ctl.active { border-color: var(--navy); box-shadow: inset 0 -3px 0 var(--navy); }
.ctl:disabled { opacity: .45; }
.badge { position: absolute; top: 3px; right: 6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--red); color: #fff; font-size: 11px; font-style: normal; line-height: 17px; text-align: center; }
.stepper { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.stepper button { width: 42px; border: 0; background: transparent; color: var(--navy); font-size: 24px; font-weight: 600; touch-action: manipulation; }
.stepper button:active { background: #E6EDF6; }
.stepper span { min-width: 74px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line); }

/* -------------------------------------------------------------- tabblad */
#sheet { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); background: var(--bg); }
#sheet-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 8px 12px 2px; }
#sheet-head h2 { flex: 1; margin: 0; font-size: 18px; color: var(--navy-dark); }
#sheet-body { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 10px; align-items: start; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.card h3 { margin: 0 0 8px; font-size: 15px; color: var(--navy-dark); }
.card p { margin: 6px 0; line-height: 1.4; }
.card.wide { grid-column: 1 / -1; }
.muted { color: var(--muted); font-size: 13px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 0; }
.row > .grow { flex: 1; min-width: 140px; }
.btn { min-height: 42px; padding: 6px 14px; border: 1px solid var(--navy); border-radius: 9px; background: #fff; color: var(--navy);
  font-weight: 600; touch-action: manipulation; }
.btn.primary, .btn.on { background: var(--navy); color: #fff; }
.btn.danger { border-color: var(--red); color: var(--red); }
.btn:disabled { opacity: .45; }
.btn:active { filter: brightness(.93); }
select { min-height: 42px; width: 100%; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
label.field { display: block; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
label.field select { margin-top: 3px; color: var(--ink); font-size: 15px; }
label.check { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 2px 0; }
label.check input { width: 22px; height: 22px; accent-color: var(--navy); }
.slot-state { font-weight: 600; }
.slot-state.empty { color: var(--muted); font-weight: 400; }

/* tijdlijn en tellers */
.timeline-canvas { display: block; width: 100%; height: 100px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 13px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.times { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.times b { font-variant-numeric: tabular-nums; text-align: right; }
.log { margin: 0; padding: 0; list-style: none; max-height: 260px; overflow: auto; font-size: 13.5px; }
.log li { padding: 4px 0; border-bottom: 1px solid #EEF2F7; line-height: 1.35; }
.log time { color: var(--muted); margin-right: 8px; font-variant-numeric: tabular-nums; }

/* prints */
.print-list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.print-list button { flex: 0 0 auto; text-align: left; line-height: 1.2; }
.print-list small { display: block; font-weight: 400; opacity: .8; }
.print-layout { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; margin-top: 10px; }
.paper-wrap { overflow-x: auto; max-width: 100%; border-radius: 4px; box-shadow: 0 2px 8px rgba(12, 28, 50, .25); background: #F7F5EE; }
.paper-wrap canvas { display: block; }
.explain { margin: 0; padding: 0; list-style: none; }
.explain li { display: grid; grid-template-columns: 30px 1fr; gap: 4px 8px; padding: 7px 0; border-bottom: 1px solid #EEF2F7; line-height: 1.4; }
.explain .num { width: 24px; height: 24px; border-radius: 12px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.explain b { display: block; }

/* opdracht */
.steps { margin: 8px 0 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 30px 1fr; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid #EEF2F7; line-height: 1.35; }
.steps .mark { width: 24px; height: 24px; border-radius: 12px; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--muted); }
.steps li.done .mark { color: #fff; }
.steps li.done .mark { background: var(--ok); border-color: var(--ok); }
.steps li.current { background: #F3F8FF; }
.steps li.current .mark { border-color: var(--navy); color: var(--navy); }
.steps .hint { grid-column: 2; color: var(--muted); font-size: 13px; }
.steps li.done .text { color: var(--muted); }
.progress { height: 8px; border-radius: 4px; background: #E6EDF6; overflow: hidden; margin-top: 8px; }
.progress i { display: block; height: 100%; background: var(--ok); transition: width .3s; }
.scenario-list { display: grid; gap: 8px; }
.scenario-list .btn { text-align: left; }

canvas.qr { display: block; width: 168px; height: 168px; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; }
#qr-overlay { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; background: #fff; text-align: center; cursor: pointer; }
#qr-big { width: min(72vh, 86vw); height: min(72vh, 86vw); }
#qr-url { margin: 4px 0 0; font-size: clamp(16px, 3vw, 28px); font-weight: 600; color: var(--navy-dark); word-break: break-all; }

#toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; max-width: min(92vw, 560px);
  padding: 10px 16px; border-radius: 10px; background: #16273C; color: #fff; font-size: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
#toast button { margin-left: 12px; border: 0; border-radius: 6px; padding: 5px 10px; background: #fff; color: var(--ink); font-weight: 600; }

/* -------------------------------------------------- compact paneel (rechtop) */
.compact { border-radius: 16px; padding: 8px 10px 10px; background: linear-gradient(#2B2E32, #17191C); color: #E8EAEC;
  box-shadow: 0 4px 10px rgba(12, 28, 50, .35); user-select: none; -webkit-user-select: none; }
.compact.stoneridge { border-radius: 22px; background: linear-gradient(#26292D, #131517); }
.cp-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 4px; }
.cp-brand { font: 900 17px Arial, sans-serif; letter-spacing: .5px; }
.compact.stoneridge .cp-brand { font: italic 400 16px Arial, sans-serif; }
.cp-model { font-size: 11.5px; color: #9AA0A6; }
.cp-screen { padding: 7px; border-radius: 9px; background: #0E0F11; }
.cp-display { display: block; width: 100%; aspect-ratio: 4.7; }
.cp-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 8px; }
.cp-key { position: relative; height: 50px; border: 2px solid #0F1113; border-radius: 10px; background: #3A3E43; color: #E8EAEC;
  font: 700 19px Arial, sans-serif; display: flex; align-items: center; justify-content: center; gap: 2px; touch-action: none; overflow: hidden; padding: 0; }
.cp-key svg { height: 26px; pointer-events: none; }
.cp-key b { pointer-events: none; }
.cp-key.pressed { background: #5F666F; }
.cp-hold { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: #5FB0FF; pointer-events: none; }
.cp-row { display: grid; grid-template-columns: 1fr 58px 58px 1fr; gap: 7px; margin-top: 7px; }
.cp-slot { min-width: 0; height: 50px; padding: 3px 8px; border: 2px solid #0F1113; border-radius: 10px; background: #141618; color: #E8EAEC;
  display: flex; flex-direction: column; justify-content: center; text-align: left; touch-action: manipulation; }
.cp-slot-title { font-size: 10.5px; color: #7B8087; }
.cp-slot-status { font-size: 12.5px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cp-slot.filled { box-shadow: inset 0 -4px 0 #E9EBEE; }
.cp-slot.open { background: #6F757D; }
.cp-slot.open .cp-slot-title { color: #E0E3E7; }
.cp-slot.open .cp-slot-status { white-space: normal; font-size: 11.5px; }
.cp-printer { width: 100%; height: 34px; margin-top: 7px; border: 2px solid #0F1113; border-radius: 10px; background: #25282C; color: #9AA0A6; font-size: 12.5px; }
.cp-printer.ready { background: #F6F4EC; color: #33383D; font-weight: 600; }

/* tabblad vergroot: over het apparaat heen */
body.sheet-large #stage, body.sheet-large #controls { display: none; }

/* ------------------------------------------------------- liggende telefoon */
@media (orientation: landscape) and (max-height: 559px) {
  #topbar { min-height: 32px; padding-top: calc(2px + env(safe-area-inset-top)); padding-bottom: 2px; gap: 10px; }
  .tb-title span { display: none; }
  .tb-clock b { font-size: 17px; }
  .tb-button { height: 28px; width: 34px; padding: 4px; }
  #stage { flex: 1; min-height: 0; padding: 5px 8px 0; }
  #front { flex: 1; min-height: 0; height: auto; }
  #status { margin-top: 3px; min-height: 22px; padding: 2px 10px; font-size: 12.5px; }
  #controls { flex-wrap: nowrap; gap: 6px; padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); }
  .ctl { min-width: 0; flex: 1 1 54px; min-height: 42px; padding: 2px 4px; font-size: 11px; }
  .ctl svg { width: 19px; height: 19px; }
  #ctl-vehicle { flex: 0 0 auto; }
  #ctl-vehicle .ctl { flex: 0 0 58px; }
  .stepper button { width: 36px; }
  .stepper span { min-width: 66px; font-size: 13.5px; }
  #sheet { position: fixed; inset: 0; z-index: 20; border-top: 0; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  #sheet-head { padding-top: calc(8px + env(safe-area-inset-top)); background: var(--navy); }
  #sheet-head h2 { color: #fff; }
  #sheet-head .btn { border-color: #fff; min-height: 34px; }
  #sheet-grow { display: none; }
  body.demo-running #controls, body.demo-running #status { display: none; }
  #demo-bar { margin: 3px 0 4px; padding: 5px 10px; display: flex; align-items: center; gap: 10px; }
  #demo-bar[hidden] { display: none; }
  #demo-caption { flex: 1; font-size: clamp(14px, 2.2vw, 19px); min-height: 2.4em; display: flex; align-items: center; }
  #demo-controls { margin: 0; flex-wrap: nowrap; }
  #demo-controls .btn { min-height: 36px; padding: 4px 9px; font-size: 13px; }
}

/* --------------------------------------------------------- telefoon rechtop */
@media (orientation: portrait) and (max-width: 699px) {
  #app { display: block; height: auto; min-height: 100dvh; }
  #main { display: block; }
  .tb-title span { display: none; }
  .tb-chips .chip:nth-child(n+3) { display: none; }
  #tb-date, #sheet-grow { display: none; }
  #topbar { gap: 8px; }
  .tb-chips #chip-clock:not([hidden]) { display: inline-block; }
  #stage { position: sticky; top: 0; z-index: 5; padding: 8px 8px 0; background: var(--bg); }
  #front { display: none; }
  #compact { display: block; }
  #status { white-space: normal; line-height: 1.3; }
  #controls { gap: 6px; padding: 8px; }
  #ctl-vehicle, #dock { width: 100%; }
  #ctl-vehicle .ctl { flex: 1; }
  #dock { justify-content: stretch; }
  #dock .ctl { flex: 1; min-width: 0; padding: 4px 2px; font-size: 11px; }
  #sheet { display: block; border-top: 0; }
  #sheet-body { overflow: visible; }
  .print-layout { grid-template-columns: 1fr; }
  .paper-wrap { justify-self: center; }
  #demo-caption { font-size: 17px; }
}
@media (max-width: 900px) {
  .print-layout { grid-template-columns: 1fr; }
  .paper-wrap { justify-self: center; }
}