/* 
 * RISE CRM - MODERN PREMIUM ICONS (3D-ISH STYLE)
 * Enhances standard Feather icons with depth, shadows, and subtle glow.
 */

/* Target icons in the navbar specifically */
.navbar i, 
.navbar [data-feather],
.navbar-custom i,
.navbar-custom [data-feather] {
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15)) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    stroke-width: 2.2 !important; /* Slightly bolder for "premium" feel */
    color: #4b5563 !important; /* Base color: Modern Slate */
}

/* Add a floating "bubble" background to navbar icons */
.navbar i, 
.navbar [data-feather] {
    padding: 8px !important;
    background: rgba(0, 0, 0, 0.03) !important;
    border-radius: 12px !important;
    margin: 0 4px !important;
}

/* HOVER EFFECT - 3D POP */
.navbar a:hover i, 
.navbar a:hover [data-feather],
.navbar-item:hover i {
    transform: translateY(-4px) scale(1.1) !important;
    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.12)) !important;
    color: #6366F1 !important; /* Vibrant Indigo On Hover */
    background: rgba(99, 102, 241, 0.1) !important;
}

/* Specific 3d colors for icons (Subtle) */
.navbar i[data-feather="bell"]:hover { color: #f59e0b !important; background: rgba(245, 158, 11, 0.1) !important; }
.navbar i[data-feather="mail"]:hover { color: #3b82f6 !important; background: rgba(59, 130, 246, 0.1) !important; }
.navbar i[data-feather="clock"]:hover { color: #10b981 !important; background: rgba(16, 185, 129, 0.1) !important; }
.navbar i[data-feather="plus-circle"]:hover { color: #6366F1 !important; }

/* Dashboard banner Welcome Text visibility (Preserve last fix) */
.dashboard-banner h2, 
.dashboard-banner p, 
.welcome-text {
    color: #111111 !important;
}

/* Fix overlapping of intl-tel-input when initialized inside hidden modal */
.iti { width: 100%; display: block; }
.iti__tel-input, .iti input[type=text], .iti input[type=tel] {
    padding-left: 85px !important;
}

/* ============================================================
 * LIQUID GLASS DROPDOWN SYSTEM (iOS 26 CONCEPT)
 * Targets all Select2 components in the system
 * ============================================================ */

/* Main Selection Box */
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(12px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.8) !important;
    border: 4px solid #FFFFFF !important;
    border-radius: 20px !important;
    height: 42px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Dropdown Menu Container */
body .select2-dropdown {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(20px) saturate(2) !important;
    -webkit-backdrop-filter: blur(20px) saturate(2) !important;
    border: 4px solid #FFFFFF !important;
    border-radius: 25px !important;
    margin-top: 10px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
    padding: 8px !important;
    z-index: 9999 !important;
}

/* Search Box inside Dropdown */
body .select2-container--default .select2-search--dropdown .select2-search__field {
    background: rgba(255, 255, 255, 0.4) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 15px !important;
    padding: 8px 12px !important;
    margin-bottom: 10px !important;
}

/* Options/Results */
body .select2-results__option {
    background: transparent !important;
    color: #1a1a1a !important;
    padding: 10px 20px !important;
    border-radius: 15px !important;
    margin: 3px 5px !important;
    transition: all 0.2s !important;
}

/* Hover/Highlighted State (The Liquid Glow) */
body .select2-results__option--highlighted[aria-selected] {
    background: rgba(255, 255, 255, 0.6) !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.02);
}

/* Vertical Center for Text */
body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
    padding-left: 15px !important;
    font-weight: 600 !important;
}

body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
    right: 12px !important;
}

/* ============================================================
 * MODERN SIDEBAR ENHANCEMENTS
 * ============================================================ */

/* ============================================================
 * PREMIUM LIQUID SIDEBAR (Apple-Ish Style)
 * ============================================================ */

/* Center and "Bubble" effect for all sidebar items */
@media (min-width: 992px) {
    .sidebar-toggled .sidebar-menu li a {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        width: 44px !important;
        height: 44px !important;
        margin: 8px auto !important;
        border-radius: 14px !important;
        background: rgba(99, 102, 241, 0.05) !important; /* Very subtle indigo tint */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border: 1px solid rgba(0, 0, 0, 0.02) !important;
    }

    .sidebar-toggled .sidebar-menu li.active > a {
        width: 44px !important;
        height: 44px !important;
        margin: 8px auto !important;
    }

    /* Hover State - Glow and Color Shift */
    .sidebar-menu li:not(.active) > a:hover {
        background: rgba(99, 102, 241, 0.12) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    }

    .sidebar-menu li:not(.active) > a:hover i,
    .sidebar-menu li:not(.active) > a:hover svg,
    .sidebar-menu li:not(.active) > a:hover span {
        color: #6366F1 !important;
        stroke: #6366F1 !important;
    }
}

/* Active Item - Vibrant Liquid State (For both Mini and Normal) */
.sidebar-menu li.active > a {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) !important;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25) !important;
    border: none !important;
    color: #ffffff !important;
}

/* Icon Sizing and Colors */
.sidebar-menu li a i, 
.sidebar-menu li a [data-feather],
.sidebar-menu li a svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    stroke-width: 2.2 !important;
    color: #4b5563 !important; /* Dark Slate for contrast */
    stroke: #4b5563 !important;
    transition: all 0.3s ease !important;
}

/* Active Icon Color */
.sidebar-menu li.active > a i, 
.sidebar-menu li.active > a [data-feather],
.sidebar-menu li.active > a svg,
.sidebar-menu li.active > a span {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Fix for standard expanded menu alignment as well */
.sidebar-menu li a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
    margin: 4px 12px !important;
    border-radius: 12px !important;
}

.sidebar-menu li a span {
    margin-left: 12px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

/* ============================================================
 * MOBILE RESPONSIVE PREMIUM MENU (SLEEK SIDEBAR STYLE)
 * ============================================================ */
@media (max-width: 991px) {
    /* Mobile Sidebar Container */
    #sidebar {
        background: rgba(255, 255, 255, 0.8) !important;
        backdrop-filter: blur(25px) saturate(1.5) !important;
        -webkit-backdrop-filter: blur(25px) saturate(1.5) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
    }

    .sidebar-menu {
        padding: 10px 0 !important;
    }

    /* Mobile Menu Items - Sleek & Integrated */
    .sidebar-menu li a {
        justify-content: flex-start !important;
        width: 92% !important; /* Slightly narrower than full to breathe */
        margin: 4px auto !important;
        padding: 12px 18px !important;
        border-radius: 14px !important;
        background: transparent !important; /* Remove the card background */
        border: 1px solid transparent !important;
        box-shadow: none !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Hover effect on mobile */
    .sidebar-menu li a:active,
    .sidebar-menu li a:hover {
        background: rgba(0, 0, 0, 0.03) !important;
    }

    /* Active Item on Mobile - High Contrast Glow */
    .sidebar-menu li.active > a {
        background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) !important;
        box-shadow: 0 10px 20px rgba(99, 102, 241, 0.25) !important;
        border: none !important;
    }

    .sidebar-menu li.active > a i,
    .sidebar-menu li.active > a svg,
    .sidebar-menu li.active > a span {
        color: #ffffff !important;
        stroke: #ffffff !important;
    }

    /* Icon Sizing */
    .sidebar-menu li a i, 
    .sidebar-menu li a [data-feather],
    .sidebar-menu li a svg {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        stroke-width: 2 !important;
    }

    /* Text Sizing */
    .sidebar-menu li a span {
        font-size: 15px !important;
        font-weight: 600 !important;
        margin-left: 14px !important;
        color: #374151 !important;
    }
}

/* ============================================================
 * RESPONSIVE LOGO FIX
 * ============================================================ */
.dashboard-image {
    max-width: 100% !important;
    height: auto !important;
    max-height: 40px !important;
    object-fit: contain !important;
}

/* ============================================================
 * DARK THEME (1E202D) CORRECTIONS
 * ============================================================ */

/* Make logo white in dark mode */
body.color-1E202D .dashboard-image {
    filter: brightness(0) invert(1) !important;
}

/* Ensure navbar turns dark in dark mode */
body.color-1E202D .navbar-custom,
body.color-1E202D .sidebar .sidebar-brand {
    background-color: #252932 !important;
    border-color: #2f3541 !important;
}

/* Adjust navbar icons for dark mode */
body.color-1E202D .navbar-custom i, 
body.color-1E202D .navbar-custom [data-feather] {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

body.color-1E202D .navbar-custom a:hover i, 
body.color-1E202D .navbar-custom a:hover [data-feather] {
    color: #6366F1 !important;
    background: rgba(99, 102, 241, 0.2) !important;
}

/* ============================================================
 * MOBILE RESPONSIVE MODAL & FORM SCROLLING FIX
 * Ensures that form action buttons (Guardar, Cerrar, etc.) are always
 * accessible, scrollable, and never cut off on mobile devices/iPhones.
 * ============================================================ */
@media (max-width: 768px) {
    /* Override any overflow: hidden on the modal container to allow scrolling */
    body .modal, 
    body #ajaxModal,
    .modal-open .modal {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth elastic scroll on iOS */
    }

    /* Ensure the modal dialog is positioned normally and can expand dynamically */
    body .modal-dialog,
    body #ajaxModal .modal-dialog {
        margin: 12px auto !important;
        max-width: calc(100% - 24px) !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
    }

    /* Ensure modal-content contains its children correctly without clipping */
    body .modal-content,
    body #ajaxModal .modal-content {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 16px !important; /* Premium rounded look matching premium theme */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    }

    /* modal-body should scroll naturally if needed, but not clip modal-footer */
    body .modal-body,
    body #ajaxModalContent .modal-body {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        padding: 20px 16px !important;
    }

    /* Modal Footer buttons layout: space out nicely, prevent overlap, ensure visible */
    body .modal-footer,
    body #ajaxModal .modal-footer {
        display: flex !important;
        flex-direction: column !important; /* Stack vertically for native/premium mobile feel and fit long texts */
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 20px 16px !important;
        background: #ffffff !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-bottom-left-radius: 16px !important;
        border-bottom-right-radius: 16px !important;
        position: relative !important; /* Flow naturally at the bottom of the form */
        bottom: auto !important;
        z-index: 10 !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important; /* Native iOS notch safe area padding */
    }

    /* Handle checkbox section within footer on mobile */
    body .modal-footer .me-auto,
    body #ajaxModal .modal-footer .me-auto {
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 8px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
    }

    body .modal-footer .form-check-input,
    body #ajaxModal .modal-footer .form-check-input {
        margin-top: 0 !important;
        margin-right: 8px !important;
    }

    /* Buttons inside modal-footer should stack and look amazing */
    body .modal-footer .btn,
    body #ajaxModal .modal-footer .btn {
        margin: 0 !important; /* Use vertical gap spacing */
        width: 100% !important; /* Take full width on mobile for ease of touch */
        min-height: 48px !important; /* Apple recommended minimum tap target size */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        font-weight: 600 !important;
        font-size: 15px !important;
    }
}