/* public/gt-ui/app-side.css — den fælles app-skabelon i GT UI (DESIGN.md), første gang brugt af
   Dokumentkontrol (public/portal/dokumentkontrol.*): (?)-knap og hjælp-panel i topbjælken, app-hoved med
   overtitel, meta og handlingsrække (opdatér, Gem som PDF, svarlinje og udskrift), klikbare tal-kort, korte kort (fx ændringer), faner og filtre.
   App-specifikke dele (tabeller, matrix) ligger i appens egen CSS. Kun farver fra DESIGN.md;
   en app, der genskaber en kunderapport, kan sætte --app-tal-farve (fx nøgletal-blå) på sin side. */
.app-side, .app-side-indhold { display: flex; flex-direction: column; gap: 24px; }
.app-side[hidden], .app-side-indhold[hidden] { display: none; }
.app-side .gt-sektion { margin-top: 0; }
.app-titel { display: flex; gap: 16px; align-items: flex-start; }
.app-titel gt-app-ikon { width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; }
.app-titel gt-app-ikon svg { border-radius: 14px; }
.app-titel > div { flex: 1; min-width: 0; }
.app-overtitel { font-family: Georgia, serif; font-style: italic; color: var(--gt-tekst2); font-size: 16px; }
.app-titel h1 { font-family: Georgia, serif; font-size: 26px; font-weight: 600; line-height: 1.2; text-wrap: balance; }
.app-titel h1 span { font-family: var(--gt-skrift); font-size: 16px; font-weight: 400; font-style: italic; color: var(--gt-tekst2); }
.app-meta { font-size: 13px; color: var(--gt-tekst2); margin-top: 4px; }
.app-handlinger { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gt-kant); }
.app-handlinger .gt-koersel-filer { margin-top: 0; }
.app-u { font-size: 13px; color: var(--gt-tekst2); }
/* Handlingsrækken: én linje, 40 px høje knapper; opdatér til venstre, den orange PDF-knap til højre. */
.app-knap-sek { height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--gt-kant); background: var(--gt-flade); color: var(--gt-tekst); font-size: 14px; font-weight: 600; }
.app-knap-sek:hover:not(:disabled) { border-color: var(--gt-accent); color: var(--gt-accent); }
.app-knap-sek:disabled { opacity: .6; cursor: default; }
.app-knap-pdf { height: 40px; padding: 0 20px; margin-left: auto; }
.app-svar { margin-top: 12px; padding: 8px 12px; border-radius: 8px; font-size: 14px; background: color-mix(in srgb, var(--gt-tone-ok) 12%, var(--gt-flade)); color: var(--gt-tekst); }
.app-svar.app-svar-fejl { background: color-mix(in srgb, var(--gt-tone-fejl) 12%, var(--gt-flade)); }
.app-svar[hidden], .app-kun-print { display: none; }
/* De fire tal */
.app-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.app-kort { text-align: left; border: 1px solid var(--gt-kant); border-radius: var(--gt-radius); overflow: hidden; background: var(--gt-flade); display: flex; flex-direction: column; padding: 0; color: var(--gt-tekst); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 6px 18px -12px rgba(80, 76, 64, .5); transition: transform .15s; }
.app-kort:hover { transform: translateY(-2px); }
.app-kort:focus-visible { outline: 2px solid var(--gt-tekst); outline-offset: 2px; }
.app-kort b { font-size: 34px; line-height: 1; padding: 16px 16px 4px; font-variant-numeric: tabular-nums; }
.app-kort .app-label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 0 16px 12px; }
.app-kort .app-forkl { font-size: 13px; color: var(--gt-tekst2); padding: 12px 16px 16px; border-top: 1px solid var(--gt-kant); flex: 1; }
.app-kort.app-tone-alle b, .app-kort.app-tone-alle .app-label { background: var(--app-tal-farve, var(--gt-tekst)); color: var(--gt-flade); }
.app-kort.app-tone-ok b, .app-kort.app-tone-ok .app-label { background: var(--gt-tone-ok); color: #fff; }
.app-kort.app-tone-advarsel b, .app-kort.app-tone-advarsel .app-label { background: var(--gt-tone-advarsel); color: var(--gt-tekst); }
.app-kort.app-tone-fejl b, .app-kort.app-tone-fejl .app-label { background: var(--gt-tone-fejl); color: #fff; }
.app-kort[aria-pressed="true"] { outline: 3px solid var(--gt-accent); outline-offset: 2px; }
.app-udsagn { font-size: 14px; color: var(--gt-tekst2); max-width: 760px; margin-top: -12px; }
/* Ændringskort */
.app-kortliste { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.app-kortliste .gt-flade { padding: 16px; }
.app-kortliste b { font-size: 14px; }
.app-kortliste p { font-size: 14px; color: var(--gt-tekst2); margin-top: 4px; }
/* Faner */
.app-faner { display: flex; gap: 4px; border-bottom: 1px solid var(--gt-kant); overflow-x: auto; margin-bottom: -8px; }
.app-faner button { background: none; border: none; border-bottom: 3px solid transparent; padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--gt-tekst2); white-space: nowrap; }
.app-faner button[aria-selected="true"] { color: var(--gt-tekst); border-bottom-color: var(--gt-accent); }
.app-faner button:focus-visible { outline: 2px solid var(--gt-tekst); outline-offset: -2px; }
.app-filtre { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.gt-felt-lille { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--gt-tekst2); }
.gt-felt-lille select, .gt-felt-lille input { font: inherit; font-size: 14px; font-weight: 400; color: var(--gt-tekst); background: var(--gt-flade); border: 1px solid var(--gt-kant); border-radius: 8px; padding: 8px 12px; min-width: 160px; }
.app-soeg input { min-width: 240px; }
.app-tom-rk { padding: 24px 16px; color: var(--gt-tekst2); text-align: center; font-size: 14px; }
.app-signatur { font-size: 12px; color: var(--gt-tekst2); margin-top: 8px; }

@media (max-width: 760px) {
  .app-titel { flex-wrap: wrap; }
  .app-titel h1 { font-size: 22px; }
  .app-kpi { grid-template-columns: repeat(2, 1fr); }
  .app-kort .app-forkl { display: none; }
  .gt-felt-lille, .gt-felt-lille select, .app-soeg input { width: 100%; min-width: 0; }
  .app-filtre label { flex: 1 1 100%; }
  .app-knap-pdf { width: 100%; margin-left: 0; }
}

/* "Gem som PDF" udskriver siden: kun app-hovedet, tallene og den åbne fane kommer med. */
@media print {
  body { background: #fff; }
  .gt-topbar, .gt-pop, .gt-tilbage, .app-handlinger, .app-svar, .app-faner, .app-filtre { display: none !important; }
  .app-kun-print { display: block; font-size: 13px; margin-top: 4px; }
  .app-side, .app-side * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .app-kort, .gt-flade { box-shadow: none; }
  .app-kort .app-forkl { display: none; }
  .app-kort[aria-pressed="true"] { outline: none; }
  .app-kpi { grid-template-columns: repeat(4, 1fr); }
}

/* Topbjælken: (?)-knappen i hjørnet ved siden af personen, og hjælpen som panel under topbjælken. */
.gt-top-hoejre { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gt-rund { width: 32px; height: 32px; flex-shrink: 0; border-radius: 99px; border: 1px solid var(--gt-kant); background: var(--gt-flade2); color: var(--gt-tekst); font-weight: 700; font-size: 16px; }
.gt-rund:hover { border-color: var(--gt-accent); color: var(--gt-accent); }
.gt-rund[aria-expanded="true"] { background: var(--gt-tekst); border-color: var(--gt-tekst); color: var(--gt-flade); }
.gt-rund:focus-visible { outline: 2px solid var(--gt-tekst); outline-offset: 2px; }
.gt-pop { position: fixed; top: 64px; right: max(16px, calc((100vw - 980px) / 2 + 22px)); z-index: 20; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 88px); overflow-y: auto; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 18px 40px -20px rgba(80, 76, 64, .6); }
.gt-pop-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.gt-pop h3 { font-size: 16px; }
.gt-pop-intro { color: var(--gt-tekst2); font-size: 14px; margin-bottom: 12px; }
.gt-pop dl { display: grid; grid-template-columns: 128px 1fr; gap: 8px 16px; font-size: 14px; }
.gt-pop dt { font-weight: 600; }
@media (max-width: 760px) {
  .gt-top-hoejre { gap: 8px; }
  .gt-pop { top: 60px; }
  .gt-pop dl { grid-template-columns: 1fr; gap: 0; }
  .gt-pop dd { margin-bottom: 8px; }
}
@media (max-width: 480px) {
  .gt-topbar-logo, .gt-mig .gt-knap-sekundaer { white-space: nowrap; }
  .gt-mig-tx { display: none; }
}