/* 4nes IT Services — Admin/Report Theme
   Nur fuer templates/admin/*.html (via templates/admin/base.html eingebunden).
   Betrifft NICHT die Phishing-Koeder-/Landingpages (templates/base.html, vorlagen/*.html). */

:root {
    --accent:         #1C244B;
    --accent-rgb:     28,36,75;
    --accent-soft:    rgba(28,36,75,.06);
    --ring:           rgba(70,127,247,.35);
    --nes-bg:         #F3F5F8;
    --nes-border:     #E1E6ED;
    --nes-header-bg:  linear-gradient(180deg,#ffffff,#F3F5F8);
    --nes-text-muted: #565656;
    --nes-stat-value: #1C244B;
}

/* Animierter Grund-Hintergrund direkt auf body — bewusst NICHT von backdrop-filter/
   Transparenz-Tricks abhaengig (die bei sehr breiten/hohen Seiten wie dem Dashboard
   mit viel Inhalt unzuverlaessig sichtbar sein koennen), sondern ein normales,
   garantiert unterstuetztes CSS-background mit animierter Position. Sichtbar in
   jedem Randbereich um .container-box, auf jeder Seitenlaenge, da background-
   attachment:fixed die Verlaeufe am Viewport statt am Dokument verankert. */
body {
    margin: 0;
    padding: 0;
    font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
    background-color: var(--nes-bg);
    background-image:
        radial-gradient(circle at 10% 15%, rgba(28,36,75,.30) 0%, transparent 32%),
        radial-gradient(circle at 88% 25%, rgba(70,127,247,.30) 0%, transparent 32%),
        radial-gradient(circle at 25% 92%, rgba(143,168,216,.28) 0%, transparent 32%),
        radial-gradient(circle at 92% 88%, rgba(28,36,75,.22) 0%, transparent 30%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 200% 200%;
    animation: body-bg-drift 34s ease-in-out infinite alternate;
    color: #1a1a1a;
}
@keyframes body-bg-drift {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 30% 20%; }
    100% { background-position: 10% 35%; }
}
@media (prefers-reduced-motion: reduce) {
    body { animation: none; }
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-weight: 600;
}

/* Sticky Top-Bar mit echtem 4nes-Logo (schwarzer Text, braucht hellen Grund) */
.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #ffffff;
    padding: .7rem 1.5rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--nes-border);
    box-shadow: 0 2px 10px rgba(28,36,75,.06);
}
.admin-topbar .admin-logo-img {
    height: 38px;
    width: auto;
    display: block;
}

/* Animierter Parallax-Hintergrund (bewusst voellig anders als die alte
   Cyberpunk-Canvas-Animation auf den Koeder-/Landingpages: sanfte, verschwommene
   Farbflaechen mit Maus-Parallax + Eigenbewegung statt Hex-Regen/Partikelnetz,
   passend zum seriösen 4nes-B2B-Look). Positiver z-index (statt frueher -1) auf
   Aurora + explizit hoeherer z-index auf .container-box, damit die Stapel-
   reihenfolge unabhaengig von Sonderfaellen bei negativen z-index-Werten immer
   eindeutig ist. */
.admin-bg-aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.blob-layer {
    position: absolute;
    inset: 0;
    transition: transform .25s ease-out;
    will-change: transform;
}
.admin-bg-aurora .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .55;
    will-change: transform;
}
.admin-bg-aurora .blob-1 {
    width: 560px;
    height: 560px;
    top: -100px;
    left: -60px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    animation: aurora-drift-1 26s ease-in-out infinite alternate;
}
.admin-bg-aurora .blob-2 {
    width: 500px;
    height: 500px;
    top: 20%;
    right: -80px;
    background: radial-gradient(circle, #467FF7 0%, transparent 70%);
    animation: aurora-drift-2 32s ease-in-out infinite alternate;
}
.admin-bg-aurora .blob-3 {
    width: 440px;
    height: 440px;
    bottom: -100px;
    left: 20%;
    background: radial-gradient(circle, #8fa8d8 0%, transparent 70%);
    animation: aurora-drift-3 22s ease-in-out infinite alternate;
}
@keyframes aurora-drift-1 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(60px, 40px) scale(1.1); }
}
@keyframes aurora-drift-2 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-50px, 60px) scale(1.15); }
}
@keyframes aurora-drift-3 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(40px, -50px) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .admin-bg-aurora .blob { animation: none; }
    .blob-layer { transition: none; }
}

/* Haupt-Container (Vorbild: .container-box aus templates/base.html) — leicht
   transparent mit Weichzeichner, damit der Parallax-Hintergrund dahinter auch
   bei breiten Bildschirmen sichtbar durchscheint statt komplett verdeckt zu
   sein. Expliziter z-index:1, klar oberhalb der Aurora (z-index:0). */
.container-box {
    max-width: 1300px;
    margin: 30px auto 50px;
    padding: 30px;
    background: rgba(255,255,255,.93);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--nes-border);
    border-radius: 15px;
    box-shadow: 0 6px 15px rgba(28,36,75,.06);
    position: relative;
    z-index: 1;
}

.admin-footer {
    color: var(--nes-text-muted);
}
.admin-footer a {
    color: var(--nes-text-muted);
}
.admin-footer a:hover {
    color: var(--accent);
}