/*
 * SPVnet 2.0 - VD2025 Custom Dropdown
 * Consolidated styles for all VD2025 dropdowns
 * Extracted from: _DadosAtividadeVD2025.cshtml + _VD2025Dropdown.cshtml
 * Date: 2025-01-07
 *
 * NOTE: Using !important to override legacy Bootstrap/Kendo styles
 */

/* ============================================
   DROPDOWN WRAPPER & BASE SELECT
   ============================================ */
body.vd2025-active .vd2025-dropdown-wrapper {
    position: relative !important;
    width: 100% !important;
}

body.vd2025-active .vd2025-dropdown {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 40px 12px 14px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #2d3748 !important;
    background: #ffffff !important;
    border: 2px solid #cbd5e0 !important;
    border-radius: 8px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

body.vd2025-active .vd2025-dropdown:hover {
    border-color: #35aa47 !important;
    box-shadow: 0 4px 12px rgba(53, 170, 71, 0.2) !important;
}

body.vd2025-active .vd2025-dropdown:focus {
    outline: none !important;
    border-color: #35aa47 !important;
    box-shadow: 0 0 0 4px rgba(53, 170, 71, 0.15), 0 4px 16px rgba(53, 170, 71, 0.25) !important;
}

body.vd2025-active .vd2025-dropdown:disabled,
body.vd2025-active .vd2025-dropdown[disabled] {
    background: #f7fafc !important;
    border-color: #e9ecef !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

body.vd2025-active .vd2025-dropdown:disabled + .vd2025-dropdown-arrow,
body.vd2025-active .vd2025-dropdown[disabled] + .vd2025-dropdown-arrow {
    opacity: 0.4 !important;
}

body.vd2025-active .vd2025-dropdown-wrapper:has(.vd2025-dropdown:disabled) .vd2025-dropdown-clickable,
body.vd2025-active .vd2025-dropdown-wrapper:has(.vd2025-dropdown[disabled]) .vd2025-dropdown-clickable {
    cursor: not-allowed !important;
}

/* Native select scrollbar (fallback if JS disabled) */
body.vd2025-active .vd2025-dropdown::-webkit-scrollbar {
    width: 8px !important;
}

body.vd2025-active .vd2025-dropdown::-webkit-scrollbar-track {
    background: #f7fafc !important;
    border-radius: 4px !important;
}

body.vd2025-active .vd2025-dropdown::-webkit-scrollbar-thumb {
    background: #35aa47 !important;
    border-radius: 4px !important;
    transition: background 0.2s ease !important;
}

body.vd2025-active .vd2025-dropdown::-webkit-scrollbar-thumb:hover {
    background: #2d8b3a !important;
}

/* ============================================
   NATIVE SELECT OPTIONS (Fallback)
   ============================================ */
body.vd2025-active .vd2025-dropdown option {
    padding: 12px 14px !important;
    background: #ffffff !important;
    color: #2d3748 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    border-bottom: 1px solid #f7fafc !important;
    transition: all 0.15s ease !important;
}

body.vd2025-active .vd2025-dropdown option:first-of-type {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
    color: #a0aec0 !important;
    font-style: italic !important;
}

body.vd2025-active .vd2025-dropdown option:last-of-type {
    border-bottom: none !important;
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

body.vd2025-active .vd2025-dropdown option:hover,
body.vd2025-active .vd2025-dropdown option:focus,
body.vd2025-active .vd2025-dropdown option:active,
body.vd2025-active .vd2025-dropdown option:checked {
    background: linear-gradient(135deg, rgba(53, 170, 71, 0.12) 0%, rgba(53, 170, 71, 0.08) 100%) !important;
    color: #2d8b3a !important;
    font-weight: 500 !important;
}

body.vd2025-active .vd2025-dropdown option:disabled {
    color: #cbd5e0 !important;
    cursor: not-allowed !important;
    background: #f7fafc !important;
}

/* ============================================
   CLICKABLE OVERLAY (Captures clicks when native select disabled)
   ============================================ */
body.vd2025-active .vd2025-dropdown-clickable {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    cursor: pointer !important;
    z-index: 10 !important; /* Higher than arrow (which is 3) */
}

/* ============================================
   DROPDOWN ARROW ICON
   ============================================ */
body.vd2025-active .vd2025-dropdown-arrow {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease !important;
    z-index: 3 !important; /* Lower than clickable (10) so clicks pass through */
}

body.vd2025-active .vd2025-dropdown:focus + .vd2025-dropdown-arrow {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* ============================================
   CUSTOM POPUP (JavaScript-generated)
   ============================================ */
body.vd2025-active .vd2025-dropdown-popup {
    position: fixed !important;
    background: #ffffff !important;
    border: 2px solid #35aa47 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(53, 170, 71, 0.25), 0 4px 8px rgba(0, 0, 0, 0.08) !important;
    max-height: 300px !important;
    overflow: hidden !important;
    z-index: 99999 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: none !important;
    animation: vd2025-dropdown-fade-in 0.2s ease !important;
    box-sizing: border-box !important;
}

body.vd2025-active .vd2025-dropdown-popup.show {
    display: block !important;
}

@keyframes vd2025-dropdown-fade-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   POPUP INNER CONTAINER (Scrollable)
   ============================================ */
body.vd2025-active .vd2025-dropdown-popup-inner {
    max-height: 300px !important;
    overflow-y: auto !important;
    padding: 4px 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: #35aa47 #f7fafc !important;
}

body.vd2025-active .vd2025-dropdown-popup-inner::-webkit-scrollbar {
    width: 8px !important;
}

body.vd2025-active .vd2025-dropdown-popup-inner::-webkit-scrollbar-track {
    background: #f7fafc !important;
    border-radius: 0 !important;
}

body.vd2025-active .vd2025-dropdown-popup-inner::-webkit-scrollbar-thumb {
    background: #35aa47 !important;
    border-radius: 4px !important;
    transition: background 0.2s ease !important;
}

body.vd2025-active .vd2025-dropdown-popup-inner::-webkit-scrollbar-thumb:hover {
    background: #2d8b3a !important;
}

/* ============================================
   POPUP OPTIONS (Custom rendered options)
   ============================================ */
body.vd2025-active .vd2025-dropdown-option {
    padding: 12px 14px !important;
    color: #2d3748 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    border-bottom: 1px solid #f7fafc !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

body.vd2025-active .vd2025-dropdown-option:last-child {
    border-bottom: none !important;
}

body.vd2025-active .vd2025-dropdown-option.placeholder {
    color: #a0aec0 !important;
    font-style: italic !important;
}

body.vd2025-active .vd2025-dropdown-option:hover {
    background: linear-gradient(135deg, rgba(53, 170, 71, 0.12) 0%, rgba(53, 170, 71, 0.08) 100%) !important;
    color: #2d8b3a !important;
}

body.vd2025-active .vd2025-dropdown-option.selected {
    background: linear-gradient(135deg, rgba(53, 170, 71, 0.15) 0%, rgba(53, 170, 71, 0.1) 100%) !important;
    color: #2d8b3a !important;
    font-weight: 600 !important;
    position: relative !important;
    padding-right: 40px !important; /* Space for checkmark */
}

/* Checkmark for selected option (except placeholder) */
body.vd2025-active .vd2025-dropdown-option.selected:not(.placeholder)::after {
    content: '\2713' !important; /* Unicode checkmark */
    position: absolute !important;
    right: 14px !important;
    color: #35aa47 !important;
    font-weight: bold !important;
    font-size: 18px !important;
    font-family: Arial, sans-serif !important;
}

body.vd2025-active .vd2025-dropdown-option.disabled {
    color: #cbd5e0 !important;
    cursor: not-allowed !important;
    background: #f7fafc !important;
    pointer-events: none !important;
}