/*
  StarshipOS — Medizin: gemeinsame Bausteine des Redesigns (Medical Panels überarbeiten)

  Gilt für alle Medizin-Seiten (Station, Akte, Labor, Triage/Register, GM-Medizin).
  Seiten-eigene Regeln stehen in medical.css, medical-chart.css, patient-monitor.css.

  Bausteine:
    .med-subnav            Unternavigation unter dem Stations-Header (fragments/medical-nav.html)
    .tone-{red|orange|yellow|green|blue|black}
                           setzt --tone auf die MTS-Farbe — alle Bausteine unten färben sich danach
    .med-panel             Panel mit linkem Farbstreifen (--tone oder Stationsfarbe), Kopf mit Titel
    .med-tile              Kennzahl-Kachel (Triage-Zähler, Betten, Wartend …)
    .med-chip              Auswahl-Chip (Radio/Checkbox im Label), aktiv = gefüllt
    .med-badge             Status-Badge in Kontur
    .med-alert             rote Warnleiste (Kritisch, Allergie)
    .med-vitals            Vitalwerte-Raster (HF, RR, SpO₂ …) mit Warnfarbe
    .med-stages            Stufenbalken (unversorgt → abgeschlossen, Laborschritte)
*/

:root {
    --med-red: var(--accent-red, #ef4444);
    --med-orange: color-mix(in srgb, var(--accent-red, #ef4444) 45%, var(--accent-yellow, #f59e0b));
    --med-yellow: var(--accent-yellow, #f59e0b);
    --med-green: var(--accent-green, #10b981);
    --med-blue: var(--accent-blue, #3b82f6);
    --med-black: var(--text-muted, #6b7280);
    --med-violet: var(--accent-violet, #a78bfa);
    --med-accent: #14b8a6;
    --med-well: #0d1520;
    --med-line: var(--border-color, #1f2d3d);
}


/* ── Unternavigation ─────────────────────────────────────────────────────── */

.med-subnav {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 4px;
    margin: -0.5rem 0 1.25rem;
    border-bottom: 1px solid var(--med-line);
}
.med-subnav-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label, 0.12em);
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.med-subnav-tab:hover { color: var(--text-primary); }
.med-subnav-tab.is-active { color: var(--text-primary); border-bottom-color: var(--med-accent); }
.med-subnav-count {
    background: var(--tint-yellow);
    color: var(--accent-yellow);
    border: 1px solid var(--accent-yellow);
    padding: 0 5px;
    border-radius: 2px;
    font-size: 0.65rem;
    letter-spacing: 0;
}
.med-subnav-spacer { flex: 1; }
.med-subnav-views { display: flex; align-items: center; padding: 6px 0; }
.med-subnav-views a {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label, 0.12em);
    padding: 5px 10px;
    border: 1px solid var(--med-line);
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.med-subnav-views a:first-child { border-radius: 3px 0 0 3px; }
.med-subnav-views a + a { border-left: none; border-radius: 0 3px 3px 0; }
.med-subnav-views a.is-active {
    background: color-mix(in srgb, var(--med-accent) 18%, transparent);
    color: var(--med-accent);
}

/* ── Panel ──────────────────────────────────────────────────────────────── */

.med-panel {
    --tone: var(--med-accent);
    background: var(--bg-secondary);
    border: 1px solid var(--med-line);
    border-left: 3px solid var(--tone);
    border-radius: 4px;
    min-width: 0;
}
.med-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--med-line);
}
.med-panel-title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label, 0.12em);
    color: var(--text-primary);
}
.med-panel-hint { font-size: var(--text-xs); color: var(--text-muted); }
.med-panel-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }

.med-label {
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label, 0.12em);
    color: var(--text-muted);
}
.med-label .form-hint { text-transform: none; letter-spacing: 0; }

/* ── Kennzahl-Kacheln ───────────────────────────────────────────────────── */

.med-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}
.med-tile {
    --tone: var(--med-line);
    background: var(--bg-secondary);
    border: 1px solid var(--med-line);
    border-radius: 4px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.med-tile--triage {
    border-top: 3px solid var(--tone);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.med-tile-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label, 0.12em);
    color: var(--text-muted);
}
.med-tile--triage .med-tile-label { color: var(--tone); font-weight: 700; }
.med-tile-value { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); }
.med-tile-value.is-tone { color: var(--tone); }
.med-tile-sub { font-size: var(--text-xs); color: var(--text-muted); }
a.med-tile:hover { border-color: var(--med-accent); }

/* ── Chips (Radio/Checkbox im Label) ────────────────────────────────────── */

.med-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.med-chips--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.med-chip {
    --tone: var(--text-muted);
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--tone);
    border-radius: 3px;
    background: transparent;
    color: var(--tone);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    text-align: center;
}
.med-chip.is-plain { --tone: var(--med-line); color: var(--text-primary); font-weight: 400; text-align: left; }
.med-chip input { position: absolute; opacity: 0; pointer-events: none; }
.med-chip small { font-weight: 400; opacity: 0.85; letter-spacing: 0; }
.med-chip:hover { background: color-mix(in srgb, var(--tone) 10%, transparent); }
.med-chip:has(input:checked),
.med-chip.is-checked {
    background: var(--tone);
    color: #0a0e17;
}
.med-chip.is-plain:has(input:checked),
.med-chip.is-plain.is-checked {
    --tone: var(--med-accent);
    background: color-mix(in srgb, var(--med-accent) 14%, transparent);
    color: var(--med-accent);
}
.med-chip:has(input:focus-visible) { outline: 2px solid var(--med-accent); outline-offset: 2px; }

/* ── Badges ─────────────────────────────────────────────────────────────── */

.med-badge {
    --tone: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--tone);
    border-radius: 2px;
    color: var(--tone);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}
.med-badge.is-solid { background: var(--tone); color: #0a0e17; }
.med-badge-warning { --tone: var(--med-yellow); }
.med-badge-info { --tone: var(--med-blue); }
.med-badge-accent { --tone: var(--accent-cyan, #06b6d4); }
.med-badge-neutral { --tone: var(--text-muted); }
.med-badge-success { --tone: var(--med-green); }
.med-badge-danger { --tone: var(--med-red); }
.med-triage-text { color: var(--tone); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; }

/* ── Warnleiste ─────────────────────────────────────────────────────────── */

.med-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--med-red);
    background: var(--tint-red);
    border-radius: 3px;
    color: var(--text-primary);
}
.med-alert-label { color: var(--med-red); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.med-alert .med-alert-action { margin-left: auto; }

/* ── Vitalwerte ─────────────────────────────────────────────────────────── */

.med-vitals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    border: 1px solid var(--med-line);
    background: #000510;
    border-radius: 3px;
}
.med-vital { padding: 10px; border-right: 1px solid var(--med-line); min-width: 0; }
.med-vital:last-child { border-right: none; }
.med-vital-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.med-vital-value { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.med-vital-unit { font-size: var(--text-xs); color: var(--text-muted); }
.med-vital.is-alarm .med-vital-value { color: var(--med-red); }
.med-vital.is-warn .med-vital-value { color: var(--med-yellow); }

/* ── Stufenbalken ───────────────────────────────────────────────────────── */

.med-stages { display: grid; grid-template-columns: repeat(var(--stages, 4), 1fr); gap: 4px; }
.med-stage { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.med-stage::before { content: ""; height: 4px; border-radius: 1px; background: var(--med-line); }
.med-stage.is-done::before { background: var(--med-accent); }
.med-stage.is-current { color: var(--text-primary); }
.med-stage.is-current::before { background: var(--tone, var(--med-yellow)); }
.med-stage.is-done { color: var(--text-primary); }

/* ── Leiste (HP, Energie) ───────────────────────────────────────────────── */

.med-meter { height: 8px; background: var(--med-line); border-radius: 1px; overflow: hidden; }
.med-meter > span { display: block; height: 100%; background: var(--tone, var(--med-yellow)); }

/* Kleine Kontur-Aktion (Kopfzeilen, „Patient zeigen“) */
.med-link-btn {
    --tone: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--tone);
    border-radius: 3px;
    color: var(--tone);
    background: transparent;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.med-link-btn:hover { background: color-mix(in srgb, var(--tone) 12%, transparent); }

/*
  Schmal: vier bis fuenf Beschriftungen passen nicht nebeneinander („ABGESCHLO…“). Die Balken
  zeigen den Fortschritt, beschriftet bleibt nur die aktuelle Stufe; ihr Text darf in die leeren
  Nachbarspalten laufen (die letzte Stufe nach links). Das Labor hat eigene, nummerierte Stufen.
*/
@media (max-width: 560px) {
    .med-stages:not(.lab-stages) .med-stage { min-width: 0; overflow: hidden; font-size: 0.65rem; letter-spacing: 0.04em; white-space: nowrap; color: transparent; }
    .med-stages:not(.lab-stages) .med-stage::before { align-self: stretch; }
    .med-stages:not(.lab-stages) .med-stage.is-current { color: var(--text-primary); overflow: visible; }
    .med-stages:not(.lab-stages) .med-stage.is-current:last-child { align-items: flex-end; }
}

@media (max-width: 720px) {
    .med-subnav { gap: 0; }
    .med-subnav-tab { padding: 8px 10px; }
    .med-subnav-spacer { display: none; }
}

/*
  MTS-Farben stehen bewusst am Dateiende: Die Bausteine oben setzen ein eigenes --tone
  mit gleicher Spezifitaet — nur die spaetere Regel gewinnt, sonst bliebe z. B.
  „med-tile tone-red“ grau.
*/
.tone-red    { --tone: var(--med-red); }
.tone-orange { --tone: var(--med-orange); }
.tone-yellow { --tone: var(--med-yellow); }
.tone-green  { --tone: var(--med-green); }
.tone-blue   { --tone: var(--med-blue); }
.tone-black  { --tone: var(--med-black); }
.tone-violet { --tone: var(--med-violet); }
.tone-accent { --tone: var(--med-accent); }