/**
 * Neural Network Visualizer Styles
 * Visualization-specific styles only. Common styles are in visualizations.css.
 */

/* ============================================
   Neural Network CSS Custom Properties
   ============================================ */
:root {
    /* Node colors per layer type */
    --nn-input-node: #377eb8;
    --nn-hidden-node: #4daf4a;
    --nn-output-node: #e41a1c;

    /* Edge colors */
    --nn-edge-positive: rgba(55, 126, 184, 0.6);
    --nn-edge-negative: rgba(228, 26, 28, 0.6);
    --nn-edge-neutral: rgba(150, 150, 150, 0.3);

    /* Activation highlight */
    --nn-activation-glow: rgba(255, 193, 7, 0.6);

    /* Decision boundary gradient */
    --nn-boundary-class0: rgba(228, 26, 28, 0.35);
    --nn-boundary-class1: rgba(55, 126, 184, 0.35);
    --nn-boundary-line: rgba(0, 0, 0, 0.15);
}

[data-theme="gruvbox-dark"] {
    --nn-input-node: var(--gruvbox-blue);
    --nn-hidden-node: var(--gruvbox-green);
    --nn-output-node: var(--gruvbox-red);

    --nn-edge-positive: rgba(131, 165, 152, 0.6);
    --nn-edge-negative: rgba(251, 73, 52, 0.6);
    --nn-edge-neutral: rgba(168, 153, 132, 0.3);

    --nn-activation-glow: rgba(250, 189, 47, 0.6);

    --nn-boundary-class0: rgba(251, 73, 52, 0.35);
    --nn-boundary-class1: rgba(131, 165, 152, 0.35);
    --nn-boundary-line: rgba(235, 219, 178, 0.15);
}

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

#network-canvas {
    border: none;
    border-radius: 0;
    display: block;
    cursor: default;
}

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

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

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

.nn-option-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.nn-options-col .option-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nn-options-col .option-row > label:first-child {
    min-width: 65px;
    font-size: 12px;
    margin: 0;
}

.nn-options-col .option-row select {
    width: auto;
    min-width: 100px;
    font-size: 12px;
}

.nn-playback-col {
    width: 180px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    border-left: 1px solid var(--viz-border);
    padding-left: 20px;
}

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

.nn-playback-col .btn-toolbar .btn {
    padding: 4px 8px;
}

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

.nn-playback-col .speed-control input[type="range"] {
    flex: 1;
}

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

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

    .nn-playback-col {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--viz-border);
        padding-left: 0;
        padding-top: 15px;
    }
}