/* ============================================================================
   cgSkiss — delad design (theme.css)
   Laddas SIST i <head> i varje app (efter appens egna <style>) så att den:
     • harmoniserar färg-tokens (apparna hade tre olika drivna uppsättningar),
     • ger KOMPLETT mörkt läge överallt (voc/sdb/skydd saknade det helt),
     • fixar responsivitet (header wrappar på mobil),
     • lägger på lätt polish (fokusring, scrollbar, länkfärg).
   Inget i apparna raderas — denna fil vinner via dokumentordning (laddas sist).
   Apparna använder både --text och --fg → båda definieras till samma värde.
   ========================================================================== */

:root{
  /* ytor */
  --bg:#f7f7f4; --panel:#ffffff; --border:#e3e2dc; --border-strong:#86867f;  /* -strong = ≥3:1 för interaktiva kontroller (WCAG 1.4.11) */
  --shadow:0 1px 3px rgba(0,0,0,.07); --shadow-lg:0 6px 24px rgba(0,0,0,.12);
  /* text (apparna använder olika namn — håll dem i synk) */
  --text:#1c1c1a; --fg:#1c1c1a; --muted:#6b6f78;
  /* accent — enhetlig blå (tidigare #2a6f97 / #2e6fb8 / #2c3e50) */
  --accent:#2e6fb8; --accent-soft:#e7f0fa; --accent-strong:#245a96;
  /* status (--warn nedtonad till ≥4.5:1 mot --warn-soft, WCAG 1.4.3) */
  --warn:#a8443f; --warn-soft:#fceeec; --ok:#2f7a3a; --ok-soft:#e6f4e8;
  /* domän-färger (voc/sdb-rapporter) */
  --voc:#1f7a4d; --voc-bg:#e3f3ea; --kit:#8a5a00; --kit-bg:#fbedd2;
  --sdb:#1a5fb4; --sdb-bg:#e1ecf9; --calc:#7b3fb0; --calc-bg:#efe6f8;
  --komp:#7b3fb0; --komp-bg:#efe6f8; --row-hover:#f0efe8; --hit:#fff3a8;
  /* typsnitt + form */
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:9px; --radius-sm:6px;
}

/* Mörka tokens — dels via explicit toggle [data-theme="dark"] (smiles/blandning/
   sds/etikett/molekyl), dels via OS-inställning för apparna utan toggle (voc/sdb).
   :not([data-theme="light"]) gör att ett uttryckligt ljust val alltid vinner. */
[data-theme="dark"]{
  --bg:#14161b; --panel:#1d2027; --border:#2c313b; --border-strong:#6a7280;
  --shadow:0 1px 3px rgba(0,0,0,.4); --shadow-lg:0 8px 28px rgba(0,0,0,.5);
  --text:#e8e6e0; --fg:#e8e6e0; --muted:#949aa4;
  --accent:#6fb6e0; --accent-soft:#1d3447; --accent-strong:#8cc6ea;
  --warn:#e0928d; --warn-soft:#3a2422; --ok:#7fc08a; --ok-soft:#1e3322;
  --voc:#5cc08a; --voc-bg:#16302a; --kit:#d6a44a; --kit-bg:#33280f;
  --sdb:#6aa5e4; --sdb-bg:#142a40; --calc:#b58fd8; --calc-bg:#271a33;
  --komp:#b58fd8; --komp-bg:#271a33; --row-hover:#23272f; --hit:#5a4a00;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14161b; --panel:#1d2027; --border:#2c313b; --border-strong:#6a7280;
    --shadow:0 1px 3px rgba(0,0,0,.4); --shadow-lg:0 8px 28px rgba(0,0,0,.5);
    --text:#e8e6e0; --fg:#e8e6e0; --muted:#949aa4;
    --accent:#6fb6e0; --accent-soft:#1d3447; --accent-strong:#8cc6ea;
    --warn:#e0928d; --warn-soft:#3a2422; --ok:#7fc08a; --ok-soft:#1e3322;
    --voc:#5cc08a; --voc-bg:#16302a; --kit:#d6a44a; --kit-bg:#33280f;
    --sdb:#6aa5e4; --sdb-bg:#142a40; --calc:#b58fd8; --calc-bg:#271a33;
    --komp:#b58fd8; --komp-bg:#271a33; --row-hover:#23272f; --hit:#5a4a00;
  }
  /* loggans ordmärke ljust även i OS-mörkt (utan toggle) */
  :root:not([data-theme="light"]) .app-logo svg path:not(.cls-1),
  :root:not([data-theme="light"]) .app-logo svg polygon:not(.cls-1){ fill:#e8e6e0; }
}

/* ---- responsivt -------------------------------------------------------- */
*{ box-sizing:border-box; }

/* .apptabs har redan overflow-x:auto i alla appar; gör scrollbaren diskret. */
nav.apptabs{ scrollbar-width:thin; }
nav.apptabs::-webkit-scrollbar{ height:4px; }
nav.apptabs::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }

@media (max-width:760px){
  /* Headern var flex utan wrap i de flesta appar → sökruta/kontroller sprängde
     bredden. Tillåt radbrytning, ge sökrutan en egen rad och låt fält krympa. */
  header{ flex-wrap:wrap !important; height:auto !important; row-gap:8px; }
  header input, header select{ min-width:0; }
  header .search{ flex:1 1 100%; flex-wrap:wrap; gap:6px; }      /* sök-containern → egen rad */
  header .search > input[type="search"], header .search > input[type="text"]{ flex:1 1 100%; }
}

@media (max-width:680px){
  /* breda tabeller scrollar i sidled istället för att spränga sidan */
  .wrap table, main table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
}

/* Chemgroup-loggans ordmärke är svarta path:ar utan fill → osynligt i mörkt läge.
   Den röda C-symbolen (.cls-1) lämnas röd; ordmärket görs ljust. */
[data-theme="dark"] .app-logo svg path:not(.cls-1),
[data-theme="dark"] .app-logo svg polygon:not(.cls-1){ fill:var(--text); }
[data-theme="dark"] .app-logo svg .cls-1{ fill:#fa2626; }
/* img-baserade loggor (cg_logo.svg i voc/sdb) kan inte recolor:as per path →
   gör dem ljus-monokroma i mörkt läge så ordmärket syns. */
[data-theme="dark"] .app-logo img{ filter:brightness(0) invert(.92); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .app-logo img{ filter:brightness(0) invert(.92); }
}

/* ---- polish (brett tillämpbart, lågrisk) ------------------------------- */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
html{ scrollbar-color:var(--border) transparent; }
*::selection{ background:var(--accent-soft); }

/* ---- WCAG AA-kontrast --------------------------------------------------- */
/* 1.4.11: interaktiva kontroller får synlig ram (≥3:1). Dekorativa kort-/
   tabellramar lämnas ljusa (de är inte ensam indikator för en kontroll). */
input:not([type="checkbox"]):not([type="radio"]), select, textarea{ border-color:var(--border-strong); }

/* 1.4.3: primärknappar/-badges använder var(--accent)/var(--sdb) som bakgrund med
   VIT text. I mörkt läge är accenten ljus → vit text faller (2.2:1). Sätt en
   mättad blå (#2e6fb8) så vit text klarar 4.5:1 och matchar ljust läge. */
[data-theme="dark"] .spill-step,
[data-theme="dark"] .row-actions button.primary,
[data-theme="dark"] .mix-actions .primary,
[data-theme="dark"] .ov-actions .ov-close,
[data-theme="dark"] .filter-form .primary,
[data-theme="dark"] .cmp-table .cmp-section th,
[data-theme="dark"] .hdr-btn.primary,
[data-theme="dark"] .mode-switch button.active,
[data-theme="dark"] .recipe-box button,
[data-theme="dark"] .size-btn.active,
[data-theme="dark"] .seg button.on,
[data-theme="dark"] .toast,
[data-theme="dark"] .btn.primary,
[data-theme="dark"] .lgkbadge .lgk,
[data-theme="dark"] .atp-tag.now,
[data-theme="dark"] .card .actions button.primary,
[data-theme="dark"] .source-badge,
[data-theme="dark"] .threed-btn{
  background:#2e6fb8 !important; border-color:#2e6fb8 !important; color:#fff !important;
}
@media (prefers-reduced-motion:no-preference){
  a, button{ transition:color .12s ease, background-color .12s ease, border-color .12s ease; }
}
