*{box-sizing:border-box}html{color-scheme:light}body{margin:0;font-family:Arial,sans-serif;background:#f6f1e5;color:#24261f}button,input,select,textarea{font:inherit}button{cursor:pointer}
body{--bg:var(--tenant-surface,#f6f1e5);--panel:#fffdf7;--soft:#f2eddf;--sidebar:var(--tenant-accent,#3f4a2c);--ink:#24261f;--muted:#737565;--primary:var(--tenant-accent,#47562e);--accent:var(--tenant-accent-secondary,#b86537);--border:#dfd5bf;--shadow:0 10px 28px rgba(64,55,34,.08);background:var(--bg);color:var(--ink)}
body[data-theme=dark]{--bg:#101416;--panel:#1a1e20;--soft:#222729;--sidebar:#151719;--ink:#f4efe6;--muted:#aaa59d;--primary:#d9952b;--accent:#d26b3c;--border:#353a3c;--shadow:0 12px 30px rgba(0,0,0,.22);color-scheme:dark}
body[data-theme=fresh]{--bg:#f7faf6;--panel:#fff;--soft:#eaf3ea;--sidebar:#fbfdf9;--ink:#173c2b;--muted:#718078;--primary:#237b57;--accent:#e79049;--border:#e0e8e1;--shadow:0 8px 24px rgba(23,60,43,.07)}
h1,h2{font-family:Georgia,serif;margin:0}h1{font-size:clamp(38px,4vw,60px);line-height:1}h2{font-size:28px}small{color:var(--muted)}code{color:var(--accent)}
.primary,.secondary,.danger-button,.file-button{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;padding:12px 16px;font-weight:700;text-decoration:none}.primary{border:0;background:var(--primary);color:#fff}.secondary,.file-button{border:1px solid var(--border);background:var(--panel);color:var(--ink)}.danger-button{border:1px solid #bf462c66;background:#bf462c1f;color:#c2573b}.full{width:100%}.eyebrow{display:block;margin-bottom:6px;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
input,select,textarea{width:100%;padding:11px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--ink);outline:0}textarea{min-height:86px;resize:vertical}input:focus,select:focus,textarea:focus,button:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 35%,transparent);outline-offset:2px}
.app-shell{min-height:100vh;display:grid;grid-template-columns:225px 1fr}.sidebar{display:flex;flex-direction:column;min-height:100vh;padding:26px 17px;background:var(--sidebar);color:#fff}.brand,.install-brand{display:flex;align-items:center;gap:12px;padding:0 8px 28px;font-family:Georgia,serif;font-size:24px}.brand-mark,.install-brand>span{display:grid;place-items:center;width:44px;height:44px;border:1px solid currentColor;border-radius:50%;font-family:Georgia,serif;font-size:28px}.sidebar nav{display:grid;gap:5px}.sidebar nav button{display:flex;align-items:center;gap:12px;padding:11px 13px;border:0;border-radius:9px;background:transparent;color:inherit;text-align:left}.sidebar nav button span{width:21px;font-size:18px}.sidebar nav button:hover,.sidebar nav button.active{background:#ffffff20}.sidebar footer{display:grid;gap:5px;margin-top:auto;padding:16px 9px 0;border-top:1px solid #ffffff33}.sidebar footer button{width:max-content;padding:0;border:0;background:transparent;color:inherit;text-decoration:underline}.content{min-width:0;padding:40px 5vw 60px}header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}header p{margin:10px 0 0;color:var(--muted)}.header-actions,.modal-actions,.row-actions{display:flex;flex-wrap:wrap;gap:8px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0 24px}.metrics article{display:grid;gap:7px;min-height:110px;padding:21px;border:1px solid var(--border);border-radius:13px;background:var(--panel);box-shadow:var(--shadow)}.metrics strong{font-size:28px}.toolbar,.filters{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:16px}.tabs{display:flex;overflow:hidden;border:1px solid var(--border);border-radius:9px;background:var(--panel)}.tabs button{padding:11px 16px;border:0;border-right:1px solid var(--border);background:transparent;color:var(--muted)}.tabs button.active{background:var(--primary);color:#fff}.toolbar-right{display:flex;align-items:end;gap:10px}.search{display:flex;align-items:center;gap:8px;width:min(340px,38vw);height:46px;padding:0 12px;border:1px solid var(--border);border-radius:9px;background:var(--panel)}.search input{padding:0;border:0;background:transparent}.page-size,.filters label{display:grid;gap:5px;min-width:130px;color:var(--muted);font-size:11px;font-weight:700}.page-size select{padding:9px;background:var(--panel)}
.inventory,.usage-list,.stocktake-list,.card-list,.log-list,.simple-list,.settings-card,.chart-card{overflow:hidden;border:1px solid var(--border);border-radius:13px;background:var(--panel);box-shadow:var(--shadow)}.table-head,.product-row{display:grid;grid-template-columns:1.45fr 1.05fr .65fr 1fr .8fr 135px;align-items:center;gap:14px;padding:15px 20px}.table-head,.usage-head{background:var(--soft);color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.product-row{min-height:84px;border-top:1px solid var(--border)}.product-name{display:flex;align-items:center;gap:11px;min-width:0}.product-name>div,.product-row>div:nth-child(2),.product-row>div:nth-child(4){display:grid;gap:3px}.category-icon{display:grid;flex:0 0 42px;place-items:center;width:42px;height:42px;border-radius:10px;font-size:21px}.category-icon.mout,.chip.mout{background:#f5dca5;color:#8b4f14}.category-icon.hop,.chip.hop{background:#cce8ae;color:#276a27}.category-icon.gist,.chip.gist{background:#ffb4a3;color:#8a3024}.chip{display:inline-flex;width:max-content;padding:4px 8px;border-radius:8px;font-size:11px;font-weight:800}.status{display:inline-flex;width:max-content;padding:6px 9px;border-radius:999px;font-size:12px;font-weight:700}.status.ok{background:#6d914926;color:#588037}.status.warning,.notice.warning{background:#da912a29;color:#a76014}.status.danger,.notice.error{background:#bf462c24;color:#c2573b}.link-button{width:max-content;max-width:100%;overflow:hidden;padding:0;border:0;background:transparent;color:var(--ink);font-weight:700;text-align:left;text-overflow:ellipsis}.row-actions button,.mini-button{padding:7px 9px;border:1px solid var(--border);border-radius:7px;background:var(--panel);color:var(--ink)}.empty,.loading{padding:30px;text-align:center;color:var(--muted)}.pagination{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 19px;border-top:1px solid var(--border);background:var(--soft)}.pagination>div{display:flex;gap:7px}.pagination button{padding:7px 10px;border:1px solid var(--border);border-radius:7px;background:var(--panel);color:var(--ink)}.pagination button:disabled{opacity:.4;cursor:not-allowed}
.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:18px;background:#0a0c0aaa;backdrop-filter:blur(5px)}.modal{position:relative;width:min(760px,96vw);max-height:92vh;overflow:auto;padding:29px;border:1px solid var(--border);border-radius:17px;background:var(--panel);box-shadow:0 25px 70px #0005}.small-modal{width:min(500px,96vw)}.close{position:absolute;top:13px;right:13px;width:34px;height:34px;border:0;background:transparent;color:var(--muted);font-size:22px}.form-grid,.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:21px 0}.form-grid label,.modal>label{display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:700}.form-grid .wide{grid-column:1/-1}.detail-title{display:flex;align-items:center;gap:13px;margin-bottom:18px}.detail-grid{grid-template-columns:repeat(3,1fr)}.detail-grid article{display:grid;align-content:start;gap:6px;min-height:85px;padding:13px;border:1px solid var(--border);border-radius:10px;background:var(--bg)}.notes{padding:12px;border-radius:8px;background:var(--soft)}.notice{margin:14px 0;padding:13px 15px;border-radius:9px}.notice.success{background:#6d914926;color:#477026}.qr-modal{text-align:center}.print-tabs{width:max-content;max-width:100%;margin:18px auto}.qr-modal>label{margin:14px 0;text-align:left}.print-area{display:grid;place-items:center;margin:18px auto}.qr-only img{width:min(300px,100%)}.qr-only strong{display:block}.print-label{display:grid;grid-template-columns:var(--label-qr) minmax(0,1fr);gap:var(--label-gap);min-width:0;min-height:0;padding:var(--label-padding);overflow:hidden;border-width:var(--label-border);border-color:var(--label-accent);border-radius:var(--label-radius);background:var(--label-bg);color:var(--label-text);font-size:calc(var(--label-body) * var(--label-scale));line-height:var(--label-line);text-align:inherit}.print-label.label-position-right{grid-template-columns:minmax(0,1fr) var(--label-qr)}.print-label.label-position-right img{grid-column:2;grid-row:1}.print-label.label-position-right .label-content{grid-column:1;grid-row:1}.print-label.label-position-top{grid-template-columns:1fr;grid-template-rows:var(--label-qr) minmax(0,1fr)}.print-label.label-position-top img{width:auto;height:100%;max-width:100%;justify-self:center}.print-label img{width:100%;max-height:100%;align-self:center;object-fit:contain}.print-label .label-content{display:flex;min-width:0;flex-direction:column;justify-content:center;gap:.5mm;overflow:hidden}.print-label h3,.print-label code,.print-label span,.print-label strong,.print-label b,.print-label small{display:block;margin:0;overflow:hidden;color:inherit;text-overflow:ellipsis;white-space:nowrap}.print-label h3{color:var(--label-accent);font-size:calc(var(--label-name) * var(--label-scale));line-height:1.05}.print-label code{font-size:calc(var(--label-code) * var(--label-scale))}.print-label.label-font-serif{font-family:Georgia,"Times New Roman",serif}.print-label.label-font-mono{font-family:"Courier New",monospace}.print-label.label-font-sans{font-family:Arial,sans-serif}
.filters{justify-content:flex-start;flex-wrap:wrap;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}.usage-head,.usage-list article{display:grid;grid-template-columns:170px 1.3fr 1fr .7fr 1fr;align-items:center;gap:13px;padding:13px 18px}.usage-list article{border-top:1px solid var(--border)}.usage-list article>div{display:grid;gap:3px}.usage-list article.reversed{opacity:.55;text-decoration:line-through}.chart-card{margin:18px 0;padding:20px}.bar-chart{display:flex;align-items:flex-end;gap:11px;height:190px;padding-top:15px;border-bottom:1px solid var(--border)}.bar-group{display:grid;grid-template-rows:150px auto;flex:1;align-items:end;text-align:center}.bars{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:145px}.bars i{width:12px;min-height:2px;border-radius:3px 3px 0 0}.bars .mout{background:#c88c35}.bars .hop{background:#68a33b}.bars .gist{background:#d96f5b}
.simple-list{display:grid;gap:0}.simple-list>button{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:12px;padding:13px 16px;border:0;border-top:1px solid var(--border);background:var(--panel);color:var(--ink);text-align:left}.simple-list>button>span:nth-child(2){display:grid;gap:4px}.stocktake-list>article{display:grid;grid-template-columns:1.35fr .6fr .8fr 1fr auto;align-items:center;gap:12px;padding:13px 17px;border-top:1px solid var(--border)}.list-options{display:flex;justify-content:flex-end;margin-top:25px;padding:12px 17px;border:1px solid var(--border);border-bottom:0;border-radius:12px 12px 0 0;background:var(--soft)}.list-options+.stocktake-list{border-radius:0 0 12px 12px}.card-list{display:grid;gap:0;margin-top:28px}.card-list article{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px 17px;border-top:1px solid var(--border)}.card-list article:first-child{border-top:0}.card-list article>div{display:grid;gap:4px}.label-gallery{display:grid;grid-template-columns:repeat(3,minmax(230px,1fr));gap:18px;margin-top:28px}.label-gallery>article{display:grid;gap:13px;padding:16px;border:1px solid var(--border);border-radius:13px;background:var(--panel);box-shadow:var(--shadow)}.mini-label{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;max-height:190px;padding:15px 15px 15px 38%;border-width:3px;background:#fff;color:#24261f}.mini-label>b{position:absolute;left:10%;font-size:42px}.checkboxes{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:13px;border:1px solid var(--border);border-radius:9px}.checkboxes label{display:flex;align-items:center;gap:7px;color:var(--ink)}.checkboxes input{width:auto}.log-list{margin-top:25px}.log-list article{display:grid;grid-template-columns:160px 1fr 1.4fr 1fr;gap:12px;padding:12px 15px;border-top:1px solid var(--border)}.settings-card{margin-top:28px;padding:24px}.theme-options{display:flex;gap:10px;margin:18px 0}.theme-options button{padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--soft);color:var(--ink)}.file-button input{display:none}
.card-list article>.row-actions{display:flex;align-items:center}.card-list .row-actions select{width:auto;min-width:155px}
.login-screen,.install-body{min-height:100vh;display:grid;place-items:center;padding:22px;background:#f6f1e5}.login-card,.install-card{width:min(620px,96vw);padding:38px;border:1px solid #dfd5bf;border-radius:17px;background:#fffdf7;box-shadow:0 18px 50px #40372218}.login-card{width:min(430px,96vw);display:grid;gap:15px;text-align:center}.login-card .brand-mark{margin:auto}.login-card label,.install-card label{display:grid;gap:6px;color:#737565;font-size:12px;font-weight:700;text-align:left}.install-brand{padding:0}.install-brand small{display:block}.install-card>p{color:#737565;line-height:1.55}.install-card fieldset{margin:20px 0;padding:17px;border:1px solid #dfd5bf;border-radius:11px}.install-card legend{padding:0 8px;font-weight:800}
.account-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}.account-summary article{display:grid;gap:7px;padding:15px;border:1px solid var(--border);border-radius:10px;background:var(--bg)}.account-summary strong{overflow-wrap:anywhere}.password-form{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}.password-form label{display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:700}.password-form .notice,.password-form button{grid-column:1/-1}.password-form button{width:max-content}
.mobile-qr-scanner{display:none}.scanner-modal{width:min(520px,96vw)}.scanner-viewport{position:relative;aspect-ratio:3/4;max-height:62vh;margin:18px 0;overflow:hidden;border-radius:14px;background:#10120f}.scanner-viewport video{width:100%;height:100%;object-fit:cover}.scanner-frame{position:absolute;top:50%;left:50%;width:min(72%,300px);aspect-ratio:1;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:18px;box-shadow:0 0 0 999px #0006}.scanner-frame::before,.scanner-frame::after{position:absolute;width:45px;height:45px;border-color:#b7d36b;content:""}.scanner-frame::before{top:-3px;left:-3px;border-top:7px solid #b7d36b;border-left:7px solid #b7d36b;border-radius:18px 0 0}.scanner-frame::after{right:-3px;bottom:-3px;border-right:7px solid #b7d36b;border-bottom:7px solid #b7d36b;border-radius:0 0 18px}.scanner-status{min-height:24px;margin:12px 0;color:var(--muted);text-align:center}.scanner-photo-button{display:block;width:100%;padding:12px;text-align:center}.scanner-photo-button input{display:none}.scanner-help{margin:10px 0 0;color:var(--muted);font-size:12px;text-align:center}
@media(max-width:1050px){.app-shell{grid-template-columns:82px 1fr}.brand strong,.sidebar nav button{font-size:0}.sidebar nav button{justify-content:center}.sidebar nav button span{font-size:18px}.sidebar footer{display:none}.table-head,.product-row{grid-template-columns:1.4fr 1fr .7fr .9fr 125px}.table-head span:nth-child(4),.product-row>div:nth-child(4){display:none}.label-gallery{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.app-shell{display:block;padding-bottom:70px}.sidebar{position:fixed;z-index:10;right:0;bottom:0;left:0;min-height:auto;height:65px;padding:7px}.brand,.sidebar footer{display:none}.sidebar nav{display:flex;overflow-x:auto}.sidebar nav button{flex:0 0 78px;flex-direction:column;gap:2px;padding:4px;font-size:10px}.sidebar nav button span{font-size:18px}.content{padding:24px 14px}header{align-items:center}h1{font-size:38px}header p,.eyebrow{display:none}.metrics{grid-template-columns:1fr 1fr;gap:9px}.metrics article{min-height:90px;padding:14px}.metrics article:last-child{display:none}.metrics strong{font-size:22px}.toolbar,.toolbar-right{display:grid}.search{width:100%}.tabs{overflow:auto}.table-head,.usage-head{display:none}.product-row{grid-template-columns:1fr auto}.product-row>div:nth-child(2),.product-row>strong,.product-row>.status{grid-column:1;margin-left:52px}.product-row>.row-actions{grid-column:2;grid-row:1/5;flex-direction:column}.form-grid,.detail-grid,.label-gallery,.account-summary,.password-form{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.detail-grid{grid-template-columns:1fr 1fr}.filters{display:grid;grid-template-columns:1fr 1fr}.usage-list article{grid-template-columns:1fr auto}.usage-list article>div{grid-column:1}.stocktake-list>article{grid-template-columns:1fr 1fr}.stocktake-list .product-name,.stocktake-list input{grid-column:1/-1}.log-list article{grid-template-columns:1fr}.pagination{align-items:flex-start;flex-direction:column}.checkboxes{grid-template-columns:1fr}}
@media(max-width:760px){.card-list article{align-items:flex-start;flex-direction:column}.card-list article>.row-actions{width:100%;align-items:stretch;flex-direction:column}.card-list .row-actions select{width:100%}}
@media(max-width:900px) and (pointer:coarse){.mobile-qr-scanner{position:fixed;right:16px;bottom:82px;z-index:12;display:grid;width:58px;height:58px;place-items:center;padding:0;border:0;border-radius:50%;background:var(--accent);color:#fff;box-shadow:0 9px 25px #0005}.mobile-qr-scanner svg{width:29px;height:29px;fill:currentColor}.mobile-qr-scanner:active{transform:scale(.96)}}
@media print{body *{visibility:hidden}.print-area,.print-area *{visibility:visible}.overlay{display:block;background:#fff}.qr-modal{position:absolute;inset:0;width:100%;max-width:none;height:100%;margin:0;padding:0;overflow:visible;border:0;box-shadow:none}.qr-modal>*:not(.print-area){display:none!important}.print-area{position:absolute;inset:0;display:grid;place-items:center;margin:0}.qr-only img{width:70mm}.print-label{max-width:none;max-height:none}}
/* Optioneel kruimelpad uit Site-inrichting. */
.breadcrumbs{display:flex;align-items:center;gap:8px;margin:22px 5vw -18px;color:var(--muted);font-size:13px}.breadcrumbs[hidden]{display:none}.breadcrumbs button{padding:0;border:0;background:transparent;color:var(--ink);text-decoration:underline}.breadcrumbs strong{color:var(--ink)}
.category-icon.commercieel_bier,.chip.commercieel_bier{background:#d8c9ef;color:#5d3f87}