/* Savour basisonderdelen: knoppen, invoervelden en kleine teksten, overal hetzelfde.
   Dit bestand wordt als laatste geladen. De oudere opmaak zet veel met !important; zolang die niet is
   opgeruimd, gebruikt dit bestand op een paar plekken ook !important om consequent te winnen. */

/* ---- Knoppen ----
   Drie soorten: .btn (gewoon), .btn.gold (hoofdactie, één per scherm) en .btn-quiet (alleen tekst).
   Formaten: standaard (44px hoog) en .small / .compact-action (36px). */
:is(#appShell, .modal, .public-shell, #landingView) .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: var(--sv-space-2) !important;
  min-height: var(--sv-control-h) !important;
  padding: 0 var(--sv-space-4) !important;
  border: 1px solid var(--sv-line-strong) !important;
  /* Afgerond, zoals de knoppen op de website (2026-10-23). */
  border-radius: 999px !important;
  background: var(--sv-surface-2) !important;
  color: var(--sv-text) !important;
  font-family: var(--sv-font) !important;
  font-size: var(--sv-fs-md) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition:
    border-color 0.15s,
    background-color 0.15s,
    color 0.15s;
}
:is(#appShell, .modal, .public-shell, #landingView) .btn:hover {
  border-color: var(--sv-gold) !important;
  color: var(--sv-gold) !important;
}
:is(#appShell, .modal, .public-shell, #landingView) .btn:focus-visible {
  outline: none;
  box-shadow: var(--sv-focus) !important;
}
:is(#appShell, .modal, .public-shell, #landingView) .btn.gold {
  background: var(--sv-gold) !important;
  border-color: var(--sv-gold) !important;
  color: var(--sv-on-gold) !important;
  font-weight: 600 !important;
}
body.savour-light :is(#appShell, .modal) .btn.gold {
  background: var(--sv-gold-strong) !important;
  border-color: var(--sv-gold-strong) !important;
}
:is(#appShell, .modal, .public-shell, #landingView) .btn.gold:hover {
  background: var(--sv-gold-strong) !important;
  border-color: var(--sv-gold-strong) !important;
  color: var(--sv-on-gold) !important;
}
:is(#appShell, .modal, .public-shell, #landingView) :is(.btn.small, .compact-action) {
  min-height: var(--sv-control-h-sm) !important;
  padding: 0 var(--sv-space-3) !important;
  font-size: var(--sv-fs-sm) !important;
}
:is(#appShell, .modal) :is(.delete-recipe, .danger-action) {
  color: var(--sv-danger) !important;
  border-color: var(--sv-danger-line) !important;
  background: transparent !important;
}
:is(#appShell, .modal) .btn-quiet {
  border: 0;
  background: none;
  color: var(--sv-text-2);
  font: inherit;
  font-size: var(--sv-fs-md);
  padding: var(--sv-space-2);
  border-radius: var(--sv-radius-sm);
  cursor: pointer;
}
:is(#appShell, .modal) .btn-quiet:hover {
  color: var(--sv-text);
}

/* ---- Invoervelden ---- */
:is(#appShell, .modal) :is(.field input, .field select, .field textarea) {
  min-height: var(--sv-control-h);
  border-radius: var(--sv-radius) !important;
  font-family: var(--sv-font) !important;
  font-size: var(--sv-fs-base) !important;
}
:is(#appShell, .modal) .field label {
  font-size: var(--sv-fs-sm) !important;
  color: var(--sv-text-2) !important;
  margin-bottom: var(--sv-space-1);
}

/* ---- Kleine teksten ---- */
#appShell .eyebrow {
  font-size: var(--sv-fs-xs) !important;
  letter-spacing: 0.16em !important;
  font-weight: 600;
}
#appShell :is(.mini, .muted) {
  font-size: inherit;
}
#appShell .mini {
  font-size: var(--sv-fs-sm) !important;
  color: var(--sv-text-3) !important;
}
#appShell .muted {
  color: var(--sv-text-2);
}

/* ---- Koppen ---- */
#appShell .section-head h2 {
  font-family: var(--sv-font-display);
  font-size: var(--sv-fs-2xl) !important;
  line-height: 1.15;
}

/* Filterknoppen (categorieën) zijn compact: ze filteren, het zijn geen hoofdacties. */
#appShell #categoryBar .btn {
  min-height: 32px !important;
  padding: 0 var(--sv-space-3) !important;
  font-size: var(--sv-fs-sm) !important;
  border-radius: 999px !important;
}
#appShell #categoryBar {
  gap: var(--sv-space-2) !important;
  padding: var(--sv-space-3) var(--sv-space-4) !important;
}

/* ---- Bevestig- en invulvenster (js/core/dialog.js) ---- */
.modal.sv-dialog {
  align-items: center;
  justify-content: center;
  padding: var(--sv-space-4);
  /* Boven alles, ook boven het beheerscherm (/admin, z-index 10000). */
  z-index: 10050 !important;
}
.sv-dialog-box {
  width: min(420px, 100%);
  margin: 0;
  padding: var(--sv-space-5);
  background: var(--sv-surface);
  border: 1px solid var(--sv-line-strong);
  border-radius: var(--sv-radius-lg);
  box-shadow: 0 24px 60px #00000066;
  color: var(--sv-text);
  font-family: var(--sv-font);
}
.sv-dialog-title {
  margin: 0;
  font-family: var(--sv-font);
  font-size: var(--sv-fs-lg);
  font-weight: 600;
  line-height: 1.35;
  color: var(--sv-text);
}
.sv-dialog-text {
  margin: var(--sv-space-2) 0 0;
  color: var(--sv-text-2);
  font-size: var(--sv-fs-md);
  line-height: 1.55;
  white-space: pre-line;
}
.sv-dialog-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: var(--sv-control-h);
  margin-top: var(--sv-space-4);
  padding: 0 var(--sv-space-3);
  border: 1px solid var(--sv-line-strong);
  border-radius: var(--sv-radius);
  background: var(--sv-surface-2);
  color: var(--sv-text);
  font: inherit;
  font-size: var(--sv-fs-base);
}
.sv-dialog-input:focus {
  outline: none;
  border-color: var(--sv-gold);
  box-shadow: var(--sv-focus);
}
.sv-dialog-input[hidden],
.sv-dialog-text[hidden] {
  display: none;
}
.sv-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sv-space-2);
  margin-top: var(--sv-space-5);
}
.sv-dialog-choices {
  display: grid;
  gap: var(--sv-space-2);
  margin-top: var(--sv-space-4);
}
.sv-dialog-choices[hidden],
#svDialog .btn[hidden] {
  display: none !important;
}
.sv-dialog-choice {
  display: block;
  width: 100%;
  min-height: var(--sv-control-h);
  padding: var(--sv-space-2) var(--sv-space-3);
  border: 1px solid var(--sv-line-strong);
  border-radius: var(--sv-radius);
  background: var(--sv-surface);
  color: var(--sv-text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.sv-dialog-choice small {
  display: block;
  margin-top: 2px;
  color: var(--sv-text-2);
  font-weight: 400;
  font-size: var(--sv-fs-xs);
}
.sv-dialog-choice:hover,
.sv-dialog-choice:focus-visible,
.sv-dialog-choice.is-primary {
  border-color: var(--sv-gold);
}
#svDialog .btn.sv-danger {
  background: #a4473a !important;
  border-color: #a4473a !important;
  color: #fff !important;
  font-weight: 600 !important;
}
#svDialog .btn.sv-danger:hover {
  background: #8e3a2f !important;
  border-color: #8e3a2f !important;
}
@media (max-width: 760px) {
  .modal.sv-dialog {
    align-items: flex-end;
  }
  .sv-dialog-box {
    border-radius: var(--sv-radius-lg) var(--sv-radius-lg) 0 0;
    padding-bottom: calc(var(--sv-space-5) + env(safe-area-inset-bottom));
  }
  .sv-dialog-actions .btn {
    flex: 1;
  }
}

/* ---- Logo: het woord SAVOUR, zoals op het laadscherm ----
   Tekst in plaats van een plaatje: altijd scherp, direct geladen en volgt het lichte thema. */
.sv-wordmark {
  display: inline-block;
  font-family: var(--sv-font-display);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.34em;
  line-height: 1;
  white-space: nowrap;
  color: var(--sv-text);
}
.boot-splash .sv-wordmark {
  color: inherit;
}
.brand .sv-wordmark {
  font-size: 22px;
  padding: 6px 0 4px;
}
.landing-logo-wordmark .sv-wordmark {
  font-size: 22px;
}
.public-info-brand .sv-wordmark {
  font-size: 20px;
}
.activation-logo .sv-wordmark {
  font-size: 28px;
}
.activation-logo .sv-wordmark::after {
  content: '';
  display: block;
  width: 46px;
  height: 1px;
  margin: 16px auto 0;
  background: var(--sv-gold);
  opacity: 0.7;
}
.phone-brand.sv-wordmark {
  font-size: 13px;
}
.topbar .mobile-brand.sv-wordmark {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 18px !important;
  color: var(--sv-text) !important;
  cursor: pointer;
}