:root {
    --sidebar-width-collapsed: 72px;
    --sidebar-width-expanded: 288px;
    --sidebar-bg-color: #111827;
    --sidebar-border-color: #1f2937;
    --sidebar-hover-bg: #1f2937;
    --sidebar-active-bg: #1f2937;
    --sidebar-active-border: rgba(255, 255, 255, 0.1);
    --sidebar-active-color: #3b82f6;
    --sidebar-text-muted: #ffffff;
    --app-bg: #080a0c;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif !important;
    background-color: var(--app-bg);
    color: #fff;
}

.app-container {
    display: flex;
    width: 100%;
    height: 100%;
}

/* SIDEBAR CORE */
.hud-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width-collapsed);
    background: var(--sidebar-bg-color);
    border-right: 1px solid var(--sidebar-border-color);
    transition: width 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hud-sidebar:hover {
    width: var(--sidebar-width-expanded);
}

/* HEADER / LOGO - PERFECT ALIGNMENT */
.sidebar-header {
    height: 72px;
    display: flex;
    align-items: center;
    padding: 0; /* Use inner padding instead for cross-browser safety */
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.sidebar-logo {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 12px; /* Cross-browser safe horizontal constraint */
}

.logo-icon {
    width: 32px;
    height: 32px;
    margin: 0 8px; /* 8+32+8 = 48px grid footprint, perfectly aligning with nav icons */
    filter: invert(44%) sepia(91%) saturate(1251%) hue-rotate(198deg) brightness(101%) contrast(94%) drop-shadow(0 0 8px rgba(59, 130, 246, 0.3));
}

.logo-text {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    display: none;
    transition: opacity 0.2s ease;
    pointer-events: none;
    letter-spacing: 0.2px;
    margin-left: 6px;
}

.hud-sidebar:hover .logo-text {
    display: block;
    opacity: 1;
}

/* NAVIGATION AREA */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 0; /* Strict vertical padding only, horizontal handled by children */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar-nav::-webkit-scrollbar {
    display: none;
}

/* Force elements hidden when collapsed */
.hud-sidebar:not(:hover) .nav-text,
.hud-sidebar:not(:hover) .toggle-icon,
.hud-sidebar:not(:hover) .nav-badge,
.hud-sidebar:not(:hover) .submenu {
    display: none !important;
}

.hud-sidebar:not(:hover) .nav-link {
    justify-content: flex-start !important;
}

/* ACTIVE TILE FIXES: Remove aggressive properties, keep it simple */
.nav-link.active::before,
.nav-link.active::after,
.nav-icon::before,
.nav-icon::after {
    display: none !important;
    content: none !important;
}

.nav-item-wrapper {
    width: 100%;
    margin-bottom: 2px;
}

/* THE CORE 48px PADDED GRID */
.nav-link {
    display: flex;
    align-items: center;
    height: 48px;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0 12px 6px 12px; /* Margin dictates spacing universally, ignores padding engine bugs */
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

/* ACTIVE STATE MATCHING PROJECT: Subtle BG, Bright Blue Text & Icon */
.nav-link.active,
.has-submenu.open>.nav-link {
    background: rgba(59, 130, 246, 0.08) !important;
    /* Extremely elegant, subtle blue tinted glow */
    color: #3b82f6 !important;
    /* Blue text */
}

.nav-link.active .nav-icon,
.has-submenu.open>.nav-link .nav-icon,
.nav-link.active .toggle-icon,
.has-submenu.open>.nav-link .toggle-icon {
    color: #3b82f6 !important;
    /* Blue Icon and Chevron */
}

/* Legacy cleanup */
.nav-link.active,
.nav-link:hover {
    box-shadow: none !important;
    border-left: none !important;
    outline: none !important;
}

/* The Icon creates the grid footprint: strictly 48x48 */
.nav-icon {
    width: 48px;
    min-width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    /* Slightly larger, crisp icons */
    transition: color 0.2s ease;
}

.nav-text {
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.25s ease;
    flex: 1;
    margin-left: 4px;
    /* Space between icon grid and text */
}

.hud-sidebar:hover .nav-text {
    opacity: 1;
}

.toggle-icon {
    margin-left: auto;
    margin-right: 14px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    opacity: 0;
    transition: transform 0.2s ease, color 0.2s;
}

.hud-sidebar:hover .toggle-icon {
    opacity: 1;
}

/* SUBMENU - Clean INDENT */
.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.has-submenu.open .submenu {
    max-height: 500px;
    padding-bottom: 8px;
}

.submenu a {
    display: block;
    padding: 10px 16px 10px 52px;
    /* indented exactly with the text */
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.15s;
    white-space: nowrap;
    cursor: pointer;
}

.submenu a:hover {
    color: #ffffff;
}

/* DIVIDER */
.sidebar-divider {
    height: 1px;
    background: var(--sidebar-border-color);
    margin: 20px 4px;
}

/* BADGE */
.nav-badge {
    position: absolute;
    right: 12px;
    background: #991b1b;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.hud-sidebar:hover .nav-badge {
    opacity: 1;
}

/* CTA CARD - PREMIUM BLUE TILE */
.sidebar-cta-card {
    background: #1e3a8a;
    /* Indigo 900 / Deep Blue */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px 20px;
    margin: 32px 12px 12px 12px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.hud-sidebar:not(:hover) .sidebar-cta-card {
    display: none !important;
}

.cta-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.cta-info-icon {
    color: #93c5fd;
    font-size: 1rem;
}

.cta-title {
    color: #93c5fd;
    /* Sky 300 */
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.cta-close {
    margin-left: auto;
    background: none;
    border: none;
    color: #93c5fd;
    cursor: pointer;
    font-size: 1.1rem;
    opacity: 0.7;
    transition: opacity 0.1s;
}

.cta-close:hover {
    opacity: 1;
}

.cta-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.cta-btn {
    background: #3b82f6;
    /* Azure Blue */
    color: #ffffff;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s, transform 0.2s;
}

.cta-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.cta-btn i {
    font-size: 0.9rem;
}

/* FOOTER / PROFILE */
.sidebar-footer {
    padding: 16px 12px;
    border-top: 1px solid var(--sidebar-border-color);
}

.profile-box {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.profile-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-left: 8px; /* Perfect center: 12px parent padding + 8px margin = 20px, + 16px (half image) = 36px */
    flex-shrink: 0;
}

.profile-info {
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.15s;
}

.hud-sidebar:hover .profile-info {
    opacity: 1;
}

.profile-name {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
}

.profile-email {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}

.profile-chevron {
    margin-left: auto;
    color: var(--sidebar-text-color);
    font-size: 0.9rem;
    opacity: 0;
}

.hud-sidebar:hover .profile-chevron {
    opacity: 1;
}

/* MAIN VIEWPORT ADJUSTMENT */
.main-viewport {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    padding-left: var(--sidebar-width-collapsed);
    height: 100vh;
}

/* We don't want the page content to jump when sidebar expands on hover, 
   UNLESS we decide it should push content. Flowbite usually overlays or pushes.
   The original was floating, so we'll stay with 'fixed background' feel.
*/

.search-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid hsl(var(--border-dim));
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem 0.75rem 2.8rem;
    color: #fff;
    font-family: inherit;
    transition: var(--transition);
}

.search-input:focus {
    outline: none;
    border-color: hsl(var(--primary));
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 20px var(--primary-glow);
}

.header-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.meta-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.meta-label {
    font-size: 0.6rem;
    color: hsl(var(--h) 10% 40%);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.meta-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: hsl(var(--primary));
}

/* VIEWS WRAPPER */
.content-scrollbox {
    flex: 1;
    overflow-y: auto;
    padding: 80px 40px 40px 40px;
    /* Top padding restores vertical balance */
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.content-scrollbox.fullscreen-override {
    padding: 0;
    overflow: hidden;
}

/* APP ROUTES ANIMATION */
.app-view {
    display: none;
    animation: viewFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.app-view.active {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* Flow-based views (About, Credits) — let content set their own height */
#view-about.active,
#view-credits.active {
    height: auto;
    min-height: unset;
    overflow: visible;
}

@keyframes viewFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* FOOTER */
.hud-footer {
    padding: 2.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(10px);
    margin-top: auto;
    z-index: 100;
}

.footer-logo-mini {
    font-size: 0.8rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
}

.footer-text {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-link {
    font-size: 0.7rem;
    color: hsl(var(--primary));
    text-decoration: none;
    transition: var(--transition);
    font-weight: 600;
}

.footer-link:hover {
    color: #fff;
    filter: drop-shadow(0 0 5px var(--primary-glow));
}

.footer-sep {
    color: rgba(255, 255, 255, 0.1);
}

/* Hide footer dynamically on full-screen modes if needed */
.main-viewport.hide-footer .hud-footer {
    display: none;
}