/* ============================================================================
   Huisstijl-componenten in gewone CSS — versie 9
   Voor apps zonder Tailwind (Django: radar, planning, syndle-audit, menubot-syndle).
   Laad na basis.css (die de kleuren, het lettertype en de tekstmaten heeft). Hier
   staan alleen componenten; geen font-family, geen kleurwaarden, geen tekstmaten
   anders dan var(--text-…). De klassen zijn Nederlands, zoals de templates.
   Rails-apps met Tailwind gebruiken dit bestand niet.

   Elke waarde komt uit syndel-menu (de bron); het commentaar noemt de klasse of
   het bestand daar. Wat niet in syndel-menu staat, komt uit syndle-audit en zegt
   dat ook. Niets hier is zelf bedacht: verander je iets, noem dan de bron.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Technisch: een component met display: flex mag het attribuut hidden niet overstemmen. */
[hidden] { display: none !important; }

/* Focus: syndel-menu zet geen eigen focusring; de browser tekent hem. Alleen een
   veld krijgt focus:ring-primary (zie Formulier). Geen eigen :focus-visible hier
   of in een app (A1). */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* syndel-menu layouts/application: sr-only focus:not-sr-only focus:absolute focus:left-4
   focus:top-4 focus:z-50 focus:rounded-lg focus:bg-surface-container-lowest focus:px-4
   focus:py-2 focus:ring-1 focus:ring-outline-variant */
.skiplink { position: absolute; left: var(--space-4); top: -100px; z-index: 50;
  background: var(--surface-raised); padding: var(--space-2) var(--space-4); border-radius: var(--r-control);
  box-shadow: 0 0 0 1px var(--outline-variant); }
.skiplink:focus { top: var(--space-4); }

/* --- Shell (S) ------------------------------------------------------------- */
.shell { display: flex; height: 100vh; overflow: hidden; }
.shell__kolom { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow-y: auto; }

/* syndel-menu Layout::SidebarComponent: w-sidebar border-r border-outline-variant bg-sidebar px-4 py-5 */
.sidebar {
  display: flex; flex-direction: column; width: var(--shell-sidebar); flex-shrink: 0; height: 100%;
  background: var(--surface-raised); border-right: 1px solid var(--outline-variant);
  padding: var(--space-5) var(--space-4);
}
/* Sidebar-logo: mb-5 flex items-center gap-2.5 px-2; logo h-7; appnaam border-l pl-2.5 font-semibold */
.merk { display: flex; align-items: center; gap: 10px; padding: 0 var(--space-2);
  margin-bottom: var(--space-5); color: inherit; text-decoration: none; }
.merk img { height: 28px; width: auto; }
.merk__app { border-left: 1px solid var(--outline-variant); padding-left: 10px;
  font-weight: 600; color: var(--on-surface-variant); }

/* item_classes: flex items-center gap-3 rounded-navitem px-3 py-2 text-sm font-medium
   transition-colors; actief bg-primary/10 text-primary; anders text-on-surface-variant
   hover:bg-surface-container hover:text-on-surface. nav: flex-col gap-1. */
.nav { display: flex; flex-direction: column; gap: var(--space-1); }
.nav__item {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--r-control); font-size: var(--text-sm); font-weight: 500;
  color: var(--on-surface-variant); text-decoration: none;
  transition: background-color var(--duur-snel), color var(--duur-snel);
}
.nav__item:hover { background: var(--surface-hover); color: var(--on-surface); }
.nav__item[aria-current="page"] { background: var(--primary-container); color: var(--on-primary-container); }

/* Layout::TopBarComponent: sticky top-0 z-40 flex h-topbar items-center gap-4 border-b
   border-outline-variant bg-surface-container-lowest/90 px-6 backdrop-blur */
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-4);
  height: var(--shell-topbar); flex-shrink: 0; padding: 0 var(--shell-gutter);
  background: color-mix(in srgb, var(--surface-raised) 90%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--outline-variant);
}
.topbar__ruimte { flex: 1; }
.topbar .nav { flex-direction: row; }
/* In de topbar staat het logo op de middellijn van de balk (S11): geen marge onder. */
.topbar .merk { margin-bottom: 0; }

/* Gebruiker (S4): syndel-menu SidebarComponent, de gebruikerskaart onderin:
   flex items-center gap-2.5; avatar h-9 w-9 rounded-full bg-primary text-[13px] font-bold
   text-on-primary; tekst min-w-0 flex-1 met naam truncate text-[13.5px] font-bold en rol
   text-[11px] text-on-surface-variant; uitloggen ernaast. In de sidebar met de kaart
   eromheen (mt-4 rounded-[15px] bg-usercard p-3), in de topbar zonder. De tekstmaten
   (13px, 13.5px, 11px in syndel-menu) volgen de schaal van T9: 12, 14, 12. Alles staat op
   één middellijn: avatar, de twee regels samen, en de knop. */
.gebruiker { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gebruiker--kaart { margin-top: var(--space-4); padding: var(--space-3); border-radius: 15px;
  background: var(--surface-sunken); }
.gebruiker__avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: var(--on-primary);
  font-size: var(--text-xs); font-weight: 700; }
.gebruiker__tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.gebruiker__naam { font-size: var(--text-sm); font-weight: 700; color: var(--on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gebruiker__rol { font-size: var(--text-xs); color: var(--on-surface-variant); }
.gebruiker form { display: flex; margin: 0; }

.inhoud { width: 100%; padding: var(--space-8) var(--shell-gutter); }
.inhoud--smal { max-width: var(--content-narrow); }

@media (max-width: 1023px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; transform: translateX(-100%);
    transition: transform var(--duur-gewoon); }
  .sidebar[data-open] { transform: none; }
}
@media (max-width: 767px) {
  .inhoud { padding: var(--space-6) var(--shell-gutter-mobile); }
  .topbar { padding: 0 var(--shell-gutter-mobile); }
}

/* --- Paginakop (P) --------------------------------------------------------- */
/* Layout::PageHeaderComponent: terug text-sm text-on-surface-variant; h1 text-2xl
   font-semibold; ondertitel text-sm text-on-surface-variant. */
.paginakop { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-6); }
.paginakop h1 { margin: 0; }
.paginakop__sub { margin: 0; color: var(--on-surface-variant); }
.paginakop__terug { font-size: var(--text-sm); color: var(--on-surface-variant); text-decoration: none; }
.paginakop__terug:hover { color: var(--on-surface); }
.paginakop__acties { display: flex; align-items: center; gap: var(--space-2); }

/* --- Knop (K) -------------------------------------------------------------- */
/* Ui::ButtonComponent: inline-flex items-center justify-center gap-2 whitespace-nowrap
   font-medium transition-colors; rounded-xl; md px-4 py-2 text-sm, sm px-3 py-1.5 text-xs.
   Geen vaste hoogte: de hoogte volgt uit padding en tekst. */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); border: 1px solid transparent; border-radius: var(--r-button);
  font: inherit; font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
  text-decoration: none; cursor: pointer; transition: background-color var(--duur-snel), opacity var(--duur-snel);
}
/* primary: text-on-primary bg-primary shadow-sm hover:opacity-90 */
.knop--primair { background: var(--primary); color: var(--on-primary); box-shadow: var(--elevation-soft); }
.knop--primair:hover { opacity: 0.9; }
/* surface: bg-surface-container-lowest border border-outline-variant text-on-surface
   hover:bg-surface-container. Ook Annuleren. */
.knop--secundair { background: var(--surface-raised); color: var(--on-surface); border-color: var(--outline-variant); }
.knop--secundair:hover { background: var(--surface-hover); }
/* danger: text-on-error bg-error shadow-sm hover:opacity-90 */
.knop--gevaar { background: var(--error); color: var(--on-error); box-shadow: var(--elevation-soft); }
.knop--gevaar:hover { opacity: 0.9; }
.knop--klein { padding: 6px var(--space-3); font-size: var(--text-xs); }
/* icon_only: h-10 w-10 (sm h-8 w-8) rounded-lg text-primary hover:bg-primary/10 */
.knop--icoon { width: 40px; height: 40px; padding: 0; border-radius: var(--r-control);
  background: transparent; color: var(--primary); box-shadow: none; border-color: transparent; }
.knop--icoon:hover { background: var(--primary-container); opacity: 1; }
.knop--klein.knop--icoon { width: 32px; height: 32px; }
.knop:disabled, .knop[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
/* syndle-audit (iPad): op aanraakgerei minstens 44px hoog. */
@media (pointer: coarse) {
  .knop { min-height: 44px; }
  .knop--icoon, .knop--klein.knop--icoon { width: 44px; height: 44px; }
}

/* --- Kaart, badge, chip ---------------------------------------------------- */
/* Ui::CardComponent: rounded-card bg-surface-container-lowest p-5 shadow-soft
   ring-1 ring-outline-variant/60; padding "p-0" voor een tabel. */
.kaart { background: var(--surface-raised); border-radius: var(--r-card); padding: var(--space-5);
  box-shadow: var(--elevation-soft), 0 0 0 1px color-mix(in srgb, var(--outline-variant) 60%, transparent); }
.kaart--vlak { padding: 0; overflow: hidden; }
/* Kaart als link: syndel-menu hover:shadow-raise. */
.kaart--klikbaar { color: inherit; text-decoration: none; cursor: pointer; transition: box-shadow var(--duur-snel); }
.kaart--klikbaar:hover { box-shadow: var(--elevation-raise), 0 0 0 1px color-mix(in srgb, var(--outline-variant) 60%, transparent); }
/* Zwevend paneel: syndel-menu dropdown rounded-xl shadow-xl ring-1 ring-outline-variant. */
.kaart--pop { box-shadow: var(--elevation-pop), 0 0 0 1px var(--outline-variant); }

/* Ui::BadgeComponent: inline-flex items-center rounded px-1.5 py-0.5 text-xs font-medium;
   neutral bg-surface-container-high text-on-surface-variant; primary bg-primary/10
   text-primary; success/warning/error bg-…-container text-on-…-container. */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 6px;
  border-radius: var(--r-badge); font-size: var(--text-xs); font-weight: 500;
  background: var(--surface-selected); color: var(--on-surface-variant); }
.badge--primair { background: var(--primary-container); color: var(--on-primary-container); }
.badge--succes { background: var(--success-container); color: var(--on-success-container); }
.badge--waarschuwing { background: var(--warning-container); color: var(--on-warning-container); }
.badge--fout { background: var(--error-container); color: var(--on-error-container); }

/* Filterchip: syndel-menu admin/supplier_products/index: rounded px-3 py-1.5 text-sm
   ring-1 ring-outline-variant; actief bg-primary text-on-primary. */
.chip { display: inline-flex; align-items: center; padding: 6px var(--space-3); border-radius: var(--r-badge);
  font-size: var(--text-sm); color: var(--on-surface); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--outline-variant); }
button.chip { border: 0; background: transparent; font: inherit; cursor: pointer; }
.chip:disabled { cursor: default; }
.chip[aria-pressed="true"], .chip[aria-current] { background: var(--primary); color: var(--on-primary); }

/* --- Formulier (F, M3) ----------------------------------------------------- */
/* Label: block text-sm font-medium mb-1. Hint: block text-xs text-on-surface-variant. */
.veld { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.veld label { font-weight: 500; }
.veld__hint { font-size: var(--text-xs); color: var(--on-surface-variant); }
.veld__fout { color: var(--error); font-weight: 500; }
/* Veld: w-full rounded border-outline-variant ring-1 ring-outline-variant px-3 py-2;
   focus:ring-primary. */
.invoer, .veld input:not([type="checkbox"], [type="radio"]), .veld select, .veld textarea {
  width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--outline-variant);
  border-radius: var(--r-badge); background: var(--surface-raised); color: var(--on-surface); font: inherit;
}
.invoer:focus, .veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none; border-color: var(--primary);
}
/* Klein veld: w-20 rounded-md ring-1 ring-outline-variant px-2 py-1 text-sm. */
.invoer--klein { padding: var(--space-1) var(--space-2); border-radius: var(--r-melding); }
/* syndle-audit (iPad): velden op aanraakgerei minstens 44px; iOS zoomt in onder 16px. */
@media (pointer: coarse) {
  .invoer, .veld input:not([type="checkbox"], [type="radio"]), .veld select { min-height: 44px; }
}
@media (max-width: 767px) {
  .invoer, .veld input, .veld select, .veld textarea { font-size: 16px; }
}
[aria-invalid="true"] { border-color: var(--error) !important; }
.formulier__acties { display: flex; gap: var(--space-2); margin-top: var(--space-6); }

/* --- Meldingen (M) --------------------------------------------------------- */
/* Layout::FlashComponent: mb-4 rounded-md px-4 py-3 text-sm ring-1;
   notice bg-success-container text-on-success-container ring-success/20;
   alert bg-error-container text-on-error-container ring-error/20.
   Waarschuwing: dezelfde opbouw met de warning-tokens van syndel-menu. */
.melding { display: block; margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);
  border-radius: var(--r-melding); font-size: var(--text-sm); }
.melding--succes { background: var(--success-container); color: var(--on-success-container);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 20%, transparent); }
.melding--fout { background: var(--error-container); color: var(--on-error-container);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--error) 20%, transparent); }
.melding--waarschuwing { background: var(--warning-container); color: var(--on-warning-container);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 20%, transparent); }

/* --- Tabel (TB) ------------------------------------------------------------ */
/* syndel-menu views: table min-w-full divide-y divide-outline-variant/40 text-sm;
   thead bg-surface-container-low text-left text-on-surface-variant; th px-4 py-2
   font-medium; td px-4 py-2; tr hover:bg-surface-container-low. De tabel staat in een
   CardComponent met padding p-0; .tabel neemt die kaart over. */
.tabel-wrap { overflow-x: auto; }
.tabel { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm);
  background: var(--surface-raised); border-radius: var(--r-card); overflow: hidden;
  box-shadow: var(--elevation-soft), 0 0 0 1px color-mix(in srgb, var(--outline-variant) 60%, transparent); }
.tabel th { background: var(--surface-sunken); color: var(--on-surface-variant); font-weight: 500; text-align: left; }
.tabel th, .tabel td { padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent); }
.tabel tbody tr:hover { background: var(--surface-sunken); }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel td { vertical-align: middle; }
.tabel .getal { text-align: right; font-variant-numeric: tabular-nums; }
/* syndle-audit: compact = zonder kader en kop-achtergrond, voor een tabel in een kaart;
   de kolommen houden ruimte, de buitenranden niet. */
.tabel--compact { border-radius: 0; background: transparent; box-shadow: none; }
.tabel--compact th { background: transparent; }
.tabel--compact th, .tabel--compact td { padding: var(--space-2) var(--space-4) var(--space-2) 0; }
.tabel--compact th:last-child, .tabel--compact td:last-child { padding-right: 0; }
.tabel--compact tbody tr:hover { background: transparent; }
/* syndle-audit: op een smal scherm schuift de tabel in zijn eigen kader, met een
   schaduw aan de kant waar nog meer staat. */
@media (max-width: 767px) {
  .tabel { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    background-color: var(--surface-raised);
    background-image:
      linear-gradient(to right, var(--surface-raised), transparent),
      linear-gradient(to left, var(--surface-raised), transparent),
      radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / .12), transparent),
      radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .12), transparent);
    background-position: left center, right center, left center, right center;
    background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll; }
  .tabel th, .tabel td { white-space: nowrap; }
}

/* Lege staat: syndle-audit .leeg (tekst in de lege tabelcel). */
.leeg { color: var(--on-surface-variant); }

/* --- Laden (L) ------------------------------------------------------------- */
.htmx-request.laadt-mee, .htmx-request .laadt-mee, turbo-frame[aria-busy="true"] { opacity: 0.6; }

/* --- Modal (A3) ------------------------------------------------------------ */
/* Layout::ModalComponent: rounded-2xl bg-surface p-0 shadow-xl backdrop:bg-black/40;
   kop border-b border-outline-variant px-5 py-4, titel text-lg font-semibold;
   inhoud max-h-[80vh] overflow-y-auto p-5. */
dialog.modal { width: 100%; max-width: 32rem; padding: 0; border: 0; border-radius: var(--r-card);
  background: var(--surface); color: var(--on-surface); box-shadow: var(--elevation-pop); }
dialog.modal--breed { max-width: 56rem; }
dialog.modal::backdrop { background: var(--scrim); }
.modal__kop { display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--outline-variant); }
.modal__kop h2 { margin: 0; }
.modal__inhoud { padding: var(--space-5); max-height: 80vh; overflow-y: auto; }

/* --- Icoon (I) ------------------------------------------------------------- */
/* application.tailwind.css .material-symbols-outlined */
.icoon { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal;
  line-height: 1; vertical-align: middle; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
.icoon--gevuld { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

/* --- Spinner (L5) ---------------------------------------------------------- */
/* Ui::SpinnerComponent: flex min-h-9 items-center gap-2 text-sm text-on-surface-variant,
   role="status", rondje 18px animate-spin text-primary. */
.spinner { display: flex; align-items: center; gap: var(--space-2); min-height: 36px;
  font-size: var(--text-sm); color: var(--on-surface-variant); }
.spinner::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--primary) 25%, transparent); border-top-color: var(--primary);
  animation: draai 1s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }