/* ============================================================
 * YouthSoccerGenie — Button Style Overrides
 * Build: YSG_V02_BUTTON_STYLES
 * Source: coaches-portal-v5.1.html (approved mockup)
 *
 * Purpose: Override Bootstrap default button styles with brand
 * gold/navy/cream palette. Must load AFTER Bootstrap.
 * ============================================================ */

/* ===== BASE BUTTON ===== */
.btn,
button.btn,
a.btn,
input[type="button"].btn,
input[type="submit"].btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
}

/* ===== GOLD BUTTON (Primary Action) ===== */
.btn.btn-gold,
button.btn-gold,
a.btn-gold {
    background: rgba(212, 168, 75, 0.92);
    color: var(--navy, #0B1A2E);
}

.btn.btn-gold:hover,
button.btn-gold:hover,
a.btn-gold:hover {
    background: var(--gold-hover, #E5B957);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.15));
}

.btn.btn-gold:active,
button.btn-gold:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0,0,0,0.1));
}

.btn.btn-gold:focus-visible,
button.btn-gold:focus-visible {
    outline: 2px solid var(--gold, #D4A84B);
    outline-offset: 2px;
}

/* ===== OUTLINE BUTTON ===== */
.btn.btn-outline,
button.btn-outline,
a.btn-outline {
    background: rgba(255, 255, 255, 0.88);
    color: var(--navy, #0B1A2E);
    border: 1.5px solid var(--border, #D6D3CE);
}

.btn.btn-outline:hover,
button.btn-outline:hover,
a.btn-outline:hover {
    border-color: var(--gold, #D4A84B);
    color: var(--gold, #D4A84B);
}

.btn.btn-outline:focus-visible,
button.btn-outline:focus-visible {
    outline: 2px solid var(--gold, #D4A84B);
    outline-offset: 2px;
}

/* ===== NAVY BUTTON ===== */
.btn.btn-navy,
button.btn-navy,
a.btn-navy {
    background: rgba(11, 26, 46, 0.88);
    color: var(--cream, #F4F0E8);
}

.btn.btn-navy:hover,
button.btn-navy:hover,
a.btn-navy:hover {
    background: var(--navy-light, #1E3A5F);
}

.btn.btn-navy:focus-visible,
button.btn-navy:focus-visible {
    outline: 2px solid var(--gold, #D4A84B);
    outline-offset: 2px;
}

/* ===== DANGER BUTTON ===== */
.btn.btn-danger,
button.btn-danger,
a.btn-danger {
    background: rgba(239, 68, 68, 0.90);
    color: white;
}

.btn.btn-danger:hover,
button.btn-danger:hover,
a.btn-danger:hover {
    background: rgba(220, 50, 50, 0.95);
    transform: translateY(-1px);
}

.btn.btn-danger:focus-visible,
button.btn-danger:focus-visible {
    outline: 2px solid #EF4444;
    outline-offset: 2px;
}

/* ===== SUCCESS BUTTON ===== */
.btn.btn-success,
button.btn-success,
a.btn-success {
    background: rgba(34, 197, 94, 0.90);
    color: white;
}

.btn.btn-success:hover,
button.btn-success:hover,
a.btn-success:hover {
    background: rgba(22, 163, 74, 0.95);
    transform: translateY(-1px);
}

.btn.btn-success:focus-visible,
button.btn-success:focus-visible {
    outline: 2px solid #22C55E;
    outline-offset: 2px;
}

/* ===== SIZE VARIANTS ===== */
.btn.btn-sm,
button.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}

.btn.btn-lg,
button.btn-lg {
    padding: 14px 28px;
    font-size: 16px;
}

.btn.btn-block,
button.btn-block {
    width: 100%;
    justify-content: center;
}

/* ===== SPECIAL BUTTONS ===== */
.btn-dark-mode {
    background: none;
    border: 1px solid var(--border, #D6D3CE);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--muted, #1E3A5F);
    cursor: pointer;
}

.score-btn {
    padding: 8px 16px;
    margin: 0 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    background: var(--light-bg, #F9F7F3);
    border: 1px solid var(--border, #D6D3CE);
    border-radius: 6px;
}

.score-btn:hover {
    background: var(--gold-dim, #B8943F);
}

/* ===== BUTTON ANIMATION ===== */
.confirm-subs-btn {
    animation: pulse-btn 1.5s infinite;
}

/* ===== BOOTSTRAP OVERRIDE: Remove blue defaults ===== */
.btn-primary,
button.btn-primary {
    background: rgba(212, 168, 75, 0.92);
    color: var(--navy, #0B1A2E);
    border: none;
}

.btn-primary:hover,
button.btn-primary:hover {
    background: var(--gold-hover, #E5B957);
    color: var(--navy, #0B1A2E);
    border: none;
}

.btn-primary:focus,
button.btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(212, 168, 75, 0.25);
}

.btn-secondary,
button.btn-secondary {
    background: rgba(11, 26, 46, 0.88);
    color: var(--cream, #F4F0E8);
    border: none;
}

.btn-secondary:hover,
button.btn-secondary:hover {
    background: var(--navy-light, #1E3A5F);
    color: var(--cream, #F4F0E8);
    border: none;
}