/* ============================================
   UNIFIED BUTTON SYSTEM
   Consistent button styling across entire application
   Overrides Bootstrap and provides Agendrix-inspired look
   ============================================ */

/* ====== CSS VARIABLES ====== */
:root {
    /* Brand Colors */
    --btn-primary-bg: #d4af37;
    --btn-primary-hover: #c49a2a;
    --btn-primary-active: #b38924;
    --btn-primary-text: #1f2937;

    --btn-secondary-bg: #f3f4f6;
    --btn-secondary-hover: #e5e7eb;
    --btn-secondary-active: #d1d5db;
    --btn-secondary-text: #374151;
    --btn-secondary-border: #d1d5db;

    --btn-danger-bg: #ef4444;
    --btn-danger-hover: #dc2626;
    --btn-danger-active: #b91c1c;
    --btn-danger-text: #ffffff;

    --btn-warning-bg: #f59e0b;
    --btn-warning-hover: #d97706;
    --btn-warning-active: #b45309;
    --btn-warning-text: #ffffff;

    --btn-success-bg: #10b981;
    --btn-success-hover: #059669;
    --btn-success-active: #047857;
    --btn-success-text: #ffffff;

    --btn-info-bg: #3b82f6;
    --btn-info-hover: #2563eb;
    --btn-info-active: #1d4ed8;
    --btn-info-text: #ffffff;

    --btn-ghost-bg: transparent;
    --btn-ghost-hover: #f3f4f6;
    --btn-ghost-active: #e5e7eb;
    --btn-ghost-text: #374151;
    --btn-ghost-border: #d1d5db;

    /* Dark variant */
    --btn-dark-bg: #0d2b35;
    --btn-dark-hover: #1a4255;
    --btn-dark-active: #0a1f28;
    --btn-dark-text: #ffffff;

    /* Sizing */
    --btn-padding-y: 0.625rem;
    --btn-padding-x: 1.25rem;
    --btn-padding-y-sm: 0.375rem;
    --btn-padding-x-sm: 0.875rem;
    --btn-padding-y-lg: 0.875rem;
    --btn-padding-x-lg: 1.75rem;

    /* Border & Shadows */
    --btn-border-radius: 0.5rem;
    --btn-border-width: 1px;
    --btn-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --btn-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    /* Transitions */
    --btn-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ====== BASE BUTTON STYLES ====== */
.btn,
button.btn,
a.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: var(--btn-padding-y) var(--btn-padding-x) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.25rem !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    user-select: none !important;
    border: var(--btn-border-width) solid transparent !important;
    border-radius: var(--btn-border-radius) !important;
    transition: var(--btn-transition) !important;
    box-shadow: var(--btn-shadow) !important;
    font-family: inherit !important;
}

.btn:hover,
button.btn:hover,
a.btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--btn-shadow-hover) !important;
}

.btn:active,
button.btn:active,
a.btn:active {
    transform: translateY(0) !important;
    box-shadow: var(--btn-shadow) !important;
}

.btn:disabled,
button.btn:disabled,
a.btn:disabled,
.btn.disabled,
button.btn.disabled,
a.btn.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ====== PRIMARY BUTTON ====== */
.btn-primary,
button.btn-primary,
a.btn-primary {
    background: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover)) !important;
    color: var(--btn-primary-text) !important;
    border-color: var(--btn-primary-bg) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background: linear-gradient(135deg, var(--btn-primary-hover), var(--btn-primary-active)) !important;
    color: var(--btn-primary-text) !important;
    border-color: var(--btn-primary-hover) !important;
}

.btn-primary:active,
button.btn-primary:active,
a.btn-primary:active,
.btn-primary:focus,
button.btn-primary:focus,
a.btn-primary:focus {
    background: var(--btn-primary-active) !important;
    color: var(--btn-primary-text) !important;
    border-color: var(--btn-primary-active) !important;
}

/* ====== SECONDARY BUTTON ====== */
.btn-secondary,
button.btn-secondary,
a.btn-secondary {
    background: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
    border-color: var(--btn-secondary-border) !important;
}

.btn-secondary:hover,
button.btn-secondary:hover,
a.btn-secondary:hover {
    background: var(--btn-secondary-hover) !important;
    color: var(--btn-secondary-text) !important;
    border-color: var(--btn-secondary-border) !important;
}

.btn-secondary:active,
button.btn-secondary:active,
a.btn-secondary:active,
.btn-secondary:focus,
button.btn-secondary:focus,
a.btn-secondary:focus {
    background: var(--btn-secondary-active) !important;
    color: var(--btn-secondary-text) !important;
    border-color: var(--btn-secondary-border) !important;
}

/* ====== DANGER BUTTON ====== */
.btn-danger,
button.btn-danger,
a.btn-danger {
    background: var(--btn-danger-bg) !important;
    color: var(--btn-danger-text) !important;
    border-color: var(--btn-danger-bg) !important;
}

.btn-danger:hover,
button.btn-danger:hover,
a.btn-danger:hover {
    background: var(--btn-danger-hover) !important;
    color: var(--btn-danger-text) !important;
    border-color: var(--btn-danger-hover) !important;
}

.btn-danger:active,
button.btn-danger:active,
a.btn-danger:active,
.btn-danger:focus,
button.btn-danger:focus,
a.btn-danger:focus {
    background: var(--btn-danger-active) !important;
    color: var(--btn-danger-text) !important;
    border-color: var(--btn-danger-active) !important;
}

/* ====== WARNING BUTTON ====== */
.btn-warning,
button.btn-warning,
a.btn-warning {
    background: var(--btn-warning-bg) !important;
    color: var(--btn-warning-text) !important;
    border-color: var(--btn-warning-bg) !important;
}

.btn-warning:hover,
button.btn-warning:hover,
a.btn-warning:hover {
    background: var(--btn-warning-hover) !important;
    color: var(--btn-warning-text) !important;
    border-color: var(--btn-warning-hover) !important;
}

.btn-warning:active,
button.btn-warning:active,
a.btn-warning:active,
.btn-warning:focus,
button.btn-warning:focus,
a.btn-warning:focus {
    background: var(--btn-warning-active) !important;
    color: var(--btn-warning-text) !important;
    border-color: var(--btn-warning-active) !important;
}

/* ====== SUCCESS BUTTON ====== */
.btn-success,
button.btn-success,
a.btn-success {
    background: var(--btn-success-bg) !important;
    color: var(--btn-success-text) !important;
    border-color: var(--btn-success-bg) !important;
}

.btn-success:hover,
button.btn-success:hover,
a.btn-success:hover {
    background: var(--btn-success-hover) !important;
    color: var(--btn-success-text) !important;
    border-color: var(--btn-success-hover) !important;
}

.btn-success:active,
button.btn-success:active,
a.btn-success:active,
.btn-success:focus,
button.btn-success:focus,
a.btn-success:focus {
    background: var(--btn-success-active) !important;
    color: var(--btn-success-text) !important;
    border-color: var(--btn-success-active) !important;
}

/* ====== INFO BUTTON ====== */
.btn-info,
button.btn-info,
a.btn-info {
    background: var(--btn-info-bg) !important;
    color: var(--btn-info-text) !important;
    border-color: var(--btn-info-bg) !important;
}

.btn-info:hover,
button.btn-info:hover,
a.btn-info:hover {
    background: var(--btn-info-hover) !important;
    color: var(--btn-info-text) !important;
    border-color: var(--btn-info-hover) !important;
}

.btn-info:active,
button.btn-info:active,
a.btn-info:active,
.btn-info:focus,
button.btn-info:focus,
a.btn-info:focus {
    background: var(--btn-info-active) !important;
    color: var(--btn-info-text) !important;
    border-color: var(--btn-info-active) !important;
}

/* ====== GHOST/OUTLINE BUTTON ====== */
.btn-ghost,
button.btn-ghost,
a.btn-ghost,
.btn-outline,
button.btn-outline,
a.btn-outline {
    background: var(--btn-ghost-bg) !important;
    color: var(--btn-ghost-text) !important;
    border-color: var(--btn-ghost-border) !important;
}

.btn-ghost:hover,
button.btn-ghost:hover,
a.btn-ghost:hover,
.btn-outline:hover,
button.btn-outline:hover,
a.btn-outline:hover {
    background: var(--btn-ghost-hover) !important;
    color: var(--btn-ghost-text) !important;
    border-color: var(--btn-ghost-border) !important;
}

.btn-ghost:active,
button.btn-ghost:active,
a.btn-ghost:active,
.btn-ghost:focus,
button.btn-ghost:focus,
a.btn-ghost:focus,
.btn-outline:active,
button.btn-outline:active,
a.btn-outline:active,
.btn-outline:focus,
button.btn-outline:focus,
a.btn-outline:focus {
    background: var(--btn-ghost-active) !important;
    color: var(--btn-ghost-text) !important;
    border-color: var(--btn-ghost-border) !important;
}

/* ====== DARK BUTTON ====== */
.btn-dark,
button.btn-dark,
a.btn-dark {
    background: var(--btn-dark-bg) !important;
    color: var(--btn-dark-text) !important;
    border-color: var(--btn-dark-bg) !important;
}

.btn-dark:hover,
button.btn-dark:hover,
a.btn-dark:hover {
    background: var(--btn-dark-hover) !important;
    color: var(--btn-dark-text) !important;
    border-color: var(--btn-dark-hover) !important;
}

.btn-dark:active,
button.btn-dark:active,
a.btn-dark:active,
.btn-dark:focus,
button.btn-dark:focus,
a.btn-dark:focus {
    background: var(--btn-dark-active) !important;
    color: var(--btn-dark-text) !important;
    border-color: var(--btn-dark-active) !important;
}

/* ====== SIZE VARIANTS ====== */
.btn-sm,
button.btn-sm,
a.btn-sm,
.btn-compact,
button.btn-compact,
a.btn-compact {
    padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm) !important;
    font-size: 0.8125rem !important;
    gap: 0.375rem !important;
}

.btn-lg,
button.btn-lg,
a.btn-lg {
    padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg) !important;
    font-size: 1rem !important;
    gap: 0.625rem !important;
}

/* ====== ICON BUTTONS ====== */
.btn i,
button.btn i,
a.btn i {
    font-size: 1em;
    line-height: 1;
}

.btn-icon-only,
button.btn-icon-only,
a.btn-icon-only {
    padding: var(--btn-padding-y) var(--btn-padding-y) !important;
    aspect-ratio: 1 / 1;
    gap: 0 !important;
}

.btn-icon-only.btn-sm,
button.btn-icon-only.btn-sm,
a.btn-icon-only.btn-sm {
    padding: var(--btn-padding-y-sm) var(--btn-padding-y-sm) !important;
}

/* ====== BUTTON GROUPS ====== */
.btn-group {
    display: inline-flex;
    gap: 0.5rem;
}

.btn-group .btn,
.btn-group button.btn,
.btn-group a.btn {
    margin: 0 !important;
}

/* ====== FULL WIDTH BUTTONS ====== */
.btn-block,
button.btn-block,
a.btn-block {
    display: flex !important;
    width: 100% !important;
}

/* ====== LOADING STATE ====== */
.btn-loading,
button.btn-loading,
a.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after,
button.btn-loading::after,
a.btn-loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    margin-left: -0.5rem;
    margin-top: -0.5rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

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

/* ====== RESPONSIVE ====== */
@media (max-width: 640px) {
    .btn,
    button.btn,
    a.btn {
        font-size: 0.8125rem !important;
        padding: 0.5rem 1rem !important;
    }

    .btn-sm,
    button.btn-sm,
    a.btn-sm {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
    }
}

/* ====== REMOVE BOOTSTRAP CONFLICTS ====== */
.btn:focus,
button.btn:focus,
a.btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2) !important;
}

.btn:not(:disabled):not(.disabled),
button.btn:not(:disabled):not(.disabled),
a.btn:not(:disabled):not(.disabled) {
    cursor: pointer !important;
}

/* Remove Bootstrap's default focus ring */
.btn:focus-visible,
button.btn:focus-visible,
a.btn:focus-visible {
    outline: 2px solid var(--btn-primary-bg) !important;
    outline-offset: 2px !important;
}