/* Button Styles - Separate CSS File */

/* General button improvements */
.btn {
    border-radius: 0.75rem;
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    transition: all 0.2s ease;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0.01em;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.15);
}

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

/* Primary button */
.btn-primary {
    background: linear-gradient(120deg, var(--sb-secondary), var(--sb-primary));
    border: none;
    box-shadow: 0 15px 30px -15px rgba(79, 70, 229, 0.75);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(120deg, var(--sb-primary-dark), var(--sb-secondary));
    color: white;
}

/* Secondary button */
.btn-secondary {
    background: #e5e7eb;
    color: #374151;
}

.btn-secondary:hover {
    background: #d1d5db;
    color: #1f2937;
}

/* Outline Primary (Edit button) - White with blue border, blue on hover */
.btn-outline-primary {
    border: 1.5px solid #4f46e5 !important;
    color: #4f46e5 !important;
    background: white !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
    color: white !important;
    box-shadow: 0 12px 20px -10px rgba(79, 70, 229, 0.3) !important;
}

.btn-outline-primary:active,
.btn-outline-primary.active {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
    color: white !important;
}

/* Outline Secondary (View button) - White with grey border, grey on hover */
.btn-outline-secondary {
    border: 1.5px solid #9ca3af !important;
    color: #6b7280 !important;
    background: white !important;
}

.btn-outline-secondary:hover {
    background: #6b7280 !important;
    border-color: #6b7280 !important;
    color: white !important;
    box-shadow: 0 12px 20px -10px rgba(107, 114, 128, 0.3) !important;
}

.btn-outline-secondary:active {
    background: #4b5563 !important;
    border-color: #4b5563 !important;
    color: white !important;
}

/* Outline Success */
.btn-outline-success {
    border: 1.5px solid #22c55e !important;
    color: #22c55e !important;
    background: white !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: white !important;
    box-shadow: 0 12px 20px -10px rgba(34, 197, 94, 0.3) !important;
}

.btn-outline-success:active {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: white !important;
}

/* Outline Info */
.btn-outline-info {
    border: 1.5px solid #0ea5e9 !important;
    color: #0ea5e9 !important;
    background: white !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus {
    background: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
    color: white !important;
    box-shadow: 0 12px 20px -10px rgba(14, 165, 233, 0.35) !important;
}

.btn-outline-info:active {
    background: #0284c7 !important;
    border-color: #0369a1 !important;
    color: white !important;
}

/* Outline Warning */
.btn-outline-warning {
    border: 1.5px solid #f59e0b !important;
    color: #b45309 !important;
    background: white !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background: #f59e0b !important;
    border-color: #d97706 !important;
    color: white !important;
    box-shadow: 0 12px 20px -10px rgba(245, 158, 11, 0.35) !important;
}

.btn-outline-warning:active {
    background: #d97706 !important;
    border-color: #b45309 !important;
    color: white !important;
}

/* Outline Dark */
.btn-outline-dark {
    border: 1.5px solid #1f2937 !important;
    color: #1f2937 !important;
    background: white !important;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background: #1f2937 !important;
    border-color: #111827 !important;
    color: white !important;
    box-shadow: 0 12px 20px -10px rgba(17, 24, 39, 0.3) !important;
}

.btn-outline-dark:active {
    background: #0f172a !important;
    border-color: #020617 !important;
    color: white !important;
}

/* Generic outline tile button (uses CSS variable for color) */
.btn-outline-tile {
    --tile-color: #4f46e5;
    border: 1.5px solid var(--tile-color) !important;
    color: var(--tile-color) !important;
    background: white !important;
}

.btn-outline-tile:hover,
.btn-outline-tile:focus {
    background: var(--tile-color) !important;
    border-color: var(--tile-color) !important;
    color: white !important;
    box-shadow: 0 12px 20px -10px rgba(15, 23, 42, 0.25) !important;
}

.btn-outline-tile:active {
    background: var(--tile-color) !important;
    border-color: var(--tile-color) !important;
    color: white !important;
    opacity: 0.92;
}

/* Mark ready button: white with green border, green on hover */
.btn-mark-ready {
    border: 1.5px solid #22c55e !important;
    color: #22c55e !important;
    background: white !important;
}

.btn-mark-ready:hover,
.btn-mark-ready:focus {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: white !important;
    box-shadow: 0 12px 20px -10px rgba(34, 197, 94, 0.3) !important;
}

.btn-mark-ready:active {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: white !important;
}

/* Outline Danger button */
.btn-outline-danger {
    border: 1.5px solid #ef4444 !important;
    color: #ef4444 !important;
    background: white !important;
}

.btn-outline-danger:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: white !important;
    box-shadow: 0 12px 20px -10px rgba(239, 68, 68, 0.3) !important;
}

.btn-outline-danger:active {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: white !important;
}

/* Success button */
.btn-success {
    background: #22c55e;
    border-color: #22c55e;
    color: white;
}

.btn-success:hover {
    background: #16a34a;
    border-color: #16a34a;
}

/* Claim job button: white with orange outline, fills on hover */
.btn-claim {
    background: white !important;
    border: 1.5px solid #f97316 !important;
    color: #f97316 !important;
    box-shadow: none !important;
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #f97316;
    --bs-btn-color: #f97316;
    --bs-btn-hover-bg: #f97316;
    --bs-btn-hover-border-color: #f97316;
    --bs-btn-hover-color: #ffffff;
}

.btn-claim:hover,
.btn-claim:focus {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: white !important;
    box-shadow: 0 12px 20px -10px rgba(249, 115, 22, 0.35) !important;
}

.btn-claim:active {
    background: #ea580c !important;
    border-color: #c2410c !important;
    color: white !important;
}

/* Additional specificity override for claim button */
button.btn-claim,
button.btn-claim:focus,
button.btn-claim:hover {
    background: white !important;
    border: 1.5px solid #f97316 !important;
    color: #f97316 !important;
    box-shadow: none !important;
}

button.btn-claim:hover {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: white !important;
    box-shadow: 0 12px 20px -10px rgba(249, 115, 22, 0.35) !important;
}

a.btn-claim,
a.btn-claim:focus,
a.btn-claim:hover {
    background: white !important;
    border: 1.5px solid #f97316 !important;
    color: #f97316 !important;
    box-shadow: none !important;
}

a.btn-claim:hover {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: white !important;
    box-shadow: 0 12px 20px -10px rgba(249, 115, 22, 0.35) !important;
}

.btn-claim:disabled,
.btn-claim.disabled {
    background: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(249, 115, 22, 0.45) !important;
    color: rgba(249, 115, 22, 0.6) !important;
    box-shadow: none !important;
    opacity: 0.75 !important;
}