/* Explain: Styles for background gradients and role-based visibility. */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    text-rendering: optimizeLegibility;
    overscroll-behavior: none;
}

body {
    margin: 0;
    overflow-x: hidden;
    overscroll-behavior: none;
    background:
        radial-gradient(circle at 10% -10%, color-mix(in srgb, #ffffff 80%, transparent), transparent 60rem),
        radial-gradient(circle at 85% 25%, color-mix(in srgb, #c6f6d5 60%, transparent), transparent 55rem),
        radial-gradient(circle at 50% 80%, color-mix(in srgb, var(--primary-color) 8%, transparent), transparent 60rem),
        linear-gradient(180deg, var(--background-color) 0%, #d1eada 100%);
}

::selection {
    background: var(--primary-color);
    color: #fff;
}

button,
a {
    cursor: pointer;
}

input,
button,
textarea,
select {
    font: inherit;
}

:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-color) 80%, transparent);
    outline-offset: 3px;
}

/* Animations */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
    animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }


/* ========================================= */
/* ROLE BASED VISIBILITY CLASSES (Cleaned up)*/
/* ========================================= */

.simulator-widget { display: none !important; }
body[data-actual-role="superadmin"] .simulator-widget.mobile-simulator { display: flex !important; }
body[data-actual-role="superadmin"] .simulator-widget.desktop-simulator { display: flex !important; }

/* Base admin overrides */
.admin-only, 
.superadmin-only { display: none; }

body[data-role="superadmin"] .superadmin-only:not(.flex):not(.inline-flex),
body[data-role="superadmin"] .admin-only:not(.flex):not(.inline-flex),
body[data-role="admin"] .admin-only:not(.flex):not(.inline-flex) {
    display: block !important;
}

body[data-role="superadmin"] .superadmin-only.flex,
body[data-role="superadmin"] .admin-only.flex,
body[data-role="admin"] .admin-only.flex {
    display: flex !important;
}

.superadmin-inline-flex { display: none !important; }
body[data-role="superadmin"] .superadmin-inline-flex {
    display: inline-flex !important;
}

.admin-inline-flex { display: none !important; }
body[data-role="superadmin"] .admin-inline-flex,
body[data-role="admin"] .admin-inline-flex {
    display: inline-flex !important;
}

/* Specific section restrictions */
body[data-role="gast"] .restrict-inventar,
body[data-role="mitglied"] .restrict-inventar,
body[data-role="mitglied_plus"] .restrict-inventar,
body[data-role="gartenprojekt"] .restrict-inventar {
    display: none !important;
}

body[data-role="gast"] .restrict-scanner,
body[data-role="mitglied"] .restrict-scanner,
body[data-role="mitglied_plus"] .restrict-scanner,
body[data-role="gartenprojekt"] .restrict-scanner {
    display: none !important;
}

body[data-role="gast"] .restrict-willkommen,
body[data-role="mitglied"] .restrict-willkommen {
    display: none !important;
}

body[data-role="gast"] .restrict-garten,
body[data-role="mitglied"] .restrict-garten,
body[data-role="mitglied_plus"] .restrict-garten {
    display: none !important;
}

body[data-role="gast"] .restrict-infos,
body[data-role="mitglied"] .restrict-infos {
    display: none !important;
}

/* Role specific triggers */
.mitglied-only { display: none !important; }
body[data-role="mitglied"] .mitglied-only:not(.flex),
body[data-role="mitglied_plus"] .mitglied-only:not(.flex),
body[data-role="superadmin"] .mitglied-only:not(.flex) { 
    display: block !important; 
}
body[data-role="mitglied"] .mitglied-only.flex,
body[data-role="mitglied_plus"] .mitglied-only.flex,
body[data-role="superadmin"] .mitglied-only.flex { 
    display: flex !important; 
}

.upgrade-eligible-only { display: none !important; }
body[data-role="gast"] .upgrade-eligible-only:not(.hidden),
body[data-role="mitglied"] .upgrade-eligible-only:not(.hidden) {
    display: revert !important;
}

.usguard-nav-item { display: none !important; }
body[data-role="mitglied_plus"] .usguard-nav-item:not(.flex),
body[data-role="gartenprojekt"] .usguard-nav-item:not(.flex),
body[data-role="mitarbeiter"] .usguard-nav-item:not(.flex),
body[data-role="admin"] .usguard-nav-item:not(.flex),
body[data-role="superadmin"] .usguard-nav-item:not(.flex) {
    display: block !important;
}
body[data-role="mitglied_plus"] .usguard-nav-item.flex,
body[data-role="gartenprojekt"] .usguard-nav-item.flex,
body[data-role="mitarbeiter"] .usguard-nav-item.flex,
body[data-role="admin"] .usguard-nav-item.flex,
body[data-role="superadmin"] .usguard-nav-item.flex {
    display: flex !important;
}

.forum-access { display: none !important; }
body:not([data-role="mitglied"]):not([data-role="gast"]) .forum-access {
    display: flex !important;
}

.forum-mp-view { display: none !important; }
body[data-role="mitglied_plus"] .forum-mp-view,
body[data-role="gartenprojekt"] .forum-mp-view {
    display: flex !important;
}

body[data-role="mitglied_plus"] .forum-normal-view,
body[data-role="gartenprojekt"] .forum-normal-view {
    display: none !important;
}

.stats-access { display: none !important; }
body[data-role="mitarbeiter"] .stats-access,
body[data-role="admin"] .stats-access,
body[data-role="superadmin"] .stats-access {
    display: block !important;
}

.delete-btn-staff { display: none !important; }
body[data-role="mitarbeiter"] .delete-btn-staff,
body[data-role="admin"] .delete-btn-staff,
body[data-role="superadmin"] .delete-btn-staff {
    display: inline-flex !important;
}

.forum-access-denied { display: block !important; }
body:not([data-role="mitglied"]):not([data-role="gast"]) .forum-access-denied {
    display: none !important;
}

body:not([data-role="superadmin"]) .restrict-mitglieder {
    display: none !important;
}

body[data-role="mitglied_plus"] .ad-gast-mitglied,
body[data-role="gartenprojekt"] .ad-gast-mitglied,
body[data-role="mitarbeiter"] .ad-gast-mitglied,
body[data-role="admin"] .ad-gast-mitglied,
body[data-role="superadmin"] .ad-gast-mitglied {
    display: none !important;
}