/* ═══════════════════════════════════════════════════════════════════════════
   VPP SIDEBAR ENHANCEMENTS — Phase 2 (v2)
   Smooth collapse, active indicators, hover animations, icon-only tooltips
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar Container ───────────────────────────────────────── */
.vpp-sidebar {
    transition: width var(--vpp-transition-base);
    overflow: hidden;
}

/* ── Panel Menu Item — Base ──────────────────────────────────── */
.rz-navigation-item.ppjsidebarmenu .rz-navigation-item-wrapper {
    border: 1px solid transparent;
    border-radius: var(--vpp-radius-md);
    margin: 2px var(--vpp-space-2);
    transition: background-color var(--vpp-transition-fast),
                transform var(--vpp-transition-fast),
                box-shadow var(--vpp-transition-fast);
    position: relative;
}

/* Active Indicator — left border highlight */
.rz-navigation-item.ppjsidebarmenu.rz-navigation-item-active > .rz-navigation-item-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--vpp-primary-400);
    border-radius: 0 var(--vpp-radius-full) var(--vpp-radius-full) 0;
    animation: vpp-active-indicator-in var(--vpp-transition-base) forwards;
}

@keyframes vpp-active-indicator-in {
    from { transform: translateY(-50%) scaleY(0); opacity: 0; }
    to   { transform: translateY(-50%) scaleY(1); opacity: 1; }
}

/* Hover — subtle background + micro-slide */
.rz-navigation-item.ppjsidebarmenu:not(.rz-navigation-item-active) .rz-navigation-item-wrapper:hover {
    background-color: rgba(14, 165, 233, 0.06);
    border-color: rgba(14, 165, 233, 0.12);
    transform: translateX(2px);
}

:root:not(.rz-theme-dark) .rz-navigation-item.ppjsidebarmenu:not(.rz-navigation-item-active) .rz-navigation-item-wrapper:hover {
    background-color: rgba(14, 165, 233, 0.08);
}

/* Active item background — F-40: primary-500 tinted at 15% alpha (0x26).
   rgba() form kept (instead of color-mix) for broadest browser support. */
.rz-navigation-item.ppjsidebarmenu.rz-navigation-item-active > .rz-navigation-item-wrapper {
    background-color: rgba(14, 165, 233, 0.15);
    border-color: rgba(14, 165, 233, 0.18);
}

.rz-navigation-item.ppjsidebarmenu.rz-navigation-item-active > .rz-navigation-item-wrapper:hover {
    background-color: rgba(14, 165, 233, 0.22);
    transform: none;
}

/* Icon color enhancement */
.rz-navigation-item.ppjsidebarmenu .rzi.rz-navigation-item-icon {
    transition: color var(--vpp-transition-fast);
}

.rz-navigation-item.ppjsidebarmenu.rz-navigation-item-active .rzi.rz-navigation-item-icon {
    color: var(--vpp-primary-400);
}

:root:not(.rz-theme-dark) .rz-navigation-item.ppjsidebarmenu.rz-navigation-item-active .rzi.rz-navigation-item-icon,
:root:not(.rz-theme-dark) .rz-navigation-item.ppjsidebarmenu.rz-navigation-item-active .rz-navigation-item-text {
    color: var(--vpp-primary-700);
}

.rz-navigation-item.ppjsidebarmenu:hover .rzi.rz-navigation-item-icon {
    color: var(--vpp-text-primary);
}

/* Active text color */
.rz-navigation-item.ppjsidebarmenu.rz-navigation-item-active .rz-navigation-item-text {
    color: var(--vpp-primary-400);
    font-weight: var(--vpp-font-weight-medium);
}

/* ── Submenu — indent + smaller font ─────────────────────────── */
.rz-navigation-item.ppjsidebarmenu.submenu {
    font-size: var(--vpp-text-sm);
}

.rz-navigation-item.ppjsidebarmenu.submenu .rz-navigation-item-wrapper {
    margin-left: var(--vpp-space-8);
    border-radius: var(--vpp-radius-sm);
}

.rz-navigation-item.ppjsidebarmenu.submenu .rzi.rz-navigation-item-icon {
    font-size: 1rem;
}

/* ── Divider ─────────────────────────────────────────────────── */
.rz-navigation-item.ppjsidebarmenu.lastchild {
    margin-top: var(--vpp-space-3);
    padding-top: var(--vpp-space-3);
    border-top: 1px solid var(--vpp-border-default);
}

/* ── Collapsed Sidebar ───────────────────────────────────────── */
:root:not(.rz-theme-dark) .vpp-sidebar.sidebar-collapsed {
    background-color: var(--vpp-bg-base);
}

.sidebar-collapsed .rz-navigation-item.ppjsidebarmenu .rz-navigation-item-wrapper {
    justify-content: center !important;
    align-items: center !important;
    margin: 2px auto !important;
    padding: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--vpp-radius-full) !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Center the link inside wrapper — also reset background/border on the link div */
.sidebar-collapsed .rz-navigation-item.ppjsidebarmenu .rz-navigation-item-link,
.sidebar-collapsed .rz-navigation-item .rz-navigation-item-link {
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.sidebar-collapsed .rz-navigation-item.ppjsidebarmenu .rz-navigation-item-icon {
    margin: 0 !important;
    margin-right: 0 !important;
    margin-inline-end: 0 !important;
    padding: 0 !important;
    font-size: 24px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Kill ALL pseudo-elements on collapsed parent items (arrow indicators, shadows) */
.sidebar-collapsed .rz-navigation-item-link::before,
.sidebar-collapsed .rz-navigation-item-link::after,
.sidebar-collapsed .rz-navigation-item-wrapper::before,
.sidebar-collapsed .rz-navigation-item-wrapper::after {
    display: none !important;
    content: none !important;
}

.sidebar-collapsed .rz-navigation-item.ppjsidebarmenu .rz-navigation-item-text {
    display: none !important;
}

.sidebar-collapsed .rz-navigation-item-wrapper {
    justify-content: center;
    align-items: center;
}

/* Hide submenus in collapsed mode */
.sidebar-collapsed .rz-navigation-item .rz-navigation-menu {
    display: none !important;
}

/* Hide submenu items (class=submenu) in collapsed */
.sidebar-collapsed .rz-navigation-item.ppjsidebarmenu.submenu {
    display: none !important;
}

/* Collapsed: active indicator (either the parent is active or parent contains active child) */
.sidebar-collapsed .rz-navigation-item.ppjsidebarmenu.rz-navigation-item-active > .rz-navigation-item-wrapper,
.sidebar-collapsed .rz-navigation-item.ppjsidebarmenu:has(.rz-navigation-item-active) > .rz-navigation-item-wrapper {
    background-color: rgba(14, 165, 233, 0.15) !important;
    box-shadow: none !important;
}

.sidebar-collapsed .rz-navigation-item.ppjsidebarmenu.rz-navigation-item-active .rzi.rz-navigation-item-icon,
.sidebar-collapsed .rz-navigation-item.ppjsidebarmenu:has(.rz-navigation-item-active) .rzi.rz-navigation-item-icon {
    color: var(--vpp-primary-400) !important;
}

:root:not(.rz-theme-dark) .sidebar-collapsed .rz-navigation-item.ppjsidebarmenu.rz-navigation-item-active .rzi.rz-navigation-item-icon,
:root:not(.rz-theme-dark) .sidebar-collapsed .rz-navigation-item.ppjsidebarmenu:has(.rz-navigation-item-active) .rzi.rz-navigation-item-icon {
    color: var(--vpp-primary-700) !important;
}

/* Collapsed: hover effect on icons */
.sidebar-collapsed .rz-navigation-item.ppjsidebarmenu .rz-navigation-item-wrapper:hover {
    background: rgba(14, 165, 233, 0.08) !important;
    border-radius: var(--vpp-radius-full) !important;
}


/* ── Sidebar Bottom — Clock ──────────────────────────────────── */
.vpp-sidebar-clock {
    font-family: var(--vpp-font-mono);
    font-size: var(--vpp-text-sm);
    color: var(--vpp-text-tertiary);
    text-align: center;
    padding: var(--vpp-space-3) var(--vpp-space-4);
}

.vpp-sidebar-clock .time {
    font-size: var(--vpp-text-lg);
    font-weight: var(--vpp-font-weight-semibold);
    color: var(--vpp-text-secondary);
}

/* ── Sidebar Divider (hr) ────────────────────────────────────── */
.vpp-sidebar hr,
.rz-panel-menu hr {
    border: none;
    border-top: 1px solid var(--vpp-border-default);
    margin: var(--vpp-space-2) var(--vpp-space-3);
}

/* ── Collapsed: hide clock, hr, logo ─────────────────────────── */
.sidebar-collapsed .rz-header .rz-stack img {
    display: none;
}

.sidebar-collapsed hr {
    display: none;
}

/* Hide clock text — target h6 elements inside the sidebar panel menu */
.sidebar-collapsed .rz-stack.rz-mt-3,
.sidebar-collapsed .rz-panel-menu > .rz-stack,
.sidebar-collapsed h6.text-center {
    display: none !important;
}

/* Hide arrow indicators in collapsed mode */
.sidebar-collapsed .rz-navigation-item-icon-children {
    display: none;
}

/* Ensure panel menu has transparent background to inherit the sidebar's background */
.vpp-sidebar .rz-panel-menu {
    background: transparent !important;
    background-color: transparent !important;
}