/* ══════════════════════════════════════════════════════════════
   Job360 UI-kit — gedeelde design tokens
   Eén bron van waarheid voor kleuren, typografie, radius en spacing.
   Regel: geen losse hex-kleuren of font-sizes in pagina's; gebruik
   deze variabelen. Bij wijziging: ?v= in de <link>-tags ophogen.
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── Merk ── */
  --teal:        #0F766E; /* Teal 700 — 5.1:1 op wit, AA voor tekst */
  --teal-rgb:    15, 118, 110; /* voor rgba(var(--teal-rgb), .12) */
  --teal-dark:   #0D5C56; /* Teal 800 — hover/actief */
  --teal-deep:   #0A4A3E; /* donkere gradients en nadruk in AI-output */
  --teal-light:  #CCFBF1;
  --teal-xlight: #F0FDF9;
  --brand-logo:  #0D9488; /* alleen logo/beeldmerk, niet voor tekst */

  /* ── Neutraal ── */
  --bg:          #F8FAFC;
  --surface:     #FFFFFF;
  --border:      #E2E8F0;
  --text:        #1E293B;
  --text-secondary: #475569; /* lopende tekst op lange pagina’s, 7.5:1 */
  --muted:       #64748B;
  --tooltip-bg:  #1A2435;

  /* ── Status (kern) ── */
  --green:       #15803D;
  --success:     #15803D;
  --warning:     #B45309;
  --danger:      #DC2626;

  /* ── Status (achtergrond / rand / tekst voor badges en meldingen) ── */
  --success-bg:     #F0FDF4;
  --success-border: #BBF7D0;
  --success-text:   #166534;
  --warning-bg:     #FEF3C7;
  --warning-border: #FDE68A;
  --warning-text:   #92400E;
  --danger-bg:      #FEF2F2;
  --danger-border:  #FECACA;
  --danger-text:    #991B1B;
  --neutral-bg:     #F1F5F9;
  --neutral-border: var(--border);
  --neutral-text:   var(--text-secondary); /* --muted haalde op --neutral-bg maar 4.34:1 */

  /* ── Typografie ── */
  --font-head:   'Sora', sans-serif;
  --font-body:   'DM Sans', sans-serif;
  --fs-xs:       .75rem;
  --fs-sm:       .85rem;
  --fs-base:     .95rem;
  --fs-md:       1.05rem;
  --fs-lg:       1.25rem;
  --fs-xl:       1.6rem;
  --fs-2xl:      2.2rem;

  /* ── Radius ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius:      14px;
  --radius-pill: 999px;

  /* ── Spacing ── */
  --space-1:     4px;
  --space-2:     8px;
  --space-3:     12px;
  --space-4:     16px;
  --space-5:     24px;
  --space-6:     32px;

  /* ── Schaduw ── */
  --shadow:      0 1px 0 rgba(0,0,0,.03), 0 4px 16px rgba(0,0,0,.07);
  --shadow-md:   0 1px 0 rgba(0,0,0,.03), 0 8px 32px rgba(0,0,0,.10);
  --shadow-lg:   0 24px 64px rgba(0,0,0,.18);
  --focus-ring:  0 0 0 3px rgba(var(--teal-rgb), .12);
  --shadow-btn:  0 4px 12px rgba(15, 23, 42, .08); /* lift onder een hoofdknop bij hover */

  /* ── Layout ── */
  --nav-h:       64px;
}

/* ══════════════════════════════════════════════════════════════
   COMPONENTEN
   ══════════════════════════════════════════════════════════════ */

/* ── Buttons ──────────────────────────────────────────────────
   <button class="btn btn-primary">       gevuld teal (hoofdactie)
   <button class="btn btn-secondary">     rand, neutraal
   <button class="btn btn-ghost">         alleen tekst
   <button class="btn btn-danger">        gevuld rood (destructief)
   <button class="btn btn-success">       rand, groen (stap afronden)
   Maten: btn-sm, btn-lg · volle breedte: btn-block
   Icoon in knop: <span class="btn-icon">✦</span>
   ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 10px 20px;
  border: 1.5px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--text);
  font-family: inherit; font-size: var(--fs-base); font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .2s, transform .1s;
}
.btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-icon { font-size: 1rem; line-height: 1; }

.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover:not(:disabled) {
  background: var(--teal-dark);
  box-shadow: var(--shadow-btn); transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) { transform: none; box-shadow: none; }

.btn-secondary { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-secondary:hover:not(:disabled) { border-color: var(--teal); background: var(--teal-xlight); color: var(--teal-dark); }

.btn-ghost { color: var(--muted); }
.btn-ghost:hover:not(:disabled) { color: var(--teal); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--danger-text); }

.btn-success { border-color: var(--success); color: var(--success); }
.btn-success:hover:not(:disabled) { background: var(--success-bg); }

.btn-sm    { padding: 6px 12px; font-size: var(--fs-sm); gap: 6px; }
.btn-lg    { padding: 13px 28px; font-size: var(--fs-md); }
.btn-block { width: 100%; }

@media (max-width: 768px) {
  .btn:not(.btn-sm) { min-height: 44px; }
}

/* ── Badges ───────────────────────────────────────────────────
   <span class="badge badge-success">Actief</span>
   Kleuren: badge-success, -warning, -danger, -neutral, -brand
   Modifiers: badge-solid (gevuld), badge-caps (hoofdletters), badge-lg
   Plan-lint boven een prijskaart: + plan-flag
   ──────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 3px 10px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.badge-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.badge-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.badge-danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-text); }
.badge-neutral { background: var(--neutral-bg); border-color: var(--neutral-border); color: var(--neutral-text); }
.badge-brand   { background: var(--teal-xlight); border-color: var(--teal-light);    color: var(--teal-dark); }
.badge-solid.badge-brand   { background: var(--teal);    border-color: var(--teal);    color: #fff; }
.badge-solid.badge-danger  { background: var(--danger);  border-color: var(--danger);  color: #fff; }
.badge-solid.badge-success { background: var(--success); border-color: var(--success); color: #fff; }
.badge-caps { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.badge-lg   { padding: 5px 14px; font-size: var(--fs-sm); }
.plan-flag  { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); }

/* ── Meldingen ────────────────────────────────────────────────
   <div class="alert alert-danger">Er ging iets mis.</div>
   Kleuren: alert-success, -warning, -danger, -info, -neutral
   JS: setStatus(el, 'success'|'warning'|'danger'|'info'|'neutral')
   ──────────────────────────────────────────────────────────── */
.alert {
  padding: 10px 14px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); line-height: 1.5;
}
.alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.alert-danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-text); }
.alert-info    { background: var(--teal-xlight); border-color: var(--teal-light);    color: var(--teal-dark); }
.alert-neutral { background: var(--neutral-bg); border-color: var(--neutral-border); color: var(--neutral-text); }

/* ── Kaarten ──────────────────────────────────────────────────
   <div class="card">…</div>
   Modifiers: card-compact (16px), card-roomy (28px), card-hover (klikbaar),
   card-accent (teal streep boven), card-selectable (+ .active),
   card-tinted (lichtteal), card-featured (teal rand + schaduw)
   Titel: <div class="card-title">
   ──────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: var(--space-5);
}
.card-compact { padding: var(--space-4); }
.card-roomy   { padding: 28px; }
.card-title   { font-family: var(--font-head); font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: var(--space-3); }
.card-hover   { cursor: pointer; transition: box-shadow .18s, border-color .18s; }
.card-hover:hover { box-shadow: var(--shadow-md); }
.card-accent  { position: relative; overflow: hidden; }
.card-accent::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--teal); }
.card-selectable { cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.card-selectable:hover { border-color: var(--teal-light); background: var(--teal-xlight); }
.card-selectable.active { border-color: var(--teal); background: var(--teal-xlight); box-shadow: 0 8px 24px rgba(15, 23, 42, .06); }
.card-tinted   { background: var(--teal-xlight); border-color: var(--teal-light); }
.card-featured { border: 2px solid var(--teal); box-shadow: var(--shadow-md); }

/* ── Tabellen ─────────────────────────────────────────────────
   <div class="table-wrap"><table class="table">…</table></div>
   ──────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th {
  text-align: left; padding: 10px 14px;
  background: var(--bg); color: var(--muted);
  font-size: var(--fs-xs); font-weight: 600;
  border-bottom: 1.5px solid var(--border);
}
.table td { padding: 11px 14px; border-bottom: 1px solid var(--border); }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--teal-xlight); }

/* ── Modal ────────────────────────────────────────────────────
   <div class="modal-overlay hidden"><div class="modal">
     <div class="modal-header"><h3 class="modal-title">…</h3><button class="modal-close">✕</button></div>
     <div class="modal-body">…</div><div class="modal-footer">…</div>
   </div></div>
   Maten: modal-sm (400), standaard (520), modal-lg (640)
   Zonder header/body/footer-indeling: + modal-padded
   ──────────────────────────────────────────────────────────── */
@keyframes ui-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 23, 42, .5); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  animation: ui-fade-in .18s ease;
}
.modal {
  position: relative;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 520px;
  animation: ui-slide-up .22s ease;
}
.modal-sm { max-width: 400px; }
.modal-lg { max-width: 640px; }
.modal-padded { padding: 28px; }
.modal-header { padding: 24px 28px 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.modal-title  { font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.modal-close {
  width: 32px; height: 32px; border-radius: var(--radius-sm); border: none;
  background: var(--bg); color: var(--muted); font-size: 1.2rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.modal-close:hover { background: var(--border); }
.modal-body   { padding: 20px 28px 28px; }
.modal-footer { padding: 0 28px 24px; display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 768px) {
  .modal-padded { padding: 20px 16px; margin: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal { animation: none; }
}

/* ── Formulieren ──────────────────────────────────────────────
   <div class="field"><label for="x">Label <span class="req">*</span></label><input id="x"></div>
   Twee kolommen: <div class="field-row">…</div>
   Los invoerveld buiten .field: class="input"
   ──────────────────────────────────────────────────────────── */
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text); margin-bottom: 6px; }
.field .req { color: var(--danger); }
.input,
.field :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), select, textarea) {
  width: 100%; padding: 10px 13px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--fs-base); color: var(--text);
  background: var(--bg); outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.input:focus,
.field :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), select, textarea):focus {
  border-color: var(--teal); box-shadow: var(--focus-ring); background: var(--surface);
}
/* Placeholder expliciet: de browserstandaard (#757575) haalt op --bg geen 4.5:1. */
.input::placeholder,
.field :where(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
.input.error, .field :where(input, select, textarea).error { border-color: var(--danger); }
.field :where(textarea), textarea.input { min-height: 100px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 768px) {
  .field-row { grid-template-columns: 1fr; }
  .input, .field :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), select) { min-height: 44px; }
}

/* ── Aanvullende knopvarianten ───────────────────────────────── */
.btn-outline-danger { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.btn-outline-danger:hover:not(:disabled) { background: var(--danger-bg); }
.btn-link {
  background: none; border: none; padding: 0;
  color: var(--teal-dark); font: inherit; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}
.btn-link:hover { color: var(--teal); }
.input-sm { padding: 4px 8px; font-size: var(--fs-sm); border-radius: var(--radius-xs); width: auto; }

/* ── Cookiebanner ─────────────────────────────────────────────
   Markup komt uit analytics.js (één bron voor / en /app), zodat de twee
   pagina's niet uit elkaar lopen. Verschijnt alleen zolang er nog geen
   keuze is gemaakt; de keuze zelf staat in localStorage.
   <div class="cookie-banner" role="dialog"> … </div>                       */
.cookie-banner {
  position: fixed; inset: auto 0 0 0; z-index: 2000;
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-sm); color: var(--text);
}
/* Zo laag mogelijk houden: de balk staat vast onderaan en concurreert op een laag
   scherm met de hoofdknop van de landingspagina. Op een breed scherm passen tekst
   en knoppen daarom op één regel, en op een laag scherm wordt alles krapper.     */
@media (min-height: 721px) and (max-width: 640px) {
  .cookie-banner { padding: var(--space-4) var(--space-5); }
}
@media (max-height: 720px) {
  .cookie-banner { padding: var(--space-2) var(--space-4); font-size: var(--fs-xs); }
  .cookie-actions .btn { padding: 7px 14px; font-size: var(--fs-sm); }
  .cookie-options { margin-top: var(--space-3); padding-top: var(--space-3); }
}
.cookie-banner[hidden] { display: none !important; }
.cookie-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-4); flex-wrap: wrap;
}
.cookie-text { margin: 0; max-width: 640px; line-height: 1.45; flex: 1 1 320px; }
.cookie-text a { color: var(--teal-dark); text-decoration: underline; }
.cookie-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cookie-options {
  max-width: 1180px; margin: var(--space-4) auto 0;
  border-top: 1px solid var(--border); padding-top: var(--space-4);
  display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: flex-start;
}
.cookie-options[hidden] { display: none !important; }
.cookie-option { display: flex; gap: var(--space-2); max-width: 420px; }
.cookie-option input { margin-top: 3px; accent-color: var(--teal); }
.cookie-option label { font-weight: 600; cursor: pointer; }
.cookie-option span { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }

@media (max-width: 640px) {
  .cookie-inner { justify-content: flex-start; }
  .cookie-actions .btn { flex: 1 1 auto; }
}

/* ── Tabel: lege/ladende rij ─────────────────────────────────── */
.table-empty { padding: 20px; text-align: center; color: var(--muted); }

/* ══════════════════════════════════════════════════════════════
   UTILITIES — voor losse tekst- en afstandsaccenten.
   !important: vervangen inline stijlen, dus ze winnen van componentregels.
   ══════════════════════════════════════════════════════════════ */
.text-xs   { font-size: var(--fs-xs) !important; }
.text-sm   { font-size: var(--fs-sm) !important; }
.text-base { font-size: var(--fs-base) !important; }
.text-muted   { color: var(--muted) !important; }
.text-body    { color: var(--text) !important; }
.text-teal    { color: var(--teal) !important; }
.text-brand   { color: var(--teal-dark) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger  { color: var(--danger) !important; }
.text-center  { text-align: center !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }