/* Fakturastatus – fiskedager-chip.

   Lastes ETTER MudBlazor.min.css og responsive-lists.css (se index.html).

   Hvorfor global CSS og ikke en scoped .razor.css: se forklaringen øverst i
   responsive-lists.css. Chippen bor riktignok i sin egen komponent med egen markup,
   men den brukes både i fartøylista og i Faktura-fanen, og fargene deles med
   modul-statuschippene – da er én global fil enklere å holde i synk enn to scopede.

   MudChip kan ikke fylles delvis, så chippen er et eget element med
   linear-gradient-bakgrunn. Andelen kommer inn som CSS-variabelen --fd-fill (0–100 %)
   satt inline av komponenten.

   Fargene er tonet mot surface med color-mix (samme idiom som app.css) i stedet for
   full --mud-palette-success. Det er nødvendig: #34D399 er en lys mint, og teksten
   inni chippen ligger over BEGGE segmentene. Tonede flater lar --mud-palette-text-primary
   være lesbar i både lys og mørk modus. */

.fishing-days-chip {
    --fd-fill: 0%;
    --fd-billed: color-mix(in oklab, var(--mud-palette-success) 38%, var(--mud-palette-surface));
    --fd-unbilled: color-mix(in oklab, var(--mud-palette-text-secondary) 14%, var(--mud-palette-surface));

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 24px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid color-mix(in oklab, var(--mud-palette-text-secondary) 26%, transparent);
    background-image: linear-gradient(
        to right,
        var(--fd-billed) 0 var(--fd-fill),
        var(--fd-unbilled) var(--fd-fill) 100%
    );
    color: var(--mud-palette-text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    /* Chippen står i en tabellcelle som kan krympe på telefon – den skal beholde formen. */
    flex-shrink: 0;
}

/* Noe er fakturert: grønn ramme gjør delvis/full status tydelig også for den som
   ikke skiller de tonede flatene fra hverandre på en dårlig skjerm. */
.fishing-days-chip--billed {
    border-color: color-mix(in oklab, var(--mud-palette-success) 50%, transparent);
}

/* Ingenting kjent om fakturering (backend mangler feltet). Ensfarget nøytral. */
.fishing-days-chip--unknown {
    background-image: none;
    background-color: var(--fd-unbilled);
    border-style: dashed;
}

/* Fakturert mer enn brukt. Fyllet er allerede klemt til 100 %; den stiplede rammen
   markerer at tallene ikke går opp uten å rope varsel. */
.fishing-days-chip--prepaid {
    border-style: dashed;
    border-color: color-mix(in oklab, var(--mud-palette-success) 55%, transparent);
}

/* Faktura-fanen: samme chip, men litt større siden den står alene i en oppsummering. */
.fishing-days-chip--large {
    min-width: 76px;
    height: 30px;
    padding: 0 14px;
    border-radius: 15px;
    font-size: 0.875rem;
}