/* ============================================================
   dashboard.css — Dashboard page specific styles
   Sidebar layout: fixed left sidebar + scrollable main content
   ============================================================ */

/* De meldingsbel hangt in components/navbar.php en verschijnt dus op elke
   consolepagina; zijn stijl reist mee met deze stylesheet. */
@import url('notifications.css');

/* ------------------------------------------------------------
   App shell
   ------------------------------------------------------------ */
.app {
  display: flex;
  min-height: 100vh;
  background: var(--color-void);
}

.admin-page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-5);
  background:
    radial-gradient(circle at 50% 46%, rgba(240, 180, 41, 0.08), transparent 25%),
    var(--color-void);
  /* Pas zichtbaar na een halve seconde: een snelle pagina toont het scherm
     dus nooit. Tot dan laat het klikken door naar de pagina eronder. */
  opacity: 0;
  pointer-events: none;
  animation: adminLoaderAppear 0.25s ease 0.5s forwards;
}

.admin-page-loader.is-hidden {
  display: none;
}

@keyframes adminLoaderAppear {
  to { opacity: 1; pointer-events: auto; }
}

/* The site-wide trace loader: the animation lives in the SVG itself. */
.admin-page-loader__logo {
  width: 96px;
  height: auto;
}

.admin-page-loader__label {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------ */
.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: var(--color-base);
  border-right: var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: transform var(--transition);
  overflow-y: auto;
  overflow-x: hidden;
  /* Scrollen in de drawer mag de pagina eronder niet meeslepen. */
  overscroll-behavior: contain;
}

/* ------------------------------------------------------------
   Sidebar brand / header
   ------------------------------------------------------------ */
.sidebar__brand {
  padding: var(--space-5) var(--space-5);
  border-bottom: var(--border);
  flex-shrink: 0;
}

.sidebar__brand-logo {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
}

.sidebar__brand-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-white);
  display: block;
  line-height: 1.3;
}

.sidebar__brand-name em {
  color: var(--color-accent);
  font-style: normal;
}

/* ------------------------------------------------------------
   Sidebar search trigger
   ------------------------------------------------------------ */
.nav-search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: calc(100% - var(--space-6));
  margin: var(--space-3) var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.03);
  border: var(--border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nav-search:hover {
  color: var(--color-text);
  border-color: var(--color-border-light);
}

.nav-search:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.nav-search__label { flex: 1; }

.nav-search__kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border-light);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Sidebar navigation
   ------------------------------------------------------------ */
.sidebar__nav {
  flex: 1;
  padding: var(--space-3) var(--space-3);
}

.nav-link--primary {
  margin-bottom: var(--space-1);
  border-radius: var(--radius-sm);
}

/* Scheidt de vaste dagelijkse links van de inklapbare groepen. */
.sidebar__divider {
  display: block;
  height: 1px;
  margin: var(--space-3) var(--space-3);
  background: var(--color-border);
}

.nav-group {
  margin-bottom: var(--space-1);
}

.nav-group__summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  cursor: pointer;
  list-style: none;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-group__summary::-webkit-details-marker { display: none; }
.nav-group__summary::marker { content: ''; }

.nav-group__summary:hover,
.nav-group[open] > .nav-group__summary {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.03);
}

.nav-group__summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.nav-group__chevron {
  width: 14px;
  height: 14px;
  margin-left: auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  transition: transform var(--transition-fast);
}

.nav-group__summary .nav-link__badge + .nav-group__chevron { margin-left: 0; }
.nav-group[open] > .nav-group__summary .nav-group__chevron { transform: rotate(90deg); }

.nav-group__items {
  margin: var(--space-1) 0 var(--space-2);
  padding: 0;
}

.nav-group__items .nav-link {
  min-height: 34px;
  padding: var(--space-1) var(--space-3) var(--space-1) 43px;
  border-left: 0;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

.nav-group__items .nav-link::before {
  content: '';
  position: absolute;
  left: 22px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-border-light);
}

.nav-group__items .nav-link.is-active::before { background: var(--color-accent); }
.nav-link__external { margin-left: auto; color: var(--color-muted); }

.sidebar__nav-section {
  margin-bottom: var(--space-5);
}

.sidebar__nav-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted);
  padding: var(--space-2) var(--space-5);
  display: block;
  margin-bottom: var(--space-1);
  opacity: 0.7;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-secondary);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--transition-fast),
              background-color var(--transition-fast),
              border-color var(--transition-fast);
  position: relative;
  white-space: nowrap;
  min-height: 40px;
}

.nav-link:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.03);
  border-left-color: var(--color-border-light);
}

.nav-link.is-active {
  color: var(--color-accent);
  background: rgba(240, 180, 41, 0.06);
  border-left-color: var(--color-accent);
  font-weight: 500;
}

.nav-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.nav-link__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-link__badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
  background: rgba(240, 180, 41, 0.12);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(240, 180, 41, 0.2);
}

/* ------------------------------------------------------------
   Sidebar footer (logout)
   ------------------------------------------------------------ */
.sidebar__footer {
  padding: var(--space-3) var(--space-4);
  border-top: var(--border);
  flex-shrink: 0;
}

.sidebar__user-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  margin-bottom: var(--space-2);
  border: var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02);
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.sidebar__user-info:hover,
.sidebar__user-info:focus-visible,
.sidebar__user-info.is-active {
  border-color: var(--color-accent);
  background: rgba(240,180,41,.06);
}

.sidebar__user-info:hover .sidebar__user-chevron,
.sidebar__user-info.is-active .sidebar__user-chevron {
  color: var(--color-accent);
  transform: translateX(2px);
}

.sidebar__user-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--color-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.sidebar__user-avatar {
  width: 30px;
  height: 30px;
  background: var(--color-steel);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
}

.sidebar__user-details {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.sidebar__user-name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__user-role {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
  margin-top: 2px;
}

.logout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-fast),
              background-color var(--transition-fast);
  min-height: 38px;
}

.logout-btn:hover {
  color: var(--color-danger);
  background: rgba(232, 84, 30, 0.06);
}

.logout-btn__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------
   Ingeklapte sidebar — alleen iconen

   Vanaf 1025px (daaronder is de sidebar een lade) kan de balk
   inklappen tot een smalle rij iconen. dashboard.js schakelt
   html.sidebar-collapsed en onthoudt de keuze; een inline script in
   navbar.php zet de klasse al vóór de eerste weergave. De groepen
   (Financiën, Websites, …) openen dan als paneel naast de balk.
   "html … body" in de selectors: console-brand.css wordt later
   geladen en moet hier niet overheen schrijven.
   ------------------------------------------------------------ */
.sidebar__brand-symbol,
.nav-group__heading { display: none; }

.sidebar__collapse {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 36px;
  margin-bottom: var(--space-2);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.sidebar__collapse[hidden] { display: none; }

.sidebar__collapse:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.03);
}

.sidebar__collapse:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.sidebar__collapse-arrow { transition: transform var(--transition-fast); transform-origin: 15px 12px; }

@media (max-width: 1024px) {
  /* In de lade is inklappen zinloos: die is al weg als je hem niet nodig hebt. */
  .sidebar__collapse { display: none; }
}

@media (min-width: 1025px) {
  html.sidebar-collapsed { --sidebar-width: 72px; }

  .sidebar { transition: transform var(--transition), width var(--transition); }
  .main { transition: margin-left var(--transition); }

  /* Labels blijven in de DOM voor schermlezers en de zoekbalk. */
  html.sidebar-collapsed body .sidebar :is(.nav-link__label, .nav-search__label, .nav-search__kbd, .sidebar__user-details, .sidebar__user-chevron, .nav-group__chevron) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  html.sidebar-collapsed body .sidebar__brand {
    display: flex;
    justify-content: center;
    padding: var(--space-5) 0;
  }

  html.sidebar-collapsed body .sidebar__brand-logo { display: none; }

  html.sidebar-collapsed body .sidebar__brand-symbol {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  html.sidebar-collapsed body .nav-search {
    justify-content: center;
    width: 44px;
    min-height: 40px;
    margin: var(--space-3) auto 0;
    padding: 0;
  }

  html.sidebar-collapsed body .sidebar__nav { padding: var(--space-3) var(--space-2); }

  html.sidebar-collapsed body :is(.nav-link--primary, .nav-group__summary) {
    position: relative;
    justify-content: center;
    gap: 0;
    min-height: 44px;
    padding: 0;
  }

  html.sidebar-collapsed body :is(.nav-link--primary, .nav-group__summary) .nav-link__icon {
    width: 20px;
    height: 20px;
  }

  /* Het getal wordt een klein label op de hoek van het icoon. */
  html.sidebar-collapsed body :is(.nav-link--primary, .nav-group__summary) .nav-link__badge {
    position: absolute;
    top: 4px;
    right: 6px;
    min-width: 16px;
    margin: 0;
    padding: 0 3px;
    font-size: 9px;
    line-height: 14px;
    text-align: center;
  }

  html.sidebar-collapsed body .sidebar__divider { margin: var(--space-3) var(--space-2); }

  /* Groepen: dicht in de balk, en als paneel ernaast zodra je erop tikt. */
  html.sidebar-collapsed body .nav-group > .nav-group__items { display: none; }

  html.sidebar-collapsed body .nav-group.is-flyout > .nav-group__summary {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.06);
  }

  html.sidebar-collapsed body .nav-group.is-flyout > .nav-group__items {
    position: fixed;
    top: var(--flyout-top, 120px);
    left: calc(var(--sidebar-width) + 8px);
    z-index: 105;
    display: block;
    min-width: 220px;
    max-height: calc(100vh - var(--flyout-top, 120px) - 16px);
    margin: 0;
    padding: var(--space-2);
    overflow-y: auto;
    border: var(--border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  }

  html.sidebar-collapsed body .nav-group.is-flyout .nav-group__heading {
    display: block;
    padding: var(--space-1) var(--space-3) var(--space-2);
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  html.sidebar-collapsed body .nav-group.is-flyout .nav-group__items .nav-link { padding-left: 32px; }
  html.sidebar-collapsed body .nav-group.is-flyout .nav-group__items .nav-link::before { left: 14px; }

  html.sidebar-collapsed body .sidebar__footer { padding: var(--space-3) var(--space-2); }

  html.sidebar-collapsed body :is(.sidebar__user-info, .logout-btn, .sidebar__collapse) {
    justify-content: center;
    gap: 0;
    padding: var(--space-2) 0;
  }

  html.sidebar-collapsed body .sidebar__collapse-arrow { transform: scaleX(-1); }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  .sidebar,
  .main { transition: none; }
}

/* ------------------------------------------------------------
   Mobile menu toggle button
   ------------------------------------------------------------ */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-base);
  border: var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.mobile-menu-btn:hover {
  border-color: var(--color-border-light);
}

.mobile-menu-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-secondary);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Mobile top bar */
.topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  min-height: 52px;
  background: var(--color-base);
  border-bottom: var(--border);
  position: sticky;
  top: 0;
  z-index: 90;
}

/* Hetzelfde liggende logo als in de sidebar, zodat de mobiele kop niet
   op een losse tekstversie van het merk terugvalt. */
.topbar__brand {
  display: flex;
  align-items: center;
  min-width: 0;
  border-radius: var(--radius-sm);
}

.topbar__brand:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.topbar__brand-logo {
  display: block;
  width: auto;
  height: 26px;
  /* Nooit meer dan de helft van de kop, zodat de hamburger ernaast past. */
  max-width: 50vw;
  object-fit: contain;
  object-position: left center;
}

/* Overlay for mobile sidebar */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99;
  opacity: 0;
  transition: opacity var(--transition);
  /* Zonder dit ving de doorzichtige laag élke tik op: de mediaquery zet
     hem op display:block, en die auteursregel wint van de [hidden]-regel
     van de browser. Alleen de meldingsbel (z-index 120) stak er nog
     bovenuit. Klikken gaan er nu doorheen tot hij echt zichtbaar is. */
  pointer-events: none;
}

/* Respecteer het hidden-attribuut dat dashboard.js zet, zodat de laag
   ook echt uit de weg is en niet alleen doorzichtig. */
.sidebar-overlay[hidden] {
  display: none;
}

.sidebar-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ------------------------------------------------------------
   Main content area
   ------------------------------------------------------------ */
.main {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-void);
}

.main__inner {
  flex: 1;
  padding: var(--space-8) clamp(var(--space-6), 4vw, var(--space-10));
  max-width: var(--content-max-width);
  width: 100%;
  margin-inline: auto;
}

/* ------------------------------------------------------------
   Page header
   ------------------------------------------------------------ */
.page-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: var(--border);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.page-header__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.page-header__meta::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--color-accent);
}

.page-header__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.page-header__title em {
  color: var(--color-accent);
  font-style: normal;
}

.page-header__subtitle {
  font-size: var(--text-base);
  color: var(--color-muted);
  margin-top: var(--space-2);
  font-weight: 400;
  line-height: 1.5;
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* System clock utility class (used inline in dashboard.php) */
.system-clock {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.06em;
  min-width: 7ch;
  display: inline-block;
  line-height: 1;
}

/* ------------------------------------------------------------
   Stat cards row
   ------------------------------------------------------------ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.stat-card {
  background: var(--color-base);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-5);
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.stat-card:hover {
  border-color: var(--color-border-light);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-border);
}

.stat-card--accent::before { background: var(--color-accent); }
.stat-card--danger::before  { background: var(--color-danger); }
.stat-card--muted::before   { background: var(--color-muted); }

.stat-card__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.stat-card__value {
  font-family: var(--font-mono);
  font-size: clamp(var(--text-2xl), 2.5vw, var(--text-3xl));
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stat-card__delta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.stat-card__delta--up   { color: var(--color-accent); }
.stat-card__delta--down { color: var(--color-danger); }

/* ------------------------------------------------------------
   Content grid
   ------------------------------------------------------------ */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.content-grid--full {
  grid-template-columns: 1fr;
}

/* ------------------------------------------------------------
   Panel / card
   ------------------------------------------------------------ */
.panel {
  background: var(--color-base);
  border: var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Meldingen staan bij de sectie die ze veroorzaakte en de pagina springt daar
   met een anker naartoe. Zonder deze marge schuift de sticky mobiele kop er
   overheen en is juist de melding onzichtbaar. */
.panel[id],
.section-label[id] {
  scroll-margin-top: var(--space-6);
}

.panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border);
  background: var(--color-surface);
}

.panel__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.panel__title-marker {
  width: 2px;
  height: 12px;
  background: var(--color-accent);
  border-radius: 0;
}

.panel__action {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border: var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.panel__action:hover {
  color: var(--color-text);
  border-color: var(--color-border-light);
}

.panel__body {
  padding: var(--space-5);
}

.panel__footer {
  padding: var(--space-4) var(--space-5);
  border-top: var(--border);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* MCP connection guide */
.mcp-guide {
  display: grid;
  gap: var(--space-7);
}

.mcp-guide__section {
  min-width: 0;
}

.mcp-guide__section + .mcp-guide__section {
  padding-top: var(--space-6);
  border-top: var(--border);
}

.mcp-guide__heading {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.mcp-guide__heading h3 {
  margin: 0;
  font-size: var(--text-md);
}

.mcp-guide__heading p {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.mcp-guide__step {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: var(--border-accent);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
}

.mcp-guide__steps,
.mcp-client-card ol {
  margin: 0;
  padding-left: var(--space-6);
  color: var(--color-muted);
  line-height: 1.7;
}

.mcp-guide__steps code,
.mcp-client-card code,
.mcp-troubleshooting code {
  color: var(--color-text);
}

.mcp-code {
  max-width: 100%;
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  overflow-x: auto;
  border: var(--border);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-void);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.65;
  white-space: pre;
}

.mcp-client-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.mcp-client-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: var(--space-5);
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.mcp-client-card h4 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mcp-client-card .mcp-code {
  margin-top: auto;
}

.mcp-troubleshooting {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.mcp-troubleshooting > div {
  padding: var(--space-4);
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.mcp-troubleshooting p {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ------------------------------------------------------------
   Activity / log list
   ------------------------------------------------------------ */
.activity-list {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-5);
}

/* When panel__body has padding:0, the list handles its own horizontal padding */
.panel__body--flush .activity-list {
  padding: 0 var(--space-5);
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--border);
  position: relative;
}

.activity-item:last-child {
  border-bottom: none;
  padding-bottom: var(--space-1);
}

.activity-item__indicator {
  width: 8px;
  height: 8px;
  border: 1px solid var(--color-border-light);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
  position: relative;
}

.activity-item__indicator--active {
  border-color: var(--color-accent);
  background: rgba(240, 180, 41, 0.3);
}

.activity-item__indicator--alert {
  border-color: var(--color-danger);
  background: rgba(232, 84, 30, 0.3);
}

.activity-item__body {
  flex: 1;
  min-width: 0;
}

.activity-item__text {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: var(--space-1);
}

.activity-item__text strong {
  color: var(--color-white);
  font-weight: 500;
}

.activity-item__time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------
   Data table
   ------------------------------------------------------------ */
.data-table-wrap {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  padding: var(--space-3) var(--space-5);
  text-align: left;
  border-bottom: var(--border);
  background: var(--color-surface);
  white-space: nowrap;
}

.data-table td {
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--border);
  color: var(--color-text);
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.data-table .mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-secondary);
}

/* ------------------------------------------------------------
   Inline section label (horizontal rule with label)
   ------------------------------------------------------------ */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.section-label__text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted);
  white-space: nowrap;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ------------------------------------------------------------
   Quick-action placeholder buttons in panel
   ------------------------------------------------------------ */
.quick-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.quick-action-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast);
}

.quick-action-item:hover {
  border-color: var(--color-border-light);
  background: var(--color-steel);
}

.quick-action-item__icon {
  width: 34px;
  height: 34px;
  border: var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-steel);
  transition: border-color var(--transition-fast);
}

.quick-action-item:hover .quick-action-item__icon {
  border-color: var(--color-border-light);
}

.quick-action-item__icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--color-secondary);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quick-action-item__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

.quick-action-item__desc {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: 2px;
}

.quick-action-item__arrow {
  margin-left: auto;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* ------------------------------------------------------------
   Responsive — laptop (1024–1280px)
   ------------------------------------------------------------ */
@media (max-width: 1280px) {
  .main__inner {
    padding: var(--space-8) var(--space-6);
  }
}

/* ------------------------------------------------------------
   Responsive — tablet landscape (900px)
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .main__inner {
    padding: var(--space-6) var(--space-5);
  }
}

/* ------------------------------------------------------------
   Responsive — app-shell collapse (1024px)

   Vanaf hier is er te weinig ruimte om 240px sidebar én inhoud
   naast elkaar te zetten: een iPad staand houdt anders nog maar
   ~530px werkbreedte over. De sidebar wordt een drawer.
   Dezelfde grens staat in dashboard.js (SHELL_BREAKPOINT) en in
   notifications.css — pas ze samen aan.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* De topbar is sticky en 52px hoog; ankers moeten daar onderuit komen. */
  .panel[id],
  .section-label[id] {
    scroll-margin-top: 68px;
  }

  .topbar {
    display: flex;
    /* Hamburger links, logo ernaast; de meldingsbel zweeft rechts. */
    justify-content: flex-start;
    gap: var(--space-3);
    /* Ruimte vrijhouden voor de vaste bel rechts in de kop. */
    padding-right: 60px;
  }

  /* .mobile-menu-btn staat standaard op display:none en werd nergens
     weer aangezet: de hamburger was daardoor onzichtbaar en de drawer
     op een telefoon dus onbereikbaar. */
  .mobile-menu-btn {
    display: inline-flex;
    /* Staat in de HTML na het logo, maar hoort links in de kop. */
    order: -1;
  }

  /* Sidebar becomes an off-canvas drawer */
  .sidebar {
    transform: translateX(-100%);
    z-index: 110;
    box-shadow: none;
    width: min(var(--sidebar-width), 84vw);
  }

  .sidebar.is-open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.6);
  }

  .sidebar-overlay {
    display: block;
  }

  /* Main no longer offset by sidebar */
  .main {
    margin-left: 0;
  }

  /* Scroll van de pagina bevriezen zodra de drawer open staat. */
  body.has-drawer-open {
    overflow: hidden;
  }
}

/* ------------------------------------------------------------
   Responsive — tablet portrait / mobile (768px)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .main__inner {
    padding: var(--space-5) var(--space-4);
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .mcp-client-grid,
  .mcp-troubleshooting {
    grid-template-columns: 1fr;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Clock moves inline under title on mobile */
  .page-header__actions {
    align-self: flex-start;
  }

  .system-clock {
    font-size: var(--text-lg);
  }

  /* Tighter table on small screens */
  .data-table th,
  .data-table td {
    padding: var(--space-2) var(--space-3);
  }
}

/* ------------------------------------------------------------
   Responsive — small mobile (480px)
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .main__inner {
    padding: var(--space-4) var(--space-3);
  }

  .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  .stat-card {
    padding: var(--space-4) var(--space-4);
  }

  .stat-card__value {
    font-size: var(--text-2xl);
  }

  .page-header {
    margin-bottom: var(--space-6);
  }

  /* Stack form rows on very small screens */
  .form-row--2,
  .form-row--3 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Alerts
   ============================================================ */
.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
  border: 1px solid;
}
.alert--success {
  background: rgba(240, 180, 41, 0.08);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.alert--error {
  background: rgba(232, 84, 30, 0.08);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* ============================================================
   Form utilities
   ============================================================ */
.form-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-row {
  display: grid;
  gap: var(--space-4);
}
.form-row--2 { grid-template-columns: 1fr 1fr; }
.form-row--3 { grid-template-columns: 1fr 1fr 1fr; }

.form-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding-top: var(--space-2);
}

textarea.input { resize: vertical; min-height: 72px; }

select.input { cursor: pointer; }

@media (max-width: 600px) {
  .form-row--2,
  .form-row--3 { grid-template-columns: 1fr; }
}

/* ============================================================
   Button sizes
   ============================================================ */
.btn--sm {
  font-size: var(--text-xs);
  padding: 0 var(--space-3);
  min-height: 32px;
  letter-spacing: 0.09em;
}
.btn--xs {
  font-size: var(--text-xs);
  padding: 0 var(--space-2);
  min-height: 24px;
  letter-spacing: 0.08em;
}

/* ============================================================
   Table utilities
   ============================================================ */
.table-link {
  color: var(--color-accent);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.table-link:hover { text-decoration: underline; }

.table-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

/* ============================================================
   Project grid (client.php)
   ============================================================ */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
}

.project-card {
  background: var(--color-base);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--transition-fast);
}
.project-card:hover { border-color: var(--color-border-light); }

.project-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}
.project-card__name {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-white);
}
.project-card__url {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-decoration: none;
  display: block;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.project-card__url:hover { color: var(--color-secondary); }

.project-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.project-card__tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  background: var(--color-surface);
  border: var(--border);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

.project-card__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: var(--border);
  border-bottom: var(--border);
}
.project-card__stat { text-align: center; }
.project-card__stat-val {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-white);
  display: block;
}
.project-card__stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-muted);
  display: block;
  margin-top: 1px;
}

.project-card__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ============================================================
   Timer (dashboard banner + project page)
   ============================================================ */
.timer-banner {
  background: var(--color-base);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.timer-banner__info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.timer-banner__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(240,180,41,.2);
  animation: pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
.timer-banner__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-muted);
}
.timer-banner__client {
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.timer-banner__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

/* Project page timer dot */
.timer-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(240,180,41,.2);
  animation: pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

.panel--accent {
  border-color: rgba(240,180,41,.3);
  background: rgba(240,180,41,.03);
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(240,180,41,.2); }
  50%       { box-shadow: 0 0 0 6px rgba(240,180,41,.05); }
}

/* ============================================================
   Tasks (project.php)
   ============================================================ */
.task-group {
  margin-bottom: var(--space-4);
}
.task-group__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.task-group__count {
  background: var(--color-surface);
  border: var(--border);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-secondary);
  font-size: 10px;
}

.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  transition: border-color var(--transition-fast);
}
.task-item:hover { border-color: var(--color-border-light); }

.task-item__title {
  font-size: var(--text-sm);
  color: var(--color-text);
  flex: 1;
}
.task-group[data-status="done"] .task-item__title {
  color: var(--color-muted);
  text-decoration: line-through;
}

.task-item__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.task-status-btn {
  background: transparent;
  border: var(--border);
  color: var(--color-muted);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-xs);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.task-status-btn:hover { color: var(--color-accent); border-color: var(--color-accent); }
.task-delete-btn {
  background: transparent;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  font-size: var(--text-base);
  padding: 0 var(--space-1);
  line-height: 1;
  transition: color var(--transition-fast);
}
.task-delete-btn:hover { color: var(--color-danger); }

/* ============================================================
   Credentials (project.php)
   ============================================================ */
.cred-list { display: flex; flex-direction: column; gap: var(--space-4); }

.cred-item {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}
.cred-item__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.cred-item__label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text);
  flex: 1;
}
.cred-item__btns {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

.cred-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.cred-field__key {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-muted);
  min-width: 40px;
  flex-shrink: 0;
}
.cred-field__val {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-secondary);
  word-break: break-all;
  flex: 1;
}
.cred-field__val--secret { letter-spacing: .08em; }

.cred-reveal-btn {
  background: transparent;
  border: var(--border);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.cred-reveal-btn:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ============================================================
   Quick-action items as links (dashboard)
   ============================================================ */
a.quick-action-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  text-decoration: none;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
a.quick-action-item:hover {
  border-color: var(--color-border-light);
  background: var(--color-steel);
}

/* ------------------------------------------------------------
   Start Timer button
   ------------------------------------------------------------ */
.btn-start-timer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-accent);
  color: var(--color-void);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
}

.btn-start-timer:hover {
  background: var(--color-accent-dim);
  border-color: var(--color-accent-dim);
  box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.2);
}

.btn-start-timer:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.btn-start-timer--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
  letter-spacing: 0.12em;
}

/* ------------------------------------------------------------
   Timer modal
   ------------------------------------------------------------ */
.timer-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 900;
  backdrop-filter: blur(2px);
}

.timer-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 910;
  width: min(480px, calc(100vw - 2rem));
  background: var(--color-base);
  border: var(--border-accent);
  border-radius: var(--radius-sm);
  padding: 0;
  margin: 0;
  color: var(--color-text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.timer-modal[open] {
  display: flex;
  flex-direction: column;
}

/* Remove default dialog styling */
.timer-modal::backdrop {
  display: none;
}

.timer-modal__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border);
}

.timer-modal__icon {
  color: var(--color-accent);
  display: flex;
  align-items: center;
}

.timer-modal__title {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-white);
  flex: 1;
}

.timer-modal__close {
  background: none;
  border: none;
  color: var(--color-muted);
  font-size: var(--text-xl);
  cursor: pointer;
  line-height: 1;
  padding: 0 var(--space-1);
  transition: color var(--transition-fast);
}

.timer-modal__close:hover {
  color: var(--color-text);
}

.timer-modal__form {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.timer-modal__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

/* ── Revenue chart ────────────────────────────────────────── */
.chart-container {
  position: relative;
  height: 200px;
}

/* ── Activity feed ────────────────────────────────────────── */
.activity-feed {
  list-style: none;
  margin: 0;
  padding: 0;
}

.activity-feed__item {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
}

.activity-feed__item:last-child { border-bottom: none; }

.activity-feed__icon {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-accent);
}

.activity-feed__desc {
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-feed__time {
  color: var(--color-muted);
  white-space: nowrap;
}

/* ── Overdue badge ────────────────────────────────────────── */
.badge--overdue {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}

.badge--danger {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}

/* ── Alert success (was missing) ──────────────────────────── */
.alert--success {
  background: rgba(240,180,41,.07);
  border-left: 3px solid var(--color-accent);
  color: var(--color-accent);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

/* ── Quick-add FAB ────────────────────────────────────────── */
.quick-add-fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 900;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-void);
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 300;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(240,180,41,.35);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-add-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(240,180,41,.5);
}

.quick-add-fab:active { transform: scale(0.96); }

/* ── Quick-add modal ──────────────────────────────────────── */
.qa-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 950;
  backdrop-filter: blur(2px);
}

.qa-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 960;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0;
  width: min(480px, calc(100vw - 2rem));
  max-height: 90vh;
  overflow-y: auto;
  margin: 0;
}

.qa-modal::backdrop { display: none; }

.qa-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.qa-modal__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-accent);
  margin: 0;
}

.qa-modal__close {
  background: none;
  border: none;
  color: var(--color-muted);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0 var(--space-1);
  line-height: 1;
}

.qa-modal__close:hover { color: var(--color-text); }

.qa-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
}

.qa-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  margin-bottom: -1px;
}

.qa-tab:hover { color: var(--color-text); }

.qa-tab--active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.qa-panel { padding: var(--space-5); }

.qa-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.qa-form-actions {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

/* ── Timesheet form-row--4 ────────────────────────────────── */
.form-row--4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .form-row--4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 500px) {
  .form-row--4 { grid-template-columns: 1fr; }
  .quick-add-fab { bottom: 1rem; right: 1rem; }
}

/* ============================================================
   Dashboard control center
   ============================================================ */
.dashboard-control-center .main__inner {
  max-width: 1540px;
}

.dashboard-hero {
  /* Groet | citaat | klok. Het citaat heeft een vaste maximale hoogte, dus
     de hero is altijd even hoog, hoe lang het citaat van de API ook is. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46ch) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

/* De middenkolom is even breed als het kader en de zijkolommen zijn gelijk,
   dus het citaat staat precies in het midden van de pagina, verticaal
   gecentreerd op de groet en de klok. */
.dashboard-hero__quote {
  position: relative;
  width: 100%;
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .012) 60%),
    rgba(22, 28, 36, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 32px rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

/* Groot aanhalingsteken als decoratie in de hoek. */
.dashboard-hero__quote::before {
  content: "\201C";
  position: absolute;
  top: .02em;
  left: .2em;
  color: var(--color-accent);
  font-family: Georgia, serif;
  font-size: 2.4rem;
  line-height: 1;
  opacity: .5;
  pointer-events: none;
}

.dashboard-hero__quote blockquote {
  margin: 0;
}

.dashboard-hero__quote p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: clamp(.9rem, .8rem + .3vw, 1.05rem);
  font-style: italic;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

@media (prefers-reduced-transparency: reduce) {
  .dashboard-hero__quote {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--color-surface);
  }
}

.dashboard-hero__quote cite {
  display: block;
  margin-top: var(--space-2);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.dashboard-hero__quote cite::before {
  content: "— ";
}

.dashboard-hero__status {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}

.system-clock-zone {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-muted);
  line-height: 1;
}

.system-clock-zone__label {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 10px;
}

.system-clock-zone__time {
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.dashboard-system-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.dashboard-system-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4caf82;
  box-shadow: 0 0 0 3px rgba(76, 175, 130, .12);
}

/* Het scherm meteen vergrendelen, zonder op de minuut stilstand te wachten. */
.dashboard-lock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: 0 var(--space-3);
  border: var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: var(--color-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.dashboard-lock[hidden] { display: none; }

.dashboard-lock:hover,
.dashboard-lock:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-text);
  background: rgba(255, 255, 255, .06);
}

.dashboard-command-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.dashboard-command {
  appearance: none;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.dashboard-command:hover {
  border-color: var(--color-border-light);
  background: var(--color-steel);
  transform: translateY(-1px);
}

.dashboard-command:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.dashboard-command--primary {
  border-color: rgba(240, 180, 41, .45);
  background: rgba(240, 180, 41, .065);
}

.dashboard-command svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--color-accent);
}

.dashboard-command span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dashboard-command strong {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.dashboard-command small {
  color: var(--color-muted);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-timer {
  margin-bottom: var(--space-5);
  background:
    linear-gradient(90deg, rgba(240, 180, 41, .075), transparent 55%),
    var(--color-base);
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.dashboard-kpi {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.dashboard-kpi::after {
  content: '';
  position: absolute;
  right: -28px;
  bottom: -42px;
  width: 110px;
  height: 110px;
  border: 1px solid rgba(255, 255, 255, .035);
  border-radius: 50%;
}

.dashboard-kpi:hover {
  border-color: var(--color-border-light);
  transform: translateY(-1px);
}

.dashboard-kpi--accent {
  border-top-color: var(--color-accent);
}

.dashboard-kpi--danger {
  border-top-color: var(--color-danger);
}

.dashboard-kpi__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .13em;
}

.dashboard-kpi > strong {
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 2.5vw, 2.35rem);
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--color-white);
}

.dashboard-kpi--accent > strong {
  color: var(--color-accent);
}

.dashboard-kpi--danger > strong {
  color: #ff8a80;
}

.dashboard-kpi > span:last-child {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.dashboard-primary-grid {
  display: grid;
  /* Alleen de omzetgrafiek nog: "Needs attention" staat bovenaan. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.dashboard-panel-subtitle {
  margin: var(--space-1) 0 0 17px;
  color: var(--color-muted);
  font-size: 11px;
  line-height: 1.4;
}

.dashboard-panel-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.dashboard-panel-total span {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-muted);
}

.dashboard-panel-total strong {
  font-family: var(--font-mono);
  color: var(--color-text);
  font-size: var(--text-base);
}

.dashboard-chart-container {
  height: 240px;
}

.dashboard-revenue-body {
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.dashboard-chart-summary {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.dashboard-chart-summary div {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.dashboard-chart-summary span {
  color: var(--color-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.dashboard-chart-summary strong {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.dashboard-chart-empty {
  min-height: 296px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-muted);
}

.dashboard-chart-empty__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  font-size: var(--text-lg);
}

.dashboard-chart-empty strong {
  color: var(--color-text);
  font-size: var(--text-sm);
}

.dashboard-chart-empty p {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
}

.dashboard-count-badge {
  /* Nooit laten krimpen: in de smalle kolom drukte de titel hem anders plat. */
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 0 6px;
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.dashboard-count-badge.is-alert {
  color: #ff8a80;
  border-color: rgba(255, 92, 92, .4);
  background: rgba(255, 92, 92, .06);
}

.dashboard-attention__list {
  display: flex;
  flex-direction: column;
}

.dashboard-signal {
  min-height: 64px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast);
}

.dashboard-signal:last-child {
  border-bottom: none;
}

.dashboard-signal:hover {
  background: var(--color-surface);
}

.dashboard-signal__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-secondary);
}

.dashboard-signal--danger .dashboard-signal__icon {
  color: #ff8a80;
  border-color: rgba(255, 92, 92, .4);
  background: rgba(255, 92, 92, .06);
}

.dashboard-signal--accent .dashboard-signal__icon {
  color: var(--color-accent);
  border-color: rgba(240, 180, 41, .4);
  background: rgba(240, 180, 41, .06);
}

.dashboard-signal > span:nth-child(2) {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dashboard-signal strong {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.dashboard-signal small {
  font-size: 11px;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-signal > i {
  color: var(--color-muted);
  font-style: normal;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.dashboard-signal:hover > i {
  color: var(--color-accent);
  transform: translateX(2px);
}

.dashboard-empty-state {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
}

.dashboard-empty-state > span {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  border: 1px solid rgba(76, 175, 130, .35);
  border-radius: 50%;
  color: #4caf82;
  background: rgba(76, 175, 130, .06);
}

.dashboard-empty-state strong {
  color: var(--color-text);
  font-size: var(--text-sm);
}

.dashboard-empty-state p {
  max-width: 240px;
  margin-top: var(--space-1);
  color: var(--color-muted);
  font-size: 11px;
}

.dashboard-project-pulse {
  margin-bottom: var(--space-5);
}

.dashboard-project-list,
.dashboard-time-list {
  display: flex;
  flex-direction: column;
}

.dashboard-project-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 1fr) repeat(3, minmax(80px, .55fr)) 24px;
  align-items: center;
  gap: var(--space-5);
  min-height: 76px;
  padding: var(--space-3) var(--space-5);
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast);
}

.dashboard-project-row:last-child {
  border-bottom: none;
}

.dashboard-project-row:hover {
  background: var(--color-surface);
}

.dashboard-project-row__identity,
.dashboard-project-row__metric {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dashboard-project-row__identity strong {
  color: var(--color-text);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-project-row__identity small,
.dashboard-project-row__metric small,
.dashboard-project-row__progress small {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.dashboard-project-row__progress {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dashboard-project-row__progress > span {
  height: 3px;
  overflow: hidden;
  background: var(--color-steel);
}

.dashboard-project-row__progress i {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--color-accent);
}

.dashboard-project-row__metric strong {
  font-family: var(--font-mono);
  color: var(--color-secondary);
  font-size: var(--text-sm);
}

.dashboard-project-row__arrow {
  color: var(--color-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.dashboard-project-row:hover .dashboard-project-row__arrow {
  color: var(--color-accent);
  transform: translateX(2px);
}

/* auto-fit in plaats van twee vaste kolommen: blijft er één paneel over, dan
   vult dat de hele breedte in plaats van een lege helft te laten staan. */
.dashboard-secondary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.dashboard-time-row {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast);
}

.dashboard-time-row:last-child {
  border-bottom: none;
}

.dashboard-time-row:hover {
  background: var(--color-surface);
}

.dashboard-time-row__body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dashboard-time-row__body strong {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-time-row__body small {
  color: var(--color-muted);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-time-row__date {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.dashboard-time-row__date strong {
  color: var(--color-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1;
}

.dashboard-time-row__date small {
  margin-top: 2px;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 8px;
  text-transform: uppercase;
}

.dashboard-time-row__hours {
  flex-shrink: 0;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
}

.dashboard-activity-panel {
  margin-bottom: var(--space-8);
}

.dashboard-activity-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.dashboard-activity-item {
  min-width: 0;
  min-height: 70px;
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.dashboard-activity-item:nth-child(4n) {
  border-right: none;
}

.dashboard-activity-item:nth-last-child(-n + 4) {
  border-bottom: none;
}

.dashboard-activity-item i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: .7;
}

.dashboard-activity-item span {
  min-width: 0;
  overflow: hidden;
  color: var(--color-secondary);
  font-size: 11px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dashboard-activity-item time {
  align-self: start;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
}

.dashboard-list-empty {
  padding: var(--space-8) var(--space-5);
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-align: center;
}

@media (max-width: 1180px) {
  .dashboard-command-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-project-row {
    grid-template-columns: minmax(170px, 1.4fr) minmax(130px, 1fr) repeat(2, minmax(75px, .55fr)) 24px;
  }

  .dashboard-project-row__metric:nth-of-type(5) {
    display: none;
  }

  .dashboard-activity-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-activity-item:nth-child(4n) {
    border-right: 1px solid var(--color-border);
  }

  .dashboard-activity-item:nth-child(2n) {
    border-right: none;
  }

  .dashboard-activity-item:nth-last-child(-n + 4) {
    border-bottom: 1px solid var(--color-border);
  }

  .dashboard-activity-item:nth-last-child(-n + 2) {
    border-bottom: none;
  }
}

@media (max-width: 900px) {
  .dashboard-primary-grid,
  .dashboard-secondary-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-project-row {
    grid-template-columns: minmax(160px, 1.5fr) minmax(120px, 1fr) minmax(70px, .55fr) 24px;
  }

  .dashboard-project-row__metric:nth-of-type(3),
  .dashboard-project-row__metric:nth-of-type(5) {
    display: none;
  }
}

/* Smaller: het citaat zakt onder de groet, over de volle breedte en op
   twee regels, zodat het nog steeds weinig hoogte kost. */
@media (max-width: 1100px) {
  .dashboard-hero {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dashboard-hero__quote {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
  }

  .dashboard-hero__quote p { -webkit-line-clamp: 2; line-clamp: 2; }
}

@media (max-width: 640px) {
  .dashboard-hero {
    align-items: flex-start;
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-hero__quote {
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6);
  }

  .dashboard-hero__quote::before { font-size: 2rem; }

  /* Op de telefoon blijft van de klokkolom alleen de vergrendelknop over. */
  .dashboard-hero__status {
    justify-self: start;
    flex-direction: row;
    align-items: center;
  }

  .dashboard-hero__status > :not(.dashboard-lock) {
    display: none;
  }

  .dashboard-lock { min-height: 40px; }

  .dashboard-command-bar {
    grid-template-columns: 1fr;
  }

  .dashboard-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .dashboard-kpi {
    padding: var(--space-4);
  }

  .dashboard-kpi > strong {
    font-size: 1.55rem;
  }

  .dashboard-primary-grid,
  .dashboard-secondary-grid {
    gap: var(--space-4);
  }

  .dashboard-chart-container {
    height: 210px;
  }

  .dashboard-chart-summary {
    align-items: flex-start;
    gap: var(--space-3);
  }

  .dashboard-chart-summary div {
    flex: 1;
    flex-direction: column;
    gap: 2px;
  }

  .dashboard-project-row {
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: var(--space-3);
    min-height: 68px;
  }

  .dashboard-project-row__progress,
  .dashboard-project-row__metric {
    display: none;
  }

  .dashboard-activity-strip {
    grid-template-columns: 1fr;
  }

  .dashboard-activity-item,
  .dashboard-activity-item:nth-child(2n),
  .dashboard-activity-item:nth-child(4n),
  .dashboard-activity-item:nth-last-child(-n + 4) {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .dashboard-activity-item:last-child {
    border-bottom: none;
  }
}

/* ------------------------------------------------------------
   Website monitoring
   ------------------------------------------------------------ */
.dashboard-monitoring {
  margin-bottom: var(--space-6);
}

.dashboard-monitor-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--color-border);
}

.dashboard-monitor-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4) var(--space-5);
  color: inherit;
  text-decoration: none;
  border-right: 1px solid var(--color-border);
  transition: background-color var(--transition-fast);
}

.dashboard-monitor-chip:last-child {
  border-right: none;
}

.dashboard-monitor-chip:hover {
  background: var(--color-surface);
}

.dashboard-monitor-chip strong {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-text);
}

.dashboard-monitor-chip span {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.dashboard-monitor-chip.is-warning strong {
  color: var(--color-accent);
}

.dashboard-monitor-chip.is-critical strong {
  color: var(--color-danger);
}

.dashboard-monitor-row {
  display: grid;
  grid-template-columns: 10px minmax(160px, 1.5fr) minmax(110px, .9fr) minmax(90px, .6fr) auto 24px;
  align-items: center;
  gap: var(--space-5);
  min-height: 68px;
  padding: var(--space-3) var(--space-5);
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast);
}

.dashboard-monitor-row:last-child {
  border-bottom: none;
}

.dashboard-monitor-row:hover {
  background: var(--color-surface);
}

.dashboard-monitor-row__state {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-muted);
}

.dashboard-monitor-row__state--healthy  { background: #4fd18b; }
.dashboard-monitor-row__state--warning  { background: var(--color-accent); }
.dashboard-monitor-row__state--critical { background: var(--color-danger); }
.dashboard-monitor-row__state--disabled { background: var(--color-border); }

.dashboard-monitor-row__identity,
.dashboard-monitor-row__metric {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dashboard-monitor-row__identity strong,
.dashboard-monitor-row__metric strong {
  font-size: var(--text-sm);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-monitor-row__metric strong {
  font-family: var(--font-mono);
}

.dashboard-monitor-row__identity small,
.dashboard-monitor-row__metric small {
  font-size: 11px;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-monitor-row__client {
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-monitor-row__client em {
  color: var(--color-muted);
  font-style: normal;
}

.dashboard-monitor-row time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-muted);
  white-space: nowrap;
}

.dashboard-monitor-row__arrow {
  color: var(--color-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.dashboard-monitor-row:hover .dashboard-monitor-row__arrow {
  color: var(--color-accent);
  transform: translateX(2px);
}

@media (max-width: 1100px) {
  .dashboard-monitor-row {
    grid-template-columns: 10px minmax(150px, 1.5fr) minmax(100px, .9fr) auto 24px;
  }

  .dashboard-monitor-row__metric {
    display: none;
  }
}

@media (max-width: 700px) {
  .dashboard-monitor-summary {
    grid-template-columns: repeat(3, 1fr);
  }

  .dashboard-monitor-chip:nth-child(3n) {
    border-right: none;
  }

  .dashboard-monitor-row {
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: var(--space-3);
  }

  .dashboard-monitor-row__client,
  .dashboard-monitor-row__arrow {
    display: none;
  }
}

/* ------------------------------------------------------------
   Section sub-navigation (tabs inside a page)
   ------------------------------------------------------------ */
.subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-2);
  border-bottom: var(--border);
}

.subnav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.subnav__link:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.03);
}

.subnav__link.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.subnav__link--external { margin-left: auto; color: var(--color-muted); }

.subnav__badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-accent);
  background: rgba(240, 180, 41, 0.12);
  border: 1px solid rgba(240, 180, 41, 0.2);
  border-radius: var(--radius-sm);
  padding: 0 5px;
}

.subnav__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* ------------------------------------------------------------
   Command palette (Ctrl/Cmd + K)
   ------------------------------------------------------------ */
.nav-palette {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh var(--space-4) var(--space-4);
}

.nav-palette[hidden] { display: none; }

.nav-palette__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

.nav-palette__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--color-base);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: nav-palette-in 140ms ease-out;
}

@keyframes nav-palette-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-palette__panel { animation: none; }
}

.nav-palette__field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border);
}

.nav-palette__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--color-muted);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.nav-palette__input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  outline: none;
}

.nav-palette__input::placeholder { color: var(--color-muted); }

.nav-palette__results {
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  max-height: 46vh;
  overflow-y: auto;
}

.nav-palette__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-secondary);
  cursor: pointer;
}

.nav-palette__item mark {
  background: none;
  color: var(--color-accent);
  font-weight: 600;
}

.nav-palette__item.is-selected {
  background: rgba(240, 180, 41, 0.08);
  color: var(--color-text);
}

.nav-palette__section {
  margin-left: auto;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

.nav-palette__empty {
  margin: 0;
  padding: var(--space-5);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* Commando's en databaseresultaten: groepkoppen, een tweede regel met
   details en rijen die alleen uitleg geven. */
.nav-palette__group {
  padding: var(--space-3) var(--space-3) var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.nav-palette__group:first-child { padding-top: var(--space-1); }

.nav-palette__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.nav-palette__label,
.nav-palette__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-palette__meta {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

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

.nav-palette__item--hint { cursor: default; }
.nav-palette__item--hint .nav-palette__label { color: var(--color-muted); font-style: italic; }
.nav-palette__item--hint.is-selected { background: none; }

.nav-palette.is-busy .nav-palette__panel { cursor: progress; }
.nav-palette.is-busy .nav-palette__results { opacity: 0.55; pointer-events: none; }

.nav-palette__output {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  max-height: 28vh;
  overflow: auto;
  border-top: var(--border);
  background: var(--color-void);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.nav-palette__output.is-error { color: var(--color-danger); }
.nav-palette__output.is-ok { color: var(--color-text); }

.nav-palette__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-top: var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.nav-palette__footer kbd {
  display: inline-block;
  min-width: 1.5em;
  margin-right: 3px;
  padding: 0 4px;
  border: var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  text-align: center;
  color: var(--color-secondary);
}

/* Op een touchscreen is er geen Tab of pijltjes; de voetregel zegt dan niets. */
@media (hover: none) {
  .nav-palette__footer { display: none; }
}

/* ============================================================
   Visitekaartje-editor (/account#visitekaartje)
   ============================================================ */
.card-edit__intro {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.8;
  color: var(--color-muted);
  margin-bottom: var(--space-4);
}

.card-edit__url {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  background: var(--color-void);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
}

.card-edit__url code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  word-break: break-all;
}

.card-edit__url-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

.card-edit__state {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.card-edit__state--live  { color: #35c26a; }
.card-edit__state--draft { color: var(--color-muted); }

.card-edit__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.card-edit__stat {
  padding: var(--space-3) var(--space-4);
  background: var(--color-void);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.card-edit__stat-value {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  color: var(--color-text);
}

.card-edit__stat-label {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

.card-edit__group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card-edit__group legend {
  padding: 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

.card-edit__hint {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  line-height: 1.7;
}

.card-edit__checks {
  display: grid;
  gap: var(--space-3);
}

.card-edit__checks label,
.card-edit__row-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text);
}

.card-edit__rows {
  display: grid;
  gap: var(--space-3);
}

.card-edit__row {
  display: grid;
  grid-template-columns: 34px minmax(190px, 210px) 1fr 1fr auto auto;
  gap: var(--space-3);
  align-items: center;
}

.card-edit__row--highlight {
  grid-template-columns: 1fr 1.6fr 1fr auto;
}

/* Dezelfde merktegel als op de kaart, zodat je ziet wat je kiest. */
.card-edit__logo {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.card-edit__logo svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

.card-edit__row-clear {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: var(--text-md);
  line-height: 1;
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.card-edit__row-clear:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* De opslaanknop blijft binnen bereik terwijl je door het lange formulier scrollt. */
.card-edit__save {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4) 0;
  margin-top: var(--space-2);
  background: linear-gradient(to top, var(--color-surface) 70%, transparent);
}

.card-edit__inbox {
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-void);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-muted);
}

.card-edit__inbox a { color: var(--color-accent); }
.card-edit__inbox strong { color: var(--color-accent); }

.card-edit__image {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.card-edit__thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.card-edit__thumb--wide {
  width: auto;
  max-width: 160px;
  height: 48px;
  object-fit: contain;
}

.card-edit__subtitle {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

.card-edit__messages {
  display: grid;
  gap: var(--space-3);
}

.card-edit__message {
  padding: var(--space-4);
  background: var(--color-void);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.card-edit__message.is-unread { border-left: 3px solid var(--color-accent); }

.card-edit__message header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}

.card-edit__message header strong { color: var(--color-text); }

.card-edit__message p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
}

.card-edit__message footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.card-edit__message footer a { color: var(--color-accent); }

@media (max-width: 900px) {
  .card-edit__row,
  .card-edit__row--highlight { grid-template-columns: 1fr; justify-items: stretch; }
  .card-edit__row-clear { justify-self: end; }

  /* Een stapel losse velden heeft een scheiding nodig om leesbaar te blijven. */
  .card-edit__row {
    padding-bottom: var(--space-4);
    border-bottom: 1px dashed var(--color-border);
  }
  .card-edit__row:last-child { border-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 600px) {
  .card-edit__group { padding: var(--space-4) var(--space-3); }
  .card-edit__url { flex-direction: column; align-items: flex-start; }
  .card-edit__state { margin-left: 0; }
  .card-edit__stats { grid-template-columns: 1fr 1fr; }
  .card-edit__message header { flex-direction: column; gap: var(--space-1); }
}

/* ============================================================
   Berichten (/portal_messages)
   ============================================================ */
.msg-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 900px;
}

.msg--unread { border-color: var(--color-accent-dim); }

.msg__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.msg__title {
  font-size: var(--text-md);
  font-weight: 600;
}

.msg--unread .msg__title { color: var(--color-accent); }

.msg__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.msg__meta a { color: var(--color-muted); }
.msg__meta a:hover { color: var(--color-accent); }

/* De bron staat vooraan: uit het portaal of van een visitekaartje. */
.msg__source {
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
}

.msg__source--kaart {
  border-color: var(--color-accent-dim);
  color: var(--color-accent);
}

.msg__body {
  padding: var(--space-3) var(--space-4);
  background: var(--color-void);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
  white-space: pre-line;
}

@media (max-width: 600px) {
  .msg__head { flex-direction: column; }
  .msg__head .table-actions { width: 100%; flex-wrap: wrap; }
}

/* ============================================================
   PASSKEYS — accountpagina
   ============================================================ */

.passkey__intro {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.8;
  color: var(--color-muted);
  margin-bottom: var(--space-5);
}

.invoice-source {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 75%, transparent);
}

.invoice-source__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}

.invoice-source__head p {
  margin-top: var(--space-1);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.invoice-source__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.invoice-task-picker {
  display: grid;
  grid-template-columns: minmax(150px, .65fr) minmax(240px, 1.35fr) auto;
  align-items: end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.invoice-task-picker__intro {
  min-width: 0;
}

.invoice-task-picker__intro small,
.invoice-task-link {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.invoice-task-link {
  color: var(--color-accent);
}

.invoice-task-link.is-hidden {
  display: none;
}

.manual-lines {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.manual-line {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 110px 150px 90px 34px;
  align-items: end;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.manual-line__total {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--color-accent);
  font: 600 var(--text-sm)/1 var(--font-mono);
}

.manual-line__remove {
  width: 34px;
  height: 42px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 1.25rem;
}

.manual-line__remove:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

@media (max-width: 850px) {
  .invoice-source__head { flex-direction: column; }
  .invoice-task-picker { grid-template-columns: 1fr auto; }
  .invoice-task-picker__intro { grid-column: 1 / -1; }
  .manual-line { grid-template-columns: minmax(0, 1fr) 90px 120px 34px; }
  .manual-line__description { grid-column: 1 / -1; }
  .manual-line__total { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .invoice-task-picker { grid-template-columns: 1fr; }
}

/* Naamveld en knop naast elkaar; op smalle schermen onder elkaar. */
.passkey__add {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.passkey__add .field-group {
  flex: 1;
  min-width: 0;
}

.passkey__add .btn {
  white-space: nowrap;
}

.passkey__empty {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.passkey-list {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.passkey {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-sm);
}

.passkey__info {
  min-width: 0;
  flex: 1;
}

.passkey__rename {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.passkey__rename .input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

/* De opslaanknop is pas nodig zodra iemand de naam echt aanpast. */
.passkey__rename .btn {
  opacity: 0;
  transition: opacity var(--transition);
}

.passkey__rename:hover .btn,
.passkey__rename:focus-within .btn {
  opacity: 1;
}

.passkey__meta {
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

@media (max-width: 600px) {
  .passkey__add { flex-direction: column; align-items: stretch; }
  .passkey { flex-direction: column; align-items: stretch; }
  .passkey__rename .btn { opacity: 1; }
}

/* ============================================================
   Werkbalk bovenaan het dashboard: kanbanbord en postvak
   ============================================================ */
/* Drie gelijke kolommen: bord, aandacht en postvak. Alle drie zijn een
   samenvatting; de volledige versie staat één klik verder. */
.dashboard-workspace-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.dashboard-board-panel,
.dashboard-mail-panel,
.dashboard-workspace-grid .dashboard-attention {
  min-width: 0;
}

/* In de smalle kolom zijn de signalen compacter dan waar ze vandaan komen. */
.dashboard-workspace-grid .dashboard-signal {
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
}

.dashboard-workspace-grid .dashboard-attention .panel__header {
  padding: var(--space-3) var(--space-4);
}

/* De aandachtskolom vult de hoogte van de rij; het urengrafiekje zakt naar
   de bodem. */
.dashboard-workspace-grid .dashboard-attention {
  display: flex;
  flex-direction: column;
}

.dashboard-hours {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: auto;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: var(--border);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.dashboard-hours:hover { background: var(--color-surface); }

.dashboard-hours:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.dashboard-hours__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--color-secondary);
  font-size: var(--text-xs);
}

.dashboard-hours__head strong {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.dashboard-hours__bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2);
}

.dashboard-hours__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.dashboard-hours__track {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--color-steel);
  overflow: hidden;
}

.dashboard-hours__track i {
  display: block;
  width: 100%;
  min-height: 0;
  background: var(--color-secondary);
  opacity: .55;
}

.dashboard-hours__day.is-today .dashboard-hours__track i {
  background: var(--color-accent);
  opacity: 1;
}

.dashboard-hours__day small {
  color: var(--color-muted);
  font-size: 10px;
}

.dashboard-hours__day.is-today small { color: var(--color-text); }

.dashboard-board-panel {
  display: flex;
  flex-direction: column;
}

.dashboard-board-panel .panel__header,
.dashboard-mail-panel .panel__header {
  padding: var(--space-3) var(--space-4);
}

.dashboard-board-panel .panel__header {
  flex-wrap: wrap;
}

.dashboard-workspace-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.dashboard-board-picker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dashboard-board-picker .input {
  max-width: 190px;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* ------------------------------------------------------------
   Statusstrook — per kolom een stip, naam en teller. De kaarten
   zelf staan op /kanban; hier gaat het om het overzicht.
   ------------------------------------------------------------ */
.dashboard-board-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border);
}

.dashboard-board-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 26px;
  padding: 2px var(--space-2);
  border: var(--border);
  border-radius: 999px;
  background: var(--color-base);
  color: var(--color-secondary);
  font-size: var(--text-xs);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.dashboard-board-strip__item:hover,
.dashboard-board-strip__item:focus-visible {
  border-color: var(--lane-color, var(--color-border-light));
  color: var(--color-text);
}

.dashboard-board-strip__item strong {
  color: var(--color-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dashboard-board-strip__item[data-status="done"] strong { color: var(--color-secondary); font-weight: 500; }

.dashboard-board-strip__dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--lane-color, var(--color-muted));
}

/* ------------------------------------------------------------
   Vraagt aandacht — alleen kritieke open kaarten, één regel per
   kaart: reden, titel en eventueel de datum.
   ------------------------------------------------------------ */
.dashboard-critical {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.dashboard-critical__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .04em;
}

.dashboard-critical__count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-steel);
  color: var(--color-text);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.dashboard-critical__empty {
  margin: 0;
  color: var(--color-secondary);
  font-size: var(--text-sm);
}

.dashboard-critical__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.dashboard-critical__list li + li { border-top: var(--border); }

.dashboard-critical__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 34px;
  padding: 4px var(--space-3);
  background: var(--color-base);
  color: var(--color-text);
  transition: background var(--transition-fast);
}

.dashboard-critical__item:hover,
.dashboard-critical__item:focus-visible { background: var(--color-steel); }

.dashboard-critical__item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.dashboard-critical__item strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard-critical__item time {
  flex-shrink: 0;
  color: var(--color-secondary);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* Vaste breedte, zodat de titels onder elkaar beginnen. */
.dashboard-critical__badge {
  flex: 0 0 72px;
  padding: 2px 0;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
}

.dashboard-critical__item--late .dashboard-critical__badge,
.dashboard-critical__item--urgent .dashboard-critical__badge { background: rgba(232, 84, 30, .16); color: #ff8a66; }
.dashboard-critical__item--late time { color: #ff8a66; }
.dashboard-critical__item--high .dashboard-critical__badge { background: rgba(240, 180, 41, .14); color: var(--color-accent); }
.dashboard-critical__item--soon .dashboard-critical__badge { background: var(--color-steel); color: var(--color-text); }

.dashboard-board-more {
  padding: var(--space-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .06em;
  color: var(--color-secondary);
  text-align: center;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.dashboard-board-more:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ------------------------------------------------------------
   Postvak — snelkoppelingen en de laatste threads
   ------------------------------------------------------------ */
.dashboard-mail-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border);
}

.dashboard-mail-shortcuts a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-muted);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.dashboard-mail-shortcuts a:hover {
  color: var(--color-text);
  border-color: var(--color-border-light);
}

.dashboard-mail-shortcuts strong {
  color: var(--color-text);
  font-weight: 600;
}

.dashboard-mail-list {
  display: flex;
  flex-direction: column;
}

.dashboard-mail-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border);
  border-left: 2px solid transparent;
  color: var(--color-text);
  transition: background var(--transition-fast);
}

.dashboard-mail-item:last-child {
  border-bottom: 0;
}

.dashboard-mail-item:hover {
  background: var(--color-surface);
}

/* Ongelezen krijgt dezelfde stip en accentrand als in het postvak zelf. */
.dashboard-mail-item.is-unread {
  border-left-color: var(--color-accent);
}

.dashboard-mail-item.is-unread .dashboard-mail-item__from::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--color-accent);
  vertical-align: middle;
}

.dashboard-mail-item.is-unread > strong {
  color: var(--color-white);
  font-weight: 600;
}

.dashboard-mail-item__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.dashboard-mail-item__from {
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-mail-item__top time {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.dashboard-mail-item > strong {
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Middelbreed: bord en aandacht naast elkaar, het postvak eronder. */
@media (max-width: 1180px) {
  .dashboard-workspace-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-workspace-grid .dashboard-mail-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .dashboard-workspace-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  /* De knoppen passen niet meer naast de titel; ze zakken eronder. */
  .dashboard-board-panel .panel__header,
  .dashboard-mail-panel .panel__header {
    flex-wrap: wrap;
  }

  .dashboard-workspace-actions {
    width: 100%;
  }

  .dashboard-board-picker {
    flex: 1;
  }

  .dashboard-board-picker .input {
    flex: 1;
    max-width: none;
  }

  .dashboard-board-strip,
  .dashboard-critical,
  .dashboard-mail-shortcuts,
  .dashboard-mail-item {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

}

/* ------------------------------------------------------------
   Ruimte op desktop — het dashboard toont veel tegelijk, dus de
   blokken krijgen lucht tussen en binnen elkaar. Mobiel houdt de
   compacte maten hierboven.
   ------------------------------------------------------------ */
@media (min-width: 901px) {
  .dashboard-control-center .main__inner {
    padding-top: var(--space-10);
    padding-bottom: var(--space-16);
  }

  .dashboard-hero {
    padding-bottom: var(--space-8);
    margin-bottom: var(--space-8);
  }

  .dashboard-command-bar,
  .dashboard-kpi-grid {
    gap: var(--space-5);
    margin-bottom: var(--space-10);
  }

  .dashboard-command {
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .dashboard-kpi {
    gap: var(--space-3);
    padding: var(--space-6);
  }

  .dashboard-workspace-grid,
  .dashboard-primary-grid,
  .dashboard-secondary-grid {
    gap: var(--space-8);
    margin-bottom: var(--space-10);
  }

  .dashboard-project-pulse,
  .dashboard-monitoring,
  .dashboard-activity-panel {
    margin-bottom: var(--space-10);
  }

  .dashboard-control-center .panel__header {
    padding: var(--space-5) var(--space-6);
  }

  /* 16px houdt iOS van inzoomen, maar op desktop maakt het de keuzelijst
     groter dan de knoppen ernaast. */
  body.console-brand .dashboard-board-picker {
    flex: 0 1 auto;
    flex-wrap: nowrap;
  }

  body.console-brand .dashboard-board-picker .input {
    flex: 0 1 190px;
    font-size: var(--text-base);
  }

  .dashboard-board-strip,
  .dashboard-critical {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  .dashboard-control-center .dashboard-board-panel .panel__header,
  .dashboard-control-center .dashboard-workspace-grid .dashboard-attention .panel__header {
    padding: var(--space-4) var(--space-5);
  }

  .dashboard-mail-shortcuts {
    padding: var(--space-4) var(--space-6);
  }

  .dashboard-mail-item {
    gap: var(--space-1);
    padding: var(--space-3) var(--space-6);
  }

  .dashboard-project-row,
  .dashboard-monitor-row {
    gap: var(--space-6);
    padding: var(--space-4) var(--space-6);
  }

  .dashboard-monitor-chip {
    padding: var(--space-5) var(--space-6);
  }
}

/* ------------------------------------------------------------
   Schermvergrendeling (1 min stil, Ctrl+L, "lock" in de zoekbalk)
   Een screensaver: het merklogo staat stil op een vervaagde console, met een
   web van draden erachter waar pulsen licht door trekken. De sessie blijft
   geldig — dit is geen authenticatiegrens.

   Alle animatie hangt onder .is-visible: zo tikt er niets door zolang de sluier
   weg is, en begint de beweging bij elke vergrendeling van voren af aan. Alleen
   stroke-dashoffset en opacity bewegen; het logo zelf krijgt geen animatie.
   ------------------------------------------------------------ */
.screen-lock {
  /* Gouden gloed voor het portfolio; console-brand.css zet hier Aethium-blauw. */
  --lock-glow: 240, 180, 41;
  position: fixed;
  inset: 0;
  z-index: 10500;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 600ms ease, visibility 0s linear 600ms;
}

.screen-lock.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 600ms ease, visibility 0s linear 0s;
}

.screen-lock:focus {
  outline: none;
}

/* De sluier vervaagt het beeld eronder. Lukt backdrop-filter niet, dan dekt de
   eigen achtergrond het scherm alsnog af. */
.screen-lock__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(var(--lock-glow), 0.08), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(10, 13, 18, 0.88), rgba(5, 7, 10, 0.97) 76%);
  -webkit-backdrop-filter: blur(26px) saturate(0.55) brightness(0.62);
  backdrop-filter: blur(26px) saturate(0.55) brightness(0.62);
}

/* Het draadweb. slice laat de tekening overlopen in plaats van hem in het
   venster te persen, zodat de draden aan alle randen doorlopen.

   Geen mix-blend-mode hier: een blend-mode op dit kind maakt van .screen-lock
   een isolatiegroep, en dan ziet de sluier alleen die groep als achtergrond in
   plaats van de pagina — zijn backdrop-filter valt dan stil weg. Op een bijna
   zwarte ondergrond lichten de draden zonder blend net zo goed op. */
.screen-lock__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgb(var(--lock-glow));
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

/* Het stille web: net genoeg om structuur te geven. */
.screen-lock__wires-bed {
  opacity: 0.18;
}

/* Dezelfde draden via <use>, met één kort streepje licht dat er langs trekt.
   Elk patroon telt op tot 1570 — dezelfde afstand die de keyframe aflegt, dus
   de puls loopt naadloos door bij elke ronde. */
.screen-lock__wires-live {
  opacity: 0.9;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.screen-lock__wires-live use {
  stroke-dasharray: 70 1500;
  stroke-dashoffset: 1570;
}

.screen-lock.is-visible .screen-lock__wires-live use {
  animation: screenLockWire 19s linear infinite;
}

.screen-lock.is-visible .screen-lock__wires-live use:nth-child(2) {
  stroke-dasharray: 110 1460;
  animation-duration: 27s;
  animation-delay: -7s;
}

.screen-lock.is-visible .screen-lock__wires-live use:nth-child(3) {
  stroke-dasharray: 50 1520;
  animation-duration: 23s;
  animation-delay: -14s;
}

.screen-lock.is-visible .screen-lock__wires-live use:nth-child(4) {
  stroke-dasharray: 90 1480;
  animation-duration: 31s;
  animation-delay: -3s;
}

.screen-lock.is-visible .screen-lock__wires-live use:nth-child(5) {
  stroke-dasharray: 60 1510;
  animation-duration: 37s;
  animation-delay: -21s;
}

.screen-lock.is-visible .screen-lock__wires-live use:nth-child(6) {
  stroke-dasharray: 130 1440;
  animation-duration: 29s;
  animation-delay: -11s;
}

.screen-lock.is-visible .screen-lock__wires-live use:nth-child(7) {
  stroke-dasharray: 80 1490;
  animation-duration: 41s;
  animation-delay: -26s;
}

.screen-lock.is-visible .screen-lock__wires-live use:nth-child(8) {
  stroke-dasharray: 100 1470;
  animation-duration: 17s;
  animation-delay: -9s;
}

.screen-lock__stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}

/* Gloed achter het logo, als eigen laag zodat het logo zelf geen filter hoeft. */
.screen-lock__stage::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -14%;
  left: 50%;
  width: min(880px, 92vw);
  aspect-ratio: 3 / 2;
  background: radial-gradient(ellipse at center, rgba(var(--lock-glow), 0.18), transparent 62%);
  filter: blur(30px);
  opacity: 0.6;
  transform: translateX(-50%);
}

.screen-lock__stage > * {
  position: relative;
  z-index: 1;
}

.screen-lock__logo {
  width: min(760px, 80vw);
  height: auto;
  max-height: 44vh;
  filter: drop-shadow(0 18px 48px rgba(0, 0, 0, 0.6));
}

.screen-lock__clock {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(36px, 7vw, 60px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--color-white);
}

.screen-lock__date {
  margin: calc(var(--space-4) * -1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-secondary);
}

.screen-lock__hint {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.screen-lock.is-visible .screen-lock__hint {
  animation: screenLockHint 4.5s ease-in-out infinite;
}

body.has-lock-open {
  overflow: hidden;
}

/* ------------------------------------------------------------
   Wegstromen bij ontgrendelen (dashboard.js: unlockScreen → .is-leaving,
   LEAVE_MS = 1900). Een zachte lichtgolf stroomt van boven naar beneden over
   het scherm, de sluier lost er rustig achter op (de console wordt weer
   scherp) en klok en logo drijven een stukje omhoog weg.

   Alleen opacity en transform: die draait de compositor zonder te
   herschilderen. Geen mask, filter of blur die beweegt — over een
   backdrop-filter van 26px kost dat elke frame een volledige repaint.
   ------------------------------------------------------------ */
/* De lichtgolf: staat klaar boven het scherm, alleen zichtbaar tijdens het wegstromen. */
.screen-lock::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  height: 45vh;
  background: linear-gradient(to bottom, transparent,
    rgba(var(--lock-glow), 0.05) 35%, rgba(var(--lock-glow), 0.14) 50%,
    rgba(255, 255, 255, 0.06) 54%, rgba(var(--lock-glow), 0.05) 70%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -45vh, 0);
}

.screen-lock.is-visible.is-leaving {
  pointer-events: none;
  cursor: auto;
}

.screen-lock.is-visible.is-leaving::after {
  will-change: transform, opacity;
  animation: screenLockWave 1700ms cubic-bezier(0.45, 0, 0.25, 1) forwards;
}

.screen-lock.is-visible.is-leaving .screen-lock__veil {
  will-change: opacity;
  animation: screenLockVeilOut 1800ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.screen-lock.is-visible.is-leaving .screen-lock__wires-live use {
  animation-play-state: paused;
}

.screen-lock.is-visible.is-leaving .screen-lock__wires {
  will-change: opacity;
  animation: screenLockFade 900ms ease-out forwards;
}

.screen-lock.is-visible.is-leaving .screen-lock__stage {
  will-change: transform, opacity;
  animation: screenLockRise 1100ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.screen-lock.is-visible.is-leaving .screen-lock__hint {
  animation: screenLockFade 500ms ease-out forwards;
}

@keyframes screenLockWave {
  0%   { opacity: 0; transform: translate3d(0, -45vh, 0); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, 100vh, 0); }
}

/* De sluier volgt de golf: pas als die over het midden is, lost hij echt op. */
@keyframes screenLockVeilOut {
  0%   { opacity: 1; }
  25%  { opacity: 0.9; }
  100% { opacity: 0; }
}

@keyframes screenLockFade {
  to { opacity: 0; }
}

@keyframes screenLockRise {
  to { opacity: 0; transform: translate3d(0, -28px, 0); }
}

@keyframes screenLockWire {
  from { stroke-dashoffset: 1570; }
  to   { stroke-dashoffset: 0; }
}

@keyframes screenLockHint {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* Lage of smalle schermen: een kleiner logo, anders duwt de tekst eronder tegen
   de rand aan. */
@media (max-width: 640px), (max-height: 620px) {
  .screen-lock__logo {
    width: min(560px, 88vw);
    max-height: 34vh;
  }
}

/* Zonder beweging blijft het web gewoon staan als stille tekening. */
@media (prefers-reduced-motion: reduce) {
  .screen-lock,
  .screen-lock.is-visible .screen-lock__wires-live use,
  .screen-lock.is-visible .screen-lock__hint,
  .screen-lock.is-visible.is-leaving *,
  .screen-lock.is-visible.is-leaving::after {
    animation: none;
    transition: none;
  }

  .screen-lock__wires-live use {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .screen-lock__wires-live {
    opacity: 0.3;
  }
}

/* ============================================================
   Glazen tegels naast de timerknop: geld, tijd en taken
   ============================================================ */
/* Matglas: een doorschijnende laag met een lichte rand en een glimlijn aan de
   bovenkant. liquid-surfaces.js legt er waar mogelijk nog de QuickLiquid-
   breking onder (z-index -1); zonder die laag blijft dit gewoon mooi glas.
   Dezelfde stijl geldt voor de drie panelen in de rij eronder. body.console-brand
   is nodig om de algemene paneelrand uit console-brand.css te overstemmen. */
body.console-brand :is(.dashboard-command-bar, .dashboard-workspace-grid) .dashboard-glass {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .012) 55%),
    rgba(22, 28, 36, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 12px 32px rgba(0, 0, 0, .28);
  /* Geen backdrop-filter: zie het glasblok in console-brand.css. */
}

body.console-brand .dashboard-command-bar .dashboard-command--primary.dashboard-glass {
  border-color: rgba(0, 102, 255, .45);
  background:
    linear-gradient(150deg, rgba(0, 102, 255, .2), rgba(0, 102, 255, .04) 60%),
    rgba(22, 28, 36, .55);
}

.dashboard-stat {
  min-width: 0;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: var(--space-4) var(--space-5);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.dashboard-command-bar .dashboard-stat:hover {
  border-color: rgba(255, 255, 255, .2);
  transform: translateY(-1px);
}

.dashboard-stat:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Tekst boven het lijntje, het lijntje boven de glaslaag. */
.dashboard-stat > span,
.dashboard-stat > strong,
.dashboard-stat > small {
  position: relative;
  z-index: 1;
}

.dashboard-stat__label {
  overflow: hidden;
  color: var(--color-secondary);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard-stat__value {
  overflow: hidden;
  font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem);
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard-stat__note {
  overflow: hidden;
  color: var(--color-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard-stat.is-alert .dashboard-stat__note { color: #ff8a80; }

.dashboard-stat__spark {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 60%;
  pointer-events: none;
}

.dashboard-stat__area {
  fill: var(--color-accent);
  opacity: .1;
}

.dashboard-stat__line {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-linejoin: round;
  opacity: .6;
}

/* Binnen de glazen panelen zijn de rijen, chips en balkjes doorschijnend,
   anders liggen er dichte stroken over het glas. */
.dashboard-workspace-grid .dashboard-glass :is(.dashboard-board-strip__item, .dashboard-critical__item) {
  background: rgba(255, 255, 255, .025);
}

.dashboard-workspace-grid .dashboard-glass :is(.dashboard-critical__item:hover, .dashboard-critical__item:focus-visible, .dashboard-hours:hover, .dashboard-signal:hover, .dashboard-mail-item:hover) {
  background: rgba(255, 255, 255, .06);
}

.dashboard-workspace-grid .dashboard-glass :is(.dashboard-critical__list, .dashboard-board-strip__item) {
  border-color: rgba(255, 255, 255, .07);
}

/* Alleen de scheidingslijnen: de linkerrand van ongelezen mail blijft staan. */
.dashboard-workspace-grid .dashboard-glass :is(.panel__header, .dashboard-board-strip, .dashboard-signal, .dashboard-mail-item) {
  border-bottom-color: rgba(255, 255, 255, .07);
}

.dashboard-workspace-grid .dashboard-glass :is(.dashboard-hours, .dashboard-critical__list li + li) {
  border-top-color: rgba(255, 255, 255, .07);
}

.dashboard-workspace-grid .dashboard-glass .dashboard-hours__track {
  background: rgba(255, 255, 255, .06);
}

@media (prefers-reduced-transparency: reduce) {
  body.console-brand :is(.dashboard-command-bar, .dashboard-workspace-grid) .dashboard-glass {
    background: var(--color-surface);
  }
}

/* Telefoon: de timer over de volle breedte, de drie getallen compact op één
   rij eronder. De toelichting past daar niet meer en valt weg. */
@media (max-width: 640px) {
  .dashboard-command-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .dashboard-command-bar > .dashboard-command {
    grid-column: 1 / -1;
  }

  .dashboard-stat {
    min-height: 74px;
    padding: var(--space-3);
  }

  .dashboard-stat__value { font-size: var(--text-lg); }
  .dashboard-stat__note { display: none; }
}

/* ============================================================
   Wisselende tegels: zeven tegels, drie plekken naast de timer
   ============================================================ */
.dashboard-command-bar {
  position: relative;
}

/* De timer staat altijd vooraan, wat er ook wisselt. */
.dashboard-command-bar > .dashboard-command {
  order: -1;
}

/* Vaste hoogte — geen minimum: een tegel met stipjes, een balkje of een lang
   label mag de rij niet hoger maken, anders schuift bij die tegel het hele
   dashboard eronder mee. Hoog genoeg voor de volste tegel (werkreeks). */
.dashboard-command-bar .dashboard-stat {
  height: 7.75rem;
  min-height: 0;
}

/* Tijdens het schuiven steekt een tegel even buiten de balk uit. Zonder clip
   geeft dat een horizontale scrollbalk en springt de pagina. Alleen de
   x-as: de stipjes hangen onder de balk en moeten zichtbaar blijven. */
.dashboard-command-bar.is-rotating {
  overflow-x: clip;
}

.dashboard-stat[hidden] {
  display: none;
}

/* Schuiven: de oude set glijdt één voor één naar links weg en de nieuwe komt
   van rechts binnen, met een lichte overshoot aan het eind. Terug (een eerder
   stipje) gaat andersom. De duur van het uitschuiven staat ook als LEAVE_MS
   in dashboard.js. */
.dashboard-stat.is-leaving {
  animation: dashboard-stat-out 260ms cubic-bezier(.55, 0, .9, .45) forwards;
  pointer-events: none;
}

.dashboard-stat.is-entering {
  animation: dashboard-stat-in 520ms cubic-bezier(.2, .9, .25, 1.12) backwards;
}

[data-direction="back"] .dashboard-stat.is-leaving { animation-name: dashboard-stat-out-back; }
[data-direction="back"] .dashboard-stat.is-entering { animation-name: dashboard-stat-in-back; }

@keyframes dashboard-stat-out {
  to {
    opacity: 0;
    transform: translateX(-36px) scale(.97);
  }
}

@keyframes dashboard-stat-in {
  from {
    opacity: 0;
    transform: translateX(44px) scale(.97);
  }
}

@keyframes dashboard-stat-out-back {
  to {
    opacity: 0;
    transform: translateX(36px) scale(.97);
  }
}

@keyframes dashboard-stat-in-back {
  from {
    opacity: 0;
    transform: translateX(-44px) scale(.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-stat.is-entering,
  .dashboard-stat.is-leaving { animation: none; }
}

.dashboard-stat.is-hot .dashboard-stat__value,
.dashboard-stat.is-accent .dashboard-stat__value {
  color: var(--color-accent);
}

/* Werkreeks: een stip per dag, de laatste twee weken. */
.dashboard-stat__dots {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 3px;
  max-width: 170px;
  margin: 3px 0 1px;
}

.dashboard-stat__dots i {
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
}

.dashboard-stat__dots i.is-weekend { background: rgba(255, 255, 255, .04); }
.dashboard-stat__dots i.is-worked { background: var(--color-accent); }

/* Websites: aandeel gezond als balkje. */
.dashboard-stat__meter {
  display: block;
  height: 4px;
  margin: 4px 0 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.dashboard-stat__meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #3ecf8e;
}

.dashboard-stat.is-alert .dashboard-stat__meter i { background: #ff8a80; }

/* Stipjes rechtsonder: waar je bent, en klikken om te wisselen. Alleen
   zichtbaar als dashboard.js het wisselen heeft aangezet. */
.dashboard-rotator__dots {
  position: absolute;
  right: 0;
  bottom: -18px;
  display: none;
  gap: 2px;
}

.dashboard-command-bar.is-rotating .dashboard-rotator__dots {
  display: flex;
}

.dashboard-rotator__dot {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.dashboard-rotator__dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  transition: width var(--transition), background-color var(--transition);
}

.dashboard-rotator__dot:hover::after { background: rgba(255, 255, 255, .45); }

.dashboard-rotator__dot[aria-current="true"]::after {
  width: 16px;
  background: var(--color-accent);
}

.dashboard-rotator__dot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .dashboard-command-bar .dashboard-stat { height: 5.75rem; }
  .dashboard-stat__dots { gap: 2px; }
}

/* De klok staat precies naast de meldingenbel. Die zweeft fixed rechtsboven:
   24px van de rand, 40px breed en hoog, 20px van de bovenkant, dus zijn
   midden ligt op 40px. Precies daar begint ook de hero (padding-top 40px).

   Horizontaal: de rechterrand van de klok hoort 12px links van de bel te
   staan, dus 76px van de rand. De inhoud eindigt `pad` van de rand plus, op
   schermen breder dan de inhoud, de helft van wat er overblijft. Het
   verschil schuiven we op met een transform: naar rechts op brede schermen,
   naar links als de inhoud onder de bel doorloopt. De 12px vangt de
   scrollbalk op, die 100vw net iets te breed maakt.
   Verticaal: de klok (20px hoog, regelhoogte 1) schuift 10px omhoog, zodat
   zijn midden ook op 40px ligt. Onder 1025px staat de bel in de mobiele
   topbalk en blijft de klok gewoon in de hero. */
@media (min-width: 1025px) {
  .dashboard-hero__status {
    --hero-inner-pad: clamp(var(--space-6), 4vw, var(--space-10));
    --hero-side-room: max(0px, (100vw - var(--sidebar-width) - 1540px) / 2);
    align-self: start;
    transform: translate(calc(var(--hero-inner-pad) + var(--hero-side-room) - 76px), -10px);
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  .dashboard-hero__status { --hero-inner-pad: var(--space-6); }
}

/* Swipen om te wisselen: horizontale vegen zijn voor dashboard.js, verticaal
   scrollen blijft bij de browser. */
.dashboard-command-bar.is-rotating {
  touch-action: pan-y;
}

/* ============================================================
   Instellingen: onderdelen links, het gekozen onderdeel rechts
   ============================================================ */
.settings-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-8);
}

.settings-nav {
  position: sticky;
  top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-nav__item {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  color: var(--color-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.settings-nav__item strong {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
}

.settings-nav__item small {
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.settings-nav__item:hover { background: rgba(255, 255, 255, .04); }

.settings-nav__item.is-active {
  border-color: rgba(255, 255, 255, .09);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .012) 60%),
    rgba(20, 26, 34, .55);
  box-shadow: inset 2px 0 0 var(--color-accent), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.settings-content {
  min-width: 0;
}

/* Een onderdeel mag zelf een grid zijn (.notif-center op /account); hidden
   moet dan toch winnen. */
.settings-section[hidden] { display: none; }

/* Telefoon en tablet: de onderdelen als een scrollbare rij bovenaan. */
@media (max-width: 900px) {
  .settings-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .settings-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .settings-nav__item {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }

  .settings-nav__item small { display: none; }

  .settings-nav__item.is-active {
    box-shadow: inset 0 -2px 0 var(--color-accent), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
}

/* Het kleine tabje onderaan: de dashboardgroeten als lijst. */
.settings-nav__item--minor {
  margin-top: var(--space-3);
  padding: 6px 14px;
  opacity: .7;
}
.settings-nav__item--minor strong { font-size: var(--text-xs); font-weight: 500; }
.settings-nav__item--minor small { display: none; }
.settings-nav__item--minor:hover,
.settings-nav__item--minor.is-active { opacity: 1; }

@media (max-width: 900px) {
  .settings-nav__item--minor { margin-top: 0; }
}

.greeting-list { border-top: 1px solid var(--color-border); }
.greeting-list:last-child { border-bottom: 1px solid var(--color-border); }
.greeting-list summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
  color: var(--color-text);
}
.greeting-list__time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.greeting-list__count { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.greeting-list ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
  color: var(--color-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* Claude-samenvatting op de klantpagina. */
.client-summary__form { margin: 0; }
.client-summary__text { margin: 0 0 var(--space-3); color: var(--color-text); line-height: 1.6; }
.client-summary__label {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.client-summary__list { margin: 0; padding-left: var(--space-5); color: var(--color-secondary); font-size: var(--text-sm); line-height: 1.6; }
.client-summary__meta { margin: var(--space-4) 0 0; font-size: var(--text-xs); }

/* ------------------------------------------------------------
   Instaprint — knop in de zijbalk en de snelle dialoog
   (components/navbar.php, assets/js/instaprint.js)
   ------------------------------------------------------------ */
.nav-search--print { margin-top: var(--space-2); }

/* Instaprint-knoppen: ingedrukt houden downloadt de PDF. De balk vult zich
   tijdens het vasthouden (HOLD_MS in instaprint.js). */
[data-instaprint],
form[data-instaprint-form] button[type="submit"] {
  position: relative;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.ip-hold::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: currentColor;
  opacity: .22;
  pointer-events: none;
  animation: ip-hold 600ms linear forwards;
}
@keyframes ip-hold { to { width: 100%; } }

/* Instaprint-menu (includes/components/instaprint_menu.php) */
.ip-menu { position: relative; display: inline-block; }
.ip-menu > summary { list-style: none; cursor: pointer; }
.ip-menu > summary::-webkit-details-marker { display: none; }
.ip-menu > summary::after { content: "▾"; margin-left: var(--space-2); opacity: .7; }
.ip-menu__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 2px;
  min-width: 260px;
  max-width: calc(100vw - 32px);
  padding: var(--space-2);
  background: linear-gradient(145deg, #292929, #1c1c1c);
  border: 1px solid #45413a;
  border-radius: 12px;
  box-shadow: 0 18px 60px #0009;
}
.ip-menu__item {
  display: grid;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ip-menu__item:hover, .ip-menu__item:focus-visible { background: #ffffff12; }
.ip-menu__item small { color: var(--color-secondary); font-size: var(--text-xs); }
.ip-menu__tip { margin: var(--space-1) var(--space-3) var(--space-1); color: var(--color-muted); font-size: var(--text-xs); }
@media (prefers-reduced-motion: reduce) {
  .ip-hold::after { animation-duration: 1ms; }
}

.instaprint {
  width: min(440px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  background: linear-gradient(145deg, #292929, #1c1c1c);
  border: 1px solid #45413a;
  border-radius: 18px;
  box-shadow: 0 28px 100px #0008;
  color: var(--color-text);
}

.instaprint::backdrop { background: #080a0dcc; backdrop-filter: blur(6px); }

.instaprint__form { display: grid; gap: var(--space-3); padding: var(--space-6); }
.instaprint__head { display: flex; align-items: center; justify-content: space-between; }
.instaprint__title { margin: 0; font-size: var(--text-xl); color: var(--color-white); }

.instaprint__close {
  width: 32px;
  height: 32px;
  border: var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--color-secondary);
  font-size: var(--text-lg);
  cursor: pointer;
}

.instaprint__close:hover { color: var(--color-text); border-color: var(--color-border-light); }

.instaprint__target { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: 0; padding: 0; border: 0; }

.instaprint__target label {
  display: grid;
  gap: 2px;
  padding: var(--space-3);
  border: var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: var(--text-sm);
}

.instaprint__target label:has(input:checked) { border-color: var(--color-accent); background: #f0b42910; }
.instaprint__target input { position: absolute; opacity: 0; pointer-events: none; }
.instaprint__target small { color: var(--color-secondary); font-family: var(--font-mono); font-size: var(--text-xs); }
.instaprint__target label:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.instaprint__row { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--space-3); }
.instaprint__row [hidden] { display: none; }

.instaprint__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid #ffffff10;
}

.instaprint__more { color: var(--color-secondary); font-size: var(--text-sm); }
.instaprint__more:hover { color: var(--color-accent); }
.instaprint__check { display: flex; align-items: center; gap: var(--space-2); min-height: 38px; font-size: var(--text-sm); }
.instaprint__checks { display: flex; gap: var(--space-5); }
.instaprint__checks[hidden] { display: none; }

/* ------------------------------------------------------------
   Knopbeweging — de gewone, rustige variant
   Een knop komt een pixel omhoog bij hover, veert in bij het indrukken en
   ademt zachtjes terwijl hij bezig is (aria-busy, zie initDeploymentForms).
   Losse translate/scale-eigenschappen, zodat een eigen transform blijft
   staan. De transitielijst herhaalt de kleuren, want deze regel wint van
   component-transities zoals .action-change. Staan de gekke knoppen aan,
   dan neemt dat blok het over.
   ------------------------------------------------------------ */
html:not(.silly-buttons) :is(.btn, .panel__action, .monitor-btn, .plug-btn, .btn-start-timer, .feedback-button, .logout-btn):not(:disabled) {
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              translate 180ms cubic-bezier(.2, .8, .3, 1),
              scale 120ms ease;
}

html:not(.silly-buttons) :is(.btn, .panel__action, .monitor-btn, .plug-btn, .btn-start-timer, .feedback-button):not(:disabled):not([aria-disabled="true"]):hover {
  translate: 0 -1px;
}

html:not(.silly-buttons) :is(.btn, .panel__action, .monitor-btn, .plug-btn, .btn-start-timer, .feedback-button) > svg {
  transition: scale 180ms cubic-bezier(.2, .8, .3, 1);
}

html:not(.silly-buttons) :is(.btn, .panel__action, .monitor-btn, .plug-btn, .btn-start-timer, .feedback-button):not(:disabled):hover > svg {
  scale: 1.1;
}

/* Indrukken geldt voor elke knop, ook de kleine icoonknoppen. */
html:not(.silly-buttons) :where(button, .btn, input[type="submit"], input[type="button"], [role="button"]):not(:disabled):not([aria-disabled="true"]):active {
  translate: 0 0;
  scale: 0.96;
  transition-duration: 60ms;
}

.btn[aria-busy="true"] {
  cursor: progress;
  animation: btn-busy 1.1s ease-in-out infinite;
}

@keyframes btn-busy {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.silly-buttons) :is(.btn, .panel__action, .monitor-btn, .plug-btn, .btn-start-timer, .feedback-button, button) {
    translate: none !important;
    scale: none !important;
  }
  html:not(.silly-buttons) :is(.btn, .panel__action, .monitor-btn, .plug-btn, .btn-start-timer, .feedback-button) > svg { scale: none !important; }
  .btn[aria-busy="true"] { animation: none; opacity: .7; }
}

/* ------------------------------------------------------------
   Gekke knoppen — html.silly-buttons ("gek" in de zoekbalk)
   Alles zit achter de klasse: staat hij uit, dan gedragen knoppen zich
   gewoon. De animaties gebruiken de losse scale/rotate/translate-
   eigenschappen, zodat een eigen transform van een knop (centreren,
   positioneren) blijft staan. Het uitnodigen, de boing bij een klik en de
   emoji-regen doet dashboard.js (initSillyButtons).
   ------------------------------------------------------------ */
html.silly-buttons :is(button, .btn, input[type="submit"], input[type="button"], input[type="reset"], [role="button"], .logout-btn):not(:disabled):not([aria-disabled="true"]) {
  transition: scale 160ms cubic-bezier(.3, 1.8, .5, 1), rotate 160ms cubic-bezier(.3, 1.8, .5, 1);
}

html.silly-buttons :is(button, .btn, input[type="submit"], input[type="button"], input[type="reset"], [role="button"], .logout-btn):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
  animation: silly-jelly 520ms ease-in-out infinite, silly-rainbow 1.2s linear infinite;
}

html.silly-buttons :is(button, .btn, input[type="submit"], input[type="button"], input[type="reset"], [role="button"], .logout-btn):not(:disabled):not([aria-disabled="true"]):active {
  animation: none;
  scale: 0.72 1.18;
  rotate: -4deg;
}

@keyframes silly-jelly {
  0%, 100% { scale: 1.15 1.15; rotate: 0deg; }
  20%      { scale: 1.28 0.92; rotate: -6deg; }
  45%      { scale: 0.94 1.3;  rotate: 5deg; }
  70%      { scale: 1.22 1.02; rotate: -3deg; }
  85%      { scale: 1.08 1.2;  rotate: 2deg; }
}

@keyframes silly-rainbow {
  from { filter: hue-rotate(0deg) saturate(1.8) brightness(1.1); }
  to   { filter: hue-rotate(360deg) saturate(1.8) brightness(1.1); }
}

.silly-burst {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  pointer-events: none;
  font-size: 22px;
  line-height: 1;
  will-change: translate, rotate, opacity;
}