/**
 * Horsepower Data - High-Octane Design System & UI Engine
 * Distinct Identity: Cyber Obsidian (#070b14), Electric Cobalt (#2563eb), Neon Cyan (#00f2fe), Turbo Volt (#fbbf24)
 */

:root {
    /* Brand Core */
    --hp-brand-dark: #070b14;
    --hp-brand-surface: #0e1424;
    --hp-brand-card: #131b2e;
    --hp-brand-border: rgba(0, 242, 254, 0.14);
    --hp-brand-border-subtle: rgba(255, 255, 255, 0.08);

    /* High-Octane Colors */
    --hp-blue: #2563eb;
    --hp-blue-hover: #1d4ed8;
    --hp-cyan: #00f2fe;
    --hp-cyan-deep: #0891b2;
    --hp-volt: #fbbf24;
    --hp-amber: #f59e0b;
    --hp-emerald: #10b981;
    --hp-rose: #f43f5e;

    /* Gradients */
    --hp-gradient-primary: linear-gradient(135deg, #2563eb 0%, #00f2fe 100%);
    --hp-gradient-turbo: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    --hp-gradient-dark: linear-gradient(180deg, #0e1424 0%, #070b14 100%);
    --hp-gradient-card: linear-gradient(145deg, rgba(19, 27, 46, 0.85) 0%, rgba(14, 20, 36, 0.95) 100%);

    /* Glows & Shadows */
    --hp-glow-cyan: 0 8px 30px rgba(0, 242, 254, 0.25);
    --hp-glow-blue: 0 8px 25px rgba(37, 99, 235, 0.35);
    --hp-shadow-card: 0 15px 35px -5px rgba(0, 0, 0, 0.3);
}

/* Base Overrides for Dashboard Layouts */
body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    background: radial-gradient(circle at 10% 10%, rgba(37, 99, 235, 0.12) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(0, 242, 254, 0.08) 0%, transparent 40%),
                linear-gradient(180deg, #070b14 0%, #0a0f1d 50%, #070b14 100%) !important;
    color: #f1f5f9 !important;
}

/* Sidebar Overhaul - Unique Cyber Obsidian Theme */
#layout-menu {
    background: #0a0f1d !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.25) !important;
}

#layout-menu .app-brand {
    background: #070b14 !important;
    border-bottom: 1px solid rgba(0, 242, 254, 0.15) !important;
    padding: 1.5rem !important;
}

#layout-menu .app-brand-text {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    background: var(--hp-gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

#layout-menu .menu-link {
    color: #94a3b8 !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    transition: all 0.22s ease !important;
}

#layout-menu .menu-item.active > .menu-link {
    background: var(--hp-gradient-primary) !important;
    color: #070b14 !important;
    font-weight: 800 !important;
    box-shadow: var(--hp-glow-cyan) !important;
}

#layout-menu .menu-item.active > .menu-link .menu-icon,
#layout-menu .menu-item.active > .menu-link div {
    color: #070b14 !important;
}

#layout-menu .menu-item:not(.active) > .menu-link:hover {
    background: rgba(0, 242, 254, 0.08) !important;
    color: #00f2fe !important;
    transform: translateX(4px) !important;
}

#layout-menu .menu-item:not(.active) > .menu-link:hover .menu-icon {
    color: #00f2fe !important;
}

#layout-menu .menu-header-text {
    color: #475569 !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
}

#layout-menu .menu-sub {
    border-left: 1px dashed rgba(0, 242, 254, 0.2) !important;
}

#layout-menu .menu-sub .menu-item.active > .menu-link {
    background: rgba(0, 242, 254, 0.15) !important;
    color: #00f2fe !important;
    border-left: 3px solid #00f2fe !important;
}

/* High-Octane Wallet Card */
.hp-wallet-banner {
    background: var(--hp-gradient-dark) !important;
    border: 1px solid var(--hp-brand-border) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    color: #ffffff !important;
    box-shadow: 0 15px 35px rgba(7, 11, 20, 0.4) !important;
    position: relative;
    overflow: hidden;
}

.hp-wallet-banner::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

/* Buttons */
.btn-primary, .btn-hp-primary {
    background: var(--hp-gradient-primary) !important;
    border: none !important;
    color: #070b14 !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    padding: 10px 22px !important;
    box-shadow: 0 6px 20px rgba(0, 242, 254, 0.3) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary:hover, .btn-hp-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(0, 242, 254, 0.45) !important;
    color: #070b14 !important;
}

.btn-hp-volt {
    background: var(--hp-gradient-turbo) !important;
    border: none !important;
    color: #070b14 !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3) !important;
}

.btn-hp-volt:hover {
    transform: translateY(-2px) !important;
    color: #070b14 !important;
}

/* Status Badge Overrides */
.badge.bg-label-primary {
    background-color: rgba(37, 99, 235, 0.2) !important;
    color: #00f2fe !important;
    border: 1px solid rgba(0, 242, 254, 0.25) !important;
}

.badge.bg-label-success {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

/* Card Styling */
.card {
    background: #0e1424 !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 242, 254, 0.12) !important;
    box-shadow: 0 10px 35px -5px rgba(0, 0, 0, 0.4) !important;
    color: #f1f5f9 !important;
}