/* ── /admin's eget lag oven paa forma.css (11/9 2026) ─────────────────────
   Dashboardet blev bygget om fra syv brede tabeller under hinanden til FIRE
   FANER i appens egen bundmenu (Users / Access / Money / Log) og ét kort pr.
   bruger - i appens 430px-spalte, saa det kan betjenes paa en telefon.

   Alt hvad appen allerede har, laanes fra forma.css uaendret: :root-farverne,
   .app-top/header/.logo, den BARE nav-selektor (bundmenuen), .kort, .knap,
   .felt, .lille, .maerke, .log-indgang/.log-blok og .admin-badge/.admin-tabel.
   Denne fil indeholder KUN det, admin har og appen ikke har - og den
   indfoerer ingen ny farveliteral: hver farve er en variabel fra :root.

   forma.css roeres ikke, af to grunde: appens stilark skal ikke kende til
   admin (samme regel som sider.css), og en aendring dér ville kraeve at ?v=
   haeves paa alle seks sider for noget, kun én af dem bruger. */

/* Spaltens to haarfine kanter - ordret #v-app::before fra forma.css, paa
   admin's egen wrapper. Kanten hoerer til overalt, hvor spalten ER formatet. */
.admin-app{position:relative; isolation:isolate; min-height:100vh}
.admin-app::before{
  content:''; position:fixed; top:0; bottom:0; left:0; right:0;
  width:var(--spalte); margin:0 auto; pointer-events:none; z-index:5;
  border-left:1px solid var(--kant); border-right:1px solid var(--kant);
}
@media (max-width:431px){ .admin-app::before{display:none} }

/* "Back to app" staar dér, hvor dagen staar inde i appen: yderst til hoejre i
   hovedet, daempet. Det er dashboardets ene vej ud og hoerer ikke i fanerne. */
.admin-tilbage{text-decoration:none}
.admin-tilbage:hover{color:var(--tekst)}

/* Fanens titel - én pr. skaerm, i samme skrift som appens dom. */
.fane-titel{font-family:var(--skrift-dom); font-size:36px; font-weight:400;
  letter-spacing:-.01em; line-height:1.05; margin:14px 0 14px}
.fane-under{margin:0 0 14px}

/* ── Users ──────────────────────────────────────────────────────────────── */
/* Fire tal oeverst: hvor mange, hvor mange betaler, hvor mange proever, og
   hvor taet founder-tilbuddet er paa sit loft. Tabulartal, saa raekken ikke
   hopper fra 9 til 10. */
.opsummering{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px}
.ops{background:var(--kort); border:1px solid var(--kant); border-radius:12px;
  padding:10px 6px; text-align:center; min-width:0}
.ops .v{font-family:var(--skrift-display); font-size:20px; font-weight:700;
  font-variant-numeric:tabular-nums; line-height:1.1}
.ops .l{font-size:10.5px; color:var(--daempet); text-transform:uppercase;
  letter-spacing:.04em; margin-top:3px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}

/* Filterpiller - samme figur som sidernes .side-nav a, men <button>. */
.filtre{display:flex; gap:6px; margin-bottom:14px; overflow-x:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch}
.filtre::-webkit-scrollbar{display:none}
.filtre button{flex:0 0 auto; padding:7px 13px; border-radius:20px; font-size:13px;
  font-weight:500; color:var(--daempet); background:none; border:1px solid transparent;
  font-family:inherit; cursor:pointer; white-space:nowrap}
.filtre button.aktiv{color:var(--tekst); background:var(--kort); border-color:var(--kant)}

/* Brugerkortet. Navnet baerer raekken, maerkerne siger tier/rolle, statuslinjen
   siger den ENE dato der betyder noget (trial slutter / fornyes / gratis til),
   og resten er smaat og daempet. Handlingerne staar nederst som lige brede
   knapper, og det panel de aabner (ekstra dage, refusion, Gemini-log) ligger
   INDE i kortet - ikke i et andet kort nederst paa siden. */
.bk-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.bk-navn{font-weight:600; font-size:15.5px; min-width:0; overflow-wrap:anywhere}
.bk-maerker{display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; flex:0 1 auto}
.bk-email{font-size:12.5px; color:var(--daempet); overflow-wrap:anywhere; margin-top:2px}
.bk-status{margin-top:10px; font-size:13.5px; line-height:1.5}
.bk-status b{font-weight:600}
.bk-status.roed{color:var(--roed)}
/* Datasundhed. Venstrekant frem for fuld baggrund: kortet har i forvejen
   statusmaerker i toppen, og en fyldt kasse ville konkurrere med dem. Farven
   baerer ikke informationen alene - 'kort' staar i fed som tekst, saa den
   ogsaa kan laeses i graatoner. */
.bk-data{margin-top:10px; padding:8px 10px; border-radius:8px; font-size:13px;
  line-height:1.5; border-left:3px solid}
.bk-data b{font-weight:600; display:block}
.bk-data.alvorlig{border-left-color:var(--roed); background:color-mix(in srgb, var(--roed) 10%, transparent)}
.bk-data.info{border-left-color:var(--daempet); background:color-mix(in srgb, var(--daempet) 10%, transparent)}
.bk-enheder{margin-top:6px; font-size:12px; opacity:.9}
.bk-svar{margin-top:6px; font-size:12px; opacity:.85}
.bk-meta{font-size:12.5px; color:var(--daempet); margin-top:4px; line-height:1.5}
.bk-meta .skel{opacity:.5; margin:0 4px}

/* Maerkernes farver. .maerke (og .maerke.groen) er forma.css's; de tre her er
   admin's egne toner af samme figur: rav = rolle/handling (Operator, Founder),
   gul = midlertidigt (Trial, granted), roed = noget er galt (past_due). */
.maerke.rav{background:color-mix(in srgb, var(--rav) 18%, transparent); color:var(--rav)}
.maerke.gul{background:color-mix(in srgb, var(--gul) 18%, transparent); color:var(--gul)}
.maerke.roed{background:color-mix(in srgb, var(--roed) 18%, transparent); color:var(--roed)}

/* Kortets egen historik: de kompensationer, der er givet til NETOP denne
   bruger, saa "+30 days" staar dér, hvor man gav dem - ikke kun i Log-fanen. */
.bk-historik{margin-top:10px; padding-top:9px; border-top:1px solid var(--kant);
  font-size:12.5px; color:var(--daempet); line-height:1.6}
.bk-historik .ok{color:var(--groen)}
.bk-historik .fejlet{color:var(--roed)}

.bk-handlinger{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px}
.bk-knap{flex:1 1 auto; text-align:center; padding:9px 8px; border-radius:9px;
  border:1px solid var(--kant); background:none; color:var(--tekst); font-size:13px;
  font-family:inherit; cursor:pointer; text-decoration:none; white-space:nowrap;
  line-height:1.3}
.bk-knap:hover{background:color-mix(in srgb, var(--tekst) 6%, transparent)}
.bk-knap.aktiv{background:var(--felt); border-color:var(--rav); color:var(--rav)}
.bk-knap:disabled{opacity:.4; cursor:default}
.bk-panel{margin-top:12px; padding-top:12px; border-top:1px solid var(--kant)}

/* ── Formularer inde i et panel (ekstra dage, refusion, ny adgang) ─────── */
.admin-form{display:flex; flex-direction:column; gap:10px}
.admin-form .felt{margin-bottom:0}
.form-knapper{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.form-knapper .knap{width:auto; padding:10px 16px; font-size:14px}
.form-svar{font-size:13px; line-height:1.5; margin-top:2px}
.form-svar.fejl{color:var(--roed)}
.form-svar.ok{color:var(--groen)}

/* ── Raekker (adgangsliste, udbetalinger, kompensationer, kig-log) ──────
   To linjer pr. raekke: hvad det er, og de smaa detaljer under. Bevidst
   ingen tabel - fire-seks kolonner i 430px kan kun laeses ved at rulle
   sidelaens, og det er den fejl, hele ombygningen fjerner. */
.raekker{margin:0 -2px}
.raekke{padding:10px 2px; border-top:1px solid var(--kant)}
.raekke:first-child{border-top:none}
.r-top{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.r-titel{font-size:13.5px; min-width:0; overflow-wrap:anywhere}
.r-hoejre{flex:0 0 auto; display:flex; gap:6px; align-items:center}
.r-under{font-size:12.5px; color:var(--daempet); margin-top:2px; line-height:1.5}
.raekke.fejlet .r-titel, .raekke.fejlet .r-under{color:var(--roed)}
/* Creator-profilen under en creator-raekke (Public name + App Store page ID). */
.cp-form{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.cp-form .felt{margin-bottom:0; min-height:40px; font-size:13px; padding:8px 10px}
.tom{font-size:13px; color:var(--daempet); padding:6px 0}

/* ── Access: soegefelt + dropdown (11/9 2026) ─────────────────────────────
   Erstatter et frit e-mail-felt: oprettelse er aaben for alle nu, saa der er
   ikke laengere noget behov for at kunne skrive en adresse ind, der ikke
   allerede findes. Traefferne er brugere, dashboardet allerede har indlaest
   (BRUGERE), ikke et nyt opslag - se admin.js's adgangSoegResultater(). */
.soeg-boks{position:relative}
.soeg-resultater{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20;
  background:var(--kort); border:1px solid var(--kant); border-radius:10px;
  max-height:240px; overflow-y:auto}
.soeg-traeffer{padding:9px 12px; cursor:pointer; border-top:1px solid var(--kant)}
.soeg-traeffer:first-child{border-top:none}
.soeg-traeffer:hover{background:color-mix(in srgb, var(--tekst) 6%, transparent)}
.st-navn{font-size:13.5px; font-weight:500; overflow-wrap:anywhere}
.st-nu{font-weight:400; color:var(--daempet)}
.st-email{font-size:12px; color:var(--daempet); margin-top:1px; overflow-wrap:anywhere}

/* Money-fanens "total" staar som et tal, ikke som en saetning. */
.penge-tal{display:flex; gap:10px; margin:0 0 12px}
.penge-tal .ops{flex:1}
.penge-tal .ops .v{font-size:18px}

/* ── Feedback (11/9 2026) ──────────────────────────────────────────────────
   Raekken folder samme greb som brugerkortets +Days-panel: klik paa toppen
   eller undertitlen aabner et panel INDE i raekken (.tm-panel, samme
   .admin-form/.felt/.form-knapper/.form-svar som resten af siden). */
.tm-raekke .r-top, .tm-raekke .r-under{cursor:pointer}
.tm-panel{margin-top:10px; padding-top:10px; border-top:1px solid var(--kant)}
.tm-tekst{white-space:pre-wrap; margin:8px 0 12px; font-size:13.5px; line-height:1.55}
.tm-diag{margin-top:12px; font-size:12.5px}
.tm-diag summary{cursor:pointer; color:var(--daempet)}
.tm-diag pre, .tm-uddrag{white-space:pre-wrap; word-break:break-word; font-size:11.5px;
  background:var(--felt); border-radius:8px; padding:8px 10px; max-height:260px; overflow:auto}
.tm-diag h4{margin:12px 0 4px; font-size:12.5px}

/* ── Makeover 25/10 2026 ───────────────────────────────────────────────────
   Tre greb: (1) en Overview-fane med tallene og "Needs attention" oeverst,
   (2) brugerne som kompakte raekker i ÉN flise (tryk folder ud) i stedet for
   ét stort kort hver, (3) appens makeover-sprog: serif-titler (--skrift-dom),
   ikon-bundmenu med rav-tommel, sektionsoverskrifter i smaa versaler. Stadig
   ingen ny farveliteral - kun :root-variabler. */

/* Bundmenuen er en flydende pille; indholdet skal kunne rulle fri af den. */
.admin-app main{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
nav .nav-tal{position:absolute; top:6px; left:calc(50% + 6px); min-width:16px; height:16px;
  padding:0 4px; border-radius:999px; background:var(--rav); color:var(--paa-rav);
  font-size:10px; font-weight:700; font-style:normal; line-height:16px; text-align:center}

.ov-dato{margin:18px 0 0; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--daempet)}
.ov-dato + .fane-titel{margin-top:2px}
.sektion-titel{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--daempet); margin:24px 4px 8px}

/* Fire tal i et 2x2-gitter - hvert er en genvej til sin fane. */
.ov-tal{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ov-flise{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
  background:var(--kort); border:1px solid var(--kant); border-radius:var(--r-flise);
  padding:14px 16px; color:var(--tekst); font-family:inherit; cursor:pointer; min-width:0;
  transition:transform .18s var(--fjeder)}
.ov-flise:active{transform:scale(.97)}
.ov-flise .v{font-size:30px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.ov-flise .l{font-size:12.5px; color:var(--daempet)}
.ov-flise .u{font-size:11.5px; color:var(--groen); margin-top:2px}

/* Listeflisen: raekker med haarfine skel, ingen egen polstring i top/bund. */
.liste-kort{padding:4px 0; overflow:hidden}
.liste-kort > .tom{padding:14px 16px}
.ov-tom{color:var(--daempet)}

/* Én raekke = en trykflade (Overview og Users deler figuren). */
.ov-raekke, .br-top{display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:11px 14px 11px 16px; background:none; border:none; color:var(--tekst);
  font-family:inherit; cursor:pointer; border-top:1px solid var(--kant); min-height:58px}
.liste-kort > :first-child, .liste-kort > :first-child .br-top{border-top:none}
.ov-raekke:active, .br-top:active{background:color-mix(in srgb, var(--tekst) 5%, transparent)}
.br-midt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px}
.br-navn{font-size:15px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.br-linje{font-size:12.5px; color:var(--daempet); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.br-maerke{flex:0 0 auto}
.br-pil{flex:0 0 auto; width:16px; height:16px; stroke:var(--daempet-2); fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .2s var(--ud)}
.br-avatar{flex:0 0 auto; position:relative; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:var(--kort-2); border:1px solid var(--kant-staerk);
  font-size:14px; font-weight:600; color:var(--daempet)}
.br-avatar.problem::after{content:''; position:absolute; top:-1px; right:-1px; width:10px; height:10px;
  border-radius:50%; background:var(--roed); border:2px solid var(--kort)}
.ov-prik{flex:0 0 auto; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--daempet-2); margin-right:2px; vertical-align:middle}
.r-titel .ov-prik{margin-right:8px; position:relative; top:-1px}
.ov-prik.roed{background:var(--roed)} .ov-prik.rav{background:var(--rav)}
.ov-prik.gul{background:var(--gul)} .ov-prik.groen{background:var(--groen)}

/* Foldet ud: detaljerne ligger INDE i raekken, under toppen. */
.br.aaben .br-pil{transform:rotate(90deg)}
.br.aaben{background:color-mix(in srgb, var(--tekst) 3%, transparent)}
.br-detalje{padding:2px 16px 16px 64px}
.br-detalje .bk-maerker{justify-content:flex-start; margin-bottom:6px}
.br-detalje .bk-email{margin-top:0}
@media (max-width:360px){ .br-detalje{padding-left:16px} }

.soeg-felt{width:100%; margin:0 0 10px; min-height:44px; border-radius:var(--r-kontrol)}

/* Feedback i listeflisen: raekkerne faar flisens indre polstring. */
#tm-liste .raekke{padding:12px 16px}
#tm-liste .raekke:first-child{border-top:none}
.tm-raekke .r-titel{font-weight:500}