/* ==========================================================================
   ARCHITECTURAL NOTES & MAINTAINER GUIDE (READ BEFORE EDITING)
   ==========================================================================
   
   CAUTION: This tab implementation uses specific strategies to handle 
   borders and layout. Do NOT apply "standard" CSS fixes without verifying 
   these fundamental constraints:

   1. GLOBAL BASELINE ARCHITECTURE
      - The bottom border is drawn globally by #branding_header, NOT by the tabs.
      - Modern Style: Intentionally flows over the baseline (no masking).
      - Classic Style: "Erases" the baseline under the active tab using a 
        colored ::after patch positioned via z-index.

   2. DOM STRUCTURE & "LAST CHILD"
      - The tab list is followed by an .actions container (New/More buttons).
      - Therefore, standard CSS :last-child selectors on tabs will fail.
      - We rely on negative margins to ensure borders align correctly regardless 
        of which tab is visually last.

   3. BORDER COLLAPSE STRATEGY (Classic)
      - We use negative margins (margin-left: calc(var(--tab-border-width) * -1))
        to physically overlap the borders of adjacent tabs.
      - This creates a "collapsed border" effect where 2px + 2px = 2px.
      - Do NOT remove these margins or switch to single-sided borders without 
        refactoring the entire logic.

   4. OVERFLOW TIMING
      - The .header-middle container has specific padding-right and min-width: 0.
      - This is CRITICAL to force the JS ResizeObserver to trigger the "More" 
        menu dropdown *before* the tabs visually crash into the search icon.
   ==========================================================================
*/

/* ==========================================================================
   TABS & HEADER – FINAL (Early Breakpoint & Robust Patch)
   ========================================================================== */

/* 1) KONFIGURASJON */
:root {
    --header-height: var(--t-appbar-height, 48px);
    --header-pad-x: 8px;
    --tab-height: 36px;
    --tab-gap: 7px;
    --tab-radius: var(--t-border-radius, 4px);
    /* TYKKELSE: 2px */
    --tab-border-width: 1px;
    /* Farger */
    --tab-bg: var(--mud-palette-surface);
    --tab-bg-hover: var(--mud-palette-action-default-hover);
    --tab-bg-active: var(--mud-palette-background);
    --tab-text: var(--mud-palette-text-default);
    --tab-text-active: var(--mud-palette-primary);
    --tab-border-color: var(--mud-palette-lines-default);
    --header-bg: var(--mud-palette-appbar-background);
    --tab-dot-size: 8px;
    --tab-dot-color: var(--mud-palette-primary);
    /* Aktiv fane ramme-farge */
    --tab-border-color-active: rgba(255, 255, 255, 0.12);
}

/* 2) HEADER CONTAINER */
#branding_header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 20;
    height: var(--header-height);
    padding: 0 var(--header-pad-x);
    background: var(--header-bg);
    box-shadow: none;
    /* Global bunnlinje */
    border-bottom: var(--tab-border-width) solid var(--tab-border-color) !important;
    box-sizing: border-box;
    transition: margin-left 0.24s;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    width: 100%;
    position: relative;
}

    .header-content::before {
        display: none;
    }

/* MudBlazor Reset */
.mud-appbar-dense::after, .mud-toolbar::after, .mud-toolbar-dense::after {
    content: none !important;
}

/* FIX OVERLAPP / "MER"-MENY TIMING:
   Vi må lure systemet til å tro at det er mindre plass enn det ser ut som.
   Ved å legge på en stor padding-right her, stopper fanene tidligere.
*/
.header-middle {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    /* VIKTIG: Dette er bufferen som hindrer kollisjon. 
       Øk denne (f.eks. til 60px) hvis det fortsatt kræsjer. */
    padding-right: 24px;
}

.header-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding-left: 12px;
    border-left: var(--tab-border-width) solid var(--tab-border-color);
    z-index: 50;
    background: var(--header-bg);
}

#branding_header:has(.tl-tabs-classic) .header-right {
    border-left: var(--tab-border-width) solid var(--tab-border-color);
}

/* 3) TABS BASE */
.tl-tabs {
    width: 100%;
    color: var(--tab-text);
}

.tl-tabs-toolbar, .tl-tabs-toolbar-inner, .tl-tabs-toolbar-content {
    height: 100%;
}

.tl-tabs-toolbar-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    gap: var(--tab-gap);
}

.tl-tabs-actions {
    position: relative;
    display: flex;
    gap: var(--tab-gap);
    flex-shrink: 0;
    height: var(--tab-height);
    align-items: center;
}

/* 4) TAB ITEM BASE */
.tl-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--tab-height);
    padding: 0 8px 0 10px;
    margin: 4px 0;
    background: transparent;
    box-sizing: border-box;
    border-radius: var(--tab-radius);
    /* Reserver plass */
    border: var(--tab-border-width) solid transparent;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    font-weight: 500;
    transition: background-color .1s;
}

    .tl-tab:hover {
        background: var(--tab-bg-hover);
        color: var(--tab-text-active);
    }

.tl-tab-icon {
    flex-shrink: 0;
}

.tl-tab-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tl-tab-title {
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-tab-sub {
    font-size: 11px;
    font-weight: 500;
    opacity: .7;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Elements inside Tab */
.close-button-wrap {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .2s;
}

.tl-tab:hover .close-button-wrap, .tl-tab-active .close-button-wrap {
    opacity: 1;
}

.close-button {
    padding: 0;
    font-size: 14px;
    color: inherit;
    opacity: .7;
}

    .close-button:hover {
        background-color: var(--mud-palette-action-default);
        opacity: 1;
    }

.edited-mark-wrap {
    display: none;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.edited-mark {
    width: var(--tab-dot-size);
    height: var(--tab-dot-size);
    border-radius: 50%;
    background: var(--tab-dot-color);
}

.tl-tab[data-modified="true"] .edited-mark-wrap {
    display: flex;
}


/* ==========================================================================
   5) MODERN STYLE (Right-Sided Separators - FIXED)
   ========================================================================== */

/* --- Base Modern Tab Appearance --- */
.tl-tabs-modern .tl-tab {
    border-radius: var(--tab-radius);
    border-color: transparent;
    transition: background 0.2s ease, color 0.2s ease;
}

    .tl-tabs-modern .tl-tab.tl-tab-active {
        background: var(--tab-bg-active);
        color: var(--tab-text-active);
        z-index: 10;
    }

    /* Ensure Classic patch is hidden in Modern */
    .tl-tabs-modern .tl-tab::after {
        display: none;
    }

/* --- Separators (Modern - BORDER SNAP FIX - CENTERED) --- */

/* 1. Reset Actions separator */
.tl-tabs-modern .tl-tabs-actions::before {
    display: none;
}

/* 2. Define Separator using BORDER-RIGHT */
.tl-tabs-modern .tl-tabs-toolbar-wrapper .tl-tab::before {
    content: "";
    position: absolute;
    /* MATH FIX: 
       We added "- 1 * var(--tab-border-width)" back in.
       - Gap/2 (-3px) 
       - Border Width (-1px) 
       = -4px total.
       This pushes the border-line exactly 1px further right to center it visually.
    */
    right: calc(-0.5 * var(--tab-gap) - 1 * var(--tab-border-width) - 0.5px);
    /* Crisp Rendering using Border instead of Background */
    width: 0;
    border-right: 1px solid var(--tab-border-color);
    background: transparent;
    /* Vertical Size */
    top: 15%;
    bottom: 15%;
    pointer-events: none;
    display: block !important;
}

/* 3. Hide separator on the ACTIVE tab */
.tl-tabs-modern .tl-tab.tl-tab-active::before {
    display: none !important;
}

/* 4. Hide separator on the tab BEFORE the active tab */
.tl-tabs-modern .tl-tab:has(+ .tl-tab.tl-tab-active)::before {
    display: none !important;
}

/* --- Modern Dot/Close Swap Behavior --- */
.tl-tabs-modern .tl-tab[data-modified="true"] .close-button-wrap {
    display: none;
}

.tl-tabs-modern .tl-tab[data-modified="true"] .edited-mark-wrap {
    display: flex;
}

.tl-tabs-modern .tl-tab[data-modified="true"]:hover .edited-mark-wrap {
    display: none;
}

.tl-tabs-modern .tl-tab[data-modified="true"]:hover .close-button-wrap {
    display: flex;
    opacity: 1;
}

/* ==========================================================================
   6) CLASSIC STYLE - AGGRESSIVE PATCHING
   ========================================================================== */
.tl-tabs-classic .tl-tabs-toolbar-wrapper {
    gap: 0;
    align-items: stretch;
}

.tl-tabs-classic .tl-tab {
    margin: 0;
    height: var(--header-height);
    padding: 0 12px;
    border-radius: 0;
    background: transparent;
    border: var(--tab-border-width) solid transparent;
}

/* 3. SEPARATORS (Classic - BORDER SNAP FIX) */
.tl-tabs-classic .tl-tabs-toolbar-wrapper > .tl-tab:not(:last-child)::before {
    content: "";
    position: absolute;
    right: 0;
    /* Using Border-Right for crisp rendering */
    width: 0;
    border-right: 1px solid var(--tab-border-color);
    background: transparent;
    top: 15%;
    bottom: 15%;
    z-index: 1;
}

/* Ensure no separator on active tab (same as before) */
.tl-tabs-classic .tl-tab.tl-tab-active::before,
.tl-tabs-classic .tl-tab:has(+ .tl-tab.tl-tab-active)::before {
    display: none;
}
/* 4. AKTIV CLASSIC TAB */
.tl-tabs-classic .tl-tab.tl-tab-active {
    background: var(--tab-bg-active);
    color: var(--tab-text-active);
    z-index: 10;
    /* 5. SOLID BORDER: Bruker den nye variabelen for å dempe fargen */
    border: var(--tab-border-width) solid var(--tab-border-color-active);
    /* 6. FJERN BUNN: Dekkes av lapp */
    border-bottom: none;
    padding-bottom: var(--tab-border-width);
}

    /* 7. PATCHING - AGGRESSIV FIKS 
   Vi gjør lappen litt større og flytter den litt lenger ned.
   Dette garanterer at den dekker hele linjen uansett sub-pixels. */
    .tl-tabs-classic .tl-tab.tl-tab-active::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        /* Flytt 1px dypere enn borderen */
        bottom: calc((var(--tab-border-width) * -1) - 1px);
        /* Gjør den tykkere enn borderen (border + 1px) */
        height: calc(var(--tab-border-width) + 1px);
        background: var(--tab-bg-active);
        z-index: 20;
        pointer-events: none;
    }

.tl-tabs-classic .close-button-wrap {
    opacity: 1;
}

.tl-tabs-classic .tl-tabs-actions {
    height: var(--header-height);
    align-self: stretch;
}

/* ==========================================================================
   7) MISC
   ========================================================================== */
.tl-tabs[data-equal="1"] .tl-tab {
    width: var(--tab-equal-width, 200px);
    min-width: 120px;
    max-width: 320px;
}

.tl-tabs-overflow-popover .mud-popover-paper {
    min-width: 240px;
    max-width: 300px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--tab-border-color);
    padding: 4px 0;
}

.tl-tabs-overflow-popover .tl-tab {
    width: 100%;
    min-height: 40px;
    height: auto;
    margin: 0;
    padding: 0 16px;
    border: none;
    border-radius: 0;
    background: transparent;
    justify-content: flex-start;
}

    .tl-tabs-overflow-popover .tl-tab.tl-tab-active {
        background: var(--mud-palette-primary-hover);
        color: var(--mud-palette-primary);
        font-weight: 700;
    }

    .tl-tabs-overflow-popover .tl-tab::before {
        display: none;
    }

    .tl-tabs-overflow-popover .tl-tab[data-modified="true"] .edited-mark-wrap {
        display: flex;
    }

.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.tl-tab.tl-dragging {
    position: relative;
    z-index: 9999;
    background: var(--tab-bg-active);
    color: var(--tab-text-active);
    border: 1px solid var(--tab-border-color);
    border-radius: var(--tab-radius);
    box-shadow: 0 8px 20px rgba(0,0,0,.4);
    pointer-events: none;
    cursor: grabbing;
}

.tl-tabs .mud-button-root, .tl-tabs .mud-button-label {
    text-transform: none;
    letter-spacing: normal;
}

/* ==========================================================================
   BUG FIXES & LOGIC UPDATES
   ========================================================================== */

/* FIX 1: Hide separators when dragging.
   NOTE: We include a specific ".tl-tabs-modern..." selector here to override 
   the "!important" force-visibility rule in the Modern section. */
.tl-tabs-modern .tl-tabs-toolbar-wrapper .tl-tab.tl-dragging::before,
.tl-tab.tl-dragging::before,
.tl-tab.tl-dragging::after {
    display: none !important;
}

/* FIX 2: Increase space between the last tab and the "New" (+) button. */
.tl-tabs-actions {
    padding-left: 8px;
}