/* ============================================================
   TEMA — lyst / mørkt, virker på ALLE portalsider
   Indlæses SIDST, så den vinder over style.css og portal.css.
   Mørk = standard (uændret udseende). Lys = body.portal-page.theme-light
   ============================================================ */

/* Mørke standardværdier for de delte komponenter */
:root {
  --inv-bg: #ffffff;            /* "inverteret" flade: hvid knap i mørkt tema */
  --inv-fg: #0a0a0a;
  --btn-2-bg: rgba(255, 255, 255, 0.03);
  --tone-ok: #8fe0b4;           /* grøn tekst der kan læses på mørk */
  --tone-warn: #f8d38f;
  --tone-bad: #f8a0a0;
  --tone-bg: rgba(120, 220, 160, 0.12);
}

/* ============ LYS ============ */
body.portal-page.theme-light {
  color-scheme: light;

  --bg: #f5f6f8;
  --bg-2: #eceef2;
  --surface: #ffffff;
  --surface-2: #f2f4f7;
  --border: #d7dae1;
  --border-2: #bfc4ce;
  --accent: #17191e;
  --accent-soft: rgba(23, 25, 30, 0.07);

  --text: #14161a;
  --text-2: #4a4f57;
  --text-3: #6a717c;

  --inv-bg: #17191e;
  --inv-fg: #ffffff;
  --btn-2-bg: #ffffff;

  --tone-ok: #0b7a45;
  --tone-warn: #8a5a00;
  --tone-bad: #b3261e;
  --tone-bg: rgba(11, 122, 69, 0.12);
}

/* ---------- Navigation og header ---------- */
body.portal-page.theme-light .nav.scrolled { background: rgba(245, 246, 248, 0.9); }
body.portal-page.theme-light .mobile-nav { background: rgba(245, 246, 248, 0.98); }
body.portal-page.theme-light .nav-links a:hover,
body.portal-page.theme-light .nav-links a.active { color: var(--text); background: rgba(23, 25, 30, 0.06); }
body.portal-page.theme-light .nav-login { color: var(--text-2); border-color: var(--border-2); }
body.portal-page.theme-light .nav-login:hover { color: var(--text); background: rgba(23, 25, 30, 0.05); }
body.portal-page.theme-light .logo-mark { background: var(--inv-bg); color: var(--inv-fg); }

/* ---------- Knapper ---------- */
body.portal-page.theme-light .btn-secondary { background: #ffffff; color: var(--text-2); border-color: var(--border-2); }
body.portal-page.theme-light .btn-secondary:hover { color: var(--text); border-color: var(--text-3); }
body.portal-page.theme-light .upload-btn { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); }

/* ---------- Flader ---------- */
body.portal-page.theme-light .drawer { background: var(--surface); border-left-color: var(--border); }
body.portal-page.theme-light .notif-panel { background: var(--surface); }
body.portal-page.theme-light .drawer-bg { background: rgba(20, 22, 26, 0.35); }
body.portal-page.theme-light .dropzone { background: var(--surface); }
body.portal-page.theme-light .dropzone.drag { border-color: var(--inv-bg); background: var(--surface-2); }

/* ---------- Status-badges: mørkere tekst så de kan læses på hvid ---------- */
/* Varm skala i lyst tema: sand -> rav -> salvie (ingen blaa i et bronze-tema) */
body.portal-page.theme-light .status-modtaget { color: #8a6a2f; border-color: rgba(138, 106, 47, 0.34); background: rgba(138, 106, 47, 0.07); }
body.portal-page.theme-light .status-i_produktion { color: #9a5f18; border-color: rgba(154, 95, 24, 0.34); background: rgba(154, 95, 24, 0.07); }
body.portal-page.theme-light .status-klar { color: #2f7a52; border-color: rgba(47, 122, 82, 0.32); background: rgba(47, 122, 82, 0.07); }
body.portal-page.theme-light .status-afvist { color: #a5493a; border-color: rgba(165, 73, 58, 0.32); background: rgba(165, 73, 58, 0.07); }

body.portal-page.theme-light .pay-badge.paid { background: var(--tone-bg); color: var(--tone-ok); border-color: rgba(11, 122, 69, 0.3); }
body.portal-page.theme-light .pay-badge.unpaid { background: rgba(179, 38, 30, 0.1); color: var(--tone-bad); border-color: rgba(179, 38, 30, 0.3); }
body.portal-page.theme-light .approve-badge { background: var(--tone-bg); color: var(--tone-ok); border-color: rgba(11, 122, 69, 0.3); }
body.portal-page.theme-light .sub-line strong.ok { color: var(--tone-ok); }
body.portal-page.theme-light .sub-line strong.warn { color: var(--tone-warn); }
body.portal-page.theme-light .q-note.good { background: var(--tone-bg); border-color: rgba(11, 122, 69, 0.28); color: var(--tone-ok); }
body.portal-page.theme-light .q-note.warn { background: rgba(138, 90, 0, 0.1); border-color: rgba(138, 90, 0, 0.28); color: var(--tone-warn); }
body.portal-page.theme-light .q-note.bad { background: rgba(179, 38, 30, 0.1); border-color: rgba(179, 38, 30, 0.28); color: var(--tone-bad); }
body.portal-page.theme-light .area-note { background: var(--tone-bg); color: var(--tone-ok); border: 1px solid rgba(11, 122, 69, 0.3); }
body.portal-page.theme-light .area-tag::before { background: var(--tone-ok); }
body.portal-page.theme-light .auth-area { background: var(--tone-bg); border-color: rgba(11, 122, 69, 0.28); color: var(--tone-ok); }
body.portal-page.theme-light .auth-area::before { background: var(--tone-ok); }
body.portal-page.theme-light .auth-others { border-top-color: rgba(23, 25, 30, 0.09); }
body.portal-page.theme-light .ao-hr { border-top-color: rgba(23, 25, 30, 0.08); }
body.portal-page.theme-light .auth-err.show { background: rgba(179, 38, 30, 0.08); border-color: rgba(179, 38, 30, 0.3); color: var(--tone-bad); }
body.portal-page.theme-light .auth-ok.show { background: var(--tone-bg); border-color: rgba(11, 122, 69, 0.3); color: var(--tone-ok); }
body.portal-page.theme-light .notif-badge { background: var(--tone-bad); color: #ffffff; }
body.portal-page.theme-light .notif-item.unread { background: rgba(23, 25, 30, 0.04); }
body.portal-page.theme-light .btn-danger,
body.portal-page.theme-light .btn.danger { color: var(--tone-bad); border-color: rgba(179, 38, 30, 0.35); }

/* ---------- Skygger: bløde og grå i stedet for hvide glød ---------- */
body.portal-page.theme-light .auth-card { box-shadow: 0 30px 80px -48px rgba(20, 22, 26, 0.3); }
body.portal-page.theme-light .drawer { box-shadow: -20px 0 50px -34px rgba(20, 22, 26, 0.28); }
body.portal-page.theme-light .notif-panel { box-shadow: 0 20px 50px -24px rgba(20, 22, 26, 0.24); }
body.portal-page.theme-light .stat-card,
body.portal-page.theme-light .case-card { box-shadow: 0 12px 32px -24px rgba(20, 22, 26, 0.25); }
body.portal-page.theme-light .bv-chat,
body.portal-page.theme-light .bv-chat-fab { box-shadow: 0 20px 60px -26px rgba(20, 22, 26, 0.3); }

/* ---------- Rullebjælke og markering ---------- */
body.portal-page.theme-light ::-webkit-scrollbar-thumb { background: #c6cad2; }
body.portal-page.theme-light ::-webkit-scrollbar-thumb:hover { background: #aeb4bf; }
body.portal-page.theme-light ::selection { background: rgba(23, 25, 30, 0.16); color: var(--text); }

/* ---------- Video/thumbnail: altid mørk baggrund ---------- */
body.portal-page.theme-light .thumb,
body.portal-page.theme-light .result-video video { background: #000; }

/* ============================================================
   TEMA-KNAP — sidder i headeren, højre side
   ============================================================ */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px 0 10px;
  border: 1px solid var(--border-2); border-radius: 999px;
  background: var(--surface); color: var(--text-2);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-3); }
.theme-toggle svg { width: 15px; height: 15px; flex: none; }
.theme-toggle .tt-moon { display: none; }
body.portal-page.theme-light .theme-toggle .tt-moon { display: block; }
body.portal-page.theme-light .theme-toggle .tt-sun { display: none; }
body.portal-page.theme-light .theme-toggle { background: #ffffff; }

/* På smalle skærme: kun ikonet */
@media (max-width: 760px) {
  .theme-toggle { padding: 0 10px; }
  .theme-toggle .tt-label { display: none; }
}