/* ============================================================================
   GSB CLEAN — cross-screen "simpler & cleaner" layer for all MAIN-BAR tabs.
   Loaded after style.css. Flattens surfaces and puts figures in mono app-wide
   so each screen doesn't need bespoke CSS. JS-set inline row backgrounds and
   structural nesting (e.g. Movers) are handled per-file in the *-app.js edits.
   Retired "Other"-dropdown screens are not specifically targeted (harmless if
   the broad [id$="-screen"] rule reaches them — they're hidden/unused).
   ============================================================================ */

/* ---- Mono tabular figures in every data table ---------------------------
   JS tables ship inline font-family:'Inter' on the <table>, so !important is
   required. Figure columns + their headers go mono; the FIRST column (names /
   account labels) stays Inter body. */
[id$="-screen"] table td,
[id$="-screen"] table th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* Brand data system: the ENTIRE data table — row names/labels AND figures AND
   headers — is JetBrains Mono (the brand-book "--font-mono: data, labels,
   figures" role; venue/store/brand names are data labels). The `td */th *`
   descendant selectors override inline-Inter spans inside cells. */
[id$="-screen"] table td,
[id$="-screen"] table th,
[id$="-screen"] table td *,
[id$="-screen"] table th * {
  font-family: var(--font-mono) !important;
}

/* ---- Flat surfaces: no heavy drop-shadow, no hover lift, restrained radius -
   Targets the generic card/panel classes used across screens. */
[id$="-screen"] .card,
[id$="-screen"] .panel,
[id$="-screen"] [class*="-card"],
[id$="-screen"] [class*="-panel"] {
  box-shadow: none !important;
  border-radius: 4px !important;
}
[id$="-screen"] .card:hover,
[id$="-screen"] .panel:hover,
[id$="-screen"] [class*="-card"]:hover,
[id$="-screen"] [class*="-panel"]:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Tan/cool fills that legacy code paints INSIDE white cards (thead, blue-grey
   headers) → neutralize so tables read white. Scoped to table headers only so
   we don't touch intentional tinted state rows. */
[id$="-screen"] table thead,
[id$="-screen"] table thead tr {
  background: transparent !important;
}

/* ============================================================================
   SHARED SEGMENTED CONTROL — MODE / PERIOD / VIEW toggles, brand-conformant.
   Container = oat track (#E8E0D1), no outer border, 6px radius, 3px pad, flat.
   Buttons = borderless mono labels on stone; NO border-left dividers.
   ACTIVE = solid ink pill (#221E18) with paper text (#F3EEE3).
   Active state arrives two ways: (a) JS sets the button's inline
   background:#221E18 (newdev/labor mode·period·chart toggles), and
   (b) JS toggles an .active class (lt VIEW/MODE/GRAN .switcher controls and
   .chart-control-switcher). Both are matched below. Loaded after style.css so
   plain selectors win; !important beats the inline button styles.
   ============================================================================ */

/* ---- Containers: oat track, no border, flat ----------------------------- */
#newdev-tracker-mode-toggle,
#newdev-tracker-period-toggle,
#newdev-chart-toggle,
#labor-tracker-mode-toggle,
#labor-tracker-period-toggle,
#labor-chart-toggle,
#lt-methodology-filters,
#lt-date-filters,
#lt-granularity-switcher,
.chart-control-switcher {
  display: inline-flex !important;
  background: var(--gsb-oat, #E8E0D1) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 3px !important;
  gap: 2px !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* The big VIEW control (Daily / 7-Day / Weekly / Period) — full width is fine,
   same flat oat-track treatment, no per-button borders or shadows. */
#newdev-chart-toggle,
#labor-chart-toggle {
  display: flex !important;
  width: 100% !important;
}

/* ---- Buttons: borderless mono labels, no divider lines ------------------ */
#newdev-tracker-mode-toggle button,
#newdev-tracker-period-toggle button,
#newdev-chart-toggle button,
#labor-tracker-mode-toggle button,
#labor-tracker-period-toggle button,
#labor-chart-toggle button,
#lt-methodology-filters button,
#lt-date-filters button,
#lt-granularity-switcher button,
.chart-control-switcher button {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  background: transparent !important;
  color: var(--gsb-stone, #6F695B) !important;
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

/* Full-width VIEW buttons share the track equally */
#newdev-chart-toggle button,
#labor-chart-toggle button {
  flex: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#newdev-tracker-mode-toggle button:hover,
#newdev-tracker-period-toggle button:hover,
#newdev-chart-toggle button:hover,
#labor-tracker-mode-toggle button:hover,
#labor-tracker-period-toggle button:hover,
#labor-chart-toggle button:hover,
#lt-methodology-filters button:hover,
#lt-date-filters button:hover,
#lt-granularity-switcher button:hover,
.chart-control-switcher button:hover {
  color: var(--gsb-soil-ink, #221E18) !important;
  background: transparent !important;
}

/* ---- ACTIVE = solid ink pill on the oat track --------------------------- */
/* (a) inline-style active (JS sets background:#221E18 / rgb(34,30,24)) */
#newdev-tracker-mode-toggle button[style*="background:#221E18"],
#newdev-tracker-mode-toggle button[style*="background: rgb(34, 30, 24)"],
#newdev-tracker-period-toggle button[style*="background:#221E18"],
#newdev-tracker-period-toggle button[style*="background: rgb(34, 30, 24)"],
#newdev-chart-toggle button[style*="background:#221E18"],
#newdev-chart-toggle button[style*="background: rgb(34, 30, 24)"],
#labor-tracker-mode-toggle button[style*="background:#221E18"],
#labor-tracker-mode-toggle button[style*="background: rgb(34, 30, 24)"],
#labor-tracker-period-toggle button[style*="background:#221E18"],
#labor-tracker-period-toggle button[style*="background: rgb(34, 30, 24)"],
#labor-chart-toggle button[style*="background:#221E18"],
#labor-chart-toggle button[style*="background: rgb(34, 30, 24)"],
/* (b) .active-class active (lt VIEW/MODE/GRAN + chart-control switchers) */
#newdev-tracker-mode-toggle button.active,
#newdev-tracker-period-toggle button.active,
#newdev-chart-toggle button.active,
#labor-tracker-mode-toggle button.active,
#labor-tracker-period-toggle button.active,
#labor-chart-toggle button.active,
#lt-methodology-filters button.active,
#lt-date-filters button.active,
#lt-granularity-switcher button.active,
.chart-control-switcher button.active {
  background: #221E18 !important;
  color: #F3EEE3 !important;
  box-shadow: none !important;
  border: none !important;
  font-weight: 600 !important;
}