/* Skisse C — visuell overstyring for økonomi.
   Lastes etter stil.css. Strukturen og komponentene i appen er fortsatt de samme. */

:root {
  color-scheme: dark;
  --bg: #101922;
  --bg-topp: #15232d;
  --flate: #182833;
  --flate-2: #1e313d;
  --flate-3: #29404d;
  --blekk: #edf3f6;
  --dempet: #b3c2cb;
  --svak: #8196a3;
  --linje: #304753;
  --linje-sterk: #45606e;
  --aksent: #a6c9d9;
  --aksent-svak: #203947;
  --ut: #f08d97;
  --inn: #72d0aa;
  --skygge: 0 2px 4px rgba(0, 0, 0, .2), 0 14px 36px rgba(0, 0, 0, .2);
  --skygge-hoy: 0 20px 60px rgba(0, 0, 0, .5), 0 3px 12px rgba(0, 0, 0, .35);
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
}

:root[data-tema="lyst"] {
  color-scheme: light;
  --bg: #f3f6f8;
  --bg-topp: #ffffff;
  --flate: #ffffff;
  --flate-2: #f3f7f9;
  --flate-3: #e6edf1;
  --blekk: #15222b;
  --dempet: #536975;
  --svak: #7c909b;
  --linje: #dbe4e9;
  --linje-sterk: #bfced5;
  --aksent: #356b86;
  --aksent-svak: #e6f0f4;
  --ut: #b73852;
  --inn: #197d5d;
  --skygge: 0 2px 4px rgba(21, 34, 43, .04), 0 12px 30px rgba(21, 34, 43, .07);
  --skygge-hoy: 0 20px 60px rgba(21, 34, 43, .16), 0 3px 12px rgba(21, 34, 43, .1);
}

body {
  min-width: 0;
  overflow-x: hidden;
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  background: var(--bg);
}

button, input, select, textarea { font-family: inherit; }
.skuff-lukk { min-width: 44px; min-height: 44px; }
.kvittering-detalj .vare { min-height: 44px; }
.forklaring-rad .hint { text-align: left; margin-top: .25rem; }
h1, h2, h3, h4 { text-wrap: balance; }
h1 { letter-spacing: -.045em; }
h2 { letter-spacing: -.025em; }

/* Desktop: fanene blir en rolig, vertikal navigasjon i toppen. Verktøyene
   beholder sin plass til høyre og får ikke konkurranse med navigasjonen. */
@media (min-width: 860px) {
  .topp {
    /* En filtrert forelder gjør fixed-posisjonering relativ til toppbaren. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    align-items: center;
    min-height: 80px;
    gap: 1.4rem;
    padding: .85rem 1.45rem;
  }
  .merke { flex: 0 0 180px; font-size: 1.1rem; }
  .faner {
    position: fixed;
    left: 0;
    top: 80px;
    bottom: 0;
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .22rem;
    padding: 1.2rem .75rem 1.5rem;
    border-right: 1px solid var(--linje);
    background: color-mix(in srgb, var(--bg-topp) 96%, transparent);
    overflow-y: auto;
    z-index: 29;
  }
  .fane {
    width: 100%;
    min-height: 39px;
    padding: .55rem .8rem;
    border-radius: var(--r-s);
    text-align: left;
    font-size: .86rem;
  }
  .fane.valgt { background: var(--flate-3); box-shadow: inset 3px 0 var(--aksent); }
  .topp-hoyre {
    margin-left: auto;
    min-height: 32px;
  }
  main { max-width: calc(100vw - 240px); margin-left: 200px; margin-right: auto; padding: 1.8rem 1.5rem 2.6rem; }
  footer { max-width: calc(100vw - 240px); margin-left: 200px; margin-right: auto; }
}

/* Oversikten har en tydelig åpning før tallene kommer. */
.oversikt-intro { margin: .3rem 0 1.2rem; }
.oversikt-intro h1 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.1; }
.oversikt-intro > p { max-width: 48rem; margin: .45rem 0 0; color: var(--dempet); }
.hero {
  border-color: var(--linje-sterk);
  border-radius: var(--r-l);
  background:
    radial-gradient(110% 150% at 100% 0%, rgba(96, 145, 169, .3), transparent 62%),
    linear-gradient(140deg, var(--flate) 0%, color-mix(in srgb, var(--flate-2) 82%, var(--bg)) 100%);
  box-shadow: var(--skygge);
}
.fortelling { max-width: 44rem; margin-bottom: 1.4rem; }
.fortelling h2 { margin: 0 0 .55rem; font-size: clamp(1.65rem, 3.2vw, 2.7rem); line-height: 1.1; }
.fortelling p { margin: 0; max-width: 38rem; color: var(--dempet); font-size: 1rem; }
.fortelling em { color: var(--aksent); font-style: normal; }

.oversikt-dager { margin-top: 1.5rem; }
.oversikt-dager h2 { margin-bottom: .8rem; font-size: 1.05rem; }
#dagsliste {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .55rem;
}
.dag-kort {
  display: grid;
  min-width: 0;
  min-height: 86px;
  gap: .25rem;
  padding: .7rem .65rem;
  border: 1px solid var(--linje);
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--flate) 82%, transparent);
  text-align: left;
  transition: background .15s, border-color .15s, transform .15s;
}
.dag-kort:hover, .dag-kort[aria-pressed="true"] { background: var(--flate-3); border-color: var(--aksent); }
.dag-kort:active { transform: translateY(1px); }
.dag-dato { color: var(--dempet); font-size: .72rem; }
.dag-belop { font-size: .96rem; font-weight: 650; white-space: nowrap; }
.dag-spor { align-self: end; width: 100%; height: 4px; border-radius: 99px; background: var(--flate-3); overflow: hidden; }
.dag-spor i { display: block; height: 100%; width: var(--w, 60%); border-radius: inherit; background: var(--aksent); opacity: .78; }
.dag-butikk { min-width: 0; color: var(--svak); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.oversikt-fordypning { margin-top: 1.35rem; border-top: 1px solid var(--linje); }
.oversikt-fordypning summary { cursor: pointer; padding: .85rem 0; color: var(--dempet); font-size: .84rem; }
.oversikt-fordypning[open] summary { color: var(--blekk); }
.oversikt-fordypning > *:not(summary) { animation: design-fade .2s ease both; }
@keyframes design-fade { from { opacity: 0; transform: translateY(-3px); } }

.oversikt-innsikt { margin-top: 1.35rem; }
#forklaringer { display: grid; gap: .5rem; }
.forklaring-rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
  padding: .8rem .9rem;
  border: 1px solid var(--linje);
  border-radius: var(--r-s);
  background: var(--flate);
  text-align: left;
  transition: background .15s, border-color .15s;
}
.forklaring-rad:hover { background: var(--flate-2); border-color: var(--linje-sterk); }
.forklaring-rad p { margin: .15rem 0 0; color: var(--dempet); font-size: .82rem; }

/* Skuff: bred skjerm viser oversikten samtidig, mindre skjerm viser én lesbar
   flate med en tydelig tilbakeknapp. */
.skuff-tilbake {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 .8rem;
  padding: .35rem .7rem;
  border: 1px solid var(--linje-sterk);
  border-radius: 999px;
  background: var(--flate-2);
  color: var(--dempet);
}
.skuff-tilbake:hover { color: var(--blekk); border-color: var(--aksent); }
.skuff-tilbake[hidden] { display: none !important; }
@media (min-width: 1280px) {
  body.har-skuff .topp { padding-right: 420px; }
  body.har-skuff main,
  body.har-skuff footer { margin-right: 400px; max-width: calc(100vw - 640px); }
  body.har-skuff main { margin-right: 400px; max-width: calc(100vw - 640px); }
  body.har-skuff .skuff { width: 380px; }
  body.har-skuff .skuff-bak { display: none; }
}

.kvittering-detalj {
  padding: 1.2rem;
  color: #17252d;
  background: #fffdf8;
  border: 1px solid #d9d2c5;
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(35, 30, 20, .12);
}
.kvittering-detalj h1, .kvittering-detalj h2, .kvittering-detalj h3 { color: #17252d; }
.kvittering-detalj .dempet, .kvittering-detalj .muted,
.kvittering-detalj .svak, .kvittering-detalj .quiet, .kvittering-detalj small { color: #58636a; }
.kvittering-detalj .vare, .kvittering-detalj .vare-navn,
.kvittering-detalj .vare-antall, .kvittering-detalj .vare-belop,
.kvittering-detalj .vare-meta, .kvittering-detalj .fakta,
.kvittering-detalj .fakta span, .kvittering-detalj .fakta h4 { color: #17252d; }
.kvittering-detalj .vare-meta, .kvittering-detalj .fakta span:first-child { color: #58636a; }
.kvittering-detalj .kvitteringslinje { border-color: #d9d2c5; }

@media (max-width: 859px) {
  .topp { gap: .65rem; padding: .75rem .9rem; }
  .faner { display: none; }
  .topp-hoyre { gap: .25rem; }
  .topp #logg-ut { display: none; }
  main { padding: 1.1rem .85rem 1.2rem; }
  .skuff {
    top: 0;
    bottom: 0;
    max-height: none;
    width: 100%;
    border-radius: 0;
    border-left: 0;
    border-top: 0;
    padding-bottom: calc(1.6rem + 70px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 700px) {
  #dagsliste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dag-kort { min-height: 84px; }
}

/* Fire mobilinnganger: oversikt, transaksjoner, ting og mer/skuff. */
@media (max-width: 859px) {
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .bunnfaner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 62px;
    padding: .3rem .35rem env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--bg-topp) 94%, transparent);
    border-top-color: var(--linje-sterk);
  }
  .bunnfaner button {
    min-width: 0;
    min-height: 54px;
    padding: .3rem .1rem;
    border-radius: var(--r-s);
    font-size: .7rem;
  }
  .bunnfaner button span { font-size: .95rem; line-height: 1.2; }
  .bunnfaner small { font-size: .75rem; }
  .bunnfaner button.valgt { background: var(--aksent-svak); }
}

/* Tydelige berøringsmål og tastaturfokus for verktøy som ellers er små. */
.knapp-ikon, .knapp-svak, .periode button, .pil, .fane {
  min-width: 44px;
  min-height: 44px;
}
:focus-visible { outline: 3px solid var(--aksent); outline-offset: 3px; }

@media (max-width: 859px) {
  .hero-tall { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
  .hero-tall > div:first-child { grid-column: 1 / -1; }
  .hero-tall > div { min-width: 0; }
}

@media (max-width: 390px) {
  .oversikt-intro h1 { font-size: 1.7rem; }
  .fortelling h2 { font-size: 1.65rem; }
  .dag-kort { padding-inline: .5rem; }
  .dag-belop { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dag-kort, .forklaring-rad { transition: none; }
}