/* ═══ 0. TEMALAGRET (f.d. static/theme.css) ══════════════════════════ 2026-09-03: static/theme.css slogs in har och filen flyttades till docs/theme.css (raderas aldrig). Bas.html laddade forut theme.css → theme.js → casters.css; nu bara theme.js → casters.css. INGENTING ÄR OMSKRIVET. Avsnittet ar theme.css ORDAGRANT, inklistrat FORE allt annat i filen — exakt den plats den hade i kaskaden forut. Darmed ar bade ljust och morkt lage bit for bit oforandrat: casters.css avsnitt 1-18 ligger fortfarande EFTER temalagret och vinner dar de krockar, precis som avsnitt 17 ("FORETRADE FRAMFOR TEMALAGRET") beskriver. VAD LAGRET FORTFARANDE GOR (matt 2026-09-03, computed styles i Chromium): av 47 dark-variabler i lagret skriver casters.css over 24 med egna varden (bl.a. --navy, som ar LJUS TEXT har och en MORK YTA i casters-paletten). 23 lever vidare och anvands av mallarna: --white --border --text --ink2 --ink3 --brand-yta --line3 --yta2 --yta6 --ton-gron2 --ton-rod --ton-gul2 --ton-varm --ton-varm2 --txt-gron --txt-gron2 --txt-rod --txt-rod2 --txt-orange --txt-amber --txt-amber2 --txt-bla --navy2. Dartill lever .temavaljare (knappen theme.js ritar), placeholder-fargerna och :root{--card:#fff}-skyddsnatet. Lagret ar alltsa INTE dod kod. NASTA STEG (inte gjort har): plocka bort de 24 overskrivna variablerna och de regler avsnitt 17 redan tar tillbaka. Det ar en beteendeandring och kraver egen matning — den har ronden flyttade bara filen. static/theme.js AR KVAR som egen fil: den satter data-theme i fore forsta malningen och ritar temavaljaren. CSS kan inte gora nagot av det. ═════════════════════════════════════════════════════════════════════════════ */ /* theme.css — mörkt läge för Skattklart (Boss 2026-08-26: "vi måste ha ett dark mode"). * * VARFÖR SÅ HÄR: sajten har ingen bas-mall — 15 mallar bär varsin kopia av samma * palett i ett eget :root. Den här filen skriver över paletten från ETT ställe. * `html[data-theme="dark"]` har specificitet (0,1,1) mot :root (0,1,0) och vinner * därför oavsett i vilken ordning filen laddas. * * KNUTEN: --navy används till två motsatta saker — textfärg (107 ggr) och bakgrund * (54 ggr, 31 unika selektorer). CSS kan inte skilja dem åt via variabeln. Därför: * --navy blir LJUS här (så alla 107 textställen blir läsbara), och de selektorer * som använder navy som BAKGRUND får en explicit mörk yta längre ner. * Läggs mörkt läge till på fler sidor är det den listan som ska växa. */ /* ── Skyddsnat for ljust lage (2026-09-02) ───────────────────────────────── * Tre mallar tappar ett semikolon i sin egen :root — trial.html rad 33, * annan-plattform.html rad 33, plattform.html rad 32 och * admin_plattformar.html rad 13 skriver "--red:#dc2626 --card:#fff;". * Uppmatt i Chrome: --card blir da ALDRIG definierad i ljust lage (tom * strang), sa varje background:var(--card) ar ogiltig och korten blir * GENOMSKINLIGA — texten hamnar pa den gra sidbakgrunden i stallet for pa * vitt och tappar 2 steg kontrast. Morkt lage raddas av att blocket nedan * definierar --card, sa buggen syns bara i ljust lage. * Den har raden ar ett SKYDDSNAT, inte fixen: alla 14 mallar som deklarerar * --card sjalva satter #fff, och deras egna :root ligger senare i kaskaden * med samma specificitet -> de vinner och ingenting rors. Bara de mallar * dar deklarationen ar trasig faller tillbaka hit. Den riktiga fixen ar * semikolonet i mallen. (dashboard/404/500 laddar inte den har filen.) */ :root { --card: #fff; } html[data-theme="dark"] { /* Ytor: sidbakgrund mörkast, kort ett steg ljusare så de lyfter */ --light: #0f1420; /* sidbakgrund */ --bg: #0b0f18; --card: #161d2c; /* kort/paneler */ --white: #161d2c; --line: #26304a; /* ramar */ --border:#26304a; /* Text. --navy är brödtextens färg i ljust läge → måste bli ljus här. */ --navy: #e8edf7; --text: #e8edf7; --ink: #e8edf7; --ink2: #aab4cc; --ink3: #7a849c; --mut: #9aa4bc; /* dämpad text — mörkare än brödtext, ljusare än ram */ --mut2: #7a8398; /* Accenter: guldet bär varumärket och funkar mot mörkt. Grönt/rött lyfts ett par steg — originalen (#0a7c55 / #c2410c) blir sotiga mot mörk bakgrund. */ --gold: #f0b429; --gold2: #d99e1e; --green: #34d399; --red: #fb7185; /* Egen variabel: den mörka ytan som ERSÄTTER navy-som-bakgrund nedan. */ --brand-yta: #1f2a44; color-scheme: dark; /* ger mörka scrollbars, formkontroller, autofyll */ } html[data-theme="dark"] body { background: var(--light); color: var(--navy); } /* ── Selektorer som använder navy som BAKGRUND ────────────────────────────── * Utan de här blir de ljusa fläckar, eftersom --navy nu är ljus. * dashboard.html (6 st): */ html[data-theme="dark"] .sidnav a.on, html[data-theme="dark"] .btn-navy, html[data-theme="dark"] .kpi-kort.mork, html[data-theme="dark"] .fchip.on, html[data-theme="dark"] .panel-topp, html[data-theme="dark"] .matare i { background: var(--brand-yta); } /* Dessa sätter color:#fff hårdkodat i ljust läge — det håller mot --brand-yta, * men .kpi-kort.mork och .matare i ärver och behöver hjälp. */ html[data-theme="dark"] .kpi-kort.mork, html[data-theme="dark"] .kpi-kort.mork * { color: #e8edf7; } /* Hårdkodat vitt som blir bländande mot mörk bakgrund */ html[data-theme="dark"] [style*="background:#fff"] { background: var(--card) !important; } /* ── Växlingsknappen (ritas av theme.js) ─────────────────────────────────── */ .temavaljare { position: fixed; right: 16px; bottom: 16px; z-index: 9999; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--navy); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; transition: transform .15s ease; } .temavaljare:hover { transform: scale(1.08); } .temavaljare:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } @media print { .temavaljare { display: none; } } /* ── Hårdkodade färger som går förbi paletten ─────────────────────────────── * 38 regler i dashboard.html sätter bakgrund direkt (#fff, #eef1f7, badge-toner) * i stället för via var(). Variabelbytet ovan når dem inte — de måste pekas ut. * Grupperade efter vilken yta de ska bli, inte efter var de råkar sitta. */ /* Kortytor — allt som var vitt */ html[data-theme="dark"] .sidnav, html[data-theme="dark"] .sek-topp .sek-lank, html[data-theme="dark"] .arvaljare, html[data-theme="dark"] .btn-outline, html[data-theme="dark"] .btn-fara, html[data-theme="dark"] .todo-rad, html[data-theme="dark"] .todo-klar, html[data-theme="dark"] .fchip, html[data-theme="dark"] .panel-fot, html[data-theme="dark"] .modal, html[data-theme="dark"] .dok, html[data-theme="dark"] select, html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=number], html[data-theme="dark"] input[type=date], html[data-theme="dark"] textarea { background: var(--card); color: var(--navy); border-color: var(--line); } /* Dämpade ytor — det som var ljusgrått (#eef1f7, #f2f5fb, #f8f9fd, #f0f2f8) */ html[data-theme="dark"] .sidnav a .n, html[data-theme="dark"] .todo-ikon, html[data-theme="dark"] .badge-kat, html[data-theme="dark"] .badge-draft, html[data-theme="dark"] .filbild, html[data-theme="dark"] .filpdf, html[data-theme="dark"] .tips-kort { background: #1e2637; color: var(--mut); } /* Hover-toner */ html[data-theme="dark"] tbody tr:hover td, html[data-theme="dark"] .kvitto-rad:hover { background: #1c2434; } html[data-theme="dark"] .btn-fara:hover { background: #3a1f1c; } html[data-theme="dark"] .dropzon:hover, html[data-theme="dark"] .dropzon.over, html[data-theme="dark"] .profil-chip input:checked + span { background: #2b2417; } html[data-theme="dark"] .sidnav a:hover { background: #1e2637; color: var(--navy); } /* Statusbrickor: pastellerna blir mörka toner med ljus text */ html[data-theme="dark"] .badge-signed, html[data-theme="dark"] .badge-ok, html[data-theme="dark"] .chip-plan { background: #14372a; color: #6ee7b7; } html[data-theme="dark"] .badge-ready { background: #3a3316; color: #fcd34d; } html[data-theme="dark"] .badge-review { background: #17304d; color: #93c5fd; } html[data-theme="dark"] .badge-analyzing { background: #2c2450; color: #c4b5fd; } html[data-theme="dark"] .badge-brist, html[data-theme="dark"] .todo-rad.rod .todo-ikon { background: #3a1f1c; color: #fca5a5; } html[data-theme="dark"] .todo-rad.gul .todo-ikon { background: #3a3316; color: #fcd34d; } html[data-theme="dark"] .todo-rad.info .todo-ikon { background: #17304d; color: #93c5fd; } /* Toppnaven: vit text på mörk brand-yta — den låg ljus och gjorde texten oläslig */ html[data-theme="dark"] .toppnav { background: var(--brand-yta); } html[data-theme="dark"] .nav-link, html[data-theme="dark"] .nav-namn-text { color: rgba(255,255,255,.86); } html[data-theme="dark"] .nav-link:hover { color: #fff; } /* Sidmenyn: --mut var för mörk mot kortytan (kontrast 2.5) */ html[data-theme="dark"] .sn-txt, html[data-theme="dark"] .sn-ikon { color: #c3cbdd; } /* ── Rättelser efter kontrastmätning ──────────────────────────────────────── * Mätt, inte gissat: elementen nedan hade kontrast 1.0-1.6 mot sin bakgrund. */ /* Toppnaven är ett BART