/* SEMANU dashboard styles
   Builds on /assets/css/styles.css and inherits the brand variables. */

/* The [hidden] attribute must always win, even over .dash-modal { display:flex }
   and .dash-shell { display:grid } which otherwise have equal specificity. */
[hidden] { display: none !important; }

.dash-body {
  background: var(--bg-elev);
  min-height: 100vh; min-height: 100dvh;
}

/* hide the public floating WhatsApp button on the dashboard */
.wa-float { display: none !important; }

/* ---------- Login ---------- */

.dash-login {
  min-height: 100vh; min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 90, 31, 0.07), transparent 50%),
    radial-gradient(circle at 80% 90%, rgba(255, 90, 31, 0.05), transparent 40%),
    var(--bg-elev);
}

.dash-login-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.06);
}

.dash-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.dash-login-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

/* ---------- Language switcher (dashboard) ---------- */

.dash-lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  padding: 0;
}

.dash-lang-switcher button {
  background: transparent;
  border: 0;
  width: 0;
  height: 30px;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: width 0.2s ease, opacity 0.15s ease, background 0.15s, color 0.15s;
}

.dash-lang-switcher button:hover { color: var(--text); }

.dash-lang-switcher button.is-active {
  background: var(--text);
  color: #fff;
  width: 30px;
  opacity: 1;
}

.dash-lang-switcher:hover button,
.dash-lang-switcher:focus-within button {
  width: 30px;
  opacity: 1;
}

/* Variant for the light sidebar */
.dash-lang-switcher--side {
  border-color: var(--border-strong);
  align-self: flex-start;
  margin-bottom: 4px;
}
.dash-lang-switcher--side button { color: var(--text-muted); }
.dash-lang-switcher--side button:hover { color: var(--text); }
.dash-lang-switcher--side button.is-active {
  background: var(--accent-solid, #CC4516);
  color: #fff;
}

.dash-login-card h1 {
  font-size: 26px;
  letter-spacing: -0.025em;
  margin-bottom: 6px;
}

.dash-login-sub {
  color: var(--text-dim);
  font-size: 15px;
  margin-bottom: 24px;
}

.dash-login form .form-row { margin-bottom: 14px; }
.dash-login form .form-row label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}
.dash-login form input[type="email"],
.dash-login form input[type="password"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 10px 14px;
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
}
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.28);
.dash-login form input:focus { outline: 0; border-color: var(--accent);   box-shadow: 0 0 0 3px var(--accent-glow, rgba(255, 90, 31, 0.12));
}

.form-row--inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.form-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
}
.form-checkbox input { accent-color: var(--accent); }

#login-submit { width: 100%; justify-content: center; }

.dash-login-error {
  color: var(--danger-dim);
  font-size: 13px;
  margin-top: 12px;
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.dash-login-meta {
  margin-top: 24px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
}
.dash-login-meta code {
  background: var(--bg-elev);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ---------- Password field + recovery ---------- */

.pw-field { position: relative; }
.dash-login form .pw-field input[type="password"],
.dash-login form .pw-field input[type="text"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 10px 72px 10px 14px;
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
}
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.28);
.dash-login form .pw-field input:focus { outline: 0; border-color: var(--accent);   box-shadow: 0 0 0 3px var(--accent-glow, rgba(255, 90, 31, 0.12));
}

/* Schuif de native wachtwoordbeheer-/sleutelhanger-knop (Safari/WebKit) links
   van ons eigen oogje zodat ze niet overlappen; verberg de Edge-reveal. */
.dash-login form .pw-field input::-webkit-credentials-auto-fill-button,
.dash-login form .pw-field input::-webkit-strong-password-auto-fill-button {
  margin-right: 40px;
}
.dash-login form .pw-field input::-ms-reveal { display: none; }

.pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
}
.pw-toggle:hover { color: var(--text); }

.pw-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.pw-meter-track {
  flex: 1;
  height: 5px;
  background: var(--bg-elev);
  border-radius: 999px;
  overflow: hidden;
}
.pw-meter-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width 0.2s, background 0.2s;
}
.pw-meter-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pw-meter[data-strength="weak"]   .pw-meter-fill { width: 33%;  background: var(--danger); }
.pw-meter[data-strength="weak"]   .pw-meter-label { color: var(--danger-dim); }
.pw-meter[data-strength="medium"] .pw-meter-fill { width: 66%;  background: var(--accent); }
.pw-meter[data-strength="medium"] .pw-meter-label { color: var(--accent-dim); }
.pw-meter[data-strength="strong"] .pw-meter-fill { width: 100%; background: var(--success); }
.pw-meter[data-strength="strong"] .pw-meter-label { color: var(--success-dim); }

.pw-hint {
  font-size: 12.5px;
  margin-top: 6px;
}
.pw-hint[data-state="bad"]  { color: var(--danger-dim); }
.pw-hint[data-state="good"] { color: var(--success-dim); }

/* ---------- App shell ---------- */

.dash-shell {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh; min-height: 100dvh;
}

.dash-side {
  background: #ffffff;
  color: var(--text-dim);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;   /* Safari op iOS rekent 100vh zonder adresbalk */
  align-self: start;
}

.dash-brand--side {
  color: var(--text);
  font-size: 16px;
  padding: 4px 8px 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
  margin-bottom: 2px;
}

.dash-brand--side .brand-name { color: var(--text); }
.dash-brand--side .brand-name span { color: var(--text); }
.dash-brand--side .brand-mark {
  background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20' fill='none' stroke='%23FF5A1F' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'><path d='M3 3 L11 10 L3 17'/></svg>");
}
.dash-side-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dim);
  background: var(--accent-bg);
  padding: 2px 7px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  margin-left: 6px;
}

.dash-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.dash-nav-item {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text-dim);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.dash-nav-item:hover { background: var(--bg-elev); color: var(--text); }
.dash-nav-item.is-active {
  background: var(--accent-bg);
  color: var(--accent-dim);
  font-weight: 600;
}
.dash-nav-item svg { color: currentColor; opacity: 0.85; }
.dash-nav-item.is-active svg { opacity: 1; }
.dash-nav-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--bg-elev);
  color: var(--text-muted);
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  min-width: 22px;
  text-align: center;
}
.dash-nav-item.is-active .dash-nav-count {
  background: var(--accent-solid, #CC4516);
  color: #fff;
}

.dash-side-foot {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-solid, #CC4516);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.dash-user-name {
  font-size: 12.5px;
  color: var(--text);
  font-weight: 500;
  word-break: break-word;
}

.dash-logout-btn {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 11.5px;
  color: var(--accent);
  cursor: pointer;
  margin-top: 2px;
}
.dash-logout-btn:hover { text-decoration: underline; }

.dash-side-link {
  font-size: 11.5px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
}
.dash-side-link:hover { color: var(--text); }

/* ---------- Main area ---------- */

.dash-main {
  padding: 32px 36px 96px;
  min-width: 0;
}

.dash-view-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
  flex-wrap: wrap;
}
.dash-view-head h1 {
  font-size: 28px;
  letter-spacing: -0.025em;
  margin: 6px 0 0;
}

.dash-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dash-filters select {
  font-size: 13.5px;
}

/* Consistent select styling across the whole dashboard — drop the native
   chrome-grey look and use the SEMANU input style with a custom arrow. */
.dash-body select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%235B5B60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1.5 1.5 7 7l5.5-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 6px 32px 6px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  line-height: 1.25;
}
.dash-body select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.dash-body select:disabled { opacity: 0.6; cursor: default; }

/* KPIs */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
@media (max-width: 1180px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.kpi-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 10px;
}
.kpi-num {
  font-size: 26px;
  letter-spacing: -0.025em;
  font-weight: 600;
  line-height: 1.05;
  color: var(--text);
}
.kpi-delta {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
}
/* Sprint 3 Pad B: klikbare KPI-tegel + warning-status voor overdue. */
.kpi-card-clickable {
  cursor: pointer;
  transition: border-color .15s ease, transform .12s ease;
}
.kpi-card-clickable:hover { border-color: #FF5A1F; transform: translateY(-1px); }
.kpi-card-clickable:focus-visible {
  outline: 2px solid #FF5A1F;
  outline-offset: 2px;
}
.kpi-delta-warn { color: #B45309; font-weight: 600; }

/* Charts grid */
.dash-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}
@media (max-width: 880px) { .dash-charts-grid { grid-template-columns: 1fr; } }

.dash-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.dash-chart-head { margin-bottom: 12px; }
/* Hard-cap canvas size — Chart.js sets inline styles that ignore non-!important CSS. */
.dash-chart-card { overflow: hidden; }
.dash-chart-card canvas {
  display: block !important;
  max-height: 260px !important;
  height: 260px !important;
  width: 100% !important;
}
.dash-chart-head h3 {
  font-size: 16px;
  letter-spacing: -0.015em;
  margin-top: 4px;
}

/* Tables */
.dash-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  overflow-x: auto;
}
.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.dash-table thead th {
  background: var(--bg-elev);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.dash-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.dash-table tbody tr:last-child td { border-bottom: 0; }
.dash-table tbody tr:hover td { background: var(--bg-elev); }
.dash-table .dash-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 28px;
}

.dash-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid;
}
.dash-tag-green   { background: var(--success-bg); color: var(--success-dim); border-color: var(--success); }
.dash-tag-amber   { background: var(--warning-bg); color: var(--warning-dim); border-color: var(--warning); }
.dash-tag-red     { background: var(--danger-bg);  color: var(--danger-dim);  border-color: var(--danger); }
.dash-tag-accent  { background: var(--accent-bg);  color: var(--accent-dim);  border-color: var(--accent); }
.dash-tag-neutral { background: var(--bg-elev);    color: var(--text-dim);    border-color: var(--border-strong); }
.dash-tag-portal  { background: #FFF4ED;            color: #C04000;            border-color: #FFA478; font-weight: 600; }

.dash-row-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  color: var(--text);
}
.dash-row-btn:hover { background: var(--bg-elev); border-color: var(--text); }

.dash-status-select {
  font: inherit;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-card);
}
/* Read-only projectstatus in het Opdrachten-overzicht (beheer via kanban). */
.dash-status-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-soft, #FAFAFA);
  color: var(--text-dim, #5C5C5E);
  border: 1px solid var(--border, #E5E5E7);
}
.dash-status-pill.is-active { background: #D1FAE5; color: #047857; border-color: transparent; }
.dash-status-pill.is-completed { background: #E0E7FF; color: #4338CA; border-color: transparent; }
.dash-status-pill.is-paused { background: #FEF3C7; color: #B45309; border-color: transparent; }
.dash-status-pill.is-cancelled { background: #F3F4F6; color: #6B7280; border-color: transparent; }

/* Modal */
.dash-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.dash-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.dash-modal-panel {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  max-width: 720px;
  width: calc(100% - 32px);
  max-height: 86vh; max-height: 86dvh;
  overflow: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
}
.dash-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.dash-modal-head h2 {
  font-size: 18px;
  letter-spacing: -0.02em;
  margin: 0;
}
.dash-modal-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-muted);
  /* Zonder deze maten is het klikvlak de breedte van het kruisje: ± 13px. */
  min-width: 32px;
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  line-height: 1;
}
.dash-modal-close:hover { color: var(--text); }
.dash-modal-body { padding: 22px; }

/* Wide modal — roomier panel + a two-column body so a client or project
   fits on (almost) one screen without scrolling. */
.dash-modal-panel--wide { max-width: 1080px; }
/* Wide modals used to flow content with CSS columns, but the card-based
   layouts (Prototype C: explicit grids + stacked cards) handle their own
   structure and break under CSS columns. Wide now just means a wider panel.
   The !important defenses are a guard against an older cached CSS bundle
   still being served on top of newer JS — they ensure the new card layout
   never falls back into the broken 2-column flow. */
.dash-modal-body--wide {
  column-count: 1 !important;
  columns: 1 !important;
  column-gap: 0 !important;
}
.dash-modal-body--wide .dash-modal-grid { margin-bottom: 4px; }

.dash-modal-grid { display: grid; grid-template-columns: 130px 1fr; gap: 10px 18px; align-items: baseline; }
.dash-modal-grid .label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dash-modal-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.dash-modal-section h3 {
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-weight: 500;
}

.dash-form {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}
.dash-form-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 10px;
}
.dash-form-row:last-child { margin-bottom: 0; }
.dash-form-row label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-form-row input,
.dash-form-row select,
.dash-form-row textarea {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  min-width: 0;        /* prevents grid blow-out on long values */
}
.dash-form-row textarea { min-height: 70px; resize: vertical; }
.dash-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
/* On narrow screens the 170px label column eats too much width.
   Stack label above input so nothing overlaps. */
@media (max-width: 640px) {
  .dash-form-row { grid-template-columns: 1fr; gap: 4px; }
  .dash-form-row label { margin-bottom: 2px; }
}
/* Split address row — street + number, postal code + city side by side. */
.addr-split { display: flex; gap: 8px; min-width: 0; }
.addr-split input { flex: 1; min-width: 0; }
.addr-split .addr-num { flex: 0 0 84px; }
.addr-split .addr-zip { flex: 0 0 110px; }

/* Client documents — list + upload row inside the client modal */
.doc-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
}
.doc-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-row-main strong { font-size: 14px; }
.doc-row-meta { font-size: 11.5px; color: var(--text-muted); }
.doc-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.doc-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.doc-upload input[type="text"] {
  flex: 1;
  min-width: 140px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
}
.doc-upload select {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
}
.doc-upload input[type="file"] { font-size: 12px; flex: 1; min-width: 160px; }
.doc-upload .btn { white-space: nowrap; flex-shrink: 0; }
.doc-upload select {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
}

.dash-modal-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 6px 0 0;
  line-height: 1.5;
}
.nda-content-input { min-height: 130px; font-family: var(--font-mono); font-size: 12px; }

/* Upsell create form inside the project modal */
.upsell-form { margin-top: 4px; }
.upsell-price-input { max-width: 150px; flex: 0 0 auto !important; }
.upsell-vat-input { max-width: 90px; flex: 0 0 auto !important; }
.upsell-body-input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  min-height: 60px;
  resize: vertical;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
}

/* Agreements (NDA / DPA) — stacked rows with a reassign control */
.doc-row--stack { flex-direction: column; align-items: stretch; gap: 8px; }
.doc-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.nda-kind-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dim);
  background: var(--accent-bg);
  border-radius: 100px;
  padding: 2px 7px;
}
.nda-reassign { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.nda-reassign select {
  flex: 1;
  min-width: 150px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
}

/* Editable email templates */
.et-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 14px;
}
.et-card h3 { margin: 0 0 12px; font-size: 15px; }
.et-card .dash-form-row { grid-template-columns: 110px 1fr; margin-bottom: 10px; }
.et-card textarea { min-height: 80px; }

/* Portal access — list of portal users + invite row inside the client modal */
.portal-user-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 14px;
}
.portal-invite-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 12px;
}
.portal-invite-row input,
.portal-invite-row select {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 7px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
}
/* Modal dropdowns: keep room for the custom arrow, cap the width so they
   don't stretch awkwardly wide, and match the trimmed-down height. */
.portal-invite-row select {
  flex: 0 1 360px;
  max-width: 360px;
  padding: 6px 32px 6px 12px;
}
.portal-invite-row .btn { white-space: nowrap; flex-shrink: 0; }

/* ---------- Questionnaire panel (project-fiche admin side) ---------- */
.q-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.q-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.q-badge.is-sent      { background: rgba(255, 90, 31, 0.08); color: var(--accent-dim); border-color: rgba(255,90,31,0.2); }
.q-badge.is-progress  { background: rgba(255, 90, 31, 0.12); color: var(--accent-dim); border-color: rgba(255,90,31,0.3); }
.q-badge.is-submitted { background: var(--success-bg, #E6F8EF); color: var(--success-dim); border-color: var(--success); }

.q-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.q-readonly-section {
  border-top: 1px solid var(--border);
  padding: 14px 0 6px;
}
.q-readonly-section h4 {
  font-size: 14px;
  margin: 0 0 12px;
  color: var(--text);
  letter-spacing: -0.005em;
}
.q-readonly-q {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.q-readonly-q:last-child { border-bottom: 0; }
.q-readonly-label { font-size: 13px; color: var(--text-dim); }
.q-readonly-value { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; }

@media (max-width: 720px) {
  .q-readonly-q { grid-template-columns: 1fr; gap: 4px; }
}

/* Portal invite — one editable e-mail row per address, + to add, × to remove. */
.invite-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.invite-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.invite-row-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 7px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
}
.invite-row-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.invite-row-x {
  flex: 0 0 34px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.invite-row-x:hover {
  color: var(--danger-dim);
  border-color: var(--danger-dim);
  background: var(--danger-bg);
}
/* Per-rij actie-knop: Invite / Resend / Has-access ---------------------- */
.invite-row-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--accent, #ff5a1f);
  background: var(--accent-solid, #CC4516);
  color: white;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.invite-row-action:hover:not(:disabled) { filter: brightness(.92); }
.invite-row-action:disabled { opacity: 0.6; cursor: not-allowed; }
.invite-row-action.btn-invite--sent {
  background: white;
  color: var(--accent, #ff5a1f);
}
/* "Has access" badge - geen knop, alleen visueel */
.invite-row-action--ok {
  background: #FFF4ED;
  color: #C04000;
  border-color: #FFA478;
  cursor: default;
}
.invite-add-row { margin-top: 8px; }
/* Compactere dash-card variant voor de Portal Access sectie. */
.dash-card--compact { padding-top: 14px; padding-bottom: 14px; }
.dash-card--compact .dash-card-title-sm { margin-bottom: 10px; }
/* Ghost button — low-emphasis action (e.g. "+ add row"). */
.btn-ghost {
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.btn-ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-glow);
}
.portal-invite-status { margin: 8px 0 0; font-size: 12px; color: var(--text-dim); }
.portal-invite-status[data-state="bad"]  { color: var(--danger-dim); }
.portal-invite-status[data-state="good"] { color: var(--success-dim); }

/* VIES lookup field — input + "Look up" button side by side */
.vies-field { display: flex; gap: 8px; align-items: stretch; }
.vies-field input { flex: 1; min-width: 0; }
.vies-field .dash-row-btn { white-space: nowrap; flex-shrink: 0; }
.vies-status { margin: 0; font-size: 12px; color: var(--text-dim); }
.vies-status[data-state="bad"]  { color: var(--danger-dim); }
.vies-status[data-state="good"] { color: var(--success-dim); }
.vies-status[data-state="warn"] { color: #B45309; }

/* breakdown list inside modal */
.dash-answer-list {
  display: grid;
  gap: 6px;
  font-size: 13px;
}
.dash-answer-row {
  display: grid;
  grid-template-columns: 28px 1fr 80px;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.dash-answer-row:last-child { border-bottom: 0; }

/* ---- Dashboard landing tiles ---- */
/* Cap the grid at 4 columns so 6+ tiles always wrap to at least 2 rows. */
.dash-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 6px;
}
@media (max-width: 1180px) {
  .dash-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .dash-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .dash-tile-grid { grid-template-columns: 1fr; }
}
.dash-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 22px 22px 18px;
  min-height: 184px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.dash-tile:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 10px 28px -12px var(--accent-glow);
}
.dash-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--accent-glow);
  color: var(--accent);
  margin-bottom: 4px;
  transition: background 0.16s ease, color 0.16s ease;
}
.dash-tile:hover .dash-tile-icon { background: var(--accent-solid, #CC4516); color: #fff; }
.dash-tile-name { font-size: 15.5px; font-weight: 600; }
.dash-tile-desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
.dash-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding-top: 10px;
}
.dash-tile-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.dash-tile-arrow {
  color: var(--accent);
  font-size: 16px;
  line-height: 1;
  transition: transform 0.16s ease;
}
.dash-tile:hover .dash-tile-arrow { transform: translateX(3px); }

/* ---- Tile row (lead channels, beheer tabs) ---- */
.dash-tile-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
}
.dash-channel-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  color: var(--text-dim);
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.dash-channel-tile:hover { border-color: var(--accent); color: var(--text); }
.dash-channel-tile.is-active {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--text);
}
.dash-channel-icon {
  display: inline-flex;
  color: var(--accent);
}
.dash-channel-name { font-weight: 600; }
.dash-channel-count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--bg);
  border-radius: 100px;
  padding: 1px 7px;
}
.dash-channel-tile.is-active .dash-channel-count { background: #fff; }

.leadkanaal-panel, .beheer-panel { animation: dash-fade-in 0.2s ease; }
.beheer-doc { margin-bottom: 18px; }
.beheer-doc h4 { margin: 0 0 6px; font-size: 13px; }
.beheer-doc-text {
  margin: 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
  white-space: pre-wrap;
  max-height: 280px;
  overflow: auto;
}
.dash-filters--panel { margin-bottom: 12px; }
@keyframes dash-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Search input ---- */
.dash-search {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 7px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  min-width: 240px;
}
.dash-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ---- Stacked table blocks (e.g. Contacts: unlinked + linked) ---- */
.dash-table-block { margin-top: 18px; }
.dash-table-block-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.dash-table-block-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.dash-table-block-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.dash-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.dash-row-btn--danger {
  color: var(--danger-dim);
  border-color: var(--danger-dim);
}
/* Minimal ghost-icon-button (Tom juni 2026: geen kader/grijze bg, oranje hover).
   Gebruikt voor delete-icoon in projectoverzicht en bewerken/verwijderen
   icoontjes in project-detail-header. */
.dash-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.dash-icon-btn:hover,
.dash-icon-btn:focus-visible {
  color: var(--accent);
  background: var(--accent-bg, rgba(255,90,31,0.08));
  outline: none;
}
.dash-icon-btn.dash-icon-danger:hover,
.dash-icon-btn.dash-icon-danger:focus-visible {
  color: #d9534f;
  background: rgba(217,83,79,0.08);
}

/* Linked? badge in the lead-channel tables — green oval glow for "yes",
   red oval glow for "no". */
.koppel-badge {
  display: inline-block;
  padding: 3px 13px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.koppel-badge--yes {
  color: #1a7f4b;
  background: #e9f7ef;
  box-shadow: 0 0 0 1px rgba(26, 127, 75, 0.35), 0 0 12px -2px rgba(26, 127, 75, 0.55);
}
.koppel-badge--no {
  color: #c0392b;
  background: #fdeceb;
  box-shadow: 0 0 0 1px rgba(192, 57, 43, 0.35), 0 0 12px -2px rgba(192, 57, 43, 0.55);
}
.dash-row-btn--danger:hover {
  background: var(--danger-bg);
  border-color: var(--danger-dim);
  color: var(--danger-dim);
}

/* Modal: top action row (Edit button etc.) */
.dash-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}
/* Modal: a single list row (linked contacts, projects in client modal) */
.dash-line-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 14px;
}
.dash-line-row:last-child { border-bottom: 0; }
.dash-line-row > span:first-child { flex: 1; min-width: 0; }
.dash-line-row .dash-row-actions { margin-left: auto; }

/* ---- New-item badge (Contacts nav item + dashboard tile) ---- */
.dash-nav-badge,
.dash-tile-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 100px;
  background: var(--accent-solid, #CC4516);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  animation: dash-badge-pop 0.3s ease, dash-badge-pulse 2.4s ease-in-out 0.3s infinite;
}
.dash-nav-badge { margin-left: auto; }
.dash-tile-badge { position: absolute; top: 12px; right: 12px; }
.dash-tile { position: relative; }
@keyframes dash-badge-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
@keyframes dash-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%      { box-shadow: 0 0 0 5px transparent; }
}

/* ---- Time-tracking timer ---- */
.time-timer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
}
.time-timer-display {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  min-width: 96px;
  font-variant-numeric: tabular-nums;
}
.time-timer-project,
.time-timer-desc {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 7px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
}
.time-timer-desc { flex: 1; min-width: 160px; }
.time-timer-controls { display: flex; gap: 6px; margin-left: auto; }

/* ---- Orange primary buttons + small animations (dashboard only) ---- */
/* The shared .btn-primary is near-black on the public site; in the ops
   dashboard we want the warmer SEMANU orange. */
.dash-body .btn-primary {
  background: var(--accent-solid, #CC4516);
  color: #fff;
}
.dash-body .btn-primary:hover {
  background: var(--accent);
  filter: brightness(0.93);
}
.dash-body .btn {
  transition: transform 0.14s ease, filter 0.14s ease, background 0.14s ease,
              border-color 0.14s ease, box-shadow 0.14s ease;
}
.dash-body .btn-primary:hover,
.dash-body .btn-secondary:hover { transform: translateY(-1px); }
.dash-body .btn:active { transform: translateY(0); }
.dash-row-btn { transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease; }

/* Views and table rows fade/slide in gently. */
.dash-view:not([hidden]) { animation: dash-fade-in 0.22s ease; }
.dash-table tbody tr { transition: background 0.12s ease; }
.dash-table tbody tr:hover { background: var(--bg-elev); }
.dash-modal-panel { animation: dash-modal-in 0.18s ease; }
@keyframes dash-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Responsive sidebar collapse */
@media (max-width: 880px) {
  .dash-shell { grid-template-columns: 1fr; }
  .dash-side {
    position: relative;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .dash-nav { flex-direction: row; flex-wrap: wrap; flex: none; gap: 4px; width: 100%; }
  .dash-nav-item { grid-template-columns: auto auto auto; padding: 6px 10px; }
  .dash-side-foot { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
  .dash-main { padding: 20px 18px 60px; }
}


/* Source chips inside the contact modal */
.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px 4px 3px 10px;
  font-size: 12px;
  margin: 0 6px 6px 0;
}
.source-chip-x {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  min-width: 24px;
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 2px 5px;
  border-radius: 100px;
}
.source-chip-x:hover { color: var(--danger-dim); background: var(--danger-bg); }

/* ============================================================
   Client modal — Prototype C layout
   Stacked, grouped cards on a single scroll. Profile-completeness
   banner up top, two-column grid for company + portal, then one
   card per section (contacts, projects, agreements).
   ============================================================ */

.dash-client-warn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 12px;
  background: #fdecdd;
  border: 1px solid #f0b27a;
  border-radius: 8px;
  color: #8a4b00;
  font-size: 13px;
}
.dash-client-warn-icon { font-size: 16px; line-height: 1; }
.dash-client-warn .dash-row-btn { margin-left: auto; }

.dash-card {
  background: var(--bg, #fff);
  border: 1px solid var(--border, #e5e5e7);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 12px;
}
.dash-card--header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dash-card-header-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.dash-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #ffe3d6;
  color: #b45309;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.dash-card-title  { margin: 0; font-size: 16px; font-weight: 600; }
.dash-card-sub    { margin: 2px 0 0; font-size: 13px; color: var(--text-dim, #5c5c5e); }
.dash-card-title-sm { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--text-dim, #5c5c5e); text-transform: uppercase; letter-spacing: 0.04em; }
.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px;
}
.dash-card-head .dash-card-title-sm { margin: 0; }
.dash-card-notes {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border, #e5e5e7);
  font-size: 13px;
  color: var(--text-dim, #5c5c5e);
}

.dash-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 12px;
}
.dash-card-grid .dash-card { margin: 0; }
@media (max-width: 720px) {
  .dash-card-grid { grid-template-columns: 1fr; }
}

.dash-kv {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 12px;
  font-size: 13px;
}
.dash-kv-key { color: var(--text-dim, #5c5c5e); }
.dash-kv-val { color: var(--text, #0a0a0a); }

/* KPI tiles inside a modal — 4-wide on desktop, 2-wide on narrow viewports */
.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 0 12px;
}
.dash-kpi {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e5e5e7);
  border-radius: 8px;
  padding: 10px 12px;
}
.dash-kpi-label {
  margin: 0;
  font-size: 11px;
  color: var(--text-dim, #5c5c5e);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dash-kpi-num {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text, #0a0a0a);
}
.dash-kpi-sub {
  font-size: 12px;
  color: var(--text-dim, #5c5c5e);
  font-weight: 400;
}
@media (max-width: 720px) {
  .dash-kpi-row { grid-template-columns: 1fr 1fr; }
}

.dash-avatar--sq {
  border-radius: 8px;
  background: #ffe3d6;
  color: #b45309;
  font-size: 18px;
}

/* Dashed toggle button for "send NDA/DPA" — collapsed default state of the
   Overeenkomsten card. Keeps the modal calm until Tom actually wants to send
   a new agreement. */
.dash-send-toggle {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  background: transparent;
  border: 1px dashed var(--border-strong, #d0d0d0);
  border-radius: 8px;
  color: var(--text-dim, #5c5c5e);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dash-send-toggle:hover:not(:disabled) {
  background: var(--bg-soft, #fafafa);
  border-color: var(--accent, #ff5a1f);
  color: var(--accent, #ff5a1f);
}
.dash-send-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Copy-knop header on NDA / DPA text blocks in Beheer */
.beheer-doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
}
.beheer-doc-head h4 { margin: 0; }

/* ============================================================
   Sales pipeline — Opvolging tabel + Kanban
   ============================================================ */

/* Pipeline status pills used in the list table */
.dash-pip-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}
.dash-pip-new           { background: #e6f1fb; color: #0c447c; }
.dash-pip-in_contact    { background: #fdecdd; color: #8a4b00; }
.dash-pip-qualified     { background: #fdecdd; color: #8a4b00; }
.dash-pip-proposal_sent { background: #fdecdd; color: #8a4b00; }
.dash-pip-sluimer       { background: #ece9f7; color: #3c3489; }
.dash-pip-lost          { background: #fdeceb; color: #c0392b; }
.dash-pip-won           { background: #e9f7ef; color: #1a7f4b; }

.dash-pip-bell {
  display: inline-block;
  font-size: 13px;
  margin-right: 4px;
  animation: pip-pulse 2s ease-in-out infinite;
}
@keyframes pip-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* View toggle on Opvolging header */
.opvolging-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border-strong, #d2d2d7);
  border-radius: 8px;
  overflow: hidden;
}
.opvolging-view-toggle .dash-row-btn {
  border-radius: 0;
  border: 0;
  border-right: 1px solid var(--border-strong, #d2d2d7);
}
.opvolging-view-toggle .dash-row-btn:last-child { border-right: 0; }
.opvolging-view-toggle .dash-row-btn.is-active {
  background: var(--accent-solid, #CC4516);
  color: #fff;
}

/* ============================================================
   Kanban board (mei 2026 — "helder & luchtig" voorstel A)
   - Witte kolommen met dunne border, fase-bolletje in header
   - Cards: 2px topbar in fase-kleur, witte achtergrond, soft hover-shadow
   - Footer met datum (overdue = rood) + budget per card
   Pagina-header blijft ongewijzigd.
   ============================================================ */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(220px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
}

/* Fase-kleuren als CSS-variabelen per kolom-status. Erven naar cards binnen
   die kolom voor topbar-accent. */
.kanban-col[data-kanban-col="new"]           { --stage: #888780; --stage-bg: #F1EFE8; }
.kanban-col[data-kanban-col="in_contact"]    { --stage: #378ADD; --stage-bg: #E6F1FB; }
.kanban-col[data-kanban-col="qualified"]     { --stage: #1D9E75; --stage-bg: #E1F5EE; }
.kanban-col[data-kanban-col="proposal_sent"] { --stage: #BA7517; --stage-bg: #FAEEDA; }
.kanban-col[data-kanban-col="sluimer"]       { --stage: #B4B2A9; --stage-bg: #F1EFE8; }
.kanban-col[data-kanban-col="lost"]          { --stage: #A32D2D; --stage-bg: #FCEBEB; }
.kanban-col[data-kanban-col="active"]        { --stage: #FF5A1F; --stage-bg: #FFF1EB; }

.kanban-col {
  --stage: #888780;
  --stage-bg: #F1EFE8;
  background: #ffffff;
  border: 0.5px solid #E5E5E7;
  border-radius: 10px;
  min-height: 360px;
  overflow: hidden;
  transition: background 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
}
.kanban-col.is-over {
  background: var(--stage-bg);
  border-color: var(--stage);
}

.kanban-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 0.5px solid #E5E5E7;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0A0A0A;
  font-weight: 500;
  background: #FAFAFA;
}
.kanban-col-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kanban-col-name::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stage);
  flex-shrink: 0;
}
.kanban-col-count {
  background: #ffffff;
  border: 0.5px solid #E5E5E7;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 500;
  color: #5C5C5E;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
}

.kanban-col-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: #FAFAFA;
  flex: 1;
}
.kanban-col-empty {
  text-align: center;
  color: #B4B2A9;
  font-size: 12px;
  margin: 0;
  padding: 14px 0;
}

.kanban-card {
  background: #ffffff;
  border: 0.5px solid #E5E5E7;
  border-top: 2px solid var(--stage, #888780);
  border-radius: 8px;
  padding: 10px;
  cursor: grab;
  transition: box-shadow 0.15s, transform 0.05s, border-color 0.15s;
}
.kanban-card:hover {
  border-color: #D3D1C7;
  border-top-color: var(--stage, #888780);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.kanban-card:active { cursor: grabbing; }
.kanban-card.is-dragging { opacity: 0.4; }

.kanban-card-title {
  font-weight: 500;
  font-size: 13px;
  color: #0A0A0A;
  line-height: 1.3;
}
.kanban-card-sub {
  color: #888780;
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.3;
}

.kanban-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 0.5px solid #F0F0F2;
  font-size: 11px;
}
.kanban-card-date {
  color: #888780;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.kanban-card-date.is-overdue {
  color: #993C1D;
  font-weight: 500;
}
.kanban-card-budget {
  font-weight: 500;
  color: #0A0A0A;
  font-variant-numeric: tabular-nums;
}

.kanban-card-tag {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  background: #F1EFE8;
  padding: 2px 8px;
  border-radius: 999px;
  color: #5C5C5E;
}

/* Klikbare lijstrijen (Open/Edit-knoppen verwijderd: klik de rij om te openen). */
.dash-row-clickable { cursor: pointer; }
.dash-row-clickable:hover > td { background: rgba(255, 90, 31, 0.05); }

/* Notitietijdlijn in het Opvolging-modal */
.opv-note-add textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong, #d2d2d7);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
}
.opv-note-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.opv-note {
  background: var(--bg-elev, #f5f5f7);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.opv-note-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text-dim, #5c5c5e);
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.opv-note-date     { font-family: var(--font-mono, monospace); }
.opv-note-assignee { color: var(--accent, #ff5a1f); }
.opv-note-body     { font-size: 13.5px; white-space: pre-wrap; }

/* New-lead row highlight — alleen achtergrond + smal puls-streepje aan de
   linkerkant. Voorheen kreeg ELKE td een border-left waardoor er felle
   oranje strepen tussen alle kolommen verschenen. */
.lead-row.is-new-lead td {
  background: rgba(255, 90, 31, 0.05);
}
.lead-row.is-new-lead td:first-child {
  position: relative;
}
.lead-row.is-new-lead td:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent, #ff5a1f);
  animation: lead-pulse 1.6s ease-in-out infinite;
}
@keyframes lead-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.35; }
}

/* --- Documenten-tijdlijn (mei 2026) --- */
.doc-row-timeline { flex-basis: 100%; width: 100%; margin-top: 8px; padding: 10px 12px; background: #FAFAFA; border: 1px solid #ECECEC; border-radius: 8px; }
.doc-timeline-list { list-style: none; margin: 0; padding: 0; }
.doc-timeline-list li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; }
.doc-timeline-ev { font-weight: 600; color: #0A0A0A; }
.doc-timeline-meta { color: #8E8E93; }

/* --- Sleep-herordening van offerteregels (mei 2026) --- */
.ln-drag { cursor: grab; user-select: none; color: #B0B0B5; text-align: center; line-height: 1; }
.ln-drag:active { cursor: grabbing; }
.doc-lines-row.ln-dragging { opacity: .45; }
.doc-lines-row.ln-dragover { box-shadow: inset 0 2px 0 #FF5A1F; }

/* --- Aantal-stepper (−/+) op offerte/factuurregels (mei 2026) --- */
.ln-qty { display: inline-flex; align-items: center; gap: 4px; justify-content: center; }
/* Hogere specificiteit dan ".doc-lines-row input { width:100% }" zodat het veld niet uitrekt */
.doc-lines-row .ln-qty input { width: 44px; text-align: center; flex: 0 0 auto; padding: 4px 2px; }
.ln-qty input::-webkit-outer-spin-button,
.ln-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ln-qty input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.ln-qty-btn { width: 24px; height: 24px; line-height: 1; border: 1px solid #D3D1C7; background: #fff;
  border-radius: 6px; cursor: pointer; font-size: 15px; color: #0A0A0A; flex: 0 0 auto; padding: 0; }
.ln-qty-btn:hover:not(:disabled) { background: #F5F5F7; }
.ln-qty-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ================================================================
   PROJECT MODAL — tabbed layout (mei 2026)
   ================================================================ */

/* Tab bar */
.proj-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border, #e5e5e7);
  margin: 0 0 14px;
}
.proj-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 14px 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim, #5c5c5e);
  cursor: pointer;
  border-radius: 0;
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.proj-tab-btn:hover { color: var(--text, #0a0a0a); }
.proj-tab-btn.is-active {
  color: var(--accent, #ff5a1f);
  border-bottom-color: var(--accent, #ff5a1f);
  font-weight: 600;
}

/* Progress bar used in Overzicht KPI row */
.proj-progress {
  height: 4px;
  background: var(--border, #e5e5e7);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.proj-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent, #ff5a1f);
  transition: width 0.3s ease;
}

/* Inline "log uren" mini-form inside Uren tab */
.proj-time-add {
  display: grid;
  grid-template-columns: 130px minmax(180px, 1fr) 90px 140px auto;
  gap: 8px 14px;
  align-items: end;
  padding: 10px 0 4px;
  border-top: 1px dashed var(--border, #e5e5e7);
  margin-top: 10px;
}
@media (max-width: 800px) {
  .proj-time-add { grid-template-columns: 1fr 1fr; }
}
.proj-time-add input,
.proj-time-add select { font-size: 13px; padding: 6px 8px; border: 1px solid var(--border, #e5e5e7); border-radius: 7px; background: var(--bg, #fff); color: var(--text, #0a0a0a); width: 100%; }

/* Time entry rows in project modal */
.proj-time-row {
  display: grid;
  grid-template-columns: 90px 1fr 58px 74px 28px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border, #e5e5e7);
  font-size: 13px;
}
.proj-time-row:last-of-type { border-bottom: 0; }
.proj-time-mono { font-family: var(--font-mono, monospace); font-size: 11.5px; color: var(--text-dim, #5c5c5e); }
.proj-time-del { width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; color: var(--text-dim); font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; }
.proj-time-del:hover { color: var(--danger, #d9534f); border-color: var(--danger, #d9534f); }

/* ---- Custom autocomplete voor NDA/DPA recipient-input (juni 2026) ---- */
.dash-autocomplete { position: relative; }
.dash-autocomplete > input { width: 100%; }
.dash-autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}
.dash-autocomplete-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.dash-autocomplete-item:hover { background: #FFF7F2; }
.dash-ac-name { font-size: 13.5px; color: #0A0A0A; font-weight: 500; }
.dash-ac-email { font-size: 12.5px; color: var(--text-muted, #8E8E93); }

/* ---- Lead-status dropdown in leads tabel (juni 2026) ---- */
.lead-status-select {
  font: inherit;
  font-size: 12.5px;
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
}
.lead-status-select:hover { border-color: var(--accent, #FF5A1F); }

/* Tabelwrap-variant zonder overflow:hidden zodat de native <select>-popup
   op de onderste rij niet wordt afgekapt. Border-radius blijft via expliciete
   clip op de tabel-zelf, niet op de wrap.

   Alleen boven 860 px. Op een telefoon kostte deze uitzondering de hele layout:
   drie van deze tabellen samen duwden het dashboard naar 751 px bij een
   viewport van 375. De aanleiding — een afgekapte selectlijst — bestaat daar
   niet, want iOS en Android tekenen die als systeemblad buiten de DOM. */
.dash-table-wrap--overflow-visible {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
@media (min-width: 861px) {
  .dash-table-wrap--overflow-visible { overflow: visible; }
}
.dash-table-wrap--overflow-visible > .dash-table {
  border-radius: var(--radius-lg);
}

/* ---- Status-kleur op de hele lead-rij (juni 2026) ----
   Hele rij krijgt een subtiele achtergrondtint per status zodat je in één
   oogopslag ziet wat de stand van zaken is. We zetten de kleur op elke td
   (niet op de tr) want td-backgrounds winnen in de border-collapse-context. */
/* Te contacteren: zacht groen. Bewust een andere kleurfamilie dan "nieuw",
   want het is geen binnengekomen aanvraag maar een lead die jij zelf hebt
   aangebracht en nog moet bellen. */
.lead-row-status-to_contact td       { background: #EDF7EE; }
.lead-row-status-to_contact:hover td { background: #DCEFE0; }
.lead-row-status-new td       { background: #FFF7EA; }   /* zacht amber, "nieuw, neem actie" */
.lead-row-status-new:hover td { background: #FFEED4; }
.lead-row-status-contacted td       { background: #E8F4FB; } /* zacht blauw, "in progress" */
.lead-row-status-contacted:hover td { background: #D5E9F5; }
.lead-row-status-unqualified td       { background: #F4F2EF; } /* gedempt grijs, "afgesloten" */
.lead-row-status-unqualified:hover td { background: #ECE9E4; }

/* ---- Notitielog op lead-modaal (juni 2026) ---- */
.dash-notes-list { display: flex; flex-direction: column; gap: 10px; }
.dash-note {
  background: #FAFAFA;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.dash-note-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.dash-note-meta strong { color: #0A0A0A; font-weight: 600; }
.dash-note-time { color: var(--text-muted, #8E8E93); font-size: 11.5px; }
.dash-note-text {
  font-size: 13.5px;
  color: #3A3A3C;
  white-space: pre-wrap;
  line-height: 1.5;
}

/* ---- Weekgrid tijdregistratie (augustus 2026) ----
   Zeven dagkolommen per project. De cellen zijn smal en de invoer is
   rechts uitgelijnd, zodat kolommen met getallen leesbaar blijven. */
.weekgrid { margin-bottom: 32px; }

.wg-kop {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.wg-weeknav { display: flex; align-items: center; gap: 8px; }
.wg-weeklabel { font-weight: 600; min-width: 130px; text-align: center; }
.wg-kopstatus { display: flex; align-items: center; gap: 12px; }

.wg-bewaard { font-size: 12px; color: var(--text-dim); }
.wg-bewaard.is-ok { color: #2E7D32; }
.wg-bewaard.is-fout { color: #C62828; }

.wg-tabel th, .wg-tabel td { text-align: center; }
.wg-tabel .wg-projectkop, .wg-tabel .wg-projectcel { text-align: left; min-width: 200px; }
.wg-dag { width: 78px; }
.wg-dagnaam { display: block; font-size: 11px; letter-spacing: 0.06em; }
.wg-dagdatum { display: block; font-size: 11px; color: var(--text-dim); font-weight: 400; }
/* Weekend in de zachte huisstijltint: je ziet meteen welke kolommen
   ongewoon zijn, en het raster ademt SEMANU-oranje. */
.wg-dag.is-weekend, .wg-cel.is-weekend, .wg-dagtotaalcel.is-weekend { background: #FFF1EC; }
.wg-dag.is-weekend .wg-dagnaam { color: #CC4516; }
.wg-dag.is-weekend .wg-dagdatum { color: #CC4516; opacity: .7; }

/* Projectkolom met accent: naam zwaarder, oranje stip ervoor. */
.wg-tabel .wg-projectcel { font-weight: 600; }
.wg-projectdot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #FF5A1F; margin-right: 9px; vertical-align: 1px;
}
.wg-tabel tfoot .wg-projectcel .wg-projectdot { display: none; }

/* Dagtotalen onder het raster. */
.wg-tabel tfoot th, .wg-tabel tfoot td {
  border-top: 2px solid var(--border);
  background: var(--bg-soft, #F5F5F7);
  font-weight: 600; font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.wg-invoer {
  width: 100%; max-width: 62px; padding: 6px 8px; text-align: right;
  border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-variant-numeric: tabular-nums;
}
/* Safari op iOS zoomt bij focus automatisch in op elk invoerveld onder 16px.
   Dat verschuift het hele weekgrid onder je vinger vandaan. 16px voorkomt dat;
   het veld wordt daardoor iets breder, vandaar de ruimere max-width. */
@media (max-width: 860px) {
  .wg-invoer { font-size: 16px; max-width: 72px; }
  .wg-dag { width: 88px; }
}
.wg-invoer:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.wg-invoer:disabled { background: #F4F4F5; color: var(--text-dim); cursor: not-allowed; }
.wg-totaal { font-variant-numeric: tabular-nums; }
.wg-weg { width: 44px; }

.wg-voet {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 12px;
}
.wg-voet-rechts { display: flex; align-items: center; gap: 16px; }
.wg-weektotaal { font-variant-numeric: tabular-nums; }
.wg-select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.wg-sectiekop { font-size: 16px; margin: 24px 0 12px; }

/* Statuspil van de week. Kleur draagt nooit alleen de betekenis: het label
   staat er altijd bij, zoals de toegankelijkheidseis uit hoofdstuk 9. */
.dash-tag-ts.is-draft       { background: #F4F4F5; color: #3F3F46; }
.dash-tag-ts.is-submitted,
.dash-tag-ts.is-resubmitted { background: #E8F1FB; color: #1B4F91; }
.dash-tag-ts.is-approved    { background: #E7F5E9; color: #1B5E20; }
.dash-tag-ts.is-rejected    { background: #FDECEA; color: #B3261E; }
.dash-tag-ts.is-reopened    { background: #FFF4E5; color: #8A5300; }
.dash-tag-ts.is-locked      { background: #EDEAE6; color: #4A4441; }

/* Ongedaan-maken-melding linksonder, vijf seconden zichtbaar. */
.wg-undo {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 600;
  width: max-content; max-width: calc(100vw - 40px);
  display: flex; align-items: center; gap: 14px;
  background: #1F2937; color: #FFF; padding: 12px 16px;
  border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.24); font-size: 14px;
}
.wg-undo[hidden] { display: none; }
.wg-undo-knop {
  background: transparent; border: 0; color: #FFF; text-decoration: underline;
  cursor: pointer; font: inherit; padding: 4px 6px; min-height: 24px;
}

@media (max-width: 860px) {
  /* Op een smal scherm blijft de projectkolom staan en scrollt de rest.
     Dat stond hier eerder als commentaar zonder bijbehorende regels; de kolom
     schoof gewoon mee uit beeld en op donderdag zag je niet meer welk project
     je invulde. De expliciete achtergrond is nodig, anders schuiven de dagen
     zichtbaar onder een doorzichtige kolom door. */
  .wg-tabel { min-width: 726px; }
  .wg-kop, .wg-voet { flex-direction: column; align-items: stretch; }

  .wg-tabel .wg-projectkop,
  .wg-tabel .wg-projectcel {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-card, #FFF);
    box-shadow: 1px 0 0 var(--border);
  }
  .wg-tabel thead .wg-projectkop {
    z-index: 3;
    background: var(--bg-soft, #F5F5F7);
  }
  /* Rijen met een eigen achtergrond (totaalrij, hover) mogen niet door de
     sticky cel heen schijnen. */
  .wg-tabel tfoot .wg-projectcel { background: var(--bg-soft, #F5F5F7); }
}

/* ---- Tabbladen binnen Tijdregistratie (augustus 2026) ---- */
.tt-host { margin-bottom: 32px; }
.tt-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
.tt-tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 10px 14px; font: inherit; font-weight: 500; color: var(--text-dim);
  cursor: pointer; min-height: 40px;
}
.tt-tab:hover { color: var(--text); }
.tt-tab.is-actief { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tt-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.tt-uitleg { font-size: 13px; color: var(--text-dim); margin: 0 0 16px; max-width: 70ch; }
.tt-acties { text-align: right; white-space: nowrap; }
.btn-klein { padding: 5px 10px; font-size: 13px; min-height: 32px; }
.tt-eigen { font-size: 12px; color: var(--text-dim); font-style: italic; }

/* Kaarten met kerncijfers boven het projectoverzicht. */
.tt-kaarten { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.tt-kaart {
  flex: 1 1 180px; background: #FAFAFA; border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px;
}
.tt-kaart-label { font-size: 12px; color: var(--text-dim); letter-spacing: .04em; }
.tt-kaart-waarde { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tt-kaart-bij { font-size: 12px; color: var(--text-dim); }

/* Verbruiksbalk. De kleur draagt de betekenis nooit alleen: het percentage
   staat er altijd in cijfers naast. */
.tt-balkkop { min-width: 180px; }
.tt-balk {
  display: inline-block; vertical-align: middle; width: 110px; height: 8px;
  background: #E7E5E4; border-radius: 4px; overflow: hidden; position: relative;
}
.tt-balk-vul { display: block; height: 100%; background: #64748B; }
.tt-balk-vul.is-info { background: #0284C7; }
.tt-balk-vul.is-waarschuwing { background: #D97706; }
.tt-balk-vul.is-over { background: #DC2626; }
.tt-balk-vul.is-escalatie { background: #7F1D1D; }
.tt-balk-over { position: absolute; inset: 0; border: 2px solid #7F1D1D; border-radius: 4px; }
.tt-pct { margin-left: 8px; font-variant-numeric: tabular-nums; font-size: 13px; }
.tt-pct.is-waarschuwing { color: #B45309; font-weight: 600; }
.tt-pct.is-over, .tt-pct.is-escalatie { color: #B3261E; font-weight: 700; }

/* Afwezigheden */
.tt-afwezig-kop {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.tt-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); }
.tt-legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.tt-legenda-item em { font-style: normal; opacity: .75; }
.tt-stip {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 6px; vertical-align: baseline;
}
.dash-tag.tt-abs.is-aangevraagd { background: #FFF4E5; color: #8A5300; }
.dash-tag.tt-abs.is-goedgekeurd { background: #E7F5E9; color: #1B5E20; }
.dash-tag.tt-abs.is-afgewezen   { background: #FDECEA; color: #B3261E; }
.dash-tag.tt-abs.is-ingetrokken { background: #F4F4F5; color: #52525B; }

@media (max-width: 700px) {
  .tt-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tt-tab { white-space: nowrap; scroll-snap-align: start; }
  .tt-acties { text-align: left; }

  /* De balk is 639 px breed in een venster van 339: precies de helft van de
     zes tabbladen is zichtbaar en niets verraadt dat er nog meer rechts staat.
     De vervagende rand is die aanwijzing. */
  .tt-tabs {
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .tt-tabs::-webkit-scrollbar { display: none; }
  /* Aan het einde gescrold: geen vervaging meer, anders lijkt het laatste
     tabblad permanent halfzichtbaar. */
  .tt-tabs.is-einde {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ---- Timer als pop-up achter een wekkericoon (augustus 2026) ---- */
.tp-knop {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px;
  background: #FFF; color: var(--text); cursor: pointer;
}
.tp-knop:hover { background: #FAFAFA; }
.tp-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Een lopende timer is ook zichtbaar als het venster dicht is. Kleur alleen
   zou dat niet dragen, dus het stipje pulseert én de tooltip blijft staan. */
.tp-punt { display: none; }
.tp-knop.is-actief { border-color: var(--accent); color: var(--accent); }
.tp-knop.is-actief .tp-punt {
  display: block; position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  animation: tp-pols 1.6s ease-in-out infinite;
}
@keyframes tp-pols { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .tp-knop.is-actief .tp-punt { animation: none } }

.tp-overlay {
  position: fixed; inset: 0; z-index: 9600; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 23, 42, .45);
}
.tp-overlay[hidden] { display: none; }
.tp-venster {
  background: #FFF; border-radius: 14px; padding: 24px; width: 100%; max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
}
.tp-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tp-kop h2 { font-size: 17px; margin: 0; }
.tp-sluit {
  background: transparent; border: 0; font-size: 24px; line-height: 1; cursor: pointer;
  color: var(--text-dim); width: 32px; height: 32px; border-radius: 8px;
}
.tp-sluit:hover { background: #F4F4F5; color: var(--text); }

.tp-klok {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 40px; font-weight: 600; text-align: center;
  padding: 16px 0 20px; font-variant-numeric: tabular-nums;
}
.tp-veld { display: block; margin-bottom: 14px; }
.tp-veld span { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; }
.tp-veld select, .tp-veld input {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: 8px; font: inherit;
}
.tp-knoppen { display: flex; gap: 10px; margin-top: 18px; }
.tp-knoppen .btn { flex: 1; }
.tp-voet { font-size: 12px; color: var(--text-dim); margin: 16px 0 0; }