/* public/portal/monitor.css — GT Monitor (public/portal/monitor.js): prisplan og monitor for driften.
   Egen opbygning (ikke rapport-skabelonen, Jakob 2026-11-09): én måler øverst, varsler, graf, poster, trappe. */
#mn { max-width: 1040px; display: flex; flex-direction: column; gap: 24px; }
#mn[hidden], #mn [hidden] { display: none !important; }
#mn .mn-indhold { display: flex; flex-direction: column; gap: 24px; }
#mn .gt-tilbage { align-self: flex-start; }
.mn-hoved { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.mn-hoved h1 { font-family: Georgia, serif; font-size: 32px; font-weight: 600; }
.mn-meta { font-size: 13px; color: var(--gt-tekst2); margin-top: 4px; }
.mn-knapper { display: flex; gap: 8px; }
.mn-h40 { height: 40px; }
.mn-sek { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; margin: 0; }
.mn-sek::before { content: ""; width: 14px; height: 3px; background: var(--gt-accent); border-radius: 2px; }
.mn-blok { display: flex; flex-direction: column; gap: 12px; }
.mn-forkl { font-size: 13px; color: var(--gt-tekst2); }
.mn-kr { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.mn-maaned { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 32px; align-items: center; padding: 24px; }
.mn-etiket { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gt-tekst2); }
.mn-m-tal b { display: block; font-family: Georgia, serif; font-size: 48px; line-height: 1.1; font-variant-numeric: tabular-nums; margin: 4px 0 8px; }
.mn-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; padding: 4px 12px; border-radius: 99px; }
.mn-status.mn-G { background: #e2eedd; color: var(--gt-tone-ok, #1b7a3a); }
.mn-status.mn-A { background: #f7edd2; color: #7a5a12; }
.mn-status.mn-R { background: #f5dcd8; color: #c0392b; }
.mn-prik { width: 10px; height: 10px; border-radius: 99px; background: currentColor; flex: none; }
.mn-spor { position: relative; height: 28px; border-radius: 8px; background: var(--gt-flade2); box-shadow: inset 0 1px 2px rgba(51, 50, 44, .15); }
.mn-spor i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; }
.mn-spor-forv { opacity: .35; }
.mn-spor-hidtil { background: var(--gt-tekst); opacity: .85; }
.mn-spor-plan { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1px; background: var(--gt-accent); border-radius: 2px; }
.mn-spor-tekst { display: flex; justify-content: space-between; font-size: 13px; color: var(--gt-tekst2); margin: 8px 0 8px; font-variant-numeric: tabular-nums; }
.mn-bg-G { background: #1b7a3a; } .mn-bg-A { background: #e3a92a; } .mn-bg-R { background: #c0392b; }
.mn-bg-accent { background: var(--gt-accent); } .mn-bg-mork { background: #41584a; }
.mn-t-A { color: #7a5a12; font-weight: 700; } .mn-t-R { color: #c0392b; font-weight: 700; }

.mn-varsler { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.mn-varsel { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 12px; background: var(--gt-flade); border: 1px solid var(--gt-kant); border-left-width: 4px; }
.mn-varsel .mn-prik { margin-top: 5px; }
.mn-varsel b { font-size: 14px; }
.mn-varsel p { font-size: 13px; color: var(--gt-tekst2); margin-top: 2px; }
.mn-v-G { border-left-color: #1b7a3a; color: #1b7a3a; } .mn-v-A { border-left-color: #e3a92a; color: #b7841a; } .mn-v-R { border-left-color: #c0392b; color: #c0392b; }
.mn-varsel b { color: var(--gt-tekst); }

.mn-graf-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mn-vaelg { display: flex; gap: 4px; flex-wrap: wrap; }
.mn-chip { height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--gt-kant); background: var(--gt-flade2); color: var(--gt-tekst); font-size: 13px; font-weight: 600; }
.mn-chip[aria-pressed="true"] { background: var(--gt-tekst); color: var(--gt-flade); border-color: var(--gt-tekst); }
.mn-graf-tal b { font-family: Georgia, serif; font-size: 30px; font-variant-numeric: tabular-nums; }
.mn-graf-tal span { font-size: 13px; color: var(--gt-tekst2); }
.mn-graf svg { width: 100%; height: auto; display: block; }
.mn-baand { fill: #41584a; opacity: .04; }
.mn-baand-1 { opacity: .11; }
.mn-baand-kant { stroke: #41584a; stroke-width: 1; opacity: .35; }
.mn-baand-tx { font-size: 12px; fill: #41584a; font-weight: 600; }
.mn-gitter { stroke: var(--gt-kant); stroke-width: 1; opacity: .5; }
.mn-akse { font-size: 12px; fill: var(--gt-tekst2); }
.mn-idag { stroke: var(--gt-tekst2); stroke-dasharray: 2 3; }
.mn-plan { fill: none; stroke: var(--gt-tekst2); stroke-width: 2; stroke-dasharray: 6 5; }
.mn-maalt-linje { fill: none; stroke: var(--gt-accent); stroke-width: 2; opacity: .6; }
.mn-maalt { fill: var(--gt-accent); stroke: var(--gt-flade); stroke-width: 2; }
.mn-tegn { display: flex; gap: 16px; font-size: 12px; color: var(--gt-tekst2); margin-top: 4px; }
.mn-tegn > span { display: inline-flex; align-items: center; gap: 6px; }
.mn-tegn-maalt { width: 10px; height: 10px; border-radius: 99px; background: var(--gt-accent); }
.mn-tegn-plan { width: 18px; border-top: 2px dashed var(--gt-tekst2); }

.mn-post { display: grid; grid-template-columns: 1fr 90px 90px 90px 120px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--gt-kant); font-size: 14px; }
.mn-post-hoved { font-size: 12px; color: var(--gt-tekst2); font-weight: 600; padding-top: 0; }
.mn-post-hoved span:nth-child(3), .mn-post-hoved span:nth-child(4) { text-align: right; }
.mn-post-navn b { display: block; } .mn-post-navn span { font-size: 13px; color: var(--gt-tekst2); }
.mn-post-sum { border-bottom: none; border-top: 2px solid var(--gt-tekst); font-weight: 700; }
.mn-kilde { justify-self: start; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.mn-k-fast { background: #dcdcec; color: #2a3789; } .mn-k-maalt { background: #e2eedd; color: #1b7a3a; } .mn-k-skoen { background: #f7edd2; color: #7a5a12; }
.mn-minibar { height: 8px; border-radius: 99px; background: var(--gt-flade2); overflow: hidden; }
.mn-minibar i { display: block; height: 100%; border-radius: 99px; }

.mn-trappe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.mn-trin { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 8px; background: var(--gt-flade2); }
.mn-trin-top b { display: block; font-size: 14px; }
.mn-trin-top .mn-kr { display: block; text-align: left; font-family: Georgia, serif; font-size: 20px; font-weight: 600; }
.mn-trin p { font-size: 13px; color: var(--gt-tekst2); }
.mn-her { outline: 2px solid var(--gt-accent); outline-offset: -2px; }
.mn-her-maerke { position: absolute; top: -10px; right: 12px; font-size: 11px; font-weight: 700; background: var(--gt-accent); color: #fff; padding: 2px 8px; border-radius: 99px; }

.mn-svar { font-size: 14px; padding: 8px 12px; border-radius: 8px; background: #e2eedd; margin: 0; }
.mn-svar.mn-svar-fejl { background: #f5dcd8; color: #c0392b; }
.mn-skelet { display: block; height: 120px; border-radius: 8px; }
.mn-u { font-size: 13px; color: var(--gt-tekst2); }
.mn-ret { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.mn-ret-felter { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 24px; }
.mn-ret-felt { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--gt-kant); }
.mn-ret-felt b { display: block; font-size: 14px; }
.mn-ret-felt small { font-size: 12px; color: var(--gt-tekst2); }
.mn-ret-felt input { height: 40px; border-radius: 8px; border: 1px solid var(--gt-kant); background: var(--gt-flade2); padding: 0 8px; font: inherit; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .mn-trappe { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .mn-hoved h1 { font-size: 26px; }
  .mn-maaned { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
  .mn-m-tal b { font-size: 40px; }
  .mn-post { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .mn-post-hoved { display: none; }
  .mn-post-navn { grid-column: 1 / -1; }
  .mn-post .mn-kilde { grid-column: 1; }
  .mn-kol-plan { display: none; }
  .mn-post .mn-minibar { grid-column: 1 / -1; }
  .mn-post-sum > span:empty { display: none; }
  .mn-trappe { grid-template-columns: 1fr; }
  .mn-varsler { grid-template-columns: 1fr; }
}