/* ==========================================================================
   Fragmenter af det rigtige system, gengivet 1:1 på hjemmesiden.

   Værdierne herunder er hentet direkte fra skoledata_app:
     - components/Layout.jsx  (TopBar, Card, SectionTitle, MetricCard, YearBadge)
     - pages/S01_Overblik.jsx (tagStyles, AI-mønsterrækker)
     - src/index.css          (body-baggrund #F4F5F7, 14px, samme fontstak)
   Ændres appens udtryk, skal denne fil følge med.

   Alle TAL i fragmenterne er eksempeldata fra en opdigtet skole.
   Der må ALDRIG stå tal fra en rigtig skole på hjemmesiden.
   ========================================================================== */

.app {
  min-width: 0;
  max-width: 100%;
  font-family: -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: #1A1A1A;
  background: #F4F5F7;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* Vandret scroll på små skærme frem for at mase fladen sammen.
   Fladen er bygget til en skærm — den skal ikke lade som om, den er en app. */
.app__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }

@media (max-width: 720px) {
  .app::after {
    content: "Træk til siden for at se hele fladen";
    display: block; font-size: 11.5px; color: #696e80;
    background: #fff; border-top: 1px solid #E0E2E8;
    padding: 7px 16px; text-align: center;
  }
}
.app__inner  { min-width: 720px; padding: 16px; }
.app__inner--wide { min-width: 860px; }

.app * { box-sizing: border-box; }
.app p { margin: 0; }

/* Et grid-/flex-barn har min-width:auto og ville ellers blive tvunget ud i
   .app__inner's min-bredde — så ville hele siden få vandret scroll i stedet
   for kun fragmentet. Gælder de containere, fragmenterne står i. */
.hero__grid > *,
.split > *,
.shot-after > * { min-width: 0; }

/* ------------------------------------------------------------- TopBar */

.app-top { background: #fff; border-bottom: 1px solid #E0E2E8; overflow: hidden; }
.app-top__row {
  padding: 10px 16px; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
}
.app-top__word {
  font-size: 18px; font-weight: 400; color: #1A1A1A; letter-spacing: -0.5px; line-height: 1;
}
.app-top__word b { font-weight: 700; color: #1a68c8; }
.app-top__spacer { flex: 1; }
.app-top__badge {
  font-size: 12.5px; color: #666; background: #F0F1F4;
  padding: 4px 10px; border-radius: 20px; white-space: nowrap;
}
.app-top__user { font-size: 12.5px; color: #555; white-space: nowrap; }
.app-top__logout {
  font-size: 12.5px; padding: 4px 11px; border-radius: 6px;
  border: 1px solid #E0E2E8; background: #fff; color: #696e80;
  flex-shrink: 0; white-space: nowrap;
}
/* Appen skjuler selv brugernavnet og lader nav-rækken scrolle på små skærme
   (index.css: .nav-username / .nav-scroll) — fragmentet gør det samme. */
@media (max-width: 720px) {
  .app-top__user { display: none; }
}
.app-nav {
  display: flex; gap: 2px; padding: 0 12px 8px;
  overflow-x: auto; scrollbar-width: none;
}
.app-nav::-webkit-scrollbar { display: none; }
.app-nav span {
  font-size: 13.5px; padding: 5px 13px; border-radius: 6px;
  white-space: nowrap; color: #696e80;
}
.app-nav span.is-on { background: #EEF4FD; color: #1a68c8; font-weight: 500; }

/* --------------------------------------------------------------- Card */

.app-h1 { font-size: 19px; font-weight: 700; margin-bottom: 19px; }

.app-card {
  background: #fff; border: 1px solid #E0E2E8; border-radius: 11px;
  padding: 17px; margin-bottom: 15px;
}
.app-card:last-child { margin-bottom: 0; }

.app-sect {
  font-size: 14px; font-weight: 700; color: #1A1A1A; margin-bottom: 11px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.app-year {
  font-size: 13px; font-weight: 600; color: #1a68c8; background: #EEF4FD;
  padding: 2px 10px; border-radius: 13px;
}
.app-btn {
  font-size: 12px; padding: 5px 11px; border-radius: 6px;
  border: 1px solid #1a68c8; background: #fff; color: #1a68c8; font-weight: 500;
}
.app-hint { font-size: 12px; color: #696e80; margin-bottom: 11px; line-height: 1.5; }
.app-meta { font-size: 11.5px; color: #696e80; }

/* --------------------------------------------------------- MetricCard */

.app-metrics { display: flex; gap: 11px; }
.app-metrics + .app-metrics { margin-top: 11px; }

.app-metric {
  background: #F8F9FC; border: 1px solid #E0E2E8; border-radius: 10px;
  padding: 12px 14px; flex: 1; position: relative; min-width: 0;
}
.app-metric__label {
  font-size: 11px; color: #696e80; text-transform: uppercase;
  letter-spacing: .4px; font-weight: 600; margin-bottom: 4px;
}
.app-metric__value { font-size: 24px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
.app-metric__sub  { font-size: 11.5px; color: #555; }
.app-metric__sub.up   { color: #0d7a52; }
.app-metric__sub.dn   { color: #C0392B; }
.app-metric__sub.warn { color: #9d5e00; }
.app-metric__ind {
  position: absolute; top: 11px; right: 11px;
  font-size: 10px; padding: 2px 7px; border-radius: 8px; font-weight: 600;
}
.ind-up   { background: #E8F7F0; color: #0d7a52; border: 1px solid #B8E8D0; }
.ind-ok   { background: #F4F5F7; color: #696e80; border: 1px solid #E0E2E8; }
.ind-dn   { background: #FEF0F2; color: #C0392B; border: 1px solid #F8C4C8; }
.ind-warn { background: #FEF8E6; color: #9d5e00; border: 1px solid #F5E0A0; }

/* ------------------------------------------------------- AI-mønstre */

.app-group {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; font-weight: 700; color: #5C6478;
  text-transform: uppercase; letter-spacing: .5px;
  margin: 4px 0 2px; padding-bottom: 4px; border-bottom: 1px solid #E0E2E8;
}
.app-pattern {
  display: flex; gap: 11px; padding: 9px 0;
  border-bottom: 1px solid #F4F5F7; align-items: flex-start;
}
.app-pattern:last-child { border-bottom: 0; }
.app-pattern__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.app-pattern__txt { flex: 1; font-size: 13px; color: #333; line-height: 1.7; }
.app-pattern__txt strong { font-weight: 700; color: #1A1A1A; }
.app-tag { font-size: 11px; padding: 2px 7px; border-radius: 8px; flex-shrink: 0; white-space: nowrap; }
.tag-pos  { background: #E8F7F0; color: #0d7a52; border: 1px solid #B8E8D0; }
.tag-warn { background: #FEF0F2; color: #C0392B; border: 1px solid #F8C4C8; }
.tag-info { background: #EEF4FD; color: #1a68c8; border: 1px solid #C6D9F7; }
.tag-soon { background: #FEF8E6; color: #9d5e00; border: 1px solid #F5E0A0; } /* matcher statusBadge.soon i S13_Klassekonference.jsx */

/* ------------------------------------------------------------- Diverse */

.app-legend {
  display: flex; gap: 17px; margin-top: 13px; padding-top: 11px;
  border-top: 1px solid #F0F1F4; flex-wrap: wrap;
  font-size: 11.5px; color: #555;
}
.app-legend > span { display: flex; align-items: center; gap: 5px; }
.app-sq { width: 12px; height: 12px; border-radius: 2px; }

.app-pill {
  font-size: 12px; font-weight: 600; color: #1a68c8; background: #EEF4FD;
  border: 1px solid #C6D9F7; border-radius: 13px; padding: 2px 10px;
}
.app-toggle { display: flex; gap: 4px; }
.app-toggle span {
  font-size: 11px; padding: 3px 9px; border-radius: 6px;
  border: 1px solid #E0E2E8; background: #F0F1F4; color: #555;
}
.app-toggle span.is-on {
  background: #1a68c8; border-color: #1a68c8; color: #fff; font-weight: 600;
}

.app-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: 10px 0; border-bottom: 1px solid #F4F5F7;
}
.app-row:last-child { border-bottom: 0; }
.app-row__t { font-size: 13px; color: #1A1A1A; font-weight: 600; }
.app-row__s { font-size: 11.5px; color: #696e80; margin-top: 2px; }

/* ---------------------------------------------------- Elevtabel (S02_Klasse.jsx) */

.app-etable { width: 100%; border-collapse: collapse; }
.app-etable th {
  font-size: 11.5px; color: #696e80; padding: 6px 8px; text-align: left;
  border-bottom: 1.5px solid #E0E2E8; font-weight: 500;
}
.app-etable th.num { text-align: center; }
.app-etable th .sub { font-size: 8.5px; font-weight: 400; color: #696e80; margin-top: 1px; }
.app-etable td { font-size: 13px; padding: 7px 8px; border-bottom: 1px solid #F4F5F7; }
.app-etable td.num { text-align: center; }
.app-etable tr.falling td { background: #FEF9F9; }
.app-etable .elev-flag { font-size: 12px; color: #C0392B; font-weight: 700; margin-left: 5px; }
.app-etable .elev-kon { font-size: 10.5px; color: #C0C4D0; margin-left: 5px; }
.app-etable .sc-badge {
  display: inline-block; padding: 2px 6px; border-radius: 5px;
  font-size: 11.5px; font-weight: 600; min-width: 34px;
}
.sc-hi { background: #E8F7F0; color: #0d7a52; }
.sc-ok { background: #EEF4FD; color: #1a68c8; }
.sc-md { background: #FEF8E6; color: #9d5e00; }
.sc-lo { background: #FEF0F2; color: #C0392B; }
.app-etable .trend-up   { color: #0d7a52; font-size: 13px; }
.app-etable .trend-dn   { color: #C0392B; font-size: 13px; }
.app-etable .trend-flat { color: #696e80; font-size: 13px; }

/* ------------------------------------------------------ Aftaler (S06_Refleksion.jsx) */

.app-statusrow {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; padding: 9px 12px; border-radius: 9px; margin-bottom: 7px;
}
.app-statusrow:last-child { margin-bottom: 0; }
.app-statusrow .count { font-size: 14px; font-weight: 700; }
.status-overdue { background: #FEF0F2; border: 1px solid #F3C6C0; }
.status-overdue .count { color: #C0392B; }
.status-soon    { background: #FEF8E6; border: 1px solid #F0DDA4; }
.status-soon .count    { color: #9d5e00; }
.status-ok      { background: #F0F9F5; border: 1px solid #BCE5D2; }
.status-ok .count      { color: #0d7a52; }

.app-pille {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border-radius: 999px; padding: 3px 11px; font-size: 11.5px; font-weight: 600;
}
.pille-overdue { background: #FEF0F2; color: #C0392B; border: 1px solid #F3C6C0; }
.pille-soon    { background: #FEF8E6; color: #9d5e00; border: 1px solid #F0DDA4; }
.pille-ok      { background: #F0F9F5; color: #0d7a52; border: 1px solid #BCE5D2; }

.app-fagtag {
  font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
  background: #EEF4FD; color: #1a68c8; border: 1px solid #DCE8FA; display: inline-block;
}

.app-aftalekort { background: #fff; border: 1px solid #E8EAEE; border-radius: 10px; padding: 13px 15px; margin-bottom: 9px; }
.app-aftalekort:last-child { margin-bottom: 0; }

.app-split { display: flex; gap: 15px; }
.app-split > * { flex: 1; min-width: 0; }
.app-colhead {
  font-size: 11.5px; font-weight: 700; color: #5C6478;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 9px;
}

.app-foot {
  margin-top: 20px; padding-top: 13px; border-top: 1px solid #F0F1F4;
  font-size: 11.5px; color: #696e80;
}

.app-textarea {
  border: 1px solid #E0E2E8; border-radius: 8px; background: #fff;
  padding: 10px 12px; font-size: 12.5px; color: #555; line-height: 1.6;
  min-height: 62px;
}

/* --------------------------------------- ramme + forklaring på siden */

.shot { margin: 0; }
.shot__cap {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px; font-size: 13.5px; color: var(--muted); line-height: 1.55;
}
.shot__cap svg { flex-shrink: 0; margin-top: 3px; }

.hold-back {
  border-left: 2px solid var(--line); padding-left: 18px;
  font-size: 14.5px; color: var(--muted); line-height: 1.6;
}

/* ==========================================================================
   RAPPORT — genskabt efter pages/S01_Rapport.jsx (skolerapport) og
   pages/S16_KommuneRapport.jsx (kommunerapport). Samme "brev"-visuelle sprog
   som de rigtige rapporter: hvid A4-agtig side, logo+dato-header, blå
   "kicker", fund uden tag-pille (fjernet fra det rigtige system 2026-09-16),
   indrammede nøgletalsbokse/graf/tabel. Skalerede ned fra print-pt til px
   for skarp skærmvisning — samme farver/struktur, ikke samme enheder.
   Alle tal er eksempeldata fra en opdigtet skole (Nordbæk Skole) og en
   opdigtet kommune (Havbjerg Kommune). ========================================================================== */

.rap-frame { background: #F7F8FA; border: 1px solid var(--line); border-radius: 14px; padding: 28px; box-shadow: var(--shadow-lg); }
.rapport-brev { max-width: 620px; margin: 0 auto; background: #fff; padding: 30px 34px 26px; box-shadow: 0 1px 4px rgba(0,0,0,.08); border-radius: 6px; font-family: "Segoe UI", -apple-system, Arial, sans-serif; color: #1A1A1A; }
.rap-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #EEF4FD; padding-bottom: 14px; margin-bottom: 18px; }
.rap-meta { text-align: right; font-size: 12px; color: #5B6472; line-height: 1.5; }
.rap-kicker { color: #2E7DE0; font-weight: 700; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.rap-titel h1 { color: #1A2540; font-size: 25px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.2px; }
.rap-undertitel { color: #5B6472; font-size: 13px; margin-bottom: 16px; }
.rap-metafakta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #5B6472; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #EEF0F4; }
.rap-metafakta strong { color: #1A2540; }
h2.rap-sektion { color: #1A2540; font-size: 16px; font-weight: 700; margin: 20px 0 3px; padding-bottom: 5px; border-bottom: 1px solid #DCE6F5; }
.rap-sektion-note { font-size: 11.5px; color: #7C879A; margin: 3px 0 10px; font-style: italic; }
.fund { padding: 10px 0; border-bottom: 1px solid #F0F2F6; }
.fund:last-child { border-bottom: none; }
.fund-titel { font-weight: 600; font-size: 13.5px; color: #1A2540; margin-bottom: 3px; }
.fund-detalje { font-size: 12.5px; line-height: 1.55; color: #38414F; }
.fund-detalje em { color: #1A2540; font-style: italic; }
.rap-prosa p { font-size: 12.5px; line-height: 1.6; color: #2A3142; margin: 0 0 10px; }
.rap-prosa p:last-child { margin-bottom: 0; }
.rap-metode { margin-top: 20px; padding-top: 12px; border-top: 1px dashed #DCE6F5; font-size: 10.5px; color: #8791A0; line-height: 1.6; }
.rap-footer { margin-top: 20px; padding-top: 12px; border-top: 1px solid #E0E2E8; font-size: 10.5px; color: #8791A0; display: flex; align-items: center; gap: 6px; }

/* Kommunerapportens indrammede nøgletal/graf/tabel — samme boks-stil som
   Frederiksberg-forlægget rapporten er bygget efter. */
.rap-bokse { display: flex; gap: 10px; margin: 0 0 4px; }
.rap-boks { flex: 1; border: 1px solid #E0E2E8; border-radius: 8px; padding: 12px 14px; }
.rap-boks-label { font-size: 10.5px; color: #7C879A; font-weight: 600; margin-bottom: 4px; }
.rap-boks-tal { font-size: 22px; font-weight: 700; color: #1A2540; line-height: 1.1; }
.rap-boks-note { font-size: 10.5px; color: #7C879A; margin-top: 4px; line-height: 1.4; }
.rap-visual-boks { border: 1px solid #E0E2E8; border-radius: 10px; padding: 14px; margin: 4px 0 0; }
.rap-graf-svg { width: 100%; height: auto; display: block; }
.rap-tabel { width: 100%; border-collapse: collapse; font-size: 12px; }
.rap-tabel th { text-align: left; font-size: 10px; font-weight: 600; color: #7C879A; text-transform: uppercase; letter-spacing: .03em; padding: 0 8px 6px; border-bottom: 1px solid #DCE6F5; }
.rap-tabel th.tal, .rap-tabel td.tal { text-align: right; }
.rap-tabel td { padding: 6px 8px; border-bottom: 1px solid #F0F2F6; color: #38414F; }
.rap-tabel tr:last-child td { border-bottom: none; }
.rap-tabel-gruppe td { padding: 12px 8px 2px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: #7C879A; border-bottom: none; }

/* Rapport-miniaturer + lightbox — samme .rap-frame/.rapport-brev-markup som
   fuldstørrelse, bare skaleret ned og beskåret, så de to eksempler kan stå
   side om side uden at fylde hele siden. Klik åbner en klon i fuld størrelse. */
.rap-thumb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.rap-thumb {
  position: relative; height: 420px; overflow: hidden; cursor: pointer;
  display: flex; justify-content: center; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 14px; background: #F7F8FA;
  box-shadow: var(--shadow-md); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.rap-thumb:hover, .rap-thumb:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lg); outline: none; }
.rap-thumb-inner { flex-shrink: 0; transform: scale(.6); transform-origin: top center; pointer-events: none; }
.rap-thumb-inner .rap-frame { padding: 20px; }
.rap-thumb-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 72px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(247,248,250,0), #F7F8FA 80%);
}
.rap-thumb-zoom {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); display: flex; align-items: center;
  justify-content: center; box-shadow: var(--shadow-sm); color: var(--blue); font-size: 14px;
}

.rap-modal-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(10,14,26,.62);
  z-index: 300; padding: 60px 20px 40px; overflow-y: auto;
}
.rap-modal-backdrop.is-open { display: flex; justify-content: center; align-items: flex-start; }
.rap-modal-inner { max-width: 760px; width: 100%; }
.rap-modal-close {
  position: fixed; top: 20px; right: 24px; width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); cursor: pointer; font-size: 19px; color: var(--ink);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md);
}

@media (max-width: 720px) {
  .rap-thumb-row { grid-template-columns: 1fr; }
  .rap-thumb { height: 340px; }
  .rap-thumb-inner { transform: scale(.46); }
}