/* NAI v2 - base: reset, typografie, layout-primitieven, responsive. */

/* ============================================================ Base */
*, *::before, *::after { box-sizing: border-box; }

/* Must come before anything that sets `display`. The browser hides [hidden]
   from its own stylesheet, and any author rule saying `display: flex` beats
   it - which silently shows every panel at once. The whole dashboard uses
   [hidden] for state, so this one line is load-bearing. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
  letter-spacing: -0.006em;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.022em; }
h1 { font-size: 26px; }
h2 { font-size: 16px; }
h3 { font-size: 15px; }
p  { margin: 0; }
a  { color: var(--accent); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent-hover); }

code, .mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }
code {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-xs); padding: 1px 5px; color: var(--text-2);
}

.sub    { color: var(--text-2); font-size: 13px; }
.muted  { color: var(--text-3); }
.small  { font-size: 12.5px; }
.center { text-align: center; }
.spacer { flex: 1; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

::selection { background: var(--accent-soft); color: var(--text); }

/* Scrollbars, quietly */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: var(--r-full);
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }

/* ============================================================ Layout */
.wrap {
  max-width: var(--maxw); margin: 0 auto; padding: 26px 24px 80px;
  animation: fade-up var(--t-slow) both;
}
main.app .wrap { padding-top: 18px; }

/* Elke pagina hoort dezelfde kolom te krijgen. Alleen dashboard en admin
   hadden een .wrap binnenin; de rest zat aan de linkerrand geplakt omdat
   .page zelf nooit een breedte kreeg. Nu is de centrering het gedrag van de
   pagina en niet van een div die je moet onthouden. */
main.page {
  max-width: var(--maxw); margin-inline: auto;
  padding: 26px 24px 80px;
}
@media (max-width: 720px) { main.page { padding: 18px 16px 64px; } }

/* Auth-pagina's centreren hun kaart en horen die kolom niet te krijgen. */
main.auth-page { max-width: none; padding: 0; }

.page-head { margin-bottom: 26px; }
.page-head h1 { margin-bottom: 5px; }
.page-head p  { color: var(--text-2); font-size: 14px; }

.section-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 34px 0 14px;
}
.section-head h2 { font-size: 15px; }

.stack { display: grid; gap: 16px; }
.row   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-end { justify-content: flex-end; }

/* ============================================================ Responsive */
@media (max-width: 900px) {
  .tracker-body { grid-template-columns: 1fr; gap: 18px; }
  .tracker-chart { height: 112px; }
  .row-key { min-width: 120px; }
}

@media (max-width: 720px) {
  .wrap { padding: 18px 16px 64px; }
  .nav-inner { padding: 0 16px; gap: 14px; }
  .nav-links a { padding: 6px 9px; font-size: 13px; }
  h1 { font-size: 22px; }
  .hero-number { font-size: 38px; }
  .tracker-rate { font-size: 42px; }
  .picker-head h2 { font-size: 21px; }
  .controlbar { gap: 10px; }
  .control-right { width: 100%; margin-left: 0; }
  .control-right .btn-group { flex: 1; }
  .control-right .btn-group .btn { flex: 1; }
  .tab { min-width: 74px; font-size: 12.5px; padding: 0 9px; }
  .bubble { max-width: 88%; }
  .row-form, .check-row { flex-wrap: wrap; }
  .row-val { text-align: left; margin-left: 0; }
  .metric { border-right: 0; border-bottom: 1px solid var(--border); }
  .toast-stack { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

@media (max-width: 420px) {
  .tracker-rate { font-size: 36px; }
  .hero-number  { font-size: 32px; }
  .brand-name   { display: none; }
}

/* Print: nobody prints this, but a blank page would be worse. */
@media print {
  .nav, .tabbar, .controlbar, .toast-stack, .modal-backdrop { display: none !important; }
  .panel { display: block !important; }
}

/* ----------------------------------------------------------------------------
   v2 typografie-regels
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, .kpi-value, .hero-value { text-wrap: balance; }
p, .muted, .lede, .card p { text-wrap: pretty; }

/* Getallen in kolommen springen niet meer bij het tellen. */
.kpi-value, .hero-value, td, th, .num, .mono, .stat-value,
.tracker-rate, .feed-row, .pos-row { font-variant-numeric: tabular-nums; }

/* Het chatveld groeit mee met wat je typt, zonder JS. */
.chat-input, textarea.grow { field-sizing: content; }