/* Økonomi — måleinstrument for egne penger.
   Tallene er hovedpersonen; alt annet holder kjeft. */

:root {
  color-scheme: light dark;

  --bg: #eef1f5;
  --flate: #ffffff;
  --flate-2: #f7f9fb;
  --blekk: #0f1620;
  --dempet: #5b6b7f;
  --svak: #8a9aad;
  --linje: #dce2ea;
  --linje-sterk: #c3ccd8;
  --ut: #b3324f;
  --inn: #1c7d5c;

  /* Kategorifarger. Validert for fargeblindhet, ikke valgt på øyemål. */
  --k1: #1f6feb; --k2: #d4571f; --k3: #1e9e6a; --k4: #9147d6;
  --k5: #d42b58; --k6: #0e9aae; --k7: #b06a00; --k8: #7b8794;

  --radius: 10px;
  --skygge: 0 1px 2px rgba(15, 22, 32, .06), 0 4px 16px rgba(15, 22, 32, .04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1015;
    --flate: #141c25;
    --flate-2: #1a232e;
    --blekk: #e7edf4;
    --dempet: #93a3b6;
    --svak: #6b7c90;
    --linje: #243040;
    --linje-sterk: #33455a;
    --ut: #f27a95;
    --inn: #4ec89b;

    --k1: #5891e0; --k2: #d9713d; --k3: #31a97c; --k4: #a06cd1;
    --k5: #d65478; --k6: #33a6b8; --k7: #b98637; --k8: #8895a6;

    --skygge: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--blekk);
  font-family: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Alle tall settes med tabellsifre, så kolonner står rett under hverandre. */
.tall {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--k1); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------- ramme */

.topp {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 1.25rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linje);
}

.merke {
  font-weight: 700; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase;
}

.topp-hoyre { margin-left: auto; display: flex; align-items: center; gap: .75rem; }

.knapp-svak {
  background: none; border: 1px solid var(--linje-sterk);
  border-radius: 6px; padding: .3rem .7rem;
  font-size: .8rem; color: var(--dempet);
}
.knapp-svak:hover { border-color: var(--blekk); color: var(--blekk); }

main { max-width: 68rem; margin: 0 auto; padding: 1.25rem 1.25rem 5rem; }

.kort {
  background: var(--flate);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  margin-bottom: 1rem;
}

.kort-topp {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .9rem 1.1rem .5rem;
}

h2 {
  margin: 0; font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dempet);
}

/* ------------------------------------------------------------ stripe */

.stripe {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem; margin-bottom: 1rem;
  border-radius: var(--radius); font-size: .9rem;
  border: 1px solid;
}
.stripe.varsel { background: color-mix(in srgb, var(--k7) 12%, var(--flate)); border-color: var(--k7); }
.stripe.feil   { background: color-mix(in srgb, var(--ut) 12%, var(--flate)); border-color: var(--ut); }
.stripe button { margin-left: auto; }

/* -------------------------------------------------------------- hero */

.hero { padding: 1.1rem 1.1rem 1.3rem; }
.hero-maaned {
  font-size: 1.05rem; font-weight: 600; text-transform: capitalize;
  margin-bottom: .2rem;
}
.hero-tall { display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: baseline; }

.stort {
  font-size: clamp(2rem, 7vw, 3rem); font-weight: 500;
  line-height: 1.05; display: block;
}
.stort.ut { color: var(--ut); }
.stort.inn { color: var(--inn); }

.merkelapp {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dempet); display: block; margin-bottom: .15rem;
}

.hero-fot { margin-top: .8rem; font-size: .85rem; color: var(--dempet); }

/* ------------------------------------------------------- månedsbåndet */

.baand-ramme { overflow-x: auto; padding: .3rem 1.1rem 1.1rem; }
.baand { display: block; min-width: 34rem; }

.maaned-kol { cursor: pointer; }
.maaned-kol rect.treff { fill: transparent; }
.maaned-kol:hover rect.treff { fill: color-mix(in srgb, var(--blekk) 5%, transparent); }
.maaned-kol.valgt rect.treff { fill: color-mix(in srgb, var(--k1) 12%, transparent); }

.baand-tekst { font-size: 9px; fill: var(--svak); }
.baand-tekst.aktiv { fill: var(--blekk); font-weight: 700; }

/* ------------------------------------------------------------ kategorier */

.kategoriliste { padding: .2rem 1.1rem 1rem; }

.kat-rad {
  display: grid; grid-template-columns: 10px 1fr auto;
  gap: .7rem; align-items: center;
  padding: .42rem 0; border-bottom: 1px solid var(--linje);
}
.kat-rad:last-child { border-bottom: none; }

.prikk { width: 10px; height: 10px; border-radius: 3px; }
.kat-navn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kat-tall { font-size: .9rem; }
.kat-andel { color: var(--dempet); font-size: .78rem; margin-left: .5rem; }

/* ------------------------------------------------------- transaksjoner */

.sok-rad { padding: .2rem 1.1rem .8rem; }
.sok {
  width: 100%; padding: .55rem .7rem;
  background: var(--flate-2); color: var(--blekk);
  border: 1px solid var(--linje-sterk); border-radius: 7px;
  font: inherit;
}
.sok::placeholder { color: var(--svak); }

.tx { padding: 0 1.1rem 1rem; }

.tx-rad {
  display: grid;
  grid-template-columns: 3.4rem 10px 1fr auto;
  gap: .7rem; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--linje);
}
.tx-rad:last-child { border-bottom: none; }

.tx-dato { font-size: .78rem; color: var(--svak); }
.tx-navn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-under { font-size: .74rem; color: var(--dempet); }
.tx-belop { font-size: .92rem; white-space: nowrap; }
.tx-belop.inn { color: var(--inn); }
.tx-intern { color: var(--svak); font-style: italic; }

.mer {
  display: block; width: 100%; margin-top: .6rem; padding: .5rem;
  background: var(--flate-2); border: 1px solid var(--linje);
  border-radius: 7px; font-size: .85rem; color: var(--dempet);
}

/* ------------------------------------------------------------ innlogging */

.logginn {
  max-width: 22rem; margin: 18vh auto; padding: 1.6rem;
  background: var(--flate); border: 1px solid var(--linje);
  border-radius: var(--radius); box-shadow: var(--skygge);
}
.logginn h1 { font-size: 1.15rem; margin: 0 0 .3rem; }
.logginn p { color: var(--dempet); font-size: .9rem; margin: 0 0 1.1rem; }
.logginn input { margin-bottom: .7rem; }
.logginn button[type="submit"] {
  width: 100%; padding: .6rem; border: none; border-radius: 7px;
  background: var(--k1); color: #fff; font-weight: 600;
}
.beskjed { font-size: .85rem; margin-top: .8rem; }
.beskjed.ok { color: var(--inn); }
.beskjed.feil { color: var(--ut); }

.laster { padding: 3rem 1rem; text-align: center; color: var(--dempet); }
.tom { padding: 1.4rem 0; color: var(--dempet); font-size: .9rem; }

footer {
  max-width: 68rem; margin: 0 auto; padding: 0 1.25rem 3rem;
  color: var(--svak); font-size: .78rem;
}
footer a { color: var(--dempet); margin-right: 1rem; }

@media (max-width: 560px) {
  main { padding: 1rem .8rem 4rem; }
  .kort-topp, .hero, .kategoriliste, .sok-rad, .tx { padding-left: .85rem; padding-right: .85rem; }
  .baand-ramme { padding-left: .85rem; padding-right: .85rem; }
  .tx-rad { grid-template-columns: 3rem 10px 1fr auto; gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}