/* CC_032 P3 — Reactor Core SVG Visualization + Temperature Sparkline */

/* ── Reactor Core Container ─────────────────────────────────────────────── */
.reactor-core-section { display: flex; flex-direction: column; align-items: center; }
.reactor-core-container { width: 140px; height: 140px; margin: 0.5rem auto; }
.reactor-core-svg { width: 100%; height: 100%; overflow: visible; }

/* ── Reactor Rings ───────────────────────────────────────────────────────── */
.reactor-ring {
    fill: none;
    stroke-width: 2;
    opacity: 0.7;
    transition: stroke 0.5s;
}
.reactor-ring-outer { stroke-dasharray: 6 4; animation: ring-rotate 12s linear infinite; transform-origin: 50px 50px; }
.reactor-ring-mid   { stroke-dasharray: 4 6; animation: ring-rotate 8s linear infinite reverse; transform-origin: 50px 50px; }

@keyframes ring-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Temperature-dependent ring colors */
.reactor-ring.temp-nominal { stroke: var(--accent-blue, #29b6f6); }
.reactor-ring.temp-warning { stroke: var(--accent-yellow, #ffd600); }
.reactor-ring.temp-danger  { stroke: var(--accent-red, #ff3d00); }

/* ── Inner Core Circle ──────────────────────────────────────────────────── */
.reactor-core-inner {
    fill-opacity: 0.25;
    stroke-width: 1.5;
    transition: fill 0.5s, stroke 0.5s;
}
.reactor-core-inner.temp-nominal {
    fill: var(--accent-blue, #29b6f6);
    stroke: var(--accent-blue, #29b6f6);
    animation: core-pulse-nominal 3s ease-in-out infinite alternate;
}
.reactor-core-inner.temp-warning {
    fill: var(--accent-yellow, #ffd600);
    stroke: var(--accent-yellow, #ffd600);
    animation: core-pulse-warn 2s ease-in-out infinite alternate;
}
.reactor-core-inner.temp-danger {
    fill: var(--accent-red, #ff3d00);
    stroke: var(--accent-red, #ff3d00);
    animation: core-pulse-danger 0.8s ease-in-out infinite alternate;
}

@keyframes core-pulse-nominal { from { fill-opacity: 0.15; r: 18; } to { fill-opacity: 0.35; r: 21; } }
@keyframes core-pulse-warn    { from { fill-opacity: 0.20; r: 18; } to { fill-opacity: 0.45; r: 22; } }
@keyframes core-pulse-danger  { from { fill-opacity: 0.30; r: 17; } to { fill-opacity: 0.65; r: 23; } }

/* ── Core Labels ────────────────────────────────────────────────────────── */
.reactor-core-label {
    font-family: monospace;
    font-size: 14px;
    font-weight: bold;
    fill: rgba(255, 255, 255, 0.9);
    pointer-events: none;
}
.reactor-core-sublabel {
    font-family: monospace;
    font-size: 8px;
    fill: rgba(255, 255, 255, 0.65);
    pointer-events: none;
}

/* ── Temperature Sparkline ──────────────────────────────────────────────── */
.temp-sparkline-container {
    margin-top: 0.5rem;
    width: 100%;
}
.temp-sparkline {
    width: 100%;
    height: 36px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    display: block;
    overflow: visible;
}
.sparkline-line {
    stroke-width: 1.5;
    fill: none;
    vector-effect: non-scaling-stroke;
    transition: stroke 0.5s;
}
.sparkline-line.temp-nominal { stroke: var(--accent-blue, #29b6f6); }
.sparkline-line.temp-warning { stroke: var(--accent-yellow, #ffd600); }
.sparkline-line.temp-danger  { stroke: var(--accent-red, #ff3d00); }

.sparkline-threshold {
    stroke-dasharray: 2 3;
    stroke-width: 0.75;
    opacity: 0.5;
    vector-effect: non-scaling-stroke;
}
.sparkline-danger { stroke: var(--accent-red, #ff3d00); }
.sparkline-warn   { stroke: var(--accent-yellow, #ffd600); }

.sparkline-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: monospace;
    margin-top: 0.1rem;
}

/* ── CC_181: Arbeitspunkt (Kuehlbilanz + Generator) ───────────────────────── */
.reactor-operating-point { border-left: 3px solid var(--text-dim, #4b5563); padding-left: var(--space-sm, 0.5rem); }
.reactor-operating-point[data-tone="success"] { border-left-color: var(--accent-green, #36d399); }
.reactor-operating-point[data-tone="warning"] { border-left-color: var(--accent-yellow, #ffd600); }
.reactor-operating-point[data-tone="danger"]  { border-left-color: var(--accent-red, #ff3d00); }

.operating-point-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm, 0.5rem);
}

.operating-point-cell { display: flex; flex-direction: column; gap: 2px; }

.operating-point-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #8a96a6);
}

.operating-point-value {
    font-family: var(--font-mono, monospace);
    font-size: 1.25rem;
    font-weight: 700;
}

.operating-point-sub { font-size: 0.75rem; color: var(--text-muted, #8a96a6); }

.operating-point-hint {
    margin: var(--space-sm, 0.5rem) 0 0;
    font-size: 0.8rem;
    color: var(--text-muted, #8a96a6);
}

@media (max-width: 480px) {
    .operating-point-grid { grid-template-columns: 1fr; }
}

/* ── CC_186: Reaktorstart-Panel ───────────────────────────────────────────── */
.reactor-start-panel { border-left: 3px solid var(--text-dim, #4b5563); }
.reactor-start-panel[data-tone="success"] { border-left-color: var(--accent-green, #36d399); }
.reactor-start-panel[data-tone="warning"] { border-left-color: var(--accent-yellow, #ffd600); }
.reactor-start-panel[data-tone="danger"]  { border-left-color: var(--accent-red, #ff3d00); }

.reactor-start-state {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--space-sm, 0.5rem);
}

.reactor-start-label {
    font-weight: 700;
    letter-spacing: 0.04em;
}
.reactor-start-state[data-tone="success"] .reactor-start-label { color: var(--accent-green, #36d399); }
.reactor-start-state[data-tone="warning"] .reactor-start-label { color: var(--accent-yellow, #ffd600); }
.reactor-start-state[data-tone="danger"]  .reactor-start-label { color: var(--accent-red, #ff3d00); }

.reactor-start-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm, 0.5rem);
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
    color: var(--text-muted, #8a96a6);
}

.reactor-start-hint {
    margin: 0 0 var(--space-sm, 0.5rem);
    font-size: 0.8rem;
    color: var(--text-muted, #8a96a6);
}

.reactor-start-form { margin: 0; }
.reactor-start-button { min-width: 140px; min-height: 44px; cursor: pointer; }
.reactor-start-button:disabled { opacity: 0.35; cursor: not-allowed; }

.reactor-start-link {
    display: inline-block;
    margin-top: var(--space-sm, 0.5rem);
    font-size: 0.8rem;
    color: var(--accent-yellow, #ffd600);
}

.reactor-start-message {
    margin: var(--space-sm, 0.5rem) 0 0;
    font-size: 0.82rem;
}
.reactor-start-message[data-tone="success"] { color: var(--accent-green, #36d399); }
.reactor-start-message[data-tone="warning"] { color: var(--accent-yellow, #ffd600); }
.reactor-start-message[data-tone="danger"]  { color: var(--accent-red, #ff3d00); }
.reactor-start-message[data-tone="info"]    { color: var(--text-muted, #8a96a6); }

/* ── CC_187/CC_188: Batteriepuffer und Brennstabkammern im Startpanel ────── */
.reactor-start-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm, 0.5rem);
}

.reactor-start-stock {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--space-sm, 0.5rem);
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
    color: var(--text-muted, #8a96a6);
}

.reactor-start-stock-item--active { color: var(--accent-yellow, #ffd600); }

/* ── CC_188: Brennstabkammern ─────────────────────────────────────────────── */
.rod-bay { margin-top: var(--space-md, 0.75rem); }

.rod-supply {
    float: right;
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    color: var(--text-muted, #8a96a6);
}

.rod-chamber {
    border: 1px solid var(--border-subtle, #2a3344);
    border-left: 4px solid var(--rod-color, #4b5563);
    border-radius: 6px;
    padding: 0.6rem 0.7rem;
    margin-bottom: var(--space-sm, 0.5rem);
    background: var(--surface-raised, #141b2b);
}
.rod-chamber[data-status="online"]       { --rod-color: var(--accent-green, #36d399); }
.rod-chamber[data-status="ready"]        { --rod-color: var(--accent-green, #36d399); }
.rod-chamber[data-status="ramping-up"]   { --rod-color: var(--accent-yellow, #ffd600); }
.rod-chamber[data-status="ramping-down"] { --rod-color: var(--accent-yellow, #ffd600); }
.rod-chamber[data-status="secured"]      { --rod-color: var(--accent-blue, #29b6f6); }
.rod-chamber[data-status="loaded"]       { --rod-color: var(--accent-blue, #29b6f6); }
.rod-chamber[data-status="spent"]        { --rod-color: var(--accent-red, #ff3d00); }

/* CC_189: Kammerbetrieb und naechster Schritt des Wechselzyklus. */
.rod-mode {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: var(--space-sm, 0.5rem);
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    border-left: 4px solid var(--accent-green, #36d399);
    background: rgba(255, 255, 255, 0.03);
}
.rod-mode[data-mode="one"] { border-left-color: var(--accent-yellow, #ffd600); }
.rod-mode-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.rod-mode-step { font-size: 0.78rem; color: var(--text-muted, #8a96a6); }

.rod-bay-actions { margin: 0 0 var(--space-sm, 0.5rem); }
.rod-bay-actions form { margin: 0; }
.rod-bay-actions .rod-btn { width: 100%; }

.rod-chamber-head { display: flex; justify-content: space-between; align-items: baseline; }
.rod-chamber-label { font-weight: 700; }
.rod-chamber-status {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rod-color, #8a96a6);
}

.rod-chamber-meta {
    display: flex;
    gap: var(--space-sm, 0.5rem);
    font-size: 0.78rem;
    color: var(--text-muted, #8a96a6);
}
.rod-chamber-tag { font-family: var(--font-mono, monospace); opacity: 0.7; }

.rod-bar-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0.35rem 0 0.2rem;
    overflow: hidden;
}
.rod-bar-fill { height: 100%; background: var(--rod-color, #4b5563); transition: width 0.4s; }

.rod-chamber-values {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm, 0.5rem);
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    color: var(--text-muted, #8a96a6);
}

.rod-chamber-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.rod-chamber-actions form { margin: 0; }
.rod-btn { min-height: 40px; cursor: pointer; font-size: 0.8rem; }
.rod-btn:disabled { opacity: 0.3; cursor: not-allowed; }
/* Der schwere Schalter sieht auch schwer aus. */
.rod-btn--switch {
    border-color: var(--accent-yellow, #ffd600);
    color: var(--accent-yellow, #ffd600);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.rod-spares {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted, #8a96a6);
}