/* ============================================
   BUTTON SYSTEM - Outplay Guides

   Design System:
   - All transitions: 0.3s ease (specific properties only)
   - Hover: translateY(-2px) elevation
   - Active: scale(0.98) press feedback
   - Focus: visible outline for accessibility
   ============================================ */

/* ============================================
   CSS VARIABLES - Color Palette
   ============================================ */

:root {
    /* Primary Colors */
    --color-gold: #f39c12;
    --color-gold-dark: #e67e22;
    --color-gold-light: #ffa726;

    /* Secondary Colors */
    --color-purple: #9146FF;
    --color-purple-light: #b47eff;
    --color-purple-lighter: #d0a0ff;

    /* Danger Colors */
    --color-red: #e74c3c;
    --color-red-dark: #c0392b;
    --color-red-light: #ff6b5a;

    /* Neutrals */
    --color-dark: #0a0a0f;
    --color-dark-alt: #16213e;
    --color-text-light: #e4e4e4;

    /* Button Spacing */
    --btn-padding: 12px 28px;
    --btn-padding-small: 8px 18px;
    --btn-padding-large: 16px 36px;
    --btn-padding-action: 10px 24px;

    /* Button Sizing */
    --btn-font-size: 16px;
    --btn-font-size-small: 14px;
    --btn-font-size-large: 18px;
    --btn-font-size-action: 15px;
    --btn-border-radius: 8px;

    /* Transitions */
    --btn-transition: transform 0.3s ease, background 0.3s ease,
                      color 0.3s ease, box-shadow 0.3s ease,
                      border-color 0.3s ease;
}

/* ============================================
   BASE BUTTON STYLES
   Shared properties for all buttons
   ============================================ */

.btn-primary,
.btn-primary-standard,
.btn-primary-special,
.btn-secondary,
.btn-secondary-edit,
.btn-secondary-cancel,
.btn-danger,
.btn-action,
.btn-action-gold,
.btn-action-purple {
    font-family: inherit;
    font-weight: 600;
    border-radius: var(--btn-border-radius);
    cursor: pointer;
    transition: var(--btn-transition);
    text-decoration: none;
    display: inline-block;
    text-align: center;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================
   PRIMARY BUTTONS - Critical Actions
   Usage: Save, Create, Confirm, Save Playbook
   APPROVED: Option 1 (Gold Gradient + Shine)
   ============================================ */

.btn-primary,
.btn-primary-standard {
    padding: var(--btn-padding);
    border: none;
    font-size: var(--btn-font-size);
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    color: var(--color-dark);
    box-shadow:
        0 4px 15px rgba(243, 156, 18, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.btn-primary::before,
.btn-primary-standard::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.btn-primary:hover::before,
.btn-primary-standard:hover::before {
    left: 100%;
}

.btn-primary:hover,
.btn-primary-standard:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(243, 156, 18, 0.6),
        0 0 30px rgba(243, 156, 18, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-primary:active,
.btn-primary-standard:active {
    transform: translateY(0);
    box-shadow:
        0 2px 8px rgba(243, 156, 18, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-primary:focus-visible,
.btn-primary-standard:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* ============================================
   PRIMARY SPECIAL - Unique Important Actions
   Usage: Start Verification, Special Features
   APPROVED: Option 3 (Purple-Gold Split Gradient)
   ============================================ */

.btn-primary-special {
    padding: var(--btn-padding);
    border: none;
    font-size: var(--btn-font-size);
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-gold) 100%);
    color: white;
    box-shadow:
        0 4px 15px rgba(145, 70, 255, 0.3),
        0 4px 15px rgba(243, 156, 18, 0.3);
    position: relative;
}

.btn-primary-special:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(145, 70, 255, 0.5),
        0 6px 20px rgba(243, 156, 18, 0.5),
        0 0 40px rgba(200, 100, 180, 0.4);
}

.btn-primary-special:active {
    transform: translateY(0) scale(0.98);
}

.btn-primary-special:focus-visible {
    outline: 2px solid var(--color-purple);
    outline-offset: 2px;
}

/* ============================================
   SECONDARY BUTTONS - Common Actions

   Two variants:
   - Edit Actions: Purple (btn-secondary-edit)
   - Cancel Actions: Gold Outline (btn-secondary-cancel)
   ============================================ */

/* Secondary Edit - For Edit Actions */
.btn-secondary,
.btn-secondary-edit {
    padding: var(--btn-padding);
    border: 2px solid var(--color-purple);
    font-size: var(--btn-font-size);
    background: rgba(145, 70, 255, 0.1);
    color: var(--color-purple-light);
}

.btn-secondary:hover,
.btn-secondary-edit:hover {
    background: rgba(145, 70, 255, 0.2);
    border-color: var(--color-purple-light);
    color: var(--color-purple-lighter);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(145, 70, 255, 0.4);
}

.btn-secondary:active,
.btn-secondary-edit:active {
    transform: translateY(0);
}

.btn-secondary:focus-visible,
.btn-secondary-edit:focus-visible {
    outline: 2px solid var(--color-purple);
    outline-offset: 2px;
}

/* Secondary Cancel - For Cancel Actions */
.btn-secondary-cancel {
    padding: var(--btn-padding);
    border: 2px solid var(--color-gold);
    font-size: var(--btn-font-size);
    background: transparent;
    color: var(--color-gold);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-secondary-cancel:hover {
    background: rgba(243, 156, 18, 0.15);
    border-color: var(--color-gold-light);
    color: var(--color-gold-light);
    transform: translateY(-2px);
    box-shadow:
        0 4px 12px rgba(243, 156, 18, 0.3),
        inset 0 0 20px rgba(243, 156, 18, 0.1);
}

.btn-secondary-cancel:active {
    transform: translateY(0);
}

.btn-secondary-cancel:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* ============================================
   DANGER BUTTONS - Destructive Actions
   Usage: Delete, Remove
   APPROVED: Option 2 (Outlined Red)
   ============================================ */

.btn-danger {
    padding: var(--btn-padding);
    border: 2px solid var(--color-red);
    font-size: var(--btn-font-size);
    background: transparent;
    color: var(--color-red);
}

.btn-danger:hover {
    background: rgba(231, 76, 60, 0.15);
    border-color: var(--color-red-light);
    color: var(--color-red-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
}

.btn-danger:active {
    transform: translateY(0);
}

.btn-danger:focus-visible {
    outline: 2px solid var(--color-red);
    outline-offset: 2px;
}

/* ============================================
   ACTION BUTTONS - Utility Actions
   Usage: + Add, Copy from Library

   Two variants approved:
   - Gold (btn-action-gold)
   - Purple (btn-action-purple)
   ============================================ */

/* Base styles for both action variants */
.btn-action,
.btn-action-gold,
.btn-action-purple {
    padding: var(--btn-padding-action);
    border-width: 2px;
    border-style: solid;
    font-size: var(--btn-font-size-action);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Action Gold - Primary utility actions */
.btn-action,
.btn-action-gold {
    border-color: rgba(243, 156, 18, 0.5);
    background: rgba(243, 156, 18, 0.1);
    color: var(--color-gold);
}

.btn-action:hover,
.btn-action-gold:hover {
    background: rgba(243, 156, 18, 0.2);
    border-color: var(--color-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
}

.btn-action:active,
.btn-action-gold:active {
    transform: translateY(0) scale(0.98);
}

.btn-action:focus-visible,
.btn-action-gold:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* Add the + icon before text if button has .add class */
.btn-action.add::before,
.btn-action-gold.add::before,
.btn-action-purple.add::before {
    content: '+';
    font-size: 20px;
    font-weight: 700;
}

/* Action Purple - Alternative utility actions */
.btn-action-purple {
    border-color: rgba(145, 70, 255, 0.5);
    background: rgba(145, 70, 255, 0.1);
    color: var(--color-purple-light);
}

.btn-action-purple:hover {
    background: rgba(145, 70, 255, 0.2);
    border-color: var(--color-purple);
    color: var(--color-purple-lighter);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(145, 70, 255, 0.4);
}

.btn-action-purple:active {
    transform: translateY(0) scale(0.98);
}

.btn-action-purple:focus-visible {
    outline: 2px solid var(--color-purple);
    outline-offset: 2px;
}

/* ============================================
   ICON BUTTONS - Minimal Actions

   Two variants:
   - General icons (btn-icon)
   - Close buttons with red hover (btn-icon-close)

   APPROVED: Option 2 (Square with Backdrop Blur)
   ============================================ */

/* Base styles for icon buttons */
.btn-icon,
.btn-icon-close,
.close-modal-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--btn-border-radius);
    background: rgba(255, 255, 255, 0.05);
    /* Fallback for browsers without backdrop-filter support */
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    color: var(--color-text-light);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: var(--btn-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icon Button - General (gold hover) */
.btn-icon:hover {
    background: rgba(243, 156, 18, 0.2);
    border-color: var(--color-gold);
    color: var(--color-gold);
    transform: scale(1.1);
}

.btn-icon:active {
    transform: scale(0.95);
}

.btn-icon:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* Icon Button Close - Red hover for close actions */
.btn-icon-close:hover,
.close-modal-btn:hover {
    background: rgba(231, 76, 60, 0.2);
    border-color: var(--color-red);
    color: var(--color-red);
    transform: scale(1.1);
}

.btn-icon-close:active,
.close-modal-btn:active {
    transform: scale(0.95);
}

.btn-icon-close:focus-visible,
.close-modal-btn:focus-visible {
    outline: 2px solid var(--color-red);
    outline-offset: 2px;
}

/* ============================================
   BUTTON STATE MODIFIERS
   ============================================ */

/* Disabled State - All Buttons */
button:disabled,
.btn-primary:disabled,
.btn-primary-special:disabled,
.btn-secondary:disabled,
.btn-secondary-cancel:disabled,
.btn-danger:disabled,
.btn-action:disabled,
.btn-action-purple:disabled,
.btn-icon:disabled,
.btn-icon-close:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(50%);
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* Loading State - Optional */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   SIZE VARIATIONS
   ============================================ */

.btn-small {
    padding: var(--btn-padding-small) !important;
    font-size: var(--btn-font-size-small) !important;
}

.btn-large {
    padding: var(--btn-padding-large) !important;
    font-size: var(--btn-font-size-large) !important;
}

/* Icon buttons don't need size variations */
.btn-icon.btn-small,
.btn-icon.btn-large,
.btn-icon-close.btn-small,
.btn-icon-close.btn-large {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 20px !important;
}

/* ============================================
   LEGACY COMPATIBILITY
   Gradually migrate old classes to new system
   ============================================ */

/* Old .btn class - basic button base */
.btn {
    padding: 12px 24px;
    border: none;
    border-radius: var(--btn-border-radius);
    cursor: pointer;
    font-size: var(--btn-font-size);
    transition: var(--btn-transition);
}

/* Keep existing .btn-google and .btn-twitch for auth */
/* These are defined in core.css and should remain unchanged */

/* Old add-list-item-btn - map to action button gold */
.add-list-item-btn {
    padding: var(--btn-padding-action);
    border: 2px solid rgba(243, 156, 18, 0.5);
    border-radius: var(--btn-border-radius);
    background: rgba(243, 156, 18, 0.1);
    color: var(--color-gold);
    font-size: var(--btn-font-size-action);
    font-weight: 600;
    cursor: pointer;
    transition: var(--btn-transition);
}

.add-list-item-btn:hover {
    background: rgba(243, 156, 18, 0.2);
    border-color: var(--color-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
}

.add-list-item-btn:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Full width button */
.btn-full-width {
    width: 100%;
    display: flex !important;
    justify-content: center;
}

/* Icon + Text button helper */
.btn-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Button group container */
.btn-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.btn-group-right {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.btn-group-center {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.btn-group-between {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    :root {
        --btn-padding: 10px 20px;
        --btn-font-size: 14px;
    }

    .btn-group,
    .btn-group-right,
    .btn-group-between {
        gap: 8px;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-action {
        box-shadow: none !important;
        background: white !important;
        color: black !important;
        border: 1px solid black !important;
    }
}