/* Responsivt oppsett for liste- og filtersider.
   Lastes ETTER MudBlazor.min.css (se index.html), slik at reglene her vinner
   uten !important.

   Hvorfor globalt og ikke scoped .razor.css: Blazor setter scope-attributtet
   (b-xxxxx) bare på vanlige HTML-elementer i komponentens egen markup. En
   Class="..." som sendes videre til en MudBlazor-komponent får aldri
   attributtet, så en scoped regel som .min-klasse[b-xxxxx] treffer ingenting.
   Layout-klasser som skal ligge på MudBlazor-komponenter må derfor være
   globale.

   Mobilbrekkpunkt: 599px – samme som app.css og MudBlazor Breakpoint.Xs. */


/* ─────────────────────────────────────────────────────────────
   App-varslinger (/announcements)
   ───────────────────────────────────────────────────────────── */

.announcement-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.announcement-page-header-text {
    min-width: 0;
}

/* Knappen skal aldri klemmes sammen slik at teksten renner ut av flaten. */
.announcement-new-button {
    flex-shrink: 0;
    white-space: nowrap;
}

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

.announcement-search {
    flex: 1 1 240px;
    min-width: 0;
    max-width: 440px;
}

.announcement-filters-secondary {
    display: flex;
    align-items: center;
    gap: 12px;
}

.announcement-status-filter {
    flex: 0 1 170px;
    min-width: 150px;
}

.announcement-count {
    white-space: nowrap;
}

.announcement-table-message {
    display: -webkit-box;
    max-width: 420px;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.announcement-card {
    border-radius: 10px;
}

.announcement-card-chips {
    flex-wrap: wrap;
}

.announcement-card-title {
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.announcement-card-message {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.announcement-card-row {
    display: grid;
    grid-template-columns: 84px 1fr;
    align-items: baseline;
    column-gap: 12px;
}

.announcement-card-row > * {
    overflow-wrap: anywhere;
}


/* ─────────────────────────────────────────────────────────────
   Båter på sjøen / posisjonslogg (/positions/logs)
   ───────────────────────────────────────────────────────────── */

/* Tittel, filtre og knapper ligger utenfor MudTable. Grunnen: MudToolBar har
   fast høyde (56px) og flex-nowrap, og html/body har overflow-x: clip
   (app.css). Alt som ikke fikk plass i verktøylinja ble derfor klippet bort
   uten at man kunne scrolle til det – knappene forsvant rett og slett ut av
   skjermen på telefon.

   Oppsettet under bryter *intrinsisk*: flex-basis på hvert felt gjør at linjene
   deler seg når plassen tar slutt, uavhengig av media queries. Det holder også
   når nettleseren står i «desktop-modus» og rapporterer 980px viewport på en
   telefon – da slår ingen mobilbrekkpunkt inn, men oppsettet virker likevel. */

.positions-page {
    min-width: 0;
}

.positions-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 16px;
    min-width: 0;
}

/* Tittelen skal aldri brekkes ord for ord slik den gjorde da den lå som
   flex-item i verktøylinja. Får den ikke plass, brytes knappene i stedet. */
.positions-header-title {
    flex: 0 0 auto;
    margin: 0 auto 0 0;
    white-space: nowrap;
}

.positions-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
}

.positions-header-actions .mud-button-root {
    white-space: nowrap;
}

.positions-filters {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    min-width: 0;
}

/* flex-basis er ønsket bredde, ikke minstebredde: feltene legger seg under
   hverandre når linja blir trangere enn summen, i stedet for å klemmes
   sammen til ikonbredde. */
.positions-search {
    flex: 1 1 260px;
    min-width: 0;
    max-width: 420px;
}

.positions-status-filter {
    flex: 1 1 190px;
    min-width: 0;
    max-width: 240px;
}

/* Tabellen scroller vannrett inne i sin egen boks. Hintet vises bare der det
   er relevant – se brekkpunktet lenger ned. */
.positions-scroll-hint {
    display: none;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--mud-palette-text-secondary);
}

/* Én linje per celle. Med 11 kolonner blir radene ellers 3–4 linjer høye på
   telefon, og lista blir umulig å skumme. Ingen kolonner skjules – innholdet
   er der, det scrolles til. */
.positions-table .mud-table-root th,
.positions-table .mud-table-root td:not([colspan]) {
    white-space: nowrap;
}

/* Detaljraden er fritekst (NAF-melding, feilårsak) og skal bryte normalt. */
.positions-detail-cell {
    white-space: normal;
}

/* Cella har colspan over alle kolonnene og er dermed like bred som hele
   tabellen. Uten dette ville innholdet ligge fast ved tabellens venstrekant og
   være helt usynlig når man har scrollet mot høyre. sticky lar panelet følge
   med i scrollen, og max-width holder teksten innenfor skjermbredden.
   På store skjermer er tabellen smalere enn viewport, så ingen av delene
   får noen effekt der. */
.positions-detail-inner {
    position: sticky;
    left: 0;
    max-width: calc(100vw - 32px);
}


/* ─────────────────────────────────────────────────────────────
   Nettbrett og smale vinduer (< 960px)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 959px) {
    .positions-scroll-hint {
        display: flex;
    }
}


/* ─────────────────────────────────────────────────────────────
   Mobil (< 600px)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 599px) {

    /* ── App-varslinger ── */

    .announcement-paper {
        padding: 12px !important;
    }

    .announcement-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .announcement-new-button {
        width: 100%;
    }

    .announcement-search {
        flex-basis: 100%;
        max-width: none;
    }

    /* Filter og teller deler én linje under søkefeltet. */
    .announcement-filters-secondary {
        width: 100%;
    }

    .announcement-status-filter {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* ── Posisjonslogg ── */

    /* Tittel på egen linje, knappene på linja under der de deler bredden likt.
       Ytterste barn kan være en MudTooltip-wrapper, derfor settes flex på > *
       og bredde på selve knappen. */
    .positions-header-title {
        flex: 1 1 100%;
        margin-right: 0;
    }

    .positions-header-actions {
        flex: 1 1 100%;
    }

    .positions-header-actions > * {
        flex: 1 1 0;
        min-width: 0;
    }

    .positions-header-actions .mud-button-root {
        width: 100%;
    }

    /* Søk og filter under hverandre i full bredde – halve skjermen hver blir
       for trangt til «Leveringsstatus» og søkeplaceholderen. */
    .positions-search,
    .positions-status-filter {
        flex: 1 1 100%;
        max-width: none;
    }

    /* Smalere celler: alle kolonnene vises på telefon, så hver piksel padding
       teller på tvers av 10–11 kolonner. */
    .positions-table .mud-table-cell,
    .vessels-table .mud-table-cell,
    .vessels-table .mud-table-head .mud-table-cell {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Fartøylista setter min-width inline på hver <MudTh> (120–200px), som
       summerer seg til ~1070px uansett hvor lite innhold radene har. Inline
       style krever !important for å overstyres. Nullstilt her lar tabellen
       krympe mot min-content og bryte tekst i stedet – ingen data forsvinner,
       raden blir bare høyere. */
    .vessels-table .mud-table-root th,
    .vessels-table .mud-table-root td {
        min-width: 0 !important;
    }
}