/* =========================================================================
   Marquee Poker — shared button system (IBM Carbon-style, "option 4").
   Adopted app-wide 2026-06-13.

   WHY THIS FILE EXISTS
   --------------------
   Buttons were copy-pasted into ~29 pages' inline <style> blocks (a soft
   tonal look with 7-8px corners). This file is the single source of truth
   for the button LOOK; it's linked on every page so the whole app stays
   consistent. Page-specific inline rules for LAYOUT (padding, font-size,
   min-width, display) still apply — this only owns the visual treatment.

   WHY !important ON THE LOOK PROPS
   --------------------------------
   First attempt used `body .btn` (specificity 0,1,1) to win over inline
   `.btn` (0,1,0) without !important. That works for most pages, but
   several wrap buttons in a container and set the radius there
   (e.g. `.cta-block .btn`, 0,2,0) which out-specifies body-scoping. The
   corner radius and the variant fills are now brand-wide CONSTANTS — they
   should not be locally overridable — so they're marked !important here.
   Layout props are deliberately NOT important, so each page still controls
   its own button sizing/spacing.

   THE CARBON SIGNATURE
   --------------------
   - 2px corners (sharp, systematic — the recognizable Carbon trait)
   - solid fills for primary / success / danger (confident, high-contrast)
   - outlined blue for secondary
   - neutral/default `.btn` keeps its page fill, just sharpened + crisp focus
   ========================================================================= */

/* Sharp corners on every button, every page, every breakpoint (overrides
   the mobile `.btn { border-radius:12px }` and contextual `.x .btn`
   variants too — Carbon is sharp everywhere). */
body .btn {
  border-radius: 2px !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease, transform 80ms ease;
}

/* Accessible focus ring — Carbon leans hard on visible focus. */
body .btn:focus-visible {
  outline: 2px solid #60A5FA;
  outline-offset: 2px;
}

/* ---- Primary: solid Marquee blue ---------------------------------------- */
body .btn-primary {
  background: #3B82F6 !important;
  border-color: #3B82F6 !important;
  color: #FFFFFF !important;
}
body .btn-primary:hover {
  background: #2563EB !important;
  border-color: #2563EB !important;
}

/* ---- Secondary: outlined blue ------------------------------------------- */
body .btn-secondary {
  background: transparent !important;
  border-color: #60A5FA !important;
  color: #93C5FD !important;
}
body .btn-secondary:hover {
  background: rgba(96, 165, 250, 0.12) !important;
  color: #DBEAFE !important;
}

/* ---- Success: solid green (e.g. "End & pay out") ------------------------ */
body .btn-success {
  background: #16A34A !important;
  border-color: #16A34A !important;
  color: #FFFFFF !important;
}
body .btn-success:hover {
  background: #15803D !important;
  border-color: #15803D !important;
}

/* ---- Danger: solid red (e.g. Delete / Void) ---------------------------- */
body .btn-danger {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  color: #FFFFFF !important;
}
body .btn-danger:hover {
  background: #B91C1C !important;
  border-color: #B91C1C !important;
}

/* Disabled wins regardless of variant — keep solid fills from looking
   clickable when they're not. */
body .btn:disabled,
body .btn[disabled] {
  opacity: 0.4 !important;
  cursor: not-allowed;
}

/* =========================================================================
   LEGACY BESPOKE BUTTON CLASSES (2026-06-13 follow-up)
   -------------------------------------------------------------------------
   The app predates the `.btn` system, so many pages still use their own
   button classes (e.g. dashboard's `.new-btn`/`Import`, series' detail
   buttons, the dealer floor buttons, modal/picker buttons). This block
   folds them into the Carbon look: sharp 2px corners everywhere, and a
   solid-blue fill for the clear primary CTAs ("+ New …" / picker primary).

   Excluded by simply NOT listing their class below:
     - `.upgrade-btn`  — deliberate pill-shaped upgrade chip
     - `.google-btn`   — must stay Google-branded
     - `.feedback-btn` — pill-shaped nav affordance
     - the support-chat FAB — circular by design
   Semantic-coloured buttons (dealer bust/call-floor, *.danger) keep their
   colour; only their corners sharpen. NOTE: the icon-only classes in the
   list (.cog-btn, .icon-btn, etc.) are sharpened to 2px on the assumption
   they're rounded rectangles; if any turns out circular it becomes a 2px
   square — drop it from the list if that reads wrong on its page.
   ========================================================================= */

/* Sharp corners on every bespoke rectangular action / utility button. */
body .new-btn,            body .import-btn,         body .detail-btn,
body .rail-btn,           body .t-action-btn,       body .w2g-action-btn,
body .vote-btn,           body .var-btn,            body .surface-btn,
body .pair-btn,           body .members-add-btn,    body .retry-btn,
body .confirm-btn,        body .add-entry-btn,      body .check-out-btn,
body .call-floor-btn,     body .bust-btn,           body .modal-btn,
body .room-modal-btn,     body .rp-btn,             body .rp-btn-primary,
body .mqd-btn,            body .mqd-btn-primary,    body .gc-btn,
body .fa-btn,             body .edit-btn,           body .sumedit-btn,
body .verdict-btn,        body .remove-btn,         body .continue-btn,
body .seat-lock-btn,      body .row-btn,            body .icon-btn,
body .trash-btn,          body .cog-btn,            body .input-stepper-btn,
body .fullscreen-btn,     body .standings-edit-btn, body .detail-edit-btn,
body .row-remove-btn,     body .room-icon-btn,      body .rename-icon-btn,
body .accept-btn,         body .add-btn,            body .admin-btn,
body .admin-delete-btn,   body .dev-plan-btn,       body .floor-call-dismiss-btn,
body .time-picker-ampm-btn,
body .card-countdown-cancel-btn,                    body .members-add-btn {
  border-radius: 2px !important;
}

/* Primary CTAs (create / accept / picker-primary): solid Marquee blue.
   NON-important so a per-button inline neutral override still wins — e.g.
   the dashboard "Import" link is `.new-btn` with an inline grey style, and
   must stay neutral while "+ New Tournament" goes solid blue.
   NOTE: `.import-btn` is deliberately NOT here — Import is a SECONDARY
   action (its native style is a neutral ghost on every page), so it only
   gets sharp corners and stays neutral, preserving the one-primary
   hierarchy next to "+ New …". */
body .new-btn,
body .accept-btn,
body .rp-btn-primary,
body .mqd-btn-primary {
  background: #3B82F6;
  border-color: #3B82F6;
  color: #FFFFFF;
}
body .new-btn:hover,
body .accept-btn:hover,
body .rp-btn-primary:hover,
body .mqd-btn-primary:hover {
  background: #2563EB;
  border-color: #2563EB;
  color: #FFFFFF;
}

/* =========================================================================
   CATCH-ALL (2026-06-13) — buttons that carry NO recognizable button class
   -------------------------------------------------------------------------
   Some buttons are styled by element/container/ID selectors with no
   `.btn`-ish class at all — e.g. team's `.invite-form button`, waitlist's
   `.panel-cta`, the marketing `.cta` / `.tier-cta` links. The class lists
   above can't reach those, so this blanket sharpens EVERY <button>'s
   corners, with explicit exceptions for the two deliberately-round/branded
   ones: the circular chat FAB (.sc-bubble) and the Google sign-in button.
   ========================================================================= */
body button:not(.sc-bubble):not(.google-btn) {
  border-radius: 2px !important;
}

/* Link-styled (<a>) action buttons that use non-"btn" class names. */
body .panel-cta,        body .cta,                body .event-cta,
body .tier-cta,         body .tier-cta-primary,   body .tier-cta-secondary,
body .btn-approve,      body .btn-decline {
  border-radius: 2px !important;
}

/* Primary among the catch-all set → solid blue (the create/add/submit
   actions the operator reaches for): waitlist "+ Add game", pricing's
   primary tier CTA, and the bare form-submit primaries like team's
   "Create invite link". !important because these win over element- and
   container-scoped page rules. */
body .panel-cta,
body .tier-cta-primary,
body .invite-form button[type="submit"] {
  background: #3B82F6 !important;
  border-color: #3B82F6 !important;
  color: #FFFFFF !important;
}
body .panel-cta:hover,
body .tier-cta-primary:hover,
body .invite-form button[type="submit"]:hover {
  background: #2563EB !important;
  border-color: #2563EB !important;
  color: #FFFFFF !important;
}