/* Wartung wartbarer Geräte (CC_200) — Pult, Handgerät, GM-Reiter */
.md-page { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.md-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.md-title { margin: 0 0 0.3rem 0; font-size: 1.3rem; }
.md-sub { margin: 0; opacity: 0.75; font-size: 0.85rem; max-width: 60ch; }
.md-who { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.5rem; align-items: center; font-size: 0.8rem; min-width: 280px; }
.md-who input { background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.3); color: inherit; padding: 0.3rem; }
.md-notice { padding: 0.4rem 0.6rem; border-radius: 4px; font-size: 0.85rem; }
.md-notice.ok { background: rgba(0,200,83,0.15); border: 1px solid rgba(0,200,83,0.5); }
.md-notice.warn { background: rgba(255,214,0,0.15); border: 1px solid rgba(255,214,0,0.5); }
.md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.md-grid-single { grid-template-columns: minmax(0, 720px); }
.md-device { padding: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.md-device.tone-critical { border-color: rgba(213,0,0,0.7); animation: md-critical-pulse 1s infinite; }
.md-device.tone-warning { border-color: rgba(255,214,0,0.5); }
.md-device.tone-maintenance { border-color: rgba(64,196,255,0.5); }
@keyframes md-critical-pulse { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 10px rgba(213,0,0,0.5); } }
.md-device-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.md-device-head h3 { margin: 0; font-size: 0.95rem; }
.md-station { font-size: 0.72rem; opacity: 0.6; }
.md-state { font-size: 0.72rem; font-weight: bold; padding: 0.15rem 0.4rem; border-radius: 3px; white-space: nowrap; }
.md-state.tone-success { background: rgba(0,200,83,0.2); color: #00c853; }
.md-state.tone-warning { background: rgba(255,214,0,0.2); color: #ffd600; }
.md-state.tone-maintenance { background: rgba(64,196,255,0.2); color: #40c4ff; }
.md-state.tone-critical { background: rgba(213,0,0,0.25); color: #ff5252; }
.md-step { margin: 0; font-size: 0.82rem; opacity: 0.85; }
.md-progress { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.md-progress-bar { height: 100%; background: #40c4ff; transition: width 0.5s; }
.md-meta { display: flex; gap: 1rem; font-size: 0.78rem; opacity: 0.85; flex-wrap: wrap; }
.md-meta i { opacity: 0.6; font-style: normal; }
.md-inspect { font-size: 0.78rem; background: rgba(0,0,0,0.2); padding: 0.35rem 0.5rem; border-radius: 4px; }
.md-inspect-label { opacity: 0.6; margin-right: 0.4rem; }
.md-inspect ul { display: inline; margin: 0; padding: 0; list-style: none; }
.md-inspect li { display: inline; }
.md-inspect li + li::before { content: " · "; }
.md-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.md-slot { padding: 0.4rem 0.5rem; background: rgba(0,0,0,0.25); border-radius: 4px; display: flex; flex-direction: column; gap: 0.3rem; }
.md-slot-head { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; }
.md-slot-name { font-weight: bold; }
.md-slot-type { opacity: 0.6; font-size: 0.72rem; }
.md-part { display: flex; flex-direction: column; gap: 0.15rem; }
.md-tag { font-family: monospace; font-size: 0.8rem; }
.md-service { font-size: 0.72rem; opacity: 0.7; }
.md-diag { margin: 0; font-size: 0.78rem; }
.md-diag.tone-success b { color: #00c853; }
.md-diag.tone-warning b { color: #ffd600; }
.md-diag.tone-critical b { color: #ff5252; }
.md-diag-age { opacity: 0.5; }
.md-fault b { color: #ffab40; }
/* Arbeitsgang am Teil (Zeit, Schritte, Minigame) */
.md-job { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.3rem 0.4rem; border-left: 2px solid #40c4ff; }
.md-job-label { font-size: 0.78rem; font-weight: bold; }
.md-job-steps { margin: 0; padding-left: 1.2rem; font-size: 0.75rem; display: flex; flex-direction: column; gap: 0.2rem; }
.md-job-steps li { opacity: 0.6; }
.md-job-steps li.done { opacity: 0.4; text-decoration: line-through; }
.md-job-steps li.next { opacity: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.md-hint { font-size: 0.72rem; opacity: 0.6; margin: 0; }
.md-empty { margin: 0; font-size: 0.8rem; opacity: 0.6; font-style: italic; }
.md-slot-actions, .md-candidates, .md-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.md-btn { cursor: pointer; }
.md-btn-primary { border-color: #40c4ff; color: #40c4ff; }
.md-btn-start { border-color: #00c853; color: #00c853; }
.md-btn-stop { border-color: #ff5252; color: #ff5252; }
.md-btn-warn { border-color: #ffd600; color: #ffd600; }
.md-journal { list-style: none; margin: 0; padding: 0.3rem 0 0 0; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.7rem; opacity: 0.6; max-height: 6.5em; overflow: hidden; }
.md-depot { padding: 0.9rem; }
.md-depot h3 { margin: 0 0 0.4rem 0; font-size: 0.95rem; }
.md-depot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.md-depot-item { display: flex; gap: 0.6rem; align-items: center; font-size: 0.8rem; flex-wrap: wrap; }
.md-depot-type { font-weight: bold; min-width: 9em; }
.md-scrap { color: #ff5252; font-size: 0.72rem; font-weight: bold; }
.md-foot { font-size: 0.8rem; }
/* Handgerät */
.md-handheld { max-width: 520px; }
.md-scan { display: flex; flex-direction: column; gap: 0.4rem; }
.md-scan input { font-size: 1.2rem; padding: 0.5rem; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.3); color: inherit; }
.md-lookup { padding: 0.9rem; }
.md-lookup-msg { margin: 0 0 0.5rem 0; font-weight: bold; }
.md-lookup-msg.warn { color: #ffd600; }
.md-lookup-props { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.8rem; margin: 0; font-size: 0.85rem; }
.md-lookup-props dt { opacity: 0.6; }
.md-lookup-props dd { margin: 0; }
.md-lookup-props dd.tone-success { color: #00c853; }
.md-lookup-props dd.tone-warning { color: #ffd600; }
.md-lookup-props dd.tone-critical { color: #ff5252; }
/* GM */
.gm-maintenance { display: flex; flex-direction: column; gap: 1rem; }
.gm-maintenance .gm-section h3 { margin: 0 0 0.4rem 0; font-size: 0.95rem; }
.gm-inline-form { display: inline-flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; font-size: 0.8rem; }
.gm-inline-form input, .gm-inline-form select { background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.3); color: inherit; padding: 0.2rem; width: 5.5em; }
.gm-inline-form input[type=text] { width: 12em; }
.md-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.md-table th, .md-table td { text-align: left; padding: 0.25rem 0.4rem; border-bottom: 1px solid rgba(255,255,255,0.08); vertical-align: middle; }
.md-table input[type=number] { width: 5em; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.3); color: inherit; padding: 0.15rem; }
.md-table td.tone-success { color: #00c853; }
.md-table td.tone-warning { color: #ffd600; }
.md-table td.tone-critical { color: #ff5252; }
.gm-md-devices { display: flex; flex-direction: column; gap: 0.8rem; }
.gm-md-device { padding: 0.6rem; background: rgba(0,0,0,0.2); border-left: 3px solid rgba(255,255,255,0.15); border-radius: 4px; }
.gm-md-device.tone-critical { border-left-color: #ff5252; }
.gm-md-device.tone-warning { border-left-color: #ffd600; }
.gm-md-device.tone-maintenance { border-left-color: #40c4ff; }
.gm-md-device header { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-size: 0.82rem; margin-bottom: 0.3rem; }
.gm-md-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center; }
.gm-maintenance .gm-note { margin: 0; padding: 0.4rem 0.6rem; border-radius: 4px; font-size: 0.85rem; background: rgba(64,196,255,0.15); border: 1px solid rgba(64,196,255,0.5); }
.gm-maintenance .gm-section { padding: 0.6rem; background: rgba(0,0,0,0.15); border-radius: 4px; }
/* Wartung & Reparatur: Bereiche Reaktor · Lebenserhaltung · Schiffssysteme */
.md-areas { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.1rem; }
.md-areas::-webkit-scrollbar { display: none; }
.md-area-tab { flex: 0 0 auto; min-height: 44px; padding: 0.4rem 0.9rem; cursor: pointer; font: inherit; font-size: 0.85rem;
               background: rgba(255,255,255,0.04); color: inherit; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; }
.md-area-tab.is-active { border-color: #40c4ff; color: #40c4ff; background: rgba(64,196,255,0.12); }
.md-area { display: flex; flex-direction: column; gap: 1rem; }
.md-area[hidden] { display: none; }
.md-area-lead { margin: 0; font-size: 0.82rem; opacity: 0.75; max-width: 70ch; }
.md-area-pending { font-size: 0.8rem; opacity: 0.6; }
@media (max-width: 600px) {
  .md-page { padding: 0.75rem 1rem; }
  .md-who { min-width: 0; width: 100%; }
  .md-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Breite Bildschirme (ab 1600 px): Wartung & Reparatur ohne Scrollen ──────────────────────
   Nur das Pult mit Bereichsreitern (.md-page mit .md-areas), nicht Geräte-Seite, Handgerät, GM.
   Die Seite darf breiter werden als die Standardhülle, die Bereiche legen ihre Teile nebeneinander
   statt untereinander und füllen die Höhe bis unten (Abstand unten = Innenabstand der Hülle). */
@media (min-width: 1600px) {
  .station-main:has(.md-page > .md-areas) { max-width: min(2800px, 100%); display: flex; flex-direction: column; }
  .md-page:has(> .md-areas) { flex: 1 0 auto; padding: 0 0.5rem; gap: 0.75rem; }
  .md-page:has(> .md-areas) .md-sub { max-width: 130ch; }
  .md-page:has(> .md-areas) .md-area:not([hidden]) { flex: 1 0 auto; }
  .md-page:has(> .md-areas) .md-area-lead { max-width: 150ch; }

  /* Reaktor: links Ablauf + Wartung, rechts Bauteil-Integrität */
  .md-page:has(> .md-areas) .md-area[data-md-area="reaktor"]:not([hidden]) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    grid-template-rows: auto 1fr; gap: 0.75rem 1.5rem; align-items: stretch;
  }
  .md-area[data-md-area="reaktor"] > .md-area-lead { grid-column: 1; grid-row: 1; }
  .md-area[data-md-area="reaktor"] > #reactor-maintenance { grid-column: 1; grid-row: 2; margin-top: 0; }
  .md-area[data-md-area="reaktor"] > .reactor-components { grid-column: 2; grid-row: 1 / 3; margin-top: 0;
                                                          display: flex; flex-direction: column; }
  .md-area[data-md-area="reaktor"] > .reactor-components > .control-title { margin-top: 0; }
  .md-area[data-md-area="reaktor"] .rc-split { flex: 1 0 auto; align-items: stretch; grid-template-columns: 2.4fr 1fr; }
  .md-area[data-md-area="reaktor"] .rc-grid { align-content: start; }

  /* Lebenserhaltung: vier Aggregate nebeneinander; Lager/Hand/Logbuch und Prüfstand in einer Zeile.
     Der O₂-Block löst sich dafür ins Raster des Bereichs auf (display: contents). */
  .md-page:has(> .md-areas) .md-area[data-md-area="lebenserhaltung"]:not([hidden]) {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr; gap: 0.75rem 1rem; align-content: stretch;
  }
  .md-area[data-md-area="lebenserhaltung"] > .o2-units { display: contents; }
  .md-area[data-md-area="lebenserhaltung"] .o2-units > :not(.o2-lower) { grid-column: 1 / -1; }
  .md-area[data-md-area="lebenserhaltung"] .o2-unit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md-area[data-md-area="lebenserhaltung"] .o2-lower { grid-column: 1; align-items: stretch; }
  .md-area[data-md-area="lebenserhaltung"] > .o2-inspect { grid-column: 2; margin: 0; }
  .md-area[data-md-area="lebenserhaltung"] .o2-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; }
  .md-area[data-md-area="lebenserhaltung"] .o2-sub { margin: 0; }

  /* Werkstatt: Hand über Werkbank | Drucker | Lager (breit, Regal mehrspaltig) */
  .md-page:has(> .md-areas) .md-area[data-md-area="werkstatt"] > .ws-panel { flex: 1 0 auto; }
  .md-area[data-md-area="werkstatt"] .ws-grid {
    flex: 1 0 auto; align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 2.2fr);
    grid-template-rows: auto 1fr;
  }
  .md-area[data-md-area="werkstatt"] .ws-grid > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .md-area[data-md-area="werkstatt"] .ws-grid > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .md-area[data-md-area="werkstatt"] .ws-grid > :nth-child(3) { grid-column: 2; grid-row: 1 / 3; }
  .md-area[data-md-area="werkstatt"] .ws-grid > .ws-card-wide { grid-column: 3; grid-row: 1 / 3; }
  .md-area[data-md-area="werkstatt"] .ws-shelf { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}