/* ==========================================================================
   P&L-analys
   Rapporten är huvudpersonen. Allt annat — verktygsrad, menyer, paneler —
   håller sig lågt och lämnar plats åt tio kolumner siffror.

   1  Tokens och tema
   2  Grundskal och topprad
   3  Meny och popovers
   4  Verktygsrad och formulärdelar
   5  Knappar
   6  Paneler, notiser, nyckeltal
   7  Rapporttabellen
   8  Vylägen (budget, import, simulering)
   8b Huvudbok: modal och kontokoppling
   9  Rörelse
   9b Diagram (modal)
   10 Mobil och utskrift
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ------------------------------------------------- 1 Tokens och tema --- */

:root {
  --canvas: #f1f4f7;
  --canvas-deep: #e6ebf0;
  --surface: #ffffff;
  --surface-alt: #f7f9fb;
  --surface-sunk: #eef2f6;
  --rule: #e0e6ec;
  --rule-strong: #c3ceda;

  --text: #101c26;
  --text-soft: #3d4d5b;
  --muted: #6b7f8e;
  --muted-soft: #93a5b3;

  --ink: #101c26;
  --ink-soft: #1b2a36;
  --on-ink: #eef4f8;

  --accent: #0a7d5b;
  --accent-hot: #0aa075;
  --accent-deep: #024734;
  --accent-soft: #dbf1e7;

  --pos: #0d7d5f;
  --pos-soft: #e2f4ee;
  --neg: #c0402f;
  --neg-soft: #fbe9e5;
  --warn: #9a6a12;
  --warn-soft: #fbf1dc;
  --info: #3a84c9;
  --info-soft: #e3eefb;

  --sec-sales: #0a7d5b;
  --sec-cos: #3a6da0;
  --sec-controllable: #6a58a8;
  --sec-noncontrollable: #9a6a12;
  --sec-nonproduct: #5a7a50;
  --sec-ga: #8a6350;
  --sec-result: #101c26;

  --shadow-sm: 0 1px 2px rgba(16, 28, 38, .06), 0 1px 1px rgba(16, 28, 38, .04);
  --shadow-md: 0 4px 14px rgba(16, 28, 38, .08), 0 1px 3px rgba(16, 28, 38, .05);
  --shadow-lg: 0 18px 46px rgba(16, 28, 38, .16), 0 2px 8px rgba(16, 28, 38, .06);
  --ring: 0 0 0 3px rgba(10, 125, 91, .22);

  --sb-thumb: #c3ceda;
  --sb-thumb-hover: #93a5b3;
  --sb-track: transparent;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --topbar-h: 54px;
  --toolbar-h: 50px;

  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ease: cubic-bezier(.22, .78, .26, 1);
}

[data-theme='dark'] {
  --canvas: #0a1015;
  --canvas-deep: #070c10;
  --surface: #121b22;
  --surface-alt: #17222b;
  --surface-sunk: #0f171d;
  --rule: #24313c;
  --rule-strong: #3a4a57;

  --text: #e7eef4;
  --text-soft: #c2d0da;
  --muted: #8ba0af;
  --muted-soft: #6b8092;

  --ink: #060b0f;
  --ink-soft: #101a21;
  --on-ink: #e7eef4;

  --accent: #18b98c;
  --accent-hot: #2ed6a3;
  --accent-deep: #0c8f68;
  --accent-soft: #0e2b21;

  --pos: #2bc79a;
  --pos-soft: #12302a;
  --neg: #f0705c;
  --neg-soft: #341915;
  --warn: #e0aa48;
  --warn-soft: #33280f;
  --info: #5aa8e8;
  --info-soft: #14293b;

  --sec-sales: #18b98c;
  --sec-cos: #6ea8e0;
  --sec-controllable: #a793e8;
  --sec-noncontrollable: #e0aa48;
  --sec-nonproduct: #8fc084;
  --sec-ga: #cf9d85;
  --sec-result: #e7eef4;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .45);
  --shadow-lg: 0 22px 54px rgba(0, 0, 0, .6);
  --ring: 0 0 0 3px rgba(24, 185, 140, .28);

  --sb-thumb: #34434f;
  --sb-thumb-hover: #4c5f6d;
  --sb-track: transparent;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html { background: var(--canvas); }

body {
  font-family: var(--sans);
  background: var(--canvas);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent-soft); color: var(--accent-deep); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

/*
 * Temaanpassade scrollbars. Rapportens "Per enhet" gör sidan bredare än
 * fönstret (se .ledger--units) så webbläsarens egen horisontella scrollbar
 * blir synlig hela tiden — den, och alla inre scrollrutor (modaler,
 * enhetsväljaren, rutnäten), ska matcha temat i stället för OS:ets grådask.
 * WebKit/Blink via ::-webkit-scrollbar, Firefox via scrollbar-color. Tunn
 * pränt med genomskinlig kant på tummen ger en indragen, rundad greppyta.
 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--sb-track); }
::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--sb-thumb-hover);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* ------------------------------------------ 2 Grundskal och topprad --- */

.shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
}

.topbar__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar__right { display: flex; align-items: center; gap: 10px; }

.menubtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 13px 0 11px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms var(--ease);
}

.menubtn:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-md); }
.menubtn:active { transform: scale(.97); }

.menubtn__bars { display: grid; gap: 3px; width: 15px; }
.menubtn__bars i {
  display: block; height: 1.8px; border-radius: 2px; background: currentColor;
  transition: transform 220ms var(--ease), opacity 160ms var(--ease);
  transform-origin: center;
}
.menubtn__bars i:nth-child(2) { width: 70%; }
.menubtn[aria-expanded='true'] .menubtn__bars i:nth-child(1) { transform: translateY(4.8px) rotate(45deg); }
.menubtn[aria-expanded='true'] .menubtn__bars i:nth-child(2) { opacity: 0; }
.menubtn[aria-expanded='true'] .menubtn__bars i:nth-child(3) { transform: translateY(-4.8px) rotate(-45deg); }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.brand__logo {
  width: 30px; height: 30px;
  border-radius: 9px;
  object-fit: contain;
  flex: none;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
}

.brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.brand__title { font-size: 15px; font-weight: 620; letter-spacing: -.01em; }
.brand__sub { font-size: 11.5px; color: var(--muted); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-family: var(--mono);
  color: var(--muted);
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  white-space: nowrap;
}

.dot, .rail__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted-soft); flex: none;
}
.dot.is-ok, .rail__dot.is-ok {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: pulse 2.6s var(--ease) infinite;
}
.dot.is-down, .rail__dot.is-down { background: var(--neg); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.page {
  padding: 20px 22px 56px;
  padding-left: max(22px, env(safe-area-inset-left));
  padding-right: max(22px, env(safe-area-inset-right));
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  flex: 1;
}

.page--wide { max-width: none; padding: 0 14px 28px; }

.page__head { margin-bottom: 18px; }
.page__eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 4px;
}
.page__title { font-size: 24px; font-weight: 650; letter-spacing: -.02em; margin: 0; }
.page__lede { color: var(--muted); margin: 6px 0 0; max-width: 62ch; }

/* --------------------------------------------- 3 Meny och popovers --- */

.menupop {
  position: absolute;
  top: calc(var(--topbar-h) - 6px);
  left: 12px;
  z-index: 90;
  width: 292px;
  padding: 7px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  transform-origin: top left;
  transition: opacity 170ms var(--ease), transform 200ms var(--ease);
}

.menupop.is-open { opacity: 1; transform: none; }

.menupop__group { padding: 4px; }
.menupop__group + .menupop__group { border-top: 1px solid var(--rule); margin-top: 4px; }
.menupop__heading {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-soft); margin: 4px 6px 8px; font-family: var(--mono);
}

.menuitem {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  background: none;
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background 140ms var(--ease), transform 140ms var(--ease);
}

.menuitem:hover { background: var(--surface-sunk); }
.menuitem:active { transform: scale(.985); }

.menuitem[aria-current='page'] { background: var(--accent-soft); }
.menuitem[aria-current='page'] .menuitem__icon { color: var(--accent-deep); }
.menuitem[aria-current='page'] .menuitem__label { color: var(--accent-deep); }

.menuitem__icon {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 9px;
  background: var(--surface-sunk);
  color: var(--muted);
}
.menuitem[aria-current='page'] .menuitem__icon { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.menuitem__icon svg { width: 15px; height: 15px; }

.menuitem__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.menuitem__label { font-size: 14px; font-weight: 560; }
.menuitem__sub { font-size: 11.5px; color: var(--muted); }

.popwrap { position: relative; display: inline-flex; }

.pop {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 70;
  min-width: 210px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transform-origin: top left;
  transition: opacity 160ms var(--ease), transform 180ms var(--ease);
}

.popwrap.is-right .pop { left: auto; right: 0; transform-origin: top right; }
.pop.is-open { opacity: 1; transform: none; }

.pop__caret {
  width: 0; height: 0; margin-left: 2px;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .55;
  transition: transform 180ms var(--ease);
}
[aria-expanded='true'] .pop__caret { transform: rotate(180deg); }

.pop__heading {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-soft); margin: 4px 8px 6px; font-family: var(--mono);
}

.pop__item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  text-align: left;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  transition: background 130ms var(--ease);
}
.pop__item:hover { background: var(--surface-sunk); }
.pop__item.is-busy { opacity: .55; }

.pop__check {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; font-size: 12.5px; color: var(--muted);
  border-top: 1px solid var(--rule); margin-top: 4px;
}

/* ------------------------------ 4 Verktygsrad och formulärdelar --- */

.toolbar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 50;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 8px 0 9px;
  margin-bottom: 6px;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.toolbar__grow { flex: 1; }
.toolbar__sep { width: 1px; align-self: stretch; background: var(--rule); margin: 2px 2px; }

.toolfield { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.toolfield__label {
  font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted-soft); font-family: var(--mono); padding-left: 2px;
  min-height: 12px;
}
.toolfield__body { display: inline-flex; align-items: center; gap: 6px; }
.toolfield__dash { color: var(--muted-soft); font-size: 12px; }

/*
 * Scrollar med sidan (medvetet INTE sticky) — bara tabellens egna rubrikrader
 * fastnar under toppbaren, se .ledger .lg-group th. Budgetvyn sätter därför
 * --toolbar-h till 0.
 */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: flex-end;
  padding: 10px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  margin: 0 -22px 10px;
}

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field__label {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 550;
}
.field__row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.spacer { flex: 1; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

input[type='text'], input[type='email'], input[type='password'], input[type='number'], input[type='date'], select, textarea {
  height: 34px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--text);
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
  max-width: 100%;
}

textarea { height: auto; padding: 8px 10px; }

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 15px, calc(100% - 9px) 15px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

input:hover, select:hover, textarea:hover { border-color: var(--rule-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

input[type='checkbox'] { accent-color: var(--accent); width: 15px; height: 15px; }

.segment {
  display: inline-flex;
  padding: 2px;
  background: var(--surface-sunk);
  border: 1px solid var(--rule);
  border-radius: 9px;
  gap: 2px;
}

.segment--full { display: flex; width: 100%; }
.segment--full .segment__btn { flex: 1; }

.segment__btn {
  border: 0;
  background: none;
  color: var(--muted);
  padding: 5px 11px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: color 140ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease);
}

.segment__btn:hover { color: var(--text); }
.segment__btn[aria-pressed='true'] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* Enhetsväljaren */

.unitpick { position: relative; }

.unitpick__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 11px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13.5px;
  transition: border-color 140ms var(--ease);
  max-width: 220px;
}
.unitpick__toggle:hover { border-color: var(--rule-strong); }
.unitpick__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unitpick__count {
  font-family: var(--mono); font-size: 11px;
  background: var(--accent-soft); color: var(--accent-deep);
  padding: 1px 6px; border-radius: 999px; flex: none;
}

.unitpick__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 70;
  min-width: 268px;
  max-height: 340px;
  overflow: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  animation: popIn 180ms var(--ease) both;
}

.unitpick__bulk { display: flex; gap: 6px; padding: 2px 2px 7px; border-bottom: 1px solid var(--rule); margin-bottom: 5px; }

.unitpick__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13.5px;
  transition: background 130ms var(--ease);
}
.unitpick__item:hover { background: var(--surface-sunk); }
.unitpick__code {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  min-width: 34px;
}

/* ------------------------------------------------------ 5 Knappar --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 140ms var(--ease), border-color 140ms var(--ease),
              background 140ms var(--ease), box-shadow 140ms var(--ease);
}

.btn:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-sm); }
.btn:active { transform: scale(.975); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn--primary {
  background: linear-gradient(160deg, var(--accent-hot), var(--accent));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 32%, transparent);
}
.btn--primary:hover { box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 42%, transparent); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn--ghost:hover { background: var(--surface-sunk); color: var(--text); }

.btn--danger { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 30%, var(--rule)); }
.btn--danger:hover { background: var(--neg-soft); }

.btn--sm { height: 30px; padding: 0 10px; font-size: 12.5px; }

.btn[aria-pressed='true'] {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent-deep);
}

.btn-group { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------ 6 Paneler, notiser, nyckeltal --- */

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.panel--raised { box-shadow: var(--shadow-lg); }

/* Loggan ovanför inloggnings- och registreringspanelerna (authPanel i app.js). */
.auth__logo {
  display: block;
  width: 104px; height: 104px;
  margin: 0 auto 20px;
  border-radius: 24px;
  box-shadow: var(--shadow-md);
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-alt);
}

.panel__title { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.panel__note { font-size: 12.5px; color: var(--muted); margin: 0; }
.panel__body { padding: 16px; }

/*
 * position+z-index krävs här: `.reportbody > *` ger varje direkt barn en
 * fade-in-animation, och en animerad opacitet gör barnet till en egen
 * stapelkontext. Utan ett eget z-index hamnar den kontexten på "auto", och då
 * vinner nästa syskon (tabellrutan, som kommer efter i koden) ritordningen —
 * en popover som öppnas här skulle annars rita sig UNDER tabellen och gå att
 * varken se eller klicka på.
 */
.subbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 8px 0 10px;
  position: relative; z-index: 1;
}

.notice {
  display: flex;
  gap: 9px;
  padding: 10px 13px;
  border-radius: var(--r-md);
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--muted-soft);
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 12px;
  animation: slideDown 260ms var(--ease) both;
}

.notice--ok { background: var(--pos-soft); border-color: color-mix(in srgb, var(--pos) 25%, transparent); border-left-color: var(--pos); }
.notice--warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 25%, transparent); border-left-color: var(--warn); }
.notice--err { background: var(--neg-soft); border-color: color-mix(in srgb, var(--neg) 25%, transparent); border-left-color: var(--neg); }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px;
  background: var(--surface-sunk); color: var(--muted);
}
.tag--ok { background: var(--pos-soft); color: var(--pos); }
.tag--warn { background: var(--warn-soft); color: var(--warn); }
.tag--err { background: var(--neg-soft); color: var(--neg); }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.kpi {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  animation: riseIn 380ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.kpi__label {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 5px; font-family: var(--mono);
}
.kpi__value {
  font-family: var(--mono); font-size: 21px; font-weight: 550;
  letter-spacing: -.02em; margin: 0; font-variant-numeric: tabular-nums;
}
.kpi__meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 11.5px; }
.kpi__pct { color: var(--muted); font-family: var(--mono); }
.kpi__delta { font-family: var(--mono); color: var(--muted); }
.kpi__delta.is-pos { color: var(--pos); }
.kpi__delta.is-neg { color: var(--neg); }

.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 56px 20px; text-align: center; color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-lg);
  animation: riseIn 320ms var(--ease) both;
}
.empty__title { font-size: 16px; font-weight: 600; color: var(--text); margin: 0; }
.empty p { margin: 0; max-width: 46ch; }
.empty .btn { margin-top: 10px; }

.spinner {
  display: inline-block;
  width: 17px; height: 17px;
  border: 2px solid var(--rule-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

.skeleton { display: grid; gap: 6px; padding: 10px 0; }
.skeleton__row {
  height: 20px;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-sunk) 25%, var(--surface-alt) 50%, var(--surface-sunk) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.4s linear infinite, fadeIn 300ms var(--ease) both;
  animation-delay: 0s, calc(var(--i, 0) * 28ms);
}

.toast-stack {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 200;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(400px, calc(100vw - 32px));
}

.toast {
  padding: 11px 14px;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--r-md);
  font-size: 13px;
  box-shadow: var(--shadow-lg);
  animation: toastIn 300ms var(--ease) both;
  white-space: pre-line;
}
.toast--ok { background: var(--accent-deep); }
.toast--err { background: var(--neg); color: #fff; }

/* ------------------------------------------- 7 Rapporttabellen --- */

.ledger-wrap {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: auto;
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
  --grouph: 32px;
}

/*
 * Rapporten och budgeten scrollar med SIDAN, inte i en egen inre ruta — annars
 * blir det som att jobba i en iframe: man måste scrolla ner till rutan först,
 * och sedan scrolla en gång till inuti den. Med sidscroll håller webbläsarens
 * egen scrollbar reda på var man är, och "scrolla till botten" tar en hela
 * vägen till sista raden på en gång.
 *
 * Det kostar en sak: en `overflow`-ruta (auto/hidden/scroll, oavsett axel) gör
 * ALLTID sin egen ruta till golvet för `position: sticky` inuti den — då
 * fastnar rubrikraderna i den lilla rutan i stället för i sidan. Därför är
 * `.ledger-wrap--grid` explicit `overflow: visible`, och rubrikens/PAC-radens
 * sticky-offset räknas i stället mot toppbaren och verktygsraden (se
 * `.lg-group th`, `.lg-cols th` nedan) — samma mönster som toppbaren och
 * verktygsraden/filtren redan använder för sig själva.
 */
.ledger-wrap--grid {
  overflow: visible;
  max-height: none;
  /*
   * Hugger åt sig exakt tabellens rendrade bredd i stället för att sträcka ut
   * sig över hela den obegränsade sidan (.page--wide har medvetet ingen
   * max-width) — annars blir kortet runt tabellen mycket bredare än
   * innehållet så fort en kolumngrupp döljs (se "Kolumner"-filtret i
   * report.js) eller tabellen bara har få kolumner, som i budgetvyn.
   * `.ledger--grid` under har width:100% för att fylla EN given bredd
   * (fast layout, se nedan) — den ignoreras här av webbläsarens
   * shrink-to-fit-beräkning, så tabellen får sin egna, riktiga bredd.
   */
  width: fit-content;
  max-width: 100%;
}

/* Per enhet ska även fortsatt fylla sidan — se .ledger--units nedan (öppen bredd, en till trettio enheter). */
.ledger-wrap--units { width: 100%; }

/* Tätheten styr hela tabellen. "Allt på en skärm" är gjord för 1920x1080. */
.density-roomy { --row-h: 28px; --fs: 13px; --pad-y: 5px; --pad-x: 10px; }
.density-compact { --row-h: 21px; --fs: 12px; --pad-y: 2px; --pad-x: 8px; }
.density-dense { --row-h: 13px; --fs: 10.2px; --pad-y: 0px; --pad-x: 6px; line-height: 1.25; }
.density-dense .row-header td { padding-top: 0; padding-bottom: 0; }
.density-dense .row-total td { border-bottom-width: 2px; }
.density-dense .lg-cols th { padding-bottom: 2px; padding-top: 2px; }

/* I tätaste läget viker vi undan allt som stjäl höjd från tabellen. */
body[data-density='dense'] .toolfield__label { display: none; }
body[data-density='dense'] .toolfield { flex-direction: row; align-items: center; }
body[data-density='dense'] .legend { display: none; }
body[data-density='dense'] .toolbar { align-items: center; padding: 6px 0 7px; }

.density-dense .row-spacer { display: none; }
.density-dense .th-group__kicker { display: none; }

.ledger {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs, 12px);
  font-variant-numeric: tabular-nums;
}

.ledger--grid { table-layout: fixed; }

/*
 * Budgetens månadstabell har inte rapportens <colgroup>/<col>-bredder att
 * luta sig mot (se kommentaren vid .cell-label nedan), så den behöver ett
 * bottengolv för att inte klämmas ihop för smalt. Rapportens Sammanställt-
 * tabell (samma .ledger--grid) har egna kolumnbredder och ska tvärtom kunna
 * krympa fritt när "Kolumner"-filtret döljer grupper — därför ligger
 * min-bredden bara på budgettabellens egen klass, inte på .ledger--grid.
 */
.ledger--budgetmonth { min-width: 1320px; }

.c-label { width: 280px; }
.c-amt { width: 96px; }
.c-pct { width: 62px; }

/*
 * Budgettabellen har ingen <colgroup> (kolumnantalet varierar med om
 * jämförelseåret visas), så table-layout:fixed tar annars bredden från
 * rubrikcellen "Benämning" i stället — sätts explicit här så att långa
 * kontonamn (och budgetens prick+switch bredvid dem) får plats utan att
 * klippas av.
 */
.ledger--grid .cell-label { width: 280px; }

/*
 * Resultatrapporten (Sammanställt) har inga prickar/switchar i Benämning-
 * cellen som budgeten har — 280px lämnar mycket luft för de flesta radernas
 * kortare namn. Smalare hugger åt sig utrymme åt siffrorna i stället.
 */
.reportbody .ledger--grid .cell-label { width: 222px; }

/*
 * Ovanstående cellbredd räckte inte ensam: rapporttabellen har en riktig
 * <colgroup> (till skillnad från budgetens, se ovan), och vid
 * table-layout:fixed är det kolumnens <col>-bredd som styr den faktiska
 * renderade bredden, inte cellens — `.c-label` (280px, delad med
 * budgettabellen som saknar egen <col>-klass) vann annars alltid över
 * `.cell-label` här och gav kvarvarande "luft" i Benämning trots regeln
 * ovan. Nollställ kolumnens bredd explicit så cellreglens 222px gäller.
 */
.reportbody .ledger--grid col.c-label { width: 222px; }

/*
 * Per enhet: kolumnantalet är öppet (en till trettio enheter, dubblat om
 * föregående år är påslaget), så tabellen får inte table-layout:fixed — då
 * skulle webbläsaren tvinga in alla kolumner i sidans bredd i stället för
 * att låta tabellen bli bredare än fönstret. Med auto-layout (default) och
 * omkopplingsfritt innehåll (`.ledger td` är redan white-space:nowrap) blir
 * tabellen så bred den behöver, och sidan får sin egen horisontella
 * scrollbar — precis det som gör att sticky vänster (Benämning) och sticky
 * höger (Totalt) nedan fastnar mot FÖNSTRETS kanter medan man drar i sidled,
 * samma trick som redan används för sticky uppåt/nedåt i `.ledger-wrap--grid`.
 */
.ledger--units { width: auto; min-width: 100%; }
.ledger--units .c-label { width: 220px; }

/*
 * Totalkolumnen ska alltid synas, oavsett hur långt man scrollat i sidled.
 * `right: 0` utan någon egen scrollruta (se `.ledger-wrap--grid` ovan) gör
 * att den fastnar mot höger fönsterkant, symmetriskt med hur Benämning
 * redan fastnar mot vänster.
 *
 * VIKTIGT: Totalgruppen är två (eller fyra, med föregående år påslaget)
 * separata celler i varje rad — inte en enda. Om alla fick `right: 0` skulle
 * de bara lägga sig ovanpå varandra i högerkanten (utfallskolumnen "försvinner"
 * bakom %-kolumnen). Varje cell behöver därför sitt EGET högeroffset — 0 för
 * den sista, bredden av kolumnerna till höger om sig för de övriga — vilket
 * report.js räknar ut och sätter som inline `style="right:…"` per cell.
 * Klassen sköter bara det som är lika för alla: sticky, bakgrund, linjen mot
 * enheterna. Radrubrikcellen i grupprubriken (som spänner över hela
 * Totalt-blocket i en enda cell) har inget sådant behov och får `right:0`
 * på samma inline-vis för tydlighetens skull.
 */
.col-unittotal {
  position: sticky;
  z-index: 11;
  font-weight: 600;
  background: var(--surface-alt);
  box-shadow: inset 1.5px 0 0 var(--rule-strong);
}
.ledger thead th.col-unittotal { z-index: 24; background: var(--surface-alt); }
.ledger-wrap--grid tr[data-code='NET_INCOME'] > td.col-unittotal,
.ledger tfoot tr.foot-pac > td.col-unittotal { z-index: 17; }

.ledger thead th {
  position: sticky;
  z-index: 20;
  background: var(--surface);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  padding: 5px var(--pad-x, 8px);
  color: var(--text-soft);
}

/*
 * Fastnar mot sidan, precis under toppbaren och den (nu också fast
 * förankrade) verktygsraden/filterraden ovanför — inte mot någon egen
 * scrollruta, se kommentaren vid .ledger-wrap--grid ovan.
 */
.ledger .lg-group th { top: calc(var(--topbar-h) + var(--toolbar-h)); z-index: 22; }
.ledger .lg-cols th {
  top: calc(var(--topbar-h) + var(--toolbar-h) + var(--grouph, 32px));
  font-size: calc(var(--fs, 12px) - .5px);
  color: var(--muted);
  border-bottom: 1.5px solid var(--rule-strong);
  padding-bottom: 4px;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -.01em;
}

/*
 * Fastnar vänster, samma kant som `.cell-label` i tabellkroppen. Måste rikta
 * in sig på klassen, inte `:first-child` — kolumnrubrikraden under
 * grupprubriken (`.lg-cols`) har ingen egen Benämning-cell (den ärver plats
 * via rowspan från raden ovanför), så dess FÖRSTA cell är i själva verket
 * första datakolumnen, som annars felaktigt skulle fastna i vänsterkanten.
 */
.ledger thead th.cell-label { text-align: left; left: 0; z-index: 24; }

.ledger .th-group, .th-group {
  text-align: center;
  padding: 4px 8px 3px;
  border-bottom: 1px solid var(--rule);
}
.th-group__kicker {
  display: block;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-soft); font-family: var(--mono); font-weight: 500;
}
.th-group__label { display: block; font-size: calc(var(--fs, 12px) + .5px); letter-spacing: -.01em; }

.th-group--cur { box-shadow: inset 0 -2.5px 0 var(--ink); }
.th-group--ytd { box-shadow: inset 0 -2.5px 0 var(--accent); }
[data-theme='dark'] .th-group--cur { box-shadow: inset 0 -2.5px 0 var(--rule-strong); }

.ledger tbody tr { transition: background 120ms var(--ease); }
.ledger tbody tr:hover td { background: var(--surface-alt); }

.ledger td {
  padding: var(--pad-y, 2px) var(--pad-x, 8px);
  height: var(--row-h, 21px);
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
  background: var(--surface);
  overflow: hidden;
  text-overflow: ellipsis;
}

.ledger td.cell-label, .cell-label {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 10;
  font-family: var(--sans);
  color: var(--text-soft);
}

.ledger-wrap--grid .cell-label { box-shadow: 1px 0 0 var(--rule); }

.cell-amt, .cell-pct, .cell-compare, .cell-diff, .col-total {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: -.03em;
}

.cell-zero, .cell-null { color: var(--muted-soft); }
.cell-pct.is-pos, .cell-diff.is-pos, .is-pos { color: var(--pos); }
.cell-pct.is-neg, .cell-diff.is-neg, .is-neg { color: var(--neg); }

/* Andel av omsättning är information, inte ett bra/dåligt-utfall — neutral färg. */
.cell-share { color: var(--muted); font-weight: 400; }

/*
 * Vertikala delare mellan kolumngrupperna — Utfall/Budget/Föreg år inom en
 * period, och period mot ackumulerat. Ligger på både head- och kroppsceller
 * så linjen går obruten genom hela tabellen, även över rubrikraderna.
 */
.col-div { box-shadow: inset 1.5px 0 0 var(--rule-strong); }
.col-div-strong { box-shadow: inset 2.5px 0 0 var(--accent); }
.ledger thead th.col-div { box-shadow: inset 1.5px 0 0 var(--rule-strong); }
.ledger thead th.col-div-strong { box-shadow: inset 2.5px 0 0 var(--accent); }

/*
 * Kolumngruppernas egna bakgrundsfärger (Utfall/Prognos/Budget/Föreg år) —
 * se "Kolumner"-filtret i report.js och forecast.js. Standardfärgen ligger i
 * var()-fallbacken (blek ton, blandad mot ytan) och gäller tills en egen färg
 * väljs, då vyn sätter --grp-*-bg som inline style på .ledger-wrap med samma
 * color-mix(), fast mot den valda färgen. Utfall och Prognos är tonlösa som
 * standard (blandning mot sig själv) så bara Budget och Föreg år sticker ut
 * direkt — den första kolumngruppen är vyns utgångspunkt och behöver ingen
 * markering för att hittas.
 *
 * Tonen ska gälla HELA kolumnen, inte bara rubriken: både thead-cellerna
 * och tabellkroppens celler. `.ledger td` (och `.row-total td`) sätter en
 * egen surface-bakgrund med samma specificitet som `.col-grp-*`, så
 * kroppsreglerna måste kvalificeras (`.ledger td.col-grp-*`) för att vinna.
 */
.ledger thead th.col-grp-actual,
.ledger td.col-grp-actual { background: var(--grp-actual-bg, var(--surface)); }
.ledger thead th.col-grp-forecast,
.ledger td.col-grp-forecast { background: var(--grp-forecast-bg, var(--surface)); }
.ledger thead th.col-grp-budget,
.ledger td.col-grp-budget { background: var(--grp-budget-bg, color-mix(in srgb, #3a6da0 8%, var(--surface))); }
.ledger thead th.col-grp-prior,
.ledger td.col-grp-prior { background: var(--grp-prior-bg, color-mix(in srgb, #9a6a12 8%, var(--surface))); }

/* Hovern behåller kolumntonen och lägger bara till en aning kontrast. */
.ledger tbody tr:hover td.col-grp-actual,
.ledger tbody tr:hover td.col-grp-forecast,
.ledger tbody tr:hover td.col-grp-budget,
.ledger tbody tr:hover td.col-grp-prior { filter: brightness(0.97); }

/*
 * De sticky summeringsraderna (NET INCOME längst ned, PAC-klonen i tfoot)
 * har en egen ogenomskinlig surface-alt-botten som annars bryter färgbandet
 * — blanda kolumntonen mot surface-alt så bandet går obrutet hela vägen.
 */
.ledger-wrap--grid tr[data-code='NET_INCOME'] > td.col-grp-actual,
.ledger tfoot tr.foot-pac > td.col-grp-actual { background: var(--grp-actual-bg, var(--surface-alt)); }
.ledger-wrap--grid tr[data-code='NET_INCOME'] > td.col-grp-forecast,
.ledger tfoot tr.foot-pac > td.col-grp-forecast { background: var(--grp-forecast-bg, var(--surface-alt)); }
.ledger-wrap--grid tr[data-code='NET_INCOME'] > td.col-grp-budget,
.ledger tfoot tr.foot-pac > td.col-grp-budget { background: var(--grp-budget-bg, color-mix(in srgb, #3a6da0 8%, var(--surface-alt))); }
.ledger-wrap--grid tr[data-code='NET_INCOME'] > td.col-grp-prior,
.ledger tfoot tr.foot-pac > td.col-grp-prior { background: var(--grp-prior-bg, color-mix(in srgb, #9a6a12 8%, var(--surface-alt))); }

.colorswatch {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 24px; padding: 0; flex: none;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: none; cursor: pointer;
}
.colorswatch::-webkit-color-swatch-wrapper { padding: 2px; }
.colorswatch::-webkit-color-swatch { border: 0; border-radius: 2px; }
.colorswatch::-moz-color-swatch { border: 0; border-radius: 2px; }

/*
 * NET INCOME är sista raden i tabellen och har per definition inget
 * innehåll under sig alls, så den kan fastna direkt vid fönstrets
 * nederkant (bottom:0) med vanlig CSS position:sticky — det fungerar
 * tillförlitligt eftersom den är den bokstavligen sista raden.
 */
.ledger-wrap--grid tr[data-code='NET_INCOME'] > td {
  position: sticky;
  bottom: 0;
  z-index: 15;
  background: var(--surface-alt);
}
.ledger-wrap--grid tr[data-code='NET_INCOME'] > td.cell-label { z-index: 16; }

/*
 * PROFIT AFTER CONTROLLABLES ligger mitt i tabellen (inte sist), och en rad
 * där kan INTE göras pålitligt sticky med vanlig CSS — den saknar
 * garanterat tillräckligt med innehåll kvar i sin scrollriktning för att
 * hinna "släppa" och fastna (bekräftat i praktiken: den bara följer med
 * scrollningen rakt av, den låser aldrig fast).
 *
 * Lösningen: PAC-raden i själva tabellkroppen är en helt vanlig rad, precis
 * som alla andra — den finns bara på ETT ställe, aldrig dubblerad. Utöver
 * den finns en identisk KLONRAD i <tfoot> (tabellens sista sektion, som
 * webbläsaren alltid behandlar som "sist" oavsett hur många rader <tbody>
 * har — samma tillförlitliga position som NET INCOME har naturligt).
 * Klonraden är sticky precis ovanför NET INCOME (en radhöjd upp), men
 * visas bara (via JS, en IntersectionObserver) när den RIKTIGA PAC-raden
 * inte syns i det säkra området mellan filterraden och fönstrets botten —
 * så fort den riktiga raden scrollar in i vy döljs klonen igen. Resultatet:
 * PAC "fastnar kvar" nära sin ordinarie plats utan att någonsin synas två
 * gånger samtidigt.
 */
.ledger tfoot tr.foot-pac > td {
  position: sticky;
  bottom: calc(var(--row-h, 21px) + 4px);
  z-index: 15;
  background: var(--surface-alt);
}
.ledger tfoot tr.foot-pac > td.cell-label { z-index: 16; }
.ledger tfoot tr.foot-pac.is-hidden { display: none; }

/*
 * Budget: en liten prick vid kontonamnet visar om den procentuella/beloppet
 * som "kopieras vidare" är satt uttryckligen den här månaden (grön) eller
 * ärvt från en tidigare månad (röd) — och en switch, som bara syns vid
 * januari, styr om det är andelen av oms eller beloppet som ska kopieras
 * framåt för det kontot resten av året.
 */
.cell-label--carry {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cell-label--carry .cell-label__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carry-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted-soft);
}
.carry-dot--set { background: var(--pos); }
.carry-dot--carried { background: var(--info); }
.carry-dot--none { background: var(--neg); }

.carry-switch {
  flex: none;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  padding: 2px 5px;
  cursor: pointer;
}
.carry-switch:hover { border-color: var(--accent); color: var(--text); }
.carry-switch[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--surface); }

/*
 * Kopieringsläge (kr/%) och låsläge (%/kr) kan ha ett eget undantag för en
 * enhet (se carrySwitchTitle/lockSwitchTitle i budget.js för texten som
 * förklarar det) — men det visas bara i knappens title-tooltip, inte som en
 * egen prick. En extra prick vid knappen skulle lätt kunna förväxlas med
 * kopieringsprickens gröna "satt uttryckligen den här månaden", trots att
 * ett klick på en av de här switcharna aldrig sätter något värde alls.
 */

/*
 * Låsläge (%/kr): en egen liten badge framför kontonamnet, skild från
 * kopieringsprick+switch ovan. Styr vad som händer med KONTOT när NET SALES
 * ändras för samma månad (se pl_budget_apply_lock_recompute() i
 * api/routes/budget.php) — helt separat begrepp från "kopiera vidare
 * månad för månad". Syns alla månader (inte bara januari), eftersom en
 * låsning kan behöva ändras mitt i året.
 */
.lock-switch {
  flex: none;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  padding: 2px 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.lock-switch:hover { border-color: var(--sec-result); color: var(--text); }
.lock-switch[aria-pressed='true'] { background: var(--sec-result); border-color: var(--sec-result); color: var(--surface); }

/*
 * Budget, Enhet-läget: månadsraden + Hämta/Inställningar/Mer bryts ut till en
 * egen underrad i verktygsraden så att månadsknapparna (som viker sig till
 * två rader) får plats BREDVID de sektionerna i stället för att lämna en tom
 * halv rad efter sig.
 */
.filters__subrow {
  flex-basis: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: flex-end;
}

/*
 * Månadsraden ersätter den gamla månadsrullgardinen. En knapp per månad,
 * färgad efter "Kvittera klar"-läget — röd = ej klarmarkerad, grön = klar.
 * Klick byter månad; den valda månaden får en tydlig ram. Bredvid ligger
 * den snygga toggeln som kvitterar den månad man står på. max-width tvingar
 * de tolv knapparna till två rader så fältet blir kompakt.
 */
.budget-months {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 560px;
}

.budget-month {
  --bm: var(--neg);
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  border: 1px solid color-mix(in srgb, var(--bm) 38%, var(--rule));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bm) 9%, var(--surface));
  color: var(--text-soft);
  font: inherit;
  font-size: 12.5px;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms var(--ease), border-color 150ms var(--ease),
    box-shadow 150ms var(--ease), color 150ms var(--ease);
}
.budget-month::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bm);
}
.budget-month.is-done { --bm: var(--pos); }
.budget-month:hover { border-color: var(--bm); color: var(--text); }
.budget-month.is-current {
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--bm) 55%, transparent);
}
.budget-month:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--bm) 70%, transparent);
}

/* "Kvittera [månad] klar" — en switch-styled kryssruta. */
.signoff-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px 6px 8px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  user-select: none;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.signoff-toggle:hover { border-color: var(--rule-strong); }
.signoff-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.signoff-toggle__box {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--neg) 20%, var(--surface-sunk));
  border: 1px solid color-mix(in srgb, var(--neg) 38%, var(--rule));
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.signoff-toggle__box::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 160ms var(--ease);
}
.signoff-toggle input:checked + .signoff-toggle__box {
  background: color-mix(in srgb, var(--pos) 55%, var(--surface));
  border-color: var(--pos);
}
.signoff-toggle input:checked + .signoff-toggle__box::after { transform: translateX(14px); }
.signoff-toggle input:focus-visible + .signoff-toggle__box { box-shadow: var(--ring); }
.signoff-toggle__label {
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-soft);
  white-space: nowrap;
}
.signoff-toggle input:checked ~ .signoff-toggle__label { color: var(--pos); }

/*
 * Enhetsväljaren i budgetvyn: en enhet vars alla tolv månader är
 * klarkvitterade får grön bakgrund i listan, övriga röd — så syns det direkt
 * var det finns arbete kvar. (Vissa webbläsare, bl.a. Safari på macOS,
 * ritar inte egen bakgrund på <option> — då faller den tillbaka på
 * standardutseendet, helt utan funktionsförlust.)
 */
.budget-unit-select option.opt-complete { background-color: var(--pos-soft); color: var(--pos); }
.budget-unit-select option.opt-incomplete { background-color: var(--neg-soft); color: var(--neg); }

/*
 * Prognosvyns månadsrad. En knapp per månad i året, färgad efter var siffran
 * kommer ifrån: grön = inläst utfall, blå = budget, gul = blandat mellan de
 * valda enheterna, grå = varken eller. Månaderna i det valda spannet fylls
 * i; de utanför står kvar tonade så att man ser hela året i ett svep och
 * vart gränsen mellan utfall och budget går. Klick sätter spannet.
 */
.forecast-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 2px 0 12px; }

.forecast-months { display: flex; flex-wrap: wrap; gap: 5px; }

.forecast-month {
  --fm: var(--muted-soft);
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 8px;
  border: 1px solid color-mix(in srgb, var(--fm) 34%, var(--rule));
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: inherit; font-size: 12.5px; line-height: 1;
  cursor: pointer;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}
.forecast-month::before {
  content: ''; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fm);
}
.forecast-month.is-actual { --fm: var(--pos); }
.forecast-month.is-budget { --fm: #3a6da0; }
.forecast-month.is-mixed { --fm: var(--warn); }
.forecast-month.is-in {
  background: color-mix(in srgb, var(--fm) 11%, var(--surface));
  border-color: color-mix(in srgb, var(--fm) 45%, var(--rule));
  color: var(--text);
  font-weight: 600;
}
.forecast-month:hover { border-color: var(--fm); color: var(--text); }
.forecast-month:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--fm) 70%, transparent);
}

/* Samma färgnyckel i förklaringsraden och i Källa-kolumnen under Per månad. */
.forecast-key {
  --fm: var(--muted-soft);
  display: inline-flex; align-items: center; gap: 5px;
  margin-right: 10px;
  font-size: 11.5px;
}
.forecast-key::before {
  content: ''; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fm);
}
.forecast-key.is-actual { --fm: var(--pos); }
.forecast-key.is-budget { --fm: #3a6da0; }
.forecast-key.is-mixed { --fm: var(--warn); }
.forecast-key:last-child { margin-right: 0; }

/* Tät vy: månadsraden är orientering, inte data — den viks undan med legenden. */
body[data-density='dense'] .forecast-strip { display: none; }

.row-line td { color: var(--text); }

.ledger .row-header td { text-align: left; }

.row-header td {
  background: var(--surface-sunk);
  color: var(--sec-result);
  font-weight: 600;
  font-size: calc(var(--fs, 12px) - .5px);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-top: calc(var(--pad-y, 2px) + 1px);
  padding-bottom: calc(var(--pad-y, 2px) + 1px);
}

.row-header[data-section='cos'] td { color: var(--sec-cos); }
.row-header[data-section='controllable'] td { color: var(--sec-controllable); }
.row-header[data-section='noncontrollable'] td { color: var(--sec-noncontrollable); }
.row-header[data-section='nonproduct'] td { color: var(--sec-nonproduct); }
.row-header[data-section='ga'] td { color: var(--sec-ga); }

.sectiontoggle {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; padding: 0;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer;
}
.sectiontoggle__chev {
  width: 0; height: 0;
  border-left: 4px solid currentColor;
  border-top: 3.2px solid transparent;
  border-bottom: 3.2px solid transparent;
  transition: transform 200ms var(--ease);
  opacity: .7;
}
.sectiontoggle[aria-expanded='true'] .sectiontoggle__chev { transform: rotate(90deg); }

.row-subtotal td {
  font-weight: 600;
  color: var(--text);
  border-top: 1px solid var(--rule-strong);
  border-bottom-color: transparent;
}

.row-total td {
  font-weight: 700;
  color: var(--text);
  border-top: 1.5px solid var(--rule-strong);
  border-bottom: 3px double var(--text);
  background: var(--surface-alt);
}

.row-spacer td { height: 7px; border-bottom: 0; padding: 0; background: var(--surface); box-shadow: none; }

.row-line.is-folded { display: none; }

.row-ref td { color: var(--muted); font-style: italic; }
.cell-derived { color: var(--muted); }

.col-sep { border-left: 1px solid var(--rule); }
.col-total { border-left: 1px solid var(--rule-strong); font-weight: 600; }

.varbar {
  display: inline-block; position: relative;
  width: 100%; min-width: 46px; height: 6px;
  background: var(--surface-sunk); border-radius: 3px; overflow: hidden;
}
.varbar span {
  position: absolute; top: 0; bottom: 0; left: 50%;
  border-radius: 3px;
  animation: barGrow 420ms var(--ease) both;
}
.varbar .is-pos { background: var(--pos); }
.varbar .is-neg { background: var(--neg); transform: translateX(-100%); }

.legend { margin: 7px 2px 0; font-size: 11.5px; max-width: 110ch; }

.tablist { display: inline-flex; gap: 4px; padding: 3px; background: var(--surface-sunk); border-radius: 9px; margin-bottom: 12px; }
.tab {
  border: 0; background: none; padding: 6px 13px; border-radius: 7px;
  font-size: 13px; font-weight: 550; color: var(--muted); cursor: pointer;
  transition: background 160ms var(--ease), color 140ms var(--ease);
}
.tab[aria-selected='true'] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* --------------------------------- 8 Vylägen (budget, import m.m.) --- */

.grid-wrap { overflow: auto; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface); }
.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.grid th {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface-alt); padding: 7px 8px; text-align: right;
  font-size: 11px; font-weight: 600; color: var(--muted);
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.grid th:first-child { text-align: left; left: 0; z-index: 12; }
.grid td {
  padding: 1px 4px; text-align: right; border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
  background: var(--surface); white-space: nowrap;
}
.grid td:first-child { text-align: left; position: sticky; left: 0; z-index: 6; box-shadow: 1px 0 0 var(--rule); padding-left: 10px; }

/*
 * Rutnätscellerna ska se ut som celler, inte som formulärfält. Väljaren är
 * skriven med elementnamnet för att gå före den allmänna input-stilen.
 */
input.cellinput {
  width: 100%; min-width: 86px; height: 24px; padding: 0 6px;
  text-align: right; font-family: var(--mono); font-size: 12px;
  border: 1px solid transparent; border-radius: 4px; background: transparent;
  transition: border-color 130ms var(--ease), background 130ms var(--ease), box-shadow 130ms var(--ease);
}
input.cellinput:hover { border-color: var(--rule); background: var(--surface-alt); }
input.cellinput--pct { min-width: 56px; color: var(--muted); }
input.cellinput:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: var(--ring); }

/*
 * Diskret ℹ️ intill vart och ett av de två redigerbara budgetfälten
 * (budget.js, peerInfo): vid hovring en liten ruta med de andra enheternas
 * värde för samma konto och månad — kronor vid kr-fältet, andel av oms vid
 * %-fältet. Fältet + ikonen ligger i en flexrad inuti cellen så att <td>:n
 * förblir en vanlig tabellcell och kolumnbredderna hålls. Själva rutan
 * (.peer-info__panel) läggs på <body> — se openPeerPop — eftersom
 * `.ledger td { overflow: hidden }` annars klipper bort den.
 */
.peer-info-host { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.peer-info-host > input.cellinput { min-width: 0; }

.peer-info {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  font-family: var(--sans); font-size: 9px; font-weight: 700; font-style: normal; line-height: 1;
  color: var(--muted); opacity: .34;
  cursor: help; user-select: none;
  transition: opacity 120ms var(--ease), color 120ms var(--ease);
}
.peer-info:hover { opacity: 1; color: var(--accent); }
.peer-info__mark { pointer-events: none; }

.peer-info__panel {
  position: fixed; z-index: 200; left: 0; top: 0;
  min-width: 216px; max-width: 340px; max-height: 320px; overflow-y: auto;
  padding: 8px 10px;
  text-align: left; white-space: normal; cursor: auto;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--rule-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.peer-info__head {
  margin-bottom: 6px; padding-bottom: 5px;
  border-bottom: 1px solid var(--rule);
  font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}
.peer-info__table { width: 100%; border-collapse: collapse; }
.peer-info__table td { padding: 2px 0; vertical-align: top; }
.peer-info__unit { padding-right: 12px; color: var(--text); }
.peer-info__amt { text-align: right; font-family: var(--mono); white-space: nowrap; }
.peer-info__empty { margin: 0; color: var(--muted); }

.adjlist { display: flex; flex-direction: column; gap: 8px; }
.adjrow {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 9px 10px; background: var(--surface-alt);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  animation: slideDown 220ms var(--ease) both;
}

.sim-layout { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 18px; align-items: start; }
.sim-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

.sens { display: flex; flex-direction: column; gap: 7px; }
.sens__row { display: grid; grid-template-columns: 110px 1fr 96px; gap: 10px; align-items: center; font-size: 12.5px; }
.sens__label { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }
.sens__track { height: 8px; background: var(--surface-sunk); border-radius: 4px; overflow: hidden; }
.sens__bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hot)); border-radius: 4px; animation: barGrow 460ms var(--ease) both; }
.sens__value { text-align: right; font-family: var(--mono); }

.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 34px 20px; text-align: center;
  border: 2px dashed var(--rule-strong); border-radius: var(--r-lg);
  background: var(--surface-alt); cursor: pointer;
  transition: border-color 180ms var(--ease), background 180ms var(--ease), transform 180ms var(--ease);
}
.drop:hover, .drop.is-over { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
/* Filväljaren är själva ytan — den råa knappen behöver inte synas. */
.drop input[type='file'] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.drop { position: relative; }

.drop::before {
  content: '';
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 13px 1.8px;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 25%, transparent);
  transition: box-shadow 220ms var(--ease), transform 220ms var(--ease);
}

.drop:hover::before, .drop.is-over::before {
  transform: translateY(-2px) rotate(90deg);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 14%, transparent);
}

.drop__title { font-weight: 600; font-size: 15px; margin: 0; }
.drop__hint { font-size: 12.5px; color: var(--muted); margin: 0; }

.filelist { display: flex; flex-direction: column; gap: 6px; }
.filerow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; background: var(--surface-alt);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  animation: slideDown 240ms var(--ease) both;
}
.filerow__name { font-weight: 550; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filerow__meta { font-size: 11.5px; color: var(--muted); font-family: var(--mono); white-space: nowrap; }

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mono { font-family: var(--mono); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.delta.is-pos { color: var(--pos); }
.delta.is-neg { color: var(--neg); }

/* --------------------------------- 8b Huvudbok: modal och kontokoppling --- */

/* Klickbara belopp ska se klickbara ut utan att bli en knappmatta. Understryk
   först vid hovring; annars konkurrerar tio kolumner streck med siffrorna. */

.drilltrigger {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  border-radius: 3px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color .14s ease, color .14s ease;
}

.drilltrigger:hover,
.drilltrigger:focus-visible {
  text-decoration-color: var(--accent);
  color: var(--accent-deep);
}

.drilltrigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cell-amt--drill { padding: 0; }
.cell-amt--drill .drilltrigger { display: block; width: 100%; padding: inherit; }
tr.is-drillable:hover .cell-label .drilltrigger { text-decoration-color: var(--rule-strong); }

/* Dialogen ------------------------------------------------------------- */

.modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.modal::backdrop { background: rgba(16, 28, 38, .52); backdrop-filter: blur(2px); }
body.has-modal { overflow: hidden; }

.modal__panel {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0 auto;
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px 14px 0 0;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .16s ease, transform .18s cubic-bezier(.22, .8, .3, 1);
}

.modal__panel--wide { width: min(1080px, 100%); }
.modal__panel.is-in { opacity: 1; transform: none; }
.modal__panel.is-out { opacity: 0; transform: translateY(10px); }

@media (min-width: 700px) {
  .modal__panel {
    inset: 50% 0 auto 0;
    transform: translateY(-46%);
    border-radius: 14px;
  }
  .modal__panel.is-in { transform: translateY(-50%); }
  .modal__panel.is-out { transform: translateY(-48%); }
}

.modal__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--rule);
}

.modal__titles { min-width: 0; flex: 1; }
.modal__title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.modal__sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }

.modal__close {
  appearance: none;
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  flex: none;
}

.modal__close:hover { background: var(--surface-sunk); color: var(--text); }
.modal__body { overflow: auto; padding: 4px 20px 18px; flex: 1; -webkit-overflow-scrolling: touch; }

.modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--rule);
  background: var(--surface-alt);
  border-radius: 0 0 14px 14px;
}

/* Avstämningen överst i modalen --------------------------------------- */

.drill__sum {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 14px 0 18px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
}

.drill__fig { background: var(--surface-alt); padding: 10px 14px; }
.drill__figlabel { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.drill__figvalue { display: block; margin-top: 3px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }

.drill__sum.is-ok .drill__fig:last-child { background: var(--pos-soft); }
.drill__sum.is-ok .drill__fig:last-child .drill__figvalue { color: var(--pos); }
.drill__sum.is-off .drill__fig:last-child { background: var(--neg-soft); }
.drill__sum.is-off .drill__fig:last-child .drill__figvalue { color: var(--neg); }

.drill__acc { margin-bottom: 20px; }

.drill__acchead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 2px solid var(--rule-strong);
}

.drill__accno { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; font-size: 13px; }
.drill__accname { flex: 1; min-width: 0; font-size: 13px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drill__accsum { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }

.drill__tablewrap { overflow-x: auto; }
.drill__table { width: 100%; font-size: 12.5px; }
.drill__table td, .drill__table th { padding: 5px 8px; height: auto; }
.drill__table thead th { text-align: right; }
.drill__table thead th:nth-child(-n+4) { text-align: left; }
.drill__table thead th.th-amt { text-align: right; }
.ledger td.drill__date { text-align: left; font-family: 'IBM Plex Mono', ui-monospace, monospace; white-space: nowrap; color: var(--muted); }
.ledger td.drill__ver { text-align: left; font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--muted); white-space: nowrap; }
.ledger td.drill__unit { text-align: left; color: var(--muted); white-space: nowrap; }
.ledger td.drill__text { text-align: left; min-width: 160px; white-space: normal; }
.drill__more { padding: 6px 8px 0; }

/* Kontokopplingens tabell --------------------------------------------- */

.map__table { width: 100%; }
.ledger td.map__no { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; white-space: nowrap; text-align: left; }
.ledger td.map__name { min-width: 200px; text-align: left; }
.ledger td.map__count { text-align: right; }
.ledger td.map__pick { min-width: 210px; text-align: left; white-space: normal; overflow: visible; }
.ledger td.map__basis { white-space: nowrap; text-align: left; }
.map__table th:first-child, .map__table th:nth-child(2),
.map__table th:nth-child(5), .map__table th:nth-child(6) { text-align: left; }

.mapselect {
  width: 100%;
  font: inherit;
  font-size: 12.5px;
  padding: 4px 6px;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
}

.mapselect:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
tr.is-dirty .mapselect { border-color: var(--accent); background: var(--accent-soft); }
tr.is-off td { background: var(--neg-soft); }
.toolbar--inset { margin: 0; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; }
.toolfield__dash { color: var(--muted); padding: 0 2px; }

/* På telefon får sju kolumner inte plats. Debet och kredit går ut — beloppet
   bär samma information, och det är beloppet man letar efter. */

@media (max-width: 640px) {
  .drill__table th:nth-last-child(2),
  .drill__table td:nth-last-child(2),
  .drill__table th:nth-last-child(3),
  .drill__table td:nth-last-child(3) { display: none; }

  .drill__table { font-size: 12px; }
  .ledger td.drill__text { min-width: 0; }
  .drill__sum { grid-template-columns: 1fr; }
  .modal__body { padding: 4px 14px 14px; }
  .modal__head, .modal__foot { padding-left: 14px; padding-right: 14px; }

  .ledger td.map__pick { min-width: 150px; }
  .ledger td.map__name { min-width: 130px; }
}

/* ------------------------------------------------------ 9 Rörelse --- */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -300% 0; } }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 8%, transparent); }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: none; }
}

@keyframes popIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes barGrow { from { transform: scaleX(0); transform-origin: left; } }

@keyframes rowIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

.page { opacity: 0; transform: translateY(6px); transition: opacity 260ms var(--ease), transform 300ms var(--ease); }
.page.is-in { opacity: 1; transform: none; }

.ledger tbody tr {
  animation: rowIn 300ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 9ms);
}

.reportbody > * { animation: fadeIn 240ms var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .page { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- 9b Diagram --- */
/*
 * Diagram-modalen (Rapport och Budget). Kontrollrad överst, ritytan under.
 * Chart.js ritar i en <canvas> som måste ligga i en ruta med bestämd höjd
 * eftersom maintainAspectRatio är av.
 */

.chartmodal__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
  padding: 2px 0 12px;
  border-bottom: 1px solid var(--rule);
}

.chartctl { display: flex; flex-direction: column; gap: 4px; }
.chartctl > .toolfield__label,
.chartctl .toolfield__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
}
.chartctl--check {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  align-self: center;
  font-size: 13px;
}

/*
 * Chart.js sköter canvasens pixelmått själv när responsive är på — rutan
 * behöver bara vara position: relative och ha en bestämd höjd att fylla.
 */
.chartmodal__canvas {
  position: relative;
  height: clamp(320px, 52vh, 560px);
  margin-top: 14px;
}
.chartmodal__canvas > .notice,
.chartmodal__canvas > .empty { margin-top: 40px; }

.chartchips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; max-width: 460px; }
.chartchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px 2px 9px;
  font-size: 12px;
  line-height: 1.5;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 999px;
}
.chartchip__x {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0 3px;
  border-radius: 999px;
}
.chartchip__x:hover { background: rgba(0, 0, 0, .12); }

.chartpick { min-width: 260px; }
.chartsearch {
  width: 100%;
  margin-bottom: 6px;
}
.chartpick__list { max-height: 46vh; overflow: auto; }
.chartpick__group {
  margin: 8px 0 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.chartpick__group:first-child { margin-top: 0; }
.chartpick__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px;
  border-radius: var(--r-sm);
  font-size: 13px;
  cursor: pointer;
}
.chartpick__row:hover { background: var(--surface-sunk); }

@media (max-width: 640px) {
  .chartmodal__canvas { height: clamp(260px, 46vh, 420px); }
  .chartchips { max-width: none; }
}

/* -------------------------------------------- 10 Mobil och utskrift --- */

@media (max-width: 1100px) {
  .toolbar {
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none;
    padding-bottom: 10px;
  }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar > * { flex: none; }
  .toolbar__grow { display: none; }
  .toolfield__label { display: none; }
  .toolfield { flex-direction: row; align-items: center; }
}

@media (max-width: 720px) {
  :root { --topbar-h: 52px; --toolbar-h: 52px; }

  body { font-size: 15px; }

  .brand__sub { display: none; }
  .menubtn__text { display: none; }
  .menubtn { padding: 0 11px; }
  .status__text { display: none; }
  .status { padding: 6px; }

  .menupop { left: 8px; right: 8px; width: auto; }

  .page { padding: 16px 14px 40px; }
  .page--wide { padding: 0 10px 24px; }
  .page__title { font-size: 20px; }

  .filters { padding: 14px; gap: 12px 14px; }
  .field { flex: 1 1 100%; }

  /* Fingerstorlek på allt som ska tryckas på. */
  .btn, .unitpick__toggle, input, select { height: 38px; }
  .btn--sm { height: 34px; }
  .segment__btn { padding: 8px 12px; }
  .pop__item, .menuitem { padding: 11px 12px; }

  .unitpick__menu { position: fixed; left: 10px; right: 10px; top: auto; min-width: 0; max-height: 60vh; }

  .kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .kpi__value { font-size: 18px; }

  .sim-layout { grid-template-columns: 1fr; }
  .sens__row { grid-template-columns: 88px 1fr 78px; }

  /* Rapporten scrollar i sidled med benämningen fastlåst till vänster. */
  .ledger-wrap { border-radius: var(--r-sm); }
  .ledger--budgetmonth { min-width: 900px; }
  .c-label { width: 152px; }
  .c-amt { width: 84px; }
  .c-pct { width: 56px; }

  .density-roomy { --row-h: 30px; --fs: 12.5px; }
  .density-compact { --row-h: 26px; --fs: 12px; }
  .density-dense { --row-h: 22px; --fs: 11.5px; }

  .toast-stack { left: 12px; right: 12px; max-width: none; }
}

@media print {
  /* .forecast-strip är månadsradens knappar — en väljare, inte innehåll. */
  .topbar, .toolbar, .menupop, .pop, .legend, .kpis,
  .forecast-strip { display: none !important; }
  body, html { background: #fff; }
  .page, .page--wide { padding: 0; max-width: none; opacity: 1; transform: none; }
  .ledger-wrap { border: 0; box-shadow: none; overflow: visible; }
  .ledger { font-size: 8pt; }
  .ledger thead th { position: static; background: #fff; }
  .ledger td { background: #fff; }
  .cell-label { position: static; box-shadow: none; }
  .ledger tbody tr { animation: none; }
  @page { size: A4 landscape; margin: 10mm; }
}