/* ============================================================
   Hubbe Registry — Button Styles
   All button overrides and custom button classes live here.
   Loaded after app.css, before component-scoped styles.
   ============================================================ */

/* ── Links & btn-link ── */
/* Uses --color-primary-aa (deep grapefruit) so link text clears WCAG AA (4.5:1) on white.
   The brand --color-primary is only 3.3:1 with white — too low for normal-size text. */
a, .btn-link {
    color: var(--color-primary-aa);
}

/* WCAG 1.4.1 (Use of Color) — inline text links and button-styled-as-link
   elements need a non-color signal so colorblind / low-contrast users can
   distinguish them from surrounding text. Underline by default; consumers
   can opt out with Bootstrap's `.text-decoration-none` utility (e.g., for
   button-styled toggles in dropdowns or buttons in disclosure flows). */
.btn-link {
    text-decoration: underline;
}

/* Exception: btn-link buttons whose only child is an icon (copy-to-clipboard,
   inline action triggers) — the icon glyph itself provides the visual signal,
   so an underline beneath the icon adds noise without aiding distinction. */
.btn-link:has(> i.bi:only-child) {
    text-decoration: none;
}

/* ── Focus ring (all buttons + form controls) ── */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--hubbe-grapefruit-2);
}

/* ── Primary / Save / Submit (deep Grapefruit) ──
   Uses --color-primary-aa (deeper than the brand grapefruit) so white text on the
   solid fill clears WCAG AA (4.5:1). The brand --color-primary is only 3.3:1 with white. */
.btn-primary {
    color: #fff;
    background-color: var(--color-primary-aa);
    border-color: var(--color-primary-aa-hover);
}

.btn-primary:hover {
    color: #fff;
    background-color: var(--color-primary-aa-hover);
    border-color: var(--color-primary-aa-hover);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--color-primary-aa);
    border-color: var(--color-primary-aa-hover);
    opacity: 0.65;
}

/* ── Outline Primary (Grapefruit outline → Grapefruit fill on hover) ── */
/* Outline-primary text/border use --color-primary-aa so the grapefruit text clears
   WCAG AA (4.5:1) on white; hover fills with the same deep grapefruit under white text. */
.btn-outline-primary {
    color: var(--color-primary-aa);
    border-color: var(--color-primary-aa);
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--color-primary-aa);
    border-color: var(--color-primary-aa);
}

/* ── Create / Add + Edit (Blue) ──
   Create and Edit share one rule block so they are guaranteed identical and a
   future blue change happens in exactly one place. `registry-btn-edit` is a
   COLOR add-on like `registry-btn-create` — always used WITH the `.btn` base
   (e.g. `class="btn btn-sm registry-btn-edit"`). */
.registry-btn-create,
.registry-btn-edit {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0b5ed7;
}

.registry-btn-create:hover,
.registry-btn-edit:hover {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.registry-btn-create:disabled,
.registry-btn-create.disabled,
.registry-btn-edit:disabled,
.registry-btn-edit.disabled {
    background-color: #0d6efd;
    border-color: #0b5ed7;
    opacity: 0.65;
}

/* ── Outline Create (Blue outline → Blue fill on hover) ── */
.registry-btn-outline-create {
    color: #0d6efd;
    border-color: #0d6efd;
    background-color: transparent;
}

.registry-btn-outline-create:hover {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* ── Back Link (top-left hyperlink-look back navigation: ← arrow + text) ──
   Shared by the `BackLink` component. The same look applies whether the
   underlying element is an <a href> (static nav) or a <button> (programmatic
   nav), so the <button> variant sheds its native button chrome below.
   Resting state has no underline (matches the canonical pattern); hover adds
   an underline for affordance. */
.registry-back-link-wrap {
    margin-bottom: 1rem;
}

.registry-back-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary-aa);
    text-decoration: none;
}

.registry-back-link:hover {
    color: var(--color-primary-aa-hover);
    text-decoration: underline;
}

/* <button> variant: strip native button chrome so it renders identically to the <a> */
button.registry-back-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

/* ── Secondary (Gray — explicit hover for consistency) ── */
.btn-secondary:hover {
    background-color: #5c636a;
    border-color: #565e64;
}

/* ── Danger / Delete (Red — explicit hover for consistency) ── */
.btn-danger:hover {
    background-color: #bb2d3b;
    border-color: #b02a37;
}

/* ── CTA Orange (Landing/Account pages) ──
   Dark text on the bright brand fill — white text on #F5A623 is only 2.0:1 (fails even
   AA-Large). Near-black (--neutral-900) on the orange is 8.7:1 (6.8:1 on hover) — AAA. */
.registry-btn-cta-orange {
    color: var(--neutral-900);
    background-color: var(--hubbe-orange);
    border-color: var(--hubbe-orange);
}

.registry-btn-cta-orange:hover {
    color: var(--neutral-900);
    background-color: #D9911E;
    border-color: #D9911E;
}

.registry-btn-cta-orange:disabled,
.registry-btn-cta-orange.disabled {
    background-color: var(--hubbe-orange);
    border-color: var(--hubbe-orange);
    opacity: 0.65;
}

/* ── CTA Mint (Landing/Account pages) ──
   Dark text on the brand mint — white was 2.9:1 (fail). --neutral-900 on mint is 6.2:1
   (4.6:1 on the darker hover) — AA. */
.registry-btn-cta-mint {
    color: var(--neutral-900);
    background-color: var(--hubbe-mint);
    border-color: var(--hubbe-mint);
}

.registry-btn-cta-mint:hover {
    color: var(--neutral-900);
    background-color: #6B877E;
    border-color: #6B877E;
}

.registry-btn-cta-mint:disabled,
.registry-btn-cta-mint.disabled {
    background-color: var(--hubbe-mint);
    border-color: var(--hubbe-mint);
    opacity: 0.65;
}

/* ── CTA Mustard (Landing/Account pages) ──
   Dark text on the brand mustard — white was 3.0:1 (fail). --neutral-900 on mustard is
   5.9:1 (4.6:1 on the darker hover) — AA. */
.registry-btn-cta-mustard {
    color: var(--neutral-900);
    background-color: var(--hubbe-mustard);
    border-color: var(--hubbe-mustard);
}

.registry-btn-cta-mustard:hover {
    color: var(--neutral-900);
    background-color: #AD7625;
    border-color: #AD7625;
}

.registry-btn-cta-mustard:disabled,
.registry-btn-cta-mustard.disabled {
    background-color: var(--hubbe-mustard);
    border-color: var(--hubbe-mustard);
    opacity: 0.65;
}

/* ── Positive (affirmative-workflow action — added 2026-05-21) ──
   Replaces btn-success. Brand-coordinated mint (#4A6B62 = darker mint).
   White text on #4A6B62 = 5.5:1 contrast — WCAG AA.
   Closed allowed-page list: TrainingCalendar "Manage Registration",
   ManageTrainingRegistrants bulk-action, ApiClientsManager (audit-pending).
   New uses require arch-doc update + PR justification. */
.btn-positive {
    color: var(--color-positive-text);
    background-color: var(--color-positive);
    border-color: var(--color-positive);
}

.btn-positive:hover {
    color: var(--color-positive-text);
    background-color: var(--color-positive-hover);
    border-color: var(--color-positive-hover);
}

.btn-positive:disabled,
.btn-positive.disabled {
    color: var(--color-positive-text);
    background-color: var(--color-positive);
    border-color: var(--color-positive);
    opacity: 0.65;
}

/* ── Pending (in-progress / awaiting-action workflow button — added 2026-05-22) ──
   Mirrors the `registry-badge-warning` "Pending" badge visual (light amber bg, dark text,
   darker amber border) so a user reads the button and the corresponding status badge as
   the same affordance. Use for actions that put the user into a "waiting" state — e.g.,
   the "Join Waitlist" CTA on TrainingCalendar. Replaces btn-outline-warning where the
   warning-on-white contrast was too low to scan quickly. */
.btn-pending {
    color: var(--neutral-900);
    background-color: var(--color-warning-bg);
    border-color: var(--color-warning);
}

.btn-pending:hover {
    color: var(--neutral-900);
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}

.btn-pending:disabled,
.btn-pending.disabled {
    color: var(--neutral-900);
    background-color: var(--color-warning-bg);
    border-color: var(--color-warning);
    opacity: 0.65;
}

/* Outline variant — softer affirmative (e.g., secondary actions on a positive flow) */
.btn-outline-positive {
    color: var(--color-positive);
    border-color: var(--color-positive);
    background-color: transparent;
}

.btn-outline-positive:hover {
    color: var(--color-positive-text);
    background-color: var(--color-positive);
    border-color: var(--color-positive);
}