/* ======================================================
   GAMER'S BAR – PURPLE NEON THEME (ohne Regenbogen)
   ====================================================== */

:root {
    --gb-bg: #050214;
    --gb-bg-soft: #0b0621;
    --gb-panel: #120a33;
    --gb-text: #f9f5ff;
    --gb-text-soft: #e2d9ff;
    --gb-text-muted: #c4b5fd;
    --gb-accent: #a855f7;
    --gb-accent-soft: #7c3aed;
    --gb-accent-strong: #c084fc;
}

/* ---------- Basis ---------- */

body {
    background: radial-gradient(circle at top, #120a33 0%, #050214 45%, #020010 100%);
    color: var(--gb-text);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0;
    animation: gb-body-fade .5s ease;
}

@keyframes gb-body-fade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* alle Standardtexte heller machen */

p, span, li, td, th {
    color: var(--gb-text-soft);
}

/* Bootstrap-"Muted"-Texte deutlich heller überschreiben */

.text-muted,
.text-secondary,
.text-body-secondary,
small,
.form-text {
    color: var(--gb-text-muted) !important;
}

/* ---------- Überschriften ---------- */

h1, h2, h3, h4, h5 {
    color: var(--gb-text);
    letter-spacing: .04em;
}

.card-title,
.card-header,
.card h2,
.card h3 {
    color: var(--gb-text);
}

/* ---------- Navbar ---------- */

nav.navbar {
    background: rgba(8, 5, 32, 0.92);
    border-bottom: 1px solid rgba(168, 85, 247, .7);
    box-shadow: 0 0 24px rgba(168, 85, 247, .55);
    backdrop-filter: blur(10px);
}

.navbar-brand,
.navbar .nav-link {
    color: var(--gb-text-soft) !important;
    font-weight: 500;
    transition: color .2s, text-shadow .2s;
}

    .navbar .nav-link:hover,
    .navbar-brand:hover {
        color: var(--gb-accent-strong) !important;
        text-shadow: 0 0 10px var(--gb-accent-strong);
    }

/* ---------- Karten / Panels ---------- */

.card,
.glass-card {
    background: radial-gradient(circle at top left, #1b103f 0%, #0b0621 50%, #050214 100%);
    border-radius: 16px;
    border: 1px solid rgba(168, 85, 247, .7);
    box-shadow: 0 0 24px rgba(124, 58, 237, .5);
    padding: 20px;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .card:hover,
    .glass-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 36px rgba(168, 85, 247, .8);
    }

/* ---------- Buttons (nur Lila-Töne) ---------- */

.btn,
button,
.btn-primary,
.btn-warning,
.btn-outline-warning {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 999px;
    padding: 9px 20px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--gb-accent-soft), var(--gb-accent), var(--gb-accent-strong));
    color: #0b0418 !important;
    box-shadow: 0 0 18px rgba(168, 85, 247, .7);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .btn:hover,
    button:hover,
    .btn-primary:hover,
    .btn-warning:hover,
    .btn-outline-warning:hover {
        transform: translateY(-1px) scale(1.01);
        box-shadow: 0 0 26px rgba(192, 132, 252, .9);
    }

    /* dezenter Glanzstreifen */

    .btn::after,
    button::after {
        content: "";
        position: absolute;
        top: 0;
        left: -70%;
        width: 45%;
        height: 100%;
        background: linear-gradient(120deg, rgba(255,255,255,0.65), rgba(255,255,255,0));
        transform: skewX(-20deg);
        transition: left .45s ease;
    }

    .btn:hover::after,
    button:hover::after {
        left: 130%;
    }

/* ---------- Formulare / Inputs ---------- */

input,
select,
textarea {
    background: #08041f;
    border-radius: 10px;
    border: 1px solid rgba(168, 85, 247, .8);
    color: var(--gb-text);
    padding: 10px 12px;
    transition: border-color .2s, box-shadow .2s, background .2s;
    box-shadow: inset 0 0 8px rgba(15, 23, 42, .85);
}

    input:focus,
    select:focus,
    textarea:focus {
        outline: none;
        background: #0b0628;
        border-color: var(--gb-accent-strong);
        box-shadow: 0 0 0 1px rgba(192, 132, 252, .8), 0 0 16px rgba(168, 85, 247, .9);
    }

/* Labels über Feldern (Typ, Titel, Beschreibung) */

.form-label,
label {
    color: var(--gb-text-soft);
    font-weight: 500;
}

/* Placeholder gut lesbar */

::placeholder {
    color: #d4ccff;
}

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

.table-dark {
    background: rgba(10, 6, 35, 0.96) !important;
    color: var(--gb-text-soft) !important;
}

    .table-dark thead th {
        border-bottom: 1px solid rgba(168, 85, 247, .8);
        color: var(--gb-text);
    }

    .table-dark tbody tr:hover {
        background: rgba(124, 58, 237, .35) !important;
    }

/* ---------- Badges (Status etc.) ---------- */

.badge {
    border-radius: 999px;
    padding: 5px 11px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--gb-accent-soft), var(--gb-accent));
    color: var(--gb-text);
    box-shadow: 0 0 12px rgba(168, 85, 247, .7);
}

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #050214;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--gb-accent-soft), var(--gb-accent));
    border-radius: 999px;
}

/* Sektionen weich einblenden */

.fade-section {
    animation: gb-body-fade .5s ease;
}
/* ============================================================
   🟣 ADMIN-DROPDOWN FIX – Sichtbar + Neon-Lila-Styling
   ============================================================ */

/* Dropdown über allen Karten */
.navbar .dropdown-menu {
    position: absolute;
    z-index: 9999 !important;
    background: rgba(16, 6, 46, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(192, 132, 252, .7);
    border-radius: 12px;
    min-width: 200px;
    padding: 8px 0;
    margin-top: 12px !important;
    animation: dropdownFade .18s ease-out;
    box-shadow: 0 0 30px rgba(168, 85, 247, .55), 0 0 12px rgba(168, 85, 247, .35) inset;
}

@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Einträge im Menü */
.navbar .dropdown-item {
    color: #eee !important;
    padding: 10px 16px;
    font-weight: 500;
    letter-spacing: .4px;
    transition: background .18s, text-shadow .18s, padding-left .18s;
}

    /* Hover-Glow & Slide-Effekt */
    .navbar .dropdown-item:hover {
        background: rgba(168, 85, 247, .35);
        color: #fff !important;
        padding-left: 22px;
        text-shadow: 0 0 10px #c084fc, 0 0 20px #a855f7;
    }

/* Separatoren hübscher */
.dropdown-divider {
    border-color: rgba(255, 255, 255, .15);
    margin: 6px 0;
}
/* ===================== */
/* Admin-Dropdown on top */
/* ===================== */

/* Navbar selbst über allen Karten platzieren */
nav.navbar {
    position: relative;
    z-index: 5000;
}

/* Karten darunter einsortieren */
.card,
.glass-card {
    position: relative;
    z-index: 1;
}

/* Dropdown selbst ganz nach oben */
.navbar .dropdown-menu {
    z-index: 6000 !important;
}
/* =========================================
   Neon Input + Dropdown Styles (lila Glow)
   ========================================= */

input, select, textarea {
    background: rgba(40, 0, 60, 0.65);
    border: 2px solid rgba(200, 100, 255, 0.7);
    color: #f4d8ff; /* helle lesbare Schrift */
    border-radius: 10px;
    padding: 10px 14px;
    width: 100%;
    font-size: 1rem;
    transition: all 0.25s ease;
    box-shadow: 0 0 8px rgba(185, 75, 255, 0.4);
}

/* Placeholder heller machen */
::placeholder {
    color: rgba(255, 230, 255, 0.5);
}

/* Hover Animation */
input:hover, select:hover, textarea:hover {
    border-color: #e57cff;
    box-shadow: 0 0 12px #c44bff;
}

/* Fokus = Glow Effekt */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #ffb0ff;
    box-shadow: 0 0 15px #e57cff, inset 0 0 10px #7b00ff;
    background: rgba(70, 0, 95, 0.75);
}

/* Dropdown Menü */
select {
    appearance: none;
    cursor: pointer;
    background-image: linear-gradient(145deg, rgba(80,0,140,0.9), rgba(140,0,220,0.9));
}

    select option {
        background: #2b0040;
        color: #f7d9ff;
    }

/* Checkbox hübscher machen */
input[type="checkbox"] {
    accent-color: #d67bff;
    transform: scale(1.3);
}
/* =========================================
   FORM-FELDER FINAL FIX – LILA NEON
   ========================================= */

/* Alle normalen Textfelder, E-Mail, Zahl, Passwort etc. */
input.form-control,
textarea.form-control,
select.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="search"] {
    background: rgba(40, 0, 60, 0.75) !important;
    border: 2px solid rgba(200, 100, 255, 0.85) !important;
    color: #f4d8ff !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    box-shadow: 0 0 10px rgba(185, 75, 255, 0.5) !important;
    transition: all 0.25s ease !important;
}

    /* Hover-Effekt */
    input.form-control:hover,
    textarea.form-control:hover,
    select.form-select:hover,
    input[type="text"]:hover,
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="password"]:hover,
    input[type="url"]:hover,
    input[type="search"]:hover {
        border-color: #e57cff !important;
        box-shadow: 0 0 14px #d16dff !important;
    }

    /* Fokus mit starkem Glow */
    input.form-control:focus,
    textarea.form-control:focus,
    select.form-select:focus,
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="number"]:focus,
    input[type="password"]:focus,
    input[type="url"]:focus,
    input[type="search"]:focus {
        outline: none !important;
        background: rgba(60, 0, 90, 0.85) !important;
        border-color: #ffb0ff !important;
        box-shadow: 0 0 0 1px rgba(255, 176, 255, 0.9), 0 0 18px rgba(209, 92, 255, 0.95) !important;
    }

    /* Placeholder gut lesbar */
    input.form-control::placeholder,
    textarea.form-control::placeholder,
    input[type="text"]::placeholder,
    input[type="email"]::placeholder,
    input[type="number"]::placeholder {
        color: #ddccff !important;
    }
/* =========================================
   NEON-LILA CHECKBOXES
   ========================================= */

.form-check-input {
    appearance: none; /* eigenes Styling */
    -webkit-appearance: none;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 0.35rem;
    margin-top: 0.1rem;
    margin-right: 0.4rem;
    border: 2px solid #c084fc;
    background-color: #12052d;
    box-shadow: 0 0 10px rgba(192, 132, 252, 0.4);
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .form-check-input:hover {
        box-shadow: 0 0 14px rgba(216, 180, 254, 0.9);
        border-color: #e9d5ff;
    }

    /* Zustand: angehakt */
    .form-check-input:checked {
        background: linear-gradient(135deg,#a855f7,#c084fc);
        border-color: #f5d0fe;
        box-shadow: 0 0 16px rgba(217, 70, 239, 0.9);
    }

        /* kleines Häkchen anzeigen */
        .form-check-input:checked::after {
            content: "✓";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -58%);
            font-size: 0.9rem;
            color: #0b0418;
            font-weight: 700;
        }

    /* Entfernt den blauen Standard-Fokusrahmen vom Browser */
    .form-check-input:focus {
        outline: none;
        box-shadow: 0 0 16px rgba(217, 70, 239, 0.9);
    }