/* =====================================================================
   OperoOps – Enterprise-Theme
   =====================================================================
   Wird NACH dem bestehenden <style>-Block geladen und überschreibt ihn
   gezielt. Kein Eingriff in die 380-KB-index.html nötig, und einzeln
   zurücknehmbar, indem die Zeile im <head> entfernt wird.

   Leitgedanken:
   - Farbe bedeutet etwas. Teal ist Akzent (aktiv, Link, primäre Aktion),
     nicht Dekoration. Alles andere ist neutrale Graustufe.
   - Status wird über einen kleinen Punkt und normalen Text gezeigt,
     nicht über bunte Pillen. Auf einer Tabelle mit zwanzig Zeilen ist
     das der Unterschied zwischen Ampelkette und lesbarer Übersicht.
   - Höhere Dichte, ruhigere Typografie, keine Versalien in Spaltenköpfen.
   ===================================================================== */

:root {
  /* Akzent – zurückhaltender als das bisherige Teal */
  --teal:    #0F6E56;
  --teal-l:  #EDF5F2;
  --teal-m:  #0F8A68;

  /* Neutrale Skala */
  --bg:        #F7F8F8;
  --bg-card:   #FFFFFF;
  --border:    #E3E5E4;
  --border-s:  #CFD3D1;
  --text:      #1C1F1E;
  --text-s:    #6B7371;
  --text-m:    #949B99;

  /* Status – gedeckt statt Pastell */
  --st-err:    #A32D2D;
  --st-err-bg: #FBF1F1;
  --st-warn:   #8A5A0B;
  --st-warn-bg:#FCF6EA;
  --st-ok:     #0F6E56;
  --st-ok-bg:  #EDF5F2;
  --st-info:   #1A5A8F;
  --st-info-bg:#EEF4FA;

  --sidebar-w: 232px;
  --header-h:  56px;
  --radius:    6px;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  background: var(--bg);
}

/* ── Seitenleiste ─────────────────────────────────────────────────── */
.sidebar {
  background: #14181A;
  border-right: 1px solid #22282A;
}
.sidebar-logo { padding: 16px 18px 14px; border-bottom: 1px solid #22282A; }
.sidebar-logo .name {
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #F2F4F3;
}
.sidebar-logo .sub { font-size: 11px; color: #737C7A; margin-top: 1px; letter-spacing: .01em; }

.nav-label {
  font-size: 10.5px; color: #6A7472; letter-spacing: .06em;
  padding: 14px 18px 6px; font-weight: 500; text-transform: uppercase;
}
.nav-item {
  padding: 7px 18px; font-size: 13px; color: #A8B0AE; gap: 11px;
  border-left: 2px solid transparent; border-radius: 0;
}
.nav-item:hover { background: #1B2123; color: #E6E9E8; }
.nav-item.active {
  background: #1B2123; color: #FFFFFF; font-weight: 500;
  border-left-color: var(--teal-m);
}
.nav-icon {
  width: 16px; height: 16px; display: inline-flex;
  align-items: center; justify-content: center; opacity: .85;
}
.nav-item.active .nav-icon { opacity: 1; }
.nav-icon svg { width: 15px; height: 15px; stroke-width: 1.6; }

.cust-select { margin: 14px 14px 4px; }
.cust-select label {
  font-size: 10.5px; color: #6A7472; letter-spacing: .06em; font-weight: 500;
}
.cust-select select {
  background: #1B2123; border: 1px solid #2C3335; border-radius: var(--radius);
  font-size: 13px; padding: 7px 10px; color: #E6E9E8;
}

/* ── Kopfzeile ────────────────────────────────────────────────────── */
.header {
  height: var(--header-h); border-bottom: 1px solid var(--border);
  padding: 0 22px; gap: 14px;
}
.header-title { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.header-badge {
  background: var(--bg); color: var(--text-s); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 12px; font-weight: 500; padding: 3px 9px;
}

/* ── Flächen ──────────────────────────────────────────────────────── */
.page { padding: 22px; }
.card {
  border-radius: 8px; border: 1px solid var(--border); padding: 18px;
  box-shadow: 0 1px 2px rgba(20,24,26,.03);
}
.card-title {
  font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; margin-bottom: 14px;
}

/* ── Kennzahlen ───────────────────────────────────────────────────── */
.stat-grid { gap: 10px; margin-bottom: 16px; }
.stat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px;
}
.stat-label {
  font-size: 11px; color: var(--text-s); letter-spacing: .04em;
  font-weight: 500; margin-bottom: 6px; text-transform: none;
}
.stat-val {
  font-size: 22px; font-weight: 600; color: var(--text);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.stat-sub { font-size: 11.5px; color: var(--text-m); margin-top: 3px; }

/* ── Status: Punkt plus Text statt bunter Pille ───────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 0; border-radius: 0; background: none !important;
  font-size: 12.5px; font-weight: 400; color: var(--text) !important;
  white-space: nowrap;
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-m); flex-shrink: 0;
}
.badge.ok::before   { background: var(--st-ok); }
.badge.err::before  { background: var(--st-err); }
.badge.warn::before { background: var(--st-warn); }
.badge-dot { display: none; }

/* Zählpillen (z.B. "3 CRITICAL") behalten eine dezente Fläche */
.count-pill {
  display: inline-flex; align-items: center; padding: 1px 7px;
  border-radius: 4px; font-size: 12px; font-weight: 500;
  font-variant-numeric: tabular-nums; margin-right: 5px;
}
.count-pill.err  { background: var(--st-err-bg);  color: var(--st-err); }
.count-pill.warn { background: var(--st-warn-bg); color: var(--st-warn); }
.count-pill.info { background: var(--st-info-bg); color: var(--st-info); }

/* ── Tabellen ─────────────────────────────────────────────────────── */
.tbl { font-size: 13px; }
.tbl th {
  padding: 8px 10px; font-size: 11.5px; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--text-s);
  border-bottom: 1px solid var(--border-s);
}
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.tbl tr:hover td { background: #FAFBFB; }
.tbl td:first-child, .tbl th:first-child { padding-left: 2px; }

/* Zahlen tabellarisch ausrichten */
.tbl td { font-variant-numeric: tabular-nums; }

/* ── Schaltflächen ────────────────────────────────────────────────── */
button, .btn-primary {
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  border-radius: var(--radius); transition: background .12s, border-color .12s;
}
.btn-primary {
  background: var(--teal); color: #fff; border: 1px solid var(--teal);
  padding: 7px 14px;
}
.btn-primary:hover { background: #0C5A46; }

/* ── Formularfelder ───────────────────────────────────────────────── */
input, select, textarea {
  font-family: inherit; font-size: 13px; color: var(--text);
  border-radius: var(--radius) !important; border-color: var(--border-s) !important;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--teal-m) !important;
  box-shadow: 0 0 0 3px rgba(15,138,104,.10);
}
.field label {
  text-transform: none; letter-spacing: 0; font-size: 12px;
  font-weight: 500; color: var(--text-s);
}

/* ── Anmeldung ────────────────────────────────────────────────────── */
.login-wrap { background: #14181A; }
.login-card {
  border-radius: 10px; padding: 36px; box-shadow: 0 8px 32px rgba(0,0,0,.24);
  border: 1px solid #22282A;
}
.login-logo { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.login-sub { font-size: 12.5px; }

/* ── Sonstiges ────────────────────────────────────────────────────── */
.no-cust-icon { opacity: .18; font-size: 40px; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #D6DAD8; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #C0C5C3; }
::-webkit-scrollbar-track { background: transparent; }

/* Keine Emoji-Symbole mehr in der Navigation – falls doch eines
   durchrutscht, wird es wenigstens nicht überdimensioniert dargestellt. */
.nav-icon { font-size: 13px; font-style: normal; }
