/**
 * Perceptron Learning Visualizer Styles
 * Visualization-specific styles only. Common styles are in visualizations.css.
 */

/* ============================================
   Perceptron CSS Custom Properties
   ============================================ */
:root {
    --perceptron-class-0: var(--viz-class-0);
    --perceptron-class-1: var(--viz-class-1);

    --perceptron-boundary: #111827;
    --perceptron-vector: #0f766e;
    --perceptron-margin: rgba(17, 24, 39, 0.25);

    --perceptron-misclassified: #f59e0b;
    --perceptron-highlight: #facc15;
}

[data-theme="gruvbox-dark"] {
    --perceptron-boundary: #ebdbb2;
    --perceptron-vector: #83a598;
    --perceptron-margin: rgba(235, 219, 178, 0.25);

    --perceptron-misclassified: #fabd2f;
    --perceptron-highlight: #fe8019;
}

/* ============================================
   Canvas Styling
   ============================================ */
#perceptron-canvas {
    border: none;
    border-radius: 0;
    display: block;
    cursor: default;
}

/* ============================================
   Controls Layout
   ============================================ */
.perceptron-controls-panel {
    display: flex;
    gap: 20px;
}

.perceptron-options-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.perceptron-option-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.range-value {
    min-width: 40px;
    text-align: right;
    font-family: var(--viz-mono-font);
    font-size: 11px;
}

.checkbox-label {
    font-size: 12px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.perceptron-playback-col {
    width: 180px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.perceptron-playback-col .btn-toolbar {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.speed-control {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--viz-text-muted);
}

.playback-status {
    text-align: center;
    font-size: 11px;
    color: var(--viz-text-muted);
}

/* ============================================
   Step List Highlight
   ============================================ */
.algo-step-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.algo-step-list li {
    padding: 6px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.algo-step-list li.active {
    background: var(--viz-active-bg);
    border: 1px solid var(--viz-active-border);
    color: var(--viz-text);
}

/* ============================================
   Sample Metrics
   ============================================ */
.sample-metrics {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--viz-border);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sample-label {
    font-weight: 600;
    margin-right: 4px;
}

/* ============================================
   Legend Overrides
   ============================================ */
.legend-line.boundary-line {
    background-color: var(--perceptron-boundary);
    height: 2px;
}

.legend-line.weight-vector {
    background-color: var(--perceptron-vector);
    height: 2px;
}

.legend-line.margin-line {
    background-color: var(--perceptron-margin);
    height: 2px;
}

.legend-color.misclassified {
    background-color: var(--perceptron-misclassified);
}

/* ============================================
   Responsive Tuning
   ============================================ */
@media (max-width: 991px) {
    .perceptron-controls-panel {
        flex-direction: column;
    }

    .perceptron-playback-col {
        width: 100%;
    }
}