/* ==========================================================================
   K438 C »Pille + segmenteret« + K439 C »Begge menuer grønne« (Kim 31/10, godkendt mockup k436-look)

   K439 C: toppen for indloggede (logo · Priser/Organisation/Konto · saldo · ? · profil) OG arbejdsbjælken
   (Lav speak · Produktioner · Stemmer) er én samlet grøn ramme i footerens grøn. Tekst hvid, inaktive punkter
   rgba(255,255,255,.72), logoet i footerens omvendte udgave (»247« i footerens lysegrønne #B8CEC6) og en
   diskret 1 px skillelinje mellem de to bjælker. Saldo-knap, »?« og menuer beholder deres lyse K428-stil.

   K438 C: ingen streger under den valgte side. Topmenu + arbejdsbjælke: blød pille. Faner inde på siderne
   (.v247-page-tabs – Organisation, Konto, Produktioner, Stemmer, Lav speak – samt admin .k331-tabs og
   .k414-tabs): Apple-segmenteret kontrol. Adfærd, links (?tab=) og role/aria er uændrede (kun CSS).

   Filen linkes som det SIDSTE stylesheet i _Host. Komponenternes scoped CSS har [b-…]-attributter, og
   designmanualen (v247-manual.css) bruger !important på arbejdsbjælken – derfor »html body« foran og
   !important præcis dér, hvor en eksisterende !important-regel skal vindes.
   Rollback: fjern <link> til denne fil i _Host.cshtml (og logo-src i MainLayout).
   ========================================================================== */

:root {
    /* Footerens grøn (v247-manual.css »Kim 23/10: mørk footer«) – samme lineære forløb, ingen ny farve */
    /* K441 v4 (Kim 1/11): top og footer 10 % lysere (hvert stop blandet 10 % mod hvidt), så den mørkegrønne »Lav speak« står frem */
    /* K512 A (Kim 1/11): toppen er HVID overalt – også for indloggede og inde i appen – præcis som gæste-toppen.
       Tokens peger nu på gæste-toppens farver; valgt punkt følger K479 C (hvid + mørkegrøn tekst og kant). Rollback: de gamle værdier
       var --v247-chrome-green: linear-gradient(180deg, #2C3A35 0%, #30413C 60%, #33463F 100%), tekst #fff / rgba(255,255,255,.72). */
    --v247-chrome-green: #fff;
    --v247-chrome-text: #182A24;
    --v247-chrome-text-muted: #46524C;
    --v247-chrome-pill: #fff;
    --v247-chrome-hover: transparent;
    --v247-chrome-divider: #E2E8E3;
    --v247-chrome-focus: rgba(44, 74, 66, .45);

    /* K438 segmenteret kontrol */
    --v247-seg-track: #ECEAE4;
    --v247-seg-active: #fff;
    --v247-seg-text: #5F6B65;
    --v247-seg-text-active: #16201C;
    --v247-seg-shadow: 0 1px 3px rgba(22, 32, 28, .14), 0 0 0 .5px rgba(22, 32, 28, .08);
    --v247-seg-speed: 160ms;
}

/* ---------------------------------------------------------------------------
   K439 C – én grøn top for indloggede
   --------------------------------------------------------------------------- */
html body .v247-site-header.is-signed-in {
    background: var(--v247-chrome-green);
    border-bottom: 1px solid var(--v247-chrome-divider);
}

html body .v247-site-header.is-signed-in .v247-topnav.v247-ah {
    background: transparent;
    border-bottom: 0;
}

/* Logo, links og ikoner på grøn */
html body .v247-site-header.is-signed-in .v247-ah-links {
    align-self: center;
    align-items: center;
}

html body .v247-site-header.is-signed-in .v247-ah-link {
    padding: 6px 12px;
    margin: 0 -12px;
    border-bottom: 0;
    border-radius: 99px;
    color: var(--v247-chrome-text-muted);
    line-height: 1.25;
    transition: background-color var(--v247-seg-speed) ease, color var(--v247-seg-speed) ease;
}

html body .v247-site-header.is-signed-in .v247-ah-link:hover {
    color: var(--v247-chrome-text);
}

/* K438 C: valgt punkt i topmenuen = blød pille (ingen streg) */
html body .v247-site-header.is-signed-in .v247-ah-link.active {
    background: var(--v247-mark-bg, #fff);
    color: var(--v247-mark-ink, #1F4A3C);
    box-shadow: var(--v247-mark-ring, inset 0 0 0 1.5px #2C5A4A);
    border-bottom: 0;
}

@media (min-width: 921px) and (max-width: 1180px) {
    html body .v247-site-header.is-signed-in .v247-ah-link {
        padding: 6px 10px;
        margin: 0 -10px;
    }
}

html body .v247-site-header.is-signed-in .v247-ah-link:focus-visible,
html body .v247-site-header.is-signed-in .v247-ah-chip:focus-visible,
html body .v247-site-header.is-signed-in .v247-ah-round:focus-visible,
html body .v247-site-header.is-signed-in .v247-ah-avatar:focus-visible,
html body .v247-site-header.is-signed-in .v247-ah-burger:focus-visible,
html body .v247-site-header.is-signed-in .v247-ah-split a:focus-visible,
html body .v247-site-header.is-signed-in .v247-brand:focus-visible {
    outline: 2px solid var(--v247-chrome-focus);
    outline-offset: 2px;
    box-shadow: none;
}

/* Saldo-knappens og »Tilføj tid«-delens fokusring står inde i den hvide pille – mørk, så den kan ses */
html body .v247-site-header.is-signed-in .v247-ah-split--desk .v247-ah-chip:focus-visible {
    outline-color: #2E4B40;
}

/* Profil-cirklen er mørkegrøn – en tynd lys ring holder den synlig på den grønne top */
html body .v247-site-header.is-signed-in .v247-ah-avatar {
    box-shadow: none;
}

/* Mobil: menu-ikonet bliver hvidt */
html body .v247-site-header.is-signed-in .v247-ah-burger {
    color: var(--v247-chrome-text);
}

/* Arbejdsbjælken (Lav speak · Produktioner · Stemmer) – samme grønne flade, skillelinje øverst.
   Designmanualen sætter hvid flade og grøn streg med !important – her vindes den bevidst. */
html body .v247-site-header.is-signed-in .v247-workspace-bar {
    background: transparent !important;
    background-image: none !important;
    border-top: 1px solid var(--v247-chrome-divider) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    color: var(--v247-chrome-text);
}

html body .v247-site-header.is-signed-in .v247-workspace-nav a,
html body .v247-site-header.is-signed-in .v247-workspace-nav .v247-nav-link {
    min-height: 0;
    padding: 6px 12px;
    border: 0;
    border-radius: 99px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--v247-chrome-text-muted) !important;
    line-height: 20px;
    transition: background-color var(--v247-seg-speed) ease, color var(--v247-seg-speed) ease;
}

html body .v247-site-header.is-signed-in .v247-workspace-nav .v247-nav-link:hover {
    background: var(--v247-chrome-hover) !important;
    color: var(--v247-chrome-text) !important;
}

/* K438 C: valgt punkt i arbejdsbjælken = blød pille */
html body .v247-site-header.is-signed-in .v247-workspace-nav .v247-nav-link.active {
    background: var(--v247-mark-bg, #fff) !important;
    box-shadow: var(--v247-mark-ring, inset 0 0 0 1.5px #2C5A4A) !important;
    color: var(--v247-mark-ink, #1F4A3C) !important;
    font-weight: 600 !important;
}

html body .v247-site-header.is-signed-in .v247-workspace-nav .v247-nav-link:focus-visible {
    outline: 2px solid var(--v247-chrome-focus);
    outline-offset: 2px;
}

/* K436-fix (Kim 31/10): arbejdsbjælken fik for lidt luft – pillen rørte næsten kanterne. Pillen er nu 36 px med 12 px luft
   over og under (bjælke 60 px + 1 px skillelinje), og topbjælken afgiver 6 px (72 → 66), så hele toppen kun vokser 8 px.
   Kun desktop – på mobil (≤ 920 px) ligger arbejdsbjælken i menuen. */
@media (min-width: 921px) {
    html body .v247-site-header.is-signed-in .v247-topnav.v247-ah {
        height: 66px;
    }

    html body .v247-site-header.is-signed-in .v247-workspace-bar,
    html body .v247-site-header.is-signed-in .v247-workspace-bar-inner {
        min-height: 60px;
    }

    html body .v247-site-header.is-signed-in .v247-workspace-nav a,
    html body .v247-site-header.is-signed-in .v247-workspace-nav .v247-nav-link {
        padding: 8px 14px;
    }
}

/* Mikrofonen følger tekstfarven (hvid/dæmpet hvid) */
html body .v247-site-header.is-signed-in .v247-workspace-nav svg,
html body .v247-site-header.is-signed-in .v247-workspace-mic {
    color: currentColor !important;
    stroke: currentColor !important;
}

/* ---------------------------------------------------------------------------
   K438 C – faner inde på siderne som Apple-segmenteret kontrol
   --------------------------------------------------------------------------- */

/* Rækken under sidehovedet mister den tynde streg – kontrollen bærer selv rammen */
html body .v247-design .v247-app-head:not(.v247-app-head--controls) {
    align-items: center;
    border-bottom: 0;
}

html body .v247-page-tabs,
html body .v247-design .v247-app-head .v247-page-tabs,
html body .k331-tabs,
html body .k414-tabs {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 2px;
    width: max-content;
    max-width: 100%;
    height: auto;
    min-height: 0;
    padding: 3px;
    border: 0;
    border-radius: 11px;
    background: var(--v247-seg-track);
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
}

html body .v247-page-tabs::-webkit-scrollbar,
html body .k331-tabs::-webkit-scrollbar,
html body .k414-tabs::-webkit-scrollbar {
    display: none;
}

html body .v247-design .v247-app-head .v247-page-tabs {
    margin: 0 !important;
}

html body .v247-page-tabs .v247-page-tab,
html body .v247-design .v247-app-head .v247-page-tab,
html body .k331-tabs .k331-tab,
html body .k414-tabs a {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 34px;
    min-height: 0;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    color: var(--v247-seg-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--v247-seg-speed) ease, color var(--v247-seg-speed) ease, box-shadow var(--v247-seg-speed) ease;
}

html body .v247-page-tabs .v247-page-tab:hover,
html body .v247-design .v247-app-head .v247-page-tab:hover,
html body .k331-tabs .k331-tab:hover,
html body .k414-tabs a:hover {
    background: transparent;
    color: var(--v247-seg-text-active);
}

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 {
    background: var(--v247-seg-active);
    color: var(--v247-seg-text-active);
    box-shadow: var(--v247-seg-shadow);
}

/* Admin (K414): ingen streg under det valgte punkt */
html body .k414-tabs a.on::after {
    display: none;
}

html body .k414-tabbar-in {
    align-items: center;
    padding-top: 6px;
    padding-bottom: 6px;
}

html body .v247-page-tabs .v247-page-tab:focus-visible,
html body .v247-design .v247-app-head .v247-page-tab:focus-visible,
html body .k331-tabs .k331-tab:focus-visible,
html body .k414-tabs a:focus-visible {
    outline: 2px solid rgba(44, 74, 66, .45);
    outline-offset: -2px;
}

/* Stemmer: lodret skillestreg mellem »Mine stemmer« og »Stemmecasting« inde i kontrollen */
html body .v247-page-tabs .voices-tabs-sep {
    flex: none;
    align-self: center;
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: rgba(22, 32, 28, .14);
}

/* Admin-kundesiden: luft over kontrollen som før (stregen er væk) */
html body .k331-tabs {
    margin-top: 16px;
}

@media (max-width: 600px) {
    html body .v247-page-tabs,
    html body .v247-design .v247-app-head .v247-page-tabs {
        margin: 0 !important;
        padding: 3px;
    }

    html body .v247-page-tabs .v247-page-tab,
    html body .v247-design .v247-app-head .v247-page-tab,
    html body .k331-tabs .k331-tab,
    html body .k414-tabs a {
        padding: 0 12px;
        font-size: 13px;
    }
}

@media (max-width: 640px) {
    /* Organisation havde fuld bredde og strakte fanerne på mobil – kontrollen skal kun være så bred som indholdet */
    html body .v247-page-tabs.organization-tabs {
        width: max-content;
    }

    html body .v247-page-tabs .organization-tab {
        flex: none;
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .v247-site-header.is-signed-in .v247-ah-link,
    html body .v247-site-header.is-signed-in .v247-workspace-nav .v247-nav-link,
    html body .v247-page-tabs .v247-page-tab,
    html body .k331-tabs .k331-tab,
    html body .k414-tabs a {
        transition: none;
    }
}

/* K465 »Én menulinje« (Kim 1/11, Features:OneMenuLine – TEST): »Lav speak« står i topmenuen med sin mikrofon.
   Samme pille, farver og tekststørrelse som de øvrige punkter – kun luft mellem ikon og tekst. */
html body .v247-site-header.is-signed-in .v247-ah-link--speak {
    gap: 6px;
}

/* K541 L8 (Kim 2/11): »Seneste speaks · Mapper« under Lav speak får topmenuens rammeform (den afrundede pille) – farverne er uændrede. */
html body .v247-speak-recent .v247-page-tabs .v247-page-tab {
    border-radius: 99px;
}