/* ══════════════════════════════════════════════════════════════
   Visstick klantomgeving — gedeelde stylesheet
   Zelfde opzet als admin/admin.css, gebaseerd op Visstick AI
   Design System v2.0 (blue refresh). Bron van waarheid voor
   kleuren, letters, radii, focus, donkere modus en de shell.

   Pagina's die echt afwijken houden hun eigen regel in hun eigen
   <style>; dat blok komt later in de cascade en wint dus.
   ══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  /* ── Blue ramp (identiek aan tokens.css) ── */
  --blue-900:#0a1d3a;
  --blue-800:#11325f;
  --blue-700:#1a4789;
  --blue-600:#1e5fb4;
  --blue-500:#3a7ed4;
  --blue-300:#9ec5fe;
  --blue-100:#e6f0fb;
  --blue-50:#f3f7fc;

  /* ── Grey ramp (koel) ── */
  --grey-900:#0e1320;
  --grey-800:#1f2533;
  --grey-700:#3a4255;
  --grey-600:#5a6274;
  --grey-500:#818897;
  --grey-400:#a7adb9;
  --grey-300:#cdd1da;
  --grey-200:#e3e6ec;
  --grey-100:#eef0f4;
  --grey-50:#f7f8fa;

  /* ── Letters ── */
  --heading-font:'Geist',system-ui,-apple-system,sans-serif;
  --body-font:'Geist',system-ui,-apple-system,sans-serif;
  --display-font:'Instrument Serif','Times New Roman',serif;

  /* ── Semantische oppervlakken & tekst ── */
  --bg-page:#f4f5f7;
  --bg-card:#ffffff;
  --bg-subtle:var(--grey-50);
  --bg-mute:var(--grey-100);
  --fg-primary:var(--grey-900);
  --fg-secondary:var(--grey-600);
  --fg-tertiary:var(--grey-500);
  --fg-faint:var(--grey-400);
  --border-color:var(--grey-200);

  /* ── Accent ── */
  --accent:var(--blue-600);
  --accent-hover:var(--blue-700);
  --accent-a10:rgba(30,95,180,.10);
  --accent-a30:rgba(30,95,180,.30);

  /* ── Status ── */
  --success:#1b7a3f;
  --success-bg:#e9f4ed;
  --success-fg:#1b7a3f;
  --danger:#b3261e;
  --danger-bg:#fbeceb;
  --warning-bg:#fbf1e0;
  --warning-fg:#9c5c00;

  /* ── Vorm ── */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius:var(--radius-md);
  --card-shadow:0 2px 12px rgba(10,29,58,.07);

  --sidebar-w:240px;
  --header-h:66px;

  /* ── Namen uit v1 die nog in de pagina's staan ──
     --brown was het bruin van de oude huisstijl en is nu het diepe
     blauw. Zo hoeven 106 losse verwijzingen niet in één keer om. */
  --brown:var(--blue-900);
  --brown-soft:var(--blue-50);

  /* Zachte knop (bv. "Bewerken") en het initialenblokje van een agent.
     Losse tokens, want --blue-50 en --blue-100 blijven in beide thema's licht. */
  --btn-soft-bg:var(--blue-50);
  --btn-soft-border:var(--blue-100);
  --btn-soft-bg-hover:var(--blue-100);
  --avatar-bg:var(--blue-900);
  --avatar-fg:var(--blue-300);
  /* Gevuld vlak met lichte tekst: actieve tab, plan-badge, toast, eigen bubbel. */
  --fill-bg:var(--blue-900);
  --fill-fg:#ffffff;
  --dark:var(--blue-900);
  --skeleton-light:var(--grey-100);
  --skeleton-mid:var(--grey-200);
  --skeleton-dark:var(--grey-300);
}

[data-theme="dark"]{
  --bg-page:#070b13;
  --bg-card:#0e1522;
  --bg-subtle:#0e1522;
  --bg-mute:#161f30;
  --fg-primary:#e9edf4;
  --fg-secondary:#aeb6c4;
  --fg-tertiary:#8a93a3;
  --fg-faint:#6b7382;
  --border-color:rgba(255,255,255,.13);

  --grey-50:#0e1522;
  --grey-100:#161f30;
  --grey-200:rgba(255,255,255,.13);

  --accent:#79aae6;
  --accent-hover:#9ec5fe;
  --accent-a10:rgba(30,95,180,.20);

  --brown:#e9edf4;
  --brown-soft:rgba(30,95,180,.16);
  --btn-soft-bg:rgba(30,95,180,.22);
  --btn-soft-border:rgba(158,197,254,.28);
  --btn-soft-bg-hover:rgba(30,95,180,.38);
  --avatar-bg:var(--blue-600);
  --avatar-fg:#eaf2fd;
  --fill-bg:var(--blue-600);
  --fill-fg:#ffffff;
  --success-bg:rgba(27,122,63,.18);
  --success-fg:#6ac48f;
  --danger:#f0918a;
  --danger-bg:rgba(179,38,30,.18);
  --warning-bg:rgba(181,107,0,.18);
  --warning-fg:#dfa758;
  --card-shadow:0 2px 12px rgba(0,0,0,.45);

  --skeleton-light:#161f30;
  --skeleton-mid:#1f2a3d;
  --skeleton-dark:#2a3a52;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ── Focus (toetsenbord-navigatie) ─────────────────────────── */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}

/* ── Signature serif-accent (Instrument Serif italic) ──────── */
.topbar-title em,
.page-title em,
.page-header h1 em,
.welcome h1 em,
.vs-em{
  font-family:var(--display-font);
  font-style:italic;
  font-weight:400;
  font-size:1.12em;
  color:var(--cta);
}

/* ══════════════════════════════════════════════════════════════
   Gedeelde shell — header, sidebar en hoofdkolom
   ══════════════════════════════════════════════════════════════ */

body{
  font-family:var(--body-font);
  background:var(--bg-page);
  color:var(--fg-primary);
  display:flex;
  min-height:100vh;
}

/* ── App-header ────────────────────────────────────────────── */
.app-header{
  position:fixed;top:0;left:0;right:0;
  height:var(--header-h);
  background:var(--bg-card);
  padding:0 24px;
  display:flex;align-items:center;
  z-index:200;
  border-bottom:1px solid var(--border-color);
}
.header-logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex-shrink:0;}
.header-logo img{width:34px;height:34px;object-fit:contain;flex-shrink:0;}
.logo-text{display:flex;flex-direction:column;gap:2px;}
.logo-name{
  font-family:var(--heading-font);
  font-size:14px;font-weight:700;
  color:var(--brown);
  letter-spacing:.2px;line-height:1.2;
  text-transform:uppercase;
}
.logo-sub{
  font-family:var(--body-font);
  font-size:10.5px;font-weight:500;
  color:var(--fg-tertiary);
  line-height:1.2;
}
.header-avatar-btn{
  margin-left:auto;
  width:36px;height:36px;border-radius:50%;
  background:var(--accent);color:#fff;border:none;
  font-family:var(--heading-font);font-size:12px;font-weight:700;
  letter-spacing:.5px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.header-avatar-btn:hover{opacity:.85;}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);
  background:var(--bg-card);
  height:calc(100vh - var(--header-h));
  position:fixed;top:var(--header-h);left:0;bottom:0;
  display:flex;flex-direction:column;
  border-right:1px solid var(--border-color);
  z-index:100;
}
.sidebar-nav{flex:1;padding:10px 0;overflow-y:auto;}
.sidebar-footer{border-top:1px solid var(--grey-100);padding:10px 0 8px;flex-shrink:0;}

.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 20px;
  color:var(--fg-secondary);text-decoration:none;
  font-family:var(--body-font);font-size:13.5px;font-weight:500;
  transition:background .12s,color .12s;
  position:relative;
}
.nav-item:hover{background:var(--grey-50);color:var(--brown);}
.nav-item.active{color:var(--brown);background:var(--accent-a10);font-weight:600;}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:4px;bottom:4px;
  width:3px;background:var(--accent);border-radius:0 3px 3px 0;
}
.nav-icon{
  width:16px;height:16px;flex-shrink:0;opacity:.55;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .12s;
}
.nav-item.active .nav-icon,.nav-item:hover .nav-icon{opacity:1;}

/* ── Hoofdkolom ────────────────────────────────────────────── */
.main{
  margin-left:var(--sidebar-w);
  flex:1;
  display:flex;flex-direction:column;
  min-height:100vh;
  padding-top:var(--header-h);
}
.topbar{
  background:var(--bg-card);
  border-bottom:1px solid var(--border-color);
  padding:0 32px;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:0;z-index:50;flex-shrink:0;
}
.topbar-title{
  font-family:var(--heading-font);
  font-size:16px;font-weight:700;
  color:var(--brown);
}
.content{padding:32px;}

/* ── Kaarten en knoppen (voor de nieuwere pagina's) ────────── */
.card{
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  box-shadow:var(--card-shadow);
  overflow:hidden;
}
.card-header{padding:16px 24px;border-bottom:1px solid var(--border-color);}
.card-title{font-family:var(--heading-font);font-size:14.5px;font-weight:700;color:var(--fg-primary);}
.card-sub{font-size:12.5px;color:var(--fg-tertiary);margin-top:3px;}

.empty-state{padding:48px 24px;text-align:center;color:var(--fg-tertiary);font-size:13.5px;}
.empty-state strong{display:block;color:var(--fg-secondary);font-size:15px;margin-bottom:5px;font-family:var(--heading-font);}

.btn{
  background:var(--accent);color:#fff;border:none;
  border-radius:var(--radius-sm);padding:9px 18px;
  font-size:13.5px;font-weight:700;font-family:var(--body-font);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:background .15s;text-decoration:none;
}
.btn:hover{background:var(--accent-hover);}
.btn-soft{background:var(--brown-soft);color:var(--brown);}
.btn-soft:hover{background:var(--border-color);}

/* ── Wordmerk ──────────────────────────────────────────────
   Gelijk aan de header van visstick.ai: het visje naast
   "Visstick" in Instrument Serif italic met ".ai" in Geist.
   De rol (Beheer / Klantomgeving) staat er klein onder.     */
.wordmark{
  font-family:var(--display-font);
  font-style:italic;
  font-size:19px;
  line-height:1.05;
  color:var(--fg-primary);
  letter-spacing:-.01em;
  white-space:nowrap;
}
.wordmark span{
  font-family:var(--heading-font);
  font-style:normal;
  font-size:11.5px;
  font-weight:500;
  color:var(--accent);
  vertical-align:text-top;
  margin-left:1px;
}
.logo-role{
  font-family:var(--heading-font);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--fg-tertiary);
  line-height:1.2;
}

/* ══════════════════════════════════════════════════════════════
   Statistiekkaarten
   Stonden op de dashboards als gevulde verloopkaarten met witte
   tekst en elders als witte kaarten. Nu overal hetzelfde: wit
   vlak, dunne rand, het cijfer in Instrument Serif italic zoals
   .vs-stat-n op visstick.ai, en een zacht blauw vlakje om het
   icoon in plaats van een verloop.
   ══════════════════════════════════════════════════════════════ */
.stats-grid,.stats-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  margin-bottom:28px;
}
.stat-card{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:18px 20px;
  color:var(--fg-primary);
  box-shadow:none;
}
.stat-card-icon,.stat-icon{
  width:28px;height:28px;
  background:var(--accent-a10);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
  color:var(--accent);
  flex-shrink:0;
}
.stat-card-icon svg,.stat-icon svg{width:15px;height:15px;}
.stat-val,.stat-value{
  font-family:var(--display-font);
  font-style:italic;
  font-weight:400;
  font-size:32px;
  line-height:.95;
  color:var(--fg-primary);
  font-variant-numeric:tabular-nums;
  margin:0;
}
.stat-label{
  font-size:12.5px;
  color:var(--fg-tertiary);
  margin-top:6px;
  opacity:1;
}

/* ══════════════════════════════════════════════════════════════
   Gegevenslijsten
   Er zijn drie mechanismen in gebruik — een echte <table>, en twee
   soorten grid-rijen — met elk hun eigen maten, grijswaarden en
   randen. De indeling (grid-template-columns) blijft per pagina,
   want die verschilt echt; het uiterlijk komt hiervandaan.
   ══════════════════════════════════════════════════════════════ */
thead th,
.agents-table-header,
.kb-table-header,
.table-header-row{
  font-size:11px;
  font-weight:600;
  color:var(--fg-tertiary);
  letter-spacing:.8px;
  text-transform:uppercase;
  text-align:left;
  padding:12px 20px;
  background:var(--bg-subtle);
  border-bottom:1px solid var(--border-color);
}
tbody td,
.agent-row,
.kb-table-row{
  font-size:13.5px;
  padding:14px 20px;
  border-bottom:1px solid var(--grey-100);
  vertical-align:middle;
}
tbody tr:last-child td,
.agent-row:last-child,
.kb-table-row:last-child{border-bottom:none;}
tbody tr:hover,
.agent-row:hover,
.kb-table-row:hover{background:var(--grey-50);}

/* Getallen laten uitlijnen — anders dansen ze per rij. */
.num,td.num,.stat-val,.stat-value{font-variant-numeric:tabular-nums;}

/* ══════════════════════════════════════════════════════════════
   Oranje contrastkleur (huisstijl v2.1)
   Blauw draagt, oranje wijst. Blauw blijft de structurele kleur —
   navigatie, actieve staat, iconen, links, donkere vlakken. Oranje
   is voor actie: primaire knoppen en het italic serif-accent in
   titels, precies zoals op visstick.ai.

   Let op: --accent blijft hier bewust blauw, omdat die in deze
   apps de chrome aanstuurt (nav-rail, actieve staat, icoonvlakjes).
   De actiekleur heet --cta.
   ══════════════════════════════════════════════════════════════ */
:root{
  --orange-900:#5a1c08;
  --orange-800:#7a2810;
  --orange-700:#c44a14;
  --orange-600:#e85d1f;
  --orange-500:#ff7a3d;
  --orange-400:#ff9d6b;
  --orange-300:#ffb286;
  --orange-200:#ffd2b8;
  --orange-100:#ffe9d8;
  --orange-50:#fef6ef;

  /* Eén stap donkerder dan orange-600. Wit op #e85d1f haalt 3,5 en dat is te
     weinig om een knoplabel goed te lezen (4,5 is de ondergrens); op #c44a14
     is het 4,8. De hover en press schuiven mee, zodat de trap donkerder blijft
     lopen. Gemeten op 5 september 2026, geldt voor elke oranje knop hier. */
  --cta:var(--orange-700);
  --cta-hover:var(--orange-800);
  --cta-press:var(--orange-900);
  --cta-soft:var(--orange-100);
  --cta-fg:#ffffff;

  --radius-pill:999px;
}
[data-theme="dark"]{
  --cta:var(--orange-500);
  --cta-hover:var(--orange-400);
  --cta-soft:rgba(232,93,31,.18);
  --cta-fg:#1a0d05;
}

/* ══════════════════════════════════════════════════════════════
   Mobiel — onder 900px wordt de sidebar een lade
   De sidebar stond vast op 240px met de inhoud ernaast; op een
   scherm van 375 bleef daar 135px van over. Nu schuift hij over
   de inhoud heen, met een hamburger in de header.
   ══════════════════════════════════════════════════════════════ */
.nav-burger{
  display:none;
  width:38px;height:38px;
  margin-right:4px;margin-left:-6px;
  border:none;background:none;
  border-radius:var(--radius-md);
  cursor:pointer;
  align-items:center;justify-content:center;
  flex-shrink:0;
  color:var(--fg-secondary);
}
.nav-burger:hover{background:var(--grey-100);color:var(--fg-primary);}
.nav-burger svg{width:20px;height:20px;}

.nav-scrim{
  display:none;
  position:fixed;inset:var(--header-h) 0 0 0;
  background:rgba(10,29,58,.42);
  z-index:99;
  opacity:0;
  transition:opacity .22s ease;
}

@media (max-width:900px){
  .nav-burger{display:flex;}

  .sidebar{
    width:280px;
    transform:translateX(-100%);
    transition:transform .24s cubic-bezier(.4,0,.2,1);
    will-change:transform;
  }
  /* De ingeklapte staat is een desktopidee; op mobiel telt hij niet mee. */
  .sidebar.collapsed{width:280px;}
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .sb-toggle-text,
  .sidebar.collapsed .nav-soon{display:block !important;}
  .sidebar.collapsed .nav-item{
    padding:9px 20px !important;
    justify-content:flex-start !important;
    gap:10px !important;
  }
  .sidebar.collapsed .nav-item.active .nav-icon{
    background:none !important;width:16px !important;height:16px !important;
    color:var(--accent) !important;border-radius:0 !important;
  }
  .sidebar.collapsed .nav-item.active::before{display:block !important;}
  /* Inklappen heeft op mobiel geen betekenis. */
  .sb-toggle:not(.sb-theme){display:none !important;}

  body.nav-open .sidebar{
    transform:translateX(0);
    box-shadow:8px 0 32px rgba(10,29,58,.22);
  }
  body.nav-open .nav-scrim{display:block;opacity:1;}

  .main,
  .sidebar.collapsed ~ .main{margin-left:0 !important;}

  /* Een flex-kind krimpt niet onder zijn inhoud zonder min-width:0;
     zonder dit duwen brede knoppenbalken de pagina breder dan het scherm. */
  .main{min-width:0 !important;max-width:100% !important;}
  .content{min-width:0;max-width:100%;}
  .topbar-right{flex-wrap:wrap;row-gap:8px;min-width:0;}
  .topbar-left{min-width:0;}
  .topbar-title{min-width:0;overflow:hidden;text-overflow:ellipsis;}

  body.nav-open{overflow:hidden;}

  .content{padding:20px 16px;}
  .topbar{padding:0 16px;}
  .app-header{padding:0 14px;}
}

@media (prefers-reduced-motion:reduce){
  .sidebar{transition:none;}
  .nav-scrim{transition:none;}
}

/* ══════════════════════════════════════════════════════════════
   Mobiel — onder 700px
   Een aantal regels heeft !important nodig: de pagina-CSS staat later
   in de cascade met dezelfde specificiteit en zou anders winnen.
   Vier kolommen naast elkaar lezen niet op een telefoon. Tabellen
   worden kaartenlijsten met het kolomlabel ervoor, grids gaan naar
   één of twee kolommen, en tabbalken schuiven horizontaal.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:700px){
  .stats-grid,.stats-row{grid-template-columns:repeat(2,1fr) !important;gap:10px !important;}
  .stat-card{padding:14px 15px;}
  .stat-val,.stat-value{font-size:26px;}

  /* Tabellen → kaarten. De kolomkop komt uit data-label. */
  /* Alleen gegevenstabellen; juridische tabellen in Documenten
     blijven gewoon een tabel. */
  .table-card table{display:block;}
  .table-card thead{display:none;}
  .table-card tbody,.table-card tbody tr,.table-card tbody td{display:block;width:100%;}
  .table-card tbody tr{
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    padding:4px 0;
    margin-bottom:10px;
  }
  .table-card tbody td{
    border-bottom:none;
    padding:7px 14px;
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    text-align:right;
  }
  .table-card tbody td::before{
    content:attr(data-label);
    font-size:10.5px;font-weight:600;
    letter-spacing:.7px;text-transform:uppercase;
    color:var(--fg-tertiary);
    text-align:left;flex-shrink:0;
  }
  .table-card tbody td:empty{display:none;}

  /* Grid-rijen → gestapeld */
  .agents-table-header,.kb-table-header{display:none !important;}
  .agent-row,.kb-table-row{
    grid-template-columns:1fr !important;
    gap:6px !important;
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    margin-bottom:10px;
    padding:14px 16px;
  }
  .agent-actions{justify-content:flex-start !important;}

  /* Tabbalk schuift in plaats van te wikkelen */
  .tab-nav,.tabs{
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    max-width:100%;min-width:0;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .tab-nav::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none;}
  .tab-btn{white-space:nowrap;flex-shrink:0;}

  /* Topbar met een knop erin: laat de knop niet knellen */
  .topbar{gap:10px;}
  .topbar-btn{padding:8px 14px;font-size:12.5px;}


  /* Knoppenbalk en tabelkop mogen afbreken in plaats van knellen */
  .topbar{
    height:auto !important;min-height:var(--header-h);
    padding:10px 16px !important;
    flex-wrap:wrap;row-gap:8px;
    position:static;
  }
  .topbar-title{flex:1 0 auto;}
  .topbar-btn{white-space:nowrap;}
  .table-header,.tbl-hd,.card-header{
    flex-wrap:wrap;row-gap:10px;
  }
  .search-input{width:100% !important;}

  /* CTA-banner: de rechtergroep had flex-shrink:0, waardoor de tekst
     links tot één woord per regel werd geperst. Onder elkaar dus. */
  .upgrade-banner{
    flex-direction:column;
    align-items:stretch !important;
    gap:14px;
    padding:18px 18px !important;
  }
  .upgrade-banner > div:last-child{
    flex-wrap:wrap;
    justify-content:space-between;
    width:100%;
    gap:10px !important;
  }
  .upgrade-banner-text h3{font-size:16px;}
  .upgrade-banner-text p{font-size:13px;}
  .btn-upgrade{flex:1;justify-content:center;text-align:center;}

  /* De zwevende hint stond op top:64px en viel over de paginatitel.
     Onderaan hoort een nudge ook thuis. */
  .profile-hint{
    top:auto !important;
    bottom:14px !important;
    left:12px !important;right:12px !important;
    justify-content:center;
  }
  .card-header,.tbl-hd{padding:14px 16px;}
  .content{padding:16px 12px !important;}
}