:root{font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:#182536;background:#f5f7fb;font-size:15px}*{box-sizing:border-box}body{margin:0}header{padding:15px max(22px,calc((100vw - 1220px)/2));background:#112442;color:white;display:flex;justify-content:space-between;align-items:center}header>div{display:flex;gap:13px;align-items:center}header strong{font-size:18px}header small{display:block;color:#a9c5da;margin-top:3px}.logo{background:#28b99a;border-radius:11px;padding:12px;font-size:22px}.tag{border-radius:100px;padding:8px 12px;background:#253d59;font-size:13px}nav{background:#fff;padding:0 max(22px,calc((100vw - 1220px)/2));display:flex;gap:7px;border-bottom:1px solid #e0e6ef;overflow:auto}.nav{border:0;border-bottom:3px solid transparent;border-radius:0;padding:17px 16px;background:none;font-weight:700;color:#607085;white-space:nowrap;cursor:pointer}.nav.active{color:#057d6e;border-bottom-color:#13b49e}main{max-width:1220px;padding:30px 18px 60px;margin:auto}.view{display:none}.view.active{display:block}.headline{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}h1{font-size:clamp(27px,3vw,37px);margin:5px 0 6px;letter-spacing:-.9px}h2{font-size:19px;margin:0 0 12px}.eyebrow{font-weight:850;color:#008f7f;letter-spacing:1.8px;font-size:11px}.headline p,.sub{color:#718093;font-size:13px;line-height:1.55;margin:6px 0 0}button{cursor:pointer;border:1px solid #cbd6e1;border-radius:10px;background:white;color:#213347;padding:11px 14px;font:inherit;font-weight:650}button:hover{filter:brightness(.97)}button:disabled{cursor:not-allowed;opacity:.45}.primary{background:#0b967e;color:white;border-color:#0b967e}.block{width:100%;margin-top:15px}.scanner{border:1px solid #ace5d8;background:#e9fbf5;border-radius:18px;display:flex;gap:22px;padding:21px;margin-bottom:12px}.scanicon{font-size:38px;color:#008b7a}.scanfield{flex:1}.scanfield label{display:block;font-weight:800;margin:0 0 9px}.scanrow{display:flex;gap:9px}input,select{font:inherit;border:1px solid #cfdae6;background:white;border-radius:10px;padding:11px 12px;min-width:0}input:focus,select:focus{outline:2px solid #24bba5;outline-offset:1px}.scanrow input{flex:1}.scanner small{display:block;color:#57786e;margin-top:10px}.columns{display:grid;grid-template-columns:1.08fr 1fr;gap:18px}.panel{background:white;border:1px solid #e0e7ee;border-radius:18px;padding:23px;margin:0 0 18px;box-shadow:0 3px 14px #1b385909}.panelhead{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid #ebeff4;padding-bottom:15px;margin-bottom:15px}.panelhead h2{margin:6px 0 0}.status{background:#f1f4f8;color:#657588;border-radius:100px;font-size:12px;padding:8px 10px}.panel label{display:block;color:#657588;font-size:13px;margin:10px 0}.panel select{width:100%;margin-top:6px}.empty{text-align:center;color:#8c9bad;padding:42px 15px}.line{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid #eff2f6;gap:10px}.line small{display:block;color:#6b7c8c;margin-top:4px}.line .qty{display:flex;align-items:center;gap:12px}.line .qty button{padding:4px 10px}.sum{display:flex;justify-content:space-between;align-items:center;border-top:2px solid #e7edf2;margin-top:12px;padding-top:20px}.sum strong{font-size:26px}.catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:480px;overflow:auto;margin-top:15px}.catalog button{text-align:left;display:flex;flex-direction:column;gap:6px;padding:13px}.catalog small{color:#0a9b81;font-weight:800}.panel #filter{width:100%}.message{background:#e8f0ff;border:1px solid #c9dafa;color:#294778;border-radius:10px;padding:12px 15px;margin-bottom:18px;font-weight:650}.message.error{color:#963a1c;background:#fff0e9;border-color:#ffd0c0}.message.good{color:#075a49;background:#e8fff5;border-color:#b5f0dc}.toggle{display:flex;gap:8px;align-items:center;padding:11px 14px;border:1px solid #d5e1ec;border-radius:10px;background:#fff;font-weight:700;white-space:nowrap}.toggle input{min-width:initial}.qrgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px}.qrcard{text-align:center;border:1px solid #dae2eb;background:#fff;border-radius:12px;padding:14px;break-inside:avoid}.qrcard img{width:120px;height:120px;max-width:100%}.qrcard b{display:block;margin-bottom:6px}.qrcard small{display:block;overflow-wrap:anywhere;color:#546477}.notice{background:#eef5ff;border:1px solid #d5e4ff;padding:16px;border-radius:12px;margin-bottom:18px}.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.formgrid label{display:flex;flex-direction:column;gap:7px}.history{padding-top:8px}.history div{padding:9px 0;border-bottom:1px solid #eee}dialog{border:1px solid #d5e0e8;border-radius:18px;padding:28px;max-width:420px;width:calc(100% - 36px);box-shadow:0 22px 70px #17294144}dialog::backdrop{background:#12254299}dialog p{line-height:1.5}.dialogactions{display:flex;justify-content:flex-end;gap:8px}@media(max-width:750px){.columns{grid-template-columns:1fr}.headline{align-items:start;flex-direction:column}.scanner{gap:8px;padding:14px}.scanicon{display:none}.scanrow{flex-wrap:wrap}.scanrow button{width:100%}.formgrid{grid-template-columns:1fr}}@media print{header,nav,.nav,.headline button,.notice,.scanner,.message,.columns,.panel,.toggle{display:none!important}body{background:white}main{margin:0;padding:0}.headline{margin:0 0 12px}.headline h1{font-size:20px}.view{display:none!important}.view.active{display:block!important}.qrgrid{grid-template-columns:repeat(4,1fr);gap:5px}.qrcard{border:1px solid #ccc;padding:7px}.qrcard img{width:105px;height:105px} @page{size:A4;margin:10mm}}

/* Aantal kiezen bij het scannen */
.quantity-label{display:block;margin:18px 0 8px;font-weight:700}
.quantity-controls{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.quantity-controls button{font-size:25px;min-width:54px;min-height:50px}
.quantity-controls input{width:115px;text-align:center;font-size:23px;font-weight:700;padding:10px}
#acceptConfirm:focus-visible,#acceptConfirm:focus{outline:4px solid #facc15;outline-offset:4px;box-shadow:0 0 0 7px rgba(250,204,21,.22)}

/* Open aantalvenster blijft zichtbaar terwijl producten aanklikbaar zijn. */
#confirmDialog[open]{position:fixed;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);margin:0;z-index:1000;background:#fff;max-height:calc(100vh - 30px);overflow-y:auto}
@media(max-width:750px){#confirmDialog[open]{max-width:min(360px,calc(100% - 20px));padding:16px}}

/* Knoppen op de actieve rekening */
.line .qty{flex-wrap:wrap;gap:7px;justify-content:flex-end}
.line .qty button{min-width:35px;font-size:18px;font-weight:800;padding:7px 10px}
.line .qty .delete-item{color:#b42318;border-color:#f4b4ae;background:#fff0ee}
.line .qty span{white-space:nowrap;margin-left:3px}

/* Dubbelklikbaar aantal in de actieve rekening */
.line .qty .qty-direct{background:#e8fff5;color:#075a49;border:2px solid #54c5ab;border-radius:9px;min-width:54px;font-size:17px;font-weight:850;cursor:pointer;user-select:none;touch-action:manipulation}
.line .qty .qty-direct:hover,.line .qty .qty-direct:focus{background:#c7f7e8;outline:2px solid #facc15;outline-offset:2px}
#editQtyDialog{max-width:420px;width:calc(100% - 30px)}
#editQtyDialog #editQtyInput{font-size:24px;font-weight:800;width:100%;text-align:center}
#editQtyDialog::backdrop{background:rgba(11,24,44,.58)}

/* Prijslijst en afdruklinks */
.price-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px;margin-bottom:15px}
.price-toolbar label{font-weight:750;display:flex;flex-direction:column;gap:6px;flex:1;min-width:240px;margin:0}
.print-actions{display:flex;flex-wrap:wrap;gap:8px}
.print-link{display:inline-block;background:#eaf5f5;color:#075b54;border:1px solid #badfd8;border-radius:9px;padding:10px 13px;text-decoration:none;font-weight:800}
.print-link:hover{background:#d4f3e9}
.price-category{padding:12px 0 7px;border-bottom:2px solid #d9efe9;margin:18px 0 4px;color:#0c7569}
.price-row{display:grid;grid-template-columns:minmax(140px,1fr) 140px 110px;gap:12px;align-items:center;border-bottom:1px solid #e8eef1;padding:10px 0}
.price-row small{display:block;color:#708090;font-size:11px;margin-top:4px}
.price-row label{margin:0;display:flex;align-items:center;gap:7px;font-weight:bold}
.price-row input{width:100%;min-width:65px}
@media(max-width:580px){.price-row{grid-template-columns:minmax(90px,1fr) 110px;gap:8px}.price-row button{grid-column:2}.print-actions{width:100%}}

/* Product-QR's per categorie, zowel op het scherm als op papier */
.qr-category{margin:0 0 27px;break-inside:auto}
.qr-category h2{border-bottom:2px solid #cbd5e1;padding:11px 0;margin:14px 0 12px;font-size:21px;color:#112442;break-after:avoid}
@media print{
 .qr-category{margin-bottom:13px}
 .qr-category h2{padding:5px 0;margin:8px 0;font-size:17px}
 .qr-category .qrcard{break-inside:avoid}
}

/* Naam aanpassen rechtstreeks bij de actieve rekening */
.cash-sheet-name{margin:15px 0 18px;padding:15px;background:#f3f8fc;border:1px solid #d7e5ed;border-radius:12px}
.cash-sheet-name label{font-weight:750;color:#243b53;margin:0 0 8px;display:block}
.cash-name-controls{display:flex;gap:8px}.cash-name-controls input{flex:1;min-width:0}.cash-name-controls button{white-space:nowrap}
@media(max-width:540px){.cash-name-controls{flex-direction:column}.cash-name-controls button{width:100%}}

/* Versie 32: klikbare producten per categorie op het kassascherm */
#catalog.catalog{display:block;max-height:520px;overflow-y:auto;overscroll-behavior:contain;padding-right:3px}
.catalog-category{margin:0 0 21px}
.catalog-category-title{font-size:15px;font-weight:800;color:#14314c;background:#ecf7f4;border-left:4px solid #0b967e;border-radius:7px;padding:10px 12px;margin:0 0 10px;display:flex;justify-content:space-between;align-items:center}
.catalog-category-title span{color:#56716c;font-size:12px;font-weight:700}
.catalog-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.catalog-products button{text-align:left;display:flex;flex-direction:column;gap:6px;padding:13px;min-width:0}
.catalog-products button strong{overflow-wrap:anywhere}
.catalog-products button small{color:#0a9b81;font-weight:800}
@media(max-width:450px){.catalog-products{grid-template-columns:1fr}}

/* Vooraf betaald eten */
.prepaid-choice{display:flex;align-items:center;gap:9px;margin:17px 0;padding:12px;background:#e8fff5;border:1px solid #a5dfcb;border-radius:10px;color:#075a49}
.prepaid-choice input{width:20px;height:20px;min-width:20px;accent-color:#0b967e}
.paid-toggle{display:block;margin-top:7px;padding:6px 9px;font-size:12px;color:#965c00;background:#fff3d3;border-color:#f0d18c}
.paid-toggle.is-paid{color:#075a49;background:#d5f8e9;border-color:#96dbc0}

/* V34: afzonderlijk eten betalen en zichtbare betaalstatus */
.payment-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.payment-actions button{min-width:0;padding:14px 10px;font-weight:800;border-radius:11px;cursor:pointer}
.food-pay{color:#fff;background:#a35e12;border:1px solid #8f4d0d}
.payment-actions button:disabled{opacity:.45;cursor:not-allowed}
.payment-badge{display:inline-block;margin:4px 0 0 6px;font-size:12px;font-weight:800;padding:4px 7px;border-radius:8px}
.badge-paid{background:#d5f8e9;color:#075a49}.badge-open{background:#fff1dc;color:#9a3e07}.badge-part{background:#e4ecff;color:#263e87}
@media(max-width:560px){.payment-actions{grid-template-columns:1fr}}

/* V40: contant afrekenen eten */
.food-cash-dialog{max-width:min(460px,94vw);width:100%;border:0;border-radius:18px;padding:24px;box-shadow:0 20px 70px #0004}
.food-cash-dialog::backdrop{background:#091b2eab}
.food-cash-dialog h2{margin:0 0 10px}
.food-cash-total,.food-cash-change{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-radius:12px;background:#eef7f5;margin:15px 0}
.food-cash-total strong,.food-cash-change strong{font-size:25px}
.food-cash-change{background:#e7f8ec}
.food-cash-row{display:flex;gap:9px;margin-top:8px}
.food-cash-row input{min-width:0;flex:1;font-size:21px;font-weight:700}
.food-cash-row button{white-space:nowrap}
.food-print-notice{font-size:13px;padding:12px;border-left:4px solid #a35e12;background:#fff5e6;border-radius:7px;color:#70410b}
#foodCashError{min-height:20px;color:#9c3325}
@media(max-width:420px){.food-cash-row{flex-direction:column}}

.receipt-choice{display:flex;align-items:center;gap:12px;margin:18px 0 8px;font-weight:700}.receipt-choice input{width:22px;height:22px;flex-shrink:0}