@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
:root{
  /* Broadkastr brand — light app, ink sidebar, broadcast-red accent */
  --bg:#F1F1F4; --bg2:#FFFFFF; --bg3:#F2F2F4; --soft-surface:#F8F8F9;
  --line:#E4E4E8; --line2:#EDEDF0; --border-input:#C9C9CF;
  --text:#17171A; --muted:#6B6B73; --caption:#9A9AA2;
  --accent:#E51F22; --accent2:#F04A4C; --ink:#0E0E10;
  --ok:#2F9E5F; --warn:#E0922F; --bad:#E51F22; --soft:#FBEEDA;
  --radius:12px; font-size:15px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
#app{display:flex;min-height:100vh}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--border-input);border-radius:6px;border:2px solid var(--bg)}
@keyframes bkpulse{0%{box-shadow:0 0 0 0 rgba(229,31,34,.5)}70%{box-shadow:0 0 0 7px rgba(229,31,34,0)}100%{box-shadow:0 0 0 0 rgba(229,31,34,0)}}

/* sidebar */
nav.side{width:238px;flex:none;background:var(--ink);padding:22px 14px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh}
nav.side .logo{font-weight:800;font-size:1.15rem;letter-spacing:.4px;padding:4px 8px 4px;color:#fff;text-transform:uppercase}
nav.side .logo span{color:var(--accent)}
nav.side .logo::after{content:'Rental management';display:block;font-size:9px;font-weight:700;letter-spacing:.34em;color:var(--muted);margin:7px 0 18px}
nav.side a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;color:#B6B6BE;text-decoration:none;font-weight:600;font-size:.9rem;transition:all .15s}
nav.side a::before{content:'';width:6px;height:6px;border-radius:999px;flex:none;background:transparent}
nav.side a.active{background:#17171A;color:#fff} nav.side a.active::before{background:var(--accent)}
nav.side a:hover:not(.active){background:#1b1b1f;color:#E4E4E8}
nav.side .bottom{margin-top:auto;font-size:.8rem;color:var(--caption);padding:14px 8px 4px;border-top:1px solid #26262B}
nav.side .bottom a{color:#B6B6BE}
main{flex:1;padding:28px 34px 60px;max-width:1520px;min-width:0}

/* generic */
h1{font-size:1.62rem;font-weight:800;letter-spacing:-.01em;margin-bottom:2px}
h2{font-size:.95rem;font-weight:700;margin:18px 0 8px}
.sub{color:var(--muted);margin-bottom:18px;font-size:.92rem}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;box-shadow:0 1px 2px rgba(14,14,16,.04)}
.grid{display:grid;gap:14px}
.grid.kpi{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpi .card{text-align:left} .kpi .n{font-size:1.9rem;font-weight:800;letter-spacing:-.02em} .kpi .l{color:var(--muted);font-size:.82rem;font-weight:600}
button,.btn{background:var(--accent);border:none;color:#fff;padding:9px 16px;border-radius:6px;font-weight:700;cursor:pointer;font-size:.88rem;text-decoration:none;display:inline-block}
button:hover,.btn:hover{filter:brightness(.94)}
button.ghost,.btn.ghost{background:var(--bg3);color:#3A3A41;border:1px solid var(--line)}
button.ghost:hover,.btn.ghost:hover{background:#E9E9ED;filter:none}
button.danger{background:var(--bad)} button.sm{padding:5px 10px;font-size:.8rem}
input,select,textarea{background:#fff;border:1px solid var(--border-input);color:var(--text);padding:9px 11px;border-radius:6px;font-size:.88rem;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(229,31,34,.35);border-color:var(--accent)}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{color:var(--caption);text-align:left;font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;padding:9px 12px;border-bottom:1px solid var(--line)}
td{padding:11px 12px;border-bottom:1px solid var(--line2)} tr:hover td{background:var(--soft-surface)}
td input{width:70px;padding:5px 8px} td input.wide{width:95px}
.right{text-align:right} .muted{color:var(--muted)} .clickable{cursor:pointer}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.b-Offer{background:#FBEEDA;color:#8A5A12} .b-Confirmed{background:var(--accent);color:#fff}
.b-Out{background:#17171A;color:#fff} .b-Returned{background:#DFF3E7;color:#1E7A46}
.b-Invoiced{background:#2F9E5F;color:#fff} .b-Cancelled{background:#F2F2F4;color:#9A9AA2;text-decoration:line-through}
.avail-ok{color:var(--ok);font-weight:700} .avail-warn{color:var(--warn);font-weight:700} .avail-bad{color:var(--bad);font-weight:800}
.toast{position:fixed;bottom:22px;right:22px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);padding:12px 18px;border-radius:8px;z-index:50;max-width:360px;box-shadow:0 8px 24px rgba(14,14,16,.12);color:var(--text)}
.toast.err{border-left-color:var(--bad)}

/* login */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;width:100%}
.login{width:340px}

/* quote builder */
.qb{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.search-drop{position:relative}
.search-drop .results{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:8px;z-index:20;max-height:320px;overflow:auto;box-shadow:0 8px 24px rgba(14,14,16,.12)}
.search-drop .results div{padding:9px 12px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.search-drop .results div:hover{background:var(--soft-surface)}
.totals .trow{display:flex;justify-content:space-between;padding:5px 0;font-size:.92rem}
.totals .trow.total{border-top:1px solid var(--line);margin-top:8px;padding-top:10px;font-weight:800;font-size:1.05rem}
.totals .trow.total span:last-child{color:var(--accent)}
.kitline td{color:var(--muted);font-size:.82rem;background:#FAFAFB}
.kitline td:first-child{padding-left:30px}
.acc-arrow{color:var(--caption);font-weight:700;margin-right:2px}

/* planning board */
.board{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg2)}
.board .hdr,.board .rowline{display:grid;grid-template-columns:210px repeat(var(--days),minmax(34px,1fr))}
.board .hdr{background:var(--soft-surface)}
.board .hdr div{padding:8px 4px;font-size:.7rem;color:var(--caption);text-align:center;border-left:1px solid var(--line);white-space:nowrap;font-weight:600}
.board .hdr div.we{background:#EDEDF0}
.board .hdr div:first-child{text-align:left;padding-left:12px;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.board .rowline>div{border-left:1px solid var(--line2);border-top:1px solid var(--line2);min-height:40px;position:relative}
.board .rowline>div.we{background:var(--soft-surface)}
.board .rowline .lbl{padding:8px 10px;font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.board .bar{position:absolute;top:6px;height:26px;border-radius:6px;font-size:.72rem;display:flex;align-items:center;padding:0 8px;white-space:nowrap;overflow:hidden;color:#fff;cursor:pointer;font-weight:600}
.bar.s-Offer{background:#FBEEDA;color:#8A5A12;border:1px dashed var(--warn)} .bar.s-Confirmed{background:var(--accent)}
.bar.s-Out{background:#17171A} .bar.s-Returned{background:var(--ok)}

/* scan */
.scan-big input{font-size:1.4rem;padding:16px;width:100%;text-align:center;letter-spacing:2px;border:2px solid #17171A;font-weight:700}
.scan-flash{animation:flash .5s} @keyframes flash{0%{background:#DFF3E7}100%{background:transparent}}
.progress-item{display:flex;justify-content:space-between;padding:8px 4px;border-top:1px solid var(--line2);font-size:.9rem}
.dirtoggle{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.dirtoggle button{border-radius:0;background:var(--soft-surface);color:var(--caption);flex:1;font-weight:600}
.dirtoggle button.on-out{background:#17171A;color:#fff} .dirtoggle button.on-in{background:var(--ok);color:#fff}
video#preview{width:100%;border-radius:8px;background:#000;max-height:280px;object-fit:cover}

@media(max-width:900px){
  #app{flex-direction:column} nav.side{width:100%;height:auto;position:static;flex-direction:row;overflow-x:auto;padding:8px}
  nav.side .logo{padding:8px} nav.side .logo::after,nav.side a::before{display:none} nav.side .bottom{display:none} main{padding:16px}
  .qb{grid-template-columns:1fr}
}
.addbtn{color:var(--accent);margin-left:8px;font-weight:600}
label .search-drop{display:inline-block;position:relative}
label .search-drop .results{min-width:320px}

/* crew board */
.cb-wrap{display:grid;grid-template-columns:230px 1fr;gap:16px;align-items:start}
.cb-pool{position:sticky;top:14px;max-height:calc(100vh - 120px);overflow:auto}
.cb-member{padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;cursor:grab;background:var(--soft-surface);display:flex;flex-direction:column;gap:2px}
.cb-member:active{cursor:grabbing}
.cb-job{transition:border-color .15s}
.cb-job.cb-over{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok)}
.cb-job.cb-over-warn{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn)}
.cb-strip{display:grid;grid-template-columns:repeat(var(--days),1fr);margin:8px 0;height:14px}
.cb-strip>div{border-left:1px solid var(--line2);position:relative}
.cb-strip>div.we{background:var(--soft-surface)}
.cb-strip>div.today{border-left:2px solid var(--accent)}
.cb-strip .bar{position:absolute;top:2px;height:10px;border-radius:4px}
.cb-chips{display:flex;flex-wrap:wrap;gap:6px}
.cb-chip{padding:5px 11px;border-radius:16px;font-size:.8rem;cursor:pointer;display:inline-flex;gap:6px;align-items:center;font-weight:600}
.cb-chip i{font-style:normal;opacity:.7;font-size:.72rem}
.cb-chip .cb-x{opacity:.5;cursor:pointer} .cb-chip .cb-x:hover{opacity:1}
.st-Requested{background:#FBEEDA;color:#8A5A12;border:1px dashed var(--warn)}
.st-Confirmed{background:#DFF3E7;color:#1E7A46;border:1px solid var(--ok)}
.st-Declined{background:#F2F2F4;color:#9A9AA2;border:1px solid var(--line);text-decoration:line-through}
.cb-drop{font-size:.78rem;padding:4px 10px;border:1px dashed var(--border-input);border-radius:16px}
.cb-modal{position:fixed;inset:0;background:rgba(14,14,16,.45);z-index:60;display:flex;align-items:center;justify-content:center}
.cb-modal-box{min-width:420px;box-shadow:0 20px 60px rgba(14,14,16,.25)}
@media(max-width:900px){.cb-wrap{grid-template-columns:1fr}}
.cb-modal[hidden]{display:none}

/* planner v2 slots */
.pl-slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pl-slot{border-radius:8px;padding:8px 12px;font-size:.82rem;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-width:200px;position:relative;border-left-width:3px!important}
.pl-slot i.cb-x{position:absolute;top:6px;right:8px;font-style:normal;opacity:.5;cursor:pointer}
.pl-slot i.cb-x:hover{opacity:1}
.sl-red{background:#FDE4E4;border:1px solid #F4C0C1;border-left:3px solid var(--accent)}
.sl-orange{background:#FBEEDA;border:1px solid #F0D9AE;border-left:3px solid var(--warn)}
.sl-green{background:#DFF3E7;border:1px solid #B7E0C7;border-left:3px solid var(--ok)}
.pl-slot.pl-over{box-shadow:0 0 0 2px var(--accent)}
.ghead-row td{background:#F2F2F4;border-bottom:1px solid #D6D6DC;font-weight:700}

/* rich-text editor (Offerte-beschrijving) */
.rt-field{display:flex;gap:8px;align-items:flex-start;margin-top:4px}
.rt-preview{flex:1;min-height:38px;max-height:120px;overflow:auto;background:var(--soft-surface);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;color:var(--text)}
.rt-preview h2{font-size:15px;margin:6px 0 3px}.rt-preview h3{font-size:13px;margin:5px 0 3px}.rt-preview p{margin:0 0 5px}.rt-preview ul,.rt-preview ol{margin:0 0 5px 18px}
.rt-toolbar{display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:8px;background:var(--soft-surface);border:1px solid var(--line);border-radius:8px 8px 0 0}
.rt-toolbar .sep,.rt-toolbar .rt-sep{width:1px;align-self:stretch;background:var(--line);margin:0 3px}
.rt-toolbar button{padding:5px 9px;min-width:32px;background:#fff;border:1px solid var(--line);color:var(--text)}
.rt-toolbar .rt-size{background:#fff;color:var(--text);border:1px solid var(--border-input);border-radius:6px;padding:5px 6px;font-size:12px}
.rt-toolbar .rt-color{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.rt-toolbar .rt-color input{width:26px;height:24px;padding:0;border:1px solid var(--border-input);border-radius:5px;background:none;cursor:pointer}
.rt-editor{min-height:220px;max-height:52vh;overflow:auto;background:#fff;color:#17171A;border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;padding:16px 18px;font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;font-size:14px;line-height:1.6}
.rt-editor:focus{outline:none}
.rt-editor h2{font-size:19px;font-weight:700;margin:10px 0 5px}.rt-editor h3{font-size:15px;font-weight:700;margin:8px 0 4px}
.rt-editor p{margin:0 0 8px}.rt-editor ul,.rt-editor ol{margin:0 0 8px 20px}.rt-editor a{color:#E51F22}

/* quote-line drag & drop */
.ql-grip{cursor:grab;color:var(--caption);user-select:none;text-align:center;width:22px;letter-spacing:-2px}
tr.ql-row.dragging{opacity:.4}
tr.drop-tgt td{box-shadow:inset 0 2px 0 var(--accent)}

/* warehouse board */
.wh-board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start}
.wh-col{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:8px;min-height:80px;box-shadow:0 1px 2px rgba(14,14,16,.04)}
.wh-colhead{font-weight:700;font-size:.82rem;padding:7px 9px;border-radius:6px;margin-bottom:8px}
.wh-topack{background:#EDEDF0;color:#3A3A41} .wh-out{background:#FBEEDA;color:#8A5A12} .wh-due{background:#DFF3E7;color:#1E7A46} .wh-late{background:#FDE4E4;color:var(--bad)}
.wh-card{background:var(--soft-surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:6px;cursor:pointer}
.wh-card:hover{border-color:var(--accent)}
@media(max-width:900px){.wh-board{grid-template-columns:1fr 1fr}}

/* item picker popup */
.ip-cat{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--caption);margin:12px 0 4px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.ip-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px}
.ip-chip{background:var(--bg3);border:1px solid var(--line);color:var(--text)}
.ip-item{display:flex;align-items:center;gap:12px;padding:8px 6px;border-bottom:1px solid var(--line2);cursor:pointer}
.ip-item:hover{background:var(--soft-surface)}