/* ═══════════════════════════════════════════════════════════════
   StarshipOS — Bedienelemente v2
   Eine Button-Familie, ein Input-Stil, ein Segmented Control.
   Überschreibt die bestehenden, historisch gewachsenen Klassen
   (btn-action, panel-button, helm-btn, maneuver-btn, btn-speed,
   btn-freq, btn-iff, throttle-preset-btn, joystick-btn, ops-btn,
   ctrl-btn, btn-pump-toggle …), damit kein Template angefasst
   werden muss. Einbinden NACH tokens-v2.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Basis: alles, was klickbar ist ────────────────────────── */
.btn-action,
.btn-sm,
.panel-button,
.helm-btn,
.maneuver-btn,
.reactor-btn,
.btn-speed,
.btn-freq,
.btn-iff,
.btn-ots,
.ops-btn,
.ctrl-btn,
.btn-pump-toggle,
.pump-btn,
.throttle-preset-btn,
.joystick-btn,
.btn-secondary,
.btn-fire,
.btn-hold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm, 0.5rem);
    min-height: var(--control-h-md);
    padding: var(--control-pad);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-raised);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.btn-action:hover,
.panel-button:hover,
.helm-btn:hover,
.maneuver-btn:hover,
.btn-speed:hover,
.btn-freq:hover,
.ops-btn:hover,
.ctrl-btn:hover,
.throttle-preset-btn:hover,
.joystick-btn:hover,
.btn-secondary:hover {
    background: #223044;
    border-color: var(--station-accent, var(--accent-cyan));
    color: var(--text-primary);
}

:is(button, a, select, input, textarea):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

:is(button, .btn-action, .panel-button):disabled {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-dim);
    cursor: not-allowed;
}

/* ── 2. Rollen: gefüllt statt nur umrandet ────────────────────── */
.btn-action.btn-primary,
.helm-btn--primary,
.reactor-btn--primary,
.panel-button.is-primary {
    background: var(--station-accent, var(--accent-cyan));
    border-color: var(--station-accent, var(--accent-cyan));
    color: #06131c;
    font-weight: 700;
}

.btn-action.btn-success,
.btn-success,
.ops-btn-go,
.btn-pump-on {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: #06140f;
    font-weight: 700;
}

.btn-action.btn-warning,
.btn-warning {
    background: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: #1a1204;
    font-weight: 700;
}

.btn-action.btn-danger,
.btn-danger,
.ops-btn-warn,
.btn-fire {
    background: transparent;
    border-color: var(--accent-red);
    color: var(--accent-red);
    font-weight: 700;
}
.btn-action.btn-danger:hover,
.btn-danger:hover,
.ops-btn-warn:hover,
.btn-fire:hover {
    background: var(--tint-red);
    color: #fecaca;
}

/* Gefährliche Endaktionen (SCRAM, Auflösen, Feuer frei) gefüllt */
.btn-danger--commit {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: #180708;
}

/* ── 3. Größen ────────────────────────────────────────────────── */
.btn-sm,
.btn-iff,
.btn-ots,
.panel-button.block-step {
    min-height: var(--control-h-sm);
    padding: 0 10px;
    font-size: var(--text-xs);
}

/* Touch-Stationen: nichts unter 48 px, egal welche Klasse */
@media (pointer: coarse) {
    .btn-action, .btn-sm, .panel-button, .helm-btn, .maneuver-btn,
    .btn-speed, .btn-freq, .btn-iff, .ops-btn, .ctrl-btn,
    .throttle-preset-btn, .joystick-btn, .btn-secondary,
    .pump-btn, .btn-pump-toggle {
        min-height: var(--control-h-lg);
        padding: 0 20px;
        font-size: var(--text-base);
    }
    .station-panel .block-stepper .panel-button { min-width: 48px; padding: 0; }
}

/* EP-Stepper: quadratische Ziele, klar getrennt */
.station-panel .block-stepper { gap: var(--space-sm); }
.station-panel .block-stepper .panel-button {
    min-width: 44px;
    min-height: var(--control-h-md);
    padding: 0;
    font-size: var(--text-md);
    font-weight: 700;
}
.station-panel .block-segments { flex: 1; gap: 4px; }
.station-panel .block-segment {
    width: auto;
    flex: 1;
    min-width: 10px;
    height: 22px;
    border-radius: 2px;
    border-color: var(--border-strong);
}
.station-panel .block-segment.is-on {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    box-shadow: none;
}
.station-panel .block-segment.is-off { background: var(--bg-secondary); opacity: 1; }

/* ── 4. Aktive Zustände klar erkennbar ────────────────────────── */
.maneuver-btn--active,
.btn-speed--active,
.btn-freq--active,
.throttle-preset-btn--active,
.station-panel .panel-button.is-active {
    background: var(--station-accent, var(--accent-cyan));
    border-color: var(--station-accent, var(--accent-cyan));
    color: #06131c;
    font-weight: 700;
}

/* ── 5. Eingabefelder ─────────────────────────────────────────── */
.form-input,
.form-select,
.form-select-sm,
select,
input[type="text"],
input[type="number"],
input[type="search"],
textarea,
.treatment-form select,
.treatment-form input[type="number"],
.hail-form input,
.hail-form select,
.hail-form textarea,
select.outcome-sel {
    min-height: var(--control-h-md);
    padding: 0 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-base);
}
textarea { padding: 10px 12px; min-height: 80px; }

.form-input:focus,
.form-select:focus,
select:focus,
input:focus,
textarea:focus {
    outline: none;
    border-color: var(--station-accent, var(--accent-cyan));
    background: #18212f;
}

/* Labels: nie unter 12 px, nie halbtransparent */
.form-label,
.treatment-form .form-row label,
.station-panel .panel-section-title,
.panel-section-title,
.control-title,
.meta-label,
.power-label,
.joystick-group-label,
.timer-label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Select: sichtbarer Chevron statt Systempfeil im Nichts */
select,
.form-select,
select.outcome-sel {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
                      linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
    background-size: 8px 8px, 8px 8px;
    background-repeat: no-repeat;
}
select option { background: var(--bg-panel); color: var(--text-primary); }

/* ── 6. Segmented Control (ersetzt kurze Dropdowns) ───────────
   Markup:
   <div class="sos-segmented" role="group">
     <button class="sos-seg is-active">Erfolg</button>
     <button class="sos-seg">Teilweise</button>
     <button class="sos-seg">Fehlschlag</button>
   </div>                                                        */
.sos-segmented {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
}
.sos-seg {
    min-height: var(--control-h-md);
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    cursor: pointer;
}
.sos-seg:hover { background: var(--bg-raised); color: var(--text-primary); }
.sos-seg.is-active {
    background: var(--station-accent, var(--accent-cyan));
    color: #06131c;
}
@media (pointer: coarse) { .sos-seg { min-height: var(--control-h-lg); padding: 0 18px; } }

/* ── 7. Badges & Tabellen ─────────────────────────────────────── */
.station-panel .status-badge,
.system-state-badge,
.session-badge,
.badge,
.iff-badge,
.state-badge,
.reactor-mode-badge,
.weapon-status-badge {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    padding: 3px 9px;
    border-radius: var(--radius-sm);
}

.station-panel .data-table tbody td,
.contact-table td,
.weapon-table td,
.waypoint-table td {
    padding: 10px;
    font-size: var(--text-base);
    color: var(--text-primary);
}
.station-panel .data-table thead th,
.contact-table th,
.weapon-table th,
.waypoint-table th {
    padding: 8px 10px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-strong);
    background: transparent;
}
.station-panel .data-table tbody tr:nth-child(even),
.contact-table tbody tr:nth-child(even) { background: #121a26; }

/* Systemmeldungen: Ton wieder sichtbar (default → info statt gelb) */
.station-panel .alert-item[data-tone="default"] { border-left-color: var(--accent-blue); }
.station-panel .alert-code { color: var(--text-secondary); }

/* Sekundärtext, der bisher zu dunkel war */
.station-breadcrumb,
.station-status,
.presence-status,
.mission-placeholder,
.stat-perf,
.ann-hint,
.form-hint,
.meta-classification { color: var(--text-secondary); }

/* Ad-hoc-Hexwerte der GM-/Teleskop-Seiten neutralisieren.
   Besser wäre, sie im Template zu löschen — bis dahin gilt: */
.def-desc, .def-meta, .phase-stations, .meta-value, .empty,
.no-target-msg, .waiting-msg { color: var(--text-secondary) !important; }
.def-name, .op-title, .meta-designation { color: var(--text-primary) !important; }