/*
 * pos-main.css — i-Kassa Smart POS
 * Centrale statische stijllaag
 * Gegenereerd uit 07-personeel-ui.php heredoc
 * ============================================================
 */

/* Thema-override CSS verwijderd — POS draait nu in eigen shell template
   zonder thema-header/footer. body.pos-mode is de root. */
body.pos-mode{background:#f3f4f6;margin:0;padding:0}

/* ============================================================
   POS SHELL — 2/3 links, 1/3 rechts
   ============================================================ */
body.pos-mode .pos-wrap{
	display:flex !important;
	gap:16px !important;
	width:100% !important;
	max-width:1800px !important;
	margin:0 auto !important;
	align-items:flex-start !important;
	padding:16px !important;
	border-left:1px solid rgba(0,0,0,.06);
	border-right:1px solid rgba(0,0,0,.06);
	box-shadow:0 0 0 1px rgba(0,0,0,.02),0 0 24px rgba(0,0,0,.04);
	box-sizing:border-box !important;
}
body.pos-mode .pos-left{
	flex:2 1 0% !important;
	width:0 !important;
	min-width:0 !important;
	max-width:none !important;
	box-sizing:border-box !important;
}
body.pos-mode .pos-right{
	display:flex !important;
	flex-direction:column !important;
	align-items:stretch !important;
	gap:0 !important;
	flex:0 0 420px !important;
	width:420px !important;
	max-width:420px !important;
	min-width:380px !important;
	box-sizing:border-box !important;
	position:sticky !important;
	top:16px !important;
	max-height:calc(100vh - 32px) !important;
	overflow-y:auto !important;
}
body.pos-mode .pos-right > .pos-card{
	display:block !important;
	width:100% !important;
	max-width:100% !important;
	min-width:0 !important;
	flex:0 0 auto !important;
	float:none !important;
	clear:both !important;
	box-sizing:border-box !important;
}
/* Bon: geen border-radius onderaan, naadloos op afrekenen */
body.pos-mode #pos-cart-card{
	border-radius:12px 12px 0 0 !important;
	border-bottom:1px solid rgba(0,0,0,.06) !important;
	margin-bottom:0 !important;
}
body.pos-mode #pos-checkout-card{
	border-radius:0 0 12px 12px !important;
	border-top:none !important;
}
body.pos-mode .pos-card{
	background:#fff;
	border:1px solid rgba(0,0,0,.08);
	border-radius:12px;
	padding:16px;
	margin-bottom:0 !important;
	overflow:visible !important;
	box-sizing:border-box !important;
	transition:box-shadow .14s ease,transform .14s ease,border-color .14s ease !important;
	width:100% !important;
	max-width:100% !important;
	min-width:0 !important;
}
body.pos-mode .pos-card:hover{
	transform:translateY(-1px) !important;
	border-color:rgba(0,0,0,.14) !important;
	box-shadow:0 10px 26px rgba(0,0,0,.08) !important;
}
body.pos-mode .pos-card h2{
	margin:0 0 10px;
	font-size:18px;
	display:flex;
	align-items:center;
	gap:8px;
	flex-wrap:wrap;
}
body.pos-mode .pos-agenda-link{
	font-size:11px !important;
	font-weight:700 !important;
	background:#1e293b !important;
	color:#93c5fd !important;
	border-radius:7px !important;
	padding:4px 9px !important;
	text-decoration:none !important;
	margin-left:auto !important;
	white-space:nowrap !important;
	line-height:1.4 !important;
	letter-spacing:.1px !important;
}
body.pos-mode .pos-agenda-link:hover{
	background:#334155 !important;
	color:#bfdbfe !important;
}
body.pos-mode .pos-boodschap{
	font-size:13px;
	font-weight:500;
	color:#b45309;
	background:#fffbeb;
	border:1px solid #fde68a;
	border-radius:5px;
	padding:2px 8px;
	letter-spacing:.1px;
	line-height:1.4;
	white-space:normal;
}

/* ============================================================
   KAPPER
   ============================================================ */
body.pos-mode .pos-hint{display:none !important}
body.pos-mode .pos-pickers{
	display:grid !important;
	gap:12px !important;
	margin-top:10px !important;
	max-height:none !important;
	overflow:visible !important;
	padding-right:0 !important;
	grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}
body.pos-mode .pos-pickers.pos-pickers--three-cols{
	grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
body.pos-mode .pos-pick{
	position:relative !important;
	display:block !important;
}
body.pos-mode .pos-pick input{
	position:absolute !important;
	opacity:0 !important;
	pointer-events:none !important;
}
body.pos-mode .pos-pick span{
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	text-align:center !important;
	min-height:42px !important;
	padding:6px 10px !important;
	border-radius:12px !important;
	border:1px solid rgba(0,0,0,.14) !important;
	background:#fafafa !important;
	font-weight:800 !important;
	font-size:14px !important;
	letter-spacing:.1px !important;
	cursor:pointer !important;
	user-select:none !important;
	transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease !important;
}
body.pos-mode .pos-pick span:hover{
	transform:translateY(-1px) !important;
	border-color:rgba(0,0,0,.22) !important;
	background:#ffffff !important;
	box-shadow:0 8px 18px rgba(0,0,0,.08) !important;
}
body.pos-mode .pos-pick input:checked + span{
	background:#fff !important;
	border-color:rgba(0,0,0,.34) !important;
	box-shadow:0 10px 22px rgba(0,0,0,.10) !important;
}

/* ============================================================
   BEHANDELINGEN
   ============================================================ */
body.pos-mode .pos-grid{
	display:grid;
	grid-template-columns:repeat(5,minmax(0,1fr));
	gap:10px;
	margin-top:10px;
}
body.pos-mode .pos-btn{
	display:flex;
	flex-direction:column;
	justify-content:flex-start !important;
	text-decoration:none !important;
	color:inherit !important;
	padding:7px 10px 7px 18px; /* FIX 2: was 10px — minder hoog */
	border-radius:10px;
	border:1px solid rgba(17,24,39,.10);
	background:linear-gradient(180deg,#ffffff 0%,#f6f7f9 100%);
	box-shadow:0 1px 0 rgba(17,24,39,.04);
	min-height:42px; /* FIX 2: was 52px — ca. 20% minder hoog */
	cursor:pointer;
	position:relative;
	overflow:hidden;
	transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;
}
body.pos-mode .pos-btn:hover{
	transform:translateY(-1px);
	box-shadow:0 10px 24px rgba(17,24,39,.08);
	border-color:rgba(17,24,39,.16);
	background:linear-gradient(180deg,#ffffff 0%,#f7f8fb 100%);
}
body.pos-mode .pos-btn-name{
	font-weight:800;
	font-size:14px;
	line-height:1.15;
	text-align:center !important;
	letter-spacing:.1px;
	display:-webkit-box !important;
	-webkit-line-clamp:2 !important;
	-webkit-box-orient:vertical !important;
	overflow:hidden !important;
	min-height:calc(2 * 1.15em) !important;
	margin:0 !important;
}
body.pos-mode .pos-btn-meta{
	margin-top:3px; /* FIX 2: was 6px — witregel weg */
	padding-top:3px; /* FIX 2: dun lijntje scheiding */
	border-top:1px solid rgba(17,24,39,.07); /* FIX 2: subtiele scheiding */
	display:flex;
	flex-direction:column;
	gap:2px;
	align-items:center;
	font-size:11px;
	opacity:.92;
}
body.pos-mode .pos-sku,
body.pos-mode .pos-price{
	font-size:15px !important;
	font-weight:800 !important;
	color:rgba(0,0,0,.75) !important;
	opacity:1 !important;
	line-height:1.2 !important;
}
body.pos-mode .pos-price .woocommerce-Price-amount,
body.pos-mode .pos-price bdi{
	font-size:15px !important;
	font-weight:800 !important;
}
body.pos-mode .pos-btn.pos-loading{
	opacity:.5;
	pointer-events:none;
}

body.pos-mode .pos-btn.product_tag-knippen,
body.pos-mode .pos-btn.product_tag-kleuren,
body.pos-mode .pos-btn.product_tag-verkoop,
body.pos-mode .pos-btn.product_tag-actie,
body.pos-mode .pos-btn.product_tag-dames,
body.pos-mode .pos-btn.product_tag-heren,
body.pos-mode .pos-btn.product_tag-producten,
body.pos-mode .pos-btn.product_tag-behandeling,
body.pos-mode .pos-btn.product_tag-permanent{
	background:linear-gradient(180deg,#ffffff 0%,#f6f7f9 100%) !important;
	border-color:rgba(17,24,39,.10) !important;
}
body.pos-mode .pos-btn[class*="product_tag-"]::after{
	content:"";
	position:absolute;
	left:8px;
	top:10px;
	bottom:10px;
	width:5px;
	border-radius:999px;
	background:linear-gradient(180deg,rgba(107,114,128,.85),rgba(203,213,225,.85));
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 1px 2px rgba(17,24,39,.18);
	pointer-events:none;
	opacity:.90;
	transition:opacity .15s ease;
}
body.pos-mode .pos-btn[class*="product_tag-"]:hover::after{
	opacity:1;
}

body.pos-mode .pos-btn.product_tag-heren::after{background:linear-gradient(180deg,#1e40af 0%,#60a5fa 100%)}
body.pos-mode .pos-btn.product_tag-dames::after{background:linear-gradient(180deg,#993352 0%,#b5607a 100%)}
body.pos-mode .pos-btn.product_tag-kleuren::after{background:linear-gradient(180deg,#15803d 0%,#6ee7b7 100%)}
body.pos-mode .pos-btn.product_tag-producten::after{background:linear-gradient(180deg,#4b5563 0%,#e5e7eb 100%)}
body.pos-mode .pos-btn.product_tag-permanent::after{background:linear-gradient(180deg,#7c3aed 0%,#c084fc 100%)}
body.pos-mode .pos-btn.product_tag-kleuren.product_tag-dames::after,
body.pos-mode .pos-btn.product_tag-kleuren.product_tag-heren::after,
body.pos-mode .pos-btn.product_tag-kleuren.product_tag-producten::after,
body.pos-mode .pos-btn.product_tag-kleuren.product_tag-permanent::after{
	background:linear-gradient(180deg,#15803d 0%,#6ee7b7 100%) !important;
}

body.pos-mode .pos-btn.product_tag-heren:hover{background:linear-gradient(180deg,#eff4ff 0%,#e8f0fd 100%) !important}
body.pos-mode .pos-btn.product_tag-dames:hover{background:linear-gradient(180deg,#fdf2f4 0%,#fae8ec 100%) !important}
body.pos-mode .pos-btn.product_tag-kleuren:hover{background:linear-gradient(180deg,#f0faf5 0%,#e6f7ee 100%) !important}
body.pos-mode .pos-btn.product_tag-producten:hover{background:linear-gradient(180deg,#f5f6f7 0%,#ebedef 100%) !important}
body.pos-mode .pos-btn.product_tag-permanent:hover{background:linear-gradient(180deg,#f5f0ff 0%,#ede8fd 100%) !important}
body.pos-mode .pos-btn.product_tag-kleuren.product_tag-dames:hover,
body.pos-mode .pos-btn.product_tag-kleuren.product_tag-heren:hover,
body.pos-mode .pos-btn.product_tag-kleuren.product_tag-producten:hover,
body.pos-mode .pos-btn.product_tag-kleuren.product_tag-permanent:hover{
	background:linear-gradient(180deg,#f0faf5 0%,#e6f7ee 100%) !important;
}

/* ============================================================
   MOOIE FOUTMELDING
   ============================================================ */
body.pos-mode .pos-inline-error{
	margin:0 0 14px;
}
body.pos-mode .pos-inline-error .woocommerce-error{
	margin:0;
	padding:14px 16px 14px 44px;
	list-style:none;
	background:#fff;
	border-top:3px solid #b81c23;
	border-radius:8px;
	position:relative;
	box-shadow:0 2px 8px rgba(0,0,0,.04);
}
body.pos-mode .pos-inline-error .woocommerce-error::before{
	content:"!";
	position:absolute;
	left:14px;
	top:50%;
	transform:translateY(-50%);
	width:18px;
	height:18px;
	border-radius:50%;
	background:#b81c23;
	color:#fff;
	font-weight:700;
	font-size:12px;
	line-height:18px;
	text-align:center;
}
body.pos-mode .pos-inline-error .woocommerce-error li{
	margin:0;
	padding:0;
	color:#444;
	font-size:15px;
	line-height:1.4;
}

/* ============================================================
   BON + CHECKOUT STACK FIX
   ============================================================ */
body.pos-mode .pos-cart,
body.pos-mode .pos-checkout,
body.pos-mode #pos-cart-card,
body.pos-mode #pos-checkout-card,
body.pos-mode #pos-cart-panel,
body.pos-mode #pos-checkout-panel{
	display:block !important;
	width:100% !important;
	max-width:100% !important;
	min-width:0 !important;
	float:none !important;
	clear:both !important;
	overflow:visible !important;
	box-sizing:border-box !important;
}

/* ============================================================
   BON — HARD FIX
   ============================================================ */
body.pos-mode .pos-cart .woocommerce,
body.pos-mode .pos-cart .woocommerce-cart-form,
body.pos-mode .pos-cart form{
	width:100% !important;
	max-width:100% !important;
	min-width:0 !important;
	margin:0 !important;
	padding:0 !important;
	overflow:visible !important;
	box-sizing:border-box !important;
}
body.pos-mode .pos-cart .wc-proceed-to-checkout,
body.pos-mode .pos-cart a.checkout-button,
body.pos-mode .pos-cart .checkout-button,
body.pos-mode .pos-cart .woocommerce a.button.wc-backward,
body.pos-mode .pos-cart .woocommerce a.wc-backward,
body.pos-mode .pos-cart .return-to-shop,
body.pos-mode .pos-cart p.return-to-shop,
body.pos-mode .pos-cart .woocommerce-form-coupon-toggle,
body.pos-mode .pos-cart .woocommerce-info{
	display:none !important;
}
body.pos-mode .pos-cart .woocommerce-notices-wrapper{
	margin:0 !important;
	padding:0 !important;
}
body.pos-mode .pos-cart .woocommerce-notices-wrapper .woocommerce-message,
body.pos-mode .pos-cart .woocommerce-message{
	display:none !important;
	margin:0 !important;
	padding:0 !important;
	border:0 !important;
}
body.pos-mode .pos-cart table.shop_table.cart{
	width:100% !important;
	max-width:100% !important;
	min-width:0 !important;
	table-layout:fixed !important;
	border-collapse:collapse !important;
	margin:0 !important;
	background:#fff !important;
	box-sizing:border-box !important;
}
body.pos-mode .pos-cart table.shop_table.cart colgroup{
	display:none !important;
}
body.pos-mode .pos-cart table.shop_table.cart th,
body.pos-mode .pos-cart table.shop_table.cart td{
	box-sizing:border-box !important;
	padding:6px 8px !important;
	vertical-align:middle !important;
	overflow:hidden !important;
	min-width:0 !important;
	font-size:13px !important;
	line-height:1.3 !important;
	border-bottom:1px solid rgba(0,0,0,.06) !important;
}
body.pos-mode .pos-cart table.shop_table.cart thead,
body.pos-mode .pos-cart table.shop_table.cart thead th{
	display:none !important;
}
body.pos-mode .pos-cart table.shop_table.cart tbody tr:last-child td{
	border-bottom:none !important;
}
body.pos-mode .pos-cart table.shop_table.cart th.product-thumbnail,
body.pos-mode .pos-cart table.shop_table.cart td.product-thumbnail,
body.pos-mode .pos-cart table.shop_table.cart th.product-subtotal,
body.pos-mode .pos-cart table.shop_table.cart td.product-subtotal{
	display:none !important;
}
body.pos-mode .pos-cart table.shop_table.cart th.product-remove,
body.pos-mode .pos-cart table.shop_table.cart td.product-remove{
	width:34px !important;
	min-width:34px !important;
	max-width:34px !important;
	padding-left:4px !important;
	padding-right:4px !important;
	text-align:center !important;
}
body.pos-mode .pos-cart table.shop_table.cart th.product-name,
body.pos-mode .pos-cart table.shop_table.cart td.product-name{
	width:auto !important;
	min-width:0 !important;
	max-width:none !important;
}
body.pos-mode .pos-cart table.shop_table.cart td.product-name{
	word-break:break-word !important;
	overflow-wrap:anywhere !important;
	white-space:normal !important;
}
body.pos-mode .pos-cart table.shop_table.cart td.product-name a{
	display:block !important;
	width:100% !important;
	max-width:100% !important;
	font-weight:800 !important;
	color:#111 !important;
	text-decoration:none !important;
	white-space:normal !important;
	word-break:break-word !important;
	overflow-wrap:anywhere !important;
	line-height:1.25 !important;
}
body.pos-mode .pos-cart table.shop_table.cart th.product-price,
body.pos-mode .pos-cart table.shop_table.cart td.product-price{
	width:82px !important;
	min-width:82px !important;
	max-width:82px !important;
	text-align:right !important;
	white-space:nowrap !important;
	font-weight:700 !important;
}
body.pos-mode .pos-cart table.shop_table.cart th.product-quantity,
body.pos-mode .pos-cart table.shop_table.cart td.product-quantity{
	display:none !important;
	width:58px !important;
	min-width:58px !important;
	max-width:58px !important;
	text-align:center !important;
	white-space:nowrap !important;
}
body.pos-mode .pos-cart table.shop_table.cart td.product-quantity .quantity{
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	width:100% !important;
	max-width:100% !important;
}
body.pos-mode .pos-cart table.shop_table.cart td.product-quantity input{
	width:42px !important;
	min-width:42px !important;
	max-width:42px !important;
	height:34px !important;
	line-height:34px !important;
	border-radius:8px !important;
	border:1px solid rgba(0,0,0,.15) !important;
	background:#fff !important;
	text-align:center !important;
	padding:0 !important;
	margin:0 auto !important;
	box-sizing:border-box !important;
}
body.pos-mode .pos-cart a.remove{
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
	width:18px !important;
	height:18px !important;
	line-height:18px !important;
	border-radius:999px !important;
	background:#b5405a !important;
	color:#fff !important;
	font-size:14px !important;
	font-weight:900 !important;
	text-decoration:none !important;
	margin:0 auto !important;
}
body.pos-mode .pos-cart .pos-cart-kapper{
	display:block !important;
	margin-top:4px !important;
	font-size:12px !important;
	line-height:1.3 !important;
	opacity:.78 !important;
	word-break:break-word !important;
	overflow-wrap:anywhere !important;
}
/* td.actions is nu leeg (korting staat na de tabel) — verberg het */
body.pos-mode .pos-cart table.shop_table.cart tr.pos-actions-row,
body.pos-mode .pos-cart table.shop_table.cart td.actions:empty,
body.pos-mode .pos-cart table.shop_table.cart tr:has(td.actions:empty){
	display:none !important;
}
body.pos-mode .pos-cart table.shop_table.cart td.actions,
body.pos-mode .pos-cart table.shop_table.cart tr.pos-actions-row td.actions{
	display:flex !important;
	align-items:center !important;
	gap:6px !important;
	flex-wrap:nowrap !important;
	width:100% !important;
	max-width:100% !important;
	min-width:0 !important;
	padding:4px 6px !important;
	box-sizing:border-box !important;
	overflow:visible !important;
}
body.pos-mode .pos-cart table.shop_table.cart td.actions *{
	float:none !important;
}
body.pos-mode .pos-cart table.shop_table.cart td.actions input[type="hidden"]{
	display:none !important;
}
body.pos-mode .pos-cart table.shop_table.cart td.actions .coupon{
	display:none !important;
}
body.pos-mode .pos-cart table.shop_table.cart td.actions{
	flex-wrap:nowrap !important;
}
/* Korting blok */
/* Kortingblok: alles op één compacte regel */
body.pos-mode .pos-korting-blok{
	display:flex;
	flex-direction:row;
	align-items:center;
	gap:4px;
	padding:5px 8px;
	background:#fff;
	border:1px solid #e5e7eb;
	border-left:3px solid #b5405a;
	border-radius:6px;
	margin:4px 0;
	width:100%;
	box-sizing:border-box;
}
body.pos-mode .pos-korting-select{
	flex:1 1 0;
	min-width:0;
	border:1px solid #e5e7eb;
	border-radius:5px;
	padding:4px 5px;
	font-size:11px;
	color:#374151;
	background:#fff;
	height:28px;
}
body.pos-mode .pos-korting-invoer{
	display:contents;
}
body.pos-mode .pos-korting-euro{
	font-weight:800;
	color:#b5405a;
	font-size:14px;
	flex-shrink:0;
}
body.pos-mode .pos-voucher-input{
	width:68px !important;
	min-width:0 !important;
	flex:0 0 68px !important;
	text-align:right !important;
	height:28px !important;
	padding:0 5px !important;
	font-size:12px !important;
	border:1px solid #e5e7eb !important;
	border-radius:5px !important;
}
body.pos-mode .pos-korting-invoer .pos-voucher-apply,
body.pos-mode .pos-korting-invoer button.pos-voucher-apply,
body.pos-mode .pos-korting-invoer .button.pos-voucher-apply{
	display:inline-flex !important;
	align-items:center !important;
	visibility:visible !important;
	opacity:1 !important;
	position:static !important;
	clip:auto !important;
	clip-path:none !important;
	flex:0 0 auto !important;
	height:28px !important;
	padding:0 8px !important;
	background:#b5405a !important;
	color:#fff !important;
	border:none !important;
	border-radius:5px !important;
	font-weight:700 !important;
	font-size:11px !important;
	cursor:pointer !important;
	white-space:nowrap !important;
}
body.pos-mode .pos-korting-actief{
	display:block;
	font-size:10px;
	color:#16a34a;
	background:#f0fdf4;
	border:1px solid #bbf7d0;
	border-radius:5px;
	padding:2px 6px;
	margin-top:2px;
	width:100%;
	box-sizing:border-box;
}

body.pos-mode .pos-cart .pos-voucher-row button.pos-voucher-apply,
body.pos-mode .pos-cart .pos-voucher-row .button.pos-voucher-apply{
	order:2 !important;
	flex-shrink:0 !important;
	height:34px !important;
	line-height:34px !important;
	padding:0 12px !important;
	border-radius:8px !important;
	border:1px solid rgba(0,0,0,.14) !important;
	background:#e5e7eb !important;
	color:#111 !important;
	font-weight:800 !important;
	font-size:12px !important;
	white-space:nowrap !important;
	cursor:pointer !important;
	transition:background .15s,border-color .15s,color .15s,transform .12s,box-shadow .12s !important;
}
body.pos-mode .pos-cart .pos-voucher-row button.pos-voucher-apply:hover,
body.pos-mode .pos-cart .pos-voucher-row .button.pos-voucher-apply:hover{
	background:#b5405a !important;
	border-color:#b5405a !important;
	color:#fff !important;
	transform:translateY(-1px) !important;
	box-shadow:0 6px 16px rgba(220,38,38,.18) !important;
}
body.pos-mode .pos-cart .pos-voucher-row button.pos-voucher-remove,
body.pos-mode .pos-cart .pos-voucher-row .button.pos-voucher-remove{
	order:3 !important;
	flex-shrink:0 !important;
	height:34px !important;
	line-height:34px !important;
	padding:0 12px !important;
	border-radius:8px !important;
	border:1px solid #b5405a !important;
	background:#b5405a !important;
	color:#fff !important;
	font-weight:800 !important;
	font-size:12px !important;
	white-space:nowrap !important;
	cursor:pointer !important;
	transition:background .15s,transform .12s !important;
}
body.pos-mode .pos-cart .pos-voucher-row button.pos-voucher-remove:hover,
body.pos-mode .pos-cart .pos-voucher-row .button.pos-voucher-remove:hover{
	background:#8a2d3f !important;
	transform:translateY(-1px) !important;
}
body.pos-mode .pos-cart table.shop_table.cart td.actions > button[name="update_cart"]{
	display:none !important;
	order:4 !important;
	flex-shrink:0 !important;
	height:34px !important;
	line-height:34px !important;
	padding:0 12px !important;
	border-radius:8px !important;
	border:1px solid rgba(0,0,0,.18) !important;
	background:#f3f4f6 !important;
	color:#374151 !important;
	font-weight:800 !important;
	font-size:12px !important;
	white-space:nowrap !important;
	margin-left:0 !important;
	cursor:pointer !important;
	transition:background .15s,border-color .15s,transform .12s !important;
}
body.pos-mode .pos-cart table.shop_table.cart td.actions > button[name="update_cart"]:hover{
	background:#e5e7eb !important;
	border-color:rgba(0,0,0,.28) !important;
	transform:translateY(-1px) !important;
}
body.pos-mode .pos-cart.pos-card{
	padding-bottom:0 !important;
}
body.pos-mode .pos-cart .woocommerce{
	margin-bottom:0 !important;
	padding-bottom:0 !important;
}
body.pos-mode .pos-cart .woocommerce-cart-form{
	margin-bottom:0 !important;
}
body.pos-mode .pos-cart .cart-collaterals,
body.pos-mode .pos-cart .cart_totals{
	display:none !important;
}

/* ============================================================
   CHECKOUT — HARD FIX
   ============================================================ */
body.pos-mode .pos-checkout .woocommerce,
body.pos-mode .pos-checkout form.checkout,
body.pos-mode .pos-checkout #order_review,
body.pos-mode .pos-checkout .woocommerce-checkout-review-order,
body.pos-mode .pos-checkout .col2-set,
body.pos-mode .pos-checkout .form-row{
	display:block !important;
	width:100% !important;
	max-width:100% !important;
	min-width:0 !important;
	float:none !important;
	clear:both !important;
	box-sizing:border-box !important;
	overflow:visible !important;
	border:none !important;
	background:transparent !important;
	padding:0 !important;
	margin:0 !important;
	box-shadow:none !important;
}
body.pos-mode .pos-checkout .woocommerce-form-coupon-toggle,
body.pos-mode .pos-checkout form.checkout_coupon,
body.pos-mode .pos-checkout .woocommerce-info{
	display:none !important;
}
body.pos-mode .pos-checkout #customer_details,
body.pos-mode .pos-checkout #customer_details h3,
body.pos-mode .pos-checkout .woocommerce-billing-fields,
body.pos-mode .pos-checkout .woocommerce-billing-fields > h3,
body.pos-mode .pos-checkout .woocommerce-shipping-fields,
body.pos-mode .pos-checkout .woocommerce-additional-fields{
	display:none !important;
}

/* ============================================================
   CHECKOUT TABEL — zelfde stijl als cart tabel
   ============================================================ */
body.pos-mode .pos-checkout table.shop_table,
body.pos-mode .pos-checkout table.shop_table.woocommerce-checkout-review-order-table{
	width:100% !important;
	max-width:100% !important;
	table-layout:fixed !important;
	border-collapse:separate !important;
	border-spacing:0 !important;
	border:1px solid rgba(0,0,0,.08) !important;
	border-radius:10px !important;
	overflow:hidden !important;
	background:#fff !important;
	margin-bottom:6px !important;
	box-sizing:border-box !important;
}
body.pos-mode .pos-checkout table.shop_table th,
body.pos-mode .pos-checkout table.shop_table td{
	padding:7px 10px !important;
	vertical-align:middle !important;
	font-size:13px !important;
	line-height:1.3 !important;
	box-sizing:border-box !important;
}
body.pos-mode .pos-checkout table.shop_table thead,
body.pos-mode .pos-checkout table.shop_table thead th{
	display:none !important;
}
body.pos-mode .pos-checkout table.shop_table tbody tr td{
	border-bottom:1px solid rgba(0,0,0,.06) !important;
}
body.pos-mode .pos-checkout table.shop_table tbody tr:last-child td{
	border-bottom:0 !important;
}
body.pos-mode .pos-checkout table.shop_table tfoot tr{
	border-top:1px solid rgba(0,0,0,.06) !important;
}
body.pos-mode .pos-checkout table.shop_table tfoot tr.order-total th,
body.pos-mode .pos-checkout table.shop_table tfoot tr.order-total td{
	font-weight:900 !important;
	font-size:14px !important;
	border-top:2px solid rgba(0,0,0,.10) !important;
	padding-top:9px !important;
	padding-bottom:9px !important;
}
body.pos-mode .pos-checkout table.shop_table td.product-total,
body.pos-mode .pos-checkout table.shop_table td:last-child{
	text-align:right !important;
	white-space:nowrap !important;
	font-weight:700 !important;
}
body.pos-mode .pos-checkout table.shop_table td.product-name{
	word-break:break-word !important;
	overflow-wrap:anywhere !important;
	white-space:normal !important;
}
body.pos-mode .pos-checkout table.shop_table td.product-name > a,
body.pos-mode .pos-checkout table.shop_table td.product-name > strong{
	display:block !important;
}
body.pos-mode .pos-checkout table.shop_table td.product-name .pos-cart-kapper,
body.pos-mode .pos-checkout table.shop_table td.product-name dl,
body.pos-mode .pos-checkout table.shop_table td.product-name dd,
body.pos-mode .pos-checkout table.shop_table td.product-name dt,
body.pos-mode .pos-checkout table.shop_table td.product-name .variation,
body.pos-mode .pos-checkout table.shop_table td.product-name strong.product-quantity,
body.pos-mode .pos-checkout table.shop_table td.product-name .wc-item-meta,
body.pos-mode .pos-checkout table.shop_table td.product-name ul.wc-item-meta,
body.pos-mode .pos-checkout table.shop_table td.product-name p,
body.pos-mode .pos-checkout table.shop_table td.product-name span:not(.woocommerce-Price-amount){
	display:none !important;
}
body.pos-mode .pos-checkout table.shop_table th.product-subtotal,
body.pos-mode .pos-checkout table.shop_table td.product-subtotal{
	display:none !important;
}
body.pos-mode .pos-checkout h3#order_review_heading,
body.pos-mode .pos-checkout table.shop_table tr.pos-review-subtotal,
body.pos-mode .pos-checkout table.shop_table tr.cart-subtotal,
body.pos-mode .pos-checkout table.shop_table tfoot tr.cart-subtotal{
	display:none !important;
}


/* Dunne tekst in bon en afrekenen — alleen totaal vetgedrukt */
body.pos-mode .pos-cart table.shop_table.cart td,
body.pos-mode .pos-cart table.shop_table.cart td a{
	font-weight:400 !important;
}
body.pos-mode .pos-cart table.shop_table.cart td.product-price,
body.pos-mode .pos-cart table.shop_table.cart td.product-name a{
	font-weight:600 !important;
}
body.pos-mode .pos-cart .pos-cart-kapper{
	font-weight:400 !important;
	color:#6b7280 !important;
}
/* Checkout: dunne tekst overal, totaal vet */
body.pos-mode .pos-checkout table.shop_table td,
body.pos-mode .pos-checkout table.shop_table th{
	font-weight:400 !important;
}
body.pos-mode .pos-checkout table.shop_table tr.order-total td,
body.pos-mode .pos-checkout table.shop_table tr.order-total th{
	font-weight:900 !important;
}
/* Kortingen rood */
body.pos-mode .pos-checkout table.shop_table tr.cart-discount td,
body.pos-mode .pos-checkout table.shop_table tr.cart-discount th,
body.pos-mode .pos-checkout table.shop_table tr.coupon td,
body.pos-mode .pos-checkout table.shop_table tr.coupon th{
	color:#b5405a !important;
	font-weight:400 !important;
}
/* Verberg de aparte Korting-totaalregel — de waardebonregel toont dit al */
body.pos-mode .pos-checkout table.shop_table tr.cart-discount{
	display:none !important;
}
/* ============================================================
   BETAALMETHODES — zelfde card-stijl
   ============================================================ */
body.pos-mode .pos-checkout #payment{
	margin-top:6px !important;
	background:transparent !important;
	border:none !important;
	padding:0 !important;
}
body.pos-mode .pos-checkout #payment .payment_box,
body.pos-mode .pos-checkout #payment ul.payment_methods li > .payment_box,
body.pos-mode .pos-checkout #payment p.about_paypal,
body.pos-mode .pos-checkout #payment ul.payment_methods li > p,
body.pos-mode .pos-checkout #payment ul.payment_methods li table,
body.pos-mode .pos-checkout #payment ul.payment_methods li .bacs_details,
body.pos-mode .pos-checkout #payment ul.payment_methods li .cod_details{
	display:none !important;
}
body.pos-mode .pos-checkout #payment ul.payment_methods{
	margin:0 0 6px 0 !important;
	padding:0 !important;
	list-style:none !important;
	display:flex !important;
	flex-direction:column !important;
	gap:5px !important;
	width:100% !important;
}
body.pos-mode .pos-checkout #payment ul.payment_methods li{
	padding:0 !important;
	margin:0 !important;
	width:100% !important;
	box-sizing:border-box !important;
}
body.pos-mode .pos-checkout #payment ul.payment_methods li label{
	display:flex !important;
	align-items:center !important;
	gap:10px !important;
	width:100% !important;
	box-sizing:border-box !important;
	padding:9px 12px !important;
	border:1px solid rgba(0,0,0,.10) !important;
	border-radius:10px !important;
	background:#fff !important;
	cursor:pointer !important;
	font-weight:700 !important;
	font-size:14px !important;
	line-height:1.2 !important;
	transition:border-color .12s,background .12s,box-shadow .12s !important;
}
body.pos-mode .pos-checkout #payment ul.payment_methods li label:hover{
	border-color:rgba(0,0,0,.18) !important;
	box-shadow:0 2px 8px rgba(0,0,0,.06) !important;
}
body.pos-mode .pos-checkout #payment ul.payment_methods li:has(input:checked) label,
body.pos-mode .pos-checkout #payment ul.payment_methods li input:checked + label{
	border-color:#16a34a !important;
	background:#f0faf0 !important;
	box-shadow:0 2px 10px rgba(22,163,74,.10) !important;
}
body.pos-mode .pos-checkout #payment ul.payment_methods li input[type="radio"]{
	position:absolute !important;
	opacity:0 !important;
	pointer-events:none !important;
	width:0 !important;height:0 !important;margin:0 !important;
}
body.pos-mode .pos-checkout #payment ul.payment_methods li label::before{
	content:'' !important;
	display:inline-flex !important;
	flex-shrink:0 !important;
	width:18px !important;
	height:18px !important;
	min-width:18px !important;
	border:2px solid rgba(0,0,0,.22) !important;
	border-radius:5px !important;
	background:#fff !important;
	box-sizing:border-box !important;
	transition:background .12s,border-color .12s !important;
}
body.pos-mode .pos-checkout #payment ul.payment_methods li:has(input:checked) label::before{
	background:#16a34a !important;
	border-color:#16a34a !important;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5l2.5 2.5 4.5-4.5' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat:no-repeat !important;
	background-position:center !important;
	background-size:10px !important;
}
body.pos-mode .pos-checkout .pos2-pay-amt{
	margin-left:auto !important;
	display:inline-flex !important;
	align-items:center !important;
	flex-shrink:0 !important;
}
body.pos-mode .pos-checkout .pos2-pay-amt-input{
	width:88px !important;
	min-width:88px !important;
	height:30px !important;
	border-radius:8px !important;
	border:1px solid rgba(0,0,0,.15) !important;
	padding:0 8px !important;
	text-align:right !important;
	background:#fff !important;
	font-weight:900 !important;
	font-size:13px !important;
	box-sizing:border-box !important;
}

body.pos-mode .pos-checkout #place_order,
body.pos-mode .pos-checkout button[name="woocommerce_checkout_place_order"]{
	display:block !important;
	width:100% !important;
	max-width:100% !important;
	box-sizing:border-box !important;
	margin-top:10px !important;
	padding:13px 0 !important;
	border-radius:10px !important;
	border:1px solid #16a34a !important;
	background:#16a34a !important;
	color:#fff !important;
	font-weight:800 !important;
	font-size:15px !important;
	cursor:pointer !important;
	text-align:center !important;
	transition:background .2s,border-color .2s,transform .12s,box-shadow .12s !important;
}
body.pos-mode .pos-checkout #place_order:hover,
body.pos-mode .pos-checkout button[name="woocommerce_checkout_place_order"]:hover{
	background:#b5405a !important;
	border-color:#b5405a !important;
	transform:translateY(-1px) !important;
	box-shadow:0 8px 20px rgba(220,38,38,.20) !important;
}

body.pos-mode .pos-checkout .woocommerce-checkout-payment .place-order,
body.pos-mode .pos-checkout #payment .place-order{
	padding:0 !important;
	margin:0 !important;
}
body.pos-mode .pos-checkout .woocommerce-privacy-policy-text,
body.pos-mode .pos-checkout .woocommerce-terms-and-conditions-wrapper{
	display:none !important;
}

/* ============================================================
   MANAGEMENT PANEL
   ============================================================ */
#pos-panel-toggle{
	position:fixed;
	top:50%;
	right:0;
	transform:translateY(-50%);
	background:#4a4a4a;
	color:#fff;
	border:none;
	border-radius:10px 0 0 10px;
	padding:14px 8px;
	cursor:pointer;
	z-index:10001;
	font-size:18px;
	line-height:1;
	writing-mode:vertical-rl;
	letter-spacing:1px;
	font-weight:700;
	transition:background .2s;
	box-shadow:-2px 0 10px rgba(0,0,0,.18);
}
#pos-panel-toggle:hover{background:#2a2a2a}
#pos-panel-toggle .toggle-arrow{
	display:block;
	font-size:14px;
	writing-mode:horizontal-tb;
	margin-bottom:6px;
}
#pos-zijpaneel{
	position:fixed;
	top:0;
	right:-320px;
	width:300px;
	height:100%;
	background:#2a2a2a;
	color:#fff;
	z-index:10000;
	padding:28px 20px 20px;
	display:flex;
	flex-direction:column;
	gap:12px;
	box-shadow:-4px 0 24px rgba(0,0,0,.25);
	transition:right .3s cubic-bezier(.4,0,.2,1);
	font-family:inherit;
	overflow-y:auto;
}
#pos-zijpaneel.open{right:0}
#pos-zijpaneel h3{
	font-size:13px;
	font-weight:900;
	letter-spacing:.5px;
	border-bottom:1px solid #555;
	padding-bottom:10px;
	margin-bottom:0;
}
.pos-veld-label{
	font-size:10px;
	color:#aaa;
	text-transform:uppercase;
	letter-spacing:.6px;
	margin-bottom:4px;
}
.pos-veld input,
.pos-veld select{
	width:100%;
	background:#3a3a3a;
	border:1px solid #555;
	border-radius:7px;
	color:#fff;
	padding:8px 12px;
	font-size:13px;
}
#pos-dag-btn{
	background:#fff;
	color:#2a2a2a;
	border:none;
	border-radius:9px;
	padding:12px 0;
	font-weight:900;
	font-size:14px;
	cursor:pointer;
	width:100%;
}
#pos-dag-btn:disabled{
	opacity:.4;
	cursor:wait;
}
#pos-dag-msg{
	font-size:11px;
	color:#aaa;
	min-height:16px;
	text-align:center;
}

/* ============================================================
   RESPONSIVE SHELL
   ============================================================ */
@media (max-width:1700px){
	body.pos-mode .pos-wrap{
		padding:0 12px !important;
	}
	body.pos-mode .pos-right{
		flex:0 0 380px !important;
		width:380px !important;
		max-width:380px !important;
		min-width:340px !important;
	}
	body.pos-mode .pos-grid{
		grid-template-columns:repeat(5,minmax(0,1fr)) !important;
	}
}
@media (max-width:1450px){
	body.pos-mode .pos-right{
		flex:0 0 360px !important;
		width:360px !important;
		max-width:360px !important;
		min-width:320px !important;
	}
	body.pos-mode .pos-grid{
		grid-template-columns:repeat(5,minmax(0,1fr)) !important;
	}
	body.pos-mode .pos-checkout .pos2-pay-amt-input{
		width:96px !important;
		min-width:96px !important;
		max-width:96px !important;
	}
}
@media (max-width:1250px){
	body.pos-mode .pos-right{
		flex:0 0 320px !important;
		width:320px !important;
		max-width:320px !important;
		min-width:280px !important;
	}
	body.pos-mode .pos-grid{
		grid-template-columns:repeat(4,minmax(0,1fr)) !important;
	}
}
@media (max-width:1100px){
	body.pos-mode .pos-wrap{
		flex-direction:column !important;
	}
	body.pos-mode .pos-left,
	body.pos-mode .pos-right{
		flex:0 0 auto !important;
		width:100% !important;
		max-width:100% !important;
		min-width:0 !important;
		position:static !important;
		max-height:none !important;
		overflow-y:visible !important;
	}
	body.pos-mode .pos-grid{
		grid-template-columns:repeat(3,minmax(0,1fr)) !important;
	}
}
@media (max-width:980px){
	body.pos-mode .pos-grid{
		grid-template-columns:repeat(2,minmax(0,1fr)) !important;
	}
}
@media (max-width:640px){
	body.pos-mode .pos-pickers,
	body.pos-mode .pos-pickers.pos-pickers--three-cols{
		grid-template-columns:repeat(2,minmax(0,1fr)) !important;
	}
	body.pos-mode .pos-grid{
		grid-template-columns:repeat(2,minmax(0,1fr)) !important;
	}
	body.pos-mode .pos-cart table.shop_table.cart th.product-price,
	body.pos-mode .pos-cart table.shop_table.cart td.product-price{
		width:70px !important;
		min-width:70px !important;
		max-width:70px !important;
	}
	body.pos-mode .pos-cart table.shop_table.cart th.product-quantity,
	body.pos-mode .pos-cart table.shop_table.cart td.product-quantity{
		width:52px !important;
		min-width:52px !important;
		max-width:52px !important;
	}
}



/* ── Afrekeningen ────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,'Segoe UI','Calibri',Arial,sans-serif}
html,body{background:#f5f7fa;color:#1e293b}
.afrk-wrap{max-width:1200px;margin:0 auto;padding:24px}
h1{font-size:22px;font-weight:700;margin-bottom:4px;color:#1e293b}
.afrk-sub{color:#64748b;font-size:13px;margin-bottom:20px}
.afrk-filter{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:16px;display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:20px}
.afrk-filter label{font-size:11px;font-weight:700;color:#475569;display:block;margin-bottom:3px}
.afrk-filter input,.afrk-filter select{border:1.5px solid #e2e8f0;border-radius:6px;padding:7px 10px;font-size:13px;font-family:inherit}
.afrk-filter button{background:#6366f1;color:#fff;border:none;border-radius:8px;padding:8px 18px;font-size:13px;font-weight:700;cursor:pointer}
.afrk-tiles{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.afrk-tile{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:14px 20px;min-width:160px}
.afrk-tile-lbl{font-size:11px;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin-bottom:4px}
.afrk-tile-val{font-size:22px;font-weight:800;color:#1e293b}
.afrk-tile-sub{font-size:11px;color:#64748b;margin-top:2px}
.afrk-kapper-bal{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.afrk-kapper-card{background:#fff;border-left:4px solid #6366f1;border-radius:8px;padding:12px 16px;min-width:180px;border:1px solid #e2e8f0;border-left-width:4px}
.afrk-kapper-nm{font-size:13px;font-weight:700;color:#1e293b;margin-bottom:2px}
.afrk-kapper-omzet{font-size:18px;font-weight:800;color:#6366f1}
.afrk-tabel{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;border:1px solid #e2e8f0}
.afrk-tabel th{background:#f8fafc;padding:10px 14px;font-size:11px;font-weight:800;color:#475569;text-transform:uppercase;letter-spacing:.4px;text-align:left;border-bottom:2px solid #e2e8f0;white-space:nowrap}
.afrk-tabel th a{color:#475569;text-decoration:none;display:flex;align-items:center;gap:4px}
.afrk-tabel th a:hover{color:#6366f1}
.afrk-tabel td{padding:10px 14px;font-size:13px;border-bottom:1px solid #f1f5f9;color:#1e293b}
.afrk-tabel tr:last-child td{border-bottom:none}
.afrk-tabel tr:hover td{background:#f8fafc}
.afrk-tabel .num{text-align:right;font-variant-numeric:tabular-nums}
.afrk-tabel tfoot td{font-weight:800;background:#f0f4ff;border-top:2px solid #c7d2fe}
.badge-pin{background:#dbeafe;color:#1e40af;border-radius:20px;padding:2px 8px;font-size:11px;font-weight:600}
.badge-contant{background:#dcfce7;color:#166534;border-radius:20px;padding:2px 8px;font-size:11px;font-weight:600}

/* ── Nav ────────────────────────────────────────────── */
.pos-topbalk{background:#fff;border-bottom:1.5px solid #e8ecf0;box-shadow:0 2px 12px rgba(0,0,0,.06);padding:0 20px;height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:9000;flex-shrink:0;}
.pos-topbalk-links{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-width:0;}
.pos-topbalk-midden{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;overflow:hidden;}
.pos-topbalk-midden > *{flex-shrink:0;}
.pos-date-selector{display:inline-flex;align-items:center;gap:6px;background:#f8fafc;border:1.5px solid #dbe3ee;border-radius:22px;padding:3px 7px;box-shadow:inset 0 1px 0 rgba(255,255,255,.75);}
.pos-date-nav{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#fff;border:1.5px solid #cbd5e1;color:#475569;text-decoration:none;font-size:24px;font-weight:900;line-height:1;box-shadow:0 1px 3px rgba(15,23,42,.08);transition:all .15s;}
.pos-date-nav:hover{background:#6366f1;border-color:#6366f1;color:#fff;transform:translateY(-1px);}
.pos-date-label{font-size:14px;font-weight:800;color:#0f172a;white-space:nowrap;padding:0 3px;}
.pos-topbalk-boodschap{font-size:12px;font-weight:800;color:#b45309;background:#fef9c3;border:1.5px solid #fde68a;border-radius:20px;padding:4px 12px;white-space:nowrap;}
.pos-topbalk-rechts{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex:0 0 auto;min-width:48px;}
.pos-module-naam{font-size:16px;font-weight:700;color:#1e293b;letter-spacing:.2px;}
html{margin-top:0!important}#wpadminbar{display:none!important}
.pos-nav-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;flex-shrink:0;border:1.5px solid;text-decoration:none;transition:all .15s;}
.pos-nav-icon-btn:hover{transform:scale(1.08)}

/* ── Klanten ────────────────────────────────────────────── */
html{margin-top:0!important}#wpadminbar{display:none!important}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Calibri','Tahoma','Segoe UI',Arial,sans-serif;background:#f1f5f9;min-height:100vh}

/* Header */



/* Layout */
.kl-wrap{display:flex;height:calc(100vh - 52px);overflow:hidden}

/* Linkerpaneel */
.kl-lijst{width:270px;flex-shrink:0;background:#fff;
          border-right:1px solid #e2e8f0;display:flex;
          flex-direction:column;overflow:hidden}
.kl-zoek-wrap{padding:10px;border-bottom:1px solid #e2e8f0;background:#f8fafc;display:flex;flex-direction:column;gap:6px}
.kl-zoek{width:100%;padding:8px 11px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;font-family:inherit;outline:none}
.kl-zoek:focus{border-color:#6366f1}
.kl-btn{width:100%;padding:8px;border:none;border-radius:8px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit}
.kl-btn-paars{background:#6366f1;color:#fff}
.kl-btn-paars:hover{background:#4f46e5}
.kl-btn-donker{background:#0f3460;color:#c7d2fe}
.kl-btn-donker:hover{background:#1e3a5f}
.kl-items{flex:1;overflow-y:auto}
.kl-item{padding:10px 14px;border-bottom:1px solid #f1f5f9;cursor:pointer;transition:background .1s}
.kl-item:hover{background:#f8fafc}
.kl-item.actief{background:#ede9fe;border-left:3px solid #6366f1}
.kl-item-naam{font-size:13px;font-weight:700;color:#1e293b}
.kl-item-sub{font-size:11px;color:#64748b;margin-top:2px}
.kl-leeg{padding:20px 12px;text-align:center;color:#94a3b8;font-size:12px;line-height:1.5}

/* Rechterpaneel: 2 kolommen */
.kl-dossier{flex:1;overflow-y:auto;padding:16px;
            display:grid;grid-template-columns:360px 1fr;
            gap:14px;align-content:start}
.kl-dossier.leeg{display:flex;align-items:center;justify-content:center}
.kl-placeholder{color:#94a3b8;font-size:15px;text-align:center;line-height:1.8}

/* Kaarten */
.kl-card{background:#fff;border-radius:12px;padding:16px 18px;
         box-shadow:0 1px 4px rgba(0,0,0,.07);margin-bottom:0}
.kl-card-titel{font-size:11px;font-weight:800;color:#64748b;
               text-transform:uppercase;letter-spacing:.5px;
               margin-bottom:12px;padding-bottom:8px;
               border-bottom:1px solid #f1f5f9}

/* Formuliervelden */
.kl-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kl-grid1{display:grid;grid-template-columns:1fr;gap:10px}
.kl-veld{display:flex;flex-direction:column;gap:4px}
.kl-veld label{font-size:11px;font-weight:700;color:#64748b}
.kl-veld input,.kl-veld textarea,.kl-veld select{
    width:100%;padding:8px 10px;border:1.5px solid #e2e8f0;
    border-radius:8px;font-size:13px;font-family:inherit;outline:none}
.kl-veld input:focus,.kl-veld textarea:focus,.kl-veld select:focus{border-color:#6366f1}
.kl-veld textarea{resize:vertical;min-height:54px}
.kl-actie-rij{display:flex;align-items:center;gap:10px;margin-top:12px}
.kl-opsl-btn{padding:9px 20px;background:#6366f1;color:#fff;
             border:none;border-radius:8px;font-size:13px;
             font-weight:800;cursor:pointer;font-family:inherit}
.kl-opsl-btn:hover{background:#4f46e5}
.kl-opsl-btn.groen{background:#16a34a}
.kl-opsl-btn.groen:hover{background:#15803d}
.kl-status-msg{font-size:12px;font-weight:600}
.kl-status-msg.ok{color:#16a34a}
.kl-status-msg.fout{color:#ef4444}

/* Bezoekhistorie */
.kl-bezoek-item{background:#f8fafc;border-radius:10px;padding:11px 14px;
                border-left:3px solid #6366f1;position:relative;margin-bottom:8px}
.kl-bezoek-datum{font-size:11px;font-weight:800;color:#6366f1}
.kl-bezoek-beh{font-size:12px;font-weight:700;color:#1e293b;margin-top:2px}
.kl-bezoek-prijs{font-size:12px;font-weight:700;color:#0f766e;margin-top:3px}
.kl-bezoek-recept{font-size:12px;color:#374151;margin-top:6px;
                  white-space:pre-wrap;border-top:1px solid #e2e8f0;padding-top:6px;
                  line-height:1.5}
.kl-del-btn{position:absolute;top:6px;right:6px;background:#fee2e2;border:none;
            color:#dc2626;font-size:10px;width:18px;height:18px;border-radius:4px;
            cursor:pointer;line-height:1;display:flex;align-items:center;
            justify-content:center;padding:0}
.kl-del-btn:hover{background:#fecaca;color:#b91c1c}

/* Confirm dialog */
.pos-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;
                     display:flex;align-items:center;justify-content:center;
                     font-family:'Calibri','Tahoma','Segoe UI',Arial,sans-serif}
.pos-confirm-box{background:#fff;border-radius:14px;padding:24px 24px 18px;
                 max-width:340px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.pos-confirm-icon{font-size:28px;margin-bottom:10px;text-align:center}
.pos-confirm-tekst{font-size:14px;font-weight:600;color:#1e293b;
                   text-align:center;line-height:1.5;margin-bottom:18px}
.pos-confirm-btns{display:flex;gap:10px;justify-content:center}
.pos-confirm-ja{background:#dc2626;color:#fff;border:none;border-radius:8px;
                padding:9px 22px;font-size:13px;font-weight:800;cursor:pointer;
                font-family:inherit}
.pos-confirm-ja:hover{background:#b91c1c}
.pos-confirm-nee{background:#f1f5f9;color:#374151;border:1px solid #e2e8f0;
                 border-radius:8px;padding:9px 22px;font-size:13px;
                 font-weight:700;cursor:pointer;font-family:inherit}
.pos-confirm-nee:hover{background:#e2e8f0}

/* Nieuw bezoek */
.kl-nieuw-bezoek{background:#f0fdf4;border:1.5px dashed #86efac;
                 border-radius:10px;padding:14px}
.kl-nieuw-bezoek-titel{font-size:11px;font-weight:800;color:#16a34a;
                        text-transform:uppercase;letter-spacing:.5px;
                        margin-bottom:10px}

/* ── Verlof ────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       background: #f8fafc; color: #1e293b; font-size: 14px; }

.vl-shell { display: flex; flex-direction: column; min-height: 100vh; }

/* NAV */
/* .vl-nav vervangen door universele header */
           display: flex; align-items: center; gap: 12px; height: 52px; }
.vl-nav-title { font-weight: 700; font-size: 16px; }
.vl-nav a { color: #94a3b8; text-decoration: none; font-size: 13px; padding: 4px 10px;
             border-radius: 6px; transition: background .15s; }
.vl-nav a:hover { background: #334155; color: #fff; }

/* MAIN */
.vl-main { padding: 20px 16px; max-width: 820px; margin: 0 auto; width: 100%; }

/* KAPPER SELECTIE */
.vl-kapper-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.vl-kapper-btn { padding: 10px 18px; border: 2px solid #e2e8f0; border-radius: 10px;
                  background: #fff; cursor: pointer; font-size: 14px; font-weight: 600;
                  color: #475569; transition: all .15s; }
.vl-kapper-btn.actief { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; }

/* SALDO KAARTEN */
.vl-saldo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
                  gap: 12px; margin-bottom: 20px; }
.vl-saldo-kaart { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
                   padding: 14px; text-align: center; }
.vl-saldo-kaart .s-icon { font-size: 24px; margin-bottom: 4px; }
.vl-saldo-kaart .s-label { font-size: 11px; color: #6b7280; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
.vl-saldo-kaart .s-waarde { font-size: 26px; font-weight: 800; }
.vl-saldo-kaart .s-sub { font-size: 11px; color: #9ca3af; margin-top: 2px; }
.vl-saldo-kaart.rood .s-waarde { color: #dc2626; }
.vl-saldo-kaart.groen .s-waarde { color: #16a34a; }
.vl-saldo-kaart.blauw .s-waarde { color: #2563eb; }
.vl-saldo-kaart.oranje .s-waarde { color: #ea580c; }

/* TABS */
.vl-tabs { display: flex; gap: 2px; margin-bottom: 16px; background: #f1f5f9;
            border-radius: 10px; padding: 3px; }
.vl-tab { padding: 7px 16px; border-radius: 8px; border: none; background: none;
           cursor: pointer; font-size: 13px; color: #64748b; font-weight: 500; }
.vl-tab.actief { background: #fff; color: #1e293b; font-weight: 700;
                  box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* FORMULIER */
.vl-form { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; margin-bottom: 16px; }
.vl-form h3 { font-size: 14px; margin-bottom: 14px; color: #374151; }
.vl-form-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.vl-form-rij.volledig { grid-template-columns: 1fr; }
.vl-label { font-size: 12px; font-weight: 600; color: #6b7280;
             display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .4px; }
.vl-input, .vl-select { width: 100%; padding: 9px 12px; border: 1px solid #e2e8f0;
                          border-radius: 8px; font-size: 14px; color: #1e293b; background: #fff; }
.vl-input:focus, .vl-select:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.vl-soort-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.vl-soort-btn { padding: 8px 6px; border: 2px solid #e2e8f0; border-radius: 8px;
                 background: #fff; cursor: pointer; text-align: center; font-size: 11px;
                 font-weight: 600; color: #475569; transition: all .15s; }
.vl-soort-btn.actief { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; }
.vl-soort-btn .s-ic { font-size: 18px; display: block; margin-bottom: 3px; }

.vl-btn { padding: 10px 20px; border: none; border-radius: 8px; font-size: 14px;
           font-weight: 600; cursor: pointer; transition: all .15s; }
.vl-btn-primary { background: #3b82f6; color: #fff; }
.vl-btn-primary:hover { background: #2563eb; }
.vl-btn-primary:disabled { background: #93c5fd; cursor: not-allowed; }

/* LIJST */
.vl-lijst { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.vl-lijst-item { display: grid; grid-template-columns: auto 1fr auto auto;
                  gap: 12px; padding: 12px 16px; align-items: center;
                  border-bottom: 1px solid #f1f5f9; }
.vl-lijst-item:last-child { border-bottom: none; }
.vl-soort-badge { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.badge-vakantie { background: #dbeafe; color: #1d4ed8; }
.badge-snipper  { background: #fef9c3; color: #854d0e; }
.badge-feestdag { background: #fce7f3; color: #9d174d; }
.badge-overwerk { background: #d1fae5; color: #065f46; }
.badge-meerwerk { background: #ede9fe; color: #5b21b6; }
.badge-correctie { background: #fee2e2; color: #991b1b; }
.vl-status-badge { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.status-aangevraagd { background: #fef9c3; color: #92400e; }
.status-goedgekeurd { background: #dcfce7; color: #15803d; }
.status-afgewezen   { background: #fee2e2; color: #991b1b; }

.vl-leeg { padding: 24px; text-align: center; color: #9ca3af; font-size: 13px; }

/* PIN SCHERM */
.vl-pin-wrap { display: flex; flex-direction: column; align-items: center;
                justify-content: center; min-height: 60vh; gap: 16px; }
.vl-pin-input { font-size: 24px; padding: 12px 20px; border: 2px solid #e2e8f0;
                 border-radius: 12px; text-align: center; width: 160px;
                 letter-spacing: 8px; outline: none; }
.vl-pin-input:focus { border-color: #3b82f6; }

/* MELDING */
.vl-melding { padding: 10px 14px; border-radius: 8px; font-size: 13px;
               font-weight: 600; margin-bottom: 12px; display: none; }
.vl-melding.ok  { background: #dcfce7; color: #15803d; }
.vl-melding.fout { background: #fee2e2; color: #991b1b; }

/* ── Snipperkaart ────────────────────────────────────────────── */
/* ── FIX 5: Reset & Base — licht thema gelijk aan agenda/klanten/verlof ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #f0f2f5; color: #1e293b; font-family: 'Calibri','Tahoma','Segoe UI',Arial,sans-serif; min-height: 100vh; }

/* ── Layout ── */
.snip-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.snip-body { flex: 1; padding: 16px; max-width: 1200px; margin: 0 auto; width: 100%; }

/* ── PIN scherm (FIX 1) ── */
.snip-pin-wrap { display: flex; flex-direction: column; align-items: center;
                 justify-content: center; min-height: 60vh; gap: 16px; }
.snip-pin-input { font-size: 24px; padding: 12px 20px; border: 2px solid #e2e8f0;
                  border-radius: 12px; text-align: center; width: 160px;
                  letter-spacing: 8px; outline: none; background: #fff; color: #1e293b; }
.snip-pin-input:focus { border-color: #6366f1; }
.snip-pin-fout { padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
                 background: #fee2e2; color: #991b1b; display: none; }
.snip-pin-btn { padding: 12px 28px; border-radius: 10px; background: #6366f1; color: #fff;
                border: none; font-size: 15px; font-weight: 700; cursor: pointer; }
.snip-pin-btn:hover { background: #4f46e5; }

/* ── Kapper selectie ── */
.kapper-select-wrap { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.kapper-btn { padding: 10px 18px; border-radius: 10px; border: 2px solid #e2e8f0; background: #fff;
              color: #475569; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s;
              box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.kapper-btn.actief { background: #6366f1; border-color: #6366f1; color: #fff; }
.kapper-btn:active { transform: scale(0.97); }

/* ── Jaar nav ── */
.jaar-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.jaar-btn  { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #e2e8f0;
             background: #fff; color: #475569; font-size: 16px; cursor: pointer;
             display: flex; align-items: center; justify-content: center;
             box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.jaar-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.jaar-label { font-size: 20px; font-weight: 700; color: #1e293b; }

/* ── Saldo kaarten ── */
.saldo-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; align-items: stretch; }
.saldo-kaart { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 14px;
               flex: 1 1 120px; min-width: 100px; max-width: 180px; position: relative; cursor: default;
               box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.saldo-kaart .label { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; white-space: nowrap; }
.saldo-kaart .waarde { font-size: 20px; font-weight: 700; color: #1e293b; }
.saldo-kaart .uitleg {
    display: none; position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    background: #1e293b; color: #e2e8f0;
    border-radius: 9px; padding: 10px 14px;
    font-size: 11.5px; line-height: 1.7;
    white-space: nowrap; z-index: 200; min-width: 220px;
    box-shadow: 0 6px 24px rgba(0,0,0,.22);
    pointer-events: none;
}
/* Pijltje onder tooltip */
.saldo-kaart .uitleg::after {
    content: '';
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1e293b;
}
.saldo-kaart:hover .uitleg { display: block; }
/* Formule-regel in tooltip */
.saldo-kaart .uitleg .tt-formule {
    color: #94a3b8; font-size: 10.5px; margin-top: 4px;
    border-top: 1px solid #334155; padding-top: 4px;
}
/* Gemarkeerde uitkomst */
.saldo-kaart .uitleg .tt-uitkomst {
    color: #34d399; font-weight: 700;
}
.saldo-kaart.groen .waarde { color: #16a34a; }
.saldo-kaart.rood  .waarde { color: #dc2626; }
.saldo-kaart.blauw .waarde { color: #2563eb; }
.saldo-kaart.oranje .waarde { color: #ea580c; }

/* ── Kalender grid ── */
.kalender-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.maand-blok { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
              box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.maand-naam { background: #f1f5f9; padding: 8px 12px; font-size: 13px; font-weight: 700;
              color: #334155; border-radius: 12px 12px 0 0; border-bottom: 1px solid #e2e8f0; }
.dag-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 8px; }
.dag-grid-weeknr { grid-template-columns: 28px repeat(7, 1fr); }
.dag-header { font-size: 9px; color: #94a3b8; text-align: center; font-weight: 700; padding: 2px 0; }
.wk-header { color: #cbd5e1; font-size: 8px; font-weight: 700; text-align: center; padding: 2px 0; }
.dag-cel.wk-cel { aspect-ratio: unset; background: transparent; border: none; cursor: default;
    font-size: 8px; color: #cbd5e1; font-weight: 700; text-align: center; justify-content: center;
    align-items: center; border-radius: 0; padding: 0; pointer-events: none; }
.dag-cel.wk-cel:hover { transform: none; border-color: transparent; }
.dag-cel { aspect-ratio: 1; border-radius: 6px; display: flex; flex-direction: column;
           align-items: center; justify-content: center; font-size: 12px; cursor: pointer;
           border: 1.5px solid transparent; transition: all .12s; position: relative; min-height: 36px; }
.dag-cel.leeg { cursor: default; }
.dag-cel:not(.leeg):hover { border-color: #6366f1; transform: scale(1.08); z-index: 2; }
.dag-cel.in-range { background: rgba(22,163,74,0.15) !important; border-color: #16a34a; }
.dag-cel.range-start,
.dag-cel.range-end { background: #16a34a !important; color: #fff !important; border-color: #16a34a; }
.dag-cel:not(.leeg):active { transform: scale(0.97); }
.dag-cel.vandaag { border-color: #6366f1 !important; background: #eef2ff; }

/* ── Dag type kleuren ── */
.dag-cel.vacation   { background: #16a34a; color: #fff; }
.dag-cel.snipper    { background: #1d4ed8; color: #fff; }
.dag-cel.meerwerk   { background: #fed7aa; color: #7c2d12; border-color: #fb923c; }
.dag-cel.overwerk   { background: #dc2626; color: #fff; }
.dag-cel.correction { background: #0891b2; color: #fff; }
.dag-cel.verzuim    { background: #9ca3af; color: #fff; border-color: #6b7280; }
.dag-cel.schoolvakantie { background: #bfdbfe; color: #1e40af; border-color: #93c5fd; }
.dag-cel.rejected   { opacity: 0.35; }
.dag-cel.leeg       { background: transparent; }
.dag-cel.vrij       { background: #f8fafc; color: #94a3b8; }
.dag-cel.zondag     { background: #e5e7eb; color: #6b7280; border-color: #d1d5db; }
.dag-cel.feestdag   { background: #fde68a; color: #78350f; border-color: #f59e0b; }

/* Goedgekeurd: geel hoekje rechtsboven */
.dag-cel.goedgekeurd::after {
    content: '';
    position: absolute; top: 0; right: 0;
    width: 0; height: 0; border-style: solid;
    border-width: 0 11px 11px 0;
    border-color: transparent #fbbf24 transparent transparent;
}

/* ── Modal ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 1000;
                 display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; width: 100%;
             max-width: 440px; padding: 24px; max-height: 90vh; overflow-y: auto;
             box-shadow: 0 20px 60px rgba(0,0,0,.15); }
.modal-box h3 { font-size: 18px; margin-bottom: 16px; color: #1e293b; }
.modal-close { float: right; background: none; border: none; color: #94a3b8; font-size: 22px; cursor: pointer; padding: 0 4px; }

/* ── Form elementen ── */
.snip-form .row { margin-bottom: 14px; }
.snip-form label { display: block; font-size: 12px; color: #64748b; margin-bottom: 5px; font-weight: 600; }
.snip-form select,
.snip-form input[type=number],
.snip-form textarea { width: 100%; background: #f8fafc; border: 1.5px solid #e2e8f0;
                      border-radius: 8px; color: #1e293b; padding: 10px 12px; font-size: 15px; appearance: none; }
.snip-form select:focus,
.snip-form input:focus,
.snip-form textarea:focus { outline: none; border-color: #6366f1; background: #fff; }
.snip-form textarea { min-height: 70px; resize: vertical; }

/* ── Type knoppen ── */
.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.type-btn { padding: 10px 8px; border-radius: 8px; border: 1.5px solid #e2e8f0; background: #f8fafc;
            color: #374151; font-size: 12px; font-weight: 600; cursor: pointer; text-align: center; transition: all .12s; }
.type-btn[data-type="snipper"]  { border-left: 3px solid #007aff; }
.type-btn[data-type="vacation"] { border-left: 3px solid #34c759; }
.type-btn[data-type="meerwerk"] { border-left: 3px solid #ff9500; }
.type-btn[data-type="overwerk"] { border-left: 3px solid #ff3b30; }
.type-btn[data-type="verzuim"]  { border-left: 3px solid #9ca3af; color: #6b7280; }
.type-btn.selected { border-color: #6366f1; background: #eef2ff; color: #4f46e5; }
.type-btn[data-type="snipper"].selected  { border-color: #007aff; background: #e8f2ff; color: #007aff; }
.type-btn[data-type="vacation"].selected { border-color: #34c759; background: #eafbee; color: #1a7a35; }
.type-btn[data-type="meerwerk"].selected { border-color: #ff9500; background: #fff4e5; color: #c26a00; }
.type-btn[data-type="overwerk"].selected { border-color: #ff3b30; background: #fff0ee; color: #cc1a10; }
.type-btn[data-type="verzuim"].selected  { border-color: #9ca3af; background: #f3f4f6; color: #4b5563; }
.type-btn.selected { border-color: #6366f1; background: #eef2ff; color: #4f46e5; }

/* ── Overwerk warning ── */
.overwerk-warn { background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px;
                 padding: 10px 12px; font-size: 13px; color: #92400e; margin-bottom: 12px; }
.overwerk-warn.verberg { display: none; }

/* ── Actieknoppen ── */
.btn-opslaan  { width: 100%; padding: 14px; border-radius: 10px; background: #6366f1; color: #fff;
                border: none; font-size: 16px; font-weight: 700; cursor: pointer; }
.btn-opslaan:hover { background: #4f46e5; }
.btn-opslaan:active { transform: scale(0.98); }
.btn-verwijder { width: 100%; padding: 11px; border-radius: 10px; background: transparent;
                 color: #dc2626; border: 1.5px solid #dc2626; font-size: 14px; cursor: pointer; margin-top: 8px; }
.btn-verwijder:hover { background: #fef2f2; }

/* ── Correctie link ── */
.correctie-link { font-size: 12px; color: #6366f1; cursor: pointer; text-decoration: underline; margin-top: 10px; display: inline-block; }

/* ── Vergrendelde cellen ── */
.dag-cel.historisch { cursor: not-allowed; opacity: 0.6; }
.dag-cel.historisch:hover { transform: none !important; border-color: transparent !important; }
.dag-cel.feestdag  { background: #fde68a !important; color: #78350f !important;
                     cursor: not-allowed !important;
                     border: 1.5px solid #f59e0b !important;
                     box-shadow: inset 0 2px 5px rgba(0,0,0,.18), inset 0 1px 2px rgba(0,0,0,.12) !important; }
.dag-cel.feestdag:hover { transform: none !important; border-color: #d97706 !important; }
.dag-cel.feestdag::before { content: '🎉'; position: absolute; top: 1px; left: 2px; font-size: 7px; line-height: 1; }
.dag-cel.historisch.vacation,
.dag-cel.historisch.snipper,
.dag-cel.historisch.meerwerk,
.dag-cel.historisch.overwerk,
.dag-cel.historisch.correction { opacity: 0.75; }
.dag-cel.historisch.ingevuld::before { content: '🔒'; position: absolute; top: 1px; right: 2px; font-size: 7px; line-height: 1; }

/* ── Geen contract ── */
.geen-contract { background: #f8fafc; border: 2px dashed #e2e8f0; border-radius: 12px; padding: 40px; text-align: center; color: #94a3b8; }

/* ── Legend ── */
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.legend-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #64748b; }
.legend-dot { width: 14px; height: 14px; border-radius: 4px; }
.legend-dot.vacation   { background: #16a34a; }
.legend-dot.snipper    { background: #1d4ed8; }
.legend-dot.meerwerk   { background: #fed7aa; border: 1.5px solid #fb923c; }
.legend-dot.overwerk   { background: #dc2626; }
.legend-dot.correction { background: #0891b2; }
.legend-dot.goedgekeurd{ background: #fbbf24; }

/* ── Verzamelkalender ── */
.verzamel-sectie { margin-bottom: 28px; }
.verzamel-sectie h3 { font-size: 15px; font-weight: 700; color: #334155; margin-bottom: 12px; }
.dag-cel .balkjes { display: flex; gap: 1px; justify-content: center; flex-wrap: wrap;
                    position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); }
.dag-balk { width: 6px; height: 3px; border-radius: 1px; }

/* ── Loading ── */
.snip-loading { text-align: center; padding: 60px; color: #94a3b8; font-size: 16px; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .saldo-grid { flex-wrap: wrap; }
    .kalender-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
    .kalender-grid { grid-template-columns: 1fr; }
}

/* ── Agenda ────────────────────────────────────────────── */

*{box-sizing:border-box;margin:0;padding:0}
html,body{
    background:#eef2f8;
    font-family:'Calibri','Tahoma','Segoe UI',Arial,sans-serif !important;
    font-size:13px;color:#1d2d50;height:100%
}

/* Header — gradient zoals Kassa */
/* .ag-header vervangen door universele header */
.ag-nav{display:flex;align-items:center;gap:5px}
.ag-nav a{
    background:rgba(255,255,255,.12);color:#e0e7ff;border-radius:8px;
    padding:6px 11px;text-decoration:none;font-size:12px;font-weight:700;
    white-space:nowrap;border:1px solid rgba(255,255,255,.08);
    transition:background .15s
}
.ag-nav a:hover{background:rgba(255,255,255,.22);color:#fff}
.ag-date-lbl{font-size:13px;font-weight:800;color:#c7d2fe;white-space:nowrap}
.ag-date-input{
    background:#f8fafc;border:1.5px solid #e2e8f0;
    color:#1e293b;border-radius:12px;padding:5px 10px;font-size:12px;cursor:pointer;
    font-family:inherit
}
.ag-btn-nieuw{
    background:#fff;
    color:#007aff;border:1.5px solid #007aff;border-radius:22px;padding:7px 18px;
    font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;
    box-shadow:0 1px 4px rgba(0,0,0,.10);transition:all .15s
}
.ag-btn-nieuw:hover{background:#e8f2ff;box-shadow:0 2px 8px rgba(0,122,255,.2)}
.ag-btn-nieuw.twijfel{background:#e5e7eb !important;color:#c0392b !important;border-color:#e5e7eb !important;box-shadow:none !important}
.ag-btn-nieuw.twijfel:hover{background:#d1d5db !important}

/* PIN scherm */
.ag-pin{display:flex;flex-direction:column;align-items:center;justify-content:center;
        min-height:80vh;gap:14px}
.ag-pin h2{font-size:20px;font-weight:800}
.ag-pin input{padding:13px;font-size:22px;text-align:center;letter-spacing:8px;
              border:2px solid #ddd;border-radius:12px;width:160px;outline:none}
.ag-pin input:focus{border-color:#6366f1}
.ag-pin button{background:#6366f1;color:#fff;border:none;border-radius:12px;padding:12px 32px;
               font-size:14px;font-weight:800;cursor:pointer;width:160px}
.ag-pin .err{color:#b5405a;font-size:12px;min-height:16px}

/* Rooster */
/* ag-wrap wordt via .ag-pagina flex-kind beheerd */

/* ── GRID: header + body in dezelfde kolombreedte ─────────────── */
/* grid-template-columns wordt via PHP inline gezet op .ag-outer  */
.ag-outer{display:grid;min-width:600px}

/* Header-cellen — span 1 kolom elk */
.ag-head-time{background:#eef4fc;border-bottom:2px solid #c8d9ee;
              grid-row:1;position:sticky;top:0;z-index:51}
.ag-head-kapper{
    padding:10px 6px;text-align:center;
    font-size:12px;font-weight:800;color:#1d4e89;
    border-left:1px solid #dae4f0;background:linear-gradient(180deg,#f0f6ff 0%,#e8f0fa 100%);
    border-bottom:3px solid #3a7fd5;
    grid-row:1;position:sticky;top:0;z-index:51;letter-spacing:.3px
}
.ag-head-notitie{padding:0;
                 border-left:2px dashed #c8d9ee;background:#eef4ff;
                 border-bottom:2px solid #3a7fd5;
                 grid-row:1;position:sticky;top:0;z-index:51;
                 overflow:hidden}
.ag-head-notitie textarea{
    display:block;width:100%;height:100%;min-height:36px;
    resize:none;border:none;outline:none;background:transparent;
    font:700 11px/1.4 inherit;color:#1e293b;
    padding:6px 8px;box-sizing:border-box}
.ag-head-notitie textarea:focus{background:rgba(251,191,36,.12)}
.ag-head-notitie textarea::placeholder{color:#b45309;font-weight:600;font-style:italic}

/* Body-kolommen — zitten op grid-row:2 */
.ag-times{grid-row:2;}
.ag-kapper-body{grid-row:2;position:relative;
                overflow:visible}

/* Notitie kolom */
.ag-notitie-col{grid-row:2;position:relative;
                border-left:2px dashed #c8d9ee;background:#f5f9ff;
                overflow:hidden}

/* Tijdkolom */
.ag-times{width:52px;flex-shrink:0}
              justify-content:flex-end;padding-right:6px;color:#88a4c0;font-size:10px;
              border-bottom:1px solid transparent;user-select:none}
.ag-time-cell.uur{color:#2c5282;font-weight:700;font-size:11px;border-top:1px solid #c8d9ee;border-bottom-color:transparent}
.ag-time-cell.half{border-top:none;border-bottom-color:transparent}

/* Kapperkolom */
.ag-kapper-body{flex:1;min-width:120px;position:relative;background:#fff;display:flex;flex-direction:column;gap:0;font-size:0;line-height:0}
/* Notitie kolom — zelfde structuur als kapperkolom */
.ag-notitie-col{width:180px;flex-shrink:0;position:relative;
               border-left:2px dashed #c8d9ee;background:#f5f9ff;
               box-sizing:border-box}
.ag-head-notitie{width:180px;flex-shrink:0;padding:8px 6px;text-align:center;
                font-size:11px;font-weight:800;color:#1d4e89;
                border-left:2px dashed #c8d9ee;background:#eef4ff;
                box-sizing:border-box}
/* Dag-notitie tekstvak bovenaan */
/* Notitie-blok: 5 regels per uur-markering */
.ag-nblok{
    background:#f5f9ff;position:relative;
    overflow:hidden;box-sizing:border-box;
    border-top:1px solid #d4e4f4}
.ag-nblok.uur{border-top:2px solid #3a7fd5}
.ag-nblok.buiten-werk{background:#d4dde3}
.ag-nblok-tijd{display:none}
.ag-nblok-regels{display:flex;flex-direction:column;gap:1px}
.ag-nregel{width:100%;height:100%;border:none;background:transparent;resize:none;overflow:hidden;font-size:10px;color:#2c5282;padding:1px 2px;box-sizing:border-box}
.ag-nregel:focus{background:rgba(58,127,213,.10);border-bottom-color:#3a7fd5;height:auto}
.ag-nregel::placeholder{color:#d4a017;font-size:9px}
/* Dag-notitie bovenin (compact) */
.ag-notitie-dag-tekst{width:100%;border:none;background:rgba(251,191,36,.15);
                      border-bottom:2px solid #fde68a;resize:none;
                      font-size:11px;color:#374151;padding:5px 7px;
                      font-family:inherit;line-height:1.4;height:36px;
                      box-sizing:border-box}
.ag-notitie-dag-tekst:focus{outline:none;background:rgba(251,191,36,.25);height:auto}
/* Slots in notitie kolom */
/* ── BEZETTINGS MINI-PANEEL ─────────────────────────────────────────── */
.ag-pagina{
    display:flex;flex-direction:row;
    flex:1;min-width:0;
    overflow:hidden;
}

/* ── Mini-kalender zijkolom ── */
.ag-zijkolom{
    width:172px;flex-shrink:0;
    background:#f0f5fc;
    border-right:1px solid #d0dff0;
    display:flex;flex-direction:column;
    padding:10px 8px;gap:8px;
    overflow-y:auto;
}
.ag-zij-vandaag{
    display:block;text-align:center;
    background:#22c55e;color:#fff;
    font-size:12px;font-weight:800;
    border-radius:20px;padding:6px 0;
    text-decoration:none;
    box-shadow:0 2px 8px rgba(34,197,94,.3);
    transition:all .15s;
}
.ag-zij-vandaag:hover{background:#16a34a}
.ag-zij-vandaag-actief{
    display:block;text-align:center;
    background:#dcfce7;color:#16a34a;
    border:1.5px solid #86efac;
    font-size:12px;font-weight:800;
    border-radius:20px;padding:6px 0;
}
.ag-mk-maand{margin-bottom:4px}
.ag-mk-maand-nm{
    font-size:11px;font-weight:800;color:#1d4e89;
    text-align:center;padding:4px 0 6px;
    letter-spacing:.3px;text-transform:uppercase;
}
.ag-mk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.ag-mk-dh{font-size:8px;font-weight:700;color:#88a4c0;text-align:center;padding:2px 0}
.ag-mk-leeg{height:22px}
.ag-mk-dag{
    height:22px;display:flex;align-items:center;justify-content:center;
    font-size:10px;font-weight:500;color:#2c5282;
    text-decoration:none;border-radius:5px;transition:all .1s;
}
.ag-mk-dag:hover{background:#daeeff;color:#1a3a6e}
.ag-mk-dag.weekend{color:#94a3b8}
.ag-mk-dag.vandaag{background:#e0edff;color:#1d4e89;font-weight:800;box-shadow:inset 0 0 0 1.5px #3a7fd5}
.ag-mk-dag.actief{background:#3a7fd5;color:#fff;font-weight:800;box-shadow:0 2px 6px rgba(58,127,213,.35)}
.ag-mk-dag.actief.vandaag{background:#2563eb}
.ag-zij-week-knoppen{
    display:flex;flex-direction:column;gap:4px;
    border-top:1px solid #c8d9ee;padding-top:8px;margin-top:4px;
}
.ag-zij-week-btn{
    display:block;text-align:center;
    background:#fff;border:1.5px solid #c8d9ee;
    color:#2c5282;font-size:11px;font-weight:700;
    border-radius:8px;padding:5px 0;
    text-decoration:none;transition:all .12s;
}
.ag-zij-week-btn:hover{background:#3a7fd5;color:#fff;border-color:#3a7fd5}
.ag-wrap{
    flex:1 1 auto;
    overflow:auto;
    position:relative;
    min-width:0;
}
.ag-mini-paneel{
    flex:0 0 auto;
    display:flex;flex-direction:row;
    width:auto;
    background:#f1f5f9;
    border-left:2px solid #e2e8f0;
    overflow:hidden;        /* NOOIT scrollen */
    height:100%;
}
.ag-mini-kol{
    width:26px;
    display:flex;flex-direction:column;
    border-left:1px solid #e2e8f0;
}
.ag-mini-kol-header{
    height:36px;flex-shrink:0;  /* zelfde hoogte als kapper-header in grid */
    background:#f8fafc;
    border-bottom:2px solid #6366f1;
    display:flex;align-items:center;justify-content:center;
    font-size:8px;font-weight:900;color:#334155;
    writing-mode:vertical-rl;text-orientation:mixed;
    letter-spacing:.5px;
}
.ag-mini-kol-body{
    flex:1 1 0;          /* 0 = niet groeien buiten de container */
    min-height:0;        /* voorkomt dat flex-kind de parent oprekt */
    position:relative;
    overflow:hidden;     /* nooit scrollen */
    background:#fff;
}
.ag-werktijd-balk{
    position:sticky;bottom:0;z-index:50;
    background:#f8fafc;border-top:2px solid #e2e8f0;
    display:flex;flex-direction:row;
    align-items:center;
    min-height:36px;flex-shrink:0;
}
.ag-werktijd-balk-tijd{
    width:52px;flex-shrink:0;
    font-size:9px;color:#94a3b8;
    text-align:center;
}
.ag-werktijd-cel{
    flex:1;display:flex;align-items:center;justify-content:center;
    border-left:1px solid #e2e8f0;height:36px;
    font-size:11px;gap:4px;
}
.ag-werktijd-cel label{cursor:pointer;display:flex;align-items:center;gap:4px;
    color:#475569;font-size:10px;font-weight:600;user-select:none}
.ag-werktijd-cel input[type=checkbox]{width:14px;height:14px;cursor:pointer;accent-color:#22c55e}
.ag-werktijd-cel.werkt-niet{background:#fef2f2}
.ag-werktijd-cel.werkt-wel{background:#f0fdf4}
.ag-werktijd-cel{flex-wrap:nowrap;gap:2px;padding:0 2px;overflow:hidden}
.wt-chk-label{display:flex;align-items:center;gap:2px;cursor:pointer;flex-shrink:0}
.wt-tijden{display:flex;align-items:center;gap:2px;flex-shrink:0}
.wt-sel{font-size:10px;padding:3px 2px;border:1px solid #cbd5e1;border-radius:4px;
    background:#fff;color:#334155;cursor:pointer;max-width:52px;min-height:28px}
@media (hover:none){
    .wt-sel{font-size:12px;padding:6px 4px;min-height:36px;min-width:52px}
}
.ag-werktijd-notitie{width:180px;flex-shrink:0;border-left:1px solid #e2e8f0;
    display:flex;align-items:center;justify-content:center;
    font-size:10px;color:#94a3b8}
.ag-pauze-balk{
    display:flex;flex-direction:row;align-items:center;
    background:#fafbfc;border-top:1px dashed #cbd5e1;
    min-height:30px;flex-shrink:0;
}
.ag-pauze-tijd-col{
    width:52px;flex-shrink:0;font-size:11px;
    color:#94a3b8;text-align:center;
}
.ag-pauze-cel{
    flex:1;display:flex;align-items:center;justify-content:center;
    border-left:1px solid #e2e8f0;height:30px;gap:3px;
}
.ag-pauze-leeg{background:repeating-linear-gradient(
    135deg,#e8eaee 0,#e8eaee 2px,#f0f2f5 2px,#f0f2f5 8px)}
.ag-pauze-notitie{width:180px;flex-shrink:0;border-left:1px solid #e2e8f0;
    display:flex;align-items:center;justify-content:center;
    font-size:10px;color:#94a3b8}
.ag-mini-grijs{
    position:absolute;left:0;right:0;
    background:#d4dde3;
    z-index:1;
}
.ag-mini-pauze{
    position:absolute;left:0;right:0;
    background:rgba(148,163,184,.34);
    border-top:1px solid rgba(100,116,139,.28);
    border-bottom:1px solid rgba(100,116,139,.28);
    z-index:3;
    pointer-events:none;
}
.ag-mini-blok{
    position:absolute;left:2px;right:2px;
    border-radius:2px;min-height:2px;
    opacity:.88;z-index:2;
}
.ag-notitie-col .ag-slot{background:#f5f9ff;overflow:visible}
.ag-notitie-col .ag-slot:hover{background:#e0eeff}
.ag-notitie-col .ag-slot.buiten-werk{background:#d4dde3}
/* Afspraak-plakken knopje in notitie-kolom */
.ag-nblok-plak{position:absolute;right:2px;top:2px;background:none;border:none;
               font-size:9px;cursor:pointer;color:#b45309;opacity:0;padding:0;line-height:1}
.ag-nblok:hover .ag-nblok-plak{opacity:.5}
.ag-nblok-plak:hover{opacity:1!important;color:#d97706}
/* Werktijd = WIT, buiten werktijd = grijs — 3 duidelijke niveaus */
.ag-slot{cursor:pointer;position:relative;transition:background .1s;background:transparent;display:block;margin:0;padding:0;outline:0;box-sizing:border-box;flex-shrink:0;border-top:1px solid rgba(0,0,0,0.04)}
.ag-slot:hover{background:rgba(59,130,246,0.08);z-index:5}
.ag-slot.drag-target{
    outline:2px solid #3a7fd5;
    outline-offset:-2px;
    background:#daeeff;
    z-index:6}
.ag-slot.uur{border-top:1px solid rgba(0,0,0,0.12)}
.ag-slot.half{border-top:1px solid rgba(0,0,0,0.07)}
.ag-kapper-body .ag-slot:first-of-type{border-top:none}

/* Buiten werktijd kapper = duidelijk donkerder grijs */
.ag-slot.buiten-werk{background:#d4dde3 !important;cursor:default;border-top:none !important;outline:none !important;box-shadow:none !important}
.ag-slot.buiten-werk:hover{background:#ccd6dd}
.ag-slot.buiten-werk.uur{border:none !important}
/* Buiten salon-uren = nog donkerder (admin gebied) */
.ag-slot.buiten-salon{background:#d4dde3 !important;cursor:default;border-top:none !important;outline:none !important;box-shadow:none !important}
.ag-slot.buiten-salon:hover{background:#ccd6dd}
/* Slot hover-keuzemenu */
.ag-slot-menu{display:none;position:absolute;top:2px;left:2px;right:2px;z-index:200;padding:0}
.ag-slot-menu.open{display:block}
/* Wit slot → blauwe tekst, witte knop */
.ag-slot-menu-item{display:block;width:100%;padding:4px 8px;
    border:1.5px solid #3a7fd5;border-radius:6px;
    background:#fff;color:#1d4ed8;
    font-size:11px;font-weight:700;cursor:pointer;text-align:center;
    white-space:nowrap;line-height:1.4}
.ag-slot-menu-item:hover{background:#eff6ff;border-color:#1d4ed8}
/* Grijs slot (buiten werktijd, pauze, kapper vrij) → rode tekst, grijze knop */
.ag-slot.buiten-werk .ag-slot-menu-item,
.ag-slot.buiten-salon .ag-slot-menu-item,
.ag-kapper-body.kapper-vrij .ag-slot .ag-slot-menu-item {
    border-color:#9ca3af;background:#f3f4f6;color:#dc2626}
.ag-slot.buiten-werk .ag-slot-menu-item:hover,
.ag-slot.buiten-salon .ag-slot-menu-item:hover,
.ag-kapper-body.kapper-vrij .ag-slot .ag-slot-menu-item:hover {background:#e5e7eb}

/* Werkuren overlay: laat zien waar de kapper werkt */
.ag-werkuren-overlay{
    position:absolute;left:0;right:0;
    border-top:2px solid rgba(99,102,241,.6);
    border-bottom:2px solid rgba(99,102,241,.6);
    background:rgba(99,102,241,.03);
    pointer-events:none;z-index:1
}

/* Absolute grijze overlay vóór en ná werktijd — dekt slot-borders volledig af */
.ag-buiten-werk-overlay{
    position:absolute;left:0;right:0;
    background:#d4dde3;
    pointer-events:none;
    z-index:4;  /* onder pauze (z-index:5) maar boven slots */
}

/* Afspraken */
.ag-pauze-blok{
    position:absolute;left:0;right:0;z-index:5;
    /* Donkerder diagonaal patroon — duidelijk onderscheid van werktijd */
    background:#d4dde3;
    border:none;
    pointer-events:none;
    display:flex;align-items:center;justify-content:center;
}
.ag-pauze-blok-label{
    font-size:10px;color:#78909c;font-weight:600;
    background:rgba(255,255,255,.7);padding:1px 6px;border-radius:10px;
}
.ag-afspraak{
    position:absolute;left:3px;right:3px;border-radius:10px;
    padding:5px 8px 18px;overflow:hidden;cursor:pointer;z-index:10;box-sizing:border-box;
    box-shadow:0 2px 8px rgba(60,100,160,.18),0 1px 2px rgba(0,0,0,.08);
    border-left:4px solid rgba(255,255,255,.35);user-select:none;
    display:flex;flex-direction:column
}
.ag-afspraak:hover{filter:brightness(1.08);box-shadow:0 4px 16px rgba(60,100,160,.28),0 2px 4px rgba(0,0,0,.10);transform:translateY(-1px)}
.ag-afsp-vergrendeld{opacity:.72;cursor:default !important}
.ag-afsp-vergrendeld::after{
    content:"🔒";position:absolute;top:3px;right:28px;
    font-size:10px;opacity:.7;
}
.ag-afsp-vergrendeld .ag-resize-handle,
.ag-afsp-vergrendeld .ag-resize-handle-top,
.ag-afsp-vergrendeld .ag-afsp-btn-move,
.ag-afsp-vergrendeld .ag-afsp-btn-edit,
.ag-afsp-vergrendeld .ag-afsp-btn-del{display:none !important}
/* Naam klikbaar ook bij vergrendeld */
.ag-afsp-naam{cursor:pointer}
.ag-afsp-naam:hover{background:rgba(255,255,255,.12);border-radius:3px}
/* Klant gegevens mini-popup */
#ag-klant-popup{
    position:fixed;z-index:99999;
    background:#fff;border-radius:12px;
    box-shadow:0 8px 32px rgba(0,0,0,.22);
    padding:16px;width:280px;
    border:1.5px solid #e2e8f0;
    font-family:inherit;
}
#ag-klant-popup label{display:block;font-size:11px;color:#64748b;margin-bottom:2px;font-weight:600}
#ag-klant-popup input{width:100%;box-sizing:border-box;border:1.5px solid #e2e8f0;border-radius:6px;padding:7px 10px;font-size:13px;margin-bottom:8px;font-family:inherit}
#ag-klant-popup input:focus{outline:none;border-color:#6366f1}
#ag-klant-popup .ag-kp-titel{font-size:13px;font-weight:700;color:#1e293b;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
#ag-klant-popup .ag-kp-footer{display:flex;gap:8px;margin-top:4px}
#ag-klant-popup .ag-kp-opslaan{flex:1;background:#6366f1;color:#fff;border:none;border-radius:8px;padding:8px;font-size:13px;font-weight:700;cursor:pointer}
#ag-klant-popup .ag-kp-sluiten{background:#f1f5f9;color:#475569;border:none;border-radius:8px;padding:8px 12px;font-size:13px;cursor:pointer}
#ag-klant-popup .ag-kp-naar-kaart{font-size:11px;color:#6366f1;text-decoration:none;display:block;text-align:center;margin-top:8px;cursor:pointer;border-top:1px solid #f1f5f9;padding-top:8px}
.ag-afspraak.resizing{opacity:.85;z-index:50}
/* Vandaag-knop */
.ag-nav-vandaag{background:#22c55e !important;color:#fff !important;font-weight:800 !important}
.ag-nav-vandaag:hover{background:#16a34a !important}
.ag-nav-week{background:rgba(255,255,255,.12) !important;color:#c7d2fe !important;
             font-size:12px !important;font-weight:700 !important;
             padding:5px 10px !important;border-radius:8px !important}
.ag-nav-week:hover{background:rgba(255,255,255,.22) !important;color:#fff !important}
.ag-btn-kassa{background:#374151;color:#fff;border-radius:8px;padding:7px 12px;
              font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap;
              display:inline-flex;align-items:center;gap:4px}
.ag-btn-kassa:hover{background:#4b5563;color:#fff}

/* Resize handles */
.ag-resize-handle{position:absolute;bottom:0;left:0;right:0;height:8px;
                  cursor:ns-resize;display:flex;align-items:center;
                  justify-content:center;z-index:15}
.ag-resize-handle::after{content:'';width:24px;height:2px;background:rgba(255,255,255,.6);
                         border-radius:2px;box-shadow:0 -3px 0 rgba(255,255,255,.6)}
.ag-resize-handle-top{position:absolute;top:0;left:0;right:0;height:8px;
                      cursor:ns-resize;display:flex;align-items:center;
                      justify-content:center;z-index:15}
.ag-resize-handle-top::after{content:'';width:24px;height:2px;background:rgba(255,255,255,.6);
                              border-radius:2px;box-shadow:0 3px 0 rgba(255,255,255,.6)}

/* Afspraak actie-knoppen (kopiëren + verwijderen) */
.ag-afsp-actions{position:absolute;top:2px;right:2px;display:none;
                 flex-direction:row;gap:2px;z-index:20}
.ag-afspraak:hover .ag-afsp-actions{display:flex}
.ag-afsp-btn{width:18px;height:18px;border-radius:4px;border:none;
             cursor:pointer;display:flex;align-items:center;justify-content:center;
             font-size:10px;line-height:1;padding:0;flex-shrink:0}
.ag-afsp-btn-move{background:rgba(255,255,255,.15);color:#fff;cursor:grab;
    font-size:16px;padding:6px 10px;min-width:36px;min-height:36px;
    display:flex;align-items:center;justify-content:center;
    touch-action:none;-webkit-user-select:none;user-select:none}
.ag-afsp-btn-move:active{cursor:grabbing;background:rgba(255,255,255,.5)}
.ag-afsp-btn-move:hover{background:rgba(255,255,255,.45);transform:scale(1.2)}
@media (hover:none){
    /* Tablet: altijd zichtbaar, groter touch target */
    .ag-afsp-actions{display:flex !important}
    .ag-afsp-btn-move{min-width:44px;min-height:44px;font-size:18px}
}
.ag-afsp-btn-edit{background:rgba(255,255,255,.28);color:#fff;font-weight:900}
.ag-afsp-btn-edit:hover{background:rgba(255,255,255,.55);transform:scale(1.12)}
.ag-afsp-btn-del{background:rgba(220,38,38,.7);color:#fff}
.ag-afsp-btn-del:hover{background:rgba(220,38,38,1)}
/* Sleep-preview */
.ag-drag-ghost{position:fixed;pointer-events:none;z-index:500;
               border-radius:6px;padding:4px 8px;font-size:11px;
               font-weight:800;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.4);
               opacity:.88;white-space:nowrap;transform:translate(-50%,-50%)}
.ag-kapper-body.drag-over{outline:2px dashed #3a7fd5;outline-offset:-2px}
.ag-kapper-body.kapper-vrij{background:#d4dde3;box-shadow:3px 0 8px rgba(0,0,0,0.10) !important}
.ag-kapper-body.kapper-vrij .ag-slot{background:#d4dde3 !important;border-top:none !important;outline:none !important;box-shadow:none !important}
.ag-kapper-body.kapper-vrij .ag-slot:hover{background:#ccd6dd !important}
.ag-kapper-body.kapper-vrij .ag-slot.buiten-werk{background:#d4dde3 !important}
.ag-afsp-naam{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;
              overflow:hidden;text-overflow:ellipsis;line-height:1.35;
              text-shadow:none;
              letter-spacing:-.1px;font-family:-apple-system,'SF Pro Text','Segoe UI','Calibri',Arial,sans-serif}
.ag-afsp-product{font-size:11px;font-weight:400;color:rgba(255,255,255,.85);white-space:nowrap;
                 overflow:hidden;text-overflow:ellipsis;letter-spacing:0;font-family:-apple-system,'SF Pro Text','Segoe UI','Calibri',Arial,sans-serif}
.ag-afsp-notitie{font-size:9px;color:rgba(255,255,255,.6);font-style:italic;
                 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.ag-afsp-footer{display:flex;justify-content:space-between;align-items:center;
                position:absolute;bottom:0;left:0;right:0;height:18px;padding:2px 6px 3px;box-sizing:border-box;
                background:linear-gradient(to top,rgba(0,0,0,.26),rgba(0,0,0,.10),rgba(0,0,0,0))}
.ag-afsp-tijd{font-size:10px;font-weight:400;color:rgba(255,255,255,.8);line-height:1.2;font-family:-apple-system,'SF Pro Text','Segoe UI','Calibri',Arial,sans-serif}
.ag-afsp-duur{display:inline-flex;align-items:center;justify-content:center;min-width:34px;
              font-size:10px;font-weight:700;color:rgba(255,255,255,.90);line-height:1.2;
              background:rgba(0,0,0,.18);border-radius:999px;padding:2px 7px;
              letter-spacing:.2px;font-family:-apple-system,'SF Pro Text','Segoe UI','Calibri',Arial,sans-serif}
.ag-afsp-duur.verlengd{background:#dc2626 !important;color:#fff !important;font-weight:800;opacity:1}
.ag-afsp-duur.verkort{background:#16a34a !important;color:#fff !important;font-weight:800;opacity:1}

/* Nu-lijn */
/* Nu-lijn: absoluut binnen .ag-kapper-body, loopt door alle kolommen */
.ag-nu-lijn{
    position:absolute;
    left:0;right:0;
    height:2px;
    background:#e53e3e;
    box-shadow:0 0 10px rgba(229,62,62,.5),0 0 3px rgba(229,62,62,.8);
    z-index:25;
    pointer-events:none;
}
.ag-nu-lijn::before{
    content:'';
    position:absolute;
    left:-5px;top:-4px;
    width:10px;height:10px;
    border-radius:50%;
    background:#ef4444;
    box-shadow:0 0 8px rgba(239,68,68,.7);
}
.ag-nu-lijn::after{
    content:attr(data-tijd);
    position:absolute;
    left:2px;top:-9px;
    font-size:9px;font-weight:800;
    color:#fff;background:#ef4444;
    padding:0 4px;border-radius:3px;
    line-height:15px;white-space:nowrap;
}

/* Modal */
.ag-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;
            align-items:center;justify-content:center;padding:16px}
.ag-overlay.open{display:flex}
.ag-modal{
    background:#fff;border-radius:12px;padding:12px;width:100%;max-width:400px;
    max-height:88vh;overflow-y:auto;
    box-shadow:0 20px 60px rgba(0,0,0,.30);
    font-family:'Calibri','Tahoma','Segoe UI',Arial,sans-serif
}
.ag-modal h2{
    font-size:14px;font-weight:800;margin-bottom:8px;color:#0f1b35;
    border-bottom:1.5px solid #eef0ff;padding-bottom:6px
}
.ag-veld{margin-bottom:6px}
.ag-veld label{display:block;font-size:10px;font-weight:700;color:#64748b;
               text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.ag-klant-suggest-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid #334155;
                       color:#f1f5f9;font-size:13px;font-weight:600;display:flex;align-items:center}
.ag-klant-suggest-item .tel{font-size:11px;color:#64748b;font-weight:400;margin-left:6px}
.ag-klant-suggest-item:hover,.ag-klant-suggest-item:last-child:not(.ag-klant-nieuw){border-bottom:none}
.ag-klant-suggest-item:hover{background:#334155}
.ag-klant-nieuw{padding:10px 14px;cursor:pointer;color:#86efac;font-size:12px;
                font-weight:700;border-top:1px solid #334155;display:block}
.ag-veld input,.ag-veld select,.ag-veld textarea{width:100%;padding:7px 10px;
    border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;color:#1a1a2e;outline:none}
.ag-veld input:focus,.ag-veld select:focus,.ag-veld textarea:focus{border-color:#6366f1}
.ag-veld textarea{resize:vertical;min-height:46px}
.ag-veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ag-duo-toggle{width:100%;padding:6px 12px;background:#faf5ff;
               border:1.5px dashed #c4b5fd;border-radius:8px;
               color:#7c3aed;font-size:12px;font-weight:700;
               cursor:pointer;text-align:left;margin-top:2px}
.ag-duo-toggle:hover{background:#ede9fe;border-style:solid}
.ag-kleur-wrap{display:flex;align-items:center;gap:8px}
.ag-kleur-wrap input[type=color]{width:36px;height:30px;padding:2px;border:1.5px solid #e2e8f0;border-radius:8px;cursor:pointer}
.ag-modal-btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ag-btn-opslaan{flex:1;background:#6366f1;color:#fff;border:none;border-radius:8px;
                padding:9px;font-size:13px;font-weight:800;cursor:pointer}
.ag-btn-opslaan:hover{background:#4f46e5}
.ag-btn-sluiten{background:#f1f5f9;color:#374151;border:none;border-radius:8px;
                padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer}
.ag-btn-verwijder{background:#fee2e2;color:#b5405a;border:none;border-radius:8px;
                  padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;margin-left:auto}
.ag-btn-verwijder:hover{background:#fecaca}
.ag-modal-fout{color:#b5405a;font-size:12px;margin-top:6px;min-height:14px}
.ag-duur-hint{font-size:11px;color:#94a3b8;margin-top:2px}

/* ── Agenda extra ── */
html{margin-top:0!important}#wpadminbar{display:none!important}

/* ── Agenda extra ── */
.ag-nav-pill{background:#f1f5f9;border:1.5px solid #e2e8f0;color:#475569;border-radius:20px;padding:5px 14px;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap;transition:all .15s;display:inline-flex;align-items:center;}
/* ag-btn-nieuw definitie zie boven */

/* ── Stabilisatie 1: touch/pointer en badge robuustheid ───── */
body.pos-mode,
body.pos-mode button,
body.pos-mode .button,
body.pos-mode [role="button"],
body.pos-mode .ag-afspraak,
body.pos-mode .ag-resize-handle,
body.pos-mode .pos-page-btn {
  -webkit-tap-highlight-color: transparent;
}

body.pos-mode .ag-afspraak,
body.pos-mode .ag-resize-handle,
body.pos-mode .ag-slot {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

body.pos-mode input,
body.pos-mode textarea,
body.pos-mode select {
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
}

body.pos-mode .ag-afsp-duur.verlengd,
body.pos-mode .ag-afsp-duur.verkort {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  min-height: 16px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  color: #fff !important;
  opacity: 1 !important;
}

body.pos-mode .ag-afsp-duur.verlengd { background-color: #dc2626 !important; }
body.pos-mode .ag-afsp-duur.verkort { background-color: #16a34a !important; }


/* ── Stabilisatie 3: agenda render-performance ─────────────────────────
   Beperk repaint/reflow tijdens slepen/resizen zonder de layout te wijzigen. */
body.pos-mode .ag-kapper-body {
  contain: layout paint;
}
body.pos-mode .ag-afspraak,
body.pos-mode .ag-drag-ghost {
  will-change: transform, top, height;
}
body.pos-mode .ag-afspraak.resizing {
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body.pos-mode .ag-afspraak {
    transition: none !important;
  }
}


/* ── Stabilisatie 6: afspraak-footer + behandelingskleur ──────────────── */
body.pos-mode .ag-afspraak {
  padding-bottom: 18px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
body.pos-mode .ag-afsp-footer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 18px !important;
  padding: 2px 6px 3px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: linear-gradient(to top, rgba(0,0,0,.28), rgba(0,0,0,.10), rgba(0,0,0,0)) !important;
}
body.pos-mode .ag-afsp-duur { box-sizing: border-box !important; }
body.pos-mode .ag-product-kleur-dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15,23,42,.18), 0 1px 3px rgba(15,23,42,.18);
}


/* ── Stabilisatie 7: modal suggesties + behandeling-kleurindicatie ─────── */
.ag-klant-suggest{
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  margin-top: 6px !important;
  z-index: 30 !important;
}
.ag-product-kleur-dot{
  display:inline-block !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  border-radius:999px !important;
  border:2px solid #fff !important;
  box-shadow:0 0 0 1px rgba(15,23,42,.18),0 1px 3px rgba(15,23,42,.18) !important;
  flex:0 0 18px !important;
}
.ag-afsp-product{
  display:flex;
  align-items:center;
  gap:4px;
}
.ag-afsp-product-dot{
  display:inline-block;
  width:7px;
  height:7px;
  min-width:7px;
  border-radius:999px;
  background:currentColor;
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 1px rgba(15,23,42,.12);
}

/* Stabilisatie 9: behandel-kleurbolletje zit visueel ín de selectbox, niet ervoor */
.ag-product-kleur-dot.ag-product-kleur-dot-inselect{
  position:absolute !important;
  left:10px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:2 !important;
  pointer-events:none !important;
}

/* Stabilisatie 11: wijzigknop betrouwbaar klikbaar op desktop/iPad */
.ag-afsp-actions{ pointer-events:auto !important; }
.ag-afsp-btn{ pointer-events:auto !important; position:relative; z-index:25; touch-action:manipulation; }
.ag-afsp-btn-edit{ min-width:26px; min-height:26px; font-size:13px; }
@media (hover:none){
  .ag-afsp-btn-edit,.ag-afsp-btn-del{ min-width:34px; min-height:34px; font-size:15px; }
}

@media (max-width:900px){.pos-date-selector{padding:2px 5px}.pos-date-label{font-size:12px}.pos-module-naam{display:none}.pos-topbalk-boodschap{max-width:220px;overflow:hidden;text-overflow:ellipsis}}

/* ============================================================
   STABILISATIE 16 — Einde dag uitdraai in header
   ============================================================ */
#pos-panel-toggle.pos-nav-money-btn,
.pos-nav-logout-btn{
    position:static !important;
    top:auto !important;
    right:auto !important;
    transform:none !important;
    writing-mode:horizontal-tb !important;
    width:36px !important;
    height:36px !important;
    padding:0 !important;
    border-radius:50% !important;
    border:1.5px solid #e2e8f0 !important;
    background:#f1f5f9 !important;
    color:#64748b !important;
    cursor:pointer !important;
    z-index:auto !important;
    font-size:17px !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    font-weight:900 !important;
    box-shadow:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-family:inherit !important;
    text-decoration:none !important;
}
#pos-panel-toggle.pos-nav-money-btn:hover,
#pos-panel-toggle.pos-nav-money-btn.actief,
.pos-nav-logout-btn:hover{
    background:#e0e7ff !important;
    border-color:#a5b4fc !important;
    color:#6366f1 !important;
    transform:scale(1.08) !important;
    box-shadow:0 4px 14px rgba(99,102,241,.18) !important;
}
#pos-panel-toggle.pos-nav-money-btn:hover svg,
#pos-panel-toggle.pos-nav-money-btn.actief svg,
.pos-nav-logout-btn:hover svg{stroke:#6366f1 !important;}
#pos-panel-toggle .pos-nav-money-symbol{display:block;line-height:1;font-weight:900;}
#pos-zijpaneel{
    top:48px !important;
    right:-372px !important;
    width:340px !important;
    height:calc(100vh - 58px) !important;
    background:#ffffff !important;
    color:#0f172a !important;
    border:1px solid #e2e8f0 !important;
    border-right:0 !important;
    border-radius:18px 0 0 18px !important;
    padding:18px !important;
    box-shadow:-10px 12px 34px rgba(15,23,42,.18) !important;
    z-index:10000 !important;
}
#pos-zijpaneel.open{right:0 !important;}
#pos-zijpaneel h3{
    color:#0f172a !important;
    border-bottom:1px solid #e2e8f0 !important;
    padding-bottom:12px !important;
    margin:0 0 12px !important;
    font-size:15px !important;
}
#pos-zijpaneel .pos-veld{margin-bottom:12px;}
#pos-zijpaneel .pos-veld-label{color:#475569 !important;font-weight:800;}
#pos-zijpaneel select,
#pos-zijpaneel input[type="text"],
#pos-zijpaneel input[type="number"]{
    background:#f8fafc !important;
    color:#0f172a !important;
    border:1px solid #cbd5e1 !important;
    border-radius:10px !important;
}
#pos-zijpaneel #pos-dag-btn{
    background:#6366f1 !important;
    color:#fff !important;
    border:0 !important;
    border-radius:999px !important;
    padding:12px 16px !important;
    font-weight:900 !important;
    box-shadow:0 8px 20px rgba(99,102,241,.24) !important;
}
#pos-zijpaneel #pos-briefgeld-tabel{
    border-color:#e2e8f0 !important;
    border-radius:12px !important;
}
@media (max-width:700px){
    #pos-zijpaneel{top:48px !important;width:calc(100vw - 28px) !important;right:calc(-100vw + 18px) !important;}
    #pos-zijpaneel.open{right:0 !important;}
}


/* ============================================================
   STABILISATIE 26 — centrale header-iconen
   Eén bron voor alle rechter headerknoppen: $, Snipper, Rapport, Uitloggen.
   ============================================================ */
:root{
    --pos-header-icon-size:36px;
    --pos-header-icon-bg:#f8fafc;
    --pos-header-icon-bg-hover:#eef2ff;
    --pos-header-icon-border:#e2e8f0;
    --pos-header-icon-border-hover:#c7d2fe;
    --pos-header-icon-color:#64748b;
    --pos-header-icon-color-hover:#6366f1;
    --pos-header-icon-shadow:0 1px 4px rgba(15,23,42,.08);
    --pos-header-icon-shadow-hover:0 6px 18px rgba(99,102,241,.18);
}
.pos-topbalk-rechts .pos-nav-icon-btn,
#pos-panel-toggle.pos-nav-icon-btn{
    position:static !important;
    top:auto !important;
    right:auto !important;
    transform:none !important;
    writing-mode:horizontal-tb !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:var(--pos-header-icon-size) !important;
    min-width:var(--pos-header-icon-size) !important;
    height:var(--pos-header-icon-size) !important;
    min-height:var(--pos-header-icon-size) !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:999px !important;
    border:1.5px solid var(--pos-header-icon-border) !important;
    background:var(--pos-header-icon-bg) !important;
    color:var(--pos-header-icon-color) !important;
    box-shadow:var(--pos-header-icon-shadow) !important;
    cursor:pointer !important;
    text-decoration:none !important;
    font-size:0 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    overflow:hidden !important;
    z-index:auto !important;
    transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s !important;
    -webkit-appearance:none !important;
    appearance:none !important;
}
.pos-topbalk-rechts .pos-nav-icon-btn:hover,
.pos-topbalk-rechts .pos-nav-icon-btn:focus-visible,
#pos-panel-toggle.pos-nav-icon-btn:hover,
#pos-panel-toggle.pos-nav-icon-btn:focus-visible,
#pos-panel-toggle.pos-nav-icon-btn.actief,
#pos-panel-toggle.pos-nav-icon-btn.open{
    background:var(--pos-header-icon-bg-hover) !important;
    border-color:var(--pos-header-icon-border-hover) !important;
    color:var(--pos-header-icon-color-hover) !important;
    box-shadow:var(--pos-header-icon-shadow-hover) !important;
    transform:translateY(-1px) !important;
    outline:none !important;
}
.pos-topbalk-rechts .pos-nav-icon-btn svg,
#pos-panel-toggle.pos-nav-icon-btn svg{
    width:18px !important;
    height:18px !important;
    display:block !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:2 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
    flex:0 0 auto !important;
}
.pos-topbalk-rechts .pos-nav-icon-btn .screen-reader-text,
#pos-panel-toggle.pos-nav-icon-btn .screen-reader-text{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

/* Afrekeningen correcties */
.afrk-corrected-row td{background:#fff7ed!important;border-top:1px solid #fed7aa;border-bottom:1px solid #fed7aa}
.afrk-orig{display:block;margin-top:3px;font-size:10px;color:#9a3412;text-decoration:line-through;opacity:.85}
.afrk-corr-badge{display:inline-block;margin-left:6px;background:#ffedd5;color:#9a3412;border:1px solid #fdba74;border-radius:999px;padding:1px 6px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.3px}
.afrk-edit-select,.afrk-edit-input{font-size:12px;border-radius:7px;border:1.5px solid #cbd5e1;padding:4px 7px;background:#fff;max-width:170px}
.afrk-edit-input{width:70px;text-align:right}
.afrk-save-status{font-size:10px;color:#64748b;margin-left:4px;white-space:nowrap}
.afrk-inline-edit{display:flex;align-items:center;gap:5px;flex-wrap:wrap}


/* ── Stabilisatie 39: agenda typografie-hiërarchie ───────────────────────
   Scope bewust beperkt tot afspraakkaarten binnen .ag-pagina.
   Niet toegepast op Kassa, Klanten, Rapporten, Snipperkaart, Verlof of
   lege slotkaarten (.ag-afspraak-slot). */
body.pos-mode .ag-pagina .ag-afspraak:not(.ag-afspraak-slot) .ag-afsp-naam {
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 1px !important;
}
body.pos-mode .ag-pagina .ag-afspraak:not(.ag-afspraak-slot) .ag-afsp-product {
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  color: rgba(255,255,255,.88) !important;
}
body.pos-mode .ag-pagina .ag-afspraak:not(.ag-afspraak-slot) .ag-afsp-product-dot {
  width: 6px !important;
  height: 6px !important;
  min-width: 6px !important;
}
body.pos-mode .ag-pagina .ag-afspraak:not(.ag-afspraak-slot) .ag-afsp-notitie {
  font-size: 9px !important;
  line-height: 1.1 !important;
  color: rgba(255,255,255,.62) !important;
}
body.pos-mode .ag-pagina .ag-afspraak:not(.ag-afspraak-slot) .ag-afsp-tijd {
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: .01em !important;
  font-variant-numeric: tabular-nums !important;
}
body.pos-mode .ag-pagina .ag-afspraak:not(.ag-afspraak-slot) .ag-afsp-duur {
  font-size: 9px !important;
  font-weight: 800 !important;
  min-height: 15px !important;
  padding: 1px 6px !important;
}


/* ============================================================
   STAP 40 — Design tokens + premium kaartstijl
   Scope: alleen POS UI-containers/kaarten/toolbar. Geen functionele selectors.
   ============================================================ */
:root{
    --pos-ui-bg:#f4f7fb;
    --pos-ui-surface:#ffffff;
    --pos-ui-surface-soft:#f8fafc;
    --pos-ui-border:#e2e8f0;
    --pos-ui-border-strong:#cbd5e1;
    --pos-ui-text:#162033;
    --pos-ui-muted:#64748b;
    --pos-ui-primary:#6366f1;
    --pos-ui-primary-soft:#eef2ff;
    --pos-ui-warning-bg:#fff7d6;
    --pos-ui-warning-border:#f6d76b;
    --pos-ui-warning-text:#b45309;
    --pos-ui-radius-sm:8px;
    --pos-ui-radius-md:12px;
    --pos-ui-radius-lg:18px;
    --pos-ui-shadow-card:0 1px 2px rgba(15,23,42,.04),0 10px 26px rgba(15,23,42,.06);
    --pos-ui-shadow-card-hover:0 2px 4px rgba(15,23,42,.06),0 18px 38px rgba(15,23,42,.10);
    --pos-ui-shadow-toolbar:0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.06);
}

body.pos-mode,
body.agenda-pos-body{
    background:var(--pos-ui-bg) !important;
    color:var(--pos-ui-text);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

body.pos-mode .pos-wrap{
    border-left:1px solid rgba(148,163,184,.26) !important;
    border-right:1px solid rgba(148,163,184,.26) !important;
    box-shadow:0 0 0 1px rgba(15,23,42,.02),0 18px 60px rgba(15,23,42,.05) !important;
}

body.pos-mode .pos-card,
.kl-card,
.afrk-filter,
.afrk-tile,
.afrk-kapper-card,
.afrk-tabel,
#ag-klant-popup{
    background:linear-gradient(180deg,var(--pos-ui-surface) 0%,#fbfcff 100%) !important;
    border:1px solid var(--pos-ui-border) !important;
    border-radius:var(--pos-ui-radius-lg) !important;
    box-shadow:var(--pos-ui-shadow-card) !important;
}

body.pos-mode .pos-card:hover,
.kl-card:hover,
.afrk-tile:hover,
.afrk-kapper-card:hover{
    transform:translateY(-1px);
    border-color:var(--pos-ui-border-strong) !important;
    box-shadow:var(--pos-ui-shadow-card-hover) !important;
}

.pos-topbalk{
    background:rgba(255,255,255,.92) !important;
    border-bottom:1px solid var(--pos-ui-border) !important;
    box-shadow:var(--pos-ui-shadow-toolbar) !important;
    backdrop-filter:saturate(140%) blur(10px);
    -webkit-backdrop-filter:saturate(140%) blur(10px);
}

.pos-module-naam,
body.pos-mode .pos-card h2,
.kl-card-titel,
.afrk-tile-lbl,
.afrk-tabel th{
    letter-spacing:.35px;
}

body.pos-mode .pos-card h2,
.pos-module-naam{
    color:var(--pos-ui-text) !important;
    font-weight:850 !important;
}

.pos-date-selector,
.pos-topbalk-boodschap,
.pos-nav-tab,
body.pos-mode .pos-pick span,
.kl-zoek,
.kl-veld input,
.kl-veld textarea,
.kl-veld select,
.afrk-filter input,
.afrk-filter select{
    border-radius:var(--pos-ui-radius-md) !important;
}

.pos-topbalk-boodschap{
    background:var(--pos-ui-warning-bg) !important;
    border-color:var(--pos-ui-warning-border) !important;
    color:var(--pos-ui-warning-text) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}

body.pos-mode .pos-btn{
    border-radius:var(--pos-ui-radius-md) !important;
    border-color:var(--pos-ui-border) !important;
    box-shadow:0 1px 2px rgba(15,23,42,.04),0 5px 16px rgba(15,23,42,.04) !important;
}
body.pos-mode .pos-btn:hover{
    box-shadow:0 2px 4px rgba(15,23,42,.06),0 14px 28px rgba(15,23,42,.08) !important;
}

.kl-lijst,
.kl-zoek-wrap{
    border-color:var(--pos-ui-border) !important;
}
.kl-item.actief{
    background:var(--pos-ui-primary-soft) !important;
    border-left-color:var(--pos-ui-primary) !important;
}
.kl-btn-paars,
.kl-opsl-btn,
.afrk-filter button{
    background:linear-gradient(180deg,#7073f5 0%,var(--pos-ui-primary) 100%) !important;
    box-shadow:0 8px 18px rgba(99,102,241,.18) !important;
}

.afrk-tabel th{
    background:var(--pos-ui-surface-soft) !important;
}
.afrk-tabel tfoot td{
    background:#eef2ff !important;
}

@media (prefers-reduced-motion: reduce){
    body.pos-mode .pos-card,
    .kl-card,
    .afrk-tile,
    .afrk-kapper-card,
    body.pos-mode .pos-btn{
        transition:none !important;
        transform:none !important;
    }
}


/* ============================================================
   STAP 41 — Kassa productkaarten premium-hiërarchie
   Scope bewust beperkt tot .pos-grid .pos-btn in de Kassa.
   Raakt geen Agenda-afspraakkaarten, Klanten, Rapporten, Snipperkaart of Verlof.
   ============================================================ */
body.pos-mode .pos-grid .pos-btn{
    min-height:72px !important;
    padding:10px 12px 10px 22px !important;
    border-radius:16px !important;
    border:1px solid rgba(148,163,184,.42) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(99,102,241,.07), transparent 34%),
        linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
    box-shadow:0 1px 2px rgba(15,23,42,.05),0 8px 22px rgba(15,23,42,.055) !important;
    justify-content:center !important;
    gap:3px !important;
}
body.pos-mode .pos-grid .pos-btn:hover,
body.pos-mode .pos-grid .pos-btn:focus-visible{
    transform:translateY(-2px) !important;
    border-color:rgba(99,102,241,.36) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(99,102,241,.11), transparent 38%),
        linear-gradient(180deg,#ffffff 0%,#f3f6fb 100%) !important;
    box-shadow:0 4px 10px rgba(15,23,42,.08),0 18px 36px rgba(15,23,42,.12) !important;
    outline:none !important;
}
body.pos-mode .pos-grid .pos-btn:active{
    transform:translateY(0) scale(.99) !important;
    box-shadow:0 1px 2px rgba(15,23,42,.06),0 5px 14px rgba(15,23,42,.08) !important;
}
body.pos-mode .pos-grid .pos-btn[class*="product_tag-"]::after{
    left:9px !important;
    top:12px !important;
    bottom:12px !important;
    width:6px !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),0 2px 5px rgba(15,23,42,.20) !important;
}
body.pos-mode .pos-grid .pos-btn-name{
    order:1 !important;
    min-height:0 !important;
    margin:0 0 2px !important;
    font-size:10px !important;
    line-height:1.05 !important;
    font-weight:850 !important;
    color:rgba(71,85,105,.82) !important;
    text-transform:none !important;
    letter-spacing:.02em !important;
    text-align:center !important;
    -webkit-line-clamp:1 !important;
}
body.pos-mode .pos-grid .pos-btn-meta{
    order:2 !important;
    margin-top:0 !important;
    padding-top:0 !important;
    border-top:none !important;
    gap:5px !important;
    width:100% !important;
}
body.pos-mode .pos-grid .pos-sku{
    display:block !important;
    width:100% !important;
    font-size:14px !important;
    line-height:1.15 !important;
    font-weight:900 !important;
    color:#172033 !important;
    text-align:center !important;
    letter-spacing:-.01em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}
body.pos-mode .pos-grid .pos-price{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    align-self:center !important;
    min-width:58px !important;
    padding:2px 8px !important;
    border-radius:999px !important;
    background:#eef2ff !important;
    border:1px solid rgba(99,102,241,.14) !important;
    color:#334155 !important;
    font-size:11px !important;
    font-weight:850 !important;
    line-height:1.2 !important;
}
body.pos-mode .pos-grid .pos-btn.product_tag-heren .pos-price{background:#eff6ff !important;border-color:rgba(37,99,235,.16) !important;}
body.pos-mode .pos-grid .pos-btn.product_tag-dames .pos-price{background:#fff1f2 !important;border-color:rgba(190,18,60,.16) !important;}
body.pos-mode .pos-grid .pos-btn.product_tag-kleuren .pos-price{background:#ecfdf5 !important;border-color:rgba(22,163,74,.16) !important;}
body.pos-mode .pos-grid .pos-btn.product_tag-permanent .pos-price{background:#f5f3ff !important;border-color:rgba(124,58,237,.16) !important;}


/* ============================================================
   STAP 42 — Kassa productkaarten: kleurgebonden schaduw/glow
   Scope: alleen Kassa productknoppen (.pos-grid .pos-btn).
   ============================================================ */
body.pos-mode .pos-grid .pos-btn{--pos-product-rgb:37,99,235;}
body.pos-mode .pos-grid .pos-btn.product_tag-heren{--pos-product-rgb:37,99,235;}
body.pos-mode .pos-grid .pos-btn.product_tag-dames{--pos-product-rgb:190,18,60;}
body.pos-mode .pos-grid .pos-btn.product_tag-kleuren{--pos-product-rgb:22,163,74;}
body.pos-mode .pos-grid .pos-btn.product_tag-permanent{--pos-product-rgb:124,58,237;}
body.pos-mode .pos-grid .pos-btn.product_tag-verkoop{--pos-product-rgb:245,158,11;}
body.pos-mode .pos-grid .pos-btn{
    box-shadow:0 1px 2px rgba(15,23,42,.05),0 8px 22px rgba(var(--pos-product-rgb),.10) !important;
}
body.pos-mode .pos-grid .pos-btn:hover,
body.pos-mode .pos-grid .pos-btn:focus-visible{
    border-color:rgba(var(--pos-product-rgb),.34) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--pos-product-rgb),.13), transparent 38%),
        linear-gradient(180deg,#ffffff 0%,#f3f6fb 100%) !important;
    box-shadow:0 4px 10px rgba(15,23,42,.08),0 18px 38px rgba(var(--pos-product-rgb),.18) !important;
}
body.pos-mode .pos-grid .pos-btn:active{
    box-shadow:0 1px 2px rgba(15,23,42,.06),0 5px 14px rgba(var(--pos-product-rgb),.13) !important;
}

/* ============================================================
   STAP 43 — Klanten premium: dossier + bezoekhistorie
   Scope bewust beperkt tot .kl-* selectors van het Klantendossier.
   Geen Agenda/Kassa/Rapport/Snipper/Verlof selectors aangepast.
   ============================================================ */
.kl-wrap{
    background:
        radial-gradient(circle at 20% 0%, rgba(99,102,241,.055), transparent 28%),
        linear-gradient(180deg,#f8fafc 0%,#eef3f8 100%) !important;
}
.kl-lijst{
    width:282px !important;
    background:rgba(255,255,255,.92) !important;
    box-shadow:8px 0 28px rgba(15,23,42,.045) !important;
}
.kl-zoek-wrap{
    padding:12px !important;
    background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
    gap:8px !important;
}
.kl-zoek{
    height:38px !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(15,23,42,.04) !important;
}
.kl-zoek:focus{
    border-color:#818cf8 !important;
    box-shadow:0 0 0 4px rgba(99,102,241,.12) !important;
}
.kl-btn{
    height:34px !important;
    border-radius:12px !important;
    letter-spacing:.01em !important;
    transition:transform .14s ease, box-shadow .14s ease, background .14s ease !important;
}
.kl-btn:hover{transform:translateY(-1px) !important;}
.kl-btn-paars{box-shadow:0 8px 18px rgba(99,102,241,.18) !important;}
.kl-btn-donker{background:linear-gradient(180deg,#123d70 0%,#0f3460 100%) !important;box-shadow:0 8px 18px rgba(15,52,96,.16) !important;}
.kl-items{padding:6px 8px 10px !important;background:#fff !important;}
.kl-item{
    margin:2px 0 !important;
    padding:11px 12px !important;
    border-bottom:0 !important;
    border-radius:13px !important;
    border:1px solid transparent !important;
    transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease !important;
}
.kl-item:hover{
    background:#f8fafc !important;
    border-color:#e6edf5 !important;
    box-shadow:0 6px 18px rgba(15,23,42,.045) !important;
    transform:translateY(-1px) !important;
}
.kl-item.actief{
    background:linear-gradient(90deg,#eef2ff 0%,#f8fbff 100%) !important;
    border-left:0 !important;
    border-color:#c7d2fe !important;
    box-shadow:0 10px 24px rgba(99,102,241,.12) !important;
    position:relative !important;
}
.kl-item.actief::before{
    content:"";
    position:absolute;
    left:0;top:9px;bottom:9px;width:4px;
    border-radius:0 999px 999px 0;
    background:#6366f1;
}
.kl-item-naam{font-size:13px !important;font-weight:850 !important;color:#172033 !important;letter-spacing:.005em !important;}
.kl-item-sub{font-size:11px !important;color:#64748b !important;margin-top:3px !important;}
.kl-dossier{
    padding:18px 22px !important;
    grid-template-columns:minmax(320px,380px) minmax(520px,1fr) !important;
    gap:18px !important;
}
.kl-card,
.kl-nieuw-bezoek{
    border-radius:18px !important;
    border:1px solid rgba(226,232,240,.95) !important;
    background:rgba(255,255,255,.94) !important;
    box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 34px rgba(15,23,42,.065) !important;
}
.kl-card{padding:18px !important;}
.kl-card-titel{
    color:#475569 !important;
    font-size:12px !important;
    letter-spacing:.08em !important;
    border-bottom-color:#e8eef6 !important;
    margin-bottom:14px !important;
}
.kl-veld label{font-size:11px !important;color:#64748b !important;font-weight:800 !important;}
.kl-veld input,
.kl-veld textarea,
.kl-veld select{
    border-radius:12px !important;
    border-color:#dbe3ee !important;
    background:#fbfdff !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75) !important;
    transition:border-color .14s ease,box-shadow .14s ease,background .14s ease !important;
}
.kl-veld input:focus,
.kl-veld textarea:focus,
.kl-veld select:focus{
    background:#fff !important;
    border-color:#818cf8 !important;
    box-shadow:0 0 0 4px rgba(99,102,241,.12) !important;
}
.kl-opsl-btn{
    border-radius:12px !important;
    box-shadow:0 8px 18px rgba(99,102,241,.18) !important;
}
.kl-opsl-btn.groen{box-shadow:0 8px 18px rgba(22,163,74,.18) !important;}
.kl-nieuw-bezoek{
    background:linear-gradient(180deg,#f0fdf4 0%,#f7fffb 100%) !important;
    border:1.5px dashed #86efac !important;
    padding:16px !important;
}
.kl-bezoek-item{
    display:grid !important;
    grid-template-columns:118px 1fr auto !important;
    column-gap:16px !important;
    align-items:start !important;
    margin-bottom:10px !important;
    padding:14px 14px 14px 16px !important;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
    border:1px solid #e4eaf3 !important;
    border-left:4px solid #6366f1 !important;
    border-radius:16px !important;
    box-shadow:0 1px 2px rgba(15,23,42,.035) !important;
    transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease !important;
}
.kl-bezoek-item:hover{
    transform:translateY(-1px) !important;
    border-color:#c7d2fe !important;
    box-shadow:0 12px 28px rgba(99,102,241,.10) !important;
}
.kl-bezoek-datum{
    grid-column:1 !important;
    display:inline-flex !important;
    width:max-content !important;
    align-items:center !important;
    padding:4px 8px !important;
    border-radius:999px !important;
    background:#eef2ff !important;
    color:#4f46e5 !important;
    font-size:11px !important;
    font-weight:900 !important;
}
.kl-bezoek-beh{
    grid-column:2 !important;
    margin-top:0 !important;
    color:#172033 !important;
    font-size:13px !important;
    font-weight:850 !important;
}
.kl-bezoek-prijs{
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end !important;
    margin:0 28px 0 0 !important;
    color:#0f766e !important;
    font-size:12px !important;
    font-weight:900 !important;
}
.kl-bezoek-recept{
    grid-column:2 / 4 !important;
    margin-top:8px !important;
    padding-top:8px !important;
    border-top:1px solid #e8eef6 !important;
    color:#475569 !important;
    line-height:1.55 !important;
}
.kl-del-btn{
    top:10px !important;
    right:10px !important;
    width:20px !important;
    height:20px !important;
    border-radius:999px !important;
    background:#fff1f2 !important;
    color:#ef4444 !important;
    border:1px solid #fecdd3 !important;
}
.kl-del-btn:hover{background:#ffe4e6 !important;color:#be123c !important;}
@media (max-width: 980px){
    .kl-dossier{grid-template-columns:1fr !important;padding:14px !important;}
    .kl-lijst{width:245px !important;}
    .kl-bezoek-item{grid-template-columns:1fr !important;row-gap:6px !important;}
    .kl-bezoek-datum,.kl-bezoek-beh,.kl-bezoek-prijs,.kl-bezoek-recept{grid-column:1 !important;}
    .kl-bezoek-prijs{justify-self:start !important;margin:0 !important;}
}