/* Budsjett - mobilførst.
   Fargene er hentet fra stenshagenelevate.com. */

:root {
  /* Merkevarefarger */
  --deep-fjord:      #1B2A4A;
  --deep-fjord-dark: #142038;
  --summit-gold:     #C5A059;
  --soft-gold:       #E1CFA3;
  --alpine-cream:    #F5F0E8;
  --elevation-black: #1A1A1A;
  --nordic-charcoal: #2D2D2D;
  --mountain-slate:  #4A5568;
  --stone-grey:      #8C8279;
  --border-light:    #EAE6DD;

  /* Rollefarger */
  --bg:        var(--alpine-cream);
  --surface:   #FFFFFF;
  --surface-2: #FAF7F2;
  --text:      var(--elevation-black);
  --muted:     var(--stone-grey);
  --line:      var(--border-light);
  --accent:    var(--deep-fjord);
  --gold:      var(--summit-gold);
  --good:      #2F7A4F;
  --bad:       #B3402C;

  --font-body:    'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --radius-card: 8px;
  --radius-btn:  4px;
  --shadow-card: 0 2px 8px rgba(26, 26, 26, .06);
  --tap: 44px;

  /* Grafens seriefarger. Validert for fargeblindhet mot hvit flate
     (scripts/validate_palette.js). Rekkefølgen er selve sikkerheten -
     den skal ikke endres. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;

  --grid:     #E1E0D9;
  --axis-ink: #8C8279;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #12192A;
    --surface:   var(--deep-fjord);
    --surface-2: #223354;
    --text:      #F2EFEA;
    --muted:     #A8B0C0;
    --line:      #2C3E60;
    --accent:    var(--soft-gold);
    --good:      #6CC08C;
    --bad:       #EF8A72;

    /* Samme åtte fargetoner, trinnet for den mørke flaten. */
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;

    --grid:     #2C3E60;
    --axis-ink: #A8B0C0;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font-body);
  -webkit-text-size-adjust: 100%;
}

h1, h2, .month-label, .hero-amount {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: .01em;
}

button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
[hidden] { display: none !important; }

/* --- Innlogging --------------------------------------------------------- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: 100%; max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 30px 24px;
  display: grid; gap: 12px;
}
.login-card h1 { margin: 0; font-size: 1.9rem; color: var(--accent); }
.login-card input {
  width: 100%; min-height: var(--tap); padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  background: var(--bg); color: var(--text);
}

/* --- Topplinje ---------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--deep-fjord);
  color: #fff;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
}
.monthnav { display: flex; align-items: center; gap: 8px; }
.month-label { flex: 1; text-align: center; font-size: 1.25rem; text-transform: capitalize; }
.icon {
  min-width: var(--tap); min-height: var(--tap);
  border: none; background: none; color: #fff;
  border-radius: var(--radius-btn); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.icon:active { background: rgba(255,255,255,.14); }

.tabs {
  display: flex; gap: 4px; margin-top: 8px;
  background: rgba(255,255,255,.10); border-radius: var(--radius-btn); padding: 3px;
}
.tab {
  flex: 1; min-height: 36px; border: none; background: none;
  border-radius: var(--radius-btn); cursor: pointer;
  color: rgba(255,255,255,.72); font-weight: 600; font-size: .9rem;
}
.tab.is-active { background: var(--summit-gold); color: var(--deep-fjord-dark); }

/* --- Innhold ------------------------------------------------------------ */
.content { padding: 14px 12px 96px; display: grid; gap: 14px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Hovedkort: hvor mye er igjen */
.hero {
  background: var(--deep-fjord);
  color: #fff;
  border: none;
  padding: 20px 18px;
  display: grid; gap: 4px;
}
.hero .label { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--soft-gold); }
.hero-amount { font-size: 2.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-amount.neg { color: #FFB4A0; }
.hero .sub { font-size: .9rem; color: rgba(245,240,232,.72); }

.hero-bar {
  height: 8px; border-radius: 4px; margin-top: 12px;
  background: rgba(255,255,255,.18); overflow: hidden;
}
.hero-bar > span { display: block; height: 100%; background: var(--summit-gold); }
.hero-bar > span.over { background: #E08268; }

/* Nøkkeltall */
.stats { display: grid; grid-template-columns: 1fr 1fr; }
.stat { padding: 13px 16px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat .k { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.stat .v { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Seksjoner */
.section-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.section-head .title { font-weight: 700; font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; }
.section-head .hint { font-size: .74rem; color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
.section-head .sum { font-variant-numeric: tabular-nums; font-weight: 700; }

.rows { display: grid; }

.row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
  align-items: baseline;
  padding: 12px 16px; min-height: var(--tap);
  border: none; border-bottom: 1px solid var(--line);
  background: none; width: 100%; text-align: left; cursor: pointer;
}
.row:last-of-type { border-bottom: none; }
.row:active { background: var(--surface-2); }

.row .name { font-weight: 600; }
.row .name small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; }
.row .figure { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.row .figure small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; }
.row .figure .left { color: var(--good); }
.row .figure .left.over { color: var(--bad); }

/* Framdriftslinje for variable poster */
.row .bar {
  grid-column: 1 / -1;
  height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 2px;
}
.row .bar > span { display: block; height: 100%; background: var(--accent); }
.row .bar > span.warn { background: var(--summit-gold); }
.row .bar > span.over { background: var(--bad); }

.add-row {
  width: 100%; min-height: var(--tap);
  border: none; border-top: 1px solid var(--line); background: none;
  color: var(--accent); font-weight: 600; cursor: pointer;
  padding: 12px 16px; text-align: left;
}

/* --- Utgiftsliste ------------------------------------------------------- */
.tx-day { padding: 9px 16px; background: var(--surface-2); font-size: .78rem;
          text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.tx {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline;
  width: 100%; text-align: left; cursor: pointer;
  padding: 11px 16px; min-height: var(--tap);
  border: none; border-bottom: 1px solid var(--line); background: none;
}
.tx:active { background: var(--surface-2); }
.tx .who { font-weight: 600; }
.tx .who small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; }
.tx .amt { font-variant-numeric: tabular-nums; font-weight: 700; }

/* --- 3-mnd-tabell ------------------------------------------------------- */
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.compare { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 340px; }
table.compare th, table.compare td { padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.compare th { text-align: right; font-size: .76rem; color: var(--muted); font-weight: 600;
                   text-transform: uppercase; letter-spacing: .05em; }
table.compare th:first-child, table.compare td:first-child {
  text-align: left; white-space: normal; position: sticky; left: 0; background: var(--surface);
}
table.compare td { text-align: right; font-variant-numeric: tabular-nums; }
table.compare tr.section-row td {
  background: var(--surface-2); font-weight: 700; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .06em;
}
table.compare tr.sum-row td { font-weight: 700; border-top: 2px solid var(--line); }
table.compare .trend-up { color: var(--bad); }
table.compare .trend-down { color: var(--good); }

/* --- Filterrad ---------------------------------------------------------- */
/* Filtre står i én rad over innholdet de gjelder for. */
.filters {
  display: flex; gap: 7px; padding: 2px 0 2px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.filters .chip { white-space: nowrap; flex: none; }

.seg {
  display: inline-flex; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  padding: 2px; flex: none;
}
.seg button {
  border: none; background: none; cursor: pointer;
  padding: 7px 14px; min-height: 36px;
  border-radius: 2px; font-size: .88rem; font-weight: 600; color: var(--muted);
}
.seg button.is-active { background: var(--deep-fjord); color: #fff; }
@media (prefers-color-scheme: dark) {
  .seg button.is-active { background: var(--summit-gold); color: var(--deep-fjord-dark); }
}

/* --- Graf --------------------------------------------------------------- */
.chart-card { padding: 14px 12px 6px; }
.chart { width: 100%; height: auto; display: block; touch-action: pan-y; }
.chart:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.chart .grid-line { stroke: var(--grid); stroke-width: 1; }
.chart .axis-text { fill: var(--axis-ink); font-size: 10px; font-family: var(--font-body); }
.chart .axis-text.y { text-anchor: end; }
.chart .axis-text.x { text-anchor: middle; }
.chart .crosshair { stroke: var(--axis-ink); stroke-width: 1; }
.chart .series-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart .series-dot { stroke: var(--surface); stroke-width: 2; }
.chart .end-label { font-size: 10px; font-weight: 600; font-family: var(--font-body); }

/* Avlesning under grafen. Verdien leder, navnet følger. */
.readout { border-top: 1px solid var(--line); padding: 10px 14px 14px; }
.readout .when {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600; margin-bottom: 8px;
}
.readout ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.readout li { display: grid; grid-template-columns: 18px 1fr auto; gap: 9px; align-items: baseline; }
.readout .key { height: 2px; border-radius: 1px; align-self: center; }
.readout .who { color: var(--muted); font-size: .9rem; min-width: 0;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.readout .val { font-weight: 700; font-variant-numeric: tabular-nums; }
.readout .delta { font-size: .78rem; font-variant-numeric: tabular-nums; margin-left: 6px; font-weight: 600; }
.readout .delta.up { color: var(--bad); }
.readout .delta.down { color: var(--good); }
.readout .delta.flat { color: var(--muted); }

.legend { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 12px 14px; border-top: 1px solid var(--line); }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--muted); }
.legend i { width: 16px; height: 2px; border-radius: 1px; }

/* --- Flytende knapp ----------------------------------------------------- */
.fab {
  position: fixed;
  right: 18px; bottom: max(18px, env(safe-area-inset-bottom));
  width: 60px; height: 60px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--summit-gold); color: var(--deep-fjord-dark);
  font-size: 2.1rem; line-height: 1;
  box-shadow: 0 6px 18px rgba(26,26,26,.24);
  z-index: 20;
}
.fab:active { transform: scale(.95); }

/* --- Dialog ------------------------------------------------------------- */
.sheet {
  border: none; border-radius: var(--radius-card); padding: 0;
  width: min(440px, calc(100vw - 20px));
  max-height: 88dvh;
  background: var(--surface); color: var(--text);
}
.sheet::backdrop { background: rgba(26,26,26,.5); }
.sheet form { padding: 20px; display: grid; gap: 14px; }
.sheet h2 { margin: 0; font-size: 1.35rem; color: var(--accent); }
.sheet label, .field { display: grid; gap: 6px; font-size: .84rem; color: var(--muted); }
.field-label { font-size: .84rem; color: var(--muted); }
.sheet input[type=text], .sheet input[type=number], .sheet input[type=date], .sheet select {
  min-height: var(--tap); padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  background: var(--bg); color: var(--text); width: 100%;
}

/* Beløpsfeltet er det viktigste - gjør det stort */
.amount-wrap { position: relative; }
.amount-wrap input {
  font-family: var(--font-heading);
  font-size: 2.2rem !important;
  font-weight: 600;
  height: 68px;
  padding-right: 46px !important;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.amount-wrap .suffix {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 1.1rem;
}

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  border-radius: 999px; padding: 9px 14px; min-height: 40px;
  cursor: pointer; font-size: .9rem; font-weight: 500;
}
.chip.is-selected { background: var(--deep-fjord); border-color: var(--deep-fjord); color: #fff; }
.chip.more { color: var(--muted); font-style: italic; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check { display: flex; align-items: flex-start; gap: 10px; }
.check input { width: 20px; height: 20px; margin-top: 3px; flex: none; }
.check span { color: var(--text); font-size: .9rem; }
.check em { color: var(--muted); font-style: normal; font-size: .78rem; display: block; }

.tx-list { display: grid; max-height: 190px; overflow-y: auto; border-top: 1px solid var(--line); }
.tx-list:empty { display: none; }
.tx-list .tx { padding-left: 0; padding-right: 0; }

.actions { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.spacer { flex: 1; }

button.primary {
  min-height: var(--tap); padding: 0 20px; border: none;
  border-radius: var(--radius-btn);
  background: var(--deep-fjord); color: #fff; font-weight: 600; cursor: pointer;
}
button.danger {
  min-height: var(--tap); padding: 0 14px; border: none;
  border-radius: var(--radius-btn); background: none; color: var(--bad); cursor: pointer;
}
button.link {
  min-height: var(--tap); padding: 0 12px; border: none;
  background: none; color: var(--muted); cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  button.primary { background: var(--summit-gold); color: var(--deep-fjord-dark); }
  .chip.is-selected { background: var(--summit-gold); border-color: var(--summit-gold); color: var(--deep-fjord-dark); }
}

.footer { text-align: center; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.muted { color: var(--muted); margin: 0; }
.error { color: var(--bad); font-size: .88rem; margin: 0; }
.empty { padding: 22px 16px; color: var(--muted); text-align: center; }

.toast {
  position: fixed; left: 50%; bottom: max(90px, calc(env(safe-area-inset-bottom) + 90px));
  transform: translateX(-50%);
  background: var(--elevation-black); color: var(--alpine-cream);
  padding: 11px 18px; border-radius: 999px; font-size: .9rem; z-index: 100;
  max-width: calc(100vw - 32px); box-shadow: 0 6px 18px rgba(26,26,26,.24);
}