/* ══════════════════════════════════════════════════════════════
   Visstick Admin — gedeelde stylesheet
   Gebaseerd op Visstick AI Design System v2.0 (blue refresh)
   Bron van waarheid voor kleuren, radii, focus en dark mode.
   ══════════════════════════════════════════════════════════════ */
@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 design system) ── */
  --blue-900:#0a1d3a;
  --blue-800:#11325f;
  --blue-700:#1a4789;
  --blue-600:#1e5fb4;
  --blue-500:#3a7ed4;
  --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;

  /* ── Semantische oppervlakken & tekst ── */
  --bg-page:#f4f5f7;
  --bg-card:#ffffff;
  --bg-subtle:var(--grey-50);
  --bg-mute:var(--grey-100);
  --bg-inverse:var(--blue-900);
  --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);
  --border-soft:var(--grey-100);

  /* ── Statuskleuren ── */
  --success:#16a34a;
  --success-bg:#dcfce7;
  --success-fg:#166534;
  --danger:#d93025;
  --danger-bg:#fdecea;
  --danger-fg:#b3261e;
  --warning:#d97706;
  --warning-bg:#fef3c7;
  --warning-fg:#92400e;
  --info:var(--blue-600);
  --info-bg:var(--blue-100);

  /* ── Radii ── */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-pill:999px;

  /* ── Typografie ── */
  --heading-font:'Geist',system-ui,sans-serif;
  --body-font:'Geist',system-ui,sans-serif;
  --display-font:'Instrument Serif',serif;

  /* ── Legacy-aliassen (v1-namen die in de pagina's voorkomen) ── */
  --accent:var(--blue-600);
  --accent-hover:var(--blue-700);
  --accent-a10:rgba(30,95,180,0.08);
  --brown:var(--blue-900);      /* historische naam; is blauw */
  --brown-soft:var(--blue-50);
  --text-muted:var(--fg-tertiary);
  --card-shadow:0 2px 12px rgba(0,0,0,0.07);
  --sidebar-w:240px;
}

/* ── Dark mode ─────────────────────────────────────────────── */
[data-theme="dark"]{
  --bg-page:#0b0f17;
  --bg-card:#121826;
  --bg-subtle:#161d2c;
  --bg-mute:#1c2435;
  --bg-inverse:var(--blue-800);
  --grey-50:#161d2c;
  --grey-100:#1c2435;
  --grey-200:#2a3348;
  --grey-300:#3a455e;
  --fg-primary:#eef1f7;
  --fg-secondary:#a7b0c2;
  --fg-tertiary:#7d8699;
  --fg-faint:#5a6274;
  --border-color:#252e42;
  --border-soft:#1c2435;
  --brown:#dce7f6;            /* --brown wordt vooral als tekstkleur gebruikt */
  --brown-soft:#1a2436;
  --accent-a10:rgba(90,150,220,0.16);
  --card-shadow:0 2px 12px rgba(0,0,0,0.45);
  --success-bg:#102b1b;  --success-fg:#6ee7a0;
  --danger-bg:#331514;   --danger-fg:#f2a099;
  --warning-bg:#332608;  --warning-fg:#fbbf24;
  --info-bg:#14263f;
  color-scheme:dark;
}
[data-theme="dark"] .sb-toggle:hover{background:var(--bg-mute)!important;color:var(--fg-primary)!important;}
[data-theme="dark"] .user-card:hover{background:var(--bg-mute);}
/* Plekken waar --brown als achtergrond dient: in dark op blauw zetten */
[data-theme="dark"] .user-avatar,
[data-theme="dark"] .nav-bot-dot{background:var(--blue-600);color:#fff;}
[data-theme="dark"] .preview-col{background:var(--bg-mute);}
[data-theme="dark"] img.logo-dark-invert{filter:brightness(0) invert(1);}

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

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

/* ── Statistieken in Instrument Serif italic (v2-signature) ── */
.stat-val{font-family:var(--display-font)!important;font-style:italic;font-weight:400!important;}

/* ── Inline SVG-iconen ─────────────────────────────────────── */
.ic{width:16px;height:16px;flex-shrink:0;display:inline-block;vertical-align:-3px;}
.ic-lg{width:20px;height:20px;}
.ic-xl{width:34px;height:34px;}

/* ══════════════════════════════════════════════════════════════
   Gedeelde shell — header, sidebar en hoofdkolom
   Stond tot 17 aug 2026 in het <style>-blok van elke pagina, in
   maximaal acht varianten. Dit is de canonieke versie; pagina's
   die hier echt van afwijken houden hun eigen regel in hun eigen
   <style>, die later in de cascade staat en dus wint.
   ══════════════════════════════════════════════════════════════ */

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:66px;
  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 - 66px);
  position:fixed;top:66px;left:0;bottom:0;
  display:flex;flex-direction:column;
  border-right:1px solid var(--border-color);
  z-index:100;
}
.sidebar-nav{flex:1;padding:8px 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:66px;
}
.topbar{
  background:var(--bg-card);
  border-bottom:1px solid var(--border-color);
  padding:0 32px;height:66px;
  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;}

/* ── 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;

  --cta:var(--orange-600);
  --cta-hover:var(--orange-700);
  --cta-press:var(--orange-800);
  --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;}
  .card-header,.tbl-hd{padding:14px 16px;}
  .content{padding:16px 12px !important;}
}