/* DreamPOS UI consistency layer
   Eén visuele grammatica voor de interne POS. Deze laag staat bewust als laatste
   stylesheet: oude modules mogen hun layout houden, maar delen typografie,
   focus, selectie, velden, knoppen en oppervlakken. */
:root {
  --dp-font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dp-font-size-xs: 11px;
  --dp-font-size-sm: 12px;
  --dp-font-size-md: 13px;
  --dp-font-size-lg: 16px;
  --dp-font-size-xl: 20px;
  --dp-weight-normal: 400;
  --dp-weight-medium: 500;
  --dp-weight-semibold: 600;
  --dp-weight-bold: 700;
  --dp-radius-control: 10px;
  --dp-radius-card: 12px;
  --dp-radius-window: 16px;
  --dp-control-h: 40px;
  --dp-touch-h: 44px;
  --dp-focus-ring: 0 0 0 3px rgba(212, 132, 92, .25);
  --dp-selected-bg: var(--accent-bg);
  --dp-selected-fg: var(--accent);
  --dp-selected-border: var(--accent);
  --dp-surface: var(--bg-secondary);
  --dp-surface-raised: var(--bg-tertiary);
}

/* Typografie: systeemschermen gebruiken één familie en een beperkte schaal. */
html, body, #mainApp,
#mainApp button, #mainApp input, #mainApp select, #mainApp textarea,
.menu-overlay, .menu-overlay button, .menu-overlay input,
.menu-overlay select, .menu-overlay textarea,
.dpw, .dpw button, .dpw input, .dpw select, .dpw textarea {
  font-family: var(--dp-font-ui) !important;
}

#mainApp button, .menu-overlay button, .dpw button {
  line-height: 1.2;
}

#mainApp h1, .menu-overlay h1, .dpw h1 { font-size: var(--dp-font-size-xl); font-weight: var(--dp-weight-bold); }
#mainApp h2, .menu-overlay h2, .dpw h2 { font-size: 18px; font-weight: var(--dp-weight-bold); }
#mainApp h3, .menu-overlay h3, .dpw h3 { font-size: var(--dp-font-size-lg); font-weight: var(--dp-weight-bold); }

/* Formulieren: één hoogte, radius en focusbehandeling. Uitzonderingen zoals
   rekenmachine, PIN en aantallen behouden hun doelgerichte formaat. */
#mainApp input:not([type="checkbox"]):not([type="radio"]):not(.qty-input),
#mainApp select,
#mainApp textarea,
.menu-overlay input:not([type="checkbox"]):not([type="radio"]):not(.qty-input),
.menu-overlay select,
.menu-overlay textarea,
.dp-input, .s-input, .md-input, .md-select, .md-textarea {
  box-sizing: border-box;
  border-radius: var(--dp-radius-control) !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  font-size: var(--dp-font-size-md) !important;
  font-weight: var(--dp-weight-normal);
}

#mainApp input:not([type="checkbox"]):not([type="radio"]):not(.qty-input),
#mainApp select,
.menu-overlay input:not([type="checkbox"]):not([type="radio"]):not(.qty-input),
.menu-overlay select {
  min-height: var(--dp-control-h);
}

/* Een zichtbare toetsenbordfocus blijft altijd bestaan, ook waar oude inline
   code outline:none gebruikte. */
#mainApp :is(button, a, input, select, textarea, [tabindex]):focus-visible,
.menu-overlay :is(button, a, input, select, textarea, [tabindex]):focus-visible,
.dpw :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  box-shadow: var(--dp-focus-ring) !important;
}

/* Standaard bedieningsknoppen. Grote kassategels, tafelkaarten, numpad- en
   hoeveelheidsknoppen vallen hier bewust buiten. */
#mainApp button:not(.nav-item):not(.menu-item-card):not(.table-card):not(.keypad-btn):not(.pin-key):not(.qty-btn):not(.mobile-nav-item),
.menu-overlay button:not(.menu-item-card):not(.keypad-btn):not(.pin-key):not(.qty-btn),
.dpw button {
  border-radius: var(--dp-radius-control);
  font-size: var(--dp-font-size-md) !important;
  font-weight: var(--dp-weight-semibold) !important;
}

.dp-btn, .s-btn, .md-btn,
.dp-button, .dp-button-secondary, .dp-button-primary,
.pers-inline-btn {
  min-height: var(--dp-control-h);
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--dp-radius-control) !important;
  font-size: var(--dp-font-size-md) !important;
  font-weight: var(--dp-weight-semibold) !important;
}

/* Systeemiconen hebben een vaste 36px-trefzone; tekstknoppen blijven 13px. */
:is(.menu-close-btn, .dpw-btn, .dp-icon-btn) {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--dp-radius-control) !important;
}
:is(.menu-close-btn, .dpw-x, .dpw-uptools .dpw-btn) { font-size: 18px !important; }
.dpw-context-btn { width: auto !important; min-width: 40px !important; padding: 0 10px !important; font-size: var(--dp-font-size-md) !important; }

.dp-btn-primary, .dp-button-primary, .s-btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.dp-btn:not(.dp-btn-primary), .dp-button-secondary, .s-btn:not(.s-btn-primary):not(.s-btn-success):not(.s-btn-danger), .md-btn-s {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

/* Statuskleuren hebben voortaan elk één betekenis. */
.s-btn-success, .dp-btn-success, [data-variant="success"] { background: var(--success) !important; color: #fff !important; }
.s-btn-danger, .dp-btn-danger, [data-variant="danger"] { border-color: var(--danger) !important; color: var(--danger) !important; }

/* Selectiegrammatica:
   navigatie = accentlijn; tabs = onderlijn; keuzes = gevuld; kaarten = kader. */
:is(.nav-item, .dp-nav-item, .s-tab).active {
  color: var(--dp-selected-fg) !important;
  background: var(--dp-selected-bg) !important;
  border-left-color: var(--dp-selected-border) !important;
  font-weight: var(--dp-weight-bold) !important;
}

:is(.tab-item, .s-inner-tab, .tab-pro).active {
  color: var(--dp-selected-fg) !important;
  background: transparent !important;
  border-bottom-color: var(--dp-selected-border) !important;
  font-weight: var(--dp-weight-bold) !important;
}

:is(.sys-tab, .order-type-tab, .split-tab, .filter-btn)[aria-pressed="true"],
:is(.sys-tab, .order-type-tab, .split-tab, .filter-btn, .pers-tab-btn, .disc-btn, .tip-btn, .u-btn-tile-11).active,
:is(.pers-tab-btn, .disc-btn, .tip-btn, .u-btn-tile-11)[aria-pressed="true"],
.pers-tab-btn[aria-selected="true"] {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Hoofdnavigatie en schermkoppen */
#mainSidebar .nav-item {
  min-height: 42px;
  border-radius: var(--dp-radius-control) !important;
  font-size: var(--dp-font-size-md) !important;
  font-weight: var(--dp-weight-semibold) !important;
}

.header-title { font-size: var(--dp-font-size-lg) !important; font-weight: var(--dp-weight-bold) !important; }
.section-title, .section-title-pro { font-size: 18px !important; font-weight: var(--dp-weight-bold) !important; }

/* Home, tafels en bestellingen delen dezelfde kaarttaal. Status blijft zichtbaar
   via rand + zachte tint, niet via willekeurige volledige kleuren. */
:is(.order-card, .stat-card, .table-card, .table-card-pro) {
  border-radius: var(--dp-radius-card) !important;
  box-shadow: none !important;
}

.order-card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
}
.order-title { color: var(--text-primary) !important; font-size: 14px !important; font-weight: var(--dp-weight-semibold) !important; }
.order-meta { color: var(--text-muted) !important; font-size: var(--dp-font-size-sm) !important; }
.order-price { color: var(--text-primary) !important; font-size: var(--dp-font-size-lg) !important; font-weight: var(--dp-weight-bold) !important; }

.table-card.available { border-color: #3f8f69 !important; background: rgba(34, 197, 94, .07) !important; }
.table-card.occupied { border-color: #a84f55 !important; background: rgba(239, 68, 68, .08) !important; }
.table-card.reserved { border-color: #a47a32 !important; background: rgba(245, 158, 11, .07) !important; }
.table-number { color: var(--text-primary) !important; font-size: 20px !important; font-weight: var(--dp-weight-bold) !important; }
.table-zone { color: var(--text-muted) !important; font-size: var(--dp-font-size-xs) !important; }

.stat-card { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; }
.stat-label { color: var(--text-muted) !important; font-size: var(--dp-font-size-sm) !important; }
.stat-value { color: var(--text-primary); font-weight: var(--dp-weight-bold); }

/* Rapportacties worden één familie; kleur duidt status aan, niet elk rapporttype. */
#reportsSection .reports-action-btn {
  min-height: var(--dp-control-h);
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}
#reportsSection .reports-action-btn:hover { border-color: var(--accent) !important; }
#reportsSection .reports-action-export { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }

/* Betaling: dezelfde keuzevorm voor methode, fooi en korting. */
#paymentModal :is(.u-btn-tile-11, .tip-btn, .disc-btn) {
  min-height: var(--dp-control-h);
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}
#paymentModal :is(.u-btn-tile-11, .tip-btn, .disc-btn).active,
#paymentModal :is(.u-btn-tile-11, .tip-btn, .disc-btn)[aria-pressed="true"] {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

:is(.md-hcard, .md-tpl, .layout-preset, .grid-config-btn).sel,
:is(.md-hcard, .md-tpl, .layout-preset, .grid-config-btn).active,
:is([role="option"], [role="gridcell"], [data-selectable-card])[aria-selected="true"] {
  background: var(--dp-selected-bg) !important;
  border-color: var(--dp-selected-border) !important;
  color: var(--text-primary) !important;
}

/* Oppervlakken: slechts drie radiussen. */
:is(.dp-card, .dp-card-elevated, .s-card, .s-link-card, .section,
    .md-hcard, .md-tpl, .md-gang, .md-weekday, .md-saved-item) {
  border-radius: var(--dp-radius-card) !important;
}

.menu-modal, .dpw { border-radius: var(--dp-radius-window); }

/* Badges en statussen: gelijke vorm en typografie; kleur blijft semantisch. */
:is(.s-badge, .badge-pro, .status-badge, .nav-badge) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px !important;
  font-size: var(--dp-font-size-xs) !important;
  font-weight: var(--dp-weight-semibold) !important;
  line-height: 1.2;
}
:is(.s-badge-green, .badge-success, .status-success) { background: rgba(34, 197, 94, .14) !important; color: var(--success) !important; }
:is(.badge-danger, .status-danger, .status-error) { background: rgba(239, 68, 68, .14) !important; color: var(--danger) !important; }
:is(.badge-warning, .status-warning) { background: rgba(245, 158, 11, .15) !important; color: var(--warning) !important; }
:is(.badge-info, .status-info) { background: rgba(59, 130, 246, .14) !important; color: var(--info) !important; }

/* Schakelaars delen dezelfde aan/uitbetekenis. */
.s-toggle {
  border: 1px solid var(--border-color);
  box-shadow: none !important;
}
.s-toggle-on { background: var(--success) !important; border-color: var(--success) !important; }
.s-toggle-off { background: var(--bg-hover) !important; border-color: var(--border-color) !important; }

/* Uitgeschakelde bediening oogt overal hetzelfde en blijft leesbaar. */
#mainApp :is(button, input, select, textarea):disabled,
.menu-overlay :is(button, input, select, textarea):disabled,
.dpw :is(button, input, select, textarea):disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
  filter: saturate(.6);
}

/* Labels en hulptekst zijn rustig; belangrijke inhoud hoeft niet allemaal bold. */
:is(.t-label, .t-label-lg, .s-form-label, .md-label, .u-field-label) {
  font-size: var(--dp-font-size-sm) !important;
  font-weight: var(--dp-weight-semibold) !important;
  color: var(--text-secondary) !important;
}

:is(.t-small, .s-panel-desc, .s-section-desc, .s-link-card-desc,
    .dp-hint, .u-hint-12-sec, .u-hint-11-muted) {
  color: var(--text-muted) !important;
  font-weight: var(--dp-weight-normal) !important;
  line-height: 1.45;
}

@media (hover: none) and (pointer: coarse) {
  .dp-btn, .s-btn, .md-btn, .dp-button,
  #mainApp .dp-icon-btn, .menu-overlay .menu-close-btn {
    min-height: var(--dp-touch-h);
  }
}

@media (max-width: 768px) {
  :root { --dp-control-h: 42px; }
  .section-title, .section-title-pro { font-size: var(--dp-font-size-lg) !important; }
  #mainSidebar .nav-item { min-height: var(--dp-touch-h); }
  :is(.order-card, .stat-card) { padding: 12px !important; }
  .order-title { font-size: var(--dp-font-size-md) !important; }
  .order-price { font-size: 15px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #mainApp *, .menu-overlay *, .dpw * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Centrale feedback en schermstates */
.dp-a11y-live { position:fixed;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.dp-toast-stack { position:fixed;z-index:2147483500;right:18px;bottom:calc(18px + var(--mobile-bottom-nav-total,0px));display:flex;flex-direction:column;gap:9px;width:min(390px,calc(100vw - 24px));pointer-events:none; }
.dp-toast { pointer-events:auto;display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:11px 12px;background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color);border-left:4px solid var(--info);border-radius:var(--dp-radius-card);box-shadow:0 14px 38px rgba(0,0,0,.26);animation:dpToastIn .18s ease both; }
.dp-toast-success{border-left-color:var(--success)}.dp-toast-warning{border-left-color:var(--warning)}.dp-toast-error{border-left-color:var(--danger)}.dp-toast-loading{border-left-color:var(--accent)}
.dp-toast-icon { width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--bg-tertiary);font-size:15px;font-weight:800; }
.dp-toast-success .dp-toast-icon{color:var(--success)}.dp-toast-warning .dp-toast-icon{color:var(--warning)}.dp-toast-error .dp-toast-icon{color:var(--danger)}.dp-toast-info .dp-toast-icon{color:var(--info)}
.dp-toast-body{min-width:0;display:flex;flex-direction:column;gap:2px}.dp-toast-body strong{font-size:12px}.dp-toast-body span{font-size:12px;color:var(--text-secondary);line-height:1.35;overflow-wrap:anywhere}
.dp-toast-action{min-height:32px!important;padding:6px 9px!important;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary)}
.dp-toast-close{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;background:transparent;border:0;color:var(--text-muted);font-size:18px!important}
.dp-toast-out{opacity:0;transform:translateX(18px);transition:.2s ease}
@keyframes dpToastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.dp-is-busy{position:relative;cursor:wait!important}.dp-is-busy::before{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:dpSpin .7s linear infinite;margin-right:7px}@keyframes dpSpin{to{transform:rotate(360deg)}}
.dp-state{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;color:var(--text-secondary)}
.dp-state-icon{width:44px;height:44px;display:grid;place-items:center;margin-bottom:12px;border-radius:50%;background:var(--bg-tertiary);color:var(--text-muted);font-size:20px;font-weight:800}.dp-state strong{color:var(--text-primary);font-size:15px}.dp-state p{max-width:46ch;margin:6px 0 14px;font-size:13px;line-height:1.5}.dp-state-error .dp-state-icon{color:var(--danger)}.dp-state-offline .dp-state-icon{color:var(--warning)}.dp-state-loading .dp-state-icon{color:var(--accent);animation:dpPulse 1s ease-in-out infinite}@keyframes dpPulse{50%{opacity:.45}}
html.dp-offline::after{content:"Offline";position:fixed;z-index:2147483400;top:env(safe-area-inset-top,0);left:50%;transform:translateX(-50%);padding:4px 12px;border-radius:0 0 9px 9px;background:var(--warning);color:#111;font:700 11px/1.2 var(--dp-font-ui);box-shadow:0 4px 12px rgba(0,0,0,.2)}
@media(max-width:600px){.dp-toast-stack{left:12px;right:12px;width:auto}.dp-toast{grid-template-columns:30px minmax(0,1fr) auto}.dp-toast-action{grid-column:2}.dp-toast-close{grid-column:3;grid-row:1}}