/* Inter er self-hostet (ingen Google Fonts-kall) — variabel font, én fil dekker vekt 100-900. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Designtokens (Figma). Sidebar-verdiene gjelder kun portal-shellet i MainLayout/NavMenu. */
:root {
    --bab-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --bab-background: #F9FAFB;
    --bab-foreground: #1F2937;
    --bab-card: #ffffff;

    --bab-primary: #4F46E5;
    --bab-primary-hover: #4338CA;
    --bab-primary-soft: #EEF2FF;
    --bab-primary-soft-border: #C7D2FE;

    --bab-accent: #60A5FA;
    --bab-destructive: #EF4444;

    /* Dempet indigo for sekundære grafsøyler — den mettede primærfargen reserveres til
       den høyeste søylen, så øyet finner toppunktet uten å lese av aksen. */
    --bab-primary-muted: #A5B4FC;

    /* Semantiske statusfarger i tre styrker. -tint er flatebakgrunn (hele kort og rader),
       -soft er statusmerker, -strong er tekst/ikon oppå begge. Verdiene lå tidligere som
       magiske hex-koder i badge-reglene; samlet her så nye komponenter treffer samme palett. */
    --bab-success-tint: #F0FDF4;
    --bab-success-soft: #DCFCE7;
    --bab-success-strong: #166534;

    --bab-warning-tint: #FFFBEB;
    --bab-warning-soft: #FEF3C7;
    --bab-warning-strong: #92400E;

    --bab-danger-tint: #FEF2F2;
    --bab-danger-soft: #FEE2E2;
    --bab-danger-strong: #991B1B;

    --bab-text-strong: #111827;
    --bab-text: #374151;
    --bab-text-muted: #6B7280;
    --bab-text-faint: #9CA3AF;

    --bab-border: rgba(31, 41, 55, 0.1);
    --bab-border-soft: rgba(31, 41, 55, 0.08);
    --bab-input-bg: #F9FAFB;
    --bab-switch-off: #D1D5DB;

    --bab-radius: 0.75rem;
    --bab-radius-sm: 0.5rem;

    --bab-sidebar: #1F2937;
    --bab-sidebar-border: rgba(255, 255, 255, 0.08);
    --bab-sidebar-text: rgba(255, 255, 255, 0.6);
    --bab-sidebar-hover: rgba(79, 70, 229, 0.15);
    --bab-sidebar-label: rgba(255, 255, 255, 0.3);
}

/* Bootstrap-variabler mappet til designtokenene, så eksisterende .btn/.card/.form-*-markup
   arver designet uten at hver side må skrives om. */
:root {
    --bs-primary: #4F46E5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4F46E5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #4338CA;
    --bs-body-color: #1F2937;
    --bs-body-bg: #F9FAFB;
    --bs-border-color: rgba(31, 41, 55, 0.1);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html, body {
    font-family: var(--bab-font);
    color: var(--bab-foreground);
}

a, .btn-link {
    color: var(--bab-primary);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

h1:focus {
    outline: none;
}

/* Inline SVG-ikoner (se Shared/Icon.razor) skal aldri klemmes sammen i flex-rader. */
.icon {
    flex-shrink: 0;
    vertical-align: middle;
}

/* ─── Portal ──────────────────────────────────────────────────────────────
   Sideheaderen er et fullbredde hvitt bånd, så .content har ingen egen padding
   — hver portal-side rendrer <PageHeader /> etterfulgt av .page-body. */
.content {
    padding: 0;
}

.page-header {
    background: var(--bab-card);
    border-bottom: 1px solid var(--bab-border-soft);
    padding: 1rem 2rem;
}

.page-header h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bab-foreground);
    margin: 0;
}

.page-header .page-header-heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bab-text);
    margin: 0.25rem 0 0;
}

.page-header .page-header-body {
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--bab-text-muted);
    max-width: 36rem;
    margin: 0.125rem 0 0;
}

.page-body {
    padding: 1.75rem 2rem;
}

/* Avstand mellom kort/seksjoner (tilsvarer space-y-6 i designet). */
.page-body > * + * {
    margin-top: 1.5rem;
}

/* Kort */
.page-body .card {
    background: var(--bab-card);
    border: 1px solid var(--bab-border);
    border-radius: var(--bab-radius);
    overflow: hidden;
    box-shadow: none;
}

.page-body .card-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: var(--bab-card);
    border-bottom: 1px solid var(--bab-border-soft);
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bab-foreground);
}

.page-body .card-header .icon {
    color: var(--bab-primary);
}

.page-body .card-body {
    padding: 1.25rem 1.5rem;
}

.page-body .card-body p {
    font-size: 0.875rem;
}

/* Kort for destruktive handlinger (f.eks. avslutt abonnement). */
.page-body .card-danger {
    border-color: #FECACA;
}

.page-body .card-danger .card-header {
    color: #B91C1C;
    border-bottom-color: #FECACA;
}

.page-body .card-danger .card-header .icon {
    color: #EF4444;
}

/* Antall-badge i kort-header (f.eks. «Dokumenter 3») */
.card-count {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--bab-primary-soft);
    color: var(--bab-primary);
}

/* Informasjonsbanner øverst på en side */
.page-note {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--bab-radius);
    background: var(--bab-primary-soft);
    border: 1px solid var(--bab-primary-soft-border);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bab-foreground);
}

.page-note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--bab-radius-sm);
    background: var(--bab-primary);
    color: #fff;
    flex-shrink: 0;
}

.page-note strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bab-primary);
}

/* Oransje variant: brukes der en funksjon er sperret bak et høyere abonnement. */
.page-note-upgrade {
    align-items: flex-start;
    background: #FFF7ED;
    border-color: #FED7AA;
    padding: 1.25rem;
}

.page-note-upgrade .page-note-icon {
    width: 2rem;
    height: 2rem;
    background: #F97316;
    margin-top: 0.125rem;
}

.page-note-upgrade p {
    margin: 0;
    line-height: 1.6;
}

.page-note-upgrade p + p {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--bab-text-muted);
}

/* Tom-tilstand (stiplet ramme) */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border: 2px dashed var(--bab-border);
    border-radius: var(--bab-radius-sm);
    color: var(--bab-text-faint);
    font-size: 0.875rem;
}

.empty-state .icon {
    opacity: 0.4;
    margin-bottom: 0.5rem;
}

/* Skjema */
.page-body .form-control,
.page-body .form-select {
    background-color: var(--bab-input-bg);
    border: 1px solid rgba(31, 41, 55, 0.12);
    border-radius: var(--bab-radius-sm);
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--bab-foreground);
}

.page-body .form-control::placeholder {
    color: var(--bab-text-faint);
}

.page-body .form-control:focus,
.page-body .form-select:focus {
    border-color: var(--bab-primary);
    background-color: var(--bab-card);
}

.page-body .form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bab-text);
    margin-bottom: 0.375rem;
}

.page-body .form-text {
    font-size: 0.75rem;
    color: var(--bab-text-muted);
}

/* Knapper */
.btn-primary {
    --bs-btn-bg: var(--bab-primary);
    --bs-btn-border-color: var(--bab-primary);
    --bs-btn-hover-bg: var(--bab-primary-hover);
    --bs-btn-hover-border-color: var(--bab-primary-hover);
    --bs-btn-active-bg: var(--bab-primary-hover);
    --bs-btn-active-border-color: var(--bab-primary-hover);
    --bs-btn-disabled-bg: var(--bab-primary);
    --bs-btn-disabled-border-color: var(--bab-primary);
}

.page-body .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--bab-radius-sm);
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    /* Knapper i flex-rader (last opp / legg til) skal ikke brekke teksten. */
    white-space: nowrap;
    flex-shrink: 0;
}

.page-body .btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.page-body .btn-outline-secondary {
    --bs-btn-color: var(--bab-text);
    --bs-btn-border-color: rgba(31, 41, 55, 0.15);
    --bs-btn-bg: var(--bab-input-bg);
    --bs-btn-hover-color: var(--bab-text-strong);
    --bs-btn-hover-bg: #F3F4F6;
    --bs-btn-hover-border-color: rgba(31, 41, 55, 0.25);
}

/* Bryter (form-switch). Bootstrap posisjonerer etiketten med padding-left beregnet for sin egen
   smalere bryter — vår er bredere, så vi legger den ut i grid: bryter | etikett / hjelpetekst. */
.page-body .form-check.form-switch {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.75rem;
    align-items: center;
    padding-left: 0;
}

.page-body .form-switch .form-check-input {
    width: 2.75rem;
    height: 1.5rem;
    margin: 0;
    background-color: var(--bab-switch-off);
    border: none;
    cursor: pointer;
}

.page-body .form-switch .form-check-input:checked {
    background-color: var(--bab-primary);
}

.page-body .form-switch .form-check-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bab-text);
}

.page-body .form-switch .form-text {
    grid-column: 2;
    margin-top: 0.125rem;
}

/* Widget-design: innstillinger til venstre, live preview til høyre. */
.widget-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26rem;
    gap: 1.5rem;
    align-items: start;
}

/* Kortene i hver kolonne trenger samme innbyrdes avstand som .page-body ellers gir. */
.widget-settings-grid > div > * + * {
    margin-top: 1.5rem;
}

/* Previewet følger med når man scroller gjennom innstillingene. */
.widget-preview-col {
    position: sticky;
    top: 1.75rem;
}

@media (max-width: 1199px) {
    .widget-settings-grid {
        grid-template-columns: 1fr;
    }

    .widget-preview-col {
        position: static;
    }
}

/* Miniatyr av kundens opplastede logo/maskot. Firkantet ramme med object-fit: contain, så
   kunden ser hele bildet slik widgeten viser det — en rund beskjæring her ville antydet en
   beskjæring som ikke skjer. */
.widget-image-thumb {
    width: 3rem;
    height: 3rem;
    border-radius: var(--bab-radius-sm);
    object-fit: contain;
    border: 1px solid var(--bab-border);
    background: var(--bab-input-bg);
    flex-shrink: 0;
}

.widget-image-thumb-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bab-text-muted);
    border-style: dashed;
}

/* Kodesnutt med kopier-knapp (embed-tag, kodeeksempler i implementeringsguiden) */
.embed-snippet {
    margin: 0;
    padding: 1rem;
    padding-right: 6rem;
    background: var(--bab-input-bg);
    border: 1px solid var(--bab-border);
    border-radius: var(--bab-radius-sm);
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 0.8125rem;
    color: var(--bab-text);
}

/* Skjermbilder i implementeringsguiden. Miniatyren er bevisst avgrenset i høyde — den skal
   plassere steget i grensesnittet, ikke være lesbar. Skjermbildene er brede (hele
   admin-vinduet), så uten maksimal høyde ville ett bilde fylt et helt skjermbilde selv. */
.guide-image {
    display: block;
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 0;
    margin: 0.5rem 0;
    border: 1px solid var(--bab-border);
    border-radius: var(--bab-radius-sm);
    background: var(--bab-input-bg);
    overflow: hidden;
    cursor: zoom-in;
}

.guide-image img {
    display: block;
    width: 100%;
    height: 140px;
    /* Beskjærer heller enn å skalere ned: teksten i bildet blir uleselig uansett i denne
       størrelsen, og et beskåret utsnitt viser tydeligere hvor på siden man er. */
    object-fit: cover;
    object-position: top left;
}

.guide-image-expand {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--bab-radius-sm);
    background: rgba(31, 41, 55, 0.75);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
}

.guide-image:hover {
    border-color: var(--bab-primary-muted);
}

.guide-image:hover .guide-image-expand {
    background: var(--bab-primary);
}

.guide-lightbox {
    position: relative;
    background: transparent;
    border: none;
}

.guide-lightbox img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--bab-radius-sm);
}

.guide-lightbox-close {
    position: absolute;
    top: -2rem;
    right: 0;
    /* Krysset ligger utenfor bildet, mot den mørke bakgrunnen, og må derfor være lyst. */
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Statusmerker. Kun .badge treffes — .bg-success/.bg-danger brukes også på
   søylene i historikk-grafen på admin-dashboardet, og de skal beholde fullfarge. */
.page-body .badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
}

.page-body .badge.bg-success {
    background: var(--bab-success-soft) !important;
    color: var(--bab-success-strong);
}

.page-body .badge.bg-warning {
    background: var(--bab-warning-soft) !important;
    color: var(--bab-warning-strong);
}

.page-body .badge.bg-danger {
    background: var(--bab-danger-soft) !important;
    color: var(--bab-danger-strong);
}

.page-body .badge.bg-secondary {
    background: #F3F4F6 !important;
    color: var(--bab-text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Datapresentasjon. Innført med analysefanen, men bevisst generiske: neste side
   som viser tall skal se lik ut uten å finne opp sine egne klasser på nytt.
   ───────────────────────────────────────────────────────────────────────────── */

/* To kort side om side, stablet på smal skjerm. */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 1.5rem;
}

/* Segmentkontroll (periodevelger o.l.). Aktivt valg løftes med hvit flate + skygge
   framfor fylt farge, så den ikke konkurrerer med primærknappene på siden. */
.segmented {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--bab-input-bg);
    border: 1px solid var(--bab-border);
    border-radius: 999px;
}

.segmented-btn {
    border: none;
    background: transparent;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bab-text-muted);
    cursor: pointer;
}

.segmented-btn:hover:not(:disabled) {
    color: var(--bab-text-strong);
}

.segmented-btn.is-active {
    background: var(--bab-card);
    color: var(--bab-primary);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(31, 41, 55, 0.08);
}

.segmented-btn:disabled {
    cursor: default;
}

/* Nøkkeltall-kort: tonet ikonfirkant + tall + etikett. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.5rem;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bab-card);
    border: 1px solid var(--bab-border);
    border-radius: var(--bab-radius);
}

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: var(--bab-radius-sm);
    background: var(--bab-primary-soft);
    color: var(--bab-primary);
}

.stat-icon-accent { background: #EFF6FF; color: #2563EB; }
.stat-icon-success { background: var(--bab-success-tint); color: var(--bab-success-strong); }
.stat-icon-warning { background: var(--bab-warning-tint); color: var(--bab-warning-strong); }

.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--bab-text-strong);
    font-variant-numeric: tabular-nums;
}

.stat-label {
    display: block;
    font-size: 0.8125rem;
    color: var(--bab-text-muted);
}

/* Vertikalt søylediagram i ren CSS — portalen holder samme linje som widgeten og
   drar ikke inn et JS-diagrambibliotek. Gridlinjene er en repeterende gradient med
   fast antall trinn, så aksen alltid deles i fire like intervaller. */
.bar-chart {
    display: grid;
    grid-template-columns: 2rem 1fr;
    column-gap: 0.75rem;
    row-gap: 0.375rem;
}

.bar-chart-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    height: 11rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--bab-text-faint);
}

.bar-chart-plot {
    display: flex;
    align-items: flex-end;
    gap: 0.375rem;
    height: 11rem;
    border-bottom: 1px solid var(--bab-border);
    background-image: repeating-linear-gradient(
        to top,
        var(--bab-border-soft) 0 1px,
        transparent 1px 25%
    );
}

.bar-chart-col {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    min-width: 0;
}

.bar-chart-bar {
    width: 100%;
    max-width: 1.75rem;
    background: var(--bab-primary-muted);
    border-radius: 4px 4px 0 0;
}

/* Høyeste søyle utheves, så toppunktet leses uten å gå via aksen. */
.bar-chart-bar.is-peak {
    background: var(--bab-primary);
}

.bar-chart-labels {
    grid-column: 2;
    display: flex;
    gap: 0.375rem;
}

.bar-chart-labels span {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 0.6875rem;
    color: var(--bab-text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Liten versaletikett som deler et kort i navngitte bolker. */
.section-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bab-text-faint);
    margin-bottom: 0.75rem;
}

.section-label-count {
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    background: var(--bab-warning-soft);
    color: var(--bab-warning-strong);
    letter-spacing: 0;
}

/* Andelsindikator. Egen klasse framfor Bootstraps .progress fordi den brukes som
   en tynn linje under en verdi, ikke som et fremdriftsfelt. */
.meter {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--bab-border-soft);
    overflow: hidden;
}

.meter-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--bab-primary);
}

/* Rad eller kort med semantisk tone. Brukes til å skille noe som krever handling
   fra en nøytral liste, uten å måtte skrive et statusmerke på hver rad. */
.tinted-item {
    padding: 0.75rem 1rem;
    border-radius: var(--bab-radius-sm);
    background: var(--bab-input-bg);
    border: 1px solid transparent;
}

.tinted-item-danger {
    background: var(--bab-danger-tint);
    border-color: var(--bab-danger-soft);
}

.tinted-item-warning {
    background: var(--bab-warning-tint);
    border-color: var(--bab-warning-soft);
}

/* Dempet merknad i kort-headeren, skjøvet mot høyre kant. */
.card-header-note {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--bab-text-faint);
}

/* Fargeforklaring under historikk-grafen (ren fargeprikk, ikke et statusmerke). */
.legend-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 3px;
    vertical-align: middle;
}

.legend-swatch.legend-cost {
    background: var(--bab-destructive);
}

.legend-swatch.legend-revenue {
    background: #22C55E;
}

/* Kapasitetskort (admin): én rad per ressurs, med linjegraf uten JS-diagrambibliotek. */
.resource-row + .resource-row {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bab-border);
}

/* Kapasitetsgrafen: samme oppbygging som OpenAI-kortets tokengraf — akse i egen kolonne til
   venstre, kurve til høyre. 110px er valgt for at forskjellen mellom to nærliggende døgn skal være
   synlig; på 40px kollapset hele historikken til en jevn stripe. */
.resource-chart {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

/* Etikettene posisjoneres ABSOLUTT, ikke med space-between: terskelen ligger på 70 % av høyden,
   og en jevn fordeling ville plassert den på 50 % — altså tegnet en linje som ikke stemmer med
   der varselet faktisk går. Selve terskelposisjonen (bottom) settes inline fra komponenten, som
   leser ResourceConstants — da kan etikett, linje og varsel aldri komme i utakt. */
.resource-axis {
    position: relative;
    width: 2.6rem;
    height: 110px;
    flex: 0 0 auto;
    font-size: 0.625rem;
    line-height: 1;
    text-align: right;
    color: var(--bab-text-faint);
    white-space: nowrap;
}

.resource-axis span {
    position: absolute;
    right: 0;
}

.resource-axis .axis-top {
    top: 0;
    transform: translateY(-50%);
}

.resource-axis .axis-threshold {
    transform: translateY(50%);
    color: var(--bab-destructive);
    font-weight: 600;
}

.resource-axis .axis-zero {
    bottom: 0;
    transform: translateY(50%);
}

.resource-spark {
    position: relative;
    height: 110px;
    flex: 1 1 auto;
    /* Grunnlinje og tak, slik at kurven kan leses mot noe. */
    background-image:
        linear-gradient(var(--bab-border-soft) 1px, transparent 1px),
        linear-gradient(var(--bab-border) 1px, transparent 1px);
    background-position: 0 0, 0 109px;
    background-size: 100% 1px;
    background-repeat: no-repeat;
}

/* SVG-en fyller containeren og strekkes (preserveAspectRatio="none" i markupen), så
   non-scaling-stroke er påkrevd — uten den blir strekbredden ulik i x- og y-retning. */
.resource-line {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.resource-line-path {
    fill: none;
    stroke: var(--bab-primary);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* Terskellinjen tegnes i SVG-en på y = 100 − terskel, beregnet i komponenten fra
   ResourceConstants.WarnThreshold. Stiplet med vilje, så den skiller seg fra grunnlinje og tak. */
.resource-line-threshold {
    stroke: var(--bab-destructive);
    stroke-width: 2;
    stroke-dasharray: 6 4;
    opacity: 0.85;
    vector-effect: non-scaling-stroke;
}

/* OpenAI-forbrukskort (admin): to stablede søyler per døgn, uten JS-diagrambibliotek. */
/* Aksen står i egen kolonne til venstre for søylene, med samme høyde som søyleområdet — ikke som
   hele grafen, siden datoetikettene ligger under og ville forskjøvet «0» ned fra grunnlinjen. */
.usage-chart-wrap {
    display: flex;
    gap: 0.6rem;
}

.usage-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 120px;
    font-size: 0.625rem;
    line-height: 1;
    text-align: right;
    color: var(--bab-text-faint);
    white-space: nowrap;
}

/* Etikettene sentreres PÅ linjene sine: uten forskyvningen står toppverdien med overkanten i
   linjen og ser ut til å høre til et nivå over grafen. */
.usage-axis span:first-child {
    margin-top: -0.3rem;
}

.usage-axis span:last-child {
    margin-bottom: -0.3rem;
}

/* Luften ligger MELLOM døgnene, ikke inne i paret: chat og embedding hører sammen som én
   observasjon, og et jevnt mellomrom overalt ville gjort seks søyler av tre døgn. */
.usage-chart {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 2px;
    flex: 1 1 auto;
    /* Hjelpelinjer i selve søyleområdet (120px), ikke bak datoetikettene:
       background-size låser høyden, no-repeat hindrer at mønsteret gjentas nedover. */
    background-image:
        linear-gradient(var(--bab-border-soft) 1px, transparent 1px),
        linear-gradient(var(--bab-border-soft) 1px, transparent 1px),
        linear-gradient(var(--bab-border) 1px, transparent 1px);
    background-position: 0 0, 0 60px, 0 119px;
    background-size: 100% 1px;
    background-repeat: no-repeat;
}

/* max-width holder kolonnen i tømme når det er FÅ døgn å vise: uten den fordeler 14 døgn hele
   kortbredden mellom seg, og de tynne søylene blir små øyer med et titalls piksler luft rundt.
   Med 30 døgn fyller grafen bredden av seg selv. */
.usage-day {
    display: flex;
    flex-direction: column;
    min-width: 22px;
    max-width: 46px;
    flex: 1 1 0;
}

.usage-day-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    height: 120px;
}

/* Fast bredde, ikke flex: da vokser IKKE søylene med kolonnen, og luften mellom døgnene øker av
   seg selv når kortet blir bredere eller det er få døgn å vise. */
.usage-bar {
    flex: 0 0 10px;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
}

.usage-day-label {
    margin-top: 0.35rem;
    font-size: 0.625rem;
    line-height: 1;
    text-align: center;
    color: var(--bab-text-faint);
    white-space: nowrap;
}

.usage-bar-completion {
    background: var(--bab-primary);
    opacity: 0.75;
}

.usage-bar-embedding {
    background: #22C55E;
    opacity: 0.6;
}

/* Et døgn med avvik markeres på selve søylen, så det kan finnes igjen i grafen uten å lese
   tooltip på hver dag. */
/* Markeringen ligger på søylene, ikke på hele kolonnen: med datoetiketten under ville en
   underkant på .usage-day havnet under teksten og lest som en strek uten tilhørighet. */
.usage-day.has-anomaly .usage-day-bars {
    border-bottom: 2px solid var(--bab-destructive);
}

.usage-day.has-anomaly .usage-day-label {
    color: var(--bab-destructive);
}

.legend-swatch.legend-completion {
    background: var(--bab-primary);
}

.legend-swatch.legend-embedding {
    background: #22C55E;
}

/* Avviksmarkøren i forklaringen: en strek, ikke en firkant, så den ligner det den forklarer
   (underkanten på søylene) og ikke de to fargeprikkene ved siden av. */
.legend-anomaly {
    display: inline-block;
    width: 0.9rem;
    height: 2px;
    background: var(--bab-destructive);
    vertical-align: middle;
}

/* Tabeller */
.page-body .table {
    --bs-table-color: var(--bab-foreground);
    font-size: 0.875rem;
    margin-bottom: 0;
}

.page-body .table > thead th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bab-text-muted);
    border-bottom: 1px solid var(--bab-border-soft);
    padding: 0.75rem 1.5rem;
}

.page-body .table > tbody td {
    border-bottom: 1px solid var(--bab-border-soft);
    padding: 0.875rem 1.5rem;
    vertical-align: middle;
}

/* Kort som kun inneholder en tabell skal ikke ha dobbel padding. */
.page-body .card-body.p-0 > .table > thead th:first-child,
.page-body .card-body.p-0 > .table > tbody td:first-child {
    padding-left: 1.5rem;
}

/* Auth-sider (Register, CheckEmail, ConfirmFailed) */
.register-section {
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: #f9fafb;
}

.register-container {
    max-width: 440px;
    width: 100%;
    background: #fff;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.register-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
    text-align: center;
}

.register-subtitle {
    color: #6b7280;
    text-align: center;
    margin-bottom: 1.5rem;
}

.register-form .form-label {
    font-weight: 500;
    color: #374151;
}

.register-login-link {
    text-align: center;
    margin-top: 1.5rem;
    color: #6b7280;
    margin-bottom: 0;
}

/* Juridiske dokumentsider (Personvern, Databehandleravtale) */
.legal-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    color: #1f2937;
    line-height: 1.65;
}

.legal-page h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.legal-page .legal-updated {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 2.5rem;
}

.legal-page h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
}

.legal-page h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.legal-page p, .legal-page li {
    color: #374151;
}

.legal-page ul {
    padding-left: 1.25rem;
}

.legal-page li {
    margin-bottom: 0.4rem;
}

.legal-page table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.92rem;
}

.legal-page th, .legal-page td {
    border: 1px solid #e5e7eb;
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.legal-page th {
    background: #f9fafb;
    font-weight: 600;
}

.legal-page .legal-contact {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}

/* /installasjon: guidene fra portalen på landingssidens layout. Bredere enn .legal-page fordi
   accordions med skjermbilder trenger plassen. */
.installasjon-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    color: #1f2937;
    line-height: 1.65;
}

.installasjon-page h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.installasjon-lead {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
}

.installasjon-page .card {
    margin-top: 1.5rem;
}

.installasjon-cta {
    margin-top: 3rem;
    padding: 2rem;
    text-align: center;
    background: var(--bab-primary-soft);
    border-radius: var(--bab-radius-sm);
}

.installasjon-cta h2 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.check-email-icon {
    margin-bottom: 1rem;
}
/* Tier-referanse i budsjett-overstyret (admin): hva hver tier gir i utgangspunktet, så en
   overstyr-verdi kan vurderes uten å slå opp i prislista. */
.tier-budget-list {
    border: 1px solid var(--bab-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    background: #f9fafb;
}

.tier-budget-head {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bab-text-muted);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bab-border-soft);
}

.tier-budget-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.875rem;
}

.tier-budget-row + .tier-budget-row {
    border-top: 1px solid var(--bab-border-soft);
}

.tier-budget-row.is-current .tier-budget-name {
    font-weight: 600;
    color: var(--bab-primary);
}

.tier-budget-value {
    text-align: right;
    white-space: nowrap;
}

.tier-budget-pages {
    display: block;
    font-size: 0.75rem;
    color: var(--bab-text-muted);
}

.tier-budget-foot {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bab-border-soft);
    font-size: 0.75rem;
    color: var(--bab-text-muted);
}

/* Forklaringslinjene under et nøkkeltall (OpenAI-kortet): navngitt venstrekolonne, innhold til
   høyre. Etikettkolonnen har fast bredde så «tallet =» står under hverandre på tvers av linjene —
   det er den loddrette linjen som gjør at blokken leses som en definisjon og ikke som prosa. */
.metric-lines {
    display: grid;
    /* Fast bredde, ikke max-content: med max-content får hvert nøkkeltall sin egen kolonnebredde,
       og de tre blokkene står da forskjøvet i forhold til hverandre. */
    grid-template-columns: 8.5rem 1fr;
    column-gap: 0.75rem;
    row-gap: 0.15rem;
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
}

.metric-lines dt {
    color: var(--bab-text-faint);
    font-weight: 400;
    text-align: right;
    white-space: nowrap;
}

.metric-lines dt::after {
    content: " =";
}

/* «varsel når tallet er over 2,00» er en setning, ikke en likning — likhetstegnet ville løyet. */
.metric-lines dt.no-equals::after {
    content: "";
}

.metric-lines dd {
    margin: 0;
    color: var(--bab-text-muted);
}

/* Selve måltallet — linjen alle de andre forklarer. Uthevet så blokken har et åpenbart
   utgangspunkt å lese fra. */
.metric-lines dt.is-target {
    color: var(--bab-primary);
    font-weight: 600;
}

/* ⚠️ Tall som er REGNET UT, ikke skrevet i koden: terskler fra konfigurasjon og verdier utledet
   av kundens egen historikk. Uten et visuelt skille ser «1 750» ut som statisk tekst på linje med
   definisjonene over — og et tall som endrer seg hver natt blir da lest som en fast opplysning. */
.metric-lines dd.is-computed {
    color: var(--bab-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Fritstående forklaring uten etikett: går over begge kolonnene. */
.metric-lines .metric-note {
    grid-column: 1 / -1;
    margin-top: 0.15rem;
    font-style: italic;
}