/* Model Details Page Styles */

.provider-logo {
    max-width: 64px;
    max-height: 64px;
    border-radius: 8px;
}

.pricing-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 5px;
}

.pricing-table th, 
.pricing-table td {
    padding: 10px;
}

.pricing-table tbody tr {
    background-color: var(--light-color);
}

.pricing-table tbody tr:hover {
    background-color: var(--subtle-bg-color);
}

.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
    margin-top: 20px;
} 

/* Styles for sortable table headers in model benchmark results */
.model-benchmark-results-table th[data-sort] {
    cursor: pointer;
}


/* ==========================================
   Dark Mode Table Overrides (for model-details)
   ========================================== */

/* Base table styles for dark mode */
.dark-theme .table {
    background-color: var(--card-bg); 
    color: var(--light-color);
    border-color: rgba(var(--light-color-rgb), 0.15); 
}

.dark-theme .table th {
    background-color: rgba(var(--dark-color-rgb), 0.8); 
    color: var(--light-color);
    border-color: rgba(var(--light-color-rgb), 0.15); 
}

.dark-theme .table td {
    border-top-color: rgba(var(--light-color-rgb), 0.1); 
    color: var(--light-color); /* Ensure TD text color */
}

/* Override .table-light header in dark mode */
.dark-theme .table > thead.table-light th,
.dark-theme .table thead.table-light th {
    background-color: rgba(var(--dark-color-rgb), 0.6); 
    color: var(--light-color);
    border-color: rgba(var(--light-color-rgb), 0.15);
}

/* Striped tables in dark mode */
.dark-theme .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(var(--light-color-rgb), 0.05); 
    color: var(--light-color);
}
.dark-theme .table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: transparent; 
     color: var(--light-color);
}

/* Hovered rows in dark mode */
.dark-theme .table-hover > tbody > tr:hover > * {
    background-color: rgba(var(--primary-color-rgb), 0.15); 
    color: var(--light-color);
}

/* Specific styles for .pricing-table in dark mode */
.dark-theme .pricing-table {
     color: var(--light-color);
     border-collapse: collapse; /* Override separate spacing */
     border-spacing: 0; 
     width: 100%; 
}

.dark-theme .pricing-table th,
.dark-theme .pricing-table td {
    border-bottom: 1px solid rgba(var(--light-color-rgb), 0.1); 
    padding: 10px; /* Keep original padding */
    text-align: left; 
    background-color: transparent; /* Override light-color background from light mode */
}

.dark-theme .pricing-table th {
     background-color: rgba(var(--dark-color-rgb), 0.8); /* Match standard header */
}

.dark-theme .pricing-table tbody tr {
    background-color: transparent; /* Override explicit light-color background */
}

.dark-theme .pricing-table tbody tr:hover {
    background-color: rgba(var(--primary-color-rgb), 0.15); /* Match standard hover */
}

/* Styles for noUiSlider */
.accuracy-slider-values {
    font-weight: normal;
    margin-left: 10px;
}
.noUi-target {
    margin-top: 5px; /* Add some space below the label */
}

/* Add other model-details specific styles here */ 

/* Pending badge for accuracy pending human evaluation */
.pending-badge {
    display: inline-block;
    background-color: var(--subtle-bg-color, #e0e0e0);
    color: var(--text-muted, #888);
    border-radius: 12px;
    padding: 0.15em 0.7em;
    font-size: 0.95em;
    font-weight: 500;
    letter-spacing: 0.02em;
    vertical-align: middle;
    border: 1px solid var(--border-color, #ccc);
    cursor: default;
}