/* 
 * Modern Header Buttons Styling
 * Updated button colors for modern, consistent look
 */

/* ========================================
 * MODERN BUTTON COLORS
 * ======================================== */

/* Primary Blue Button - Modern Gradient */
.btn-primary {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3) !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2980b9 0%, #1f5f8b 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4) !important;
}

.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(135deg, #1f5f8b 0%, #1a4c73 100%) !important;
    box-shadow: 0 2px 10px rgba(52, 152, 219, 0.3) !important;
    transform: translateY(0) !important;
}

/* Success Green Button - Modern Gradient */
.btn-success {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3) !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4) !important;
}

.btn-success:focus,
.btn-success:active {
    background: linear-gradient(135deg, #229954 0%, #1e8449 100%) !important;
    box-shadow: 0 2px 10px rgba(39, 174, 96, 0.3) !important;
    transform: translateY(0) !important;
}

/* Info Light Blue Button - Modern Gradient */
.btn-info {
    background: linear-gradient(135deg, #17a2b8 0%, #20c997 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3) !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
}

.btn-info:hover {
    background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4) !important;
}

.btn-info:focus,
.btn-info:active {
    background: linear-gradient(135deg, #138496 0%, #0f6674 100%) !important;
    box-shadow: 0 2px 10px rgba(23, 162, 184, 0.3) !important;
    transform: translateY(0) !important;
}

/* Warning Orange Button - Modern Gradient */
.btn-warning {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3) !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4) !important;
}

.btn-warning:focus,
.btn-warning:active {
    background: linear-gradient(135deg, #d68910 0%, #b7950b 100%) !important;
    box-shadow: 0 2px 10px rgba(243, 156, 18, 0.3) !important;
    transform: translateY(0) !important;
}

/* Danger Red Button - Modern Gradient */
.btn-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3) !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4) !important;
}

.btn-danger:focus,
.btn-danger:active {
    background: linear-gradient(135deg, #a93226 0%, #922b21 100%) !important;
    box-shadow: 0 2px 10px rgba(231, 76, 60, 0.3) !important;
    transform: translateY(0) !important;
}

/* Default Gray Button - Modern Gradient */
.btn-default,
.btn-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3) !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    color: white !important;
}

.btn-default:hover,
.btn-secondary:hover {
    background: linear-gradient(135deg, #495057 0%, #343a40 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4) !important;
    color: white !important;
}

.btn-default:focus,
.btn-default:active,
.btn-secondary:focus,
.btn-secondary:active {
    background: linear-gradient(135deg, #343a40 0%, #212529 100%) !important;
    box-shadow: 0 2px 10px rgba(108, 117, 125, 0.3) !important;
    transform: translateY(0) !important;
    color: white !important;
}

/* ========================================
 * HEADER SPECIFIC BUTTON STYLING
 * ======================================== */

/* Header navbar buttons */
.main-header .navbar .btn,
.main-header .navbar-custom-menu .btn {
    border-radius: 6px !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
    margin: 0 2px !important;
}

/* Header dropdown buttons */
.dropdown-menu .btn {
    border-radius: 6px !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    margin: 2px !important;
    width: auto !important;
}

/* ========================================
 * RESPONSIVE DESIGN
 * ======================================== */

@media (max-width: 768px) {
    .main-header .navbar .btn {
        font-size: 12px !important;
        padding: 6px 12px !important;
        margin: 1px !important;
    }
    
    .dropdown-menu .btn {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }
}

/* ========================================
 * SPECIAL EFFECTS
 * ======================================== */

/* Button glow effect on focus */
.btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25) !important;
}

/* Smooth transitions for all buttons */
.btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Button group styling */
.btn-group .btn {
    border-radius: 0 !important;
}

.btn-group .btn:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.btn-group .btn:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}