/* ==========================================================
   button.css — the ONE definition of a PRIMARY button (DRY)

   Loaded on every page that has a primary button, AFTER base.css, the group
   stylesheet and the page stylesheet (same slot as page-header.css), so its
   rules win by source order.

   Applied via the `btn-navy` marker class, which sits ALONGSIDE each button's
   existing class (`class="btn-publish btn-navy"`). The existing class is never
   removed, so page CSS keeps owning size/padding/radius/typography and every
   JavaScript selector, form binding and route keeps working untouched.

   Why a marker class and not a list of the ~46 primary class names: the same
   class means different things on different pages. `.btn-view-menu` is navy on
   the student booth page but a greyed-out `#b9c2d0` on the *unverified* booth
   page (deliberately inert for unverified users); `.action-btn` is navy on the
   suspended screens but white on staff concerns; `.btn-filter` is navy in booth
   reports, white/outline in activity logs and blue in marketplace. A global
   selector list would have silently promoted all of those to active navy CTAs.
   The marker is applied per element, so only buttons that were already
   navy-filled are affected.

   Deliberately NOT primary, and left alone (they are a different style, not a
   broken primary): blue-accent CTAs (.btn-view-details, .btn-reload,
   .camera-btn), the .cart-fab, segmented toggles (.stock-mode-btn.active),
   filter chips and pagination (.page-btn.active), and every `secondary` /
   `outline-*` / ghost / danger variant — including `.btn-confirmation.secondary`
   and `.action-btn.secondary`, which share a class name with a primary.
   ========================================================== */

.btn-navy {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    /* Icon + label spacing. These three are inert on non-flex buttons, so each
     button keeps whatever `display` its page CSS gives it — no layout shifts. */
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Hover lightens, press darkens — both stay navy, so a primary button never
   shifts hue. Replaces the old split where ~30 buttons flashed bright blue
   (#2563eb) and ~10 went darker navy. :not(:disabled) so a disabled button
   never reacts to the pointer. */
.btn-navy:hover:not(:disabled):not(.disabled) {
    background: var(--btn-primary-bg-hover);
    color: var(--btn-primary-fg);
}

.btn-navy:active:not(:disabled):not(.disabled) {
    background: var(--btn-primary-bg-active);
}

/* No button anywhere in the app defined a focus style, so keyboard users had
   only the browser default. :focus-visible keeps the ring off mouse clicks. */
.btn-navy:focus-visible {
    outline: 3px solid var(--btn-focus-ring);
    outline-offset: 2px;
}

/* One disabled look, replacing #94a3b8 / var(--grey) / #b9c2d0 / opacity:.55.
   `opacity: 1` overrides the pages that faded the button instead of recolouring
   it, so the disabled state is identical everywhere. Not a contrast concern:
   WCAG 1.4.3 exempts inactive controls. */
.btn-navy:disabled,
.btn-navy.disabled {
    background: var(--btn-primary-bg-disabled);
    color: var(--btn-primary-fg);
    opacity: 1;
    cursor: not-allowed;
}