/*
 * pos-ipad-theme.css — i-Kassa Smart POS v4.0.0
 * Apple/iPad design system — clean override layer
 * ============================================================
 */

/* ── Design tokens ──────────────────────────────────────── */
:root {
  --p-bg:       #f5f7fb;
  --p-card:     #ffffff;
  --p-grey:     #d4dde3;
  --p-blue:     #007aff;
  --p-blue-dim: rgba(0,122,255,0.10);
  --p-purple:   #5e5ce6;
  --p-green:    #34c759;
  --p-green-dim:rgba(52,199,89,0.12);
  --p-red:      #ff3b30;
  --p-red-dim:  rgba(255,59,48,0.10);
  --p-t1: #1c1c1e; --p-t2: #3a3a3c; --p-t3: #636366; --p-t4: #aeaeb2;
  --p-border:     rgba(60,60,67,0.10);
  --p-border-mid: rgba(60,60,67,0.18);
  --p-s1: 0 1px 3px rgba(0,0,0,0.07), 0 0 0 0.5px rgba(0,0,0,0.05);
  --p-s2: 0 4px 14px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
  --p-s3: 0 12px 36px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
  --p-s4: 0 24px 60px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.10);
  --p-r-sm: 8px; --p-r-md: 12px; --p-r-lg: 18px; --p-r-pill: 999px;
  --p-touch: 44px;
  --p-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Arial, sans-serif;
}

/* ── Basis ──────────────────────────────────────────────── */
body, .ag-pagina, .pos-klanten-wrap, .pos-verlof-wrap,
.pos-snipperkaart-wrap, .afrk-wrap {
  font-family: var(--p-font);
  -webkit-font-smoothing: antialiased;
  background: var(--p-bg);
  color: var(--p-t1);
}
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.18) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 99px; }
:focus-visible { outline: 2px solid var(--p-blue); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ── 1. Topbalk ─────────────────────────────────────────── */
.pos-topbalk {
  background: rgba(255,255,255,0.88) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--p-border) !important;
  box-shadow: 0 0.5px 0 var(--p-border) !important;
  height: 52px !important;
}
.pos-module-naam {
  font-size: 16px !important; font-weight: 600 !important;
  letter-spacing: -0.3px !important; color: var(--p-t1) !important;
}
.pos-nav-icon-btn {
  width: 36px !important; height: 36px !important; border-radius: 50% !important;
  background: var(--p-card) !important; border: 0.5px solid var(--p-border-mid) !important;
  box-shadow: var(--p-s1) !important; transition: box-shadow 0.15s, transform 0.12s !important;
}
.pos-nav-icon-btn:hover { box-shadow: var(--p-s2) !important; transform: scale(1.05) !important; }

/* ── 2. Kassa ───────────────────────────────────────────── */
body.pos-mode { background: var(--p-bg) !important; }
body.pos-mode .pos-btn {
  background: var(--p-card) !important; border: 0.5px solid var(--p-border) !important;
  border-radius: var(--p-r-md) !important; box-shadow: var(--p-s1) !important;
  transition: transform 0.10s, box-shadow 0.10s, border-color 0.10s !important;
  font-family: var(--p-font) !important; min-height: var(--p-touch) !important;
}
body.pos-mode .pos-btn:hover {
  box-shadow: var(--p-s2) !important; transform: translateY(-1px) !important;
  border-color: var(--p-blue) !important;
}
body.pos-mode .pos-btn:active { transform: scale(0.97) !important; }
body.pos-mode .pos-btn-name { font-size: 12px !important; font-weight: 600 !important; color: var(--p-t1) !important; }
body.pos-mode .pos-btn-meta, body.pos-mode .pos-price { font-size: 11px !important; color: var(--p-t3) !important; }
body.pos-mode .pos-card {
  background: var(--p-card) !important; border-radius: var(--p-r-lg) !important;
  border: 0.5px solid var(--p-border) !important; box-shadow: var(--p-s1) !important;
}
body.pos-mode .pos-pick span {
  border-radius: var(--p-r-pill) !important; min-height: 38px !important;
  font-size: 13px !important; font-weight: 500 !important; border: 1px solid var(--p-border-mid) !important;
  transition: all 0.12s !important;
}
body.pos-mode .pos-pick input:checked + span {
  background: var(--p-blue) !important; border-color: var(--p-blue) !important;
  color: #fff !important; box-shadow: 0 2px 8px rgba(0,122,255,0.28) !important;
}
.pos-betaal-pin   { background: var(--p-blue) !important; border-radius: var(--p-r-md) !important; }
.pos-betaal-contant { background: var(--p-green) !important; border-radius: var(--p-r-md) !important; }

/* ── 3. Inputs ──────────────────────────────────────────── */
input[type="text"], input[type="date"], input[type="time"], input[type="tel"],
input[type="email"], input[type="number"], input[type="password"], select, textarea {
  font-family: var(--p-font) !important; border-radius: var(--p-r-sm) !important;
  border: 1px solid var(--p-border-mid) !important;
  transition: border-color 0.12s, box-shadow 0.12s !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--p-blue) !important;
  box-shadow: 0 0 0 3px var(--p-blue-dim) !important; outline: none !important;
}

/* ── 4. Knoppen ─────────────────────────────────────────── */
.ag-btn-opslaan {
  background: var(--p-blue) !important; border-radius: var(--p-r-pill) !important;
  min-height: var(--p-touch) !important; font-weight: 600 !important;
  border: none !important; box-shadow: 0 2px 10px rgba(0,122,255,0.28) !important;
  font-family: var(--p-font) !important;
}
.ag-btn-verwijder {
  background: var(--p-red-dim) !important; color: var(--p-red) !important;
  border-radius: var(--p-r-pill) !important; min-height: var(--p-touch) !important;
  border: 1px solid rgba(255,59,48,0.25) !important; font-weight: 600 !important;
}
.ag-btn-verwijder:hover { background: var(--p-red) !important; color: #fff !important; }
.ag-btn-sluiten {
  background: var(--p-card) !important; border: 1px solid var(--p-border-mid) !important;
  border-radius: var(--p-r-pill) !important; min-height: var(--p-touch) !important;
  font-weight: 500 !important; color: var(--p-t2) !important;
}
.ag-btn-nieuw {
  background: var(--p-t1) !important; border-radius: var(--p-r-pill) !important;
  color: #fff !important; font-weight: 700 !important; font-size: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22) !important; border: none !important;
}
.ag-btn-nieuw:hover { background: #2c2c2e !important; }
.ag-btn-nieuw.twijfel {
  background: var(--p-red) !important;
  box-shadow: 0 2px 8px rgba(255,59,48,0.35) !important;
}

/* ── 5. Agenda grid ─────────────────────────────────────── */
.ag-pagina, .ag-wrap { background: var(--p-bg) !important; }
.ag-slot.uur  { border-top: 1px solid rgba(0,0,0,0.12) !important; }
.ag-slot.half { border-top: 1px solid rgba(0,0,0,0.07) !important; }
.ag-slot:hover { background: rgba(59,130,246,0.08) !important; }
.ag-time-cell { color: var(--p-t4) !important; font-size: 10px !important; }
.ag-time-cell.uur { color: var(--p-t3) !important; font-size: 11px !important; font-weight: 500 !important; }
.ag-head-kapper {
  font-size: 12px !important; font-weight: 600 !important; color: var(--p-t2) !important;
  background: var(--p-card) !important; border-bottom: 0.5px solid var(--p-border) !important;
}

/* ── 6. Afspraak kaarten ────────────────────────────────── */
.ag-afspraak {
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.16), inset 0 0 0 0.5px rgba(255,255,255,0.20) !important;
  border-left-width: 3px !important;
  transition: transform 0.10s, box-shadow 0.10s !important;
}
.ag-afspraak:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22), inset 0 0 0 0.5px rgba(255,255,255,0.25) !important;
}
.ag-afsp-naam { font-size: 12px !important; font-weight: 700 !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.18) !important; }
.ag-afsp-product { font-size: 10px !important; font-weight: 400 !important; color: rgba(255,255,255,0.78) !important; }
.ag-afsp-tijd { font-size: 10px !important; color: rgba(255,255,255,0.65) !important; }
.ag-afsp-duur {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 34px !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1.2 !important;
  background: rgba(0,0,0,0.18) !important; color: rgba(255,255,255,0.90) !important;
  border-radius: 999px !important; padding: 2px 7px !important;
}
.ag-afsp-duur.verlengd {
  background: #dc2626 !important; color: #fff !important; font-weight: 800 !important;
}
.ag-afsp-duur.verkort {
  background: #16a34a !important; color: #fff !important; font-weight: 800 !important;
}
.ag-afsp-vergrendeld { opacity: 0.60 !important; cursor: default !important; }

/* ── 7. Vrije tijd — één basistint ─────────────────────── */
.ag-pauze-blok {
  background: var(--p-grey) !important;
  border-top: 1px solid #fff !important; border-bottom: 1px solid #fff !important;
  border-left: none !important; border-right: none !important;
  border-radius: 0 !important; backdrop-filter: none !important;
}
.ag-pauze-blok-label {
  font-size: 9px !important; font-weight: 600 !important; color: var(--p-t3) !important;
  background: rgba(255,255,255,0.60) !important; padding: 1px 5px !important; border-radius: 4px !important;
}
.ag-slot.buiten-werk {
  background: var(--p-grey) !important; cursor: default !important;

}
.ag-slot.buiten-werk:hover { background: rgba(0,0,0,0.05) !important; }
.ag-slot.buiten-salon {
  background: var(--p-grey) !important; cursor: default !important;

}
.ag-kapper-body.kapper-vrij {
  background: var(--p-grey) !important;
  border-left: 1px solid rgba(255,255,255,0.55) !important;
  border-right: 1px solid rgba(255,255,255,0.55) !important;
}
.ag-kapper-body.kapper-vrij .ag-slot {
  background: var(--p-grey) !important;
  border-top: 1px solid rgba(255,255,255,0.4) !important;
}

/* ── 8. Nu-lijn ─────────────────────────────────────────── */
.ag-nu-lijn { height: 2px !important; background: var(--p-red) !important; box-shadow: 0 0 6px rgba(255,59,48,0.50) !important; }
.ag-nu-lijn::before { width: 8px !important; height: 8px !important; background: var(--p-red) !important; }

/* ── 9. Slot menu ───────────────────────────────────────── */
.ag-slot-menu { background: transparent !important; border: none !important; box-shadow: none !important; }
.ag-slot-menu-item {
  background: var(--p-card) !important; color: var(--p-blue) !important;
  border: 1px solid var(--p-blue) !important; border-radius: 6px !important;
  font-size: 11px !important; font-weight: 700 !important; padding: 4px 8px !important;
  min-height: unset !important; display: block !important; text-align: center !important;
}
.ag-slot-menu-item:hover { background: var(--p-blue-dim) !important; }
.ag-slot.buiten-werk .ag-slot-menu-item,
.ag-slot.buiten-salon .ag-slot-menu-item,
.ag-slot.pauze-slot .ag-slot-menu-item,
.ag-kapper-body.kapper-vrij .ag-slot .ag-slot-menu-item {
  background: #f0f0f0 !important; color: var(--p-red) !important; border-color: #b0b8be !important;
}
.ag-slot.buiten-werk .ag-slot-menu-item:hover,
.ag-slot.buiten-salon .ag-slot-menu-item:hover,
.ag-slot.pauze-slot .ag-slot-menu-item:hover,
.ag-kapper-body.kapper-vrij .ag-slot .ag-slot-menu-item:hover { background: #e4e8eb !important; }

/* ── 10. Modal ──────────────────────────────────────────── */
.ag-modal { border-radius: var(--p-r-lg) !important; box-shadow: var(--p-s4) !important; font-family: var(--p-font) !important; }
.ag-veld label { font-size: 10px !important; font-weight: 700 !important; color: var(--p-t3) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }

/* ── 11. Mini kalender ──────────────────────────────────── */
.ag-zijkolom { background: rgba(245,247,251,0.95) !important; border-right: 0.5px solid var(--p-border) !important; }
.ag-mk-dag { border-radius: 6px !important; font-size: 11px !important; color: var(--p-t2) !important; transition: background 0.08s !important; }
.ag-mk-dag:hover   { background: var(--p-blue-dim) !important; }
.ag-mk-dag.vandaag { box-shadow: inset 0 0 0 1.5px var(--p-blue) !important; color: var(--p-blue) !important; font-weight: 700 !important; }
.ag-mk-dag.actief  { background: var(--p-blue) !important; color: #fff !important; font-weight: 700 !important; }
.ag-mk-dag.weekend { color: var(--p-t4) !important; }
.ag-mk-dh { font-size: 9px !important; font-weight: 600 !important; color: var(--p-t4) !important; }
.ag-zij-vandaag { background: var(--p-green) !important; border-radius: var(--p-r-pill) !important; border: none !important; font-size: 12px !important; font-weight: 600 !important; }
.ag-zij-week-btn { border-radius: var(--p-r-sm) !important; font-size: 11px !important; font-weight: 600 !important; border: 1px solid var(--p-border-mid) !important; min-height: 34px !important; }
.ag-zij-week-btn:hover { background: var(--p-blue) !important; color: #fff !important; border-color: var(--p-blue) !important; }

/* ── 12. Drag & Drop ────────────────────────────────────── */
.ag-slot.drag-target { background: var(--p-blue-dim) !important; outline: 1.5px dashed var(--p-blue) !important; outline-offset: -2px !important; }
.ag-kapper-body.drag-over { outline: 1.5px dashed var(--p-blue) !important; outline-offset: -2px !important; }

/* ── 13. Klanten ────────────────────────────────────────── */
.kl-kaart, .klant-card { background: var(--p-card) !important; border-radius: var(--p-r-md) !important; border: 0.5px solid var(--p-border) !important; box-shadow: var(--p-s1) !important; }
.kl-item:hover { background: var(--p-blue-dim) !important; border-radius: var(--p-r-sm) !important; }

/* ── 14. Snipperkaart ───────────────────────────────────── */
.dag-cel { border-radius: 7px !important; transition: transform 0.08s, box-shadow 0.08s !important; }
.dag-cel:not(.leeg):hover { transform: scale(1.08) !important; box-shadow: var(--p-s2) !important; }
.dag-cel.vandaag { box-shadow: inset 0 0 0 1.5px var(--p-blue) !important; }
.modal-overlay { backdrop-filter: blur(4px) !important; }
.modal-box { border-radius: var(--p-r-lg) !important; box-shadow: var(--p-s4) !important; font-family: var(--p-font) !important; }

/* ── 15. Verlof ─────────────────────────────────────────── */
.vl-card, .verlof-card { background: var(--p-card) !important; border-radius: var(--p-r-md) !important; border: 0.5px solid var(--p-border) !important; box-shadow: var(--p-s1) !important; }

/* ── 16. Rapport ────────────────────────────────────────── */
.afrk-filter { border-radius: var(--p-r-md) !important; border: 0.5px solid var(--p-border) !important; box-shadow: var(--p-s1) !important; background: var(--p-card) !important; }
.afrk-tile   { border-radius: var(--p-r-md) !important; border: 0.5px solid var(--p-border) !important; box-shadow: var(--p-s1) !important; background: var(--p-card) !important; }
.afrk-tabel  { border-radius: var(--p-r-md) !important; overflow: hidden !important; box-shadow: var(--p-s1) !important; }
.afrk-tabel th { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: var(--p-t3) !important; }
.afrk-tabel tr:hover td { background: var(--p-blue-dim) !important; }
.badge-pin     { background: var(--p-blue-dim) !important; color: var(--p-blue) !important; border-radius: var(--p-r-pill) !important; font-weight: 700 !important; }
.badge-contant { background: var(--p-green-dim) !important; color: #1a7a35 !important; border-radius: var(--p-r-pill) !important; font-weight: 700 !important; }

/* ── 17. PIN overlay ────────────────────────────────────── */
#pos-pin-overlay { background: linear-gradient(145deg, #1c1c1e 0%, #2c2c2e 100%) !important; }
#pos-pin-btn { background: var(--p-blue) !important; border-radius: var(--p-r-pill) !important; min-height: var(--p-touch) !important; font-weight: 600 !important; }

/* ── 18. Responsive ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .pos-topbalk { height: 50px !important; }
  .ag-zijkolom { width: 148px !important; }
  .ag-afsp-naam { font-size: 11px !important; }
}
@media (max-width: 768px) {
  .pos-topbalk { padding: 0 10px !important; }
  .pos-module-naam { font-size: 14px !important; }
}
@media (pointer: coarse) {
  .ag-mk-dag { min-height: 24px !important; min-width: 20px !important; }
  .ag-slot { min-height: 20px !important; }
}

/* Stabilisatie 1: iPad/Safari badge niet als lijn renderen */
body.pos-mode .ag-afsp-duur.verlengd,
body.pos-mode .ag-afsp-duur.verkort {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 16px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.pos-mode .ag-afsp-duur.verlengd { background-color: #dc2626 !important; color: #fff !important; }
body.pos-mode .ag-afsp-duur.verkort { background-color: #16a34a !important; color: #fff !important; }


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