/*
 * pos-ipad-theme.css — i-Kassa Smart POS
 * Apple/iPad visuele stijllaag — non-destructief override
 * Laadt als laatste via wp_enqueue_scripts priority 99
 * ============================================================
 */

/* ── Design tokens ───────────────────────────────────────── */
:root {
  --pos-bg:          #f5f7fb;
  --pos-bg-2:        #eef1f7;
  --pos-card:        #ffffff;
  --pos-card-glass:  rgba(255,255,255,0.82);
  --pos-border:      rgba(0,0,0,0.08);
  --pos-border-mid:  rgba(0,0,0,0.12);
  --pos-shadow-sm:   0 1px 4px rgba(0,0,0,0.07), 0 0 1px rgba(0,0,0,0.04);
  --pos-shadow-md:   0 4px 16px rgba(0,0,0,0.09), 0 1px 3px rgba(0,0,0,0.05);
  --pos-shadow-lg:   0 8px 32px rgba(0,0,0,0.13), 0 2px 6px rgba(0,0,0,0.06);
  --pos-radius-sm:   10px;
  --pos-radius-md:   16px;
  --pos-radius-lg:   22px;
  --pos-radius-pill: 999px;
  --pos-blue:        #007aff;
  --pos-blue-light:  #e8f2ff;
  --pos-purple:      #5e5ce6;
  --pos-green:       #34c759;
  --pos-green-light: #e8f8ed;
  --pos-red:         #ff3b30;
  --pos-red-light:   #fff0ee;
  --pos-orange:      #ff9500;
  --pos-yellow:      #ffd60a;
  --pos-text-1:      #1c1c1e;
  --pos-text-2:      #3c3c43;
  --pos-text-3:      #6c6c70;
  --pos-text-4:      #aeaeb2;
  --pos-font:        -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Arial, sans-serif;
  --pos-touch:       44px;
}

/* ── Basis reset voor POS pagina's ──────────────────────── */
body.pos-mode,
.ag-pagina ~ *,
html:has(.pos-topbalk) body {
  font-family: var(--pos-font) !important;
  background: var(--pos-bg) !important;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
 * 1. TOP NAVIGATIE
 * ============================================================ */
.pos-topbalk {
  background: rgba(255,255,255,0.92) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--pos-border) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
  height: 56px !important;
  padding: 0 20px !important;
}

.pos-module-naam {
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
  color: var(--pos-text-1) !important;
}

/* Boodschap balk */
.pos-topbalk span[style*="fef9c3"],
.pos-topbalk span[style*="b45309"] {
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 4px 12px !important;
  border-radius: var(--pos-radius-pill) !important;
  background: #fff8e1 !important;
  border: 1px solid #ffe082 !important;
  color: #7c5a00 !important;
}

/* ============================================================
 * 2. NAVIGATIE PILLS & ICOON KNOPPEN
 * ============================================================ */
.pos-nav-icon-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid var(--pos-border-mid) !important;
  background: var(--pos-card) !important;
  box-shadow: var(--pos-shadow-sm) !important;
  transition: all 0.15s ease !important;
}
.pos-nav-icon-btn:hover {
  box-shadow: var(--pos-shadow-md) !important;
  transform: scale(1.06) !important;
}

/* Nav pills */
nav a[style*="6366f1"],
nav a[style*="4f46e5"] {
  background: var(--pos-blue) !important;
  border-color: var(--pos-blue) !important;
  border-radius: var(--pos-radius-pill) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  min-height: var(--pos-touch) !important;
  box-shadow: 0 2px 8px rgba(0,122,255,0.25) !important;
}
nav a[style*="f8fafc"],
nav a[style*="475569"] {
  border-radius: var(--pos-radius-pill) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  min-height: var(--pos-touch) !important;
  color: var(--pos-text-2) !important;
}

/* ============================================================
 * 3. KASSA — BEHANDELINGEN GRID
 * ============================================================ */
body.pos-mode {
  background: var(--pos-bg) !important;
}

body.pos-mode .pos-wrap {
  gap: 14px !important;
  padding: 14px !important;
}

body.pos-mode .pos-left,
body.pos-mode .pos-right {
  gap: 12px !important;
}

/* Behandeling kaarten */
body.pos-mode .pos-btn {
  background: var(--pos-card) !important;
  border: 1px solid var(--pos-border) !important;
  border-radius: var(--pos-radius-md) !important;
  box-shadow: var(--pos-shadow-sm) !important;
  min-height: var(--pos-touch) !important;
  transition: all 0.15s ease !important;
  font-family: var(--pos-font) !important;
}
body.pos-mode .pos-btn:hover {
  box-shadow: var(--pos-shadow-md) !important;
  transform: translateY(-1px) !important;
  border-color: var(--pos-blue) !important;
}
body.pos-mode .pos-btn:active {
  transform: scale(0.97) !important;
  box-shadow: var(--pos-shadow-sm) !important;
}
body.pos-mode .pos-btn-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--pos-text-1) !important;
  letter-spacing: -0.1px !important;
}
body.pos-mode .pos-btn-meta,
body.pos-mode .pos-price {
  font-size: 12px !important;
  color: var(--pos-text-3) !important;
}

/* Winkelwagen & checkout kaarten */
body.pos-mode .pos-card {
  background: var(--pos-card) !important;
  border-radius: var(--pos-radius-md) !important;
  border: 1px solid var(--pos-border) !important;
  box-shadow: var(--pos-shadow-sm) !important;
}
body.pos-mode .pos-card h2 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--pos-text-1) !important;
  letter-spacing: -0.2px !important;
}

/* Kapper selectie pills */
body.pos-mode .pos-pick span {
  border-radius: var(--pos-radius-pill) !important;
  min-height: var(--pos-touch) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: 1.5px solid var(--pos-border-mid) !important;
  transition: all 0.15s ease !important;
}
body.pos-mode .pos-pick input:checked + span {
  background: var(--pos-blue) !important;
  border-color: var(--pos-blue) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,122,255,0.3) !important;
}

/* Checkout knoppen */
body.pos-mode .pos-btn-checkout,
body.pos-mode button[class*="checkout"],
body.pos-mode #pos-btn-afrekenen {
  background: var(--pos-blue) !important;
  border-radius: var(--pos-radius-pill) !important;
  min-height: var(--pos-touch) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(0,122,255,0.35) !important;
}

/* Betaalmethode knoppen */
body.pos-mode .pos-betaal-pin {
  background: var(--pos-blue) !important;
  border-radius: var(--pos-radius-md) !important;
}
body.pos-mode .pos-betaal-contant {
  background: var(--pos-green) !important;
  border-radius: var(--pos-radius-md) !important;
}

/* ============================================================
 * 4. AGENDA — GRID & AFSPRAKEN
 * ============================================================ */

/* Body */
.ag-pagina,
.ag-wrap {
  background: var(--pos-bg) !important;
}

/* Kapper headers */
.ag-head-kapper {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  color: #1d4e89 !important;
  background: linear-gradient(180deg, #f0f6ff 0%, #e8f0fa 100%) !important;
  border-bottom: 2px solid #3a7fd5 !important;
}

/* Slots — zachtere gridlijnen */
.ag-slot.uur {
  border-top: 1px solid rgba(0,0,0,0.07) !important;
}
.ag-slot.half {
  border-top: 1px solid rgba(0,0,0,0.03) !important;
}
.ag-slot:hover {
  background: rgba(0,122,255,0.06) !important;
}

/* Tijdlabels */
.ag-time-cell {
  color: var(--pos-text-4) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}
.ag-time-cell.uur {
  color: var(--pos-text-3) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* Afspraak kaarten */
.ag-afspraak {
  border-radius: 11px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.15) inset !important;
  border-left-width: 3px !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
.ag-afspraak:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.2) inset !important;
}

/* Klantnaam */
.ag-afsp-naam {
  font-family: var(--pos-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}

/* Behandeling */
.ag-afsp-product {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.8) !important;
  letter-spacing: 0 !important;
}

/* Tijdstip */
.ag-afsp-tijd {
  font-size: 10px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.72) !important;
}

/* Duur badge */
.ag-afsp-duur {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: rgba(0,0,0,0.22) !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  letter-spacing: 0.1px !important;
}

/* Vergrendeld */
.ag-afsp-vergrendeld {
  opacity: 0.65 !important;
  filter: grayscale(0.25) !important;
}
.ag-afsp-vergrendeld::after {
  font-size: 10px !important;
  background: rgba(0,0,0,0.35) !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
}

/* Pauze blok */
.ag-pauze-blok {
  background: rgba(200,200,210,0.5) !important;
  backdrop-filter: blur(4px) !important;
  border-radius: 8px !important;
  border: 1px dashed rgba(0,0,0,0.12) !important;
}
.ag-pauze-blok-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: var(--pos-text-3) !important;
}

/* Kapper vrij arcering — zachter */
.ag-kapper-body.kapper-vrij {
  background: #edf1f7 !important;
}
.ag-kapper-body.kapper-vrij .ag-slot:not(.buiten-werk) {
  background: repeating-linear-gradient(
    135deg,
    #dce6f0 0px, #dce6f0 2px,
    #edf1f7 2px, #edf1f7 9px
  ) !important;
}

/* Buiten werktijd — subtiele arcering */
.ag-slot.buiten-werk {
  background: rgba(230,234,240,0.7) !important;
}

/* Nu-lijn */
.ag-nu-lijn {
  height: 2px !important;
  background: var(--pos-red) !important;
  box-shadow: 0 0 8px rgba(255,59,48,0.5) !important;
}
.ag-nu-lijn::before {
  width: 9px !important;
  height: 9px !important;
  background: var(--pos-red) !important;
  box-shadow: 0 0 6px rgba(255,59,48,0.6) !important;
}
.ag-nu-lijn::after {
  font-size: 9px !important;
  font-weight: 700 !important;
  background: var(--pos-red) !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
}

/* Slot menu */
.ag-slot-menu {
  background: var(--pos-card) !important;
  border-radius: var(--pos-radius-sm) !important;
  box-shadow: var(--pos-shadow-lg) !important;
  border: 1px solid var(--pos-border) !important;
  overflow: hidden !important;
}
.ag-slot-menu-item {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--pos-text-1) !important;
  min-height: var(--pos-touch) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
}
.ag-slot-menu-item:hover {
  background: var(--pos-blue-light) !important;
  color: var(--pos-blue) !important;
}
.ag-slot-menu-item.groen { color: var(--pos-green) !important; }
.ag-slot-menu-item.blauw { color: var(--pos-blue) !important; }

/* Drag */
.ag-slot.drag-target {
  background: rgba(0,122,255,0.1) !important;
  outline: 2px dashed var(--pos-blue) !important;
  outline-offset: -2px !important;
}
.ag-kapper-body.drag-over {
  outline: 2px dashed var(--pos-blue) !important;
  outline-offset: -2px !important;
}

/* Modal */
.ag-modal {
  border-radius: var(--pos-radius-lg) !important;
  box-shadow: var(--pos-shadow-lg) !important;
  border: 1px solid var(--pos-border) !important;
  font-family: var(--pos-font) !important;
}
.ag-modal h2 {
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
}
.ag-veld label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--pos-text-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.ag-veld input,
.ag-veld select,
.ag-veld textarea {
  border-radius: var(--pos-radius-sm) !important;
  border: 1.5px solid var(--pos-border-mid) !important;
  font-family: var(--pos-font) !important;
  font-size: 14px !important;
  min-height: var(--pos-touch) !important;
  transition: border-color 0.15s ease !important;
}
.ag-veld input:focus,
.ag-veld select:focus,
.ag-veld textarea:focus {
  border-color: var(--pos-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.12) !important;
}

.ag-btn-opslaan {
  background: var(--pos-blue) !important;
  border-radius: var(--pos-radius-pill) !important;
  min-height: var(--pos-touch) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(0,122,255,0.3) !important;
}
.ag-btn-verwijder {
  background: var(--pos-red) !important;
  border-radius: var(--pos-radius-pill) !important;
  min-height: var(--pos-touch) !important;
  font-weight: 600 !important;
  border: none !important;
}
.ag-btn-sluiten {
  border-radius: var(--pos-radius-pill) !important;
  min-height: var(--pos-touch) !important;
  border: 1.5px solid var(--pos-border-mid) !important;
  color: var(--pos-text-2) !important;
  background: transparent !important;
}

/* + Afspraak knop */
.ag-btn-nieuw {
  background: #1c1c1e !important;
  border-radius: var(--pos-radius-pill) !important;
  min-height: 36px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}
.ag-btn-nieuw:hover {
  background: #2c2c2e !important;
}
.ag-btn-nieuw.twijfel {
  background: #c0392b !important;
  box-shadow: 0 2px 8px rgba(192,57,43,0.4) !important;
}

/* Klant suggest */
.ag-klant-suggest-item {
  min-height: var(--pos-touch) !important;
  font-size: 13px !important;
  border-radius: 0 !important;
  transition: background 0.1s ease !important;
}
.ag-klant-suggest-item:hover {
  background: var(--pos-blue-light) !important;
}

/* Zijkolom mini-kalender */
.ag-zijkolom {
  background: rgba(245,247,251,0.95) !important;
  border-right: 1px solid var(--pos-border) !important;
}
.ag-mk-maand-nm {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--pos-text-3) !important;
  letter-spacing: 0.5px !important;
}
.ag-mk-dag {
  border-radius: 7px !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--pos-text-1) !important;
  transition: background 0.1s !important;
}
.ag-mk-dag:hover { background: rgba(0,122,255,0.1) !important; }
.ag-mk-dag.vandaag {
  background: rgba(0,122,255,0.1) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1.5px var(--pos-blue) !important;
}
.ag-mk-dag.actief {
  background: var(--pos-blue) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(0,122,255,0.35) !important;
}
.ag-mk-dag.weekend { color: var(--pos-text-4) !important; }
.ag-mk-dh {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: var(--pos-text-4) !important;
}
.ag-zij-vandaag {
  background: var(--pos-green) !important;
  border-radius: var(--pos-radius-pill) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(52,199,89,0.3) !important;
  border: none !important;
}
.ag-zij-week-btn {
  border-radius: var(--pos-radius-sm) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border: 1px solid var(--pos-border-mid) !important;
  color: var(--pos-text-2) !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.12s !important;
}
.ag-zij-week-btn:hover {
  background: var(--pos-blue) !important;
  color: #fff !important;
  border-color: var(--pos-blue) !important;
}

/* Notitie kolom */
.ag-notitie-col {
  background: rgba(248,250,255,0.8) !important;
  border-left: 1px dashed rgba(0,0,0,0.1) !important;
}
.ag-nregel {
  font-size: 10px !important;
  color: var(--pos-text-2) !important;
}
.ag-nregel:focus {
  background: rgba(0,122,255,0.05) !important;
}

/* Scrollbars */
.ag-wrap::-webkit-scrollbar,
.ag-zijkolom::-webkit-scrollbar { width: 5px; height: 5px; }
.ag-wrap::-webkit-scrollbar-track,
.ag-zijkolom::-webkit-scrollbar-track { background: transparent; }
.ag-wrap::-webkit-scrollbar-thumb,
.ag-zijkolom::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 99px;
}
.ag-wrap::-webkit-scrollbar-thumb:hover,
.ag-zijkolom::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

/* Klant popup */
#ag-klant-popup {
  border-radius: var(--pos-radius-lg) !important;
  box-shadow: var(--pos-shadow-lg) !important;
  border: 1px solid var(--pos-border) !important;
}
.ag-kp-titel {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--pos-text-1) !important;
}
.ag-kp-opslaan {
  background: var(--pos-blue) !important;
  border-radius: var(--pos-radius-pill) !important;
  min-height: var(--pos-touch) !important;
  font-weight: 600 !important;
  border: none !important;
}
.ag-kp-sluiten {
  border-radius: var(--pos-radius-pill) !important;
  min-height: var(--pos-touch) !important;
  border: 1.5px solid var(--pos-border-mid) !important;
}
.ag-kp-naar-kaart {
  font-size: 13px !important;
  color: var(--pos-blue) !important;
  font-weight: 500 !important;
}

/* ============================================================
 * 5. KLANTEN MODULE
 * ============================================================ */
.kl-wrap,
.pos-klanten-wrap {
  font-family: var(--pos-font) !important;
  background: var(--pos-bg) !important;
}

/* Klantkaart */
.kl-kaart,
.klant-card,
[class*="kl-card"] {
  background: var(--pos-card) !important;
  border-radius: var(--pos-radius-md) !important;
  border: 1px solid var(--pos-border) !important;
  box-shadow: var(--pos-shadow-sm) !important;
  padding: 16px !important;
}

/* Inputs in klanten module */
.kl-input, .kl-select,
.pos-klanten-wrap input,
.pos-klanten-wrap select {
  border-radius: var(--pos-radius-sm) !important;
  border: 1.5px solid var(--pos-border-mid) !important;
  min-height: var(--pos-touch) !important;
  font-family: var(--pos-font) !important;
  font-size: 14px !important;
  transition: border-color 0.15s !important;
}
.pos-klanten-wrap input:focus,
.pos-klanten-wrap select:focus {
  border-color: var(--pos-blue) !important;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.12) !important;
  outline: none !important;
}

/* Klant zoekbalk */
#kl-zoek-input,
.kl-zoek {
  border-radius: var(--pos-radius-pill) !important;
  padding-left: 16px !important;
}

/* Klant lijst items */
.kl-item,
.klant-item,
[class*="kl-row"] {
  border-radius: var(--pos-radius-sm) !important;
  min-height: var(--pos-touch) !important;
  transition: background 0.1s !important;
}
.kl-item:hover { background: var(--pos-blue-light) !important; }

/* Knoppen */
.kl-btn-opslaan,
.pos-klanten-wrap button[type="submit"],
.pos-klanten-wrap .btn-primary {
  background: var(--pos-blue) !important;
  border-radius: var(--pos-radius-pill) !important;
  min-height: var(--pos-touch) !important;
  font-weight: 600 !important;
  border: none !important;
  font-family: var(--pos-font) !important;
}
.kl-btn-verwijder,
.pos-klanten-wrap .btn-danger {
  background: var(--pos-red) !important;
  border-radius: var(--pos-radius-pill) !important;
  min-height: var(--pos-touch) !important;
  border: none !important;
}

/* ============================================================
 * 6. SNIPPERKAART
 * ============================================================ */
.snip-wrap,
.pos-snipperkaart-wrap {
  font-family: var(--pos-font) !important;
  background: var(--pos-bg) !important;
}

/* Kalender tabel */
.snip-kalender table,
.snipperkaart-kalender {
  border-radius: var(--pos-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--pos-shadow-sm) !important;
  border: 1px solid var(--pos-border) !important;
}

.snip-kalender th,
.snipperkaart-kalender th {
  background: var(--pos-bg-2) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--pos-text-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Dag cellen */
.snip-dag-vrij    { background: var(--pos-green-light) !important; color: #1a7a35 !important; }
.snip-dag-verlof  { background: rgba(94,92,230,0.1) !important; color: var(--pos-purple) !important; }
.snip-dag-feest   { background: rgba(255,149,0,0.1) !important; color: #a05000 !important; }
.snip-dag-school  { background: rgba(0,122,255,0.08) !important; color: var(--pos-blue) !important; }

/* Aanvraag knoppen */
.snip-btn-aanvraag,
.pos-snipperkaart-wrap button {
  border-radius: var(--pos-radius-pill) !important;
  min-height: var(--pos-touch) !important;
  font-weight: 600 !important;
  font-family: var(--pos-font) !important;
  font-size: 13px !important;
}

/* ============================================================
 * 7. VERLOF MODULE
 * ============================================================ */
.vl-wrap,
.pos-verlof-wrap {
  font-family: var(--pos-font) !important;
  background: var(--pos-bg) !important;
}

.vl-card,
.verlof-card {
  background: var(--pos-card) !important;
  border-radius: var(--pos-radius-md) !important;
  border: 1px solid var(--pos-border) !important;
  box-shadow: var(--pos-shadow-sm) !important;
}

/* Status badges */
.vl-status-goedgekeurd { background: var(--pos-green-light) !important; color: #1a7a35 !important; border-radius: var(--pos-radius-pill) !important; }
.vl-status-afgewezen   { background: var(--pos-red-light) !important;   color: var(--pos-red) !important;   border-radius: var(--pos-radius-pill) !important; }
.vl-status-wacht       { background: #fff8e1 !important; color: #7c5a00 !important; border-radius: var(--pos-radius-pill) !important; }

/* ============================================================
 * 8. UNIVERSELE INPUTS & SELECTS
 * ============================================================ */
body.pos-mode input[type="text"],
body.pos-mode input[type="date"],
body.pos-mode input[type="time"],
body.pos-mode input[type="tel"],
body.pos-mode input[type="email"],
body.pos-mode input[type="number"],
body.pos-mode select,
body.pos-mode textarea,
.pos-topbalk ~ * input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.pos-topbalk ~ * select {
  font-family: var(--pos-font) !important;
  border-radius: var(--pos-radius-sm) !important;
  border: 1.5px solid var(--pos-border-mid) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
body.pos-mode input:focus,
body.pos-mode select:focus,
body.pos-mode textarea:focus {
  border-color: var(--pos-blue) !important;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.12) !important;
  outline: none !important;
}

/* ============================================================
 * 9. PIN OVERLAY
 * ============================================================ */
#pos-pin-overlay {
  background: linear-gradient(145deg, #1c1c1e 0%, #2c2c2e 100%) !important;
}
#pos-pin-overlay > div {
  border-radius: var(--pos-radius-lg) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important;
}
#pos-pin-input {
  border-radius: var(--pos-radius-sm) !important;
  border: 1.5px solid var(--pos-border-mid) !important;
  font-size: 24px !important;
  letter-spacing: 8px !important;
}
#pos-pin-btn {
  background: var(--pos-blue) !important;
  border-radius: var(--pos-radius-pill) !important;
  min-height: var(--pos-touch) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  box-shadow: 0 2px 12px rgba(0,122,255,0.4) !important;
}

/* ============================================================
 * 10. AFREKENINGEN RAPPORT
 * ============================================================ */
.afrk-wrap { font-family: var(--pos-font) !important; }

.afrk-filter {
  border-radius: var(--pos-radius-md) !important;
  border: 1px solid var(--pos-border) !important;
  box-shadow: var(--pos-shadow-sm) !important;
}
.afrk-filter input,
.afrk-filter select {
  border-radius: var(--pos-radius-sm) !important;
  border: 1.5px solid var(--pos-border-mid) !important;
  min-height: 36px !important;
  font-family: var(--pos-font) !important;
}
.afrk-filter button {
  background: var(--pos-blue) !important;
  border-radius: var(--pos-radius-pill) !important;
  min-height: var(--pos-touch) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0,122,255,0.25) !important;
}

.afrk-tile {
  border-radius: var(--pos-radius-md) !important;
  border: 1px solid var(--pos-border) !important;
  box-shadow: var(--pos-shadow-sm) !important;
}
.afrk-tile-val {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
}

.afrk-tabel {
  border-radius: var(--pos-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--pos-shadow-sm) !important;
}
.afrk-tabel th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--pos-text-3) !important;
}
.afrk-tabel td { font-size: 13px !important; }
.afrk-tabel tr:hover td { background: rgba(0,122,255,0.04) !important; }
.badge-pin     { background: var(--pos-blue-light) !important; color: var(--pos-blue) !important; border-radius: var(--pos-radius-pill) !important; font-weight: 600 !important; }
/* ============================================================
 * 12. TOEGANKELIJKHEID & TOUCH
 * ============================================================ */
/* Focusring voor keyboard navigatie */
:focus-visible {
  outline: 3px solid var(--pos-blue) !important;
  outline-offset: 2px !important;
}
/* Geen outline bij muisklik */
:focus:not(:focus-visible) {
  outline: none !important;
}
/* Touch-friendly tap areas */
@media (pointer: coarse) {
  .ag-slot { min-height: 22px !important; }
  .ag-afsp-btn { min-width: 32px !important; min-height: 32px !important; }
  .ag-mk-dag { min-height: 26px !important; min-width: 22px !important; }
}