/* Overlay-temaer. Dagslys = original. De andre er mørke glas-overlays. */

body.theme-skov {
  --navy: #d4b98e;
  --navy-2: #e6d3b0;
  --ink: #f4efe6;
  --muted: #ddd4c6;
  --line: rgba(212,185,142,.22);
  --bg: #0a1a16;
  --bg-2: #12241f;
  --card: rgba(8,14,12,.72);
  --card-solid: #0e1b17;
  --accent: #d4b98e;
  --accent-soft: rgba(212,185,142,.16);
  --ok: #7dcea0;
  --bad: #e07a6e;
  --ferie: #8fb4d4;
  --shadow: 0 22px 50px rgba(0,0,0,.35);
  --page-bg: #051f1a;
  --card-border: rgba(212,185,142,.18);
  --input-bg: rgba(5,12,10,.55);
  --hover: rgba(212,185,142,.1);
  --btn-bg: #d4b98e;
  --btn-fg: #1a140c;
  --amb-1: #051f1a;
  --amb-2: #0a2a22;
  --amb-3: #071612;
}

body.theme-nat {
  --navy: #e3d4b4;
  --navy-2: #f0e4c8;
  --ink: #f3f0ea;
  --muted: #d5d0c4;
  --line: rgba(227,212,180,.2);
  --bg: #0c121c;
  --bg-2: #151c2a;
  --card: rgba(10,14,22,.74);
  --card-solid: #121826;
  --accent: #e3d4b4;
  --accent-soft: rgba(227,212,180,.14);
  --ok: #7dcea0;
  --bad: #e07a6e;
  --ferie: #8fb4d4;
  --shadow: 0 22px 50px rgba(0,0,0,.38);
  --page-bg: #0b1220;
  --card-border: rgba(227,212,180,.16);
  --input-bg: rgba(8,12,20,.55);
  --hover: rgba(227,212,180,.1);
  --btn-bg: #e3d4b4;
  --btn-fg: #1a160e;
  --amb-1: #0b1220;
  --amb-2: #121a2c;
  --amb-3: #0a1018;
}

body.theme-kul {
  --navy: #c9844a;
  --navy-2: #e0a06a;
  --ink: #f3eee8;
  --muted: #d8cfc4;
  --line: rgba(201,132,74,.22);
  --bg: #141210;
  --bg-2: #1d1a17;
  --card: rgba(18,16,14,.76);
  --card-solid: #1a1714;
  --accent: #c9844a;
  --accent-soft: rgba(201,132,74,.16);
  --ok: #7dcea0;
  --bad: #e07a6e;
  --ferie: #8fb4d4;
  --shadow: 0 22px 50px rgba(0,0,0,.4);
  --page-bg: #12100e;
  --card-border: rgba(201,132,74,.18);
  --input-bg: rgba(10,8,6,.55);
  --hover: rgba(201,132,74,.1);
  --btn-bg: #c9844a;
  --btn-fg: #1a120c;
  --amb-1: #12100e;
  --amb-2: #1c1814;
  --amb-3: #0e0c0a;
}

body.theme-hav {
  --navy: #d8c4a4;
  --navy-2: #ead7b8;
  --ink: #eef3f4;
  --muted: #c5d4d5;
  --line: rgba(216,196,164,.2);
  --bg: #0a181c;
  --bg-2: #122428;
  --card: rgba(8,18,22,.74);
  --card-solid: #102024;
  --accent: #d8c4a4;
  --accent-soft: rgba(216,196,164,.14);
  --ok: #7dcea0;
  --bad: #e07a6e;
  --ferie: #8fb4d4;
  --shadow: 0 22px 50px rgba(0,0,0,.36);
  --page-bg: #071820;
  --card-border: rgba(216,196,164,.16);
  --input-bg: rgba(6,14,18,.55);
  --hover: rgba(216,196,164,.1);
  --btn-bg: #d8c4a4;
  --btn-fg: #16120c;
  --amb-1: #071820;
  --amb-2: #0c2430;
  --amb-3: #06141a;
}

body.theme-dark .ambiance {
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(255,255,255,.06), transparent 52%),
    radial-gradient(720px 460px at 100% 90%, rgba(212,185,142,.08), transparent 55%),
    linear-gradient(180deg, var(--amb-1) 0%, var(--amb-2) 48%, var(--amb-3) 100%);
}
body.theme-dark .ambiance .a1 {
  background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
}
body.theme-dark .ambiance .a2 {
  background: radial-gradient(circle, rgba(212,185,142,.12), transparent 70%);
}
body.theme-dark .ambiance .a3 {
  display: block;
  width: 40vw; height: 40vw; max-width: 420px; max-height: 420px;
  top: 40%; right: 8%;
  background: radial-gradient(circle, rgba(255,255,255,.04), transparent 70%);
}

body.theme-dark .card,
body.theme-dark .status-card,
body.theme-dark .notice,
body.theme-dark .sidemenu-box,
body.theme-dark .mini-stats div,
body.theme-dark .sheet-card {
  border-color: var(--card-border);
  background: var(--card);
}

body.theme-dark a { color: var(--navy-2); }
body.theme-dark a.btn { color: var(--btn-fg); }
body.theme-dark a.btn.ghost { color: var(--ink); }
body.theme-dark a.btn.danger { color: #fff; }
body.theme-dark .btn.ghost,
body.theme-dark button.ghost {
  background: rgba(255,255,255,.04);
  color: var(--ink);
  border-color: var(--line);
}
body.theme-dark .view-switch,
body.theme-dark .seg {
  background: rgba(255,255,255,.06);
}
body.theme-dark .sidemenu-links a:hover,
body.theme-dark .sidemenu-out:hover,
body.theme-dark .sidemenu-links .nav-fly-btn:hover {
  background: var(--hover);
}
body.theme-dark .nav-fly-card {
  background: var(--card-solid);
  border-color: var(--card-border);
}
body.theme-dark .flash {
  background: var(--accent-soft);
  color: var(--accent);
}
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
  background: var(--input-bg);
  color: var(--ink);
  border-color: var(--line);
}
body.theme-dark .site-nav a:hover { background: var(--hover); color: var(--ink); }
body.theme-dark .site-nav-in {
  background: var(--btn-bg) !important;
  color: var(--btn-fg) !important;
}
body.theme-dark .badge { background: var(--bg-2); color: var(--ink); }
body.theme-dark .chip,
body.theme-dark .choice {
  background: var(--input-bg);
  color: var(--ink);
  border-color: rgba(255,255,255,.28);
}
body.theme-dark .chip:has(input:checked),
body.theme-dark .choice:has(input:checked) {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-color: var(--btn-bg);
}
body.theme-dark .choice:has(input:checked) em {
  color: var(--btn-fg);
}
body.theme-dark .seg a { color: var(--ink); }
body.theme-dark .seg a.on,
body.theme-dark .view-switch a.on {
  background: var(--btn-bg);
  color: var(--btn-fg);
}
body.theme-dark .sidemenu-links a.on {
  background: var(--accent-soft);
  color: var(--accent);
}
body.theme-dark .note-box { background: var(--card-solid); color: var(--ink); }
body.theme-dark .login-screen .brand h1,
body.theme-dark .site-hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.03em;
}

body.theme-dark {
  color-scheme: dark;
  --on-bg: var(--btn-bg);
  --on-fg: var(--btn-fg);
  --weekend-bg: rgba(255,255,255,.08);
  --weekend-ink: #f6f1e8;
  --weekend-muted: #e4dccf;
  --weekend-line: rgba(255,255,255,.14);
  --weekend-ferie: rgba(80, 130, 180, .32);
  --weekend-sygdom: rgba(180, 70, 60, .3);
  --weekend-fridag: rgba(255,255,255,.1);
  --weekend-hellig: rgba(200, 160, 70, .28);
  --day-ferie: rgba(80, 130, 180, .28);
  --day-sygdom: rgba(180, 70, 60, .26);
  --day-fridag: rgba(255,255,255,.08);
  --day-hellig: rgba(200, 160, 70, .24);
}
body.theme-dark .day-row,
body.theme-dark .person,
body.theme-dark .mini-stats div,
body.theme-dark .card,
body.theme-dark .pay-hero {
  color: var(--ink);
}
body.theme-dark .day-row span,
body.theme-dark .day-row em small,
body.theme-dark .day-row strong small,
body.theme-dark .person .note-mark { color: #fff !important; opacity: 1; }
body.theme-dark .person .note-pop { color: #fffdf9 !important; opacity: 1; }
body.theme-dark .person span,
body.theme-dark .person-meta span,
body.theme-dark .lead,
body.theme-dark .hint,
body.theme-dark .eyebrow,
body.theme-dark .week-head,
body.theme-dark .mini-stats span,
body.theme-dark .pay-hero p,
body.theme-dark .pay-hero .pay-meta {
  color: var(--muted);
  opacity: 1;
}
body.theme-dark .day-row.weekend,
body.theme-dark .day-row.t-helligdag {
  color: var(--weekend-ink);
}
body.theme-dark .day-row.t-helligdag em { color: #f3d27a; }
body.theme-dark .day-row.t-work em { color: #8fe3b4; }
body.theme-dark .cal-cell.t-work { background: rgba(45, 122, 86, .28); color: var(--ink); }
body.theme-dark .cal-cell.t-ferie { background: rgba(80, 130, 180, .28); color: var(--ink); }
body.theme-dark .cal-cell.t-sygdom { background: rgba(180, 70, 60, .26); color: var(--ink); }
body.theme-dark .cal-cell.t-fridag { background: rgba(255,255,255,.08); color: var(--ink); }
body.theme-dark .cal-cell.t-helligdag { background: rgba(200, 160, 70, .24); color: var(--ink); }
body.theme-dark .cal-cell small { color: var(--muted); }
body.theme-dark .roster-wrap,
body.theme-dark .roster th,
body.theme-dark .roster td,
body.theme-dark .roster .roster-name {
  background: var(--card-solid);
  color: var(--ink);
}
body.theme-dark .roster thead th,
body.theme-dark .roster thead .roster-name,
body.theme-dark .roster td.is-weekend,
body.theme-dark .roster thead th.is-weekend {
  background: var(--bg-2);
}
body.theme-dark .shift-card,
body.theme-dark .shift-card strong,
body.theme-dark .shift-card em {
  color: var(--ink);
}
body.theme-dark.login-body .login-screen .card,
body.theme-dark .site-login .card {
  background: rgba(6,10,9,.7);
  border: 1px solid var(--card-border);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
body.theme-dark .site-price-rows div {
  background: #10241e;
  border-color: rgba(212,185,142,.35);
}
body.theme-dark .site-price-rows span,
body.theme-dark .site-price-rows em {
  color: #e8dfd0;
}
body.theme-dark .site-price-rows strong {
  color: #f6e7c8;
}
body.theme-dark .site-price .hint,
body.theme-dark .site-price .lead {
  color: #f0e8dc;
}

.theme-pick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.theme-swatch { margin: 0; }
.theme-swatch button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 0;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  background: var(--card);
  color: inherit;
  font: inherit;
  cursor: pointer;
  box-shadow: none;
}
.theme-swatch button:hover { transform: none; }
.theme-swatch.on button { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.theme-preview {
  display: block;
  width: 100%;
  height: 52px;
  border-radius: 10px;
  margin-bottom: 6px;
  border: 1px solid rgba(0,0,0,.08);
}
.theme-swatch strong { font-size: .92rem; }
.theme-swatch em {
  font-style: normal;
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.35;
}
.theme-now {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}
.theme-swatch.theme-dagslys .theme-preview {
  background: linear-gradient(135deg, #d7e3ee 0%, #efe8de 55%, #c45c26 100%);
}
.theme-swatch.theme-skov .theme-preview {
  background: linear-gradient(135deg, #051f1a 0%, #0a2a22 55%, #d4b98e 100%);
}
.theme-swatch.theme-nat .theme-preview {
  background: linear-gradient(135deg, #0b1220 0%, #121a2c 55%, #e3d4b4 100%);
}
.theme-swatch.theme-kul .theme-preview {
  background: linear-gradient(135deg, #12100e 0%, #1c1814 55%, #c9844a 100%);
}
.theme-swatch.theme-hav .theme-preview {
  background: linear-gradient(135deg, #071820 0%, #0c2430 55%, #d8c4a4 100%);
}
