/* Cyberpunk 2077 / Matrix UI Design System */
:root {
    --cb-bg: #050505;
    --cb-bg-alt: #0a0a0c;
    --cb-cyan: #00f3ff;
    --cb-magenta: #ff00ff;
    --cb-yellow: #fcee0a;
    --cb-blue: #001aff;
    --cb-text: #e0e0e0;
    --cb-font-main: 'Rajdhani', sans-serif;
    --cb-font-tech: 'Orbitron', sans-serif;
    
    --bs-body-bg: var(--cb-bg);
    --bs-body-color: var(--cb-text);
    --bs-primary: var(--cb-cyan);
    --bs-warning: var(--cb-yellow);
    --bs-danger: var(--cb-magenta);
}

body {
    background-color: var(--cb-bg) !important;
    background-image: 
        linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(0, 26, 255, 0.05) 0%, transparent 70%);
    background-size: 30px 30px, 30px 30px, 100% 100%;
    background-attachment: fixed;
    font-family: var(--cb-font-main);
    letter-spacing: 0.5px;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .nav-link {
    font-family: var(--cb-font-tech);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Cyber Glass Cards */
.card {
    background: rgba(10, 10, 12, 0.8) !important;
    border: 1px solid var(--cb-cyan) !important;
    border-radius: 0 !important;
    position: relative;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.1);
    transition: all 0.3s ease;
    clip-path: polygon(
        0% 0%, 
        calc(100% - 20px) 0%, 100% 20px, 
        100% 100%, 
        20px 100%, 0% calc(100% - 20px)
    );
}

.card::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--cb-magenta);
    border-left: 2px solid var(--cb-magenta);
}

.card:hover {
    box-shadow: 0 0 25px rgba(0, 243, 255, 0.3);
    border-color: var(--cb-magenta) !important;
}

/* Cyber Buttons */
.btn {
    font-family: var(--cb-font-tech);
    text-transform: uppercase;
    border-radius: 0 !important;
    position: relative;
    padding: 0.8rem 1.5rem;
    transition: all 0.2s;
    font-weight: bold;
    clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0% 30%);
}

.btn-primary {
    background: transparent !important;
    color: var(--cb-cyan) !important;
    border: 1px solid var(--cb-cyan) !important;
}

.btn-primary:hover {
    background: var(--cb-cyan) !important;
    color: #000 !important;
    box-shadow: 0 0 20px var(--cb-cyan);
}

.btn-warning {
    background: transparent !important;
    color: var(--cb-yellow) !important;
    border: 1px solid var(--cb-yellow) !important;
}

.btn-warning:hover {
    background: var(--cb-yellow) !important;
    color: #000 !important;
    box-shadow: 0 0 20px var(--cb-yellow);
}

/* Inputs & Forms */
.form-control, .form-select {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(0, 243, 255, 0.4) !important;
    color: var(--cb-cyan) !important;
    border-radius: 0 !important;
    font-family: var(--cb-font-tech);
    clip-path: polygon(0 0, 100% 0, 100% 80%, 95% 100%, 0 100%);
}

.form-control:focus {
    border-color: var(--cb-magenta) !important;
    box-shadow: 0 0 10px var(--cb-magenta);
    background: rgba(255, 0, 255, 0.05) !important;
}

/* Tables */
.table {
    border-collapse: separate;
    border-spacing: 0 8px;
    color: var(--cb-text) !important;
}

.table thead th {
    font-family: var(--cb-font-tech);
    color: var(--cb-cyan);
    border-bottom: 2px solid var(--cb-cyan) !important;
    text-transform: uppercase;
}

.table tbody tr {
    background: rgba(10, 10, 12, 0.6);
    transition: all 0.2s;
}

.table tbody tr:hover {
    background: rgba(0, 243, 255, 0.1) !important;
    transform: scale(1.01);
}

/* Navbar */
.navbar {
    background: rgba(5, 5, 5, 0.9) !important;
    border-bottom: 2px solid var(--cb-cyan);
    backdrop-filter: blur(10px);
}

.navbar-brand {
    color: var(--cb-cyan) !important;
    text-shadow: 0 0 10px var(--cb-cyan);
}

/* Scanline Effect */
body::after {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 9999;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    opacity: 0.1;
}

/* Glitch Animation */
@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

.glitch-text:hover {
    animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
    color: var(--cb-magenta);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--cb-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--cb-cyan);
    box-shadow: 0 0 10px var(--cb-cyan);
}

/* SweetAlert Cyberpunk */
/* SweetAlert Cyberpunk */
.swal2-popup {
    background: var(--cb-bg-alt) !important;
    border: 2px solid var(--cb-magenta) !important;
    border-radius: 0 !important;
    font-family: var(--cb-font-main);
}
.swal2-title, .swal2-html-container {
    color: var(--cb-cyan) !important;
    font-family: var(--cb-font-tech);
}
.swal2-confirm {
    background: transparent !important;
    border: 1px solid var(--cb-cyan) !important;
    color: var(--cb-cyan) !important;
    border-radius: 0 !important;
}
.login-bg-glow {
    background: radial-gradient(circle, rgba(0, 243, 255, 0.2) 0%, rgba(255, 0, 255, 0.1) 60%) !important;
}

/* Override Bootstrap Backgrounds */
.bg-primary { background-color: rgba(0, 243, 255, 0.1) !important; border: 1px solid var(--cb-cyan) !important; color: var(--cb-cyan) !important; }
.bg-success { background-color: rgba(0, 255, 136, 0.1) !important; border: 1px solid #00ff88 !important; color: #00ff88 !important; }
.bg-warning { background-color: rgba(252, 238, 10, 0.1) !important; border: 1px solid var(--cb-yellow) !important; color: var(--cb-yellow) !important; }
.bg-info { background-color: rgba(0, 179, 255, 0.1) !important; border: 1px solid #00b3ff !important; color: #00b3ff !important; }
.bg-danger { background-color: rgba(255, 0, 255, 0.1) !important; border: 1px solid var(--cb-magenta) !important; color: var(--cb-magenta) !important; }
.bg-secondary { background-color: rgba(100, 100, 100, 0.1) !important; border: 1px solid #666 !important; color: #ccc !important; }

/* Dashboard Cards Enhancements */
.hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 0 30px var(--cb-cyan);
    z-index: 10;
}

/* Footer & Other Elements */
footer {
    border-top: 1px solid var(--cb-cyan);
    background: var(--cb-bg-alt);
    padding: 2rem 0;
    margin-top: 4rem;
    font-family: var(--cb-font-tech);
}

/* Custom Text Accents */
.text-primary { color: var(--cb-cyan) !important; }
.text-success { color: #00ff88 !important; }
.text-danger { color: var(--cb-magenta) !important; }

/* Badges */
.badge {
    border-radius: 0;
    font-family: var(--cb-font-tech);
    text-transform: uppercase;
    padding: 0.5em 1em;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}

/* System Ready Header style like in the screenshot */
.system-ready {
    color: var(--cb-magenta);
    text-align: center;
    font-family: var(--cb-font-tech);
    font-weight: bold;
    letter-spacing: 5px;
    margin: 20px 0;
    text-shadow: 0 0 10px var(--cb-magenta);
}

.system-ready::before, .system-ready::after {
    content: " >> ";
}
.system-ready::after {
    content: " << ";
}

/* Neutralizing Light Backgrounds for Cyberpunk */
.bg-white, .bg-light, .bg-success-subtle, .bg-info-subtle {
    background-color: rgba(10, 10, 12, 0.7) !important;
    color: var(--cb-text) !important;
}

.text-dark { color: var(--cb-text) !important; }
.text-muted { color: rgba(255, 255, 255, 0.5) !important; }

/* Match Card Specialized Elements */
.card-header.bg-transparent {
    border-bottom: 1px solid rgba(0, 243, 255, 0.2) !important;
}

/* Score Glow */
.bg-success.text-white.rounded.p-2 {
    background: transparent !important;
    border: 2px solid #00ff88 !important;
    color: #00ff88 !important;
    box-shadow: 0 0 15px #00ff88, inset 0 0 10px rgba(0, 255, 136, 0.3);
    font-family: var(--cb-font-tech);
    text-shadow: 0 0 5px #00ff88;
}

/* Pending VS */
.text-muted.mb-0.fw-bold {
    color: var(--cb-cyan) !important;
    text-shadow: 0 0 10px var(--cb-cyan);
}

/* Team Icon Circles */
.rounded-circle.bg-light {
    background: rgba(0, 243, 255, 0.05) !important;
    border: 1px solid var(--cb-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

/* Volver Button (Secondary) */
.btn-outline-secondary {
    border-color: #666 !important;
    color: #999 !important;
}
.btn-outline-secondary:hover {
    border-color: var(--cb-magenta) !important;
    color: var(--cb-magenta) !important;
    background: rgba(255, 0, 255, 0.05) !important;
    box-shadow: 0 0 15px var(--cb-magenta);
}

/* Animation for Ongoing or Ready items */
@keyframes neonPulse {
    0% { opacity: 1; text-shadow: 0 0 10px var(--cb-cyan); }
    50% { opacity: 0.7; text-shadow: 0 0 20px var(--cb-cyan); }
    100% { opacity: 1; text-shadow: 0 0 10px var(--cb-cyan); }
}

.system-status-active {
    animation: neonPulse 2s infinite ease-in-out;
}


/* Marker Hover Intensity */
.rounded-pill[style*=" --cb-cyan\]:hover, .badge[style*=\--cb-cyan\]:hover { box-shadow: 0 0 25px var(--cb-cyan) !important; filter: brightness(1.2); }