/* Bruno Studio — Main Stylesheet
   CSS-Variablen 1:1 aus bruno.css übernommen (docs/style-uebernahme.md)
   Drag-Drop, Custom-Tabs und Resize-Handle bewusst NICHT übernommen.
*/

:root {
  --bg:           #0f0f0f;
  --surface:      #161616;
  --surface2:     #1e1e1e;
  --surface3:     #252525;
  --border:       #2a2a2a;
  --accent:       #FF8800;
  --accent-dim:   rgba(255, 136, 0, 0.15);
  --accent-glow:  rgba(255, 136, 0, 0.4);
  --text:         #e8e8e8;
  --text-dim:     #888;
  --text-muted:   #555;
  --green:        #22c55e;
  --red:          #ef4444;
  --yellow:       #eab308;
  --blue:         #3b82f6;
  --font:         'Montserrat', sans-serif;
  --mono:         'JetBrains Mono', monospace;
  --rail-width:   48px;
  --topbar-h:     48px;
  --chat-w:       300px;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  overflow: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── App Shell ──────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ── Topbar ─────────────────────────────────────────────── */
#topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

#topbar-logo {
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--text);
  white-space: nowrap;
  user-select: none;
}

#topbar-logo span.accent { color: var(--accent); }

#topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-dim);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text);
  cursor: default;
}

.user-chip .user-icon { font-size: 14px; }

.topbar-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}

.topbar-action:hover {
  background: var(--surface2);
  color: var(--text);
  text-decoration: none;
}

.topbar-action.active { color: var(--accent); }

.topbar-logout {
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s;
  text-decoration: none;
}
.topbar-logout:hover { color: var(--text); text-decoration: none; }

/* ── Main Area ──────────────────────────────────────────── */
#main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Chat Spalte (300px fix) ────────────────────────────── */
#chat-col {
  width: var(--chat-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

#chat-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
  user-select: none;
}

#chat-placeholder .chat-ph-icon { font-size: 28px; opacity: 0.4; }
#chat-placeholder .chat-ph-text { font-size: 11px; color: var(--text-muted); }

/* ── Tab Rail (48px senkrecht) ──────────────────────────── */
#tab-rail {
  width: var(--rail-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow: hidden;
  user-select: none;
}

.rail-item {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s, background 0.15s, box-shadow 0.2s;
  position: relative;
  text-decoration: none;
}

.rail-item:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
}

.rail-item.active {
  opacity: 1;
  background: var(--accent-dim);
  box-shadow: inset 2px 0 0 0 var(--accent), 0 0 10px 0 rgba(255, 136, 0, 0.18);
}

.rail-item .rail-icon { font-size: 18px; line-height: 1; }

.rail-item .rail-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-align: center;
  max-width: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-item.active .rail-label { color: var(--accent); }

/* Tooltip via title attr — browser native, no JS needed */

/* ── Content Area ───────────────────────────────────────── */
#content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

.content-inner {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.content-inner::-webkit-scrollbar { width: 6px; }
.content-inner::-webkit-scrollbar-track { background: transparent; }
.content-inner::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Section Headers ────────────────────────────────────── */
.section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* ── Status Kacheln (Tiles) ─────────────────────────────── */
.tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.tile {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}

.tile:hover { border-color: var(--accent); background: var(--surface3); text-decoration: none; }
.tile.no-link { cursor: default; }
.tile.no-link:hover { border-color: var(--border); background: var(--surface2); }

.tile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tile-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tile-status-dot {
  width: 16px;  /* verdoppelt von 8px — rot-grün-Sehschwäche */
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tile-status-dot.green  { background: var(--green); box-shadow: 0 0 6px var(--green); }
.tile-status-dot.yellow { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
.tile-status-dot.red    { background: var(--red); box-shadow: 0 0 6px var(--red); }
.tile-status-dot.grey   { background: var(--text-muted); }

.tile-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.tile-sub {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Placeholder Boxes ──────────────────────────────────── */
.placeholder-box {
  background: var(--surface2);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
}

.placeholder-box .ph-icon { font-size: 32px; margin-bottom: 12px; opacity: 0.4; }
.placeholder-box .ph-title { font-size: 14px; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; }
.placeholder-box .ph-desc { font-size: 12px; }

/* ── Section Boxes (Tests & Gates) ─────────────────────── */
.section-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.section-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-box-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.section-box-body {
  color: var(--text-muted);
  font-size: 12px;
}

/* ── Settings Page ──────────────────────────────────────── */
.settings-section {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  max-width: 480px;
}

.settings-section h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.settings-row:last-child { border-bottom: none; }
.settings-label { color: var(--text-dim); }
.settings-value { color: var(--text); font-weight: 600; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface3);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.lang-btn:hover { border-color: var(--accent); color: var(--text); }
.lang-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* ── Login Page ─────────────────────────────────────────── */
#login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  flex-direction: column;
  gap: 20px;
}

.login-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 36px 40px;
  width: 100%;
  max-width: 380px;
}

.login-logo {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 6px;
  color: var(--text);
}

.login-logo .accent { color: var(--accent); }

.login-subtitle {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  transition: border-color 0.15s;
  outline: none;
}

.form-input:focus { border-color: var(--accent); }
.form-input::placeholder { color: var(--text-muted); }

.login-btn {
  width: 100%;
  padding: 11px;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: #000;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  transition: opacity 0.15s;
}

.login-btn:hover { opacity: 0.88; }
.login-btn:active { opacity: 0.75; }

.login-error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--red);
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.login-lang {
  display: flex;
  gap: 12px;
  justify-content: center;
  font-size: 11px;
}

.login-lang a { color: var(--text-muted); }
.login-lang a:hover { color: var(--text); }
.login-lang a.active { color: var(--accent); font-weight: 600; }

/* ── Utility ────────────────────────────────────────────── */
.text-green  { color: var(--green); }
.text-yellow { color: var(--yellow); }
.text-red    { color: var(--red); }
.text-muted  { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.fw-600 { font-weight: 600; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }

/* ── Run Data Grid (Tests & Gates Live-Daten) ───────────── */
.data-loading { padding: 16px; color: var(--text-muted); font-size: 12px; }
.no-data-hint { padding: 16px; color: var(--text-dim); font-size: 12px; }

.run-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 0;
}
.run-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 5px 12px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.run-row:last-child { border-bottom: none; }
.run-label { color: var(--text-dim); min-width: 140px; flex-shrink: 0; }
.run-val   { color: var(--text); font-weight: 500; }
.run-val.mono, .mono  { font-family: var(--mono); font-size: 11px; }
.run-val.small { font-size: 11px; }
.run-val.status-green  { color: var(--green); }
.run-val.status-yellow { color: var(--yellow); }
.run-val.status-red    { color: var(--red); }

.run-alert {
  margin: 6px 12px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.run-alert.red    { background: rgba(239,68,68,0.12); color: var(--red); border: 1px solid rgba(239,68,68,0.3); }
.run-alert.yellow { background: rgba(234,179,8,0.12); color: var(--yellow); border: 1px solid rgba(234,179,8,0.3); }

/* ── Logs-Lasche (8.1.4 Phase D) ───────────────────────── */

/* Horizontale Tab-Leiste */
.logs-tabs-bar {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 2px;
  padding: 0 0 8px 0;
  margin-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 30;
  background: #0f0f0f; /* explizit opak, kein var(--bg) das ggf. Alpha hat */
}

.logs-tabs-bar::-webkit-scrollbar { height: 4px; }
.logs-tabs-bar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.log-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.log-tab:hover { border-color: var(--accent); color: var(--text); }
.log-tab.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.log-tab .log-tab-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Toolbar (Filter-Zeile + Aktions-Buttons) */
.logs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
  position: sticky;
  top: 44px; /* initial estimate — JS überschreibt nach tabs-bar offsetHeight */
  z-index: 25;
  background: #0f0f0f; /* explizit opak */
}

.logs-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.logs-toolbar-right {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Filter-Button-Gruppen */
.logs-btn-group {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.logs-filter-btn {
  padding: 4px 10px;
  background: var(--surface2);
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}

.logs-filter-btn:last-child { border-right: none; }
.logs-filter-btn:hover { background: var(--surface3); color: var(--text); }
.logs-filter-btn.active { background: var(--accent-dim); color: var(--accent); }

/* Level-spezifische Farben für den aktiven Zustand */
.logs-filter-btn.lvl-info.active  { color: var(--blue); background: rgba(59,130,246,0.1); }
.logs-filter-btn.lvl-warn.active  { color: var(--yellow); background: rgba(234,179,8,0.1); }
.logs-filter-btn.lvl-error.active { color: var(--red); background: rgba(239,68,68,0.1); }
.logs-filter-btn.lvl-debug.active { color: var(--text-muted); background: var(--surface3); }

/* Volltext-Suche */
.logs-q-input {
  padding: 4px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font);
  font-size: 11px;
  width: 180px;
  outline: none;
  transition: border-color 0.15s;
}

.logs-q-input:focus { border-color: var(--accent); }
.logs-q-input::placeholder { color: var(--text-muted); }

/* Aktions-Buttons (Live / Export) */
.logs-action-btn {
  padding: 4px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  cursor: not-allowed;
  opacity: 0.45;
  white-space: nowrap;
}

/* Log-Tabelle */
.logs-table-wrap {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto; /* eigener Scroll-Container: thead sticky top:0 innerhalb, rows scrollen hier */
  min-height: 0;    /* flex-shrink korrekt, max-height greift */
  /* max-height wird per JS gesetzt (window.innerHeight - wrap.getBoundingClientRect().top - footer) */
}

.logs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: var(--font);
}

.logs-table thead tr {
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}

.logs-table th {
  padding: 6px 10px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  position: sticky;
  top: 0; /* relativ zu .logs-table-wrap (dem scroll-container), nicht content-inner */
  background: #1e1e1e; /* surface2 als expliziter Wert — kein Alpha */
  z-index: 4;
}

.logs-table .lt-ts  { width: 108px; }
.logs-table .lt-lvl { width: 68px; }
.logs-table .lt-msg { width: auto; }

.log-row {
  border-bottom: 1px solid rgba(42, 42, 42, 0.6);
  transition: background 0.1s;
}

.log-row:hover { background: var(--surface2); }

.logs-table td {
  padding: 4px 10px;
  vertical-align: top;
}

.log-ts {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 10px;
  white-space: nowrap;
}

.log-msg {
  color: var(--text);
  word-break: break-word;
  line-height: 1.45;
}

/* Level-Badges */
.log-level {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.lvl-error   { color: var(--red);    background: rgba(239,68,68,0.12); }
.lvl-warn    { color: var(--yellow); background: rgba(234,179,8,0.1); }
.lvl-info    { color: var(--blue);   background: rgba(59,130,246,0.1); }
.lvl-debug   { color: var(--text-muted); background: var(--surface3); }
.lvl-unknown { color: var(--text-muted); background: var(--surface3); }

/* Footer: Zähler + Mehr-laden */
.logs-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  flex-shrink: 0;
}

.logs-counter {
  font-size: 11px;
  color: var(--text-muted);
}

.logs-load-more-btn {
  padding: 5px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.logs-load-more-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Phase E: aktive Action-Buttons */
.logs-action-btn:not([disabled]) {
  cursor: pointer;
  opacity: 1;
  color: var(--text-dim);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.logs-action-btn:not([disabled]):hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.logs-action-btn.live-active {
  background: rgba(239, 68, 68, 0.12);
  border-color: var(--red);
  color: var(--red) !important;
  opacity: 1 !important;
  cursor: pointer;
}

/* Phase E: Zeilen-Selektion */
.log-row { cursor: pointer; }
.log-row.log-row-selected { background: rgba(129, 140, 248, 0.15); }
.log-row.log-row-selected:hover { background: rgba(129, 140, 248, 0.22); }

/* Phase E: neue Zeilen im Live-Modus */
@keyframes logNewPulse {
  0%   { background: rgba(234, 179, 8, 0.30); }
  100% { background: transparent; }
}
.log-row-new { animation: logNewPulse 2s ease-out forwards; }
.log-row-new.log-row-selected { animation: none; }

/* Phase E: Live-Hinweis-Pill (fixed oben, unterhalb sticky headers) */
.logs-live-hint {
  display: none;
  position: fixed;
  top: 120px; /* initial estimate — JS setzt exakten Wert */
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 16px;
  border-radius: 14px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  z-index: 200;
  transition: opacity 0.15s;
}
.logs-live-hint:hover { opacity: 0.85; }

/* Phase E: Selection-Zähler */
.logs-select-info {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Mobile (≤500px): kompaktere Darstellung */
@media (max-width: 500px) {
  .logs-toolbar { gap: 8px; }
  .logs-toolbar-left { gap: 6px; }
  .logs-q-input { width: 120px; }
  .logs-table .lt-ts { width: 80px; }
  .log-ts { font-size: 9px; }
}

/* ── Drift List ─────────────────────────────────────────── */
.drift-ok {
  padding: 12px 16px;
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
}
.drift-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px 8px;
  max-height: 340px;
  overflow-y: auto;
}
.drift-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.4;
}
.drift-item.warn  { background: rgba(234,179,8,0.06); }
.drift-item.error { background: rgba(239,68,68,0.08); }
.drift-sev { flex-shrink: 0; width: 14px; font-size: 11px; }
.drift-item.warn  .drift-sev { color: var(--yellow); }
.drift-item.error .drift-sev { color: var(--red); }
.drift-msg { color: var(--text-dim); font-family: var(--mono); }

/* ── Container-Health-Lasche (8.1.5 Phase E) ─────────────── */

.health-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 12px 0;
  margin-bottom: 8px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
}

.health-toolbar-left,
.health-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.health-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.health-refresh-info {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--mono, monospace);
}

.health-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.health-action-btn:hover:not(:disabled) {
  background: var(--surface3);
  color: var(--text);
  border-color: var(--text-muted);
}
.health-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.health-action-btn.live-active {
  background: rgba(34,197,94,0.15);
  color: var(--green);
  border-color: var(--green);
}

.health-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 24px;
}

.health-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.health-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 38px;
  z-index: 20;
  background: var(--bg);
}

.health-section-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.health-empty-hint {
  padding: 14px 16px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 6px;
  text-align: center;
}

.health-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.health-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.health-tile:hover {
  background: var(--surface2);
  border-color: var(--text-muted);
}
.health-tile:active {
  transform: scale(0.99);
}

.health-tile-yellow { background: rgba(234,179,8,0.08); border-color: rgba(234,179,8,0.3); }
.health-tile-red    { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.35); }
.health-tile-grey   { background: rgba(136,136,136,0.06); border-color: rgba(136,136,136,0.25); }

.health-tile-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.health-tile-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}
.health-tile-ver {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--mono, monospace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}
.health-tile-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.health-tile-status-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.health-tile-short {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--mono, monospace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.health-tile-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 700;
  color: var(--red);
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.4);
  border-radius: 10px;
  letter-spacing: 0.02em;
}

@keyframes health-tile-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.health-tile-pulse {
  animation: health-tile-pulse 1.5s ease-out;
}

/* ── Modal ────────────────────────────────────────────────── */

.health-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}

.health-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.health-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.health-modal-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.env-badge {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
}
.env-prod   { background: rgba(239,68,68,0.18); color: var(--red); border: 1px solid rgba(239,68,68,0.3); }
.env-dev    { background: rgba(34,197,94,0.15); color: var(--green); border: 1px solid rgba(34,197,94,0.3); }
.env-shared { background: rgba(234,179,8,0.15); color: var(--yellow); border: 1px solid rgba(234,179,8,0.3); }

.health-modal-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.health-modal-close:hover { color: var(--text); }

.health-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
  font-size: 12px;
  color: var(--text);
}

.health-modal-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 12px;
}
.health-modal-status .tile-status-dot {
  width: 24px;
  height: 24px;
}
.health-modal-status-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.health-modal-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  background: var(--surface2);
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 11px;
}
.meta-label {
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 10px;
}

.health-modal-section-title {
  margin-top: 14px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.health-modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: var(--mono, monospace);
}
.health-modal-table th,
.health-modal-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.health-modal-table th {
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 10px;
}

.check-status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
}
.check-green  { background: rgba(34,197,94,0.18); color: var(--green); }
.check-yellow { background: rgba(234,179,8,0.18); color: var(--yellow); }
.check-red    { background: rgba(239,68,68,0.18); color: var(--red); }
.check-grey   { background: rgba(136,136,136,0.12); color: var(--text-muted); }

.health-modal-history {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.history-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.history-dot.green  { background: var(--green); }
.history-dot.yellow { background: var(--yellow); }
.history-dot.red    { background: var(--red); }
.history-dot.grey   { background: var(--text-muted); }

.health-modal-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 500px) {
  .health-tile-grid {
    grid-template-columns: 1fr;
  }
  .health-modal-overlay { padding: 0; }
  .health-modal {
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
  .health-toolbar { flex-wrap: wrap; }
}

/* ── CI-Sektionen (8.1.6 Phase D) ───────────────────────────────────────── */

.btn-refresh-small {
  margin-left: auto;
  padding: 2px 10px;
  font-size: 11px;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.15s;
}
.btn-refresh-small:hover { background: var(--surface2); color: var(--text); }
.btn-refresh-small:disabled { opacity: 0.5; cursor: not-allowed; }

.ci-branches {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ci-branch-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s;
  flex-wrap: wrap;
}
.ci-branch-block:hover { border-color: var(--accent); text-decoration: none; }

.ci-branch-block.status-green  { border-left: 3px solid var(--green); }
.ci-branch-block.status-red    { border-left: 3px solid var(--red); }
.ci-branch-block.status-yellow { border-left: 3px solid var(--yellow); }
.ci-branch-block.status-blue   { border-left: 3px solid var(--blue); }
.ci-branch-block.status-grey   { border-left: 3px solid var(--text-muted); }
.ci-branch-block.no-run        { opacity: 0.6; cursor: default; }
.ci-branch-block.no-run:hover  { border-color: var(--border); }

.ci-branch-label      { font-weight: 700; min-width: 36px; color: var(--text); font-size: 12px; }
.ci-branch-conclusion { font-size: 11px; font-weight: 600; }
.ci-branch-block.status-green  .ci-branch-conclusion { color: var(--green); }
.ci-branch-block.status-red    .ci-branch-conclusion { color: var(--red); }
.ci-branch-block.status-yellow .ci-branch-conclusion { color: var(--yellow); }
.ci-branch-block.status-blue   .ci-branch-conclusion { color: var(--blue); }
.ci-branch-commit     { font-size: 11px; color: var(--text-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-branch-tests      { font-size: 11px; color: var(--text-muted); }
.ci-branch-dur        { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.grey-text            { color: var(--text-muted); }

/* CI-Budget Fortschritts-Balken */
.ci-budget-ok { display: flex; flex-direction: column; gap: 8px; }

.ci-progress-bar-wrap {
  height: 8px;
  border-radius: 4px;
  background: var(--surface3);
  overflow: hidden;
}
.ci-progress-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.ci-progress-bar.green  { background: var(--green); }
.ci-progress-bar.yellow { background: var(--yellow); }
.ci-progress-bar.red    { background: var(--red); }

.ci-budget-stats {
  display: flex;
  gap: 16px;
  align-items: baseline;
}
.ci-budget-pct     { font-size: 15px; font-weight: 700; }
.ci-budget-mintext { font-size: 12px; color: var(--text-muted); }
.ci-budget-reset   { font-size: 11px; color: var(--text-muted); }

.ci-budget-deprecated { display: flex; flex-direction: column; gap: 8px; }
.ci-budget-hint       { font-size: 11px; color: var(--text-muted); }
.ci-budget-hint code  { font-family: var(--mono); font-size: 10px; background: var(--surface3); padding: 1px 4px; border-radius: 3px; }

/* status-* Text-Farben (ergaenzen vorhandene Ampel-Klassen) */
.status-green  { color: var(--green); }
.status-yellow { color: var(--yellow); }
.status-red    { color: var(--red); }

/* ── CI Mobile (8.1.6 Phase E) ───────────────────────────── */
@media (max-width: 500px) {
  .section-box-header { flex-wrap: wrap; gap: 6px; }
  .btn-refresh-small  { margin-left: 0; min-height: 32px; min-width: 32px; }
  .ci-branch-commit   { min-width: 0; white-space: normal; word-break: break-word; }
  .ci-progress-bar-wrap { min-width: 80px; }
  .ci-budget-stats    { flex-wrap: wrap; gap: 8px; }
}

/* ── Gate-Pulse Status-Dots (8.1.7 Phase G) ─────────────── */
.tile-status-dot.blue   { background: var(--blue);   box-shadow: 0 0 6px var(--blue); }
.tile-status-dot.orange { background: #f97316;        box-shadow: 0 0 6px #f97316; }

/* ── Gate-Pulsmesser Kacheln (8.1.7 Phase G) ────────────── */
.gate-pulse-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 4px 0;
}

.gate-pulse-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left-width: 3px;
  min-height: 130px;
  transition: border-color 0.2s, background 0.2s;
}

/* Status-Farben via linker Border + dezenter Hintergrund-Tint */
.tile-gp-green     { border-left-color: var(--green);  background: rgba(34,197,94,0.04); }
.tile-gp-yellow    { border-left-color: var(--yellow); background: rgba(234,179,8,0.04); }
.tile-gp-red       { border-left-color: var(--red);    background: rgba(239,68,68,0.04); }
.tile-gp-orange    { border-left-color: #f97316;       background: rgba(249,115,22,0.04); }
.tile-gp-blue-grey { border-left-color: var(--blue);   background: rgba(59,130,246,0.04); }
.tile-gp-grey      { border-left-color: var(--border); }

.gp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.gp-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.gp-count {
  font-size: 2.8em;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -0.02em;
}

.tile-gp-green  .gp-count { color: var(--green); }
.tile-gp-red    .gp-count { color: var(--red); }
.tile-gp-yellow .gp-count { color: var(--yellow); }
.tile-gp-orange .gp-count { color: #f97316; }
.tile-gp-grey   .gp-count { color: var(--text-muted); }

.gp-sub {
  font-size: 11px;
  color: var(--text-dim);
  min-height: 16px;
}

.gp-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  flex: 1;
}

.gp-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.gp-time { font-size: 11px; color: var(--text-muted); }

.gp-sha {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  background: var(--surface3);
  padding: 1px 5px;
  border-radius: 3px;
}

.gp-dur {
  font-size: 10px;
  color: var(--text-muted);
}

/* Mobile: Kacheln untereinander */
@media (max-width: 768px) {
  .gate-pulse-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   Alarme-Lasche + globaler Banner/Bell-Badge (8.1.9 Phase C)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Utility (mono + text-dim) ────────────────────────────────────────── */
.mono { font-family: var(--mono); font-size: 11px; }
.text-dim { color: var(--text-dim); }

/* ── Banner unter Topbar ──────────────────────────────────────────────── */
.alarm-banner {
  background: #b91c1c;
  color: #fff;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-bottom: 1px solid #7f1d1d;
  user-select: none;
  z-index: 90;
}
.alarm-banner:hover { background: #dc2626; }
.alarm-banner-text { flex: 1; }
.alarm-banner-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  margin-left: 12px;
  opacity: 0.75;
}
.alarm-banner-close:hover { opacity: 1; }

/* ── Bell-Button im Header ────────────────────────────────────────────── */
.alarm-bell-btn {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
}
.alarm-bell-btn .bell-icon { font-size: 16px; }
.alarm-bell-btn .bell-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}
.alarm-bell-btn.has-red .bell-icon { color: var(--red); }

/* ── Bell-Dropdown ────────────────────────────────────────────────────── */
.alarm-bell-dropdown {
  display: none;
  width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  z-index: 1000;
}
.alarm-bell-dropdown.open { display: block; }
.bell-dropdown-empty {
  padding: 16px;
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
}
.bell-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.bell-dropdown-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.bell-dropdown-item:last-child { border-bottom: none; }
.bell-item-head { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.bell-item-id { color: var(--text); }
.bell-item-meta { color: var(--text-dim); margin-top: 2px; }
.bell-item-excerpt { color: var(--text-muted); margin-top: 2px; font-family: var(--mono); font-size: 10px; }
.bell-dropdown-footer {
  display: block;
  padding: 10px 14px;
  background: var(--surface2);
  color: var(--accent);
  text-align: center;
  font-size: 12px;
  text-decoration: none;
  border-top: 1px solid var(--border);
}
.bell-dropdown-footer:hover { background: var(--surface3); text-decoration: none; }

/* ── Alarme-Lasche: Header ────────────────────────────────────────────── */
.alarme-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.alarme-header-left { flex: 1; min-width: 200px; }
.alarme-subtitle {
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 4px;
}
.alarme-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* ── Toggle "Alarm-Schicht aktiv" ─────────────────────────────────────── */
.alarme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
}
.alarme-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.alarme-toggle-slider {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--surface3);
  transition: background 0.2s;
  flex-shrink: 0;
}
.alarme-toggle-slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text);
  transition: transform 0.2s;
}
.alarme-toggle input:checked + .alarme-toggle-slider { background: var(--green); }
.alarme-toggle input:checked + .alarme-toggle-slider::after { transform: translateX(16px); }
.alarme-toggle input:disabled + .alarme-toggle-slider { opacity: 0.5; cursor: wait; }
.alarme-toggle-label { color: var(--text); }
.alarme-limit-label { font-size: 11px; color: var(--text-muted); }

.alarme-warning {
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid var(--yellow);
  color: var(--yellow);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 16px;
}

.alarme-section { margin-bottom: 24px; }
.alarme-section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-bottom: 10px;
}

/* ── Wächter-Grid ─────────────────────────────────────────────────────── */
.alarme-watchdog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.alarme-watchdog-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
}
.alarme-watchdog-card.status-red {
  border-color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}
.alarme-watchdog-card.status-green { border-color: var(--border); }
.alarme-watchdog-card.status-grey  { border-color: var(--border); opacity: 0.85; }
.alarme-watchdog-card .aw-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.alarme-watchdog-card .aw-id {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.alarme-watchdog-card .aw-status {
  margin-left: auto;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}
.alarme-watchdog-card.status-red .aw-status { color: var(--red); }
.alarme-watchdog-card.status-green .aw-status { color: var(--green); }
.alarme-watchdog-card .aw-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--text-dim);
}
.alarme-watchdog-card .aw-meta-label { color: var(--text-muted); }
.alarme-watchdog-card .aw-meta-val { color: var(--text-dim); }

/* ── Audit-Toolbar + Tabelle ──────────────────────────────────────────── */
.alarme-audit-toolbar {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.alarme-toolbar-field {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-dim);
}
.alarme-toolbar-field select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  min-width: 160px;
}
.alarme-audit-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 480px;
  overflow-y: auto;
}
.alarme-audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.alarme-audit-table th {
  background: var(--surface2);
  color: var(--text-dim);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.alarme-audit-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.alarme-audit-table tr:last-child td { border-bottom: none; }
.alarme-audit-table .alarme-trans.is-red   { color: var(--red); font-weight: 600; }
.alarme-audit-table .alarme-trans.is-green { color: var(--green); }
.alarme-audit-table .is-yes { color: var(--green); font-weight: 600; }
.alarme-audit-table .is-no  { color: var(--text-dim); }

/* ── Toast ────────────────────────────────────────────────────────────── */
.alarme-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  padding: 10px 16px;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  z-index: 9999;
}
.alarme-toast.is-ok    { background: #16a34a; }
.alarme-toast.is-error { background: #b91c1c; }