/* ZYADAnalytics Dashboard - "Neon Gold" Theme.
   Pures CSS, keine externen Libs: animierter Aurora-Hintergrund, Glassmorphism-Panels,
   Glow-/LED-Effekte, schimmernde Balken, sanfte Einblend- und Hover-Animationen. */

:root {
    --bg: #0b0d12;
    --panel: rgba(24, 27, 35, 0.66);
    --panel-border: rgba(217, 180, 92, 0.14);
    --gold: #d9b45c;
    --gold-soft: #9f8142;
    --gold-glow: rgba(217, 180, 92, 0.35);
    --text: #e9ecf2;
    --muted: #8b93a1;
    --green: #63e08c;
    --line: rgba(255, 255, 255, 0.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scrollbar-color: var(--gold-soft) #14161c; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", "Inter", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ---------------------------------------------------------------- Aurora-Hintergrund */

body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -2;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.16;
    pointer-events: none;
}
body::before {
    background: radial-gradient(circle, #d9b45c 0%, transparent 60%);
    top: -25vw;
    right: -15vw;
    animation: drift1 26s ease-in-out infinite alternate;
}
body::after {
    background: radial-gradient(circle, #4c63d9 0%, transparent 60%);
    bottom: -30vw;
    left: -15vw;
    animation: drift2 32s ease-in-out infinite alternate;
}
@keyframes drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-8vw, 10vh) scale(1.15); } }
@keyframes drift2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(10vw, -8vh) scale(0.95); } }

/* feines Gitter als Textur */
main::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%);
    pointer-events: none;
}

::selection { background: var(--gold); color: #14161a; }

/* ---------------------------------------------------------------- Header / Nav */

header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 16px 28px 0 28px;
    background: rgba(13, 15, 20, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--panel-border);
    box-shadow: 0 12px 40px -18px rgba(217, 180, 92, 0.25);
}

h1 {
    font-size: 22px;
    letter-spacing: 2px;
    font-weight: 800;
}
h1 span {
    background: linear-gradient(100deg, #f4dfae, var(--gold) 45%, #a97f2f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 24px var(--gold-glow);
}

nav { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
nav a {
    position: relative;
    color: var(--muted);
    text-decoration: none;
    padding: 9px 18px;
    border-radius: 9px 9px 0 0;
    transition: color 0.2s, background 0.2s;
}
nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
nav a.active { color: var(--gold); font-weight: 600; }
nav a.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    box-shadow: 0 0 12px 1px var(--gold-glow);
}
nav .right { margin-left: auto; }

/* Server-Dropdown in der Kopfzeile */
.srv-form { display: flex; align-items: center; padding-bottom: 6px; }
.srv-form select {
    background: rgba(20, 23, 30, 0.9);
    color: var(--text);
    border: 1px solid rgba(217, 180, 92, 0.35);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
    cursor: pointer;
    max-width: 240px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.srv-form select:hover, .srv-form select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(217, 180, 92, 0.25);
}

main { max-width: 1200px; margin: 0 auto; padding: 30px 24px 60px 24px; }

/* Sektionen sanft einblenden (gestaffelt) */
section { margin-bottom: 36px; animation: rise 0.55s ease-out both; }
section:nth-of-type(2) { animation-delay: 0.08s; }
section:nth-of-type(3) { animation-delay: 0.16s; }
section:nth-of-type(4) { animation-delay: 0.24s; }
section:nth-of-type(5) { animation-delay: 0.32s; }
section:nth-of-type(6) { animation-delay: 0.40s; }
section:nth-of-type(7) { animation-delay: 0.48s; }
section:nth-of-type(8) { animation-delay: 0.56s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

h2 {
    font-size: 13px;
    margin-bottom: 14px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
}
h2::before { content: "▸ "; opacity: 0.7; }

.muted { color: var(--muted); font-weight: normal; text-transform: none; letter-spacing: 0; }

/* ---------------------------------------------------------------- Glass-Panels (gemeinsam) */

.cards .card, .bars, table, .mod-tile, .empty, .findings, .status-line {
    background: var(--panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
}

/* ---------------------------------------------------------------- Kennzahlen-Karten */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }

.card {
    position: relative;
    padding: 24px 18px 20px 18px;
    text-align: center;
    overflow: hidden;
    min-width: 0;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.7;
}
.card:hover {
    transform: translateY(-5px);
    border-color: rgba(217, 180, 92, 0.45);
    box-shadow: 0 18px 44px -16px var(--gold-glow), 0 0 0 1px rgba(217, 180, 92, 0.12) inset;
}
.card .num {
    font-size: clamp(22px, 3.4vw, 38px);
    font-weight: 800;
    background: linear-gradient(180deg, #ffffff, #ceb474);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 30px rgba(217, 180, 92, 0.25);
}
.card .lbl { color: var(--muted); margin-top: 6px; letter-spacing: 0.5px; }

/* ---------------------------------------------------------------- Balken (Event-Typen) */

.bars { padding: 20px; }
.bar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-label { width: 210px; text-align: right; color: #ccd2dc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track {
    flex: 1;
    background: rgba(255, 255, 255, 0.045);
    border-radius: 999px;
    height: 18px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
}
.bar-fill {
    position: relative;
    background: linear-gradient(90deg, var(--gold-soft), var(--gold) 70%, #f0d896);
    height: 100%;
    border-radius: 999px;
    box-shadow: 0 0 14px var(--gold-glow);
    transform-origin: left;
    animation: grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    overflow: hidden;
}
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* wandernder Licht-Schimmer */
.bar-fill::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 46px;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: shimmer 2.6s ease-in-out infinite;
}
@keyframes shimmer { 0% { left: -60px; } 60% { left: 105%; } 100% { left: 105%; } }
.bar-count { width: 60px; color: #fff; font-weight: 700; }

/* ---------------------------------------------------------------- Tabellen */

table { width: 100%; border-collapse: collapse; overflow: hidden; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
    background: rgba(255, 255, 255, 0.035);
    color: #cdd3dd;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
tr:last-child td { border-bottom: none; }
tbody tr, table tr { transition: background 0.15s; }
tr:hover td { background: rgba(217, 180, 92, 0.05); }
.nowrap { white-space: nowrap; }

/* LED-Status */
.ok { color: var(--green); font-weight: 600; }
.ok::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 7px;
    background: var(--green);
    box-shadow: 0 0 8px var(--green), 0 0 16px rgba(99, 224, 140, 0.6);
    animation: pulse 2s ease-in-out infinite;
    vertical-align: 1px;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.warn-inline { color: #e0a15c; font-weight: 600; }
.warn-inline::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 7px;
    background: #e0a15c;
    box-shadow: 0 0 8px rgba(224, 161, 92, 0.8);
    vertical-align: 1px;
}

/* Daten-Chips */
.chip {
    display: inline-block;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 2px 10px;
    margin: 2px 3px 2px 0;
    font-size: 12.5px;
    color: #ccd2dc;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.chip:hover { border-color: rgba(217, 180, 92, 0.5); box-shadow: 0 0 10px rgba(217, 180, 92, 0.18); }
.chip b { color: var(--gold); font-weight: 600; }

/* ---------------------------------------------------------------- Ereignis-Tabelle (2026-08-22)
   Drei Owner-Befunde auf einmal: die Modul-Spalte trug Pillen (unruhig, brachen bei zwei Woertern
   auf zwei Zeilen um), die Ereignis-Links waren BROWSER-BLAU (in Tabellen griff keine Farbregel -
   auf dunklem Grund kaum lesbar), und die Datenspalte war eine Wolke aus Pillen.
   Jetzt: ruhige Textzeilen mit Hierarchie ueber Farbe und Gewicht statt ueber Rahmen. */

/* Sicherheitsnetz: kein Link in einer Tabelle laeuft je wieder ins Browser-Blau. */
table a { color: inherit; }

/* Modul-Spalte: Icon + Name, kein Rahmen, kein Umbruch. */
.ev-mod {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    color: #ccd2dc;
    text-decoration: none;
    transition: color 0.15s;
}
.ev-mod:hover { color: var(--gold); }
.ev-mod .i { font-size: 15px; line-height: 1; }

/* Datenspalte: "schluessel wert"-Paare in einer Zeile. Der Schluessel tritt zurueck, der Wert
   steht vorn - beim Ueberfliegen liest man die Werte, nicht die Feldnamen. */
.kv { display: flex; flex-wrap: wrap; gap: 3px 18px; }
.kv-item { white-space: nowrap; font-size: 12.5px; }
.kv-item b { color: var(--muted); font-weight: 400; margin-right: 5px; }
.kv-item span { color: #e9ecf2; }
.kv-more { margin-top: 4px; }
.kv-more > summary {
    list-style: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 12.5px;
    border-bottom: 1px dotted rgba(217, 180, 92, 0.45);
    display: inline-block;
}
.kv-more > summary::-webkit-details-marker { display: none; }
.kv-more > summary:hover { color: var(--gold); }
.kv-more[open] > summary { margin-bottom: 5px; }

/* ---------------------------------------------------------------- Filter / Pager */

.filters { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.filters select, .filters input {
    background: rgba(20, 23, 30, 0.85);
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.filters select:focus, .filters input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(217, 180, 92, 0.16);
}
.filters button, .btn-plain {
    background: linear-gradient(120deg, var(--gold-soft), var(--gold));
    color: #14161a;
    border: none;
    border-radius: 10px;
    padding: 9px 22px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    line-height: 1.4;
    transition: transform 0.15s, box-shadow 0.2s;
}
.filters button:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px var(--gold-glow); }
.btn-plain { background: rgba(255, 255, 255, 0.07); color: #ccd2dc; }
.btn-plain:hover { background: rgba(255, 255, 255, 0.12); }

.pager { margin-top: 16px; display: flex; gap: 18px; align-items: center; color: var(--muted); }
.pager a {
    color: var(--gold);
    text-decoration: none;
    padding: 6px 14px;
    border: 1px solid rgba(217, 180, 92, 0.3);
    border-radius: 999px;
    transition: background 0.2s, box-shadow 0.2s;
}
.pager a:hover { background: rgba(217, 180, 92, 0.1); box-shadow: 0 0 14px rgba(217, 180, 92, 0.2); }

/* ---------------------------------------------------------------- Login */

.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.login-box {
    position: relative;
    background: var(--panel);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    padding: 40px 36px;
    width: 360px;
    text-align: center;
    animation: rise 0.6s ease-out both;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
}
/* rotierender Glow-Ring hinter der Karte */
.login-box::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: 20px;
    background: conic-gradient(from 0deg, transparent 0%, var(--gold) 12%, transparent 28%, transparent 55%, rgba(76, 99, 217, 0.8) 68%, transparent 82%);
    filter: blur(14px);
    opacity: 0.55;
    animation: spin 7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.login-box h1 { margin-bottom: 22px; }
.login-box input {
    width: 100%;
    background: rgba(12, 14, 19, 0.9);
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.login-box input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217, 180, 92, 0.18); }
.login-box button {
    width: 100%;
    background: linear-gradient(120deg, var(--gold-soft), var(--gold));
    color: #14161a;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
}
.login-box button:hover { transform: translateY(-1px); box-shadow: 0 10px 28px -8px var(--gold-glow); }

.warn {
    background: rgba(120, 70, 30, 0.25);
    border: 1px solid rgba(224, 161, 92, 0.4);
    color: #edc79b;
    border-radius: 8px;
    padding: 9px 12px;
    margin-bottom: 14px;
    font-size: 13px;
}
code { background: rgba(255, 255, 255, 0.07); padding: 1px 6px; border-radius: 5px; font-size: 13px; }

/* ---------------------------------------------------------------- Auswertungen (stats.php) */

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.grid2 section { margin-bottom: 36px; }

.small { font-size: 12.5px; }
.center { text-align: center; margin-top: 10px; }

.gold-txt { color: var(--gold); font-weight: 700; text-shadow: 0 0 12px var(--gold-glow); }

/* Ranking-Badges: Platz 1-3 leuchten (Gold/Silber/Bronze), Rest dezent */
.rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--muted);
}
.rank.r1 {
    background: linear-gradient(135deg, #f4dfae, #c9982f);
    color: #14161a;
    box-shadow: 0 0 14px var(--gold-glow);
}
.rank.r2 {
    background: linear-gradient(135deg, #e8ebf0, #9aa3b2);
    color: #14161a;
    box-shadow: 0 0 10px rgba(200, 210, 225, 0.35);
}
.rank.r3 {
    background: linear-gradient(135deg, #e3a375, #9c5f2f);
    color: #14161a;
    box-shadow: 0 0 10px rgba(214, 138, 80, 0.35);
}

/* Vertikales Stunden-Diagramm (0-23 Uhr) */
.cols-panel {
    background: var(--panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    padding: 20px 16px 12px 16px;
}
.cols {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 150px;
}

/* Die beiden Aktivitaets-Panels stehen nebeneinander: links 14 Balkenzeilen, rechts 24 Saeulen.
   Ohne Streckung endet das rechte Panel auf halber Hoehe und laesst unten ein Loch
   (Owner-Befund 2026-08-22). Gestreckt wird NUR das Saeulen-Panel - Tabellen im selben Grid
   (Trader-Standorte, Top-Listen) behalten ihre natuerliche Hoehe. */
.grid2 > section { display: flex; flex-direction: column; }
.grid2 > section > .cols-panel { flex: 1; display: flex; flex-direction: column; }
.grid2 > section > .cols-panel > .cols { flex: 1; height: auto; min-height: 150px; }

/* Kennzeile unter den Saeulen: fuellt den gewonnenen Platz mit Aussage statt mit Luft. */
.cols-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    justify-content: center;
    padding-top: 14px;
    margin-top: auto;
    border-top: 1px solid var(--line);
}
.cols-facts div { text-align: center; }
.cols-facts .v { display: block; font-size: 19px; font-weight: 800; color: var(--gold); }
.cols-facts .k { color: var(--muted); font-size: 12px; }
.col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    cursor: default;
}
.col-fill {
    background: linear-gradient(180deg, #f0d896, var(--gold) 40%, var(--gold-soft));
    border-radius: 4px 4px 0 0;
    box-shadow: 0 0 10px rgba(217, 180, 92, 0.25);
    transform-origin: bottom;
    animation: growY 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transition: filter 0.15s;
}
.col:hover .col-fill { filter: brightness(1.35); }
@keyframes growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.col-label {
    text-align: center;
    color: var(--muted);
    font-size: 10.5px;
    margin-top: 5px;
}

/* ---------------------------------------------------------------- Spieler-Detailseite */

.plink {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted rgba(217, 180, 92, 0.45);
    transition: color 0.15s, border-color 0.15s, text-shadow 0.15s;
}
.plink:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
    text-shadow: 0 0 12px var(--gold-glow);
}

.player-head {
    background: var(--panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--panel-border);
    border-left: 3px solid var(--gold);
    border-radius: 16px;
    padding: 22px 24px;
}
.player-name {
    font-size: 30px;
    font-weight: 800;
    background: linear-gradient(100deg, #ffffff, #e8d5a4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 26px rgba(217, 180, 92, 0.2);
}
.player-meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------------------------------------------------------------- Steam-Login / Server-Verwaltung */

.steam-btn {
    display: block;
    width: 100%;
    background: linear-gradient(120deg, #1b2838, #2a475e);
    border: 1px solid #66c0f4;
    color: #e9ecf2;
    text-decoration: none;
    border-radius: 10px;
    padding: 13px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.4px;
    transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 0 18px rgba(102, 192, 244, 0.15);
}
.steam-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 30px -8px rgba(102, 192, 244, 0.5);
}
.steam-logo { color: #66c0f4; margin-right: 6px; }

/* Sicht-Umschalter fuer Plattform-Admins (Owner-Sicht <-> Plattform-Sicht) in der Kopfzeile */
.view-toggle {
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 12.5px;
    text-decoration: none;
    color: var(--muted);
    border: 1px dashed rgba(255, 255, 255, 0.16);
    white-space: nowrap;
    align-self: center;
}
.view-toggle:hover { color: var(--gold); border-color: var(--gold-soft); background: rgba(217, 180, 92, 0.06); }
.view-toggle.platform {
    color: var(--gold);
    border: 1px solid var(--gold-soft);
    background: rgba(217, 180, 92, 0.10);
    box-shadow: 0 0 12px -4px var(--gold-glow);
}

/* Kleiner Sekundaer-Button unter der Anmeldemaske (Link zur oeffentlichen Doku) */
.docs-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    color: var(--muted);
    text-decoration: none;
    border-radius: 10px;
    padding: 9px;
    font-size: 13px;
    transition: transform 0.15s, border-color 0.2s, color 0.2s;
}
.docs-btn:hover {
    transform: translateY(-1px);
    border-color: var(--gold-soft);
    color: var(--gold);
}

/* Einmal-Anzeige der Zugangsdaten (Server anlegen / Key rotieren) */
.key-box {
    background: var(--panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(217, 180, 92, 0.5);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 0 40px -8px var(--gold-glow);
    animation: rise 0.5s ease-out both;
}
.key-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
.key-grid .muted { display: block; font-size: 12px; margin-bottom: 3px; }
.key-value {
    display: block;
    background: rgba(10, 12, 16, 0.9);
    border: 1px solid rgba(217, 180, 92, 0.35);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 15px;
    color: var(--gold);
    user-select: all; /* Klick markiert den ganzen Wert -> einfach kopieren */
    word-break: break-all;
}
.key-snippet {
    background: rgba(10, 12, 16, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    padding: 14px;
    font-size: 13px;
    color: #ccd2dc;
    overflow-x: auto;
    user-select: all;
}

.inline-form { display: inline-block; margin-right: 6px; }
.btn-small {
    background: linear-gradient(120deg, var(--gold-soft), var(--gold));
    color: #14161a;
    border: none;
    border-radius: 7px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
}
.btn-small:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px var(--gold-glow); }
.btn-small.plain { background: rgba(255, 255, 255, 0.08); color: #ccd2dc; }
.btn-small.plain:hover { background: rgba(255, 255, 255, 0.14); }
.btn-small.danger { background: linear-gradient(120deg, #5c2a30, #8a3d45); color: #f2d9db; }
.btn-small.danger:hover { box-shadow: 0 6px 16px -6px rgba(220, 90, 100, 0.5); }

/* ---------------------------------------------------------------- Scrollbar (WebKit) */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #101319; }
::-webkit-scrollbar-thumb { background: #2b2f3a; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-soft); }

/* Sprach-Umschalter DE/EN (2026-08-09). Liegt hier, weil dieses Stylesheet von ALLEN drei
   Bereichen geladen wird - Landingpage, docs/ und dashboard/. Bewusst eine Pille mit beiden
   Sprachen (aktive hervorgehoben) statt eines einzelnen Links: ein einzelnes "DE" im
   Navigationsband sah aus wie ein weiterer Menuepunkt (Owner-Befund). Formensprache wie
   .view-toggle - beides sind Bedienelemente, keine Seiten. */
.zyad-lang {
    align-self: center; display: inline-flex; gap: 2px;
    /* Rahmen kraeftiger als --line (0.05 waere kaum sichtbar). */
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px; padding: 3px;
}
.zyad-lang.right { margin-left: auto; }
.zyad-lang a, .zyad-lang b {
    padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600;
    text-decoration: none; line-height: 1.2;
}
.zyad-lang a { color: var(--muted); }
.zyad-lang a:hover { color: var(--gold); background: rgba(217, 180, 92, 0.08); }
.zyad-lang b { color: #14161a; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); }

/* ---------------------------------------------------------------- Modul-Achse (2026-08-22)
   Das Dashboard ist bis dahin modul-blind gewachsen: eine flache Liste von Ereignisarten, die mit
   jedem neuen ZYAD-Modul laenger und nichtssagender wurde. Seitdem ist das MODUL die erste
   Ordnungsachse - Kacheln auf der Uebersicht, ein Chip-Band unter der Hauptnavigation, eine Seite
   je Modul. Alles hier baut bewusst auf den vorhandenen Bausteinen auf (.cards/.bars/.chip);
   es gibt keine zweite Formensprache. */

/* Das Chip-Band (Navigations-Zeile 2). Bewusst KEIN Glass-Panel: es ist Teil der Kopfzeile,
   nicht Inhalt. Hier waechst jedes kuenftige Modul hinein, ohne dass die Hauptnavigation laenger
   wird. */
.mod-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px 0 24px;
}
.mod-chip {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    color: #ccd2dc;
    text-decoration: none;
    font-size: 13px;
    transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.mod-chip:hover { border-color: rgba(217, 180, 92, 0.5); color: #fff; }
.mod-chip.active { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 12px var(--gold-glow); }
/* Gedaempft = liefert derzeit keine Daten. Bleibt ANKLICKBAR: die Modulseite erklaert den Zustand,
   und "nicht eingerichtet" soll man erklaert bekommen, nicht erraten. */
.mod-chip.off { opacity: 0.5; }
.mod-chip.raw { margin-left: auto; }

/* Der Modul-Hof. Die Hoehe waechst mit der Zahl der MODULE, nicht mehr mit der Zahl der
   Ereignisarten - das war der eigentliche Konstruktionsfehler der alten Uebersicht. */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }

a.mod-tile {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: 18px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
a.mod-tile:hover {
    transform: translateY(-5px);
    border-color: rgba(217, 180, 92, 0.45);
    box-shadow: 0 18px 44px -16px var(--gold-glow), 0 0 0 1px rgba(217, 180, 92, 0.12) inset;
}
.mod-tile.off { opacity: 0.62; }

.mod-head { display: flex; align-items: center; gap: 10px; }
.mod-icon { font-size: 22px; }
.mod-name { font-weight: 700; font-size: 17px; }
.mod-claim { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.mod-state { font-size: 12.5px; margin-top: 8px; }
.mod-kpi { display: flex; gap: 22px; margin: 12px 0 4px 0; }
.mod-kpi .v { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; }
.mod-kpi .k { color: var(--muted); font-size: 12px; }
.mod-extra { margin-top: 10px; font-size: 13px; }
.mod-foot {
    color: var(--muted);
    font-size: 12.5px;
    border-top: 1px solid var(--line);
    padding-top: 10px;
    margin-top: 12px;
}
/* Mini-Balken in der Kachel: dieselben Bausteine, nur schmaler und linksbuendig beschriftet. */
.mod-types { background: none; border: none; padding: 10px 0 0 0; }
.mod-types .bar-row { gap: 8px; margin-bottom: 6px; }
.mod-types .bar-label { width: auto; flex: 0 0 45%; text-align: left; }
.mod-types .bar-track { height: 10px; }
.mod-types .bar-count { width: 44px; }

/* Wochenvergleich. Gruen/Gold statt Gruen/Rot - ein Rueckgang ist eine Beobachtung, kein Fehler. */
.trend { font-size: 12.5px; }
.trend.up { color: var(--green); }
.trend.down { color: var(--gold); }
.trend.flat { color: var(--muted); }

/* Alter statt Zeitstempel auf der Statuskarte - Farbe kommt von .ok/.muted/.warn-inline. */
.card .num-age { font-size: clamp(17px, 2.2vw, 26px); font-weight: 800; }

/* RUHIGER Leerzustand. Bis 2026-08-22 wurde das alarmierende orange .warn sowohl fuer
   "noch keine Daten" als auch fuer echte Warnungen benutzt - damit war beides gleich laut. */
.empty { padding: 22px; color: var(--muted); }
.empty h3 { color: var(--text); margin-bottom: 6px; font-size: 16px; }
.empty p { margin-bottom: 8px; }

/* Befundliste ("Was du dir ansehen solltest") - erscheint nur, wenn es Befunde gibt. */
.findings { padding: 18px 22px; }
.findings ul { list-style: none; }
.findings li { margin-bottom: 10px; }
.findings li:last-child { margin-bottom: 0; }

/* Statuszeile der Uebersicht: eine Zeile fuer die Frage "kommt gerade etwas an?". */
.status-line { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 16px 20px; margin-bottom: 14px; }


/* Fusszeile - ersetzt den in sieben Dateien inline gestylten <div>. */
.site-foot { text-align: center; padding: 26px 0 0 0; color: var(--muted); font-size: 12px; }
.site-foot a { color: var(--muted); }

h3.sub { font-size: 13px; color: #ccd2dc; letter-spacing: 1px; margin: 16px 0 8px 0; }

@media (max-width: 700px) {
    .bar-label { width: 120px; }
    .mod-bar { padding: 10px 16px 0 16px; }
}

/* ---------------------------------------------------------------- Geldfluss (dashboard/trader.php)
   Zweiseitiger Balken um eine Mittelachse: links das Geld, das die Spieler ausgeben (verschwindet),
   rechts das, was die Haendler auszahlen (entsteht). Beide Seiten teilen sich dieselbe Skala, damit
   sich die Laengen direkt vergleichen lassen - genau darum geht es auf der Seite. */
.flow {
    padding: 20px;
    background: var(--panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
}
.flow-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.flow-row:last-child { margin-bottom: 0; }
.flow-day { width: 66px; text-align: right; color: var(--muted); font-size: 12.5px; }
.flow-side { flex: 1; height: 14px; display: flex; align-items: stretch; }
.flow-side.out { justify-content: flex-end; }
.flow-axis { width: 1px; align-self: stretch; min-height: 18px; background: rgba(255, 255, 255, 0.16); }
.flow-bar {
    border-radius: 999px;
    min-width: 3px;
    transform-origin: left;
    animation: grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.flow-bar.out {
    background: linear-gradient(270deg, var(--gold-soft), var(--gold) 70%, #f0d896);
    box-shadow: 0 0 12px var(--gold-glow);
    transform-origin: right;
}
.flow-bar.in {
    background: linear-gradient(90deg, #3d8f5c, var(--green) 70%, #a8f2c1);
    box-shadow: 0 0 12px rgba(99, 224, 140, 0.28);
}
.flow-net { width: 104px; text-align: right; font-weight: 700; font-size: 13px; }
/* Auf schmalen Schirmen bleibt sonst kaum Platz fuer die eigentlichen Balken. */
@media (max-width: 700px) {
    .flow-day { width: 48px; font-size: 11.5px; }
    .flow-net { width: 74px; font-size: 11.5px; }
    .flow-row { gap: 6px; }
}
.flow-legend { display: flex; gap: 22px; justify-content: center; margin-top: 14px; color: var(--muted); font-size: 12.5px; }
.flow-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: middle; }
.flow-key.out { background: var(--gold); }
.flow-key.in { background: var(--green); }

/* Geldbetraege in Kennzahlen-Karten: mit Tausendertrennern werden sie schnell lang und wuerden
   bei 38px an der Kartenkante abgeschnitten (.card hat overflow:hidden). */
.card .num.money { font-size: 30px; letter-spacing: -0.5px; }

/* Breite Tabellen (viele Spalten) scrollen IN SICH, statt die ganze Seite seitlich zu verschieben. */
.table-scroll { overflow-x: auto; border-radius: 16px; }

/* Netto-Werte: Richtung ist die Aussage - Gruen = Geld entsteht, Gold = Geld verschwindet. */
.net-pos { color: var(--green); }
.net-neg { color: var(--gold); }