﻿/* =========================================================
   GLOBAL RADZEN DROPDOWN / MULTISELECT / DATAGRID STYLING
   Applies ONLY to panels using theme-variant: light-minimal
========================================================= */

/* Global Cursor Override for all Radzen Dropdowns */
.rz-dropdown,
.rz-dropdown .rz-dropdown-label,
.rz-dropdown .rz-dropdown-trigger {
    cursor: pointer !important;
}

/* Disable fade-in animation on dropdown popups for instant open */
.rz-popup.rz-open,
.rz-multiselect-panel.rz-open,
.rz-dropdown-panel.rz-open {
    animation: none !important;
}

/*PANEL CONTAINER (ALL DROPDOWNS / MULTISELECT / DATAGRID)
- White background
- Rounded corners
- Shadow*/
.rz-popup[style*="--theme-variant: light-minimal"],
.rz-multiselect-panel[style*="--theme-variant: light-minimal"],
.rz-dropdown-panel[style*="--theme-variant: light-minimal"] {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    padding: 0px !important;
    z-index: 99999 !important;
    margin-top: 4px !important;
}

/*  HEADER AREA (MULTISELECT + DATAGRID)
    - Ensures header visibility
    - Stabilizes Select-All checkbox*/

.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table thead,
.rz-dropdown-panel[style*="--theme-variant: light-minimal"] .rz-header {
    display: block !important;
    background-color: transparent !important;
    border-bottom: none !important;
}

/*DATAGRID HEADER CELLS (COLUMN TITLES)*/
/* Header Cells - Clean White */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table thead th {
    background-color: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
}

/* Column title text (e.g., "Market") */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table thead th .rz-column-title {
    display: inline-block !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* Sort icon: hidden by default, visible on hover for a cleaner header */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table thead th .rz-sortable-column-icon,
.rz-popup[style*="--theme-variant: light-minimal"] .rz-grid-table thead th .rz-sortable-column-icon {
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table thead th:hover .rz-sortable-column-icon,
.rz-popup[style*="--theme-variant: light-minimal"] .rz-grid-table thead th:hover .rz-sortable-column-icon {
    opacity: 0.5 !important;
}

/* Header checkbox alignment */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table thead th .rz-chkbox {
    margin-left: 0px !important;
    vertical-align: middle !important;
}

/*CONTENT AREA (ROWS / LIST ITEMS)
    - Applies to Multiselect list + Dropdown list + DataGrid*/

.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table,
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table tr,
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table td,
.rz-dropdown-panel[style*="--theme-variant: light-minimal"] .rz-multiselect-items,
.rz-dropdown-panel[style*="--theme-variant: light-minimal"] .rz-multiselect-items li {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    font-family: inherit !important;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease !important;
}

/* TEXT STYLING (ITEM LABELS)*/

.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-cell-data,
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] span,
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] label,
.rz-dropdown-panel[style*="--theme-variant: light-minimal"] .rz-multiselect-items li span {
    background-color: transparent !important;
    color: #1f2937 !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
}

/*     ROW HOVER (ALL DROPDOWNS & DATAGRID)*/

.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-data-row:hover td,
.rz-dropdown-panel[style*="--theme-variant: light-minimal"] .rz-multiselect-items li:hover {
    background-color: #f3f4f6 !important;
    transition: background-color 0.15s ease !important;
}

/* CHECKBOX BASE STYLE (ALL ROW CHECKBOXES)*/

.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-chkbox-box,
.rz-dropdown-panel[style*="--theme-variant: light-minimal"] .rz-chkbox-box {
    background-color: rgba(40, 44, 80, 0.8) !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    /* same as rounded-md */
    width: 1.75rem !important;
    min-width: 1.75rem !important;
    height: 1.75rem !important;
}

/* Checked state (pink) */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-chkbox-box.rz-state-active,
.rz-dropdown-panel[style*="--theme-variant: light-minimal"] .rz-chkbox-box.rz-state-active {
    background-color: #ec4899 !important;
    border-color: #ec4899 !important;
}

/* White checkmark */

.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-chkbox-icon,
.rz-dropdown-panel[style*="--theme-variant: light-minimal"] .rz-chkbox-icon {
    color: #ffffff !important;
    font-size: 1rem !important;
}

/* Pagination - Minimalist Gray-50 */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-pager {
    background-color: #f9fafb !important;
    color: #4b5563 !important;
    border-top: 1px solid #e5e7eb !important;
    border-bottom: none !important;
}

.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-pager-element {
    background-color: transparent !important;
    color: #374151 !important;
    box-shadow: none !important;
    border: none !important;
}

.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-pager-element.rz-state-active {
    background-color: #212121 !important;
    color: #ffffff !important;
    border-radius: 4px;
}

.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-pager-summary {
    color: #6b7280 !important;
    font-size: 0.75rem !important;
}

.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-dropdown {
    height: 24px !important;
}

/* Search Style - Clean & Minimal */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-lookup-search,
.rz-dropdown-panel[style*="--theme-variant: light-minimal"] .rz-lookup-search,
.rz-popup[style*="--theme-variant: light-minimal"] .rz-lookup-search {
    background-color: transparent !important;
    padding: 8px 12px 4px 12px !important;
    border: none !important;
    border-bottom: none !important;
}

.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-lookup-search input,
.rz-dropdown-panel[style*="--theme-variant: light-minimal"] .rz-lookup-search input,
.rz-popup[style*="--theme-variant: light-minimal"] .rz-lookup-search input {
    background-color: transparent !important;
    color: #1f2937 !important;
    border: none !important;
    border-bottom: 1.5px solid #d1d5db !important;
    border-radius: 0 !important;
    padding: 6px 4px 6px 0 !important;
    font-size: 0.875rem !important;
    transition: border-color 0.2s ease !important;
}

.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-lookup-search input:focus,
.rz-dropdown-panel[style*="--theme-variant: light-minimal"] .rz-lookup-search input:focus,
.rz-popup[style*="--theme-variant: light-minimal"] .rz-lookup-search input:focus {
    outline: none !important;
    border-bottom-color: #ec4899 !important;
}

.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-lookup-search input::placeholder,
.rz-popup[style*="--theme-variant: light-minimal"] .rz-lookup-search input::placeholder {
    color: #9ca3af !important;
    font-weight: 400 !important;
}

/* Search Button/Icon */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-lookup-search button,
.rz-dropdown-panel[style*="--theme-variant: light-minimal"] .rz-lookup-search button,
.rz-popup[style*="--theme-variant: light-minimal"] .rz-lookup-search button,
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-lookup-search i,
.rz-dropdown-panel[style*="--theme-variant: light-minimal"] .rz-lookup-search i,
.rz-popup[style*="--theme-variant: light-minimal"] .rz-lookup-search i {
    background-color: transparent !important;
    color: #6b7280 !important;
    box-shadow: none !important;
    border: none !important;
    font-size: 1.1rem !important;
}

.rz-multiselect-panel[style*="--theme-variant: light-minimal"]:not([style*="display: block"]),
.rz-dropdown-panel[style*="--theme-variant: light-minimal"]:not([style*="display: block"]) {
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 768px) {

    .rz-popup[style*="--theme-variant: light-minimal"],
    .rz-multiselect-panel[style*="--theme-variant: light-minimal"],
    .rz-dropdown-panel[style*="--theme-variant: light-minimal"] {
        min-width: 300px !important;
        width: 90vw !important;
        max-width: 95vw !important;
    }
}

/* =========================================================================
   RADZEN DROPDOWN (MULTISELECT)
   ========================================================================= */

/* Panel container */
.rz-multiselect-panel {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
}

/* Header area: transparent, no seam */
.rz-multiselect-header {
    background-color: transparent !important;
    border-bottom: none !important;
    padding: 10px 12px 4px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Search input: clean underline style */
.rz-multiselect-filter-container {
    flex: 1 !important;
    position: relative !important;
}

.rz-multiselect-filter-container input {
    background-color: transparent !important;
    color: #1f2937 !important;
    border: none !important;
    border-bottom: 1.5px solid #d1d5db !important;
    border-radius: 0 !important;
    padding: 6px 24px 6px 0 !important;
    font-size: 0.875rem !important;
    width: 100% !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
}

.rz-multiselect-filter-container input:focus {
    border-bottom-color: #ec4899 !important;
    outline: none !important;
    box-shadow: none !important;
}

.rz-multiselect-filter-container input::placeholder {
    color: #9ca3af !important;
    font-weight: 400 !important;
}

/* Search icon: subtle gray */
.rz-multiselect-filter-icon {
    color: #6b7280 !important;
    font-size: 1rem !important;
}

/* Close button (X): subtle, visible on hover */
.rz-multiselect-close {
    color: #9ca3af !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease !important;
    text-decoration: none !important;
}

.rz-multiselect-close:hover {
    opacity: 1 !important;
    color: #6b7280 !important;
}

/* Items wrapper: slim scrollbar + prevent scroll chaining to sidebar */
.rz-multiselect-items-wrapper {
    background-color: transparent !important;
    overscroll-behavior: contain !important;
}

.rz-multiselect-items-wrapper::-webkit-scrollbar {
    width: 5px !important;
}

.rz-multiselect-items-wrapper::-webkit-scrollbar-track {
    background: transparent !important;
}

.rz-multiselect-items-wrapper::-webkit-scrollbar-thumb {
    background-color: #d1d5db !important;
    border-radius: 10px !important;
}

.rz-multiselect-items-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af !important;
}

/* Items list: no dividers */
.rz-multiselect-items {
    background-color: transparent !important;
}

/* Individual items: clean padding, no borders */
.rz-multiselect-item {
    padding: 8px 12px !important;
    border-bottom: none !important;
    transition: background-color 0.15s ease !important;
}

/* ROW HOVER + SELECTED */
.rz-multiselect-item:hover,
.rz-multiselect-item.rz-state-highlight {
    background-color: #f3f4f6 !important;
}

/* Item text */
.rz-multiselect-item-content {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
    line-height: 1.4 !important;
}

/*CHECKBOX BASE (unchecked)
*/
.rz-multiselect-item .rz-chkbox-box {
    background-color: rgba(40, 44, 80, 0.8) !important;
    border: 1px solid #d1d5db !important;
    width: 1.75rem !important;
    height: 1.75rem !important;
    border-radius: 0.375rem !important;
    /* same as rounded-md */
}

/*CHECKBOX CHECKED (pink)*/
.rz-multiselect-item .rz-chkbox-box.rz-state-active {
    background-color: #ec4899 !important;
    border-color: #ec4899 !important;
}

/*CHECKED ICON (white tick)
*/
.rz-multiselect-item .rz-chkbox-box.rz-state-active .rz-chkbox-icon {
    color: #ffffff !important;
}

/*KEEP TEXT COLOR SAME*/
.rz-multiselect-item.rz-state-highlight,
.rz-multiselect-item.rz-state-highlight .rz-multiselect-item-content,
.rz-multiselect-item.rz-state-highlight span {
    color: inherit !important;
}

/* Match header checkbox style with items */
.rz-multiselect-header .rz-chkbox-box {
    background-color: white;
    width: 1.75rem !important;
    height: 1.75rem !important;
    border: 1.5px solid rgba(40, 44, 80, 0.8) !important;
    /* match other component */
    border-radius: 0.375rem !important;
    /* same as rounded-md */
}

/* Checked state (pink) */
.rz-multiselect-header .rz-chkbox-box.rz-state-active {
    background-color: #ec4899 !important;
    border-color: #ec4899 !important;
}

/* White tick */
.rz-multiselect-header .rz-chkbox-box.rz-state-active .rz-chkbox-icon {
    color: #ffffff !important;
}


/*SINGLE-SELECT DROPDOWN */
/* Selected row background = hover color */
.rz-dropdown-panel .rz-dropdown-items li.rz-state-highlight {
    background-color: #f3f4f6 !important;
}

/* Keep hover same when selected */
.rz-dropdown-panel .rz-dropdown-items li.rz-state-highlight:hover {
    background-color: #f3f4f6 !important;
}

/* Force text color to stay original (no purple) */
.rz-dropdown-panel .rz-dropdown-items li.rz-state-highlight,
.rz-dropdown-panel .rz-dropdown-items li.rz-state-highlight span {
    color: inherit !important;
}

/*DROPDOWN DATAGRID – SELECTED ROW*/
/* Selected row should look like hover */
.rz-dropdown-panel .rz-data-row.rz-state-highlight {
    background-color: #f3f4f6 !important;
}

/* Keep hover same even when selected */
.rz-dropdown-panel .rz-data-row.rz-state-highlight:hover {
    background-color: #f3f4f6 !important;
}

/* Keep text color same (no purple) */
.rz-dropdown-panel .rz-data-row.rz-state-highlight,
.rz-dropdown-panel .rz-data-row.rz-state-highlight td,
.rz-dropdown-panel .rz-data-row.rz-state-highlight span {
    color: inherit !important;
}

/*DROPDOWN DATAGRID – SELECTED ROW
Highlight row when checkbox is checked*/

/* Selected row background = hover color */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table tbody tr.rz-data-row:has(.rz-chkbox-box.rz-state-active) td {
    background-color: #f3f4f6 !important;
}

/* Keep hover same even when selected */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table tbody tr.rz-data-row:has(.rz-chkbox-box.rz-state-active):hover td {
    background-color: #f3f4f6 !important;
}

/* Keep text color normal (no purple) */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table tbody tr.rz-data-row:has(.rz-chkbox-box.rz-state-active) td,
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table tbody tr.rz-data-row:has(.rz-chkbox-box.rz-state-active) span {
    color: #1f2937 !important;
}


/*DROPDOWN DATAGRID – PAGINATION COLORS */

/* Pager arrows + page numbers (default color) */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-pager .rz-pager-element {
    color: rgba(40, 44, 80, 0.8) !important;
}

/* Arrow ICONS specifically */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-pager .rz-pager-icon {
    color: rgba(40, 44, 80, 0.8) !important;
}

/* ACTIVE page background */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-pager .rz-pager-page.rz-state-active {
    background-color: rgba(40, 44, 80, 0.8) !important;
    color: #ffffff !important;
    border-radius: 4px !important;
}

/* ACTIVE page text */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-pager .rz-pager-page.rz-state-active span,
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-pager .rz-pager-page.rz-state-active {
    color: #ffffff !important;
}

/* Disabled arrows */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-pager .rz-pager-element.rz-state-disabled,
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-pager .rz-pager-element.rz-state-disabled .rz-pager-icon {
    color: rgba(40, 44, 80, 0.35) !important;
}


/* checkbox column width in DropDownDataGrid */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table col:first-child {
    width: 40px !important;
}

/*header checkbox column */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table thead th:first-child {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    text-align: center !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

/* Checkbox Column */
.rz-popup[style*="--theme-variant: light-minimal"] .rz-grid-table thead th:first-child,
.rz-popup[style*="--theme-variant: light-minimal"] .rz-grid-table tbody td:first-child {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    text-align: center !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

/* Ensure the wrapper inside the header is also centered */
.rz-popup[style*="--theme-variant: light-minimal"] .rz-grid-table thead th:first-child>div {
    justify-content: center !important;
    text-align: center !important;
    display: flex !important;
    width: 100% !important;
}

/* Reduce gap between checkbox column and text */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table tbody td:nth-child(2),
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table thead th:nth-child(2) {
    padding-left: 6px !important;
}

.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table thead .rz-chkbox-box {
    background-color: #ffffff !important;
    border: 1.5px solid rgba(40, 44, 80, 0.8) !important;
    border-radius: 0.375rem !important;
}

/*header checkbox active state */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table thead .rz-chkbox-box.rz-state-active {
    background-color: #ec4899 !important;
    border-color: #ec4899 !important;
}

/* DataGrid row (item) checkbox icon color (white tick) */
.rz-multiselect-panel[style*="--theme-variant: light-minimal"] .rz-grid-table tbody tr.rz-data-row:has(.rz-chkbox-box.rz-state-active) .rz-chkbox-icon {
    color: #ffffff !important;
}

/* =========================================================================
   1. POPUP CONTAINER
   ========================================================================= */
.rz-popup[style*="--theme-variant: light-minimal"] {
    max-height: 400px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

.rz-popup[style*="--theme-variant: light-minimal"] .rz-lookup-panel,
.rz-popup[style*="--theme-variant: light-minimal"] .rz-datatable,
.rz-popup[style*="--theme-variant: light-minimal"] .rz-datatable-scrollable,
.rz-popup[style*="--theme-variant: light-minimal"] .rz-data-grid-data {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* GRID WRAPPER (Connects Popup to Data)*/
.rz-popup[style*="--theme-variant: light-minimal"] .rz-data-grid {
    height: auto !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border: none !important;
    background-color: transparent !important;
    background: transparent !important;
}

/* SCROLLABLE AREA */
.rz-popup[style*="--theme-variant: light-minimal"] .rz-data-grid-data {
    max-height: 300px !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    flex: 1 1 auto !important;
    display: block !important;
}

/* HEADER FIXES */
.rz-popup[style*="--theme-variant: light-minimal"] .rz-grid-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

/* Header Container */
.rz-popup[style*="--theme-variant: light-minimal"] .rz-grid-table thead {
    display: table-header-group !important;
    width: 100% !important;
}

/* Header Cells (Sticky Top) */
.rz-popup[style*="--theme-variant: light-minimal"] .rz-grid-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    background-color: #ffffff !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #e5e7eb !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* CHECKBOX ALIGNMENT (First Column)*/
.rz-popup[style*="--theme-variant: light-minimal"] .rz-grid-table thead th:first-child,
.rz-popup[style*="--theme-variant: light-minimal"] .rz-grid-table tbody td:first-child {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    text-align: center !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

/* Ensure the wrapper inside the header is also centered */
.rz-popup[style*="--theme-variant: light-minimal"] .rz-grid-table thead th:first-child>div {
    justify-content: center !important;
    text-align: center !important;
    display: flex !important;
    width: 100% !important;
}

.rz-popup[style*="--theme-variant: light-minimal"] .rz-chkbox-box {
    border-radius: 4px !important;
    border-color: #d1d5db !important;
}

/* ROW STYLING */
.rz-popup .rz-grid-table tr {
    height: 40px !important;
    display: table-row !important;
}

.rz-popup .rz-grid-table td {
    border-bottom: none !important;
    background-color: #ffffff !important;
    vertical-align: middle !important;
    transition: background-color 0.15s ease !important;
}

.market-item-cell {
    padding-left: 4px !important;
    font-size: 0.85rem;
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 1.4;
}

/* Custom slim scrollbar for popup data grid */
.rz-popup[style*="--theme-variant: light-minimal"] .rz-data-grid-data::-webkit-scrollbar {
    width: 5px !important;
}

.rz-popup[style*="--theme-variant: light-minimal"] .rz-data-grid-data::-webkit-scrollbar-track {
    background: transparent !important;
}

.rz-popup[style*="--theme-variant: light-minimal"] .rz-data-grid-data::-webkit-scrollbar-thumb {
    background-color: #d1d5db !important;
    border-radius: 10px !important;
}

.rz-popup[style*="--theme-variant: light-minimal"] .rz-data-grid-data::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af !important;
}

/* CLEAR BUTTON */
.rz-dropdown-clear-icon {
    position: absolute !important;
    top: 50% !important;
    right: 32px !important;
    transform: translateY(-50%) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 1.25rem !important;
    z-index: 20;
    opacity: 1 !important;
}

.rz-dropdown-clear-icon:hover {
    color: #ec4899 !important;
}

/* Shared opt-in theme for Radzen dropdowns used by tool sidebar filters.
   New tool screens should compose these classes instead of adding scoped copies. */
.tool-filter-dropdown.rz-dropdown {
    height: 42px !important;
    padding: 0 1rem !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 0.5rem !important;
    background: var(--color-primary) !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    transition: filter 0.2s ease !important;
}

/* EV fullscreen filters sit outside the sidebar surface and use a white
   outline. The extra ancestors keep the shared sidebar theme unchanged. */
.full-screen-odds-dialog .positive-ev-filter-row .tool-filter-dropdown.rz-dropdown {
    border-color: #ffffff !important;
}

.tool-filter-dropdown.rz-dropdown:hover {
    filter: brightness(1.25) !important;
}

.tool-filter-dropdown.rz-dropdown .rz-dropdown-label {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    color: white !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.025em !important;
    line-height: normal !important;
    text-transform: uppercase !important;
}

.tool-filter-dropdown.rz-dropdown .rz-dropdown-trigger {
    width: 2rem !important;
    border: 0 !important;
    background: transparent !important;
    color: white !important;
    opacity: 1 !important;
}

.tool-filter-dropdown.rz-dropdown .rz-dropdown-trigger .rzi {
    font-size: 1.25rem !important;
}

/* Center both single-value labels and multi-select chip wrappers. */
.tool-filter-dropdown--centered.rz-dropdown {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.tool-filter-dropdown--centered.rz-dropdown .rz-dropdown-label {
    position: absolute !important;
    top: 50% !important;
    right: 3.5rem !important;
    left: 1rem !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1rem !important;
    transform: translateY(-50%) !important;
}

/* Single-value sportsbook dropdowns render a custom value template so they can
   show the same adjacent remove action as Radzen's multi-select chips. */
.tool-filter-dropdown--single-value.tool-filter-dropdown--centered.rz-dropdown:not(.rz-state-empty) .rz-dropdown-label:not(.rz-placeholder) {
    right: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: calc(100% - 5rem) !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.tool-filter-value-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    min-width: 0 !important;
    height: 1.25rem !important;
    padding: 0.25rem 0.375rem 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    background: var(--color-secondary) !important;
    color: white !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    line-height: 0.75rem !important;
}

.tool-filter-value-chip__text {
    min-width: 0 !important;
    overflow: hidden !important;
    color: white !important;
    line-height: 0.75rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.tool-filter-value-chip__remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 0.75rem !important;
    width: 0.75rem !important;
    min-width: 0.75rem !important;
    height: 0.75rem !important;
    min-height: 0.75rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: white !important;
    cursor: pointer !important;
    font: inherit !important;
    font-size: 0.875rem !important;
    line-height: 0.75rem !important;
}

.tool-filter-value-chip__remove:hover {
    opacity: 0.7 !important;
}

.tool-filter-dropdown--chips.tool-filter-dropdown--centered.rz-dropdown-chips .rz-dropdown-chips-wrapper {
    position: absolute !important;
    top: 50% !important;
    right: 3.5rem !important;
    left: 1rem !important;
    display: flex !important;
    align-items: center !important;
    align-content: center !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
}

.tool-filter-dropdown--chips.tool-filter-dropdown--centered.rz-dropdown-chips .rz-chip {
    display: flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    gap: 0.25rem !important;
    min-width: 0 !important;
    min-height: 1.25rem !important;
    height: 1.25rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0.25rem 0.5rem !important;
    border: 0 !important;
    border-radius: 0.375rem !important;
    background: var(--color-secondary) !important;
    color: white !important;
    box-shadow: none !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    line-height: 0.75rem !important;
}

.tool-filter-dropdown--chips.tool-filter-dropdown--centered.rz-dropdown-chips .rz-chip-text {
    min-width: 0 !important;
    overflow: hidden !important;
    color: white !important;
    font-size: 0.75rem !important;
    line-height: 0.75rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.tool-filter-dropdown--chips.tool-filter-dropdown--centered.rz-dropdown-chips .rz-chip .rz-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 0.75rem !important;
    width: 0.75rem !important;
    min-width: 0.75rem !important;
    height: 0.75rem !important;
    min-height: 0.75rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: white !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

.tool-filter-dropdown--chips.tool-filter-dropdown--centered.rz-dropdown-chips .rz-chip .rz-button:hover {
    background: transparent !important;
    opacity: 0.7 !important;
}

.tool-filter-dropdown--chips.tool-filter-dropdown--centered.rz-dropdown-chips .rz-chip .rz-button .rzi {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 0.75rem !important;
    height: 0.75rem !important;
    margin: 0 !important;
    padding: 0 !important;
    color: white !important;
    font-size: 0.75rem !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    transform: none !important;
}

/* A virtualized select-all request resolves the full server result after Radzen
   has already selected the current page. Keep that partial page count out of
   the trigger and display the authoritative total until the request completes. */
.tool-filter-dropdown--server-selecting.rz-dropdown {
    position: relative !important;
}

.tool-filter-dropdown--server-selecting.rz-dropdown .rz-dropdown-label,
.tool-filter-dropdown--server-selecting.rz-dropdown-chips .rz-dropdown-chips-wrapper {
    visibility: hidden !important;
}

.tool-filter-dropdown--server-selecting.rz-dropdown::before {
    content: attr(data-selected-count) " items selected";
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 3.5rem;
    left: 1rem;
    overflow: hidden;
    color: white;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1rem;
    letter-spacing: 0.025em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Tool market popups are moved under <body> by Radzen, outside component-scoped CSS. */
.rz-multiselect-panel:has(
    input:is(#DropDownMainMarket, #DropDownPlayerProp, #DropDownDerivativeAlternate)
) .rz-chkbox-box {
    transition: none !important;
}

/* Radzen can retain the prior empty template while a new virtual request starts. */
.rz-multiselect-panel:has(
    input:is(#DropDownMainMarket, #DropDownPlayerProp, #DropDownDerivativeAlternate)
):has(.tool-filter-dropdown-loading-active) .tool-filter-dropdown-empty {
    display: none !important;
}

/* Keep a loader in Radzen's pre-rendered popup until an option or empty state is actually in the DOM. */
.rz-multiselect-panel:has(
    input:is(#DropDownMainMarket, #DropDownPlayerProp, #DropDownDerivativeAlternate)
):has(li[role="option"], .tool-filter-dropdown-empty) .tool-filter-dropdown-loading-preload {
    display: none !important;
}

.tool-filter-dropdown-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.75rem;
    background: #fff;
    color: #6b7280;
    font-size: 0.875rem;
}

.tool-filter-dropdown-empty {
    min-height: 3rem;
    padding: 0.75rem;
    background: #fff;
    color: #909090;
    font-size: 0.875rem;
    text-align: center;
}
