/* ============================================================================
   UI FIXES - Responsive & Professional Design Improvements
   ============================================================================ */

/* 1. FIX: Bookmaker Dropdown - Text alignment and sizing */
#bookmakerSelect {
    height: 38px !important;
    line-height: 1.5 !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem !important;
    vertical-align: middle !important;
}

#bookmakerSelect option {
    padding: 8px 12px !important;
    line-height: 1.5 !important;
    height: auto !important;
}

/* 2. FIX: DevExtreme Grid - Professional color scheme for dark backgrounds */
/* Apply ONLY to StatArea grids - DO NOT affect UnifiedAnaliz */
.statarea-page .dx-datagrid {
    background-color: #ffffff !important;
}

.statarea-page .dx-datagrid-rowsview .dx-row {
    background-color: #ffffff !important;
    color: #212529 !important;
}

.statarea-page .dx-datagrid-rowsview .dx-row-alt {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

.statarea-page .dx-datagrid-headers {
    background-color: #e9ecef !important;
    color: #212529 !important;
    font-weight: 600 !important;
}

.statarea-page .dx-datagrid-headers .dx-header-row {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

.statarea-page .dx-datagrid .dx-column-lines > td {
    border-left: 1px solid #dee2e6 !important;
    border-right: 1px solid #dee2e6 !important;
}

.statarea-page .dx-datagrid .dx-row-lines > td {
    border-bottom: 1px solid #dee2e6 !important;
}

.statarea-page .dx-datagrid-filter-row {
    background-color: #f8f9fa !important;
}

.statarea-page .dx-datagrid-filter-row input,
.statarea-page .dx-datagrid-filter-row select {
    color: #212529 !important;
    background-color: #ffffff !important;
}

/* Hover effect for rows */
.statarea-page .dx-datagrid-rowsview .dx-row:hover {
    background-color: #e3f2fd !important;
    color: #212529 !important;
}

/* Selected row */
.statarea-page .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) {
    background-color: #bbdefb !important;
    color: #212529 !important;
}

/* Cell text color */
.statarea-page .dx-datagrid-rowsview .dx-row > td {
    color: #212529 !important;
}

/* Filter panel */
.statarea-page .dx-datagrid-filter-panel {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

/* Pager */
.statarea-page .dx-datagrid-pager {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* 2B. FIX: UnifiedAnaliz Grid - Preserve cell_prepared colors and ensure icons are visible */
/* Set professional gray background for grid container only (not rows or cells) */
.unified-analiz-page .dx-datagrid {
    background-color: #f5f5f5 !important;
}

/* DON'T set row backgrounds - row_prepared uses inline CSS */
.unified-analiz-page .dx-datagrid-rowsview .dx-row {
    /* NO background-color here - row_prepared handles it */
}

.unified-analiz-page .dx-datagrid-rowsview .dx-row-alt {
    /* NO background-color here - row_prepared handles it */
}

/* DON'T set default cell backgrounds - renk-override.css handles colored cells */

/* Override: Force renk classes to show their specific colors */
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk1 { background-color: #FDF5E6 !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk2 { background-color: #FFDEAD !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk3 { background-color: #E6E6FA !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk4 { background-color: #D1D1D1 !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk5 { background-color: #B0C4DE !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk6 { background-color: #98FB98 !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk7 { background-color: #F0E68C !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk8 { background-color: #EEDD82 !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk9 { background-color: #F5DEB3 !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk10 { background-color: #FFA07A !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk11 { background-color: #FFB6C1 !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk12 { background-color: #DDA0DD !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk13 { background-color: #D8BFD8 !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk14 { background-color: #EEE9E9 !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk15 { background-color: #EEDFCC !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk16 { background-color: #EEE9BF !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk17 { background-color: #FFF68F !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk18 { background-color: #EEEEE0 !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk19 { background-color: #E0EEE0 !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk20 { background-color: #E0ECDD !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk21 { background-color: #A4D3EE !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk22 { background-color: #D1EEEE !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk23 { background-color: #B4EEB4 !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk24 { background-color: #BCEE68 !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk25 { background-color: #FFD700 !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk26 { background-color: #FFC125 !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk27 { background-color: #FFC1C1 !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk28 { background-color: #FF8247 !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk29 { background-color: #FFD39B !important; }
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td.renk30 { background-color: #FFA54F !important; }

.unified-analiz-page .dx-datagrid-headers {
    background-color: #e0e0e0 !important;
    color: #212529 !important;
    font-weight: 600 !important;
}

.unified-analiz-page .dx-datagrid-filter-row {
    background-color: #eeeeee !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* Make sure filter icons and text are visible */
.unified-analiz-page .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor,
.unified-analiz-page .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor input {
    color: #212529 !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}

.unified-analiz-page .dx-datagrid-filter-row .dx-icon {
    color: #64748b !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.unified-analiz-page .dx-datagrid-headers .dx-icon {
    color: #475569 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.unified-analiz-page .dx-datagrid-headers .dx-icon-filter {
    color: #10b981 !important;
}

/* Ensure cell backgrounds from cell_prepared work */
.unified-analiz-page .dx-datagrid-rowsview .dx-row > td {
    /* Don't override background-color here - let cell_prepared handle it */
    color: #212529 !important;
}

/* Only set hover if no custom background is applied */
.unified-analiz-page .dx-datagrid-rowsview .dx-row:hover {
    filter: brightness(0.95) !important;
}

/* Add borders for UnifiedAnaliz grid */
.unified-analiz-page .dx-datagrid .dx-column-lines > td {
    border-left: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
}

.unified-analiz-page .dx-datagrid .dx-row-lines > td {
    border-bottom: 1px solid #e2e8f0 !important;
}

.unified-analiz-page .dx-datagrid-pager {
    background-color: #e0e0e0 !important;
    border-top: 2px solid #e2e8f0 !important;
}

/* 3. FIX: Moneyway Table - Professional color scheme */
#chartTable,
#preMatchTable {
    background-color: #ffffff !important;
    color: #212529 !important;
}

#chartTable thead,
#preMatchTable thead {
    background-color: #e9ecef !important;
    color: #212529 !important;
    font-weight: 600 !important;
}

#chartTable thead th,
#preMatchTable thead th {
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
    padding: 12px 8px !important;
}

#chartTable tbody tr,
#preMatchTable tbody tr {
    background-color: #ffffff !important;
    color: #212529 !important;
}

#chartTable tbody tr:nth-child(even),
#preMatchTable tbody tr:nth-child(even) {
    background-color: #f8f9fa !important;
}

#chartTable tbody tr:hover,
#preMatchTable tbody tr:hover {
    background-color: #e3f2fd !important;
}

#chartTable tbody td,
#preMatchTable tbody td {
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
    padding: 8px !important;
}

/* 4. FIX: Bootstrap Selectpicker Dropdown Position & Styling */
/* Fix dropdown opening upwards when it should open downwards */
.bootstrap-select .dropdown-menu {
    margin-top: 0 !important;
    max-height: 350px !important;
    overflow-y: auto !important;
}

/* Force dropdown to open downwards */
.bootstrap-select.dropup .dropdown-menu {
    bottom: auto !important;
    top: 100% !important;
    margin-top: 2px !important;
}

/* Professional styling for dropdown items */
.bootstrap-select .dropdown-menu li a {
    color: #212529 !important;
    background-color: #ffffff !important;
    padding: 8px 16px !important;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.active a {
    background-color: #007bff !important;
    color: #ffffff !important;
}

.bootstrap-select .dropdown-menu li.selected a {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

/* Fix for match selector dropdown */
#slcMatches + .dropdown-menu {
    background-color: #ffffff !important;
}

#slcMatches + .dropdown-menu .dropdown-item {
    color: #212529 !important;
    background-color: #ffffff !important;
}

#slcMatches + .dropdown-menu .dropdown-item:hover,
#slcMatches + .dropdown-menu .dropdown-item.active {
    background-color: #007bff !important;
    color: #ffffff !important;
}

/* Fix for filter selector dropdown */
#slcSavedFilters + .dropdown-menu {
    background-color: #ffffff !important;
}

#slcSavedFilters + .dropdown-menu .dropdown-item {
    color: #212529 !important;
    background-color: #ffffff !important;
}

#slcSavedFilters + .dropdown-menu .dropdown-item:hover,
#slcSavedFilters + .dropdown-menu .dropdown-item.active {
    background-color: #007bff !important;
    color: #ffffff !important;
}

/* Fix for odds selector dropdown */
#slcOdds + .dropdown-menu {
    background-color: #ffffff !important;
}

#slcOdds + .dropdown-menu .dropdown-item {
    color: #212529 !important;
    background-color: #ffffff !important;
}

#slcOdds + .dropdown-menu .dropdown-item:hover,
#slcOdds + .dropdown-menu .dropdown-item.active {
    background-color: #007bff !important;
    color: #ffffff !important;
}

/* 5. FIX: Smart Analysis Table - Professional color scheme */
#jsonTable {
    background-color: #ffffff !important;
    color: #212529 !important;
}

#jsonTable thead {
    background-color: #e9ecef !important;
    color: #212529 !important;
    font-weight: 600 !important;
}

#jsonTable thead th {
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
    padding: 8px !important;
}

#jsonTable tbody tr {
    background-color: #ffffff !important;
    color: #212529 !important;
}

#jsonTable tbody tr:nth-child(even) {
    background-color: #f8f9fa !important;
}

#jsonTable tbody tr:hover {
    background-color: #e3f2fd !important;
}

#jsonTable tbody td {
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
    padding: 6px !important;
}

/* 6. Additional Professional Enhancements */
/* Make sure all text in inner-page is readable */
.inner-page {
    color: #212529 !important;
}

/* Container background for better readability - ONLY for StatArea */
.statarea-page .container {
    background-color: rgba(255, 255, 255, 0.95) !important;
    padding: 20px !important;
    border-radius: 8px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

/* UnifiedAnaliz should remain transparent */
.unified-analiz-page .container-fluid {
    background-color: transparent !important;
    padding: 20px !important;
}

/* Fix for countdown timer in Moneyway */
#countdown {
    color: #212529 !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    margin: 10px 0 !important;
    font-weight: 600 !important;
}

/* 7. Smart Match Selector - Match Status Colors */
/* Bitmiş maçlar için yeşil arkaplan */
.match-finished {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    font-weight: 600 !important;
}

.bootstrap-select .dropdown-menu .match-finished a {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
}

.bootstrap-select .dropdown-menu .match-finished:hover a,
.bootstrap-select .dropdown-menu .match-finished.active a {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: white !important;
}

/* İlk yarı skoru olan maçlar için mavi arkaplan */
.match-halftime {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
    font-weight: 600 !important;
}

.bootstrap-select .dropdown-menu .match-halftime a {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
}

.bootstrap-select .dropdown-menu .match-halftime:hover a,
.bootstrap-select .dropdown-menu .match-halftime.active a {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: white !important;
}

/* Bitmiş VE ilk yarı skoru olan maçlar için turuncu arkaplan */
.match-finished-halftime {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white !important;
    font-weight: 700 !important;
}

.bootstrap-select .dropdown-menu .match-finished-halftime a {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white !important;
}

.bootstrap-select .dropdown-menu .match-finished-halftime:hover a,
.bootstrap-select .dropdown-menu .match-finished-halftime.active a {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    color: white !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #bookmakerSelect {
        font-size: 0.875rem !important;
    }
    
    .bootstrap-select .dropdown-menu {
        max-height: 250px !important;
    }
}

/* 8. FIX: DevExpress Grid Color Classes - Override for cell_prepared functions */
/* These classes are applied by cell_prepared functions and must override default grid colors */
/* DON'T override background colors - let style.css handle them */

/* Ensure row hover doesn't override cell colors */
.unified-analiz-page .dx-datagrid-rowsview .dx-row:hover > td[class*="renk"],
.inner-page:not(.statarea-page) .dx-datagrid-rowsview .dx-row:hover > td[class*="renk"] {
    filter: brightness(0.95);
}

/* Make sure text is readable on colored backgrounds */
.unified-analiz-page .dx-datagrid-rowsview td[class*="renk"],
.inner-page:not(.statarea-page) .dx-datagrid-rowsview td[class*="renk"] {
    color: #1e293b !important;
    font-weight: 500 !important;
}

/* 9. General DevExpress Grid improvements for pages with cell_prepared coloring */
/* Set professional gray background for IddaaV1 and IddaaV2 grids */
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid {
    background-color: #f5f5f5 !important;
}

/* DON'T set row backgrounds - row_prepared uses inline CSS */
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row {
    /* NO background-color here - row_prepared handles it */
}

.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row-alt {
    /* NO background-color here - row_prepared handles it */
}

/* DON'T set default cell backgrounds - renk-override.css handles colored cells */

/* Override: Force renk classes to show their specific colors */
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk1 { background-color: #FDF5E6 !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk2 { background-color: #FFDEAD !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk3 { background-color: #E6E6FA !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk4 { background-color: #D1D1D1 !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk5 { background-color: #B0C4DE !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk6 { background-color: #98FB98 !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk7 { background-color: #F0E68C !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk8 { background-color: #EEDD82 !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk9 { background-color: #F5DEB3 !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk10 { background-color: #FFA07A !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk11 { background-color: #FFB6C1 !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk12 { background-color: #DDA0DD !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk13 { background-color: #D8BFD8 !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk14 { background-color: #EEE9E9 !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk15 { background-color: #EEDFCC !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk16 { background-color: #EEE9BF !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk17 { background-color: #FFF68F !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk18 { background-color: #EEEEE0 !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk19 { background-color: #E0EEE0 !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk20 { background-color: #E0ECDD !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk21 { background-color: #A4D3EE !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk22 { background-color: #D1EEEE !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk23 { background-color: #B4EEB4 !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk24 { background-color: #BCEE68 !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk25 { background-color: #FFD700 !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk26 { background-color: #FFC125 !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk27 { background-color: #FFC1C1 !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk28 { background-color: #FF8247 !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk29 { background-color: #FFD39B !important; }
.inner-page:not(.statarea-page):not(.unified-analiz-page) .dx-datagrid-rowsview .dx-row > td.renk30 { background-color: #FFA54F !important; }

.inner-page:not(.statarea-page) .dx-datagrid-headers {
    background-color: #e0e0e0 !important;
    color: #212529 !important;
    font-weight: 600 !important;
}

.inner-page:not(.statarea-page) .dx-datagrid-filter-row {
    background-color: #eeeeee !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.inner-page:not(.statarea-page) .dx-datagrid-filter-row .dx-icon {
    color: #64748b !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.inner-page:not(.statarea-page) .dx-datagrid-headers .dx-icon {
    color: #475569 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.inner-page:not(.statarea-page) .dx-datagrid-rowsview .dx-row:hover {
    filter: brightness(0.95) !important;
}