/**
 * PSM surface tokens — pagina / kaart / edit / icons
 * Spec: docs/TEAM-BACKEND-HANDLEIDING/design/PSM-MODULE-SURFACES.md
 * v1.0.8 — laden ná de module-<style> (einde <head>).
 *
 * Ondersteunt beide token-stelsels:
 * - standaard: --bg-primary / --bg-secondary / --bg-card / --purple
 * - legacy (producten, prijslijst, …): --bg / --card / --text / --muted / --border / --accent
 */

:root {
  --bg-card: #e8eaee;
  --icon: var(--purple, #1a2d5a);
  --link: var(--purple, #1a2d5a);
  --psm-navy: #1a2d5a;
  color-scheme: light dark;
}

html {
  background: var(--bg-secondary, var(--bg, #f7f8fa));
}

body {
  background: var(--bg-secondary, var(--bg, #f7f8fa));
}

/* Kaarten: iets donkerder dan de pagina (surface-spec) */
.psm-card,
.card {
  background: var(--bg-card, var(--card, #e8eaee));
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1e1e1c !important;
    --bg-secondary: #2a2a28 !important;
    --bg-card: #242422 !important;
    --text-primary: #f0efea !important;
    --text-secondary: #a0a09a !important;
    --text-muted: #a0a09a !important;
    --border-light: rgba(255, 255, 255, 0.1) !important;
    --border-mid: rgba(255, 255, 255, 0.18) !important;
    /* Tekst/icons/links die var(--purple) gebruiken → leesbaar op donker */
    --purple: #9eb0d0 !important;
    --purple-light: #2a3148 !important;
    --purple-mid: #3d4f73 !important;
    --icon: #9eb0d0 !important;
    --link: #9eb0d0 !important;

    /* Legacy tokens (producten, prijslijst, fotoalbums, …) */
    --bg: #2a2a28 !important;
    --card: #242422 !important;
    --text: #f0efea !important;
    --muted: #a0a09a !important;
    --border: rgba(255, 255, 255, 0.1) !important;
    --accent: #9eb0d0 !important;
  }

  html,
  body {
    background: #2a2a28 !important;
    color: #f0efea !important;
  }

  .psm-card,
  .card,
  .modal {
    background: #242422 !important;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f0efea;
  }

  table,
  th,
  td,
  .hint,
  .muted,
  .loading {
    color: inherit;
  }

  th {
    color: #a0a09a !important;
  }

  td {
    color: #f0efea !important;
  }

  .tab:not(.active),
  .btn:not(.primary):not(.flame):not(.danger):not(.solid) {
    background: #1e1e1c !important;
    color: #f0efea !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
  }

  select,
  textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
    background: #1e1e1c !important;
    color: #f0efea !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
  }

  a.ext,
  a:not(.btn):not(.psm-btn):not(.psm-edit-btn):not(.tab) {
    color: #9eb0d0;
  }

  /* Primairy knoppen blijven navy (niet de lichte --accent/--purple) */
  .psm-btn.primary,
  .psm-btn.primary:hover,
  .btn.primary,
  .btn.primary:hover,
  .tab.active,
  .psm-edit-btn,
  .psm-edit-btn:hover,
  .psm-profile-card .psm-edit-btn,
  .psm-profile-card .psm-edit-btn:hover,
  a.psm-btn.primary,
  button.psm-btn.primary,
  .psm-analysis-tab.is-active,
  .psm-brevet-tabs .psm-btn.active,
  .psm-dossier-tabs .psm-btn.active,
  .psm-import-steps span.active {
    background: var(--psm-navy) !important;
    border-color: var(--psm-navy) !important;
    color: #f0f2f8 !important;
  }

  .psm-btn.primary i,
  .psm-edit-btn i,
  .tab.active i {
    color: #f0f2f8 !important;
  }

  /* Verwijderen / danger: solide rood + witte tekst (outline is onleesbaar op donker) */
  .btn.danger,
  .btn.danger.solid,
  .btn.danger:hover,
  .psm-btn.danger,
  .psm-btn.danger:hover,
  .psm-btn.psm-danger,
  .psm-btn.psm-danger:hover,
  .psm-btn.danger-sm,
  .psm-btn.danger-sm:hover,
  button.btn.danger,
  a.btn.danger {
    background: #b91c1c !important;
    border-color: #991b1b !important;
    color: #fff !important;
  }

  .btn.danger i,
  .psm-btn.danger i,
  .psm-btn.psm-danger i,
  .psm-btn.danger-sm i {
    color: #fff !important;
  }

  .btn.danger.ghost,
  .btn.danger.ghost:hover {
    background: transparent !important;
    border-color: #f87171 !important;
    color: #fca5a5 !important;
  }

  /* Secundaire knoppen / AVG op donkere kaart */
  .psm-profile-card .psm-avg-btn {
    background: #1e1e1c !important;
    color: #9eb0d0 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
  }

  .psm-empty i {
    color: #9eb0d0;
    opacity: 0.55;
  }

  /* Embed-titels (psm-vechtdal-auth injecteert ::before / headers) */
  body.psm-vechtdal-embed .psm-profile-card::before,
  body.psm-vechtdal-embed .psm-geg-header-title,
  body.psm-vechtdal-embed .psm-geg-header-title i,
  body.psm-vechtdal-embed .psm-avg-header-title,
  body.psm-vechtdal-embed .psm-avg-header-title i,
  .psm-card h1,
  .psm-card h2,
  .psm-card h2 i,
  .psm-card h1 i,
  #psm-app > h1 i,
  h1 > i.ti,
  .price-hero-value,
  .psm-section-title i,
  .psm-link-more,
  .psm-dl dd a,
  .psm-note a,
  .psm-empty a {
    color: #9eb0d0 !important;
  }

  /* Harde navy-hex in pills (licht thema) → leesbaar op donker */
  .psm-pill.waitlisted,
  .psm-pill.uitgegeven {
    background: #2a3148 !important;
    color: #9eb0d0 !important;
  }

  .pill.off,
  .pill.archived {
    background: #3a3a36 !important;
    color: #a0a09a !important;
  }

  /* Hardcoded lichte rijen (logboek e.d.) → donkere oppervlakken */
  .psm-logbook-table tbody tr.psm-log-row,
  .psm-logbook-table tbody tr {
    background-color: #1e1e1c !important;
  }

  .psm-logbook-table tbody tr.psm-log-row.is-manual {
    background-color: #242422 !important;
  }

  .psm-logbook-table tbody tr.psm-log-row:hover,
  .psm-method-stats-table tbody tr.is-year-row:hover,
  .psm-method-stats-table tbody tr.is-all-row:hover {
    background-color: #2a3148 !important;
  }

  .psm-logbook-table td,
  .psm-logbook-table th,
  .psm-method-stats-table td,
  .psm-method-stats-table th {
    color: #f0efea !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .psm-logbook-table .col-nr,
  .psm-logbook-table .col-time,
  .psm-logbook-table .muted,
  .psm-logbook-table .col-thermiek .muted {
    color: #a0a09a !important;
  }

  .psm-method-stats-table tbody tr.is-selected,
  .psm-logbook-table tbody tr.psm-log-row.is-drill-match {
    background-color: #243d78 !important;
  }

  .psm-method-stats-table tbody tr.is-selected td {
    color: #f0efea !important;
  }

  /* Thermiek / analyse-chip in vluchtmodal */
  .psm-f-analyse-chip {
    background: #1e1e1c !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }
  .psm-f-analyse-chip .psm-analyse-chip-label,
  .psm-thermiek-score.is-pending,
  .psm-logbook-table .col-thermiek .psm-thermiek-pending {
    color: #f0c674 !important;
  }
  .psm-thermiek-score {
    color: #f0efea !important;
  }
  .psm-thermiek-score .psm-star-filled,
  .psm-logbook-table .col-thermiek .psm-thermiek-score .psm-star-filled {
    color: #f5d06a !important;
  }
  .psm-thermiek-score .psm-star-empty,
  .psm-logbook-table .col-thermiek .psm-thermiek-score .psm-star-empty {
    color: #d4b56a !important;
    opacity: 0.8 !important;
  }
  .psm-logbook-table .col-thermiek .psm-thermiek-score {
    color: #f0efea !important;
  }
  .psm-f-analyse-more.psm-icon-btn {
    background: #2a2418 !important;
    border-color: #e8820a !important;
    color: #f0c674 !important;
  }
  .psm-f-analyse-more.psm-icon-btn:hover,
  .psm-f-analyse-more.psm-icon-btn[aria-expanded="true"] {
    background: #e8820a !important;
    border-color: #e8820a !important;
    color: #1a1a18 !important;
  }

  /* Planning (teambackend-v2): hardcoded lichte rijen/cellen */
  .plan-table-wrap {
    background: #1e1e1c !important;
  }
  .plan-table-wrap thead th {
    background: #242422 !important;
    color: #a0a09a !important;
  }
  .plan-table-wrap tbody td,
  .weekend.upcoming td,
  .weekend.past td {
    background: #1e1e1c !important;
    color: #f0efea !important;
  }
  .weekend.past td {
    color: #8a8a86 !important;
  }
  .slot,
  .subcard,
  .psm-cal-month,
  .psm-cal-grid td.cal-day,
  .matrix-view-toggle .btn:not(.active) {
    background: #1e1e1c !important;
    color: #f0efea !important;
  }
  .psm-tp-matrix thead th,
  .psm-tp-matrix tfoot tr.foot-row td,
  .psm-tp-matrix tfoot tr.foot-row th,
  .psm-tp-matrix th.weekend-h,
  .psm-tp-matrix td.weekend-c,
  .psm-tp-matrix th.print-h,
  .psm-tp-matrix td.print-c {
    background: #242422 !important;
    color: #f0efea !important;
  }
}
