/*
 * CyberVuln Labs v0.1 — global stylesheet.
 * Complements Bootstrap 5.3 (dark theme) with the platform's branding,
 * animations, and card styles. Authoritative for the dark theme look.
 */

/* ------------------------------------------------------------------ */
/* Root / variables                                                    */
/* ------------------------------------------------------------------ */
:root {
    --cyl-accent: #ffc107;
    --cyl-accent-dark: #e0a800;
    --cyl-primary: #0d6efd;
    --cyl-bg: #0f1114;
    --cyl-surface: #171a1f;
    --cyl-surface-2: #1f2329;
    --cyl-border: #2b3139;
    --cyl-text: #e6e8ec;
    --cyl-text-muted: #9ca4b0;
}

html,
body {
    background-color: var(--cyl-bg);
    color: var(--cyl-text);
}

/* ------------------------------------------------------------------ */
/* Typography                                                          */
/* ------------------------------------------------------------------ */
body {
    font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
}

a {
    color: var(--cyl-accent);
}

a:hover,
.btn-warning:hover {
    color: var(--cyl-accent-dark);
}

/* ------------------------------------------------------------------ */
/* Navbar                                                              */
/* ------------------------------------------------------------------ */
.navbar-brand .text-warning {
    color: var(--cyl-accent) !important;
}

.navbar .nav-link.active,
.navbar .nav-link:focus {
    color: var(--cyl-accent);
}

/* ------------------------------------------------------------------ */
/* Hero section                                                        */
/* ------------------------------------------------------------------ */
.hero {
    background: radial-gradient(800px circle at 50% 30%, rgba(13, 110, 253, 0.25), transparent 60%);
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: conic-gradient(from 180deg at 50% 50%, #0d6efd, #6f42c1, #198754, #0d6efd);
    opacity: 0.06;
    animation: hue-rotate 20s linear infinite;
    z-index: 0;
}

@keyframes hue-rotate {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.hero-card {
    background: linear-gradient(160deg, #171a1f, #1f2329);
    box-shadow: 0 0 40px rgba(255, 193, 7, 0.08);
    border-color: var(--cyl-border);
}

.hero-card-header {
    background: rgba(15, 17, 20, 0.85);
}

.dot {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50%;
}

/* ------------------------------------------------------------------ */
/* Feature cards                                                       */
/* ------------------------------------------------------------------ */
.feature-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border-color: var(--cyl-border);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 30px rgba(255, 193, 7, 0.12);
    border-color: var(--cyl-primary);
}

.icon-box {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ------------------------------------------------------------------ */
/* Stat cards                                                          */
/* ------------------------------------------------------------------ */
.stat-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border-color: var(--cyl-border);
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 24px rgba(255, 193, 7, 0.10);
}

/* ------------------------------------------------------------------ */
/* Auth cards                                                          */
/* ------------------------------------------------------------------ */
.auth-card {
    border-color: var(--cyl-border);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------------------------------ */
/* Lab cards                                                           */
/* ------------------------------------------------------------------ */
.lab-card {
    border-color: var(--cyl-border);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lab-card:hover {
    border-color: var(--cyl-primary);
    box-shadow: 0 0 24px rgba(13, 110, 253, 0.12);
}

/* ------------------------------------------------------------------ */
/* Sidebar                                                             */
/* ------------------------------------------------------------------ */
@media (min-width: 992px) {
    .sidebar-sticky-nav {
        position: sticky;
        top: 58px;
        align-self: start;
    }
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--cyl-accent);
    background-color: var(--cyl-primary);
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.btn-warning {
    background-color: var(--cyl-accent);
    border-color: var(--cyl-accent);
    color: #000;
}

.btn-warning:hover {
    background-color: var(--cyl-accent-dark);
    border-color: var(--cyl-accent-dark);
}

.btn-outline-warning {
    color: var(--cyl-accent);
    border-color: var(--cyl-accent);
}

.btn-outline-warning:hover {
    background-color: var(--cyl-accent);
    color: #000;
    border-color: var(--cyl-accent);
}

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */
.table-hover tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.08);
}

/* ------------------------------------------------------------------ */
/* Loading spinner                                                     */
/* ------------------------------------------------------------------ */
.spinner-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 20, 0.8);
    z-index: 2000;
}

/* ------------------------------------------------------------------ */
/* Toast notifications                                                 */
/* ------------------------------------------------------------------ */
#toast-container {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1999;
}

.toast {
    background-color: var(--cyl-surface);
    border: none;
    color: var(--cyl-text);
}

.toast .toast-header {
    background-color: var(--cyl-surface-2);
    color: var(--cyl-text);
    border: none;
    border-bottom: 1px solid var(--cyl-border);
}

.toast-success .toast-header { border-color: var(--cyl-primary); }
.toast-info    .toast-header { border-color: var(--cyl-accent); }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 576px) {
    .display-4 { font-size: 1.75rem; }
}

/* ------------------------------------------------------------------ */
/* Utility                                                             */
/* ------------------------------------------------------------------ */
.text-secondary-opaque { color: var(--cyl-text-muted) !important; }
.border-accent { border-color: var(--cyl-accent) !important; }