/* Enhanced Sidebar Toggle Styles - 3 State Sidebar */
/* States: full (normal) → mini (icons only) → hidden (completely hidden) */

/* ============================================================================
   BASE SIDEBAR STYLES
   ============================================================================ */
.left-sidebar {
    transition: width 0.3s ease-in-out, margin-left 0.3s ease-in-out;
    position: fixed;
    z-index: 1000;
    width: 270px;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.body-wrapper {
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
    margin-left: 270px;
    width: calc(100% - 270px);
    min-height: 100vh;
}

.app-header {
    transition: width 0.3s ease-in-out, left 0.3s ease-in-out !important;
}

/* ============================================================================
   STATE 1: FULL — Normal sidebar with icons + text (default)
   Using #main-wrapper for high specificity to override theme's styles.css
   ============================================================================ */
#main-wrapper[data-sidebar-state="full"] .left-sidebar {
    width: 270px !important;
    margin-left: 0 !important;
}

#main-wrapper[data-sidebar-state="full"] .body-wrapper {
    margin-left: 270px !important;
    width: calc(100% - 270px) !important;
}

/* ============================================================================
   STATE 2: MINI — Collapsed sidebar, icons only
   ============================================================================ */
#main-wrapper[data-sidebar-state="mini"] .left-sidebar {
    width: 70px !important;
    overflow: visible !important;
}

#main-wrapper[data-sidebar-state="mini"] .body-wrapper {
    margin-left: 70px !important;
    width: calc(100% - 70px) !important;
}

/* Hide text elements in mini mode */
[data-sidebar-state="mini"] .left-sidebar .hide-menu,
[data-sidebar-state="mini"] .left-sidebar .sidebar-home-link span,
[data-sidebar-state="mini"] .left-sidebar .nav-small-cap .hide-menu {
    display: none;
}

/* Hide brand logo in mini mode */
[data-sidebar-state="mini"] .left-sidebar .brand-logo {
    padding: 8px;
    margin: 8px;
    margin-bottom: 0;
}

[data-sidebar-state="mini"] .left-sidebar .brand-logo img {
    width: 36px;
    max-width: 36px;
}

/* Home link: icon only, centered */
[data-sidebar-state="mini"] .left-sidebar .sidebar-home-link {
    margin: 0 8px 8px;
}

[data-sidebar-state="mini"] .left-sidebar .sidebar-home-link a {
    justify-content: center;
    padding: 10px;
}

/* Nav section headers: show a subtle divider instead of text */
[data-sidebar-state="mini"] .left-sidebar .nav-small-cap {
    padding: 8px 0;
    margin: 4px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 0;
}

[data-sidebar-state="mini"] .left-sidebar .nav-small-cap i {
    display: none;
}

/* Sidebar links: center icons */
[data-sidebar-state="mini"] .left-sidebar .sidebar-link {
    justify-content: center;
    padding: 10px;
    gap: 0;
}

/* Sidebar nav padding */
[data-sidebar-state="mini"] .left-sidebar .sidebar-nav {
    padding: 8px 4px;
}

/* Tooltip on hover in mini mode */
[data-sidebar-state="mini"] .left-sidebar .sidebar-item {
    position: relative;
}

[data-sidebar-state="mini"] .left-sidebar .sidebar-item > .sidebar-link::after {
    content: attr(data-title);
    position: absolute;
    left: 70px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--serynt-slate-900, #0f172a);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 1001;
    font-size: 0.8125rem;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-sidebar-state="mini"] .left-sidebar .sidebar-item:hover > .sidebar-link::after {
    opacity: 1;
}

/* Active indicator adjustment for mini */
[data-sidebar-state="mini"] .left-sidebar .sidebar-item.selected > .sidebar-link::before,
[data-sidebar-state="mini"] .left-sidebar .sidebar-link.active::before {
    width: 3px;
    height: 50%;
}

/* ============================================================================
   STATE 3: HIDDEN — Sidebar completely hidden
   ============================================================================ */
#main-wrapper[data-sidebar-state="hidden"] .left-sidebar {
    margin-left: -270px !important;
    width: 270px !important;
}

#main-wrapper[data-sidebar-state="hidden"] .body-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
}

#main-wrapper[data-sidebar-state="hidden"] .app-header {
    width: 100% !important;
    left: 0 !important;
}

#main-wrapper[data-sidebar-state="mini"] .app-header {
    width: calc(100% - 70px) !important;
    left: 70px !important;
}

#main-wrapper[data-sidebar-state="full"] .app-header {
    width: calc(100% - 270px) !important;
    left: 270px !important;
}

/* ============================================================================
   TOGGLE BUTTON ENHANCEMENTS
   ============================================================================ */
.sidebartoggler {
    position: relative;
    transition: all 0.3s ease;
}

.sidebartoggler:hover {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    transform: scale(1.05);
}

.sidebartoggler i {
    transition: transform 0.3s ease;
}

.sidebartoggler:hover i {
    transform: rotate(90deg);
}

/* Focus states for accessibility */
.sidebartoggler:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* ============================================================================
   RESPONSIVE BEHAVIOR (< 1200px)
   Default state: mini (icons only, 70px)
   Toggle cycles: mini ↔ hidden
   Full state is overlay mode (rare on mobile, only via manual navigation)
   ============================================================================ */
@media (max-width: 1199.98px) {
    /* Full mode on mobile: overlay with backdrop */
    #main-wrapper[data-sidebar-state="full"] .left-sidebar {
        width: 270px !important;
        margin-left: 0 !important;
        left: 0 !important;
        z-index: 1050 !important;
        box-shadow: 2px 0 15px rgba(0, 0, 0, 0.3);
    }

    #main-wrapper[data-sidebar-state="full"] .body-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Overlay backdrop only for full mode */
    #main-wrapper[data-sidebar-state="full"]::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1040;
        transition: opacity 0.3s ease;
    }

    /* Hidden on mobile */
    #main-wrapper[data-sidebar-state="hidden"] .left-sidebar {
        margin-left: -270px !important;
        left: auto !important;
    }
}

/* ============================================================================
   ENHANCED HOVER EFFECTS FOR SIDEBAR ITEMS
   ============================================================================ */
.left-sidebar .sidebar-nav #sidebarnav li a {
    transition: all 0.3s ease;
}

.left-sidebar .sidebar-nav #sidebarnav li a:hover {
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* In mini mode, don't translateX on hover */
[data-sidebar-state="mini"] .left-sidebar .sidebar-nav #sidebarnav li a:hover {
    transform: scale(1.05);
}

/* Logo area enhancement */
.brand-logo {
    transition: opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}

/* Menu text fade effect */
.hide-menu {
    transition: opacity 0.3s ease;
}

/* Smooth scrollbar for sidebar */
.left-sidebar::-webkit-scrollbar {
    width: 6px;
}

.left-sidebar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

.left-sidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.left-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Animation for content when sidebar changes */
.body-wrapper > * {
    transition: opacity 0.2s ease;
}

/* Button active state */
.sidebartoggler.active {
    background-color: rgba(0, 123, 255, 0.1);
    color: #007bff;
}

/* Loading state */
.sidebar-loading .left-sidebar {
    opacity: 0.7;
    pointer-events: none;
}

.sidebar-loading .body-wrapper {
    opacity: 0.9;
}