/* Ergänzungen zum Tailwind-CDN-Setup */
:root { --brand:#12B547; }
* { -webkit-font-smoothing: antialiased; }

.card { background:#fff; border:1px solid #E5E7EB; border-radius:18px; }
.shadow-soft { box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.12); }

.badge { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .6rem; border-radius:999px; font-size:11px; font-weight:700; }
.badge-ok { background:#E8FBEF; color:#0c8a3a; }
.badge-warning { background:#FFF3DC; color:#b45309; }
.badge-critical { background:#FEE2E2; color:#b91c1c; }
.badge-error { background:#F1F3F5; color:#475467; }
.badge-idle { background:#EEF0F3; color:#8A94A6; }

.progress { height:8px; border-radius:999px; background:#EEF0F3; overflow:hidden; }
.progress > span { display:block; height:100%; border-radius:999px; }

.btn { display:inline-flex; align-items:center; gap:.45rem; font-weight:600; font-size:14px; border-radius:12px; padding:.55rem .95rem; transition:.15s; cursor:pointer; }
.btn-primary { background:var(--brand); color:#fff; }
.btn-primary:hover { background:#0fa23f; }
.btn-ghost { background:#fff; color:#111827; border:1px solid #E5E7EB; }
.btn-ghost:hover { background:#F7F8FA; }
.btn-danger { background:#fff; color:#b91c1c; border:1px solid #FCA5A5; }
.btn-danger:hover { background:#FEF2F2; }

.input { width:100%; border:1px solid #E5E7EB; border-radius:12px; padding:.6rem .8rem; font-size:14px; background:#fff; }
.input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(18,181,71,.15); }
label.lbl { font-size:13px; font-weight:600; color:#374151; margin-bottom:.3rem; display:block; }

.switch { position:relative; display:inline-block; width:42px; height:24px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; inset:0; background:#D1D5DB; border-radius:999px; transition:.2s; }
.slider:before { content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.switch input:checked + .slider { background:var(--brand); }
.switch input:checked + .slider:before { transform:translateX(18px); }

.table-row:hover { background:#FAFAFB; }