/* =====================================================================
   Den Lille Musikskole – CRM design-system (unified "Stemning" v2)
   Faelles aestetik med UVP (uvp.denlillemusikskole.dk): Fraunces (display)
   + Instrument Sans (UI), varm ivory-canvas, persimmon-accent, luft, korn
   (sfumato) og bloede radier. Samme token-vokabular som uvp.css, saa de to
   flader laeses som ét produkt.

   Bagud-kompatible token-aliaser bevarer de gamle CRM-navne (--brass*,
   --font-body, --shadow*, --radius*, --ink-soft, status-farver), saa alle
   app-specifikke CSS-filer virker uaendret – de arver bare den nye palet.
   Ingen selektorer/klassenavne aendret => ingen funktionsaendring.
   ===================================================================== */

/* ---- Design-tokens: flyttet til den delte crmcore/css/tokens.css ----
   :root-blokken (palet/type/rum/radier/skygger + bagud-kompatible aliaser)
   bor nu i tokens.css, som basen loader FOER denne fil. Så en token-aendring
   slaar automatisk igennem baade CRM og UVP. Ret tokens dér, ikke her. */

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.6), transparent 60%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* Subtilt filmisk korn (sfumato) over hele fladen – faelles signatur med UVP. */
body.app::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; color: var(--ink); margin: 0 0 var(--sp-3); letter-spacing: -0.01em; }
a { color: var(--accent-deep); text-decoration: none; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
::selection { background: var(--accent-soft); }
[x-cloak] { display: none !important; }

/* ---- Topbar / navigation ---- */
.topbar {
  background: rgba(250,246,239,.82);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.topbar__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  flex-wrap: wrap;
}
/* .brand/.brand__text ER FJERNET (2026-08-11): topbarens logo-badge blev taget
   ud efter brugerbeslutning. .brand__mark bliver - LOGIN-siden bruger stadig
   varianten .brand__mark--lg, og den arver herfra. */
.brand__mark {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 17px;
  box-shadow: 0 3px 10px -2px rgba(194,86,46,.6);
}
.brand__mark--lg { width: 56px; height: 56px; font-size: 30px; box-shadow: 0 12px 30px -8px rgba(161,67,31,.6); }

/* ---- Skjul/vis af topbaren ----
   Fanen haenger neden under barens kant, saa den ogsaa kan rammes naar baren
   er foldet vaek og kun haarstregen staar tilbage. .topbar er i forvejen
   sticky (altsaa position != static), saa den er selv ankeret. */
.topbar__fane {
  position: absolute; right: 16px; bottom: -15px; z-index: 21;
  width: 34px; height: 16px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--card); color: var(--ink-3);
  font-size: 11px; line-height: 1; font-family: var(--font-body);
}
.topbar__fane:hover { color: var(--ink); background: var(--paper-2); }
.topbar__fane:focus-visible { outline: 0; box-shadow: var(--ring); }

/* Foldet vaek: indholdet forsvinder, haarstregen og fanen bliver. Sæsonbaren
   roeres IKKE - den baerer et aktivt datafilter, og at skjule den ville skjule
   en begraensning brugeren stadig arbejder under. */
html.topbar-skjult .topbar__inner { display: none; }

.mainnav { display: flex; gap: var(--sp-1); flex: 1 1 auto; flex-wrap: wrap; }
.mainnav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  color: var(--ink-2); font-size: 14.5px; font-weight: 500;
  border: 1px solid transparent;
  transition: color .18s var(--e-out), background .18s var(--e-out);
}
.mainnav__link:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; }
.mainnav__link.is-active {
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: #fff; font-weight: 600;
  box-shadow: 0 5px 14px -5px rgba(161,67,31,.55), inset 0 1px 0 rgba(255,255,255,.16);
}
.mainnav__icon { font-size: 15px; }

.topsearch__input {
  border: 1px solid var(--line-2); background: var(--card);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-body); font-size: 14.5px; min-width: 160px; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.topsearch__input::placeholder { color: var(--ink-3); }
.topsearch__input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* ---- Brugermenu ---- */
.usermenu { position: relative; }
.usermenu__button {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: none; border: 1px solid transparent; cursor: pointer;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: 14.5px; color: var(--ink);
  transition: background .15s;
}
.usermenu__button:hover { background: var(--paper-2); }
.usermenu__avatar {
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600;
  box-shadow: 0 2px 8px -2px rgba(194,86,46,.55);
}
.usermenu__dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-lg); padding: var(--sp-1); z-index: 30;
}
.usermenu__item {
  display: block; width: 100%; text-align: left; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); color: var(--ink); font-size: 14.5px;
  background: none; border: 0; cursor: pointer; font-family: var(--font-body);
}
.usermenu__item:hover { background: var(--paper-2); text-decoration: none; }
.usermenu__item--button { color: var(--danger); }

/* ---- Indhold / layout ---- */
.content { flex: 1 1 auto; width: 100%; }
.content__inner { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-6) var(--sp-4); }
.pagehead {
  position: sticky; top: 64px; z-index: 10; /* top saettes praecist af JS = topbar-hoejde */
  background: var(--paper); padding: var(--sp-3) 0; margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line); box-shadow: 0 8px 12px -12px rgba(34,29,23,.4);
}
.pagehead__title { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -0.02em; }
.pagehead__lead { color: var(--ink-2); margin: 0; }

/* ---- Kort ---- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--sh-sm); padding: var(--sp-5);
  animation: crm-rise .5s var(--e-out) both;
}
.panel { margin-top: var(--sp-5); }
.panel__title { font-size: 20px; }
.panel__body { color: var(--ink-2); margin: 0 0 var(--sp-4); }
.panel__meta { color: var(--muted); font-size: 13.5px; margin: 0; }
.panel__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.panel--placeholder { border-style: dashed; }

/* ---- KPI-kort ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); }
.kpi { text-align: left; }
.kpi__value { font-family: var(--font-head); font-size: 34px; font-weight: 600; margin: 0 0 var(--sp-1); color: var(--accent-deep); letter-spacing: -0.02em; }
.kpi__label { font-size: 14.5px; margin: 0; color: var(--ink); font-weight: 500; }
.kpi__hint { font-size: 12.5px; color: var(--muted); margin: var(--sp-1) 0 0; }

/* ---- Knapper ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px var(--sp-4); border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink);
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; white-space: nowrap;
  transition: border-color .18s var(--e-out), background .18s var(--e-out), box-shadow .18s var(--e-out), transform .18s var(--e-out);
}
.btn:hover { border-color: var(--ink-3); box-shadow: var(--sh-sm); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: linear-gradient(180deg, var(--accent), var(--accent-deep)); border-color: var(--accent-deep); color: #fff; box-shadow: 0 6px 16px -6px rgba(161,67,31,.6); }
.btn--primary:hover { border-color: var(--accent-deep); filter: brightness(1.05); }
.btn--danger { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.btn--danger:hover { border-color: var(--danger); filter: brightness(.98); }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---- Ikon-knap (stille toolbar, delt med UVP) ---- */
/* Minimal, borderløs 28px-knap til handlings-rækker (fx materialekortenes
   vis/flyt-op/flyt-ned/fjern). Grå i hvile, blød flade på hover. */
.iconbtn {
  width: 28px; height: 28px; display: inline-grid; place-items: center;
  border-radius: var(--r-sm); border: 1px solid transparent; background: transparent;
  color: var(--ink-3); cursor: pointer; font: inherit; font-size: 12.5px;
  text-decoration: none; transition: background .14s var(--e-out), color .14s var(--e-out);
}
.iconbtn:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; }
.iconbtn:disabled, .iconbtn[aria-disabled="true"] { opacity: .28; pointer-events: none; }

/* ---- Tabeller ---- */
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th, .table td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--line); }
.table thead th { font-family: var(--font-head); font-weight: 600; color: var(--ink-2); background: var(--paper-2); }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--paper-2); }

/* ---- Badges / status-pills ---- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; line-height: 1.6;
  background: var(--paper-2); color: var(--ink-2);
}
/* Chip-raekker under et navn (barnets holdhistorik + foelgevoksenstatus) og
   koncentratet under et voksennavn. Samme komponent, to taetheder: raekken
   under en overskrift maa fylde, koncentratet inde i en liste maa ikke.
   `gap` frem for margin paa badgen, saa en tom raekke ikke efterlader luft. */
.chiprad { display: flex; flex-wrap: wrap; gap: 5px; margin: var(--sp-2) 0 0; }
.koncentrat {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  margin-top: 3px;
}
.koncentrat .badge { font-size: 11.5px; padding: 2px 8px; }

.badge--ok     { background: var(--ok-bg);     color: var(--ok); }
.badge--warn   { background: var(--warn-bg);   color: var(--warn); }
.badge--danger { background: var(--danger-bg); color: var(--danger); }
.badge--info   { background: var(--info-bg);   color: var(--info); }
.badge--muted  { background: var(--muted-bg);  color: var(--muted); }

/* ---- Flash-messages (inline, bevaret placering – ingen adfaerdsaendring) ---- */
.flash { max-width: var(--maxw); margin: var(--sp-4) auto 0; padding: 0 var(--sp-4); }
.flash__item { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); margin-bottom: var(--sp-2); border: 1px solid var(--line); background: var(--card); box-shadow: var(--sh-sm); }
.flash__item--success { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.flash__item--error   { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.flash__item--warning { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.flash__item--info    { background: var(--info-bg); border-color: var(--info); color: var(--info); }

/* ---- Forms ---- */
.field { display: block; margin-bottom: var(--sp-4); }
.field__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field__input {
  width: 100%; padding: 11px 14px; font-family: var(--font-body); font-size: 15px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--paper); color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field__input::placeholder { color: var(--ink-3); }
.field__input:focus { outline: none; border-color: var(--accent); background: var(--card); box-shadow: var(--ring); }

/* ---- Auth-side ---- */
.app--auth { background: linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%); }
.authwrap { min-height: calc(100vh - 120px); display: grid; place-items: center; padding: var(--sp-5); }
.authcard { width: 100%; max-width: 380px; }
.authcard__brand { text-align: center; margin-bottom: var(--sp-5); }
.authcard__brand .brand__mark--lg { margin: 0 auto var(--sp-3); }
.authcard__title { font-family: var(--font-head); font-size: 24px; margin: 0; letter-spacing: -0.02em; }
.authcard__sub { color: var(--ink-2); margin: 4px 0 0; font-size: 14px; }
.authcard__error { background: var(--danger-bg); color: var(--danger); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: 14px; }

/* ---- Footer ---- */
.appfooter { border-top: 1px solid var(--line); background: transparent; }
.appfooter__inner { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-4); color: var(--muted); font-size: 13.5px; }

/* ---- Filter-bar ---- */
.filterbar {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--sh-sm); padding: var(--sp-4); margin-bottom: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.filterbar__fields { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; }
.filterfield { display: flex; flex-direction: column; gap: 4px; }
.filterfield__label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.filterfield__input {
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink);
  border-radius: var(--r-md); padding: 9px var(--sp-3);
  font-family: var(--font-body); font-size: 14.5px; min-width: 150px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.filterfield__input:focus { outline: none; border-color: var(--accent); background: var(--card); box-shadow: var(--ring); }
.filterfield--sm .filterfield__input { min-width: 110px; }
.filterfield--lg .filterfield__input { min-width: 240px; }
/* Raadgivende note paa et filterfelt (FilterSpec.note) - aldrig blokerende.
   Samme farvesprog som .msf__stale, men paa selve baren i stedet for inde i
   feltets panel, saa den kan ses uden at aabne dropdownen. */
.filterbar__note { margin: 0; padding: 8px 10px; font-size: 13px; line-height: 1.45;
  background: var(--warn-bg, #f4e6cf); color: var(--warn, #9a6a12);
  border-radius: var(--r-sm, 9px); }
.filterbar__actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.filterbar__count { color: var(--muted); font-size: 13.5px; margin-left: auto; }

/* ---- Multi-select filterfelt (to-kolonners tjekbokse i en dropdown) ---- */
.msf { position: relative; }
.msf__toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer; text-align: left; }
.msf__toggle-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msf__caret { color: var(--ink-3); font-size: 11px; flex: 0 0 auto; }
.msf__panel { position: absolute; z-index: 400; top: calc(100% + 4px); left: 0;
  min-width: 300px; max-width: min(440px, 92vw);
  background: var(--card, #fffdf8); border: 1px solid var(--line-2, #d7cbb4);
  border-radius: var(--r-md, 12px); box-shadow: var(--sh-lg, 0 18px 50px -12px rgba(34,29,23,.24));
  padding: 10px; }
.msf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 14px;
  max-height: 300px; overflow-y: auto; }
/* L-02: ÉN kolonne for felter hvis valg har en naturlig raekkefoelge (ugedage).
   To kolonner deler mandag-soendag midt over, saa man skal laese ned ad
   venstre og fortsaette ned ad hoejre. Se FilterSpec.enkelt_kolonne. */
.msf__grid--enkelt { grid-template-columns: 1fr; }
/* ms 19/8-2026 om holdtype-listen: "Listen skal bare skrives i en kolonne, og
   helt simpel ... De kunne godt vaere taettere, mindre luft i raekkerne."
   Kun luften strammes - skriftstoerrelsen staar, saa raekkerne ikke bliver
   svaerere at ramme med musen end resten af CRM'ets valglister. */
.msf__grid--taet { gap: 0; max-height: 420px; }
.msf__grid--taet .msf__opt { padding: 2px 6px; }
.msf__opt { display: flex; align-items: center; gap: 7px; padding: 5px 6px;
  border-radius: var(--r-sm, 9px); font-size: 14px; cursor: pointer; color: var(--ink, #221d17); }
.msf__opt:hover { background: var(--paper-2, rgba(0,0,0,.05)); }
.msf__opt input { margin: 0; flex: 0 0 auto; }
.msf__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line, #e6ddcc); }
.msf__clear { border: 0; background: none; cursor: pointer; color: var(--ink-2, #6f6456);
  font-size: 13px; font-family: inherit; text-decoration: underline; }
.msf__actions-left { display: flex; align-items: center; gap: 12px; }

/* Tri-tilstand (neutral / til / fra) - kun felter med FilterSpec.tri */
.msf__hint { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-3, #8a7f6d); }
/* Raadgivende "foraeldet fravalg"-advarsel (FilterSpec.tri_incomplete) - aldrig blokerende */
.msf__stale { margin: 8px 0 0; padding: 6px 8px; font-size: 12.5px; line-height: 1.45;
  background: var(--warn-bg, #f4e6cf); color: var(--warn, #9a6a12);
  border-radius: var(--r-sm, 9px); }
.msf__opt--tri { padding: 0; display: block; }
.msf__tri { display: flex; align-items: center; gap: 7px; width: 100%;
  border: 0; background: none; font: inherit; text-align: left; cursor: pointer;
  padding: 5px 6px; border-radius: var(--r-sm, 9px); color: inherit; }
.msf__tri:hover { background: var(--paper-2, rgba(0,0,0,.05)); }
.msf__mark { flex: 0 0 auto; width: 15px; text-align: center; font-size: 13px;
  color: var(--ink-3, #8a7f6d); }
.msf__opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msf__mark.is-inc, .msf__opt--tri.is-inc .msf__mark { color: var(--ok, #1d7a4c); }
.msf__mark.is-exc, .msf__opt--tri.is-exc .msf__mark { color: var(--danger, #b3261e); }
.msf__opt--tri.is-inc { background: var(--ok-bg, rgba(29,122,76,.10)); border-radius: var(--r-sm, 9px); }
.msf__opt--tri.is-exc { background: var(--danger-bg, rgba(179,38,30,.10)); border-radius: var(--r-sm, 9px); }
.msf__opt--tri.is-exc .msf__opt-label { text-decoration: line-through; }
.btn--sm { padding: 5px 12px; font-size: 13px; }
[x-cloak] { display: none !important; }

/* ---- Pager ---- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  flex-wrap: wrap; margin-top: var(--sp-4); }
.pager__info { color: var(--muted); font-size: 13.5px; }
.pager__links { display: flex; gap: var(--sp-2); }
.pager__btn { padding: 6px var(--sp-3); font-size: 13.5px; }

/* ---- Faner (kind/tabs) ---- */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.tabs__link {
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm) var(--r-sm) 0 0;
  color: var(--ink-2); font-size: 14.5px; font-weight: 500; border: 1px solid transparent; border-bottom: none;
  transition: background .15s, color .15s;
}
.tabs__link:hover { background: var(--paper-2); text-decoration: none; }
.tabs__link.is-active { background: var(--card); border-color: var(--line); color: var(--accent-deep); font-weight: 600; box-shadow: 0 -2px 0 var(--accent) inset; }
.tabs__count { color: var(--muted); font-size: 12px; }

/* ---- Detalje-layout (360°) ---- */
.pagehead--detail { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.detailgrid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 920px) { .detailgrid { grid-template-columns: 1fr; } }
.section { margin-bottom: var(--sp-5); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.section__title { font-size: 19px; margin: 0; }
.section__count { color: var(--muted); font-size: 13.5px; }
.deflist { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--sp-4); margin: 0; font-size: 14.5px; }
.deflist dt { color: var(--ink-2); }
.deflist dd { margin: 0; }

/* ---- Tabel-tweaks ---- */
.table--compact th, .table--compact td { padding: var(--sp-2) var(--sp-3); font-size: 13.5px; }
.table__num { text-align: right; font-variant-numeric: tabular-nums; }
/* ---- Fastholdt kolonneoverskrift ved scroll (L-06, ms 14/8) ----------------
   »Naar der scrolles, saa lad tabellens oeverste raekke staa, saa vi stadig kan
   se kolonnernes titel.«

   WRAPPEN MAA IKKE VAERE EN SCROLL-CONTAINER, OG DET ER HELE POINTEN.
   `overflow-x: auto` goer computed `overflow-y` til `auto` (CSS Overflow 3: er
   den ene akse ikke visible/clip, bliver den andens `visible` til `auto`), saa
   .table-wrap var en scroll-container paa BEGGE akser. Et sticky <th> ankrer
   paa NAERMESTE scrollport, altsaa paa wrappen og ikke paa siden - og wrappen
   ruller selv ud af syne naar siden ruller. Reglen var dermed inert, mens den
   saa fuldstaendig rigtig ud i CSS'en.

   FOERSTE FORSOEG GAV WRAPPEN EN max-height, saa den blev den boks der rullede.
   MAALT 2026-08-15, OG DET VIRKEDE IKKE: paa /personer/ ligger wrappen 767 px
   nede i siden, saa man skal foerst rulle SIDEN for at naa den, og hovedet
   klaeber da til en boks hvis top for laengst er ude af billedet. To rullende
   bokse loeser ikke et problem om hvad man kan se.

   Derfor ruller SIDEN, og wrappen er ikke laengere en scroll-container paa
   brede skaerme. Den vandrette rulning beholdes paa smalle (under 1100 px),
   hvor en bred tabel ellers ville skubbe hele siden sidevaerts - og dér er
   sticky saa slaaet fra igen. Det er en bevidst afvejning: CRM'et er et
   skrivebords-vaerktoej, og Michaels oenske gaelder den skaerm han sidder ved.

   OFFSETTET ER ANKRET, IKKE GAETTET. `--stick-tabel` saettes af setTop() i
   base.html til topbarens + .pagehead's faktiske hoejde - samme mekanisme som
   .pagehead selv bruger, og af samme grund: begge hoejder aendrer sig naar
   topbaren foldes vaek, og et hardkodet tal ville efterlade enten et tomt
   baand eller et hoved der forsvinder ind under banneret. Maalt til 264 px paa
   /personer/. Faldbacken gaelder kun indtil scriptet har koert en gang.

   z-index 3 er LAVERE end .pagehead's 10 med vilje: hovedet skal glide ind
   UNDER banneret, ikke hen over det.

   BORDEREN TEGNES SOM SKYGGE. Tabellen er `border-collapse: collapse`, og en
   collapsed border hoerer til tabellen, ikke til cellen - den ruller derfor
   med indholdet og efterlader det klaebende hoved uden underkant. `box-shadow:
   inset` hoerer til cellen og foelger med.

   MAAL DET, LAES DET IKKE. scripts/browser/maal-sticky-tabelhoved.py. */
.table-wrap .table thead th {
  position: sticky; top: var(--stick-tabel, 190px); z-index: 3;
  background: var(--paper-2);
  box-shadow: inset 0 -1px 0 var(--line);
}
@media (max-width: 1100px) {
  /* Smal skaerm: vandret rulning vinder over det klaebende hoved. Wrappen er
     her igen en scroll-container, og sticky slaas eksplicit fra frem for at
     staa tilbage som en inert regel nogen senere tror virker. */
  .table-wrap { overflow-x: auto; }
  .table-wrap .table thead th { position: static; }
}
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* ---- Klikbar kolonneoverskrift ({% sorter_th %}, L-01) ---- */
/* Linket fylder hele cellen, saa hele overskriften er klikmaal - ikke kun de
   faa pixels teksten daekker. inherit paa font/farve, saa en sorterbar kolonne
   ser ud praecis som en almindelig <th> indtil den er aktiv. */
.sortkol { padding: 0 !important; }
.sortkol__link {
  display: flex; align-items: center; gap: 6px;
  padding: var(--sp-3); color: inherit; text-decoration: none;
  font: inherit; white-space: nowrap;
}
.table--compact .sortkol__link { padding: var(--sp-2) var(--sp-3); }
.sortkol.table__num .sortkol__link { justify-content: flex-end; }
.sortkol__link:hover { background: var(--line); }
.sortkol__link:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: -2px; }
/* Den neutrale pil er svag indtil kolonnen er den aktive; den skal vise at
   kolonnen KAN sorteres uden at stjaele opmaerksomhed fra den der ER sorteret. */
.sortkol__pil { font-size: 10px; opacity: .28; line-height: 1; }
.sortkol.is-sorteret { color: var(--ink); }
.sortkol.is-sorteret .sortkol__pil { opacity: 1; }

/* ---- Mini-bjælke (fremmøde/økonomi) ---- */
.minibar { display: inline-flex; height: 10px; border-radius: 999px; overflow: hidden; min-width: 90px; background: var(--paper-2); vertical-align: middle; }
.minibar__seg { height: 100%; }
.minibar__seg--ok { background: var(--ok); }
.minibar__seg--warn { background: var(--warn); }
.minibar__seg--danger { background: var(--danger); }

/* ---- Lille tekst-knap (fjern-kryds i lister) ---- */
.linkbtn { background: none; border: 0; color: var(--danger); cursor: pointer; font-size: 14px;
  padding: 0 2px; line-height: 1; }
.linkbtn:hover { text-decoration: underline; }

/* ---- Motion ---- */
@keyframes crm-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Responsivt ---- */
@media (max-width: 860px) {
  .topbar__inner { gap: var(--sp-2); }
  .mainnav { order: 3; width: 100%; }
  .topsearch { order: 2; margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}