/* Column Visibility Clean CSS - Complete Solution */
/* This file provides clean CSS for the column visibility functionality */

/* Hide all default DataTables column visibility buttons to prevent duplication */
.buttons-colvis,
.buttons-collection,
.dt-button-collection,
.buttons-colvis-fixed,
.column-visibility-dropdown,
.column-visibility-dropdown-fixed,
.column-visibility-simple,
.column-visibility-final,
.column-visibility-direct {
    display: none !important;
}

/* Clean column visibility button styling */
.column-visibility-clean {
    display: inline-block !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 10 !important;
    margin-right: 5px !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    cursor: pointer !important;
    color: #333 !important;
    font-family: 'Almarai', sans-serif !important;
    text-decoration: none !important;
}

.column-visibility-clean:hover {
    background-color: #e6e6e6 !important;
    border-color: #adadad !important;
    color: #333 !important;
    text-decoration: none !important;
}

.column-visibility-clean:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0,123,255,.25) !important;
    text-decoration: none !important;
}

/* Icon styling within the button */
.column-visibility-clean i {
    margin-left: 5px !important;
    font-size: 12px !important;
    vertical-align: middle !important;
}

/* Span styling within the button */
.column-visibility-clean span {
    display: inline-block !important;
    vertical-align: middle !important;
}

.column-visibility-clean:hover {
    background-color: #e6e6e6 !important;
    border-color: #adadad !important;
    color: #333 !important;
}

.column-visibility-clean:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0,123,255,.25) !important;
}

/* Clean dropdown menu styling */
.column-visibility-clean-dropdown {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    z-index: 1000 !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 16px rgba(0,0,0,.2) !important;
    min-width: 250px !important;
    max-width: 400px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    margin-top: 5px !important;
    padding: 5px 0 !important;
    white-space: nowrap !important;
}

/* Ensure each column option is on its own line */
.column-visibility-clean-dropdown .column-option-clean {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

/* Show dropdown when active - force display */
.column-visibility-clean-dropdown[style*="display: block"],
.column-visibility-clean-dropdown:not([style*="display: none"]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Dropdown menu items styling with proper formatting */
.column-visibility-clean-dropdown .column-option-clean {
    display: block !important;
    width: 100% !important;
    padding: 10px 15px !important;
    text-decoration: none !important;
    color: #333 !important;
    border-bottom: 1px solid #eee !important;
    cursor: pointer !important;
    text-align: right !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-family: 'Almarai', sans-serif !important;
    transition: background-color 0.2s ease !important;
    min-height: 20px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    clear: both !important;
}

/* Remove border from last item */
.column-visibility-clean-dropdown .column-option-clean:last-child {
    border-bottom: none !important;
}

/* Hover effects for dropdown items */
.column-visibility-clean-dropdown .column-option-clean:hover {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    text-decoration: none !important;
}

/* Hidden column styling */
.column-visibility-clean-dropdown .column-option-clean.column-hidden {
    text-decoration: line-through !important;
    color: #999 !important;
}

.column-visibility-clean-dropdown .column-option-clean.column-hidden:hover {
    background-color: #f5f5f5 !important;
    color: #999 !important;
}

/* Button container positioning */
.dt-buttons {
    position: relative !important;
    overflow: visible !important;
    display: inline-block !important;
    margin-left: 10px !important;
}

/* RTL support */
html[dir="rtl"] .column-visibility-clean-dropdown {
    right: 0 !important;
    left: auto !important;
}

html[dir="rtl"] .column-visibility-clean-dropdown .column-option-clean {
    text-align: right !important;
}

/* RTL support for button icon */
html[dir="rtl"] .column-visibility-clean i {
    margin-left: 0 !important;
    margin-right: 5px !important;
}

/* RTL support for button span */
html[dir="rtl"] .column-visibility-clean span {
    text-align: right !important;
}

/* Ensure proper positioning for all table-related dropdowns */
.dataTables_wrapper .column-visibility-clean-dropdown {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    z-index: 1000 !important;
}

/* Global dropdown positioning fix for other elements */
.dropdown.open > .dropdown-menu,
.btn-group.open > .dropdown-menu,
.dropdown.show > .dropdown-menu {
    display: block !important;
    left: auto !important;
    right: -2px !important;
    position: absolute !important;
    top: 100% !important;
    z-index: 1000 !important;
}

/* Additional dropdown fixes for various elements */
.navbar-custom-menu .dropdown-menu,
.user-menu .dropdown-menu,
.notifications-menu .dropdown-menu,
.main-header .dropdown-menu,
.navbar .dropdown-menu,
.dropdown-menu,
.btn-group .dropdown-menu,
.dropdown .dropdown-menu {
    left: auto !important;
    right: -2px !important;
    position: absolute !important;
    top: 100% !important;
    z-index: 1000 !important;
}

/* Ensure DataTables wrapper allows overflow for dropdowns */
.dataTables_wrapper {
    overflow: visible !important;
}

/* Fix for any remaining DataTables button issues */
.dt-buttons .btn {
    position: relative !important;
    overflow: visible !important;
}

/* Additional cleanup for any conflicting styles */
[class*="column-visibility"]:not(.column-visibility-clean):not(.column-visibility-clean-dropdown) {
    display: none !important;
}

/* Prevent inline display of dropdown items */
.column-visibility-clean-dropdown * {
    display: block !important;
    float: none !important;
    clear: both !important;
}

/* Ensure proper line breaks */
.column-visibility-clean-dropdown .column-option-clean:after {
    content: "" !important;
    display: block !important;
    clear: both !important;
}

/* Ensure proper z-index stacking */
.column-visibility-clean {
    z-index: 10 !important;
}

.column-visibility-clean-dropdown {
    z-index: 1000 !important;
}

/* Force dropdown visibility when shown */
.column-visibility-clean-dropdown[style*="display: block"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    z-index: 1000 !important;
}

/* Additional debugging styles */
.column-visibility-clean-dropdown.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Improve scrollbar styling */
.column-visibility-clean-dropdown::-webkit-scrollbar {
    width: 6px !important;
}

.column-visibility-clean-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 3px !important;
}

.column-visibility-clean-dropdown::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 3px !important;
}

.column-visibility-clean-dropdown::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8 !important;
}

/* Better spacing for dropdown items */
.column-visibility-clean-dropdown .column-option-clean:first-child {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
}

.column-visibility-clean-dropdown .column-option-clean:last-child {
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}