/* Fartøysloggen og eierperiodene på fartøysiden.

   Hvorfor globalt og ikke scoped .razor.css: Blazor setter scope-attributtet bare på
   komponentens egne HTML-elementer. Klasser som havner på MudBlazor-komponenter via
   Class="..." får aldri attributtet, så scopede regler treffer ikke. Se
   responsive-lists.css for samme begrunnelse.

   Lastes ETTER MudBlazor.min.css (se index.html), så reglene vinner uten !important.
   Mobilbrekkpunkt: 599px – samme som app.css og MudBlazor Breakpoint.Xs. */


/* ─────────────────────────────────────────────────────────────
   Filterraden over loggen
   ───────────────────────────────────────────────────────────── */

.vessel-log-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.vessel-log-filter-type {
    flex: 1 1 200px;
    min-width: 170px;
    max-width: 260px;
}

.vessel-log-filter-date {
    flex: 0 1 160px;
    min-width: 140px;
}

/* På telefon skal hvert filter få full bredde i stedet for å klemmes sammen. */
@media (max-width: 599px) {
    .vessel-log-filter-type,
    .vessel-log-filter-date {
        flex: 1 1 100%;
        max-width: none;
    }
}


/* ─────────────────────────────────────────────────────────────
   Selve loggen: en vertikal skinne med prikk per hendelse
   ───────────────────────────────────────────────────────────── */

.vessel-log-list {
    display: flex;
    flex-direction: column;
}

.vessel-log-item {
    display: flex;
    gap: 12px;
    align-items: stretch;

    /* Settes per hendelse i markup, ut fra hendelsestypen. */
    --vessel-log-accent: var(--mud-palette-text-secondary);
}

.vessel-log-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: 34px;
}

.vessel-log-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    color: var(--vessel-log-accent);
    background: color-mix(in oklab, var(--vessel-log-accent) 14%, transparent);
    border: 1px solid color-mix(in oklab, var(--vessel-log-accent) 40%, transparent);
}

.vessel-log-line {
    flex: 1 1 auto;
    width: 2px;
    min-height: 12px;
    background: color-mix(in oklab, var(--mud-palette-text-secondary) 24%, transparent);
}

/* Siste hendelse skal ikke ha en linje som peker ned i ingenting. */
.vessel-log-item:last-child .vessel-log-line {
    display: none;
}

.vessel-log-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 20px;
}

.vessel-log-item:last-child .vessel-log-body {
    padding-bottom: 0;
}

.vessel-log-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.vessel-log-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
}

/* Eierskifte er hendelsen admin leter etter, og skal kunne finnes ved å skumme siden. */
.vessel-log-item--major .vessel-log-body {
    background: color-mix(in oklab, var(--vessel-log-accent) 7%, transparent);
    border-left: 3px solid var(--vessel-log-accent);
    border-radius: 4px;
    padding: 8px 12px 12px;
    margin-bottom: 20px;
}

.vessel-log-item--major:last-child .vessel-log-body {
    margin-bottom: 0;
}

.vessel-log-details {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    margin: 4px 0 0;
    padding: 10px 12px;
    border-radius: 4px;
    background: color-mix(in oklab, var(--mud-palette-text-secondary) 10%, transparent);
    overflow-x: auto;
    white-space: pre;
}


/* ─────────────────────────────────────────────────────────────
   Gruppeoverskrift for eierperioder i installasjonstabellen
   ───────────────────────────────────────────────────────────── */

.ownership-period-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

/* Gruppeoverskriften skal skille periodene tydelig fra radene under. */
.ownership-period-row {
    background: color-mix(in oklab, var(--mud-palette-primary) 8%, transparent);
}

/* ─────────────────────────────────────────────────────────────
   Detaljene på en hendelse som lesbare felt. Rå JSON ligger bak
   «Vis rådata» – den er for feilsøking, ikke for daglig bruk.
   ───────────────────────────────────────────────────────────── */

.vessel-log-detail-grid {
    display: grid;
    grid-template-columns: minmax(130px, max-content) 1fr;
    gap: 6px 16px;
    margin: 8px 0 4px;
}

.vessel-log-detail-grid dt {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.vessel-log-detail-grid dd {
    margin: 0;
    min-width: 0;
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

/* Et eierskifte kan deaktivere titalls enheter. Listen får sin egen scroll så den
   ikke dytter resten av loggen ut av skjermen. */
.vessel-log-detail-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    max-width: 100%;
    max-height: 132px;
    overflow-y: auto;
    padding-right: 4px;
}

.vessel-log-detail-item {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    line-height: 1.7;
    padding: 1px 6px;
    border-radius: 3px;
    background: color-mix(in oklab, var(--mud-palette-text-secondary) 12%, transparent);

    /* Ikke nowrap: den hindrer all ombrekking, og da er ett langt enhetsnavn nok til
       å dytte hele siden ut i horisontal scroll. Navnene er korte i praksis, så dette
       slår sjelden inn – men når det gjør det, brekker det i stedet for å sprenge. */
    overflow-wrap: anywhere;
    max-width: 100%;
}

/* To kolonner blir for trangt på telefon – etiketten legger seg over verdien. */
@media (max-width: 600px) {
    .vessel-log-detail-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .vessel-log-detail-grid dd {
        margin-bottom: 10px;
    }
}


/* ─────────────────────────────────────────────────────────────
   Korreksjonsdialogen for eierskifte
   ───────────────────────────────────────────────────────────── */

/* Notatet som allerede står på eierskiftet er fritekst admin har skrevet.
   pre-wrap beholder linjeskiftene; uten anywhere ville en lang URL eller et
   langt ord uten mellomrom stukket ut av dialogen. */
.correction-original-note {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* På telefon får ikke «Avbryt» og «Lagre korreksjon» plass ved siden av
   hverandre: MudBlazor legger knappene i en flex-rad som ikke brekker, og
   dialogen er da bare ~260px bred innvendig. Full bredde er samtidig et
   større trykkmål.

   :has() brukes for å nå MudBlazors egen actions-container uten å kunne sette
   en klasse på den – samme teknikk som tr:has(.vessel-blink) i fartøyslista. */
@media (max-width: 599px) {
    .mud-dialog:has(.correction-dialog) .mud-dialog-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .mud-dialog:has(.correction-dialog) .mud-dialog-actions .mud-button-root {
        flex: 1 1 100%;
        margin: 0;
    }
}

/* HI-retursimulatoren (KUN FOR TEST) i meldingsloggen. NAF-strengen er ett langt ord uten
   mellomrom, så den må brytes for ikke å stikke ut av dialogen. */
.hi-simulator-naf {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Samme som for korreksjonsdialogen: MudBlazors knapperad brekker ikke av seg selv, og
   «Avbryt» + «Simuler retur» får ikke plass ved siden av hverandre på telefon. */
@media (max-width: 599px) {
    .mud-dialog:has(.hi-simulator-dialog) .mud-dialog-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .mud-dialog:has(.hi-simulator-dialog) .mud-dialog-actions .mud-button-root {
        flex: 1 1 100%;
        margin: 0;
    }
}