/* TCO — huisstijl bovenop Bootstrap 5, licht en afgeleid van het logo */

:root {
  --tco-red: #d90638;
  --tco-red-soft: #fdecf0;
  --tco-red-line: #f6c3cf;
  --tco-navy: #0f0538;
  --tco-ink: #2a2447;
  --tco-muted: #6f6a86;
  --tco-bg: #f7f6fa;
  --tco-surface: #ffffff;
  --tco-line: #ebe9f2;
  --tco-lilac: #f1eff8;
  --tco-ok: #0f8a5f;
  --tco-ok-soft: #e7f6ef;
  --tco-radius: 14px;
  --tco-sidebar: 248px;
  --tco-sidebar-collapsed: 76px;

  --bs-body-font-family: "Lexend", system-ui, sans-serif;
  --bs-body-color: var(--tco-ink);
  --bs-body-bg: var(--tco-bg);
  --bs-border-color: var(--tco-line);
  --bs-link-color: var(--tco-red);
  --bs-link-hover-color: #b00530;
}

body {
  background: var(--tco-bg);
  color: var(--tco-ink);
  font-weight: 300;
  font-size: 0.95rem;
}

h1, h2, h3, h4, .fw-semibold { color: var(--tco-navy); font-weight: 500; }
h1 { font-size: 1.6rem; letter-spacing: -0.01em; }

/* ── Layout ─────────────────────────────── */

.app { display: flex; min-height: 100vh; }

.sidebar {
  position: sticky; top: 0;
  height: 100vh;
  width: var(--tco-sidebar);
  flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--tco-surface);
  border-right: 1px solid var(--tco-line);
  padding: 1.25rem 0.85rem;
  transition: width .2s ease;
  overflow: hidden;
}

.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: 1.75rem; padding: 0 .4rem;
}

/* het logo wordt bij een ingeklapte zijbalk bijgesneden tot het C-symbool */
.brand { display: block; overflow: hidden; width: 170px; transition: width .2s ease; }
.brand img { height: 27px; width: auto; display: block; }

.sidebar-toggle {
  border: 0; background: transparent; color: var(--tco-muted);
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
}
.sidebar-toggle:hover { background: var(--tco-lilac); color: var(--tco-navy); }

.nav-section { list-style: none; margin: 0; padding: 0; }
.nav-section + .nav-section { margin-top: .35rem; }

.nav-link-tco {
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem .75rem; border-radius: 10px;
  color: var(--tco-ink); text-decoration: none; white-space: nowrap;
  font-weight: 400;
}
.nav-link-tco i { font-size: 1.1rem; width: 1.25rem; text-align: center; color: var(--tco-muted); flex-shrink: 0; }
.nav-link-tco:hover { background: var(--tco-lilac); color: var(--tco-navy); }
.nav-link-tco.active { background: var(--tco-red-soft); color: var(--tco-red); }
.nav-link-tco.active i { color: var(--tco-red); }

.nav-sub { list-style: none; margin: .15rem 0 .35rem; padding: 0 0 0 1.4rem; }
.nav-sub .nav-link-tco { padding: .45rem .75rem; font-size: .9rem; }
.nav-sub .nav-link-tco.active { background: transparent; font-weight: 500; }

.sidebar-foot { margin-top: auto; border-top: 1px solid var(--tco-line); padding-top: .9rem; }
.sidebar-user { padding: .2rem .75rem .6rem; font-size: .82rem; color: var(--tco-muted); white-space: nowrap; }
.sidebar-user strong { color: var(--tco-navy); font-weight: 500; display: block; font-size: .9rem; }

.sidebar-collapsed .sidebar { width: var(--tco-sidebar-collapsed); }
.sidebar-collapsed .brand { width: 26px; }
.sidebar-collapsed .sidebar-head { flex-direction: column; gap: 1rem; }
.sidebar-collapsed .nav-label,
.sidebar-collapsed .sidebar-user { display: none; }
.sidebar-collapsed .nav-sub { padding-left: 0; }
.sidebar-collapsed .nav-link-tco { justify-content: center; padding: .6rem; }

.main { flex: 1; min-width: 0; padding: 2rem 2.5rem 3rem; }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.page-head .eyebrow {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tco-red); font-weight: 500; margin-bottom: .2rem;
}
.page-head h1 { margin: 0; }

/* ── Componenten ────────────────────────── */

.panel {
  background: var(--tco-surface);
  border: 1px solid var(--tco-line);
  border-radius: var(--tco-radius);
  padding: 1.5rem;
}
.panel-narrow { max-width: 560px; }

.btn { border-radius: 10px; font-weight: 400; padding: .5rem 1rem; }
.btn-tco { background: var(--tco-red); color: #fff; border: 1px solid var(--tco-red); }
.btn-tco:hover, .btn-tco:focus { background: #bf0532; border-color: #bf0532; color: #fff; }
.btn-soft { background: var(--tco-lilac); color: var(--tco-navy); border: 1px solid transparent; }
.btn-soft:hover { background: #e6e2f3; color: var(--tco-navy); }
.btn-ghost-danger { background: transparent; color: var(--tco-red); border: 1px solid var(--tco-red-line); }
.btn-ghost-danger:hover { background: var(--tco-red-soft); color: var(--tco-red); }

.form-control, .form-select {
  border-radius: 10px; border-color: var(--tco-line); background-color: #fcfcfe;
  padding: .6rem .85rem; color: var(--tco-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--tco-red-line);
  box-shadow: 0 0 0 .2rem var(--tco-red-soft);
  background-color: #fff;
}
.form-label { font-size: .85rem; color: var(--tco-muted); margin-bottom: .3rem; }
.form-check-input:checked { background-color: var(--tco-red); border-color: var(--tco-red); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem var(--tco-red-soft); border-color: var(--tco-red-line); }
.field-errors { color: var(--tco-red); font-size: .82rem; margin-top: .3rem; }
.form-text, .text-muted { color: var(--tco-muted) !important; }
.form-text ul { padding-left: 1rem; margin: .35rem 0 0; }

.table-tco { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-tco th {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tco-muted); font-weight: 500;
  padding: .75rem 1rem; border-bottom: 1px solid var(--tco-line);
}
.table-tco td { padding: .85rem 1rem; border-bottom: 1px solid var(--tco-line); vertical-align: middle; }
.table-tco tr:last-child td { border-bottom: 0; }
.table-tco tbody tr:hover td { background: #fbfaff; }
.table-tco a { color: var(--tco-navy); text-decoration: none; font-weight: 400; }
.table-tco a:hover { color: var(--tco-red); }
.table-wrap { padding: 0; overflow-x: auto; }

.pill {
  display: inline-block; padding: .2rem .65rem; border-radius: 999px;
  font-size: .78rem; font-weight: 400; background: var(--tco-lilac); color: var(--tco-navy);
}
.pill-ok { background: var(--tco-ok-soft); color: var(--tco-ok); }
.pill-off { background: var(--tco-red-soft); color: var(--tco-red); }

.search {
  display: flex; align-items: center; gap: .5rem;
  background: var(--tco-surface); border: 1px solid var(--tco-line);
  border-radius: 10px; padding: 0 .75rem;
}
.search input { border: 0; outline: 0; padding: .5rem 0; background: transparent; min-width: 220px; }

.empty {
  text-align: center; padding: 3.5rem 1rem; color: var(--tco-muted);
}
.empty .empty-icon {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 1rem;
  display: grid; place-items: center; font-size: 1.5rem;
  background: var(--tco-red-soft); color: var(--tco-red);
}
.empty h2 { font-size: 1.1rem; margin-bottom: .35rem; }

dl.details { display: grid; grid-template-columns: 160px 1fr; row-gap: .8rem; margin: 0; }
dl.details dt { color: var(--tco-muted); font-weight: 300; font-size: .88rem; }
dl.details dd { margin: 0; color: var(--tco-navy); }

.messages { margin-bottom: 1.25rem; }
.msg {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem; border-radius: 10px; margin-bottom: .5rem;
  background: var(--tco-lilac); color: var(--tco-navy); font-size: .9rem;
}
.msg-success { background: var(--tco-ok-soft); color: var(--tco-ok); }
.msg-error { background: var(--tco-red-soft); color: var(--tco-red); }
.msg-warning { background: #fff6e5; color: #8a5a00; }

/* ── Formulieren en filters ─────────────── */

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-section + .form-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--tco-line); }
.form-section h2 { font-size: 1rem; margin-bottom: 1rem; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.filters .form-control, .filters .form-select { width: auto; min-width: 150px; padding: .45rem .75rem; font-size: .88rem; }

.schijven { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .75rem; }
.schijf-label { font-size: .78rem; color: var(--tco-muted); margin-bottom: .25rem; }

.type-keuze { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.type-keuze a {
  display: block; padding: 1.5rem; text-decoration: none; color: var(--tco-navy);
  border: 1px solid var(--tco-line); border-radius: var(--tco-radius); background: var(--tco-surface);
}
.type-keuze a:hover { border-color: var(--tco-red-line); background: var(--tco-red-soft); }
.type-keuze strong { display: block; font-weight: 500; font-size: 1.1rem; margin-bottom: .25rem; }
.type-keuze span { color: var(--tco-muted); font-size: .88rem; }

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-tco tfoot td { font-weight: 500; color: var(--tco-navy); border-top: 1px solid var(--tco-line); border-bottom: 0; }
.pill-warn { background: #fff6e5; color: #8a5a00; }

/* checkboxkolom voor bulkacties */
.table-tco .col-check { width: 1%; padding-right: 0; }
.table-tco .col-check .form-check-input { margin: 0; cursor: pointer; }
.table-tco .col-check .form-check-input:disabled { cursor: not-allowed; }
.btn-ghost-danger:disabled { opacity: .45; }

.table-tco .col-icon { width: 1%; text-align: right; }
.table-tco tr.rij-link { cursor: pointer; }
.table-tco tr.rij-link:hover td { background: var(--tco-red-soft); }
.icon-link-tco {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  color: var(--tco-muted); font-size: 1.1rem;
}
.table-tco a.icon-link-tco:hover { background: var(--tco-red-soft); color: var(--tco-red); }
h1 .pill { vertical-align: middle; font-size: .78rem; margin-left: .35rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }

.pagination-tco { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; padding: 1rem; }

/* ── Login ──────────────────────────────── */

.auth {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background:
    radial-gradient(circle at 15% 20%, var(--tco-red-soft) 0, transparent 40%),
    radial-gradient(circle at 85% 80%, var(--tco-lilac) 0, transparent 45%),
    var(--tco-bg);
}
.auth-card { width: 100%; max-width: 400px; }
.auth-card .brand-lg { height: 34px; width: auto; margin-bottom: 2rem; }

/* ── Smal scherm ────────────────────────── */

@media (max-width: 768px) {
  .sidebar { width: var(--tco-sidebar-collapsed); }
  .brand { width: 26px; }
  .sidebar-head { flex-direction: column; gap: 1rem; }
  .sidebar-toggle { display: none; }
  .nav-label, .sidebar-user { display: none; }
  .nav-sub { padding-left: 0; }
  .nav-link-tco { justify-content: center; padding: .6rem; }
  .main { padding: 1.25rem 1rem 2rem; }
  dl.details { grid-template-columns: 1fr; row-gap: .2rem; }
  dl.details dd { margin-bottom: .6rem; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ── Rapporten ─────────────────────────────── */
.table-rapport { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .82rem; }
.table-rapport th, .table-rapport td { padding: .4rem .6rem; border-bottom: 1px solid var(--tco-line); white-space: nowrap; }
.table-rapport thead th {
  font-weight: 500; color: var(--tco-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  background: var(--tco-surface); position: sticky; top: 0;
}
.table-rapport thead th.groep { text-align: center; border-bottom-color: var(--tco-red-line); }
.table-rapport tbody th { font-weight: 400; color: var(--tco-ink); padding-left: 1.6rem; }
.table-rapport tbody + tbody tr:first-child > * { border-top: 2px solid var(--tco-line); }
.table-rapport .kol-totaal { background: #fbfaff; font-weight: 500; }
.table-rapport .rij-totaal > * { background: var(--tco-lilac); color: var(--tco-navy); font-weight: 500; }
.table-rapport .rij-totaal > th { padding-left: .6rem; }
.table-rapport .rij-forecast td, .table-rapport .rij-forecast th { color: var(--tco-muted); font-style: italic; }
.table-rapport .rij-budget > * { background: #fff8f0; }
.table-rapport .rij-delta td, .table-rapport .rij-delta th { font-style: italic; }
.table-rapport td.neg, .kwartaal dd.neg { color: var(--tco-red); background: var(--tco-red-soft); }
.table-rapport td.pos, .kwartaal dd.pos { color: var(--tco-ok); background: var(--tco-ok-soft); }
.table-rapport tfoot .rij-jaar > * { font-weight: 500; color: var(--tco-navy); border-top: 2px solid var(--tco-navy); border-bottom: 0; }
.table-rapport tfoot .rij-jaar > th { padding-left: .6rem; }

.kwartalen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.kwartaal { padding: 1.1rem 1.25rem; }
.kwartaal-bedrag { font-size: 1.5rem; color: var(--tco-navy); font-weight: 500; margin: .1rem 0 .6rem; }
.kwartaal dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; margin: 0; font-size: .85rem; }
.kwartaal dt { color: var(--tco-muted); font-weight: 300; }
.kwartaal dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; border-radius: 6px; padding: 0 .35rem; }

/* derde niveau in de zijbalk (Rapportering > Commercieel > Consultant) */
.nav-sub .nav-sub { margin: 0; padding-left: 1.1rem; }
.nav-sub .nav-sub .nav-link-tco { font-size: .85rem; padding: .35rem .75rem; }

/* budgetten */
/* het vak vult de cel, zodat het bedrag rechts uitlijnt onder de maand en boven de target */
.table-budget input { width: 100%; min-width: 6.5rem; padding: .3rem .45rem; font-size: .82rem; text-align: right; }
.table-budget tbody th { padding-left: .6rem; }

/* openklapbare rapporten */
.table-boom tbody th { padding-left: .4rem; }
.table-boom .boom-knop {
  border: 0; background: transparent; padding: 0; width: 1.2rem; color: var(--tco-muted); line-height: 1;
  vertical-align: middle; transition: transform .15s;
}
.table-boom .boom-knop[aria-expanded="true"] { transform: rotate(90deg); color: var(--tco-red); }
.table-boom .boom-leeg { display: inline-block; width: 1.2rem; }
.table-boom tr:has(.boom-knop) th { cursor: pointer; }
.table-boom .rij-groep > *, .table-boom .rij-resultaat > * { background: var(--tco-lilac); color: var(--tco-navy); font-weight: 500; }
.table-boom .rij-resultaat > * { border-top: 1px solid var(--tco-red-line); }
.table-boom .rij-pct > * { color: var(--tco-muted); font-style: italic; font-size: .76rem; }
.table-boom .rij-rekening th { font-weight: 300; }
.table-boom .rij-rekening th a { color: var(--tco-ink); text-decoration: none; border-bottom: 1px dotted var(--tco-muted); }
.table-boom .rij-rekening th a:hover { color: var(--tco-red); }
.table-boom .rij-rest > * { background: #fff6e5; }
.table-rapport td.negatief { color: var(--tco-red); }
.table-boom .kol-knop {
  border: 0; background: transparent; padding: 0; font: inherit; color: inherit; text-transform: inherit;
  letter-spacing: inherit; white-space: nowrap;
}
.table-boom .kol-knop i { display: inline-block; margin-right: .2rem; transition: transform .15s; }
.table-boom .kol-knop[aria-expanded="true"] { color: var(--tco-red); }
.table-boom .kol-knop[aria-expanded="true"] i { transform: rotate(90deg); }
.table-boom .kol-kwartaal { background: #fbfaff; }
.table-boom td[data-kw], .table-boom th[data-kw] { background: #fdfcff; color: var(--tco-muted); }

/* ── Dashboard ─────────────────────────────── */
.kpi-titel { font-size: 1rem; margin: 0 0 .8rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.kpi-titel span { color: var(--tco-muted); font-weight: 300; font-size: .82rem; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
a.kpi { display: block; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
a.kpi:hover { border-color: var(--tco-red-line); transform: translateY(-1px); }
.kpi { padding: 1.1rem 1.25rem; border-left: 4px solid var(--tco-line); }
.kpi-ok { border-left-color: var(--tco-ok); }
.kpi-navy { border-left-color: var(--tco-navy); }
.kpi-rood { border-left-color: var(--tco-red); }
.kpi-warn { border-left-color: #e0a100; }
.kpi-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tco-muted); }
.kpi-waarde { font-size: 1.6rem; font-weight: 500; color: var(--tco-navy); font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: .2rem; }
.kpi-waarde-klein { font-size: 1.15rem; }
.kpi-sub { font-size: .8rem; color: var(--tco-muted); margin-top: .25rem; }
.kpi-soorten { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; font-size: .8rem; }
.kpi-soorten span { display: block; color: var(--tco-muted); }
.kpi-soorten strong { font-weight: 500; color: var(--tco-navy); }

.voortgang { height: .55rem; background: var(--tco-lilac); border-radius: 99px; overflow: hidden; }
.voortgang span { display: block; height: 100%; background: linear-gradient(90deg, var(--tco-red), #f0567a); border-radius: 99px; }
.voortgang-klein { height: .4rem; }

.grafiek { display: grid; grid-template-columns: repeat(12, 1fr); gap: .35rem; height: 180px; align-items: end; }
.staaf { display: flex; flex-direction: column; height: 100%; opacity: .45; }
.staaf.gekozen { opacity: 1; }
.staaf-vak { position: relative; flex: 1; }
.staaf-vak span { position: absolute; left: 15%; right: 15%; }
.staaf-omzet { bottom: 0; background: var(--tco-red); border-radius: 3px 3px 0 0; }
.staaf-forecast { background: var(--tco-red-line); border-radius: 3px 3px 0 0; }
.staaf-target { left: 0 !important; right: 0 !important; height: 0; border-top: 2px dashed var(--tco-navy); }
.staaf-label { text-align: center; font-size: .7rem; color: var(--tco-muted); margin-top: .25rem; }
.legende { display: flex; gap: .4rem 1rem; flex-wrap: wrap; font-size: .75rem; color: var(--tco-muted); margin-top: .6rem; align-items: center; }
.legende span { display: inline-block; width: .8rem; height: .6rem; border-radius: 2px; margin-right: -.6rem; }
.legende .l-omzet { background: var(--tco-red); }
.legende .l-forecast { background: var(--tco-red-line); }
.legende .l-target { height: 0; border-top: 2px dashed var(--tco-navy); }