/* ==========================================================================
   Folder tabs — one shape everywhere (owner, 2026-10-19)
   "The current tab should have a bold border on the sides and top. There should
   not be overflow issues. There needs to be blank space between the fonts and the
   borders. This is a UI change and should be fixed everywhere."

   Loaded LAST in index.html so it settles every folder-tab strip: the chrome
   strip, Accounting / HR / Payroll / Leadership, Dispatch / Planner / Support /
   Master Data sub-navs, sub-folder rows, Daily Pulse, the portal and every modal
   tab strip, in every theme and in both Easy and Advanced (the mode only changes
   which tabs are listed). The scattered older rules in styles.css and
   shared-tokens.css (many !important, one theme rule behind an ID) still decide
   colours; this file only owns the box: padding, size, wrapping and the active
   tab's bold edge.

   - No overflow: tabs are no longer clipped to a fixed two-line height
     (max-height + overflow:hidden cut the third line of "Invoices & Collections
     (AR)" against the top border). A label wraps inside its tab, a word too long
     for the tab breaks rather than spilling past the border, and the strip wraps
     to more rows instead of pushing past the screen.
   - Breathing room: padding on every side so the label never touches a border.
   - Bold current tab: a 3px edge on the left, right and top in the theme's ink
     (dark in light themes, light in dark ones). Every tab carries the same total
     edge+padding, so selecting a tab does not move its label or its neighbours.

   `html body:not(#nscc-ft-a):not(#nscc-ft-b)` lifts these rules above the older
   ID-scoped ones without another !important war of selectors.
   ========================================================================== */

:root {
    --nscc-ft-edge: 1px;            /* resting tab outline */
    --nscc-ft-edge-active: 3px;     /* bold edge on the current tab */
    --nscc-ft-pad-y: 0.35rem;       /* blank space above / below the label */
    --nscc-ft-pad-x: 0.6rem;        /* blank space left / right of the label */
    --nscc-ft-max-w: 8.5rem;        /* long labels wrap to two lines within this */
    --nscc-ft-active-line: var(--text-primary, #18181b);
}

/* ---- Every folder tab: room around the label, never clipped, never spilling ---- */
html body:not(#nscc-ft-a):not(#nscc-ft-b) :is(
    .nscc-erp-tab-btn:not(.nscc-erp-tab-btn--mode),
    .nscc-tab-groups .sub-nav-btn,
    #live-ops-header .sub-nav-btn,
    #planner-header .sub-nav-btn,
    #support-header .sub-nav-btn,
    #back-office-header .sub-nav-btn,
    #nscc-chrome-folder-tabs .sub-nav-btn,
    .modal .support-modal-nav .sub-nav-btn,
    .nscc-trip-modal-tab,
    .modal .nscc-employee-tab
) {
    box-sizing: border-box !important;
    border-style: solid !important;
    border-top-width: var(--nscc-ft-edge) !important;
    border-left-width: var(--nscc-ft-edge) !important;
    border-right-width: var(--nscc-ft-edge) !important;
    /* Edge difference (active is thicker) is taken out of the padding, so the
       label sits in the same place whether or not the tab is current. */
    padding: calc(var(--nscc-ft-pad-y) + var(--nscc-ft-edge-active) - var(--nscc-ft-edge))
             calc(var(--nscc-ft-pad-x) + var(--nscc-ft-edge-active) - var(--nscc-ft-edge))
             var(--nscc-ft-pad-y) !important;
    min-width: 0 !important;
    max-width: var(--nscc-ft-max-w) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-overflow: clip !important;
    line-height: 1.2 !important;
}

/* ---- The current tab: bold edge on the left, right and top ---- */
html body:not(#nscc-ft-a):not(#nscc-ft-b) :is(
    .nscc-erp-tab-btn:not(.nscc-erp-tab-btn--mode).active,
    .nscc-erp-tab-btn:not(.nscc-erp-tab-btn--mode)[aria-selected="true"],
    .nscc-tab-groups .sub-nav-btn.active,
    .nscc-tab-groups .sub-nav-btn[aria-selected="true"],
    #live-ops-header .sub-nav-btn.active,
    #planner-header .sub-nav-btn.active,
    #support-header .sub-nav-btn.active,
    #back-office-header .sub-nav-btn.active,
    #nscc-chrome-folder-tabs .sub-nav-btn.active,
    .modal .support-modal-nav .sub-nav-btn.active,
    .nscc-trip-modal-tab--active,
    .modal .nscc-employee-tab.is-active
) {
    border-top-width: var(--nscc-ft-edge-active) !important;
    border-left-width: var(--nscc-ft-edge-active) !important;
    border-right-width: var(--nscc-ft-edge-active) !important;
    border-top-color: var(--nscc-ft-active-line) !important;
    border-left-color: var(--nscc-ft-active-line) !important;
    border-right-color: var(--nscc-ft-active-line) !important;
    padding: var(--nscc-ft-pad-y) var(--nscc-ft-pad-x) !important;
    /* The edge is the marker now; the old thin inset top line would sit inside it. */
    box-shadow: none !important;
}

/* Master Data's Accounts & Rates row (flag masterDataAccountsRatesLook) keeps its
   one-line, fixed-height row; it gets the same bold edge and side room. */
html body:not(#nscc-ft-a):not(#nscc-ft-b) .nscc-pickimp-tab--folder {
    padding-left: calc(0.75rem + 2px) !important;
    padding-right: calc(0.75rem + 2px) !important;
}
html body:not(#nscc-ft-a):not(#nscc-ft-b) .nscc-pickimp-tab--folder[aria-selected="true"] {
    border-style: solid !important;
    border-top-width: var(--nscc-ft-edge-active) !important;
    border-left-width: var(--nscc-ft-edge-active) !important;
    border-right-width: var(--nscc-ft-edge-active) !important;
    border-top-color: var(--nscc-ft-active-line) !important;
    border-left-color: var(--nscc-ft-active-line) !important;
    border-right-color: var(--nscc-ft-active-line) !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* ---- Strips: wrap to more rows rather than run past the screen ---- */
html body:not(#nscc-ft-a):not(#nscc-ft-b) :is(.nscc-tab-group, .nscc-tab-group__tabs) {
    min-width: 0 !important;
    max-width: 100% !important;
}
html body:not(#nscc-ft-a):not(#nscc-ft-b) .nscc-tab-group__tabs {
    flex-wrap: wrap !important;
}

/* The chrome strip keeps a right-hand gutter for the stacked Pinned / Advanced
   controls. 13.75rem (pin + Advanced) is wider than the stacked pair needs, and
   on a narrow window it left the tabs ~150px, so they fell into one squeezed
   column. Below 760px the gutter is the stacked pair's own width. */
@media (max-width: 760px) {
    html body:not(#nscc-ft-a):not(#nscc-ft-b) #nscc-chrome-folder-tabs.nscc-has-chrome-controls.nscc-has-advanced-check {
        padding-right: 7.3rem !important;
    }
}