/* Carrier Nexus — one tab look for every page: folder-style tabs (the Load Control style) instead of round "bubble" buttons or plain underlines.
   The tabs never scroll sideways: they wrap into stacked rows and every row fills the full width.
   Works for every tab bar the pages use: <div class="tabs"> with .tab / .tab-btn children, <div class="tab-bar">, <div class="tab-nav">. The open tab has class "on" or "active".
   Colours come from the page's own variables (--blue, --panel, --mid) with light defaults, so dark pages keep their theme. */
body .tabs,body .tab-bar,body .tab-nav,body .tab-row{display:flex;flex-wrap:wrap;gap:3px;overflow:visible;width:auto;max-width:100%;padding:8px 2px 0;margin:0 0 14px;background:transparent;border:none;border-bottom:2px solid var(--blue,#1d4ed8);border-radius:0;box-shadow:none}
body .tab-row .tab,body .tabs .tab,body .tabs .tab-btn,body .tab-bar .tab,body .tab-bar .tab-btn,body .tab-nav .tab-btn,body .tab-nav .tab-nav-btn{flex:1 1 140px;min-width:0;min-height:48px;display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 10px;margin:0;border:1.5px solid rgba(100,116,139,.45);border-bottom:1.5px solid rgba(100,116,139,.45);border-radius:12px 12px 0 0;background:rgba(100,116,139,.16);color:var(--mid,#334155);font-family:inherit;font-size:14px;font-weight:700;line-height:1.15;letter-spacing:0;text-transform:none;text-align:center;white-space:normal;cursor:pointer;transition:none}
body .tab-row .tab:hover,body .tabs .tab:hover,body .tabs .tab-btn:hover,body .tab-bar .tab:hover,body .tab-bar .tab-btn:hover,body .tab-nav .tab-btn:hover,body .tab-nav .tab-nav-btn:hover{background:rgba(29,78,216,.14);color:var(--blue,#1d4ed8)}
body .tab-row .tab.active,body .tabs .tab.on,body .tabs .tab.active,body .tabs .tab-btn.active,body .tab-bar .tab.on,body .tab-bar .tab.active,body .tab-bar .tab-btn.active,body .tab-nav .tab-btn.active,body .tab-nav .tab-nav-btn.active,body .tabs .tab[aria-selected="true"]{background:var(--panel,#fff);color:var(--blue,#1d4ed8);border-color:var(--blue,#1d4ed8);margin-bottom:-2px;padding-bottom:8px;position:relative;z-index:1}

/* Filter pill bars (All / Open / In progress ...) get the same folder look: nexus-tabs.js marks the row that holds them with class nx-tabbar. */
body .nx-tabbar{display:flex;flex-wrap:wrap;gap:3px;align-items:flex-end;padding:8px 2px 0;margin-bottom:14px;background:transparent;border:none;border-bottom:2px solid var(--blue,#1d4ed8);border-radius:0}
body .nx-tabbar>.filter-pill,body .nx-tabbar>.filter-chip,body .nx-tabbar>.filter-btn,body .nx-tabbar>.fchip,body .nx-tabbar>.role-chip,body .nx-tabbar>.chip{flex:1 1 120px;min-width:0;min-height:44px;display:flex;align-items:center;justify-content:center;padding:6px 10px;margin:0;border:1.5px solid rgba(100,116,139,.45)!important;border-radius:12px 12px 0 0!important;background:rgba(100,116,139,.16)!important;color:var(--mid,#334155)!important;font-family:inherit;font-size:14px;font-weight:700;line-height:1.15;letter-spacing:0;text-transform:none;text-align:center;cursor:pointer;box-shadow:none}
body .nx-tabbar>.active,body .nx-tabbar>.on{background:var(--panel,#fff)!important;color:var(--blue,#1d4ed8)!important;border-color:var(--blue,#1d4ed8)!important;margin-bottom:-2px;padding-bottom:8px;position:relative;z-index:1}
body .nx-tabbar>input,body .nx-tabbar>select{flex:0 1 240px;margin-left:auto;align-self:center}