/* =================================================================
   GLOBAL BUTTON SYSTEM - UNIFIED STYLING
   ================================================================= */

/* Reset all existing button styles */
.btn, button, input[type="button"], input[type="submit"], .button, 
.nav-btn, .action-btn, .cta-btn, .primary-btn, .secondary-btn {
    /* Remove all existing styles */
    background: none !important;
    border: none !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    outline: none !important;
}

/* =================================================================
   PRIMARY BUTTON STYLE - BLUE WITH WHITE BORDER AND WHITE TEXT
   ================================================================= */

.btn, button, input[type="button"], input[type="submit"], .button,
.nav-btn, .action-btn, .cta-btn, .primary-btn,
a.btn, a.button, a.nav-btn, a.action-btn, a.cta-btn, a.primary-btn {
    /* Core styling */
    background: #1488CC !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    
    /* Typography */
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    
    /* Layout */
    padding: 0.75rem 1.25rem !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    
    /* Interactions */
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-height: 44px !important;
    white-space: nowrap !important;
}

/* Hover state for primary buttons */
.btn:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover, 
.button:hover, .nav-btn:hover, .action-btn:hover, .cta-btn:hover, .primary-btn:hover,
a.btn:hover, a.button:hover, a.nav-btn:hover, a.action-btn:hover, a.cta-btn:hover, a.primary-btn:hover {
    background: #0f6fa8 !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(20, 136, 204, 0.3) !important;
}

/* Active/Focus state for primary buttons */
.btn:active, .btn:focus, button:active, button:focus, 
input[type="button"]:active, input[type="button"]:focus,
input[type="submit"]:active, input[type="submit"]:focus,
.button:active, .button:focus, .nav-btn:active, .nav-btn:focus,
.action-btn:active, .action-btn:focus, .cta-btn:active, .cta-btn:focus,
.primary-btn:active, .primary-btn:focus,
a.btn:active, a.btn:focus, a.button:active, a.button:focus,
a.nav-btn:active, a.nav-btn:focus, a.action-btn:active, a.action-btn:focus,
a.cta-btn:active, a.cta-btn:focus, a.primary-btn:active, a.primary-btn:focus {
    background: #0a5a8a !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(20, 136, 204, 0.4) !important;
    outline: none !important;
}

/* =================================================================
   INACTIVE/DISABLED BUTTON STYLE - DARK GREY WITH BLACK TEXT
   ================================================================= */

.btn:disabled, button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled,
.button:disabled, .nav-btn:disabled, .action-btn:disabled, .cta-btn:disabled, .primary-btn:disabled,
.btn.disabled, .button.disabled, .nav-btn.disabled, .action-btn.disabled, .cta-btn.disabled, .primary-btn.disabled,
.btn.inactive, .button.inactive, .nav-btn.inactive, .action-btn.inactive, .cta-btn.inactive, .primary-btn.inactive,
a.btn.disabled, a.button.disabled, a.nav-btn.disabled, a.action-btn.disabled, a.cta-btn.disabled, a.primary-btn.disabled {
    background: #6c757d !important;
    border: 2px solid #6c757d !important;
    color: #212529 !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn:disabled:hover, button:disabled:hover, input[type="button"]:disabled:hover, input[type="submit"]:disabled:hover,
.button:disabled:hover, .nav-btn:disabled:hover, .action-btn:disabled:hover, .cta-btn:disabled:hover, .primary-btn:disabled:hover,
.btn.disabled:hover, .button.disabled:hover, .nav-btn.disabled:hover, .action-btn.disabled:hover, .cta-btn.disabled:hover, .primary-btn.disabled:hover,
.btn.inactive:hover, .button.inactive:hover, .nav-btn.inactive:hover, .action-btn.inactive:hover, .cta-btn.inactive:hover, .primary-btn.inactive:hover {
    background: #6c757d !important;
    border-color: #6c757d !important;
    color: #212529 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* =================================================================
   NAVIGATION SPECIFIC STYLING
   ================================================================= */

/* Navigation buttons on blue background need transparent background */
.navbar .nav-btn, .navbar .btn, .navbar button,
.navbar-nav .nav-btn, .navbar-nav .btn, .navbar-nav button,
.horizontal-nav-container .nav-btn, .horizontal-nav-container .btn, .horizontal-nav-container button {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    padding: 0.6rem 1rem !important;
}

.navbar .nav-btn:hover, .navbar .btn:hover, .navbar button:hover,
.navbar-nav .nav-btn:hover, .navbar-nav .btn:hover, .navbar-nav button:hover,
.horizontal-nav-container .nav-btn:hover, .horizontal-nav-container .btn:hover, .horizontal-nav-container button:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* =================================================================
   SECONDARY BUTTON VARIATIONS
   ================================================================= */

/* Outline buttons - blue border, transparent background, blue text */
.btn-outline, .btn-secondary, .secondary-btn,
a.btn-outline, a.btn-secondary, a.secondary-btn {
    background: transparent !important;
    border: 2px solid #1488CC !important;
    color: #1488CC !important;
}

.btn-outline:hover, .btn-secondary:hover, .secondary-btn:hover,
a.btn-outline:hover, a.btn-secondary:hover, a.secondary-btn:hover {
    background: #1488CC !important;
    border-color: #1488CC !important;
    color: #ffffff !important;
}

/* Danger/warning buttons */
.btn-danger, .btn-warning, .danger-btn, .warning-btn,
a.btn-danger, a.btn-warning, a.danger-btn, a.warning-btn {
    background: #dc3545 !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
}

.btn-danger:hover, .btn-warning:hover, .danger-btn:hover, .warning-btn:hover,
a.btn-danger:hover, a.btn-warning:hover, a.danger-btn:hover, a.warning-btn:hover {
    background: #c82333 !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* Success buttons */
.btn-success, .success-btn,
a.btn-success, a.success-btn {
    background: #28a745 !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
}

.btn-success:hover, .success-btn:hover,
a.btn-success:hover, a.success-btn:hover {
    background: #218838 !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* =================================================================
   BUTTON SIZES
   ================================================================= */

/* Small buttons */
.btn-sm, .btn-small, .small-btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem !important;
    min-height: 36px !important;
}

/* Large buttons */
.btn-lg, .btn-large, .large-btn {
    padding: 1rem 1.5rem !important;
    font-size: 1.1rem !important;
    min-height: 52px !important;
}

/* =================================================================
   SPECIAL CASES & OVERRIDES
   ================================================================= */

/* Dropdown buttons should maintain their toggle functionality */
.dropdown-toggle::after {
    border-top-color: currentColor !important;
    margin-left: 0.5rem !important;
}

/* Button groups */
.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;
}

/* Icon alignment in buttons */
.btn i, .button i, .nav-btn i, .action-btn i, .cta-btn i, .primary-btn i,
button i, input[type="button"] i, input[type="submit"] i {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2.5 !important;
    color: currentColor !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .btn, .button, .nav-btn, .action-btn, .cta-btn, .primary-btn,
    button, input[type="button"], input[type="submit"] {
        padding: 0.6rem 1rem !important;
        font-size: 0.85rem !important;
        min-height: 40px !important;
    }
    
    .btn-lg, .btn-large, .large-btn {
        padding: 0.8rem 1.2rem !important;
        font-size: 1rem !important;
        min-height: 48px !important;
    }
}