/* Energie — eigen laag bovenop Canvas (style.css) en Bootstrap 5.3.
   Themakleur wijzigen? Pas --cnvs-themecolor en --cnvs-themecolor-rgb hieronder aan. */

/* ---------- Lettertype (lokaal, geen Google Fonts) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); }

/* ---------- Thema ---------- */
:root {
  --cnvs-themecolor: #12866f;
  --cnvs-themecolor-rgb: 18, 134, 111;
  --cnvs-body-font: "Inter", system-ui, sans-serif;
  --cnvs-primary-font: "Inter", system-ui, sans-serif;
  --bs-body-font-family: "Inter", system-ui, sans-serif;
  --bs-link-color: var(--cnvs-themecolor);
  --bs-link-hover-color: #0d6b58;

  --app-bg: #f4f5f7;
  --app-surface: #ffffff;
  --app-border: #e6e8eb;
  --app-grid: #eceef1;
  --app-ink: #212529;
  --app-ink-2: #5c636a;
  --app-ink-3: #868e96;

  /* Grafiekreeksen (gevalideerd op kleurenblindheid; niet zomaar wijzigen) */
  --s1: #2a78d6;   /* normaal / dit jaar */
  --s2: #eb6834;   /* teruglevering / vorig jaar */
  --s3: #1baf7a;   /* dal */
  --muted-series: #a9a8a2;
  --good: #0a7d0a;
  --bad: #c03030;
}
[data-bs-theme="dark"] {
  --cnvs-themecolor: #1a9a7f;
  --cnvs-themecolor-rgb: 26, 154, 127;
  --bs-link-color: #4cc9ad;
  --bs-link-hover-color: #7fdcc6;
  --app-bg: #16191c;
  --app-surface: #212529;
  --app-border: #31363b;
  --app-grid: #2c3135;
  --app-ink: #f1f3f5;
  --app-ink-2: #c3c8cd;
  --app-ink-3: #959ca3;
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --muted-series: #7a7d80;
  --good: #3cc13c;
  --bad: #e66767;
}

body { background: var(--app-bg); color: var(--app-ink); font-family: var(--cnvs-body-font); -webkit-text-size-adjust: 100%; }
body.dark { --cnvs-body-bg: var(--app-bg); background: var(--app-bg); }
.dark { --cnvs-contrast-bg: var(--app-surface); }
.hidden { display: none !important; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.text-ink-2 { color: var(--app-ink-2) !important; }
.text-ink-3 { color: var(--app-ink-3) !important; }
.text-smaller { font-size: .8125rem; }

/* ---------- Kop ---------- */
.app-header { position: sticky; top: 0; z-index: 1020; background: var(--app-surface); border-bottom: 1px solid var(--app-border); }
.app-header .container { display: flex; align-items: center; gap: 1.25rem; min-height: 64px; }
.app-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; color: var(--app-ink); text-decoration: none; white-space: nowrap; }
.app-brand:hover { color: var(--app-ink); }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--cnvs-themecolor); color: #fff; font-size: 1.05rem; }
.app-nav { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; flex: 1; }
.app-nav::-webkit-scrollbar { display: none; }
.app-nav .nav-link { display: flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: .6rem; color: var(--app-ink-2); font-weight: 500; white-space: nowrap; }
.app-nav .nav-link:hover { color: var(--app-ink); background: rgba(var(--cnvs-themecolor-rgb), .07); }
.app-nav .nav-link.active { color: var(--bs-link-color); background: rgba(var(--cnvs-themecolor-rgb), .12); }
.app-user { display: flex; align-items: center; gap: .25rem; white-space: nowrap; }
.icon-btn { border: 0; background: none; color: var(--app-ink-2); width: 38px; height: 38px; border-radius: .6rem; display: inline-grid; place-items: center; font-size: 1.1rem; }
.icon-btn:hover { background: rgba(var(--cnvs-themecolor-rgb), .08); color: var(--app-ink); }

/* ---------- Pagina ---------- */
.app-main { padding: 1.75rem 0 3rem; }
.app-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.app-title h1 { font-size: 1.6rem; font-weight: 700; margin: 0; letter-spacing: -.01em; color: var(--app-ink); }
.app-title .sub { margin-top: .25rem; font-size: .9rem; color: var(--app-ink-2); }
.app-footer { padding: 0 0 1.5rem; color: var(--app-ink-3); font-size: .78rem; }

/* Kaarten */
.app-card { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 1rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.app-card > .card-body { padding: 1.35rem; }
.app-card .card-title { font-size: 1.02rem; font-weight: 600; margin: 0; color: var(--app-ink); }
.app-card .card-sub { font-size: .82rem; color: var(--app-ink-2); margin-top: .15rem; }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
[data-bs-theme="dark"] .app-card { box-shadow: none; }

/* Kengetallen */
.kpi { display: flex; gap: 1rem; align-items: flex-start; }
.kpi-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; color: var(--cnvs-themecolor); background: rgba(var(--cnvs-themecolor-rgb), .12); }
.kpi-label { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--app-ink-3); }
.kpi-value { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.2; margin: .2rem 0 .25rem; color: var(--app-ink); }
.kpi-value .unit { font-size: .95rem; font-weight: 500; color: var(--app-ink-2); margin-left: .2rem; letter-spacing: 0; }
.kpi-sub { font-size: .84rem; color: var(--app-ink-2); }
.delta { font-weight: 600; white-space: nowrap; }
.delta.up { color: var(--bad); }
.delta.down { color: var(--good); }

/* Grafieken */
.chart-box { position: relative; height: 300px; }
.chart-box.tall { height: 340px; }
.chart-box.short { height: 220px; }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: var(--app-ink-2); margin-bottom: .6rem; }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend i.lg-line { height: 3px; border-radius: 2px; width: 14px; }
.legend i.lg-dash { height: 0; width: 14px; border-top: 2px dashed var(--muted-series); border-radius: 0; }

/* Tabellen */
.app-table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(var(--cnvs-themecolor-rgb), .05); margin-bottom: 0; font-size: .9rem; }
.app-table > :not(caption) > * > * { padding: .65rem .75rem; border-bottom-color: var(--app-border); color: var(--app-ink); }
.app-table thead th { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--app-ink-3); white-space: nowrap; }
.app-table tr.total > td { font-weight: 700; border-top: 2px solid var(--app-border); border-bottom: 0; }
.app-table tr.clickable { cursor: pointer; }
.table-scroll { overflow-x: auto; margin: 0 -1.35rem; padding: 0 1.35rem; }

/* Labels */
.src { display: inline-block; font-size: .72rem; font-weight: 600; padding: .2rem .55rem; border-radius: 50rem; white-space: nowrap; background: var(--bs-tertiary-bg); color: var(--app-ink-2); }
.src.ha { background: rgba(var(--cnvs-themecolor-rgb), .12); color: var(--cnvs-themecolor); }
.src.handmatig { background: rgba(235, 160, 0, .16); color: #8a5a00; }
[data-bs-theme="dark"] .src.handmatig { color: #f2c66b; }
.src.lopend { font-style: italic; font-weight: 500; }

/* Knoppen (Canvas .button) */
.button { margin: 0; border-radius: .6rem; --cnvs-btn-fontsize: .9rem; --cnvs-btn-padding-y: .45rem; --cnvs-btn-padding-x: 1.05rem; }
.button.button-border { background: transparent; color: var(--app-ink); border-color: var(--app-border); }
.button.button-border:hover { background: rgba(var(--cnvs-themecolor-rgb), .08); color: var(--app-ink); border-color: var(--app-border); }
.button.button-danger { background: transparent; color: var(--bad); border-color: var(--app-border); }
.button.button-danger:hover { background: rgba(192, 48, 48, .08); color: var(--bad); }
.button:disabled { opacity: .55; cursor: default; }
.button i { margin-right: .4rem; }
.link-btn { border: 0; background: none; padding: 0; color: var(--bs-link-color); font-weight: 500; }
.link-btn:hover { text-decoration: underline; }
.year-pills { display: flex; flex-wrap: wrap; gap: .3rem; }
.year-pills button { border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-ink-2); border-radius: 50rem; padding: .25rem .75rem; font-size: .82rem; font-weight: 500; }
.year-pills button:hover { color: var(--app-ink); }
.year-pills button.active { background: var(--cnvs-themecolor); border-color: var(--cnvs-themecolor); color: #fff; }

/* Formulieren */
.form-label { font-size: .82rem; font-weight: 500; color: var(--app-ink-2); margin-bottom: .3rem; }
.form-control, .form-select { border-radius: .6rem; border-color: var(--app-border); background-color: var(--app-surface); color: var(--app-ink); }
.form-control:focus, .form-select:focus { border-color: rgba(var(--cnvs-themecolor-rgb), .6); box-shadow: 0 0 0 .2rem rgba(var(--cnvs-themecolor-rgb), .18); background-color: var(--app-surface); color: var(--app-ink); }
.form-check-input:checked { background-color: var(--cnvs-themecolor); border-color: var(--cnvs-themecolor); }
.form-text { font-size: .76rem; color: var(--app-ink-3); }
.section-label { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--app-ink-3); margin: 1.25rem 0 .75rem; }
.section-label:first-child { margin-top: 0; }
.msg { font-size: .86rem; margin-top: .6rem; }
.msg:empty { display: none; }
.msg.ok { color: var(--good); }
.msg.err { color: var(--bad); }
.card-top .form-select { width: auto; min-width: 100px; }

dl.kv { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.25rem; margin: 0; font-size: .9rem; }
dl.kv dt { font-weight: 500; color: var(--app-ink-2); }
dl.kv dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Inloggen */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; position: relative; }
.login-page::before { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(135deg, #0f6e5b, #12866f 55%, #1aa386); }
.login-inner { position: relative; width: 100%; max-width: 400px; }
.login-inner .card-body { padding: 2.25rem; }
.login-brand { display: flex; align-items: center; justify-content: center; gap: .6rem; color: #fff; font-weight: 700; font-size: 1.3rem; margin-bottom: 1.25rem; }
.login-brand .brand-mark { background: rgba(255, 255, 255, .18); }

/* Dialoog (native <dialog> met Bootstrap-modalopmaak) */
dialog.app-dialog { border: 0; padding: 0; background: transparent; width: min(580px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: visible; color: var(--app-ink); }
dialog.app-dialog::backdrop { background: rgba(10, 14, 18, .5); }
dialog.app-dialog .modal-content { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 1rem; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
dialog.app-dialog .modal-header { border-bottom: 1px solid var(--app-border); padding: .85rem 1rem .85rem 1.35rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
dialog.app-dialog .modal-title { font-size: 1.05rem; font-weight: 600; }
dialog.app-dialog .modal-body { overflow-y: auto; overflow-x: hidden; min-width: 0; padding: 1.35rem; }
dialog.app-dialog.wide { width: min(780px, calc(100vw - 24px)); }
dialog.app-dialog .modal-footer { border-top: 1px solid var(--app-border); gap: .5rem; padding: .85rem 1.35rem; display: flex; justify-content: flex-end; flex-wrap: wrap; }
dialog.app-dialog .modal-footer > * { margin: 0; }
dialog.app-dialog .modal-footer .push { margin-right: auto; }

.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-state > i { font-size: 2.5rem; color: var(--cnvs-themecolor); }

@media (max-width: 767.98px) {
  .app-header .container { flex-wrap: wrap; gap: .5rem; min-height: 0; padding-top: .6rem; }
  .app-nav { order: 3; flex-basis: 100%; padding-bottom: .5rem; }
  .app-nav .nav-link { padding: .4rem .7rem; }
  .app-nav .nav-link span { display: none; }
  .app-nav .nav-link.active span { display: inline; }
  .app-brand .brand-name, .app-user .who { display: none; }
  .app-brand { flex: 1; }
  .app-main { padding-top: 1.25rem; }
  .app-card > .card-body { padding: 1.1rem; }
  .table-scroll { margin: 0 -1.1rem; padding: 0 1.1rem; }
  .kpi-value { font-size: 1.5rem; }
  .app-table { font-size: .84rem; }
  .app-table > :not(caption) > * > * { padding: .55rem .35rem; }
  .app-table thead th { letter-spacing: 0; font-size: .66rem; }
  dialog.app-dialog .modal-body { padding: 1.1rem; }
  .chart-box { height: 260px; }
}
@media print {
  .app-header, .app-footer, .button, .year-pills { display: none !important; }
  body { background: #fff; }
}