/* ProFireSafe Apps - faelles stilark.
   Facit: Tema\portal.html (Readdy-eksport 13. sep. 2026, 23:51) og Tema\dokumentation\designhaandbog.md.
   Tokens er eksportens :root (OKLCH, varm baggrund), skrifttyper Sora (overskrifter) og Plus Jakarta Sans (broedtekst).
   Ingen skygger: lagdeling med 1px kant og et lysere baggrundstrin. */

:root {
  --font-heading: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-label: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  --bg-50: oklch(.992 .0015 70);  --bg-100: oklch(.973 .003 70);  --bg-200: oklch(.945 .005 70);  --bg-300: oklch(.905 .006 70);
  --bg-400: oklch(.845 .008 70);  --bg-500: oklch(.755 .009 70);  --bg-600: oklch(.62 .01 70);    --bg-700: oklch(.49 .011 70);
  --bg-800: oklch(.37 .012 70);   --bg-900: oklch(.26 .011 70);   --bg-950: oklch(.165 .01 70);

  --fg-50: oklch(.975 .003 60);   --fg-100: oklch(.945 .005 60);  --fg-200: oklch(.89 .007 60);   --fg-300: oklch(.81 .009 60);
  --fg-400: oklch(.67 .011 60);   --fg-500: oklch(.545 .013 60);  --fg-600: oklch(.445 .014 60);  --fg-700: oklch(.365 .014 60);
  --fg-800: oklch(.285 .013 60);  --fg-900: oklch(.215 .012 60);  --fg-950: oklch(.15 .01 60);

  --primary-50: oklch(.972 .016 28);  --primary-100: oklch(.935 .04 28);  --primary-200: oklch(.877 .078 28); --primary-300: oklch(.79 .14 28);
  --primary-400: oklch(.66 .196 28);  --primary-500: oklch(.525 .222 28); --primary-600: oklch(.462 .201 28); --primary-700: oklch(.385 .17 28);
  --primary-800: oklch(.315 .135 28); --primary-900: oklch(.245 .1 28);   --primary-950: oklch(.165 .065 28);

  --accent-50: oklch(.98 .022 82);   --accent-100: oklch(.95 .055 82);  --accent-200: oklch(.9 .095 82);   --accent-300: oklch(.84 .13 80);
  --accent-400: oklch(.78 .15 78);   --accent-500: oklch(.72 .152 74);  --accent-600: oklch(.635 .138 70); --accent-700: oklch(.535 .118 66);
  --accent-800: oklch(.44 .098 62);  --accent-900: oklch(.355 .08 58);  --accent-950: oklch(.245 .058 54);

  --secondary-50: oklch(.975 .014 152); --secondary-100: oklch(.94 .03 152); --secondary-200: oklch(.88 .048 152); --secondary-300: oklch(.795 .065 152);
  --secondary-400: oklch(.66 .078 152); --secondary-500: oklch(.525 .078 152); --secondary-600: oklch(.45 .068 152); --secondary-700: oklch(.375 .057 152);
  --secondary-800: oklch(.305 .047 152); --secondary-900: oklch(.24 .038 152); --secondary-950: oklch(.16 .028 152);

  --danger: oklch(.577 .245 27.3); --danger-soft: oklch(.936 .032 17.7); --danger-strong: oklch(.444 .177 26.9);
  --warning: oklch(.769 .188 70.1); --warning-soft: oklch(.962 .059 95.6); --warning-strong: oklch(.476 .114 61.9);
  --info: oklch(.685 .169 237.3); --info-soft: oklch(.951 .026 236.8); --info-strong: oklch(.443 .11 240.8);
  --success: oklch(.55 .16 152); --success-soft: oklch(.955 .04 155); --success-strong: oklch(.45 .12 152);
  --trend-up: oklch(.55 .16 152); --trend-up-bg: oklch(.955 .04 155); --trend-down: oklch(.585 .2 27); --trend-down-bg: oklch(.95 .045 27);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); background: var(--bg-100); color: var(--fg-950); -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, .brand-name, .stat-value { font-family: var(--font-heading); }

/* ---- Skallen ---- */
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 256px; flex-shrink: 0; background: var(--bg-50); border-right: 1px solid var(--bg-200); padding: 18px 12px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.brand-mark img { width: 34px; height: 34px; display: block; border-radius: 8px; }
.brand-text { line-height: 1.25; min-width: 0; }
.brand-name { font-weight: 700; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; }
.brand-sub { font-size: 11px; color: var(--fg-500); }
.user-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg-100); border: 1px solid var(--bg-200); margin: 0 4px 10px; }
.nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-500); padding: 12px 12px 6px; font-weight: 600; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; color: var(--fg-700); font-weight: 500; font-size: 13.5px; transition: background .15s, color .15s; }
.nav-link:hover { background: var(--bg-100); }
.nav-link.active { background: var(--primary-100); color: var(--primary-700); font-weight: 600; }
.nav-link i { font-size: 17px; width: 20px; text-align: center; }
.nav-link.disabled { opacity: .45; cursor: default; }
.nav-link .nav-tag { margin-left: auto; font-size: 10px; color: var(--fg-500); }
.nav-main { flex: 1; }
.app-nav { border-top: 1px solid var(--bg-200); margin-top: 12px; padding-top: 6px; }

.main { flex: 1; min-width: 0; padding: 0 40px 60px; }
.indhold { width: 100%; max-width: 1600px; margin: 0 auto; }  /* fast bredde, centreret; 1600 fylder ogsaa en stor skaerm */
.topbar { position: sticky; top: 0; z-index: 30; height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 0; margin: 0 -40px 28px; padding: 0 28px; background: color-mix(in oklch, var(--bg-50) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bg-200); }
.topbar .crumb { color: var(--fg-500); font-size: 13px; display: flex; gap: 8px; align-items: center; white-space: nowrap; min-width: 0; overflow: hidden; }
.topbar .crumb b { color: var(--fg-950); font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; display: inline-block; vertical-align: bottom; }
.topbar .spacer { flex: 1; }
.topbar .search-wrap { position: relative; }
.topbar .search-wrap i { position: absolute; left: 10px; top: 9px; color: var(--fg-500); }
.topbar .search { width: 240px; padding: 8px 10px 8px 32px; border: 1px solid var(--bg-300); border-radius: 8px; background: var(--bg-50); font: inherit; font-size: 13px; }
.iconbtn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--bg-300); background: var(--bg-50); display: inline-flex; align-items: center; justify-content: center; position: relative; cursor: pointer; color: var(--fg-700); }
.iconbtn .dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary-500); }
.hamburger { display: none; }

/* ---- Sidehoved ---- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-head > div { min-width: 0; }
.eyebrow { font-family: var(--font-label); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--primary-600); margin: 0 0 6px; }
h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.subtitle { color: var(--fg-600); font-size: 14px; margin: 8px 0 0; max-width: 720px; }
h2 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 12px; }
.section { margin-bottom: 26px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-head h2 { margin: 0; }
.section-count { color: var(--fg-500); font-size: 12px; }
.hilsen-dato { color: var(--fg-500); font-size: 13px; margin: 0 0 4px; }

/* ---- Kort og gitre ---- */
.grid { display: grid; gap: 16px; }
.grid > * { min-width: 0; }  /* et kort maa aldrig loebe ud af sin kolonne; brede tabeller ruller inde i kortet (.table-wrap) */
td.nowrap { white-space: nowrap; }
.grid-stats { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }  /* auto-fit: kortene fylder hele linjen */
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.grid-3-1 { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.grid-3-1.grid-bred { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); }  /* brede tabeller (fx Registrerede timer) faar mere plads */
.grid-bred th, .grid-bred td { padding-left: 13px; padding-right: 13px; }
.grid-2-lige { grid-template-columns: 1fr 1fr; }
.card { background: var(--bg-50); border: 1px solid var(--bg-200); border-radius: 12px; padding: 18px 20px; }
.kort-hoved { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--bg-200); }
.kort-hoved h2, .kort-hoved h3 { margin: 0; font-size: 15px; font-weight: 700; }
.kort-hoved .small { margin-top: 2px; }
.kort-hoved .kort-link { color: var(--primary-700); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.kort-med-hoved { padding: 0; }
.kort-med-hoved > .kort-krop { padding: 14px 18px 18px; }
.card.gantt.kort-med-hoved .gantt-row { padding: 0; }

.stat-card { display: grid; grid-template-rows: 1.4em auto 1.4em; gap: 6px; align-content: start; position: relative; padding-right: 60px; }
.stat-label { color: var(--fg-600); font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin-top: 4px; }
.stat-ikon { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 8px; background: var(--bg-100); border: 1px solid var(--bg-200); display: flex; align-items: center; justify-content: center; color: var(--fg-700); font-size: 16px; }
.stat-delta { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-delta.up { color: var(--trend-up); }
.stat-delta.down { color: var(--trend-down); }
.stat-delta.neutral { color: var(--fg-500); font-weight: 500; }

/* ---- Filterlinje ---- */
.filterlinje { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.filterlinje .search-wrap { position: relative; flex: 1 1 260px; }
.filterlinje .search-wrap i { position: absolute; left: 10px; top: 9px; color: var(--fg-500); }
.filterlinje .search { width: 100%; padding: 8px 10px 8px 32px; border: 1px solid var(--bg-300); border-radius: 8px; background: var(--bg-50); font: inherit; font-size: 13px; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; background: var(--bg-50); border: 1px solid var(--bg-200); border-radius: 10px; padding: 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--fg-700); white-space: nowrap; }
.chip:hover { background: var(--bg-100); }
.chip.active { background: var(--primary-100); color: var(--primary-700); font-weight: 600; }
.chip .n { font-size: 11px; background: var(--bg-200); color: var(--fg-700); border-radius: 999px; padding: 0 6px; }
.chip.active .n { background: var(--primary-200); color: var(--primary-800); }
.filterlinje select { padding: 8px 10px; border: 1px solid var(--bg-300); border-radius: 8px; background: var(--bg-50); font: inherit; font-size: 13px; }

/* ---- Tabeller ---- */
.table-wrap { overflow-x: auto; border: 1px solid var(--bg-200); border-radius: 12px; background: var(--bg-50); }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th a.sort { color: inherit; display: inline-flex; align-items: center; gap: 3px; }
th a.sort i { font-size: 13px; color: var(--fg-400); }
th a.sort:hover, th a.sort.aktiv { color: var(--fg-950); }
th a.sort.aktiv i { color: var(--primary-600); }
th { background: var(--bg-100); text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-600); font-weight: 600; padding: 10px 16px; border-bottom: 1px solid var(--bg-200); white-space: nowrap; }
td { padding: 12px 16px; border-bottom: 1px solid var(--bg-100); color: var(--fg-700); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--bg-100); }
.cell-strong { color: var(--fg-950); font-weight: 600; }

/* ---- Piller og maerker ---- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; font-family: var(--font-label); }
.badge.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-neutral { background: var(--bg-200); color: var(--fg-700); }
.badge-primary { background: var(--primary-100); color: var(--primary-800); }
.badge-accent { background: var(--accent-100); color: var(--accent-800); }
.badge-secondary { background: var(--secondary-100); color: var(--secondary-800); }
.badge-outline { background: var(--bg-50); color: var(--fg-700); border: 1px solid var(--bg-300); }
.badge-danger { background: var(--danger-soft); color: var(--danger-strong); }
.badge-warning { background: var(--warning-soft); color: var(--warning-strong); }
.badge-info { background: var(--info-soft); color: var(--info-strong); }
.badge-success { background: var(--success-soft); color: var(--success-strong); }

.progress { height: 6px; border-radius: 999px; background: var(--bg-200); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; background: var(--primary-500); }
.progress-fill.secondary { background: var(--secondary-500); }
.progress-fill.accent { background: var(--accent-500); }

.person { display: flex; align-items: center; gap: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary-100); color: var(--primary-700); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; flex-shrink: 0; font-family: var(--font-label); }
.avatar img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.list { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bg-100); }
.list-item:last-child { border-bottom: none; }
.list-kort { padding: 0; }
.list-kort .list-item { padding: 12px 18px; }
.list-kort .kort-hoved { margin-bottom: 2px; }
.avatar.system { background: var(--bg-100); color: var(--fg-600); border: 1px solid var(--bg-200); font-size: 15px; }
.muted { color: var(--fg-500); }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, "SF Mono", monospace; font-size: 11px; color: var(--fg-500); }
.role-group { margin-bottom: 24px; }
.role-group-title { font-size: 13px; font-weight: 700; color: var(--fg-900); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.empty { padding: 40px; text-align: center; color: var(--fg-500); border: 1px dashed var(--bg-300); border-radius: 12px; font-size: 13px; }
.footer-note { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--bg-200); color: var(--fg-500); font-size: 12px; }

/* ---- Knapper ---- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; font: inherit; font-family: var(--font-label); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; }
.btn-primary { background: var(--primary-500); color: var(--bg-50); }
.btn-primary:hover { background: var(--primary-600); }
.btn-outline { background: var(--bg-50); color: var(--fg-800); border-color: var(--bg-300); }
.btn-outline:hover { background: var(--bg-100); border-color: var(--bg-400); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 10px 18px; font-size: 14px; }

/* ---- Projektkort, genveje, faser, ring, faner ---- */
.projektkort { display: block; border: 1px solid var(--bg-200); border-radius: 12px; padding: 14px 16px; background: var(--bg-50); transition: border-color .15s; }
.projektkort:hover { border-color: var(--primary-300); }
.projektkort .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.projektkort .navn { font-weight: 600; color: var(--fg-950); }
.projektkort .meta { font-size: 12px; color: var(--fg-500); margin-top: 2px; }
.projektkort .bund { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--fg-600); }
.projektkort .bund .progress { flex: 1; }
.genveje { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.genvej { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 8px; border: 1px solid var(--bg-200); border-radius: 12px; background: var(--bg-50); font-size: 12px; font-weight: 600; color: var(--fg-800); text-align: center; transition: border-color .15s, background .15s; }
.genvej:hover { border-color: var(--primary-300); background: var(--primary-50); }
.genvej i { width: 36px; height: 36px; border-radius: 8px; background: var(--bg-100); border: 1px solid var(--bg-200); display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--fg-800); }
.genvej.primaer i { background: var(--primary-500); color: #fff; border-color: var(--primary-500); }
.perioder { display: inline-flex; gap: 2px; background: var(--bg-50); border: 1px solid var(--bg-200); border-radius: 999px; padding: 3px; }
.perioder span, .perioder a { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--fg-600); }
.perioder a:hover { background: var(--bg-100); }
.perioder span.active, .perioder a.active { background: var(--fg-950); color: var(--bg-50); }
.perioder span.valgt { background: var(--primary-100); color: var(--primary-700); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.perioder span.valgt::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-500); }

.faser { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; position: relative; padding: 6px 0 4px; }
.faser::before { content: ""; position: absolute; left: 24px; right: 24px; top: 20px; height: 2px; background: var(--bg-200); }
.fase { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 11.5px; color: var(--fg-500); }
.fase .prik { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-50); border: 2px solid var(--bg-300); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--fg-500); font-family: var(--font-label); }
.fase.naaet .prik { background: var(--secondary-100); border-color: var(--secondary-500); color: var(--secondary-800); }
.fase.aktuel .prik { background: var(--primary-500); border-color: var(--primary-500); color: #fff; }
.fase.aktuel { color: var(--fg-950); font-weight: 600; }
.fase-boks { margin-top: 12px; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--accent-50); border: 1px solid var(--accent-200); }
.fase-boks i { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-100); color: var(--accent-800); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.ring { --pct: 0; width: 64px; height: 64px; border-radius: 50%; background-color: var(--bg-200); background-image: conic-gradient(var(--primary-500) 0deg, var(--primary-500) calc(var(--pct) * 3.6deg), var(--bg-200) calc(var(--pct) * 3.6deg), var(--bg-200) 360deg); display: grid; place-items: center; flex-shrink: 0; }   /* 0 % = helt graa ring i alle browsere (unitless 0 er ikke en gyldig vinkel) */
.ring > span { width: 50px; height: 50px; border-radius: 50%; background: var(--bg-50); display: grid; place-items: center; text-align: center; line-height: 1; }
.ring b { font-family: var(--font-heading); font-size: 15px; color: var(--primary-700); display: block; }
.ring small { font-size: 9px; color: var(--fg-500); text-transform: uppercase; letter-spacing: .05em; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--bg-200); margin: 14px 0 20px; overflow-x: auto; }
.tabs a { padding: 8px 12px; font-size: 13px; font-weight: 500; color: var(--fg-600); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a.active, .tabs a:hover { color: var(--fg-950); border-bottom-color: var(--primary-500); }
.piller { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ---- Beskeder, kanban, gantt, admin ---- */
.demo-note { background: var(--accent-50); border: 1px solid var(--accent-200); color: var(--accent-900); padding: 10px 14px; border-radius: 12px; font-size: 12.5px; margin-bottom: 20px; }
.fejl { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger-strong); padding: 16px 20px; border-radius: 12px; }
.kanban { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.kanban .card + .card { margin-top: 12px; }
.gantt { display: grid; grid-template-columns: 1fr; gap: 6px; }
.gantt-row { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 12px; font-size: 13px; }
.gantt-track { position: relative; height: 22px; background: var(--bg-100); border-radius: 999px; overflow: hidden; }
.gantt-bar { position: absolute; top: 3px; height: 16px; border-radius: 999px; background: var(--primary-300); }
.gantt-bar.secondary { background: var(--secondary-300); }
.gantt-bar.accent { background: var(--accent-300); }
.gantt-bar.neutral { background: var(--bg-400); }
.gantt-ms { position: absolute; top: 5px; width: 12px; height: 12px; transform: rotate(45deg); background: var(--primary-600); border-radius: 2px; }
.matrix td, .matrix th { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
.matrix input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primary-500); cursor: pointer; }
.pill-tabs { display: inline-flex; background: color-mix(in oklch, var(--bg-200) 70%, transparent); padding: 4px; border-radius: 999px; gap: 2px; margin-bottom: 20px; }
.pill-tabs a { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--fg-700); }
.pill-tabs a.active { background: var(--bg-50); color: var(--fg-950); font-weight: 600; }
input, select, textarea, button { font-family: var(--font-body); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 1100px) { .grid-3-1, .grid-2-lige { grid-template-columns: 1fr; } .genveje { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1900px) { .main { padding: 0 56px 60px; } .grid-3-1 { grid-template-columns: minmax(0, 5fr) minmax(320px, 3fr); } }
@media (max-width: 1024px) {
  .layout { flex-direction: column; }
  .sidebar { display: none; }
  .sidebar.open { display: flex; position: fixed; inset: 0 auto 0 0; width: 288px; z-index: 50; }
  .drawer-bg { display: none; position: fixed; inset: 0; background: color-mix(in oklch, var(--fg-950) 40%, transparent); z-index: 40; }
  .drawer-bg.open { display: block; }
  .hamburger { display: inline-flex; }
  .main { padding: 0 20px 48px; }
  .topbar { margin: 0 -20px 20px; padding: 0 16px; }
  .topbar .search-wrap { display: none; }
  .page-head { flex-direction: column; }
  h1 { font-size: 24px; }
}

/* ---- Agenda (dashboard): dagen, ugen og maaneden for haanden ---- */
.agenda { padding: 0; overflow: hidden; }
.agenda .kort-hoved { align-items: center; }
.agenda-gruppe { border-top: 1px solid var(--bg-100); }
.agenda-gruppe:first-of-type { border-top: 0; }
.agenda-dag { display: flex; align-items: baseline; gap: 8px; padding: 10px 18px 4px; font-size: 12px; }
.agenda-dag b { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--fg-600); }
.agenda-dag span { color: var(--fg-500); }
.agenda-gruppe.aktuel .agenda-dag b { color: var(--primary-600); }
.agenda-gruppe.danger .agenda-dag b { color: var(--danger-strong); }
.agenda-gruppe.fortid .agenda-punkt { opacity: .75; }
.agenda-punkt { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 18px; border-top: 1px solid var(--bg-100); transition: background .15s; }
.agenda-punkt:hover { background: var(--bg-100); }
.agenda-ikon { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; background: var(--bg-100); color: var(--fg-700); }
.agenda-ikon.danger { background: var(--danger-soft); color: var(--danger-strong); }
.agenda-ikon.accent { background: var(--accent-100); color: var(--accent-800); }
.agenda-ikon.secondary { background: var(--secondary-100); color: var(--secondary-800); }
.agenda-ikon.primary { background: var(--primary-100); color: var(--primary-700); }
.agenda-tekst { min-width: 0; display: flex; flex-direction: column; }
.agenda-tekst b { font-weight: 600; font-size: 13.5px; color: var(--fg-950); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-tekst small { font-size: 12px; color: var(--fg-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-hoejre { font-size: 12px; color: var(--fg-500); white-space: nowrap; font-family: var(--font-label); }
.agenda-tom { padding: 6px 18px 12px; font-size: 12.5px; color: var(--fg-500); }
@media (max-width: 640px) { .agenda-punkt { grid-template-columns: 32px minmax(0, 1fr); } .agenda-punkt .badge, .agenda-hoejre { display: none; } }

/* ---- Tidslinje i maaneder (faser, milepaele, i dag) og belastning pr. maaned (apps 0.21) ---- */
.tl { display: grid; gap: 6px; }
.tl-row { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 12px; font-size: 13px; }
.tl-hoved { margin-bottom: 4px; }
.tl-mdr { display: flex; font-size: 11px; color: var(--fg-500); text-transform: uppercase; letter-spacing: .04em; }
.tl-mdr span { overflow: hidden; white-space: nowrap; padding-left: 4px; border-left: 1px solid var(--bg-200); box-sizing: border-box; }
.tl-navn { min-width: 0; overflow: hidden; }
.tl-navn .cell-strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.tl-track { position: relative; height: 26px; background: var(--bg-100); border-radius: 8px; overflow: hidden; display: flex; }
.tl-grid { display: block; height: 100%; border-left: 1px solid var(--bg-200); box-sizing: border-box; }
.tl-spaend { position: absolute; top: 0; height: 100%; background: var(--bg-200); }
.tl-seg { position: absolute; top: 4px; height: 18px; border-radius: 5px; overflow: hidden; box-sizing: border-box; padding: 0 6px; font-size: 11px; line-height: 18px; color: var(--fg-800); white-space: nowrap; }
.tl-seg span { overflow: hidden; text-overflow: ellipsis; display: block; }
.tl-seg.f1 { background: var(--primary-100); } .tl-seg.f2 { background: var(--accent-100); } .tl-seg.f3 { background: var(--secondary-100); }
.tl-seg.f4 { background: var(--primary-200); } .tl-seg.f5 { background: var(--accent-200); } .tl-seg.f6 { background: var(--secondary-200); }
.tl-seg.aktuel { outline: 2px solid var(--primary-600); outline-offset: -2px; font-weight: 600; color: var(--fg-950); }
.tl-ms { position: absolute; top: 7px; width: 12px; height: 12px; transform: rotate(45deg); background: var(--primary-600); border-radius: 2px; box-shadow: 0 0 0 2px var(--bg-50); }
.tl-idag { position: absolute; top: 0; height: 100%; width: 2px; background: var(--fg-950); opacity: .7; }
.tl-forklaring { margin-top: 8px; }
table.belastning th, table.belastning td { text-align: center; padding: 8px 6px; white-space: nowrap; }
table.belastning th:first-child, table.belastning td:first-child { text-align: left; padding-left: 16px; }
table.belastning td.bl { font-size: 12px; font-weight: 600; color: var(--fg-700); }
table.belastning td.bl.lav { background: var(--secondary-100); color: var(--secondary-800); }
table.belastning td.bl.fuld { background: var(--accent-100); color: var(--accent-800); }
table.belastning td.bl.over { background: var(--danger-soft); color: var(--danger-strong); }
@media (max-width: 900px) { .tl-row { grid-template-columns: 140px 1fr; } }
.tl-mere { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
/* ---- Kort paa sagen (apps 0.23) ---- */
.kort-ramme { position: relative; width: 100%; aspect-ratio: 900 / 560; overflow: hidden; border-radius: 10px; background: var(--bg-100); border: 1px solid var(--bg-200); }
.kort-ramme img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kort-ramme img.kort-lag { opacity: .95; }   /* skel og matrikelnumre, gennemsigtig baggrund */
.kort-naal { position: absolute; width: 18px; height: 18px; background: var(--primary-600); border: 2px solid #fff; border-radius: 50% 50% 50% 0; transform: translate(-50%, -100%) rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.kort-bygning { position: absolute; width: 30px; height: 30px; border: 3px solid var(--primary-600); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(220,38,38,.25); }