/* ==========================================================================
   NodeVector — Vozlišče Aesthetic
   Design system: deep black canvas, neon-blue accents, glassmorphism cards,
   and soft neon glow. Built on Bootstrap 5 dark theme conventions.
   ========================================================================== */

:root {
    --nv-blue: #4aa3df;
    --nv-blue-rgb: 74, 163, 223;
    --nv-bg: #000;
    --nv-bg-soft: #0a0a0f;
    --nv-text: #e0e0e0;
    --nv-text-bright: #ffffff;
    --nv-text-muted: rgba(255, 255, 255, 0.6);
    --nv-border: rgba(74, 163, 223, 0.2);
    --nv-glow: 0 0 10px rgba(var(--nv-blue-rgb), 0.7),
               0 0 20px rgba(var(--nv-blue-rgb), 0.5),
               0 0 30px rgba(var(--nv-blue-rgb), 0.3);
    --nv-glow-soft: 0 0 10px rgba(var(--nv-blue-rgb), 0.4);
    --nv-radius: 15px;
    --nv-radius-sm: 8px;
    --nv-radius-pill: 20px;
    --nv-card-bg: rgba(0, 0, 0, 0.6);
    --nv-navbar-bg: rgba(0, 0, 0, 0.8);
}

/* ---- Base ---- */
.nv-body {
    margin: 0;
    padding: 0;
    background-color: var(--nv-bg);
    color: var(--nv-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow-x: hidden;
    min-height: 100vh;
}

/* ---- Navbar ---- */
.nv-navbar {
    background: var(--nv-navbar-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nv-brand {
    font-weight: 700;
    color: var(--nv-text-bright) !important;
    text-decoration: none;
    letter-spacing: 0.02em;
}

/* ---- Buttons ---- */
.nv-btn-outline {
    border: 1px solid var(--nv-blue);
    color: var(--nv-blue);
    padding: 5px 20px;
    border-radius: var(--nv-radius-pill);
    text-decoration: none;
    transition: all 0.3s ease;
    background: transparent;
    cursor: pointer;
    font-weight: 500;
}
.nv-btn-outline:hover {
    box-shadow: var(--nv-glow);
    color: var(--nv-blue);
}

.nv-btn-solid {
    background-color: var(--nv-blue);
    color: #000;
    padding: 8px 24px;
    border-radius: var(--nv-radius-pill);
    text-decoration: none;
    border: 1px solid var(--nv-blue);
    transition: all 0.3s ease;
    font-weight: 600;
    cursor: pointer;
}
.nv-btn-solid:hover {
    box-shadow: var(--nv-glow);
    background-color: var(--nv-text-bright);
    color: #000;
}

/* ---- Glassmorphism Card ---- */
.nv-card {
    background: var(--nv-card-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--nv-border);
    border-radius: var(--nv-radius);
    padding: 2.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ---- Typography ---- */
.nv-title {
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--nv-text-bright);
    text-shadow:
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px var(--nv-blue),
        0 0 40px var(--nv-blue),
        0 0 80px var(--nv-blue);
}
.nv-subtitle {
    color: var(--nv-text-bright);
    font-weight: 400;
}
.nv-lead {
    font-size: 1.25rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 10px rgba(var(--nv-blue-rgb), 0.5);
}
.nv-muted { color: var(--nv-text-muted); }

/* ---- Forms ---- */
.nv-form-label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--nv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.nv-input {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--nv-border);
    color: var(--nv-text-bright);
    border-radius: var(--nv-radius-sm);
    padding: 0.7rem 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
}
.nv-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.nv-input:focus {
    background: rgba(0, 0, 0, 0.7);
    border-color: var(--nv-blue);
    box-shadow: var(--nv-glow-soft);
    color: var(--nv-text-bright);
    outline: none;
}
.nv-input-icon {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--nv-border);
    color: var(--nv-blue);
    border-radius: var(--nv-radius-sm);
}
.nv-input-group .nv-input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.nv-input-group .nv-input-icon {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

/* ---- Links ---- */
a.nv-link {
    color: var(--nv-blue);
    text-decoration: none;
    border-bottom: 1px solid var(--nv-blue);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
a.nv-link:hover {
    opacity: 1;
    box-shadow: var(--nv-glow);
}

/* ---- Alerts ---- */
.nv-alert {
    background: rgba(var(--nv-blue-rgb), 0.1);
    border: 1px solid var(--nv-border);
    color: var(--nv-blue);
    border-radius: var(--nv-radius-sm);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}

/* ---- Footer ---- */
.nv-footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--nv-text-muted);
    font-size: 0.8rem;
}

/* ---- Decorative background canvas container ---- */
#nv-canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: var(--nv-bg);
    pointer-events: none;
}

/* ---- Centered stage for auth / single-panel pages ---- */
.nv-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    z-index: 1;
}
.nv-auth-card {
    width: 100%;
    max-width: 440px;
    text-align: center;
}
.nv-auth-card .nv-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    display: block;
}