/* Top buttons — v3 Nov 5 2026 (Jeremy t2026u / t2027ua0: "On the phone can we make these top buttons cleaner").
   Phones only (max-width 768px). Desktop (769px+) untouched.
   Cause: End of day was added to the Cabarrus top row after the v2 grid was built for 7 buttons, so Manager
   sat alone on a third row. Fix: equal-size buttons, no orphan row.
     Dispatch mode (8): 4×2 — Dispatch · Switch · Lock · Map / Glossary · Schedule · End day · Manager
     Interpreter mode (6; Map + Manager hidden): 3×2 — Interpreter · Switch · Lock / Glossary · Schedule · End day
     No role yet (6): 3×2 — Lock · Map · Glossary / Schedule · End day · Manager
   Display only: same buttons, links, clicks and active Dispatch marker (gold/cream pill + dot).
   Pineville / University / Winston (no #cabRolePill): unchanged from v2. */

@media (max-width: 768px) {
  /* ---------- Cabarrus (has #cabRolePill) ---------- */
  html body .top-actions:has(> #cabRolePill) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    flex-wrap: initial !important;
    align-items: stretch !important;
  }
  html body .top-actions:has(> #cabRolePill) > * {
    grid-column: auto !important;
    order: 10;
  }
  /* Row 1: where you are + Map. Row 2: go-to + End of day + Manager */
  html body .top-actions:has(> #cabRolePill) > #cabRolePill { order: 0; }
  html body .top-actions:has(> #cabRolePill) > #cabSwitchBtn { order: 1; }
  html body .top-actions:has(> #cabRolePill) > #lockBtn { order: 2; }
  html body .top-actions:has(> #cabRolePill) > a[href*="map=1"] { order: 3; }
  html body .top-actions:has(> #cabRolePill) > .hdr-ctl-glossary { order: 4; }
  html body .top-actions:has(> #cabRolePill) > .hdr-ctl-schedule { order: 5; }
  html body .top-actions:has(> #cabRolePill) > #cabEodTopBtn { order: 6; }
  html body .top-actions:has(> #cabRolePill) > a[href*="manager"] { order: 7; }

  /* Interpreter: Map + Manager hidden → 6 equal buttons in 3×2 */
  html.cab-interp-mode body .top-actions:has(> #cabRolePill:not(.hidden)) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* No role chosen yet (pill + Switch hidden): 6 buttons → 3×2 */
  html body .top-actions:has(> #cabRolePill.hidden) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body .top-actions:has(> #cabRolePill) .hdr-ctl,
  html body .top-actions:has(> #cabRolePill) > #cabRolePill {
    width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important;
    height: 44px !important; padding: 0 4px !important; margin: 0 !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important;
    font-size: 12.5px !important; letter-spacing: 0 !important; box-sizing: border-box !important;
  }
  /* Dispatch / Interpreter pill: same size and shape as its neighbours, marked as the current view (gold dot kept) */
  html body .top-actions > #cabRolePill:not(.hidden) {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
    border-radius: 10px !important; font-weight: 700 !important; align-self: stretch !important;
  }
  html[data-theme="maroon"] body .top-actions > #cabRolePill:not(.hidden),
  html[data-theme="enterprise"] body .top-actions > #cabRolePill:not(.hidden) {
    background: rgba(255,255,255,.2) !important; border: 1.5px solid rgba(255,255,255,.85) !important; color: #fff !important;
  }

  /* End of day: icon + short label fit an equal cell (~90px at 390 wide) */
  html body .top-actions #cabEodTopBtn { gap: 4px !important; }
  html body .top-actions #cabEodTopBtn svg { width: 14px !important; height: 14px !important; flex: 0 0 auto !important; }
}

@media (max-width: 359px) {
  html body .top-actions:has(> #cabRolePill) .hdr-ctl,
  html body .top-actions:has(> #cabRolePill) > #cabRolePill { font-size: 12px !important; padding: 0 2px !important; }
  /* Pineville / University / Winston (5 buttons, no #cabRolePill): split on very small phones so nothing is cut off */
  html body .top-actions:not(:has(> #cabRolePill)):not(:has(> #rolePill)) {
    display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 6px !important; flex-wrap: initial !important;
  }
  html body .top-actions:not(:has(> #cabRolePill)):not(:has(> #rolePill)) > * { grid-column: span 2 !important; }
  html body .top-actions:not(:has(> #cabRolePill)):not(:has(> #rolePill)) > #lockBtn,
  html body .top-actions:not(:has(> #cabRolePill)):not(:has(> #rolePill)) > a[href*="map=1"] { grid-column: span 3 !important; }
  html body .top-actions:not(:has(> #cabRolePill)):not(:has(> #rolePill)) .hdr-ctl {
    width: auto !important; min-width: 0 !important; flex: none !important; padding: 0 4px !important; text-overflow: clip !important;
  }
}

/* ---------- v2 Nov 1 2026: corner shape of the Dispatch marker matches its neighbours (phones and monitors) ---------- */
html[data-theme="maroon"] body .top-actions > #cabRolePill:not(.hidden),
html[data-theme="enterprise"] body .top-actions > #cabRolePill:not(.hidden) { border-radius: 999px !important; }
@media (min-width: 769px) {
  html[data-theme="classic"] body .top-actions > #cabRolePill:not(.hidden) { border-radius: 12px !important; }
}

/* ---------- v2 Nov 1 2026: monitors (769px and wider) — equal top buttons (UNCHANGED) ----------
   One 4-column grid (column = --tn-col). Cabarrus with a role: Dispatch (2 columns) · Switch · Lock over
   Map · Glossary · Schedule · Manager. Pineville / University / Winston-Salem (and Cabarrus before a role is picked):
   Lock · Map over Glossary · Schedule · Manager, and on wide monitors (1260px+) one row of 5 equal buttons.
   Widths are chosen so the page title and its top line keep the room they had (no extra wrapping).
   Note: End of day (added later) still sits in this desktop grid; phone-only fix is above. */
@media (min-width: 769px) {
  html body .top-actions {
    display: grid !important; gap: 8px !important; flex-wrap: initial !important;
    align-items: stretch !important; justify-content: end !important; justify-self: end !important;
    --tn-col: 112px;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important; grid-auto-flow: row !important;
    width: calc(var(--tn-col) * 4 + 24px) !important;
  }
  html[data-theme="sky"] body .top-actions { --tn-col: 148px; }
  html body .top-actions .hdr-ctl,
  html body .top-actions > #cabRolePill:not(.hidden) {
    width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important; margin: 0 !important;
    height: 36px !important; padding: 0 8px !important; box-sizing: border-box !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important;
  }
  html[data-theme="sky"] body .top-actions .hdr-ctl { height: 40px !important; padding: 0 12px !important; }
  html body .top-actions > #cabRolePill:not(.hidden) { gap: 6px !important; font-size: 13px !important; line-height: 1 !important; align-self: stretch !important; }

  /* Cabarrus Dispatch / Interpreter */
  html body .top-actions:has(> #cabRolePill:not(.hidden)) > * { grid-column: span 3 !important; order: 3; }
  html body .top-actions:has(> #cabRolePill:not(.hidden)) > #cabRolePill { grid-column: span 6 !important; order: 0; }
  html body .top-actions:has(> #cabRolePill:not(.hidden)) > #cabSwitchBtn { grid-column: span 3 !important; order: 1; }
  html body .top-actions:has(> #cabRolePill:not(.hidden)) > #lockBtn { grid-column: span 3 !important; order: 2; }
  html.cab-interp-mode body .top-actions:has(> #cabRolePill:not(.hidden)) > .hdr-ctl-glossary,
  html.cab-interp-mode body .top-actions:has(> #cabRolePill:not(.hidden)) > .hdr-ctl-schedule { grid-column: span 6 !important; }

  /* 5-button pages */
  html body .top-actions:not(:has(> #cabRolePill:not(.hidden))) > * { grid-column: span 4 !important; }
  html body .top-actions:not(:has(> #cabRolePill:not(.hidden))) > #lockBtn,
  html body .top-actions:not(:has(> #cabRolePill:not(.hidden))) > a[href*="map=1"] { grid-column: span 6 !important; }
}
@media (min-width: 1260px) {
  html:not([data-theme="sky"]) body .top-actions:not(:has(> #cabRolePill:not(.hidden))) {
    --tn-col: 104px;
    grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: var(--tn-col) !important;
    width: auto !important;
  }
  html:not([data-theme="sky"]) body .top-actions:not(:has(> #cabRolePill:not(.hidden))) > *,
  html:not([data-theme="sky"]) body .top-actions:not(:has(> #cabRolePill:not(.hidden))) > #lockBtn,
  html:not([data-theme="sky"]) body .top-actions:not(:has(> #cabRolePill:not(.hidden))) > a[href*="map=1"] { grid-column: auto !important; }
}