/* App-specifikke regler. Alt visuelt udtryk (farver, typografi, spacing) kommer fra
   MudBlazor-temaet i Theme/MreTheme.cs — denne fil indeholder kun det, et komponent-
   bibliotek ikke dækker: opstartsskærmen, fejlbjælken, spring-til-indhold og bundmenuen. */

/* ---------- Tilgængelighed ---------- */

/* "Spring til indhold" (dok 09 §6.1). Skjult indtil det får tastaturfokus — forskudt ud
   af skærmen frem for display:none, så tastaturnavigation stadig kan nå det. */
.mre-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 12px 20px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 2px solid var(--mud-palette-primary);
    border-radius: 0 0 8px 0;
    font-weight: 600;
    text-decoration: none;
}

.mre-skip-link:focus {
    left: 0;
}

/* Synlig fokusindikator overalt (dok 09 §6.1). Browserens standard forsvinder ofte mod
   farvede flader; denne følger temaets accentfarve og har derfor kontrast i begge temaer. */
:focus-visible {
    outline: 3px solid var(--mud-palette-secondary);
    outline-offset: 2px;
}

/* Respektér brugerens systemvalg om reduceret bevægelse (dok 09 §6.6). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* <nav> omkring topmenuen giver den en landmark uden at lægge en ekstra boks ind i
   MudAppBars flex-layout. */
.mre-nav {
    display: contents;
}

/* Brandet må bruge AppBar'ens tekstfarve, ikke MudLinks primærblå — blå på den mørkegrå
   AppBar giver kun ~2:1 i lyst tema. !important slår .mud-link-klassens egen farve. */
.mre-brand,
.mre-brand .mud-typography {
    color: var(--mud-palette-appbar-text) !important;
}

/* Tekstlinks skal kunne skelnes uden farve (WCAG 1.4.1): et link midt i en sætning, der
   kun er blåt, er usynligt for farveblinde. MudLink understreger som standard kun ved
   hover — her gøres understregningen permanent. Brandet (Underline.None) undtages, og
   knapper er MudButton, ikke .mud-link, så de er upåvirkede. */
a.mud-link:not(.mud-link-underline-none) {
    text-decoration: underline;
}

/* ---------- Indhold ---------- */

.mre-content {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Plads til bundmenuen, så den ikke dækker sidens sidste element på mobil. */
@media (max-width: 959.98px) {
    .mre-content {
        padding-bottom: 88px !important;
    }
}

/* ID'er og relationstyper sættes med monospace, så de er lette at skelne fra brødtekst. */
.mre-mono {
    font-family: 'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', monospace;
    font-size: .875em;
}

/* MudBlazor sætter faneblade i VERSALER. Danske labels som "Oversættelse" og
   "Relationer (27)" bliver unødigt svære at læse — og æ/ø/å ser dårligt ud i versaler.
   Samme begrundelse som TextTransform=none på knapper i MreTheme. */
.mud-tabs .mud-tab {
    text-transform: none;
}

/* Formularer får en læsbar linjelængde frem for at strække sig over hele skærmen. */
.mre-form {
    max-width: 52rem;
}

.mre-type-filter {
    max-width: 14rem;
}

.mre-action-filter {
    max-width: 24rem;
}

.mre-nowrap {
    white-space: nowrap;
}

.mre-role-select {
    max-width: 11rem;
}

/* Deaktiveret række. Kun dæmpet, ikke skjult — statuschippen bærer betydningen. */
.mre-row--muted {
    opacity: .65;
}

.mre-row--detail {
    background: var(--mud-palette-background-gray);
}

/* Brede admin-tabeller skal rulle i deres egen boks, ikke få hele siden til at rulle
   vandret (dok 09 §6.6 kræver ingen vandret sidescroll ned til 320 px). */
.mud-simple-table {
    overflow-x: auto;
}

/* Tekst kun for skærmlæsere. Bruges til at give tabelkolonner uden synlig overskrift
   (fx handlingskolonner) et navn, så tabellen kan navigeres meningsfuldt. */
.mre-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Resultatkort ---------- */

.mre-entity-card__main {
    min-width: 0;
    flex: 1 1 240px;
}

/* Lange beskrivelser klippes til to linjer, så et enkelt kort ikke fylder halvdelen af
   resultatlisten. Titlen klippes aldrig. */
.mre-entity-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Grafvisning ---------- */

/* Grafen er produktet (dok 06 §2.1) og skal kunne ses uden at scrolle. Lærredet får
   derfor den højde, der er tilbage i vinduet, når topbar, sideoverskrift og
   markeringspanel er trukket fra — frem for en fast vh-værdi, der enten spilder plads
   eller skubber grafen ned under folden. */
.mre-graph-canvas {
    width: 100%;
    height: calc(100vh - 260px);
    min-height: 360px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}

/* Filterpanelet ruller for sig selv i stedet for at strække siden: en lang filterliste
   må ikke gøre siden højere end vinduet og dermed skubbe grafen ud af syne. */
@media (min-width: 960px) {
    .mre-graph-filters__panel {
        position: sticky;
        top: 88px;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
}

/* På mobil stables kolonnerne. Uden dette ville man skulle scrolle forbi hele
   filterlisten for at nå grafen — så grafen rykkes øverst. MudGrid er flexbox,
   så order virker. */
@media (max-width: 959.98px) {
    .mre-graph-main {
        order: 1;
    }

    .mre-graph-filters {
        order: 2;
    }

    .mre-graph-canvas {
        height: 60vh;
    }
}

/* ---------- Tidslinjevisning (dok 10) ---------- */

/* Samme princip som .mre-graph-canvas: højden er det, der er tilbage i vinduet, så aksen
   kan ses uden at scrolle. Den vokser dog med antallet af baner, så min-height er sat
   højere end grafens — en tidslinje med fire baner klemt ned i 360 px er ulæselig. */
.mre-timeline-canvas {
    width: 100%;
    height: calc(100vh - 320px);
    min-height: 420px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    overflow: hidden;
}

@media (min-width: 960px) {
    .mre-timeline-filters__panel {
        position: sticky;
        top: 88px;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
}

/* Som på grafsiden rykker selve visningen øverst, når kolonnerne stables — ellers skulle
   man scrolle forbi hele filterlisten for at nå den. */
@media (max-width: 959.98px) {
    .mre-timeline-main {
        order: 1;
    }

    .mre-timeline-filters {
        order: 2;
    }
}

/* Touch-mål på mindst 44x44 px (dok 09 §6.6). MudIconButton er som standard mindre. */
.mre-timeline-zoom .mud-icon-button {
    min-width: 44px;
    min-height: 44px;
}

/* vis-timeline leveres med et lyst, hardkodet udseende. Biblioteket tegner til DOM (ikke
   canvas som Cytoscape), så temaet kan sættes her med de samme design-tokens som resten af
   UI'et — der er derfor ingen farver at sende til JS ud over banefarverne. */
.mre-timeline-canvas .vis-timeline {
    border: none;
    font-family: inherit;
    color: var(--mud-palette-text-primary);
}

.mre-timeline-canvas .vis-panel,
.mre-timeline-canvas .vis-labelset .vis-label,
.mre-timeline-canvas .vis-time-axis .vis-grid.vis-minor {
    border-color: var(--mud-palette-lines-default);
}

.mre-timeline-canvas .vis-time-axis .vis-grid.vis-major {
    border-color: var(--mud-palette-divider);
}

.mre-timeline-canvas .vis-time-axis .vis-text {
    color: var(--mud-palette-text-secondary);
}

.mre-timeline-canvas .vis-labelset .vis-label,
.mre-timeline-canvas .vis-time-axis .vis-text.vis-major {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

/* Nutidsmarkøren skal kunne ses, men ikke konkurrere med bjælkerne om opmærksomheden. */
.mre-timeline-canvas .vis-current-time {
    background-color: var(--mud-palette-secondary);
    opacity: .5;
}

/* --mre-lane sættes inline pr. element fra TimelineLanes.ColorByLane. Farven bruges KUN
   til kant og markør — teksten beholder temaets brødtekstfarve, så kontrasten ikke
   afhænger af, hvilken bane hændelsen tilfældigvis ligger i (dok 09 §6.2).

   Prikken (.vis-dot) undtages: den er et 9 px cirkelomrids, som en venstrekant på 5 px
   eller en stiplet streg blot ville gøre til en klat. */
.mre-timeline-canvas .vis-item.mre-tl-item:not(.vis-dot) {
    background-color: var(--mud-palette-background-gray);
    border-color: var(--mre-lane, var(--mud-palette-lines-default));
    border-left-width: 5px;
    color: var(--mud-palette-text-primary);
}

.mre-timeline-canvas .vis-item.mre-tl-item.vis-selected {
    background-color: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-secondary);
    box-shadow: 0 0 0 2px var(--mud-palette-secondary);
}

.mre-timeline-canvas .vis-item.mre-tl-item .vis-item-content {
    color: var(--mud-palette-text-primary);
}

/* Punkthændelser: prikken arver banefarven, ikke bibliotekets standardblå. */
.mre-timeline-canvas .vis-item.vis-dot {
    border-color: var(--mre-lane, var(--mud-palette-primary));
}

/* Kun årstallet kendt: blød/stiplet kant, så visningen ikke påstår en dagspræcision,
   kilden ikke har (dok 10 §3.4). */
.mre-timeline-canvas .vis-item.mre-tl-item--fuzzy:not(.vis-dot) {
    border-style: dashed;
}

/* Igangværende forhold: ingen hård højrekant, men en pil der siger "fortsætter"
   (dok 10 §3.5). Bjælken er tegnet til i dag — der er ikke skrevet nogen slutdato. */
/* Bemærk klasserne: uden både .mre-tl-item og :not(.vis-dot) ville reglen have lavere
   specificitet end grundreglen ovenfor og aldrig få lov at fjerne højrekanten. */
.mre-timeline-canvas .vis-item.mre-tl-item.mre-tl-item--ongoing:not(.vis-dot) {
    border-right-color: transparent;
}

.mre-timeline-canvas .vis-item.mre-tl-item--ongoing::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 7px solid var(--mre-lane, var(--mud-palette-primary));
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

/* Bjælkerne gøres fokuserbare fra JS (dok 10 §7). Uden en synlig fokusring ville
   tastaturnavigationen være usynlig — og dermed reelt ubrugelig. */
.mre-timeline-canvas .vis-item.mre-tl-item:focus-visible {
    outline: 3px solid var(--mud-palette-secondary);
    outline-offset: 2px;
}

/* Stien i Relation Finder. Et rigtigt <ol>, fordi rækkefølgen bærer betydningen. */
.mre-path {
    margin: 0;
    padding-left: 1.5rem;
}

.mre-path li {
    padding: 6px 0;
}

.mre-path li + li {
    border-top: 1px solid var(--mud-palette-divider);
}

.mre-path-canvas {
    width: 100%;
    height: 50vh;
    min-height: 300px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}

/* Årstalsfeltet skal ikke fylde hele bredden ved siden af sit afkrydsningsfelt. */
.mre-year-field {
    max-width: 8rem;
}

/* Rollefilteret over credits-tabellen. */
.mre-role-filter {
    max-width: 18rem;
}

/* Ulæst notifikation. Farven er et supplement — teksten "Ulæst" bærer betydningen. */
.mre-notification--unread {
    border-left: 3px solid var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

/* ---------- Bundmenu (mobil) ---------- */

.mre-bottom-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1300;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    /* Sikker afstand til hjemmeindikatoren på iOS. */
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mre-bottom-nav__item {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* Touch-mål på mindst 44x44 px (dok 09 §6.6). */
    min-height: 56px;
    min-width: 44px;
    padding: 6px 4px;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
}

.mre-bottom-nav__item--active {
    color: var(--mud-palette-primary);
}

/* Aktivt punkt markeres også med en streg, ikke kun med farve (WCAG 1.4.1). */
.mre-bottom-nav__item--active::before {
    content: "";
    position: absolute;
    top: 0;
    width: 32px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--mud-palette-primary);
}

.mre-bottom-nav__label {
    font-size: .6875rem;
    line-height: 1.2;
    text-align: center;
}

/* ---------- Opstart og fejl ---------- */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    color: #111;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 3000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Der opstod en fejl.";
}

/* Vises før Blazor er indlæst og kan derfor ikke bruge temaets CSS-variabler. */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #2E333A;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #6FA8DC;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: #E3E6EA;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Indlæser");
}
.mre-appeal { min-width: 18rem; }
.mre-resubmit { background: var(--mud-palette-background-gray); }

.mre-vote-body { min-width: 0; flex: 1 1 320px; }

/* Citat fra en anke eller en foreslået oversættelse. */
.mre-quote {
    border-left: 3px solid var(--mud-palette-divider);
    padding-left: 8px;
}

.mre-check-col { width: 3rem; }

/* ---------- Kildeeditor ---------- */
/* Et <fieldset> er valgt frem for en <div>, fordi kildefelterne HØRER sammen som én gruppe:
   skærmlæsere læser legend'en op sammen med hvert felt, så "Kilde 2 (URL)" ikke står uden
   kontekst. Browserens standardramme fjernes — grupperingen skal være semantisk, ikke visuel,
   ellers ville formularen se ud som om kilderne var et separat trin. */
.mre-source-editor {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0; /* uden dette nægter fieldset at krympe i et flex/grid-layout */
}

.mre-source-editor > legend {
    padding: 0;
    margin-bottom: 4px;
    color: var(--mud-palette-text-secondary);
}