/* Thema's. Elk thema heeft een licht en een donker variant:
   :root[data-style="x"]:not([data-theme="light"])  = donker
   :root[data-style="x"][data-theme="light"]        = licht
   Het standaardthema (DIN) staat in styles.css. */

/* ---------- Oceaan ---------- */
:root[data-style="oceaan"]:not([data-theme="light"]) {
  --bg: #0b1620; --surface: #12212e; --surface-2: #1a2d3d; --text: #e6f0f7; --muted: #92a8b8; --line: #223647;
  --brand: #4cc3e6; --brand-2: #7fd6ef; --brand-ink: #04202b; --accent: #4cc3e6;
  --warn-bg: #2c2a14; --warn-ink: #f0d98a;
}
:root[data-style="oceaan"][data-theme="light"] {
  --bg: #eef4f8; --surface: #ffffff; --surface-2: #e1ebf2; --text: #0e1e2a; --muted: #4e6272; --line: #cfdde7;
  --brand: #0b6e99; --brand-2: #1594c4; --brand-ink: #ffffff; --accent: #1594c4;
}

/* ---------- Salie ---------- */
:root[data-style="salie"]:not([data-theme="light"]) {
  --bg: #0f1612; --surface: #17211b; --surface-2: #203027; --text: #e8f0ea; --muted: #9aada0; --line: #26362c;
  --brand: #8fd3a6; --brand-2: #b4e3c3; --brand-ink: #0d2416; --accent: #8fd3a6;
}
:root[data-style="salie"][data-theme="light"] {
  --bg: #f1f5f0; --surface: #ffffff; --surface-2: #e3ece2; --text: #142019; --muted: #56675b; --line: #d3dfd3;
  --brand: #2f6b45; --brand-2: #4a8f62; --brand-ink: #ffffff; --accent: #4a8f62;
}

/* ---------- Roségoud ---------- */
:root[data-style="roos"]:not([data-theme="light"]) {
  --bg: #171012; --surface: #21171a; --surface-2: #2d2024; --text: #f3e9eb; --muted: #b39ca2; --line: #3a2a2f;
  --brand: #f2a2a9; --brand-2: #f7c1c5; --brand-ink: #2a0d12; --accent: #e9b384;
}
:root[data-style="roos"][data-theme="light"] {
  --bg: #faf3f2; --surface: #ffffff; --surface-2: #f1e4e3; --text: #2a1a1d; --muted: #75595e; --line: #ead6d5;
  --brand: #a8434f; --brand-2: #c96a5a; --brand-ink: #ffffff; --accent: #b0703f;
}

/* ---------- Hoog contrast ---------- */
:root[data-style="contrast"]:not([data-theme="light"]) {
  --bg: #000000; --surface: #000000; --surface-2: #1a1a1a; --text: #ffffff; --muted: #e0e0e0; --line: #ffffff;
  --brand: #FFD83D; --brand-2: #FFD83D; --brand-ink: #000000; --accent: #FFD83D;
  --danger: #ff9e94; --ok: #8cf0aa; --warn-bg: #3d3000; --warn-ink: #ffe680; --shadow: none;
}
:root[data-style="contrast"][data-theme="light"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #ededed; --text: #000000; --muted: #262626; --line: #000000;
  --brand: #000000; --brand-2: #8a5d00; --brand-ink: #ffffff; --accent: #8a5d00;
  --danger: #a1000f; --ok: #0b5e2c; --warn-bg: #fff0b3; --warn-ink: #3d2b00; --shadow: none;
}
:root[data-style="contrast"] .card, :root[data-style="contrast"] .kpi, :root[data-style="contrast"] .btn,
:root[data-style="contrast"] input, :root[data-style="contrast"] select, :root[data-style="contrast"] textarea,
:root[data-style="contrast"] .chip, :root[data-style="contrast"] .chips-radio span, :root[data-style="contrast"] #klantList,
:root[data-style="contrast"] .day, :root[data-style="contrast"] .deal { border-width: 2px; }
:root[data-style="contrast"] .muted, :root[data-style="contrast"] .sub { color: var(--muted); }
:root[data-style="contrast"] *:focus-visible { outline: 3px solid var(--brand-2) !important; outline-offset: 2px; }
:root[data-style="contrast"] a:not(.btn):not(.nav-card):not(.tabbar a) { text-decoration: underline; }

/* ---------- Neumorphic ---------- */
/* Alles in de kleur van de achtergrond; diepte alleen met een lichte en een donkere schaduw. */
:root[data-style="neumorph"][data-theme="light"] {
  --bg: #e4e8ee; --surface: #e4e8ee; --surface-2: #dce1e8; --text: #2b3240; --muted: #646d7e; --line: rgb(43 50 64 / 9%);
  --brand: #9C0260; --brand-2: #B4036E; --brand-ink: #ffffff; --accent: #B4036E;
  --np-dark: #b9c2d0; --np-light: #ffffff; --np-fill: #B4036E; --np-fill-ink: #ffffff;
}
:root[data-style="neumorph"]:not([data-theme="light"]) {
  --bg: #2b2e33; --surface: #2b2e33; --surface-2: #31353b; --text: #e6e8ec; --muted: #a2a8b3; --line: rgb(255 255 255 / 6%);
  --brand: #FF6BB0; --brand-2: #FF8FC3; --brand-ink: #160811; --accent: #FF6BB0;
  --np-dark: #1d1f23; --np-light: #393d44; --np-fill: #B4036E; --np-fill-ink: #ffffff;
}
/* Neumorphic-varianten: zelfde vormen (data-np), andere kleuren. */
:root[data-style="neu-zand"][data-theme="light"] {
  --bg: #ece4da; --surface: #ece4da; --surface-2: #e4dbcf; --text: #3a2f25; --muted: #74665a; --line: rgb(58 47 37 / 10%);
  --brand: #8a4b22; --brand-2: #c2713d; --brand-ink: #ffffff; --accent: #c2713d;
  --np-dark: #cbbfb0; --np-light: #fffaf3; --np-fill: #d9824a; --np-fill-ink: #2a1608;
}
:root[data-style="neu-zand"]:not([data-theme="light"]) {
  --bg: #3a332c; --surface: #3a332c; --surface-2: #403830; --text: #efe6dc; --muted: #b8aa9a; --line: rgb(255 255 255 / 6%);
  --brand: #f0a56b; --brand-2: #f6bf8f; --brand-ink: #2a1608; --accent: #f6bf8f;
  --np-dark: #2a241f; --np-light: #4a4139; --np-fill: #e9925a; --np-fill-ink: #2a1608;
}
:root[data-style="neu-mint"][data-theme="light"] {
  --bg: #e3efe9; --surface: #e3efe9; --surface-2: #d9e8e0; --text: #1f3a30; --muted: #57706a; --line: rgb(31 58 48 / 10%);
  --brand: #1f6f5c; --brand-2: #2f9e83; --brand-ink: #ffffff; --accent: #2f9e83;
  --np-dark: #bfd3c9; --np-light: #ffffff; --np-fill: #3fb393; --np-fill-ink: #062a20;
}
:root[data-style="neu-mint"]:not([data-theme="light"]) {
  --bg: #263430; --surface: #263430; --surface-2: #2c3b36; --text: #e2f0ea; --muted: #a0b8ad; --line: rgb(255 255 255 / 6%);
  --brand: #7fe0c2; --brand-2: #a6ead5; --brand-ink: #062a20; --accent: #a6ead5;
  --np-dark: #1a2421; --np-light: #32443f; --np-fill: #5fd0ae; --np-fill-ink: #062a20;
}
:root[data-style="neu-lavendel"][data-theme="light"] {
  --bg: #e8e5f2; --surface: #e8e5f2; --surface-2: #dfdbee; --text: #2f2a45; --muted: #666081; --line: rgb(47 42 69 / 10%);
  --brand: #5b45a8; --brand-2: #7d65d1; --brand-ink: #ffffff; --accent: #7d65d1;
  --np-dark: #c7c2db; --np-light: #ffffff; --np-fill: #7a62d4; --np-fill-ink: #ffffff;
}
:root[data-style="neu-lavendel"]:not([data-theme="light"]) {
  --bg: #2d2a3a; --surface: #2d2a3a; --surface-2: #333044; --text: #ebe8f5; --muted: #aaa4c2; --line: rgb(255 255 255 / 6%);
  --brand: #b9a8ff; --brand-2: #cfc3ff; --brand-ink: #1c1238; --accent: #cfc3ff;
  --np-dark: #1f1d29; --np-light: #3b374b; --np-fill: #a48ff5; --np-fill-ink: #1c1238;
}
:root[data-style="neu-blauw"][data-theme="light"] {
  --bg: #e1e9f2; --surface: #e1e9f2; --surface-2: #d7e1ec; --text: #1d2d40; --muted: #56677c; --line: rgb(29 45 64 / 10%);
  --brand: #1d5f9e; --brand-2: #2f80cc; --brand-ink: #ffffff; --accent: #2f80cc;
  --np-dark: #bcc9d8; --np-light: #ffffff; --np-fill: #2a74c0; --np-fill-ink: #ffffff;
}
:root[data-style="neu-blauw"]:not([data-theme="light"]) {
  --bg: #263140; --surface: #263140; --surface-2: #2c3849; --text: #e3ecf6; --muted: #9fb0c4; --line: rgb(255 255 255 / 6%);
  --brand: #8cc4ff; --brand-2: #b0d7ff; --brand-ink: #0b2340; --accent: #b0d7ff;
  --np-dark: #1a222d; --np-light: #323f52; --np-fill: #79b8ff; --np-fill-ink: #0b2340;
}
:root[data-style="neu-blush"][data-theme="light"] {
  --bg: #f2e6e8; --surface: #f2e6e8; --surface-2: #ecdcdf; --text: #42262c; --muted: #7a5c62; --line: rgb(66 38 44 / 10%);
  --brand: #a33a55; --brand-2: #cc5c78; --brand-ink: #ffffff; --accent: #cc5c78;
  --np-dark: #d6c3c7; --np-light: #ffffff; --np-fill: #c44d6a; --np-fill-ink: #ffffff;
}
:root[data-style="neu-blush"]:not([data-theme="light"]) {
  --bg: #3a2b2f; --surface: #3a2b2f; --surface-2: #413136; --text: #f6e8eb; --muted: #c2a6ad; --line: rgb(255 255 255 / 6%);
  --brand: #ffa9bd; --brand-2: #ffc4d2; --brand-ink: #3a0f1b; --accent: #ffc4d2;
  --np-dark: #281d20; --np-light: #4b383d; --np-fill: #ff98b0; --np-fill-ink: #3a0f1b;
}

:root[data-np] {
  --radius: 20px;
  --np-out: 7px 7px 14px var(--np-dark), -7px -7px 14px var(--np-light);
  --np-out-sm: 4px 4px 8px var(--np-dark), -4px -4px 8px var(--np-light);
  --np-in: inset 4px 4px 8px var(--np-dark), inset -4px -4px 8px var(--np-light);
  --np-in-sm: inset 2px 2px 5px var(--np-dark), inset -2px -2px 5px var(--np-light);
  --shadow: var(--np-out);
}
:root[data-np] .topbar { background: var(--bg); backdrop-filter: none; border-bottom: 0; box-shadow: 0 6px 14px -8px var(--np-dark); }
:root[data-np] .tabbar { border: 0; background: var(--bg); box-shadow: 0 -6px 14px -6px var(--np-dark); }
:root[data-np] .tabbar a.on span { filter: none; opacity: 1; }
:root[data-np] .card, :root[data-np] .kpi, :root[data-np] #klantList,
:root[data-np] .day, :root[data-np] .deal {
  border-color: transparent; box-shadow: var(--np-out); background: var(--bg);
}
:root[data-np] .card { padding: 18px; margin: 18px 0; }
:root[data-np] .kpis { gap: 16px; }
:root[data-np] .day.today { box-shadow: var(--np-out), inset 0 0 0 2px var(--np-fill); }
:root[data-np] dialog { background: var(--bg); box-shadow: var(--np-out), 0 20px 60px rgb(0 0 0 / 25%); border-radius: 24px; }

/* knoppen steken uit, en worden ingedrukt bij aanraken */
:root[data-np] .btn, :root[data-np] .chip, :root[data-np] .chips-radio span,
:root[data-np] .theme-btn, :root[data-np] .sync-chip, :root[data-np] .lang-sel,
:root[data-np] .list.stock .icon, :root[data-np] .as-empty .chip {
  border-color: transparent; background: var(--bg); box-shadow: var(--np-out-sm); transition: box-shadow .12s ease;
}
:root[data-np] .btn { border-radius: 14px; }
:root[data-np] .btn:hover { border-color: transparent; }
:root[data-np] .btn:active, :root[data-np] .chip:active, :root[data-np] .theme-btn:active,
:root[data-np] .btn[aria-pressed="true"], :root[data-np] .btn.on { box-shadow: var(--np-in); }
:root[data-np] .btn.ghost { box-shadow: none; }
:root[data-np] .btn.ghost:hover { box-shadow: var(--np-out-sm); }
:root[data-np] .btn.primary, :root[data-np] .chip.on, :root[data-np] .chips-radio input:checked + span,
:root[data-np] .fab, :root[data-np] .as-fab, :root[data-np] .as-msg.me {
  background: var(--np-fill); color: var(--np-fill-ink); border-color: transparent;
}
:root[data-np] .btn.primary:active, :root[data-np] .chips-radio input:checked + span, :root[data-np] .chip.on {
  box-shadow: inset 3px 3px 6px rgb(0 0 0 / 22%), inset -3px -3px 6px rgb(255 255 255 / 30%);
}
:root[data-np] .fab, :root[data-np] .as-fab { box-shadow: var(--np-out); }

/* invulvelden zijn uitgesneden */
:root[data-np] input, :root[data-np] select, :root[data-np] textarea,
:root[data-np] .as-form textarea {
  border-color: transparent; background: var(--bg); box-shadow: var(--np-in-sm); border-radius: 12px;
}
:root[data-np] input:focus, :root[data-np] select:focus, :root[data-np] textarea:focus {
  outline: 2px solid var(--brand-2); outline-offset: 1px;
}
:root[data-np] input[type="checkbox"], :root[data-np] input[type="radio"] { box-shadow: none; }
:root[data-np] fieldset { border: 0; box-shadow: var(--np-in-sm); border-radius: 16px; }
:root[data-np] .segmented { background: var(--bg); box-shadow: var(--np-in); border-radius: 14px; }
:root[data-np] .segmented a.on { background: var(--bg); box-shadow: var(--np-out-sm); }
:root[data-np] .bar-track, :root[data-np] .col, :root[data-np] .calc .advies,
:root[data-np] .claude-note, :root[data-np] .tsv, :root[data-np] .loc-qty > div,
:root[data-np] .as-msg.bot, :root[data-np] code {
  background: var(--bg); box-shadow: var(--np-in-sm);
}
:root[data-np] .check { border-color: transparent; box-shadow: var(--np-out-sm); }
:root[data-np] .check:hover { background: var(--bg); box-shadow: var(--np-in-sm); }
:root[data-np] .as-panel { background: var(--bg); border-color: transparent; }
:root[data-np] .badge { box-shadow: var(--np-in-sm); }
:root[data-np] .badge.k-weinig, :root[data-np] .badge.k-normaal, :root[data-np] .badge.k-veel,
:root[data-np] .badge.deal, :root[data-np] .badge[class*="prio-"], :root[data-np] .badge[class*="st-"] { box-shadow: none; }
@media (min-width: 1024px) {
  :root[data-np] .tabbar { box-shadow: 6px 0 14px -6px var(--np-dark); }
  :root[data-np] .tabbar a:hover { background: var(--bg); box-shadow: var(--np-out-sm); }
  :root[data-np] .tabbar a.on { background: var(--bg); box-shadow: var(--np-in-sm); }
}
@media (prefers-reduced-motion: reduce) { :root[data-np] .btn { transition: none; } }

/* ---------- Keuzescherm in Instellingen ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.theme-opt { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font-size: .9rem; }
.theme-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.theme-opt:has(input:checked) { border-color: var(--brand-2); box-shadow: 0 0 0 1px var(--brand-2); }
.theme-opt:has(input:focus-visible) { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.theme-opt .sw { display: flex; height: 26px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%); }
.theme-opt .sw i { flex: 1; }
.theme-opt .sub { font-size: .78rem; }
:root[data-np] .theme-opt { border-color: transparent; background: var(--bg); box-shadow: var(--np-out-sm); }
:root[data-np] .theme-opt:has(input:checked) { box-shadow: var(--np-in-sm), 0 0 0 2px var(--np-fill); }
.mode-seg { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 12px; margin: 8px 0; }
.mode-seg label { flex: 1; margin: 0; }
.mode-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mode-seg span { display: block; text-align: center; padding: 8px 6px; border-radius: 9px; color: var(--muted); font-weight: 500; cursor: pointer; font-size: .92rem; }
.mode-seg input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.mode-seg input:focus-visible + span { outline: 2px solid var(--brand-2); }
:root[data-np] .mode-seg { background: var(--bg); box-shadow: var(--np-in); }
:root[data-np] .mode-seg input:checked + span { background: var(--bg); box-shadow: var(--np-out-sm); }

/* Tekstgrootte-keuze */
.size-seg span { display: flex; flex-direction: column; align-items: center; gap: 0; font-size: .74rem; line-height: 1.2; }
.size-seg span i { font-style: normal; font-weight: 700; line-height: 1.2; }