/*
 * Workrlab Design System
 * Slate × Cyan — modern SaaS consultancy platform
 *
 * Inhoud:
 *  1. Design tokens (CSS variabelen)
 *  2. Reset & base
 *  3. Typografie
 *  4. Layout utilities
 *  5. Buttons
 *  6. Form elementen
 *  7. Cards
 *  8. Badges & pills
 *  9. Alerts
 * 10. Navigatie (navbar, sidebar)
 * 11. Pagina componenten
 * 12. Tabel
 * 13. Score bar
 * 14. Avatar
 * 15. Animaties
 * 16. Scrollbar
 */

/* ─────────────────────────────────────────
   1. Design tokens
───────────────────────────────────────── */
:root {
  /* Slate ramp */
  --slate-950: #020617;
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50: #F8FAFC;

  /* Zand — de achtergrond van het ingelogde deel. Warmer en rustiger dan
     slate-100 op pagina's vol data; witte vlakken steken er vanzelf tegen af,
     dus kaarten en tabbladen hebben geen rand meer nodig. */
  --zand-50: #F7F5F0;   /* pagina, topbar, footer */
  --zand-100: #F1EDE5;  /* hover en zachte vlakken; infoblokken blijven slate-50 */
  --zand-200: #E6E1D6;  /* de enige hairlines: onder de topbar, tussen rijen */
  --vlak-rand: transparent;  /* randkleur van kaarten, filterbalk en tabbladen: weg op zand */

  /* Cyan ramp */
  --cyan-600: #0891B2;
  --cyan-500: #06B6D4;
  --cyan-400: #22D3EE;
  --cyan-300: #67E8F9;
  --cyan-100: #CFFAFE;
  --cyan-50: #ECFEFF;

  /* Sky ramp (primaire actie) */
  --sky-700: #4f46e5;
  --sky-600: #4f46e5;
  --sky-500: #6366f1;
  --sky-400: #818cf8;
  --sky-300: #a5b4fc;
  --sky-200: #ddd6fe;
  --sky-100: #ede9fe;
  --sky-50: #f5f3ff;

  /* Violet ramp */
  --violet-700: #6D28D9;
  --violet-600: #7C3AED;
  --violet-500: #8B5CF6;
  --violet-400: #A78BFA;
  --violet-300: #C4B5FD;
  --violet-200: #DDD6FE;
  --violet-100: #EDE9FE;
  --violet-50: #F5F3FF;

  /* Amber ramp */
  --amber-700: #B45309;
  --amber-600: #D97706;
  --amber-500: #F59E0B;
  --amber-400: #FBBF24;
  --amber-300: #FCD34D;
  --amber-200: #FDE68A;
  --amber-100: #FEF3C7;
  --amber-50: #FFFBEB;

  /* Semantisch */
  --green-700: #047857;
  --green-600: #059669;
  --green-500: #10B981;
  --green-400: #34D399;
  --green-200: #A7F3D0;
  --green-100: #D1FAE5;
  --green-50: #ECFDF5;

  --orange-500: #F97316;
  --orange-400: #FB923C;
  --orange-100: #FFEDD5;

  --red-700: #B91C1C;
  --red-600: #DC2626;
  --red-500: #EF4444;
  --red-200: #FECACA;
  --red-100: #FEE2E2;
  --red-50: #FEF2F2;

  /* Typografie — dezelfde drie families als de publieke kant, zodat de
     letter niet wisselt op het moment dat iemand inlogt. Archivo is op 14px
     een tot zes procent smaller dan DM Sans, dus tabellen krijgen eerder
     lucht dan dat er iets afkapt.

     De displayletter staat apart omdat hij alleen op groot formaat werkt:
     de app heeft geen koppen boven de 15px, dus hij hoort hier bij de
     cijfers en niet bij de kopregels. */
  --font-sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;

  /* Afmetingen */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Schaduw */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .05);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .10), 0 4px 8px rgba(0, 0, 0, .06);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, .14), 0 8px 16px rgba(0, 0, 0, .08);

  /* Transitie */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --duration: 150ms;
  --duration-md: 250ms;
  --duration-lg: 350ms;

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* ─────────────────────────────────────────
   2. Reset & base
───────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scrollbar-gutter: stable;
  scrollbar-width: none;
}

body {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--slate-900);
  background: var(--zand-50);
}

img,
svg {
  display: block;
}

a {
  color: var(--sky-500);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}

a:hover {
  color: var(--sky-600);
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ─────────────────────────────────────────
   3. Typografie
───────────────────────────────────────── */
.text-xs {
  font-size: 11px;
  line-height: 1.5;
}

.text-sm {
  font-size: 12px;
  line-height: 1.5;
}

.text-base {
  font-size: 14px;
  line-height: 1.6;
}

.text-lg {
  font-size: 16px;
  line-height: 1.5;
}

.text-xl {
  font-size: 18px;
  line-height: 1.4;
}

.text-2xl {
  font-size: 22px;
  line-height: 1.3;
}

.text-3xl {
  font-size: 28px;
  line-height: 1.2;
}

.text-4xl {
  font-size: 36px;
  line-height: 1.15;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.tracking-tight {
  letter-spacing: -.03em;
}

.tracking-wide {
  letter-spacing: .06em;
}

.tracking-wider {
  letter-spacing: .1em;
}

.text-primary {
  color: var(--slate-900);
}

.text-secondary {
  color: var(--slate-500);
}

.text-muted {
  color: var(--slate-500);
}

.text-accent {
  color: var(--sky-500);
}

.text-success {
  color: var(--green-500);
}

.text-danger {
  color: var(--red-500);
}

.text-warning {
  color: var(--orange-500);
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─────────────────────────────────────────
   4. Layout utilities
───────────────────────────────────────── */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.flex-1 {
  flex: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.gap-1 {
  gap: 4px;
}

.gap-2 {
  gap: 8px;
}

.gap-3 {
  gap: 12px;
}

.gap-4 {
  gap: 16px;
}

.gap-6 {
  gap: 24px;
}

.grid {
  display: grid;
}

.mt-1 {
  margin-top: 4px;
}

.mt-2 {
  margin-top: 8px;
}

.mt-3 {
  margin-top: 12px;
}

.mt-4 {
  margin-top: 16px;
}

.mt-6 {
  margin-top: 24px;
}

.mt-8 {
  margin-top: 32px;
}

.mb-1 {
  margin-bottom: 4px;
}

.mb-2 {
  margin-bottom: 8px;
}

.mb-3 {
  margin-bottom: 12px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mb-6 {
  margin-bottom: 24px;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.hidden {
  display: none !important;
}

/* ─────────────────────────────────────────
   15. Animaties
───────────────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .4;
  }
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.animate-fade-up {
  animation: fadeUp var(--duration-md) var(--ease-out) forwards;
}

.animate-fade-in {
  animation: fadeIn var(--duration-md) var(--ease-out) forwards;
}

.animate-slide-in {
  animation: slideIn var(--duration-md) var(--ease-out) forwards;
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* Stagger helper — zet data-delay="N" als inline style */
[data-stagger] {
  opacity: 0;
}

[data-stagger]:nth-child(1) {
  animation-delay: 0ms;
}

[data-stagger]:nth-child(2) {
  animation-delay: 60ms;
}

[data-stagger]:nth-child(3) {
  animation-delay: 120ms;
}

[data-stagger]:nth-child(4) {
  animation-delay: 180ms;
}

[data-stagger]:nth-child(5) {
  animation-delay: 240ms;
}

[data-stagger]:nth-child(6) {
  animation-delay: 300ms;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg,
      var(--slate-100) 25%,
      var(--slate-200) 50%,
      var(--slate-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

/* ─────────────────────────────────────────
   16. Scrollbar
───────────────────────────────────────── */
::-webkit-scrollbar {
  display: none;
}

/* ─────────────────────────────────────────
   17. Dialog / modal
───────────────────────────────────────── */
dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

dialog {
  padding: 0;
  border: none;
  background: transparent;
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  max-height: calc(100vh - 48px);
  max-width: calc(100vw - 32px);
  overflow: visible;
}

/* Scroll-lock: voorkomt achtergrond scrollen wanneer een modal open is */
html:has(dialog[open]),
html.modal-open,
body:has(dialog[open]),
body.modal-open {
  overflow: hidden;
}

/* Modal shared layout.
   De inhoud van een modal scrollt altijd: de kop en de voet (met de knoppen) blijven
   staan, het middenstuk (.modal-body) scrollt. Dat werkt alleen als elke laag tussen
   de sheet en de body mag krimpen — een <form> eromheen is de gebruikelijke tussenlaag
   en is daarom zelf ook een krimpende flexkolom. De overflow-y op de sheet is het
   vangnet: staat er ooit een andere wikkel tussen, dan scrollt de modal als geheel in
   plaats van dat de voet met de opslaan-knop buiten beeld valt. */
.modal-sheet { display: flex; flex-direction: column; position: relative; width: 460px; max-width: calc(100vw - 32px); max-height: calc(100vh - 80px); background: white; border-radius: 14px; overflow: hidden auto; }
.modal-sheet .modal-body { flex: 1; overflow-y: auto; min-height: 0; }
.modal-sheet > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* Modal tab bar */
.modal-tabs { display: flex; border-bottom: 1px solid var(--slate-100); padding: 0 20px; background: #fafafa; }
.modal-tab {
  all: unset;
  box-sizing: border-box;
  padding: 10px 14px;
  font-size: 12px;
  font-family: inherit;
  color: var(--slate-500);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.modal-tab:hover { color: var(--slate-600); }
.modal-tab.active { color: #6366f1; border-bottom-color: #6366f1; font-weight: 600; }

.mr-modal-tab { all: unset; box-sizing: border-box; padding: 6px 12px; border-radius: 8px; border: 1.5px solid #e2e8f0; font-size: 12px; font-weight: 600; color: #64748b; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all .15s; }
.mr-modal-tab-active { border-color: #c7d2fe; background: #eef2ff; color: #4f46e5; }

/* Status row in edit modal */
.status-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  border: 1.5px solid #e2e8f0; background: #fff;
  cursor: pointer; transition: border-color .15s, background .15s;
  user-select: none;
}
.status-row.selected {
  border-color: var(--rc);
  background: color-mix(in srgb, var(--rc) 10%, #fff);
}
.status-row .status-row-label { font-size: 13px; font-weight: 500; color: #475569; flex: 1; transition: color .15s, font-weight .15s; }
.status-row.selected .status-row-label { color: var(--rc); font-weight: 600; }
.status-row .status-row-check { width: 20px; height: 20px; border-radius: 50%; background: var(--rc); display: none; align-items: center; justify-content: center; flex-shrink: 0; }
.status-row.selected .status-row-check { display: flex; }

/* .modal-header/.modal-body/.modal-footer komen uit components.css — dat
   bestand laadt na dit bestand, dus die regels wonnen de cascade toch al bij
   gelijke specificiteit. Losstaande blokken hier waren dode gewicht: ze
   golden voor geen enkel element. .modal-header-icon/-title/-sub en
   .modal-close-btn stonden zelfs nergens meer in markup — bevestigd met een
   grep op class="modal-header-icon" e.d. door de hele templates-map. */
.modal-scroll-fade {
  height: 56px;
  margin-top: -56px;
  flex-shrink: 0;
  background: linear-gradient(to bottom, transparent, #fff);
  pointer-events: none;
  transition: opacity .2s;
  z-index: 2;
  position: relative;
}

.modal-field-label {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--slate-500); text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 6px;
}

/* Template chips */
.tpl-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.tpl-chip {
  padding: 4px 11px; border-radius: 99px;
  border: 1px solid var(--slate-200); background: var(--slate-50);
  color: var(--slate-600); font-size: 11.5px; font-weight: 500;
  cursor: pointer; transition: all .1s; line-height: 1.4;
}
.tpl-chip:hover { border-color: var(--slate-500); background: white; color: var(--slate-800); }
.tpl-chip-active { background: #ede9fe; color: #4f46e5; border-color: #a5b4fc; font-weight: 600; }

/* Rode variant — verlies */
.tpl-chip-red { border-color: #fecaca; background: #fff1f2; color: #b91c1c; }
.tpl-chip-red:hover { border-color: #f87171; background: #fee2e2; color: #991b1b; }
.tpl-chip-red-active { background: #fee2e2; color: #991b1b; border-color: #f87171; font-weight: 600; }

/* Groene variant — winst */
.tpl-chip-green { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.tpl-chip-green:hover { border-color: #86efac; background: #dcfce7; color: #14532d; }
.tpl-chip-green-active { background: #dcfce7; color: #14532d; border-color: #86efac; font-weight: 600; }

/* Template list rows (status-change modal) */
.tpl-list-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 13px;
  border: none;
  background: white;
  color: var(--slate-700);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .1s;
  border-bottom: 1px solid var(--slate-100);
}
.tpl-list-row:last-child { border-bottom: none; }
.tpl-list-row:hover { background: var(--slate-50); }
.tpl-list-row-active { font-weight: 600; }

.tpl-list-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--slate-300);
  transition: background .1s;
}