/* =====================================================================
TeamApp — Fælles designsystem (design tokens)
---------------------------------------------------------------------
ÉN kilde til farver, skrifttyper og spacing for hele appen.
Alle sider linker til denne fil og bruger var(--token) frem for
hardcodede værdier.
Brug i hver side — RELATIV sti (virker både lokalt via file:// OG på server):
(rod-sider)
(undermappe-apper)
Undgå absolut "/design.css" — den brydes når man åbner filen direkte i browseren.
Bump ?v=N når tokens ændres (cache-busting — HTML er no-cache, CSS ikke).
TEMA: knappen skifter via klasse på (documentElement):
- default (ingen klasse) → MØRKT tema (:root)
- html.dark → MØRKT (eksplicit alias)
- html.light → LYST tema
Så både "tilføj .dark" og "tilføj .light"-knapper virker efter migration.
VÆRDIERNE er de hyppigst brugte i den eksisterende kode (Fase 1-audit),
så migrationen ændrer mindst muligt visuelt.
===================================================================== */
/* ---------- MØRKT tema (default) ---------- */
:root,
html.dark {
/* Flader */
--bg: #0d0d12;
--surface: #16161e;
--surface2: #1e1e28;
--card: #1e1e28;
/* Tekst */
--text: #f0f0f0;
--muted: #6b6b80;
--muted2: #9090b0;
/* Kanter */
--border: #2a2a38;
--border2: #363648;
/* Brand & semantiske farver */
--accent: #ff5c35; /* brandfarve — orange */
--green: #22c55e; /* succes */
--red: #ef4444; /* fare */
--blue: #3b9eff; /* info */
--yellow: #f59e0b; /* advarsel*/
--purple: #a855f7; /* accent 2*/
/* Bløde accent-flader (til badges/hover) */
--accent-soft: rgba(255, 92, 53, .12);
--green-dim: rgba(34, 197, 94, .12);
--red-soft: rgba(239, 68, 68, .12);
/* Kategori-farver — matcher forsidens (index.html) kort-kategorier,
bruges i sidebar-navigationens logo + aktiv-tilstand (docs/design-system.md) */
--cat-coaching: #e6483f;
--cat-teamplay: #2f6fed;
--cat-ressourcer: #2bb3a3;
--cat-oekonomi: #f2b705;
--cat-coaching-soft: rgba(230, 72, 63, .12);
--cat-teamplay-soft: rgba(47, 111, 237, .12);
--cat-ressourcer-soft: rgba(43, 179, 163, .12);
--cat-oekonomi-soft: rgba(242, 183, 5, .12);
}
/* ---------- LYST tema (html.light) ---------- */
html.light {
--bg: #f4f3f0;
--surface: #ffffff;
--surface2: #f0eeea;
--card: #f0eeea;
--text: #1a1a1a;
--muted: #888880;
--muted2: #666660;
--border: #e0ddd6;
--border2: #ccc9c0;
--accent: #e8461e; /* mørkere orange på lys baggrund */
--green: #1a8a4a;
--red: #c0392b;
--blue: #1a6fc4;
--yellow: #c49a0a;
--purple: #7c3aed;
--accent-soft: rgba(232, 70, 30, .10);
--green-dim: rgba(26, 138, 74, .12);
--red-soft: rgba(192, 57, 43, .12);
--cat-coaching: #c9392f;
--cat-teamplay: #1f56c4;
--cat-ressourcer: #1f8a7d;
--cat-oekonomi: #c49a04;
--cat-coaching-soft: rgba(201, 57, 47, .10);
--cat-teamplay-soft: rgba(31, 86, 196, .10);
--cat-ressourcer-soft: rgba(31, 138, 125, .10);
--cat-oekonomi-soft: rgba(196, 154, 4, .10);
}
/* ---------- Typografi (temauafhængig) ---------- */
:root {
--font: 'Space Grotesk', sans-serif; /* brødtekst */
--font-overskrift:'Outfit', sans-serif; /* overskrifter */
--mono: 'DM Mono', monospace; /* tal/kode/monospace*/
/* Udfaset: Teko, Inter, Space Mono — brug ikke i nye sider */
}
/* ---------- Spacing & radius (valgfrit, til nye komponenter) ---------- */
:root {
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 16px;
--sp-4: 24px;
--sp-5: 40px;
--radius: 10px;
--radius-stor: 16px;
}
/* Fonte indlæses fortsat pr. side via til Google Fonts.
Sørg for at alle tre er med i :
Space Grotesk, Outfit, DM Mono. */
/* ---------- Tilgængelighed (fokus) ---------- */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
/* =====================================================================
Sidebar-navigation (delt komponent — se docs/design-system.md)
Hver side sætter sin egen --sb-accent/--sb-accent-soft på :root for at
farve logo + aktiv nav-tilstand efter sin forside-kategori, fx:
:root { --sb-accent: var(--cat-teamplay); --sb-accent-soft: var(--cat-teamplay-soft); }
Uden en side-override falder begge tilbage til standard brand-orange.
===================================================================== */
:root {
--sb-accent: var(--accent);
--sb-accent-soft: var(--accent-soft);
}
.layout { display:flex; min-height:100vh; }
.sidebar {
width:240px; flex-shrink:0; background:var(--surface);
border-right:1px solid var(--border); display:flex; flex-direction:column;
position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar-logo { padding:24px 20px 20px; border-bottom:1px solid var(--border); }
.sidebar-logo-title { font-family:var(--font-overskrift); font-size:20px; font-weight:800; letter-spacing:.3px; color:var(--text); }
.sidebar-logo-title span { color:var(--sb-accent); }
.sidebar-logo-sub { font-size:10px; color:var(--muted); letter-spacing:1.5px; text-transform:uppercase; margin-top:2px; }
.sidebar-nav { padding:12px 10px; flex:1; }
.nav-section-label { font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); padding:14px 12px 6px; }
.nav-item {
display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
cursor:pointer; font-size:13px; font-weight:500; color:var(--muted); border:none;
background:none; width:100%; text-align:left; text-decoration:none;
transition:background .15s, color .15s; user-select:none;
}
.nav-item:hover { background:rgba(255,255,255,.04); color:var(--text); }
.nav-item.active { background:var(--sb-accent-soft); color:var(--sb-accent); }
.nav-icon { width:18px; height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nav-label { flex:1; }
.nav-badge { font-family:var(--mono); font-size:10px; background:var(--sb-accent-soft); color:var(--sb-accent); padding:2px 6px; border-radius:10px; }
.sidebar-footer { padding:16px 10px; border-top:1px solid var(--border); }
.sidebar-user { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); padding:0 4px; margin-bottom:8px; }
.sidebar-user svg { width:14px; height:14px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle, .btn-home, .btn-logout {
display:flex; align-items:center; gap:8px; width:100%; padding:9px 12px; margin-bottom:6px;
background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:10px;
cursor:pointer; color:var(--muted); font-size:12px; font-family:var(--font);
text-decoration:none; transition:border-color .15s, color .15s;
}
.theme-toggle:last-child, .btn-home:last-child, .btn-logout:last-child { margin-bottom:0; }
.theme-toggle svg, .btn-home svg, .btn-logout svg { width:15px; height:15px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle:hover, .btn-home:hover { border-color:var(--border2); color:var(--text); }
.btn-logout:hover { border-color:var(--red); color:var(--red); }
.icon-theme-to-dark, .theme-toggle-to-dark { display:none; }
html.light .icon-theme-to-light, html.light .theme-toggle-to-light { display:none; }
html.light .icon-theme-to-dark, html.light .theme-toggle-to-dark { display:inline-flex; }
.main { flex:1; min-width:0; }
/* Mobil-topbar med hamburger — kun synlig under 700px */
.mobile-topbar {
display:none; align-items:center; gap:12px; padding:12px 16px;
padding-top:max(12px,env(safe-area-inset-top)); background:var(--surface);
border-bottom:1px solid var(--border); position:sticky; top:0; z-index:150;
}
.hamburger-btn {
width:36px; height:36px; flex-shrink:0; background:rgba(255,255,255,.04);
border:1px solid var(--border); border-radius:8px; color:var(--text);
font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.mobile-topbar-title { font-family:var(--font-overskrift); font-size:16px; font-weight:700; color:var(--text); }
.mobile-topbar-title span { color:var(--sb-accent); }
.sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:199; }
@media (max-width:700px) {
.mobile-topbar { display:flex; }
.sidebar {
position:fixed; inset:0 auto 0 0; width:260px; max-width:82vw; z-index:200;
transform:translateX(-100%); transition:transform .25s ease;
}
.sidebar.open { transform:translateX(0); }
.sidebar-backdrop.open { display:block; }
}