/* ==========================================================================
   K474 »Én fanestil« (Kim 1/11): alle faneskiftere på platformen ligner hinanden.

   Reference: den segmenterede kontrol fra K438 C (v247-chrome-k436.css) – grå afrundet bane, valgt fane som hvid,
   løftet pille. Den fælles klasse er .v247-page-tabs (bane) + .v247-page-tab (fane). Nye faner skal bare bruge de to
   klasser, så får de automatisk samme udseende. Denne fil tilføjer:
   - .v247-tab-count        tællere inde i en fane (fx »Mapper 4«) – lille og ens overalt
   - .v247-page-tabs--fill  fanerne deler hele bredden (mobilens »Manus · Lydfiler«)
   - MudTabs (admin)        samme bane og pille i stedet for Materials understreg – gælder alle MudTabs
   - de få steder, hvor en gammel komponentregel ellers ville vinde

   Linkes lige efter v247-chrome-k436.css i _Host. Rollback: fjern <link> til denne fil.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Tæller inde i en fane
   --------------------------------------------------------------------------- */
html body .v247-page-tabs .v247-tab-count,
html body .k414-tabs .v247-tab-count {
    display: inline-grid;
    place-items: center;
    flex: none;
    box-sizing: border-box;
    width: auto;
    min-width: 20px;
    height: 20px;
    margin: 0 0 0 6px;
    padding: 0 6px;
    border-radius: 10px;
    /* K479 (Kim 1/11): tilbage til den solide tæller fra før K474 (v247-manual.css »Tællere – solide«):
       mørkegrøn #2C5A4A med hvide tal. Den lyse grå udgave forsvandt på beige. */
    background: var(--v247-sel-strong, #2C5A4A) !important;
    color: #fff !important;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

html body .v247-page-tabs .v247-page-tab:is(.is-active, .active, [aria-selected="true"], [aria-current="page"]) .v247-tab-count,
html body .k414-tabs a.on .v247-tab-count {
    background: var(--v247-sel-strong, #2C5A4A) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------------------
   Lav speak / Produktioner: »Seneste speaks · Mapper« (FolderWorkspace)
   Rækken bærer også tags og knapper til højre – kun selve fanerne er kontrollen.
   --------------------------------------------------------------------------- */
html body .folder-workspace-tabs > .v247-page-tabs {
    flex: 0 1 auto;
}

/* ---------------------------------------------------------------------------
   Fyld bredden (mobilens »Manus · Lydfiler« på Lav speak › Mange filer)
   --------------------------------------------------------------------------- */
html body .v247-page-tabs.v247-page-tabs--fill {
    display: flex;
    width: 100%;
}

html body .v247-page-tabs.v247-page-tabs--fill .v247-page-tab {
    flex: 1 1 0;
    min-width: 0;
}

/* Kontrollen findes kun på mobil (som før) */
html body .v247-ws-mobile-switch.v247-page-tabs {
    display: none;
}

@media (max-width: 760px) {
    html body .v247-ws-mobile-switch.v247-page-tabs {
        display: flex;
    }
}

/* ---------------------------------------------------------------------------
   MudTabs (admin: Kunder, Speakere, Produkter, Abonnementer, Webhooks …)
   Samme bane og pille som .v247-page-tabs. Materials understreg, store bogstaver og skygge fjernes.
   --------------------------------------------------------------------------- */
html body .mud-tabs .mud-tabs-tabbar {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    color: inherit;
}

html body .mud-tabs .mud-tabs-tabbar .mud-tabs-tabbar-inner {
    min-height: 0;
    align-items: center;
}

html body .mud-tabs .mud-tabs-tabbar-content .mud-tabs-tabbar-wrapper {
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
    background: var(--v247-seg-track);
}

html body .mud-tabs .mud-tab-slider {
    display: none;
}

html body .mud-tabs .mud-tab {
    width: auto;
    height: 34px;
    min-height: 0;
    min-width: 0;
    padding: 0 14px;
    border-radius: 9px;
    background: transparent;
    color: var(--v247-seg-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    transition: background-color var(--v247-seg-speed) ease, color var(--v247-seg-speed) ease, box-shadow var(--v247-seg-speed) ease;
}

html body .mud-tabs .mud-tab:hover {
    background: transparent;
    color: var(--v247-seg-text-active);
}

html body .mud-tabs .mud-tab.mud-tab-active,
html body .mud-tabs .mud-tab.mud-tab-active:hover {
    background: var(--v247-seg-active);
    color: var(--v247-seg-text-active);
    box-shadow: var(--v247-seg-shadow);
}

html body .mud-tabs .mud-tab:focus-visible {
    outline: 2px solid rgba(44, 74, 66, .45);
    outline-offset: -2px;
}

html body .mud-tabs .mud-tab .mud-tab-icon-text {
    width: 18px;
    height: 18px;
    font-size: 18px;
    margin-inline-end: 6px;
}

@media (max-width: 600px) {
    html body .mud-tabs .mud-tab {
        padding: 0 12px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .mud-tabs .mud-tab {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   K479 C »Hvid pille + mørkegrøn tekst og tynd mørkegrøn kant« (Kim godkendt 1/11)
   Én regel for markering i hele platformen:
   1. Valgt (fane, segment, valgt mappe/chip): hvid flade + tekst --v247-sel-ink + 1,5 px kant --v247-sel-strong.
      Aldrig fyldt grøn – fyldt mørkegrøn er forbeholdt den primære handling (Lav speak).
   2. Tæller: altid solid --v247-sel-strong med hvide tal (se øverst).
   3. Mappe, som nye speaks gemmes i: mørkegrøn cirkel om ikonet (uændret).
   Fælles tokens + klassen .v247-mark kan bruges af alle andre markeringer (fx valgt mappe, K480).
   Kanten er en inset box-shadow, så intet flytter sig. Rollback: fjern denne blok.
   --------------------------------------------------------------------------- */
:root {
    --v247-mark-bg: #fff;
    --v247-mark-ink: var(--v247-sel-ink, #1F4A3C);
    --v247-mark-line: var(--v247-sel-strong, #2C5A4A);
    --v247-mark-ring: inset 0 0 0 1.5px var(--v247-mark-line);
}

html body .v247-mark,
html body .v247-page-tabs .v247-page-tab:is(.is-active, .active, [aria-selected="true"], [aria-current="page"]),
html body .v247-design .v247-app-head .v247-page-tab:is(.is-active, .active, [aria-selected="true"], [aria-current="page"]),
html body .k331-tabs .k331-tab.on,
html body .k414-tabs a.on,
html body .mud-tabs .mud-tab.mud-tab-active,
html body .mud-tabs .mud-tab.mud-tab-active:hover,
html body .va-access-seg button.on:not(.is-off) {
    background: var(--v247-mark-bg) !important;
    color: var(--v247-mark-ink) !important;
    box-shadow: var(--v247-mark-ring), var(--v247-seg-shadow) !important;
}

/* ---------------------------------------------------------------------------
   K480 A2 (Kim 1/11): valgt mappe i mappelisten (Lav speak › Mapper, Produktioner) følger K479 C (tokens --v247-mark-*):
   hvid flade, mørkegrøn tekst og 1,5 px mørkegrøn kant HELE vejen rundt. Før dækkede knappens lysegrønne flade den
   indvendige kant, så den kun kunne ses ved »⋯« – som en klamme i den ene ende. Børnene er nu gennemsigtige.
   Rollback: fjern denne blok.
   --------------------------------------------------------------------------- */
html body li.folder-explorer-item.is-current,
html body .speaks-component-shell.speaks-component-shell.speaks-component-shell.speaks-component-shell li.folder-explorer-item.is-current {
    background: var(--v247-mark-bg, #fff) !important;
    color: var(--v247-mark-ink, #1F4A3C) !important;
    box-shadow: var(--v247-mark-ring, inset 0 0 0 1.5px #2C5A4A) !important;
}

html body li.folder-explorer-item.is-current > *,
html body .speaks-component-shell.speaks-component-shell.speaks-component-shell.speaks-component-shell li.folder-explorer-item.is-current > * {
    background: transparent !important;
    color: var(--v247-mark-ink, #1F4A3C) !important;
}

/* Mobil: mappen er en chip med egen 1,5 px kant – kanten bliver mørkegrøn, ingen ekstra indvendig streg. */
@media (max-width: 767.98px) {
    html body .speaks-component-shell.speaks-component-shell.speaks-component-shell.speaks-component-shell li.folder-explorer-item.is-current {
        border-color: var(--v247-mark-line, #2C5A4A) !important;
        box-shadow: 0 1px 2px rgba(22, 32, 28, .08) !important;
    }
}

/* K480 A2.1: mappelisten var 9 px bredere end sit kort (gitterets kolonne fulgte indholdet), så den valgte mappes kant
   stak ud over kortets højre kant. Kolonnen følger nu kortets indre bredde. Kun desktop – mobilen har sit eget gitter. */
@media (min-width: 768px) {
    html body .speaks-component-shell.speaks-component-shell.speaks-component-shell.speaks-component-shell .folder-explorer-pane {
        grid-template-columns: minmax(0, 1fr);
    }
}