/*
 * 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-shrink:0;}
.pos-topbalk-midden{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;overflow:hidden;}
.pos-topbalk-rechts{display:flex;gap:8px;align-items:center;flex-shrink:0;}
.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-header { font-size: 9px; color: #94a3b8; text-align: center; font-weight: 700; padding: 2px 0; }
.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: 12px 8px; border-radius: 8px; border: 2px solid #e2e8f0; background: #f8fafc;
            color: #475569; font-size: 13px; font-weight: 700; cursor: pointer; text-align: center; }
.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:#1c1c1e;
    color:#fff;border:none;border-radius:22px;padding:7px 18px;
    font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;
    box-shadow:0 2px 8px rgba(0,0,0,.25);transition:all .15s
}
.ag-btn-nieuw:hover{background:#2c2c2e;box-shadow:0 3px 12px rgba(0,0,0,.35)}
.ag-btn-nieuw.twijfel{background:#c0392b !important;box-shadow:0 2px 8px rgba(192,57,43,.4) !important}
.ag-btn-nieuw.twijfel:hover{background:#a93226 !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;border-left:1px solid #d4e4f4;
                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:1px solid #f1f5f9;border-bottom-color:transparent}

/* Kapperkolom */
.ag-kapper-body{flex:1;min-width:120px;position:relative;border-left:1px solid #d4e4f4;background:#fff}
/* 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:#eef2f8}
.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:repeating-linear-gradient(
        135deg,
        #dde1e7 0px,#dde1e7 2px,
        #edf0f4 2px,#edf0f4 6px
    );
    z-index:1;
}
.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:#e8edf5}
/* 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:#fff
}
.ag-slot:hover{background:#e8f0fb;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 #c8d9ee;border-bottom-color:transparent}
.ag-slot.half{border-top:1px solid #e4eef8;border-bottom-color:transparent}
.ag-kapper-body .ag-slot:first-of-type{border-top-color:transparent}

/* Buiten werktijd kapper = duidelijk donkerder grijs */
.ag-slot.buiten-werk{background:#e8edf5;cursor:default}
.ag-slot.buiten-werk:hover{background:#e0e8f2}
.ag-slot.buiten-werk.uur{border-top-color:#c0cfdf}
/* Buiten salon-uren = nog donkerder (admin gebied) */
.ag-slot.buiten-salon{background:#d8e2ee;cursor:default}
.ag-slot.buiten-salon:hover{background:#cfd9e9}
/* Slot hover-keuzemenu */
.ag-slot-menu{display:none;position:absolute;top:100%;left:0;
              background:#1e293b;border:1px solid #334155;border-radius:8px;
              z-index:200;min-width:150px;box-shadow:0 4px 16px rgba(0,0,0,.45);
              overflow:hidden;white-space:nowrap}
.ag-slot-menu.open{display:block}
.ag-slot-menu-item{display:block;padding:9px 14px;font-size:12px;font-weight:700;
                   color:#e2e8f0;cursor:pointer;white-space:nowrap;text-align:left;
                   background:transparent;border:none;width:100%;line-height:1.4}
.ag-slot-menu-item:hover{background:#e8f0fb;color:#1a3a6e}
.ag-slot-menu-item.groen{color:#16a34a}
.ag-slot-menu-item.blauw{color:#3a7fd5}

/* 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
}

/* Afspraken */
.ag-pauze-blok{
    position:absolute;left:0;right:0;z-index:5;
    /* Donkerder diagonaal patroon — duidelijk onderscheid van werktijd */
    background:repeating-linear-gradient(
        135deg,
        #b8c3ce 0px,#b8c3ce 3px,
        #cdd5dd 3px,#cdd5dd 10px
    );
    border-top:2px dashed #8fa0b0;
    border-bottom:2px dashed #8fa0b0;
    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;overflow:hidden;cursor:pointer;z-index:10;
    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-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-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:#e8edf5}
.ag-kapper-body.kapper-vrij .ag-slot:not(.buiten-werk){
    background:repeating-linear-gradient(135deg,#d8e4f0 0px,#d8e4f0 2px,#e8edf5 2px,#e8edf5 8px) !important;
    border-color:#c4d4e4 !important}
.ag-kapper-body.kapper-vrij .ag-slot.buiten-werk{background:#d0dae8 !important;border-color:#b8ccd8 !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:flex-end;
                margin-top:auto;padding-top:2px}
.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{font-size:10px;font-weight:600;color:#fff;
              background:rgba(0,0,0,.25);border-radius:4px;padding:1px 6px;
              letter-spacing:.2px;font-family:-apple-system,'SF Pro Text','Segoe UI','Calibri',Arial,sans-serif}

/* 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:16px;padding:24px;width:100%;max-width:440px;
    max-height:90vh;overflow-y:auto;
    box-shadow:0 24px 64px rgba(0,0,0,.35);
    font-family:'Calibri','Tahoma','Segoe UI',Arial,sans-serif
}
.ag-modal h2{
    font-size:17px;font-weight:800;margin-bottom:18px;color:#0f1b35;
    border-bottom:2px solid #eef0ff;padding-bottom:12px
}
.ag-veld{margin-bottom:12px}
.ag-veld label{display:block;font-size:11px;font-weight:700;color:#64748b;
               text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.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:9px 11px;
    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:60px}
.ag-veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ag-duo-toggle{width:100%;padding:8px 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:40px;height:36px;padding:2px;border:1.5px solid #e2e8f0;border-radius:8px;cursor:pointer}
.ag-modal-btns{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.ag-btn-opslaan{flex:1;background:#6366f1;color:#fff;border:none;border-radius:8px;
                padding:10px;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:10px 16px;font-size:13px;font-weight:700;cursor:pointer}
.ag-btn-verwijder{background:#fee2e2;color:#b5405a;border:none;border-radius:8px;
                  padding:10px 16px;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:8px;min-height:16px}
.ag-duur-hint{font-size:11px;color:#94a3b8;margin-top:3px}

/* ── 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 */