/* Egenhostade typsnitt (istället för Google Fonts) - undviker att
   besökarens IP-adress skickas till Google bara för att ladda ett
   typsnitt. Se Om-sidans integritetsavsnitt. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}

:root {
  --cover: #16283A;
  --cover-dim: #1F3A50;
  --paper: #FBF6EA;
  --paper-dim: #F3ECDA;
  --ink: #202A33;
  --ink-muted: #71695A;
  --gold: #B8892B;
  --forest: #2F6D4F;
  --rust: #B5482A;
  --slate: #3B5B7C;
  --hairline: #DED2B4;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cover);
  background-image:
    radial-gradient(circle at 15% 10%, var(--cover-dim), transparent 45%),
    radial-gradient(circle at 85% 90%, var(--cover-dim), transparent 45%);
  color: var(--ink);
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  min-height: 100vh;
  /* Skyddsnät: inget enskilt element (t.ex. en bred tabell) ska någonsin
     kunna blåsa upp HELA sidans bredd och tvinga fram vågrät skrollning av
     allt. Element som verkligen behöver skrolla i sidled (flikmenyn,
     tabellerna) har sin egen overflow-x:auto och fungerar som vanligt. */
  overflow-x: hidden;
}

.page {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

/* ---- Header ---- */
.masthead {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--paper);
  margin-bottom: 28px;
  flex-wrap: wrap;
  row-gap: 10px;
}

.account-info {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--paper);
  opacity: 0.85;
}

/* ---- Inloggnings-/registreringssida ---- */
.auth-page {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-page[hidden] { display: none; }
/* Tre fristående ring-kluster, vart och ett förankrat till sitt eget hörn
   med fasta pixelmått (inte en enda stor SVG med "slice"-beskärning som
   skalas efter fönstrets bredd) - annars klipptes ringarna bort nästan
   helt på väldigt breda/ultrawide-skärmar (bekräftat, 3440px bredd). */
.auth-page-bg {
  position: absolute;
  z-index: 0;
}
.auth-page-bg-1 { top: -60px; right: -60px; width: 300px; height: 300px; }
.auth-page-bg-2 { bottom: -50px; left: -70px; width: 260px; height: 260px; }
.auth-page-bg-3 { bottom: 60px; right: 40px; width: 180px; height: 180px; }
@media (max-width: 700px) {
  .auth-page-bg-3 { display: none; }
}

.auth-box {
  width: 100%;
  max-width: 380px;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  padding: 32px 28px;
  text-align: center;
}

.auth-logo {
  width: 80px;
  height: 80px;
  margin-bottom: 8px;
  /* Loggan är en inline SVG som använder currentColor för ringen/texten
     (guldringen är alltid samma färg) - här sätts den till ink-färgen
     eftersom rutan har en ljus bakgrund. */
  color: var(--ink);
}

.auth-box h1 {
  font-size: 20px;
  margin: 0 0 20px;
  color: var(--ink);
}

.auth-box h2 {
  font-size: 15px;
  margin: 0 0 16px;
  color: var(--ink);
}

.auth-box form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.auth-box form[hidden] { display: none; }

.auth-box label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--ink-muted);
}

.auth-box input {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}

.auth-submit {
  margin-top: 4px;
}

.auth-error {
  font-size: 12.5px;
  color: var(--rust);
  background: rgba(181, 72, 42, 0.08);
  border: 1px solid rgba(181, 72, 42, 0.25);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 0;
}

.auth-switch {
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-muted);
  margin: 4px 0 0;
}

.auth-forgot-note {
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
  background: var(--paper-dim);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 6px 0 0;
}

.temp-password-display {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.04em;
  background: var(--paper-dim);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 12px;
  margin: 10px 0;
  user-select: all;
}

.mfa-backup-codes-display {
  white-space: pre-line;
  line-height: 1.8;
}

.mfa-qr-wrap {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}
.mfa-qr-wrap svg {
  background: #fff;
  padding: 12px;
  border-radius: 6px;
  width: 180px;
  height: 180px;
}

.mfa-remember-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
}
.mfa-remember-row label {
  display: inline;
  flex: none;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ink-muted);
}

.auth-link {
  background: none;
  border: none;
  color: var(--gold);
  font-weight: 600;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.auth-link:hover { color: var(--forest); }

.masthead-mark {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  /* Loggan är en inline SVG som använder currentColor för ringen/texten -
     här sätts den till paper-färgen (ljus) eftersom sidhuvudet har en mörk
     bakgrund. Guldringen är alltid samma färg oavsett bakgrund. */
  color: var(--paper);
}

.masthead h1 {
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.01em;
}

.subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  color: #C7D2DB;
}

/* ---- Tabs ---- */
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  max-width: 100%;
}
.tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari - scrollbar döljs, men skrollningen fungerar ändå med fingret/musen */

.tab {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px 999px 0 0;
  border: none;
  background: transparent;
  color: #C7D2DB;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}

.tab.active {
  background: var(--paper);
  color: var(--ink);
}

.settings-hint {
  font-size: 12px;
  color: var(--ink-muted);
  margin: 16px 0 4px;
  line-height: 1.5;
}

/* ---- Månadsjämförelsegraf (Dashboard) ---- */
#monthChartBody { margin-top: 14px; }
.month-chart-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.month-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-muted);
}
.month-chart-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
}
.month-chart-legend-current { background: var(--forest); }
.month-chart-legend-prev {
  height: 0;
  border-top: 2px dashed #A39B8B;
}
#monthChartSvgWrap svg { width: 100%; height: auto; display: block; }
@media (max-width: 480px) {
  /* Döljer de två mellanliggande x-axel-datumen (25%/75%) på smala
     skärmar - lämnar kvar start/mitt/slut, luftigare än fem tätt packade
     datum på en telefonbredd. */
  .month-chart-xlabel-secondary { display: none; }
}

/* ---- History ---- */
/* Sammanställningsraden återanvänder appens vanliga .ledger-summary/.kpi-
   kakelmönster rakt av (samma komponent som Dashboardens KPI-rad,
   Prenumerationer och Kategoribudget använder) istället för en egen unik
   "rutstil" - så Historik inte längre är den enda vyn med ett avvikande
   utseende för sina nyckeltal. */
.history-summary-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

/* Första plattan ("Netto spenderat") är klickbar och fäller ut
   månadsgrafen - samma "klicka för att fälla ut"-mönster som #kpiTotalCard
   på Dashboard (vanlig kakelbakgrund tills den fälls ut, då mörk bakgrund
   och vit text, se .kpi-expanded nedan). */
#historyChartToggle { cursor: pointer; }
#historyChartToggle:hover:not(.kpi-expanded) { background: var(--paper-dim); }
#historyChartToggle.kpi-expanded { background: var(--ink); }
#historyChartToggle.kpi-expanded .kpi-label,
#historyChartToggle.kpi-expanded .kpi-chevron {
  color: rgba(255,255,255,0.75);
}
#historyChartToggle.kpi-expanded .kpi-value { color: var(--paper); }

/* Fällbar graf-rad, dockad direkt under kakelraden - identiskt mönster
   (samma mått) som Dashboardens .kpi-per-day-chart-row under KPI-raden. */
.history-chart-row {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 14px 16px;
  margin-top: -18px;
  margin-bottom: 18px;
}
.history-chart-row[hidden] { display: none; }
.history-chart-heading {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
#historyChartSvgWrap svg { width: 100%; height: auto; display: block; }

.history-year {
  margin-bottom: 10px;
}
.history-year:last-child { margin-bottom: 0; }

.history-year-header {
  background: var(--paper-dim);
  border-radius: 6px;
  border-bottom: none;
  margin-bottom: 4px;
}
.history-year-header .history-month-title { font-size: 15px; }
.history-year-header:hover { background: #EFE7D2; }

.history-year-body {
  padding-left: 8px;
  border-left: 2px solid var(--hairline);
  margin-left: 6px;
}

.history-month-days {
  padding-left: 8px;
  border-left: 2px solid var(--hairline);
  margin-left: 6px;
  margin-top: 2px;
}

.history-day {
  margin-bottom: 8px;
}
.history-day:last-child { margin-bottom: 0; }

.history-day-header,
.history-day-title {
  font-size: 13px;
}
.history-day-header .history-month-toggle {
  font-size: 12px;
}

.history-month {
  margin-bottom: 14px;
}

.history-month:last-child { margin-bottom: 0; }

.history-month-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-bottom: 1px solid var(--hairline);
  background: none;
  padding: 6px 4px;
  margin-bottom: 6px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.history-month-header[hidden] { display: none; }

.history-month-header:hover { background: var(--paper-dim); }

.history-month-toggle {
  color: var(--gold);
  font-size: 11px;
  width: 12px;
  flex-shrink: 0;
}

.history-month-title {
  font-size: 14px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--ink);
  flex-shrink: 0;
}

.history-month-stats {
  margin-left: auto;
  display: flex;
  gap: 18px;
}

.history-stat {
  font-size: 11.5px;
  color: var(--ink-muted);
  white-space: nowrap;
}

.history-stat strong {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  color: var(--ink);
  margin-left: 4px;
}

/* ---- KPI ledger summary ---- */
.ledger-summary {
  display: flex;
  flex-wrap: nowrap;
  gap: 1px;
  background: var(--hairline);
  border-radius: var(--radius);
  overflow-x: auto;
  margin-bottom: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  /* scroll-snap - vid horisontell skrollning på smala skärmar landar raden
     alltid på en HEL ruta istället för att kunna stanna mitt i en ruta,
     vilket annars klipper av t.ex. "kr" i slutet av ett belopp. */
  scroll-snap-type: x mandatory;
}
.ledger-summary .kpi {
  scroll-snap-align: start;
}

.kpi {
  background: var(--paper);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-width: 108px;
}

.kpi-accent { background: var(--forest); }
.kpi-accent .kpi-label { color: rgba(255,255,255,0.75); }
.kpi-accent .kpi-value { color: var(--paper); }

/* Kvar totalt-rutan blir klickbar (visar kontonedbrytning) bara när det
   finns fler än ett konto - JS lägger till/tar bort dessa klasser samt
   visar/döljer kpiTotalChevron beroende på antal konton. */
#kpiTotalCard.kpi-clickable {
  cursor: pointer;
}
#kpiTotalCard.kpi-clickable:hover:not(.kpi-expanded) {
  background: var(--paper-dim);
}
#kpiTotalCard.kpi-expanded {
  background: var(--ink);
}
#kpiTotalCard.kpi-expanded .kpi-label,
#kpiTotalCard.kpi-expanded .kpi-chevron {
  color: rgba(255,255,255,0.75);
}
#kpiTotalCard.kpi-expanded .kpi-value {
  color: var(--paper);
}
.kpi-chevron {
  color: var(--gold);
  /* Triangelglyphen (▾/▴) ritas visuellt mycket mindre än sin font-size
     jämfört med bredvidliggande text, så den behöver vara betydligt
     större än kpi-label (10.5px) för att se lika stor ut i praktiken. */
  font-size: 14px;
  margin-left: 2px;
  vertical-align: -1px;
}

/* Kvar per dag-kortet är alltid klickbart (till skillnad från Kvar
   totalt, som bara blir det med fler än ett konto) - expanderar till en
   dagshistorik-graf under KPI-raden, samma "klicka för att fälla ut"-
   mönster som återanvänds här. */
#kpiPerDayCard { cursor: pointer; }
#kpiPerDayCard:hover:not(.kpi-expanded) { filter: brightness(1.06); }
#kpiPerDayCard.kpi-expanded { background: var(--ink) !important; }
#kpiPerDayCard.kpi-expanded .kpi-label,
#kpiPerDayCard.kpi-expanded .kpi-chevron {
  color: rgba(255,255,255,0.75);
}
#kpiPerDayCard.kpi-expanded .kpi-value { color: var(--paper); }

.kpi-per-day-chart-row {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 14px 16px;
  margin-top: -18px;
  margin-bottom: 18px;
}
.kpi-per-day-chart-row[hidden] { display: none; }
.kpi-per-day-chart-heading {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
#kpiPerDayChartSvgWrap svg { width: 100%; height: auto; display: block; }

.account-breakdown-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 14px 16px;
  margin-top: -18px;
  margin-bottom: 18px;
}
.account-breakdown-row[hidden] { display: none; }
.account-breakdown-item {
  flex: 1 1 120px;
  background: var(--paper-dim);
  border-radius: 8px;
  padding: 10px 12px;
}
.account-breakdown-name {
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}
.account-breakdown-value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.account-breakdown-excluded { background: none; border: 1px dashed var(--hairline); }
.account-breakdown-excluded .account-breakdown-value { color: var(--ink-muted); }
.account-breakdown-excluded-tag { text-transform: none; letter-spacing: 0; font-style: italic; }
/* Mobil: en kolumn, namn och saldo på samma rad - inte som staplade kort,
   för att inte ta för mycket vertikal plats på en redan trång skärm. */
@media (max-width: 640px) {
  .account-breakdown-row { flex-direction: column; gap: 6px; }
  .account-breakdown-item {
    flex: 0 1 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
  }
  .account-breakdown-name { margin-bottom: 0; }
}

/* "Dagar kvar" visar bara ett litet tal (aldrig mer än tre siffror) och
   behöver därför inte lika mycket plats som de belopp-visande rutorna
   (Inkomster/Utgifter/Kvar totalt/Netto per dag), som annars klipper av
   femsiffriga belopp när alla sex rutor delar exakt lika bredd. Avgränsad
   till just den här rutan (inte hela .kpi-klassen) eftersom samma klass
   även återanvänds på Prenumerationer och Kategorier, där alla rutor ska
   vara lika breda som vanligt. */
.kpi-compact {
  /* Bredare bas-regel (gäller desktop) så "Dagar kvar"-etiketten får plats
     på EN rad där, precis som de andra rutorna - så siffrorna hamnar i
     samma höjd. Mobilens smalare @media-regler (se längre ner i filen)
     skriver över det här och tillåter radbrytning igen där utrymmet
     faktiskt är knappt. */
  flex: 0.6 1 0;
  min-width: 95px;
}
.kpi-compact .kpi-label {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}

.kpi-warning { background: #C08A1E !important; }
.kpi-warning .kpi-label { color: rgba(255,255,255,0.8); }
.kpi-warning .kpi-value { color: var(--paper); }
.kpi-warning .kpi-chevron { color: rgba(255,255,255,0.8); }

.kpi-danger { background: var(--rust) !important; }
.kpi-danger .kpi-label { color: rgba(255,255,255,0.8); }
.kpi-danger .kpi-value { color: var(--paper); }
.kpi-danger .kpi-chevron { color: rgba(255,255,255,0.8); }

.kpi-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-value {
  font-family: 'IBM Plex Mono', monospace;
  /* clamp() - skalar mjukt mellan 15px (minimum) och 22px (maximum) baserat
     på skärmbredden, istället för fasta hopp vid enstaka brytpunkter. Vid
     smala skärmar krymper texten automatiskt så belopp (inklusive "kr")
     får plats utan att klippas av. */
  font-size: clamp(11px, 3.2vw, 22px);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.kpi-value-income { color: var(--forest); }
.kpi-value-expense { color: var(--rust); }

.kpi-delta {
  display: block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.3;
  margin-top: 2px;
  cursor: help;
}
.kpi-delta-up { color: var(--rust); }       /* Spenderat mer än förra månaden */
.kpi-delta-down { color: var(--forest); }   /* Spenderat mindre än förra månaden */
.kpi-delta-neutral { color: var(--ink-muted); font-weight: 400; }

/* ---- Panels ---- */
.panel {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

.panel h2 {
  font-size: 15px;
  margin: 0 0 16px;
  color: var(--ink);
  font-weight: 600;
}

.panel h2::before {
  content: "— ";
  color: var(--gold);
}

/* ---- Forms ---- */
.settings-grid, .entry-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: end;
}

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-muted);
  flex: 1;
  min-width: 130px;
}
label[hidden] { display: none; }

.comment-field { flex: 2; min-width: 180px; }

input, select, textarea {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  padding: 9px 10px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 137, 43, 0.15);
}
#feedbackMessage {
  display: block;
  width: 100%;
  max-width: 480px;
  margin-bottom: 10px;
  resize: vertical;
  font-family: 'IBM Plex Sans', sans-serif;
}
#adminAnnouncementText {
  display: block;
  width: 100%;
  max-width: 480px;
  margin-bottom: 10px;
  resize: vertical;
  font-family: 'IBM Plex Sans', sans-serif;
}
#adminAboutPurposeText {
  display: block;
  width: 100%;
  max-width: 480px;
  margin-bottom: 10px;
  resize: vertical;
  font-family: 'IBM Plex Sans', sans-serif;
}
.admin-announcement-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Vilka mottagare som inte fick brevet. Dämpad och liten som resten av
   adminsektionens hjälptexter - adressen i rostrött eftersom den är det
   man ska agera på, orsaken i brödtextfärg eftersom den bara förklarar. */
.newsletter-failures {
  margin: 0 0 8px;
  max-width: 560px;
}

.newsletter-failures ul {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}

.newsletter-failures li {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}

.newsletter-failures li .newsletter-failure-address {
  color: var(--rust);
  font-weight: 600;
}

/* Förhandsvisning av månadsbrevet. Brevet är HTML med egna inline-stilar,
   byggd för e-postklienter och inte för appen - den måste därför visas i en
   iframe, så appens stilmall inte påverkar hur brevet ser ut (och brevets
   stilar inte läcker in i adminsidan). sandbox utan värden = mest
   restriktiva läget: inget i brevet får köra något.

   Bredden följer .admin-login-message-fälten ovan (max-width 560px) så
   förhandsvisningen står i linje med textrutan den visar. */
.newsletter-preview {
  margin-top: 14px;
  width: 100%;
  max-width: 560px;
}

.newsletter-preview-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.newsletter-preview-frame {
  display: block;
  width: 100%;
  height: 440px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  /* Samma mörka ton som brevets egen ytterkant, så ramen inte lyser vit
     innan brevet hunnit renderas. */
  background: var(--cover);
}

/* Adminmeddelandets fält. Samma bredd som Om-sidans inline-redigerare
   (.about-field-editor textarea) - det är appens etablerade form för "admin
   skriver fri text" - i stället för webbläsarens smala standardbredd, som
   driftmeddelandets och välkomstrutans fält fortfarande använder. */
.admin-login-message input[type="text"],
.admin-login-message textarea {
  display: block;
  width: 100%;
  max-width: 560px;
  margin-bottom: 8px;
}
.admin-login-message textarea {
  resize: vertical;
  font-family: 'IBM Plex Sans', sans-serif;
}

/* Länkarna i adminmeddelandets ruta. Appen har ingen global a-regel (den
   stylar länkar via .auth-link och liknande klasser), så utan den här fick
   de webbläsarens standardblå mitt i den varma paletten. Samma guld och
   understrykning som .auth-link använder. */
#loginMessageBody a {
  color: var(--gold);
  font-weight: 600;
  text-decoration: underline;
  overflow-wrap: anywhere;
}
#loginMessageBody a:hover { color: var(--ink); }

.btn {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--forest);
  color: #fff;
}
.btn-primary:hover { background: #285c43; }

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline);
  text-decoration: none;
}
.btn-secondary[hidden] { display: none; }
.btn-secondary:hover { background: var(--paper-dim); border-color: var(--gold); }

.btn-danger {
  display: inline-block;
  background: transparent;
  color: var(--rust);
  border: 1px solid var(--rust);
  text-decoration: none;
}
.btn-danger[hidden] { display: none; }
.btn-danger:hover { background: var(--rust); color: var(--paper); }

.danger-zone {
  margin-top: 20px;
  padding: 14px 16px;
  background: rgba(181, 72, 42, 0.05);
  border: 1px solid rgba(181, 72, 42, 0.25);
  border-radius: 8px;
}
.danger-zone[hidden] { display: none; }
.danger-zone h4 {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--rust);
}
.danger-zone p {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.5;
}

.settings-subsection {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--hairline);
}
.settings-subsection h4 {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink);
}

.settings-export {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--hairline);
}
.settings-export .settings-hint { margin: 8px 0 0; }

.export-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---- Kategorihantering (Inställningar) ---- */
.category-manage-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-manage-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--paper-dim);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 5px 6px 5px 6px;
  font-size: 12.5px;
  color: var(--ink);
}

.category-color-input,
.newCategoryColorInput {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 5px;
  cursor: pointer;
  background: none;
  flex-shrink: 0;
}
.category-color-input::-webkit-color-swatch-wrapper,
.newCategoryColorInput::-webkit-color-swatch-wrapper { padding: 0; }
.category-color-input::-webkit-color-swatch,
.newCategoryColorInput::-webkit-color-swatch { border: none; border-radius: 4px; }

.category-hex-input {
  width: 74px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid var(--hairline);
  border-radius: 5px;
  text-transform: uppercase;
}

.category-name-input {
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  color: var(--ink);
  width: 110px;
}
.category-name-input:hover, .category-name-input:focus {
  border-color: var(--hairline);
  background: var(--paper);
}

.category-remove-btn {
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 50%;
}
.category-remove-btn:hover { color: var(--rust); background: rgba(181, 72, 42, 0.12); }

.category-empty-note {
  font-size: 12.5px;
  color: var(--ink-muted);
  font-style: italic;
}

.category-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.category-add-row input[type="text"] {
  flex: 1;
  min-width: 160px;
}
#newCategoryColorInput {
  -webkit-appearance: none;
  appearance: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  cursor: pointer;
  background: none;
  flex-shrink: 0;
}
#newCategoryColorInput::-webkit-color-swatch-wrapper { padding: 0; }
#newCategoryColorInput::-webkit-color-swatch { border: none; border-radius: 5px; }

/* ---- Kontolista (Inställningar) ---- */
.account-manage-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.account-manage-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper-dim);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px 10px;
}
.account-name-input {
  flex: 1;
  min-width: 100px;
  border: none;
  background: none;
  font-size: 13.5px;
  color: var(--ink);
  padding: 4px 6px;
}
.account-balance-input {
  width: 110px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  padding: 4px 6px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--paper);
}
.account-remove-btn {
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  flex-shrink: 0;
}
.account-remove-btn:hover { color: var(--rust); }
/* "Räkna inte med"-kryssrutan - nollställer den globala label-regeln
   (flex-kolumn, min-width) så den ligger på samma rad som saldofältet. */
.account-manage-list .account-exclude-toggle {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  flex: none;
  min-width: 0;
  font-size: 11.5px;
  color: var(--ink-muted);
  white-space: nowrap;
  cursor: pointer;
}
.account-exclude-checkbox { width: 14px; height: 14px; margin: 0; padding: 0; accent-color: var(--forest); cursor: pointer; }
.account-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.account-add-row input[type="text"] {
  flex: 1;
  min-width: 160px;
}
.account-add-row input[type="number"] {
  width: 160px;
}

/* ---- Prenumerationslista (Inställningar) ---- */
.subscription-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.subscription-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--paper-dim);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 10px 12px;
  flex-wrap: wrap;
}

.subscription-item.subscription-paused {
  opacity: 0.55;
}

.subscription-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}

.subscription-name {
  font-weight: 600;
  color: var(--ink);
}

.subscription-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-muted);
}

.subscription-paused-note {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  background: rgba(113, 105, 90, 0.12);
  padding: 1px 8px;
  border-radius: 999px;
}

/* ---- Admin ---- */
.admin-badge {
  display: inline-block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--paper);
  background: var(--forest);
  padding: 1px 7px;
  border-radius: 999px;
  vertical-align: middle;
}
.admin-super-badge {
  display: inline-block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--paper);
  background: var(--gold);
  padding: 1px 7px;
  border-radius: 999px;
  vertical-align: middle;
}
.admin-referral-badge {
  display: inline-block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--paper);
  background: var(--cover);
  padding: 1px 7px;
  border-radius: 999px;
  vertical-align: middle;
}

/* Märke för den som tackat nej till månadsbrevet. Samma pill-form som
   .admin-badge, men i den dämpade textfärgen och inte i rostrött: kuvertet
   bredvid betyder "något kan vara fel", medan det här bara är ett val
   användaren gjort. Färgen ska inte signalera problem. */
.admin-nonewsletter-badge {
  display: inline-block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--paper);
  background: var(--ink-muted);
  padding: 1px 7px;
  border-radius: 999px;
  vertical-align: middle;
}

/* Kuvert som markerar en obekräftad e-postadress. Variantväljaren U+FE0E i
   markupen tvingar TEXT-rendering i stället för färgemoji - utan den ritar
   systemets emojifont glyfen i sin egen blå och ignorerar color helt.
   Talen nedan är UPPMÄTTA i webbläsaren, inte gissade: versalhöjden i namnet
   bredvid (IBM Plex Mono 13,5px) är 9px, och ✉ ritas av en reservfont med
   betydligt mindre bläckyta än sin fontstorlek - vid 1em blev kuvertet bara
   6px, alltså två tredjedelar av texten. 1.6em ger exakt 9px bläckhöjd.
   line-height 0 gör att den uppskalade glyfen inte drar isär radhöjden i
   Konto-cellen (mätt: raden står kvar på 54,5px), och vertical-align -0.046em
   (= 1px) skjuter ner glyfen så dess underkant landar på textens baslinje -
   reservfonten lägger annars bläcket 1px ovanför den. */
.admin-unverified {
  color: var(--rust);
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -0.046em;
}

.admin-noname {
  color: var(--ink-muted);
  font-style: italic;
}

/* Namn och e-post delar EN kolumn ("Konto"), namnet överst och adressen under.
   Som två egna kolumner delade de automatiskt lika på det som blev över
   (table-layout:fixed ger två auto-kolumner 50/50), vilket gav e-posten 162px
   = 18 tecken - uppmätt, och kortare än nästan varje riktig adress, så de
   radbröts mitt inne i ordet. Sammanslagna får kolumnen 378px = 45 tecken.
   De fasta bredderna nedan är innehållets uppmätta behov plus marginal
   (rubriken är bredare än datumet i Registrerad, och Åtgärder är mätt med
   alla fyra knapparna synliga). */
#adminUsersTable td:nth-child(1), #adminUsersTable th:nth-child(1) { width: auto; }
#adminUsersTable td:nth-child(2), #adminUsersTable th:nth-child(2) { width: 100px; }
#adminUsersTable td:nth-child(3), #adminUsersTable th:nth-child(3) { width: 142px; }
#adminUsersTable td:nth-child(4), #adminUsersTable th:nth-child(4) { width: 64px; }
#adminUsersTable td:nth-child(5), #adminUsersTable th:nth-child(5) { width: 148px; text-align: right; white-space: nowrap; }
#adminUsersTable { min-width: 790px; }

.admin-account-name { display: block; }

/* overflow-wrap ligger kvar som skyddsnät, inte som vardagsbeteende: en
   e-postadress har inga mellanslag att bryta på, och vid table-layout:fixed
   (satt på .ledger-table) överflödar sånt innehåll annars osynligt in i
   nästa cell i stället för att brytas av. Med 45 tecken att röra sig på
   slår det i praktiken aldrig till. */
.admin-account-email {
  display: block;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.admin-actions {
  display: inline-flex;
  gap: 2px;
  flex-wrap: nowrap;
}
.admin-actions button {
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 7px;
  border-radius: 6px;
  line-height: 1;
}
.admin-actions button:hover { color: var(--gold); background: rgba(184, 137, 43, 0.12); }
.admin-delete-btn:hover { color: var(--rust) !important; background: rgba(181, 72, 42, 0.12) !important; }

.subscription-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.subscription-actions button {
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 7px;
  border-radius: 6px;
}
.subscription-actions button:hover { color: var(--gold); background: rgba(184, 137, 43, 0.12); }
.subscription-delete-btn:hover { color: var(--rust) !important; background: rgba(181, 72, 42, 0.12) !important; }

.subscription-empty-note {
  font-size: 12.5px;
  color: var(--ink-muted);
  font-style: italic;
  margin: 0 0 16px;
}

/* ---- Kategoritagg i loggbok/historik ---- */
.category-tag {
  display: inline-block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 8px;
  border-radius: 999px;
  margin-right: 6px;
  margin-bottom: 2px;
  color: #fff;
  vertical-align: middle;
}

.category-tag-clickable {
  cursor: pointer;
  border: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* ---- Tagg för framtida (ännu ej passerade) poster ---- */
.upcoming-tag {
  display: inline-block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 8px;
  border-radius: 999px;
  margin-left: 8px;
  color: var(--gold);
  background: rgba(184, 137, 43, 0.14);
  border: 1px solid rgba(184, 137, 43, 0.35);
  vertical-align: middle;
}
.category-tag-clickable:hover {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

/* ---- Historik: filterrad när en eller flera kategorier valts (klick på en
   tagg, eller "Lägg till kategori" i historiken) ---- */
.history-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-bottom: 14px;
  position: relative;
}

.history-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  border: none;
}
.history-filter-chip:hover { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15); }
.history-filter-chip-x { font-size: 10px; opacity: 0.85; }

.history-filter-add {
  display: inline-flex;
  align-items: center;
  background: rgba(59, 91, 124, 0.09);
  border: 1px dashed var(--slate);
  border-radius: 999px;
  padding: 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--slate);
  cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif;
}
.history-filter-add:hover { background: rgba(59, 91, 124, 0.16); }
.history-filter-add.is-open { background: var(--slate); color: #fff; border-style: solid; }

.history-filter-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
  padding: 8px;
  width: 200px;
  z-index: 5;
}

.history-filter-dropdown-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 6px;
  border-radius: 5px;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  flex: none;
  min-width: 0;
}
.history-filter-dropdown-row:hover { background: var(--paper-dim); }
.history-filter-dropdown-row input { accent-color: var(--slate); width: 14px; height: 14px; }

.history-filter-dropdown-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.history-filter-dropdown-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.history-filter-dropdown-empty {
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
  padding: 6px;
}

.history-filter-clear {
  margin-left: auto;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  color: var(--ink-muted);
  cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif;
}
.history-filter-clear:hover { color: var(--rust); border-color: var(--rust); background: rgba(181, 72, 42, 0.08); }

.save-note {
  margin-left: 10px;
  font-size: 12px;
  color: var(--forest);
}

/* ---- Settings: sektioner med streckad avdelare, samma mönster genomgående ---- */
.settings-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--hairline);
}
.settings-section-first {
  margin-top: 4px;
  padding-top: 0;
  border-top: none;
}

.settings-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  font-weight: 600;
  margin: 0 0 10px;
}

.settings-section .settings-hint { margin-top: 10px; margin-bottom: 0; }
.settings-section .settings-grid { margin: 0; }
.settings-section-body { padding-top: 14px; }
.settings-section-body[hidden] { display: none; }

.lang-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink-muted);
  cursor: pointer;
}
.lang-btn:hover { border-color: var(--gold); }
.lang-btn.active {
  border-color: var(--forest);
  background: rgba(47, 109, 79, 0.08);
  color: var(--ink);
  font-weight: 600;
}
.lang-flag {
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--ink-muted);
}

.meta-row span:last-child {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ink);
}

.version-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--hairline);
}

.version-section h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 0 0 8px;
  font-weight: 600;
}

.version-group {
  margin-bottom: 8px;
}
.version-group:last-child { margin-bottom: 0; }

.version-list {
  list-style: none;
  margin: 0;
  padding: 14px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Högre specificitet än ".version-list" ovan, så hidden-attributet faktiskt slår igenom */
.version-list[hidden] { display: none; }

.version-list li {
  font-size: 12.5px;
  color: var(--ink-muted);
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--hairline);
}

.version-list li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* ---- Hjälp ---- */
/* ---- "Nytt i den här versionen" (Om-sidan) ---- */
.whats-new-box {
  background: var(--paper-dim);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.whats-new-box h3 {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.whats-new-box p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
}
.whats-new-box .whats-new-meta {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ink-muted);
}
.whats-new-box .whats-new-meta:empty {
  display: none;
}
.whats-new-box .whats-new-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
}
.whats-new-box .whats-new-list li + li {
  margin-top: 4px;
}

.kofi-box {
  background: var(--paper-dim);
  border-radius: 10px;
  padding: 22px 24px;
  margin-top: 22px;
  text-align: center;
}
.kofi-icon { font-size: 26px; margin-bottom: 6px; }
.kofi-box h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.kofi-box p {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}
.kofi-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 8px;
  text-decoration: none;
}
.kofi-btn:hover { opacity: 0.9; }

.help-intro-box {
  background: var(--paper-dim);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.help-intro-box h3 {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.help-intro-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.help-intro-box .about-field-text {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.6;
}

.help-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.help-list li {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.6;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--hairline);
}

.help-list li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.help-list strong {
  color: var(--ink);
  font-size: 14px;
}

.help-list code {
  color: var(--gold);
  background: rgba(184, 137, 43, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
}

.help-list a {
  color: var(--forest);
  font-weight: 600;
  text-decoration: none;
}
.help-list a:hover { text-decoration: underline; }

.help-list-compact {
  gap: 0;
  padding: 14px 4px 4px;
}
.help-list-compact li {
  font-size: 12.5px;
  line-height: 1.5;
  padding: 7px 0;
  border-bottom: 1px dashed var(--hairline);
}
.help-list-compact li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.help-list-compact strong {
  font-size: 12.5px;
}

/* Samma skydd som History/Versionshistorik mot att en display-regel kör över hidden */
.help-list[hidden] { display: none; }

.version-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--paper);
  background: var(--forest);
  padding: 1px 7px;
  border-radius: 999px;
  height: fit-content;
  justify-self: start;
  white-space: nowrap;
}

/* ---- Ledger table ---- */
.ledger-table-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.ledger-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13.5px;
  table-layout: fixed;
}

.ledger-table th {
  text-align: left;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  padding: 8px 6px;
  border-bottom: 1px dashed var(--hairline);
}

.ledger-table td {
  padding: 9px 6px;
  border-bottom: 1px dashed var(--hairline);
  color: var(--ink);
  vertical-align: top;
}

/* Fasta bredder på datum/belopp/knappar så en lång kommentar inte kan trycka
   ihop dem. Kategori och Kommentar har ingen egen bredd satt - vid
   table-layout:fixed delar två kolumner utan angiven bredd automatiskt lika
   på det utrymme som blir över (max 50/50), och radbryts istället för att
   expandera. */
.ledger-table td:nth-child(1), .ledger-table th:nth-child(1) { width: 96px; }
.ledger-table td:nth-child(2), .ledger-table th:nth-child(2) { width: 118px; }
.ledger-table td:nth-child(5), .ledger-table th:nth-child(5) { width: 72px; }
.ledger-table td:nth-child(3), .ledger-table th:nth-child(3) {
  overflow-wrap: break-word;
  word-break: break-word;
}
.ledger-table td:nth-child(4), .ledger-table th:nth-child(4) {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.ledger-table tr:last-child td { border-bottom: none; }

.amount-cell { text-align: right; color: var(--rust); font-weight: 500; white-space: nowrap; }
.income-cell { color: var(--forest); }

/* Högre specificitet än ".ledger-table td" ovan, så färgerna faktiskt slår igenom */
.ledger-table td.amount-cell { color: var(--rust); white-space: nowrap; }
.ledger-table td.income-cell { color: var(--forest); }

.row-actions {
  white-space: nowrap;
  text-align: right;
}

.edit-btn, .delete-btn {
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
}
.edit-btn:hover { color: var(--gold); background: var(--paper-dim); }
.delete-btn:hover { color: var(--rust); background: var(--paper-dim); }

/* ---- Utgiftsrader (Loggbok/Historik) - egna rader istället för <table>,
   så de kan byggas om helt till kompakta kort på mobil utan att krocka
   med admin-tabellen (som fortfarande är en riktig <table class="ledger-table">). ---- */
.ledger-rows[hidden] { display: none; }

.ledger-row {
  display: grid;
  grid-template-columns: 96px 100px 1fr 1fr 60px;
  align-items: center;
  gap: 6px;
  padding: 9px 6px;
  border-bottom: 1px dashed var(--hairline);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.ledger-row:last-child { border-bottom: none; }
.ledger-row:hover { background: var(--paper-dim); }

.ledger-row-amount { text-align: right; white-space: nowrap; }
.ledger-row-category { overflow-wrap: break-word; word-break: break-word; }
.ledger-row-comment {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.ledger-row-actions { white-space: nowrap; text-align: right; }
.transfer-badge {
  display: inline-block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--paper-dim);
  border: 1px solid var(--hairline);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.ledger-row-account {
  color: var(--ink-muted);
  font-size: 12px;
}

@media (max-width: 640px) {
  .ledger-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "amount actions"
      "category category"
      "comment comment";
    gap: 4px 8px;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  .ledger-row-date { display: none; } /* redan synligt i dag-/månadsrubriken ovanför, onödigt dubbelarbete på mobil */
  .ledger-row-amount { grid-area: amount; text-align: left; font-size: 15px; }
  .ledger-row-category { grid-area: category; text-align: left; margin-top: 2px; }
  .ledger-row-category:empty { display: none; margin-top: 0; }
  .ledger-row-comment { grid-area: comment; font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }
  .ledger-row-actions { grid-area: actions; }
  .ledger-row .edit-btn { display: none; } /* hela kortet är klickbart för att redigera istället, se wireLedgerRowClicks() */
}

.empty-state {
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
  padding: 24px 0 8px;
}

/* ---- Footer ---- */
.page-footer {
  text-align: center;
  font-size: 12px;
  color: #93A2AF;
  margin-top: 30px;
}
.page-footer p { margin: 0 0 6px; }
.page-footer p:last-child { margin-bottom: 0; }
.footer-social {
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.footer-social-link {
  display: inline-flex;
  color: #93A2AF;
  transition: color 0.15s;
}
.footer-social-link:hover { color: var(--gold); }
.page-footer code {
  color: var(--gold);
  background: rgba(184, 137, 43, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
}
.footer-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: #6E7C88;
  margin: 0 0 6px;
}
.footer-dot { margin: 0 2px; }
.footer-uptime-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--forest);
  margin-right: 3px;
}
.footer-copyright {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: #6E7C88;
  margin: 0 0 10px;
}

.shutdown-btn {
  margin-top: 16px;
  font-size: 11.5px;
  padding: 6px 14px;
  color: #93A2AF;
  border-color: rgba(147, 162, 175, 0.35);
  background: transparent;
}
.shutdown-btn:hover {
  color: var(--rust);
  border-color: var(--rust);
  background: rgba(181, 72, 42, 0.08);
}

/* ---- Egen bekräftelsedialog (ersätter webbläsarens window.confirm) ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 24, 33, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-overlay[hidden] { display: none; }

.modal-box {
  background: var(--paper);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  max-width: 420px;
  width: 100%;
  padding: 22px 24px;
  /* .modal-overlay har 20px padding runt om (align-items:center) - utan en
     egen höjdbegränsning + skrollning flyter en hög ruta (t.ex. redigerings-
     rutan med Regleringar-sektionen) bara utanför fönstret, otillgängligt,
     istället för att gå att skrolla till. */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.modal-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 10px;
}

.modal-message {
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.6;
  margin: 0 0 20px;
  white-space: pre-line;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ---- "För över saldot till nya perioden?" (#carryOverModalOverlay) -
   raderna följer .account-manage-list li, beloppsfälten .account-balance-input.
   Div-rader istället för <label> så den globala label-regeln inte slår in. ---- */
.carry-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.carry-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper-dim);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 6px 10px;
}
.carry-row-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.carry-row-was {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-muted);
  text-decoration: line-through;
  white-space: nowrap;
}
.carry-row-input {
  width: 110px;
  flex: none;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 4px;
  background: var(--paper);
  text-align: right;
}
.carry-total {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-muted);
  padding: 4px 10px 0;
}
.carry-total[hidden] { display: none; }
#carryOverTotal, #onboardingTotal {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ink);
  font-weight: 600;
}
.carry-footnote {
  font-size: 11.5px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 12px 0 18px;
  padding-top: 10px;
  border-top: 1px dashed var(--hairline);
}

/* Periodbytesrutan (#periodEndModalOverlay) återanvänder .carry-row/.carry-
   total/.carry-footnote ovan rakt av. Det här är bara de delar som inte
   finns i saldoöverföringsrutan: rubriker över varje block, de två
   datumfälten, och raden om poster som legat efter periodens slut. */
.carry-field-label {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.carry-list + .carry-field-label,
.carry-total + .carry-field-label {
  margin-top: 14px;
}
.period-end-dates {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper-dim);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 14px;
}
.period-end-date {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 4px;
  background: var(--paper);
  text-align: center;
}
.period-end-dash {
  color: var(--ink-muted);
  font-size: 13px;
  flex: none;
}
/* Välkomstrutan (#onboardingModalOverlay) återanvänder hela periodbytes-
   rutans formulär ovan - .carry-field-label, .period-end-dates, .carry-row
   och .carry-total - rakt av. Det enda som skiljer: namnfälten är inte
   datum, så .period-end-date:s centrering (rätt för ett datum, fel för ett
   namn) ställs tillbaka till vänster. */
.onboarding-name-input { text-align: left; }
/* Guldkanten är samma markör som "Nytt i den här versionen"-rutan använder
   för något värt att lägga märke till, i mindre format. */
.period-end-orphan {
  margin: 14px 0 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  background: rgba(184, 137, 43, 0.12);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
}
.period-end-orphan[hidden] { display: none; }

/* ---- Regleringar (kvitta delbetalningar, t.ex. Swish, mot ett utlägg) -
   sektionen lever inuti redigeringspopupen (#editModalOverlay), se
   settle-section i index.html. ---- */
.settle-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--hairline);
}
.settle-section[hidden] { display: none; }

.settle-section-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}
.settle-section-title::before { content: "— "; color: var(--gold); }

.settle-list { display: flex; flex-direction: column; }
.settle-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 2px;
  border-bottom: 1px dashed var(--hairline);
  font-size: 13px;
}
.settle-list-row:last-child { border-bottom: none; }
.settle-list-amount {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--forest);
  font-weight: 500;
  min-width: 58px;
  white-space: nowrap;
}
.settle-list-note { color: var(--ink); flex: 1; overflow-wrap: anywhere; }
.settle-list-date { color: var(--ink-muted); font-size: 11.5px; font-family: 'IBM Plex Mono', monospace; white-space: nowrap; }

.btn-add {
  display: block;
  width: 100%;
  background: transparent;
  color: var(--forest);
  border: 1px dashed rgba(47, 109, 79, 0.4);
  margin-top: 10px;
}
.btn-add:hover { background: rgba(47, 109, 79, 0.08); border-color: var(--forest); }

/* Badge i Historik som visar att en rad är nettoberäknad efter regleringar -
   samma tonade-bakgrund-formel som .transfer-badge/.upcoming-tag ovan. */
.settle-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--forest);
  background: rgba(47, 109, 79, 0.12);
  border: 1px solid rgba(47, 109, 79, 0.35);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 6px;
}

/* ---- Responsive ---- */
/* ---- Responsiv anpassning: surfplatta ---- */
@media (max-width: 768px) {
  .page { padding: 24px 14px 40px; }
  .panel { padding: 18px 16px; }
  .kpi { padding: 12px 8px; }
  .modal-box { padding: 18px 18px; }
}

/* Dashboardens sex KPI-rutor blir två rader (3+3) istället för en enda
   hopklämd skrollbar rad - varje ruta får då betydligt mer plats och kan
   använda en bekvämare textstorlek. Egen brytpunkt (920px, bredare än
   mobil-brytpunkten på 640px nedanför) - MÄTT i webbläsaren (scrollWidth
   vs clientWidth per .kpi-value), inte bara okulärbesiktigat: sex rutor i
   en rad ger varje belopp för lite plats för normala summor (t.ex.
   "32 598 kr") ända upp till nästan sidans egna max-width (920px, se
   .page) - däröver slutar raden växa ändå (.page's max-width sätter
   taket), så det finns ingen vinst i att vänta längre med att byta läge.
   Under den brytpunkten klipptes/hamnade beloppen utanför synligt område
   (t.ex. ett halvskärms-/dockat skrivbordsfönster, eller bara ett fönster
   som inte är maximerat). Grupperat tematiskt: övre raden = "vad som är
   kvar" (Kvar per dag, Dagar kvar, Kvar totalt), undre raden =
   "pengaflödet" (Inkomster, Utgifter, Netto/dag). Ordningen sätts om
   visuellt med CSS order - själva DOM-ordningen (och därmed desktopens
   rad-ordning) rörs aldrig. Gäller bara #kpiRow (Dashboard) - inte
   .ledger-summary på Prenumerationer/Kategorier, som redan har få nog
   rutor för att inte behöva radbrytas. */
@media (max-width: 920px) {
  #kpiRow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
  }
  #kpiRow > .kpi:nth-child(1) { order: 1; } /* Kvar per dag */
  #kpiRow > .kpi:nth-child(2) { order: 2; } /* Dagar kvar */
  #kpiRow > .kpi:nth-child(5) { order: 3; } /* Kvar totalt */
  #kpiRow > .kpi:nth-child(3) { order: 4; } /* Inkomster */
  #kpiRow > .kpi:nth-child(4) { order: 5; } /* Utgifter */
  #kpiRow > .kpi:nth-child(6) { order: 6; } /* Netto/dag */
  #kpiRow .kpi { padding: 12px 8px; min-width: 0; }
  #kpiRow .kpi-compact { min-width: 0; padding-left: 8px; padding-right: 8px; }
  #kpiRow .kpi-label { white-space: normal; overflow: visible; text-overflow: clip; }
  #kpiRow .kpi-value { font-size: clamp(15px, 4.5vw, 22px); }
}

/* ---- Responsiv anpassning: mobil ---- */
@media (max-width: 640px) {
  .masthead h1 { font-size: 21px; }
  .masthead { gap: 12px; }
  .masthead-mark { width: 40px; height: 40px; }
  .subtitle { font-size: 12px; }
  .account-info { font-size: 11.5px; gap: 8px; }
  .history-month-header { flex-wrap: wrap; }
  .history-month-stats { margin-left: 22px; width: 100%; gap: 10px 14px; flex-wrap: wrap; }
  .tab { padding: 8px 13px; font-size: 12px; }
  .panel h2 { font-size: 14px; }
  .settings-grid, .entry-form { gap: 12px; }
  label { min-width: 100%; }
  .comment-field { min-width: 100%; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1; min-width: 100px; }
}

/* ---- Responsiv anpassning: extra smala skärmar ---- */
@media (max-width: 380px) {
  .page { padding: 18px 10px 32px; }
  .panel { padding: 14px 12px; }
  .kpi-label { font-size: 9.5px; }
}

/* ---- Bottommeny (hybridlösning) - bara på mobil ---- */
.bottom-tabs { display: none; }
.more-sheet-overlay { display: none; }

@media (max-width: 640px) {
  /* Ersätter den vanliga flikraden helt på mobil - bottommenyn tar över */
  .tabs { display: none; }

  /* Ger utrymme längst ner på sidan så innehåll aldrig hamnar bakom den
     fasta bottenmenyn (56px hög + säker marginal för hemknapp-gester på
     moderna telefoner). */
  .page { padding-bottom: calc(56px + 24px + env(safe-area-inset-bottom, 0px)); }

  .bottom-tabs {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--cover);
    border-top: 1px solid var(--cover-dim);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 2px;
  }

  .bottom-tab {
    flex: 1;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    padding: 8px 2px;
    border: none;
    background: transparent;
    color: #9AA7B2;
    cursor: pointer;
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bottom-tab.active { color: var(--gold); }
  .bottom-tab:active { background: var(--cover-dim); }

  .more-sheet-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 41;
  }
  .more-sheet-overlay[hidden] { display: none; }

  .more-sheet {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(56px + 12px + env(safe-area-inset-bottom, 0px));
    background: var(--paper);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
  }

  .more-sheet-item {
    display: block;
    width: 100%;
    text-align: left;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 14px;
    border: none;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    border-radius: 8px;
  }
  .more-sheet-item[hidden] { display: none; }
  .more-sheet-item:active { background: var(--paper-dim); }
  .more-sheet-item.active { color: var(--gold); }
}

/* ---- Admin: besökarstatistik (enhet/OS/webbläsare) ---- */
.analytics-summary {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.analytics-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.analytics-column h5 {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.analytics-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.analytics-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--hairline);
}
.analytics-list li:last-child { border-bottom: none; }
.analytics-list .analytics-item-label {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analytics-list .analytics-item-value {
  color: var(--ink-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .analytics-columns { grid-template-columns: 1fr; gap: 20px; }
}

.analytics-active {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 14px;
  font-size: 13px;
  color: var(--ink-muted);
}
.analytics-active-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--forest);
  flex-shrink: 0;
  animation: analytics-pulse 2s ease-in-out infinite;
}
@keyframes analytics-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.honeypot-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.auth-page-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  max-width: 1040px;
}
/* Hjälterutan tar merparten av bredden, inloggningen resten. Basvärdena
   (520/320) gör att de bryter till var sin rad först när det inte längre
   får plats - ingen egen brytpunkt behövs, och på mobil hamnar säljtexten
   överst och inloggningen under, vilket är ordningen vi vill ha. */
#authHero {
  flex: 999 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-page-stack > #authBox {
  flex: 1 1 320px;
  min-width: 0;
  align-self: stretch;
  /* .auth-box-merged har max-width: 620px, satt när rutan var ensam på sidan.
     Här styrs bredden av flex i stället, och taket gjorde bara att rutan blev
     smalare än hjälterutan och korten när den brutit ner till en egen rad
     (syntes vid ~760px). På dator ändrar det ingenting: hjälterutan växer med
     999 mot boxens 1, så boxen stannar runt sina 320px ändå. */
  max-width: none;
}
.auth-page-stack > .auth-landing {
  flex: 1 1 100%;
}
/* Driftmeddelandet: egen rad överst, i hela stackens bredd. Samma skäl som
   max-width: none på #authBox ovan - 620px-taket sattes när rutan låg ensam
   på en 660px-bred sida, och lämnade den smal bredvid den nya tvåspalten. */
.auth-page-stack > .auth-announcement {
  flex: 1 1 100%;
  max-width: none;
}
/* Sidfoten på den utloggade sidan: egen rad längst ner i stacken. Ärver
   .page-footer rakt av (centrerad, 12px, samma dämpade blå mot den mörka
   bakgrunden) och lägger bara till guidelänkarna. */
.auth-footer {
  flex: 1 1 100%;
  margin-top: 14px;
}
.auth-footer-guides a {
  color: #93A2AF;
  text-decoration: underline;
}
.auth-footer-guides a:hover { color: var(--gold); }

.auth-box-merged {
  position: relative;
  max-width: 620px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
/* Formulären (och de vy-liknande div:arna som fungerar som ett "formulär",
   t.ex. väntar-på-verifiering) behöver inte vara lika breda som hela den nu
   bredare rutan - smalnas av och centreras istället, så textfälten inte
   känns onaturligt utsträckta. */
.auth-box-merged form,
.auth-box-merged #pendingVerificationView,
.auth-box-merged #registrationClosedView {
  max-width: 340px;
  margin: 0 auto;
}
.auth-box-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.auth-box-inner {
  position: relative;
  z-index: 1;
}
.auth-logo-large {
  width: 84px;
  height: 84px;
}

.auth-intro {
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: left;
  margin: 16px 0 22px;
}
/* display:flex ovan tar annars över hidden-attributet, så setAuthIntroVisible()
   kunde aldrig dölja introt vid registrering/glömt lösenord. */
.auth-intro[hidden] { display: none; }
.auth-intro-text {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
}
.auth-intro-text p { margin: 0; }
.auth-intro-image-wrap {
  flex-shrink: 0;
  width: 220px;
}
.auth-intro-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 3px solid #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,0.3);
  transform: rotate(-4deg);
}
.auth-intro-divider {
  border-top: 1px solid var(--hairline);
  margin: 0 0 22px;
}

@media (max-width: 560px) {
  .auth-intro { flex-direction: column; text-align: center; }
  .auth-intro-image-wrap { width: 110px; }
}

.auth-announcement {
  position: relative;
  width: 100%;
  max-width: 620px;
  overflow: hidden;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.auth-announcement[hidden] { display: none; }
.auth-announcement-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.auth-announcement p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--rust);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Inline-redigering av Om-sidans fält - pennikonen syns bara för admin
   (styrs i JS, inte här), övriga användare ser bara vanlig text. */
.about-field-text {
  white-space: pre-wrap;
}

/* Länken till brevarkivet, under månadsbrevstexten på Om-sidan. Samma
   guldton som appens övriga inline-textknappar (.auth-link). */
.about-newsletter-archive {
  margin: 8px 0 0;
}
.about-newsletter-archive a {
  color: var(--gold);
  font-weight: 600;
}
/* Samma fem punkter som startsidans säkerhetskort, återanvända via exakt
   samma i18n-nycklar (landing.security*) så de två platserna aldrig kan
   säga olika saker om samma sak. Listan behövs för att INLOGGADE aldrig
   ser startsidan - utan den vore fakta osynliga för dem som faktiskt
   använder appen. Ikonerna följer inte med: 44px-ringar är för tunga i
   help-listans 12,5px-täthet, så guldstrecket markerar punkterna i
   stället - samma grepp som .auth-landing-card h2::before. Punkternas
   egen padding och streckade underkant nollställs, eftersom
   .help-list-compact li är en ättlingsselektor och annars träffar dem. */
.about-security-facts {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.about-security-facts li {
  padding: 0;
  border-bottom: none;
}
.about-security-facts li::before {
  content: "— ";
  color: var(--gold);
}
.about-security-facts b {
  color: var(--forest);
  font-weight: 600;
}
.about-security-facts a {
  color: var(--forest);
  font-weight: 600;
  text-decoration: underline;
}
.about-security-facts a:hover { color: var(--gold); }
.about-field-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--gold);
  margin-left: 6px;
  padding: 2px 4px;
  vertical-align: middle;
}
.about-field-edit-btn:hover { color: var(--ink); }
.about-field-editor { margin-top: 6px; }
.about-field-lang-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.about-field-editor textarea {
  display: block;
  width: 100%;
  max-width: 560px;
  resize: vertical;
  margin-bottom: 8px;
  font-family: 'IBM Plex Sans', sans-serif;
}
.about-field-buttons {
  display: flex;
  gap: 8px;
}

/* Egen högerställd rad överst i .auth-page-stack, inte absolut placerad i
   sidans hörn. Som absolut placerad låg pillren ovanpå innehållets övre
   högra hörn vid varje fönsterbredd under ~1280px - driftmeddelandet,
   hjälterutan eller inloggningsboxen beroende på bredd. Som flexrad följer
   de innehållets högerkant och kan inte krocka med något, utan brytpunkt. */
.auth-lang-toggle {
  flex: 1 1 100%;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}
.auth-lang-btn {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #C7D2DB;
  cursor: pointer;
}
.auth-lang-btn:hover { border-color: var(--gold); color: #fff; }
.auth-lang-btn[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

/* ---- Landningsläge på inloggningssidan (?fran=..., t.ex. från en annons) ----
   Informationskort ovanför den vanliga inloggningsrutan, i samma bredd och
   pappersstil. Rutans egen logga/rubrik döljs i det här läget eftersom
   startkortet redan visar dem. */
.auth-landing {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
}
/* Funktionskortet i full bredd, säkerhet och pris delar raden under. */
.auth-landing > .auth-landing-card {
  flex: 1 1 420px;
  min-width: 0;
}
.auth-landing > .auth-landing-card:first-child {
  flex: 1 1 100%;
}
.auth-landing[hidden] { display: none; }
.auth-page.is-landing .auth-box-merged .auth-box-inner > .auth-logo,
.auth-page.is-landing .auth-box-merged .auth-box-inner > h1 {
  display: none;
}
.auth-landing-card {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  padding: 26px 28px;
}
.auth-landing-card h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--ink);
}
.auth-landing-card h2::before {
  content: "— ";
  color: var(--gold);
}
.auth-landing-hero {
  text-align: left;
  padding: 32px 30px 30px;
}
/* Säljtext och dashboard-bild bredvid varandra inuti hjälterutan, precis som
   i den gamla .auth-intro-sektionen. Bilden behåller sin egen styling
   (.auth-intro-image) och sin bredd (.auth-intro-image-wrap) - bara
   placeringen är ny. Basvärdet 300px gör att bilden lägger sig under texten
   när spalten blir smal; den befintliga 560px-mediefrågan krymper den då
   till 110px, samma beteende som förut. */
.auth-hero-cols {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.auth-hero-text {
  flex: 999 1 300px;
  min-width: 0;
}
@media (max-width: 560px) {
  /* Mediefrågan längre upp krymper introbilden till 110px - rimligt när den
     satt inklämd bredvid texten i inloggningsrutan, men i hjälterutan ligger
     den numera UNDER texten i full bredd och har råd att vara större. Samma
     ram, lutning och skugga som förut, bara inte lika liten. */
  .auth-hero-cols .auth-intro-image-wrap {
    width: 200px;
    margin: 0 auto;
  }
}
/* Logga och namn bredvid varandra, lodrätt centrerade mot varandra - samma
   uppställning som appens eget sidhuvud (.masthead) redan använder, bara med
   ink-färg mot den ljusa rutan i stället för paper mot den mörka. */
.auth-hero-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  row-gap: 8px;
  margin-bottom: 18px;
}
.auth-hero-brand .auth-logo { margin-bottom: 0; }
/* På smal skärm ryms inte 84px logga plus namnet i 26px på samma rad - då
   bryter flex-wrap raden och vi är tillbaka i den gamla uppställningen med
   loggan ovanför. Mindre logga och mindre namn håller ihop dem i stället. */
@media (max-width: 560px) {
  .auth-hero-brand .auth-logo-large { width: 58px; height: 58px; }
  .auth-hero-brand { gap: 12px; }
  .auth-landing-name { font-size: 21px; }
}
.auth-landing-name {
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}
.auth-landing-headline {
  font-size: clamp(26px, 6vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--ink);
  text-wrap: balance;
}
.auth-landing-headline em {
  font-style: normal;
  color: var(--gold);
}
.auth-landing-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 46ch;
  margin: 0 0 22px;
}
.auth-landing-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.auth-landing-cta .btn {
  font-size: 15px;
  padding: 12px 28px;
}
.auth-landing-cta .auth-switch { margin: 0; }
.auth-landing-count {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin: 16px 0 0;
}
.auth-landing-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px dashed var(--gold);
  background: #F1E6CC;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.auth-landing-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auth-landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.auth-landing-feature {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
  background: var(--paper-dim);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 12px 14px;
}
.auth-landing-feature h3 {
  font-size: 14px;
  margin: 2px 0 3px;
  color: var(--ink);
}
.auth-landing-feature p {
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
  color: var(--ink);
}
.auth-landing-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-landing-facts li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.auth-landing-facts b {
  color: var(--forest);
  font-weight: 600;
}
/* Länkar i faktalistan: samma gröna 600-vikt som .help-list a, appens
   mönster för länk på pappersyta. Understrykningen är INTE kosmetika -
   .auth-landing-facts b ovan har redan exakt samma färg och vikt, så utan
   den vore länken visuellt identisk med fetstilen och ingen hade sett att
   den går att klicka på. Guldhovern följer .auth-footer-guides a. */
.auth-landing-facts a {
  color: var(--forest);
  font-weight: 600;
  text-decoration: underline;
}
.auth-landing-facts a:hover { color: var(--gold); }
.auth-landing-free {
  display: flex;
  align-items: center;
  gap: 22px;
}
.auth-landing-free p {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.auth-landing-free p.auth-landing-muted {
  margin: 0;
  font-size: 13px;
  color: var(--ink-muted);
}
.auth-landing-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 64px;
  font-weight: 600;
  color: var(--forest);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.auth-landing-price span {
  font-size: 30px;
  margin-left: 4px;
  letter-spacing: 0;
}
@media (max-width: 560px) {
  .auth-landing-card { padding-left: 20px; padding-right: 20px; }
  .auth-landing-features { grid-template-columns: 1fr; }
  .auth-landing-free { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Klickbar sektionsrubrik för de hopfällbara sektionerna på "Kategorier &
   Budget"-fliken (Kategoribudget/Kategorier) - samma h2-stil (med "— "-
   prefixet från .panel h2::before) som alla andra paneler, men hela raden
   är en knapp som fäller ihop/ut sektionens innehåll. */
.panel-section-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  background: none;
  padding: 0;
  margin: 0 0 16px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.panel-section-header h2 { margin: 0; }
.panel-section-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel-section-body[hidden] { display: none; }
.category-budget-period {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-muted);
}
.categories-view-intro {
  color: var(--ink-muted);
  font-size: 12.5px;
  font-style: italic;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--hairline);
  line-height: 1.5;
}

.cb-row { margin-bottom: 14px; }
.cb-row + .cb-row {
  border-top: 1px dashed var(--hairline);
  padding-top: 14px;
}
.cb-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.cb-row-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.cb-row-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-row-count {
  font-size: 11px;
  color: var(--ink-muted);
  font-family: 'IBM Plex Mono', monospace;
  white-space: nowrap;
}
.cb-row-input {
  width: 90px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  text-align: right;
}
.cb-row-bar {
  height: 6px;
  background: var(--hairline);
  border-radius: 4px;
  overflow: hidden;
}
.cb-row-bar-fill { height: 100%; }
.cb-row-spent-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
}
.cb-row-spent { font-weight: 600; }
.cb-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cb-suggest-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--paper-dim);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--gold);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.cb-suggest-chip:hover { background: var(--hairline); }
.cb-suggest-chip svg { flex-shrink: 0; }

/* "Använd alla förslag"-raden ovanför listan. Knappen ÄR en .cb-suggest-chip
   (samma form som förslagsknapparna på raderna, så kopplingen syns), bara
   något större eftersom den gäller hela listan. */
.cb-bulk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px;
  margin-bottom: 12px;
  border: 1px dashed var(--gold);
  border-radius: 8px;
  background: rgba(184, 137, 43, 0.06);
}
.cb-bulk[hidden] { display: none; }
.cb-bulk-text {
  font-size: 12.5px;
  color: var(--ink);
  min-width: 0;
}
.cb-bulk-text small {
  color: var(--ink-muted);
  font-size: 11.5px;
  margin-left: 4px;
}
.cb-bulk .cb-suggest-chip {
  font-size: 11.5px;
  padding: 4px 12px;
}

/* Osparade ändringar - samma guldkant som periodbytesrutans rad om poster
   efter periodens slut: något användaren behöver lägga märke till. */
.cb-unsaved {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px;
  margin-bottom: 12px;
  background: rgba(184, 137, 43, 0.12);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
}
.cb-unsaved[hidden] { display: none; }
.cb-unsaved-text {
  font-size: 12.5px;
  color: var(--ink);
}
.cb-unsaved-text b { font-weight: 600; }
.cb-unsaved-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cb-link-btn {
  background: none;
  border: none;
  padding: 4px 2px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink-muted);
  text-decoration: underline;
  cursor: pointer;
}
.cb-link-btn:hover { color: var(--ink); }
.btn.cb-unsaved-save {
  padding: 7px 14px;
  font-size: 12.5px;
}

/* "inte sparat" under en KPI-siffra som räknats på osparade belopp. Under
   siffran och inte i etiketten, så etiketten inte klipps på smala skärmar -
   och eftersom alla KPI-rutor sträcks till samma höjd hamnar siffrorna
   fortfarande på samma rad. */
.kpi-unsaved {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.kpi-unsaved[hidden] { display: none; }

/* Hänvisningen till budgetförslagen i periodbytesrutorna. Medvetet grå och
   inte guld - två guldrader i följd gör att ingen av dem sticker ut. */
.budget-suggest-hint {
  margin: 10px 0 0;
  padding: 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.budget-suggest-hint b { color: var(--ink); font-weight: 600; }
.budget-suggest-hint[hidden] { display: none; }
.cb-row-remaining {
  color: var(--ink-muted);
  background: none;
  border: none;
  padding: 2px 4px;
  margin: -2px -4px;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border-radius: 4px;
}
.cb-row-remaining.cb-row-over { color: var(--rust); font-weight: 600; }
.cb-row-edit-trigger:hover { background: var(--hairline); }
.cb-row-edit-pencil { color: var(--gold); display: inline-flex; vertical-align: -1px; }
.cb-row-set-budget-link {
  background: none;
  border: none;
  color: var(--gold);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 4px;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.cb-row-set-budget-link:hover { background: var(--hairline); }
.cb-row-editing { color: var(--ink); display: flex; align-items: center; gap: 5px; cursor: default; }
.cb-row-inline-input {
  width: 60px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  padding: 3px 6px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}
.cb-row-remove {
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
}
.cb-row-remove:hover { color: var(--rust); }

.category-budget-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  flex-wrap: wrap;
  gap: 10px;
}
.category-budget-add-wrap { position: relative; }
#categoryBudgetAddBtn {
  background: none;
  border: 1px dashed var(--hairline-strong, var(--hairline));
  color: var(--ink-muted);
}

.cat-list-header {
  display: grid;
  grid-template-columns: 24px 16px 1fr 74px 74px 64px;
  gap: 10px;
  padding: 0 8px 6px;
}
.cat-list-header span {
  font-size: 10.5px;
  color: var(--ink-muted);
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.cat-row {
  display: grid;
  grid-template-columns: 24px 16px 1fr 74px 74px 64px;
  gap: 10px;
  align-items: center;
  padding: 9px 8px;
  border-radius: 6px;
}
.cat-row.cat-row-selected { background: var(--paper-dim); }
.cat-row-checkbox { width: 16px; height: 16px; accent-color: var(--forest); cursor: pointer; }
.cat-row-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.cat-row-name-link {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--gold-dark, #8A6420);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font-family: 'IBM Plex Sans', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-row-name-link:hover { color: var(--ink); }
.cat-row-stat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-align: right;
  color: var(--ink-muted);
}
.cat-row.cat-row-selected .cat-row-stat { color: var(--ink); }
.cat-row-stats-mobile { display: none; }

@media (max-width: 640px) {
  .cat-list-header { display: none; } /* kolumnrubrikerna ger inget värde när siffrorna ändå staplas under namnet på mobil */
  .cat-row {
    grid-template-columns: 24px 16px 1fr;
    grid-template-areas:
      "checkbox dot name"
      "spacer1 spacer2 stats";
    row-gap: 3px;
  }
  .cat-row-checkbox { grid-area: checkbox; }
  .cat-row-dot { grid-area: dot; }
  .cat-row-name-link { grid-area: name; white-space: normal; } /* fullt kategorinamn får plats, radbryter hellre än klipps av */
  .cat-row > .cat-row-stat { display: none; } /* desktopversionens tre separata grid-celler döljs - mobilversionen nedan tar över */
  .cat-row-stats-mobile {
    grid-area: stats;
    display: block;
    font-size: 11.5px;
    color: var(--ink-muted);
  }
  .cat-row-stats-mobile .cat-row-stat {
    display: inline;
    font-size: 11.5px;
    text-align: left;
  }
  .cat-row-stats-mobile .cat-row-stat::before { content: ' · '; }
  .cat-row-stats-mobile .cat-row-stat:first-child::before { content: ''; }
  .cat-row.cat-row-selected .cat-row-stats-mobile .cat-row-stat { color: var(--ink); }
}