/* ==========================================================================
   Componenten
   Plain CSS op basis van tokens.css. Tailwind gebruik je voor layout
   (flex, grid, gap, padding); deze klassen dragen de componentstijl.
   Naamgeving: .component, .component-variant, .is-state
   ========================================================================== */

/* --- Base ---------------------------------------------------------------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
}
::selection { background: var(--gray-200); color: var(--gray-950); }
/* Focus-ring voor knoppen, links e.d. Tekstvelden krijgen hun focus via
   het veld zelf (.input, .input-group), nooit strak om de tekst heen. */
:focus-visible { outline: none; }
:focus-visible:not(input):not(textarea):not(select) { box-shadow: var(--ring); }
svg.lucide { width: 18px; height: 18px; stroke-width: 1.6; flex-shrink: 0; }
.icon-sm svg.lucide, svg.lucide.icon-sm { width: 16px; height: 16px; }
.icon-xs svg.lucide, svg.lucide.icon-xs { width: 14px; height: 14px; }

/* --- Typografie ---------------------------------------------------------- */
.t-display { font-size: var(--text-4xl); line-height: var(--lh-4xl); font-weight: 600; letter-spacing: var(--tracking-tight); }
.t-h1      { font-size: var(--text-3xl); line-height: var(--lh-3xl); font-weight: 600; letter-spacing: var(--tracking-tight); }
.t-h2      { font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: 600; letter-spacing: var(--tracking-tight); }
.t-h3      { font-size: var(--text-xl);  line-height: var(--lh-xl);  font-weight: 500; letter-spacing: var(--tracking-snug); }
.t-h4      { font-size: var(--text-lg);  line-height: var(--lh-lg);  font-weight: 500; letter-spacing: var(--tracking-snug); }
.t-body-lg { font-size: var(--text-md);  line-height: var(--lh-md); }
.t-body    { font-size: var(--text-base);line-height: var(--lh-base); }
.t-small   { font-size: var(--text-sm);  line-height: var(--lh-sm); }
.t-caption { font-size: var(--text-xs);  line-height: var(--lh-xs); color: var(--fg-muted); }
.t-overline{ font-size: var(--text-2xs); line-height: var(--lh-2xs); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-subtle); }
.t-mono    { font-family: var(--font-mono); font-size: .92em; }
.t-num     { font-variant-numeric: tabular-nums; }
.t-muted   { color: var(--fg-muted); }
.t-subtle  { color: var(--fg-subtle); }

/* --- Button -------------------------------------------------------------- */
.btn {
  --btn-h: 36px; --btn-px: 16px; --btn-fs: var(--text-sm);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-h); padding: 0 var(--btn-px);
  font: 500 var(--btn-fs)/1 var(--font-sans);
  letter-spacing: -0.005em;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  white-space: nowrap; cursor: pointer; user-select: none; text-decoration: none;
  transition:
    background-color var(--dur-instant) var(--ease-out),
    border-color var(--dur-instant) var(--ease-out),
    color var(--dur-instant) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled, .btn.is-disabled { opacity: .45; cursor: not-allowed; }
.btn svg.lucide { width: 16px; height: 16px; }

.btn-xs { --btn-h: 26px; --btn-px: 10px; --btn-fs: var(--text-xs); gap: 6px; }
.btn-sm { --btn-h: 30px; --btn-px: 12px; --btn-fs: var(--text-xs); gap: 6px; }
.btn-lg { --btn-h: 44px; --btn-px: 20px; --btn-fs: var(--text-base); }
.btn-block { width: 100%; }
.btn-square { border-radius: var(--radius-md); }

.btn-primary   { background: var(--primary); color: var(--primary-fg); box-shadow: var(--shadow-xs); }
.btn-primary:hover:not(:disabled)   { background: var(--primary-hover); }

.btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--gray-300); }

.btn-ghost     { background: transparent; color: var(--fg-muted); }
.btn-ghost:hover:not(:disabled)     { background: var(--surface-hover); color: var(--fg); }

.btn-soft      { background: var(--surface-hover); color: var(--fg); }
.btn-soft:hover:not(:disabled)      { background: var(--surface-active); }

.btn-accent    { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(var(--accent-rgb), .3), inset 0 1px 0 rgba(255,255,255,.12); }
.btn-accent:hover:not(:disabled)    { background: var(--accent-hover); }

.btn-gradient  {
  color: #fff; background-image: var(--accent-gradient); background-size: 160% 100%; background-position: 0% 50%;
  box-shadow: 0 1px 2px rgba(var(--accent-rgb), .25), inset 0 1px 0 rgba(255,255,255,.14);
  transition: background-position var(--dur-slow) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.btn-gradient:hover:not(:disabled)  { background-position: 100% 50%; box-shadow: 0 6px 18px -6px rgba(var(--accent-rgb), .5); }

.btn-danger    { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled)    { filter: brightness(.94); }
.btn-danger-soft { background: var(--danger-soft); color: var(--danger-fg); }

.btn-link { height: auto; padding: 0; border-radius: 4px; background: none; color: var(--accent); }
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Icoon-only knop */
.btn-icon { --btn-px: 0; width: var(--btn-h); border-radius: var(--radius-md); }
.btn-icon.btn-round { border-radius: var(--radius-full); }

/* Loading: label vervaagt, spinner verschijnt */
.btn .btn-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 7px; opacity: 0; transform: scale(.6); transition: opacity var(--dur-fast), transform var(--dur-base) var(--ease-spring); }
.btn .btn-label { display: inline-flex; align-items: center; gap: inherit; transition: opacity var(--dur-fast), transform var(--dur-base) var(--ease-out); }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn-label { opacity: 0; transform: translateY(4px); }
.btn.is-loading .btn-spinner { opacity: 1; transform: none; }
.btn.is-success .btn-label { opacity: 0; }
.btn.is-success .btn-check { opacity: 1; transform: none; }
.btn .btn-check { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.4); transition: opacity var(--dur-fast), transform var(--dur-slow) var(--ease-spring); }

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-radius: var(--radius-full) 0 0 var(--radius-full); }
.btn-group .btn:last-child  { border-radius: 0 var(--radius-full) var(--radius-full) 0; }
.btn-group .btn + .btn { margin-left: -1px; }

/* --- Spinner ------------------------------------------------------------- */
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; opacity: .9; }
.spinner-lg { width: 24px; height: 24px; }

/* --- Form fields --------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: var(--text-sm); font-weight: 500; color: var(--fg); }
.hint  { font-size: var(--text-xs); color: var(--fg-muted); }
.field.is-error .hint { color: var(--danger-fg); }

.input, .select, .textarea {
  width: 100%; height: 42px; padding: 0 16px;
  font: 400 var(--text-base)/1 var(--font-sans); color: var(--fg);
  background: var(--surface-sunken);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-subtle); }
.input:hover, .select:hover, .textarea:hover { background: var(--surface-hover); }
.input:focus, .select:focus, .textarea:focus,
.input-group:focus-within { outline: none; background: var(--surface); border-color: var(--gray-300); box-shadow: var(--ring-field); }
.input-outline { background: var(--surface); border-color: var(--border-strong); }
.input-sm { height: 32px; font-size: var(--text-sm); border-radius: var(--radius-md); padding: 0 10px; }
.textarea { height: auto; min-height: 104px; padding: 12px 16px; line-height: var(--lh-base); resize: vertical; }
.select { appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237A7A85' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.field.is-error .input, .input.is-error { border-color: var(--danger); box-shadow: var(--ring-danger); background: var(--surface); }

/* Input met prefix/suffix (zoals "€ 9.930 · Zelfde als vorige maand") */
.input-group {
  display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px;
  background: var(--surface-sunken); border: 1px solid transparent; border-radius: var(--radius-lg);
  transition: background-color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-base) var(--ease-out);
}
.input-group:hover { background: var(--surface-hover); }
.input-group > input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; font: inherit; font-size: var(--text-base); color: var(--fg); }
.input-group > input::placeholder { color: var(--fg-subtle); }
.input-group .affix { color: var(--fg-subtle); font-size: var(--text-sm); white-space: nowrap; }
.input-group svg.lucide { color: var(--fg-subtle); width: 16px; height: 16px; }
.input-group.input-outline { background: var(--surface); border-color: var(--border-strong); }

/* Zoekveld */
.search { position: relative; }
.search .kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }

/* --- Toggle (switch) ----------------------------------------------------- */
.toggle { position: relative; display: inline-flex; flex-shrink: 0; width: 44px; height: 26px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.toggle .track {
  position: absolute; inset: 0; border-radius: var(--radius-full);
  background: var(--gray-200); box-shadow: inset 0 1px 2px rgba(16,16,26,.08);
  transition: background-color var(--dur-base) var(--ease-out);
}
.toggle .thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(16,16,26,.18), 0 2px 6px rgba(16,16,26,.08);
  transition: transform var(--dur-base) var(--ease-spring), width var(--dur-fast) var(--ease-out);
}
.toggle input:checked ~ .track { background: var(--accent); }
.toggle input:checked ~ .thumb { transform: translateX(18px); }
.toggle input:active ~ .thumb { width: 24px; }
.toggle input:checked:active ~ .thumb { transform: translateX(14px); }
.toggle input:focus-visible ~ .track { box-shadow: var(--ring); }
.toggle-sm { width: 34px; height: 20px; }
.toggle-sm .thumb { width: 14px; height: 14px; }
.toggle-sm input:checked ~ .thumb { transform: translateX(14px); }

/* --- Checkbox & radio ---------------------------------------------------- */
.check, .radio { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.check input, .radio input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.check .box, .radio .box {
  width: 100%; height: 100%; display: grid; place-items: center;
  border: 1.5px solid var(--gray-300); background: var(--surface);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.check .box { border-radius: 5px; }
.radio .box { border-radius: 50%; }
.check svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset var(--dur-base) var(--ease-out) 40ms; }
.check input:checked ~ .box, .check input:indeterminate ~ .box { background: var(--accent); border-color: var(--accent); }
.check input:checked ~ .box svg { stroke-dashoffset: 0; }
.radio .box::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform var(--dur-base) var(--ease-spring); }
.radio input:checked ~ .box { background: var(--accent); border-color: var(--accent); }
.radio input:checked ~ .box::after { transform: scale(1); }
.check input:active ~ .box, .radio input:active ~ .box { transform: scale(.88); }
.check input:focus-visible ~ .box, .radio input:focus-visible ~ .box { box-shadow: var(--ring); }

/* Rij met titel + omschrijving + toggle (instellingen) */
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; }
.setting-row + .setting-row { border-top: 1px solid var(--border); }
.setting-row .title { font-size: var(--text-md); font-weight: 500; letter-spacing: var(--tracking-snug); }
.setting-row .desc  { font-size: var(--text-sm); color: var(--fg-muted); margin-top: 2px; }

/* --- Segmented control (7D / 30D / 90D) ---------------------------------- */
.segmented {
  position: relative; display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-hover); border-radius: var(--radius-full);
}
.segmented button {
  position: relative; z-index: 1; height: 28px; padding: 0 12px;
  font: 500 var(--text-xs)/1 var(--font-sans); color: var(--fg-muted);
  border-radius: var(--radius-full); background: none; border: 0; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.segmented button:hover { color: var(--fg); }
.segmented button.is-active { color: var(--fg); }
.segmented .indicator {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0;
  background: var(--surface); border-radius: var(--radius-full); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out);
}

/* --- Tabs (onderlijn) ---------------------------------------------------- */
.tabs { position: relative; display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.tabs button {
  position: relative; height: 40px; padding: 0 12px; background: none; border: 0; cursor: pointer;
  font: 500 var(--text-sm)/1 var(--font-sans); color: var(--fg-muted);
  transition: color var(--dur-fast);
}
.tabs button:hover, .tabs button.is-active { color: var(--fg); }
.tabs button .count { margin-left: 6px; }
.tabs .indicator { position: absolute; bottom: -1px; left: 0; height: 2px; width: 0; background: var(--fg); border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out); }

/* --- Badge / pill / kbd -------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px;
  font: 500 var(--text-2xs)/1 var(--font-sans); letter-spacing: .01em;
  border-radius: var(--radius-xs); background: var(--tag-bg); color: var(--tag-fg);
  white-space: nowrap;
}
.badge-lg { height: 26px; padding: 0 9px; font-size: var(--text-sm); font-weight: 400; }
/* Varianten blijven grijs; alleen de stip draagt de status-kleur */
.badge-accent  { --tone: var(--gray-900); }
.badge-success { --tone: var(--success); }
.badge-warning { --tone: var(--warning); }
.badge-info    { --tone: var(--info); }
.badge-danger  { --tone: var(--danger); background: var(--danger-soft); color: var(--danger-fg); }
.badge-pro     { background: var(--highlight-soft); color: var(--highlight-fg); font-weight: 500; }
.badge-solid   { background: var(--primary); color: var(--primary-fg); }
.badge-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tone, var(--gray-400)); }
.count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; font: 500 var(--text-2xs)/1 var(--font-sans); font-variant-numeric: tabular-nums; border-radius: 6px; background: var(--surface-hover); color: var(--fg-muted); }
.count-accent { background: var(--accent); color: #fff; }

.kbd { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 6px; font: 500 var(--text-2xs)/1 var(--font-mono); color: var(--fg-muted); background: var(--surface); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; }

/* --- Avatar -------------------------------------------------------------- */
.avatar {
  --size: 32px;
  position: relative; display: inline-grid; place-items: center; flex-shrink: 0;
  width: var(--size); height: var(--size); border-radius: 50%;
  font: 600 calc(var(--size) * .35)/1 var(--font-sans); color: #fff; letter-spacing: -0.01em;
  text-align: center; justify-content: center; text-box: trim-both cap alphabetic;
  background: var(--gray-400); overflow: visible;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: var(--surface-hover); }
.avatar .status { z-index: 1; }
.avatar-xs { --size: 20px; font-size: 8px; } .avatar-sm { --size: 24px; } .avatar-lg { --size: 40px; } .avatar-xl { --size: 56px; }
.avatar-square { border-radius: 28%; }
.avatar .status { position: absolute; right: -1px; bottom: -1px; width: 30%; height: 30%; min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px var(--surface); }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { box-shadow: 0 0 0 2px var(--surface); transition: transform var(--dur-base) var(--ease-out); }
/* Overlap schaalt mee met de maat, zodat letters zichtbaar blijven */
.avatar-stack .avatar + .avatar { margin-left: calc(var(--size) * -0.16); }
.avatar-stack:hover .avatar { transform: translateX(calc(var(--n, 0) * 4px)); }

/* Workspace-logo: lichte tegel met een zachte kleurverloop-vlek in de hoek
   (zoals een app-icoon). Initialen zijn standaard verborgen en staan alleen
   in de markup voor schermlezers; .ws-logo-initials toont ze. */
.ws-logo {
  --size: 32px;
  --c: var(--ws, var(--ws-blue));
  position: relative; overflow: hidden;
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: var(--size); height: var(--size); border-radius: calc(var(--size) * .28);
  font-size: 0; color: transparent;
  background:
    radial-gradient(150% 120% at 0% 100%, var(--c) 0%, color-mix(in srgb, var(--c) 60%, #fff) 30%, color-mix(in srgb, var(--c) 18%, #fff) 52%, transparent 72%),
    radial-gradient(80% 70% at 30% 110%, color-mix(in srgb, var(--c) 85%, #000) 0%, transparent 70%),
    linear-gradient(160deg, #FFFFFF 0%, var(--gray-100) 100%);
  box-shadow: inset 0 0 0 1px rgba(14, 20, 17, .06), 0 1px 2px rgba(14, 20, 17, .06);
}
.ws-logo-initials { font: 600 calc(var(--size) * .4)/1 var(--font-sans); color: #fff; background: var(--gray-900); }
.ws-logo-sm { --size: 24px; } .ws-logo-lg { --size: 40px; } .ws-logo-xl { --size: 56px; }

/* --- Card ---------------------------------------------------------------- */
.card { background: var(--surface); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); }
.card-pad { padding: 24px; }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 0; }
.card-body { padding: 20px 24px 24px; }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--border); }
.card-flat { box-shadow: 0 0 0 1px var(--border); }
.card-interactive { cursor: pointer; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-fast); }
.card-interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Ingezonken statblok (zoals "Expected revenue / Cost per order") */
.stat-well { display: flex; background: var(--surface-sunken); border-radius: var(--radius-lg); padding: 14px 16px; }
.stat-well > * + * { border-left: 1px solid var(--border-strong); padding-left: 16px; margin-left: 16px; }
.stat-label { font-size: var(--text-xs); color: var(--fg-muted); }
.stat-value { font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-snug); font-variant-numeric: tabular-nums; margin-top: 4px; }
.stat-big { font-size: var(--text-3xl); line-height: 1; font-weight: 600; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }

/* Keuzetegel: een grotere radio/checkbox met icoon, titel en omschrijving.
   Gebruik bij een keuze tussen een paar duidelijk verschillende opties
   (projecttype, abonnement, sjabloon). role="radio" voor één keuze,
   role="checkbox" voor meerdere. Geselecteerd = aria-checked="true". */
.tile {
  position: relative; display: block; width: 100%; padding: 13px 14px;
  border-radius: var(--radius-md); background: var(--surface); border: 0; cursor: pointer; text-align: left;
  box-shadow: inset 0 0 0 1px var(--border);
  transition: background-color var(--dur-instant), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.tile:hover { background: var(--surface-2); }
.tile:active { transform: scale(.985); }
.tile:focus-visible { box-shadow: inset 0 0 0 1px var(--border-strong), var(--ring); }
.tile[aria-checked="true"] { box-shadow: inset 0 0 0 1px var(--fg); }
.tile .tile-title { display: block; font-size: var(--text-sm); line-height: 20px; font-weight: 500; color: var(--fg); padding-right: 24px; }
.tile .tile-desc { display: block; font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--fg-muted); margin-top: 1px; }
.tile .tile-check { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--gray-300); transition: background-color var(--dur-fast), box-shadow var(--dur-fast); }
.tile .tile-check svg { width: 9px; height: 9px; stroke: #fff; stroke-width: 3; fill: none; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset var(--dur-base) var(--ease-out); }
.tile[aria-checked="true"] .tile-check { background: var(--fg); box-shadow: none; }
.tile[aria-checked="true"] .tile-check svg { stroke-dashoffset: 0; }
.tile[role="checkbox"] .tile-check { border-radius: 4px; }

/* --- Menu / dropdown / popover ------------------------------------------- */
.popover {
  position: fixed; top: 0; left: 0; z-index: var(--z-dropdown); min-width: 220px; padding: 6px;
  background: var(--surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transform-origin: var(--origin, top left);
  opacity: 0; transform: scale(.96) translateY(-4px); pointer-events: none; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-in), transform var(--dur-fast) var(--ease-in), visibility 0s linear var(--dur-fast);
}
.popover.is-open {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s;
}
.menu-label { padding: 8px 10px 4px; }
.menu-sep { height: 1px; margin: 6px -6px; background: var(--border); }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px;
  font: 400 var(--text-sm)/1 var(--font-sans); color: var(--fg); text-align: left;
  background: none; border: 0; border-radius: var(--radius-md); cursor: pointer;
  transition: background-color var(--dur-instant);
}
.menu-item svg.lucide { width: 16px; height: 16px; color: var(--fg-muted); }
.menu-item:hover, .menu-item.is-focused { background: var(--surface-hover); }
.menu-item .trail { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--fg-subtle); }
.menu-item.is-danger { color: var(--danger-fg); }
.menu-item.is-danger svg.lucide { color: currentColor; }
.menu-item-lg { height: 48px; }
.menu-item .check-mark { margin-left: auto; color: var(--fg); animation: pop-in var(--dur-slow) var(--ease-spring) both; }

/* --- Tooltip ------------------------------------------------------------- */
.tooltip {
  position: fixed; z-index: var(--z-tooltip); pointer-events: none;
  padding: 6px 9px; border-radius: var(--radius-sm);
  font: 500 var(--text-xs)/1.2 var(--font-sans); color: #fff; background: var(--gray-950);
  box-shadow: var(--shadow-md); white-space: nowrap;
  opacity: 0; transform: translateX(-4px) scale(.96); transform-origin: left center;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tooltip.is-top { transform: translateY(4px) scale(.96); transform-origin: bottom center; }
.tooltip.is-visible { opacity: 1; transform: none; }
.tooltip .kbd { margin-left: 6px; height: 16px; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.75); }

/* --- Modal / dialog ------------------------------------------------------ */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(14, 20, 17, .18); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.overlay.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease-out), visibility 0s; }
.modal {
  position: fixed; z-index: var(--z-modal); left: 50%; top: 50%;
  width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto;
  background: var(--surface); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl);
  opacity: 0; visibility: hidden; transform: translate(-50%, -48%) scale(.97);
  transition: opacity var(--dur-fast) var(--ease-in), transform var(--dur-fast) var(--ease-in), visibility 0s linear var(--dur-fast);
}
.modal.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s; }
.modal-lg { width: min(640px, calc(100vw - 32px)); }

/* Command palette */
.cmdk { top: 18vh; transform: translate(-50%, -8px) scale(.98); width: min(560px, calc(100vw - 32px)); padding: 0; }
.cmdk.is-open { transform: translate(-50%, 0); }
.cmdk-input { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px; border-bottom: 1px solid var(--border); }
.cmdk-input input { flex: 1; border: 0; outline: 0; background: none; font: 400 var(--text-md)/1 var(--font-sans); color: var(--fg); }
.cmdk-input input::placeholder { color: var(--fg-subtle); }
.cmdk-list { max-height: 340px; overflow: auto; padding: 6px; }

/* --- Toast --------------------------------------------------------------- */
.toast-region { position: fixed; z-index: var(--z-toast); right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; min-width: 300px; max-width: 420px; padding: 12px 12px 12px 14px;
  background: var(--gray-950); color: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
  font-size: var(--text-sm); animation: toast-in var(--dur-slow) var(--ease-out) both;
}
.toast.is-leaving { animation: toast-out var(--dur-base) var(--ease-in) both; }
.toast .toast-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.12); }
.toast .toast-icon svg { width: 14px; height: 14px; }
.toast .toast-action { margin-left: auto; color: #fff; background: rgba(255,255,255,.12); }
.toast .toast-action:hover { background: rgba(255,255,255,.2) !important; }

/* --- Progress & stappen -------------------------------------------------- */
.progress { position: relative; height: 6px; border-radius: var(--radius-full); background: var(--surface-hover); overflow: hidden; }
.progress > .bar {
  position: absolute; inset: 0 auto 0 0; width: var(--value, 0%); border-radius: inherit;
  background: var(--accent);
  transition: width var(--dur-slower) var(--ease-out);
}
.progress-indeterminate > .bar { width: 35%; animation: indeterminate 1.4s var(--ease-in-out) infinite; }
@keyframes indeterminate { from { transform: translateX(-100%) } to { transform: translateX(300%) } }

.steps { display: flex; flex-direction: column; gap: 14px; }
.step { display: flex; align-items: center; gap: 12px; font-size: var(--text-sm); }
.step .marker { position: relative; display: grid; place-items: center; width: 18px; height: 18px; flex-shrink: 0; }
.step .meta { margin-left: auto; font-size: var(--text-xs); color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.step.is-done .marker { border-radius: 50%; background: var(--accent); animation: pop-in var(--dur-slow) var(--ease-spring) both; }
.step.is-done .marker svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 3.2; fill: none; stroke-dasharray: 20; stroke-dashoffset: 20; animation: draw var(--dur-base) var(--ease-out) 120ms forwards; }
.step.is-active .marker { border-radius: 50%; border: 2px solid var(--gray-200); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.step.is-pending { color: var(--fg-subtle); }
.step.is-pending .marker { border-radius: 50%; border: 1.5px dashed var(--gray-300); }
.step .text { transition: color var(--dur-base); }

/* --- Skeleton ------------------------------------------------------------ */
.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-hover) 0%, var(--surface-2) 50%, var(--surface-hover) 100%);
  background-size: 200% 100%; animation: shimmer 1.6s linear infinite;
}

/* --- Tabel --------------------------------------------------------------- */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.table th { height: 40px; padding: 0 16px; text-align: left; font-weight: 500; font-size: var(--text-xs); color: var(--fg-subtle); border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { height: 56px; padding: 0 16px; border-bottom: 1px solid var(--border); color: var(--fg); }
.table tbody tr { transition: background-color var(--dur-instant); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr.is-selected { background: var(--accent-soft); }
.table tbody tr:last-child td { border-bottom: 0; }

/* --- Lijst-rij (members, inbox) ------------------------------------------ */
.list-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: var(--radius-lg); transition: background-color var(--dur-instant); }
.list-row:hover { background: var(--surface-2); }
.list-row.is-selected { background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border); }

/* --- Divider ------------------------------------------------------------- */
.divider { height: 1px; background: var(--border); border: 0; }
.divider-dashed { height: 0; background: none; border-top: 1px dashed var(--border-strong); }

/* --- Empty state --------------------------------------------------------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 48px 24px; }
.empty .empty-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--surface-sunken); color: var(--fg-muted); margin-bottom: 8px; }

/* --- Alert / callout ----------------------------------------------------- */
.callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--surface-sunken); font-size: var(--text-sm); }
.callout svg.lucide { margin-top: 2px; width: 16px; height: 16px; }
/* Neutraal vlak; alleen het icoon krijgt de toon. Fouten blijven rood. */
.callout-accent svg.lucide  { color: var(--fg); }
.callout-warning svg.lucide { color: var(--warning); }
.callout-success svg.lucide { color: var(--success); }
.callout-danger { background: var(--danger-soft); color: var(--danger-fg); }

/* --- Chart helpers ------------------------------------------------------- */
.chart-tip {
  position: absolute; pointer-events: none; padding: 8px 10px; border-radius: var(--radius-md);
  background: var(--surface); box-shadow: var(--shadow-md);
  font-size: var(--text-xs); white-space: nowrap; transform: translate(-50%, calc(-100% - 12px));
  transition: left var(--dur-fast) var(--ease-out), top var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}

/* --- Kanban -------------------------------------------------------------
   Kolommen zijn ingezonken vlakken; kaarten zijn witte tegels met
   --shadow-card. Tijdens slepen tilt de kaart op (schaal + schaduw +
   lichte rotatie) en laat een gestippelde plek achter. */
.kb-board { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding: 2px 2px 24px; scroll-snap-type: x proximity; }
.kb-board::-webkit-scrollbar { height: 8px; }
.kb-board::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 8px; }
.kb-col {
  flex: 0 0 292px; display: flex; flex-direction: column; max-height: 100%;
  background: var(--surface-sunken); border-radius: var(--radius-2xl); padding: 6px;
  scroll-snap-align: start;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.kb-col.is-over { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-strong); }
.kb-col-head { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 10px; }
.kb-col-head .name { font-size: var(--text-sm); font-weight: 500; }
.kb-col-head .status { width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--gray-300)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone, var(--gray-300)) 18%, transparent); }
.kb-col-head .count { background: var(--surface); box-shadow: var(--shadow-xs); }
.kb-col-head .actions { margin-left: auto; display: flex; gap: 2px; opacity: .6; transition: opacity var(--dur-fast); }
.kb-col:hover .kb-col-head .actions { opacity: 1; }
.kb-list { display: flex; flex-direction: column; gap: 6px; min-height: 48px; padding: 2px; }

.kb-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  cursor: grab; user-select: none; touch-action: none;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.kb-card:hover { box-shadow: var(--shadow-md); }
.kb-card:active { cursor: grabbing; }
.kb-card .title { font-size: var(--text-sm); font-weight: 500; line-height: 1.4; letter-spacing: -0.005em; }
.kb-card .meta { display: flex; align-items: center; gap: 12px; font-size: var(--text-xs); color: var(--fg-subtle); }
.kb-card .meta > span { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.kb-card .meta svg.lucide { width: 13px; height: 13px; }
.kb-card .meta .is-due { color: var(--danger-fg); }
.kb-card .meta .avatar-stack { margin-left: auto; }
.kb-card .cover { height: 72px; margin: -4px -6px 0; border-radius: var(--radius-md); background:
  radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--c) 70%, #fff) 0%, color-mix(in srgb, var(--c) 18%, #fff) 45%, transparent 75%),
  linear-gradient(160deg, #fff, var(--gray-100)); box-shadow: inset 0 0 0 1px rgba(14,20,17,.05); }
.kb-card .sub { height: 3px; border-radius: 3px; background: var(--surface-hover); overflow: hidden; }
.kb-card .sub > i { display: block; height: 100%; width: var(--p); background: var(--fg); border-radius: inherit; transition: width var(--dur-slower) var(--ease-out); }
.kb-col[data-done] .kb-card .title { color: var(--fg-muted); }
.kb-col[data-done] .kb-card .done-mark { color: var(--highlight); }

/* Slepen */
.kb-placeholder { border-radius: var(--radius-lg); background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(14,20,17,.025) 6px 12px); }
.kb-ghost {
  position: fixed; z-index: var(--z-modal); pointer-events: none; margin: 0;
  box-shadow: var(--shadow-xl); cursor: grabbing;
  transform: rotate(var(--tilt, 1.5deg)) scale(1.03);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base);
}
.kb-ghost.is-settling { transform: none; box-shadow: var(--shadow-card); transition: left var(--dur-slow) var(--ease-out), top var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow); }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; }

/* Kaart toevoegen */
.kb-add { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 10px; margin-top: 2px; border-radius: var(--radius-md); border: 0; background: none; color: var(--fg-subtle); font: 400 var(--text-sm)/1 var(--font-sans); cursor: pointer; transition: background-color var(--dur-instant), color var(--dur-instant); }
.kb-add:hover { background: var(--surface-hover); color: var(--fg); }
.kb-composer { padding: 10px 12px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card), var(--ring); }
.kb-composer textarea { width: 100%; resize: none; border: 0; outline: 0; background: none; font: 500 var(--text-sm)/1.4 var(--font-sans); color: var(--fg); }
.kb-composer textarea::placeholder { color: var(--fg-subtle); font-weight: 400; }

/* --- Projectlabel (op kaarten) ------------------------------------------
   Grijze tag met een klein vierkantje in de projectkleur. Klikbaar. */
.badge-project { border: 0; cursor: pointer; font-weight: 500; transition: background-color var(--dur-instant), transform var(--dur-fast) var(--ease-out); }
.badge-project:hover { background: var(--surface-active); }
.badge-project:active { transform: scale(.96); }
.badge-project .sq, .chip .sq { width: 8px; height: 8px; border-radius: 2.5px; background: var(--pc); flex-shrink: 0; }
.badge-project.is-empty { background: transparent; color: var(--fg-subtle); box-shadow: inset 0 0 0 1px var(--border-strong); }
.badge-project.is-empty:hover { color: var(--fg); background: var(--surface-sunken); }

/* --- Filterchips --------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 12px;
  font: 500 var(--text-sm)/1 var(--font-sans); color: var(--fg-muted);
  background: transparent; border: 0; border-radius: var(--radius-full); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border);
  transition: background-color var(--dur-instant), color var(--dur-instant), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.chip:hover { color: var(--fg); background: var(--surface); box-shadow: var(--shadow-xs); }
.chip:active { transform: scale(.97); }
.chip.is-active { color: var(--fg); background: var(--surface); box-shadow: var(--shadow-card); }
.chip .chip-count { min-width: 20px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 6px; background: var(--surface-hover); font-size: var(--text-2xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.chip-ghost { box-shadow: none; color: var(--fg-subtle); }
.chip-ghost:hover { box-shadow: inset 0 0 0 1px var(--border); background: transparent; }

/* --- Kleurkiezer --------------------------------------------------------- */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch-pick { position: relative; width: 28px; height: 28px; cursor: pointer; }
.swatch-pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch-pick span {
  position: absolute; inset: 0; border-radius: 50%; background: var(--pc);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
.swatch-pick:hover span { transform: scale(1.08); }
.swatch-pick input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--pc); transform: scale(.9); }
.swatch-pick input:focus-visible + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--pc), var(--ring); }

/* --- Statistiek-chip (samenvatting boven een bord) ----------------------- */
.stat-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--radius-full); background: var(--surface); box-shadow: var(--shadow-xs); font-size: var(--text-sm); color: var(--fg-muted); }
.stat-chip b { color: var(--fg); font-weight: 600; }
.stat-chip svg.lucide { width: 14px; height: 14px; color: var(--fg-subtle); }
.stat-chip.is-warning svg.lucide { color: var(--warning); }

/* --- Planningbord -------------------------------------------------------
   Eén grid-template voor alle rijen: eerste kolom vast (sticky), daarna
   de dagen. Vandaag krijgt een licht getinte kolom. */
.pl-wrap { overflow: hidden; padding: 0; }
.pl-scroll { overflow-x: auto; }
.pl-grid { --first: 232px; min-width: calc(var(--first) + var(--days) * 168px); }
.pl-row { display: grid; grid-template-columns: var(--first) repeat(var(--days), minmax(168px, 1fr)); }
.pl-sticky { position: sticky; left: 0; z-index: 2; background: var(--surface); }

.pl-head { border-bottom: 1px solid var(--border); }
.pl-headcell { display: flex; align-items: center; padding: 0 20px; font-size: var(--text-xs); font-weight: 500; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: var(--tracking-caps); border-right: 1px solid var(--border); }
.pl-day { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 14px; border-left: 1px solid var(--border); }
.pl-date { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 4px; border-radius: var(--radius-full); font-size: var(--text-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-day.is-today .pl-date { background: var(--fg); color: var(--fg-inverse); }
.pl-today-label { margin-left: auto; font-size: var(--text-2xs); font-weight: 500; color: var(--highlight-fg); background: var(--highlight-soft); padding: 3px 7px; border-radius: var(--radius-xs); }
.pl-day.is-today, .pl-cell.is-today, .pl-cap.is-today { background: color-mix(in srgb, var(--surface-sunken) 70%, transparent); }

/* Projectgroep */
.pl-group + .pl-group { border-top: 1px solid var(--border); }
.pl-group-head { background: var(--surface); }
.pl-group-title { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px 0 10px; border-right: 1px solid var(--border); font-size: var(--text-sm); }
.pl-group-title .sq { width: 10px; height: 10px; border-radius: 3px; background: var(--pc); flex-shrink: 0; }
.pl-group-meta { grid-column: 2 / -1; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 16px; }
.pl-toggle { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-xs); border: 0; background: none; color: var(--fg-subtle); cursor: pointer; transition: background-color var(--dur-instant), color var(--dur-instant); }
.pl-toggle:hover { background: var(--surface-hover); color: var(--fg); }
.pl-toggle svg.lucide { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); }
.pl-group.is-collapsed .pl-toggle svg.lucide { transform: rotate(-90deg); }
.pl-group-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.pl-group-body > div { overflow: clip; min-height: 0; }  /* clip i.p.v. hidden: houdt sticky werkend */
.pl-group.is-collapsed .pl-group-body { grid-template-rows: 0fr; }

/* Fase-rij */
.pl-group-body .pl-row { border-top: 1px dashed var(--border); }
.pl-phase { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px 12px 20px; border-right: 1px solid var(--border); }
.pl-phase-bar { width: 3px; align-self: stretch; min-height: 32px; border-radius: 3px; background: color-mix(in srgb, var(--pc) 45%, #fff); }
.pl-phase-name { font-size: var(--text-sm); font-weight: 500; }
.pl-phase-input { width: 100%; border: 0; outline: 0; background: var(--surface); border-radius: 8px; padding: 5px 9px; font: inherit; box-shadow: inset 0 0 0 1px var(--gray-300), var(--ring-field); }
.pl-cell { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-left: 1px solid var(--border); min-height: 60px; }

/* Persoon-pill */
.pl-pill {
  position: relative; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 8px 0 4px;
  border-radius: var(--radius-full); background: var(--surface-sunken);
  font-size: var(--text-xs); font-weight: 500; color: var(--fg);
  box-shadow: inset 3px 0 0 -1px transparent;
  transition: background-color var(--dur-instant), box-shadow var(--dur-fast);
}
.pl-pill .avatar { --size: 22px; }
.pl-pill:hover { background: var(--surface-hover); }
.pl-pill.is-conflict { background: var(--warning-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 35%, transparent); }
.pl-remove { position: absolute; right: 4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--surface); color: var(--fg-muted); cursor: pointer; opacity: 0; transform: scale(.7); box-shadow: var(--shadow-xs); transition: opacity var(--dur-fast), transform var(--dur-base) var(--ease-spring); }
.pl-remove svg.lucide { width: 12px; height: 12px; }
.pl-pill:hover .pl-remove, .pl-remove:focus-visible { opacity: 1; transform: none; }
.pl-remove:hover { color: var(--danger-fg); }

/* Inplan-knop: rustig, sterker bij hover op de cel */
.pl-add { display: grid; place-items: center; height: 30px; border-radius: var(--radius-full); border: 0; background: transparent; color: var(--fg-subtle); cursor: pointer; opacity: .55; box-shadow: inset 0 0 0 1px transparent; transition: opacity var(--dur-fast), background-color var(--dur-instant), box-shadow var(--dur-fast), color var(--dur-instant); }
.pl-add svg.lucide { width: 14px; height: 14px; }
.pl-cell:hover .pl-add { opacity: 1; box-shadow: inset 0 0 0 1px var(--border-strong); }
.pl-add:hover, .pl-add[aria-expanded="true"] { opacity: 1; color: var(--fg); background: var(--surface); box-shadow: var(--shadow-xs) !important; }

/* Bezetting */
.pl-foot { border-top: 1px solid var(--border); background: var(--surface-2); }
.pl-foot .pl-sticky { background: var(--surface-2); }
.pl-cap { padding: 12px 14px; border-left: 1px solid var(--border); }
.pl-sticky + .pl-day, .pl-sticky + .pl-cell, .pl-sticky + .pl-cap { border-left: 0; }

/* --- Tijdlijn (Gantt) ---------------------------------------------------
   Links een vaste projectkolom, rechts een horizontaal scrollend canvas.
   Rijhoogte en kophoogte zijn gedeeld, zodat links en rechts uitlijnen. */
.gt-card { padding: 0; overflow: hidden; }
.gt { --row-h: 112px; --head-h: 100px; --status-w: 128px; display: grid; grid-template-columns: clamp(300px, 34%, 380px) minmax(0, 1fr); }
.gt-left { border-right: 1px solid var(--border); background: var(--surface); position: relative; z-index: 2; }
.gt-left-head { height: var(--head-h); display: grid; grid-template-columns: 1fr var(--status-w); align-items: end; gap: 12px; padding: 0 16px 12px 20px; border-bottom: 1px solid var(--border); font-size: var(--text-2xs); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-subtle); }
.gt-row-left { height: var(--row-h); display: grid; grid-template-columns: minmax(0, 1fr) var(--status-w); gap: 12px; padding: 14px 14px 10px 20px; border-bottom: 1px solid var(--border); }
.gt-row-left:last-child, .gt-row:last-child { border-bottom: 0; }
.gt-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gt-name { font-size: var(--text-md); font-weight: 600; letter-spacing: var(--tracking-snug); }
.gt-info .sq { width: 8px; height: 8px; border-radius: 2.5px; flex-shrink: 0; }
.gt-info .btn-xs { color: var(--fg-muted); }
.gt-info .btn-xs svg.lucide { width: 13px; height: 13px; }
.gt-status { display: flex; flex-direction: column; justify-content: center; gap: 7px; font-size: var(--text-sm); }
.gt-status > div { display: grid; grid-template-columns: 38px 6px minmax(0, 1fr); align-items: center; gap: 7px; }
.gt-status .gt-ph { font: 500 10px/1 var(--font-mono); letter-spacing: .04em; color: var(--fg-subtle); }
.gt-status .dot { width: 6px; height: 6px; border-radius: 50%; }

.gt-right { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
.gt-right::-webkit-scrollbar { height: 10px; }
.gt-right::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 10px; border: 3px solid var(--surface); }
.gt-canvas { position: relative; }

/* Kop: maand · week · dag */
.gt-head { position: relative; height: var(--head-h); border-bottom: 1px solid var(--border); }
.gt-tier { position: absolute; left: 0; right: 0; }
.gt-tier > div { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.gt-months { top: 0; height: 36px; border-bottom: 1px solid var(--border); }
.gt-months > div { padding: 0; overflow: visible; border-left: 1px solid var(--border); font-size: var(--text-sm); font-weight: 600; }
.gt-months > div::first-letter { text-transform: uppercase; }
.gt-months > div:first-child { border-left: 0; }
.gt-months span { position: sticky; left: 0; padding: 0 12px; }
.gt-weeks { top: 36px; height: 26px; }
.gt-weeks > div { padding: 0 8px; border-left: 1px solid var(--border); font: 500 var(--text-xs)/1 var(--font-mono); color: var(--fg-muted); }
.gt-days { top: 62px; height: 38px; }
.gt-days > div { flex-direction: column; justify-content: center; gap: 1px; font-variant-numeric: tabular-nums; }
.gt-days small { font: 500 9px/1 var(--font-mono); color: var(--fg-subtle); }
.gt-days b { font-size: var(--text-xs); font-weight: 500; color: var(--fg-muted); }
.gt-days .is-weekend { background: var(--surface-sunken); }
.gt-days .is-weekend b { color: var(--fg-subtle); }
.gt-days .is-today b { display: grid; place-items: center; width: 22px; height: 18px; border-radius: 6px; background: var(--fg); color: var(--fg-inverse); }
.gt-days.is-compact .is-weekend { background: var(--surface-sunken); }

/* Body */
.gt-body { position: relative; }
.gt-cols { position: absolute; inset: 0; pointer-events: none; }
.gt-col { position: absolute; top: 0; bottom: 0; pointer-events: auto; }
.gt-col.is-weekend { background: var(--surface-sunken); }
.gt-col.is-monday { border-left: 1px solid var(--border); }
.gt-col.is-closed { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--danger) 14%, transparent) 0 3px, transparent 3px 7px); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--danger) 25%, transparent), inset -1px 0 0 color-mix(in srgb, var(--danger) 25%, transparent); }
.gt-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px solid var(--fg); z-index: 3; pointer-events: none; }

.gt-row { position: relative; height: var(--row-h); border-bottom: 1px solid var(--border); z-index: 1; }

/* Balk per fase */
.gt-bar { position: absolute; inset: 0; }
.gt-seg {
  position: absolute; top: 50%; height: 30px; margin-top: -15px;
  display: flex; align-items: center; overflow: visible;
  cursor: grab; user-select: none; touch-action: none;
  transition: left var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out), box-shadow var(--dur-base), filter var(--dur-fast);
}
.gt-seg:first-child { border-radius: 8px 0 0 8px; }
.gt-seg:last-child { border-radius: 0 8px 8px 0; }
.gt-seg:only-child { border-radius: 8px; }
.gt-seg:hover { filter: brightness(1.05); }
.gt-wv   { background: var(--ph-wv); }
.gt-prod { background: var(--ph-prod); }
.gt-mont { background: var(--ph-mont); border-radius: 8px !important; }
.gt-label { position: sticky; left: 8px; padding: 0 10px; color: #fff; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 1px rgba(0,0,0,.12); }
.gt-handle { position: absolute; right: -4px; top: 3px; bottom: 3px; width: 8px; border-radius: 4px; cursor: ew-resize; z-index: 2; }
.gt-handle::after { content: ""; position: absolute; left: 3px; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: rgba(255,255,255,.8); opacity: 0; transition: opacity var(--dur-fast); }
.gt-seg:hover .gt-handle::after { opacity: 1; }
.gt-row.is-moving .gt-seg, .gt-row.is-resizing .gt-seg { transition: none; box-shadow: var(--shadow-lg); cursor: grabbing; }
.gt-row.is-moving .gt-bar { transform: translateY(-2px); }
.gt-bar.is-done .gt-seg { filter: saturate(.25) brightness(1.15); }
.gt-gap { position: absolute; top: 50%; height: 0; border-top: 1.5px dashed var(--gray-300); }
.gt-marker { position: absolute; top: 14px; bottom: 14px; background: color-mix(in srgb, var(--ph-wv) 16%, transparent); border-radius: 3px; }
.gt-marker::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 0; height: 6px; border-radius: 2px; background: var(--ph-wv); }
.gt-empty { position: sticky; left: 16px; z-index: 2; display: flex; align-items: center; gap: 10px; width: max-content; height: 100%; padding-left: 16px; }
.gt.is-zooming .gt-seg { transition: none; }

/* Legenda */
.gt-legend { width: 14px; height: 8px; border-radius: 3px; }
.gt-legend-marker { background: var(--ph-wv); height: 4px; width: 8px; box-shadow: 0 -6px 0 2px color-mix(in srgb, var(--ph-wv) 16%, transparent); }
.gt-legend-closed { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--danger) 30%, transparent) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 25%, transparent); height: 12px; width: 10px; }

/* --- Logo-lockup (beeldmerk + woordmerk) --------------------------------
   Alles in em, zodat de verhouding gelijk blijft op elk formaat: zet alleen
   font-size op .v-lockup. Verhouding gelijk aan het logo in de app
   (24px beeldmerk, 8px ruimte, 17px woord). */
.v-lockup { display: inline-flex; align-items: center; gap: .44em; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; line-height: 1; }
.v-lockup [data-veneer-logo] { display: block; flex-shrink: 0; width: 1.42em; height: 1.42em; }

/* Lockup met het woordmerk uit Veneer.svg i.p.v. Geist-tekst.
   Hoogte van het woordmerk = kaphoogte van de tekstversie (≈ .72em). */
.v-lockup [data-veneer-wordmark] { display: block; height: .72em; }
.v-lockup .vwordmark, [data-veneer-wordmark] > .vwordmark { display: block; height: 100%; width: auto; overflow: visible; }

/* Laadicoon in knoppen (zie ui.js prepButton) */
.btn .btn-loader { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; flex-shrink: 0; }
.btn .btn-loader .vloader-svg { width: 100%; height: 100%; }
.btn .btn-loading-text { white-space: nowrap; }
.btn-icon .btn-loading-text, .btn-xs .btn-loading-text, .btn.is-loader-only .btn-loading-text { display: none; }

/* --- Laadscherm (hele app) ----------------------------------------------
   Volledig scherm tijdens het opstarten van de app. Groot laadicoon,
   woordmerk, korte tekst en een dun, onbepaald voortgangsbalkje.
   In:  fade 220ms.   Uit (.is-leaving): fade + laadicoon schaalt licht op. */
.app-loader {
  position: fixed; inset: 0; z-index: calc(var(--z-tooltip) + 10);
  display: grid; place-items: center; background: var(--bg); color: var(--fg);
  animation: fade-in var(--dur-base) var(--ease-out) both;
}
.app-loader.is-leaving { animation: fade-out var(--dur-slow) var(--ease-in) both; pointer-events: none; }
.app-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.app-loader-icon { font-size: 64px; transition: transform var(--dur-slow) var(--ease-out); }
.app-loader.is-leaving .app-loader-icon { transform: scale(1.15); }
.app-loader-word { display: block; height: 15px; margin-top: 6px; }
.app-loader-word .vwordmark { height: 100%; width: auto; display: block; }
.app-loader-text { font-size: var(--text-sm); color: var(--fg-muted); animation: fade-up var(--dur-slow) var(--ease-out) .5s both; }
.app-loader .progress { width: 160px; height: 3px; animation: fade-in var(--dur-slow) var(--ease-out) .7s both; }
.app-loader .progress > .bar { background: var(--fg); }