/* public/portal/affald.css — Affaldsrapporter-siden (public/portal/affald.js), bygget som skraldesortering-
   mailen og PDF'erne pr. byggefelt: tal, årsagsfordeling, byggefelter, listen pr. byggefelt og årsag,
   fotovinduet med rettelser. "Gem som PDF" laves i affald-pdf.js. Det fælles (app-hoved, faner, filtre,
   hjælp) står i ../gt-ui/app-side.css. Kun farver fra DESIGN.md: rapportfarverne herunder. */
#af, #af-lysboks { --rapport-skov: #41584a; --rapport-indigo: #2a3789; --rapport-siena: #ab6628; --rapport-tabelhoved: #3d4a42; --af-andet: var(--gt-tekst2); }

/* Handlingsrækken: periode, knapper og tekst på én linje i samme højde (40 px) */
.af-handlinger { align-items: center; }
.af-periode { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; }
.af-periode select { min-width: 176px; }
.af-periode select, .af-handlinger .gt-knap, .af-handlinger .gt-knap-sekundaer { height: 40px; box-sizing: border-box; padding-block: 0; }
.af-fyld { flex: 1; }
.af-besked { margin-top: 12px; font-size: 14px; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--gt-tone-ok) 14%, var(--gt-flade)); }
.af-besked.af-fejl { background: color-mix(in srgb, var(--gt-tone-fejl) 14%, var(--gt-flade)); color: var(--gt-tone-fejl); }
.af-besked[hidden] { display: none; }

/* Tallene og diagrammerne som rapportmailen */
.af-tal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.af-badge { border-radius: var(--gt-radius); color: #fff; padding: 16px 24px; display: flex; align-items: baseline; gap: 12px; box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 6px 18px -12px rgba(80, 76, 64, .5); }
.af-badge b { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.af-badge span { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.af-skov { background: var(--rapport-skov); } .af-indigo { background: var(--rapport-indigo); }
.af-to { display: grid; grid-template-columns: 2fr 3fr; gap: 16px; align-items: start; }
.af-h { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gt-tekst2); margin-bottom: 8px; }
.af-diagram { padding: 8px 0; }
.af-bar-rk { display: grid; grid-template-columns: 120px minmax(0, 1fr) 36px; gap: 8px; align-items: center; width: 100%; padding: 4px 16px; background: none; border: none; text-align: left; color: var(--gt-tekst); font: inherit; font-size: 13px; font-weight: 600; border-radius: 8px; }
.af-bar-rk:hover { background: var(--gt-flade2); }
.af-bar-rk[aria-pressed="true"] { background: var(--gt-flade2); outline: 2px solid var(--gt-accent); outline-offset: -2px; }
.af-bar-rk b { text-align: right; font-variant-numeric: tabular-nums; }
.af-bar { display: flex; height: 20px; }
.af-bar i { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-style: normal; font-weight: 700; min-width: 16px; }
.af-bar i:first-child { border-radius: 4px 0 0 4px; } .af-bar i:last-child { border-radius: 0 4px 4px 0; } .af-bar i:only-child { border-radius: 4px; }
.af-k0 { background: var(--rapport-siena); } .af-k1 { background: var(--rapport-indigo); } .af-k2 { background: var(--af-andet); }
.af-prik { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: -1px; }

/* Listen: ét foldbart afsnit pr. byggefelt med bånd pr. årsag */
.af-bf { margin-bottom: 16px; padding: 0; overflow: hidden; }
.af-bf > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--rapport-skov); color: #fff; }
.af-bf > summary::-webkit-details-marker { display: none; }
.af-bf > summary h3 { font-size: 16px; font-weight: 700; flex: 1; }
.af-bf > summary span { font-size: 13px; opacity: .85; }
.af-bf > summary::after { content: "▾"; font-size: 14px; }
.af-bf:not([open]) > summary::after { content: "▸"; }
.af-kat { padding: 4px 16px; color: #fff; font-size: 13px; font-weight: 700; }
.af-rk { display: grid; grid-template-columns: 72px minmax(0, 1fr) 96px 160px 88px 128px; gap: 12px; padding: 8px 16px; border: none; border-top: 1px solid var(--gt-kant); align-items: center; width: 100%; background: none; text-align: left; color: var(--gt-tekst); font: inherit; font-size: 14px; }
button.af-rk:nth-of-type(even) { background: var(--gt-flade2); }
button.af-rk:hover { background: color-mix(in srgb, var(--gt-accent) 8%, var(--gt-flade)); }
button.af-rk:focus-visible { outline: 2px solid var(--gt-tekst); outline-offset: -2px; }
.af-hoved { background: var(--rapport-tabelhoved); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .5px; padding-block: 4px; }
.af-nr { font-variant-numeric: tabular-nums; color: var(--gt-tekst2); }
.af-emne b { font-weight: 600; }
.af-firma { overflow-wrap: anywhere; }
.af-status { font-size: 13px; font-weight: 600; color: var(--rapport-siena); }
.af-status.af-lukket { color: var(--rapport-skov); }
.af-mini { display: flex; gap: 4px; align-items: center; }
.af-foto { width: 36px; height: 28px; object-fit: cover; border-radius: 4px; background: var(--gt-flade2); }
.af-flere { font-size: 12px; color: var(--gt-tekst2); }
.af-mobil { display: none; }
.af-rettet { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--rapport-indigo); background: color-mix(in srgb, var(--rapport-indigo) 12%, var(--gt-flade)); border-radius: 4px; padding: 0 4px; vertical-align: 1px; }
.af-fjernet { opacity: .6; } .af-fjernet .af-emne b { text-decoration: line-through; }
#af-fane-historik > .gt-sektion { margin-top: 0; margin-bottom: 24px; }

/* Vinduet med fotos og rettelser */
.af-lysboks { position: fixed; inset: 0; background: rgba(51, 50, 44, .7); z-index: 40; display: grid; place-items: center; padding: 16px; }
.af-lysboks[hidden] { display: none; }
.af-lys-indhold { padding: 16px; width: min(760px, 100%); max-height: 90vh; overflow-y: auto; }
.af-lys-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.af-lys-top + .app-u { margin-bottom: 12px; }
.af-lys-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.af-foto-stor { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--gt-flade2); }
.af-ret { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--gt-kant); }
.af-ret h3 { font-size: 14px; margin-bottom: 4px; }
.af-ret-knapper { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-top: 8px; }
.af-ret-knapper .gt-knap-sekundaer { height: 40px; }
.af-fjern { color: var(--gt-tone-fejl); border-color: var(--gt-tone-fejl); }

@media (max-width: 760px) {
  .af-periode, .af-periode select { width: 100%; }
  .af-periode select { flex: 1; }
  .af-fyld { display: none; }
  .af-handlinger .gt-knap { width: 100%; }
  .af-badge { flex-direction: column; gap: 4px; padding: 12px 16px; }
  .af-to { grid-template-columns: 1fr; }
  .af-bar-rk { grid-template-columns: 96px minmax(0, 1fr) 28px; }
  .af-bf > summary { flex-wrap: wrap; row-gap: 2px; }
  .af-bf > summary span { order: 3; flex-basis: 100%; font-size: 12px; }
  .af-hoved { display: none; }
  .af-rk { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "nr emne mini" "nr info info"; row-gap: 4px; }
  .af-rk > .af-nr { grid-area: nr; } .af-rk > .af-emne { grid-area: emne; } .af-rk > .af-mini { grid-area: mini; }
  .af-rk > .af-dato, .af-rk > .af-firma, .af-rk > .af-status { display: none; }
  .af-mini .af-foto:nth-child(n+2), .af-flere { display: none; }
  .af-rk > .af-mobil { display: block; grid-area: info; font-size: 12px; color: var(--gt-tekst2); }
}