@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@600;700&family=Nunito:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root{
  --bg:#14161A;
  --panel:#1C1F24;
  --panel-border:#262932;
  --text:#EDEDED;
  --text-dim:#888B93;
  --accent:#E0A83E;
  --accent-soft:rgba(224,168,62,0.15);
  --accent-border:rgba(224,168,62,0.35);
  --accent-ink:#181205;
  --accent-hover:#f5c057;
  --prio-urgent:#E0645A;
  --prio-normal:#E0A83E;
  --prio-low:#55585F;
  --tag-blue:#6FA8D8;
  --success:#4CAF6D;
  --status-new:#6FA8D8;
  --status-prod:#E0A83E;
  --status-ship:#4CAF6D;
  --status-done:#7a7d84;
  --radius:14px;
  --radius-sm:8px;
}

body{
  font-family:'Nunito',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

a { color: inherit; }

h1{ font-family:'Bitter',serif; font-weight:700; font-size:26px; margin:0 0 4px; }
h2{ font-family:'Bitter',serif; font-weight:700; font-size:19px; margin:0 0 12px; }
h3{ font-family:'Bitter',serif; font-weight:700; font-size:16px; margin:0 0 10px; }
h4{ font-family:'Bitter',serif; font-weight:700; font-size:14.5px; margin:0 0 12px; }
p { line-height: 1.6; }

/* ===================== LAYOUT SHELL ===================== */
.shell{ display:flex; min-height:100vh; }

.side{
  width:230px; flex-shrink:0;
  background:var(--panel); border-right:1px solid var(--panel-border);
  padding:24px 16px; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{ display:flex; align-items:center; gap:12px; margin-bottom:26px; }
.brand-logo{ width:44px; height:44px; border-radius:50%; flex-shrink:0; object-fit:contain; display:block; }
.avatar{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-hover));
  display:flex; align-items:center; justify-content:center;
  font-family:'Bitter',serif; font-weight:700; font-size:13px; color:#14161A;
}
.brand-text{ min-width:0; }
.brand-text b{ font-family:'Bitter',serif; font-weight:700; font-size:14px; white-space:nowrap; display:block; line-height:1.2; }
.brand-text span{ font-size:10px; color:var(--text-dim); letter-spacing:.14em; display:block; margin-top:3px; text-transform:uppercase; }

.nav{ display:flex; flex-direction:column; }
.nav a{
  display:flex; align-items:center; gap:10px;
  color:var(--text-dim); text-decoration:none;
  font-size:13.5px; font-weight:600;
  padding:10px 12px; border-radius:var(--radius-sm); margin-bottom:2px;
}
.nav a svg{ flex-shrink:0; opacity:.85; }
.nav a.active{ background:var(--accent-soft); color:var(--accent); }
.nav .divider{
  font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.06em; margin:16px 0 6px 12px; opacity:.7;
}

.side-footer{ margin-top:auto; padding-top:16px; border-top:1px solid var(--panel-border); display:flex; flex-direction:column; gap:10px; }
.me{ font-size:12px; color:var(--text-dim); }
.me b{ color:var(--text); }
.site-pill{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  background:var(--bg); border:1px solid var(--panel-border); border-radius:16px;
  padding:5px 12px; font-family:'JetBrains Mono',monospace; font-size:10.5px;
}
.dot{ width:7px; height:7px; border-radius:50%; }
.dot-ok{ background:var(--success); }
.dot-warn{ background:var(--accent); }
.logout-link{ font-size:12.5px; color:var(--text-dim); text-decoration:none; }
.logout-link:hover{ color:var(--prio-urgent); }

.mobile-nav-toggle{
  display:none; position:fixed; top:calc(14px + env(safe-area-inset-top)); left:14px; z-index:60;
  background:var(--panel); border:1px solid var(--panel-border); color:var(--text);
  width:42px; height:42px; border-radius:10px; align-items:center; justify-content:center;
}

.main{ flex:1; padding:32px 40px; min-width:0; max-width:1400px; }
/* Brede pagina's (to-do) mogen de volle schermbreedte gebruiken. */
.main-wide{ max-width:none; }

/* ===================== BUTTONS / FORM BASICS ===================== */
.btn-primary, .btn-secondary, .btn-danger, .btn-ghost{
  font-family:'Nunito',sans-serif; font-weight:700; font-size:13px;
  border-radius:var(--radius-sm); padding:11px 20px; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-secondary{ background:var(--bg); color:var(--text); border:1px solid var(--panel-border); }
.btn-danger{ background:transparent; color:var(--prio-urgent); border:1px solid rgba(224,100,90,.4); }
.btn-ghost{ background:transparent; color:var(--text-dim); border:1px solid var(--panel-border); }
.btn-block{ width:100%; justify-content:center; }
.btn-small{ padding:7px 13px; font-size:11.5px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=url], input[type=tel], select, textarea{
  background:var(--panel); border:1px solid var(--panel-border); color:var(--text);
  border-radius:var(--radius-sm); padding:11px 14px; font-family:'Nunito',sans-serif;
  font-size:13.5px; width:100%;
}
input::placeholder, textarea::placeholder{ color:var(--text-dim); }
label{ display:block; font-size:12.5px; color:var(--text-dim); margin-bottom:14px; }
label > input, label > select, label > textarea{ margin-top:6px; }
.field-lbl{ display:block; font-size:10.5px; text-transform:uppercase; color:var(--text-dim); letter-spacing:.03em; margin:0 0 6px; }
.inline-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.button-row{ display:flex; gap:10px; flex-wrap:wrap; }

.alert{ padding:13px 16px; border-radius:var(--radius-sm); font-size:13.5px; margin-bottom:18px; }
.alert-error{ background:rgba(224,100,90,.14); border:1px solid rgba(224,100,90,.4); color:#f2a89c; }
.alert-success{ background:rgba(76,175,109,.14); border:1px solid rgba(76,175,109,.4); color:#a8ddba; }

.hint{ font-size:13px; color:var(--text-dim); }

/* ===================== AUTH PAGES ===================== */
.auth-body{
  background:var(--bg); color:var(--text); min-height:100vh;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.auth-card{
  width:100%; max-width:420px; background:var(--panel); border:1px solid var(--panel-border);
  border-radius:20px; padding:36px 32px; text-align:center;
}
.auth-logo-ring{
  width:64px; height:64px; border-radius:50%; margin:0 auto 18px;
  display:block; object-fit:contain; background:#fff;
}
.auth-card h1{ margin-bottom:8px; }
.auth-sub{ font-size:13.5px; color:var(--text-dim); margin:0 0 22px; line-height:1.6; }
.auth-form{ text-align:left; }
.auth-form button{ margin-top:6px; }
.auth-note{ margin:18px 0 0; font-size:12.5px; color:var(--text-dim); }
.auth-note a{ color:var(--accent); text-decoration:none; }

/* ===================== CARDS / GENERIC ===================== */
.card{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius);
  padding:22px 24px; margin-bottom:18px;
}
.head-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.head-row h1{ margin-bottom:0; }

.stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px; }
.stat-box{ background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius); padding:18px 20px; }
.stat-box b{ font-family:'Bitter',serif; font-size:24px; display:block; color:var(--accent); }
.stat-box span{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.03em; }

.data-table{ width:100%; border-collapse:collapse; font-size:13px; }
.data-table th{ text-align:left; color:var(--text-dim); font-size:10.5px; text-transform:uppercase; padding:9px 12px; border-bottom:1px solid var(--panel-border); white-space:nowrap; }
.data-table td{ padding:11px 12px; border-bottom:1px solid var(--panel-border); }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.mono-cell{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); white-space:nowrap; }

.role-badge{ font-size:11px; padding:3px 11px; border-radius:8px; font-weight:600; }
.role-admin{ background:var(--accent-soft); color:var(--accent); }
.role-user{ background:var(--panel-border); color:var(--text-dim); }
.tag-you{ font-size:9px; background:var(--accent); color:var(--accent-ink); padding:1px 7px; border-radius:8px; margin-left:6px; font-weight:700; }

/* ===================== BESTELLINGEN — KANBAN "MAXIMAAL" ===================== */
.kb-board{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:20px; align-items:stretch; }
.kb-col{ display:flex; flex-direction:column; min-height:460px; padding:8px; border-radius:14px; }
.kb-col-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.kb-col-head b{ font-size:14.5px; }
.kb-col-head .n{ margin-left:auto; color:var(--text-dim); font-size:12px; }

.kb-col.drag-over{ outline:2px dashed var(--accent); outline-offset:-2px; background:var(--accent-soft); }
.kb-card{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:16px;
  padding:20px 22px; margin-bottom:14px; cursor:grab; transition:border-color .15s ease;
}
.kb-card.dragging{ opacity:.4; }
.kb-card:hover{ border-color:var(--accent); }
.kb-card.urgent{ border-color:var(--prio-urgent); }
.kb-card-top{ display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.kb-card-top .who b{ font-size:15px; display:block; }
.kb-card-top .who span{ font-size:11.5px; color:var(--text-dim); }
.kb-avatar{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Bitter',serif; font-weight:700; font-size:13px; color:#14161A; flex-shrink:0; }

/* Bestelkaart: product bovenaan, klant eronder, foto rechts */
.kb-duim{
  float:right; width:58px; height:58px; border-radius:11px; object-fit:cover;
  margin:0 0 10px 14px; border:1px solid var(--panel-border); background:var(--bg);
}
.kb-titel{ font-family:'Bitter',serif; font-weight:700; font-size:16.5px; line-height:1.32; word-break:break-word; }
.kb-klant{
  display:inline-flex; align-items:center; gap:8px; margin-top:11px;
  background:var(--bg); border:1px solid var(--panel-border);
  border-radius:20px; padding:4px 13px 4px 4px; max-width:100%;
}
.kb-klant span:last-child{ font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kb-mini-av{
  width:21px; height:21px; border-radius:50%; flex-shrink:0; color:#14161A;
  font-family:'Bitter',serif; font-weight:700; font-size:9.5px;
  display:flex; align-items:center; justify-content:center;
}
.kb-onder{
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  clear:both; margin-top:16px; padding-top:14px; border-top:1px solid var(--panel-border);
}
.kb-rechts{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.kb-swatches{ display:flex; gap:5px; }
.kb-sw{ width:15px; height:15px; border-radius:50%; border:1px solid rgba(255,255,255,.25); }
.kb-note{ font-size:11.5px; color:var(--text-dim); font-style:italic; margin-top:12px; clear:both; }
.kb-foot{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.kb-price{ font-family:'Bitter',serif; font-weight:700; font-size:16px; }
.kb-badges{ display:flex; gap:6px; flex-wrap:wrap; }
.kb-badge{ font-size:9.5px; padding:3px 9px; border-radius:8px; font-weight:700; white-space:nowrap; }
.b-paid{ background:rgba(76,175,109,.18); color:var(--success); }
.b-unpaid{ background:var(--accent-soft); color:var(--accent); }
.b-urgent{ background:rgba(224,100,90,.18); color:var(--prio-urgent); }
.b-neutral{ background:var(--panel-border); color:var(--text-dim); }
.kb-empty{ color:var(--text-dim); font-size:12.5px; padding:14px 0; }

/* Order detail modal */
.modal-overlay{ position:fixed; inset:0; background:rgba(10,10,12,.6); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-overlay.hidden{ display:none; }
.modal{ background:var(--panel); border:1px solid var(--panel-border); border-radius:20px; width:100%; max-width:460px; padding:28px 28px; max-height:90vh; overflow-y:auto; }
.modal-breed{ max-width:620px; }
.modal-breed .field-lbl{ margin-bottom:10px; }
.modal h2{ margin-bottom:2px; }
.modal .sub{ font-size:12px; color:var(--text-dim); margin-bottom:20px; }
.stepper{ display:flex; margin-bottom:22px; }
.step{ flex:1; text-align:center; position:relative; }
.step .circ{ width:26px; height:26px; border-radius:50%; background:var(--panel-border); color:var(--text-dim); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; margin:0 auto 6px; }
.step.active .circ{ background:var(--accent); color:var(--accent-ink); }
.step.past .circ{ background:var(--success); color:#0d2015; }
.step span{ font-size:9.5px; color:var(--text-dim); }
.step::after{ content:""; position:absolute; top:13px; left:50%; width:100%; height:2px; background:var(--panel-border); z-index:-1; }
.step:last-child::after{ display:none; }
.color-picker{ display:flex; gap:8px; flex-wrap:wrap; }
.color-picker .sw{ width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent; }
.color-picker .sw.active{ border-color:var(--accent); }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; background:var(--bg); border-radius:var(--radius-sm); padding:13px 16px; }
.toggle{ width:40px; height:22px; background:var(--panel-border); border-radius:11px; position:relative; cursor:pointer; border:none; flex-shrink:0; }
.toggle.on{ background:var(--success); }
.toggle::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; background:#fff; border-radius:50%; transition:left .15s ease; }
.toggle.on::after{ left:20px; }

/* ===================== FILAMENT ===================== */
.brand-group{ margin-bottom:28px; }
.brand-group h3{ display:flex; align-items:baseline; gap:8px; }
.count-lbl{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-dim); font-weight:400; }
.spool-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:14px; }
.spool{ border:1px solid var(--panel-border); background:var(--panel); border-radius:14px; padding:14px; text-align:center; cursor:pointer; }
.spool:hover{ border-color:var(--accent); }
.spool .disc{ width:42px; height:42px; border-radius:50%; margin:0 auto 9px; border:1px solid rgba(255,255,255,.15); }
.spool b{ font-size:12px; display:block; }
.spool span{ font-size:10.5px; color:var(--text-dim); }
.spool .level{ height:5px; background:var(--panel-border); border-radius:3px; margin-top:9px; overflow:hidden; }
.spool .level i{ display:block; height:100%; background:var(--accent); }
.spool.low .level i{ background:var(--prio-urgent); }

.color-suggest-box{ background:var(--bg); border:1px solid var(--panel-border); border-radius:var(--radius-sm); padding:12px 14px; margin-top:6px; }
.color-suggest-box .lbl{ font-size:10px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; margin-bottom:8px; }
.color-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--panel-border); border-radius:20px; padding:6px 13px 6px 7px; font-size:12px; margin:0 6px 6px 0; cursor:pointer; }
.color-chip .sw{ width:15px; height:15px; border-radius:50%; }
.color-chip.active{ background:var(--accent-soft); border-color:var(--accent); font-weight:700; }

/* ===================== TO-DO (kanban, matcht sleenhost-stijl) ===================== */
.todo-toolbar{ display:flex; gap:12px; margin-bottom:26px; flex-wrap:wrap; }
.todo-toolbar input[type=text]{ flex:1; min-width:180px; }
.todo-toolbar select, .todo-toolbar input[type=date]{ width:auto; color:var(--text-dim); }
.todo-columns{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.42fr); gap:24px; align-items:stretch; }
.todo-col{ display:flex; flex-direction:column; min-height:460px; padding:8px; border-radius:14px; }
.todo-col-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:14px; font-weight:700; font-size:13.5px; }
.todo-col-head .n{ font-weight:400; color:var(--text-dim); font-size:12px; }
.tcard{ background:var(--panel); border:1px solid var(--panel-border); border-radius:12px; padding:18px 22px; margin-bottom:14px; cursor:grab; }
.tcard.dragging{ opacity:.4; }
.todo-col.drag-over{ outline:2px dashed var(--accent); outline-offset:-2px; background:var(--accent-soft); }
.tcard-top{ display:flex; gap:12px; align-items:flex-start; }
/* Het rondje volgt de accentkleur van de site; urgent en laag houden hun eigen kleur. */
.ring{
  position:relative; width:21px; height:21px; border-radius:50%;
  border:2.5px solid var(--accent); flex-shrink:0; margin-top:1px;
  background:none; cursor:pointer; padding:0;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.ring:hover{ transform:scale(1.12); }
.ring:active{ transform:scale(.94); }
.ring.urgent{ border-color:var(--prio-urgent); }
/* Opgepakt: rode ring met een volle stip erin. */
.ring.bezig{ border-color:var(--prio-urgent); }
.ring.bezig::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--prio-urgent);
}
.ring.bezig-met-opslaan{ opacity:.5; }
.ring.low{ border-color:var(--prio-low); }
.tcard-body{ flex:1; min-width:0; }
.tcard-body b{ font-size:14px; font-weight:700; display:block; word-break:break-word; }
.tcard-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; flex-wrap:wrap; gap:6px; }
.tcard-tag{ display:flex; align-items:center; gap:6px; font-size:11.5px; }
.tcard-tag .dot{ width:6px; height:6px; border-radius:50%; }
.tcard-tag .via{ color:var(--text-dim); }
.tcard-right{ display:flex; align-items:center; gap:10px; }
.tcard-date{ font-size:11px; color:var(--text-dim); }
.wis-btn{ font-size:10.5px; border:1px solid var(--panel-border); color:var(--text-dim); padding:5px 12px; border-radius:14px; background:transparent; cursor:pointer; }

/* Statusknoppen op een taakkaart */
.stap-btn{
  font-size:11px; font-weight:700; font-family:'Nunito',sans-serif;
  border:1px solid var(--panel-border); color:var(--text);
  padding:6px 14px; border-radius:16px; background:transparent; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.stap-btn:hover{ border-color:var(--accent); color:var(--accent); }
.stap-btn.stil{ border-color:transparent; color:var(--text-dim); font-weight:400; padding:6px 8px; }
.stap-btn.stil:hover{ color:var(--text); }
.stap-btn.bezig-met-opslaan{ opacity:.5; }
.tcard.done{ opacity:.55; }
.tcard.done b{ text-decoration:line-through; color:var(--text-dim); font-weight:600; }
.check{
  width:21px; height:21px; border-radius:50%; background:var(--success); color:#0d2015;
  font-size:11px; display:flex; align-items:center; justify-content:center; font-weight:700;
  flex-shrink:0; border:none; cursor:pointer; padding:0; transition:transform .1s ease;
}
.check:hover{ transform:scale(1.12); }
.check:active{ transform:scale(.94); }
.empty-col{ color:var(--text-dim); font-size:13px; padding:10px 0; }

/* ===================== STANDAARDPRODUCTEN ===================== */
.prod-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:20px; }
.prod-card{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:16px;
  overflow:hidden; cursor:pointer; transition:border-color .15s ease, transform .15s ease;
}
.prod-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.prod-foto{
  aspect-ratio:4 / 3; background:var(--bg); color:var(--text-dim);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border-bottom:1px solid var(--panel-border);
}
.prod-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.prod-body{ padding:16px 18px 18px; }
.prod-body b{ font-size:15px; display:block; line-height:1.3; }
.prod-omschrijving{ font-size:12px; color:var(--text-dim); display:block; margin-top:3px; }
.prod-swatches{ display:inline-flex; gap:5px; }
.prod-sw{ width:14px; height:14px; border-radius:50%; border:1px solid rgba(255,255,255,.25); }
.prod-notitie{ font-size:11.5px; color:var(--text-dim); font-style:italic; margin-top:12px; line-height:1.5; }

.prod-regels{ margin-top:14px; border-top:1px solid var(--panel-border); }
.prod-regel{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:8px 0; border-bottom:1px solid var(--panel-border); font-size:12px;
}
.prod-regel:last-child{ border-bottom:none; }
.prod-regel > span:first-child{ color:var(--text-dim); }
.prod-regel b{ font-weight:600; text-align:right; }
.prod-prijs{ font-family:'Bitter',serif; font-weight:700; font-size:16px; color:var(--accent); }

.prod-foto{ position:relative; }
.prod-bewerk{
  position:absolute; right:10px; top:10px; opacity:0; transition:opacity .15s ease;
  background:rgba(20,22,26,.85); border:1px solid var(--panel-border); color:var(--text);
  font-size:10.5px; font-weight:700; padding:5px 11px; border-radius:20px;
}
.prod-card:hover .prod-bewerk, .prod-card:focus-visible .prod-bewerk{ opacity:1; }
.prod-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.foto-veld{ display:flex; gap:18px; align-items:flex-start; margin-bottom:18px; }
.crop-kolom{ flex:1.35; min-width:0; }
.crop-kader{
  position:relative; width:100%; aspect-ratio:4 / 3; border-radius:12px; overflow:hidden;
  background:var(--bg); border:1px solid var(--panel-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); font-size:11.5px;
}
.crop-kader canvas{ width:100%; height:100%; display:none; cursor:grab; touch-action:none; }
.crop-kader canvas:active{ cursor:grabbing; }
.crop-kader img{ width:100%; height:100%; object-fit:cover; display:none; }
.crop-bediening{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.crop-bediening input[type=range]{ flex:1; width:auto; accent-color:var(--accent); padding:0; background:none; border:none; }
.crop-icoon{ font-size:10px; color:var(--text-dim); white-space:nowrap; }
.crop-uitleg{ font-size:11.5px; color:var(--text-dim); line-height:1.55; margin:8px 0 0; }

.foto-knoppen{ flex:1; min-width:0; }

/* Eigen bestandsknop — de standaard "Bladeren..." is verborgen */
.bestand-knop{
  display:inline-flex; align-items:center; gap:8px; margin:14px 0 0; cursor:pointer;
  background:var(--bg); border:1px solid var(--panel-border); color:var(--text);
  font-family:'Nunito',sans-serif; font-weight:700; font-size:12.5px;
  padding:10px 16px; border-radius:var(--radius-sm);
  transition:border-color .15s ease, color .15s ease;
}
.bestand-knop:hover{ border-color:var(--accent); color:var(--accent); }
.bestand-knop input[type=file]{ display:none; }
.bestand-naam{ font-size:11.5px; color:var(--text-dim); margin-top:8px; word-break:break-all; line-height:1.5; }

/* Eigen vinkje */
.vinkje{ display:flex; align-items:center; gap:9px; font-size:12px; color:var(--text-dim); margin:12px 0 0; cursor:pointer; }
.vinkje input{ position:absolute; opacity:0; width:0; height:0; }
.vinkje-vak{
  width:17px; height:17px; flex-shrink:0; border-radius:5px;
  border:1.5px solid var(--panel-border); background:var(--bg);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease;
}
.vinkje-vak::after{
  content:""; width:9px; height:5px; margin-top:-2px;
  border-left:2px solid var(--accent-ink); border-bottom:2px solid var(--accent-ink);
  transform:rotate(-45deg) scale(0); transition:transform .12s ease;
}
.vinkje input:checked + .vinkje-vak{ background:var(--accent); border-color:var(--accent); }
.vinkje input:checked + .vinkje-vak::after{ transform:rotate(-45deg) scale(1); }
.vinkje input:focus-visible + .vinkje-vak{ outline:2px solid var(--accent); outline-offset:2px; }

.veld-rij{ display:flex; gap:14px; }
.veld-rij > label{ flex:1; min-width:0; }

.mini-kaart{ border:1px solid var(--panel-border); border-radius:12px; overflow:hidden; background:var(--bg); }
.mini-foto{
  position:relative; aspect-ratio:4 / 3; background:var(--panel);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); font-size:11px;
}
.mini-foto canvas{ width:100%; height:100%; display:none; }
.mini-body{ padding:10px 12px 12px; }
.mini-body b{ font-size:12.5px; display:block; line-height:1.3; word-break:break-word; }
.mini-body em{ font-style:normal; font-size:11px; color:var(--text-dim); display:block; margin-top:4px; }
.mini-body span{ font-family:'Bitter',serif; font-weight:700; font-size:14px; display:block; margin-top:6px; color:var(--accent); }

/* ===================== SETTINGS / USERS / ACTIVITY ===================== */
.settings-card{ background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius); padding:20px 22px; margin-bottom:18px; }
.logo-current{ width:54px; height:54px; border-radius:12px; background:var(--bg); border:1px solid var(--panel-border); margin-bottom:12px; object-fit:contain; }
.social-row{ display:flex; align-items:center; gap:12px; margin-bottom:9px; }
.social-row span:first-child{ width:80px; flex-shrink:0; font-size:12.5px; font-weight:600; }
.form-row{ display:flex; gap:10px; flex-wrap:wrap; }
.form-row > *{ flex:1; min-width:140px; }

.totp-setup-grid{ display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:start; }
.qr-holder{ background:#fff; border-radius:12px; width:220px; height:220px; display:flex; align-items:center; justify-content:center; }
.manual-key{ font-family:'JetBrains Mono',monospace; background:var(--bg); border:1px solid var(--panel-border); border-radius:var(--radius-sm); padding:12px 14px; letter-spacing:.06em; font-size:13px; word-break:break-all; }
.backup-codes-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin:14px 0 18px; }
.backup-code{ font-family:'JetBrains Mono',monospace; background:var(--bg); border:1px solid var(--panel-border); border-radius:8px; padding:10px 12px; text-align:center; font-size:13px; letter-spacing:.03em; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1000px){
  .main{ padding:28px 26px; }
  .stat-strip{ grid-template-columns:repeat(2, 1fr); }
  .todo-columns{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .totp-setup-grid{ grid-template-columns:1fr; justify-items:center; text-align:center; }
}

@media (max-width: 760px){
  .mobile-nav-toggle{ display:flex; }
  .side{
    position:fixed; z-index:50; top:0; left:0; height:100vh;
    transform:translateX(-100%); transition:transform .2s ease;
    box-shadow:2px 0 20px rgba(0,0,0,.3); width:250px;
  }
  .side.open{ transform:translateX(0); }
  .main{ padding:calc(76px + env(safe-area-inset-top)) 18px calc(40px + env(safe-area-inset-bottom)); }
  .side{ padding-top:calc(24px + env(safe-area-inset-top)); }
  .stat-strip{ grid-template-columns:1fr 1fr; gap:10px; }
  .kb-board{ grid-template-columns:1fr; }
  .prod-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .foto-veld{ flex-direction:column; }
  .crop-kolom, .foto-knoppen{ width:100%; }
  .veld-rij{ flex-direction:column; gap:0; }
  .modal{ padding:22px 20px; }
  .kb-col, .todo-col{ min-height:0; padding:0; }
  .todo-columns{ grid-template-columns:1fr; gap:20px; }
  .head-row{ flex-direction:column; align-items:stretch; }
  .head-row .btn-primary{ width:100%; justify-content:center; }
  .data-table{ font-size:12px; }
  .card, .settings-card{ padding:18px; }
  .backup-codes-grid{ grid-template-columns:1fr; }
  .auth-card{ padding:28px 22px; }
}

@media (max-width: 480px){
  .stat-strip{ grid-template-columns:1fr 1fr; gap:9px; }
  .stat-box{ padding:13px 14px; }
  .stat-box b{ font-size:19px; }
  .stat-box span{ font-size:9.5px; line-height:1.35; display:block; margin-top:3px; }
  h1{ font-size:22px; }
}


/* ===================== INLOGSCHERM: MERK ===================== */
.auth-merk{ text-align:center; margin:-4px 0 20px; }
.auth-merk b{ font-family:'Bitter',serif; font-weight:700; font-size:17px; display:block; line-height:1.2; }
.auth-merk span{ font-size:10px; color:var(--text-dim); letter-spacing:.16em; text-transform:uppercase; display:block; margin-top:5px; }

/* ===================== WEERGAVE: KLEURKEUZE ===================== */
.kleur-keuze{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; margin-bottom:22px; }
.kleur-optie{
  display:flex; align-items:center; gap:10px; cursor:pointer; text-align:left;
  background:var(--bg); border:1px solid var(--panel-border); border-radius:12px;
  padding:10px 13px; color:var(--text); font-family:'Nunito',sans-serif; font-size:12.5px;
  transition:border-color .15s ease;
}
.kleur-optie:hover{ border-color:var(--staal); }
.kleur-optie.actief{ border-color:var(--staal); box-shadow:inset 0 0 0 1px var(--staal); }
.kleur-bol{ width:22px; height:22px; border-radius:50%; background:var(--staal); flex-shrink:0; border:1px solid rgba(255,255,255,.2); }
.kleur-naam{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.kleur-eigen{ display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; }
.kleur-eigen-veld{ display:block; font-size:12px; color:var(--text-dim); }
.kleur-eigen-veld input[type=color]{
  width:70px; height:42px; padding:3px; cursor:pointer;
  background:var(--bg); border:1px solid var(--panel-border); border-radius:10px; margin-top:6px;
}
.kleur-eigen-veld input[type=text]{ width:150px; margin-top:6px; font-family:'JetBrains Mono',monospace; }

.kleur-voorbeeld{
  margin-top:22px; border:1px solid var(--panel-border); border-radius:14px;
  padding:16px 18px; background:var(--bg);
}
.kv-kop{ font-size:10.5px; color:var(--text-dim); letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; }
.kv-rij{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.kv-knop{ background:var(--vb); color:var(--vb-ink); font-weight:700; font-size:12.5px; padding:9px 18px; border-radius:var(--radius-sm); }
.kv-menu{ background:var(--vb-soft); color:var(--vb); font-weight:700; font-size:12.5px; padding:9px 14px; border-radius:var(--radius-sm); }
.kv-prijs{ font-family:'Bitter',serif; font-weight:700; font-size:17px; color:var(--vb); }
.kv-badge{ background:var(--vb-soft); color:var(--vb); font-size:9.5px; font-weight:700; padding:4px 10px; border-radius:8px; }


/* ===================== MAANDOVERZICHT (tegels) ===================== */
.maand-nav{ display:flex; gap:8px; flex-wrap:wrap; }

.tegels{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.tegel{
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:16px; padding:18px 20px; min-width:0;
}
.tegel h4{ margin:0 0 12px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); font-weight:700; }
.t2{ grid-column:span 2; }
.t4{ grid-column:span 4; }
.t-omzet{ grid-column:span 2; grid-row:span 2; display:flex; flex-direction:column; justify-content:space-between; }
.t-omzet .groot{ font-family:'Bitter',serif; font-size:42px; line-height:1; color:var(--accent); }
.t-omzet-voet{ font-size:12px; color:var(--text-dim); margin-top:18px; }
.middel{ font-family:'Bitter',serif; font-size:26px; line-height:1; }
.middel.let-op{ color:var(--urgent); }
.middel .van{ font-size:15px; color:var(--text-dim); }
.tegel-bij{ font-size:11px; color:var(--text-dim); margin-top:7px; }
.trend{ font-size:11px; margin-top:8px; }
.trend-omhoog{ color:var(--success); }
.trend-omlaag{ color:var(--urgent); }
.trend-gelijk{ color:var(--text-dim); }

.maand-grafiek{ display:flex; align-items:flex-end; gap:8px; height:180px; padding-top:6px; }
.staaf-kolom{
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  height:100%; text-decoration:none; color:var(--text-dim); border-radius:10px 10px 6px 6px;
  padding:4px 2px; transition:background .15s ease;
}
.staaf-kolom:hover{ background:var(--panel-border); color:var(--text); }
.staaf-waarde{ font-size:9.5px; margin-bottom:6px; white-space:nowrap; }
.staaf{ width:100%; max-width:40px; background:var(--panel-border); border-radius:6px 6px 0 0; }
.staaf-kolom:hover .staaf{ background:var(--accent-border); }
.staaf-kolom.huidig .staaf{ background:var(--accent); }
.staaf-kolom.huidig{ color:var(--accent); }
.staaf-label{ font-size:10px; margin-top:8px; letter-spacing:.06em; }

.lijst-regel{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--panel-border); font-size:12.5px;
}
.lijst-regel:last-child{ border-bottom:none; }
.lijst-regel > span:first-child{ color:var(--text-dim); min-width:0; overflow:hidden; text-overflow:ellipsis; }
.lijst-regel b{ white-space:nowrap; font-weight:600; }

.kleur-rij{ display:flex; flex-wrap:wrap; gap:16px; }
.kleur-item{ text-align:center; width:58px; }
.kleur-groot{ display:block; width:40px; height:40px; border-radius:50%; margin:0 auto 7px; border:1px solid rgba(255,255,255,.22); }
.kleur-tekst{ display:block; font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kleur-aantal{ display:block; font-size:10px; color:var(--text-dim); margin-top:2px; }

@media (max-width:900px){
  .tegels{ grid-template-columns:1fr 1fr; }
  .t-omzet{ grid-column:span 2; grid-row:span 1; }
  .t2, .t4{ grid-column:span 2; }
  .maand-grafiek{ height:140px; gap:5px; }
  .staaf-waarde{ display:none; }
}
@media (max-width:480px){
  .tegel{ padding:15px 16px; }
  .t-omzet .groot{ font-size:34px; }
  .middel{ font-size:22px; }
}

/* Knoppen onder elkaar mogen elkaar niet overlappen */
.knoppen-onder{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:20px; }
.knoppen-onder form{ margin:0; }


/* ===================== PIL-MENU (alleen telefoon) ===================== */
.pilnav{ display:none; }
.pil-kaart{ display:none; }

@media (max-width: 760px){
  /* De zijbalk en het hamburgerknopje verdwijnen; de pil neemt het over. */
  .mobile-nav-toggle{ display:none !important; }
  .side{ display:none !important; }
  .main{ padding:calc(20px + env(safe-area-inset-top)) 16px calc(120px + env(safe-area-inset-bottom)) !important; }

  .pilnav{
    display:flex; align-items:center; gap:10px;
    position:fixed; z-index:70; left:14px; right:14px;
    bottom:calc(16px + env(safe-area-inset-bottom));
  }
  .pil{
    flex:1; min-width:0; display:flex; align-items:center; justify-content:space-around; gap:2px;
    background:rgba(38,42,49,.72); border:1px solid rgba(255,255,255,.10); border-radius:999px;
    padding:6px; backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
    box-shadow:0 12px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .pil a, .pil button{
    display:flex; align-items:center; gap:7px; color:var(--text-dim); text-decoration:none;
    background:none; border:none; cursor:pointer; font-family:'Nunito',sans-serif;
    padding:10px 11px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap;
    transition:background .15s ease, color .15s ease;
  }
  .pil a svg, .pil button svg{ width:19px; height:19px; flex:0 0 auto; }
  /* Alleen de pagina waar je bent toont zijn naam. */
  .pil a span, .pil button span{ display:none; }
  .pil a.nu, .pil button.nu{ background:var(--accent); color:var(--accent-ink); }
  .pil a.nu span, .pil button.nu span{ display:inline; }

  .pil-plus{
    width:50px; height:50px; flex:0 0 auto; border-radius:50%; border:none; cursor:pointer;
    background:var(--accent); color:var(--accent-ink);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 12px 30px rgba(0,0,0,.45);
  }
  .pil-plus svg{ width:24px; height:24px; }

  .pil-kaart{
    display:block; position:fixed; z-index:71; right:14px; left:14px;
    bottom:calc(84px + env(safe-area-inset-bottom));
    background:rgba(38,42,49,.86); border:1px solid rgba(255,255,255,.10); border-radius:20px; overflow:hidden;
    backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
    box-shadow:0 16px 40px rgba(0,0,0,.55);
  }
  .pil-kaart.hidden{ display:none; }
  .pil-kaart a{
    display:block; padding:13px 18px; font-size:13.5px; color:var(--text);
    text-decoration:none; border-bottom:1px solid rgba(255,255,255,.06);
  }
  .pil-kaart a:last-child{ border-bottom:none; }
  .pil-kaart a.uit{ color:var(--text-dim); }

  /* ---------- Venster: lijst in de stijl van Instellingen ---------- */
  .modal .groepkop{
    display:block; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-dim); margin:14px 0 7px; padding-left:2px;
  }
  .modal .groepkop:first-of-type{ margin-top:6px; }
  .veldgroep{
    background:var(--bg); border:1px solid var(--panel-border);
    border-radius:14px; overflow:hidden;
  }
  .veldgroep label{
    position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px;
    margin:0; padding:0 15px; border-bottom:none; line-height:1.3;
    font-size:12.5px; color:var(--text-dim); height:44px;
  }
  /* Scheidingslijn begint bij de tekst, zoals in Instellingen. */
  .veldgroep label::after{
    content:""; position:absolute; left:15px; right:0; bottom:0; height:1px; background:var(--panel-border);
  }
  .veldgroep label:last-child::after{ display:none; }
  .veldgroep .lbl-lang{ display:none; }
  .veldgroep .lbl-kort{ display:inline; flex:0 0 auto; }
  .veldgroep input[type=text],
  .veldgroep input[type=date],
  .veldgroep select{
    flex:1; min-width:0; width:auto; margin:0; padding:0;
    background:none; border:none; border-radius:0; box-shadow:none;
    text-align:right; font-size:13px; font-weight:600; color:var(--text); line-height:1.35;
    -webkit-appearance:none; appearance:none; text-overflow:ellipsis; height:auto;
  }
  .veldgroep input[type=date]{ min-width:120px; }
  .veldgroep input:focus, .veldgroep select:focus{ outline:none; color:var(--accent); }
  .veldgroep input::placeholder{ color:#565A62; font-weight:400; }

  /* Status als eigen regel met knoppen eronder */
  .statusregel{
    padding:11px 15px 13px; border-bottom:1px solid var(--panel-border); margin:0;
  }
  .modal .statusregel .regel-lbl{ display:block; font-size:12px; color:var(--text-dim); margin-bottom:7px; }
  .statusregel .color-picker{ display:flex; gap:6px; margin:0; }
  .statusregel .status-opt{ flex:1; min-width:0; padding:8px 2px; font-size:11px; }
  .veldgroep .toggle-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:0 15px; margin:0; height:46px; font-size:13px;
  }

  /* ---------- Venster als vel dat van onderen omhoog komt ---------- */
  .modal-overlay{ align-items:flex-end; padding:0; }
  .modal{
    max-width:none; width:100%; border-radius:22px 22px 0 0;
    max-height:80vh; padding:6px 16px calc(14px + env(safe-area-inset-bottom));
    border-left:none; border-right:none; border-bottom:none;
  }
  .modal::before{
    content:""; display:block; width:38px; height:4px; border-radius:2px;
    background:#3A3F47; margin:2px auto 12px;
  }
  .modal{ transition:transform .2s ease; }
  .modal h2{ font-size:17px; padding-right:40px; margin-bottom:1px; }
  .modal .sub{ font-size:11px; margin-bottom:2px; }
  .vel-sluit{
    display:flex; position:absolute; top:14px; right:16px; z-index:2;
    width:30px; height:30px; border-radius:50%; align-items:center; justify-content:center;
    background:var(--bg); border:1px solid var(--panel-border); color:var(--text-dim);
    font-size:16px; line-height:1; cursor:pointer;
  }
  .modal{ position:relative; }
  .modal::before{ cursor:grab; }
  .modal label{ margin-bottom:14px; }
  .modal .button-row{
    position:sticky; bottom:0; z-index:2; background:var(--panel);
    margin:18px -16px 0; padding:12px 16px 4px;
    border-top:1px solid var(--panel-border);
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
  }
  .modal .button-row > *{ width:100%; text-align:center; justify-content:center; }
  .modal .button-row > *{
    height:46px; display:flex; align-items:center; justify-content:center;
    padding:0; font-size:14px; border-radius:12px;
  }
  .modal .button-row .btn-primary{ grid-column:1 / -1; }
  .modal .button-row .btn-secondary,
  .modal .button-row .btn-ghost{ font-size:13.5px; }
  .modal .button-row .btn-danger{
    grid-column:1 / -1; margin-left:0 !important;
    background:none; border:none; color:var(--urgent); height:38px; font-size:13px;
  }

  /* ---------- Statusfilter op de bestelpagina ---------- */
  .statusfilter{ display:flex; gap:7px; overflow-x:auto; margin-bottom:14px; padding-bottom:3px; }
  .statusfilter button{
    flex:0 0 auto; font-size:12px; padding:7px 13px; border-radius:999px; cursor:pointer;
    background:var(--panel); border:1px solid var(--panel-border); color:var(--text-dim);
    font-family:'Nunito',sans-serif;
  }
  .statusfilter button.nu{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:700; }
  .statusfilter button i{ font-style:normal; opacity:.65; margin-left:5px; }
  .kb-col.verborgen{ display:none; }
  .kb-col-head{ display:none; }
  .kb-col{ min-height:0; padding:0; }
  .verberg-op-tel{ display:none !important; }

  /* Compactere bestelkaart */
  .tcard-meta{ gap:8px; }
  .tcard-right{ flex-wrap:wrap; justify-content:flex-end; }
  .kb-card{ padding:13px 15px; }
  .kb-duim{ width:52px; height:52px; margin:0 0 8px 12px; }
  .kb-titel{ font-size:15px; }
  .kb-onder{ margin-top:12px; padding-top:11px; }
}


/* Alleen voor de telefoon bedoeld. */
.statusfilter{ display:none; }
.vel-sluit{ display:none; }

/* ===================== VENSTER: VELDGROEPEN ===================== */
.groepkop{ display:none; }
.lbl-kort{ display:none; }
.statusregel .regel-lbl{ display:none; }
.statusregel{ margin-bottom:16px; }
.statusregel .color-picker{ margin:0; }
.toggle-row{ margin-bottom:18px; }


/* ===================== EIGEN MELDINGEN ===================== */
.melding-overlay{
  position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(8,9,11,.62);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.melding-overlay.hidden{ display:none; }
.melding{
  width:100%; max-width:380px; background:var(--panel);
  border:1px solid var(--panel-border); border-radius:20px; padding:24px 24px 20px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.melding b{ font-family:'Bitter',serif; font-size:17px; display:block; }
.melding p{ margin:9px 0 0; font-size:13.5px; line-height:1.6; color:var(--text-dim); }
.melding p:empty{ display:none; }
.melding-knoppen{ display:flex; gap:9px; justify-content:flex-end; margin-top:22px; }
.melding-knoppen button{ min-width:104px; }

@media (max-width: 760px){
  .melding-overlay{ align-items:flex-end; padding:0; }
  .melding{
    max-width:none; border-radius:22px 22px 0 0; border-left:none; border-right:none; border-bottom:none;
    padding:22px 20px calc(20px + env(safe-area-inset-bottom));
  }
  .melding-knoppen{ flex-direction:column-reverse; gap:8px; }
  .melding-knoppen button{ width:100%; padding:14px; font-size:14.5px; }
}