/* CMP Data Visualizer Styles - Optimized */

/* Global DataTable optimizations */
.dataTables_wrapper {
    contain: layout style paint;
    will-change: transform;
}

.dataTable {
    contain: layout style paint;
}

/* Performance optimizations */
.cdv-container * {
    box-sizing: border-box;
}

/* Error handling styles */
.cdv-retry-btn {
    background: #007cba;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
    transition: background-color 0.2s ease;
}

.cdv-retry-btn:hover {
    background: #005a87;
}

.cdv-container {
    position: relative;
    margin: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    contain: layout style;
}

.cdv-filters {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
    contain: layout;
}

.cdv-filter-row {
    display: flex;
    gap: 16px;
    margin-bottom: 0;
    contain: layout;
    align-items: flex-end;
}

.cdv-filter-cell {
    width: 100%;
    contain: layout;
}

/* For screens wider than 768px, put all filters in one row */
@media (min-width: 1024px) {
    .cdv-filter-row {
        flex-direction: row;
        align-items: flex-end;
    }

    .cdv-filter-cell {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    .cdv-filter-cell:last-child {
        flex: 0 0 auto;
        min-width: auto;
    }
}

.cdv-filter-group {
    flex: 1;
    min-width: 0;
}

.cdv-filter-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #495057;
    font-size: 14px;
}

.cdv-filter-group select,
.cdv-filter-group input[type="text"],
.cdv-filter-group input[type="number"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    font-size: 14px;
    min-height: 40px;
    transition: all 0.2s ease-in;
}

.cdv-filter-group input[type="text"],
.cdv-filter-group input[type="number"] {
    box-sizing: border-box;
}

.cdv-filter-group input[type="text"]:focus,
.cdv-filter-group input[type="number"]:focus {
    outline: none;
    border-color: #6d1afe;
    box-shadow: 0 0 0 2px rgba(109, 26, 254, 0.25);
}

.cdv-clear-btn {
    background-color: #6d1afe;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    min-height: 40px;
    margin-top: 0;
    transition: background-color 0.2s ease-in;
    white-space: nowrap;
}

.cdv-clear-btn:hover {
    background-color: #4d09c2;
}

.cdv-clear-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}

.cdv-filter-group:has(.cdv-clear-btn) {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

/* For screens wider than 768px, adjust button positioning */
@media (min-width: 769px) {
    .cdv-filter-group:has(.cdv-clear-btn) {
        justify-content: center;
        align-items: center;
    }
}

/* Hide DataTables built-in search filter */
.dataTables_filter {
    display: none !important;
}

/* Hide DataTables length selector since we don't need it */
.dataTables_length {
    display: none !important;
}

.cdv-filter-group select:focus {
    outline: none;
    border-color: #6d1afe;
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.25);
}

.cdv-table-container {
    background: white;
    overflow: hidden;
    position: relative;
    contain: layout style paint;
    will-change: transform;
}

/* Mobile scroll indicators */
.cdv-table-container::before,
.cdv-table-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cdv-table-container::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.9), transparent);
}

.cdv-table-container::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.9), transparent);
}

/* Show scroll indicators only on mobile */
@media (max-width: 768px) {
    .cdv-table-container::before,
    .cdv-table-container::after {
        opacity: 1;
    }

    /* Hide indicators when scrolled to edges */
    .cdv-table-container.scrolled-left::before {
        opacity: 0;
    }

    .cdv-table-container.scrolled-right::after {
        opacity: 0;
    }
}

/* Hide indicators on desktop */
@media (min-width: 769px) {
    .cdv-table-container::before,
    .cdv-table-container::after {
        opacity: 0;
    }
}

/* Mobile scroll hint text */
.cdv-scroll-hint {
    display: none;
    text-align: center;
    padding: 8px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #6c757d;
}
.cdv-scroll-hint span {
    font-style: italic;
}

@media (max-width: 768px) {
    .cdv-scroll-hint {
        display: block;
    }
}

/* Mobile scroll arrows */
.cdv-scroll-arrows {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    background: rgba(109, 26, 254, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.cdv-scroll-arrows:hover {
    background: rgba(109, 26, 254, 1);
    transform: translateY(-50%) scale(1.1);
}

.cdv-scroll-arrows:active {
    transform: translateY(-50%) scale(0.95);
}

.cdv-scroll-left {
    left: 10px;
}

.cdv-scroll-right {
    right: 10px;
}

.cdv-scroll-arrows.hidden {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
    .cdv-scroll-arrows {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Touch scroll indicator animation */
@keyframes scrollPulse {
    0% { transform: translateX(0); }
    50% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}

.cdv-table-container.touch-scroll-hint .dataTables_wrapper {
    animation: scrollPulse 2s ease-in-out infinite;
}

/* Mobile table touch feedback */
@media (max-width: 768px) {
    .dataTables_wrapper {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        contain: layout style paint;
        will-change: transform;
    }

    .dataTables_wrapper::-webkit-scrollbar {
        height: 8px;
    }

    .dataTables_wrapper::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .dataTables_wrapper::-webkit-scrollbar-thumb {
        background: #6d1afe;
        border-radius: 4px;
    }

    .dataTables_wrapper::-webkit-scrollbar-thumb:hover {
        background: #4d09c2;
    }
}

/* DataTables customization */

.dataTables_filter {
    margin-bottom: 20px;
}

.dataTables_filter input {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
}

.dataTables_length {
    margin-bottom: 20px;
}

.dataTables_length select {
    padding: 4px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    margin: 0 5px;
}

table.dataTable {
    border-collapse: collapse;
    border: 0;
    width: 100%;
}

table.dataTable thead th {
    background-color: rgba(109, 26, 254, 0.1);
    padding: 8px 4px;
    text-align: left;
    font-weight: 600;
    color: #111;
    font-size: 14px;
    border: 0;
}

table.dataTable tbody td {
    padding: 10px 8px;
    border: 0;
    font-size: 13px;
    vertical-align: top;
}

table.dataTable tbody tr.odd {
    background-color: rgba(109, 26, 254, 0.01);
}
table.dataTable tbody tr:hover {
    background-color: rgba(109, 26, 254, 0.05);
}
table.dataTable.display>tbody>tr.odd>.sorting_1, table.dataTable.order-column.stripe>tbody>tr.odd>.sorting_1,
table.dataTable.display>tbody>tr.even>.sorting_1, table.dataTable.order-column.stripe>tbody>tr.even>.sorting_1 {
    background-color: rgba(173, 158, 192, 0.05);
}
table.dataTable>thead>tr>th, table.dataTable>thead>tr>td {
    padding: 4px 8px;
}

/* Loading state */
.cdv-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #6c757d;
    z-index: 1000;
}

.cdv-loading::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #6d1afe;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error state */
.cdv-error {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #f5c6cb;
    margin: 20px 0;
}

/* Responsive design */
@media (max-width: 639px) {
    .cdv-filter-row {
        flex-direction: column;
        gap: 15px;
    }

    .cdv-filter-cell {
        flex-direction: column;
        gap: 10px;
    }

    .cdv-filter-group {
        min-width: 100%;
    }

    table.dataTable {
        font-size: 12px;
    }

    table.dataTable thead th,
    table.dataTable tbody td {
        padding: 4px 8px;
    }
}

@media (min-width: 640px) and (max-width: 768px) {
    .cdv-filter-row {
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 12px;
    }

    .cdv-filter-cell {
        flex: 0 0 calc(50% - 6px);
        min-width: 0;
    }
    .cdv-filter-cell:last-child {
        gap: 28px;
    }

    table.dataTable {
        font-size: 13px;
    }

    table.dataTable thead th,
    table.dataTable tbody td {
        padding: 3px 6px;
    }
}

@media (min-width: 1024px) {
    .cdv-filter-row {
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 16px;
    }

    .cdv-filter-cell {
        flex: 1;
        min-width: 0;
    }
    .cdv-filter-cell:last-child {
        flex: 0 0 auto;
        min-width: auto;
        gap: 0;
    }

    table.dataTable {
        font-size: 14px;
    }

    table.dataTable thead th,
    table.dataTable tbody td {
        padding: 4px 8px;
    }
}

/* Single select styling */
.cdv-filter-group select {
    appearance: none;
    min-height: 40px;
    max-height: 40px;
    cursor: pointer;
}

.cdv-filter-group:has(select:not(.select2-hidden-accessible)) {
    position: relative;
}
.cdv-filter-group:has(select:not(.select2-hidden-accessible))::after {
    display: inline-block;
    content: "";
    width: 20px;
    height: 20px;
    background: center / cover no-repeat url("data:image/svg+xml,%3Csvg width='20px' height='20px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z' fill='%236d1afe'/%3E%3C/svg%3E");
    position: absolute;
    bottom: 10px;
    right: 10px;
    pointer-events: none;
}

.cdv-filter-group select option {
    padding: 4px 8px;
}

.cdv-filter-group select option:checked {
    background-color: #6d1afe;
    color: white;
}

/* DataTables info and pagination */
.dataTables_info {
    color: #6c757d;
    font-size: 13px;
    margin-top: 10px;
}

.dataTables_paginate {
    margin-top: 10px;
}

.dataTables_paginate .paginate_button {
    padding: 6px 12px;
    margin: 0 2px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: white;
    color: #6d1afe;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.dataTables_paginate .paginate_button:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.dataTables_paginate .paginate_button.current {
    background-color: #6d1afe;
    color: white;
    border-color: #6d1afe;
}

.dataTables_paginate .paginate_button.disabled {
    color: #6c757d;
    cursor: not-allowed;
    background-color: #f8f9fa;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #000 !important;
    background: linear-gradient(to bottom, rgba(109, 26, 254, 0.1) 0%, rgba(109, 26, 254, 0.2) 100%);
    border-color: #6d1afe;
}

/* Select2 Multi-select Styles */
.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid #ddd;
    border-radius: 4px;
    min-height: 38px;
    padding: 8px 12px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #6d1afe;
    border: 1px solid #6d1afe;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    margin: 2px;
    padding: 2px 8px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff;
    border-right: 0;
    margin-right: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-left: 7px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ff6b6b;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    outline: none;
    border-color: #6d1afe;
    box-shadow: 0 0 0 2px rgba(109, 26, 254, 0.25);
}

.select2-container--default .select2-search--inline .select2-search__field {
    border: none;
    outline: none;
    font-size: 14px;
    padding: 0;
    margin: 0;
}

.select2-dropdown {
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #6d1afe;
    color: #fff;
}

/* Select2 Dropdown Basic Styling */
.select2-dropdown {
    z-index: 9999 !important;
}

/* Hide Select2 clear button for environment filter */
#environment-filter + .select2-container .select2-selection__clear {
    display: none !important;
}

/* Responsive adjustments for Select2 */
@media (max-width: 640px) {
    .select2-container--default .select2-selection--multiple {
        min-height: 32px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        font-size: 11px;
        padding: 1px 6px;
    }
}

/* CMP-specific styles */
.cdv-commercial-true {
    color: #4d09c2;
    font-weight: 600;
}

.cdv-commercial-false {
    color: #6c757d;
    font-weight: 600;
}

.cdv-environment-tag {
    display: inline-block;
    background: #e9ecef;
    color: #495057;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    margin: 2px;
    white-space: nowrap;
}

.cdv-text-center {
    text-align: center;
}

.cdv-text-muted {
    color: #6c757d;
}

/* Web Page link styles */
.cdv-web-link {
    color: #6d1afe;
    text-decoration: none;
    font-size: 13px;
    word-break: break-all;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cdv-web-link:hover {
    color: #4d09c2;
    text-decoration: underline;
}

.cdv-web-link:focus {
    outline: 2px solid #6d1afe;
    outline-offset: 2px;
}