/* ==========================================================================
   Nye Veier brand-tema — lys og mørk modus
   Kilde: Nye Veier Design System (visuell profil 2026)
   - Primærfarge: #fd3504 (orange) — stage for black type
   - Sekundærfarge: #004b50 (deep teal)
   - Inter (variable)
   - Skarpe hjørner (4–8 px), flate flater, ingen gradienter

   Temaet er alltid på (ingen "modern"-variant lenger). Det som varierer er
   modus: <html data-theme="light"> eller <html data-theme="dark">, satt av
   bootstrap-skriptet i base.html.

   Oppbygging:
     1. Tokens        — alle farger som varierer med modus
     2. Grunnlag      — body, typografi, logo
     3. Chrome        — topbar, footer
     4. Komponenter   — knapper, kort, skjema, fokus
     5. Utility-kart  — Tailwind-klassene i templatene mappes til tokens
     6. Kart/Leaflet + Chart.js-flater
     7. Utskrift      — rapporten er alltid lys

   Lystokens er satt til nøyaktig de verdiene appen hadde før mørk modus kom
   (Tailwind-grå der brandtemaet ikke allerede overstyrte), slik at lys modus
   ser identisk ut. Endrer du et token, endrer du begge moduser samtidig.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Merkevarefarger (like i begge moduser) ---- */
  --brand-orange:        #fd3504;
  --brand-orange-press:  #d92c00;
  --brand-teal-dark:     #004b50;
  --brand-teal-light:    #ccdcdc;
  --brand-red:           #dc0000;
  --brand-black:         #000000;
  --brand-gray-dark:     #737373;
  --brand-gray-mid:      #b4b4b4;
  --brand-gray-light:    #dcdcdc;

  /* ---- Flater ---- */
  --bg:                #f5f5f5;  /* sidebakgrunn */
  --surface:           #ffffff;  /* kort, topbar, paneler (bg-white) */
  --surface-muted:     #f9fafb;  /* bg-gray-50 */
  --surface-sunken:    #f3f4f6;  /* bg-gray-100 */
  --surface-strong:    #e5e7eb;  /* bg-gray-200 */
  --surface-stronger:  #d1d5db;  /* bg-gray-300 */
  --surface-tint:      #f5f5f5;  /* nøytraliserte tint-kort i main */
  --surface-danger:    #fff5f5;  /* bg-red-50 o.l. */

  /* ---- Kantlinjer ---- */
  --border-soft:       #f3f4f6;  /* border-gray-100 */
  --border:            #e5e7eb;  /* border-gray-200 */
  --border-strong:     #d1d5db;  /* border-gray-300 */
  --border-brand:      #b4b4b4;  /* border-nv-100/200 i brandprofilen */
  --border-emphasis:   #000000;  /* border-nv-400 / hover */

  /* ---- Tekst ---- */
  --text:              #111827;  /* text-gray-900 */
  --text-800:          #1f2937;
  --text-700:          #374151;
  --text-600:          #4b5563;
  --text-500:          #6b7280;
  --text-400:          #9ca3af;
  --text-300:          #d1d5db;
  --text-body:         #000000;  /* body-tekst i brandprofilen */
  --text-inverse:      #ffffff;

  /* ---- Aksent ---- */
  --accent:            var(--brand-orange);
  --accent-press:      var(--brand-orange-press);
  --accent-text:       var(--brand-orange);
  --on-accent:         #000000;
  --accent-soft:       var(--brand-teal-light);

  /* ---- Institusjonell teal (bl.a. footer og notis-kort) ---- */
  --teal:              var(--brand-teal-dark);
  --on-teal:           #ffffff;

  /* ---- Semantiske tekstfarger ---- */
  --pos:               #047857;  /* emerald-700 */
  --pos-soft:          #16a34a;
  --warn:              #92400e;  /* amber-800 */
  --warn-strong:       #b45309;
  --danger:            #b91c1c;  /* red-700 */
  --danger-strong:     #dc2626;
  --danger-border:     #fecaca;
  --danger-soft:       #fecaca;  /* utfylte prikker/brikker, ikke flater */
  --info:              var(--brand-teal-dark);

  /* ---- Skygger (flate flater i brandprofilen → ingen) ---- */
  --ring-accent:       rgba(253, 53, 4, 0.30);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg:                #131315;
  --surface:           #1c1c1f;
  --surface-muted:     #202024;
  --surface-sunken:    #26262b;
  --surface-strong:    #2f2f35;
  --surface-stronger:  #3a3a41;
  --surface-tint:      #202024;
  --surface-danger:    #2c1614;

  --border-soft:       #2a2a2f;
  --border:            #33333a;
  --border-strong:     #43434b;
  --border-brand:      #4a4a52;
  --border-emphasis:   #f4f4f5;

  --text:              #f4f4f5;
  --text-800:          #ececee;
  --text-700:          #dcdce0;
  --text-600:          #bcbcc4;
  --text-500:          #9a9aa4;
  --text-400:          #7d7d87;
  --text-300:          #6f6f7a;  /* løftet litt over lys modus: rene #d1d5db-ekvivalenter blir uleselige mørkt */
  --text-body:         #f4f4f5;
  --text-inverse:      #ffffff;

  /* Ren #fd3504 blir litt tung mot mørk flate; lysner til AA-nivå på tekst. */
  --accent-text:       #ff6a3d;
  --accent-soft:       #12363a;

  --teal:              #0a5257;

  --pos:               #4ade80;
  --pos-soft:          #34d399;
  --warn:              #f0c069;
  --warn-strong:       #fbbf24;
  --danger:            #ff8a75;
  --danger-strong:     #ff6b52;
  --danger-border:     #5a2a24;
  --danger-soft:       #7a3128;
  --info:              #7fd4d8;

  --ring-accent:       rgba(253, 53, 4, 0.45);
}

/* ==========================================================================
   2. Grunnlag
   ========================================================================== */

/* body har class="bg-gray-50" fra base.html. Attributt-selektoren gir oss
   høyere spesifisitet enn den klassen, ellers vinner utility-mappingen og
   sidebakgrunnen blir feil (lys grå i stedet for brandflaten). */
body[class] {
  background-color: var(--bg) !important;
  color: var(--text-body);
  letter-spacing: 0;
}

main h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

main h2,
main h3 {
  letter-spacing: -0.01em;
}

/* Eyebrow / labels */
.uppercase.tracking-wide {
  letter-spacing: 0.12em !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   3. Chrome — topbar og footer
   ========================================================================== */

header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

header > div > div {
  height: 64px;
}

header nav a {
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  padding-bottom: 10px !important;
  padding-top: 10px !important;
}
header nav a.bg-nv-50 {
  background: transparent !important;
  color: var(--text) !important;
  border-bottom-color: var(--brand-orange) !important;
}
header nav a:hover {
  background: transparent !important;
  color: var(--accent-text) !important;
}

/* Modusbryteren i topbaren skal ikke arve nav-lenkenes understrek. */
header nav button.modus-bryter {
  border-bottom: none !important;
  border-radius: 4px !important;
  padding: 0 !important;
  color: var(--text-500);
}
header nav button.modus-bryter:hover {
  color: var(--accent-text);
  background: var(--surface-sunken) !important;
}

footer {
  background-color: var(--teal) !important;
  border-top: none !important;
  margin-top: 96px;
}
footer * {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ==========================================================================
   4. Komponenter
   ========================================================================== */

/* ---- Hjørner og flate flater ---- */

.rounded-2xl,
.rounded-xl { border-radius: 8px !important; }
.rounded-lg,
.rounded-md { border-radius: 4px !important; }

.shadow-sm,
.shadow-md,
.hover\:shadow-md:hover { box-shadow: none !important; }

/* ---- Skjema ---- */

input[type="text"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  border-radius: 4px !important;
}

/* <select> får ikke høyden sin fra CSS så lenge den native widgeten er i
   bruk. Chrome ignorerer line-height og tar høyden fra fontens metrikker;
   Safari går lenger og lar menylisten overstyre både min-height og vertikal
   padding. Resultatet er et select som er noen piksler lavere enn et input
   med nøyaktig samme klasser, godt synlig når de står side om side i en rad.

   Fiksen er å slå av den native utformingen og male boksen selv, slik at
   select-en følger samme boksmodell som et input. Pilen må da tegnes av oss —
   den er en innebygd SVG, med egen farge i mørk modus.

   min-height gjenskaper inputens formel: line-height fra text-sm (1,25rem)
   + py-2 over og under (2 × 0,5rem) + de to rammene (2px) = 38px.

   Scopet til nøyaktig denne klassekombinasjonen, slik at de kompakte
   select-feltene med py-1.5 og py-0.5 beholder sin egen høyde. */
select.text-sm.py-2 {
  -webkit-appearance: none;
  appearance: none;
  min-height: calc(1.25rem + 1rem + 2px);
  /* Plass til pilen, som ligger der den native ville stått. */
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 1rem 1rem;
}

/* Den generelle dark-regelen under setter background-color, ikke -image, så
   pilen må få sin egen farge her for å være lesbar mot mørk bakgrunn. */
[data-theme="dark"] select.text-sm.py-2 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--surface-sunken) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--text-400) !important; }

/* Alpine-skjemaene bruker <option> med samme farger som feltet. */
[data-theme="dark"] option { background-color: var(--surface-sunken); color: var(--text); }

/* Avkryssingsbokser og radioknapper tegnes av nettleseren; color-scheme gjør
   grunnjobben, men accent-color gir dem merkevarefargen i begge moduser. */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--brand-orange); }

/* ---- Fokus-ring ---- */

*:focus-visible {
  outline: 2px solid var(--brand-orange) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* ==========================================================================
   5. Utility-kart
   Templatene er skrevet med Tailwinds grå- og fargeskala. I stedet for å
   skrive om hver template til dark:-varianter mapper vi klassene som faktisk
   brukes til tokens, én gang. Lysverdiene er identiske med Tailwinds egne,
   så lys modus er uendret.
   Legger du til en ny fargeklasse i en template må den mappes her, ellers
   blir den hengende igjen i lys drakt i mørk modus.
   ========================================================================== */

/* ---- Flater ---- */

.bg-white,
.hover\:bg-white:hover,
[class*="bg-white"] { background-color: var(--surface) !important; }

.bg-gray-50,
.hover\:bg-gray-50:hover { background-color: var(--surface-muted) !important; }

.bg-gray-100,
.hover\:bg-gray-100:hover { background-color: var(--surface-sunken) !important; }

.bg-gray-200 { background-color: var(--surface-strong) !important; }
.bg-gray-300 { background-color: var(--surface-stronger) !important; }

/* Kodeblokkene (bg-gray-900) er mørke i begge moduser og skal ikke mappes. */

/* ---- Kantlinjer ---- */

.border-gray-100,
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-soft) !important; }

.border-gray-200 { border-color: var(--border) !important; }

.border-gray-300,
.hover\:border-gray-300:hover { border-color: var(--border-strong) !important; }

.border-gray-400,
.hover\:border-gray-400:hover { border-color: var(--border-emphasis) !important; }

/* ---- Tekst ---- */

.text-gray-900,
.hover\:text-gray-900:hover { color: var(--text) !important; }
.text-gray-800,
.hover\:text-gray-800:hover { color: var(--text-800) !important; }
.text-gray-700,
.hover\:text-gray-700:hover { color: var(--text-700) !important; }
.text-gray-600,
.hover\:text-gray-600:hover { color: var(--text-600) !important; }
.text-gray-500 { color: var(--text-500) !important; }
.text-gray-400 { color: var(--text-400) !important; }
.text-gray-300 { color: var(--text-300) !important; }

/* ---- Aksent: nv-* ---- */

.text-nv-500,
.text-nv-600,
.text-nv-700,
.text-nv-800,
.group-hover\:text-nv-500,
.group:hover .group-hover\:text-nv-500 { color: var(--accent-text) !important; }
.hover\:text-nv-700:hover { color: var(--accent-press) !important; }

.bg-nv-600,
.bg-nv-700,
button.bg-nv-600 {
  background-color: var(--brand-orange) !important;
  color: var(--on-accent) !important;
  border-radius: 4px !important;
}
.hover\:bg-nv-700:hover,
button.bg-nv-600:hover {
  background-color: var(--brand-orange-press) !important;
  color: var(--on-accent) !important;
}

.bg-nv-50,
.hover\:bg-nv-50:hover { background-color: var(--surface) !important; }
.bg-nv-100,
.group:hover .group-hover\:bg-nv-100 { background-color: var(--accent-soft) !important; }

.border-nv-100,
.border-nv-200,
.border-nv-300 { border-color: var(--border-brand) !important; }
.border-nv-400,
.hover\:border-nv-400:hover { border-color: var(--border-emphasis) !important; }
.border-nv-500,
.border-nv-600,
.focus\:border-nv-500:focus { border-color: var(--brand-orange) !important; }
.ring-nv-200 { --tw-ring-color: var(--ring-accent) !important; }
.ring-nv-500,
.focus\:ring-nv-500:focus { --tw-ring-color: var(--ring-accent) !important; }

/* Online-indikator-prikker (forsidehero "Møt NORA" + status-pillen):
   klassisk grønn for å signalisere online-status, i begge moduser. */
.bg-nv-400 { background-color: #4ade80 !important; }
.bg-nv-500 { background-color: #16a34a !important; }

/* ---- Aksent: orange-* (kart- og eksportknapper) ---- */

.bg-orange-600,
.bg-orange-700,
.bg-orange-500 { background-color: var(--brand-orange) !important; color: var(--on-accent) !important; }
.hover\:bg-orange-700:hover { background-color: var(--brand-orange-press) !important; color: var(--on-accent) !important; }
.bg-orange-100,
.group:hover .group-hover\:bg-orange-100 { background-color: var(--accent-soft) !important; }
.text-orange-500,
.text-orange-600,
.text-orange-700,
.text-orange-800,
.group:hover .group-hover\:text-orange-500 { color: var(--accent-text) !important; }
.hover\:text-orange-700:hover,
.hover\:text-orange-800:hover { color: var(--accent-press) !important; }
.border-orange-200 { border-color: var(--border-brand) !important; }
.border-orange-500,
.border-orange-600,
.focus\:border-orange-500:focus { border-color: var(--brand-orange) !important; }
.ring-orange-500,
.focus\:ring-orange-500:focus { --tw-ring-color: var(--ring-accent) !important; }

/* ---- Institusjonell blå → teal ---- */

.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-blue-800,
.text-blue-900,
.group:hover .group-hover\:text-blue-500 { color: var(--info) !important; }
.hover\:text-blue-800:hover,
.hover\:text-blue-900:hover { color: var(--info) !important; }
.text-blue-300 { color: var(--info) !important; }
.bg-blue-600,
.bg-blue-700 { background-color: var(--teal) !important; color: var(--on-teal) !important; }
.hover\:bg-blue-700:hover { background-color: var(--teal) !important; }
.bg-blue-100,
.group:hover .group-hover\:bg-blue-100 { background-color: var(--accent-soft) !important; }
.border-blue-100,
.border-blue-200 { border-color: var(--border) !important; }
.border-blue-500,
.focus\:border-blue-500:focus { border-color: var(--brand-orange) !important; }
.focus\:ring-blue-100:focus { --tw-ring-color: var(--ring-accent) !important; }

/* ---- Grønn / positiv ---- */

.text-emerald-700,
.text-emerald-800,
.text-emerald-900,
.text-green-600 { color: var(--pos) !important; }
.text-emerald-300,
.text-green-300 { color: #86efac !important; }  /* står i kodeblokk med fast mørk bakgrunn */
.bg-emerald-600,
.bg-emerald-700 { background-color: var(--pos) !important; }
.border-emerald-100,
.border-emerald-200,
.border-green-200 { border-color: var(--border) !important; }
.border-emerald-500,
.focus\:border-emerald-500:focus { border-color: var(--brand-orange) !important; }

/* ---- Varsel / gult ---- */

.text-amber-600,
.text-amber-700 { color: var(--warn-strong) !important; }
.text-amber-800,
.text-amber-900 { color: var(--warn) !important; }
.border-amber-100,
.border-amber-200,
.border-amber-300,
.border-yellow-200 { border-color: var(--border) !important; }

/* ---- Feil / rødt ---- */

.text-red-500,
.text-red-600,
.hover\:text-red-500:hover { color: var(--danger-strong) !important; }
.text-red-700,
.text-red-800,
.text-rose-700,
.text-rose-800 { color: var(--danger) !important; }
.text-red-300 { color: var(--danger) !important; }
.bg-red-500,
.bg-rose-600 { background-color: var(--brand-red) !important; color: #fff !important; }
/* Røde brikker (av/på-prikker i kartfilteret) skal beholde metningen —
   bare flatene bak dem dempes. */
.bg-red-100,
.bg-red-200 { background-color: var(--danger-soft) !important; }
.hover\:bg-red-100:hover { background-color: var(--surface-danger) !important; }
.border-red-100,
.border-red-200,
.border-red-300,
.border-rose-200 { border-color: var(--danger-border) !important; }
.border-red-500,
.border-rose-500,
.focus\:border-red-500:focus,
.focus\:border-rose-500:focus { border-color: var(--brand-red) !important; }
.focus\:ring-red-500:focus { --tw-ring-color: rgba(220, 0, 0, 0.35) !important; }

/* ---- Tintede kort i hovedinnholdet ----
   Brandprofilen har flate, nøytrale kort framfor pastellfarger. Rødt beholder
   en svak tone fordi det er eneste feilsignal i skjemaene. */

main .bg-blue-50,
main .bg-orange-50,
main .bg-purple-50,
main .bg-emerald-50,
main .bg-green-50,
main .bg-amber-50,
main .bg-yellow-50 { background-color: var(--surface-tint) !important; }
main .bg-red-50,
main .bg-rose-50 { background-color: var(--surface-danger) !important; }

.text-purple-600,
.text-purple-900 { color: var(--text-600) !important; }
.border-purple-100 { border-color: var(--border) !important; }

/* ---- Notis-kortet på forsiden: teal flate med hvit type ---- */

main .bg-nv-50.border.border-nv-200 {
  background-color: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #fff !important;
}
main .bg-nv-50.border.border-nv-200 strong,
main .bg-nv-50.border.border-nv-200 svg,
main .bg-nv-50.border.border-nv-200 p,
main .bg-nv-50.border.border-nv-200 span { color: #fff !important; }

/* ---- Forsidehero — portrettramme i teal i stedet for grønn gradient ----
   Tailwinds gradient-utilities bruker fortsatt nv-paletten fra tailwind.config,
   så vi overstyrer variablene Tailwind genererer. */

main .from-nv-100 {
  --tw-gradient-from: var(--accent-soft) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(204 220 220 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via, var(--tw-gradient-to)) !important;
}
main .via-nv-50 {
  --tw-gradient-via: var(--surface) var(--tw-gradient-via-position) !important;
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

/* ---- Klasser med opasitet (f.eks. bg-blue-50/60) ----
   Tailwind lager egne klassenavn for hver opasitet, så de treffes ikke av
   mappingen over. De står bare her for mørk modus — i lys modus beholder de
   pastelltonen de alltid har hatt. */

[data-theme="dark"] [class*="bg-amber-50/"],
[data-theme="dark"] [class*="bg-blue-50/"],
[data-theme="dark"] [class*="bg-emerald-50/"],
[data-theme="dark"] [class*="bg-nv-50/"] { background-color: var(--surface-muted) !important; }
[data-theme="dark"] [class*="bg-rose-50/"],
[data-theme="dark"] [class*="bg-red-50/"] { background-color: var(--surface-danger) !important; }
[data-theme="dark"] [class*="text-blue-"] { color: var(--info) !important; }
[class*="ring-gray-200"] { --tw-ring-color: var(--border) !important; }


/* ==========================================================================
   6. Kart (Leaflet) og diagrammer
   Flisene er lyse kartdata og inverteres ikke — de dempes bare litt så de
   ikke blender mot mørk chrome. Alt som er vår egen UI oppå kartet følger
   tokens.
   ========================================================================== */

[data-theme="dark"] .leaflet-container { background: var(--surface-sunken) !important; }
[data-theme="dark"] .leaflet-tile { filter: brightness(0.82) contrast(1.05) saturate(0.9) !important; }

[data-theme="dark"] .leaflet-control-zoom a,
[data-theme="dark"] .leaflet-bar a {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .leaflet-control-zoom a:hover,
[data-theme="dark"] .leaflet-bar a:hover { background-color: var(--surface-sunken) !important; }

[data-theme="dark"] .leaflet-control-attribution {
  background: rgba(28, 28, 31, 0.85) !important;
  color: var(--text-500) !important;
}
[data-theme="dark"] .leaflet-control-attribution a { color: var(--accent-text) !important; }

[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* Tegnforklaringen ligger inne i kartet og settes med inline-stiler i
   kart.html, derfor !important her. */
[data-theme="dark"] .legend {
  background: rgba(28, 28, 31, 0.94) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  border: 1px solid var(--border) !important;
}
[data-theme="dark"] .legend div { color: var(--text) !important; }
[data-theme="dark"] .legend #legend-content,
[data-theme="dark"] .legend-bar-labels { color: var(--text-500) !important; }

/* ==========================================================================
   7. Utskrift — PDF-rapporten er alltid lys
   #pdf-rapport har sine egne tokens, men body/flatene rundt må tilbake til
   lys, ellers skriver nettleseren ut mørk bakgrunn.
   ========================================================================== */

@media print {
  :root,
  [data-theme="dark"] {
    color-scheme: light;
    --bg:            #ffffff;
    --surface:       #ffffff;
    --text:          #000000;
    --text-body:     #000000;
  }
  body { background: #fff !important; color: #000 !important; }
}

/* ==========================================================================
   8. Ikonet i modusbryteren
   Måne når du står i lys modus (klikk = gå mørkt), sol når du står mørkt.
   ========================================================================== */

.ikon-lys { display: none; }
.ikon-mork { display: block; }
[data-theme="dark"] .ikon-lys { display: block; }
[data-theme="dark"] .ikon-mork { display: none; }