/* ============================================================
   NEXUS — BladeRunner Cyberpunk Theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

:root {
    --neon-cyan:      #00f5ff;
    --neon-cyan-60:   rgba(0, 245, 255, 0.6);
    --neon-cyan-40:   rgba(0, 245, 255, 0.4);
    --neon-cyan-15:   rgba(0, 245, 255, 0.15);
    --neon-cyan-06:   rgba(0, 245, 255, 0.06);
    --neon-magenta:   #ff00c8;
    --neon-mag-40:    rgba(255, 0, 200, 0.4);
    --neon-mag-12:    rgba(255, 0, 200, 0.12);
    --neon-orange:    #ff6600;
    --neon-amber:     #ffbb00;
    --neon-green:     #39ff14;

    --bg-void:        #02010a;
    --bg-deep:        #06040f;
    --bg-card:        rgba(4, 8, 24, 0.92);
    --bg-input:       rgba(0, 4, 14, 0.85);
    --bg-hover:       rgba(8, 16, 40, 0.95);

    --text-primary:   #ffffff;
    --text-secondary: #00f5ff;
    --text-dim:       rgba(190, 230, 250, 0.95);

    --glow-xs:    0 0 6px rgba(0,245,255,.4), 0 0 12px rgba(0,245,255,.15);
    --glow-sm:    0 0 10px rgba(0,245,255,.5), 0 0 25px rgba(0,245,255,.2);
    --glow-md:    0 0 15px var(--neon-cyan), 0 0 40px rgba(0,245,255,.4), 0 0 70px rgba(0,245,255,.1);
    --glow-lg:    0 0 25px var(--neon-cyan), 0 0 60px rgba(0,245,255,.5), 0 0 120px rgba(0,245,255,.15);
    --glow-mag:   0 0 10px var(--neon-magenta), 0 0 30px rgba(255,0,200,.4), 0 0 60px rgba(255,0,200,.1);
    --glow-amber: 0 0 10px var(--neon-amber), 0 0 30px rgba(255,187,0,.4);
    --glow-text:  0 0 8px var(--neon-cyan), 0 0 20px rgba(0,245,255,.4);
    --glow-text-lg: 0 0 12px var(--neon-cyan), 0 0 35px rgba(0,245,255,.5), 0 0 65px rgba(0,245,255,.2);

    --border-neon:    1px solid rgba(0, 245, 255, 0.3);
    --border-bright:  1px solid rgba(0, 245, 255, 0.7);
    --border-mag:     1px solid rgba(255, 0, 200, 0.35);

    --transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
    --font-display: 'Orbitron', sans-serif;
    --font-body:    'Rajdhani', 'Segoe UI', sans-serif;
    --font-mono:    'Share Tech Mono', 'Courier New', monospace;
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--bg-void);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    letter-spacing: 0.02em;
}

/* ── Login backdrop image ── */
.login-backdrop {
    position: fixed;
    inset: 0;
    background-image: url('/images/nexus_logo.jpeg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    z-index: -1;
    filter: brightness(0.68) saturate(1.4) hue-rotate(-8deg);
    transform: scale(1.04); /* hide edge seams */
}

/* Colour wash on top of the image */
.login-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        rgba(0, 10, 40, 0.55) 0%,
        rgba(2, 1, 20, 0.75) 100%
    );
}

/* ── Dashboard header logo image ── */
.logo-img {
    height: 42px;
    width: auto;
    display: block;
    mix-blend-mode: screen;      /* dark bg of image vanishes; neon beams stay */
    filter: brightness(1.15) saturate(1.3);
    transition: var(--transition);
    pointer-events: none;
}

a.logo:hover .logo-img {
    filter: brightness(1.45) saturate(1.5)
            drop-shadow(0 0 10px rgba(0, 245, 255, 0.7))
            drop-shadow(0 0 22px rgba(0, 245, 255, 0.35));
}

/* ── CRT scanlines ── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.07) 2px,
        rgba(0, 0, 0, 0.07) 4px
    );
    pointer-events: none;
    z-index: 9000;
    animation: scanlineShift 10s linear infinite;
}

@keyframes scanlineShift {
    from { background-position: 0 0; }
    to   { background-position: 0 240px; }
}

/* ── Vignette ── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.65) 100%);
    pointer-events: none;
    z-index: 8999;
}

/* ── Background layers ── */
.cyber-grid {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,245,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,245,255,.022) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
    animation: gridDrift 40s linear infinite;
}

@keyframes gridDrift {
    from { background-position: 0 0; }
    to   { background-position: 60px 60px; }
}

#rain-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.22;
}

/* Decorative kanji */
.cyber-kanji {
    position: fixed;
    font-family: serif;
    color: rgba(0, 245, 255, 0.022);
    pointer-events: none;
    z-index: 2;
    user-select: none;
    line-height: 1;
    writing-mode: vertical-rl;
}
.cyber-kanji-1 { top: 3%;  left: 1%;  font-size: 14rem; }
.cyber-kanji-2 { bottom: 5%; right: 1.5%; font-size: 11rem; color: rgba(255,0,200,.018); }
.cyber-kanji-3 { top: 35%; left: 6%;  font-size: 7rem; }

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 10;
}

/* ============================================================
   HEADER
   ============================================================ */

.header {
    background: rgba(2, 1, 14, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0,245,255,.18);
    box-shadow: 0 0 0 1px rgba(0,245,255,.06), 0 6px 40px rgba(0,0,0,.9);
    padding: 0.8rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    overflow: hidden;
}

.header::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--neon-cyan) 30%, var(--neon-cyan) 70%, transparent 100%);
    opacity: .5;
    animation: headerScan 6s ease-in-out infinite;
}

@keyframes headerScan {
    0%   { transform: scaleX(0.1); opacity: 0; transform-origin: left; }
    40%  { transform: scaleX(1);   opacity: .7; transform-origin: left; }
    60%  { transform: scaleX(1);   opacity: .7; transform-origin: right; }
    100% { transform: scaleX(0.1); opacity: 0; transform-origin: right; }
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 800;
    text-decoration: none;
    color: var(--neon-cyan);
    text-shadow: var(--glow-text);
    letter-spacing: 0.2em;
    transition: var(--transition);
}
.logo:hover {
    text-shadow: var(--glow-text-lg);
    letter-spacing: 0.28em;
}

/* ── Nav ── */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 0.4rem;
    align-items: center;
}

.nav-menu a {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-decoration: none;
    letter-spacing: 0.14em;
    padding: 0.4rem 1rem;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: var(--transition);
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.nav-menu a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(0,245,255,.06), transparent);
    transform: translateX(-100%);
    transition: transform .5s ease;
}

.nav-menu a:hover {
    color: var(--neon-cyan);
    border-color: var(--neon-cyan-40);
    background: var(--neon-cyan-06);
    text-shadow: var(--glow-text);
    box-shadow: var(--glow-xs), inset 0 0 8px rgba(0,245,255,.04);
}

.nav-menu a:hover::before { transform: translateX(100%); }

.nav-menu a.active {
    color: var(--neon-cyan);
    border-color: var(--neon-cyan-40);
    background: var(--neon-cyan-06);
    text-shadow: var(--glow-text);
    box-shadow: var(--glow-xs), inset 0 0 8px rgba(0,245,255,.04);
    cursor: default;
    position: relative;
    z-index: 1;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
    position: relative;
    z-index: 1;
}

.nav-menu a:focus-visible {
    outline: 1px solid var(--neon-cyan);
    outline-offset: 2px;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: var(--border-neon);
    color: var(--neon-cyan);
    font-size: 1.15rem;
    cursor: pointer;
    padding: 0.3rem 0.65rem;
    transition: var(--transition);
    border-radius: 2px;
}
.mobile-menu-toggle:hover { background: var(--neon-cyan-06); box-shadow: var(--glow-xs); }

/* ============================================================
   MAIN CONTENT
   ============================================================ */

.main-content {
    padding: 2.5rem 0;
    min-height: calc(100vh - 200px);
    position: relative;
    z-index: 10;
}

/* ============================================================
   CARDS
   ============================================================ */

.card {
    background: var(--bg-card);
    border: var(--border-neon);
    border-radius: 2px;
    box-shadow: var(--glow-xs), inset 0 0 30px rgba(0,245,255,.02);
    padding: 2rem;
    margin-bottom: 1.5rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Top edge glow line */
.card::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon-cyan-40), transparent);
    pointer-events: none;
}

/* Corner accents via pseudo — top-left and bottom-right */
.card-corner-tl,
.card-corner-br {
    position: absolute;
    width: 16px; height: 16px;
}
.card-corner-tl {
    top: -1px; left: -1px;
    border-top: 2px solid var(--neon-cyan);
    border-left: 2px solid var(--neon-cyan);
}
.card-corner-br {
    bottom: -1px; right: -1px;
    border-bottom: 2px solid rgba(0,245,255,.4);
    border-right: 2px solid rgba(0,245,255,.4);
}

.card:hover {
    box-shadow: var(--glow-sm), inset 0 0 40px rgba(0,245,255,.04);
    border-color: rgba(0,245,255,.55);
}

.card-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0,245,255,.12);
    position: relative;
}

.card-header::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    width: 50px; height: 1px;
    background: var(--neon-cyan);
    box-shadow: var(--glow-xs);
}

.card-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--neon-cyan);
    text-shadow: var(--glow-text);
    letter-spacing: 0.1em;
    margin-bottom: 0.35rem;
}

.card-subtitle {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* ============================================================
   FORMS
   ============================================================ */

.form-group { margin-bottom: 1.5rem; }

.form-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.45rem;
}
.form-label::before {
    content: '> ';
    color: var(--neon-cyan);
    opacity: 0.65;
}

.form-control {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--bg-input);
    border: 1px solid rgba(0,245,255,.2);
    border-radius: 2px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    transition: var(--transition);
    outline: none;
}

.form-control::placeholder { color: var(--text-dim); font-size: 0.85rem; }

.form-control:focus {
    border-color: var(--neon-cyan);
    box-shadow: var(--glow-xs), inset 0 0 12px rgba(0,245,255,.06);
    background: rgba(0, 6, 20, 0.92);
    color: var(--neon-cyan);
    caret-color: var(--neon-cyan);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding: 0.85rem 2rem;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    display: inline-block;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,245,255,.12), transparent);
    transition: left .55s ease;
}
.btn:hover::before { left: 100%; }

.btn-primary {
    background: transparent;
    color: var(--neon-cyan);
    border: 1px solid var(--neon-cyan);
    box-shadow: var(--glow-xs), inset 0 0 12px rgba(0,245,255,.05);
}
.btn-primary:hover {
    background: rgba(0,245,255,.08);
    box-shadow: var(--glow-sm), inset 0 0 20px rgba(0,245,255,.08);
    text-shadow: var(--glow-text);
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid rgba(140,190,225,.3);
}
.btn-secondary:hover { color: var(--text-primary); border-color: rgba(140,190,225,.6); }

.btn-success {
    background: transparent;
    color: var(--neon-green);
    border: 1px solid var(--neon-green);
    box-shadow: 0 0 8px rgba(57,255,20,.25);
}
.btn-success:hover {
    background: rgba(57,255,20,.07);
    box-shadow: 0 0 18px rgba(57,255,20,.45), inset 0 0 12px rgba(57,255,20,.05);
}

.btn-danger {
    background: transparent;
    color: var(--neon-magenta);
    border: var(--border-mag);
    box-shadow: 0 0 8px rgba(255,0,200,.25);
}
.btn-danger:hover {
    background: var(--neon-mag-12);
    box-shadow: var(--glow-mag), inset 0 0 12px rgba(255,0,200,.05);
}

/* ============================================================
   ALERTS
   ============================================================ */

.alert {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    padding: 0.9rem 1.2rem;
    border-radius: 2px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    animation: alertIn .3s cubic-bezier(0.2,0,0,1);
}

@keyframes alertIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.alert::before { content: '//'; opacity: .5; flex-shrink: 0; }

.alert-success {
    background: rgba(57,255,20,.05);
    color: var(--neon-green);
    border: 1px solid rgba(57,255,20,.28);
    border-left: 3px solid var(--neon-green);
    box-shadow: 0 0 12px rgba(57,255,20,.12);
}
.alert-error {
    background: var(--neon-mag-12);
    color: var(--neon-magenta);
    border: 1px solid var(--neon-mag-40);
    border-left: 3px solid var(--neon-magenta);
    box-shadow: var(--glow-mag);
}
.alert-warning {
    background: rgba(255,187,0,.06);
    color: var(--neon-amber);
    border: 1px solid rgba(255,187,0,.3);
    border-left: 3px solid var(--neon-amber);
    box-shadow: var(--glow-amber);
}

/* ============================================================
   TABLES
   ============================================================ */

.table-container {
    overflow-x: auto;
    border: var(--border-neon);
    border-radius: 2px;
    box-shadow: var(--glow-xs);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.table th, .table td {
    padding: 0.85rem 1.1rem;
    text-align: left;
    border-bottom: 1px solid rgba(0,245,255,.07);
}

.table th {
    background: rgba(0,245,255,.05);
    color: var(--neon-cyan);
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow: var(--glow-text);
}

.table tbody tr:hover { background: rgba(0,245,255,.025); }
.table td { color: var(--text-primary); }

/* ============================================================
   BADGES
   ============================================================ */

.badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.18rem 0.65rem;
    border-radius: 2px;
}

.badge-pending  { background: rgba(255,102,0,.1);  color: var(--neon-orange);  border: 1px solid rgba(255,102,0,.35);  box-shadow: 0 0 6px rgba(255,102,0,.2); }
.badge-approved { background: rgba(57,255,20,.07);  color: var(--neon-green);   border: 1px solid rgba(57,255,20,.28);  box-shadow: 0 0 6px rgba(57,255,20,.15); }
.badge-rejected { background: var(--neon-mag-12);   color: var(--neon-magenta); border: var(--border-mag);              box-shadow: 0 0 6px rgba(255,0,200,.18); }
.badge-completed{ background: var(--neon-cyan-06);  color: var(--neon-cyan);    border: var(--border-neon);             box-shadow: var(--glow-xs); }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
    background: rgba(2, 1, 10, 0.95);
    border-top: 1px solid rgba(0,245,255,.14);
    color: var(--text-dim);
    padding: 2rem 0;
    margin-top: 3rem;
    position: relative;
    z-index: 10;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
}

.footer-links { display: flex; gap: 2rem; }
.footer-links a { color: var(--text-dim); text-decoration: none; transition: var(--transition); }
.footer-links a:hover { color: var(--neon-cyan); text-shadow: var(--glow-text); }

/* ============================================================
   LOGIN PAGE
   ============================================================ */

.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    z-index: 10;
}

/* Atmospheric glow behind card */
.login-container::before {
    content: '';
    position: fixed;
    top: 50%; left: 50%;
    width: 700px; height: 700px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, rgba(0,50,100,.22) 0%, rgba(50,0,80,.1) 50%, transparent 72%);
    pointer-events: none;
    animation: atmosphericPulse 8s ease-in-out infinite;
}

@keyframes atmosphericPulse {
    0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); }
    50%       { opacity: 1;  transform: translate(-50%, -50%) scale(1.08); }
}

.login-card {
    background: rgba(3, 6, 20, 0.94);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0,245,255,.22);
    border-radius: 2px;
    padding: 3.25rem 3rem 2.5rem;
    max-width: 490px;
    width: 100%;
    position: relative;
    box-shadow:
        var(--glow-xs),
        0 0 80px rgba(0,245,255,.04),
        inset 0 0 50px rgba(0,245,255,.015),
        0 30px 70px rgba(0,0,0,.85);
    animation: cardAppear .9s cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes cardAppear {
    from { opacity: 0; transform: translateY(35px) scale(.97); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}

/* Four corner decorations */
.corner { position: absolute; width: 20px; height: 20px; }
.corner-tl { top: -1px; left: -1px;   border-top:    2px solid var(--neon-cyan);    border-left:  2px solid var(--neon-cyan);    box-shadow: -3px -3px 10px rgba(0,245,255,.45); }
.corner-tr { top: -1px; right: -1px;  border-top:    2px solid var(--neon-cyan);    border-right: 2px solid var(--neon-cyan);    box-shadow:  3px -3px 10px rgba(0,245,255,.45); }
.corner-bl { bottom: -1px; left: -1px;  border-bottom: 2px solid var(--neon-magenta); border-left:  2px solid var(--neon-magenta); box-shadow: -3px  3px 10px rgba(255,0,200,.4); }
.corner-br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--neon-magenta); border-right: 2px solid var(--neon-magenta); box-shadow:  3px  3px 10px rgba(255,0,200,.4); }

/* ── Logo ── */
.login-logo {
    text-align: center;
    margin-bottom: 2.75rem;
    position: relative;
}

.login-logo h1 {
    font-family: var(--font-display);
    font-size: 4.2rem;
    font-weight: 900;
    letter-spacing: 0.38em;
    color: var(--neon-cyan);
    text-shadow: var(--glow-lg);
    line-height: 1;
    margin-bottom: 0.65rem;
    animation: logoFlicker 9s infinite, logoPulse 4s ease-in-out infinite;
    text-indent: 0.38em;
}

@keyframes logoFlicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow: var(--glow-lg);
        opacity: 1;
    }
    20%, 24%, 55% {
        text-shadow: none;
        opacity: 0.82;
    }
}

@keyframes logoPulse {
    0%, 100% { text-shadow: 0 0 15px var(--neon-cyan), 0 0 40px rgba(0,245,255,.55), 0 0 80px rgba(0,245,255,.2); }
    50%       { text-shadow: 0 0 25px var(--neon-cyan), 0 0 65px rgba(0,245,255,.65), 0 0 130px rgba(0,245,255,.3); }
}

.login-logo .subtitle {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}
.login-logo .subtitle::before,
.login-logo .subtitle::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,245,255,.25));
    max-width: 40px;
}
.login-logo .subtitle::after { background: linear-gradient(90deg, rgba(0,245,255,.25), transparent); }

/* ── Divider ── */
.login-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.75rem 0 2rem;
}
.login-divider::before, .login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
}
.login-divider::before { background: linear-gradient(90deg, transparent, rgba(0,245,255,.3)); }
.login-divider::after  { background: linear-gradient(90deg, rgba(0,245,255,.3), transparent); }
.login-divider-text {
    font-family: var(--font-mono);
    font-size: 0.63rem;
    letter-spacing: 0.22em;
    color: rgba(0,245,255,1);
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── System status bar ── */
.sys-status {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: rgba(0,245,255,.82);
    letter-spacing: 0.1em;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,245,255,.2);
}
.sys-status .dot {
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--neon-green);
    box-shadow: 0 0 6px var(--neon-green);
    margin-right: 5px;
    animation: dotBlink 2.5s ease-in-out infinite;
}
@keyframes dotBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: .25; }
}

/* ── Register link ── */
.login-register-link {
    text-align: center;
    margin-top: 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--text-dim);
    letter-spacing: 0.06em;
}
.login-register-link a {
    color: var(--neon-cyan);
    text-decoration: none;
    transition: var(--transition);
}
.login-register-link a:hover { text-shadow: var(--glow-text); }

/* Debug block override */
.debug-ok {
    background: rgba(57,255,20,.06) !important;
    border: 1px solid rgba(57,255,20,.3) !important;
    color: var(--neon-green) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    padding: 0.7rem 1rem !important;
    margin-bottom: 1.25rem !important;
    border-radius: 2px !important;
}
.debug-fail {
    background: var(--neon-mag-12) !important;
    border: 1px solid var(--neon-mag-40) !important;
    color: var(--neon-magenta) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    padding: 0.7rem 1rem !important;
    margin-bottom: 1.25rem !important;
    border-radius: 2px !important;
}

/* ============================================================
   DASHBOARD — IDENTITY PANEL
   ============================================================ */

.identity-panel {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.identity-avatar {
    width: 54px; height: 54px;
    border: 1px solid var(--neon-cyan-40);
    border-radius: 2px;
    background: var(--neon-cyan-06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--neon-cyan);
    text-shadow: var(--glow-text);
    box-shadow: var(--glow-xs), inset 0 0 10px rgba(0,245,255,.06);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.identity-avatar::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(transparent 0deg, rgba(0,245,255,.08) 60deg, transparent 120deg);
    animation: avatarSpin 8s linear infinite;
}
@keyframes avatarSpin { to { transform: rotate(360deg); } }

.identity-info { flex: 1; }

.identity-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--neon-cyan);
    text-shadow: var(--glow-text);
    letter-spacing: 0.08em;
    margin-bottom: 0.2rem;
}

.identity-meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.identity-meta span { display: flex; align-items: center; gap: 0.4rem; }
.identity-meta span::before { content: '■'; font-size: 0.4rem; color: var(--neon-cyan); opacity: .6; }

.role-admin    { color: var(--neon-cyan);    text-shadow: var(--glow-text); }
.role-supervisor { color: var(--neon-amber); text-shadow: var(--glow-amber); }
.role-associate  { color: var(--neon-green); text-shadow: 0 0 8px rgba(57,255,20,.4); }

/* ── Dashboard description ── */
.dashboard-intro {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-dim);
    letter-spacing: 0.05em;
    line-height: 1.7;
    border-left: 2px solid rgba(0,245,255,.2);
    padding-left: 1rem;
    margin-top: 0.75rem;
}

/* ============================================================
   STATS CARDS
   ============================================================ */

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.stats-card {
    background: var(--bg-card);
    border: var(--border-neon);
    border-radius: 2px;
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: statsIn .6s cubic-bezier(0.2,0,0,1) both;
}

.stats-card:nth-child(1) { animation-delay: .1s; }
.stats-card:nth-child(2) { animation-delay: .2s; }
.stats-card:nth-child(3) { animation-delay: .3s; }

@keyframes statsIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Top neon line */
.stats-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
    opacity: .55;
}

/* Ambient gradient */
.stats-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,245,255,.04) 0%, transparent 60%);
    pointer-events: none;
}

/* Data grid watermark */
.stats-card .stats-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,245,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,245,255,.025) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

.stats-card:hover { transform: translateY(-4px); border-color: rgba(0,245,255,.55); box-shadow: var(--glow-sm); }

.stats-value {
    font-family: var(--font-display);
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--neon-cyan);
    text-shadow: var(--glow-text-lg);
    line-height: 1;
    margin-bottom: 0.4rem;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.stats-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dim);
    position: relative;
    z-index: 1;
}

/* Per-card colour overrides */
.stats-card:nth-child(2)::before { background: linear-gradient(90deg, transparent, var(--neon-magenta), transparent); }
.stats-card:nth-child(2) .stats-value { color: var(--neon-magenta); text-shadow: var(--glow-mag); }
.stats-card:nth-child(2):hover { border-color: rgba(255,0,200,.55); box-shadow: var(--glow-mag); }

.stats-card:nth-child(3)::before { background: linear-gradient(90deg, transparent, var(--neon-amber), transparent); }
.stats-card:nth-child(3) .stats-value { color: var(--neon-amber); text-shadow: var(--glow-amber); }
.stats-card:nth-child(3):hover { border-color: rgba(255,187,0,.55); box-shadow: var(--glow-amber); }

/* ============================================================
   LOADING
   ============================================================ */

.loading {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid rgba(0,245,255,.2);
    border-radius: 50%;
    border-top-color: var(--neon-cyan);
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   UTILITIES
   ============================================================ */

.hidden       { display: none !important; }
.text-center  { text-align: center; }
.mt-1 { margin-top: .5rem;  } .mt-2 { margin-top: 1rem;   } .mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: rgba(2, 1, 14, 0.98);
        backdrop-filter: blur(20px);
        border-bottom: var(--border-neon);
        flex-direction: column;
        padding: 1rem;
        gap: .25rem;
    }
    .nav-menu.active { display: flex; }
    .mobile-menu-toggle { display: block; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .footer-content { flex-direction: column; gap: 1rem; text-align: center; }
    .footer-links { flex-direction: column; gap: .5rem; }
    .card { padding: 1.5rem; }
    .login-card { padding: 2rem 1.75rem; }
    .login-logo h1 { font-size: 3.2rem; }
    .table { font-size: .82rem; }
    .cyber-kanji { display: none; }
}