/* ═══════════════════════════════════════════════════════════════
   SportManager — Design System
   Dark theme, animated background, professional components
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── VARIABILE ───────────────────────────────────────────────── */
:root {
    --bg:          #0d1117;
    --surface:     #161b22;
    --surface2:    #1c2128;
    --surface3:    #21262d;
    --border:      #30363d;
    --border2:     #21262d;
    --accent:      #1d6feb;
    --accent2:     #388bfd;
    --accent-bg:   rgba(29,111,235,.13);
    --accent-glow: rgba(29,111,235,.25);
    --text:        #e6edf3;
    --text2:       #c9d1d9;
    --muted:       #8b949e;
    --muted2:      #6e7681;
    --success:     #3fb950;
    --success-bg:  rgba(63,185,80,.12);
    --danger:      #f85149;
    --danger-bg:   rgba(248,81,73,.12);
    --warning:     #d29922;
    --warning-bg:  rgba(210,153,34,.12);
    --radius:      14px;
    --radius-sm:   8px;
    --radius-xs:   6px;
    --shadow:      0 8px 32px rgba(0,0,0,.55);
    --shadow-sm:   0 2px 12px rgba(0,0,0,.4);
    --shadow-lg:   0 20px 60px rgba(0,0,0,.7);
    --sidebar-w:   256px;
    --transition:  .2s ease;
}

/* ── BASE ────────────────────────────────────────────────────── */
html {
    height: 100%;
    background: var(--bg); /* fallback canvas dacă pseudo-elementele nu se încarcă */
}

body {
    height: 100%;
    background: transparent; /* pseudo-elementele ::before/::after asigură fundalul */
    color: var(--text);
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ── FUNDAL ANIMAT ───────────────────────────────────────────── */
body::before {
    content: '';
    position: fixed;
    inset: -20%;
    background: linear-gradient(
        125deg,
        #0d1117  0%,
        #0a0f1e  30%,
        #0d1117  60%,
        #0b1628  85%,
        #0d1117  100%
    );
    background-size: 350% 350%;
    animation: bgFlow 20s ease infinite;
    pointer-events: none;
    z-index: -2; /* sub tot conținutul */
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(ellipse 60% 50% at 10% 25%,  rgba(29,111,235,.14) 0%, transparent 55%),
        radial-gradient(ellipse 50% 45% at 90% 80%,  rgba(56,139,253,.09) 0%, transparent 52%),
        radial-gradient(ellipse 35% 30% at 50% 0%,   rgba(29,111,235,.07) 0%, transparent 48%),
        radial-gradient(ellipse 28% 25% at 5%  90%,  rgba(56,139,253,.05) 0%, transparent 45%);
    animation: orbPulse 10s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1; /* peste ::before dar sub conținut */
}

@keyframes bgFlow {
    0%   { background-position:   0%   0%; }
    25%  { background-position: 100%  30%; }
    50%  { background-position:  60% 100%; }
    75%  { background-position:   0%  70%; }
    100% { background-position:   0%   0%; }
}

@keyframes orbPulse {
    0%   { opacity: .6;  transform: scale(1)    translate(0,    0); }
    33%  { opacity: .85; transform: scale(1.05) translate(1.5%, 2%); }
    66%  { opacity: .75; transform: scale(1.02) translate(-1%,  1%); }
    100% { opacity: 1;   transform: scale(1.08) translate(2%,  -2%); }
}

/* ── SUPRASCRIERE CULORI TAILWIND ────────────────────────────── */

/* Fundal pagini */
.bg-gray-50  { background-color: var(--bg)       !important; }
.bg-gray-100 { background-color: var(--surface2) !important; }
.bg-gray-200 { background-color: var(--surface3) !important; }
.bg-white    { background-color: var(--surface)  !important; }

/* Text */
.text-gray-900 { color: var(--text)  !important; }
.text-gray-800 { color: var(--text)  !important; }
.text-gray-700 { color: var(--text2) !important; }
.text-gray-600 { color: var(--muted) !important; }
.text-gray-500 { color: var(--muted) !important; }
.text-gray-400 { color: var(--muted2)!important; }
.text-gray-300 { color: var(--muted2)!important; }

/* Borduri */
.border-gray-100 { border-color: var(--border2) !important; }
.border-gray-200 { border-color: var(--border2) !important; }
.border-gray-300 { border-color: var(--border)  !important; }

/* Hover bg */
.hover\:bg-gray-50:hover  { background-color: var(--surface2) !important; }
.hover\:bg-gray-200:hover { background-color: var(--surface3) !important; }

/* Culori status — variante dark */
.bg-green-100  { background-color: var(--success-bg) !important; }
.text-green-600,
.text-green-700 { color: var(--success) !important; }
.border-green-200 { border-color: rgba(63,185,80,.25) !important; }

.bg-red-50  { background-color: rgba(248,81,73,.08)  !important; }
.bg-red-100 { background-color: var(--danger-bg) !important; }
.text-red-500,
.text-red-600,
.text-red-700 { color: var(--danger) !important; }
.border-red-200 { border-color: rgba(248,81,73,.25) !important; }

.bg-yellow-100  { background-color: var(--warning-bg) !important; }
.text-yellow-700 { color: var(--warning) !important; }

.bg-blue-50  { background-color: var(--accent-bg) !important; }
.bg-blue-100 { background-color: var(--accent-bg) !important; }
.text-blue-600,
.text-blue-700 { color: var(--accent2) !important; }
.border-blue-200 { border-color: rgba(29,111,235,.25) !important; }

.bg-orange-50  { background-color: rgba(251,146,60,.08) !important; }
.bg-orange-100 { background-color: rgba(251,146,60,.12) !important; }
.text-orange-600,
.text-orange-700 { color: #fb923c !important; }

/* Umbra carduri */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: 0 4px 20px rgba(0,0,0,.5) !important; }

/* Hover shadow */
.hover\:shadow-md:hover { box-shadow: 0 8px 30px rgba(0,0,0,.55) !important; }

/* Hover bg blue */
.hover\:bg-blue-50:hover { background-color: var(--accent-bg) !important; }
.hover\:bg-red-50:hover  { background-color: var(--danger-bg)  !important; }
.hover\:bg-green-50:hover { background-color: var(--success-bg) !important; }
.hover\:bg-orange-50:hover { background-color: rgba(251,146,60,.1) !important; }

/* ── INPUTURI ────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="tel"],
textarea,
select {
    background-color: var(--surface2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
    color: var(--muted2) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    background-color: var(--surface3) !important;
    border-color: var(--accent) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(29,111,235,.2) !important;
}

select option {
    background: var(--surface2);
    color: var(--text);
}

/* Checkbox */
input[type="checkbox"] {
    accent-color: var(--accent);
}

/* ── BUTOANE ─────────────────────────────────────────────────── */
.bg-blue-700 {
    background-color: var(--accent) !important;
    position: relative;
    overflow: hidden;
}
.bg-blue-700::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 60%);
    pointer-events: none;
}
.hover\:bg-blue-800:hover { background-color: #1558c9 !important; }

.bg-gray-700 { background-color: var(--surface3) !important; }
.hover\:bg-gray-800:hover { background-color: #1c2128 !important; }

/* ── SIDEBAR ─────────────────────────────────────────────────── */
.sp-sidebar {
    width: var(--sidebar-w);
    min-height: 100vh;
    background: var(--surface);
    border-right: 1px solid var(--border2);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
    isolation: isolate;
}

.sp-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(29,111,235,.10) 0%, transparent 60%),
        radial-gradient(ellipse 50% 30% at 50% 100%, rgba(29,111,235,.06) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.sp-sidebar > * { position: relative; z-index: 1; }

.sp-sidebar-head {
    padding: 22px 20px;
    border-bottom: 1px solid var(--border2);
    display: flex;
    align-items: center;
    gap: 12px;
}

.sp-sidebar-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(29,111,235,.35);
}

.sp-sidebar-logo svg {
    width: 22px;
    height: 22px;
    color: #fff;
}

.sp-sidebar-club {
    min-width: 0;
}

.sp-sidebar-club-name {
    font-weight: 700;
    font-size: .9rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.sp-sidebar-club-email {
    font-size: .72rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.sp-sidebar-nav {
    flex: 1;
    padding: 12px 10px;
}

.sp-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: all var(--transition);
    margin-bottom: 2px;
    position: relative;
    overflow: hidden;
}

.sp-nav-link::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent), var(--accent2));
    border-radius: 0 3px 3px 0;
    transform: scaleY(0);
    transition: transform var(--transition);
}

.sp-nav-link:hover {
    color: var(--text);
    background: var(--surface2);
}

.sp-nav-link.active {
    color: var(--text);
    background: var(--accent-bg);
    border: 1px solid rgba(29,111,235,.2);
}

.sp-nav-link.active::before {
    transform: scaleY(1);
}

.sp-nav-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: inherit;
    opacity: .8;
}

.sp-nav-link.active svg { opacity: 1; color: var(--accent2); }

.sp-nav-sep {
    height: 1px;
    background: var(--border2);
    margin: 6px 12px;
    opacity: .5;
}

.sp-nav-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #00d4ff;
    color: #060b18;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.sp-sidebar-footer {
    padding: 12px 10px;
    border-top: 1px solid var(--border2);
}

.sp-logout {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: all var(--transition);
}

.sp-logout:hover {
    color: var(--danger);
    background: var(--danger-bg);
}

.sp-logout svg { width: 18px; height: 18px; }

/* Logo upload hover overlay */
.sp-logo-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.sp-logo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 10px;
    opacity: 0;
    transition: opacity .2s;
}
.sp-logo-upload:hover .sp-logo-overlay { opacity: 1; }

/* Admin sidebar accent */
.sp-sidebar.admin .sp-sidebar-logo {
    background: linear-gradient(135deg, #6e40c9, #8b5cf6);
    box-shadow: 0 4px 12px rgba(110,64,201,.35);
}
.sp-sidebar.admin .sp-nav-link.active {
    background: rgba(110,64,201,.12);
    border-color: rgba(110,64,201,.2);
}
.sp-sidebar.admin .sp-nav-link.active::before {
    background: linear-gradient(180deg, #6e40c9, #8b5cf6);
}
.sp-sidebar.admin .sp-nav-link.active svg { color: #a78bfa; }

/* ── MAIN CONTENT ────────────────────────────────────────────── */
.sp-main {
    flex: 1;
    overflow-y: auto;
    background: var(--bg);
    padding: 36px 32px;
    position: relative;
    z-index: 1;
}

/* ── CARDURI STATISTICI ──────────────────────────────────────── */
.bg-white.rounded-2xl,
.bg-white.rounded-xl {
    background: var(--surface) !important;
    border: 1px solid var(--border2) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: border-color var(--transition), box-shadow var(--transition) !important;
}

.bg-white.rounded-2xl:hover,
.bg-white.rounded-xl:hover {
    border-color: rgba(29,111,235,.25) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.5) !important;
}

/* ── TABELE ──────────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; }

thead.bg-gray-50 {
    background: var(--surface2) !important;
}

tbody tr:hover {
    background: var(--surface2) !important;
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
    border-top-color: var(--border2) !important;
}

/* ── MODAL ───────────────────────────────────────────────────── */
.fixed.inset-0.bg-black\/50 {
    background: rgba(0,0,0,.75) !important;
    backdrop-filter: blur(4px);
}

/* Modal container */
.bg-white.rounded-2xl.shadow-2xl {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Modal header border */
.border-b {
    border-bottom-color: var(--border2) !important;
}

/* ── LOGIN PAGE ──────────────────────────────────────────────── */
.bg-gradient-to-br {
    background: var(--bg) !important;
}

/* ── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted2); }

/* ── NOTIFICARI TOAST ────────────────────────────────────────── */
#copy-toast {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow) !important;
}

/* ── LAYOUT WRAPPER ──────────────────────────────────────────── */
/* z-index nu mai e necesar — pseudo-elementele sunt la z-index negativ */
.flex.h-screen.overflow-hidden {
    position: relative;
}

/* ── STAT CARDS ──────────────────────────────────────────────── */
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.stat-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}

.stat-card:hover { border-color: rgba(29,111,235,.3); box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.stat-card:hover::after { transform: scaleX(1); }

/* ── OVERFLOW SCROLL MAIN ────────────────────────────────────── */
.overflow-y-auto { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg); }

/* ── BORDER TOP/BOTTOM ───────────────────────────────────────── */
.border-t { border-top-color: var(--border2) !important; }
.border-b { border-bottom-color: var(--border2) !important; }

/* ── BADGE NOTIFICAT ─────────────────────────────────────────── */
.bg-blue-100.text-blue-700 {
    background: var(--accent-bg) !important;
    color: var(--accent2) !important;
}

/* ── FOCUS RING ──────────────────────────────────────────────── */
.focus\:ring-blue-500:focus {
    --tw-ring-color: rgba(29,111,235,.3) !important;
}

/* ── GLOW CARD (pattern standard proiect — cyan) ─────────────── */
@keyframes pulseGlow {
    0%,100% {
        box-shadow:
            0 4px 24px rgba(0,0,0,.45),
            0 0 0 1px rgba(0,212,255,.12),
            0 0 18px rgba(0,212,255,.08);
    }
    50% {
        box-shadow:
            0 4px 24px rgba(0,0,0,.45),
            0 0 0 1px rgba(0,212,255,.38),
            0 0 32px rgba(0,212,255,.20);
    }
}

.sp-card {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid rgba(0,212,255,.10) !important;
    border-radius: 18px !important;
    padding: 24px;
    animation: pulseGlow 3s ease-in-out infinite;
    transition: transform .25s, border-color .25s, box-shadow .25s;
}
.sp-card::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(0,212,255,.04) 0%, transparent 55%);
}
.sp-card::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #00d4ff, #6366f1, #00d4ff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s;
}
.sp-card:hover::after { transform: scaleX(1); }
.sp-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0,212,255,.42) !important;
    animation-play-state: paused;
}
/* Conținut deasupra pseudo-elementelor */
.sp-card > * { position: relative; }

/* ── WRAPPER PAGINI PUBLICE (offset pentru navbar fix de 56px) ── */
/* Orice pagină care folosește pub-page-wrap are conținut sub navbar */
.pub-page-wrap {
    padding-top: 56px; /* egal cu height-ul .pub-nav */
}

/* ── NAVBAR PUBLIC (login, register, pending) ────────────────── */
.pub-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    z-index: 200;
    background: rgba(13,17,23,.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border2);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 8px;
}
.pub-nav-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: .95rem;
    color: var(--text);
    text-decoration: none;
    flex-shrink: 0;
}
.pub-nav-logo-icon {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, rgba(0,212,255,.15), rgba(99,102,241,.15));
    border: 1px solid rgba(0,212,255,.3);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pub-nav-logo-icon svg { width: 17px; height: 17px; stroke: #00d4ff; }
.pub-nav-sep  { flex: 1; }
.pub-nav-link {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: .84rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    transition: .18s;
    border: 1px solid transparent;
    white-space: nowrap;
}
.pub-nav-link:hover {
    color: var(--text);
    background: var(--surface2);
}
.pub-nav-link.active {
    color: var(--accent2);
    border-color: rgba(99,102,241,.3);
    background: rgba(99,102,241,.08);
}
.pub-nav-link.btn {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    border-color: transparent;
    font-weight: 600;
}
.pub-nav-link.btn:hover { opacity: .88; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); }

/* Hamburger button — vizibil doar pe mobil */
.pub-nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 7px 8px;
    border-radius: 9px;
    border: 1px solid rgba(0,212,255,.22);
    background: transparent;
    margin-left: auto;
    flex-shrink: 0;
}
.pub-nav-burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: #00d4ff;
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
/* Animație X la deschis */
.pub-nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pub-nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.pub-nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dropdown mobil */
.pub-nav-mobile {
    display: none;
    position: fixed;
    top: 56px; left: 0; right: 0;
    background: rgba(10,14,20,.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border2);
    flex-direction: column;
    padding: 8px 14px 14px;
    gap: 4px;
    z-index: 199;
}
.pub-nav-mobile.open { display: flex; }
.pub-nav-mobile .pub-nav-link {
    display: block;
    font-size: .92rem;
    padding: 11px 14px;
    border-radius: 10px;
}
.pub-nav-mobile .pub-nav-link.btn {
    text-align: center;
    margin-top: 4px;
}

@media (max-width: 639px) {
    /* Ascunde linkurile desktop */
    .pub-nav > .pub-nav-link,
    .pub-nav > .pub-nav-sep { display: none; }
    /* Arată hamburgerul */
    .pub-nav-burger { display: flex; }
}

/* ── LOGIN PAGE ──────────────────────────────────────────────── */
.login-page {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 16px 24px; /* 80px top pentru navbar fix */
}

.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 420px;
    padding: 40px 36px;
    position: relative;
    z-index: 10;
}

.login-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    background: linear-gradient(135deg, rgba(0,212,255,.15), rgba(99,102,241,.15));
    border: 1px solid rgba(0,212,255,.35);
    border-radius: 18px;
    box-shadow:
        0 0 24px rgba(0,212,255,.20),
        0 0 48px rgba(0,212,255,.10),
        inset 0 1px 0 rgba(255,255,255,.06);
}
.login-logo svg { width: 32px; height: 32px; stroke: #00d4ff; }

.login-label {
    display: block;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text2);
    margin-bottom: 6px;
}

.login-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--surface2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px;
    font-size: .95rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.login-input::placeholder { color: var(--muted2); }

.login-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(29,111,235,.2);
    background: var(--surface3) !important;
}

.login-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
    box-shadow: 0 4px 16px rgba(29,111,235,.35);
}

.login-btn:hover { opacity: .9; transform: translateY(-1px); }
.login-btn:active { transform: translateY(0); }

/* Autocomplete dark override (iOS/Chrome) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--surface2) inset !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text) !important;
}

/* ── TOGGLE MINOR/MAJOR ──────────────────────────────────────── */
.age-toggle {
    display: flex;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
}

.age-toggle-btn {
    flex: 1;
    padding: 7px 12px;
    border: none;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    background: transparent;
    color: var(--muted);
}

.age-toggle-btn.active {
    background: var(--surface3);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

.age-toggle-btn.active.minor { color: #f59e0b; }
.age-toggle-btn.active.adult { color: var(--accent2); }

/* ── MOBILE TOPBAR ───────────────────────────────────────────── */
.sp-topbar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 54px;
    background: var(--surface);
    border-bottom: 1px solid var(--border2);
    align-items: center;
    padding: 0 16px;
    /* z-index 39: deasupra conținutului (z-1) dar sub:
       - modalele Tailwind z-50 (50)
       - overlay modal calendar z-40 (40)
       - overlay sidebar z-190 (190)
       - sidebar z-200 (200)                                      */
    z-index: 39;
    gap: 12px;
}

.sp-hamburger-btn {
    width: 38px;
    height: 38px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition);
}
.sp-hamburger-btn:hover { background: var(--surface3); }

.sp-topbar-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.sp-topbar-title {
    font-weight: 700;
    font-size: .88rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.sp-topbar-role {
    font-size: .7rem;
    color: var(--muted);
    line-height: 1.2;
}

/* ── MOBILE OVERLAY ──────────────────────────────────────────── */
.sp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 190;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.sp-overlay.sp-open { display: block; }

/* Buton închidere sidebar (mobil) */
.sp-sidebar-close {
    display: none;
    margin-left: auto;
    width: 32px;
    height: 32px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sp-sidebar { width: 240px; }
    .sp-main    { padding: 24px 18px; }
}

@media (max-width: 640px) {
    /* Sidebar: slide din stânga, ascuns implicit */
    .sp-sidebar {
        position: fixed;
        left: 0; top: 0;
        height: 100%;
        width: 280px;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4,0,.2,1),
                    box-shadow .28s ease;
        display: flex; /* suprascrie display:none implicit */
    }
    .sp-sidebar.sp-open {
        transform: translateX(0);
        box-shadow: 8px 0 40px rgba(0,0,0,.85);
    }

    /* Topbar fix vizibil */
    .sp-topbar { display: flex; }

    /* Main content: spațiu pentru topbar */
    .sp-main {
        padding: 70px 16px 24px;
    }

    /* Buton × în sidebar head */
    .sp-sidebar-close { display: flex; }
}