/* Myke overganger mellom sider (cross-document View Transitions), slik at
   navigering mellom /okonomi/-sidene føles ut som en app-bytte fremfor en
   hard sideomlasting. Ligger utenfor @layer side-spesifikt fordi
   @view-transition er en dokument-regel, ikke en kaskade-regel.
   Standardovergangen (kryssnedtoning av hele siden) er bevisst ikke
   tilpasset ut over dette - se prefers-reduced-motion-sikringen under.
   Spesifikasjon: https://drafts.csswg.org/css-view-transitions-2/ */
@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

@layer side-spesifikt {
    /* Hjem-dashboardets nedre halvdel (tilbakemeldinger + snarveier) er en
       reell, sideoverordnet layout-avgjørelse - ikke noe en enkelt
       komponent kan style seg selv til - så en ekte viewport-bredde
       @media er riktig verktøy her (i motsetning til @container, som er
       for komponenter som ikke vet hvor de havner). Tilbakemeldinger får
       mer plass enn snarveiene, som uansett bare wrapper i en smalere
       kolonne. */
    @media (width >= 75em) {
        .dashboard-nedre {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: var(--space-medium, 1em) var(--space-large, 1.5em);
            align-items: start;
        }
    }

    /* På disse CRUD-sidene avgjøres to-spalters arbeidsflyten av hele
       sidens bredde, ikke av én enkelt komponent, så samme
       viewport-@media er riktig verktøy her. */
    @media (width >= 75em) {
        .skjema-og-liste {
            display: grid;
            grid-template-columns: minmax(18em, 22em) minmax(0, 1fr);
            gap: var(--space-medium, 1em) var(--space-large, 1.5em);
            align-items: start;
        }
    }

    /* <lm-chart-sparkline> sin standardbredde (6rem) er ment for en
       kompakt, inline plassering ved siden av et lite tall - her står den
       alene under nettoformue-tallet i et fullbredde kort, så den får
       fylle kortets bredde i stedet for å beholde standardstørrelsen. */
    #nettoformue-sparkline {
        display: block;
        inline-size: 100%;
        block-size: 2.5rem;
        margin-block-start: var(--space-2xs, 0.2em);
    }

    /* Alvorlighetsgrad-farging er domenespesifikk (kun okonomi/ har
       begrepet "tilbakemelding med alvorlighetsgrad") og har ingen
       naturlig plass i det delte designsystemet. Punktfri liste-styling
       kommer fra den delte `.liste-uten-punkter`-utilityen i rot-
       styles.css. */
    #tilbakemelding-liste > li {
        padding-block: var(--space-2xs, 0.2em);

        &[data-alvorlighetsgrad="advarsel"] {
            color: var(--color-fare, oklch(65% 0.23 28));
        }

        &[data-alvorlighetsgrad="suksess"] {
            color: var(--color-suksess, oklch(73% 0.19 147));
        }
    }

    /* Native <progress> brukes flere steder i okonomi/ (budsjettstatus,
       sparemål-fremdrift, KI-modell-nedlasting) - ingen egen
       diagramkomponent trengs for en enkel determinert fremdriftsvisning.
       Delt full-bredde/aksentfarge-basis her, domenespesifikke avvik
       (som budsjett sin overskredet-rødfarging) scopes til sitt eget
       element under. */
    progress {
        width: 100%;
        accent-color: var(--color-accent, oklch(55% 0.18 260));
    }

    /* Mellomrom mellom lønnsforhandlings-kortene - selve kortflaten
       kommer nå fra <lm-card> rundt innholdet i hvert listeelement. */
    #forhandling-liste {
        display: grid;
        gap: var(--space-small, 0.6em);
    }

    /* Budsjettstatus bruker native <progress> (ingen egen
       diagramkomponent nødvendig for en enkel brukt-av-budsjett-andel) -
       et overskredet budsjett skal likevel skille seg visuelt ut fra et
       budsjett som følges. `accent-color` er den native, CSS-only måten
       å farge et <progress>-element på uten en egen custom-styled
       erstatning. */
    #budsjett-status-liste > li {
        padding-block: var(--space-2xs, 0.2em);

        progress {
            accent-color: var(--color-suksess, oklch(73% 0.19 147));
        }

        &[data-overskredet="true"] progress {
            accent-color: var(--color-fare, oklch(65% 0.23 28));
        }
    }

    /* Prioritet-fargingen på tiltak.js-listen er domenespesifikk (kun
       okonomi/ har begrepet "tiltaksprioritet") - <lm-tag> selv er en
       nøytral, ufarget primitiv, så fargen settes her via dens
       eksponerte ::part(tag) i stedet for i selve designsystemet. */
    #tiltak-liste lm-tag {
        &[data-prioritet="hoy"]::part(tag) {
            color: var(--color-fare, oklch(65% 0.23 28));
            border-color: currentColor;
        }

        &[data-prioritet="middels"]::part(tag) {
            color: var(--color-accent, oklch(55% 0.15 250));
            border-color: currentColor;
        }
    }
}