/**
 * Button Visibility Fix - JobCast
 * 
 * This stylesheet ensures all buttons have visible text colors across all pages.
 * Applied to: Home, About, Jobs, Candidates, Contact, Career Resources, Recruitment Solutions
 */

/* ============================================
   STANDARDIZED BUTTON STYLES
   ============================================ */

/* Header Authentication Buttons - Specific Styles with Maximum Specificity */
/* These rules must override general .btn-outline and .btn-primary rules for header buttons only */
header .auth-buttons a.btn-outline,
header .auth-buttons .btn-outline,
.site-header .auth-buttons a.btn-outline,
.site-header .auth-buttons .btn-outline,
header.site-header .auth-buttons a.btn-outline,
header.site-header .auth-buttons .btn-outline,
header.site-header.header--underline .auth-buttons a.btn-outline,
header.site-header.header--underline .auth-buttons .btn-outline,
header.site-header.header--underline .navbar .auth-buttons a.btn-outline,
header.site-header.header--underline .navbar .auth-buttons .btn-outline {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid #3b82f6 !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
}

header .auth-buttons a.btn-outline:hover,
header .auth-buttons .btn-outline:hover,
.site-header .auth-buttons a.btn-outline:hover,
.site-header .auth-buttons .btn-outline:hover,
header.site-header .auth-buttons a.btn-outline:hover,
header.site-header .auth-buttons .btn-outline:hover,
header.site-header.header--underline .auth-buttons a.btn-outline:hover,
header.site-header.header--underline .auth-buttons .btn-outline:hover,
header.site-header.header--underline .navbar .auth-buttons a.btn-outline:hover,
header.site-header.header--underline .navbar .auth-buttons .btn-outline:hover {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #9ca3af !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
    text-decoration: none !important;
}

header .auth-buttons a.btn-primary,
header .auth-buttons .btn-primary,
.site-header .auth-buttons a.btn-primary,
.site-header .auth-buttons .btn-primary,
header.site-header .auth-buttons a.btn-primary,
header.site-header .auth-buttons .btn-primary,
header.site-header.header--underline .auth-buttons a.btn-primary,
header.site-header.header--underline .auth-buttons .btn-primary,
header.site-header.header--underline .navbar .auth-buttons a.btn-primary,
header.site-header.header--underline .navbar .auth-buttons .btn-primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

header .auth-buttons a.btn-primary:hover,
header .auth-buttons .btn-primary:hover,
.site-header .auth-buttons a.btn-primary:hover,
.site-header .auth-buttons .btn-primary:hover,
header.site-header .auth-buttons a.btn-primary:hover,
header.site-header .auth-buttons .btn-primary:hover,
header.site-header.header--underline .auth-buttons a.btn-primary:hover,
header.site-header.header--underline .auth-buttons .btn-primary:hover,
header.site-header.header--underline .navbar .auth-buttons a.btn-primary:hover,
header.site-header.header--underline .navbar .auth-buttons .btn-primary:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
    text-decoration: none !important;
}

/* Primary Button - Always visible with white text */
.btn-primary,
.btn.btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: 2px solid transparent !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.btn-primary:hover,
.btn.btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
    text-decoration: none !important;
}

/* Outline Button - Blue text with blue border (visible on light backgrounds) */
/* Note: Header buttons have specific styles above with higher specificity that override these general rules */
.btn-outline,
.btn.btn-outline {
    background-color: transparent !important;
    color: #2563eb !important;
    border: 2px solid #2563eb !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.btn-outline:hover,
.btn.btn-outline:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
    text-decoration: none !important;
}

/* White Outline Button - For dark backgrounds (CTA sections) */
.btn-outline-white,
.cta-section .btn-outline,
.hero .btn-outline,
.hero-career .btn-outline,
[style*="background: linear-gradient"] .btn-outline {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.btn-outline-white:hover,
.cta-section .btn-outline:hover,
.hero .btn-outline:hover,
.hero-career .btn-outline:hover,
[style*="background: linear-gradient"] .btn-outline:hover {
    background-color: #ffffff !important;
    color: #2563eb !important;
    border-color: #ffffff !important;
}

/* Light Button - White background with blue text */
.btn-light,
.btn.btn-light {
    background-color: #ffffff !important;
    color: #2563eb !important;
    border: 2px solid #ffffff !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.btn-light:hover,
.btn.btn-light:hover {
    background-color: #f8fafc !important;
    color: #1d4ed8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    text-decoration: none !important;
}

/* Secondary Button - Green gradient with white text */
.btn-secondary,
.btn.btn-secondary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: 2px solid transparent !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

.btn-secondary:hover,
.btn.btn-secondary:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}

/* ============================================
   PAGE-SPECIFIC BUTTON FIXES
   ============================================ */

/* Jobs Page - Save Button */
.save-job-details,
button.save-job-details {
    background: #f3f4f6 !important;
    border: 2px solid #2563eb !important;
    color: #2563eb !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.save-job-details:hover,
button.save-job-details:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    transform: translateY(-2px) !important;
}

.save-job-details i,
button.save-job-details i {
    color: inherit !important;
}

/* Apply Now Button */
.apply-now-btn,
a.apply-now-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: 2px solid transparent !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
}

.apply-now-btn:hover,
a.apply-now-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* Candidates Page - Request Contact Button */
.candidate-actions button,
.candidate-actions .btn {
    color: #ffffff !important;
}

.candidate-actions .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
}

.candidate-actions .btn-outline {
    background-color: transparent !important;
    color: #2563eb !important;
    border: 2px solid #2563eb !important;
}

.candidate-actions .btn-outline:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* Filter Buttons */
.filter-buttons button,
.filter-buttons .btn {
    color: #ffffff !important;
}

.filter-buttons .btn-outline {
    color: #2563eb !important;
    border-color: #2563eb !important;
}

.filter-buttons .btn-outline:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* Reset Button */
#resetFilters,
button#resetFilters {
    background-color: transparent !important;
    color: #2563eb !important;
    border: 2px solid #2563eb !important;
}

#resetFilters:hover,
button#resetFilters:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* Search Button */
.search-btn,
button.search-btn {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

.search-btn:hover,
button.search-btn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    color: #ffffff !important;
}

/* Career Resources Page - Standardized Buttons */
.resource-card .btn,
.resource-card .btn-light {
    background-color: #ffffff !important;
    color: #2563eb !important;
    border: 2px solid #2563eb !important;
}

.resource-card .btn:hover,
.resource-card .btn-light:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Hero Section Buttons */
.hero-career .btn-light {
    background-color: #ffffff !important;
    color: #2563eb !important;
    border: 2px solid #ffffff !important;
}

.hero-career .btn-light:hover {
    background-color: #f8fafc !important;
    color: #1d4ed8 !important;
}

/* CTA Section Buttons */
.cta-buttons .btn-primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
}

.cta-buttons .btn-primary:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
}

.cta-buttons .btn-outline {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.cta-buttons .btn-outline:hover {
    background-color: #ffffff !important;
    color: #2563eb !important;
}

/* Recruitment Solutions Page - Specific Fixes */
.job-card-footer .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
}

.job-card-footer .btn-outline {
    background-color: transparent !important;
    color: #2563eb !important;
    border: 2px solid #2563eb !important;
}

.job-card-footer .btn-outline:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

.view-all .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
}

.view-all .btn-outline {
    background-color: transparent !important;
    color: #2563eb !important;
    border: 2px solid #2563eb !important;
}

.view-all .btn-outline:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* ============================================
   MODAL AND FORM BUTTONS
   ============================================ */

/* Modal Buttons */
.modal-footer .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
}

.modal-footer .btn-outline {
    background-color: transparent !important;
    color: #2563eb !important;
    border: 2px solid #2563eb !important;
}

.modal-footer .btn-outline:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* Contact Form Submit Button */
.contact-form button[type="submit"],
.contact-form .btn-primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

.contact-form button[type="submit"]:hover,
.contact-form .btn-primary:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
}

/* Plans & Pricing Section */
.plan-action .btn-primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
}

.plan-action .btn-outline {
    background-color: transparent !important;
    color: #2563eb !important;
    border: 2px solid #2563eb !important;
}

.plan-action .btn-outline:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* ============================================
   PAGINATION BUTTONS
   ============================================ */

.pagination button {
    background: #ffffff !important;
    color: #2563eb !important;
    border: 2px solid #2563eb !important;
}

.pagination button:hover:not(:disabled) {
    background: #2563eb !important;
    color: #ffffff !important;
}

.pagination button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ============================================
   ICON VISIBILITY
   ============================================ */

/* Ensure icons inherit button text color */
.btn i,
button i {
    color: inherit !important;
}

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

@media (max-width: 768px) {
    .btn,
    .btn-primary,
    .btn-outline,
    .btn-light {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
    
    .btn-sm {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus states for keyboard navigation */
.btn:focus,
.btn-primary:focus,
.btn-outline:focus,
.btn-light:focus,
button:focus {
    outline: 2px solid #2563eb !important;
    outline-offset: 2px !important;
}

/* Disabled state */
.btn:disabled,
.btn-primary:disabled,
.btn-outline:disabled,
button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}