/* ============================================================
   CIVICATION – REFRESH
   Legges etter civi.css. Gir hver seksjon visuell identitet og
   et konsistent fargesystem, uten å endre HTML-strukturen.
============================================================ */

:root{
  /* Dempet kategoripalett — én farge per livsområde, ikke regnbue per boks.
     Fargene brukes kun som tynne kantmarger, hårlinjer og små detaljer;
     flatene forblir sorte. Gull (--civi-accent) er fortsatt primærfargen. */
  --civi-hue-karriere: #d6aa3a;   /* gull   — jobb, arbeidsdag, retning */
  --civi-hue-personlig: #5fb879;  /* grønn  — hjem, psyke, identitet, mennesker */
  --civi-hue-system: #7fa7d6;     /* blå    — innkommende/system */
  --civi-hue-kultur: #b482ce;     /* lilla  — kapital, offentlig, debatt */
  --civi-hue-kommers: #d9914f;    /* oransje — butikker og pakker */
  --civi-hue-fritid: #6fc7c0;     /* turkis — fritid (sport, natur, aktiviteter) */

  /* Aliasene under er bevart for bakoverkompatibilitet. */
  --civi-accent-onb:    var(--civi-hue-karriere);
  --civi-accent-cap:    var(--civi-hue-kultur);
  --civi-accent-id:     var(--civi-hue-personlig);
  --civi-accent-psy:    var(--civi-hue-personlig);
  --civi-accent-home:   var(--civi-hue-personlig);
  --civi-accent-public: var(--civi-hue-kultur);
  --civi-accent-job:    var(--civi-hue-karriere);
  --civi-accent-day:    var(--civi-hue-karriere);
  --civi-accent-debate: var(--civi-hue-kultur);
  --civi-accent-people: var(--civi-hue-personlig);
  --civi-accent-store:  var(--civi-hue-kommers);
  --civi-accent-track:  var(--civi-hue-karriere);
  --civi-accent-inbox:  var(--civi-hue-system);
}

/* Hver seksjon får sin kategori-farge via --sec-accent.
   Alt annet (kant, marg, hårlinje, prikk, chips) leser denne variabelen. */
#activeJobSection,
#civiWorkdaySection,
#civiOnboardingSection,
#civiTrackHUD          { --sec-accent: var(--civi-hue-karriere); }

#civiHomeStatus,
#civiPsyche,
#civiIdentitySection,
#civiPeopleSection     { --sec-accent: var(--civi-hue-personlig); }

#civiInboxSection      { --sec-accent: var(--civi-hue-system); }

/* .civi-capital er en klasse (ingen id) og trenger høyere spesifisitet
   enn .civi-panels > section-regelen under, ellers vinner gull-defaulten. */
.civi-panels > section.civi-capital,
#civiPublicFeedSection,
#civiDebateSection     { --sec-accent: var(--civi-hue-kultur); }

#civiStoreSection      { --sec-accent: var(--civi-hue-kommers); }

/* ------------------------------------------------------------
   GRUPPE-SKILLER (visuelle hint mellom logiske seksjoner)
------------------------------------------------------------ */

.civi-panels {
  gap: 16px;
}

/* Mindre sub-divider mellom logiske grupper */
#civiOnboardingSection { margin-bottom: 6px; }
.civi-capital + .civi-identity,
.civi-psyche + #civiHomeStatus,
#civiPublicFeedSection + #activeJobSection,
#civiPeopleSection + #civiStoreSection {
  margin-top: 4px;
}

/* ------------------------------------------------------------
   SEKSJON-KORT — venstrekant-accent + tighter typografi
------------------------------------------------------------ */

.civi-panels > section {
  position: relative;
  --sec-accent: var(--civi-accent);
  padding: 20px 20px 18px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--sec-accent) 20%, rgba(255,255,255,0.09));
  box-shadow: 0 8px 20px rgba(0,0,0,0.36);
}

/* Tynn fargemarg langs venstre kant — toner ut mot topp og bunn. */
.civi-panels > section::before,
.civi-panels > .civi-track-hud::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(
    180deg,
    transparent,
    var(--sec-accent) 22%,
    var(--sec-accent) 78%,
    transparent
  );
  opacity: 0.9;
  pointer-events: none;
}

/* Hårfin lysstripe øverst — gir boksene en slipt overkant. */
.civi-panels > section::after,
.civi-panels > .civi-track-hud::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--sec-accent) 55%, rgba(255,255,255,0.35)),
    transparent
  );
  opacity: 0.45;
  pointer-events: none;
}

/* ------------------------------------------------------------
   H2 – tydelig hierarki, uten emoji
------------------------------------------------------------ */

.civi-panels h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: var(--civi-text-lg);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
  text-transform: uppercase;
}

.civi-panels h2::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--sec-accent, var(--civi-accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sec-accent, var(--civi-accent)) 22%, transparent);
}

/* ------------------------------------------------------------
   KAPITAL — tall som hovedfokus
------------------------------------------------------------ */

.civi-capital .capital-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.capital-item {
  background: rgba(255,255,255,0.06);
  border: 1px solid color-mix(in srgb, var(--sec-accent, #ffffff) 22%, rgba(255,255,255,0.07));
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
}

.capital-label {
  font-size: var(--civi-text-xs);
  letter-spacing: var(--civi-label-tracking);
  color: var(--ink3);
  margin-bottom: 4px;
}

.capital-value {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

@media (max-width: 520px) {
  .civi-capital .capital-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .civi-capital .capital-item:nth-child(n+4) {
    /* La de to siste flyte naturlig på rad 2 */
  }
}

/* ------------------------------------------------------------
   PSYCHE — samme struktur som kapital, lilla highlight
------------------------------------------------------------ */

.civi-psyche .psyche-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.psyche-item {
  background: rgba(255,255,255,0.06);
  border: 1px solid color-mix(in srgb, var(--sec-accent, #ffffff) 22%, rgba(255,255,255,0.07));
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.psyche-item.highlight {
  grid-column: span 2;
  background: var(--civi-accent-soft);
  border-color: var(--civi-accent-border);
}

.psyche-label {
  font-size: var(--civi-text-sm);
  letter-spacing: 0.04em;
  color: var(--ink3);
  text-transform: uppercase;
  margin: 0;
}

.psyche-value {
  font-size: var(--civi-text-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.psyche-collapses {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,0.1);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.psyche-collapses .psyche-label {
  margin: 0;
}

#psyCollapseHistory {
  font-size: var(--civi-text-sm);
  color: var(--ink3);
}

.psyche-burnout {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(198, 110, 110, 0.18);
  border: 1px solid rgba(198, 110, 110, 0.4);
  font-size: var(--civi-text-sm);
  color: rgba(255,220,220,0.95);
}

/* ------------------------------------------------------------
   IDENTITET — kompass-knapp som sekundær handling
------------------------------------------------------------ */

#identityPerceptionBtn {
  margin-top: 12px;
  background: var(--btn-bg);
  color: var(--ink2);
  border: 1px solid var(--btn-border);
  border-radius: 10px;
  padding: 10px 14px;
  font: inherit;
  font-size: var(--civi-text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease;
}

#identityPerceptionBtn:hover {
  background: var(--btn-bg-hover);
}

#identityDominant {
  font-size: var(--civi-text-md);
  color: rgba(255,255,255,0.85);
  margin-top: 8px;
}

#identityPerception {
  margin-top: 10px;
  font-size: var(--civi-text-base);
  color: rgba(255,255,255,0.78);
  line-height: var(--civi-leading-base);
}

/* ------------------------------------------------------------
   TRACK HUD — gul aktiv retning, plassert distinkt
------------------------------------------------------------ */

.civi-track-hud {
  background: var(--civi-accent-soft);
  border: 1px solid var(--civi-accent-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 4px 0;
  position: relative;
}

.civi-track-title {
  font-size: var(--civi-text-xs);
  font-weight: 700;
  letter-spacing: var(--civi-label-tracking);
  text-transform: uppercase;
  color: rgba(247, 220, 138, 0.9);
  margin-bottom: 4px;
}

#civiTrackName {
  font-size: var(--civi-text-md);
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}

#civiTrackProgress {
  font-size: var(--civi-text-base);
  color: var(--ink2);
}

.civi-track-tags {
  margin-top: 8px;
  gap: 6px;
}

.civi-track-tags span {
  background: var(--civi-accent-soft);
  color: rgba(247, 220, 138, 0.95);
  border: 1px solid var(--civi-accent-border);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: var(--civi-text-xs);
  font-weight: 600;
}

/* ------------------------------------------------------------
   FOOTER-KNAPPER — mer distinkt med matchende accent-farger
------------------------------------------------------------ */

.civi-footer {
  gap: 6px;
  padding: 0 12px;
}

.civi-btn {
  flex: 1;
  max-width: 120px;
  padding: 10px 8px;
  border-radius: 12px;
  font-size: var(--civi-text-base);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.civi-btn.primary {
  background: var(--civi-accent);
  color: #000;
  border-color: var(--civi-accent);
}
.civi-btn.primary:hover {
  filter: brightness(1.1);
}

/* ------------------------------------------------------------
   TOPBAR — ren, kompakt
------------------------------------------------------------ */

.app-title {
  font-size: var(--civi-text-md);
  letter-spacing: -0.01em;
}

.back-link {
  font-size: var(--civi-text-sm);
  font-weight: 600;
  opacity: 0.7;
  text-decoration: none;
}

.back-link:hover { opacity: 1; }

/* ------------------------------------------------------------
   TOMME PANELER – mindre rotete enn "—"
------------------------------------------------------------ */

/* ------------------------------------------------------------
   MAIL V2 — avsender og sted
------------------------------------------------------------ */

.civi-mail-sender {
  font-size: var(--civi-text-base);
  font-weight: 600;
  color: rgba(247, 220, 138, 0.9);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.civi-mail-place {
  font-size: var(--civi-text-sm);
  color: var(--ink3);
  margin-bottom: 6px;
  text-transform: capitalize;
}

.civi-inbox-section {
  margin: 0 0 14px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.civi-inbox-section h2 {
  margin: 0 0 8px;
  font-size: var(--civi-text-md);
}

.civi-inbox-list-card {
  margin: 0 0 8px;
  opacity: 0.95;
}

.civi-inbox-empty {
  font-size: var(--civi-text-base);
  color: rgba(255, 255, 255, 0.7);
}


.civi-inbox-sections {
  display: grid;
  gap: 16px;
}

.civi-inbox-channel-section {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.civi-inbox-channel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.civi-inbox-channel-head h3 {
  margin: 0 0 5px;
  font-size: var(--civi-font-card-title, 18px);
  letter-spacing: -0.01em;
}

.civi-inbox-channel-head p {
  margin: 0;
  max-width: 62ch;
  line-height: var(--civi-leading-base);
}

.civi-inbox-channel-head strong {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  color: rgba(255, 232, 170, 0.96);
  background: rgba(198, 154, 42, 0.15);
  border: 1px solid rgba(198, 154, 42, 0.30);
  font-size: var(--civi-font-small, 13px);
}

.civi-inbox-channel-list,
.civi-inbox-history-list {
  display: grid;
  gap: 12px;
}

.civi-inbox-card {
  padding: 16px;
  border-radius: 17px;
  background: var(--card2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.civi-inbox-card.is-pending {
  border-color: var(--civi-accent-border);
  background: color-mix(in srgb, var(--civi-accent) 10%, var(--card2));
}

.civi-inbox-card.is-resolved {
  opacity: 0.74;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
}

.civi-inbox-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.civi-inbox-card-title-wrap {
  min-width: 0;
}

.civi-inbox-card-kickers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.civi-inbox-channel-chip,
.civi-inbox-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: var(--civi-font-meta, 12px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.civi-inbox-channel-chip {
  color: rgba(213, 228, 255, 0.95);
  background: rgba(127, 167, 214, 0.14);
  border: 1px solid rgba(127, 167, 214, 0.28);
}

.civi-inbox-status {
  color: rgba(255, 232, 170, 0.98);
  background: rgba(214, 170, 58, 0.16);
  border: 1px solid rgba(214, 170, 58, 0.30);
}

.civi-inbox-card.is-resolved .civi-inbox-status {
  color: rgba(210, 220, 230, 0.78);
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.12);
}

.civi-inbox-card h4 {
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: var(--civi-font-card-title, 18px);
  line-height: 1.2;
}

.civi-inbox-sender,
.civi-inbox-meta {
  margin: 6px 0 0;
  color: var(--ink3);
  font-size: var(--civi-font-small, 13px);
}

.civi-inbox-body {
  margin-top: 12px;
  display: grid;
  gap: 8px;
  color: var(--ink2);
  font-size: var(--civi-text-base);
  line-height: var(--civi-leading-relaxed);
}

.civi-inbox-body p {
  margin: 0;
}

.civi-inbox-card-actions {
  margin-top: 14px;
  display: grid;
  gap: 9px;
}

.civi-inbox-answer-btn {
  width: 100%;
  justify-content: center;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: var(--civi-text-base);
  font-weight: 850;
}

.civi-inbox-history {
  margin-top: 4px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(12, 18, 26, 0.3);
  overflow: hidden;
}

.civi-inbox-history summary {
  min-height: 46px;
  padding: 13px 14px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--civi-text-base);
  font-weight: 800;
  list-style-position: inside;
}

.civi-inbox-history[open] summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.civi-inbox-history-list {
  padding: 12px;
}

@media (max-width: 640px) {
  .civi-inbox-channel-head {
    flex-direction: column;
  }
}

/* ------------------------------------------------------------
   TOMME PANELER — skjul når innholdet faktisk er tomt
------------------------------------------------------------ */

/* Generell regel: hvis hovedinnholdsdiv er tom OG ingen barn-noder
   har innhold, skjul hele seksjonen. Dette er stabil moderne-CSS. */
.civi-panels > section.is-empty {
  display: none;
}

/* Spesifikt: skjul seksjoner der den primære innhold-containeren er
   tom (ingen tekst, ingen barn). Dette dekker tilfeller der JS
   ikke har rukket å sette is-empty enda. */
#civiPeopleSection:has(#civiPeoplePanel:empty),
#civiStoreSection:has(#civiStorePanel:empty),
#civiDebateSection:has(#civiDebatePanel:empty),
#civiPublicFeedSection:has(#civiPublicFeed:empty),
#civiHomeStatus:has(#homeStatusContent:empty),
#civiOnboardingSection:has(#civiOnboardingPanel:empty),
#civiInboxSection:has(#civiInbox:empty) {
  display: none;
}

/* Track HUD: skjul hvis ingen aktiv retning er satt */
#civiTrackHUD:has(#civiTrackName:empty),
#civiTrackHUD.is-empty {
  display: none;
}

/* Tomme placeholder-strenger ("—", "–") teller som tomme.
   JS-funksjonen civiMarkEmptyPanels (lagt til separat) håndterer
   denne logikken og setter .is-empty. */

/* ------------------------------------------------------------
   TYPOGRAFI-PASS: trygg tekstvekst og konsistent lesbarhet
------------------------------------------------------------ */
body.civi-app,
body.civi-app button,
body.civi-app input,
body.civi-app select,
body.civi-app textarea {
  font-family: var(--civi-font-sans);
}

body.civi-app .civi-panels > section,
body.civi-app .civi-track-hud,
body.civi-app .civi-section-popup-body {
  font-size: var(--civi-text-base);
  line-height: var(--civi-leading-base);
}

body.civi-app .civi-panels h2,
body.civi-app.civi-mini-mode .civi-mini-title-row h2 {
  font-size: var(--civi-text-lg);
  line-height: var(--civi-leading-tight);
  font-weight: 820;
  letter-spacing: var(--civi-label-tracking);
}

body.civi-app .civi-dashboard-kicker,
body.civi-app .civi-dashboard-focus-label,
body.civi-app .civi-day-phase-kicker,
body.civi-app .civi-day-phase-mail-kicker,
body.civi-app .civi-outcome-kicker,
body.civi-app .civi-learning-kicker,
body.civi-app .civi-reentry-lock-kicker,
body.civi-app .civi-offer-eligibility-label,
body.civi-app .capital-label,
body.civi-app .psyche-label,
body.civi-app .civi-track-title,
body.civi-app .civi-section-popup-kicker,
body.civi-app .civi-inbox-channel-chip,
body.civi-app .civi-inbox-status {
  font-size: var(--civi-text-xs);
  line-height: 1.2;
  letter-spacing: var(--civi-label-tracking);
  font-weight: 800;
}

body.civi-app .civi-day-phase-title,
body.civi-app .civi-day-phase-mail-title,
body.civi-app .civi-inbox-card h4,
body.civi-app #activeJobCard strong,
body.civi-app #homeStatusContent strong,
body.civi-app #civiTrackName,
body.civi-app .civi-brand-head strong {
  font-size: var(--civi-text-lg);
  line-height: 1.22;
  font-weight: 780;
  letter-spacing: -0.015em;
}

body.civi-app .civi-inbox-body,
body.civi-app .civi-day-phase-list,
body.civi-app .civi-day-complete-text,
body.civi-app .civi-outcome-indicator-text,
body.civi-app .civi-learning-detail,
body.civi-app .civi-reentry-lock-detail,
body.civi-app #identityPerception,
body.civi-app .civi-mini-summary {
  font-size: var(--civi-text-base);
  line-height: var(--civi-leading-relaxed);
}

body.civi-app button,
body.civi-app .civi-btn,
body.civi-app .civi-task-open-btn,
body.civi-app .civi-inbox-answer-btn,
body.civi-app #identityPerceptionBtn,
body.civi-app #buyDistrictBtn,
body.civi-app #changeDistrictBtn {
  font-size: var(--civi-text-base);
  line-height: 1.2;
  font-weight: 780;
  min-width: 0;
  overflow-wrap: break-word;
}

body.civi-app .civi-footer .civi-btn {
  font-size: var(--civi-text-sm);
  line-height: 1.1;
  white-space: normal;
}

body.civi-app .civi-header-chip,
body.civi-app .civi-inbox-channel-chip,
body.civi-app .civi-inbox-status,
body.civi-app .civi-track-tags span,
body.civi-app.civi-mini-mode .civi-mini-status {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

body.civi-app .civi-inbox-card-head,
body.civi-app .civi-inbox-channel-head,
body.civi-app .civi-brand-head,
body.civi-app .psyche-item,
body.civi-app .civi-workday-row {
  min-width: 0;
}