/* Webbler Rapporter — app-styles oven på Tabler */

/* Synlig tastatur-fokus på knapper og links (WCAG 2.4.7) */
.btn:focus-visible,
a:focus-visible {
  outline: 2px solid #066fd1;
  outline-offset: 2px;
}

/* Fast gem-kvittering nederst til højre — synlig uanset scroll-position */
#save-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1030;
  background: #fff;
  border: 1px solid #dadfe5;
  border-radius: 2rem;
  padding: 0.375rem 0.875rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  font-size: 0.875rem;
}
#save-toast:not(:has(#save-state *)) {
  display: none;
}

/* Markeds-overskrift i multi-markeds-editors — tydeligt skifte mellem lande */
.market-heading {
  font-size: 1.375rem;
  margin: 1.25rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #dadfe5;
}

/* Google-login-knap (samme udtryk som consultant-dashboard) */
.btn-google {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1.25rem;
  border: 1px solid #dadfe5;
  border-radius: 0.5rem;
  background: #fff;
  color: #1f2937;
  font-weight: 500;
  text-decoration: none;
}
.btn-google:hover {
  background: #f6f8fb;
  color: #1f2937;
}

/* Status-badges, success-knap og -tekst mørknet for WCAG AA-kontrast (1.4.3/1.4.11).
   Tabler's -lt-badges og text-success parrer en lys baggrund med den gennemsnitlige
   knap-farve, hvilket lander på ~2-2,7:1 — for lavt til statustekst. Overrider kun de
   klasser vi faktisk bruger (badge/btn/text-success), ikke --tblr-success-tokenet, så
   alert-success/alert-warning (utestet lokalt, bag login) forbliver urørt. */
.badge.bg-yellow-lt { color: #7a4d00 !important; }
.badge.bg-green-lt { color: #157a2c !important; }
.badge.bg-blue-lt { color: #0a4f96 !important; }
.badge.bg-purple-lt { color: #7a2a91 !important; }
.badge.bg-secondary-lt { color: #495057 !important; }
.btn-success { --tblr-btn-bg: #157a2c; --tblr-btn-hover-bg: #12631f; --tblr-btn-active-bg: #12631f; }
.text-success { color: #157a2c !important; }

/* Pladsholder-tekst mørknet — bruges bl.a. til at vise datakildens tal når et
   Manuelle tal-felt er tomt, så det reelt skal kunne læses, ikke kun antydes. */
.form-control::placeholder { color: #6b7170; opacity: 1; }

/* Card-header skal folde til 2 rækker når titlen (fx sektions-badges: "Ekstra
   kanal" + "Ingen data") wrapper til 2 linjer — ellers presses
   .card-actions' switches (Manuelle tal/Vis i rapport) uden for kortet. */
.card-header {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

/* Switch-targets op på 24px højde (WCAG 2.5.8) */
.form-switch .form-check-input {
  width: 2.75rem;
  height: 1.5rem;
  margin-right: 0.5rem;
}
.form-switch .form-check-label {
  white-space: nowrap;
}

/* Live samarbejde (SSE) — presence-avatarer, blød lås, sync-blink.
   Deles af editoren og det ugentlige overblik. */
.presence-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  background: var(--tblr-primary, #206bc4); color: #fff;
  margin-left: -0.4rem; border: 2px solid #fff;
}
.presence-chip.is-self { background: #495057; }
.presence-label { font-size: 0.8rem; }
/* Felt en anden redigerer lige nu: dæmpet + kan ikke redigeres */
.field-locked {
  background: #f5f6f8 !important; cursor: not-allowed;
}
.lock-badge { font-size: 0.7rem; white-space: nowrap; }
/* Kort blink når et felt/celle netop er opdateret af en anden */
@keyframes fieldsync {
  0%   { box-shadow: 0 0 0 0.12rem rgba(32, 107, 196, 0.55); }
  100% { box-shadow: 0 0 0 0.12rem rgba(32, 107, 196, 0); }
}
.field-synced { animation: fieldsync 1.3s ease-out; }

/* Editorens live preview: sticky panel med rapporten i skaleret iframe.
   Iframen er 1000px bred internt (VIRTUAL_W i editor.ejs) og transformeres
   ned til panelbredden — højden kompenseres i JS så udsnittet fylder wrappen. */
#preview-wrap {
  position: sticky;
  top: 1rem;
  height: calc(100vh - 5.5rem);
  overflow: hidden;
  border-radius: 0.5rem;
  border: 1px solid var(--tblr-border-color, #dadfe5);
  background: #eceeec;
}
#preview {
  width: 1000px;
  border: 0;
  display: block;
  transform-origin: 0 0;
}

/* Navnefeltet i "Nøgletal på siden" (omdøb et nøgletal). Et TOMT felt betyder
   "brug standardnavnet", som står som placeholder — den skal derfor læses som
   almindelig tekst, ikke som en tom formular. Feltet er borderless indtil man
   holder musen over eller sætter fokus, så listen stadig ser ud som navne. */
.field-name::placeholder { color: inherit; opacity: 1; }
.field-name:hover { background: var(--tblr-bg-surface-secondary, #f6f8fb) !important; }


/* Tablers .card-actions trækker sig -0.5rem ind i headerens højre padding.
   Det er tiltænkt ikon-knapper, hvis egen padding udligner trækket — vores
   switch-labels har ingen padding, så "Vis i rapport" endte klods op ad
   kortets kant. Giv switch-rækken headerens padding tilbage. */
.card-header .card-actions:has(.form-switch) {
  margin-right: 0;
}

/* ---------- "Nøgletal på siden" (retning A, 2026-08-24) ----------
   Listen viser de nøgletal der står på sliden, med deres tal; "Tilpas"-panelet
   rummer opsætningen. De to lag gemmer forskellige steder (rapport vs. kunde),
   så de er også visuelt adskilt: listen er lys og tæt, panelet indrammet. */

.fx-scope {
  font-size: 0.75rem;
  color: #6b7170;
  margin-left: 0.35rem;
}
.fx-panel-btn {
  padding: 0.125rem 0.5rem;
  font-size: 0.8125rem;
}

.fx-empty {
  font-size: 0.8125rem;
  color: #6b7170;
  background: #f6f8fb;
  border-radius: 0.25rem;
  padding: 0.375rem 0.5rem;
}

/* Én række pr. nøgletal: navn — tal — kilde — nulstil. Faste kolonner, så
   tallene står under hinanden og rækkerne kan skimmes lodret. */
.fx-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem auto 1.5rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.1875rem 0;
  border-bottom: 1px solid #f0f2f4;
}
.fx-row:last-child { border-bottom: 0; }
/* Parse-fejlbeskeden lægges sidst i rækken og spænder hele bredden, så den
   ikke bliver et grid-item midt i rækken (se focusout-handleren i editor.ejs). */
.fx-row .mm-parse-hint { grid-column: 1 / -1; }
.fx-name {
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fx-val { text-align: right; }
input.fx-val { font-variant-numeric: tabular-nums; }
.fx-calc {
  font-size: 0.875rem;
  color: #6b7170;
  font-variant-numeric: tabular-nums;
  padding-right: 0.5rem;
}
.fx-src {
  font-size: 0.6875rem;
  color: #6b7170;
  white-space: nowrap;
  text-align: right;
  min-width: 5.5rem;
}
/* "Overskrevet" afløser kilde-mærkatet så snart der står et tal i feltet */
.fx-over { display: none; color: #0a4f96; font-weight: 600; }
.fx-row.is-over [data-src-label] { display: none; }
.fx-row.is-over .fx-over { display: inline; }
.fx-row.is-over input.fx-val { border-color: #a8c7e8; background: #f5f9ff; }
/* 24×24 er minimum klikmål (WCAG 2.5.8) — samme grund som switch-størrelsen
   ovenfor. Knappen fylder derfor sin kolonne ud, selv om glyffen er lille. */
.fx-reset {
  border: 0;
  background: none;
  color: #6b7170;
  font-size: 0.875rem;
  line-height: 1;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  cursor: pointer;
  visibility: hidden;
}
.fx-row.is-over .fx-reset { visibility: visible; }
.fx-reset:hover { color: #1f2937; }

/* Tilpas-panelet: kunde-bredt, altså et andet lag end listen ovenfor. */
.fx-panel {
  border: 1px solid #dadfe5;
  border-radius: 0.375rem;
  padding: 0.625rem 0.75rem;
  background: #fbfcfd;
  margin-bottom: 0.5rem;
}
.fx-panel-head {
  font-size: 0.75rem;
  color: #495057;
  background: #fff4e0;
  border-radius: 0.25rem;
  padding: 0.3125rem 0.5rem;
  margin-bottom: 0.625rem;
}
.fx-cfg-head,
.fx-cfg-row {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) 3.25rem;
  align-items: center;
  gap: 0.5rem;
}
.fx-cfg-head {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6b7170;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #e6e9ec;
  margin-bottom: 0.25rem;
}
.fx-cfg-head > :last-child { text-align: center; }
.fx-cfg-row { padding: 0.125rem 0; }
.fx-cfg-row.is-off .field-name { color: #9aa0a6; }
.fx-cfg-sub {
  font-size: 0.6875rem;
  color: #6b7170;
  margin: -0.125rem 0 0.25rem 2.25rem;
}
/* Synlighed er et øje, ikke en kontakt — så den ikke forveksles med Δ-switchen */
.fx-eye {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.5rem;          /* 24px klikmål (WCAG 2.5.8) */
  line-height: 1;
  margin: 0;
  color: #495057;
}
.fx-eye:hover { color: #1f2937; }
/* Selve checkboxen er visually-hidden, så fokus-ringen skal tegnes på labelen */
.fx-eye:has(:focus-visible) { outline: 2px solid #066fd1; outline-offset: 2px; border-radius: 0.25rem; }
.fx-cfg-row.is-off .fx-eye { color: #adb5bd; }
.fx-eye.is-static { cursor: default; color: #6b7170; font-size: 0.9375rem; }
.fx-nodelta { color: #9aa0a6; text-align: center; font-size: 0.8125rem; }

/* ---------- Oversigt + detaljepanel (2026-08-24) ----------
   Venstre spalte er to paneler i stedet for otte kort: rapportens sider som
   tjekliste og navigation øverst, den valgte side lige nedenunder. Preview i
   højre spalte bliver derfor aldrig dækket. */

/* Markeds-faner: ét marked ad gangen, ellers bliver oversigten dobbelt så lang */
.mkt-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}
.mkt-tab {
  border: 1px solid var(--tblr-border-color, #dadfe5);
  background: #fff;
  border-radius: 0.375rem;
  padding: 0.3125rem 0.75rem;
  font-size: 0.875rem;
  color: #495057;
  cursor: pointer;
}
.mkt-tab:hover { background: #f6f8fb; }
.mkt-tab.on {
  background: #1f2937;
  border-color: #1f2937;
  color: #fff;
  font-weight: 500;
}

/* Venstre spalte scroller som ÉN kolonne — hele vejen gennem statuskort,
   oversigt og indtastningsområde. Prøvet og forkastet 2026-08-24: en sticky
   oversigt (indholdet forsvandt ind bag den) og et rude-layout med fast top +
   eget scroll-område (tre scrollbarer på én skærm, og indtastningsområdet blev
   klemt sammen). Preview i højre spalte er stadig sticky for sig selv. */

.ov-summary {
  font-size: 0.75rem;
  color: #6b7170;
}
.ov-summary.is-todo { color: #7a4d00; font-weight: 600; }

.ov-row {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr) auto 2.75rem;
  gap: 0.625rem;
  align-items: center;
  padding: 0.375rem 1rem;
  border-bottom: 1px solid #f0f2f4;
  cursor: pointer;
}
.ov-row:last-child { border-bottom: 0; }
.ov-row:hover { background: #f6f8fb; }
.ov-row:focus-visible { outline: 2px solid #066fd1; outline-offset: -2px; }
/* Den åbne side: grøn kant + baggrund, så man altid kan se hvor man er */
.ov-row.is-open {
  background: #eef4f1;
  box-shadow: inset 3px 0 0 #2e5c4c;
}
.ov-row.is-open:hover { background: #e7efeb; }

.ov-mark {
  font-size: 0.8125rem;
  line-height: 1;
  text-align: center;
  font-weight: 700;
}
.ov-mark.is-ok { color: #157a2c; }
.ov-mark.is-todo { color: #b06a00; }
.ov-mark.is-off { color: #adb5bd; font-weight: 400; }

.ov-name {
  font-size: 0.875rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ov-extra {
  font-size: 0.6875rem;
  font-weight: 400;
  color: #0a4f96;
  background: #eaf2fb;
  border-radius: 0.75rem;
  padding: 0 0.375rem;
  vertical-align: 0.05em;
}
.ov-status {
  font-size: 0.6875rem;
  color: #6b7170;
  text-align: right;
  white-space: nowrap;
}
.ov-status .warn { color: #7a4d00; font-weight: 600; }
.ov-status .over { color: #0a4f96; font-weight: 600; }
.ov-row.is-off .ov-name,
.ov-row.is-off .ov-status { color: #9aa0a6; }
/* Switchen i rækken må ikke åbne siden — den er sin egen kontrol */
.ov-row .form-switch { cursor: default; }

/* Detaljepanelet: fanerne Tal / Tekst / Opsætning */
.pane-market {
  font-size: 0.75rem;
  font-weight: 400;
  color: #6b7170;
  margin-left: 0.375rem;
}
.pane-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--tblr-border-color, #dadfe5);
}
.pane-tab {
  border: 0;
  background: none;
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  color: #6b7170;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.pane-tab:hover { color: #1f2937; }
.pane-tab.on {
  color: #1f2937;
  font-weight: 600;
  border-bottom-color: #2e5c4c;
}
.pane-tab:focus-visible { outline: 2px solid #066fd1; outline-offset: -2px; }

/* Hvilket lag skriver man i? Står øverst i hver fane, ikke som fodnote. */
.fx-scope-line {
  font-size: 0.6875rem;
  color: #6b7170;
  margin-bottom: 0.5rem;
}

/* Observations- og indsatsfelterne skal kunne rumme et par bullets uden at
   man skriver i en sprække. Auto-grow (editor.ejs) vokser videre herfra;
   min-height sikrer at et TOMT felt også ser ud til at være til at skrive i. */
#detail-stack .tab-pane[data-tabpane="tekst"] textarea { min-height: 8rem; }
#detail-stack .slide-pane textarea { min-height: 5rem; }