/* NVSP Login Module - Bootstrap 5.3.5 Compatible CSS
 * Versie: samengevoegd vanuit tmpl/default.php addStyleDeclaration (v4.8.4)
 */

/* Login trigger styling - gewoon witte tekst */
.nvsp-login-trigger {
    font-weight: 500 !important;
    transition: opacity 0.2s ease !important;
}

.nvsp-login-trigger:hover {
    opacity: 0.8 !important;
}

/* Modal header gradient - blauw met witte tekst */
.nvsp-header-gradient {
    background: linear-gradient(135deg, #0000CD 0%, #4169E1 100%) !important;
    color: white !important;
}

.nvsp-header-gradient .modal-title {
    color: white !important;
}

.nvsp-header-gradient .modal-title i {
    color: white !important;
}

/* Button gradient - blauw */
.nvsp-btn-gradient {
    background: linear-gradient(135deg, #0000CD 0%, #4169E1 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    margin-bottom: 25px !important;
}

.nvsp-btn-gradient:hover {
    background: linear-gradient(135deg, #000080 0%, #1E3A8A 100%) !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 205, 0.4) !important;
    margin-bottom: 25px !important;
}

.nvsp-btn-gradient:active {
    transform: translateY(0) !important;
}

/* Tabs styling */
.nvsp-tab-leden,
.nvsp-tab-beheer {
    background-color: transparent !important;
    border: 1px solid #dee2e6 !important;
    color: #495057 !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.nvsp-tab-leden:hover,
.nvsp-tab-beheer:hover {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #495057 !important;
}

/* Actieve tab - groen */
.nvsp-tab-leden.active,
.nvsp-tab-beheer.active {
    background-color: #006400 !important;
    border-color: #006400 !important;
    color: white !important;
    border-bottom: 1px solid #006400 !important;
}

.nvsp-tab-leden.active:hover,
.nvsp-tab-beheer.active:hover {
    background-color: #004d00 !important;
    border-color: #004d00 !important;
    color: white !important;
}

/* Veiligheids melding - subtiele styling */
.nvsp-security-alert {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    color: #495057 !important;
    font-size: 0.875rem !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.375rem !important;
}

.nvsp-security-alert i {
    color: #28a745 !important;
}

/* Message alerts - subtiele styling */
.nvsp-message-alert {
    border: none !important;
    border-left: 4px solid transparent !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
}

.nvsp-message-alert.alert-success {
    background-color: #f8f9fa !important;
    color: #495057 !important;
    border-left-color: #28a745 !important;
}

.nvsp-message-alert.alert-danger {
    background-color: #f8f9fa !important;
    color: #495057 !important;
    border-left-color: #dc3545 !important;
}

/* Utility class */
.nvsp-d-none {
    display: none !important;
}

/* Fix Bootstrap tab active state override */
.nav-tabs .nav-link.active.nvsp-tab-leden,
.nav-tabs .nav-link.active.nvsp-tab-beheer {
    background-color: #006400 !important;
    border-color: #006400 #006400 #fff !important;
    color: white !important;
}

/* Responsive aanpassingen */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.5rem;
    }

    .nvsp-login-trigger {
        font-size: 0.9rem;
    }
}

/* === Modal backdrop === */
.modal-backdrop {
    backdrop-filter: blur(45px) !important;
    -webkit-backdrop-filter: blur(45px) !important;
    background-color: #fefefe !important;
    opacity: 0.95 !important;
}

/* === Button aanvullingen === */
.nvsp-btn-gradient {
    padding: .875rem 1.5rem !important;
    border-radius: .5rem !important;
    position: relative !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.nvsp-btn-gradient:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 205, .4) !important;
}

.nvsp-btn-gradient:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* === Modal sizing === */
.modal-content {
    border: 2px solid #fff !important;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

.modal-body {
    min-height: auto !important;
    max-height: 450px !important;
}

/* Dynamische modal-hoogte bij error alerts (v4.8.4) */
.modal-content:has(.nvsp-error-alert) {
    height: fit-content !important;
    max-height: 650px !important;
}

.modal-body:has(.nvsp-error-alert) {
    height: fit-content !important;
    max-height: 650px !important;
    padding-bottom: 25px !important;
}

/* Fallback voor browsers zonder :has() support */
.modal-content.nvsp-has-error {
    height: fit-content !important;
    max-height: 650px !important;
}

.modal-body.nvsp-has-error {
    height: fit-content !important;
    max-height: 650px !important;
    padding-bottom: 25px !important;
}

/* === Dropdown === */
.nvsp-dropdown {
    position: relative !important;
    display: inline-block !important;
}

.nvsp-dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    z-index: 9999 !important;
    display: none !important;
    min-width: 200px !important;
    padding: .5rem 0 !important;
    margin: .125rem 0 0 !important;
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, .175) !important;
    border-radius: .375rem !important;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15) !important;
}

.nvsp-dropdown-menu.show {
    display: block !important;
}

.nvsp-dropdown-item {
    display: block !important;
    width: 100% !important;
    padding: .75rem 1.25rem !important;
    color: #212529 !important;
    text-decoration: none !important;
    background-color: transparent !important;
    border: 0 !important;
    white-space: nowrap !important;
    transition: all .15s ease-in-out !important;
}

.nvsp-dropdown-item:hover,
.nvsp-dropdown-item:focus {
    color: #1e2125 !important;
    background-color: #f8f9fa !important;
}

.nvsp-dropdown-item.text-danger:hover {
    color: #fff !important;
    background-color: #dc3545 !important;
}

.nvsp-dropdown-item.text-danger:hover i {
    color: #fff !important;
}

.nvsp-dropdown-divider {
    height: 0 !important;
    margin: .75rem 0 !important;
    overflow: hidden !important;
    border-top: 1px solid #333 !important;
}

.nvsp-dropdown-item i {
    color: #0000CD !important;
}

.nvsp-dropdown-item.text-danger i {
    color: #dc3545 !important;
}

.nvsp-dropdown-item.text-danger:hover i {
    color: #fff !important;
}

/* === Foutmelding alert === */
.nvsp-error-alert {
    background-color: #f8d7da !important;
    border: 1px solid #f5c6cb !important;
    color: #721c24 !important;
    padding: .75rem 1rem !important;
    margin-bottom: 1rem !important;
    border-radius: .375rem !important;
}

.nvsp-error-alert i {
    color: #dc3545 !important;
    margin-right: .5rem !important;
}

.nvsp-error-alert .btn-close {
    opacity: .8 !important;
}

.nvsp-error-alert .btn-close:hover {
    opacity: 1 !important;
}

/* Voorkom browser auto-fill styling */
input[autocomplete="new-password"] {
    background-color: #fff !important;
}

/* Shake animatie bij inlogfout */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.nvsp-error-alert.shake {
    animation: shake 0.3s;
}

/* === Mobile responsive (768px) === */
@media (max-width: 768px) {
    .nvsp-btn-gradient {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .form-control {
        font-size: 16px !important;
    }

    .modal-dialog {
        margin: 10vh auto 1rem auto !important;
        width: calc(100% - 1rem) !important;
        max-width: none !important;
    }

    .modal-content {
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    .modal-body {
        padding: 0.75rem !important;
    }

    .modal-content:has(.nvsp-error-alert) {
        max-height: 85vh !important;
    }

    .modal-content.nvsp-has-error {
        max-height: 85vh !important;
    }
}

/* === Edge scrollbar fix === */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .modal-content {
        -ms-overflow-style: none !important;
    }
}