/* ── Moof-Up Stylesheet ── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --orange:    #E8521A;
  --orange-dim:#b83f12;
  --black:     #0a0a0a;
  --surface:   #141414;
  --surface2:  #1e1e1e;
  --surface3:  #282828;
  --border:    #2a2a2a;
  --border2:   #3a3a3a;
  --text:      #f0ece6;
  --text2:     #a09a92;
  --text3:     #6a6460;
  --green:     #2dba6e;
  --amber:     #f0a030;
  --red:       #e84040;
  --blue:      #3a8cf0;
  --font-head: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  /* Compensate for the 64px fixed public nav when anchor-scrolling to sections. */
  scroll-padding-top: 80px;
}
body {
  background: var(--black);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font-body); }
input, select, textarea { font-family: var(--font-body); }

/* pages are shown/hidden via inline style by app.js */

/* ════════════════════════════════════════
   PUBLIC WEBSITE
════════════════════════════════════════ */

/* ── NAV (public homepage only; scoped so the dashboard's .sidebar-nav doesn't inherit) ── */
#page-home > nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; height: 64px;
  background: rgba(10,10,10,0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.logo {
  font-family: var(--font-head);
  font-size: 28px; font-weight: 800; letter-spacing: 2px; cursor: pointer;
}
.logo span { color: var(--orange); }
#page-home > nav ul { display: flex; gap: 32px; list-style: none; }
#page-home > nav ul a {
  color: var(--text2); font-size: 13px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase; transition: color .2s;
}
#page-home > nav ul a:hover { color: var(--text); }
.nav-btn {
  padding: 8px 20px; font-size: 13px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; transition: all .2s;
}
.nav-login {
  background: transparent; color: var(--text2);
  border: 1px solid var(--border2); margin-right: 8px;
}
.nav-login:hover { border-color: var(--text2); color: var(--text); }
.nav-cta { background: var(--orange); color: white; border: none; }
.nav-cta:hover { background: var(--orange-dim); }

/* Drawer-only nav item. On desktop the .nav-login button covers this, so the
   li stays hidden; the @media (max-width: 900px) block reveals it. */
.nav-mobile-only { display: none; }

/* ── Mobile hamburger ── */
.nav-hamburger {
  display: none;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--border2);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
}
.nav-hamburger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--text);
  transition: transform .2s, opacity .2s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── HERO ── */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 0 40px 80px; position: relative; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 70% 50%, #1a0a05 0%, var(--black) 70%);
}
.hero-grid {
  position: absolute; inset: 0; opacity: .07;
  background-image:
    linear-gradient(var(--orange) 1px, transparent 1px),
    linear-gradient(90deg, var(--orange) 1px, transparent 1px);
  background-size: 60px 60px;
}
.hero-eyebrow {
  font-family: var(--font-mono); font-size: 12px; color: var(--orange);
  letter-spacing: 3px; text-transform: uppercase; margin-bottom: 16px; position: relative;
}
.hero h1 {
  font-family: var(--font-head); font-size: clamp(72px, 12vw, 160px);
  font-weight: 800; line-height: .9; letter-spacing: -2px;
  text-transform: uppercase; position: relative; margin-bottom: 32px;
}
.hero h1 em { color: var(--orange); font-style: normal; }
.hero-sub {
  font-size: 18px; color: var(--text2); max-width: 480px;
  position: relative; margin-bottom: 40px; line-height: 1.5;
}
.hero-actions { display: flex; gap: 16px; position: relative; }
.hero-ticker {
  position: absolute; right: 40px; bottom: 80px;
  text-align: right; font-family: var(--font-mono); font-size: 11px;
  color: var(--text3); line-height: 2;
}
.hero-ticker strong { color: var(--orange); font-size: 32px; font-weight: 500; display: block; }

/* ── BUTTONS ── */
.btn-primary {
  background: var(--orange); color: white; padding: 14px 32px;
  font-size: 14px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  transition: background .2s;
}
.btn-primary:hover { background: var(--orange-dim); }
.btn-ghost {
  background: transparent; color: var(--text); padding: 14px 32px;
  font-size: 14px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
  border: 1px solid var(--border2); transition: border-color .2s;
}
.btn-ghost:hover { border-color: var(--text); }

/* ── SECTIONS ── */
section { padding: 100px 40px; }
.section-label {
  font-family: var(--font-mono); font-size: 11px; color: var(--orange);
  letter-spacing: 3px; text-transform: uppercase; margin-bottom: 16px;
}
.section-title {
  font-family: var(--font-head); font-size: clamp(36px, 5vw, 64px);
  font-weight: 700; text-transform: uppercase; line-height: 1;
  margin: 0 0 48px 0;
}

/* ── SERVICES ── */
#services { background: var(--surface); border-top: 1px solid var(--border); }
.services-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; background: var(--border);
}
.service-card {
  background: var(--surface); padding: 40px 32px; transition: background .2s;
}
.service-card:hover { background: var(--surface2); }
.service-icon { font-size: 32px; margin-bottom: 20px; }
.service-card h3 {
  font-family: var(--font-head); font-size: 24px; font-weight: 700;
  text-transform: uppercase; margin-bottom: 12px;
}
.service-card p { color: var(--text2); font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
.service-price { font-family: var(--font-mono); font-size: 13px; color: var(--orange); }

/* ── BOOKING ── */
#booking { border-top: 1px solid var(--border); }
.booking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 1000px; }
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block; font-size: 12px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text2); margin-bottom: 8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text); padding: 12px 16px; font-size: 15px; outline: none;
  transition: border-color .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--orange); }
.form-group select { appearance: none; }
.form-group textarea { resize: vertical; min-height: 100px; }
.booking-info h3 {
  font-family: var(--font-head); font-size: 28px;
  font-weight: 700; text-transform: uppercase; margin-bottom: 20px;
}
.info-item {
  display: flex; gap: 16px; margin-bottom: 24px;
  padding-bottom: 24px; border-bottom: 1px solid var(--border);
}
.info-item:last-child { border-bottom: none; }
.info-dot {
  width: 8px; height: 8px; background: var(--orange);
  border-radius: 50%; margin-top: 8px; flex-shrink: 0;
}
.info-item p { color: var(--text2); font-size: 14px; }
.info-item strong { color: var(--text); display: block; margin-bottom: 4px; }

/* ── FOOTER ── */
footer {
  background: var(--surface); border-top: 1px solid var(--border); padding: 60px 40px 40px;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px; margin-bottom: 40px;
}
.footer-brand p { color: var(--text2); font-size: 14px; line-height: 1.7; max-width: 300px; margin-top: 12px; }
.footer-col h4 {
  font-size: 12px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text3); margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a { color: var(--text2); font-size: 14px; transition: color .2s; }
.footer-col ul a:hover { color: var(--orange); }
.footer-bottom {
  padding-top: 24px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.footer-bottom p { color: var(--text3); font-size: 12px; }

/* ════════════════════════════════════════
   LOGIN PAGE
════════════════════════════════════════ */
#page-login {
  min-height: 100vh; display: flex; align-items: center;
  justify-content: center; background: var(--black);
}
.login-box {
  width: 400px; padding: 48px; background: var(--surface); border: 1px solid var(--border);
}
.login-logo {
  font-family: var(--font-head); font-size: 32px;
  font-weight: 800; letter-spacing: 2px; margin-bottom: 8px;
}
.login-logo span { color: var(--orange); }
.login-subtitle { color: var(--text2); font-size: 14px; margin-bottom: 40px; }
.login-error { color: var(--red); font-size: 13px; margin-bottom: 12px; display: none; }

/* ════════════════════════════════════════
   DASHBOARD
════════════════════════════════════════ */
#page-dashboard { display: flex; min-height: 100vh; }

/* ── SIDEBAR ── */
.sidebar {
  width: 220px; background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 50;
}
.sidebar-logo {
  padding: 20px 24px; border-bottom: 1px solid var(--border);
  font-family: var(--font-head); font-size: 22px; font-weight: 800; letter-spacing: 2px;
}
.sidebar-logo span { color: var(--orange); }
.sidebar-nav { flex: 1; padding: 16px 0; overflow-y: auto; }
.sidebar-section {
  padding: 8px 24px 4px; font-family: var(--font-mono); font-size: 10px;
  color: var(--text3); letter-spacing: 2px; text-transform: uppercase; margin-top: 8px;
}
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 24px;
  color: var(--text2); font-size: 14px; cursor: pointer; transition: all .15s;
  border-left: 2px solid transparent;
}
.nav-item:hover { color: var(--text); background: var(--surface2); }
.nav-item.active {
  color: var(--orange); border-left-color: var(--orange);
  background: rgba(232,82,26,.08);
}
.nav-item .nav-icon { width: 18px; text-align: center; font-size: 15px; }
.sidebar-user { padding: 16px 24px; border-top: 1px solid var(--border); }
.user-row { display: flex; align-items: center; gap: 10px; }
.user-avatar {
  width: 32px; height: 32px; background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: white; border-radius: 50%;
}
.user-name { font-size: 13px; font-weight: 500; }
.user-role { font-size: 11px; color: var(--text3); }
.logout-btn {
  margin-top: 10px; font-size: 12px; color: var(--text3);
  padding: 0; transition: color .2s;
}
.logout-btn:hover { color: var(--red); }

/* ── MAIN CONTENT ── */
.main-content {
  margin-left: 220px; flex: 1; padding: 32px; min-height: 100vh; background: var(--black);
  /* Flex-item default is min-width:auto, waardoor één intrinsiek breed element
     (een grid met vaste kolommen, een lange regel) de HELE pagina breder duwt
     dan het scherm — op mobiel moest je dan uitzoomen. min-width:0 kapt die
     doorwerking af; brede widgets scrollen daarna in hun eigen container. */
  min-width: 0;
}
.panel { display: none; }
.panel.active { display: block; }
.panel-title {
  font-family: var(--font-head); font-size: 32px;
  font-weight: 700; text-transform: uppercase; margin-bottom: 24px;
}

/* ── Mobile top app bar + drawer chrome (visible <=900px) ──
   Must be declared BEFORE the @media (max-width: 900px) overrides below,
   otherwise the default `display: none` here would come later in source order
   and beat the media-query `display: flex` (equal specificity → source wins). */
.mobile-topbar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  align-items: center;
  padding: 0 12px;
  gap: 12px;
}
.mobile-topbar-title {
  flex: 1;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  text-align: center;
}
.mobile-topbar-title span { color: var(--orange); }
.mobile-menu-toggle {
  width: 44px; height: 44px;
  background: transparent; border: none; padding: 10px;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  cursor: pointer;
}
.mobile-menu-toggle span {
  display: block; height: 2px; background: var(--text); width: 22px;
  transition: transform .2s, opacity .2s;
}
body.mobile-nav-open .mobile-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.mobile-nav-open .mobile-menu-toggle span:nth-child(2) { opacity: 0; }
body.mobile-nav-open .mobile-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-topbar-user {
  width: 44px; height: 44px;
  background: transparent; border: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.mobile-topbar-avatar {
  width: 32px; height: 32px;
  background: var(--orange); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  border-radius: 50%;
}
.mobile-nav-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 49;
  opacity: 0;
  transition: opacity .25s ease;
}
.mobile-nav-backdrop.open { display: block; opacity: 1; }
body.mobile-nav-open { overflow: hidden; }

/* ── KPI CARDS ── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 32px; }
.kpi-card { background: var(--surface); border: 1px solid var(--border); padding: 20px 24px; }
.kpi-label {
  font-family: var(--font-mono); font-size: 11px; color: var(--text3);
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px;
}
.kpi-value { font-family: var(--font-head); font-size: 36px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
.kpi-change { font-size: 12px; color: var(--green); }
.kpi-change.down { color: var(--red); }

/* ── LAYOUT HELPERS ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.widget { background: var(--surface); border: 1px solid var(--border); padding: 24px; }
.widget-title {
  font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text2); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}

/* ── DATA TABLE ── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text3); text-align: left;
  padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 400;
}
.data-table td {
  padding: 12px; font-size: 14px;
  border-bottom: 1px solid var(--border); color: var(--text2);
}
.data-table td:first-child { color: var(--text); font-weight: 500; }
.data-table tr:hover td { background: var(--surface2); cursor: pointer; }
.data-table tr:last-child td { border-bottom: none; }

/* ── BADGES ── */
.badge {
  display: inline-block; padding: 3px 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .5px; border-radius: 2px;
}
.badge-green  { background: rgba(45,186,110,.15);  color: var(--green); }
.badge-amber  { background: rgba(240,160,48,.15);  color: var(--amber); }
.badge-red    { background: rgba(232,64,64,.15);   color: var(--red);   }
.badge-blue   { background: rgba(58,140,240,.15);  color: var(--blue);  }
.badge-gray   { background: rgba(160,154,146,.1);  color: var(--text3); }

/* ── TOOLBAR ── */
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.search-box {
  flex: 1; max-width: 320px; background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text); padding: 9px 14px; font-size: 14px; outline: none;
  transition: border-color .2s;
}
.search-box:focus { border-color: var(--orange); }
.filter-select {
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text2); padding: 9px 14px; font-size: 14px; outline: none; cursor: pointer;
}
.btn-sm { padding: 9px 18px; font-size: 13px; font-weight: 500; letter-spacing: .5px; }
.btn-orange { background: var(--orange); color: white; }
.btn-orange:hover { background: var(--orange-dim); }
.btn-outline {
  background: transparent; color: var(--text2); border: 1px solid var(--border2);
  transition: all .2s;
}
.btn-outline:hover { border-color: var(--text2); color: var(--text); }

/* WhatsApp click-to-chat button — an outline button in WhatsApp's green so it
   reads as "leaves the app" rather than as another Moof-Up action. */
.btn-whatsapp { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); display: inline-flex; align-items: center; gap: 7px; }
.btn-whatsapp:hover { color: var(--green); border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); }
.btn-whatsapp svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

/* ── MODAL ── */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 200;
  display: none; align-items: center; justify-content: center;
}
.modal-bg.open { display: flex; }
/* Pickers die bovenop een andere open modal verschijnen (bijv. de
   reparatiecode-picker vanuit de kassa's losse-verkoopmodal): gelijk z-index
   zou op DOM-volgorde stapelen, en de picker staat eerder in de DOM. */
.modal-bg.modal-stack { z-index: 210; }
/* Maatvarianten als klasse, nooit als inline style: een inline width wint
   van de "modals full-screen"-regels in het 600px-blok en gaf op de telefoon
   weer een te breed venster (de factuur-preview was er zo een). */
.modal.modal-fc      { width: 95vw; max-width: 1100px; padding: 0; }
.modal.modal-compact { width: 480px; max-width: 95vw; }

/* Labelvoorbeeld: het canvas dat straks naar de labelprinter gaat, op ware
   verhouding. Wit op een lichte ondergrond — een thermisch label is nu eenmaal
   wit, ook in het donkere dashboard. */
.label-preview {
  background: #fff; border: 1px solid var(--border2); padding: 6px;
  line-height: 0;
}

.modal {
  background: var(--surface); border: 1px solid var(--border2);
  padding: 32px; width: 560px; max-height: 90vh; overflow-y: auto; position: relative;
  /* Keep a touch scroll inside the modal. Without this the scroll *chains* to the
     page as soon as the modal reaches its top or bottom, and the dashboard slides
     around behind the open kaart — very visible on phones, where modals are
     full-screen and easy to fling. */
  overscroll-behavior: contain;
}

/* Scroll lock for the page behind an open modal. overscroll-behavior above stops
   the chaining, but a touch that lands on the backdrop (or on a non-scrollable
   part of the modal) still drags the body. Pinning the body is the fix.
   position:fixed rather than plain overflow:hidden because iOS Safari ignores
   overflow:hidden on body and rubber-bands anyway. Pinning collapses the body to
   the viewport, so JS stashes the scroll offset in --scroll-lock-top and puts it
   back on close — otherwise closing a modal dumps you at the top of the list. */
body.modal-open {
  position: fixed;
  top: var(--scroll-lock-top, 0px);
  left: 0; right: 0;
  width: 100%;
  overflow: hidden;
}
/* Content-heavy modals use these helper classes so they stay responsive on
   smaller screens but get the width they need on desktop. */
.modal.modal-md { width: 95vw; max-width: 720px; }
.modal.modal-lg { width: 95vw; max-width: 900px; }
.modal.modal-xl { width: 95vw; max-width: 1200px; }
.modal-title {
  font-family: var(--font-head); font-size: 24px;
  font-weight: 700; text-transform: uppercase; margin-bottom: 24px;
}
.modal-close {
  position: absolute; top: 16px; right: 20px;
  color: var(--text3); font-size: 22px; transition: color .2s;
}
.modal-close:hover { color: var(--text); }
.modal-footer {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border);
}
.modal-footer .btn-sm { flex: 0 0 auto; }
.detail-row {
  display: flex; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.detail-row span:first-child { color: var(--text3); }
.detail-row span:last-child { color: var(--text); font-weight: 500; }

/* ── REPAIR STATUS FLOW ── */
.repair-status-flow { display: flex; margin-bottom: 24px; }
.status-step {
  flex: 1; padding: 8px 12px; background: var(--surface3);
  text-align: center; font-size: 11px; font-family: var(--font-mono);
  color: var(--text3); border-right: 1px solid var(--border);
}
.status-step.done  { background: rgba(232,82,26,.15); color: var(--orange); }
.status-step.current { background: var(--orange); color: white; }
.status-step:last-child { border-right: none; }

/* ── KASSA ── */
/* ── Kassa v2 ── full-screen POS with pincode gate */
#panel-kassa { position: relative; min-height: calc(100vh - 80px); padding: 0; }

.k2-lock {
  position: absolute; inset: 0;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}
.k2-lock.hidden { display: none; }
.k2-lock-box {
  background: var(--surface); border: 1px solid var(--border2);
  padding: 40px 48px; min-width: 360px;
  text-align: center;
}
.k2-lock-eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--orange); margin-bottom: 10px;
}
.k2-lock-title {
  font-family: var(--font-head); font-size: 36px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text);
  margin-bottom: 8px;
}
.k2-lock-sub {
  font-size: 13px; color: var(--text3); margin-bottom: 22px;
}
/* Pincode-weergave: ziet eruit als het oude invoerveld, maar is een div —
   zo opent het schermtoetsenbord van de kassa-pc nooit. */
.k2-pin-display {
  width: 100%;
  box-sizing: border-box;
  background: var(--black); border: 1px solid var(--border2); color: var(--text);
  font-family: var(--font-mono); font-size: 28px; letter-spacing: 12px;
  line-height: 1.2;
  padding: 14px 18px; text-align: center;
  min-height: 62px;
  user-select: none; -webkit-user-select: none;
}
.k2-pin-display.filled { border-color: var(--orange); }
.k2-pin-display .k2-pin-ph { color: var(--text3); }
.k2-lock-error {
  min-height: 18px; margin: 10px 0 6px;
  color: var(--red); font-size: 12px;
}
.k2-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.k2-num {
  padding: 14px 0;
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border2);
  touch-action: manipulation;   /* geen dubbeltik-zoom achter de kassa */
  /* De numpad verving de preventDefault op pointerdown (die hield de focus in
     het oude invoerveld); dit houdt een lange tik van het selectie-popupje af. */
  user-select: none; -webkit-user-select: none;
  transition: background .1s, border-color .1s, color .1s;
}
.k2-num:hover { background: var(--surface3); }
.k2-num:active { background: var(--orange); border-color: var(--orange); color: #fff; }
.k2-num-fn { color: var(--text2); font-size: 17px; }
.k2-num-ok { background: var(--orange); border-color: var(--orange); color: #fff; font-size: 17px; }
.k2-num-ok:hover { background: var(--orange-dim); }

.k2-shell {
  display: flex; flex-direction: column;
  height: calc(100vh - 80px);
  background: var(--black);
}

.k2-topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 22px; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.k2-brand {
  font-family: var(--font-head); font-size: 26px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; color: var(--text);
}
.k2-brand span { color: var(--orange); }
.k2-scan-wrap { flex: 1; }
.k2-scan {
  width: 100%;
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text); font-size: 15px; padding: 14px 18px;
  font-family: var(--font-body);
}
.k2-scan:focus { outline: none; border-color: var(--orange); }
.k2-scan::placeholder { color: var(--text3); }
.k2-topbar-actions { display: flex; gap: 12px; }
.k2-action {
  background: transparent; border: 1px solid var(--border);
  color: var(--text2); padding: 10px 14px; min-width: 80px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; transition: border-color 0.12s, color 0.12s;
  font-family: var(--font-body); font-size: 11px;
}
.k2-action:hover { border-color: var(--orange); color: var(--text); }
.k2-action-icon { font-size: 18px; }

.k2-body {
  flex: 1; display: grid; grid-template-columns: 1fr 340px;
  gap: 22px; padding: 22px; min-height: 0;
}

.k2-cart {
  background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
}
.k2-cart-head, .k2-cart-row {
  display: grid;
  grid-template-columns: 140px 1fr 80px 100px 80px 100px 30px;
  align-items: center; gap: 0;
}
.k2-cart-head {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text3);
}
.k2-cart-head > div, .k2-cart-row > div { padding-right: 8px; }
.k2-cart-head .c-aantal, .k2-cart-head .c-stuk,
.k2-cart-head .c-korting, .k2-cart-head .c-prijs { text-align: right; }
.k2-cart-body { flex: 1; overflow-y: auto; }
.k2-cart-empty {
  padding: 60px 20px; text-align: center; color: var(--text3);
  font-size: 13px;
}
.k2-cart-row {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--text);
}
.k2-cart-row .c-barcode {
  font-family: var(--font-mono); font-size: 11px; color: var(--text3);
}
.k2-cart-row .c-product { color: var(--text); }
.k2-cart-row .c-aantal, .k2-cart-row .c-stuk,
.k2-cart-row .c-korting, .k2-cart-row .c-prijs {
  font-family: var(--font-mono); text-align: right;
}
.k2-cart-row .c-prijs { color: var(--orange); font-weight: 600; }
.k2-cart-row .c-x button {
  background: transparent; border: none; color: var(--text3);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
}
.k2-cart-row .c-x button:hover { color: var(--red); }
.k2-cart-row input[type="number"] {
  width: 60px; background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); padding: 4px 6px; text-align: right;
  font-family: var(--font-mono); font-size: 13px;
}
.k2-cart-row input[type="number"].k2-qty-retour {
  border-color: var(--amber);
  color: var(--amber);
}
.k2-cart-row .k2-qty-text {
  display: inline-block;
  font-family: var(--font-mono); font-size: 13px;
  padding: 4px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
}
.k2-cart-row .k2-qty-text.k2-qty-retour {
  color: var(--amber);
  border-color: var(--amber);
}
.k2-cart-row.k2-row-click { cursor: pointer; transition: background 0.1s; }
.k2-cart-row.k2-row-click:hover { background: var(--surface2); }
.k2-cart-row .k2-inline-edit {
  width: 100%;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); padding: 4px 6px;
  font-family: var(--font-body); font-size: 13px;
}
.k2-cart-row .k2-inline-edit.k2-inline-price {
  width: 90px; text-align: right; font-family: var(--font-mono);
}
.k2-cart-row .k2-inline-edit:focus { outline: none; border-color: var(--orange); }

/* BTW-tarief tag op een kassaregel (alleen zichtbaar bij afwijkend tarief) */
.k2-btw-tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px;
  padding: 1px 6px; margin-left: 6px;
  color: var(--amber); border: 1px solid var(--amber);
  vertical-align: 1px;
}

/* 21% / 9% schakelaar in de losse-verkoopmodal */
.k2-btw-switch { display: flex; gap: 0; }
.k2-btw-switch button {
  flex: 1;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text3); cursor: pointer;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  padding: 10px 12px;
  transition: border-color .15s, color .15s, background .15s;
}
.k2-btw-switch button + button { margin-left: -1px; }
.k2-btw-switch button span {
  display: block;
  font-family: var(--font-body); font-size: 11px; font-weight: 400;
  color: var(--text3); margin-top: 2px;
}
.k2-btw-switch button.active {
  position: relative; z-index: 1;
  background: var(--surface3); border-color: var(--orange); color: var(--orange);
}
.k2-btw-switch button.active span { color: var(--text); }

/* Openstaande-facturenpicker: bredere nummer-kolom + statusbadge rechts */
.rcode-picker-row.k2-factuur-row { grid-template-columns: 110px 1fr 90px auto; }
.rcode-picker-row.k2-factuur-row .rcode-picker-code { font-size: 13px; }

.k2-sidebar { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.k2-total-box {
  background: var(--surface); border: 1px solid var(--border);
  padding: 18px 22px;
}
.k2-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: 12px; color: var(--text3);
  text-transform: uppercase; letter-spacing: 1px;
  padding-bottom: 10px;
}
.k2-total-row + .k2-total-row { padding-top: 0; }
.k2-total-row span:last-child { color: var(--text); }
.k2-korting-row { color: var(--orange); }
.k2-korting-row span:first-child { color: var(--orange); }
/* Only the last .k2-total-row before the TE BETALEN block gets the divider */
.k2-total-box > .k2-total-row:last-of-type {
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  padding-bottom: 12px;
}
.k2-total-main { text-align: right; }
.k2-total-label {
  font-family: var(--font-mono); font-size: 11px; color: var(--text3);
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px;
}
.k2-total-amount {
  font-family: var(--font-head); font-size: 40px; font-weight: 800;
  color: var(--text); line-height: 1;
}
.k2-medewerker {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: 18px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--font-body);
}
.k2-medewerker:hover { border-color: var(--orange); }
.k2-med-icon { font-size: 22px; }
.k2-med-label {
  font-family: var(--font-mono); font-size: 10px; color: var(--text3);
  letter-spacing: 1px; text-transform: uppercase;
}
.k2-med-name { font-size: 15px; font-weight: 600; color: var(--orange); }
.k2-pay-btn {
  background: var(--orange); color: #fff; border: none;
  padding: 22px; cursor: pointer;
  font-family: var(--font-head); font-size: 22px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  transition: background 0.12s;
}
.k2-pay-btn:hover:not(:disabled) { background: var(--orange-dim, #b83f12); }
.k2-pay-btn:disabled { background: var(--surface2); color: var(--text3); cursor: not-allowed; }

/* Inruil picker — klant bike rows in the factuur editor "Inruil" flow */
.inruil-pick-row {
  display: block; width: 100%;
  text-align: left;
  background: var(--surface2); border: 1px solid var(--border);
  padding: 14px 16px; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  font-family: var(--font-body); color: var(--text);
}
.inruil-pick-row:hover { border-color: var(--orange); background: var(--surface); }
.inruil-pick-name { font-size: 15px; font-weight: 600; color: var(--text); }
.inruil-pick-meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--text3);
  margin-top: 4px; letter-spacing: 0.5px;
}

/* Regel edit modal (row click) */
.k2-regel-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.k2-regel-row {
  display: grid; grid-template-columns: 110px 1fr;
  align-items: stretch;
  border: 1px solid var(--border); background: var(--surface2);
}
.k2-regel-row > * { padding: 14px 16px; }
.k2-regel-label {
  color: var(--text3); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase;
  border-right: 1px solid var(--border);
  display: flex; align-items: center;
}
.k2-regel-row-wide { grid-template-columns: 110px 1fr; }
.k2-regel-row-total { background: var(--surface); border-color: var(--orange); }
.k2-regel-row-total .k2-regel-total-val {
  font-family: var(--font-head); font-size: 26px; font-weight: 800;
  color: var(--orange); letter-spacing: 0.5px;
}

.k2-stepper {
  display: grid; grid-template-columns: 48px 1fr 48px;
  align-items: stretch; padding: 0 !important;
}
.k2-step-btn {
  background: transparent; border: none; color: var(--text);
  font-family: var(--font-head); font-size: 22px; font-weight: 800;
  cursor: pointer; transition: background 0.1s;
  border-right: 1px solid var(--border);
}
.k2-stepper .k2-step-btn:last-child { border-right: none; border-left: 1px solid var(--border); }
.k2-step-btn:hover { background: var(--surface); color: var(--orange); }
.k2-stepper input {
  background: transparent; border: none; color: var(--text);
  font-family: var(--font-head); font-size: 22px; font-weight: 800;
  text-align: center;
}
.k2-stepper input:focus { outline: none; }

.k2-money-field {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 10px; padding: 12px 16px !important;
}
.k2-money-symbol {
  font-family: var(--font-head); font-size: 18px; font-weight: 700;
  color: var(--text2);
}
.k2-money-field input, .k2-money-field span.k2-regel-total-val {
  background: transparent; border: none; color: var(--text);
  font-family: var(--font-head); font-size: 22px; font-weight: 700;
  text-align: right; width: 100%;
}
.k2-money-field input:focus { outline: none; color: var(--orange); }

.k2-regel-input {
  background: transparent; border: none; color: var(--text);
  font-family: var(--font-body); font-size: 15px; width: 100%;
}
.k2-regel-input:focus { outline: none; color: var(--orange); }

/* Payment method picker modal */
.k2-pay-methods {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px;
}
.k2-pay-method {
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text); padding: 28px 18px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-body); transition: border-color 0.12s, background 0.12s;
}
.k2-pay-method:hover { border-color: var(--orange); background: var(--surface); }
.k2-pay-method:disabled { opacity: 0.5; cursor: not-allowed; }
.k2-pay-icon { font-size: 36px; line-height: 1; }
.k2-pay-name {
  font-family: var(--font-head); font-size: 22px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text);
}
.k2-pay-hint {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text3);
}

.k2-bottombar {
  display: flex; gap: 10px;
  padding: 14px 22px; background: var(--surface);
  border-top: 1px solid var(--border);
}
.k2-bottom {
  background: transparent; border: 1px solid var(--border);
  color: var(--text2); padding: 12px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; min-width: 96px;
  font-family: var(--font-body); font-size: 11px;
  transition: border-color 0.12s, color 0.12s;
}
.k2-bottom:hover { border-color: var(--orange); color: var(--text); }
.k2-bottom.active { background: var(--orange); color: #fff; border-color: var(--orange); }
.k2-bottom-icon { font-size: 18px; }

.kassa-layout {
  display: grid; grid-template-columns: 1fr 380px;
  gap: 24px; height: calc(100vh - 120px);
}
.kassa-items {
  background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.kassa-search { padding: 16px; border-bottom: 1px solid var(--border); }
.kassa-product-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: var(--border); flex: 1; overflow-y: auto;
}
.kassa-product {
  background: var(--surface2); padding: 16px; cursor: pointer;
  transition: background .15s; text-align: left; color: var(--text);
}
.kassa-product:hover { background: var(--surface3); }
.kassa-product:disabled { opacity: .4; cursor: not-allowed; }
.kassa-product-name { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.kassa-product-price { font-family: var(--font-mono); font-size: 13px; color: var(--orange); }
.kassa-product-stock { font-size: 11px; color: var(--text3); margin-top: 4px; }
.kassa-cart {
  background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.kassa-cart-title {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text2);
}
.cart-items { flex: 1; overflow-y: auto; }
.cart-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
}
.cart-item-name { flex: 1; font-size: 13px; }
.cart-item-qty { display: flex; align-items: center; gap: 8px; }
.qty-btn {
  width: 24px; height: 24px; background: var(--surface3);
  color: var(--text); font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.cart-item-price {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text2); min-width: 60px; text-align: right;
}
.cart-remove { color: var(--text3); font-size: 16px; transition: color .2s; }
.cart-remove:hover { color: var(--red); }
.kassa-totals { padding: 16px 20px; border-top: 1px solid var(--border); }
.total-row {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--text2); margin-bottom: 8px;
}
.total-row.grand { font-size: 18px; color: var(--text); font-weight: 600; margin-bottom: 0; }
.total-row.grand span:last-child { color: var(--orange); font-family: var(--font-mono); }
.kassa-pay-btn {
  width: 100%; margin-top: 16px; padding: 14px; background: var(--green);
  color: white; font-size: 15px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; transition: opacity .2s;
}
.kassa-pay-btn:hover:not(:disabled) { opacity: .9; }
.kassa-pay-btn:disabled { opacity: .3; cursor: not-allowed; }

/* ── PLANNING / KALENDER ──
   Apple Calendar-indeling in het Moof-Up donker: tijdbalk links, dagkolommen,
   afspraken absoluut gepositioneerd op hun echte begintijd en duur. */

.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-navbtn {
  width: 30px; height: 30px;
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--text2);
  font-size: 17px; line-height: 1;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.cal-navbtn:hover { border-color: var(--orange); color: var(--orange); }
.cal-label {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--text);
  margin-left: 6px;
  white-space: nowrap;
}

/* Segmented control (Dag / Week / Maand) */
.cal-views { display: flex; border: 1px solid var(--border2); }
.cal-view {
  padding: 6px 16px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border2);
  color: var(--text3);
  font-family: var(--font-head);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.cal-view:last-child { border-right: none; }
.cal-view:hover  { color: var(--text); }
.cal-view.active { background: var(--orange); color: #fff; }

.cal-acties { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cal-hint { font-family: var(--font-mono); font-size: 11px; }
.cal-hint-aan  { color: var(--green); }
.cal-hint-uit  { color: var(--text3); }
.cal-hint-tijd { color: var(--text3); margin-left: 6px; }
.cal-tip { font-size: 12px; color: var(--text3); margin-bottom: 12px; }

/* Het raster zelf. Scrollt verticaal; de dagkop blijft staan. */
.cal-wrap {
  border: 1px solid var(--border);
  background: var(--surface);
  max-height: 68vh;
  overflow-y: auto;
  position: relative;
}
/* Dagkop + hele-dag strook blijven samen bovenaan hangen tijdens het scrollen. */
.cal-sticky {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface2);
  border-bottom: 1px solid var(--border2);
}
.cal-kop {
  display: grid;
  background: var(--surface2);
}
.cal-corner { border-right: 1px solid var(--border); }
.cal-daykop {
  padding: 8px 4px;
  text-align: center;
  border-right: 1px solid var(--border);
  cursor: pointer;
}
.cal-daykop:last-child { border-right: none; }
.cal-daykop:hover .cal-dagnaam { color: var(--text); }
.cal-dagnaam {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text3);
}
.cal-dagnr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px; height: 28px;
  margin-top: 3px;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  border-radius: 50%;
}
/* Vandaag: oranje bol om het datumnummer, zoals in Apple Calendar. */
.cal-daykop.today .cal-dagnr   { background: var(--orange); color: #fff; }
.cal-daykop.today .cal-dagnaam { color: var(--orange); }

/* Hele-dag strook (vakantie e.d. uit de gekoppelde agenda) */
.cal-allday {
  display: grid;
  border-top: 1px solid var(--border);
  background: var(--surface2);
  min-height: 30px;
}
.cal-allday-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text3);
  padding: 8px 6px;
  text-align: right;
  border-right: 1px solid var(--border);
}
.cal-allday-cel { padding: 4px; border-right: 1px solid var(--border); }
.cal-allday-chip {
  background: rgba(58,140,240,.16);
  border-left: 2px solid var(--blue);
  color: var(--text2);
  font-size: 11px;
  padding: 3px 6px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-body { display: grid; position: relative; }
.cal-gutter { border-right: 1px solid var(--border); }
.cal-uur {
  position: relative;
  border-bottom: 1px solid var(--border);
}
.cal-uur span {
  position: absolute;
  top: -7px; right: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  background: var(--surface);
  padding: 0 2px;
}
.cal-uur:first-child span { top: 2px; }

.cal-kolom {
  position: relative;
  border-right: 1px solid var(--border);
  cursor: copy;   /* nodigt uit om op een leeg vak te klikken */
}
.cal-kolom:last-child { border-right: none; }
.cal-kolom.today { background: rgba(232,82,26,.03); }
.cal-slot {
  border-bottom: 1px solid var(--border);
  position: relative;
}
/* Halfuurlijn: subtieler dan de uurlijn, precies zoals Apple 'm tekent. */
.cal-halfuur {
  position: absolute;
  top: 50%; left: 0; right: 0;
  border-bottom: 1px dashed var(--border);
  opacity: .45;
}

/* Afspraakblok */
.cal-blok {
  position: absolute;
  overflow: hidden;
  padding: 3px 6px;
  border-left: 3px solid var(--orange);
  background: rgba(232,82,26,.16);
  border-radius: 3px;
  cursor: pointer;
  transition: filter .12s;
  z-index: 1;
}
.cal-blok:hover { filter: brightness(1.35); z-index: 2; }
.cal-blok.extern {
  border-left-color: var(--text3);
  background: rgba(160,154,146,.13);
  cursor: default;
}
.cal-blok-titel {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-blok-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Blokken van 30 min of korter: titel en tijd op één regel houden. */
.cal-blok.kort { padding: 1px 6px; }
.cal-blok.kort .cal-blok-titel { font-size: 11px; }
.cal-blok.kort .cal-blok-meta  { display: none; }
/* Stipje = nog niet in de gekoppelde agenda gezet. */
.cal-unsynced { color: var(--amber); margin-left: 4px; }

/* De rode "nu"-lijn */
.cal-nu {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 2px solid var(--red);
  z-index: 4;
  pointer-events: none;
}
.cal-nu-bol {
  position: absolute;
  left: -5px; top: -5px;
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
}

/* ── Maandweergave ── */
.maand-wrap { border: 1px solid var(--border); background: var(--surface); }
.maand-kop {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--surface2);
  border-bottom: 1px solid var(--border2);
}
.maand-kop > div {
  padding: 8px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text3);
}
.maand-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(96px, 1fr);
}
.maand-cel {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px;
  cursor: pointer;
  transition: background .12s;
  overflow: hidden;
}
.maand-cel:nth-child(7n) { border-right: none; }
.maand-cel:hover { background: var(--surface2); }
.maand-cel.buiten { opacity: .35; }
.maand-dagnr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px; height: 22px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 4px;
  border-radius: 50%;
}
.maand-cel.today .maand-dagnr { background: var(--orange); color: #fff; }
.maand-chip {
  font-size: 11px;
  color: var(--text);
  padding: 2px 4px;
  margin-bottom: 2px;
  border-left: 2px solid var(--orange);
  background: rgba(232,82,26,.13);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.maand-chip.extern {
  border-left-color: var(--text3);
  background: rgba(160,154,146,.12);
  color: var(--text2);
}
.maand-chip-tijd {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text3);
  margin-right: 3px;
}
.maand-meer {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  padding-left: 4px;
}

/* ── PROGRESS BAR ── */
.progress-bar { height: 4px; background: var(--surface3); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.progress-fill { height: 100%; background: var(--orange); border-radius: 2px; }
.progress-fill.green { background: var(--green); }
.progress-fill.amber { background: var(--amber); }

/* ── NOTIFICATION ── */
.notif {
  position: fixed; bottom: 32px; right: 32px; background: var(--surface2);
  border: 1px solid var(--green); color: var(--green); padding: 14px 24px;
  font-size: 14px; z-index: 300; display: none; font-family: var(--font-mono);
}
.notif.show { display: block; }
.notif.error { border-color: var(--red); color: var(--red); }

/* ── MODAL INPUTS ── */
.modal-input {
  width: 100%; background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text); padding: 10px 14px; font-size: 14px;
  font-family: var(--font-body); outline: none; transition: border-color .2s;
}
.modal-input:focus { border-color: var(--orange); }
textarea.modal-input { resize: vertical; min-height: 60px; }

/* ── Warning banner (default-password nudge etc.) ── */
.warning-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 24px;
  background: rgba(240, 160, 48, 0.08);
  border: 1px solid var(--amber);
  border-left: 4px solid var(--amber);
}
.warning-banner .warning-icon {
  font-size: 20px;
  color: var(--amber);
  flex-shrink: 0;
}
.warning-banner .warning-body {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.warning-banner strong { color: var(--amber); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1px; font-size: 11px; display: block; margin-bottom: 2px; }
.warning-banner em { color: var(--orange); font-style: normal; font-family: var(--font-mono); }

/* ── Honeypot (anti-bot on public booking form) ── */
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ── Public status lookup ── */
.status-lookup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  max-width: 1100px;
}
.status-form .form-group { margin-bottom: 18px; }
.status-form .form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text3);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.status-form .form-group input {
  width: 100%;
  max-width: 420px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 14px 16px;
  font-size: 15px;
  outline: none;
}
.status-form .form-group input:focus { border-color: var(--orange); }

.status-result {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  padding: 28px 32px;
  animation: fadeIn .25s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.status-result .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--orange);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.status-result h3 {
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.status-result .info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin-bottom: 22px;
}
.status-result .info-grid .label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.status-result .info-grid .value { font-size: 14px; color: var(--text); }

.status-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 20px;
}
.status-step-pill {
  padding: 10px 6px;
  text-align: center;
  background: var(--surface3);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text3);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.status-step-pill.done    { border-color: var(--green); color: var(--green); }
.status-step-pill.current { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 600; }

.status-notfound {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  padding: 24px 28px;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.6;
}
.status-notfound strong { color: var(--red); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1px; font-size: 11px; display: block; margin-bottom: 6px; }

@media (max-width: 900px) {
  .status-lookup { grid-template-columns: 1fr; gap: 32px; }
  .status-steps { grid-template-columns: repeat(2, 1fr); }
}

/* ── Sidebar nav badge (unread bookings count) ── */
.nav-badge {
  display: inline-block;
  min-width: 20px;
  padding: 2px 7px;
  margin-left: 8px;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  border-radius: 10px;
  letter-spacing: 0;
  line-height: 1.4;
}

/* ── Tweewieler sheet (detail/edit modal) ── */
.tw-sheet {
  max-width: 920px;
  width: 92vw;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.tw-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--border);
}
.tw-sheet-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--orange);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.tw-sheet-title {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.15;
  margin: 0;
}
.tw-sheet-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text3);
  letter-spacing: .5px;
  margin-top: 4px;
}
.tw-sheet-header-right {
  display: flex;
  gap: 10px;
  align-items: center;
}
.tw-status-pill {
  padding: 6px 14px;
  background: var(--green);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.tw-status-pill.voorraad     { background: var(--green); }
.tw-status-pill.gereserveerd { background: var(--amber); }
.tw-status-pill.demo         { background: var(--blue); }
.tw-status-pill.verkocht     { background: var(--text3); }

/* Tiny dot that pulses orange when an auto-save is in flight, then fades. */
.tw-autosave-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background .2s, transform .2s;
}
.tw-autosave-dot.saving { background: var(--orange); transform: scale(1.2); }
.tw-autosave-dot.saved  { background: var(--green); }
.tw-autosave-dot.error  { background: var(--red); }

.tw-sheet-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  padding: 22px 28px 24px;
}
.tw-col { display: flex; flex-direction: column; gap: 12px; }
.tw-section-divider {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--orange);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 0 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.tw-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  align-items: center;
}
.tw-row > label {
  font-size: 13px;
  color: var(--text3);
  letter-spacing: .3px;
}
.tw-input {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 9px 12px;
  font-size: 13px;
  font-family: var(--font-body);
  outline: none;
  width: 100%;
  transition: border-color .15s;
}
.tw-input:focus { border-color: var(--orange); }
.tw-input.tw-mono { font-family: var(--font-mono); }
.tw-input.tw-small { width: 70px; flex: 0 0 70px; }
.tw-input.tw-inline-grow { flex: 1; }
textarea.tw-input { min-height: 48px; }

.tw-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tw-inline-sep {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text3);
  margin-right: 8px;
}

.tw-radio-group {
  display: flex;
  gap: 18px;
  align-items: center;
}
.tw-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.tw-radio input[type="radio"] {
  width: 14px; height: 14px;
  accent-color: var(--orange);
  cursor: pointer;
}

.tw-switch { width: 42px; height: 22px; }

.tw-side-section {
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tw-side-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text);
}
.tw-side-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--orange);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.tw-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tw-price-row > label {
  font-size: 12px;
  color: var(--text3);
  display: flex;
  flex-direction: column;
}
.tw-price-row > label > small {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 1px;
}
.tw-price-input {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 130px;
}
.tw-currency {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text3);
}
.tw-price-input .tw-input { text-align: right; }

.tw-margin-line {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text2);
  text-align: right;
  letter-spacing: .5px;
}
.tw-margin-line strong { color: var(--orange); font-weight: 600; }

.tw-sold-name {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text);
}
.tw-sold-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text3);
  margin-top: 4px;
}

@media (max-width: 900px) {
  .tw-sheet-body { grid-template-columns: 1fr; }
  .tw-row { grid-template-columns: 100px 1fr; gap: 10px; }
}

/* ── Klanten search card ── */
.klant-search-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.klant-search-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.klant-search-card .settings-row { margin-bottom: 0; }

/* ── Tweewielers panel ── */
.tw-tabs {
  display: flex;
  gap: 2px;
  background: var(--surface2);
  padding: 4px;
  border: 1px solid var(--border);
}
.tw-tab {
  background: transparent;
  color: var(--text3);
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background .15s, color .15s;
  border: none;
}
.tw-tab:hover { color: var(--text); }
.tw-tab.active {
  background: var(--orange);
  color: #fff;
}
.tw-form-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}
.tw-margin-preview {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text2);
  letter-spacing: .5px;
}
.tw-margin-preview strong { color: var(--orange); font-weight: 600; }

.tw-badge-elektrisch {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(58,140,240,.15);
  color: var(--blue);
  border: 1px solid var(--blue);
  margin-left: 8px;
}

@media (max-width: 900px) {
  .tw-form-grid { grid-template-columns: 1fr; }
}

/* ── Klant fietsen ── */
.fietsen-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.fiets-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
}
.fiets-info { flex: 1; }
.fiets-model {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text);
}
.fiets-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: .5px;
  margin-top: 2px;
}
.fiets-add {
  display: grid;
  grid-template-columns: 1fr 1fr 80px auto;
  gap: 6px;
  margin-top: 8px;
}
.fiets-add.fiets-add-5 {
  grid-template-columns: 1fr 1.2fr 1fr 70px auto;
}
.fiets-add input {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 8px 10px;
  font-size: 12px;
  outline: none;
}
.fiets-add input:focus { border-color: var(--orange); }

/* ── Importeer uit bon / factuur ── */
.ib-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.ib-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text3);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.ib-tab.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
.ib-tab:hover:not(.active) { color: var(--text2); }

.ib-pane { min-height: 100px; }

.ib-drop {
  border: 2px dashed var(--border2);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--surface2);
  transition: border-color .15s, background .15s;
}
.ib-drop:hover {
  border-color: var(--orange);
  background: var(--surface3);
}
.ib-drop-icon { font-size: 42px; margin-bottom: 10px; }
.ib-drop-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ib-drop-hint {
  font-size: 12px;
  color: var(--text3);
  margin-top: 4px;
}
.ib-status {
  margin-top: 14px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text2);
  min-height: 18px;
}
.ib-status.error { color: var(--red); }
.ib-status.success { color: var(--green); }

.ib-head {
  display: grid;
  grid-template-columns: 36px 2fr 140px 70px 90px 100px 36px;
  gap: 8px;
  padding: 8px 10px;
  background: var(--black);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text3);
}
.ib-row {
  display: grid;
  grid-template-columns: 36px 2fr 140px 70px 90px 100px 36px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.ib-row.off { opacity: 0.4; }
.ib-row.off input, .ib-row.off select { pointer-events: none; }
.ib-row input {
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 5px 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text);
  outline: none;
  width: 100%;
}
.ib-row input:focus { border-color: var(--orange); }
.ib-row .ib-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--orange);
}
.ib-row .ib-numeric { text-align: right; font-family: var(--font-mono); }
.ib-row .ib-match-new {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.ib-row .ib-match-existing {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--orange);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.ib-row .ib-remove {
  background: none;
  border: 1px solid var(--border2);
  color: var(--text3);
  padding: 3px 6px;
  font-size: 14px;
  cursor: pointer;
}
.ib-row .ib-remove:hover { border-color: var(--red); color: var(--red); }

/* ── Financiën panel ── */
.fin-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 160px;
  padding: 4px 0 8px;
}
.fin-bar-group {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.fin-bar-stack {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  width: 100%;
  height: 130px;
}
.fin-bar {
  flex: 1;
  min-width: 0;
  background: var(--surface3);
  border-top: 2px solid transparent;
  position: relative;
  transition: background .15s;
}
.fin-bar.income { background: var(--green); border-top-color: var(--green); }
.fin-bar.expense { background: var(--red); border-top-color: var(--red); }
.fin-bar:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -4px);
  background: var(--black);
  border: 1px solid var(--border2);
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}
.fin-bar-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text3);
  letter-spacing: .5px;
  text-transform: uppercase;
}

.fin-add-row {
  display: grid;
  grid-template-columns: 140px 150px 1fr 140px 90px 70px 110px auto;
  gap: 8px;
}
@media (max-width: 1100px) {
  .fin-add-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Active period button highlight */
.toolbar .btn-sm.btn-outline.fin-period-active {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}

/* Active source-tab highlight (Financiën income drill-in) */
.toolbar .btn-sm.btn-outline.fin-src-active {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}

/* Expenses-by-category breakdown bars */
.fin-cat-row {
  display: grid;
  grid-template-columns: 200px 1fr 120px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.12s;
}
.fin-cat-row:hover { border-color: var(--orange); }
.fin-cat-row.active { border-color: var(--orange); background: var(--surface3, #1e1e20); }
.fin-cat-name {
  font-size: 13px;
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fin-cat-bar {
  position: relative;
  height: 10px;
  background: var(--border);
  overflow: hidden;
}
.fin-cat-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--red);
}
.fin-cat-total {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--red);
  font-weight: 600;
}

/* ── Nested pickers (reparatiecode + tweewieler + onderdeel + inruil) sit on top of other modals ── */
#tw-picker-modal,
#rcode-picker-modal,
#onderdeel-picker-modal,
#inruil-picker-modal { z-index: 300; }

/* Settings: reparatiecodes CRUD list */
.rcode-head {
  display: grid;
  grid-template-columns: 90px 1fr 120px 80px 90px;
  gap: 8px;
  padding: 8px 12px;
  background: var(--black);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text3);
}
.rcode-list {
  display: flex;
  flex-direction: column;
  max-height: 440px;
  overflow-y: auto;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.rcode-row {
  display: grid;
  grid-template-columns: 90px 1fr 120px 80px 90px;
  gap: 8px;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.rcode-row:last-child { border-bottom: none; }
.rcode-row input,
.rcode-row select {
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 5px 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text);
  outline: none;
  width: 100%;
}
.rcode-row input:focus,
.rcode-row select:focus { border-color: var(--orange); }
.rcode-row .rc-code {
  font-family: var(--font-mono);
  color: var(--orange);
  font-weight: 700;
}
.rcode-row .rc-prijs { text-align: right; font-family: var(--font-mono); }
.rcode-row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.rcode-row-actions button {
  background: none;
  border: 1px solid var(--border2);
  color: var(--text3);
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
}
.rcode-row-actions button:hover { border-color: var(--orange); color: var(--orange); }
.rcode-row-actions button.del:hover { border-color: var(--red); color: var(--red); }
.rcode-add-row {
  display: grid;
  grid-template-columns: 90px 1fr 120px 80px auto;
  gap: 8px;
  padding: 14px 12px;
  margin-top: 10px;
  border: 1px dashed var(--border2);
  background: var(--surface2);
}

/* Reparatiecode picker list */
.rcode-picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 6px;
}
.rcode-picker-row {
  display: grid;
  grid-template-columns: 70px 1fr 90px 50px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 13px;
  transition: border-color .15s, background .15s;
}
.rcode-picker-row:hover { border-color: var(--orange); background: var(--surface3); }
.rcode-picker-code {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--orange);
}
.rcode-picker-naam { color: var(--text); }
.rcode-picker-prijs {
  font-family: var(--font-mono);
  color: var(--text);
  text-align: right;
  font-weight: 600;
}
.rcode-picker-btw {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  text-align: right;
}

/* ── Tweewieler picker modal (card grid) ── */
.tw-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 6px;
}
.tw-picker-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .15s, background .15s;
}
.tw-picker-card:hover {
  border-color: var(--orange);
  background: var(--surface3);
}
.tw-picker-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface3);
  border: 1px solid var(--border);
  object-fit: cover;
  display: block;
}
.tw-picker-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--text3);
}
.tw-picker-title {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  line-height: 1.15;
}
.tw-picker-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: .5px;
}
.tw-picker-price {
  font-family: var(--font-mono);
  color: var(--orange);
  font-size: 12px;
  font-weight: 600;
}
.tw-picker-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: auto;
}

/* ── Tweewieler list thumbnail (cover photo per row) ── */
.tw-list-thumb {
  width: 88px;
  height: 88px;
  object-fit: cover;
  display: block;
  background: var(--surface2);
  border: 1px solid var(--border);
}
.tw-list-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--text3);
}

/* ── Tweewieler photo gallery (lives in the right column under the price block) ── */
.tw-photos-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tw-photos-header > span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 2px;
  text-transform: uppercase;
  flex: 1;
}
.tw-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
}
.tw-photo-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: zoom-in;
}
.tw-photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tw-photo-tile .tw-photo-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: none;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
  padding: 0;
}
.tw-photo-tile:hover .tw-photo-del { opacity: 1; }
.tw-photo-tile .tw-photo-del:hover { background: var(--red); }
/* Photo row survived, file on disk did not. */
.tw-photo-gone {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text3);
  text-align: center;
  padding: 4px;
}
.tw-photos-empty {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--text3);
  padding: 14px 0;
  text-align: center;
  border: 1px dashed var(--border);
}

/* Lightbox for full-size photo view */
.tw-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
}
.tw-lightbox.open { display: flex; }
.tw-lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.tw-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: none;
  border: none;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
}

/* ── Tweewieler timeline: collapsible by default ── */
.tw-timeline-details {
  padding: 0 24px 16px;
  margin-top: 8px;
}
.tw-timeline-summary {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.tw-timeline-summary::-webkit-details-marker { display: none; }
.tw-timeline-summary::before {
  content: '▸';
  font-size: 10px;
  color: var(--orange);
  transition: transform .15s;
  display: inline-block;
}
.tw-timeline-details[open] .tw-timeline-summary::before { transform: rotate(90deg); }
.tw-timeline-details .timeline-wrap { padding: 10px 0 0 !important; margin-top: 0; }
/* The inner header loadTimelineInto renders would duplicate the summary — hide it. */
.tw-timeline-details .timeline-header { display: none; }

/* ── Activity timeline (repair/factuur detail modals) ── */
.timeline-wrap { margin-top: 22px; }
.timeline-header {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.timeline-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
  transition: color 0.12s;
}
.timeline-toggle:hover { color: var(--text); }
.timeline-toggle .timeline-count { color: var(--text3); font-weight: normal; margin-left: 4px; }
.timeline-toggle .timeline-chevron {
  display: inline-block;
  transition: transform 0.15s;
  color: var(--text3);
  font-size: 11px;
}
.timeline-toggle.open .timeline-chevron { transform: rotate(90deg); }
.timeline-toggle + .timeline { margin-top: 12px; }
.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
  border-left: 1px solid var(--border);
}
.timeline-item {
  position: relative;
  padding: 6px 0 14px 14px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: -22px;
  top: 8px;
  width: 9px; height: 9px;
  background: var(--orange);
  border: 2px solid var(--black);
  border-radius: 50%;
}
.timeline-detail {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}
.timeline-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: .5px;
  margin-top: 2px;
}

/* ── User management list ── */
.users-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.user-row-card {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-size: 13px;
}
.user-row-card .u-name {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text);
}
.user-row-card .u-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-top: 2px;
}
.user-row-card.disabled .u-name { color: var(--text3); text-decoration: line-through; }
.users-add {
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.users-add-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 10px;
  margin-top: 6px;
}
.users-add-row input,
.users-add-row select {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 10px 12px;
  font-size: 13px;
  outline: none;
}
.users-add-row input:focus { border-color: var(--orange); }

/* ── Aanvragen (bookings) inbox ── */
.bookings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.booking-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.booking-card:hover {
  border-color: var(--orange);
  background: var(--surface2);
}
.booking-card.nieuw {
  border-left: 3px solid var(--orange);
}
.booking-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.booking-card-head .naam {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.booking-card-meta {
  font-size: 12px;
  color: var(--text3);
  font-family: var(--font-mono);
  letter-spacing: .3px;
}
.booking-card-meta .sep { color: var(--border2); margin: 0 6px; }
.booking-card-body {
  font-size: 13px;
  color: var(--text2);
  margin-top: 8px;
  line-height: 1.5;
}
.booking-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  white-space: nowrap;
}
.booking-card-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text3);
}

.booking-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text3);
  font-size: 13px;
  border: 1px dashed var(--border);
}

/* ── TAKEN (to-do lijst) ── */
.taak-add {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.taak-add-titel {
  flex: 1;
  min-width: 220px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 9px 12px;
}
.taak-add-titel:focus { outline: none; border-color: var(--orange); }
.taak-add-titel::placeholder { color: var(--text3); }

.taken-list { display: flex; flex-direction: column; gap: 8px; }

.taak-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 14px 16px;
  transition: border-color .15s, background .15s;
}
.taak-row:hover { border-color: var(--border2); background: var(--surface2); }
.taak-row.done { opacity: .5; }
.taak-row.done .taak-titel { text-decoration: line-through; }

/* Checkbox — a real button so it's keyboard reachable. */
.taak-check {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  flex-shrink: 0;
  background: transparent;
  border: 1.5px solid var(--border2);
  color: transparent;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.taak-check:hover { border-color: var(--orange); }
.taak-check.checked {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.taak-body { cursor: pointer; min-width: 0; }
.taak-titel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text);
  line-height: 1.4;
}
/* Prioriteitsstip. Normaal blijft bewust neutraal, alleen Hoog springt eruit. */
.taak-prio {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text3);
}
.taak-prio.prio-hoog  { background: var(--red); }
.taak-prio.prio-laag  { background: var(--border2); }

.taak-notitie {
  font-size: 13px;
  color: var(--text2);
  margin-top: 4px;
  line-height: 1.5;
}
.taak-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.taak-meta > span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .3px;
  padding: 2px 8px;
  border: 1px solid var(--border2);
  color: var(--text3);
}
.taak-deadline.vandaag { color: var(--amber); border-color: var(--amber); }
.taak-deadline.te-laat { color: var(--red);   border-color: var(--red); }
.taak-wie    { color: var(--text2); }
.taak-repair { color: var(--blue); border-color: var(--blue); }

.taak-del {
  background: transparent;
  border: none;
  color: var(--text3);
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  transition: color .15s;
}
.taak-del:hover { color: var(--red); }

.taak-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text3);
  font-size: 13px;
  border: 1px dashed var(--border);
}

/* ── WERKBORD (reparaties + taken kanban) ── */
.wp-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.view-toggle { display: flex; border: 1px solid var(--border2); }
.view-toggle-btn {
  padding: 7px 18px;
  font-size: 13px;
  color: var(--text2);
  background: transparent;
  transition: background .15s, color .15s;
}
.view-toggle-btn.active { background: var(--orange); color: #fff; }

.werkbord {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.bord-kolom {
  flex: 1 0 236px;
  min-width: 236px;
  max-width: 330px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  max-height: calc(100vh - 290px);
  min-height: 180px;
  transition: border-color .15s, background .15s;
}
.bord-kolom.drag-over { border-color: var(--orange); background: var(--surface2); }
.bord-kolom-kop {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.bord-kolom-titel {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.bord-kolom-count { font-family: var(--font-mono); font-size: 11px; color: var(--text3); }
.bord-kolom-wis {
  margin-left: auto;
  font-size: 11px;
  color: var(--text3);
  border: 1px solid var(--border2);
  padding: 2px 8px;
  transition: color .15s, border-color .15s;
}
.bord-kolom-wis:hover { color: var(--red); border-color: var(--red); }
.bord-kolom-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  overflow-y: auto;
}

.bord-card {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--orange);
  padding: 10px 12px;
  cursor: grab;
  transition: background .15s, border-color .15s, opacity .15s;
}
.bord-card:hover { background: var(--surface3); }
.bord-card:active { cursor: grabbing; }
.bord-card.dragging { opacity: .35; }
.bord-card.akkoord { border-left-color: var(--green); }
.bord-card-taak { border-left-color: var(--blue); }
.bord-card-taak.done { opacity: .55; }
.bord-card-taak.done .bord-taak-titel span { text-decoration: line-through; }

.bord-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.bord-card-id { font-family: var(--font-mono); font-size: 11px; color: var(--text3); }
.bord-tag-taak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--blue);
}
.bord-card-titel { font-size: 14px; line-height: 1.35; color: var(--text); }
.bord-taak-titel { display: flex; align-items: flex-start; gap: 8px; }
.bord-taak-titel .taak-check { width: 18px; height: 18px; font-size: 11px; }
.bord-card-sub {
  font-size: 12px;
  color: var(--text2);
  margin-top: 3px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bord-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bord-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .3px;
  padding: 1px 6px;
  border: 1px solid var(--border2);
  color: var(--text3);
}
.bord-chip-bedrag { color: var(--orange); border-color: var(--orange); }

/* Pijltjes voor apparaten zonder muis — HTML5 drag & drop werkt daar niet. */
.bord-card-move { display: none; margin-left: auto; gap: 4px; }
.bord-move-btn {
  width: 26px;
  height: 26px;
  font-size: 16px;
  line-height: 1;
  color: var(--text2);
  border: 1px solid var(--border2);
  background: var(--surface);
}
.bord-move-btn:active { background: var(--orange); color: #fff; }
@media (hover: none) {
  .bord-card-move { display: flex; }
}

.bord-leeg {
  padding: 24px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text3);
  border: 1px dashed var(--border);
}
.bord-ouder {
  padding: 8px 4px;
  text-align: center;
  font-size: 11px;
  color: var(--text3);
  font-family: var(--font-mono);
  border: 1px dashed var(--border);
  background: transparent;
  transition: color .15s, border-color .15s;
}
.bord-ouder:hover { color: var(--orange); border-color: var(--orange); }

/* Klantgoedkeuring-knop op reparatiekaartjes (en in de reparatie-modal) */
.bord-akkoord {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .3px;
  padding: 2px 8px;
  margin-left: auto;
  border: 1px dashed var(--border2);
  color: var(--text3);
  background: transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.bord-akkoord:hover { border-color: var(--green); color: var(--green); }
.bord-akkoord.on { border-style: solid; border-color: var(--green); color: var(--green); }

/* Gekoppelde offertes/facturen in de reparatie-modal */
.repair-doc-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.repair-doc-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--blue);
  color: var(--blue);
  background: transparent;
  transition: background .15s, color .15s;
}
.repair-doc-chip:hover { background: var(--blue); color: #fff; }
.repair-doc-chip.paid { border-color: var(--green); color: var(--green); }
.repair-doc-chip.paid:hover { background: var(--green); color: #fff; }

/* Telefoon: kolommen bijna schermbreed, horizontaal swipen met snap. */
@media (max-width: 700px) {
  .werkbord {
    scroll-snap-type: x mandatory;
    margin: 0 -16px;
    padding: 0 16px 8px;
  }
  .bord-kolom {
    flex: 0 0 82vw;
    min-width: 82vw;
    max-width: 82vw;
    scroll-snap-align: center;
    max-height: calc(100vh - 320px);
  }
}

/* ── SETTINGS PANEL ── */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start;
}
/* Zelfde verhaal als .main-content: een grid-item rekt standaard mee met zijn
   breedste kind (min-width:auto), en dan duwt één brede rij álle kaarten — en
   het paneel — breder dan het scherm. */
.settings-grid > * { min-width: 0; }
.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.settings-card-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
}
.settings-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
}
.settings-card-head h3 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text);
  margin: 0 0 2px;
}
.settings-card-head p {
  font-size: 12px;
  color: var(--text3);
  margin: 0;
  line-height: 1.5;
}
.settings-body { padding: 18px 22px; }
.settings-row { margin-bottom: 12px; }
.settings-row:last-child { margin-bottom: 0; }
.settings-row label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.settings-row input, .settings-row select, .settings-row textarea {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 9px 12px;
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
.settings-row input:focus { border-color: var(--orange); }
.settings-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.settings-actions {
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;      /* drie knoppen naast elkaar passen niet op een telefoon */
  gap: 8px;
  margin-top: auto;
}
.setting-note {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text3);
  letter-spacing: .5px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.setting-note .note-icon { color: var(--orange); flex-shrink: 0; }

/* ── Hours grid ── */
.hours-grid { display: flex; flex-direction: column; gap: 8px; }
.hours-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  align-items: center;
}
.hours-day {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── Data action buttons ── */
.data-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.data-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  transition: border-color .15s, background .15s;
}
.data-btn:hover {
  border-color: var(--orange);
  background: var(--surface3);
}
.data-btn-icon {
  font-size: 20px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.data-btn-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.data-btn-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-top: 2px;
}
.data-btn-danger:hover { border-color: var(--red); }
.data-btn-danger .data-btn-icon { color: var(--red); }

/* ── System stats ── */
.system-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sys-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-size: 12px;
}
.sys-row span:first-child {
  color: var(--text3);
  font-family: var(--font-mono);
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: 10px;
  align-self: center;
}
.sys-row span:last-child {
  color: var(--text);
  font-family: var(--font-mono);
  text-align: right;
}
.sys-row.full { grid-column: 1 / -1; }

/* ── Keyboard shortcut card ── */
.shortcuts-list { display: flex; flex-direction: column; gap: 8px; }
.shortcut-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text2);
}
.shortcut-row:last-child { border-bottom: none; }
.shortcut-row span { margin-left: auto; }
kbd {
  display: inline-block;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  background: var(--surface3);
  border: 1px solid var(--border2);
  border-bottom-width: 2px;
  border-radius: 3px;
  letter-spacing: .5px;
}

@media (max-width: 1400px) {
  .settings-grid { grid-template-columns: 1fr; }
}

/* ── BTW TOGGLE SWITCH (nieuwe factuur modal) ── */
.btw-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  margin: 8px 0 12px;
}
.btw-label {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.btw-hint {
  font-size: 11px;
  color: var(--text3);
  font-family: var(--font-mono);
  letter-spacing: .5px;
  margin-top: 2px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--surface3);
  border: 1px solid var(--border2);
  transition: background .2s, border-color .2s;
}
.slider::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--text2);
  transition: transform .2s, background .2s;
}
.switch input:checked + .slider {
  background: var(--orange);
  border-color: var(--orange);
}
.switch input:checked + .slider::before {
  transform: translate(18px, -50%);
  background: #fff;
}

/* ── FACTUUR REGELS (nieuwe factuur modal) ── */
.regels-head,
.regel-row {
  display: grid;
  grid-template-columns: 2fr 70px 90px 90px 28px;
  gap: 8px;
  align-items: center;
}
.regels-head {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text3);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 4px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.regel-row { margin-bottom: 6px; }
.regel-row input {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font-body);
  outline: none;
  width: 100%;
}
.regel-row input[type="number"] {
  font-family: var(--font-mono);
  text-align: right;
}
.regel-row input:focus { border-color: var(--orange); }
.regel-row .regel-sub {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--orange);
  text-align: right;
  padding: 0 4px;
}
.regel-row .regel-remove {
  width: 24px; height: 24px;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.regel-row .regel-remove:hover { color: var(--red); border-color: var(--red); }
.regels-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 4px 4px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
  font-family: var(--font-head);
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── FACTUUR DETAIL — regels tabel ── */
.factuur-regels-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 13px;
}
.factuur-regels-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text3);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 400;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
}
.factuur-regels-table td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text2);
}
.factuur-regels-table .num {
  font-family: var(--font-mono);
  text-align: right;
  color: var(--text);
}
.factuur-regels-table .sub { color: var(--orange); }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2,1fr); }
  .two-col  { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  #page-home > nav { padding: 0 20px; }
  /* Nav links become an off-canvas drawer, revealed by the hamburger. */
  #page-home > nav ul {
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: rgba(10,10,10,.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 20px 20px;
    transform: translateY(-120%);
    transition: transform .25s ease;
    display: flex;
  }
  #page-home > nav ul.open { transform: translateY(0); }
  #page-home > nav ul li { width: 100%; border-bottom: 1px solid var(--border); }
  #page-home > nav ul li:last-child { border-bottom: none; }
  #page-home > nav ul a {
    display: block;
    padding: 16px 4px;
    font-size: 15px;
    letter-spacing: 1.5px;
  }
  /* Desktop nav buttons (Medewerkers + Boek afspraak) are hidden on mobile:
     the two buttons + hamburger together overflow on phones <420px wide and
     push the hamburger off the right edge. Both entry points live in the
     drawer instead — "Afspraak" scrolls to the booking section, and the
     .nav-mobile-only item opens the login page. */
  .nav-login, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  #page-home > nav ul li.nav-mobile-only { display: block; }
  #page-home > nav ul li.nav-mobile-only a { color: var(--orange); }
  section { padding: 80px 20px; }
  .booking-grid { grid-template-columns: 1fr; }
  .footer-grid  { grid-template-columns: 1fr 1fr; }
  .kassa-layout { grid-template-columns: 1fr; height: auto; }

  /* ── Dashboard: sidebar becomes an off-canvas drawer ──
     The mobile-topbar (hamburger + brand + avatar) replaces the always-on
     sidebar. Drawer slides in from the left over a backdrop. */
  .mobile-topbar { display: flex; }
  .sidebar {
    width: 260px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.4);
  }
  .sidebar.open { transform: translateX(0); }
  /* overflow-x:clip is het vangnet: mocht er ooit weer iets breder dan het
     scherm renderen, dan kan het de pagina niet meer zijwaarts scrollbaar
     maken (het symptoom "uitzoomen om alles te zien"). clip maakt géén
     scroll-container, dus interne scrollers (kalender, grafiek) blijven werken. */
  .main-content { margin-left: 0; padding: 72px 20px 20px; overflow-x: clip; }

  /* Kassa v2 — main grid stacks; cart row drops the 7-col grid for a stack. */
  .k2-body { grid-template-columns: 1fr; gap: 16px; padding: 16px; height: auto; }
  .k2-topbar { flex-wrap: wrap; gap: 12px; padding: 12px 14px; }
  .k2-topbar-actions { width: 100%; justify-content: flex-start; }
  .k2-sidebar { order: -1; }                /* totals first on phone, cart below */
  .k2-cart-head { display: none; }          /* hide column headers (labels live in each row) */
  .k2-cart-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "product  prijs"
      "barcode  prijs"
      "aantal   stuk"
      "korting  x";
    gap: 4px 12px;
    padding: 14px 16px;
  }
  .k2-cart-row .c-product { grid-area: product; font-weight: 600; }
  .k2-cart-row .c-barcode { grid-area: barcode; font-size: 11px; color: var(--text3); }
  .k2-cart-row .c-aantal  { grid-area: aantal; text-align: left; }
  .k2-cart-row .c-stuk    { grid-area: stuk; text-align: right; }
  .k2-cart-row .c-korting { grid-area: korting; text-align: left; }
  .k2-cart-row .c-prijs   { grid-area: prijs; text-align: right; font-size: 16px; }
  .k2-cart-row .c-x       { grid-area: x; text-align: right; }
  .k2-bottombar { flex-wrap: wrap; padding: 10px 14px; gap: 8px; }
}

/* ── Phone-specific (<=600px): full-screen modals, card-tables, single-col forms ── */
@media (max-width: 600px) {
  .main-content { padding: 64px 12px 12px; }
  .panel-title { font-size: 22px; margin-bottom: 16px; }

  /* Tap targets — bump small buttons + nav items to fingerprint size. */
  .btn-sm { padding: 12px 16px; font-size: 14px; min-height: 44px; }
  .nav-item { padding: 14px 24px; }
  .modal-close { font-size: 28px; padding: 8px; top: 8px; right: 12px; }

  /* Toolbars (search + filter + + Nieuw) wrap full-width per row. */
  .toolbar { gap: 8px; }
  .toolbar > .search-box { flex: 1 1 100%; max-width: none; }
  .toolbar > .filter-select { flex: 1 1 calc(50% - 4px); }
  .toolbar > .btn-sm { flex: 1 1 100%; }
  .search-box, .filter-select { padding: 12px 14px; font-size: 15px; }

  /* ── Modals go full-screen ── */
  .modal-bg.open { align-items: flex-start; justify-content: stretch; }
  .modal,
  .modal.modal-md,
  .modal.modal-lg,
  .modal.modal-xl,
  .modal.modal-fc,
  .modal.modal-compact {
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: none;
    padding: 60px 16px 24px;
    border-radius: 0;
  }
  /* De factuur-preview houdt geen eigen padding: de kop heeft die zelf al en
     de PDF-iframe hoort tegen de randen aan te liggen. */
  .modal.modal-fc { padding: 0; }
  .modal-close {
    position: fixed;
    top: 8px;
    right: 12px;
    z-index: 5;
    background: var(--surface2);
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
  }
  .modal-title { font-size: 20px; margin-bottom: 18px; }
  .modal-footer { gap: 8px; flex-direction: column-reverse; align-items: stretch; }
  .modal-footer .btn-sm { width: 100%; }
  .tw-sheet { width: 100vw; height: 100dvh; max-width: none; padding: 0; }
  .tw-sheet-body { padding: 16px; gap: 16px; }
  .tw-sheet-header { padding: 16px 16px 12px; }

  /* ── Forms: stack to a single column ── */
  .tw-row {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .tw-row > label { font-size: 11px; color: var(--text3); }
  .settings-row { min-width: 0 !important; }
  .klant-search-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .klant-search-row .settings-row { width: 100%; flex: 1 1 auto !important; }

  /* ── Data tables → cards ──
     Each <tr> in a tbody becomes a card; each <td> shows its column label
     pulled from a per-tbody nth-child::before rule. Add new tables by
     listing their labels below. */
  .data-table { display: block; }
  .data-table thead { display: none; }
  .data-table tbody { display: block; }
  .data-table tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 10px 14px;
    margin-bottom: 10px;
  }
  .data-table tr:hover td { background: transparent; }
  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 14px;
    text-align: right;
  }
  .data-table tr td:last-child { border-bottom: none; }
  .data-table td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text3);
    flex-shrink: 0;
  }
  .data-table td:empty { display: none; }

  /* Per-tbody column labels. JS renders the cells in this exact order. */
  #repair-tbody    td:nth-child(1)::before { content: 'Nr'; }
  #repair-tbody    td:nth-child(2)::before { content: 'Klant'; }
  #repair-tbody    td:nth-child(3)::before { content: 'Model'; }
  #repair-tbody    td:nth-child(4)::before { content: 'Probleem'; }
  #repair-tbody    td:nth-child(5)::before { content: 'Datum'; }
  #repair-tbody    td:nth-child(6)::before { content: 'Status'; }
  #repair-tbody    td:nth-child(7)::before { content: 'Bedrag'; }

  #klanten-tbody   td:nth-child(1)::before { content: 'Klantnr'; }
  #klanten-tbody   td:nth-child(2)::before { content: 'Naam'; }
  #klanten-tbody   td:nth-child(3)::before { content: 'Type'; }
  #klanten-tbody   td:nth-child(4)::before { content: 'Adres'; }
  #klanten-tbody   td:nth-child(5)::before { content: 'Plaats'; }
  #klanten-tbody   td:nth-child(6)::before { content: 'Telefoon'; }
  #klanten-tbody   td:nth-child(7)::before { content: 'E-mail'; }
  #klanten-tbody   td:nth-child(8)        { display: none; }   /* drop the inline "Open" button — tap row to open */

  #voorraad-tbody  td:nth-child(1)::before { content: 'Barcode'; }
  #voorraad-tbody  td:nth-child(2)::before { content: 'Artikel'; }
  #voorraad-tbody  td:nth-child(3)::before { content: 'Categorie'; }
  #voorraad-tbody  td:nth-child(4)::before { content: 'Compatibel'; }
  #voorraad-tbody  td:nth-child(5)::before { content: 'Voorraad'; }
  #voorraad-tbody  td:nth-child(6)::before { content: 'Min.'; }
  #voorraad-tbody  td:nth-child(7)::before { content: 'Inkoop'; }
  #voorraad-tbody  td:nth-child(8)::before { content: 'Verkoop'; }
  #voorraad-tbody  td:nth-child(9)::before { content: 'Status'; }
  #voorraad-tbody  td:nth-child(10)       { display: none; }

  /* Facturen + offertes share the same tbody. Columns: nr, klant, datum, vervaldatum, totaal, status, acties. */
  #facturen-tbody  td:nth-child(1)::before { content: 'Nr'; }
  #facturen-tbody  td:nth-child(2)::before { content: 'Klant'; }
  #facturen-tbody  td:nth-child(3)::before { content: 'Datum'; }
  #facturen-tbody  td:nth-child(4)::before { content: 'Vervalt'; }
  #facturen-tbody  td:nth-child(5)::before { content: 'Totaal'; }
  #facturen-tbody  td:nth-child(6)::before { content: 'Status'; }

  /* Bookings (Aanvragen): naam, contact, model, dienst, opmerking, datum, status, actie. */
  #bookings-tbody  td:nth-child(1)::before { content: 'Naam'; }
  #bookings-tbody  td:nth-child(2)::before { content: 'Contact'; }
  #bookings-tbody  td:nth-child(3)::before { content: 'Model'; }
  #bookings-tbody  td:nth-child(4)::before { content: 'Dienst'; }
  #bookings-tbody  td:nth-child(5)::before { content: 'Opmerking'; }
  #bookings-tbody  td:nth-child(6)::before { content: 'Aangevraagd'; }
  #bookings-tbody  td:nth-child(7)::before { content: 'Status'; }

  /* KPIs cards: full width on phone — easier to read at a glance. */
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-card { padding: 14px 16px; }
  .kpi-value { font-size: 28px; }

  /* Klant search card — already wraps; tighten spacing. */
  .klant-search-card { padding: 12px 14px; }

  /* Repair status flow — current text only, others as dots. */
  .repair-status-flow { flex-wrap: wrap; gap: 4px; }
  .repair-status-flow .status-step { font-size: 9px; padding: 6px 4px; }

  /* Hide the "Activity" timeline rendered into modal — already collapsed by default, but keep its width sane. */
  .timeline-wrap { font-size: 12px; }

  /* ── Dashboard widget: lopende reparaties table ── */
  #dash-repairs td:nth-child(1)::before { content: 'Klant'; }
  #dash-repairs td:nth-child(2)::before { content: 'Model'; }
  #dash-repairs td:nth-child(3)::before { content: 'Probleem'; }
  #dash-repairs td:nth-child(4)::before { content: 'Status'; }

  /* ── Offertes sub-tab table ── */
  #offertes-tbody td:nth-child(1)::before { content: 'Nr'; }
  #offertes-tbody td:nth-child(2)::before { content: 'Klant'; }
  #offertes-tbody td:nth-child(3)::before { content: 'Datum'; }
  #offertes-tbody td:nth-child(4)::before { content: 'Bedrag'; }
  #offertes-tbody td:nth-child(5)::before { content: 'Status'; }
  #offertes-tbody td:nth-child(6)        { display: none; }

  /* ── Tweewielers list: 11 columns. Drop thumbnail + action cells on phone. ── */
  #tw-tbody td:nth-child(1)        { display: none; }
  #tw-tbody td:nth-child(2)::before { content: 'Fietsnr'; }
  #tw-tbody td:nth-child(3)::before { content: 'Art.nr'; }
  #tw-tbody td:nth-child(4)::before { content: 'Merk / Model'; }
  #tw-tbody td:nth-child(5)::before { content: 'Kleur'; }
  #tw-tbody td:nth-child(6)::before { content: 'Jaar'; }
  #tw-tbody td:nth-child(7)::before { content: 'Frame'; }
  #tw-tbody td:nth-child(8)::before { content: 'Status'; }
  #tw-tbody td:nth-child(9)::before { content: 'Prijs'; }
  #tw-tbody td:nth-child(10)::before { content: 'Klant'; }
  #tw-tbody td:nth-child(11)       { display: none; }

  /* ── Financiën income table ── */
  #fin-inc-tbody td:nth-child(1)::before { content: 'Datum'; }
  #fin-inc-tbody td:nth-child(2)::before { content: 'Bron'; }
  #fin-inc-tbody td:nth-child(3)::before { content: 'Ref'; }
  #fin-inc-tbody td:nth-child(4)::before { content: 'Omschrijving'; }
  #fin-inc-tbody td:nth-child(5)::before { content: 'Bedrag'; }

  /* ── Financiën expenses table ── */
  #fin-exp-tbody td:nth-child(1)::before { content: 'Datum'; }
  #fin-exp-tbody td:nth-child(2)::before { content: 'Categorie'; }
  #fin-exp-tbody td:nth-child(3)::before { content: 'Omschrijving'; }
  #fin-exp-tbody td:nth-child(4)::before { content: 'Leverancier'; }
  #fin-exp-tbody td:nth-child(5)::before { content: 'Ref'; }
  #fin-exp-tbody td:nth-child(6)::before { content: 'BTW'; }
  #fin-exp-tbody td:nth-child(7)::before { content: 'Bedrag'; }
  #fin-exp-tbody td:nth-child(8)        { display: none; }

  /* ── Planning week grid: 7 cols won't fit. Allow horizontal scroll, keep
        the time column narrow, and give day columns a min-width so each
        appointment block stays readable. ── */
  #planning-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .week-grid {
    grid-template-columns: 50px repeat(6, minmax(110px, 1fr));
    min-width: 720px;
  }
  .week-header.day { font-size: 11px; }
  .week-time { font-size: 10px; padding: 8px 4px; }

  /* ── Financiën chart: tighten bar widths, allow horizontal scroll ── */
  .fin-chart {
    height: 130px; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .fin-bar-group { min-width: 22px; }
  .fin-bar-stack { height: 100px; }

  /* ── Fin add-row: single column ── */
  .fin-add-row { grid-template-columns: 1fr; gap: 8px; }

  /* ── Settings: card heads + 2-col input row stack ── */
  .settings-grid-2 { grid-template-columns: 1fr; }
  .settings-card-head { padding: 14px 16px 12px; }
  .settings-body { padding: 14px 16px; }
  .settings-card-head h3 { font-size: 16px; }

  /* ── Reparatiecodes: de vijf vaste kolommen (508px) passen niet op een
        telefoon. Herschik elke rij naar twee regels: code + naam bovenaan,
        prijs + btw + acties eronder. Kinderen staan in vaste volgorde
        (code, naam, prijs, btw, acties) in zowel .rcode-row als .rcode-add-row. ── */
  .rcode-head { display: none; }
  .rcode-row, .rcode-add-row {
    grid-template-columns: 72px 1fr auto;
    grid-template-areas:
      "code  naam naam"
      "prijs btw  act";
    row-gap: 8px;
  }
  .rcode-row > :nth-child(1), .rcode-add-row > :nth-child(1) { grid-area: code; }
  .rcode-row > :nth-child(2), .rcode-add-row > :nth-child(2) { grid-area: naam; }
  .rcode-row > :nth-child(3), .rcode-add-row > :nth-child(3) { grid-area: prijs; }
  .rcode-row > :nth-child(4), .rcode-add-row > :nth-child(4) { grid-area: btw; }
  .rcode-row > :nth-child(5), .rcode-add-row > :nth-child(5) { grid-area: act; justify-self: end; }

  /* ── Gebruikers: naam + vijf actieknoppen op één regel past nooit op een
        telefoon. Naam over de volle breedte, knoppen eronder in twee kolommen. ── */
  .user-row-card { grid-template-columns: 1fr 1fr; }
  .user-row-card > div:first-child { grid-column: 1 / -1; }
  .users-add-row { grid-template-columns: 1fr; }

  /* ── Kalender op de telefoon: 7 kolommen passen niet, dus horizontaal scrollen.
        De dagweergave is hier sowieso de bruikbare weergave. ── */
  .cal-toolbar { gap: 10px; }
  .cal-acties { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .cal-label { font-size: 15px; margin-left: 0; }
  .cal-views { width: 100%; }
  .cal-view { flex: 1; text-align: center; padding: 8px 4px; }
  .cal-wrap { overflow-x: auto; max-height: 60vh; }
  .cal-kop, .cal-body, .cal-allday { min-width: 640px; }
  .maand-grid { grid-auto-rows: minmax(72px, 1fr); }
  .maand-chip { font-size: 10px; }

  /* ── Taken: quick-add stacks, elk veld full width ── */
  .taak-add { flex-direction: column; align-items: stretch; }
  .taak-add > * { width: 100%; min-width: 0; }
  .taak-row { gap: 10px; padding: 12px 14px; }

  /* ── Booking inbox card: stack so actions go below the body ── */
  .booking-card { grid-template-columns: 1fr; padding: 14px 16px; }
  .booking-card-right {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
  }
  .booking-card-head { flex-wrap: wrap; }
  .booking-card-head .naam { font-size: 16px; }

  /* ── Tweewielers + bookings toolbars: tabs first (full-width), then search, then button ── */
  .toolbar .tw-tabs { flex: 1 1 100%; order: -1; flex-wrap: wrap; }
  .tw-tab { flex: 1 1 auto; min-width: 80px; }
  .toolbar > input.search-input { flex: 1 1 100%; }
  .toolbar > button[style*="margin-left:auto"] { margin-left: 0 !important; }

  /* ── Financiën income source tabs ── */
  .fin-src-tab { flex: 1 1 calc(50% - 4px); }
}

/* ── Search-input baseline (was unstyled — fixes dark theme regression on
      tweewieler/bookings panels). Applies at every breakpoint. ── */
.search-input {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 9px 14px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
  font-family: inherit;
}
.search-input:focus { border-color: var(--orange); }
.search-input::placeholder { color: var(--text3); }

/* ── Factuur v2 — dark Moof-Up theme (cards, totals, action bar, search) ── */

/* "Factuur maken" search modal (Phase A) */
.fs-modal {
  max-width: 560px;
  padding: 0;
}
.fs-title {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 22px 24px 14px;
}
.fs-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  margin: 0 16px 12px;
}
.fs-card-header {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text3);
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
}
.fs-card-body { padding: 14px; }
.fs-input {
  background: var(--surface3);
  border: 1px solid var(--border2);
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  outline: none;
  width: 220px;
}
.fs-input:focus { border-color: var(--orange); }
.fs-input-lg {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.fs-input-sm { width: 110px; }
.fs-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text);
}
.fs-row > label {
  display: inline-block;
  width: 100px;
  color: var(--text3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.fs-row-static .fs-static {
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
}
.fs-regio { display: flex; gap: 8px; }
.fs-flag {
  background: var(--surface3);
  border: 1px solid var(--border2);
  padding: 4px 10px;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.fs-flag.active { border-color: var(--orange); background: var(--black); }
.fs-zoek-btn {
  width: 100%;
  margin-top: 10px;
  background: var(--orange);
  border: 1px solid var(--orange);
  padding: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  letter-spacing: .5px;
}
.fs-zoek-btn:hover { background: var(--orange-dim); }
.fs-newklant-btn {
  width: 100%;
  margin-top: 8px;
  background: var(--surface3);
  border: 1px solid var(--border2);
  padding: 9px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text2);
  cursor: pointer;
}
.fs-newklant-btn:hover { background: var(--surface); border-color: var(--orange); color: var(--text); }
.fs-results {
  padding: 0 16px 16px;
  max-height: 320px;
  overflow-y: auto;
}
.fs-result-group {
  margin-top: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
}
.fs-result-group-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text3);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.fs-result-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}
.fs-result-row:hover { background: var(--surface3); }
.fs-result-row:last-child { border-bottom: none; }
.fs-result-name { font-weight: 600; color: var(--text); }
.fs-result-meta { color: var(--text3); font-size: 11px; font-family: var(--font-mono); }
.fs-empty {
  padding: 20px;
  text-align: center;
  color: var(--text3);
  font-size: 12px;
}

/* Fullscreen factuur editor (Phase B) */
.fe-modal {
  max-width: 1200px;
  width: 95vw;
  padding: 0;
}
.fe-title {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 22px 24px 14px;
}
.fe-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 16px;
}
.fe-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 14px 16px;
}
.fe-card-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 10px;
}
.fe-kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text);
  gap: 12px;
}
.fe-kv > span:first-child { color: var(--text3); }
.fe-input-sm {
  background: var(--surface3);
  border: 1px solid var(--border2);
  padding: 4px 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text);
  outline: none;
}
.fe-input-sm:focus { border-color: var(--orange); }
.fe-static { color: var(--text2); font-size: 12px; }
.fe-klant-body { font-size: 13px; color: var(--text); line-height: 1.5; }
.fe-klant-body > div:first-child { font-weight: 600; }

.fe-omschr-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 14px 16px;
  margin: 12px 16px;
}
.fe-omschr-input {
  width: 100%;
  background: var(--surface3);
  border: 1px solid var(--border2);
  padding: 6px 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  outline: none;
  resize: vertical;
}
.fe-omschr-input:focus { border-color: var(--orange); }
.fe-omschr-input::placeholder { color: var(--text3); font-style: italic; }

.fe-main {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  padding: 0 16px 12px;
}
.fe-regels-wrap {
  background: var(--surface2);
  border: 1px solid var(--border);
}
.fe-regels-head {
  display: grid;
  grid-template-columns: 3fr 1fr 70px 100px 100px 80px 30px;
  gap: 8px;
  padding: 10px 12px;
  background: var(--black);
  color: var(--text3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--border);
}
.fe-col-right { text-align: right; }
.fe-regels-body { min-height: 80px; }
.fe-regel-row {
  display: grid;
  grid-template-columns: 3fr 1fr 70px 100px 100px 80px 30px;
  gap: 8px;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}
.fe-regel-row:last-child { border-bottom: none; }
.fe-regel-row input,
.fe-regel-row select {
  background: var(--surface3);
  border: 1px solid var(--border);
  padding: 4px 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text);
  outline: none;
  width: 100%;
}
.fe-regel-row input:focus,
.fe-regel-row select:focus { border-color: var(--orange); }
.fe-regel-row .fe-regel-total {
  text-align: right;
  font-family: var(--font-mono);
  color: var(--orange);
  font-weight: 600;
}
.fe-regel-remove {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
}
.fe-regel-remove:hover { color: var(--red); }

.fe-add-row {
  padding: 12px;
  background: var(--black);
  border-top: 1px solid var(--border);
}
.fe-input-lg {
  width: 100%;
  background: var(--surface3);
  border: 1px solid var(--border2);
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  outline: none;
  margin-bottom: 10px;
}
.fe-input-lg:focus { border-color: var(--orange); }
.fe-input-lg::placeholder { color: var(--text3); }
.fe-add-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.fe-add-tab {
  background: var(--surface2);
  border: 1px solid var(--border2);
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--orange);
  cursor: pointer;
}
.fe-add-tab:hover { background: var(--surface3); border-color: var(--orange); }

.fe-totals-wrap {
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 14px 16px;
  height: fit-content;
}
.fe-tot-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-size: 14px;
  color: var(--text);
}
.fe-tot-row.fe-tot-sub {
  font-size: 11px;
  color: var(--text3);
  font-family: var(--font-mono);
}
.fe-tot-val {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--orange);
  font-size: 16px;
}
.fe-tot-row.fe-tot-sub span:last-child {
  font-family: var(--font-mono);
  color: var(--text2);
}
.fe-excl-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text2);
  cursor: pointer;
}
.fe-opslaan-btn {
  width: 100%;
  background: var(--orange);
  border: 1px solid var(--orange);
  padding: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  margin-top: 8px;
  letter-spacing: .5px;
}
.fe-opslaan-btn:hover { background: var(--orange-dim); }

.fe-action-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 14px 16px 22px;
  border-top: 1px solid var(--border);
  background: var(--black);
}
.fe-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 14px 4px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text2);
  cursor: pointer;
  text-align: center;
}
.fe-action:hover:not(:disabled) {
  background: var(--surface3);
  border-color: var(--orange);
  color: var(--text);
}
.fe-action:disabled { opacity: 0.4; cursor: not-allowed; }
.fe-action-icon { font-size: 20px; color: var(--orange); }

/* ── Public homepage — mobile layout ──────────────────────────────────────
   The marketing sections (hero + the inline-styled value-prop / over-ons
   grids) were built desktop-first and had no phone overrides, so text, the
   two hero buttons and the ticker clipped / overlapped on narrow screens.
   Inline-styled grids (#waarom, #over) need !important to beat the inline
   style attribute. */
@media (max-width: 640px) {
  /* Safety net: never let the public page scroll/clip sideways. */
  #page-home { overflow-x: hidden; }
  .hero { padding: 0 20px 40px; min-height: 90vh; }
  .hero-eyebrow { font-size: 10px; letter-spacing: 1px; overflow-wrap: anywhere; }
  .hero-sub { overflow-wrap: break-word; }
  .hero h1 { font-size: clamp(52px, 16vw, 88px); letter-spacing: -1px; margin-bottom: 20px; }
  .hero-sub { font-size: 16px; max-width: none; margin-bottom: 28px; }
  /* Two side-by-side buttons overflow the viewport → stack full-width. */
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { width: 100%; text-align: center; }
  /* Ticker was position:absolute bottom-right and sat on top of the buttons;
     let it flow underneath them instead. */
  .hero-ticker { position: static; right: auto; bottom: auto; text-align: left; margin-top: 22px; }

  /* Value-props strip: 4 columns + 80px side padding → 2 columns, normal pad. */
  #waarom { padding: 32px 20px !important; }
  #waarom > div { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  /* Grid items default to min-width:auto (=min-content) which can force the grid
     wider than the viewport; let them shrink instead. */
  #waarom > div > div { min-width: 0; }

  /* Over ons / contact block: 2 columns → single column. */
  #over > div:last-child { grid-template-columns: 1fr !important; gap: 32px !important; }
  #over > div:last-child > div { min-width: 0; }
}