/*
 * Dropdown Menu Fixes - Root Solution
 * Clean approach that works with Bootstrap's dropdown system
 */

/* Allow vertical overflow for dropdowns while maintaining horizontal scroll */
.table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* DataTables wrapper should not clip dropdowns */
.dataTables_wrapper {
    overflow: visible !important;
}

/* Tables themselves need visible overflow for dropdowns */
.table-bordered,
.table {
    overflow: visible !important;
}

/* Table body and cells must allow overflow */
tbody,
tbody tr,
tbody td {
    overflow: visible !important;
}

/* Force btn-group in tables to display as block so dropdown expands the row */
.table .btn-group,
.dataTables_wrapper .btn-group,
tbody .btn-group {
    display: block !important;
}

/* Bootstrap dropdown menu styling with system colors */
/* Inline dropdown that expands the row instead of overlaying */
.table .dropdown-menu,
.dataTables_wrapper .dropdown-menu,
tbody .dropdown-menu {
    position: static !important;
    display: none !important;
    float: none !important;
    width: 100% !important;
    max-width: 400px !important;
    background: linear-gradient(135deg, #ffffff 0%, #f5fffe 100%) !important;
    border: 2px solid rgba(128, 203, 196, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(128, 203, 196, 0.2) !important;
    padding: 8px 4px !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    animation: dropdownSlideIn 0.2s ease-out !important;
}

/* Show dropdown when open */
.table .dropdown.open .dropdown-menu,
.table .btn-group.open .dropdown-menu,
.dataTables_wrapper .dropdown.open .dropdown-menu,
.dataTables_wrapper .btn-group.open .dropdown-menu,
tbody .dropdown.open .dropdown-menu,
tbody .btn-group.open .dropdown-menu {
    display: block !important;
}

/* Other dropdowns (not in tables) keep absolute positioning */
.dropdown-menu {
    background: linear-gradient(135deg, #ffffff 0%, #f5fffe 100%) !important;
    border: 2px solid rgba(128, 203, 196, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(128, 203, 196, 0.2) !important;
    padding: 8px 4px !important;
    min-width: 200px !important;
    z-index: 1050 !important;
    margin-top: 8px !important;
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown menu items */
.dropdown-menu > li {
    list-style: none !important;
    margin: 2px 0 !important;
}

.dropdown-menu > li > a {
    display: block !important;
    padding: 10px 16px !important;
    color: #2c3e50 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.dropdown-menu > li > a i {
    margin-right: 10px !important;
    color: #80cbc4 !important;
    font-size: 14px !important;
    width: 18px !important;
    display: inline-block !important;
    text-align: center !important;
}

/* RTL support */
[dir="rtl"] .dropdown-menu > li > a i {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: linear-gradient(135deg, rgba(128, 203, 196, 0.15) 0%, rgba(128, 203, 196, 0.1) 100%) !important;
    color: #66b8ae !important;
    text-decoration: none !important;
}

.dropdown-menu > li > a:hover i,
.dropdown-menu > li > a:focus i {
    color: #66b8ae !important;
    transform: scale(1.1) !important;
}

/* Divider styling */
.dropdown-menu .divider {
    height: 1px !important;
    margin: 8px 0 !important;
    overflow: hidden !important;
    background: linear-gradient(90deg, transparent, rgba(128, 203, 196, 0.3), transparent) !important;
    border: none !important;
}

/* Dropdown toggle button in tables */
.dropdown-toggle {
    background: linear-gradient(135deg, #80cbc4 0%, #66b8ae 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    color: white !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1050 !important;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
    background: linear-gradient(135deg, #66b8ae 0%, #80cbc4 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(128, 203, 196, 0.3) !important;
    color: white !important;
    z-index: 1051 !important;
}

/* Action button specific styling */
.action-btn,
.btn-info.dropdown-toggle {
    z-index: 1050 !important;
}

.action-btn:hover,
.action-btn:focus,
.action-btn[aria-expanded="true"] {
    z-index: 1051 !important;
}

/* Caret icon styling */
.dropdown-toggle .caret {
    margin-left: 8px !important;
    border-top-color: white !important;
    transition: transform 0.3s ease !important;
}

/* RTL support for caret */
[dir="rtl"] .dropdown-toggle .caret {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

/* Rotate caret when dropdown is open */
.dropdown-toggle[aria-expanded="true"] .caret,
.dropdown.open .dropdown-toggle .caret {
    transform: rotate(180deg) !important;
}

/* Ensure button stays visible */
.btn-xs.dropdown-toggle {
    font-size: 13px !important;
    padding: 4px 10px !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
}

/* Dropdown containers need relative positioning for absolute children */
.dropdown,
.dropup,
.btn-group {
    position: relative !important;
}

/* Ensure proper alignment */
.dropdown-menu.dropdown-menu-left {
    left: 0 !important;
    right: auto !important;
}

.dropdown-menu.dropdown-menu-right {
    right: 0 !important;
    left: auto !important;
}

/* RTL adjustments */
[dir="rtl"] .dropdown-menu.dropdown-menu-left {
    left: auto !important;
    right: 0 !important;
}

[dir="rtl"] .dropdown-menu.dropdown-menu-right {
    right: auto !important;
    left: 0 !important;
}

/* For inline dropdowns in tables, no need for dropup */
/* The row will expand to accommodate the menu */

/* Table cells with dropdowns need to accommodate expanded content */
td.dropdown,
th.dropdown,
td:has(.dropdown),
th:has(.dropdown) {
    overflow: visible !important;
    vertical-align: top !important;
}

/* Dropdown container in tables uses inline-block layout */
.table .dropdown,
.dataTables_wrapper .dropdown,
tbody .dropdown {
    display: inline-block !important;
    vertical-align: top !important;
}

/* When dropdown is open, the cell expands naturally */
td:has(.dropdown.open),
th:has(.dropdown.open) {
    vertical-align: top !important;
}

/* Actions column should allow overflow */
.actions-column,
td.actions,
th.actions {
    overflow: visible !important;
}

/* Long dropdown menus get scrollbar */
.dropdown-menu {
    max-height: 400px !important;
    overflow-y: auto !important;
}

/* Custom scrollbar with system colors */
.dropdown-menu::-webkit-scrollbar {
    width: 8px !important;
}

.dropdown-menu::-webkit-scrollbar-track {
    background: rgba(128, 203, 196, 0.05) !important;
    border-radius: 10px !important;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(128, 203, 196, 0.3) !important;
    border-radius: 10px !important;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 203, 196, 0.5) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dropdown-menu {
        min-width: 180px !important;
        max-width: 280px !important;
    }

    .dropdown-menu > li > a {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
}