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

/* ============================================
   Custom Properties
   ============================================ */
:root {
    /* Norm type accent colors */
    --norm-bn-color: #e41a1c;
    --norm-ln-color: #377eb8;
    --norm-in-color: #4daf4a;
    --norm-gn-color: #984ea3;
    --norm-rms-color: #ff7f00;

    /* Diverging colormap (blue-white-red) */
    --norm-neg-color: #2166ac;
    --norm-zero-color: #f7f7f7;
    --norm-pos-color: #b2182b;

    /* Group highlight */
    --norm-highlight-color: rgba(255, 215, 0, 0.6);
    --norm-highlight-border: #ffd700;
    --norm-locked-border: #ff8c00;

    /* Axis label colors */
    --norm-batch-color: #e41a1c;
    --norm-channel-color: #377eb8;
    --norm-spatial-color: #4daf4a;

    /* Distribution bars */
    --norm-raw-bar: rgba(100, 100, 100, 0.5);
    --norm-normed-bar: rgba(59, 130, 246, 0.6);
}

[data-theme="gruvbox-dark"] {
    --norm-bn-color: var(--gruvbox-red);
    --norm-ln-color: var(--gruvbox-blue);
    --norm-in-color: var(--gruvbox-green);
    --norm-gn-color: var(--gruvbox-purple);
    --norm-rms-color: var(--gruvbox-orange);

    --norm-neg-color: #83a598;
    --norm-zero-color: #504945;
    --norm-pos-color: #fb4934;

    --norm-highlight-color: rgba(250, 189, 47, 0.5);
    --norm-highlight-border: var(--gruvbox-yellow);
    --norm-locked-border: var(--gruvbox-orange);

    --norm-batch-color: var(--gruvbox-red);
    --norm-channel-color: var(--gruvbox-blue);
    --norm-spatial-color: var(--gruvbox-green);

    --norm-raw-bar: rgba(168, 153, 132, 0.5);
    --norm-normed-bar: rgba(131, 165, 152, 0.6);
}

/* ============================================
   Norm Type Button Styling
   ============================================ */
.norm-type-toggle .btn {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
}

.norm-type-toggle .btn.active[data-norm="batch"] {
    background: var(--norm-bn-color);
    border-color: var(--norm-bn-color);
    color: #fff;
}

.norm-type-toggle .btn.active[data-norm="layer"] {
    background: var(--norm-ln-color);
    border-color: var(--norm-ln-color);
    color: #fff;
}

.norm-type-toggle .btn.active[data-norm="instance"] {
    background: var(--norm-in-color);
    border-color: var(--norm-in-color);
    color: #fff;
}

.norm-type-toggle .btn.active[data-norm="group"] {
    background: var(--norm-gn-color);
    border-color: var(--norm-gn-color);
    color: #fff;
}

.norm-type-toggle .btn.active[data-norm="rms"] {
    background: var(--norm-rms-color);
    border-color: var(--norm-rms-color);
    color: #fff;
}

/* ============================================
   Shape Badge
   ============================================ */
.norm-shape-badge {
    font-family: var(--viz-mono-font);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--viz-hover-bg);
    border: 1px solid var(--viz-border);
    color: var(--viz-text-muted);
}

.norm-shape-badge .norm-dim-n { color: var(--norm-batch-color); }
.norm-shape-badge .norm-dim-c { color: var(--norm-channel-color); }
.norm-shape-badge .norm-dim-s { color: var(--norm-spatial-color); }

/* ============================================
   Tensor Canvas
   ============================================ */
#norm-tensor-canvas {
    display: block;
    width: 100%;
    cursor: crosshair;
    background: var(--viz-canvas-bg);
    border-radius: 4px;
}

/* ============================================
   Distribution Canvas
   ============================================ */
#norm-dist-canvas {
    display: block;
    width: 100%;
    background: var(--viz-canvas-bg);
    border-radius: 4px;
}

.norm-dist-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--viz-text-muted);
    margin-bottom: 4px;
}

/* ============================================
   Controls Tab
   ============================================ */
.norm-controls-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.norm-controls-panel .option-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.norm-controls-panel .option-row label {
    font-size: 12px;
    margin: 0;
    white-space: nowrap;
    min-width: 100px;
}

.norm-controls-panel .option-row input[type="range"] {
    flex: 1;
    max-width: 140px;
}

.norm-actions-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ============================================
   Math Tab
   ============================================ */
.norm-calc-panel {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--viz-hover-bg);
    border-radius: 6px;
    border: 1px solid var(--viz-border);
    font-family: var(--viz-mono-font);
    font-size: 12px;
    line-height: 1.6;
    color: var(--viz-text);
}

.norm-calc-row {
    display: flex;
    justify-content: space-between;
    padding: 1px 0;
}

.norm-calc-row.norm-calc-result {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 2px solid var(--viz-border);
    font-weight: 600;
}

/* ============================================
   Algorithm Tab — Reduction Axes Table
   ============================================ */
.norm-axes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 8px;
}

.norm-axes-table th,
.norm-axes-table td {
    padding: 5px 8px;
    border: 1px solid var(--viz-border);
    text-align: center;
}

.norm-axes-table th {
    background: var(--viz-hover-bg);
    font-weight: 600;
    font-size: 11px;
}

.norm-axes-table td:first-child {
    text-align: left;
    font-weight: 600;
}

.norm-axes-table .norm-axis-yes {
    background: var(--viz-success-bg);
    color: var(--viz-success-border);
    font-weight: 600;
}

.norm-axes-table .norm-axis-no {
    color: var(--viz-text-muted);
}

/* ============================================
   Interaction Guide
   ============================================ */
.norm-interaction-list {
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.6;
}

.norm-interaction-list li {
    margin-bottom: 6px;
}

/* ============================================
   Locked Cell Indicator
   ============================================ */
.norm-lock-badge {
    display: inline-block;
    font-family: var(--viz-mono-font);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--viz-warning-bg);
    border: 1px solid var(--viz-warning-border);
    color: var(--viz-warning-border);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 992px) {
    .norm-type-toggle .btn {
        padding: 3px 6px;
        font-size: 11px;
    }

    .norm-controls-panel .option-row {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .norm-controls-panel .option-row label {
        min-width: auto;
    }
}