:root {
    --sidebar-width-collapsed: 72px;
    --sidebar-width-expanded: 288px;
    --sidebar-bg-color: #0b101a;
    --sidebar-border-color: #1a2235;
    --sidebar-hover-bg: rgba(59, 130, 246, 0.08);
    --sidebar-hover-accent: linear-gradient(180deg, #60a5fa, #818cf8);
    --sidebar-active-bg: #1e293b;
    --sidebar-active-border: transparent;
    --sidebar-active-color: #60a5fa;
    --sidebar-text-muted: #94a3b8;
    --app-bg: #05070a;
}

*, *::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 */
    justify-content: center;
}

.logo-icon {
    width: 32px;
    height: 32px;
    margin: 0; 
    display: flex;
    align-items: center;
    justify-content: center;
    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: 12px;
}

.hud-sidebar:hover .sidebar-logo {
    justify-content: flex-start;
}

.hud-sidebar:hover .logo-icon {
    margin-left: 8px;
}

.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 {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    color: var(--sidebar-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0 12px 6px 12px;
}

.nav-link:hover {
    background: var(--sidebar-hover-bg);
}

.nav-link:hover .nav-icon {
    color: #818cf8;
}

/* ACTIVE STATE MATCHING PROJECT: Subtle BG, Bright Blue Text & Icon */
.nav-link.active,
.has-submenu.open>.nav-link {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #60a5fa !important;
}

.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: #60a5fa !important;
}

/* 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;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 8px;
    margin: 0 8px;
}

.submenu a:hover {
    color: #818cf8;
    background: rgba(59, 130, 246, 0.06);
}

/* DIVIDER */
.sidebar-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin: 16px 12px;
}

/* LABELS (e.g. INFORMACJE) */
.sidebar-label {
    margin-top: 24px;
    margin-bottom: 8px;
    padding: 0 20px;
    font-size: 10px;
    font-weight: 800;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    opacity: 0;
    display: none;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

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

/* BADGE */
.nav-badge {
    margin-left: auto;
    margin-right: 14px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.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: #4b8bf7;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

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

/* FOOTER / PROFILE */
.sidebar-footer {
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: center;
}

.hud-sidebar:hover .sidebar-footer {
    padding: 16px 12px;
    justify-content: flex-start;
}

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

.hud-sidebar:not(:hover) .profile-box {
    gap: 0;
}

.hud-sidebar:hover .profile-box {
    width: 100%;
    gap: 12px;
}

.profile-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin: 0;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    object-fit: cover;
}

.hud-sidebar:hover .profile-img {
    transform: none;
}

.profile-info {
    display: flex;
    flex-direction: column;
    opacity: 0;
    max-width: 0;
    min-width: 0;
    overflow: hidden;
    transition: opacity 0.15s, max-width 0.3s;
}

.hud-sidebar:hover .profile-info {
    opacity: 1;
    max-width: 200px;
}

.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;
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sidebar-text-muted);
    font-size: 0.9rem;
    opacity: 0;
    width: 0;
    min-width: 0;
    height: 36px;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.15s, width 0.3s, background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
    border-radius: 10px;
    border: 1px solid transparent;
}

.hud-sidebar:hover .profile-chevron {
    opacity: 1;
    width: 36px;
    min-width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

.hud-sidebar:hover .profile-chevron:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(96, 165, 250, 0.25);
    color: #60a5fa;
}

.hud-sidebar:hover .profile-chevron:active {
    background: rgba(59, 130, 246, 0.2);
    transform: scale(0.92);
}

/* 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 — let content set their own height so padding works */
#view-dashboard.active,
#view-admin-activity.active,
#view-admin-users.active,
#view-admin-requests.active,
#view-admin-changelog.active,
#view-about.active,
#view-credits.active,
#view-penal.active,
#view-ca-penal.active,
#view-caselaws.active,
#view-legal-search.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;
}

/* MODAL ANIMATIONS (PREMIUM) */
@keyframes modalBackdropIn {
    from { opacity: 0; backdrop-filter: blur(0px); }
    to { opacity: 1; backdrop-filter: blur(4px); }
}

@keyframes modalContentIn {
    from { 
        opacity: 0;
        transform: scale(0.92) translateY(10px);
    }
    to { 
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

#modal-confirm:not(.hidden) .absolute {
    animation: modalBackdropIn 0.4s ease-out forwards;
}

#modal-confirm:not(.hidden) > div:last-child {
    animation: modalContentIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ═══════════════════════════════════════════════════════════════════
   ══ MOBILE RESPONSIVE SIDEBAR & HEADER SYSTEM ══
   ═══════════════════════════════════════════════════════════════════ */

.mobile-header {
    display: none;
}

#sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 999;
    animation: modalBackdropIn 0.25s ease-out;
}

#sidebar-backdrop.active {
    display: block !important;
}

@media (max-width: 767px) {
    /* Hide collapsed sidebar by default and make it full screen drawer */
    .hud-sidebar {
        width: var(--sidebar-width-expanded) !important;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 20px 0 50px rgba(0, 0, 0, 0.8);
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(13, 17, 23, 0.98) !important;
        backdrop-filter: blur(20px);
    }

    /* When sidebar is opened */
    .hud-sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Force all text/badges to be visible since it is expanded (uses higher specificity than desktop rule) */
    .app-container .hud-sidebar.mobile-open .nav-text,
    .app-container .hud-sidebar.mobile-open .toggle-icon,
    .app-container .hud-sidebar.mobile-open .nav-badge,
    .app-container .hud-sidebar.mobile-open .submenu,
    .app-container .hud-sidebar.mobile-open .logo-text,
    .app-container .hud-sidebar.mobile-open .sidebar-label,
    .app-container .hud-sidebar.mobile-open .profile-info,
    .app-container .hud-sidebar.mobile-open .profile-chevron {
        display: block !important;
        opacity: 1 !important;
    }
    
    .hud-sidebar .submenu {
        max-height: 0;
    }
    .hud-sidebar .has-submenu.open .submenu {
        max-height: 500px;
    }

    /* Reset viewport left padding on mobile */
    .main-viewport {
        padding-left: 0 !important;
        padding-top: 64px !important;
        height: 100vh;
    }

    /* Content padding on mobile */
    .content-scrollbox {
        padding: 24px 16px 40px 16px !important;
    }

    /* Mobile header container */
    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: rgba(17, 24, 39, 0.8);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding: 0 16px;
        z-index: 998;
    }

    .mobile-menu-btn {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #fff;
        font-size: 1.1rem;
        padding: 10px;
        border-radius: 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        width: 40px;
        height: 40px;
    }

    .mobile-menu-btn:active {
        scale: 0.95;
        background: rgba(255, 255, 255, 0.08);
    }

    .mobile-logo {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .logo-icon-mini {
        width: 24px;
        height: 24px;
        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-mini {
        font-weight: 800;
        font-size: 1.05rem;
        letter-spacing: 0.5px;
        color: #fff;
    }
}

/* PREMIUM CUSTOM SCROLLBARS FOR CARD CONTENT */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    transition: background 0.2s ease;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}