/* frontend/public/css/app.css */
/* iOS 26 Liquid Glass design system */

:root {
  --glass:        rgba(255,255,255,0.42);
  --glass-strong: rgba(255,255,255,0.62);
  --glass-border: rgba(255,255,255,0.85);
  --shadow-sm:
    0 2px 12px rgba(0,0,0,0.07),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(255,255,255,0.25),
    0 0 0 0.5px rgba(255,255,255,0.55);
  --shadow-md:
    0 8px 40px rgba(0,0,0,0.10),
    0 2px 8px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -1px 0 rgba(255,255,255,0.25),
    inset 1px 0 rgba(255,255,255,0.45),
    0 0 0 0.5px rgba(255,255,255,0.60);
  --shadow-lg:
    0 24px 80px rgba(0,0,0,0.14),
    0 4px 16px rgba(0,0,0,0.07),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(255,255,255,0.2),
    inset 1px 0 rgba(255,255,255,0.5),
    0 0 0 0.5px rgba(255,255,255,0.65);
  --text:    #181828;
  --text2:   #52527a;
  --text3:   #9090b0;
  --blue:    #1c3a6e;
  --blue-l:  rgba(28,58,110,0.12);
  --green:   #25a06a;
  --green-l: rgba(37,160,106,0.13);
  --orange:  #e8762a;
  --orange-l:rgba(232,118,42,0.13);
  --red:     #e84a4a;
  --red-l:   rgba(232,74,74,0.11);
  --purple:  #8b5cf6;
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

body {
  min-height:100vh;
  background:
    radial-gradient(ellipse 110% 70% at 10% 0%,   #b8cce8 0%, transparent 52%),
    radial-gradient(ellipse 80%  90% at 90% 100%,  #fcdec4 0%, transparent 52%),
    radial-gradient(ellipse 75%  65% at 78% 12%,   #d0dcf0 0%, transparent 48%),
    radial-gradient(ellipse 55%  70% at 25% 88%,   #f8ece4 0%, transparent 44%),
    radial-gradient(ellipse 40%  50% at 60% 55%,   #e4ecf8 0%, transparent 40%),
    #d8e2f0;
  background-attachment:fixed;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* ── GLASS ── */
.glass        { background:var(--glass);        backdrop-filter:blur(40px) saturate(2.2) brightness(1.04); -webkit-backdrop-filter:blur(40px) saturate(2.2) brightness(1.04); box-shadow:var(--shadow-md); border:none; }
.glass-strong { background:var(--glass-strong); backdrop-filter:blur(56px) saturate(2.5) brightness(1.06); -webkit-backdrop-filter:blur(56px) saturate(2.5) brightness(1.06); box-shadow:var(--shadow-lg); border:none; }

/* ── SCREEN MANAGER ── */
.screen { display:none; min-height:100vh; }
.screen.active { display:block; }

/* ── LOGIN ── */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card { width:100%; max-width:380px; border-radius:var(--r-xl); padding:36px 32px; }
.login-logo { display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.login-logo-icon { width:48px; height:48px; border-radius:16px; background:linear-gradient(160deg,#1c3a6e,#0e2246); display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 4px 16px rgba(28,58,110,.35); }
.login-title { font-size:24px; font-weight:800; letter-spacing:-0.5px; }
.login-sub { font-size:13px; color:var(--text2); margin-top:2px; }
.form-group { margin-bottom:14px; }
.form-label { display:block; font-size:12px; font-weight:700; color:var(--text2); margin-bottom:6px; letter-spacing:0.3px; text-transform:uppercase; }
.form-input { width:100%; height:46px; border-radius:var(--r-md); background:rgba(255,255,255,0.52); border:none; color:var(--text); font-family:'Figtree',sans-serif; font-size:15px; padding:0 14px; outline:none; transition:all .15s; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.04),inset 1px 0 rgba(255,255,255,.5),0 0 0 0.5px rgba(255,255,255,.6),0 1px 4px rgba(0,0,0,.05); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.form-input:focus { box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 2px rgba(28,58,110,.35),0 0 0 0.5px rgba(28,58,110,.6); background:rgba(255,255,255,.68); }
.form-error { font-size:12px; color:var(--red); margin-top:6px; display:none; }
.form-error.show { display:block; }
.btn-primary { width:100%; height:50px; border-radius:25px; border:none; background:linear-gradient(135deg,#1c3a6e,#152d5c); color:white; font-family:'Figtree',sans-serif; font-size:16px; font-weight:700; cursor:pointer; letter-spacing:-.2px; box-shadow:0 6px 20px rgba(28,58,110,.35); transition:all .2s; margin-top:6px; }
.btn-primary:active { transform:scale(.98); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }

/* ── NAV ── */
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:0 20px; height:60px; background:rgba(210,228,252,.55); backdrop-filter:blur(56px) saturate(2.5) brightness(1.05); -webkit-backdrop-filter:blur(56px) saturate(2.5) brightness(1.05); border-bottom:none; box-shadow:0 1px 0 rgba(255,255,255,.9),0 4px 24px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,1); }
.nav-logo { font-size:17px; font-weight:700; letter-spacing:-.3px; color:var(--text); display:flex; align-items:center; gap:8px; flex-shrink:0; }
.nav-logo-icon { width:30px; height:30px; border-radius:8px; background:linear-gradient(160deg,#1c3a6e,#0e2246); display:flex; align-items:center; justify-content:center; font-size:15px; box-shadow:0 2px 8px rgba(28,58,110,.35); flex-shrink:0; }
.nav-pill { display:flex; gap:3px; background:rgba(0,0,0,.07); padding:3px; border-radius:12px; box-shadow:inset 0 1px 2px rgba(0,0,0,.08),0 0 0 0.5px rgba(255,255,255,.5); border:none; }
.nav-tab { padding:6px 18px; border-radius:9px; border:none; background:transparent; color:var(--text2); font-family:'Figtree',sans-serif; font-size:13px; font-weight:600; cursor:pointer; transition:all .22s cubic-bezier(.34,1.56,.64,1); white-space:nowrap; }
.nav-tab.active { background:rgba(255,255,255,.72); color:var(--text); box-shadow:0 2px 12px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,1),0 0 0 0.5px rgba(255,255,255,.6); }
.nav-user { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--text2); }
.avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#1c3a6e,#8b5cf6); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; box-shadow:0 2px 8px rgba(28,58,110,.3); flex-shrink:0; }

/* ── PROFILE DROPDOWN ── */
.profile-wrap { position:relative; }
.profile-btn { display:flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; padding:4px 8px 4px 4px; border-radius:20px; transition:background .15s; }
.profile-btn:hover { background:rgba(0,0,0,.06); }
.profile-btn-name { font-size:13px; font-weight:600; color:var(--text); }
.profile-btn-chevron { transition:transform .2s; }
.profile-btn.open .profile-btn-chevron { transform:rotate(180deg); }
.profile-menu { position:absolute; top:calc(100% + 8px); right:0; min-width:210px; border-radius:var(--r-lg); padding:6px; z-index:300; display:none; animation:popIn .2s cubic-bezier(.34,1.56,.64,1); }
.profile-menu.open { display:block; }
.profile-menu-header { padding:10px 12px 8px; }
.profile-menu-name { font-size:14px; font-weight:700; }
.profile-menu-role { font-size:11px; color:var(--text3); margin-top:2px; text-transform:capitalize; }
.profile-item { display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border:none; background:none; border-radius:var(--r-sm); font-family:'Figtree',sans-serif; font-size:13px; font-weight:600; color:var(--text); cursor:pointer; text-align:left; transition:background .1s; }
.profile-item:hover { background:rgba(0,0,0,.06); }
.profile-item.danger { color:var(--red); }
.profile-item-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.menu-div { height:1px; background:rgba(0,0,0,.07); margin:4px 6px; }

/* iOS zoom-preventie: inputs minimaal 16px op mobiel zodat Safari niet inzoomt */
@media(max-width:768px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Nav compact op mobiel */
@media(max-width:520px) {
  .nav { padding:0 12px; height:54px; }
  .nav-logo-text { display:none; }
  .nav-tab { padding:6px 10px; font-size:12px; }
  .profile-btn-name { display:none; }
  .profile-btn-chevron { display:none; }
}

/* ── ADMIN TABS SCROLL ── */
.admin-seg { display:flex; background:rgba(0,0,0,.06); border-radius:13px; padding:4px; margin-bottom:18px; border:1px solid rgba(255,255,255,.6); width:fit-content; max-width:100%; overflow-x:auto; }
@media(max-width:600px) { .admin-seg { width:100%; } }

/* ── ADMIN TABEL → CARDS OP MOBIEL ── */
@media(max-width:680px) {
  .tbl-wrap { border-radius:var(--r-lg); box-shadow:none; background:transparent; }
  .tbl-wrap table,
  .tbl-wrap thead,
  .tbl-wrap tbody,
  .tbl-wrap tr,
  .tbl-wrap td { display:block; }
  .tbl-wrap thead { display:none; }
  .tbl-wrap tbody tr:not(.expand-row) {
    margin-bottom:10px; border:none; border-radius:var(--r-md);
    background:rgba(255,255,255,.42); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    box-shadow:var(--shadow-sm); padding:12px 14px; cursor:pointer;
  }
  .tbl-wrap tbody td { border:none; padding:3px 0; font-size:13px; display:flex; align-items:baseline; gap:8px; }
  .tbl-wrap tbody td::before { content:attr(data-label); font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; min-width:78px; flex-shrink:0; }
  .tbl-wrap tbody td[data-label=""] { display:none; }
  .tbl-wrap tbody td:last-child { margin-top:6px; display:flex; gap:8px; }
  .tbl-wrap tbody td:last-child::before { display:none; }
  .tbl-wrap .expand-row { display:none; border-radius:0 0 var(--r-md) var(--r-md); margin-top:-10px; margin-bottom:10px; }
  .tbl-wrap .expand-row.open { display:block; }
  .tbl-wrap .expand-row td { padding:12px 14px; }
  .tbl-wrap .expand-row td::before { display:none; }
  thead th { display:none; }
}

/* ── LAYOUT HELPERS ── */
.worker-wrap { max-width:430px; margin:0 auto; padding:20px 16px 48px; }
.admin-wrap  { max-width:1080px; margin:0 auto; padding:24px 20px 48px; }
.card { border-radius:var(--r-xl); padding:20px; margin-bottom:14px; }
.section-label { font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--text3); margin-bottom:12px; }
.hr { height:1px; background:rgba(0,0,0,.06); margin:16px 0; }

/* ── SEGMENT CONTROL ── */
.segment { display:flex; background:rgba(0,0,0,.07); border-radius:11px; padding:3px; margin-bottom:22px; border:none; box-shadow:inset 0 1px 3px rgba(0,0,0,.08),0 0 0 0.5px rgba(255,255,255,.5); }
.seg-btn { flex:1; padding:7px; border:none; border-radius:8px; background:transparent; color:var(--text2); font-family:'Figtree',sans-serif; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; }
.seg-btn.active { background:rgba(255,255,255,.72); color:var(--text); box-shadow:0 1px 8px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,1),0 0 0 0.5px rgba(255,255,255,.6); }

/* ── SCANNER ── */
.scan-vp { width:100%; aspect-ratio:4/3; border-radius:var(--r-lg); background:#000; border:1.5px dashed rgba(100,120,180,.25); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; position:relative; overflow:hidden; transition:all .3s cubic-bezier(.34,1.56,.64,1); margin-bottom:14px; }
.scan-vp:active { transform:scale(.98); }
.scan-vp.scanned { background:rgba(37,160,106,.08); border:1.5px solid rgba(37,160,106,.4); }
.corner { position:absolute; width:22px; height:22px; z-index:2; }
.corner::before,.corner::after { content:''; position:absolute; background:white; border-radius:2px; }
.corner::before { width:100%; height:2.5px; top:0; left:0; }
.corner::after  { height:100%; width:2.5px; top:0; left:0; }
.corner.tl{top:12px;left:12px} .corner.tr{top:12px;right:12px;transform:scaleX(-1)} .corner.bl{bottom:12px;left:12px;transform:scaleY(-1)} .corner.br{bottom:12px;right:12px;transform:scale(-1)}
.scan-line { position:absolute; left:12px; right:12px; height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent); border-radius:1px; animation:scanAnim 2s ease-in-out infinite; opacity:.8; z-index:2; }
@keyframes scanAnim{0%{top:16px;opacity:.4}50%{top:calc(100% - 16px);opacity:.9}100%{top:16px;opacity:.4}}
.scan-placeholder { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px; z-index:1; }
.scan-icon { font-size:32px; opacity:.25; }
.scan-text { font-size:14px; font-weight:600; color:var(--text2); }
.scan-sub  { font-size:12px; color:var(--text3); }
.scanned-result { display:none; flex-direction:column; align-items:center; gap:6px; padding:16px; animation:popIn .35s cubic-bezier(.34,1.56,.64,1); z-index:1; }
@keyframes popIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.scanned-result.show { display:flex; }
.scan-badge { font-size:10px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--green); background:var(--green-l); padding:3px 10px; border-radius:20px; border:1px solid rgba(37,160,106,.25); }
.scan-name { font-size:20px; font-weight:700; letter-spacing:-.5px; color:white; text-shadow:0 1px 4px rgba(0,0,0,.5); text-align:center; }
.scan-code { font-size:12px; color:rgba(255,255,255,.7); }

/* ── QR GRID ── */
.qr-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.qr-btn { padding:9px 6px; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.45); color:var(--text); font-family:'Figtree',sans-serif; font-size:11px; font-weight:600; cursor:pointer; text-align:center; transition:all .18s; backdrop-filter:blur(8px); display:flex; flex-direction:column; align-items:center; gap:3px; }
.qr-btn:active { transform:scale(.95); }
.qr-btn-icon { font-size:17px; }

/* ── STEPPER ── */
.amount-group { display:flex; align-items:center; gap:10px; margin-top:14px; }
.stepper { display:flex; align-items:center; background:rgba(0,0,0,.07); border-radius:30px; padding:3px; border:none; box-shadow:inset 0 1px 3px rgba(0,0,0,.09),0 0 0 0.5px rgba(255,255,255,.5); }
.step-btn { width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,.75); color:var(--blue); font-size:20px; font-weight:300; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; box-shadow:0 2px 8px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,1); line-height:1; }
.step-btn:active { transform:scale(.92); }
.step-val { width:52px; text-align:center; font-size:18px; font-weight:700; letter-spacing:-.5px; color:var(--text); background:none; border:none; outline:none; font-family:'Figtree',sans-serif; }
.unit-tag { font-size:12px; font-weight:600; color:var(--text3); background:rgba(0,0,0,.05); border-radius:6px; padding:3px 8px; }
.add-btn { flex:1; height:44px; border-radius:22px; border:none; background:linear-gradient(135deg,#1c3a6e,#152d5c); color:white; font-family:'Figtree',sans-serif; font-size:14px; font-weight:700; cursor:pointer; box-shadow:0 4px 16px rgba(28,58,110,.35); transition:all .2s; }
.add-btn:active { transform:scale(.97); }
.add-btn:disabled { opacity:.38; cursor:not-allowed; box-shadow:none; }

/* ── PICKLIST ── */
.pick-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.pick-header h3 { font-size:16px; font-weight:700; letter-spacing:-.3px; }
.pill-count { font-size:11px; font-weight:700; background:var(--blue-l); color:var(--blue); border-radius:20px; padding:3px 10px; border:1px solid rgba(28,58,110,.2); }
.list-empty { text-align:center; padding:28px; color:var(--text3); font-size:13px; font-weight:500; }
.pick-item { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r-md); background:rgba(255,255,255,.38); border:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 0.5px rgba(255,255,255,.55),0 2px 8px rgba(0,0,0,.05); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); margin-bottom:7px; animation:slideDown .25s cubic-bezier(.34,1.56,.64,1); }
@keyframes slideDown{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
.pick-dot { width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,#1c3a6e,#8b5cf6); flex-shrink:0; }
.pick-name { flex:1; font-size:13px; font-weight:600; }
.pick-qty { font-size:13px; font-weight:700; color:var(--blue); font-variant-numeric:tabular-nums; }
.pick-del { background:none; border:none; color:var(--text3); font-size:15px; cursor:pointer; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.pick-del:hover { background:var(--red-l); color:var(--red); }
.btn-dymo { background:none; border:1.5px solid rgba(28,58,110,.25); border-radius:8px; color:var(--blue); font-family:'Figtree',sans-serif; font-size:11px; font-weight:700; padding:3px 8px; cursor:pointer; transition:all .15s; letter-spacing:.3px; }
.btn-dymo:hover { background:var(--blue-l); border-color:var(--blue); }

/* ── BUTTONS ── */
.send-btn { width:100%; height:52px; border-radius:26px; border:none; background:linear-gradient(135deg,#25a06a,#1d8a5a); color:white; font-family:'Figtree',sans-serif; font-size:16px; font-weight:700; cursor:pointer; letter-spacing:-.3px; box-shadow:0 6px 24px rgba(37,160,106,.35); transition:all .2s; margin-bottom:10px; }
.send-btn:active { transform:scale(.98); }
.send-btn:disabled { opacity:.35; cursor:not-allowed; box-shadow:none; }
.cancel-btn { width:100%; height:44px; border:none; background:rgba(0,0,0,.06); border-radius:22px; font-family:'Figtree',sans-serif; font-size:14px; font-weight:600; color:var(--text2); cursor:pointer; transition:background .15s; }
.cancel-btn:hover { background:rgba(0,0,0,.10); }

/* ── MY LISTS ── */
.list-card { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--r-lg); margin-bottom:10px; cursor:pointer; transition:all .18s; }
.list-card:active { transform:scale(.98); }
.list-icon { width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.list-icon.waiting { background:linear-gradient(135deg,#f5e8d5,#f5d5a8); }
.list-icon.actief  { background:linear-gradient(135deg,#d5e8f5,#a8c8f5); }
.list-icon.done    { background:linear-gradient(135deg,#d5f5e8,#a8f5d0); }
.list-info { flex:1; min-width:0; }
.list-id   { font-size:11px; color:var(--text3); font-variant-numeric:tabular-nums; margin-bottom:1px; }
.list-name { font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-meta { font-size:11px; color:var(--text2); margin-top:2px; }

/* ── BADGES ── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.badge-dot { width:5px; height:5px; border-radius:50%; }
.b-blue   { background:var(--blue-l);   color:var(--blue);   } .b-blue   .badge-dot { background:var(--blue);   }
.b-orange { background:var(--orange-l); color:var(--orange); } .b-orange .badge-dot { background:var(--orange); animation:blink 2s infinite; }
.b-green  { background:var(--green-l);  color:var(--green);  } .b-green  .badge-dot { background:var(--green);  }
.b-purple { background:rgba(139,92,246,.12); color:var(--purple); } .b-purple .badge-dot { background:var(--purple); animation:blink 2s infinite; }
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* ── RETOUR ── */
.retour-item { border-radius:var(--r-md); padding:14px; margin-bottom:10px; background:rgba(255,255,255,.38); border:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 0.5px rgba(255,255,255,.55),0 2px 8px rgba(0,0,0,.05); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.retour-name { font-size:14px; font-weight:700; margin-bottom:10px; }
.retour-row { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:500; color:var(--text2); margin-top:6px; }
.r-label { min-width:85px; }
.r-mono { font-variant-numeric:tabular-nums; font-weight:600; color:var(--text); }
.retour-input { width:72px; height:34px; border-radius:10px; background:rgba(255,255,255,.6); border:1.5px solid rgba(255,255,255,.8); color:var(--text); font-family:'Figtree',sans-serif; font-size:15px; font-weight:700; text-align:center; outline:none; transition:border-color .15s; }
.retour-input:focus { border-color:var(--blue); }
.v-pos  { color:var(--orange); font-weight:700; }
.v-zero { color:var(--green);  font-weight:700; }

/* ── MODAL / BOTTOM SHEET ── */
.modal-bg { position:fixed; inset:0; z-index:200; display:none; align-items:flex-end; justify-content:center; padding:16px; background:rgba(0,20,40,.25); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal-bg.open { display:flex; }
.modal { width:100%; max-width:460px; border-radius:var(--r-xl) var(--r-xl) var(--r-lg) var(--r-lg); padding:24px; max-height:88vh; overflow-y:auto; background:rgba(230,240,255,.68); backdrop-filter:blur(64px) saturate(2.8) brightness(1.08); -webkit-backdrop-filter:blur(64px) saturate(2.8) brightness(1.08); border:none; box-shadow:0 -4px 60px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,1),inset 1px 0 rgba(255,255,255,.5),0 0 0 0.5px rgba(255,255,255,.65); animation:sheetUp .3s cubic-bezier(.34,1.2,.64,1); }
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.modal-handle { width:36px; height:4px; border-radius:2px; background:rgba(0,0,0,.12); margin:0 auto 18px; }
.modal-title { font-size:20px; font-weight:800; letter-spacing:-.5px; margin-bottom:2px; }
.modal-sub   { font-size:12px; color:var(--text3); margin-bottom:18px; }

/* ── ADMIN ── */
.admin-head { margin-bottom:24px; }
.admin-title { font-size:28px; font-weight:800; letter-spacing:-1px; }
.admin-sub   { font-size:13px; color:var(--text2); margin-top:4px; font-weight:500; }
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
@media(max-width:700px){.stats-row{grid-template-columns:repeat(2,1fr)}}
.stat { border-radius:var(--r-xl); padding:20px 18px; position:relative; overflow:hidden; }
.stat-num { font-size:36px; font-weight:800; letter-spacing:-1.5px; line-height:1; margin-bottom:5px; }
.stat-lbl { font-size:12px; font-weight:600; opacity:.65; }
.stat-glyph { position:absolute; right:14px; top:14px; font-size:26px; opacity:.18; }
.admin-seg { display:flex; background:rgba(0,0,0,.06); border-radius:13px; padding:4px; margin-bottom:18px; border:1px solid rgba(255,255,255,.6); width:fit-content; }
.aseg { padding:8px 22px; border-radius:10px; border:none; background:transparent; color:var(--text2); font-family:'Figtree',sans-serif; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; }
.aseg.active { background:var(--glass-strong); color:var(--text); box-shadow:0 1px 8px rgba(0,0,0,.10); }
.filter-row { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; align-items:center; }
.fsel { background:rgba(255,255,255,.55); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.75); border-radius:10px; color:var(--text); font-family:'Figtree',sans-serif; font-size:12px; font-weight:600; padding:8px 12px; cursor:pointer; outline:none; }
.tbl-wrap { border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); border:none; }
table { width:100%; border-collapse:collapse; background:rgba(255,255,255,.36); backdrop-filter:blur(40px) saturate(2); -webkit-backdrop-filter:blur(40px) saturate(2); }
thead th { padding:13px 16px; text-align:left; font-size:10px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--text3); border-bottom:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.2); }
tbody tr { border-bottom:1px solid rgba(255,255,255,.45); cursor:pointer; transition:background .1s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:rgba(255,255,255,.35); }
tbody td { padding:13px 16px; font-size:13px; }
.td-id { font-size:12px; color:var(--text3); font-variant-numeric:tabular-nums; font-weight:600; }
.td-bold { font-weight:700; }
.expand-row { display:none; background:rgba(255,255,255,.25); }
.expand-row.open { display:table-row; }
.expand-inner { padding:14px 16px; }
.expand-lbl { font-size:10px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--text3); margin-bottom:10px; }
.chips { display:flex; flex-wrap:wrap; gap:7px; }
.chip { border-radius:12px; padding:8px 12px; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.8); font-size:12px; }
.chip-name { font-weight:700; margin-bottom:4px; }
.chip-nums { display:flex; gap:10px; color:var(--text2); font-size:11px; font-variant-numeric:tabular-nums; }
.chip-v { color:var(--orange); font-weight:700; }
.retour-action { font-size:12px; font-weight:600; color:var(--orange); cursor:pointer; white-space:nowrap; }
.chart-card { border-radius:var(--r-xl); padding:22px; margin-bottom:14px; }
.chart-title { font-size:14px; font-weight:700; margin-bottom:18px; }
.bar-row { display:flex; align-items:center; gap:12px; margin-bottom:10px; font-size:12px; font-weight:600; }
.bar-label { min-width:130px; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track { flex:1; height:8px; background:rgba(0,0,0,.06); border-radius:4px; overflow:hidden; }
.bar-fill { height:100%; border-radius:4px; transition:width 1s cubic-bezier(.16,1,.3,1); }
.bar-val { min-width:32px; text-align:right; font-variant-numeric:tabular-nums; color:var(--text2); }
.art-thumb { width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.art-cell { display:flex; align-items:center; gap:10px; }
/* Admin artikelen form */
.art-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:500px){.art-form-grid{grid-template-columns:1fr}}
.art-form-grid .form-group { margin-bottom:0; }

/* ── TOAST ── */
.toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(80px); background:rgba(30,40,60,.88); backdrop-filter:blur(16px); color:white; padding:12px 22px; border-radius:22px; font-size:14px; font-weight:600; z-index:999; transition:transform .3s cubic-bezier(.34,1.2,.64,1); white-space:nowrap; box-shadow:0 8px 32px rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.15); pointer-events:none; }
.toast.show { transform:translateX(-50%) translateY(0); }
.toast.error { background:rgba(180,30,30,.9); }

/* ── TAB ANIMATIE ── */
@keyframes tabFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tab-enter{animation:tabFadeIn .22s cubic-bezier(.22,1,.36,1) forwards;}

/* ── PICKLIJST VOORTGANGSINDICATOR ── */
.list-progress{display:flex;align-items:center;margin-top:8px;gap:0;}
.lp-step{width:7px;height:7px;border-radius:50%;flex-shrink:0;transition:all .2s;}
.lp-step.done{background:var(--green);}
.lp-step.current{width:9px;height:9px;background:var(--blue);box-shadow:0 0 0 3px rgba(28,58,110,.18);}
.lp-step.pending{background:rgba(0,0,0,.13);}
.lp-line{flex:1;height:2px;border-radius:1px;}
.lp-line.done{background:var(--green);}
.lp-line.pending{background:rgba(0,0,0,.10);}
body.dark .lp-step.pending{background:rgba(255,255,255,.18);}
body.dark .lp-line.pending{background:rgba(255,255,255,.12);}
body.dark .lp-step.current{box-shadow:0 0 0 3px rgba(80,140,255,.22);}

/* ── SKELETON LOADER ── */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skel{height:13px;border-radius:7px;background:linear-gradient(90deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.11) 50%,rgba(0,0,0,.06) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;}
.skel-row td{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.3);}
body.dark .skel{background:linear-gradient(90deg,rgba(255,255,255,.07) 25%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.07) 75%);background-size:200% 100%;}

/* ── ARTIKEL SUGGESTIES ── */
#art-suggestions, #verstuur-klant-suggestions { margin-top:6px; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-md); }
.art-suggest-item { padding:10px 14px; font-size:13px; font-weight:600; cursor:pointer; background:rgba(255,255,255,.65); backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,.5); transition:background .1s; }
.art-suggest-item:last-child { border-bottom:none; }
.art-suggest-item:hover,.art-suggest-item:active { background:rgba(255,255,255,.88); }
.art-suggest-sub { font-size:11px; color:var(--text3); font-weight:500; margin-top:2px; }
body.dark .art-suggest-item { background:rgba(255,255,255,.09); border-bottom-color:rgba(255,255,255,.08); }
body.dark .art-suggest-item:hover { background:rgba(255,255,255,.15); }

/* ── ADMIN ZOEKBALK ── */
.admin-search{height:38px;flex:1;min-width:120px;max-width:240px;background:rgba(255,255,255,.55);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.75);border-radius:10px;color:var(--text);font-family:'Figtree',sans-serif;font-size:13px;font-weight:500;padding:0 12px;outline:none;transition:box-shadow .15s;}
.admin-search:focus{box-shadow:0 0 0 2px rgba(28,58,110,.3);}
.admin-search::placeholder{color:var(--text3);}
body.dark .admin-search{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:var(--text);}

/* ── SPINNER ── */
.spinner { width:20px; height:20px; border:2px solid rgba(255,255,255,.3); border-top-color:white; border-radius:50%; animation:spin .7s linear infinite; display:inline-block; }
@keyframes spin{to{transform:rotate(360deg)}}

/* ── LOADING SCREEN ── */
.loading-screen { position:fixed; inset:0; background:rgba(221,229,240,.9); backdrop-filter:blur(10px); z-index:500; display:flex; align-items:center; justify-content:center; }
.loading-screen.hidden { display:none; }

/* ── IOS TOGGLE ── */
.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer; user-select:none; }
.ios-toggle { width:51px; height:31px; border-radius:16px; background:rgba(0,0,0,.14); position:relative; flex-shrink:0; transition:background .2s; }
.ios-toggle.on { background:var(--green); }
.ios-toggle-knob { position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:white; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:transform .22s cubic-bezier(.34,1.4,.64,1); }
.ios-toggle.on .ios-toggle-knob { transform:translateX(20px); }

/* ── DARK MODE ── */
body.dark {
  --text:         #eaeaf5;
  --text2:        #9292c4;
  --text3:        #9090c4;
  --blue:         #6ba8ff;
  --blue-l:       rgba(107,168,255,0.15);
  --glass:        rgba(255,255,255,0.09);
  --glass-strong: rgba(255,255,255,0.14);
  --glass-border: rgba(255,255,255,0.18);
  --shadow-sm:
    0 2px 12px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(255,255,255,0.04),
    0 0 0 0.5px rgba(255,255,255,0.09);
  --shadow-md:
    0 8px 40px rgba(0,0,0,0.50),
    0 2px 8px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(255,255,255,0.04),
    0 0 0 0.5px rgba(255,255,255,0.10);
  --shadow-lg:
    0 24px 80px rgba(0,0,0,0.60),
    0 4px 16px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.04),
    0 0 0 0.5px rgba(255,255,255,0.11);
  background:
    radial-gradient(ellipse 110% 70% at 10%  0%,  #0e1e3a 0%, transparent 52%),
    radial-gradient(ellipse 80%  90% at 90% 100%,  #2a1206 0%, transparent 52%),
    radial-gradient(ellipse 75%  65% at 78%  12%,  #122038 0%, transparent 48%),
    radial-gradient(ellipse 55%  70% at 25%  88%,  #1c0e04 0%, transparent 44%),
    radial-gradient(ellipse 40%  50% at 60%  55%,  #081428 0%, transparent 40%),
    #060e1c;
  background-attachment:fixed;
}

/* Nav */
body.dark .nav {
  background: rgba(12,16,32,.70);
  box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 4px 24px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.07);
}
body.dark .nav-pill { background:rgba(255,255,255,.07); box-shadow:inset 0 1px 2px rgba(0,0,0,.35),0 0 0 0.5px rgba(255,255,255,.09); }
body.dark .nav-tab.active { background:rgba(255,255,255,.14); color:var(--text); box-shadow:0 2px 12px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18),0 0 0 0.5px rgba(255,255,255,.13); }
body.dark .profile-btn:hover { background:rgba(255,255,255,.07); }

/* Inputs */
body.dark .form-input { background:rgba(255,255,255,.08); color:var(--text); box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.2),0 0 0 0.5px rgba(255,255,255,.09),0 1px 4px rgba(0,0,0,.25); }
body.dark .form-input:focus { background:rgba(255,255,255,.11); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 2px rgba(107,168,255,.40),0 0 0 0.5px rgba(107,168,255,.55); }
body.dark .retour-input { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.14); color:var(--text); }
body.dark .retour-input:focus { border-color:var(--blue); }
body.dark .fsel { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); color:var(--text); }

/* Modal */
body.dark .modal-bg { background:rgba(0,8,20,.55); }
body.dark .modal { background:rgba(12,16,44,.90); }
body.dark #ms-login-btn { background:rgba(255,255,255,.12) !important; color:var(--text) !important; }

/* Profile menu */
body.dark .profile-item:hover { background:rgba(255,255,255,.08); }
body.dark .menu-div { background:rgba(255,255,255,.08); }

/* Segment controls */
body.dark .segment { background:rgba(255,255,255,.07); }
body.dark .seg-btn.active { background:rgba(255,255,255,.14); color:var(--text); box-shadow:0 1px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.14),0 0 0 0.5px rgba(255,255,255,.11); }
body.dark .admin-seg { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.10); }
body.dark .aseg.active { background:rgba(255,255,255,.14); color:var(--text); }

/* Tables */
body.dark table { background:rgba(255,255,255,.05); }
body.dark thead th { background:rgba(255,255,255,.04); border-bottom-color:rgba(255,255,255,.09); }
body.dark tbody tr { border-bottom-color:rgba(255,255,255,.07); }
body.dark tbody tr:hover { background:rgba(255,255,255,.07); }
body.dark .expand-row { background:rgba(255,255,255,.03); }

/* List + pick items */
body.dark .pick-item { background:rgba(255,255,255,.07); box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 0.5px rgba(255,255,255,.09),0 2px 8px rgba(0,0,0,.25); }
body.dark .retour-item { background:rgba(255,255,255,.07); box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 0.5px rgba(255,255,255,.09),0 2px 8px rgba(0,0,0,.25); }

/* Buttons */
body.dark .add-btn { background:linear-gradient(135deg,#2a50a8,#1e3f8a); box-shadow:0 4px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.16),0 0 0 0.5px rgba(107,168,255,.28); }
body.dark .btn-primary { background:linear-gradient(135deg,#2a50a8,#1e3f8a); box-shadow:0 6px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.16),0 0 0 0.5px rgba(107,168,255,.28); }
body.dark .cancel-btn { background:rgba(255,255,255,.10); color:var(--text2); }
body.dark .cancel-btn:hover { background:rgba(255,255,255,.15); }
body.dark .step-btn { background:rgba(255,255,255,.15); color:var(--blue); box-shadow:0 2px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.18); }
body.dark .qr-btn { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.15); color:var(--text); }
body.dark .profile-btn-name { color:var(--text); }
body.dark .btn-dymo { border-color:rgba(107,168,255,.28); color:var(--blue); }
body.dark .btn-dymo:hover { background:var(--blue-l); border-color:var(--blue); }
body.dark .pick-dot { background:linear-gradient(135deg,#4a80d4,#8b5cf6); }
body.dark .admin-search:focus { box-shadow:0 0 0 2px rgba(107,168,255,.35); }
body.dark .nav-logo-icon,.dark .login-logo-icon { background:linear-gradient(160deg,#2a50a8,#1a3a88); }

/* Misc */
body.dark .chip { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.11); }
body.dark .hr { background:rgba(255,255,255,.08); }
body.dark .ios-toggle { background:rgba(255,255,255,.16); }

/* Mobile card view */
@media(max-width:680px) {
  body.dark .tbl-wrap tbody tr:not(.expand-row) { background:rgba(255,255,255,.08); }
  body.dark .tbl-wrap .expand-row.open td { background:rgba(255,255,255,.04); }
}