/* ====================================================================
   xSPECTRE - UNIQUE DARK NEON CYBERPUNK INTERFACE
   Ultra-Modern, Futuristic Vulnerability Management Platform
   ==================================================================== */

:root {
    /* Dark Cyberpunk Colors */
    --primary-dark: #0a0e1a;
    --secondary-dark: #111827;
    --surface-dark: #1a1f35;
    
    /* Neon Accent Colors */
    --neon-cyan: #00ffff;
    --neon-magenta: #ff00ff;
    --neon-blue: #0ea5e9;
    --neon-green: #00ff88;
    --neon-yellow: #ffaa00;
    --neon-red: #ff0055;
    
    /* Text Colors */
    --text-primary: #e5e7eb;
    --text-secondary: #9ca3af;
    --text-glow: #00ffff;
    
    /* Effects */
    --neon-glow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
    --shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-neon: 0 0 20px rgba(0, 255, 255, 0.4);
}

/* ====================================================================
   GLOBAL STYLES - DARK CYBERPUNK THEME
   ==================================================================== */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #0a0e1a;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(0, 255, 255, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 0, 255, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, #0a0e1a 0%, #1a1f35 50%, #0a0e1a 100%);
    background-size: 100% 100%, 100% 100%, 400% 400%;
    animation: gradientShift 15s ease infinite;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 255, 0.03) 2px, rgba(0, 255, 255, 0.03) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 255, 255, 0.03) 2px, rgba(0, 255, 255, 0.03) 4px);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

/* Form Elements */
.bg-transparent {
    background-color: rgba(0, 0, 0, 0.5);
}

.form-help-text ul {
    list-style-type: none;
    padding-left: 0;
}

.colour-black {
    background-color: #000000;
}

.text-white {
    color: #ffffff;
}

/* ====================================================================
   CARD LAYOUTS - FUTURISTIC NEON DESIGN
   ==================================================================== */

.card-min-width-col-site-dashboard {
    min-width: 200px;
    max-width: 235px;
}

.card-min-width-col-dashboard {
    min-width: 220px;
    max-width: 265px;
}

/* Ultra-Modern Card Base with Neon Effects */
.vulncard-base {
    border: none !important;
    border-radius: 32px 8px 32px 8px !important;
    padding: 0px;
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 
        var(--shadow-dark),
        inset 0 1px 1px rgba(255, 255, 255, 0.05),
        0 0 1px rgba(0, 255, 255, 0.5);
    border: 2px solid rgba(0, 255, 255, 0.3) !important;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

.vulncard-base::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--neon-cyan) 60deg,
        transparent 120deg,
        var(--neon-magenta) 180deg,
        transparent 240deg,
        var(--neon-blue) 300deg,
        transparent 360deg
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: rotate 4s linear infinite;
    z-index: -1;
}

@keyframes rotate {
    100% { transform: rotate(360deg); }
}

.vulncard-base::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: rgba(17, 24, 39, 0.95);
    border-radius: 30px 6px 30px 6px;
    z-index: -1;
}

.vulncard-base:hover {
    transform: translateY(-12px) rotateX(5deg) rotateY(2deg) scale(1.03);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(0, 255, 255, 0.6),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    border-color: var(--neon-cyan) !important;
}

.vulncard-base:hover::before {
    opacity: 0.4;
}

/* ====================================================================
   SEVERITY CARDS - NEON GLOW VARIATIONS
   ==================================================================== */

.vulncard-critical {
    background: linear-gradient(135deg, rgba(255, 0, 85, 0.15), rgba(139, 0, 85, 0.05)) !important;
    border-color: var(--neon-red) !important;
    box-shadow: 0 0 30px rgba(255, 0, 85, 0.4), var(--shadow-dark);
}

.vulncard-critical:hover {
    box-shadow: 0 0 50px rgba(255, 0, 85, 0.6), 0 0 80px rgba(255, 0, 85, 0.3), var(--shadow-dark);
}

.vulncard-high {
    background: linear-gradient(135deg, rgba(255, 170, 0, 0.15), rgba(255, 85, 0, 0.05)) !important;
    border-color: var(--neon-yellow) !important;
    box-shadow: 0 0 30px rgba(255, 170, 0, 0.4), var(--shadow-dark);
}

.vulncard-high:hover {
    box-shadow: 0 0 50px rgba(255, 170, 0, 0.6), 0 0 80px rgba(255, 170, 0, 0.3), var(--shadow-dark);
}

.vulncard-medium {
    background: linear-gradient(135deg, rgba(255, 255, 0, 0.15), rgba(170, 170, 0, 0.05)) !important;
    border-color: #ffff00 !important;
    box-shadow: 0 0 30px rgba(255, 255, 0, 0.4), var(--shadow-dark);
}

.vulncard-medium:hover {
    box-shadow: 0 0 50px rgba(255, 255, 0, 0.6), 0 0 80px rgba(255, 255, 0, 0.3), var(--shadow-dark);
}

.vulncard-low {
    background: linear-gradient(135deg, rgba(0, 204, 255, 0.15), rgba(0, 136, 255, 0.05)) !important;
    border-color: var(--neon-blue) !important;
    box-shadow: 0 0 30px rgba(0, 204, 255, 0.4), var(--shadow-dark);
}

.vulncard-low:hover {
    box-shadow: 0 0 50px rgba(0, 204, 255, 0.6), 0 0 80px rgba(0, 204, 255, 0.3), var(--shadow-dark);
}

.vulncard-info {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 170, 136, 0.05)) !important;
    border-color: var(--neon-green) !important;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.4), var(--shadow-dark);
}

.vulncard-info:hover {
    box-shadow: 0 0 50px rgba(0, 255, 136, 0.6), 0 0 80px rgba(0, 255, 136, 0.3), var(--shadow-dark);
}

/* ====================================================================
   ICON STYLES - HOLOGRAPHIC EFFECTS
   ==================================================================== */

.icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
    box-shadow: 0 0 30px currentColor;
    margin-bottom: 1rem;
}

.icon {
    width: 72px;
    height: 72px;
    filter: drop-shadow(0 0 10px currentColor);
}

/* ====================================================================
   ADDITIONAL UTILITY CLASSES
   ==================================================================== */

.glow-text {
    color: var(--neon-cyan);
    text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
}

.holographic-border {
    border: 2px solid transparent;
    background-image: linear-gradient(var(--secondary-dark), var(--secondary-dark)),
                      linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta), var(--neon-blue));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* ====================================================================
   ADMIN UI REFINEMENTS - ACCESSIBILITY AND GRID ALIGNMENT
   These overrides soften neon intensity and enforce consistent spacing
   across dashboard/admin pages without changing application logic.
   ==================================================================== */

:root {
    --admin-bg: #0f1825;
    --admin-surface: #162233;
    --admin-surface-soft: #1b2a3d;
    --admin-border: #2a3b50;
    --admin-border-strong: #3a516d;
    --admin-text: #eaf1fb;
    --admin-text-muted: #b6c4d7;
    --admin-accent: #5ec8ff;
    --admin-accent-strong: #309de0;
    --admin-success: #22b37f;
    --admin-warning: #d89a1a;
    --admin-danger: #ce4d59;
    --admin-focus: #8ad4ff;
}

body {
    font-family: "Open Sans", "Segoe UI", Tahoma, Arial, sans-serif;
    color: var(--admin-text);
    background:
        radial-gradient(circle at 10% 10%, rgba(94, 200, 255, 0.08), transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(116, 241, 181, 0.06), transparent 36%),
        linear-gradient(160deg, #0f1825 0%, #121f2e 45%, #0d1623 100%);
    animation: none;
}

body::before {
    opacity: 0.28;
    animation-duration: 40s;
}

#main-wrapper {
    background: transparent;
}

.page-wrapper {
    padding: clamp(1rem, 2.4vw, 2rem);
}

.page-wrapper::before {
    background:
        radial-gradient(circle at 25% 20%, rgba(94, 200, 255, 0.1) 0%, transparent 48%),
        radial-gradient(circle at 75% 75%, rgba(116, 241, 181, 0.06) 0%, transparent 44%);
    animation: none;
}

.container-fluid {
    max-width: 1700px;
    margin-inline: auto;
    padding-inline: clamp(0.65rem, 1.6vw, 1.4rem);
}

.row {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
}

.topbar,
.navbar-header,
.topbar .navbar-collapse,
.left-sidebar {
    background: linear-gradient(180deg, #142235 0%, #101e2f 100%) !important;
    border-bottom: 1px solid rgba(94, 200, 255, 0.22);
}

.sidebar-nav ul .sidebar-item .sidebar-link {
    color: var(--admin-text-muted);
    border-radius: 10px;
    margin: 0.1rem 0.6rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar-nav ul .sidebar-item .sidebar-link i {
    color: #9fcae8;
}

.sidebar-nav ul .sidebar-item.selected > .sidebar-link,
.sidebar-nav ul .sidebar-item .sidebar-link:hover {
    background: rgba(94, 200, 255, 0.14);
    color: #f4f9ff;
}

.sidebar-nav ul .sidebar-item.selected > .sidebar-link i,
.sidebar-nav ul .sidebar-item .sidebar-link:hover i {
    color: #d8efff;
}

.card,
.flex-card,
.chart-card,
.scan-status-section {
    background: linear-gradient(180deg, rgba(27, 42, 61, 0.96) 0%, rgba(22, 34, 51, 0.96) 100%) !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(8, 14, 22, 0.42) !important;
    backdrop-filter: none;
}

.card:hover,
.flex-card:hover,
.chart-card:hover,
.scan-status-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(8, 14, 22, 0.48) !important;
}

.card-body,
.flex-card-body {
    padding: clamp(1rem, 2vw, 1.4rem) !important;
}

#card-dashboard-vuln-navigation {
    gap: 1.25rem;
    align-items: stretch;
}

#card-dashboard-vuln-navigation .card,
#card-dashboard-vuln-navigation .card:nth-child(4n+1),
#card-dashboard-vuln-navigation .card:nth-child(4n+2),
#card-dashboard-vuln-navigation .card:nth-child(4n+3),
#card-dashboard-vuln-navigation .card:nth-child(4n+4) {
    border-radius: 14px !important;
}

#card-dashboard-vuln-navigation .card::before,
#card-dashboard-vuln-navigation .card::after,
.chart-card::before,
.scan-status-section::before,
.data-table thead::after,
.data-table tbody tr::before,
.btn-primary::before {
    display: none !important;
}

#card-dashboard-vuln-navigation .card:hover,
.chart-card:hover,
.data-table tbody tr:hover {
    transform: translateY(-2px) !important;
}

#card-dashboard-vuln-navigation h3 {
    font-size: clamp(2.2rem, 4.4vw, 3rem);
    text-shadow: none;
    filter: none;
    letter-spacing: -0.01em;
    background: linear-gradient(120deg, #9ddcff 0%, #77eac8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#card-dashboard-vuln-navigation h3::after {
    display: none;
}

#card-dashboard-vuln-navigation h4,
#card-dashboard-vuln-navigation p,
#card-dashboard-vuln-navigation .card-text {
    text-transform: none;
    letter-spacing: 0.01em;
    text-shadow: none;
    color: #d9e6f6 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.page-title {
    color: #f2f8ff;
    text-shadow: none;
}

.card-subtitle,
.text-muted,
small,
.help-text {
    color: var(--admin-text-muted) !important;
}

.table-responsive {
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    overflow: hidden;
}

table.dataTable,
.table,
.data-table {
    width: 100% !important;
    margin: 0 !important;
    background: rgba(21, 34, 51, 0.82) !important;
    color: var(--admin-text);
    border: none !important;
}

table.dataTable thead th,
.table thead th,
.data-table th {
    background: linear-gradient(180deg, #24405c 0%, #1c3349 100%) !important;
    color: #e8f4ff !important;
    border-bottom: 1px solid var(--admin-border-strong) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    padding: 0.85rem 0.95rem !important;
}

table.dataTable tbody td,
.table tbody td,
.data-table td {
    color: var(--admin-text) !important;
    border-bottom: 1px solid rgba(124, 151, 178, 0.22) !important;
    vertical-align: middle;
}

table.dataTable tbody tr:nth-child(even),
.table tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even) {
    background: rgba(31, 47, 67, 0.44) !important;
}

table.dataTable tbody tr:hover,
.table tbody tr:hover,
.data-table tbody tr:hover {
    background: rgba(94, 200, 255, 0.16) !important;
    box-shadow: none !important;
}

.badge {
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.form-control,
.form-select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select {
    background-color: #13263a !important;
    color: #edf5ff !important;
    border: 1px solid #3a516d !important;
    border-radius: 10px;
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: #9cb0c5;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus,
select:focus,
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--single:focus-visible,
.btn:focus,
.btn:focus-visible,
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
[role="button"]:focus,
[role="button"]:focus-visible,
.nav-link:focus,
.nav-link:focus-visible,
.sidebar-link:focus,
.sidebar-link:focus-visible {
    outline: 3px solid var(--admin-focus) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

.btn {
    border-radius: 10px !important;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    padding: 0.5rem 0.95rem;
    box-shadow: none !important;
}

.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-secondary {
    border-width: 1px !important;
    color: #f6fbff !important;
}

.btn-primary {
    background: #2c7bb2 !important;
    border-color: #2b6f9c !important;
}

.btn-success {
    background: #257f5d !important;
    border-color: #226f52 !important;
}

.btn-info {
    background: #336f95 !important;
    border-color: #2d6080 !important;
}

.btn-warning {
    background: #996c13 !important;
    border-color: #7f5910 !important;
    color: #fff6df !important;
}

.btn-danger {
    background: #9f3b45 !important;
    border-color: #8a313a !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-secondary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    animation: none !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 0.85rem;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: #13263a !important;
    color: #edf5ff !important;
    border: 1px solid #3a516d !important;
    border-radius: 8px;
    min-height: 2.2rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    border: 1px solid transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #2c7bb2 !important;
    color: #fff !important;
    border-color: #2b6f9c !important;
}

.dropdown-menu {
    background: #18283b;
    border: 1px solid var(--admin-border);
    border-radius: 10px;
}

.dropdown-item {
    color: #dce9f7;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #fff;
    background: rgba(94, 200, 255, 0.18);
}

.footer {
    color: #c5d5e8;
    border-top: 1px solid rgba(94, 200, 255, 0.22);
    margin-top: 1.6rem;
    padding-top: 1rem;
}

@media (max-width: 991.98px) {
    .page-wrapper {
        padding: 0.8rem;
    }

    .container-fluid {
        padding-inline: 0.35rem;
    }

    .row {
        --bs-gutter-x: 0.8rem;
        --bs-gutter-y: 0.8rem;
    }

    #card-dashboard-vuln-navigation {
        gap: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    .card:hover,
    .flex-card:hover,
    .chart-card:hover,
    .scan-status-section:hover,
    #card-dashboard-vuln-navigation .card:hover,
    .data-table tbody tr:hover {
        transform: none !important;
    }
}