/*
|--------------------------------------------------------------------------
| FIRELOCKER MODERN UI
| PicoCSS Override
| Tailscale / Linear / Vercel Inspired
|--------------------------------------------------------------------------
|
| Ziel:
| - OHNE Tailwind
| - OHNE React
| - OHNE HTML Änderungen
| - Funktioniert direkt mit deiner bestehenden PHP Struktur
|
| Einfach nach PicoCSS laden.
|
|--------------------------------------------------------------------------
*/

:root {

    /*
    |--------------------------------------------------------------------------
    | COLORS
    |--------------------------------------------------------------------------
    */

    --fl-bg: #020617;
    --fl-bg-secondary: #0f172a;
    --fl-card: rgba(15, 23, 42, 0.78);

    --fl-border: rgba(255,255,255,0.08);

    --fl-primary: #3b82f6;
    --fl-primary-hover: #2563eb;

    --fl-success: #22c55e;
    --fl-danger: #ef4444;
    --fl-warning: #f59e0b;

    --fl-text: #f8fafc;
    --fl-muted: #94a3b8;

    /*
    |--------------------------------------------------------------------------
    | SHADOWS
    |--------------------------------------------------------------------------
    */

    --fl-shadow:
            0 10px 40px rgba(0,0,0,0.35);

    --fl-shadow-hover:
            0 18px 60px rgba(0,0,0,0.42);

    /*
    |--------------------------------------------------------------------------
    | RADIUS
    |--------------------------------------------------------------------------
    */

    --fl-radius: 24px;
    --fl-radius-small: 14px;

    /*
    |--------------------------------------------------------------------------
    | PICO OVERRIDES
    |--------------------------------------------------------------------------
    */

    --pico-font-family:
            Inter,
            system-ui,
            sans-serif;

    --pico-primary:
            var(--fl-primary);

    --pico-primary-hover:
            var(--fl-primary-hover);

    --pico-border-radius:
            18px;

    --pico-background-color:
            transparent;

    --pico-card-background-color:
            transparent;
}

/*
|--------------------------------------------------------------------------
| BODY
|--------------------------------------------------------------------------
*/

html {

    background:
            var(--fl-bg);
}

body {

    min-height: 100vh;

    color:
            var(--fl-text);

    background:

            radial-gradient(
                    circle at top left,
                    rgba(59,130,246,0.16),
                    transparent 24%
            ),

            radial-gradient(
                    circle at bottom right,
                    rgba(16,185,129,0.12),
                    transparent 28%
            ),

            var(--fl-bg);

    overflow-x: hidden;
}

/*
|--------------------------------------------------------------------------
| TYPOGRAPHY
|--------------------------------------------------------------------------
*/

h1,
h2,
h3,
h4,
h5,
h6 {

    color:
            white;

    letter-spacing:
            -0.04em;
}

h1 {

    font-size:
            clamp(2.5rem, 5vw, 4rem);

    font-weight:
            800;
}

h2 {

    font-size:
            clamp(2rem, 4vw, 3rem);

    font-weight:
            750;
}

h4 {

    font-size:
            1.1rem;
}

p {

    color:
            #d6dee8;
}

/*
|--------------------------------------------------------------------------
| MAIN LAYOUT
|--------------------------------------------------------------------------
*/

main {

    width:
            min(1450px, 92%);

    margin:
            auto;

    padding-bottom:
            5rem;
}

/*
|--------------------------------------------------------------------------
| NAVBAR
|--------------------------------------------------------------------------
*/

nav,
.navbar,
#navbar {

    width:
            min(1450px, 92%);

    margin:
            1rem auto 2rem auto;

    padding:
            1rem 1.5rem;

    border:
            1px solid var(--fl-border);

    border-radius:
            30px;

    background:
            rgba(15,23,42,0.72);

    backdrop-filter:
            blur(18px);

    box-shadow:
            var(--fl-shadow);
}

/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.bigTop {

    text-align:
            center;

    margin:
            3rem 0;
}

.bigTop h2 {

    margin-bottom:
            0.4rem;
}

.bigTop h4 {

    color:
            var(--fl-muted);

    font-weight:
            500;
}

/*
|--------------------------------------------------------------------------
| ACTION GRID
|--------------------------------------------------------------------------
*/

.grid {

    gap:
            1rem;
}

#memberOptions {

    margin-bottom:
            2rem;
}

#memberOptions .grid {

    grid-template-columns:
        repeat(auto-fit, minmax(260px, 1fr));
}

#memberOptions a {

    text-decoration:
            none;
}

#memberOptions button {

    width:
            100%;

    height:
            60px;

    font-size:
            1rem;

    font-weight:
            650;

    border-radius:
            18px;

    transition:
            0.2s ease;
}

#memberOptions button:hover {

    transform:
            translateY(-2px);
}

/*
|--------------------------------------------------------------------------
| STATS
|--------------------------------------------------------------------------
*/

#memberCounter {

    position:
            relative;

    overflow:
            hidden;

    padding:
            2rem;

    border:
            1px solid var(--fl-border);

    border-radius:
            var(--fl-radius);

    background:
            var(--fl-card);

    backdrop-filter:
            blur(20px);

    box-shadow:
            var(--fl-shadow);
}

#memberCounter::before {

    content:
            "";

    position:
            absolute;

    inset:
            0;

    background:
            linear-gradient(
                    135deg,
                    rgba(59,130,246,0.12),
                    transparent 40%
            );

    pointer-events:
            none;
}

#memberCounter h3 {

    font-size:
            2rem;

    margin-bottom:
            0.5rem;
}

/*
|--------------------------------------------------------------------------
| MEMBER CARDS
|--------------------------------------------------------------------------
*/

main > article.centerText.smallTextMargin {

    position:
            relative;

    overflow:
            hidden;

    padding:
            2rem;

    margin-bottom:
            1.4rem;

    border:
            1px solid var(--fl-border);

    border-radius:
            var(--fl-radius);

    background:
            var(--fl-card);

    backdrop-filter:
            blur(20px);

    box-shadow:
            var(--fl-shadow);

    transition:
            0.25s ease;
}

main > article.centerText.smallTextMargin::before {

    content:
            "";

    position:
            absolute;

    inset:
            0;

    background:
            linear-gradient(
                    135deg,
                    rgba(59,130,246,0.06),
                    transparent 30%
            );

    pointer-events:
            none;
}

main > article.centerText.smallTextMargin:hover {

    transform:
            translateY(-4px);

    border-color:
            rgba(59,130,246,0.24);

    box-shadow:
            var(--fl-shadow-hover);
}

/*
|--------------------------------------------------------------------------
| MEMBER TITLE
|--------------------------------------------------------------------------
*/

main article h4 {

    margin-bottom:
            0.5rem;
}

main article h4 a {

    color:
            white;

    text-decoration:
            none;

    transition:
            0.2s ease;
}

main article h4 a:hover {

    color:
            var(--fl-primary);
}

/*
|--------------------------------------------------------------------------
| INLINE STATUS BADGES
|--------------------------------------------------------------------------
*/

main article div[style*="inline-flex"] {

    display:
            flex !important;

    flex-wrap:
            wrap;

    justify-content:
            center;

    gap:
            0.7rem;

    margin:
            1.2rem 0;
}

main article div[style*="inline-flex"] p {

    margin:
            0 !important;

    padding:
            0.55rem 1rem !important;

    border-radius:
            999px !important;

    font-size:
            0.82rem;

    font-weight:
            650;

    border:
            1px solid rgba(255,255,255,0.08);

    backdrop-filter:
            blur(10px);

    box-shadow:
            inset 0 0 0 1px rgba(255,255,255,0.03);
}

/*
|--------------------------------------------------------------------------
| GROUP BUTTONS
|--------------------------------------------------------------------------
*/

.group {

    display:
            flex;

    flex-wrap:
            wrap;

    justify-content:
            center;

    gap:
            0.8rem;

    margin-top:
            1.5rem;
}

.group a,
.group button {

    margin:
            0 !important;
}

/*
|--------------------------------------------------------------------------
| BUTTONS
|--------------------------------------------------------------------------
*/

button,
[role="button"] {

    border-radius:
            18px !important;

    font-weight:
            650;

    transition:
            0.2s ease;

    border-width:
            1px !important;
}

button:hover,
[role="button"]:hover {

    transform:
            translateY(-1px);
}

button.secondary,
.secondary {

    background:
            rgba(255,255,255,0.05) !important;

    border:
            1px solid rgb(255, 255, 255, 0.4) !important;
}

/*
|--------------------------------------------------------------------------
| LINKS
|--------------------------------------------------------------------------
*/

a {

    transition:
            0.2s ease;
}

.parent-link {

    color:
            #93c5fd;

    cursor:
            pointer;

    text-decoration:
            none;
}

.parent-link:hover {

    color:
            white;
}

/*
|--------------------------------------------------------------------------
| DIALOG
|--------------------------------------------------------------------------
*/

dialog {

    border:
            none;

    background:
            transparent;
}

dialog::backdrop {

    background:
            rgba(0,0,0,0.7);

    backdrop-filter:
            blur(6px);
}

dialog article {

    background:
            rgba(15,23,42,0.95);

    border:
            1px solid var(--fl-border);

    border-radius:
            28px;

    box-shadow:
            0 20px 60px rgba(0,0,0,0.45);
}

/*
|--------------------------------------------------------------------------
| SWEETALERT
|--------------------------------------------------------------------------
*/

.swal2-popup {

    border-radius:
            28px !important;

    background:
            rgba(15,23,42,0.98) !important;

    border:
            1px solid rgba(255,255,255,0.08) !important;

    color:
            white !important;
}

.swal2-input,
.swal2-select {

    border-radius:
            14px !important;

    background:
            rgba(255,255,255,0.03) !important;

    border:
            1px solid rgba(255,255,255,0.08) !important;
}

.swal2-confirm {

    background:
            var(--fl-primary) !important;
}

/*
|--------------------------------------------------------------------------
| FORMS
|--------------------------------------------------------------------------
*/

/* Angepasste Regel, die Checkboxes, Radios und Buttons verschont */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea,
select {
    background-color: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    transition: 0.2s ease;
}

/* Optional: Checkboxen und Radios auf dunklem Hintergrund besser sichtbar machen */
input[type="checkbox"],
input[type="radio"] {
    border: 2px solid rgba(255,255,255,0.3) !important;
    cursor: pointer;
}

input:focus,
select:focus,
textarea:focus {

    border-color:
            rgba(59,130,246,0.5) !important;

    box-shadow:
            0 0 0 4px rgba(59,130,246,0.12) !important;
}

/*
|--------------------------------------------------------------------------
| TABLES
|--------------------------------------------------------------------------
*/

table {

    overflow:
            hidden;

    border:
            1px solid var(--fl-border);

    border-radius:
            var(--fl-radius);

    background:
            var(--fl-card);

    box-shadow:
            var(--fl-shadow);
}

table th {

    background:
            rgba(255,255,255,0.03);
}

table tr:hover {

    background:
            rgba(255,255,255,0.03);
}

/*
|--------------------------------------------------------------------------
| ALERTS
|--------------------------------------------------------------------------
*/

.success-box,
.warning-box,
.error-box {

    padding:
            1rem 1.2rem;

    border-radius:
            18px;

    border:
            1px solid transparent;
}

.success-box {

    background:
            rgba(34,197,94,0.12);

    border-color:
            rgba(34,197,94,0.22);
}

.warning-box {

    background:
            rgba(245,158,11,0.12);

    border-color:
            rgba(245,158,11,0.22);
}

.error-box {

    background:
            rgba(239,68,68,0.12);

    border-color:
            rgba(239,68,68,0.22);
}

/*
|--------------------------------------------------------------------------
| SCROLLBAR
|--------------------------------------------------------------------------
*/

::-webkit-scrollbar {

    width:
            10px;
}

::-webkit-scrollbar-track {

    background:
            #020617;
}

::-webkit-scrollbar-thumb {

    background:
            rgba(255,255,255,0.12);

    border-radius:
            999px;
}

::-webkit-scrollbar-thumb:hover {

    background:
            rgba(255,255,255,0.22);
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 768px)
{

    main {

        width:
                94%;
    }

    nav,
    .navbar,
    #navbar {

        width:
                94%;
    }

    .group {

        flex-direction:
                column;
    }

    .group a,
    .group button {

        width:
                100%;
    }

    main article div[style*="inline-flex"] {

        flex-direction:
                column;

        align-items:
                center;
    }

    #memberCounter h3 {

        font-size:
                1.5rem;
    }

    h1 {

        font-size:
                2.5rem;
    }
}



/*
|--------------------------------------------------------------------------
| MODERN ARTICLE HEADER / FOOTER
|--------------------------------------------------------------------------
*/

article > header,
article > footer {

    background:
            rgba(255,255,255,0.035) !important;

    border:
            1px solid rgba(255,255,255,0.05);

    backdrop-filter:
            blur(12px);

    padding:
            1.25rem 1.5rem;

    margin:
            -2rem -2rem 1.5rem -2rem;

    border-radius:
            24px 24px 0 0;

    box-shadow:
            inset 0 -1px 0 rgba(255,255,255,0.04);
}

/*
|--------------------------------------------------------------------------
| FOOTER FIX
|--------------------------------------------------------------------------
*/

article > footer {

    margin:
            1.5rem -2rem -2rem -2rem;

    border-radius:
            0 0 24px 24px;

    box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.04);
}

/*
|--------------------------------------------------------------------------
| DIALOG ARTICLE
|--------------------------------------------------------------------------
*/

dialog article {

    overflow:
            hidden;

    padding:
            2rem;

    border-radius:
            28px !important;

    background:
            rgba(15,23,42,0.94) !important;

    border:
            1px solid rgba(255,255,255,0.08);

    box-shadow:
            0 20px 60px rgba(0,0,0,0.45);
}

/*
|--------------------------------------------------------------------------
| CLOSE BUTTON
|--------------------------------------------------------------------------
*/

article > header .close {

    opacity:
            0.7;

    transition:
            0.2s ease;
}

article > header .close:hover {

    opacity:
            1;

    transform:
            scale(1.08);
}


/*
|--------------------------------------------------------------------------
| MODERN STATUS BADGES
|--------------------------------------------------------------------------
*/

.fl-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.9rem;
    margin: 0.2rem;
    border-radius: 999px; /* Schöne pillenartige Form */
    font-size: 0.85rem;
    font-weight: 650;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    transition: 0.2s ease;
}

/* Grün (Erfolg / Vorhanden) */
.fl-badge-green {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80; /* Helleres Grün für optimale Lesbarkeit im Dark Mode */
    border: 1px solid rgba(34, 197, 94, 0.25);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.05);
}

/* Rot (Gefahr / Fehlt) */
.fl-badge-red {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.05);
}

/* Blau (Info / Primär) */
.fl-badge-blue {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.25);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.05);
}

/* Gelb (Warnung / Ausstehend) */
.fl-badge-yellow {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.25);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.05);
}

.badge-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
}