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

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

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

    /* Gradient flow colors (warm = large gradient, cool = small) */
    --bp-gradient-warm: #ff6b35;
    --bp-gradient-cool: #4a90d9;
    --bp-gradient-flow: #ff9800;

    /* Forward / backward pass highlighting */
    --bp-forward-highlight: rgba(76, 175, 80, 0.5);
    --bp-backward-highlight: rgba(255, 152, 0, 0.5);

    /* Loss curve */
    --bp-loss-line: #e41a1c;
    --bp-loss-fill: rgba(228, 26, 28, 0.1);
    --bp-loss-grid: rgba(0, 0, 0, 0.08);

    /* Node value text */
    --bp-node-text: #ffffff;
}

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

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

    --bp-gradient-warm: var(--gruvbox-orange);
    --bp-gradient-cool: var(--gruvbox-blue);
    --bp-gradient-flow: var(--gruvbox-orange);

    --bp-forward-highlight: rgba(184, 187, 38, 0.5);
    --bp-backward-highlight: rgba(254, 128, 25, 0.5);

    --bp-loss-line: var(--gruvbox-red);
    --bp-loss-fill: rgba(251, 73, 52, 0.1);
    --bp-loss-grid: rgba(235, 219, 178, 0.08);

    --bp-node-text: var(--gruvbox-fg);
}

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

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

/* ============================================
   Legend Overrides
   ============================================ */
.legend-color.bp-input-node {
    background-color: var(--bp-input-node);
}

.legend-color.bp-hidden-node {
    background-color: var(--bp-hidden-node);
}

.legend-color.bp-output-node {
    background-color: var(--bp-output-node);
}

.legend-line.bp-gradient-flow {
    background-color: var(--bp-gradient-flow);
    height: 3px;
    width: 24px;
}

#pass-badge {
    font-size: 11px;
    padding: 3px 10px;
    transition: all 0.3s ease;
}

#pass-badge.forward-active {
    background: var(--viz-info-bg);
    border-color: var(--viz-info-border);
    color: var(--viz-info-border);
}

#pass-badge.backward-active {
    background: var(--viz-warning-bg);
    border-color: var(--viz-warning-border);
    color: var(--viz-warning-border);
}

#pass-badge.complete {
    background: var(--viz-success-bg);
    border-color: var(--viz-success-border);
    color: var(--viz-success-border);
}

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

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

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

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

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

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

.bp-options-col .option-row input[type="range"] {
    flex: 1;
    min-width: 80px;
}

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

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

.bp-playback-col .btn-toolbar .btn {
    padding: 4px 10px;
    font-size: 12px;
}

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

/* ============================================
   Computation Log Overrides
   ============================================ */
#computation-log {
    max-height: 250px;
    overflow-y: auto;
}

#computation-log .log-entry.log-forward {
    background-color: var(--viz-info-bg);
    color: var(--viz-info-border);
}

#computation-log .log-entry.log-backward {
    background-color: var(--viz-warning-bg);
    color: var(--viz-warning-border);
}

#computation-log .log-entry.log-update {
    background-color: var(--viz-success-bg);
    color: var(--viz-success-border);
}

[data-theme="gruvbox-dark"] #computation-log .log-entry.log-forward { color: var(--gruvbox-blue); }
[data-theme="gruvbox-dark"] #computation-log .log-entry.log-backward { color: var(--gruvbox-orange); }
[data-theme="gruvbox-dark"] #computation-log .log-entry.log-update { color: var(--gruvbox-green); }

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

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