/*
  StarshipOS — Design-System-Bausteine als reine CSS-Klassen fuer Thymeleaf-Seiten.

  Die React-Komponenten unter assets/design-system/components/core/ bringen ihr CSS erst
  zur Laufzeit mit. Server-gerenderte Seiten bekommen dieselben Regeln hier, damit ein
  Panel, ein Badge oder ein Knopf auf beiden Wegen gleich aussieht:

    .sos-panel   (+ __header, __title, __actions, __body; Streifenfarbe ueber --sos-panel-accent)
    .sos-badge   (--success · --warning · --danger · --info · --accent · --violet · --neutral, __dot, --pulse)
    .sos-btn     (--solid|--outline × --primary|--danger|--warning|--success|--neutral, --sm, --lg)
    .sos-gauge   (__top, __label, __value, __track, __fill--{tone}, __marker, --lg, --sm)

  Quelle: Panel.jsx, Badge.jsx, Button.jsx, GaugeBar.jsx — Aenderungen dort hier nachziehen.
*/

/* ── Panel ── */
.sos-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-left: var(--accent-stripe) solid var(--sos-panel-accent, var(--station-accent));
  border-radius: var(--radius-md);
  display: flex; flex-direction: column;
}
.sos-panel__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-color);
}
.sos-panel__title {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600;
  color: var(--text-primary); text-transform: uppercase; letter-spacing: var(--tracking-label);
  display: flex; align-items: center; gap: var(--space-sm);
}
.sos-panel__title .sos-panel__icon { color: var(--sos-panel-accent, var(--station-accent)); }
.sos-panel__actions { display: flex; align-items: center; gap: var(--space-sm); }
.sos-panel__body { padding: var(--space-md); }
.sos-panel--flush .sos-panel__body { padding: 0; }

/* ── Badge ── */
.sos-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 8px; border-radius: var(--radius-xs); border: 1px solid; white-space: nowrap;
}
.sos-badge--lg { font-size: var(--text-sm); padding: 3px 10px; }
.sos-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.sos-badge--success { color: var(--accent-green);  border-color: var(--accent-green);  background: var(--tint-green); }
.sos-badge--warning { color: var(--accent-yellow); border-color: var(--accent-yellow); background: var(--tint-yellow); }
.sos-badge--danger  { color: var(--accent-red);    border-color: var(--accent-red);    background: var(--tint-red); }
.sos-badge--info    { color: var(--accent-blue);   border-color: var(--accent-blue);   background: var(--tint-blue); }
.sos-badge--accent  { color: var(--accent-cyan);   border-color: var(--accent-cyan);   background: var(--tint-cyan); }
.sos-badge--violet  { color: var(--accent-violet); border-color: var(--accent-violet); background: rgba(167,139,250,0.12); }
.sos-badge--neutral { color: var(--text-muted);    border-color: var(--text-muted);    background: rgba(107,114,128,0.15); }
.sos-badge--pulse   { animation: pulse-critical 1.5s ease-in-out infinite; }

/* ── Button ── */
.sos-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  font-family: var(--font-mono); font-weight: 700; font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  padding: 0.4rem 0.9rem; cursor: pointer; background: var(--bg-secondary);
  color: var(--text-primary); transition: filter var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.sos-btn:focus-visible { outline: 2px solid var(--station-accent); outline-offset: 2px; }
.sos-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sos-btn--sm { padding: 0.25rem 0.6rem; font-size: 0.7rem; }
.sos-btn--lg { padding: 0.55rem 1.2rem; font-size: var(--text-sm); }

/* Solid family */
.sos-btn--solid.sos-btn--primary { background: var(--accent-blue);   border-color: var(--accent-blue);   color: #fff; }
.sos-btn--solid.sos-btn--danger  { background: var(--accent-red);    border-color: var(--accent-red);    color: #fff; }
.sos-btn--solid.sos-btn--warning { background: var(--accent-yellow); border-color: var(--accent-yellow); color: #000; }
.sos-btn--solid.sos-btn--success { background: var(--accent-green);  border-color: var(--accent-green);  color: #000; }
.sos-btn--solid.sos-btn--neutral { background: var(--bg-secondary);  border-color: var(--border-color);  color: var(--text-primary); }
.sos-btn--solid:not(:disabled):hover { filter: brightness(1.18); }

/* Outline family */
.sos-btn--outline { background: transparent; }
.sos-btn--outline.sos-btn--primary { border-color: var(--station-accent); color: var(--station-accent); }
.sos-btn--outline.sos-btn--primary:not(:disabled):hover { background: var(--tint-blue); }
.sos-btn--outline.sos-btn--danger  { border-color: var(--accent-red); color: var(--accent-red); }
.sos-btn--outline.sos-btn--danger:not(:disabled):hover  { background: var(--tint-red); }
.sos-btn--outline.sos-btn--warning { border-color: var(--accent-yellow); color: var(--accent-yellow); }
.sos-btn--outline.sos-btn--warning:not(:disabled):hover { background: var(--tint-yellow); }
.sos-btn--outline.sos-btn--success { border-color: var(--accent-green); color: var(--accent-green); }
.sos-btn--outline.sos-btn--success:not(:disabled):hover { background: var(--tint-green); }
.sos-btn--outline.sos-btn--neutral { border-color: var(--border-color); color: var(--text-muted); }
.sos-btn--outline.sos-btn--neutral:not(:disabled):hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }

/* ── GaugeBar ── */
.sos-gauge { display: flex; flex-direction: column; gap: var(--space-xs); }
.sos-gauge__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.sos-gauge__label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.sos-gauge__value { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); }
.sos-gauge__track {
  position: relative; height: 20px; background: var(--bg-secondary);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden;
}
.sos-gauge--lg .sos-gauge__track { height: 24px; }
.sos-gauge--sm .sos-gauge__track { height: 12px; }
.sos-gauge__fill { height: 100%; border-radius: 2px; transition: width var(--transition-base); }
.sos-gauge__fill--success { background: var(--accent-green); }
.sos-gauge__fill--warning { background: var(--accent-yellow); }
.sos-gauge__fill--danger  { background: var(--accent-red); }
.sos-gauge__fill--info    { background: var(--accent-blue); }
.sos-gauge__fill--accent  { background: var(--accent-cyan); }
.sos-gauge__marker {
  position: absolute; top: -3px; width: 2px; height: calc(100% + 6px);
  background: var(--accent-yellow); transform: translateX(-50%); pointer-events: none;
}