/* =========================================================================
   Serverpark-Suite Design System (dehari.de, künftig noob-offensive.com)
   -------------------------------------------------------------------------
   Gemeinsame Grundlage für Haushaltsbuch, Server-Status, TS3-Panel und
   die Kommandozentrale (/panel). Eine Quelle der Wahrheit für Farben,
   Typografie, Abstände und Basis-Komponenten – jede App bindet diese
   Datei per <link> ein und ergänzt in ihrer eigenen style.css nur noch
   app-spezifische Teile.

   Leitidee: flache, präzise Flächen statt Glas – Tiefe entsteht über
   eine feste Elevationsstufe + Haarlinie, nicht über Weichzeichner oder
   Transparenz. EIN Akzent pro App zur Wiedererkennung (--accent wird in
   jeder App-eigenen style.css auf --app-* gesetzt); alles, was eine
   Kennzahl statt einer Aktion ist (Ringe, Kontostände), bekommt bewusst
   NICHT den Akzent, sondern das neutrale --color-info-Blau – Farbe soll
   sagen "das kannst du anklicken", nicht nur "das ist wichtig". Eine
   einzige Schriftfamilie (IBM Plex) für Display, Fließtext und Zahlen,
   in unterschiedlichen Schnitten statt drei fremder Familien. Kleine
   Mikro-Labels (Nav, Tabellenköpfe, Badges) sind durchgehend Mono –
   ein wiederkehrendes, technisches Signal, das sich durch die ganze
   Suite zieht. Bewegung nur dort, wo sie etwas erklärt.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---- Suite-Akzent (Standard: Indigo). Haushaltsbuch erlaubt dem
     Nutzer weiterhin, --accent pro Konto zu überschreiben. ---- */
  --accent: #7C6AF0;
  --accent-rgb: 124, 106, 240;
  --accent-dark: #5B4CD6;
  --accent-light: #A79BFF;

  /* ---- App-Identitäten (für Brand-Mark & Suite-Switcher) ---- */
  --app-haushaltsbuch: #7C6AF0;
  --app-status: #2DD4BF;
  --app-ts3: #F5A623;
  --app-panel: #EC6FCB;

  /* ---- Semantik ---- */
  --color-income: #34D399;
  --color-expense: #FB7185;
  --color-fixed: #F5A623;
  --color-info: #60A5FA;
  --color-danger: #F0554A;
  --color-warning: #F5A623;
  --color-ok: #34D399;
  --color-down: #F0554A;

  /* ---- Radien & Bewegung: knapp und gerade, keine Bubble-Ecken ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-full: 999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 130ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ---- Typografie: eine Familie, zwei Rollen ---- */
  --font-display: 'IBM Plex Sans', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;

  /* ---- Abstandsraster (8pt) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px;
}

/* -------------------------------------------------------------------------
   Dark Mode (Standard) – ruhiges Kohle-Navy statt reinem Schwarz.
   Feste Elevationsstufen statt Alpha-Flächen: eine Karte auf einer Karte
   bleibt vorhersagbar, statt sich durch gestapelte Transparenz aufzuhellen.
   ------------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
  --bg-base: #0B0C10;
  --bg-base-rgb: 11, 12, 16;
  --bg-elevated: #15171E;
  --bg-sunken: #060709;

  --surface: #15171E;
  --surface-strong: #1B1E27;
  --surface-hover: #1F222C;
  --border: #23262F;
  --border-strong: #2E323D;

  --text-primary: #F3F4F8;
  --text-secondary: #9CA3B8;
  --text-muted: #5D6478;

  --shadow-color: rgba(0, 0, 0, 0.55);
  --sidebar-bg: #0E0F14;
  --input-bg: #1A1C24;
  --scrim: rgba(4, 5, 8, 0.7);
}

/* -------------------------------------------------------------------------
   Light Mode – warmes, kontrastarmes Off-White statt Klinik-Weiß
   ------------------------------------------------------------------------- */
[data-theme="light"] {
  --bg-base: #F2F2F6;
  --bg-base-rgb: 242, 242, 246;
  --bg-elevated: #FFFFFF;
  --bg-sunken: #E7E7ED;

  --surface: #FFFFFF;
  --surface-strong: #EEEEF3;
  --surface-hover: #F5F5F8;
  --border: #E2E2E9;
  --border-strong: #CBCBD6;

  --text-primary: #16161F;
  --text-secondary: #55566B;
  --text-muted: #8A8BA0;

  --shadow-color: rgba(30, 30, 50, 0.10);
  --sidebar-bg: #FFFFFF;
  --input-bg: #F5F5F8;
  --scrim: rgba(20, 20, 30, 0.4);
}

/* -------------------------------------------------------------------------
   Reset & Basis
   ------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.55;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

/* Signature-Verlauf: nur EIN sanfter Lichtkegel oben rechts, kein
   Glow-Teppich über der ganzen Fläche. */
body.has-mesh {
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(var(--accent-rgb), 0.12), transparent 60%),
    var(--bg-base);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0 0 0.4em;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
h1 { font-size: 1.85rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 0.75em; color: var(--text-secondary); }
a { color: inherit; text-decoration: none; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

::selection { background: rgba(var(--accent-rgb), 0.32); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }

:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.65);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* -------------------------------------------------------------------------
   Layout: Sidebar-Shell (Haushaltsbuch)
   ------------------------------------------------------------------------- */
.app-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  padding: var(--sp-5) var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-6);
  position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40;
}

.brand { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-2); }
.brand-mark {
  width: 36px; height: 36px; border-radius: var(--radius-md);
  background: linear-gradient(150deg, var(--accent-light), var(--accent-dark));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  box-shadow: 0 4px 14px -4px rgba(var(--accent-rgb), 0.6);
  flex-shrink: 0;
}
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.brand-sub { font-size: 0.71rem; color: var(--text-muted); }

.nav-group { display: flex; flex-direction: column; gap: 0.15rem; }
.nav-label {
  font-family: var(--font-mono);
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-muted); margin: var(--sp-4) var(--sp-2) var(--sp-1);
  font-weight: 600;
}
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0.56rem 0.65rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.87rem; font-weight: 500;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  position: relative;
}
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.8; }
.nav-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.nav-item.active { background: rgba(var(--accent-rgb), 0.13); color: var(--accent-light); }
.nav-item.active svg { opacity: 1; }
.nav-item .badge-count {
  margin-left: auto; background: var(--color-fixed); color: #1a1305;
  font-size: 0.66rem; font-weight: 700; padding: 0.08rem 0.4rem; border-radius: var(--radius-full);
}

.sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-2); }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.topbar h1 { font-size: 1.2rem; margin: 0; }
.topbar-spacer { flex: 1; }
.menu-toggle { display: none; }

.content { padding: var(--sp-6) var(--sp-6) var(--sp-9); }

/* -------------------------------------------------------------------------
   Layout: einfache zentrierte Shell (Status, TS3, Panel)
   ------------------------------------------------------------------------- */
.shell { max-width: 1140px; margin: 0 auto; padding: var(--sp-7) var(--sp-4) var(--sp-9); }
.shell .topbar {
  position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: none; padding: 0 0 var(--sp-6);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
}

/* -------------------------------------------------------------------------
   Suite-Switcher: sichtbares Zeichen für "ein Login, alle Apps"
   ------------------------------------------------------------------------- */
.suite-switcher { position: relative; }
.suite-switcher-trigger {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 0.4rem 0.75rem 0.4rem 0.4rem;
  cursor: pointer; color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.suite-switcher-trigger:hover { border-color: var(--border-strong); color: var(--text-primary); }
.suite-switcher-trigger .dots {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; padding: 4px;
  background: var(--surface-strong);
}
.suite-switcher-trigger .dots span { border-radius: 2px; background: var(--text-muted); }

.suite-menu {
  position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 60;
  width: 250px; padding: 0.4rem;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: 0 20px 48px -14px var(--shadow-color);
  opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.suite-switcher.open .suite-menu { opacity: 1; transform: none; pointer-events: auto; }
.suite-menu-item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.65rem; border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease);
}
.suite-menu-item:hover { background: var(--surface-hover); }
.suite-menu-item .mark {
  width: 30px; height: 30px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.7rem; font-weight: 700;
}
.suite-menu-item .label { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.suite-menu-item .desc { font-size: 0.71rem; color: var(--text-muted); }
.suite-menu-item.is-current { background: var(--surface); }
.suite-menu-divider { height: 1px; background: var(--border); margin: 0.35rem 0.3rem; }
.suite-menu-signout {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.65rem;
  font-size: 0.8rem; color: var(--text-muted); border-radius: var(--radius-sm);
}
.suite-menu-signout:hover { background: var(--surface-hover); color: var(--color-danger); }

/* -------------------------------------------------------------------------
   Karten
   ------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: 0 1px 2px -1px var(--shadow-color);
  transition: border-color var(--dur-base) var(--ease);
}
.card:hover { border-color: var(--border-strong); }
.card-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.card-title-row h3 { margin: 0; }
.card-title-row .muted-link { font-size: 0.79rem; color: var(--text-muted); }
.card-title-row .muted-link:hover { color: var(--accent-light); }

.grid { display: grid; gap: var(--sp-4); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-main { grid-template-columns: 2fr 1fr; }

/* ---- Hero: Tatsächlich verfügbares Geld ---- */
.hero-available {
  grid-column: 1 / -1; position: relative; overflow: hidden; padding: var(--sp-7);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.01) 65%), var(--surface);
}
.hero-available::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(380px 200px at 90% 8%, rgba(var(--accent-rgb), 0.20), transparent 70%);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.3fr auto; gap: var(--sp-7); align-items: center; position: relative; }
.hero-label {
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-secondary); font-weight: 600; display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem;
}
.hero-amount {
  font-family: var(--font-display); font-size: clamp(2.3rem, 5vw, 3.4rem); font-weight: 700;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1;
}
.hero-amount .cents { font-size: 0.5em; color: var(--text-secondary); }
.hero-sub { margin-top: 0.55rem; font-size: 0.84rem; color: var(--text-secondary); }
.hero-sub strong { color: var(--text-primary); }
.hero-ring-wrap { position: relative; width: 140px; height: 140px; }
.hero-ring-wrap svg { transform: rotate(-90deg); }
.hero-ring-track { fill: none; stroke: var(--border-strong); stroke-width: 9; }
.hero-ring-value { fill: none; stroke: var(--color-info); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 900ms var(--ease); }
.hero-ring-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.hero-ring-center .pct { font-family: var(--font-mono); color: var(--color-info); font-weight: 700; font-size: 1.3rem; }
.hero-ring-center .lbl { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }

/* ---- Metric-Karten ---- */
.metric-card { display: flex; flex-direction: column; gap: 0.5rem; }
.metric-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.12); color: var(--accent-light);
}
.metric-icon svg { width: 18px; height: 18px; }
.metric-icon.is-expense { background: rgba(251, 113, 133, 0.14); color: var(--color-expense); }
.metric-icon.is-fixed { background: rgba(245, 166, 35, 0.14); color: var(--color-fixed); }
.metric-icon.is-info { background: rgba(96, 165, 250, 0.14); color: var(--color-info); }
.metric-label {
  font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-secondary); font-weight: 600;
}
.metric-value { font-family: var(--font-mono); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.01em; }
.metric-trend { font-size: 0.74rem; display: flex; align-items: center; gap: 0.25rem; }
.metric-trend.up { color: var(--color-income); }
.metric-trend.down { color: var(--color-expense); }

/* -------------------------------------------------------------------------
   Buttons & Formulare
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.6rem 1.05rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-strong);
  color: var(--text-primary);
  font-family: var(--font-body); font-size: 0.86rem; font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent); color: #fff;
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-danger { background: rgba(240, 85, 74, 0.13); border-color: rgba(240, 85, 74, 0.3); color: #FDA9A2; }
.btn-danger:hover { background: rgba(240, 85, 74, 0.2); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-hover); }
.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.77rem; }
.btn-icon { padding: 0.52rem; }
.btn svg { width: 16px; height: 16px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

label { display: block; font-size: 0.79rem; font-weight: 500; color: var(--text-secondary); margin: 0 0 0.4rem; }
input, select, textarea {
  width: 100%; font-family: var(--font-body);
  background: var(--input-bg); border: 1px solid var(--border-strong);
  color: var(--text-primary); border-radius: var(--radius-sm);
  padding: 0.6rem 0.78rem; font-size: 0.89rem;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}
input[type="file"] { padding: 0.45rem; font-size: 0.81rem; }
.field { margin-bottom: var(--sp-4); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.checkbox-row { display: flex; align-items: center; gap: 0.5rem; }
.checkbox-row input { width: auto; }
.checkbox-row label { margin: 0; }

/* -------------------------------------------------------------------------
   Tabellen
   ------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table, .data-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
th, .data-table th {
  text-align: left; font-weight: 600; color: var(--text-muted);
  font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border);
}
td, .data-table td { padding: 0.72rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr.tx-row:hover, .data-table tr:hover td { background: var(--surface-hover); }

.tx-icon {
  width: 33px; height: 33px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-strong); margin-right: 0.6rem;
}
.amount-positive { color: var(--color-income); font-family: var(--font-mono); font-weight: 600; }
.amount-negative { color: var(--text-primary); font-family: var(--font-mono); font-weight: 600; }

.badge, .pill, .status-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.22rem 0.58rem; border-radius: var(--radius-full);
  background: var(--surface-strong); color: var(--text-secondary);
}
.badge-success, .status-badge.up, .status-badge.ok, .status-badge.online { background: rgba(52, 211, 153, 0.14); color: #6EE7B7; }
.badge-warning, .status-badge.warn { background: rgba(245, 166, 35, 0.16); color: #FCD38A; }
.badge-danger, .status-badge.down, .status-badge.banned { background: rgba(240, 85, 74, 0.14); color: #FDA9A2; }
.status-badge.unknown { background: var(--surface-strong); color: var(--text-muted); }

.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.status-dot.up, .status-dot.online { background: var(--color-ok); box-shadow: 0 0 8px rgba(52, 211, 153, 0.6); }
.status-dot.down, .status-dot.offline { background: var(--color-down); box-shadow: 0 0 8px rgba(240, 85, 74, 0.5); }
.status-dot.unknown { background: var(--text-muted); }

.service-row { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 0; border-bottom: 1px solid var(--border); }
.service-row:last-child { border-bottom: none; }
.service-name { display: flex; align-items: center; gap: 0.6rem; font-weight: 500; font-size: 0.9rem; }
.service-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; }

/* -------------------------------------------------------------------------
   Empty States / Alerts / Flash
   ------------------------------------------------------------------------- */
.empty-state { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--text-muted); }
.empty-state svg { width: 38px; height: 38px; margin-bottom: 0.7rem; opacity: 0.5; }

.alert-overdue, .flash {
  border-radius: var(--radius-lg); padding: 0.85rem 1.05rem; margin-bottom: var(--sp-4);
  display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.87rem;
}
.alert-overdue { background: rgba(240, 85, 74, 0.1); border: 1px solid rgba(240, 85, 74, 0.3); }
.alert-overdue .alert-icon { color: var(--color-danger); flex-shrink: 0; margin-top: 0.1rem; }
.alert-overdue .alert-icon svg { width: 20px; height: 20px; }
.alert-overdue-title { font-weight: 600; color: #FDA9A2; font-size: 0.9rem; }
.alert-overdue-list { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.3rem; display: flex; flex-direction: column; gap: 0.15rem; }
.alert-overdue-list strong { color: var(--text-primary); }

.flash.success { background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.3); color: #6EE7B7; }
.flash.error { background: rgba(240, 85, 74, 0.1); border: 1px solid rgba(240, 85, 74, 0.3); color: #FDA9A2; }

/* -------------------------------------------------------------------------
   Login-Seiten
   ------------------------------------------------------------------------- */
.auth-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-5);
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(var(--accent-rgb), 0.16), transparent 60%),
    radial-gradient(700px 420px at 100% 100%, rgba(var(--accent-rgb), 0.08), transparent 55%),
    var(--bg-base);
}
.auth-card {
  width: 100%; max-width: 400px; padding: 2.1rem 1.9rem;
  animation: authIn 480ms var(--ease);
  background: var(--bg-elevated);
}
@keyframes authIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.auth-logo { display: flex; justify-content: center; margin-bottom: var(--sp-4); }
.auth-title { text-align: center; margin-bottom: 0.25rem; }
.auth-sub { text-align: center; margin-bottom: 1.5rem; font-size: 0.85rem; }
.auth-error {
  background: rgba(240, 85, 74, 0.1); border: 1px solid rgba(240, 85, 74, 0.3);
  color: #FDA9A2; padding: 0.68rem 0.85rem; border-radius: var(--radius-sm);
  font-size: 0.82rem; margin-bottom: var(--sp-4);
}
.auth-suite-note {
  display: flex; align-items: center; gap: 0.5rem; justify-content: center;
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border);
  font-size: 0.72rem; color: var(--text-muted);
}
.auth-suite-note .marks { display: flex; }
.auth-suite-note .marks span {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bg-elevated);
  margin-left: -6px; display: inline-block;
}
.auth-suite-note .marks span:first-child { margin-left: 0; }

/* -------------------------------------------------------------------------
   Theme-/Accent-Switcher
   ------------------------------------------------------------------------- */
.theme-toggle {
  display: flex; align-items: center; gap: 0.3rem;
  background: var(--surface-strong); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 0.26rem;
}
.theme-toggle button {
  border: none; background: transparent; color: var(--text-muted);
  width: 29px; height: 29px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.theme-toggle button svg { width: 14px; height: 14px; }
.theme-toggle button.active { background: var(--accent); color: #fff; }

.accent-dot {
  width: 25px; height: 25px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.accent-dot:hover { transform: scale(1.1); }
.accent-dot.active { border-color: var(--text-primary); }

/* -------------------------------------------------------------------------
   Modal / Toast
   ------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: var(--sp-4);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease);
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  width: 100%; max-width: 480px; background: var(--bg-elevated);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  padding: var(--sp-6); box-shadow: 0 24px 60px -12px var(--shadow-color);
  transform: translateY(14px) scale(0.98); opacity: 0;
  transition: all var(--dur-base) var(--ease);
  max-height: 90vh; overflow-y: auto;
}
.modal-overlay.open .modal { transform: none; opacity: 1; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }

.toast-stack { position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: 200; display: flex; flex-direction: column; gap: 0.6rem; }
.toast {
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 0.72rem 1rem;
  box-shadow: 0 10px 30px -10px var(--shadow-color);
  font-size: 0.84rem; display: flex; align-items: center; gap: 0.5rem;
  animation: toastIn 300ms var(--ease); border-left: 3px solid var(--accent);
}
.toast.error { border-left-color: var(--color-danger); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

.live-indicator { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--text-muted); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* -------------------------------------------------------------------------
   Utility
   ------------------------------------------------------------------------- */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 0.83rem; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.w-full { width: 100%; }

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-main { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-ring-wrap { justify-self: start; }
}

@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: 264px;
    transform: translateX(-100%); transition: transform var(--dur-base) var(--ease);
  }
  .sidebar.open { transform: none; }
  .menu-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: var(--radius-sm);
    background: var(--surface-strong); border: 1px solid var(--border);
    color: var(--text-primary); cursor: pointer;
  }
  .sidebar-scrim { display: none; position: fixed; inset: 0; background: var(--scrim); z-index: 39; }
  .sidebar-scrim.open { display: block; }
  .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .module-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid-4, .grid-3, .grid-2, .module-grid { grid-template-columns: 1fr; }
  .content { padding: var(--sp-4) var(--sp-4) var(--sp-8); }
  .topbar { padding: 0.85rem var(--sp-4); }
  .field-row { grid-template-columns: 1fr; }
  .hero-amount { font-size: 2.1rem; }
  table { font-size: 0.8rem; }
  th:nth-child(n+4), td:nth-child(n+4) { display: none; }
}

/* =========================================================================
   Suite-weite Bewegungs-Utilities (opt-in)
   -------------------------------------------------------------------------
   Rein additiv: nur neue Klassennamen/Keyframes, keine bestehende Regel
   oberhalb dieses Abschnitts wird verändert. Dieses File wird auch von
   der Kommandozentrale (/var/www/panel, außerhalb dieses Repos, unter
   /panel eingehängt) importiert – Markup dort nutzt diese neuen Klassen
   nicht, bleibt also unberührt. Genutzt von
   Haushaltsbuch, Server-Status und TS3-Panel für den visuellen Refresh.
   ========================================================================= */

.hover-lift { transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px var(--shadow-color);
}

.hover-glow { transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.hover-glow:hover, .hover-glow:focus-within {
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 12px 28px -14px rgba(var(--accent-rgb), 0.4);
}

.entrance { animation: authIn var(--dur-slow) var(--ease) both; }
.entrance-1 { animation: authIn var(--dur-slow) var(--ease) 0ms both; }
.entrance-2 { animation: authIn var(--dur-slow) var(--ease) 70ms both; }
.entrance-3 { animation: authIn var(--dur-slow) var(--ease) 140ms both; }
.entrance-4 { animation: authIn var(--dur-slow) var(--ease) 210ms both; }
.entrance-5 { animation: authIn var(--dur-slow) var(--ease) 280ms both; }
.entrance-6 { animation: authIn var(--dur-slow) var(--ease) 350ms both; }

.status-dot.is-live { animation: pulse 1.8s infinite; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-strong) 25%, var(--surface-hover) 50%, var(--surface-strong) 75%);
  background-size: 200% 100%;
  animation: shimmerSweep 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmerSweep {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.progress-bar { height: 8px; background: rgba(120, 120, 120, 0.15); border-radius: var(--radius-full); overflow: hidden; }
.progress-fill { height: 100%; background: var(--color-danger); transition: width 700ms var(--ease); }
.progress-fill.is-ok { background: var(--color-ok); }
.progress-fill.is-warn { background: var(--color-warning); }
.progress-fill.is-danger { background: var(--color-danger); }

.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; }

.btn .ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(var(--accent-rgb), 0.45); pointer-events: none;
  animation: rippleAnim 620ms ease-out forwards;
}
.btn-primary .ripple { background: rgba(255, 255, 255, 0.55); }
@keyframes rippleAnim { to { transform: scale(2.6); opacity: 0; } }