/**
 * Common Demo Button Styles
 * Unified button styling system with customizable colors
 */

/* Button Color Variables - easily customizable */
:root {
    /* Primary Action Buttons */
    --btn-primary-bg: #28a745;
    --btn-primary-hover: #218838;
    --btn-primary-active: #1e7e34;
    --btn-primary-text: white;

    /* Secondary Action Buttons */
    --btn-secondary-bg: #6c757d;
    --btn-secondary-hover: #5a6268;
    --btn-secondary-active: #495057;
    --btn-secondary-text: white;

    /* Danger/Delete Buttons */
    --btn-danger-bg: #dc3545;
    --btn-danger-hover: #c82333;
    --btn-danger-active: #bd2130;
    --btn-danger-text: white;

    /* Success/Step Buttons */
    --btn-success-bg: #4caf50;
    --btn-success-hover: #45a049;
    --btn-success-active: #3d8b40;
    --btn-success-text: white;

    /* Warning Buttons */
    --btn-warning-bg: #ffc107;
    --btn-warning-hover: #e0a800;
    --btn-warning-active: #d39e00;
    --btn-warning-text: #212529;

    /* Info Buttons */
    --btn-info-bg: #17a2b8;
    --btn-info-hover: #138496;
    --btn-info-active: #117a8b;
    --btn-info-text: white;

    /* Disabled State */
    --btn-disabled-bg: #cccccc;
    --btn-disabled-text: #666666;

    /* Button Base Styles */
    --btn-border-radius: 0;
    --btn-font-weight: bold;
    --btn-transition: all 0.2s ease;
    --btn-border: none;
}

/* Base Button Style */
.btn,
button:not(.tab-btn):not(.network-node) {
    padding: 10px 16px;
    border: var(--btn-border);
    border-radius: var(--btn-border-radius);
    font-weight: var(--btn-font-weight);
    cursor: pointer;
    transition: var(--btn-transition);
    font-size: 14px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    line-height: 1.2;
    min-width: auto;
}

/* Button Variants */
.btn-primary, .solution-btn {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.btn-primary:hover, .solution-btn:hover {
    background: var(--btn-primary-hover);
}

.btn-primary:active, .solution-btn:active {
    background: var(--btn-primary-active);
}

.btn-secondary, .generate-data-btn {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
}

.btn-secondary:hover, .generate-data-btn:hover {
    background: var(--btn-secondary-hover);
}

.btn-secondary:active, .generate-data-btn:active {
    background: var(--btn-secondary-active);
}

.btn-danger, .clear-data-btn, .reset-btn {
    background: var(--btn-danger-bg);
    color: var(--btn-danger-text);
}

.btn-danger:hover, .clear-data-btn:hover, .reset-btn:hover {
    background: var(--btn-danger-hover);
}

.btn-danger:active, .clear-data-btn:active, .reset-btn:active {
    background: var(--btn-danger-active);
}

.btn-success, .step-btn {
    background: var(--btn-success-bg);
    color: var(--btn-success-text);
}

.btn-success:hover, .step-btn:hover:not(:disabled) {
    background: var(--btn-success-hover);
}

.btn-success:active, .step-btn:active {
    background: var(--btn-success-active);
}

.btn-warning {
    background: var(--btn-warning-bg);
    color: var(--btn-warning-text);
}

.btn-warning:hover {
    background: var(--btn-warning-hover);
}

.btn-warning:active {
    background: var(--btn-warning-active);
}

.btn-info {
    background: var(--btn-info-bg);
    color: var(--btn-info-text);
}

.btn-info:hover {
    background: var(--btn-info-hover);
}

.btn-info:active {
    background: var(--btn-info-active);
}

/* Disabled State */
.btn:disabled,
.step-btn:disabled,
button:disabled {
    background: var(--btn-disabled-bg) !important;
    color: var(--btn-disabled-text) !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

/* Button Sizes */
.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 16px;
}

.btn-xl {
    padding: 16px 32px;
    font-size: 18px;
}

/* Button Groups */
.btn-group {
    display: flex;
    gap: 10px;
}

.btn-group .btn {
    flex: 1;
}

/* Full Width Buttons */
.btn-block {
    width: 100%;
    display: block;
}

/* Special Button Containers */
.plot-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.plot-buttons .btn {
    flex: 1;
}

.step-controls {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* Dataset Buttons - Special styling for themed buttons */
.dataset-btn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--btn-border-radius);
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: var(--btn-transition);
    color: white;
}

.dataset-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Themed dataset button variants */
.structures-btn {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.structures-btn:hover {
    background: linear-gradient(135deg, #c0392b, #a93226);
}

.geotech-btn {
    background: linear-gradient(135deg, #8e44ad, #7d3c98);
}

.geotech-btn:hover {
    background: linear-gradient(135deg, #7d3c98, #6c3483);
}

.transport-btn {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.transport-btn:hover {
    background: linear-gradient(135deg, #2980b9, #2471a3);
}

.environment-btn {
    background: linear-gradient(135deg, #27ae60, #229954);
}

.environment-btn:hover {
    background: linear-gradient(135deg, #229954, #1e8449);
}

/* Neural Network specific buttons */
.add-layer-btn, .remove-layer-btn {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: var(--btn-border-radius);
    border: 1px solid #ddd;
    cursor: pointer;
    background: white;
}

.add-layer-btn {
    background: var(--btn-success-bg);
    color: var(--btn-success-text);
    border-color: var(--btn-success-bg);
}

.add-layer-btn:disabled {
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-text);
    border-color: var(--btn-disabled-bg);
    cursor: not-allowed;
}

.remove-layer-btn {
    background: var(--btn-danger-bg);
    color: var(--btn-danger-text);
    border-color: var(--btn-danger-bg);
}

.remove-layer-btn:disabled {
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-text);
    border-color: var(--btn-disabled-bg);
    cursor: not-allowed;
}

/* Backpropagation specific buttons */
.step-button {
    padding: 8px 16px;
    background: var(--btn-success-bg);
    color: var(--btn-success-text);
    border: none;
    border-radius: var(--btn-border-radius);
    font-weight: bold;
    cursor: pointer;
    transition: var(--btn-transition);
}

.step-button:hover {
    background: var(--btn-success-hover);
}

.step-button:disabled {
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-text);
    cursor: not-allowed;
}

.reset-button {
    padding: 8px 16px;
    background: var(--btn-danger-bg);
    color: var(--btn-danger-text);
    border: none;
    border-radius: var(--btn-border-radius);
    font-weight: bold;
    cursor: pointer;
    transition: var(--btn-transition);
}

.reset-button:hover {
    background: var(--btn-danger-hover);
}

/* Demo-specific color overrides can be done by redefining CSS variables */
/*
Example: To customize colors for a specific demo, add this to the demo's style.css:

:root {
    --btn-primary-bg: #your-custom-color;
    --btn-primary-hover: #your-custom-hover-color;
    --btn-primary-active: #your-custom-active-color;
}
*/

/**
 * Common Demo Layout Components
 * Shared layout patterns used across multiple demos
 */

/* Control Groups */
.control-group {
    margin-bottom: 15px;
}

.control-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.control-row label {
    min-width: 150px;
    font-weight: 500;
}

.control-row input[type="number"] {
    width: 100px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 0;
}

/* View Panels */
.view-panel {
    background: white;
    border: 2px solid #ddd;
    border-radius: 0;
    padding: 15px;
    min-height: 450px;
}

.view-title {
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Readout Panels */
.readout-panel {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0;
    padding: 15px;
    font-family: monospace;
}

.readout-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 2px 0;
}

.readout-label {
    font-weight: bold;
    color: #495057;
}

.readout-value {
    color: #007bff;
    font-weight: bold;
}

/* Caption Text */
.caption-text {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0;
    padding: 12px;
    margin: 15px 0;
    font-style: italic;
    color: #6c757d;
    line-height: 1.4;
    min-height: 20px;
}

/* Dataset Info Box */
.dataset-info-box {
    margin-top: 15px;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0;
    box-sizing: border-box;
    display: none;
    animation: slideDown 0.3s ease-out;
}

.dataset-info-box.show {
    display: block;
}

.dataset-info-title {
    font-weight: bold;
    color: #495057;
    margin-bottom: 8px;
}

.dataset-info-description {
    color: #6c757d;
    margin-bottom: 10px;
    line-height: 1.4;
}

.dataset-info-variables {
    font-family: monospace;
    font-size: 13px;
    color: #495057;
}

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

/* Controls Bottom Grid */
.controls-bottom {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0;
    padding: 20px;
    margin-top: 20px;
}

.controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 768px) {
    .controls-grid {
        grid-template-columns: 1fr;
    }
}

/* MetricLabel Labels */
.equation-label {
    position: absolute;
    bottom: 4px;
    right: 8px;
    font-size: 12px;
    opacity: 0.7;
    font-style: italic;
    text-align: right;
}

/* Dataset Buttons Section */
.dataset-buttons-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

.dataset-section-label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: #495057;
}

.dataset-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (max-width: 600px) {
    .dataset-buttons {
        grid-template-columns: 1fr;
    }
}


/* Base MetricLabel Box Styling */
.metriclabel {
    background: #f0f8ff;
    padding: 0 15px 15px 15px;
    border-radius: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #2c3e50;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid #d0e0f0;
    word-break: break-all;
    overflow-wrap: break-word;
    line-height: 1.2;
    position: relative;
    margin-top: 15px;
    margin-bottom: 10px;
    height: 60px;
    box-sizing: border-box;
    padding-top: 10px;
}

/* Theory Section - Full Width Box Below Demo */
.theory-section {
    border: 2px solid #ddd !important;
    border-radius: 0 !important;
    background: white !important;
    margin-top: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.theory-section h3 {
    margin: 0 !important;
    padding: 15px 20px !important;
    background: #f8f9fa !important;
    color: #2c3e50 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #ddd !important;
}

.theory-section p {
    margin: 0 !important;
    padding: 20px !important;
    line-height: 1.8 !important;
    color: #333 !important;
}

.theory-section p br {
    margin-bottom: 8px;
}

.theory-section strong {
    color: #2c3e50;
    font-weight: 600;
}

.theory-section em {
    color: #495057;
    font-style: normal;
    font-weight: 500;
}

/**
 * ========================================
 * METRIC BOX COLOR VARIANTS
 * ========================================
 * Performance-based color schemes for metric displays
 * Used with MetricLabel component or standalone .metriclabel elements
 */

/* Performance-based variants (for R², error metrics) */

/* Poor Performance (Red) - R² < 0.3, High Error */
.metric-poor,
.r2-poor {
    background: #ffebee !important;
    color: #d32f2f !important;
    border: 1px solid #ffcdd2 !important;
    border-left: 4px solid #f44336 !important;
}

/* Moderate Performance (Orange/Yellow) - R² 0.3-0.7, Medium Error */
.metric-moderate,
.r2-moderate {
    background: #fff8e1 !important;
    color: #f57c00 !important;
    border: 1px solid #ffe0b2 !important;
    border-left: 4px solid #ff9800 !important;
}

/* Good Performance (Green) - R² > 0.7, Low Error */
.metric-good,
.r2-good {
    background: #e8f5e8 !important;
    color: #388e3c !important;
    border: 1px solid #c8e6c9 !important;
    border-left: 4px solid #4caf50 !important;
}

/* Dataset split variants */

/* Training Set (Blue) */
.metric-train {
    background: #e3f2fd !important;
    color: #1976d2 !important;
    border: 1px solid #bbdefb !important;
    border-left: 4px solid #2196f3 !important;
}

/* Test Set (Orange) */
.metric-test {
    background: #fff3e0 !important;
    color: #f57c00 !important;
    border: 1px solid #ffe0b2 !important;
    border-left: 4px solid #ff9800 !important;
}

/* Metric type variants */

/* MSE Default (Purple) */
.metric-mse {
    background: #f3e5f5 !important;
    color: #7b1fa2 !important;
    border: 1px solid #e1bee7 !important;
    border-left: 4px solid #9c27b0 !important;
}

/* MAE Default (Green) */
.metric-mae {
    background: #e8f5e8 !important;
    color: #2e7d32 !important;
    border: 1px solid #c8e6c9 !important;
    border-left: 4px solid #4caf50 !important;
}

/* R² Default (Blue) */
.metric-r2 {
    background: #e3f2fd !important;
    color: #1976d2 !important;
    border: 1px solid #bbdefb !important;
    border-left: 4px solid #2196f3 !important;
}

/**
 * ========================================
 * METRICLABEL COLOR THEMES
 * ========================================
 * Reusable color palette for MetricLabel components
 * Use with theme parameter: new MetricLabel('id', 'Name', { theme: 'blue' })
 */

/* Blue theme - commonly used for training data, R², general metrics */
.metriclabel-blue {
    background: #e3f2fd;
    color: #1976d2;
    border: 1px solid #bbdefb;
    border-left: 4px solid #2196f3;
}

/* Orange theme - commonly used for test data, warnings */
.metriclabel-orange {
    background: #fff3e0;
    color: #f57c00;
    border: 1px solid #ffe0b2;
    border-left: 4px solid #ff9800;
}

/* Green theme - commonly used for MAE, success metrics */
.metriclabel-green {
    background: #e8f5e8;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
    border-left: 4px solid #4caf50;
}

/* Purple theme - commonly used for MSE, loss functions */
.metriclabel-purple {
    background: #f3e5f5;
    color: #7b1fa2;
    border: 1px solid #e1bee7;
    border-left: 4px solid #9c27b0;
}

/* Red theme - commonly used for errors, poor performance */
.metriclabel-red {
    background: #ffebee;
    color: #d32f2f;
    border: 1px solid #ffcdd2;
    border-left: 4px solid #f44336;
}

/* Teal theme - alternative color for variety */
.metriclabel-teal {
    background: #e0f2f1;
    color: #00796b;
    border: 1px solid #b2dfdb;
    border-left: 4px solid #009688;
}

/* Indigo theme - alternative color for variety */
.metriclabel-indigo {
    background: #e8eaf6;
    color: #3f51b5;
    border: 1px solid #c5cae9;
    border-left: 4px solid #5c6bc0;
}

/**
 * ========================================
 * DEMO LAYOUT PATTERNS
 * ========================================
 * Standardized layout variants for demo-area container
 * Eliminates need for !important overrides in local CSS
 */

/* Default: 2/3 Plot + 1/3 Controls (horizontal) - defined in main styles.css */
/* This is the base layout, demos inherit it automatically */

/* Layout Variant 1: Stacked (vertical, full width) */
.demo-area.layout-stacked {
    display: block !important;
}

.demo-area.layout-stacked .plot-container,
.demo-area.layout-stacked .controls {
    width: 100%;
    margin-bottom: 20px;
}

/* Layout Variant 2: Equal Split (50/50) */
.demo-area.layout-equal {
    display: flex;
    gap: 20px;
}

.demo-area.layout-equal .plot-container,
.demo-area.layout-equal .controls {
    flex: 1;
}

/* Layout Variant 3: Grid (2 columns) */
.demo-area.layout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Layout Variant 4: Gradient Descent Layout (Data view | Cost+Delta stacked) */
.demo-area.layout-gd {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Responsive: All layouts stack on mobile */
@media (max-width: 768px) {
    .demo-area,
    .demo-area.layout-equal,
    .demo-area.layout-grid,
    .demo-area.layout-gd {
        display: block !important;
    }

    .demo-area .plot-container,
    .demo-area .controls {
        width: 100%;
        margin-bottom: 20px;
    }
}

/**
 * ========================================
 * SELECTOR BOX PATTERN
 * ========================================
 * Interactive toggle boxes for enabling/disabling options (features, boundaries, datasets, etc.)
 * Used across multiple demos (bias-variance, multi-linear-regression, 2d-classification, etc.)
 */

/* Grid container for selector boxes */
.selector-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 8px;
}

/* Base selector box styling */
.selectorbox {
    padding: 12px 16px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    border: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0.4;
    filter: grayscale(50%);
}

/* Icon from data-icon attribute */
.selectorbox[data-icon]::before {
    content: attr(data-icon);
    font-size: 28px;
    line-height: 1;
    display: block;
}

/* Label from data-label attribute */
.selectorbox[data-label]::after {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 600;
    display: block;
}

/* Hover state */
.selectorbox:hover {
    transform: translateY(-2px);
    opacity: 0.6;
}

/* Active state */
.selectorbox.active {
    opacity: 1;
    filter: grayscale(0%);
}

/* Color Variants - Use data-color attribute for semantic coloring */

/* Red variant - typically for error/residual visualizations */
.selectorbox[data-color="red"] {

    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
}

.selectorbox[data-color="red"].active {

    border-color: #dc2626;
}

.selectorbox[data-color="red"].active:hover {

    background: linear-gradient(135deg, #b91c1c, #991b1b);
}

/* Blue variant - typically for primary features */
.selectorbox[data-color="blue"] {

    background: linear-gradient(135deg, #5a9fd4, #4a89c4);
    color: white;
}

.selectorbox[data-color="blue"].active {

    border-color: #5a9fd4;
}

.selectorbox[data-color="blue"].active:hover {

    background: linear-gradient(135deg, #4a89c4, #3a79b4);
}

/* Purple variant - typically for secondary features */
.selectorbox[data-color="purple"] {

    background: linear-gradient(135deg, #a87ab8, #9a6aa8);
    color: white;
}

.selectorbox[data-color="purple"].active {

    border-color: #a87ab8;
}

.selectorbox[data-color="purple"].active:hover {

    background: linear-gradient(135deg, #9a6aa8, #8a5a98);
}

/* Orange variant - typically for test data or warnings */
.selectorbox[data-color="orange"] {

    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.selectorbox[data-color="orange"].active {

    border-color: #f59e0b;
}

.selectorbox[data-color="orange"].active:hover {

    background: linear-gradient(135deg, #d97706, #b45309);
}

/* Green variant - typically for success or positive features */
.selectorbox[data-color="green"] {
    background: linear-gradient(135deg, #059669, #047857);
    color: white;
}

.selectorbox[data-color="green"].active {
    border-color: #059669;
}

.selectorbox[data-color="green"].active:hover {
    background: linear-gradient(135deg, #047857, #065f46);
}

/* Teal variant - typically for tertiary features or positive indicators */
.selectorbox[data-color="teal"] {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: white;
}

.selectorbox[data-color="teal"].active {
    border-color: #14b8a6;
}

.selectorbox[data-color="teal"].active:hover {
    background: linear-gradient(135deg, #0d9488, #0f766e);
}

/* Cyan variant - typically for quaternary features or information */
.selectorbox[data-color="cyan"] {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
}

.selectorbox[data-color="cyan"].active {
    border-color: #06b6d4;
}

.selectorbox[data-color="cyan"].active:hover {
    background: linear-gradient(135deg, #0891b2, #0e7490);
}

/**
 * ========================================
 * VISUALIZATION PANEL PATTERN
 * ========================================
 * Expandable panel for visualization options (checkboxes, toggles)
 */

/* Visualization options panel */
.visualization-panel {
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0;
}

/* Panel title */
.panel-title {
    font-weight: bold;
    font-size: 14px;
    color: #333;
    margin-bottom: 12px;
    text-align: center;
}

/* Checkbox grid layout (vertical stack) */
.checkbox-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Individual checkbox label */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

/* Checkbox input styling */
.checkbox-input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/**
 * ========================================
 * HORIZONTAL SCROLLING TABLE PATTERN
 * ========================================
 * Used for optimization history, coefficients tables, etc.
 * Provides horizontal scrolling with sticky header column
 */

/* Container for scrolling table */
.horizontal-scroll-container {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 0;
    padding: 8px;
    margin-top: 20px;
}

/* Title above table */
.horizontal-scroll-title {
    font-weight: bold;
    font-size: 12px;
    color: #333;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Scrollable area */
.horizontal-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    max-height: 200px;
}

/* Custom scrollbar for horizontal scroll */
.horizontal-scroll::-webkit-scrollbar {
    height: 8px;
}

.horizontal-scroll::-webkit-scrollbar-track {
    background: #e9ecef;
}

.horizontal-scroll::-webkit-scrollbar-thumb {
    background: #6c757d;
    border-radius: 4px;
}

.horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background: #495057;
}

/* Table styling */
.horizontal-scroll-table {
    width: auto;
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
}

/* Sticky header column */
.horizontal-scroll-table tbody th {
    background: #343a40;
    color: white;
    padding: 4px 8px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    border: 1px solid #23272b;
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 80px;
}

/* Table data cells */
.horizontal-scroll-table tbody td {
    padding: 3px 8px;
    text-align: center;
    border: 1px solid #dee2e6;
    background: white;
    font-family: monospace;
    font-size: 12px;
    min-width: 70px;
}

/* Current/highlighted cell */
.horizontal-scroll-table tbody td.current-iteration {
    background: #fff3cd;
    border: 2px solid #ffc107;
    font-weight: bold;
}

/* Row hover effect */
.horizontal-scroll-table tbody tr:hover td {
    background: #e9ecef;
}

.horizontal-scroll-table tbody tr:hover td.current-iteration {
    background: #ffe69c;
}

/* Alternating row colors */
.horizontal-scroll-table tbody tr:nth-child(odd) td {
    background: #f8f9fa;
}

.horizontal-scroll-table tbody tr:nth-child(odd) td.current-iteration {
    background: #fff3cd;
}

/* ========================================================================
   METRIC TRACKER PANELS

   Usage: Display metrics with labels, values, progress bars, and formulas.

   Structure:
   <div class="metric_tracker_grid">
       <div class="metric_tracker_box">
           <div class="metric_tracker_label">Label Text</div>
           <div class="metric_tracker_value">85.2%</div>
           <div class="metric_tracker_bar">
               <div class="metric_tracker_bar_fill" style="width: 85.2%;"></div>
           </div>
           <div class="metric_tracker_formula">Formula</div>
       </div>
   </div>

   Note: Add demo-specific color classes to .metric_tracker_value and
         .metric_tracker_bar_fill for custom styling
   ======================================================================== */

.metric_tracker_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.metric_tracker_box {
    border: 2px solid #ddd;
    border-radius: 6px;
    padding: 12px;
    background: white;
    transition: all 0.3s ease;
}

.metric_tracker_box:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.metric_tracker_label {
    font-size: 11px;
    font-weight: 600;
    color: #7f8c8d;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.metric_tracker_value {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.metric_tracker_bar {
    height: 8px;
    background: #ecf0f1;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.metric_tracker_bar_fill {
    height: 100%;
    transition: width 0.3s ease, background-color 0.3s ease;
    border-radius: 4px;
}

.metric_tracker_formula {
    font-size: 10px;
    color: #95a5a6;
    font-family: monospace;
}

/**
 * ========================================
 * FANCYBOX PATTERN
 * ========================================
 * Interactive selection boxes with rich content (SVG graphics, emoji icons, labels, info text)
 * Unified replacement for classifier-box, class-box, and dataset-box patterns
 *
 * Usage Examples:
 *
 * 1. With SVG graphic and data-label:
 * <div class="fancybox active" data-type="linear" data-color="blue" data-label="Linear">
 *     <svg class="fancybox-graphic" viewBox="0 0 60 60" width="45" height="45">
 *         <line x1="10" y1="50" x2="50" y2="10" stroke="currentColor" stroke-width="3"/>
 *     </svg>
 * </div>
 *
 * 2. With emoji icon via data-icon and data-label:
 * <div class="fancybox" data-type="balanced" data-color="blue" data-icon="✨" data-label="Balanced"></div>
 *
 * 3. With icon, label, and info:
 * <div class="fancybox" data-type="melanoma" data-color="purple" data-icon="🔬" data-label="Melanoma" data-info="99.5/0.5"></div>
 *
 * Attributes:
 * - data-type: Identifier for the box (e.g., "linear", "0", "balanced")
 * - data-color: Color theme (blue, orange, purple, red, teal, green)
 * - data-icon: Optional emoji or text icon (displayed via ::before)
 * - data-label: Label text (displayed via ::after)
 * - data-info: Optional info text (appended to label with line break)
 *
 * States:
 * - .fancybox (default): Subtle, desaturated (opacity 0.3, grayscale 80%)
 * - .fancybox:hover: Enhanced visibility (opacity 0.5)
 * - .fancybox.active: Vibrant, fully saturated (opacity 1, no grayscale)
 */

/* Container for fancybox elements */
.fancybox-container {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
}

/* Base fancybox styling */
.fancybox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 90px;
    padding: 10px;
    border: 3px solid #bdc3c7;
    border-radius: 8px;
    background: #ecf0f1;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.3;
    filter: grayscale(80%);
}

/* Hover state */
.fancybox:hover {
    border-color: #95a5a6;
    background: #dfe6e9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    opacity: 0.5;
}

/* Active state */
.fancybox.active {
    opacity: 1;
    filter: grayscale(0%);
}

/* Graphic element (SVG or other visual content) */
.fancybox-graphic {
    color: #7f8c8d;
}

/* Icon from data-icon attribute (emoji or text) - displayed first */
.fancybox[data-icon]::before {
    content: attr(data-icon);
    font-size: 28px;
    line-height: 1;
    display: block;
}

/* Label from data-label attribute - displayed second */
.fancybox[data-label]::after {
    content: attr(data-label);
    font-size: 13px;
    font-weight: 600;
    color: #34495e;
    text-align: center;
    display: block;
}

/* Label with info - combines both in ::after with line break */
.fancybox[data-label][data-info]::after {
    content: attr(data-label) "\A" attr(data-info);
    white-space: pre-line;
    line-height: 1.3;
}

/* When info is present, adjust styling to show label prominently and info subtly */
/* Note: CSS limitations mean we can't style label/info differently within content */
/* The info text (second line) will have the same color but the line break provides visual separation */

/* Alternate approach: When using separate info element (child span) */
.fancybox-info {
    font-size: 11px;
    color: #7f8c8d;
    text-align: center;
    margin-top: 2px;
}

/**
 * Color Variants - Use data-color attribute for theming
 */

/* Blue theme - for primary options, training data */
.fancybox[data-color="blue"]:not(.active) {
    background: #f7fbfd;
    border-color: #e3eef5;
}

.fancybox[data-color="blue"]:not(.active) .fancybox-graphic {
    color: #b8d7eb;
}

.fancybox[data-color="blue"]:not(.active)::after {
    color: #b8d7eb;
}

.fancybox[data-color="blue"].active {
    border-color: #3498db;
    background: #ebf5fb;
}

.fancybox[data-color="blue"].active .fancybox-graphic {
    color: #2874a6;
}

.fancybox[data-color="blue"].active::after {
    color: #1a5490;
}

/* Orange theme - for secondary options, test data, warnings */
.fancybox[data-color="orange"]:not(.active) {
    background: #fefdfb;
    border-color: #faf6ed;
}

.fancybox[data-color="orange"]:not(.active) .fancybox-graphic {
    color: #f8d396;
}

.fancybox[data-color="orange"]:not(.active)::after {
    color: #f8d396;
}

.fancybox[data-color="orange"].active {
    border-color: #e67e22;
    background: #fef5e7;
}

.fancybox[data-color="orange"].active .fancybox-graphic {
    color: #ca6f1e;
}

.fancybox[data-color="orange"].active::after {
    color: #935116;
}

/* Purple theme - for tertiary options, alternative features */
.fancybox[data-color="purple"]:not(.active) {
    background: #fbf9fc;
    border-color: #f0eaf3;
}

.fancybox[data-color="purple"]:not(.active) .fancybox-graphic {
    color: #d5c1dd;
}

.fancybox[data-color="purple"]:not(.active)::after {
    color: #d5c1dd;
}

.fancybox[data-color="purple"].active {
    border-color: #9b59b6;
    background: #f4ecf7;
}

.fancybox[data-color="purple"].active .fancybox-graphic {
    color: #7d3c98;
}

.fancybox[data-color="purple"].active::after {
    color: #5b2c6f;
}

/* Red theme - for class 0, negative cases, errors */
.fancybox[data-color="red"]:not(.active) {
    background: #fff5f5;
    border-color: #ffe0e0;
}

.fancybox[data-color="red"]:not(.active) .fancybox-graphic {
    color: #ffcccc;
}

.fancybox[data-color="red"]:not(.active)::after {
    color: #ffcccc;
}

.fancybox[data-color="red"].active {
    border-color: #d63447;
    background: #ffe5e5;
}

.fancybox[data-color="red"].active .fancybox-graphic {
    color: #ff6b6b;
}

.fancybox[data-color="red"].active::after {
    color: #d63447;
}

/* Teal theme - for class 1, positive cases, success */
.fancybox[data-color="teal"]:not(.active) {
    background: #f5fffe;
    border-color: #d9f5f2;
}

.fancybox[data-color="teal"]:not(.active) .fancybox-graphic {
    color: #b8e6e1;
}

.fancybox[data-color="teal"]:not(.active)::after {
    color: #b8e6e1;
}

.fancybox[data-color="teal"].active {
    border-color: #26a69a;
    background: #e0f7f5;
}

.fancybox[data-color="teal"].active .fancybox-graphic {
    color: #4ecdc4;
}

.fancybox[data-color="teal"].active::after {
    color: #26a69a;
}

/* Green theme - for success states, positive features */
.fancybox[data-color="green"]:not(.active) {
    background: #f7fdf9;
    border-color: #e5f5ec;
}

.fancybox[data-color="green"]:not(.active) .fancybox-graphic {
    color: #c8e6d5;
}

.fancybox[data-color="green"]:not(.active)::after {
    color: #c8e6d5;
}

.fancybox[data-color="green"].active {
    border-color: #27ae60;
    background: #e8f8f0;
}

.fancybox[data-color="green"].active .fancybox-graphic {
    color: #229954;
}

.fancybox[data-color="green"].active::after {
    color: #1e8449;
}

/* Panel wrapper for fancybox containers */
.fancybox-panel {
    border: 2px solid #ddd;
    border-radius: 0;
    background: white;
    padding: 12px 16px;
}

.fancybox-panel h4 {
    margin: 0 0 12px 0;
    color: #2c3e50;
    font-size: 14px;
    font-weight: 600;
}

/* ========================================================================
   InfoTab Navigation Styles
   ======================================================================== */

/**
 * Reusable Info Tab Control Styles
 * For use across multiple demos
 */

.infotab {
    border: 1px solid #ddd;
    border-radius: 0;
    background: white;
    margin-bottom: 20px;
}

.infotab-header {
    display: flex;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
    border-radius: 0;
    position: relative;
}

.infotab-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: 0;
    position: relative;
}

.infotab-btn:hover {
    background: #e9ecef;
    color: #333;
}

.infotab-btn.active {
    background: white;
    color: #333;
    font-weight: 600;
}

.infotab-btn::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #007bff;
    transition: left 0.25s ease, width 0.25s ease, background-color 0.25s ease;
}

.infotab-btn:hover::after {
    background: #0056b3;
}

.infotab-btn:hover:not(.active)::after {
    left: 20%;
    width: 60%;
}

.infotab-btn.active::after {
    left: 0;
    width: 100%;
}

.infotab-btn:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

.infotab-content {
    padding: 20px;
}

.infotab-panel {
    display: none;
    line-height: 1.5;
    opacity: 0;
}

.infotab-panel.active {
    display: block;
    opacity: 1;
    animation: infotab-panel-fade 0.25s ease;
}

@keyframes infotab-panel-fade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .infotab-btn:hover,
    .infotab-btn,
    .infotab-btn::after {
        transition: none;
    }

    .infotab-panel.active {
        animation: none;
    }
}

/**
 * ========================================
 * Utility Helpers
 * ========================================
 * Shared helpers to replace repeated inline styles
 */

.is-hidden {
    display: none;
}

.demo-credits {
    font-style: italic;
    text-align: right;
    margin-top: 10px;
    color: #666666;
    font-size: 14px;
}

.demo-credits a {
    color: inherit;
    text-decoration: underline;
}

.control-label-strong {
    display: block;
    font-weight: 700;
    margin-bottom: 10px;
}

.section-heading {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 16px;
}

.plot-stage {
    position: relative;
}

.plot-stage--w-full {
    width: 100%;
}

.plot-stage--w-600 {
    width: 600px;
}

.plot-stage--w-680 {
    width: 680px;
}

.plot-stage--h-280 {
    height: 280px;
}

.plot-stage--h-300 {
    height: 300px;
}

.plot-stage--h-400 {
    height: 400px;
}

.plot-stage--h-450 {
    height: 450px;
}

.plot-stage > canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.plot-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: transparent;
    z-index: 1;
}

.plot-overlay--hidden {
    visibility: hidden;
}

.text-green {
    color: #16a34a;
}

.text-red {
    color: #dc2626;
}

.text-gray {
    color: #6b7280;
}

.text-salmon {
    color: #ff6b6b;
}

.text-teal {
    color: #4ecdc4;
}

.text-magenta {
    color: #9b59b6;
}