/* ============================================================================================
   ONE BUTTON SCALE, EVERYWHERE.  26 September 2026.

   Emilio picked variation B ("Gradient") out of the four at index.html?demo=buttons, after the
   census in that page's "Today" view: .btn defined 5 times across the dashboard, .btn-primary 6,
   .btn-save 5, and a tail of one-off classes. The six .btn-primary definitions were the clearest
   case, all the same blue gradient with three different paddings and three different radii.

   THE SCALE. One base (.b) and four roles, at four sizes:

     .b-primary     the one thing a screen is for. The blue gradient, kept from what the ADD
                    SCHOOL button already looked like, which is why B changes the least on screen.
     .b-secondary   everything else that is still a button: Preview, Export, Edit.
     .b-ghost       quiet actions inside something else, where a border would only add noise.
     .b-danger      anything that removes or refunds. Outlined, never solid red: red fill reads
                    as an alarm and these sit beside ordinary rows all day.

     .b-lg .b-sm .b-xs   sizes; the unsuffixed size is the default.
     .b-icon             square, and the same height as the button beside it.

   LEGACY NAMES ARE ALIASED BELOW, so no page had its markup rewritten and no JS moved. New
   buttons should use .b plus a role and nothing else.

   WHAT THIS FILE DELIBERATELY DOES NOT TOUCH:
   - `.pill`. It is used 111 times and it is mostly a <span> status tag with state modifiers
     (paid, off, na, future), not a button. Twenty spans to eight buttons.
   - `.btn-gold`, which is billing's deliberate gold action and is not this blue at all.
   - The page-specific one-offs that belong to a single widget: dbm-btn, ebm-btn, pw-btn,
     exp-btn, rg-impbtn, rq-holdbtn, bx-sync-btn, rq-sbtn. Those are a follow-up, and folding
     them in blind would move layouts nobody asked to move.

   LOADED LAST in every page's <head>, after that page's own <style>, so these win at equal
   specificity. Same arrangement as sf-tabs.css.
   ============================================================================================ */

/* ------------------------------------------------------------------------------------- base */
.b,
.btn,
.btn-sm,
.btn-primary,
.btn-ghost,
.btn-save,
.btn-mini,
.btn-mini2,
.btn-row,
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 10px;
  min-height: 40px;
  transition: background .14s, color .14s, border-color .14s, box-shadow .14s;
}
.b svg, .btn svg, .btn-sm svg, .btn-primary svg, .btn-ghost svg, .btn-save svg,
.btn-mini svg, .btn-mini2 svg, .btn-row svg, .icon-btn svg { width: 16px; height: 16px; flex: none; }

.b:disabled, .btn:disabled, .btn-sm:disabled, .btn-primary:disabled, .btn-ghost:disabled,
.btn-save:disabled, .btn-mini:disabled, .btn-mini2:disabled, .btn-row:disabled, .icon-btn:disabled,
.b.is-disabled, .btn.is-disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.b:focus-visible, .btn:focus-visible, .btn-sm:focus-visible, .btn-primary:focus-visible,
.btn-ghost:focus-visible, .btn-save:focus-visible, .btn-mini:focus-visible,
.btn-mini2:focus-visible, .btn-row:focus-visible, .icon-btn:focus-visible {
  outline: 2px solid var(--sf-blue-500, #2f82c4);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------------------------ sizes */
.b-lg { padding: 12px 22px; font-size: 14px; min-height: 46px; }
.b-sm,
.btn-sm,
.btn.sm,
.btn-row { padding: 7px 14px; font-size: 11.5px; min-height: 34px; border-radius: 9px; }
.b-xs,
.btn-mini,
.btn-mini2,
.btn.mini { padding: 5px 10px; font-size: 10.5px; min-height: 28px; border-radius: 8px; letter-spacing: .07em; }

/* ------------------------------------------------------------------------------------ roles */
/* SECONDARY IS THE DEFAULT. A bare .btn or .btn-sm with no role is a secondary button, which is
   what almost all of them were already. */
.b-secondary,
.btn,
.btn-sm,
.btn-mini,
.btn-mini2,
.btn-row,
.icon-btn {
  background: var(--sf-white, #fff);
  border-color: var(--sf-border, #e2e8f2);
  color: var(--sf-ink-60, #475067);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15,27,61,.06));
}
.b-secondary:hover, .btn:hover, .btn-sm:hover, .btn-mini:hover, .btn-mini2:hover, .btn-row:hover,
.icon-btn:hover {
  border-color: var(--sf-blue-700, #1b2f6e);
  color: var(--sf-blue-700, #1b2f6e);
}

.b-primary,
.btn-primary,
.btn-save,
.btn.primary,
.btn.pri,
.btn.strong,
.btn-sm.primary {
  background: var(--grad-blue, linear-gradient(135deg,#2f82c4,#1b2f6e));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px -5px rgba(47,130,196,.6);
}
.b-primary:hover, .btn-primary:hover, .btn-save:hover, .btn.primary:hover, .btn.pri:hover,
.btn.strong:hover, .btn-sm.primary:hover {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px -6px rgba(47,130,196,.75);
}

.b-ghost,
.btn-ghost,
.btn.ghost,
.btn-sm.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--sf-ink-60, #475067);
  box-shadow: none;
}
.b-ghost:hover, .btn-ghost:hover, .btn.ghost:hover, .btn-sm.ghost:hover {
  background: var(--sf-blue-50, #f4f8fd);
  border-color: transparent;
  color: var(--sf-blue-700, #1b2f6e);
}

.b-danger,
.btn.danger,
.btn-sm.danger,
.btn.warn,
.btn-sm.warn,
.btn-mini2.att-danger {
  background: var(--sf-white, #fff);
  border-color: #f0c3c0;
  color: var(--sf-red, #d8453d);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15,27,61,.06));
}
.b-danger:hover, .btn.danger:hover, .btn-sm.danger:hover, .btn.warn:hover, .btn-sm.warn:hover,
.btn-mini2.att-danger:hover {
  background: #fdf1f0;
  border-color: var(--sf-red, #d8453d);
  color: var(--sf-red, #d8453d);
}

/* ---------------------------------------------------------------------------------- icon only
   .icon-btn takes the secondary paint above as well as this sizing. Leaving it out was the one
   thing the cross-page probe caught: with sizing but no role it fell through to whatever colour
   each page happened to give it, so the same icon button was a different colour on three pages. */
.b-icon,
.icon-btn {
  padding: 0;
  width: 38px;
  height: 38px;
  min-height: 38px;
  gap: 0;
  border-radius: 10px;
}
.b-icon svg, .icon-btn svg { width: 17px; height: 17px; }

/* -------------------------------------------------------------------------------------- phone
   The same 44px minimum the rest of these pages use. */
@media (max-width: 700px) {
  .b, .btn, .btn-sm, .btn-primary, .btn-ghost, .btn-save, .btn-mini, .btn-mini2, .btn-row {
    min-height: 44px;
  }
  .b-xs, .btn-mini, .btn-mini2, .btn.mini { min-height: 36px; font-size: 11.5px; }
  .b-icon, .icon-btn { width: 44px; height: 44px; min-height: 44px; }
}