/* NFT Invest Portal — visual redesign v4 "Crisp" (No Five Trees brand)
   Palette: navy #111E5A · teal #36A590 · blue #3258A7 · orange #F26E21 · purple #613F95 · red #ED2F3C
   Type:    Archivo (alle tekst — UI, headings & data)
   Direction: bright, high-contrast workspace · solid navy rail · sharp 1px lines, restrained shadows.
   Only the LOOK changed — every class name, id and behaviour is preserved. */

/* Archivo, lokaal gehost. Stond hiervoor als @import naar fonts.googleapis.com,
   waardoor elke paginalading het IP-adres en de browsergegevens van de bezoeker
   naar Google stuurde. Voor een besloten portaal met vertrouwelijke cijfers is dat
   onnodig, en onder de AVG omstreden. De bestanden staan nu in vendor/fonts/;
   dankzij unicode-range haalt de browser alleen de subset die hij nodig heeft. */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/archivo-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/archivo-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('vendor/fonts/archivo-500-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('vendor/fonts/archivo-500-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/archivo-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/archivo-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('vendor/fonts/archivo-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('vendor/fonts/archivo-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('vendor/fonts/archivo-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('vendor/fonts/archivo-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('vendor/fonts/archivo-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('vendor/fonts/archivo-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('vendor/fonts/archivo-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('vendor/fonts/archivo-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #EAEDF2;            /* cool, light workspace */
  --surface: #FFFFFF;
  --surface-2: #F4F6F9;     /* zebra / subtle fills */
  --paper: #FAFBFC;
  --border: #E1E5EC;        /* crisp hairline */
  --border-strong: #CFD6E0;

  --navy: #111E5A;          /* brand primary / rail */
  --navy-deep: #0E1A4F;
  --ink: #18202F;           /* body text */
  --muted: #5A6377;
  --faint: #98A0AF;

  --teal: #16937B;          /* accent (deepened for white-bg contrast) */
  --teal-bright: #2AA98F;
  --teal-soft: #E4F2EE;
  --blue: #2F5BBF;
  --blue-soft: #EAF0FB;
  --orange: #DC6E1A;
  --orange-soft: #FBF0E3;
  --purple: #5E3C92;
  --pos: #1E9E4A;
  --neg: #D23B45;

  --rail: #111E5A;
  --on-rail: #EDEFF7;
  --on-rail-soft: #A9B1D0;
  --rail-line: rgba(255,255,255,0.12);

  --shadow-sm: 0 1px 2px rgba(17,24,52,0.07);
  --shadow: 0 1px 2px rgba(17,24,52,0.05), 0 6px 16px -10px rgba(17,24,52,0.16);
  --shadow-lg: 0 2px 4px rgba(17,24,52,0.06), 0 16px 34px -16px rgba(17,24,52,0.26);

  --radius: 12px;
  --radius-sm: 9px;
  --rail-w: 264px;
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Login card ── */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.85rem 2.6rem;
  width: 100%;
  max-width: 432px;
  box-shadow: var(--shadow-lg);
}
.card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: 16px 16px 0 0; background: linear-gradient(90deg, var(--navy), var(--teal) 55%, var(--orange)); }

/* .card wordt óók in de dashboards gebruikt (MobileCare/Cooll). De smalle
   max-width en de gradient-rand horen alleen bij de login-kaart → in de
   dashboards resetten, anders worden grafiek-/inhoudskaarten afgeknepen. */
.dashboard-body .card { max-width: none; padding: 1.5rem 1.6rem; box-shadow: var(--shadow); }
.dashboard-body .card::before { display: none; }

.logo { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 0.1rem; color: var(--navy); }
.subtitle { font-size: 0.72rem; color: var(--teal); margin-bottom: 2.2rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; }
h2 { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; margin-bottom: 1.6rem; color: var(--navy); letter-spacing: -0.01em; }

.form-group { margin-bottom: 1rem; }
label { display: block; font-size: 0.76rem; color: var(--muted); margin-bottom: 0.42rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.74rem 0.9rem;
  color: var(--ink);
  font-size: 0.94rem;
  font-family: var(--sans);
  outline: none;
  transition: border-color 0.16s, box-shadow 0.16s;
}
input::placeholder { color: var(--faint); }
input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(22,147,123,0.14); }

.btn {
  width: 100%;
  padding: 0.8rem;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 700;
  font-family: var(--sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: background 0.16s, transform 0.12s;
}
.btn:hover { background: var(--navy-deep); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--navy); border: 1px solid var(--border-strong); margin-top: 0.75rem; }
.btn-ghost:hover { border-color: var(--navy); background: var(--surface-2); }

.error { background: #FBEBEC; border: 1px solid #F0CACD; color: #B22A33; border-radius: var(--radius-sm); padding: 0.7rem 0.95rem; font-size: 0.84rem; margin-bottom: 1rem; display: none; }
.success { background: #EAF6EE; border: 1px solid #BfE4CB; color: #1E7B3C; border-radius: var(--radius-sm); padding: 0.7rem 0.95rem; font-size: 0.84rem; margin-bottom: 1rem; display: none; }

.divider { text-align: center; color: var(--faint); font-size: 0.73rem; margin: 1.05rem 0; position: relative; text-transform: uppercase; letter-spacing: 0.1em; }
.divider::before, .divider::after { content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--border); }
.divider::before { left: 0; } .divider::after { right: 0; }

.toggle-link { text-align: center; font-size: 0.84rem; color: var(--muted); margin-top: 1.5rem; }
.toggle-link a { color: var(--blue); cursor: pointer; text-decoration: none; font-weight: 700; border-bottom: 1px solid transparent; transition: border-color 0.15s; }
.toggle-link a:hover { border-bottom-color: var(--blue); }

/* ── App shell: solid navy navigation rail ── */
.dashboard-body { display: block; min-height: 100vh; background: var(--bg); }

.topbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.4rem;
  padding: 1.9rem 1.35rem;
  background: var(--rail);
  border-right: 1px solid var(--navy-deep);
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--rail-w);
  z-index: 30;
}
.topbar .logo { margin: 0; color: #fff; font-size: 1.45rem; line-height: 1.1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 0 0.55rem; text-decoration: none; }
.topbar .logo img { height: 46px; width: auto; max-width: 150px; align-self: center; object-fit: contain; display: block; }
.topbar .logo .logo-text { font-size: 1.35rem; font-weight: 600; letter-spacing: 0.04em; }
.topbar-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem; margin-top: auto; }
.user-email { font-size: 0.8rem; color: var(--on-rail-soft); font-weight: 600; padding: 0.85rem 0.6rem 0; border-top: 1px solid var(--rail-line); word-break: break-word; }
.btn-signout, .btn-back { background: rgba(255,255,255,0.05); border: 1px solid var(--rail-line); color: #fff; border-radius: var(--radius-sm); padding: 0.62rem 0.85rem; font-size: 0.84rem; font-weight: 600; cursor: pointer; text-decoration: none; text-align: left; transition: background 0.16s, border-color 0.16s; }
.btn-signout:hover, .btn-back:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); }
.btn-back { background: rgba(42,169,143,0.16); border-color: rgba(42,169,143,0.4); color: #B9EFE2; }
.btn-back:hover { background: rgba(42,169,143,0.26); }

/* ── Sidebar navigation menu ── */
.rail-menu { display: flex; flex-direction: column; gap: 2px; margin-top: 0.4rem; }
.rail-menu-label { font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 800; color: var(--on-rail-soft); padding: 0 0.7rem; margin: 1rem 0 0.45rem; opacity: 0.75; }
.rail-link { display: flex; align-items: center; gap: 0.72rem; padding: 0.6rem 0.7rem; border-radius: 9px; color: var(--on-rail-soft); font-size: 0.9rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; }
/* Iconen in de tekst (voorheen de Tabler-webfont, nu inline SVG). 1em zodat ze
   meeschalen met de tekst eromheen, en iets omlaag zodat ze op de basislijn staan. */
.ti { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }

.rail-link svg { width: 18px; height: 18px; flex: none; stroke: currentColor; opacity: 0.9; }
.rail-link:hover { background: rgba(255,255,255,0.07); color: #fff; }
.rail-link.active { background: rgba(42,169,143,0.18); color: #fff; border-color: rgba(42,169,143,0.42); }
.rail-link.active svg { color: var(--teal-bright); opacity: 1; }
/* active section link (set by the menu's own tiny helper script) */
.rail-link.active { background: rgba(42,169,143,0.18); color: #fff; border-color: rgba(42,169,143,0.42); }
.rail-link.active svg { color: var(--teal-bright); opacity: 1; }

/* \u2500\u2500 Portfolio dropdown (native <details>, no JS) \u2500\u2500 */
.rail-dd { display: block; }
.rail-dd > summary { list-style: none; }
.rail-dd > summary::-webkit-details-marker { display: none; }
.rail-dd-caret { margin-left: auto; width: 16px !important; height: 16px !important; transition: transform 0.2s; }
.rail-dd[open] .rail-dd-caret { transform: rotate(180deg); }
.rail-submenu { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 0.3rem; }
.rail-sublink { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem 0.5rem 2.5rem; border-radius: 8px; color: var(--on-rail-soft); font-size: 0.86rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.rail-sublink::before { content: ''; position: absolute; left: 1.55rem; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.45; transform: translateY(-50%); }
.rail-sublink:hover { background: rgba(255,255,255,0.07); color: #fff; }
.rail-sublink.active { color: #fff; background: rgba(42,169,143,0.16); border-color: rgba(42,169,143,0.36); }
.rail-sublink.active::before { background: var(--teal-bright); opacity: 1; }

.dashboard-content { max-width: none; margin: 0; padding: 2.75rem 3.25rem 5rem; padding-left: calc(var(--rail-w) + 3.25rem); }
.dashboard-content h1 { font-family: var(--serif); font-size: 2.5rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.4rem; color: var(--navy); }
.dashboard-content .lead { color: var(--muted); font-size: 1.02rem; margin-bottom: 2.25rem; max-width: 78ch; }
.inv-header { margin-bottom: 1.1rem; }
.inv-header .lead strong { color: var(--navy); font-weight: 700; }

.freshness { display: flex; align-items: center; gap: 11px; font-size: 0.9rem; border-radius: var(--radius-sm); padding: 0.78rem 1.05rem; margin-bottom: 0.7rem; border: 1px solid; font-weight: 600; }
.freshness i { font-size: 1.15rem; flex: none; }
.freshness.amber { background: var(--orange-soft); border-color: #EFD3AE; color: #95560F; }
.freshness.red { background: #FBEBEC; border-color: #F0C7CA; color: #A0282F; }
.loading { color: var(--muted); }

/* ── Stat cards ── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(244px, 1fr)); gap: 1.1rem; margin-bottom: 2.5rem; }
.stat-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--teal);
  border-radius: var(--radius);
  padding: 1.45rem 1.55rem 1.5rem;
  box-shadow: var(--shadow);
  transition: transform 0.14s, box-shadow 0.18s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat-card .label { font-size: 0.74rem; color: var(--muted); margin-bottom: 0.55rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; display: flex; align-items: center; gap: 0.4rem; }
.stat-card .value { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.035em; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.02; }
.stat-card .change { font-size: 0.82rem; color: var(--muted); margin-top: 0.45rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.delta { font-weight: 800; }
.delta.up { color: var(--pos); } .delta.down { color: var(--neg); }
.period-chip { display: inline-block; font-size: 0.67rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 0.1rem 0.5rem; font-weight: 700; vertical-align: middle; font-variant-numeric: tabular-nums; }

/* ── Panels ── */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1.85rem; box-shadow: var(--shadow); }

.tab-pane.active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; align-items: start; }
/* hero KPI band reads larger than inner KPI cards */
.tab-pane.active > .stats-grid .stat-card { padding: 1.6rem 1.7rem 1.65rem; }
.tab-pane.active > .stats-grid .stat-card .value { font-size: 2.4rem; }
.tab-pane.active > .stats-grid,
.tab-pane.active > .span-2,
.tab-pane.active > #deadlines-host { grid-column: 1 / -1; }
.panel > .section-title:first-child,
.panel > .section-title { margin-top: 0; }
.panel .stat-card, .panel .chart-box, .panel .signal { box-shadow: none; }
.panel .stat-card { border-radius: var(--radius-sm); }
.panel .stats-grid { margin-bottom: 0; }
.panel .context-block { background: transparent; border: none; border-left: 3px solid var(--blue); border-radius: 0; padding: 0.1rem 0 0.1rem 1rem; }

/* ── Section titles ── */
.section-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 1.2rem;
  color: var(--navy);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
}
.section-title .sec-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; font-size: 1.05rem; line-height: 1; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.section-title.qual .sec-ico { background: var(--blue-soft); border-color: #D6E0F4; }
.section-title.fin .sec-ico { background: var(--teal-soft); border-color: #C9E6DD; }
.section-title .as-of { color: var(--muted); font-family: var(--sans); font-size: 0.76rem; font-weight: 600; letter-spacing: 0; margin-left: 0.4rem; }
.section-title .as-of.warn { color: var(--orange); }
.section-sub { font-size: 0.76rem; color: var(--muted); margin: 1.6rem 0 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }

/* ── Data tables ── */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; margin-bottom: 0.5rem; }
.data-table th { text-align: left; color: var(--muted); font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border-strong); background: transparent; }
.data-table td { padding: 0.66rem 0.85rem; border-bottom: 1px solid var(--border); color: var(--ink); }
.data-table tbody tr:nth-child(even) { background: var(--surface-2); }
.data-table tbody tr:hover { background: var(--teal-soft); }
.data-table td:first-child { color: var(--navy); font-weight: 600; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tr.total-row td { font-weight: 800; color: var(--navy); background: var(--teal-soft); border-top: 1.5px solid var(--teal); border-bottom-color: var(--teal-soft); }
.data-table tr.total-row:hover td { background: var(--teal-soft); }
.data-table tr.child td { color: var(--muted); font-size: 0.85rem; padding-left: 1.6rem; }
.delta-cell { font-size: 0.85rem; white-space: nowrap; font-weight: 800; }
.delta-cell.up { color: var(--pos); }
.delta-cell.down { color: var(--neg); }

.balance-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
@media (max-width: 640px) { .balance-cols { grid-template-columns: 1fr; } }

/* ── Signals & action points ── */
.signals { display: flex; flex-direction: column; gap: 0.6rem; }
.signal { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.95rem 1.2rem 0.95rem 1.35rem; background: var(--paper); overflow: hidden; }
.signal::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--faint); }
.signal-title { font-weight: 700; font-size: 0.96rem; margin-bottom: 0.3rem; color: var(--navy); }
.signal-text { font-size: 0.89rem; color: var(--ink); line-height: 1.6; }
.kleur-groen::before { background: var(--pos); }
.kleur-oranje::before { background: var(--orange); }
.kleur-rood::before { background: var(--neg); }
.signal.actiepunt::before { background: var(--blue); }
.prio-tag { font-size: 0.64rem; background: var(--blue-soft); color: var(--blue); border-radius: 5px; padding: 0.12rem 0.5rem; margin-left: 0.4rem; text-transform: uppercase; font-weight: 800; letter-spacing: 0.04em; }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 0.5rem; }

/* ── Charts (white cards → Chart.js colours stay correct) ── */
.charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1.3rem; }
.chart-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem 1.5rem; box-shadow: var(--shadow); }
.chart-box canvas { height: 300px !important; width: 100% !important; }
.chart-title { font-size: 1.02rem; color: var(--navy); margin-bottom: 0.8rem; font-weight: 700; display: flex; align-items: baseline; gap: 0.5rem; }
.chart-range { font-size: 0.72rem; color: var(--muted); font-weight: 600; }
.bron-line { display: flex; align-items: center; gap: 7px; font-size: 0.72rem; color: var(--muted); margin-top: 0.85rem; padding-top: 0.6rem; border-top: 1px dashed var(--border-strong); }
.bron-line i { font-size: 0.95rem; color: var(--teal); }
.bron-date { color: var(--navy); font-weight: 700; }
.chart-full { margin-bottom: 1.3rem; }
.chart-full .chart-box canvas { height: 320px !important; }

.stat-card .label i { font-size: 1rem; vertical-align: -2px; }
.waardering-grid { margin-bottom: 0; }
.waardering-value { font-size: 1.55rem !important; }
.waardering-card .change { color: var(--muted); font-size: 0.78rem; line-height: 1.45; }

.nft-tag { font-size: 0.63rem; background: var(--teal-soft); color: var(--teal); border: 1px solid #C2E2D9; border-radius: 5px; padding: 0.1rem 0.45rem; margin-left: 0.3rem; font-weight: 800; letter-spacing: 0.03em; }

/* ── Qualitative blocks ── */
.context-block { background: var(--blue-soft); border: 1px solid #DAE3F5; border-left: 3px solid var(--blue); border-radius: var(--radius-sm); padding: 1.1rem 1.3rem; font-size: 1rem; }
.context-item { font-size: 0.93rem; color: var(--ink); line-height: 1.65; }
.context-item + .context-item { margin-top: 0.55rem; }
.muted-note { font-size: 0.82rem; color: var(--muted); margin-top: 0.65rem; font-style: italic; }
.update-block { border-left: 3px solid var(--blue); }
.update-list { margin: 0 0 0 1.1rem; padding: 0; }
.update-list li { font-size: 0.95rem; line-height: 1.65; margin-bottom: 0.45rem; color: var(--ink); }
.ai-note { margin-top: 0.85rem; font-size: 0.72rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: 0.6rem; }

/* ── Documents ── */
.docs-list { display: flex; flex-direction: column; gap: 0.55rem; }
.doc-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.95rem 1.3rem; font-size: 0.95rem; transition: border-color 0.15s, box-shadow 0.15s; }
.doc-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.doc-row .doc-name { color: var(--navy); font-weight: 700; }
.doc-row .doc-date { color: var(--muted); font-size: 0.8rem; margin-top: 0.15rem; }
.doc-pending { color: var(--faint); font-size: 0.78rem; font-style: italic; }
.doc-dl { background: var(--teal); border: none; color: #fff; border-radius: 7px; padding: 0.5rem 1.1rem; font-size: 0.84rem; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.doc-dl:hover { background: #0f7a66; }
.doc-dl:disabled { opacity: 0.5; cursor: default; }

/* ── Deadlines ── */
.deadline-status { font-weight: 800; font-variant-numeric: tabular-nums; }
.deadline-status.future { color: var(--muted); }
.deadline-status.soon { color: var(--orange); }
.deadline-status.overdue { color: var(--neg); }
.suggestie-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.suggestie-list li { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.68rem 0.95rem 0.68rem 1.15rem; background: var(--orange-soft); overflow: hidden; }
.suggestie-list li::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--orange); }
.suggestie-list .sug-text { display: block; font-size: 0.89rem; color: var(--ink); }
.suggestie-list .sug-src { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 0.22rem; }

.btn-add-dl { margin-left: auto; background: var(--teal-soft); border: 1px solid #C2E2D9; color: #0f7a66; border-radius: 7px; padding: 0.38rem 0.9rem; font-size: 0.8rem; font-weight: 700; font-family: var(--sans); cursor: pointer; transition: background 0.15s; }
.btn-add-dl:hover { background: #D4ECE5; }
.dl-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.9rem 1rem; margin-bottom: 0.75rem; }
.dl-form input, .dl-form select { background: var(--surface); border: 1px solid var(--border-strong); color: var(--ink); border-radius: 7px; padding: 0.5rem 0.65rem; font-size: 0.88rem; font-family: var(--sans); }
.dl-form input#dl-titel { flex: 1; min-width: 220px; }
.btn-save-dl { background: var(--teal); color: #fff; border: none; border-radius: 7px; padding: 0.5rem 1.1rem; font-weight: 700; font-size: 0.85rem; font-family: var(--sans); cursor: pointer; transition: background 0.15s; }
.btn-save-dl:hover { background: #0f7a66; }
.dl-form-msg { font-size: 0.8rem; color: var(--muted); }
.dl-tag { font-size: 0.63rem; background: var(--blue-soft); color: var(--blue); border: 1px solid #CcD8ED; border-radius: 5px; padding: 0.08rem 0.45rem; margin-left: 0.35rem; font-weight: 800; }
.dl-del { background: transparent; border: none; color: var(--faint); cursor: pointer; font-size: 0.9rem; padding: 0 0.3rem; transition: color 0.15s; }
.dl-del:hover { color: var(--neg); }

/* ── Portfolio tiles ── */
.investments-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.3rem; margin-top: 0.5rem; }
.investment-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.9rem 1.8rem 1.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color 0.18s, transform 0.16s, box-shadow 0.2s;
}
.investment-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--teal-bright), var(--blue)); }
.investment-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.investment-name { font-family: var(--serif); font-size: 1.38rem; font-weight: 600; letter-spacing: -0.01em; color: var(--navy); }
.investment-desc { font-size: 0.87rem; color: var(--muted); flex: 1; line-height: 1.6; }
.investment-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.05rem; padding-top: 1.05rem; border-top: 1px solid var(--border); }
.badge { font-size: 0.68rem; background: var(--teal-soft); color: var(--teal); border: 1px solid #C2E2D9; border-radius: 6px; padding: 0.24rem 0.66rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.btn-view { font-size: 0.85rem; color: var(--blue); text-decoration: none; font-weight: 800; white-space: nowrap; flex-shrink: 0; }
.btn-view:hover { text-decoration: underline; text-underline-offset: 3px; }
.empty-state { color: var(--muted); font-size: 0.93rem; margin-top: 1rem; line-height: 1.6; }

/* ── Tabs: crisp segmented control ── */
/* when a sidebar menu is present, it replaces the in-content tab bar */
.dashboard-body:has(.rail-menu) .tabbar { display: none; }
.tabbar { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; padding: 0.32rem; margin-bottom: 1.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; box-shadow: var(--shadow-sm); }
.tab-btn { background: transparent; border: none; color: var(--muted); font-size: 0.92rem; font-weight: 700; font-family: var(--sans); padding: 0.6rem 1.3rem; cursor: pointer; border-radius: 8px; transition: color 0.14s, background 0.16s; }
.tab-btn:hover { color: var(--navy); background: var(--surface-2); }
.tab-btn.active { color: #fff; background: var(--navy); }
.tab-btn.active:hover { color: #fff; background: var(--navy-deep); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.tab-pane > :first-child { margin-top: 0; }
.tab-pane .stats-grid:first-child, .tab-pane .charts-grid:first-child { margin-top: 0; }

/* ── Responsive: collapse rail to a top bar ── */
@media (max-width: 1000px) { .tab-pane.active { grid-template-columns: 1fr; } }
@media (max-width: 920px) {
  .topbar { position: static; flex-direction: row; align-items: center; justify-content: space-between; width: auto; padding: 1rem 1.4rem; gap: 1rem; border-right: none; border-bottom: 1px solid var(--navy-deep); }
  .topbar .logo { flex-direction: row; align-items: center; gap: 0.6rem; margin: 0; font-size: 1.3rem; }
  .topbar-actions { flex-direction: row; align-items: center; margin-top: 0; }
  .user-email { border-top: none; padding: 0; }
  .rail-menu { flex-direction: row; gap: 4px; margin-top: 0; flex-wrap: wrap; }
  .rail-menu-label { display: none; }
  .rail-link { padding: 0.5rem 0.7rem; }
  .dashboard-content { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ── Responsive: collapsible rail (toegevoegd door Claude Code) ── */
.rail-toggle { display: none; position: fixed; top: 12px; left: 12px; z-index: 50; width: 44px; height: 44px; align-items: center; justify-content: center; background: var(--navy); border: none; border-radius: 10px; cursor: pointer; box-shadow: var(--shadow); }
.rail-toggle svg { width: 22px; height: 22px; stroke: #fff; }
@media (max-width: 1000px) {
  .rail-toggle { display: inline-flex; }
  .topbar { transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: var(--shadow-lg); }
  .topbar.open { transform: translateX(0); }
  .dashboard-content { padding-left: 3.25rem; padding-top: 4.75rem; }
}

/* ── Versiebalk (concept → gepubliceerd) ── */
.version-bar { margin-bottom: 1.25rem; }
.version-bar-inner { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.95rem; box-shadow: var(--shadow); }
.version-bar .ver-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.version-bar .ver-select { padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2, #fff); font-size: 0.85rem; font-weight: 600; color: var(--ink); cursor: pointer; min-width: 200px; }
.version-bar .ver-chip { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; padding: 0.3rem 0.7rem; border-radius: 999px; }
.version-bar .ver-chip.concept { background: #FCEBD2; color: #8A4B00; border: 1px solid #F0C98A; }
.version-bar .ver-chip.published { background: var(--teal-soft, #E4F2EE); color: var(--teal, #16937B); border: 1px solid #C2E2D9; }
.version-bar .ver-chip.old { background: #FCEBD2; color: #8A4B00; border: 1px solid #F0C98A; }

/* ── Ingest-meldingen (automatische verwerking mislukt — alleen NFT) ── */
#ingest-alert { margin-bottom: 1rem; }
.ingest-alert-box { background: #FDECEA; border: 1px solid #F5B5AE; border-left: 4px solid #D23B45; border-radius: var(--radius); padding: 0.9rem 1.1rem; margin-bottom: 0.6rem; }
.ingest-alert-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.ingest-alert-head strong { color: #9b2c2c; font-size: 0.95rem; }
.ingest-alert-msg { font-size: 0.85rem; color: #5b2320; white-space: pre-wrap; line-height: 1.5; }
.ingest-alert-meta { font-size: 0.72rem; color: #9b6b67; margin-top: 0.4rem; }

/* ── Bewerker (Fase 2) ── */
.edit-overlay { position: fixed; inset: 0; background: rgba(10,20,40,0.55); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 3vh 16px; overflow: auto; }
.edit-modal { background: #fff; border-radius: 14px; width: min(840px, 100%); max-height: 94vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); overflow: hidden; }
.edit-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--border); }
.edit-head strong { color: var(--navy); font-size: 1.02rem; }
.edit-head > div { display: flex; gap: 0.5rem; }
.edit-hint { padding: 0.8rem 1.3rem; font-size: 0.82rem; line-height: 1.55; color: var(--muted); background: var(--surface-2, #f4f6f9); border-bottom: 1px solid var(--border); }
.edit-body { padding: 1rem 1.3rem 1.5rem; overflow: auto; }
.edit-group { border: 1px solid var(--border); border-radius: 8px; margin: 0.5rem 0; }
.edit-group > .edit-group-label { cursor: pointer; padding: 0.55rem 0.8rem; font-weight: 700; font-size: 0.85rem; color: var(--navy); background: var(--surface-2, #f4f6f9); border-radius: 8px; list-style: none; }
.edit-group > .edit-group-label::-webkit-details-marker { display: none; }
.edit-group[open] > .edit-group-label { border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; }
.edit-group-body { padding: 0.5rem 0.85rem; }
.edit-field { display: grid; grid-template-columns: 220px 1fr; gap: 0.8rem; align-items: center; padding: 0.3rem 0; }
.edit-key { font-size: 0.8rem; color: var(--muted); word-break: break-word; }
.edit-field input[type=text], .edit-field input[type=number], .edit-field textarea { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 0.86rem; color: var(--ink); }
.edit-field textarea { resize: vertical; }
@media (max-width: 640px) { .edit-field { grid-template-columns: 1fr; gap: 0.2rem; } }
.version-bar .ver-actions { display: flex; gap: 0.5rem; margin-left: auto; flex-wrap: wrap; }
.version-bar .ver-btn { padding: 0.5rem 0.9rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface, #fff); color: var(--ink); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.version-bar .ver-btn:hover { background: rgba(0,0,0,0.04); border-color: var(--border-strong, #cfd6e0); }
.version-bar .ver-btn.primary { background: var(--teal, #16937B); border-color: var(--teal, #16937B); color: #fff; }
.version-bar .ver-btn.primary:hover { filter: brightness(0.95); }

/* ── PDF-voorbereiding: toon álle tabbladen (behalve Documenten) zodat ze in de
   PDF komen. Deze klasse wordt door downloadPdf() op <body> gezet, óók tijdens het
   printen — zo renderen grafieken eerst op het scherm en komen ze mee in de PDF. ── */
.printing .tab-pane:not(#tab-docs),
.printing #mc2 .tab-content:not(#tab-docs),
.printing #cooll .tab-content:not(#tab-docs) { display: block !important; }
.printing #tab-docs { display: none !important; }
.printing .tabbar, .printing .tab-btn { display: none !important; }

/* ── Print: nette PDF-weergave (rail + bedieningsknoppen weg) ── */
@media print {
  .topbar, .rail-toggle, .btn-signout, .btn-back, .version-bar .ver-actions, .version-bar .ver-select, .version-bar .ver-label { display: none !important; }
  body, .dashboard-body { display: block !important; background: #fff !important; }
  .dashboard-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .version-bar-inner { box-shadow: none; border: none; padding: 0 0 0.5rem; }
  .panel, .stat-card, .data-table, .card, .table-card, .chart-box, #mc2 .card, #mc2 .table-card, #mc2 .kpi-card { break-inside: avoid; page-break-inside: avoid; box-shadow: none !important; }
  a[href]:after { content: none !important; }

  /* tab-navigatie weg + documenten-tab overslaan in de PDF */
  .tabbar, .tab-btn { display: none !important; }
  #tab-docs { display: none !important; }

  /* grafieken: vaste maat, nette uitlijning, niet over de paginarand */
  #mc2 .chart-wrap { height: 200px !important; } #mc2 .chart-wrap.tall { height: 240px !important; }
  #mc2 .two-col { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.3rem !important; }
  .chart-box, .chart-full, .charts-grid > div, #mc2 .chart-wrap { break-inside: avoid; page-break-inside: avoid; }
  canvas { max-width: 100% !important; }

  /* elk volgend tabblad op een nieuwe pagina, zodat het overzichtelijk blijft */
  #mc2 .tab-content + .tab-content, #cooll .tab-content + .tab-content, .tab-pane + .tab-pane { break-before: page; page-break-before: always; }
}