/* ============================================================================================
   ONE TAB ROW, EVERYWHERE.  26 September 2026.

   Emilio: "the buttons at the top of the dashboard (like after-school, dojo, and camps) have
   different styling depending on the page ... I want to unify and consolidate the styles of these
   buttons just so that everything is synced up."

   He was right, and it was worse than three. The same control had seven treatments:

     .subtabs / .subtab    index.html        underline tabs, Oswald 13, 2px blue underline
     .seg     / .seg button dashboard-next   cream tray, active = white pill with a shadow
     .att-tabs / .att-tab  attendance.html   Oswald 11.5 UPPERCASE pills, active = solid blue
     .set-tabs / .set-tab  registrations, billing, staff, drop-in
                                             white tray with a shadow, Inter 13.5, active = blue
     .ptabs   / .ptab      camps.html        underline tabs again, but Inter 13.5 and 12px tall
     .segs    / .seg       camps.html        cream tray, and .seg here is the BUTTON
     .seg                  billing.html      white tray, and .seg here is the TRAY

   Note the last two: `.seg` meant the tray on some pages and the button on another, and in
   drop-in-emails.html `.segs` is not a control at all, it is the caption under an SMS bubble. So
   `.seg` and `.segs` are deliberately NOT in this file. Those trays were renamed to .sf-tabs in
   their markup, which is why a bare `<button>` inside .sf-tabs is styled below: those trays hold
   plain buttons with no class of their own.

   THE CANONICAL CONTROL is .sf-tabs (the tray) wrapping .sf-tab (the buttons). Every legacy class
   above is aliased to it below, so no page had to have its markup rewritten and no JS that toggles
   .on had to change. New tab rows should use .sf-tabs / .sf-tab and nothing else.

   Choices, so the next person does not have to re-litigate them:
   - A CREAM tray, not white. A white tray is invisible on the white cards the dashboard is full
     of, which is exactly why dashboard-next had already gone cream on its own.
   - Oswald, because it is the dashboard's heading font and three of the seven already used it.
     Not uppercase: that was attendance's alone, and at 11.5px it read as a label, not a control.
   - Active is SOLID BLUE, which four of the seven already were. The raised-white-pill style reads
     well on its own but loses against a page of white cards.
   - The tray is width:max-content, so a row of three tabs does not stretch across 1400px.

   LOADED LAST in every page's <head>, after that page's own <style>, so these rules win at equal
   specificity. If a page ever needs to differ, it should say so here rather than locally.
   ============================================================================================ */

/* ---------------------------------------------------------------------------------- the tray */
.sf-tabs,
.subtabs,
.att-tabs,
.set-tabs,
.ptabs {
  display: flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 4px;
  background: var(--sf-cream-2, #eef2f8);
  border: 1px solid var(--sf-border, #e2e8f2);
  border-radius: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  /* these three undo the underline-tab trays, which drew their own bottom rule */
  border-bottom: 1px solid var(--sf-border, #e2e8f2);
  box-shadow: none;
  flex-wrap: nowrap;
}
.sf-tabs::-webkit-scrollbar,
.subtabs::-webkit-scrollbar,
.att-tabs::-webkit-scrollbar,
.set-tabs::-webkit-scrollbar,
.ptabs::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------------------------- the button */
.sf-tab,
.subtab,
.att-tab,
.set-tab,
.ptab,
.sf-tabs > button {
  flex: none;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  line-height: 1.2;
  padding: 9px 18px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--sf-ink-50, #6b7490);
  text-decoration: none;
  cursor: pointer;
  transition: background .14s, color .14s;
  /* undo the underline treatments */
  margin-bottom: 0;
  box-shadow: none;
}
.sf-tab:not(.on):not(.active):hover,
.subtab:not(.on):not(.active):hover,
.att-tab:not(.on):not(.active):hover,
.set-tab:not(.on):not(.active):hover,
.ptab:not(.on):not(.active):hover,
.sf-tabs > button:not(.on):not(.active):hover { color: var(--sf-ink, #0d1534); background: rgba(255,255,255,.65); }

/* TWO NAMES FOR THE SELECTED TAB. Most pages mark it .on; billing.html's JS toggles .active and
   has done since before this file existed. Renaming that would be a JS change for a CSS tidy-up,
   so the standard answers to both and new rows should use .on. */
.sf-tab.on, .sf-tab.active,
.subtab.on, .subtab.active,
.att-tab.on, .att-tab.active,
.set-tab.on, .set-tab.active,
.ptab.on, .ptab.active,
.sf-tabs > button.on, .sf-tabs > button.active {
  background: var(--sf-blue-700, #1b2f6e);
  border-color: var(--sf-blue-700, #1b2f6e);
  color: #fff;
  cursor: default;
  box-shadow: none;
}
.sf-tab:focus-visible,
.subtab:focus-visible,
.att-tab:focus-visible,
.set-tab:focus-visible,
.ptab:focus-visible,
.sf-tabs > button:focus-visible {
  outline: 2px solid var(--sf-blue-500, #2f82c4);
  outline-offset: 2px;
}

/* A tab row inside the shell sits tighter under the page title than one on a standalone leaf. */
.sfs-content.is-embed .subtabs { margin: 0 0 12px; }

/* A CROWDED ROW TIGHTENS INSTEAD OF SCROLLING (30 September 2026). Settings carries eleven tabs
   since Parent requests joined it, and at 1280 wide that row ran 67px past its box, so Download
   All Data and Account slid out of sight on a laptop. Four pixels less padding each side on a row
   of eleven or more puts it back inside with room to spare. Rows of ten or fewer are untouched,
   and phones keep scrolling, as below. */
@media (min-width: 701px) {
  .subtabs:has(> .subtab:nth-child(11)) > .subtab { padding-left: 14px; padding-right: 14px; }
}

/* ------------------------------------------------------------------------------------- phones
   Same 44px minimum everything else on these pages uses. The row scrolls sideways rather than
   wrapping, because a wrapped tray grows a second line of tinted background and stops reading as
   one control. */
@media (max-width: 700px) {
  .sf-tabs, .subtabs, .att-tabs, .set-tabs, .ptabs {
    width: auto;
    max-width: 100%;
  }
  .sf-tab, .subtab, .att-tab, .set-tab, .ptab, .sf-tabs > button {
    min-height: 44px;
    font-size: 13px;
    padding: 9px 15px;
  }
}