/* ============================================================
   CIVICATION – MINI MODE + POPUPS
   Hensikt:
   - Civication-forsiden viser bare nødvendig status og valgknapp.
   - Alt innhold/alle valg åpnes i lesbare mørke popups.
   - Forsiden holdes ryddig og handlingsorientert.
============================================================ */

:root {
  --civi-mini-bg: var(--card2);
  --civi-mini-bg-2: rgba(255,255,255,0.07);
  --civi-mini-bg-3: rgba(255,255,255,0.10);
  --civi-mini-border: rgba(255,255,255,0.13);
  --civi-mini-border-strong: rgba(255,255,255,0.20);
  --civi-mini-text: rgba(255,255,255,0.92);
  --civi-mini-muted: var(--ink3);
  --civi-mini-gold: #d6aa3a;
  --civi-mini-green: #5fb879;
  --civi-mini-blue: #7fa7d6;
  --civi-mini-purple: #b482ce;
  --civi-mini-orange: #d9914f;
  --civi-mini-red: #d98282;
}

body.civi-app.civi-mini-mode .civi-panels {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

/* ------------------------------------------------------------
   Dashboard kompakt.
------------------------------------------------------------ */

body.civi-app.civi-mini-mode #civiDashboardSection {
  grid-column: span 4;
  padding: 0;
  min-height: 0;
  min-width: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: transparent;
}

body.civi-app.civi-mini-mode .civi-dashboard-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-height: 0;
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  background: var(--card2);
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  color: rgba(255,255,255,0.96);
  opacity: 1;
  isolation: isolate;
}

body.civi-app.civi-mini-mode .civi-dashboard-kicker {
  margin-bottom: 0;
  padding: 2px 7px;
  font-size: var(--civi-text-xs);
}

body.civi-app.civi-mini-mode #civiDashRole {
  width: 100%;
  max-width: 100%;
  font-size: var(--civi-text-md);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sammendraget skal kunne leses — to linjer, ikke «Ta quiz og …». */
body.civi-app.civi-mini-mode #civiDashSummary {
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  color: rgba(255,255,255,0.88);
  font-size: var(--civi-text-sm);
  line-height: 1.35;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.civi-app.civi-mini-mode .civi-dashboard-focus {
  margin-top: 0;
  max-width: 100%;
  padding: 3px 9px;
}

body.civi-app.civi-mini-mode #civiDashFocus {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.civi-app.civi-mini-mode .civi-dashboard-metrics {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

body.civi-app.civi-mini-mode .civi-dashboard-metric {
  min-height: 0;
  padding: 5px 8px;
  border-radius: 10px;
  flex: 0 0 auto;
}

body.civi-app.civi-mini-mode .civi-dashboard-metric strong {
  font-size: var(--civi-text-base);
}

body.civi-app.civi-mini-mode .civi-dashboard-metric small {
  font-size: var(--civi-text-xs);
}

/* ------------------------------------------------------------
   Forsidekort: bare nødvendig info + knapp.
   NB: #civiLifeHomeControls er en egen home-sone, ikke et minikort.
------------------------------------------------------------ */

body.civi-app.civi-mini-mode .civi-panels > section:not(#civiLifestorySection):not(#civiDashboardSection):not(#civiLifeHomeControls):not(#civiDayPhasePanel),
body.civi-app.civi-mini-mode #civiTrackHUD {
  grid-column: span 4;
  min-height: 220px;
  padding: 0;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--sec-accent, #ffffff) 20%, rgba(255,255,255,0.09));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    0 10px 24px rgba(0,0,0,0.22);
  overflow: hidden;
}

body.civi-app.civi-mini-mode .civi-mini-card {
  height: 100%;
  min-height: 220px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}

body.civi-app.civi-mini-mode .civi-mini-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.civi-app.civi-mini-mode .civi-mini-accent {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--civi-text-base);
  border-radius: 9px;
  background: color-mix(in srgb, var(--sec-accent, #ffffff) 13%, rgba(255,255,255,0.03));
  border: 1px solid color-mix(in srgb, var(--sec-accent, #ffffff) 30%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}

body.civi-app.civi-mini-mode .is-info .civi-mini-status {
  background: rgba(127,167,214,0.14);
  border-color: rgba(127,167,214,0.32);
  color: rgba(203,227,255,0.96);
}

body.civi-app.civi-mini-mode .is-empty .civi-mini-status {
  background: rgba(217,145,79,0.14);
  border-color: rgba(217,145,79,0.28);
  color: rgba(255,212,177,0.92);
}

body.civi-app.civi-mini-mode .civi-mini-title-row h2 {
  margin: 0;
  color: rgba(255,255,255,0.9);
  font-size: var(--civi-text-md);
  font-weight: 850;
  letter-spacing: var(--civi-label-tracking);
  text-transform: uppercase;
}

body.civi-app.civi-mini-mode .civi-mini-summary {
  min-height: 35px;
  color: var(--civi-mini-muted);
  font-size: var(--civi-text-base);
  line-height: var(--civi-leading-base);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


body.civi-app.civi-mini-mode .civi-mini-details {
  display: grid;
  gap: 4px;
  margin-top: 2px;
}

body.civi-app.civi-mini-mode .civi-mini-detail-line {
  font-size: var(--civi-text-base);
  color: var(--civi-mini-muted);
  line-height: 1.3;
}
body.civi-app.civi-mini-mode .civi-mini-status {
  width: max-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sec-accent, #ffffff) 9%, rgba(255,255,255,0.03));
  border: 1px solid color-mix(in srgb, var(--sec-accent, #ffffff) 22%, rgba(255,255,255,0.06));
  color: rgba(255,255,255,0.78);
  font-size: var(--civi-text-sm);
  font-weight: 700;
}

body.civi-app.civi-mini-mode .civi-mini-action {
  margin-top: auto;
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  font-size: var(--civi-text-base);
  font-weight: 800;
}

body.civi-app.civi-mini-mode .needs-feedback .civi-mini-status {
  background: rgba(214,170,58,0.16);
  border-color: rgba(214,170,58,0.32);
  color: rgba(255,232,170,0.98);
}

body.civi-app.civi-mini-mode .needs-feedback .civi-mini-action {
  background: rgba(214,170,58,0.22) !important;
  border-color: rgba(214,170,58,0.42) !important;
  color: rgba(255,236,180,0.98) !important;
}

body.civi-app.civi-mini-mode .civi-panels > section:not(#civiLifestorySection):not(#civiDashboardSection):not(#civiLifeHomeControls):not(#civiDayPhasePanel)::before {
  top: 14px;
  bottom: 14px;
  width: 3px;
}

/* Originalt innhold skjules på forsiden. Det flyttes inn i popup ved åpning. */
body.civi-app.civi-mini-mode .civi-section-body {
  display: none;
}

body.civi-app.civi-mini-mode .civi-section-body.is-in-popup {
  display: block;
}

body.civi-app.civi-mini-mode .civi-panels > section:not(#civiLifestorySection):not(#civiDashboardSection):not(#civiLifeHomeControls):not(#civiDayPhasePanel) > h2,
body.civi-app.civi-mini-mode .civi-panels > section:not(#civiLifestorySection):not(#civiDashboardSection):not(#civiLifeHomeControls):not(#civiDayPhasePanel) > :not(.civi-mini-card):not(.civi-section-body),
body.civi-app.civi-mini-mode #civiTrackHUD > :not(.civi-mini-card):not(.civi-section-body) {
  display: none;
}

/* Min dag / Life Story er egen kategori/fane, ikke et permanent toppkort eller minikort. */
body.civi-app.civi-mini-mode #civiLifestorySection {
  grid-column: 1 / -1;
  min-height: auto;
  padding: 16px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    0 10px 24px rgba(0,0,0,0.18);
  overflow: visible;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.civi-app.civi-mini-mode #civiLifestorySection > h2 {
  display: block;
}

body.civi-app.civi-mini-mode #civiLifestorySection.civi-hidden-by-category {
  display: none !important;
}

body.civi-app.civi-mini-mode #civiLifestoryPanel,
body.civi-app.civi-mini-mode #civiLifestoryPanel .civi-lifestory-scene,
body.civi-app.civi-mini-mode #civiLifestoryPanel .civi-lifestory-choices,
body.civi-app.civi-mini-mode #civiLifestoryPanel .civi-lifestory-panels {
  display: flex;
}

body.civi-app.civi-mini-mode #civiLifestoryPanel .civi-lifestory-panels {
  display: grid;
}

body.civi-app.civi-mini-mode #civiLifestoryPanel .civi-lifestory-scene,
body.civi-app.civi-mini-mode #civiLifestoryPanel .civi-lifestory-choices {
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.civi-app.civi-mini-mode #civiLifestoryPanel .civi-lifestory-choice {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* ------------------------------------------------------------
   Popup for Civication-seksjoner.
------------------------------------------------------------ */

body.civi-popup-open {
  overflow: hidden;
}

.civi-section-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  padding: max(10px, env(safe-area-inset-top)) 0 max(10px, env(safe-area-inset-bottom));
  display: none;
}

.civi-section-popup.is-open {
  display: block;
}

.civi-section-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
}

.civi-section-popup-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, calc(100vw - 22px));
  height: min(75dvh, calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  max-height: 860px;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: var(--card2);
  border: 1px solid color-mix(in srgb, var(--sec-accent, var(--civi-accent)) 24%, rgba(255,255,255,0.10));
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
  overflow: hidden;
}

/* Tynn fargemarg øverst i popupen — matcher seksjonen som ble åpnet. */
.civi-section-popup-panel::before {
  content: "";
  flex: 0 0 auto;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--sec-accent, var(--civi-accent)) 18%,
    var(--sec-accent, var(--civi-accent)) 82%,
    transparent
  );
  opacity: 0.85;
  pointer-events: none;
}

.civi-section-popup-head {
  padding: 18px 20px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  flex: 0 0 auto;
}

.civi-section-popup-kicker {
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--sec-accent, var(--civi-accent)) 72%, #ffffff);
  font-size: var(--civi-text-xs);
  font-weight: 850;
  letter-spacing: var(--civi-label-tracking);
  text-transform: uppercase;
}

#civiSectionPopupTitle {
  margin: 0;
  color: var(--ink);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.civi-popup-close {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 999px;
  font-size: 24px;
  line-height: 1;
}

.civi-section-popup-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 20px 22px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.civi-section-popup-body .civi-section-body {
  display: block;
  padding: 0;
}

.civi-section-popup-body h2:first-child {
  display: none;
}

/* Popup-innhold skal være brukbart og mørkt. */
.civi-section-popup-body button,
.civi-section-popup-body .civi-btn,
.civi-section-popup-body .civi-task-open-btn {
  min-height: 44px;
  border-radius: 13px;
}

.civi-section-popup-body .civi-workday-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ------------------------------------------------------------
   Mørk variant: ensartede, lesbare knapper/felt/kort.
   !important beholdes kun for å overstyre gamle inline-stiler.
------------------------------------------------------------ */

body.civi-app button,
body.civi-app .civi-btn,
body.civi-app .civi-btn.primary,
body.civi-app #buyDistrictBtn,
body.civi-app #changeDistrictBtn,
body.civi-app #identityPerceptionBtn,
body.civi-app .civi-task-open-btn,
body.civi-app .district-card button,
body.civi-app .civi-modal-close,
body.civi-app .civi-task-actions button,
body.civi-app .civi-popup-close {
  background: var(--btn-bg) !important;
  color: rgba(255,255,255,0.94) !important;
  border: 1px solid rgba(255,255,255,0.17) !important;
  box-shadow: none !important;
}

body.civi-app .civi-btn.primary,
body.civi-app #buyDistrictBtn,
body.civi-app #changeDistrictBtn {
  background: var(--civi-accent) !important;
  border-color: var(--civi-accent) !important;
  color: #000 !important;
}

body.civi-app button:hover,
body.civi-app .civi-btn:hover,
body.civi-app .district-card button:hover {
  background: var(--btn-bg-hover) !important;
  filter: none !important;
}

body.civi-app .civi-btn.primary:hover {
  filter: brightness(1.08) !important;
}

body.civi-app input,
body.civi-app select,
body.civi-app textarea {
  background: rgba(255,255,255,0.09) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}

body.civi-app [style*="background:#fff"],
body.civi-app [style*="background: #fff"],
body.civi-app [style*="background:white"],
body.civi-app [style*="background: white"],
body.civi-app [style*="background-color:#fff"],
body.civi-app [style*="background-color: #fff"],
body.civi-app [style*="background-color:white"],
body.civi-app [style*="background-color: white"] {
  background: rgba(255,255,255,0.09) !important;
  color: rgba(255,255,255,0.94) !important;
  border-color: rgba(255,255,255,0.16) !important;
}

body.civi-app .capital-item,
body.civi-app .psyche-item,
body.civi-app .civi-workday-clock,
body.civi-app .civi-workday-meta,
body.civi-app .civi-workday-card,
body.civi-app .civi-workday-empty,
body.civi-app .civi-task-box,
body.civi-app .district-card {
  background: rgba(255,255,255,0.07) !important;
  border-color: color-mix(in srgb, var(--sec-accent, #ffffff) 18%, rgba(255,255,255,0.08)) !important;
  color: rgba(255,255,255,0.92) !important;
}

/* ------------------------------------------------------------
   Responsivt.
------------------------------------------------------------ */

@media (max-width: 1040px) {
  body.civi-app.civi-mini-mode .civi-panels > section:not(#civiLifestorySection):not(#civiDashboardSection):not(#civiLifeHomeControls):not(#civiDayPhasePanel),
  body.civi-app.civi-mini-mode #civiTrackHUD {
    grid-column: span 6;
  }
}

@media (max-width: 820px) {
  body.civi-app.civi-mini-mode #civiDashboardSection {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  body.civi-app.civi-mini-mode .civi-dashboard-copy {
    width: 100%;
    flex-wrap: wrap;
  }

  body.civi-app.civi-mini-mode .civi-dashboard-metrics {
    width: 100%;
  }

  body.civi-app.civi-mini-mode .civi-panels > section:not(#civiLifestorySection):not(#civiDashboardSection):not(#civiLifeHomeControls):not(#civiDayPhasePanel),
  body.civi-app.civi-mini-mode #civiTrackHUD {
    grid-column: 1 / -1;
  }

  .civi-section-popup-panel {
    width: calc(100vw - 16px);
    height: min(75dvh, calc(100dvh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    border-radius: 22px;
  }

  .civi-section-popup-body .civi-workday-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  body.civi-app.civi-mini-mode .civi-dashboard-metrics {
    width: 100%;
  }

  body.civi-app.civi-mini-mode .civi-dashboard-metric {
    min-height: 0;
    padding: 5px 8px;
  }

  body.civi-app.civi-mini-mode .civi-mini-card {
    min-height: 146px;
  }

  .civi-section-popup-head {
    padding: 16px 16px 12px;
  }

  .civi-section-popup-body {
    padding: 14px 16px 20px;
  }
}

body.civi-app.civi-mini-mode #civiLifeHomeControls,
body.civi-app.civi-mini-mode #civiCategoryEmptyCard {
  grid-column: 1 / -1;
}

body.civi-app.civi-mini-mode .civi-home-controls {
  display: grid;
  gap: 10px;
}

body.civi-app.civi-mini-mode .civi-top-action-card {
  border: 1px solid var(--civi-mini-border);
  border-radius: 18px;
  padding: 16px;
  background: var(--card2);
}
body.civi-app.civi-mini-mode .civi-top-action-card.is-urgent { border-color: rgba(214,170,58,0.45); }
body.civi-app.civi-mini-mode .civi-top-action-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
body.civi-app.civi-mini-mode .civi-top-action-title { margin:0; color:var(--civi-mini-text); font-weight:800; }
body.civi-app.civi-mini-mode .civi-top-action-chip { font-size: var(--civi-text-sm); border:1px solid var(--civi-mini-border); border-radius:999px; padding:4px 9px; color:var(--civi-mini-muted); }
body.civi-app.civi-mini-mode .civi-top-action-card.is-urgent .civi-top-action-chip { border-color: rgba(214,170,58,0.4); color: rgba(255,229,163,0.95); }
body.civi-app.civi-mini-mode .civi-top-action-summary { margin:8px 0 10px; color:var(--civi-mini-muted); }

body.civi-app.civi-mini-mode .civi-category-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
body.civi-app.civi-mini-mode .civi-category-tab {
  border: 1px solid var(--civi-mini-border);
  background: rgba(255,255,255,0.06);
  color: var(--civi-mini-muted);
  border-radius: 999px;
  padding: 10px 14px;
  white-space: nowrap;
  font-size: var(--civi-text-base);
  font-weight: 700;
}
/* Aktiv tab toner i livsområdets farge — samme palett som boksene. */
body.civi-app.civi-mini-mode .civi-category-tab.is-active {
  --tab-accent: var(--civi-accent);
  color: color-mix(in srgb, var(--tab-accent) 30%, #ffffff);
  border-color: color-mix(in srgb, var(--tab-accent) 52%, transparent);
  background: color-mix(in srgb, var(--tab-accent) 17%, transparent);
}

body.civi-app.civi-mini-mode .civi-category-tab.is-active[data-category="personlig"] { --tab-accent: var(--civi-hue-personlig); }
body.civi-app.civi-mini-mode .civi-category-tab.is-active[data-category="karriere"]  { --tab-accent: var(--civi-hue-karriere); }
body.civi-app.civi-mini-mode .civi-category-tab.is-active[data-category="fritid"]    { --tab-accent: var(--civi-hue-fritid); }
body.civi-app.civi-mini-mode .civi-category-tab.is-active[data-category="kommers"]   { --tab-accent: var(--civi-hue-kommers); }
body.civi-app.civi-mini-mode .civi-category-tab.is-active[data-category="kultur"]    { --tab-accent: var(--civi-hue-kultur); }
body.civi-app.civi-mini-mode .civi-hidden-by-category { display:none !important; }

body.civi-app.civi-mini-mode .civi-category-empty {
  display: none;
  border: 1px dashed rgba(127,167,214,0.4);
  border-radius: 16px;
  padding: 14px;
  color: var(--civi-mini-muted);
  background: var(--card2);
}
body.civi-app.civi-mini-mode .civi-category-empty.is-visible { display:block; }
body.civi-app.civi-mini-mode .civi-category-empty h3 { margin:0 0 6px; color:var(--civi-mini-text); font-size:16px; }
body.civi-app.civi-mini-mode .civi-category-empty p { margin:0; }

@media (max-width: 900px) {
  body.civi-app.civi-mini-mode .civi-panels > section:not(#civiLifestorySection):not(#civiDashboardSection):not(#civiLifeHomeControls):not(#civiDayPhasePanel),
  body.civi-app.civi-mini-mode #civiTrackHUD { grid-column: span 6; }
}
@media (max-width: 680px) {
  body.civi-app.civi-mini-mode .civi-panels > section:not(#civiLifestorySection):not(#civiDashboardSection):not(#civiLifeHomeControls):not(#civiDayPhasePanel),
  body.civi-app.civi-mini-mode #civiTrackHUD { grid-column: 1 / -1; }
}
body.civi-app.civi-mini-mode .civi-top-action-card.is-milestone {
  border-color: rgba(127,167,214,0.65);
  box-shadow: inset 0 0 0 1px rgba(127,167,214,0.25);
}
body.civi-app.civi-mini-mode .civi-top-action-card.is-milestone .civi-top-action-chip {
  border-color: rgba(127,167,214,0.55);
  color: rgba(194,222,255,0.95);
}
body.civi-app.civi-mini-mode .civi-inbox-answer-summary{
  margin:0 0 12px;
  padding:12px;
  border:1px solid rgba(214,170,58,0.35);
  border-radius:12px;
  background:rgba(214,170,58,0.08);
}
body.civi-app.civi-mini-mode .civi-inbox-answer-summary h3{
  margin:0 0 6px;
  font-size: var(--civi-text-md);
  color:var(--civi-mini-text);
}
body.civi-app.civi-mini-mode .civi-inbox-answer-summary p{
  margin:0 0 8px;
  color:var(--civi-mini-muted);
}
body.civi-app.civi-mini-mode .civi-inbox-answer-meta{
  display:flex;flex-wrap:wrap;gap:6px;
}
body.civi-app.civi-mini-mode .civi-inbox-answer-meta span{
  display:inline-flex;padding:4px 8px;border-radius:999px;
  border:1px solid var(--civi-mini-border);font-size: var(--civi-text-sm);
}


@media (max-width: 1200px) {
  body.civi-app.civi-mini-mode .civi-panels > section:not(#civiLifestorySection):not(#civiDashboardSection):not(#civiLifeHomeControls):not(#civiDayPhasePanel),
  body.civi-app.civi-mini-mode #civiTrackHUD { grid-column: span 6; }
}

@media (max-width: 760px) {
  body.civi-app.civi-mini-mode .civi-panels > section:not(#civiLifestorySection):not(#civiDashboardSection):not(#civiLifeHomeControls):not(#civiDayPhasePanel),
  body.civi-app.civi-mini-mode #civiTrackHUD { grid-column: 1 / -1; }
}


@media (max-width: 1200px) {
  body.civi-app.civi-mini-mode #civiDashboardSection {
    grid-column: span 6;
  }
}

@media (max-width: 820px) {
  body.civi-app.civi-mini-mode #civiDashboardSection {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------
   Boks-detaljer: seksjonens farge som en anelse i knapp og kant.
   !important trengs kun for å matche den generelle knappe-regelen over.
------------------------------------------------------------ */

body.civi-app.civi-mini-mode .civi-mini-action {
  border-color: color-mix(in srgb, var(--sec-accent, #ffffff) 26%, rgba(255,255,255,0.08)) !important;
}

body.civi-app.civi-mini-mode .civi-mini-action:hover {
  background: color-mix(in srgb, var(--sec-accent, #ffffff) 12%, rgba(255,255,255,0.04)) !important;
  border-color: color-mix(in srgb, var(--sec-accent, #ffffff) 42%, rgba(255,255,255,0.08)) !important;
}

/* Hviletilstand: kort med bare plassholdertekst dempes og får stiplet
   ramme, så øyet går til kortene med ekte innhold. */
body.civi-app.civi-mini-mode .civi-panels > section.is-idle:not(#civiLifestorySection):not(#civiDashboardSection):not(#civiLifeHomeControls):not(#civiDayPhasePanel),
body.civi-app.civi-mini-mode #civiTrackHUD.is-idle {
  border-style: dashed;
  box-shadow: none;
}

body.civi-app.civi-mini-mode section.is-idle .civi-mini-summary,
body.civi-app.civi-mini-mode #civiTrackHUD.is-idle .civi-mini-summary {
  opacity: 0.78;
}

body.civi-app.civi-mini-mode .civi-panels > section.is-idle:not(#civiLifestorySection)::before {
  opacity: 0.4;
}

/* Chips: ett felles formspråk (radius, padding, vekt) på tvers av
   statuschips, inbox-chips, top-action-chip og retningstagger. */
body.civi-app .civi-top-action-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 {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: var(--civi-text-xs);
  font-weight: 700;
  line-height: 1.2;
}

/* Footer: marker aktiv destinasjon. Kart-knappen lyser mens kartmodus er på.
   !important trengs kun mot den generelle knappe-regelen over. */
body.civi-app .civi-footer .civi-btn.is-active:not(.primary),
body.civi-app.civi-mapmode #btnCiviMap {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.42) !important;
  color: #ffffff !important;
}

/* Civication mobile category nav now lives in the fixed footer. */
body.civi-app .civi-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

body.civi-app .civi-footer::-webkit-scrollbar { display: none; }

body.civi-app .civi-footer .civi-btn,
body.civi-app .civi-footer .civi-category-tab {
  flex: 0 0 auto;
  min-height: 38px;
  max-width: none;
  padding: 8px 11px;
  border: 1px solid var(--civi-mini-border, rgba(255,255,255,0.14));
  background: rgba(255,255,255,0.065);
  color: var(--civi-mini-muted, rgba(255,255,255,0.74));
  border-radius: 999px;
  white-space: nowrap;
  font-size: var(--civi-text-xs);
  font-weight: 800;
  line-height: 1;
}

body.civi-app .civi-footer .civi-map-icon-btn {
  width: 40px;
  min-width: 40px;
  padding-inline: 0;
  font-size: var(--civi-text-md);
}

body.civi-app .civi-footer .civi-category-tab.is-active {
  --tab-accent: var(--civi-accent, #d6aa3a);
  color: #fff4c9 !important;
  border-color: color-mix(in srgb, var(--tab-accent) 58%, rgba(255,255,255,0.1)) !important;
  background: color-mix(in srgb, var(--tab-accent) 24%, rgba(255,255,255,0.08)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

body.civi-app .civi-footer .civi-category-tab.is-active[data-category="personlig"] { --tab-accent: var(--civi-hue-personlig); }
body.civi-app .civi-footer .civi-category-tab.is-active[data-category="karriere"]  { --tab-accent: var(--civi-hue-karriere); }
body.civi-app .civi-footer .civi-category-tab.is-active[data-category="fritid"]    { --tab-accent: var(--civi-hue-fritid); }
body.civi-app .civi-footer .civi-category-tab.is-active[data-category="kommers"]   { --tab-accent: var(--civi-hue-kommers); }
body.civi-app .civi-footer .civi-category-tab.is-active[data-category="kultur"]    { --tab-accent: var(--civi-hue-kultur); }

body.civi-app.civi-mapmode #btnCiviMap {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.42) !important;
  color: #ffffff !important;
}