/* =========================================================================
   NUMB3RS brand overlay
   Loads na app.css. Vervangt het klinische grijs/teal-palet door de
   cream/forest/clay-huisstijl van numb3rs.be + cockpit-v3-design.

   Palette:
   - cream (#FAF7F2) = base achtergrond (warm wit)
   - cream-2 (#F3EDE3) = sunken / secundair vlak
   - forest (var(--brand)) = primair brand-groen, accent + sidebar
   - forest-deep (#1A2D25) = hover-staat, sidebar bg
   - clay (#C67B5C) = warme accent (ge-highlight)
   - ink (#1F2421) = body tekst
   - muted (#8B8680) = secundaire tekst
   ========================================================================= */

:root {
  /* Re-bind van bestaande tokens uit app.css naar NUMB3RS-palette ----------- */
  --ink-900: #1F2421;     /* body ink */
  --ink-800: #2A2F2C;     /* sidebar hover */
  --ink-700: #3A3F3B;     /* tekst-soft */
  --ink-600: #5C615D;     /* tekst-muted-2 */
  --ink-500: #8B8680;     /* muted */
  --ink-400: #A8A39C;
  --ink-300: #C9C4BB;
  --ink-200: #E5DFD3;     /* lijnen op cream */
  --ink-100: #EDE4D3;     /* sunken / row-hover */
  --ink-50:  #FAF7F2;     /* cream — base bg */

  /* Brand = forest-green ipv #0066ff blauw */
  --brand:        #10B981;
  --brand-bg:     #ECFDF5;
  --brand-border: #6EE7B7;
  --brand-rgb:    16, 185, 129;
  --font-sans:    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --accent-green: #10B981;   /* huisstijl groen accent (enige bron) */

  /* Accent (clay) — gebruikt voor warme highlight in /vandaag KPI's */
  --clay:         #C67B5C;
  --clay-bg:      #FAEEE5;
  --clay-border:  #E8C6B2;

  /* State-kleuren licht warmer */
  --red:          #A31D1D;
  --red-bg:       #F5E3E3;
  --red-border:   #E5B3B3;

  --orange:       #B86A1D;
  --orange-bg:    #FBEEDE;
  --orange-border:#E8C49A;

  --amber:        #B8901D;
  --amber-bg:     #FBF4DE;
  --amber-border: #E5D8A0;

  --green:        var(--brand);       /* alias = brand */
  --green-bg:     var(--brand-bg);
  --green-border: var(--brand-border);

  /* Sidebar: afzonderlijke variabelen — zie #sidebar override hieronder */
  --sb-bg:           #1A2D25;     /* forest-night */
  --sb-bg-hover:     var(--brand);
  --sb-text:         #DDE8E1;
  --sb-text-muted:   #8FA396;
  --sb-divider:      var(--brand);
  --sb-active-line:  #C67B5C;

  --sidebar-width: 232px;
  --topbar-height: 56px;
}

/* ── Typography: Fraunces voor titels, Inter voor body ─────────────────── */

html, body {
  font-family: var(--font-sans);
  background: var(--ink-50);
  color: var(--ink-900);
}

.page-title,
.tb-task-title {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: 26px;
  line-height: 1.2;
}

.card-title,
.section-title {
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
}

.kpi-value {
  font-family: var(--font-sans);
  font-weight: 600;
}

/* ── Sidebar: forest-green ipv ink-900 (donker) ────────────────────────── */

#sidebar {
  background: var(--sb-bg);
  color: var(--sb-text);
  border-right: 1px solid #0F1C17;
}

.sb-brand {
  border-bottom: 1px solid var(--sb-divider);
  padding: 18px 18px 16px;
}
.sb-brand-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #FAF7F2;
}
.sb-brand-tag {
  color: var(--sb-text-muted);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sb-section { padding-top: 18px; }
.sb-section-title {
  color: var(--sb-text-muted);
  font-size: 10px;
  letter-spacing: 0.10em;
  font-weight: 600;
  padding: 0 18px 6px;
}

.sb-link {
  padding: 8px 18px;
  color: var(--sb-text);
  border-left: 3px solid transparent;
  font-size: 13.5px;
}
.sb-link:hover {
  background: var(--sb-bg-hover);
  color: #fff;
}
.sb-link.active {
  background: var(--sb-bg-hover);
  color: #fff;
  border-left-color: var(--sb-active-line);
  font-weight: 600;
}
.sb-link .sb-badge {
  background: rgba(255,255,255,0.10);
  color: var(--sb-text);
}
.sb-link.active .sb-badge { background: var(--sb-active-line); color: #fff; }

.sb-status {
  border-top: 1px solid var(--sb-divider);
  color: var(--sb-text-muted);
}

/* Collapsible "secundair" groep ─ enkel header-regel die toggle-bel toont */
.sb-section.sb-collapsible .sb-section-title {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.sb-section.sb-collapsible .sb-section-title::after {
  content: "▾";
  margin-left: auto;
  margin-right: 18px;
  font-size: 9px;
  transition: transform 120ms;
}
.sb-section.sb-collapsible.collapsed .sb-section-title::after { transform: rotate(-90deg); }
.sb-section.sb-collapsible.collapsed .sb-link { display: none; }

/* ── Topbar ─────────────────────────────────────────────────────────────── */

#topbar {
  background: #fff;
  border-bottom: 1px solid var(--ink-200);
  height: var(--topbar-height);
}
#topbar-search {
  background: var(--ink-50);
  border-color: var(--ink-200);
  font-size: 13px;
  height: 34px;
  border-radius: 999px;
  padding: 0 14px;
}
#topbar-search:focus { border-color: var(--brand); background: #fff; }
#topbar-meta { color: var(--ink-500); font-size: 12px; }
#topbar-meta .alert-text { color: var(--orange); font-weight: 500; }

/* ── Cards: warmere paleet (cream-tinted hoofd, cream-2 header) ─────────── */

#main { background: var(--ink-50); }
#content { padding: 24px 28px 60px; max-width: 1320px; }

.card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(31, 36, 33, 0.04);
}
.card-header {
  background: #FAF7F2;
  border-bottom: 1px solid var(--ink-200);
}

/* ── KPI's: warmere accent-rand voor "groen/brand"-staat ─────────────────── */

.kpi {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
}
.kpi.brand { border-left: 4px solid var(--clay); }
.kpi.green { border-left: 4px solid var(--brand); }
.kpi.brand .kpi-value { color: var(--clay); }
.kpi.green .kpi-value { color: var(--brand); }

/* ── Knop: brand-knop in forest-green ───────────────────────────────────── */

.btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn.primary:hover {
  background: #1F3A2E;
  border-color: #1F3A2E;
}
.btn.clay {
  background: var(--clay);
  border-color: var(--clay);
  color: #fff;
}
.btn.clay:hover { background: #A85E3E; border-color: #A85E3E; }

/* Pills */
.pill.brand  { background: var(--brand-bg); color: var(--brand); border-color: var(--brand-border); }
.pill.clay   { background: var(--clay-bg);  color: var(--clay);  border-color: var(--clay-border); }

/* ── Wizard layout (onboarding_wizard) ──────────────────────────────────── */

.wiz-shell {
  max-width: 720px;
  margin: 8px auto 0;
}
.wiz-stepper {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}
.wiz-stepper__step {
  flex: 1;
  height: 4px;
  background: var(--ink-200);
  border-radius: 2px;
}
.wiz-stepper__step.done   { background: var(--brand); }
.wiz-stepper__step.active { background: var(--clay); }

.wiz-card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  padding: 28px 30px;
  box-shadow: 0 4px 18px -8px rgba(31,36,33,0.10);
}
.wiz-card h2 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.wiz-card .wiz-sub {
  color: var(--ink-500);
  font-size: 13px;
  margin-bottom: 20px;
}

.wiz-field { margin-bottom: 16px; }
.wiz-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 5px;
  letter-spacing: 0.02em;
}
.wiz-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--ink-200);
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.wiz-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(44,74,62,0.12); }
textarea.wiz-input { height: auto; padding: 10px 12px; min-height: 84px; resize: vertical; }
.wiz-help { font-size: 12px; color: var(--ink-500); margin-top: 4px; }
.wiz-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.wiz-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-200);
}
.wiz-actions .right { display: flex; gap: 8px; }

.wiz-flow-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.wiz-flow-card {
  border: 1.5px solid var(--ink-200);
  border-radius: 10px;
  padding: 16px 18px;
  cursor: pointer;
  background: #fff;
  transition: all 120ms;
}
.wiz-flow-card:hover { border-color: var(--ink-400); }
.wiz-flow-card.selected {
  border-color: var(--brand);
  background: var(--brand-bg);
  box-shadow: 0 0 0 3px rgba(44,74,62,0.08);
}
.wiz-flow-card__title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}
.wiz-flow-card__sub {
  font-size: 12px;
  color: var(--ink-500);
  line-height: 1.45;
}

.wiz-success {
  text-align: center;
  padding: 12px 0 4px;
}
.wiz-success__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--brand-bg);
  color: var(--brand);
  font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  font-family: var(--font-sans);
}

/* ── Facturen-inbox layout ──────────────────────────────────────────────── */

.fact-toolbar { display: flex; gap: 10px; align-items: center; margin: 6px 0 16px; flex-wrap: wrap; }
.fact-tabs { display: flex; gap: 4px; }
.fact-tab {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid var(--ink-200);
  background: #fff;
  color: var(--ink-700);
  cursor: pointer;
}
.fact-tab[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.fact-card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.fact-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fact-card__title { font-weight: 600; font-size: 14px; }
.fact-card__stats { font-size: 12px; color: var(--ink-500); display: flex; gap: 14px; }
.fact-card__count { font-family: var(--font-sans); font-weight: 600; color: var(--clay); font-size: 22px; }
.fact-empty { color: var(--ink-500); padding: 14px; font-size: 13px; }

/* =========================================================================
   MOBILE-RESPONSIVE — iPhone Safari + Android Chrome via Tailscale.
   Breakpoints:
     - <=600px  → mobiel: sidebar drawer, single column, touch-targets ≥44px
     - 601-1024 → tablet: 2-kolom waar nuttig, smallere sidebar
     - >=1025   → desktop: huidige layout
   =========================================================================== */

/* Tap-friendly basics — gelden altijd op touch-devices */
@media (hover: none) and (pointer: coarse) {
  .btn, .btn.xs, .sb-link, .nav-item, button, input[type="checkbox"], input[type="radio"], select, .pill {
    min-height: 36px;
  }
  .btn:not(.xs) { min-height: 44px; padding: 10px 16px; }
  a, button, .sb-link { -webkit-tap-highlight-color: rgba(44,74,62,0.15); }
}

/* Hamburger button — verborgen op desktop, getoond op mobile */
#mobile-menu-toggle {
  display: none;
  position: fixed;
  top: 8px; left: 8px;
  z-index: 100;
  width: 44px; height: 44px;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
#mobile-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 49;
}

/* ── ≤600px : iPhone portrait + most Android phones ─────────────── */
@media (max-width: 600px) {
  /* Sidebar wordt off-canvas drawer */
  #app {
    grid-template-columns: 1fr;  /* sidebar uit grid */
  }
  #sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 78vw; max-width: 320px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 60;
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    overflow-y: auto;
  }
  #sidebar.open { transform: translateX(0); }
  #mobile-menu-toggle { display: flex; align-items: center; justify-content: center; }
  #mobile-menu-backdrop.show { display: block; }

  /* Topbar krijgt extra padding-left voor hamburger */
  #topbar {
    padding-left: 60px !important;
    flex-wrap: wrap;
    height: auto !important;
    min-height: 56px;
    gap: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  #topbar-search { width: 100% !important; max-width: none !important; flex-basis: 100%; order: 2; font-size: 16px; padding: 10px 12px; }
  #topbar-meta { font-size: 11px; flex-basis: 100%; order: 1; flex-wrap: wrap; gap: 8px; }

  /* Content padding kleiner */
  #content { padding: 12px !important; max-width: 100% !important; }

  /* Page-titels iets kleiner */
  .page-title { font-size: 22px !important; margin-top: 6px; }
  .page-sub { font-size: 12px; }

  /* KPI-grid: 2 kolommen op mobile (was auto-fit minmax 160px) */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  .kpi { padding: 10px !important; }
  .kpi-value { font-size: 22px !important; }
  .kpi-label { font-size: 11px; }
  .kpi-sub { font-size: 10px; }

  /* Filter-rij: stack vertically */
  .row { flex-direction: column !important; align-items: stretch !important; }
  .row > * { width: 100%; }
  .row .input, .row .select, .row select, .row input { width: 100% !important; max-width: none !important; min-height: 40px; font-size: 16px; /* voorkomt iOS auto-zoom */ }

  /* Tabellen — horizontale scroll, niet stacken (data-density behouden) */
  .card-body.dense, .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl { min-width: 720px; font-size: 12px; }
  .tbl th, .tbl td { padding: 6px 8px; white-space: nowrap; }
  .tbl td a, .tbl td .btn { white-space: nowrap; }

  /* Card-padding krimpen */
  .card { margin-bottom: 10px; }
  .card-head { padding: 10px 12px; }
  .card-head h3 { font-size: 14px; }
  .card-body { padding: 10px 12px; }

  /* Splits → single column */
  .split-3, .split-4, .split-13 { grid-template-columns: 1fr !important; gap: 10px; }

  /* Topbar search results panel — fullscreen */
  #topbar-search-results {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    top: 110px !important;
    max-height: calc(100vh - 130px) !important;
  }

  /* Drawer (klant-detail e.d.) — fullscreen */
  .drawer-panel { width: 100vw !important; max-width: 100vw !important; }

  /* Wizard-stepper — compact */
  .wizard-stepper { font-size: 11px; }
}

/* ── 601-1024px : iPad portrait, kleine laptop ──────────────────── */
@media (min-width: 601px) and (max-width: 1024px) {
  :root { --sidebar-width: 200px; }
  #content { padding: 16px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .split-13 { grid-template-columns: 1fr; }
  .tbl { font-size: 12px; }
  #topbar-search { max-width: 320px; }
}

/* iOS-specifieke fixes */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari: voorkom auto-zoom bij focus op text-inputs (16px+ vereist) */
  input[type="text"], input[type="search"], input[type="email"],
  input[type="number"], input[type="tel"], select, textarea {
    font-size: 16px !important;
  }
  /* iOS overscroll bounce uit op body — sidebar scrollt apart */
  body { overscroll-behavior: none; }
}

/* =========================================================================
   BTW-DETAIL FULL-PAGE — specs btw-agent + layout-agent (2026-04-30).
   Cockpit-look (lichte bg + witte cards + blauw primair) zonder shell te raken.
   =========================================================================== */
.bd-page { max-width: 1280px; margin: 0 auto; padding: 4px 2px 40px; font-family: var(--font-sans); }

.bd-header {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 6px 0 14px;
}
.bd-title { font-size: 24px; font-weight: 700; margin: 0; color: #132033; line-height: 1.2; }
.bd-header-spacer { flex: 1; }
.bd-meta-inline { color: #5f7188; font-size: 13px; }
.bd-meta-inline.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }

.bd-pill { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.bd-pill-green { background: #dcfce7; color: #16653a; }
.bd-pill-amber { background: #fef3c7; color: #92400e; }
.bd-pill-red   { background: #fee2e2; color: #991b1b; }
.bd-pill-blue  { background: #dbeafe; color: #1e40af; }
.bd-pill-gray  { background: #e5e7eb; color: #4b5563; }

.bd-meta-strip {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  background: #fff; border: 1px solid #dde4ee; border-radius: 12px;
  padding: 14px 18px; margin-bottom: 14px;
}
.bd-meta-cell { }
.bd-meta-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8ea0b7; margin-bottom: 4px; }
.bd-meta-value { font-size: 14px; font-weight: 600; color: #132033; display: flex; align-items: center; gap: 6px; }

.bd-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.bd-dot-green { background: #16a34a; }
.bd-dot-amber { background: #d97706; }
.bd-dot-red   { background: #dc2626; }
.bd-dot-blue  { background: #1f5fff; }
.bd-dot-gray  { background: #8ea0b7; }

.bd-q-nav {
  display: flex; gap: 6px; margin-bottom: 14px;
}
.bd-q-pill {
  padding: 8px 16px; border-radius: 999px; border: 1px solid #dde4ee;
  background: #fff; color: #5f7188; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 120ms; min-height: 36px;
}
.bd-q-pill:hover { border-color: #1f5fff; color: #1f5fff; }
.bd-q-pill.active { background: #1f5fff; color: white; border-color: #1f5fff; }

.bd-tabs {
  display: flex; gap: 0; border-bottom: 1px solid #dde4ee; margin-bottom: 16px;
  overflow-x: auto;
}
.bd-tab {
  padding: 10px 18px; background: none; border: 0; cursor: pointer;
  font-size: 14px; font-weight: 500; color: #5f7188;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all 120ms; white-space: nowrap; min-height: 40px;
}
.bd-tab:hover { color: #132033; }
.bd-tab.active { color: #1f5fff; border-bottom-color: #1f5fff; font-weight: 600; }

.bd-tab-body { min-height: 200px; }

.bd-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.bd-card {
  background: #fff; border: 1px solid #dde4ee; border-radius: 12px;
  padding: 16px 18px;
}
.bd-card-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8ea0b7; margin-bottom: 10px;
}
.bd-kv {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid #f0f4f9; font-size: 13px;
}
.bd-kv:last-child { border-bottom: 0; }
.bd-kv > span:first-child { color: #5f7188; }
.bd-kv strong { color: #132033; font-weight: 600; }
.bd-muted { color: #8ea0b7; font-size: 12px; }

.bd-blockers { margin: 0; padding-left: 20px; color: #991b1b; }
.bd-blockers li { padding: 2px 0; }

.bd-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-actions .btn { min-height: 38px; }

.bd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bd-table th, .bd-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #f0f4f9; }
.bd-table th { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8ea0b7; }

@media (max-width: 1024px) { .bd-cards { grid-template-columns: repeat(2, 1fr); } .bd-meta-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .bd-cards { grid-template-columns: 1fr; } .bd-meta-strip { grid-template-columns: 1fr 1fr; } .bd-title { font-size: 20px; } }

/* =========================================================================
   VANDAAG-VIEW — actie-dashboard met pulse-data (audit-rapport 2026-04-30).
   Cockpit-look: light bg, witte cards, blauw primair, hover-shadow.
   =========================================================================== */
.vd-page { max-width: 1320px; margin: 0 auto; padding: 4px 2px 40px; font-family: var(--font-sans); }

.vd-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 6px 0 18px; }
.vd-title { font-size: 28px; font-weight: 700; margin: 0; color: #132033; line-height: 1.1; }
.vd-sub { color: #5f7188; font-size: 13px; margin-top: 4px; }

/* Quick-action-bar */
.vd-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vd-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 10px;
  background: #1f5fff; color: white;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  min-height: 40px;
  transition: background 120ms;
}
.vd-action:hover { background: #1846c2; }
.vd-action-emoji { font-size: 15px; }

/* KPI-grid: 6 cards, klikbaar, kleur-coded */
.vd-kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 18px; }
.vd-kpi {
  display: block; padding: 16px 18px; background: white; border: 1px solid #dde4ee;
  border-radius: 12px; cursor: pointer; text-decoration: none; color: inherit;
  transition: all 140ms;
}
.vd-kpi:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(31,95,255,0.10); border-color: #1f5fff; }
.vd-kpi-value { font-size: 28px; font-weight: 700; color: #132033; line-height: 1; }
.vd-kpi-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8ea0b7; margin-top: 8px; }
.vd-kpi-sub { font-size: 11px; color: #5f7188; margin-top: 2px; }
.vd-kpi-red    { border-left: 3px solid #dc2626; }
.vd-kpi-red    .vd-kpi-value { color: #991b1b; }
.vd-kpi-amber  { border-left: 3px solid #d97706; }
.vd-kpi-amber  .vd-kpi-value { color: #92400e; }
.vd-kpi-green  { border-left: 3px solid #16a34a; }
.vd-kpi-blue   { border-left: 3px solid #1f5fff; }
.vd-kpi-blue   .vd-kpi-value { color: #1e40af; }
.vd-kpi-gray   { border-left: 3px solid #cbd5e1; }

/* Top-3 lists onder KPIs */
.vd-toplists { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin: 6px 0 14px; }
.vd-list-card { background: white; border: 1px solid #dde4ee; border-radius: 12px; padding: 14px 16px; }
.vd-list-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #8ea0b7; margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.vd-list-count {
  background: #f0f4f9; color: #5f7188; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0;
}
.vd-list-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.vd-list-table th { text-align: left; padding: 6px 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8ea0b7; border-bottom: 1px solid #f0f4f9; }
.vd-list-table td { padding: 7px 6px; border-bottom: 1px solid #f0f4f9; }
.vd-list-table tr:last-child td { border-bottom: 0; }
.vd-empty { color: #8ea0b7; font-size: 12px; padding: 12px 0; text-align: center; }

@media (max-width: 1100px) { .vd-kpi-grid { grid-template-columns: repeat(3, 1fr); } .vd-toplists { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .vd-kpi-grid { grid-template-columns: repeat(2, 1fr); } .vd-action { width: 100%; justify-content: center; } .vd-header { flex-direction: column; align-items: stretch; } }

/* =========================================================================
   KPI-fiche als clickable filter — generieke component (UX-fix 01/05).
   Werkt op alle views (lopende-taken, NBB, BTW, PA, ...).
   =========================================================================== */
.kpi-grid-clickable .kpi {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: rgba(44, 74, 62, 0.18);
  transition: transform 120ms, box-shadow 120ms, border-color 120ms;
  position: relative;
}
.kpi-grid-clickable .kpi:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(44, 74, 62, 0.10);
}
.kpi-grid-clickable .kpi:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
/* Active state: forest-green ring + bovenrand-accent */
.kpi-grid-clickable .kpi.kpi-active {
  border: 2px solid var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(44, 74, 62, 0.18), 0 4px 14px rgba(44, 74, 62, 0.15);
}
.kpi-grid-clickable .kpi.kpi-active::after {
  content: '✓';
  position: absolute;
  top: 6px; right: 8px;
  background: var(--brand); color: white;
  font-size: 11px; font-weight: 700;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* Filter-actief-chip boven de tabel */
.kpi-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-bg);
  color: var(--brand);
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}
.kpi-filter-chip-x {
  background: transparent;
  border: 0;
  color: var(--brand);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  min-height: 22px;
}
.kpi-filter-chip-x:hover {
  background: rgba(44, 74, 62, 0.12);
}

/* =========================================================================
   GLOBALE UI-AUDIT FIXES (P0 sweep 01/05).
   Touch-targets ≥44px op alle buttons/links + horizontale tabel-scroll
   zodat alle views ineens iPhone-bruikbaar worden.
   =========================================================================== */

/* Touch-target minimum (Apple HIG = 44px) — geldt op alle interactive elements */
@media (hover: none) and (pointer: coarse) {
  button, .btn, .sb-link, .nav-item, a.btn, input[type="checkbox"], input[type="radio"] {
    min-height: 36px;
    min-width: 36px;
  }
  button.sm, .btn.sm, .btn.xs, button.xs {
    min-height: 32px;
  }
  /* Primaire CTA's = full 44px */
  .btn.primary, button.primary {
    min-height: 44px;
    padding: 10px 16px;
  }
}

/* Tabel-overflow-x als safety-net voor alle views met dense .tbl */
.tbl, table.tbl {
  width: 100%;
}
.card-body.dense, .card-body {
  -webkit-overflow-scrolling: touch;
}
/* Wrapper rond elke tabel-card: scroll horizontaal i.p.v. wrap op smal scherm */
@media (max-width: 720px) {
  .card-body table.tbl, .card-body > table.tbl,
  div.card div.card-body { overflow-x: auto; }
  table.tbl { min-width: 640px; font-size: 12px; }
  table.tbl th, table.tbl td { padding: 6px 8px; white-space: nowrap; }
}

/* Generieke sortable-th hint (visuele cue: header is clickable) */
.tbl th[onclick], th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
}
.tbl th[onclick]::after, th.sortable::after {
  content: '↕';
  margin-left: 4px;
  font-size: 9px;
  opacity: 0.35;
}
.tbl th[onclick]:hover::after, th.sortable:hover::after {
  opacity: 0.7;
}

/* =========================================================================
   MOBILE-FIRST OVERHAUL (≤600px) — 01/05.
   - Tap-targets ≥48px overal
   - Tabellen → kaarten (geen horizontaal scrollen meer)
   - Sticky topbar + bottom-tab-bar voor primaire acties (duim-bereik)
   - Full-screen drawer/modal i.p.v. 50% slide-in
   - Form-inputs 16px (geen iOS auto-zoom) + label-above
   - Skeleton-loading + leesbare typografie
   =========================================================================== */

@media (max-width: 600px) {
  /* ────────────────── A. Tap-targets ≥48px ────────────────── */
  button, .btn, a.btn, .sb-link, .nav-item, .vd-action, .vd-kpi, .kpi,
  .bd-tab, .bd-q-pill, .bd-action, button.xs, .btn.xs, button.sm, .btn.sm,
  .bd-pill[onclick], .pill[onclick], select, input[type="checkbox"], input[type="radio"] {
    min-height: 48px !important;
  }
  button.xs, .btn.xs { min-height: 44px !important; padding: 8px 12px !important; }
  /* Filter-chip xs stays compact, 36px is OK voor remove-buttons */
  .kpi-filter-chip-x { min-height: 36px !important; min-width: 36px !important; }

  /* ────────────────── B. Body typografie ≥15px ────────────────── */
  body { font-size: 15px; line-height: 1.55; }
  h1, .page-title, .vd-title, .bd-title { font-size: 22px !important; line-height: 1.25; }
  h2, h3 { font-size: 17px; }
  .small, .muted.small { font-size: 13px; }
  .kpi-label, .vd-kpi-label, .bd-meta-label { font-size: 12px !important; }

  /* ────────────────── C. Form-inputs anti-zoom ────────────────── */
  input, select, textarea {
    font-size: 16px !important;
    min-height: 48px;
    padding: 10px 14px !important;
  }
  textarea { min-height: 96px; }
  label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }

  /* ────────────────── D. Tabellen → kaarten (table-as-cards) ─────────────────
     Trick: elke tr wordt een card-block, td wordt label/value-pair.
     Vereist `data-label="…"` op td's voor mooie weergave (niet altijd aanwezig);
     fallback: gewoon stack. Werkt voor de density-tables zonder JS-wijziging. */
  .card-body table.tbl,
  table.tbl[data-mobile-cards="true"] {
    display: block;
    background: transparent;
    min-width: 0 !important;
  }
  .card-body table.tbl thead,
  table.tbl[data-mobile-cards="true"] thead {
    display: none;
  }
  .card-body table.tbl tbody,
  table.tbl[data-mobile-cards="true"] tbody {
    display: block;
  }
  .card-body table.tbl tbody tr,
  table.tbl[data-mobile-cards="true"] tbody tr {
    display: block;
    background: white;
    border: 1px solid #dde4ee !important;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .card-body table.tbl tbody td,
  table.tbl[data-mobile-cards="true"] tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    font-size: 13px;
  }
  /* Eerste td = title-rij (groter, geen split) */
  .card-body table.tbl tbody td:first-child {
    display: block;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 6px;
    padding-bottom: 6px !important;
    border-bottom: 1px solid #f0f4f9 !important;
    color: #132033;
  }

  /* ────────────────── E. Sticky topbar + main padding voor bottom-tab ────── */
  #topbar {
    position: sticky !important;
    top: 0; left: 0; right: 0;
    z-index: 40;
    background: white !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  #content { padding-bottom: 90px !important; /* ruimte voor bottom-tab-bar */ }

  /* ────────────────── F. Bottom-tab-bar (duim-bereik) ────────────────── */
  #mobile-bottom-tabs {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: white;
    border-top: 1px solid #dde4ee;
    z-index: 60;
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
  }
  #mobile-bottom-tabs .mbt-item {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    text-decoration: none;
    color: #5f7188;
    font-size: 11px;
    font-weight: 500;
    min-height: 56px;
    -webkit-tap-highlight-color: rgba(44,74,62,0.18);
  }
  #mobile-bottom-tabs .mbt-item.active {
    color: var(--brand);
    font-weight: 700;
  }
  #mobile-bottom-tabs .mbt-emoji {
    font-size: 22px;
    line-height: 1;
  }

  /* ────────────────── G. Full-screen drawer/modal ────────────────── */
  .drawer, .drawer-panel, [class*="drawer"] > div:not([class*="overlay"]),
  #mp-drawer-root .drawer, #drawer-root .drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  /* ────────────────── H. KPI-grid 2 cols + filter-chip larger tap ────────── */
  .kpi-grid, .vd-kpi-grid, .kpi-grid-clickable {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  .kpi, .vd-kpi {
    padding: 14px 12px !important;
    min-height: 88px;
  }

  /* ────────────────── I. Hide bottom-tab op desktop ────────────────── */
}
@media (min-width: 601px) {
  #mobile-bottom-tabs { display: none !important; }
}

/* ────────────────── J. Skeleton-loading state ────────────────── */
@keyframes skeleton-pulse {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton-loader {
  background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: skeleton-pulse 1.4s linear infinite;
  border-radius: 6px;
  display: block;
}

/* =========================================================================
   PREVIEW-VIEWS — BLUEPRINT-MOBILE + BLUEPRINT-DESKTOP demo styling.
   Routes: #preview/vandaag-mobile · #preview/vandaag-desktop.
   Bewust ge-isoleerd via .pv-* prefix — tast bestaande UI niet aan.
   =========================================================================== */

.pv-page { background: #FAF7F2; min-height: 100vh; font-family: var(--font-sans); color: #1F2421; }
.pv-page * { box-sizing: border-box; }
.pv-page .muted { color: #6E6A63; }
.pv-page .small { font-size: 12px; }
.pv-page .mono  { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.pv-page .num   { text-align: right; font-variant-numeric: tabular-nums; }

/* ───── MOBILE preview (393×852) — geforceerd in narrow card-stijl ───── */
.pv-mobile {
  max-width: 393px;
  margin: 0 auto;
  padding-bottom: 80px;
  border-left: 1px solid #E5DFD3;
  border-right: 1px solid #E5DFD3;
  position: relative;
}
.pv-mobile .pv-topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 12px;
  background: white; border-bottom: 1px solid #E5DFD3;
}
.pv-mobile .pv-title { font-family: var(--font-sans); font-size: 22px; font-weight: 600; margin: 0; }
.pv-mobile .pv-icon-btn {
  width: 48px; height: 48px;
  background: transparent; border: 0; font-size: 22px; cursor: pointer;
  border-radius: 8px;
}
.pv-mobile .pv-icon-btn:active { background: rgba(44,74,62,0.08); }

.pv-mobile .pv-filter-bar {
  position: sticky; top: 56px; z-index: 9;
  display: flex; gap: 6px; padding: 8px 12px;
  background: #FAF7F2; border-bottom: 1px solid #E5DFD3;
  overflow-x: auto;
}
.pv-mobile .pv-chip {
  height: 44px; padding: 0 16px;
  border: 1px solid #E5DFD3; background: white;
  border-radius: 999px; font-size: 14px; cursor: pointer;
  min-height: 44px; white-space: nowrap;
}
.pv-mobile .pv-chip--active {
  background: var(--brand); color: white; border-color: var(--brand);
}

.pv-mobile .pv-main { padding: 12px; }
.pv-mobile .pv-greeting { padding: 4px 0 12px; }
.pv-mobile .pv-greet-h { font-family: var(--font-sans); font-size: 22px; font-weight: 600; margin: 4px 0; }

.pv-mobile .pv-kpi-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 6px 0 16px;
}
.pv-mobile .pv-kpi {
  background: white; border: 1px solid #E5DFD3; border-radius: 12px;
  padding: 14px 12px; min-height: 88px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  cursor: pointer; text-align: left;
}
.pv-mobile .pv-kpi-value { font-size: 26px; font-weight: 700; color: #1F2421; line-height: 1; }
.pv-mobile .pv-kpi-label { font-size: 13px; font-weight: 600; color: #1F2421; margin-top: 6px; }
.pv-mobile .pv-kpi-sub   { font-size: 12px; color: #6E6A63; margin-top: 2px; }
.pv-mobile .pv-kpi--red    { border-left: 4px solid #C0392B; }
.pv-mobile .pv-kpi--amber  { border-left: 4px solid #D89B2A; }
.pv-mobile .pv-kpi--green  { border-left: 4px solid #2E8B57; }
.pv-mobile .pv-kpi--blue   { border-left: 4px solid #3A6DA8; }

.pv-mobile .pv-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #6E6A63; margin: 18px 0 8px;
}
.pv-mobile .pv-card {
  background: white; border: 1px solid #E5DFD3; border-radius: 12px;
  padding: 14px; margin-bottom: 10px;
  cursor: pointer;
}
.pv-mobile .pv-card-row1 {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  margin-bottom: 6px;
}
.pv-mobile .pv-card-naam { font-weight: 600; font-size: 16px; flex: 1; }
.pv-mobile .pv-card-row2 {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; margin-bottom: 8px;
}
.pv-mobile .pv-status-text { color: #6E6A63; font-size: 12px; text-align: right; }
.pv-mobile .pv-card-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pv-mobile .pv-btn-ghost {
  height: 44px; padding: 0 14px;
  background: transparent; color: var(--brand); border: 1px solid #E5DFD3;
  border-radius: 10px; font-size: 14px; font-weight: 600;
  cursor: pointer; min-height: 44px;
}
.pv-mobile .pv-btn-mini {
  width: 44px; height: 44px; min-height: 44px;
  background: transparent; border: 1px solid #E5DFD3;
  border-radius: 10px; font-size: 18px; cursor: pointer;
}
.pv-mobile .pv-pill {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
}
.pv-mobile .pv-pill--red    { background: #FBE7E4; color: #8E2A1F; }
.pv-mobile .pv-pill--amber  { background: #FDF3DC; color: #9E6F18; }
.pv-mobile .pv-pill--green  { background: #E6F4EC; color: #1F6640; }

.pv-mobile .pv-spacer-tabbar { height: 80px; }

.pv-mobile .pv-fab {
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom));
  right: 16px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--brand); color: white;
  border: 0; font-size: 22px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(44,74,62,0.30);
  z-index: 11;
}

.pv-mobile .pv-tabbar {
  position: fixed;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 393px;
  display: flex;
  background: white;
  border-top: 1px solid #E5DFD3;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 12;
}
.pv-mobile .pv-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 8px 0;
  text-decoration: none; color: #6E6A63;
  font-size: 11px; font-weight: 500;
  min-height: 56px;
}
.pv-mobile .pv-tab--active { color: var(--brand); font-weight: 700; }
.pv-mobile .pv-tab-emoji { font-size: 22px; line-height: 1; }

/* ───── DESKTOP preview (1440×900) — 3-pane shell ───── */
.pv-desktop { background: #FAF7F2; }
.pv-desktop .pv-shell {
  display: grid;
  grid-template-columns: 280px 1fr 480px;
  height: calc(100vh - 60px);
  min-height: 800px;
}

/* Sidebar */
.pv-desktop .pv-sidebar {
  background: #1A2D25; color: rgba(255,255,255,0.7);
  display: flex; flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid #14241D;
}
.pv-desktop .pv-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 24px 20px 12px;
}
.pv-desktop .pv-brand-mark {
  width: 40px; height: 40px;
  background: var(--brand); color: white;
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
}
.pv-desktop .pv-brand-name { color: white; font-weight: 700; font-size: 14px; }
.pv-desktop .pv-brand-sub { color: rgba(255,255,255,0.45); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }

.pv-desktop .pv-nav { flex: 1; padding: 8px 12px; }
.pv-desktop .pv-nav-section {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  padding: 16px 10px 6px;
}
.pv-desktop .pv-nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px;
  color: rgba(255,255,255,0.7);
  text-decoration: none; font-size: 14px;
  border-radius: 8px;
}
.pv-desktop .pv-nav-item:hover { background: rgba(255,255,255,0.06); color: white; }
.pv-desktop .pv-nav-item--active { background: var(--brand); color: white; font-weight: 600; }
.pv-desktop .pv-badge {
  background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.8);
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  min-width: 26px; text-align: center;
}
.pv-desktop .pv-nav-item--active .pv-badge { background: rgba(255,255,255,0.25); color: white; }
.pv-desktop .pv-badge--red    { background: #C0392B; color: white; }
.pv-desktop .pv-badge--amber  { background: #D89B2A; color: white; }
.pv-desktop .pv-badge--blue   { background: #3A6DA8; color: white; }
.pv-desktop .pv-nav-recent {
  display: flex; flex-direction: column;
  padding: 6px 12px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  border-radius: 6px;
  font-size: 12px;
}
.pv-desktop .pv-nav-recent:hover { background: rgba(255,255,255,0.04); }
.pv-desktop .pv-nav-recent strong { color: white; font-size: 13px; }
.pv-desktop .pv-nav-recent .small { font-size: 11px; color: rgba(255,255,255,0.5); }

.pv-desktop .pv-sidebar-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.pv-desktop .pv-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}
.pv-desktop .pv-fname { color: white; font-size: 13px; font-weight: 600; }

/* Content */
.pv-desktop .pv-content {
  overflow-y: auto;
  padding: 24px 32px;
}
.pv-desktop .pv-content-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 20px;
}
.pv-desktop .pv-h1 { font-family: var(--font-sans); font-size: 26px; font-weight: 700; margin: 0; }
.pv-desktop .pv-h2 { font-family: var(--font-sans); font-size: 18px; font-weight: 600; margin: 0; }
.pv-desktop .pv-h3 { font-family: var(--font-sans); font-size: 18px; font-weight: 700; margin: 4px 0; color: #1F2421; }
.pv-desktop .pv-h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6E6A63; margin: 16px 0 6px; }

.pv-desktop .pv-toolbar { display: flex; align-items: center; gap: 12px; }
.pv-desktop .pv-density {
  display: inline-flex; gap: 0;
  background: white; border: 1px solid #E5DFD3; border-radius: 8px;
  height: 32px; overflow: hidden;
}
.pv-desktop .pv-density span {
  padding: 0 12px; line-height: 32px; font-size: 12px; cursor: pointer;
  color: #6E6A63;
}
.pv-desktop .pv-density span[aria-pressed="true"] { background: var(--brand); color: white; }
.pv-desktop .pv-btn {
  height: 32px; padding: 0 14px;
  background: white; border: 1px solid #E5DFD3;
  border-radius: 8px; font-size: 13px; cursor: pointer;
  color: #1F2421;
}
.pv-desktop .pv-btn--primary { background: #C67B5C; color: white; border-color: #C67B5C; font-weight: 600; }
.pv-desktop .pv-btn-ghost {
  height: 28px; padding: 0 10px;
  background: transparent; border: 0;
  color: var(--brand); cursor: pointer; font-size: 12px; font-weight: 600;
}
.pv-desktop .pv-kbd-hint { font-size: 12px; color: #6E6A63; }
.pv-desktop kbd {
  display: inline-block;
  min-width: 18px; padding: 1px 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: #1F2421; background: #EFEAE2;
  border: 1px solid #C9C2B8; border-bottom-width: 2px;
  border-radius: 3px;
  margin: 0 2px;
}

.pv-desktop .pv-kpi-row {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  margin-bottom: 20px;
}
.pv-desktop .pv-kpi {
  background: white; border: 1px solid #E5DFD3; border-radius: 10px;
  padding: 12px 14px; cursor: pointer; text-align: left;
}
.pv-desktop .pv-kpi:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06); }
.pv-desktop .pv-kpi-value { font-size: 22px; font-weight: 700; line-height: 1; }
.pv-desktop .pv-kpi-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6E6A63; margin-top: 8px; }
.pv-desktop .pv-kpi-sub   { font-size: 11px; color: #6E6A63; margin-top: 2px; }
.pv-desktop .pv-kpi--red    { border-left: 3px solid #C0392B; }
.pv-desktop .pv-kpi--amber  { border-left: 3px solid #D89B2A; }
.pv-desktop .pv-kpi--green  { border-left: 3px solid #2E8B57; }
.pv-desktop .pv-kpi--blue   { border-left: 3px solid #3A6DA8; }
.pv-desktop .pv-kpi--gray   { border-left: 3px solid #C9C2B8; }

.pv-desktop .pv-section-head {
  display: flex; justify-content: space-between; align-items: center;
  margin: 12px 0 10px;
}
.pv-desktop .pv-section-tools { display: flex; align-items: center; gap: 12px; }
.pv-desktop .pv-search {
  height: 32px; padding: 0 10px;
  border: 1px solid #E5DFD3; border-radius: 8px; font-size: 13px;
  width: 240px; background: white;
}

.pv-desktop .pv-tbl {
  width: 100%; background: white; border: 1px solid #E5DFD3; border-radius: 10px;
  border-collapse: separate; border-spacing: 0;
  font-size: 13px; line-height: 1.4;
}
.pv-desktop .pv-tbl thead th {
  text-align: left; padding: 10px 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #6E6A63;
  border-bottom: 1px solid #E5DFD3;
  background: #FAF7F2;
}
.pv-desktop .pv-tbl tbody td {
  padding: 8px 14px; border-bottom: 1px solid #F4EFE6;
  height: 32px;
}
.pv-desktop .pv-tbl tbody tr:hover { background: rgba(44,74,62,0.04); }
.pv-desktop .pv-tbl tbody tr.pv-tr--selected {
  background: rgba(44,74,62,0.10);
  box-shadow: inset 3px 0 0 var(--brand);
}
.pv-desktop .pv-pill {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px;
  border-radius: 999px; font-size: 11px; font-weight: 600;
}
.pv-desktop .pv-pill--red    { background: #FBE7E4; color: #8E2A1F; }
.pv-desktop .pv-pill--amber  { background: #FDF3DC; color: #9E6F18; }

/* Slide-out (aside) */
.pv-desktop .pv-aside {
  background: white;
  border-left: 1px solid #E5DFD3;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.pv-desktop .pv-aside-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px 20px;
  border-bottom: 1px solid #E5DFD3;
}
.pv-desktop .pv-aside-head .pv-icon-btn {
  width: 32px; height: 32px;
  background: transparent; border: 0; font-size: 16px; cursor: pointer;
  border-radius: 6px;
}
.pv-desktop .pv-aside-body { padding: 16px 20px; }
.pv-desktop .pv-info-row {
  display: flex; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid #F4EFE6;
  font-size: 13px;
}
.pv-desktop .pv-blocker {
  background: #FBE7E4; border-left: 3px solid #C0392B;
  padding: 10px 12px; border-radius: 4px;
  font-size: 12px; color: #8E2A1F;
  margin-bottom: 6px;
}
.pv-desktop .pv-next {
  background: #FDF3DC; border-left: 3px solid #D89B2A;
  padding: 10px 12px; border-radius: 4px;
  font-size: 12px; color: #9E6F18;
}
.pv-desktop .pv-actions { display: flex; flex-direction: column; gap: 6px; }
.pv-desktop .pv-actions .pv-btn { text-align: left; }
.pv-desktop .pv-history { font-size: 12px; }
.pv-desktop .pv-hist-row {
  display: flex; justify-content: space-between;
  padding: 4px 0; border-bottom: 1px solid #F4EFE6;
}