/* =====================================================================
   Custom Multi-select & Global Filter Inputs
   ===================================================================== */

.ms-wrapper { 
    position: relative; 
    width: 100%; 
    z-index: 10; 
}

.ms-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}
.ms-header:hover { border-color: #94a3b8; } 

.ms-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 9999 !important;
    background: white;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    margin-top: 0.25rem;
    overflow: hidden;
}

.ms-dropdown.show { 
    display: block; 
    animation: msFadeIn 0.2s ease-out forwards;
}

.ms-search-container {
    padding: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}

.ms-options {
    max-height: 220px;
    overflow-y: auto;
}

/* Scrollbar Customization */
.ms-options::-webkit-scrollbar { width: 5px; }
.ms-options::-webkit-scrollbar-track { background: #f1f5f9; }
.ms-options::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.ms-options::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.ms-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    cursor: pointer;
    transition: background 0.1s;
    margin: 0 !important;
}
.ms-label:hover { background: #f1f5f9; }

/* Global standardized height for filter inputs */
.filter-input {
    height: 34px !important;
    background-color: #f8fafc !important; 
    border-color: #e2e8f0 !important; 
    font-size: 11px !important; 
    transition: all 0.2s !important;
}

.filter-input:focus {
    border-color: #10b981 !important; 
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1) !important;
    background-color: white !important;
}

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