/* ═══════════════════════════════════════════════════════════════════════════
   SBR Air — shared/ui/sbr-air.legacy-views.css  (G2, Nov 6 2026)
   SBR Air toolbar / tab strip / segmented control / button classes for the converted legacy views
   (Timesheets, Teams, Facilities Scheduling, Daily Dispatch). v1.1 token values written literally because
   these views' bodies are legacy markup kept outside .sa-scope. !important only where legacy JS still writes
   inline styles (active-state setters), so their state is now shown by aria-selected / aria-pressed instead.
   ═══════════════════════════════════════════════════════════════════════════ */
.ts-toolbar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.ts-toolbar__row { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.ts-toolbar__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Buttons (v1.1 §11) */
.ts-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 6px;
  border: 1px solid #8C959F; background: #FFFFFF; color: #1F2328; font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.ts-btn:hover { background: #F7F8FA; }
.ts-btn:active { background: #F0EFEB; }
.ts-btn--primary { background: #2563EB; border-color: #2563EB; color: #FFFFFF; font-weight: 600; }
.ts-btn--primary:hover { background: #1D4ED8; border-color: #1D4ED8; }
.ts-btn--icon { width: 36px; padding: 0; font-size: 16px; }
.ts-btn:focus-visible, .ts-seg button:focus-visible, .ts-tabs > button:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }

/* Segmented control */
.ts-seg { display: inline-flex; padding: 2px; gap: 2px; background: #F0EFEB; border: 1px solid #E4E6EA; border-radius: 8px; }
.ts-seg > button { all: unset; box-sizing: border-box; height: 30px; padding: 0 12px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #57606A; cursor: pointer; white-space: nowrap;
  background: transparent !important; }
.ts-seg > button:hover { color: #1F2328 !important; }
.ts-seg > button[aria-pressed="true"] { background: #FFFFFF !important; color: #1F2328 !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 0 0 1px #E4E6EA; }

/* Tab strip (v1.1 §25) */
.ts-tabs { display: flex; gap: 2px; border-bottom: 1px solid #E4E6EA; overflow-x: auto; scrollbar-width: none; }
.ts-tabs > button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-bottom: 2px solid transparent;
  background: transparent !important; color: #57606A !important; font-size: 14px; font-weight: 500 !important; white-space: nowrap; cursor: pointer; }
.ts-tabs > button:hover { color: #1F2328 !important; }
.ts-tabs > button[aria-selected="true"] { color: #1D4ED8 !important; border-bottom-color: #2563EB; font-weight: 600 !important; }
.ts-tab-count { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.ts-tab-count--amber { background: #FFF7E6; color: #92400E; }
.ts-tab-count--red { background: #FEF2F2; color: #B91C1C; }
.ts-tab-count--blue { background: #EFF4FF; color: #1D4ED8; }

/* Period controls */
.ts-period { align-items: center; gap: 6px; }
.ts-period__label { min-width: 170px; text-align: center; font-size: 14px; font-weight: 600; color: #1F2328; font-variant-numeric: tabular-nums; }
.ts-select { height: 36px; padding: 0 10px; border: 1px solid #8C959F; border-radius: 6px; background: #FFFFFF; color: #1F2328; font: inherit; font-size: 14px; cursor: pointer; }

.ts-body { overflow-x: auto; overflow-y: visible; border-radius: 8px; }
.ts-footer { font-size: 13px; color: #57606A; margin-top: 8px; }

@media (max-width: 1023px) {
  .ts-btn, .ts-select { min-height: 44px; }
  .ts-btn--icon { width: 44px; }
  .ts-tabs > button { height: 44px; }
}
@media (max-width: 767px) {
  .ts-toolbar__actions { margin-left: 0; width: 100%; }
  .ts-toolbar__actions .ts-btn { flex: 1; }
  .ts-seg { width: 100%; }
  .ts-seg > button { flex: 1; text-align: center; }
  .ts-period__label { min-width: 0; flex: 1; }
}
/* Legacy JS still marks the active segment with an inline background — read that as "pressed". */
.ts-seg > button[style*="var(--green)"], .ts-seg > button[style*="var(--navy-card)"], .ts-seg > button[style*="--lxb-00c896"] {
  background: #FFFFFF !important; color: #1F2328 !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 0 0 1px #E4E6EA; border-bottom: 0 !important; border-radius: 6px !important; }
.ts-seg > button { color: #57606A !important; border: 0 !important; display: inline-flex; align-items: center; }
/* G3 — Reports */
.rp-row { margin-bottom: 12px; }
.rp-row > span { font-size: 13px !important; font-weight: 500 !important; color: #57606A !important; }
.rp-periods { flex-wrap: wrap; }
.rp-tabs { margin-bottom: 20px; }
.ts-seg > button[aria-pressed="false"] { background: transparent !important; color: #57606A !important; font-weight: 500 !important; box-shadow: none !important; }
/* G3 — Settings: SBR Air panels (v1.1 §8) */
.st-card { background: #FFFFFF; border: 1px solid #E4E6EA; border-radius: 8px; padding: 20px; margin-bottom: 16px; }
.st-card__title { margin: 0 0 2px; font-size: 16px; line-height: 24px; font-weight: 600; color: #1F2328; }
.st-card__desc { margin: 0 0 16px; font-size: 13px; line-height: 18px; color: #57606A; }
@media (max-width: 767px) { .st-card { padding: 16px; } .st-card div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } }
/* G3 — Messages: two-pane layout; stacks on phones. */
.msg-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; height: calc(100vh - 200px); min-height: 500px; }
@media (max-width: 767px) { .msg-layout { grid-template-columns: 1fr; height: auto; } .msg-layout > div { min-height: 320px; } }
.rp-chart-na { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 160px; padding: 16px; text-align: center; font-size: 13px; color: #57606A; background: #FAFAF8; border: 1px dashed #D5D9DF; border-radius: 8px; }
/* G3 — phone: Daily Dispatch form and side help stack; two-column field rows become one column. */
@media (max-width: 767px) {
  #view-dispatch #dispatch-body > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  #view-dispatch div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  #view-scheduling #sched-body { overflow-x: auto !important; }
  #view-scheduling #sched-legend { flex-wrap: wrap; }
}