@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Nunito+Sans:wght@400;500;600;700&display=swap');

/* ------------------------------------------
   BIO-CIVIC HOLOGRID � Design System 2050
   ------------------------------------------ */
:root {
    --bg-0: #d9e6f3;
    --bg-1: #eaf2fa;
    --bg-2: #d3e2f2;
    --bg-3: #c2d6ea;
    --panel:        rgba(244, 250, 255, 0.82);
    --panel-light:  rgba(14, 47, 84, 0.08);
    --panel-stroke: rgba(20, 62, 104, 0.24);
    --panel-stroke-hi: rgba(27, 112, 177, 0.42);
    --text-1: #102c4f;
    --text-2: #234f79;
    --text-3: #3c6690;
    --cyan:   #18c6df;
    --mint:   #3fd6e9;
    --lime:   #bef264;
    --violet: #a78bfa;
    --danger: #fb7185;
    --warn:   #fbbf24;
    --ok:     #4ade80;
    --r-sm: 0.5rem;
    --r-md: 0.875rem;
    --r-lg: 1.25rem;
    --r-xl: 1.6rem;
    --shadow-sm:   0 6px 18px rgba(14, 42, 77, .16);
    --shadow-md:   0 14px 36px rgba(14, 42, 77, .24);
    --shadow-glow: 0 0 28px rgba(24, 198, 223, 0.22);
    --shadow-card: 0 10px 30px rgba(14, 42, 77, .19), inset 0 1px 0 rgba(255,255,255,.28);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    background-color: var(--bg-0);
    color: var(--text-1);
    min-height: 100vh;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(24,198,223,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(24,198,223,.04) 1px, transparent 1px);
    background-size: 52px 52px;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 900px 520px at -8% -15%, rgba(24,198,223,.14), transparent 55%),
        radial-gradient(ellipse 700px 500px at 105% 90%, rgba(14,42,77,.16), transparent 55%),
        radial-gradient(ellipse 600px 400px at 55% 115%, rgba(63,214,233,.08), transparent 55%);
}

#app-wrapper, .sidebar-panel, main, .auth-shell { position: relative; z-index: 1; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Sora', sans-serif;
    letter-spacing: -0.025em;
    color: var(--text-1);
}

/* -- Sidebar -- */
.sidebar-panel {
    background:
        radial-gradient(800px 420px at -30% -20%, rgba(24,198,223,.13), transparent 60%),
        linear-gradient(180deg, #eef5fc 0%, var(--bg-2) 100%);
    border-right: 1px solid var(--panel-stroke);
    box-shadow: 6px 0 30px rgba(14,42,77,.18);
}

.sidebar-logo-ring {
    position: relative;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 0.9rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-0);
    font-weight: 800;
    box-shadow: 0 0 18px rgba(34,211,238,.45);
}

.sidebar-logo-ring::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 0.9rem;
    border: 1px solid rgba(34,211,238,.35);
    animation: ring-pulse 3s ease-in-out infinite;
}

@keyframes ring-pulse {
    0%, 100% { opacity: .6; transform: scale(1); }
    50%       { opacity: 1;  transform: scale(1.06); }
}

.nav-section-label {
    padding: 0 1rem;
    font-size: 0.65rem;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 0.4rem;
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--panel-stroke), transparent);
}

.menu-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border-radius: var(--r-md);
    padding: 0.65rem 1rem;
    color: var(--text-2);
    font-weight: 600;
    font-size: 0.84rem;
    letter-spacing: 0.01em;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.menu-link::before {
    content: '';
    position: absolute;
    inset-y: 6px;
    left: 6px;
    width: 2.5px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--cyan), var(--mint));
    opacity: 0;
    transform: scaleY(0.25);
    transition: 0.22s cubic-bezier(.4,0,.2,1);
}

.menu-link:hover,
.menu-link.active {
    color: var(--text-1);
    transform: translateX(4px);
    background: rgba(34,211,238,.06);
    border: 1px solid rgba(34,211,238,.12);
}

.menu-link:hover::before,
.menu-link.active::before {
    opacity: 1;
    transform: scaleY(1);
}

.menu-link.active {
    color: var(--cyan);
    background: rgba(34,211,238,.10);
    border: 1px solid rgba(34,211,238,.22);
    box-shadow: 0 0 16px rgba(34,211,238,.08);
}

.menu-link i { flex-shrink: 0; font-size: 1.15rem; width: 1.4rem; text-align: center; }

.user-holo-card {
    background: rgba(34,211,238,.05);
    border: 1px solid var(--panel-stroke);
    border-radius: var(--r-lg);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
}

.user-holo-card::before {
    content: '';
    position: absolute;
    top: -20px; right: -20px;
    width: 80px; height: 80px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(34,211,238,.18), transparent 65%);
}

.user-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, var(--cyan) 0%, var(--violet) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-family: 'Sora', sans-serif;
    font-size: 0.9rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(34,211,238,.3);
}

.topbar {
    background: rgba(241, 248, 255, 0.78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--panel-stroke);
    box-shadow: 0 6px 20px rgba(14,42,77,.13);
}

.topbar-title {
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.01em;
}

.topbar-badge {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    color: var(--cyan);
    border: 1px solid rgba(34,211,238,.35);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    letter-spacing: 0.08em;
}

/* -- Glass panels -- */
.glass-card {
    background: var(--panel);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--panel-stroke);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-card);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.glass-card:hover {
    border-color: rgba(34,211,238,.3);
    box-shadow: var(--shadow-card), var(--shadow-glow);
    transform: translateY(-2px);
}

.holo-panel {
    background: linear-gradient(135deg, rgba(238,247,255,.88) 0%, rgba(218,233,248,.82) 100%);
    border: 1px solid var(--panel-stroke);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.holo-panel::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    opacity: 0.6;
}

.holo-panel:hover {
    border-color: rgba(34,211,238,.4);
    box-shadow: var(--shadow-card), 0 0 24px rgba(34,211,238,.18);
    transform: translateY(-3px);
}

/* -- Flash -- */
.flash-success {
    background: rgba(74, 222, 128, 0.10);
    border: 1px solid rgba(74, 222, 128, 0.30);
    color: var(--ok);
    border-radius: var(--r-md);
}
.flash-error {
    background: rgba(251, 113, 133, 0.10);
    border: 1px solid rgba(251, 113, 133, 0.30);
    color: var(--danger);
    border-radius: var(--r-md);
}

/* -- Tables -- */
thead { background: rgba(34,211,238,.05); }
thead th {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-3) !important;
}
tbody tr { border-bottom: 1px solid rgba(34,211,238,.06); transition: background 0.18s ease; }
tbody tr:hover { background: rgba(34,211,238,.06); }
tbody td { color: var(--text-2); }
tbody td:first-child { color: var(--text-1); font-weight: 600; }

/* -- Buttons (tailwind compat) -- */
.btn-primary {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1.4rem; border-radius: var(--r-md);
    font-family: 'Sora', sans-serif; font-size: 0.84rem; font-weight: 700;
    background: linear-gradient(135deg, var(--cyan), var(--mint));
    color: var(--bg-0); border: none; cursor: pointer;
    transition: all 0.22s ease; box-shadow: 0 4px 14px rgba(34,211,238,.35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(34,211,238,.5); filter: brightness(1.08); }

/* -- Form overrides -- */
section input:not([type='checkbox']):not([type='radio']),
section textarea, section select {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid var(--panel-stroke) !important;
    border-radius: var(--r-md) !important;
    color: var(--text-1) !important;
}
section input:focus, section textarea:focus, section select:focus {
    border-color: var(--cyan) !important;
    box-shadow: 0 0 0 3px rgba(34,211,238,.16) !important;
    transform: none;
}
section select option { background: var(--bg-2); color: var(--text-1); }
section label { color: var(--text-2) !important; }

/* -- Badges -- */
.badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-family: 'Space Mono', monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.badge-ok     { background: rgba(74,222,128,.12); color: var(--ok);    border: 1px solid rgba(74,222,128,.28); }
.badge-warn   { background: rgba(251,191,36,.12);  color: var(--warn);  border: 1px solid rgba(251,191,36,.28); }
.badge-danger { background: rgba(251,113,133,.12); color: var(--danger); border: 1px solid rgba(251,113,133,.28); }
.badge-info   { background: rgba(34,211,238,.12);  color: var(--cyan);  border: 1px solid rgba(34,211,238,.28); }
.badge-muted  { background: rgba(255,255,255,.12); color: var(--text-2); border: 1px solid rgba(20,62,104,.22); }

/* -- Auth -- */
.bg-auth-pattern {
    background:
    radial-gradient(ellipse 900px 600px at -5% -15%, rgba(24,198,223,.18), transparent 55%),
    radial-gradient(ellipse 700px 500px at 105% 105%, rgba(14,42,77,.18), transparent 55%),
    linear-gradient(160deg, #dde9f5 0%, #c8dbed 100%);
}
.auth-shell { position: relative; overflow: hidden; }
.auth-card {
    position: relative; z-index: 2;
    background: rgba(241,247,255,.82);
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    border: 1px solid var(--panel-stroke-hi);
    border-radius: var(--r-xl);
    box-shadow: 0 20px 55px rgba(14,42,77,.16), 0 0 30px rgba(24,198,223,.12);
    animation: slide-up 0.52s cubic-bezier(.22,.84,.36,1) both;
}
.auth-glow-1, .auth-glow-2 {
    position: absolute; border-radius: 999px; filter: blur(70px); z-index: 0; pointer-events: none;
}
.auth-glow-1 { width: 440px; height: 440px; background: rgba(34,211,238,.22); top: -200px; left: -160px; animation: drift-1 8s ease-in-out infinite alternate; }
.auth-glow-2 { width: 380px; height: 380px; background: rgba(94,234,212,.16); bottom: -220px; right: -120px; animation: drift-2 9s ease-in-out infinite alternate; }
@keyframes drift-1 { from { transform: translate(0,0) scale(1); } to { transform: translate(30px,20px) scale(1.07); } }
@keyframes drift-2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-20px,-30px) scale(1.05); } }
@keyframes slide-up { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* -- Scanline -- */
.scan-lines { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; overflow: hidden; z-index: 0; }
.scan-lines::before {
    content: ''; position: absolute; left: 0; right: 0; height: 40%;
    background: linear-gradient(180deg, transparent, rgba(34,211,238,.04), transparent);
    animation: scan 5s linear infinite;
}
@keyframes scan { from { top: -40%; } to { top: 110%; } }

/* -- Misc -- */
.holo-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--panel-stroke), transparent); margin: 0.5rem 0; }

.logout-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; padding: 0.65rem 1rem; border-radius: var(--r-md);
    font-size: 0.82rem; font-weight: 700;
    background: rgba(251,113,133,.07); color: rgba(251,113,133,.88);
    border: 1px solid rgba(251,113,133,.18); cursor: pointer; transition: all 0.22s ease;
}
.logout-btn:hover { background: rgba(251,113,133,.14); color: var(--danger); border-color: rgba(251,113,133,.4); box-shadow: 0 0 16px rgba(251,113,133,.15); }

/* -- Reveal animation -- */
.reveal-in { opacity: 0; transform: translateY(14px); }
.reveal-in.show { opacity: 1; transform: translateY(0); transition: opacity 0.44s ease, transform 0.44s ease; }

/* -- Scrollbar -- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: rgba(34,211,238,.28); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(34,211,238,.5); }

@media print {
    .no-print { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .sidebar-panel { display: none !important; }
}

@media (max-width: 768px) {
    .glass-card, .holo-panel { border-radius: var(--r-lg); }
    .menu-link { padding: 0.6rem 0.85rem; }
}