/* ============================================================
   assets/admin-glow.css
   Premium Dark-Glass-Theme fuer den Adminbereich.
   Wird NACH admin.css geladen -> overridet die :root-Tokens auf
   eine dunkle Palette (re-skinnt fast alles automatisch) + setzt
   Glas/Glow/Gradient auf die Kern-Komponenten.
   ============================================================ */

/* ── Dark-Palette: ueberschreibt admin.css-Tokens ─────────────────── */
:root {
    --glow-accent:   #8dc63f;
    --glow-accent-2: #b6e05a;
    --glow-accent-3: #5a9e1f;

    --c-bg:          #0b0b0d;
    --c-surface:     #161618;
    --c-border:      rgba(176,176,182,.16);
    --c-border-md:   rgba(176,176,182,.32);
    --c-text:        #f2f6ea;
    --c-text-muted:  #a1a1a4;
    --c-text-faint:  #76767c;
    --c-accent:      #a3d65e;
    --c-accent-bg:   rgba(141,198,63,.16);
    --c-accent-hover:#b6e07a;
    --c-secondary:   #97979c;
    --c-secondary-bg:rgba(176,176,182,.10);
    --c-green:       #4fd496;
    --c-green-bg:    rgba(34,180,110,.16);
    --c-amber:       #e6ab4d;
    --c-amber-bg:    rgba(210,140,30,.16);
    --c-red:         #ff7163;
    --c-red-bg:      rgba(200,70,55,.18);
    --shadow-sm:     0 2px 8px rgba(0,0,0,.45);
    color-scheme: dark;
}

/* ── Hintergrund: Aurora + sanftes Grid ───────────────────────────── */
body {
    background:
        radial-gradient(ellipse 90% 60% at 12% -10%, rgba(141,198,63,.18) 0%, transparent 55%),
        radial-gradient(ellipse 80% 60% at 105% 0%, rgba(182,224,90,.10) 0%, transparent 50%),
        radial-gradient(ellipse 90% 70% at 100% 110%, rgba(90,158,31,.14) 0%, transparent 55%),
        linear-gradient(180deg, #0c0c0e 0%, #0b0b0d 55%, #070708 100%) fixed;
    -webkit-font-smoothing: antialiased;
}

/* ── Topbar (Glas) ────────────────────────────────────────────────── */
.admin-topbar {
    background: rgba(20,20,24,.72);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(176,176,182,.14);
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.admin-topbar__mark {
    background: linear-gradient(135deg, var(--glow-accent), var(--glow-accent-3));
    border: none;
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(141,198,63,.8);
}
.admin-topbar__badge {
    background: rgba(141,198,63,.12);
    border: 1px solid rgba(141,198,63,.3);
    color: #cfe6a4;
}

/* ── Sidebar (Glas + Glow auf aktiv) ──────────────────────────────── */
.admin-sidebar {
    background: rgba(15,15,18,.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-right: 1px solid rgba(176,176,182,.12);
}
.admin-sidebar__section { color: var(--c-text-faint); letter-spacing: .08em; }
.admin-sidebar__item {
    color: #bdbdc2;
    border-radius: 10px;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.admin-sidebar__item:hover {
    background: rgba(255,255,255,.05);
    color: #fff;
    text-decoration: none;
}
.admin-sidebar__item.is-active {
    background: linear-gradient(120deg, rgba(141,198,63,.22), rgba(90,158,31,.16));
    color: #fff;
    box-shadow: inset 3px 0 0 var(--glow-accent), 0 8px 22px -14px rgba(141,198,63,.8);
}
.admin-sidebar__item.is-active .admin-sidebar__icon { color: var(--glow-accent-2); }

/* ── Karten (Glas) ────────────────────────────────────────────────── */
.admin-card {
    background: linear-gradient(180deg, rgba(34,34,40,.78), rgba(22,22,26,.72));
    border: 1px solid rgba(182,182,188,.14);
    border-radius: 16px;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 20px 48px -26px rgba(0,0,0,.7);
}

/* ── Seiten-Kopf ──────────────────────────────────────────────────── */
.admin-page-head h1 {
    background: linear-gradient(110deg, #ffffff, #dff0c8 55%, var(--glow-accent));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -.02em;
}
.admin-eyebrow {
    color: #cfe6a4;
    background: rgba(141,198,63,.1);
    border: 1px solid rgba(141,198,63,.26);
    padding: 3px 10px; border-radius: 999px;
}

/* ── KPI-Karten ───────────────────────────────────────────────────── */
.admin-kpi-card {
    background: linear-gradient(180deg, rgba(34,34,40,.75), rgba(22,22,26,.7));
    border: 1px solid rgba(182,182,188,.14);
    border-radius: 14px;
    transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.admin-kpi-card:hover {
    transform: translateY(-3px);
    border-color: rgba(141,198,63,.4);
    box-shadow: 0 22px 50px -28px rgba(0,0,0,.8), 0 0 26px -14px rgba(141,198,63,.5);
}
.admin-kpi-card--accent {
    border-color: transparent !important;
    background:
        linear-gradient(180deg, rgba(36,36,42,.85), rgba(24,24,30,.85)) padding-box,
        linear-gradient(130deg, var(--glow-accent), var(--glow-accent-2)) border-box;
    box-shadow: 0 0 30px -16px rgba(141,198,63,.7);
}
.admin-kpi-card__value {
    background: linear-gradient(110deg, #fff, var(--glow-accent-2));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Tabellen ─────────────────────────────────────────────────────── */
.admin-table th {
    color: #a1a1a4;
    border-bottom: 1px solid rgba(176,176,182,.18);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 11px;
}
.admin-table td { border-bottom: 1px solid rgba(176,176,182,.1); }
.admin-table tbody tr { transition: background .15s ease; }
.admin-table tbody tr:hover td { background: rgba(141,198,63,.08); }

/* ── Buttons (Gradient + Sheen + Glow) ────────────────────────────── */
.button {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 11px;
    font-weight: 600;
    color: #f6f6f4;
    background: linear-gradient(120deg, var(--glow-accent), #74b52e 45%, var(--glow-accent-3));
    box-shadow: 0 10px 24px -12px rgba(141,198,63,.7), 0 2px 0 rgba(255,255,255,.12) inset;
    transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
.button:hover { transform: translateY(-2px); filter: brightness(1.06); opacity: 1; text-decoration: none;
    box-shadow: 0 16px 34px -14px rgba(141,198,63,.85), 0 2px 0 rgba(255,255,255,.16) inset; }
.button:active { transform: translateY(0) scale(.99); }
.button::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
    transform: skewX(-18deg); transition: left .6s ease;
}
.button:hover::after { left: 130%; }
.button--secondary {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(182,182,188,.22);
    color: #d2ddc2; box-shadow: none;
}
.button--secondary:hover { background: rgba(255,255,255,.09); border-color: rgba(141,198,63,.5); color: #fff; }
.button--danger { background: linear-gradient(120deg, #ff6b5c, #d8412f); box-shadow: 0 10px 24px -12px rgba(216,65,47,.7); }

/* ── Felder ───────────────────────────────────────────────────────── */
.field input, .field select, .field textarea {
    background: rgba(12,12,14,.55);
    border: 1px solid rgba(182,182,188,.2);
    border-radius: 10px;
    color: #f2f6ea;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input::placeholder, .field textarea::placeholder { color: #76767c; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--glow-accent);
    background: rgba(16,16,20,.8);
    box-shadow: 0 0 0 3px rgba(141,198,63,.22), 0 0 22px -8px rgba(141,198,63,.5);
}

/* ── Badges (lesbar auf dunkel) ───────────────────────────────────── */
.badge, .admin-badge {
    border: 1px solid rgba(176,176,182,.18);
    backdrop-filter: blur(4px);
}

/* ── Definition-Liste (order_detail) ──────────────────────────────── */
.admin-deflist dt { color: #a1a1a4; }
.admin-deflist dd { color: #f2f6ea; }
.admin-deflist code, .re-chip code, code {
    background: rgba(141,198,63,.14);
    border: 1px solid rgba(141,198,63,.3);
    color: #dededf;
    border-radius: 6px;
}

/* ── Alerts (Hardcode-Border-Fix + dunkler Grund) ─────────────────── */
.alert--error   { background: rgba(200,70,55,.14);   border: 1px solid rgba(255,113,99,.4);  color: #ff9b90; }
.alert--success { background: rgba(34,180,110,.14);  border: 1px solid rgba(79,212,150,.4);  color: #6fe0ab; }
.alert--success p { color: #f2f6ea; }

/* ── Fortschrittsbalken ───────────────────────────────────────────── */
.prog-bar  { background: rgba(176,176,182,.18); }
.prog-fill { background: linear-gradient(90deg, var(--glow-accent-2), var(--glow-accent)); }
.prog-fill--partial { background: linear-gradient(90deg, #e6ab4d, #d88c1e); }

/* ── Login / Card-Screens ─────────────────────────────────────────── */
.login-card, .admin-login-card {
    background: linear-gradient(180deg, rgba(34,34,40,.82), rgba(20,20,24,.8));
    border: 1px solid rgba(182,182,188,.16);
    border-radius: 18px;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 70px -30px rgba(0,0,0,.8);
}
.login-brand {
    background: linear-gradient(110deg, #fff, var(--glow-accent));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.login-foot a { color: var(--glow-accent-2); }

/* ── Empty-State ──────────────────────────────────────────────────── */
.admin-empty-state { color: #919196; }

/* ── Feinschliff ──────────────────────────────────────────────────── */
::selection { background: rgba(141,198,63,.35); color: #fff; }
*:focus-visible { outline: 2px solid var(--glow-accent); outline-offset: 2px; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(141,198,63,.3); border-radius: 8px;
    border: 2px solid transparent; background-clip: padding-box;
}

/* ── Entrance (per JS, kein Default-Hide) ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}