/* 2.9.0 One tab standard for all of Command Center. Loads last (index.html).
   Every tab and segmented switch: the same height, padding, type, icon size and count badge; the active one only
   changes colour (never weight, border or padding), so switching never moves anything.
   - Tab bars built with web/ui.js TabBar (.cc-tabs): equal-width columns from the widest label, balanced rows when
     they wrap, "More" the same size as a tab.
   - Older tab rows (group A): one row of equal shares that wraps cleanly; a label is never cut.
   - Segmented switches (group B): equal-width buttons in one row; on a phone they fill the width, 2 per row from 4.
   Breakpoints: 640px (phone). Dimensions are !important on purpose: older per-module rules must not resize a tab. */
:root {
  --tab-h: 34px; --tab-fs: 13px; --tab-fw: 600; --tab-px: 12px; --tab-gap: 4px; --tab-icon: 14px;
  --tab-r: 7px; --tab-bar-r: 10px; --tab-bar-pad: 4px;
  --tab-ink: #3b4566; --tab-ink-hover: #10162B; --tab-on-ink: #243D90; --tab-on-bg: #fff;
  --tab-bar-bg: rgb(36 61 144 / .06); --tab-line: rgb(36 61 144 / .12); --tab-gold: #FCB537;
}

/* ---------------------------------------------------------------- TabBar */
.cc-tabs-row { margin: 0 0 12px; min-width: 0; }
.cc-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: var(--tab-gap); padding: var(--tab-bar-pad);
  border-radius: var(--tab-bar-r); background: var(--tab-bar-bg); box-shadow: inset 0 0 0 1px var(--tab-line); min-width: 0; }
.cc-tabs[style*="--cc-cols"] { grid-template-columns: repeat(var(--cc-cols), minmax(0, 1fr)); }
.cc-tab { display: flex; align-items: center; justify-content: center; min-width: 0; width: 100%; height: var(--tab-h); margin: 0; padding: 0 var(--tab-px);
  border: 0; border-radius: var(--tab-r); background: transparent; color: var(--tab-ink); font-family: inherit; font-size: var(--tab-fs); font-weight: var(--tab-fw);
  line-height: 1; letter-spacing: -.003em; text-transform: none; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.cc-tab-in { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cc-tab svg { width: var(--tab-icon); height: var(--tab-icon); flex: none; }
.cc-tab:hover { background: rgb(255 255 255 / .7); color: var(--tab-ink-hover); }
.cc-tab.is-active { background: var(--tab-on-bg); color: var(--tab-on-ink); box-shadow: 0 1px 2px rgb(16 22 43 / .1), inset 0 -2px 0 var(--tab-gold); }
.cc-tab:focus-visible { outline: 2px solid var(--tab-on-ink); outline-offset: -2px; }
.cc-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums; background: rgb(36 61 144 / .1); color: var(--tab-on-ink); }
.cc-tab.is-active .cc-count { background: var(--tab-on-ink); color: #fff; }
.cc-tab-more { display: contents; }
@media (prefers-reduced-motion: reduce) { .cc-tab { transition: none; } }

/* the job workspace header: title on the left, Site / Scope / Photos / Files on the right; on a narrow screen the
   switch takes its own full-width row (2 x 2 on a phone - TabBar balances it) */
.sg-workspace > header { flex-wrap: wrap; gap: 10px; }
.sg-workspace > header > .sg-ws-tabs { display: block; flex: 1 1 340px; max-width: 480px; min-width: 0; margin-left: auto; }
@media (max-width: 640px) { .sg-workspace > header > .sg-ws-tabs { flex-basis: 100%; max-width: none; } }

/* ---------------------------------------------------------------- older tab rows (group A) */
:is(.sun-seg, .ph-seg, .dc-seg, .sge-tabs, .sh-tabs, .dx-qtabs, .an-wtabs, .tb-sheet-tabs, .dxh-seg, .sh-kinds) {
  display: flex !important; flex-wrap: wrap !important; gap: var(--tab-gap) !important; padding: var(--tab-bar-pad) !important; overflow: visible !important;
  border: 0 !important; border-radius: var(--tab-bar-r) !important; background: var(--tab-bar-bg) !important; box-shadow: inset 0 0 0 1px var(--tab-line) !important; max-width: 100%; }
:is(.sun-seg, .ph-seg, .dc-seg, .sge-tabs, .sh-tabs, .dx-qtabs, .an-wtabs, .tb-sheet-tabs, .dxh-seg, .sh-kinds) > :is(button, a) {
  flex: 1 1 0 !important; min-width: fit-content !important; max-width: none !important; }

/* ---------------------------------------------------------------- segmented switches (group B) */
:is(.eb-seg, .cso-bar .cso-seg, .ik-seg, .qj-kinds, .phx-seg, .lc4-seg, .an-seg, .tb-seg:not(.tb-sheet-tabs), div.seg, .dx-qwidth, .s3-seg, .fx-seg, .dk-seg) {
  display: inline-grid !important; grid-auto-flow: column !important; grid-auto-columns: 1fr !important; align-items: stretch; gap: var(--tab-gap) !important;
  padding: var(--tab-bar-pad) !important; overflow: visible !important; border: 0 !important; border-radius: var(--tab-bar-r) !important;
  background: var(--tab-bar-bg) !important; box-shadow: inset 0 0 0 1px var(--tab-line) !important; max-width: 100%; vertical-align: middle; }
/* on a phone a switch fills the width in equal columns that are never narrower than its labels need (--seg-min):
   two side by side where they fit, otherwise one per row - wrapped, never squeezed */
.ik-seg, .phx-seg { --seg-min: 150px; }
@media (max-width: 640px) {
  :is(.eb-seg, .cso-bar .cso-seg, .ik-seg, .qj-kinds, .phx-seg, .lc4-seg, .an-seg, .tb-seg:not(.tb-sheet-tabs), .s3-seg, .dk-seg.nv-seg) {
    display: grid !important; width: 100%; grid-auto-flow: row !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--seg-min, 120px)), 1fr)); }
}

/* ---------------------------------------------------------------- the item standard (groups A and B) */
:is(.sun-seg, .ph-seg, .dc-seg, .sge-tabs, .sh-tabs, .dx-qtabs, .an-wtabs, .tb-sheet-tabs, .dxh-seg, .sh-kinds,
    .eb-seg, .cso-bar .cso-seg, .ik-seg, .qj-kinds, .phx-seg, .lc4-seg, .an-seg, .tb-seg, div.seg, .dx-qwidth, .s3-seg, .fx-seg, .dk-seg) > :is(button, a) {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
  height: var(--tab-h) !important; min-height: var(--tab-h) !important; margin: 0 !important; padding: 0 var(--tab-px) !important;
  border: 0 !important; border-radius: var(--tab-r) !important; background: transparent; box-shadow: none;
  color: var(--tab-ink); font-family: inherit !important; font-size: var(--tab-fs) !important; font-weight: var(--tab-fw) !important; line-height: 1 !important;
  letter-spacing: -.003em !important; text-transform: none !important; white-space: nowrap !important; text-overflow: clip !important; overflow: visible !important;
  text-decoration: none; cursor: pointer; }
:is(.sun-seg, .ph-seg, .dc-seg, .sge-tabs, .sh-tabs, .dx-qtabs, .an-wtabs, .tb-sheet-tabs, .dxh-seg, .sh-kinds,
    .eb-seg, .cso-bar .cso-seg, .ik-seg, .qj-kinds, .phx-seg, .lc4-seg, .an-seg, .tb-seg, div.seg, .dx-qwidth, .s3-seg, .fx-seg, .dk-seg) > :is(button, a) svg {
  width: var(--tab-icon) !important; height: var(--tab-icon) !important; flex: none; }
:is(.sun-seg, .ph-seg, .dc-seg, .sge-tabs, .sh-tabs, .dx-qtabs, .an-wtabs, .tb-sheet-tabs, .dxh-seg, .sh-kinds,
    .eb-seg, .cso-bar .cso-seg, .ik-seg, .qj-kinds, .phx-seg, .lc4-seg, .an-seg, .tb-seg, div.seg, .dx-qwidth, .s3-seg, .fx-seg, .dk-seg) > :is(button, a):hover:not(:disabled) {
  background: rgb(255 255 255 / .7); color: var(--tab-ink-hover); }
:is(.sun-seg, .ph-seg, .dc-seg, .sge-tabs, .sh-tabs, .dx-qtabs, .an-wtabs, .tb-sheet-tabs, .dxh-seg, .sh-kinds,
    .eb-seg, .cso-bar .cso-seg, .ik-seg, .qj-kinds, .phx-seg, .lc4-seg, .an-seg, .tb-seg, div.seg, .dx-qwidth, .s3-seg, .fx-seg, .dk-seg)
  > :is(button, a):is([aria-selected=true], [aria-pressed=true], [aria-current=page], [aria-current=true], [aria-checked=true], .on, .active, .sel) {
  background: var(--tab-on-bg) !important; color: var(--tab-on-ink) !important; box-shadow: 0 1px 2px rgb(16 22 43 / .1), inset 0 -2px 0 var(--tab-gold) !important; }
:is(.sun-seg, .ph-seg, .dc-seg, .sge-tabs, .sh-tabs, .dx-qtabs, .an-wtabs, .tb-sheet-tabs, .dxh-seg, .sh-kinds,
    .eb-seg, .cso-bar .cso-seg, .ik-seg, .qj-kinds, .phx-seg, .lc4-seg, .an-seg, .tb-seg, div.seg, .dx-qwidth, .s3-seg, .fx-seg, .dk-seg) > :is(button, a):focus-visible {
  outline: 2px solid var(--tab-on-ink); outline-offset: -2px; }
/* icon-only switches stay square, the same height as every other tab */
:is(.fx-seg, .dk-seg) > :is(button, a)[aria-label]:not(:has(span)) { padding: 0 !important; width: var(--tab-h); }
/* count badges inside older tabs look and sit like the TabBar badge */
:is(.ph-seg-n, .dc-n, .sun-n, .sh-tabs i, .dx-qtabs .tab > span:not(:last-child)) { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid !important;
  place-items: center; font-size: 11px !important; font-weight: 700 !important; font-style: normal; line-height: 1; background: rgb(36 61 144 / .1); color: var(--tab-on-ink); position: static !important; }