/* 
 * Custom Modern Sidebar - Tailwind Style (White Theme)
 * Overrides AdminLTE v2.0.4 default styles
 */

/* =========================================
   1. Main Background & Colors (White Theme)
   ========================================= */

/* Sidebar Background - White */
.skin-black .main-sidebar,
.skin-black .left-side,
.skin-black .wrapper {
    background-color: #ffffff !important;
    box-shadow: 1px 0 10px rgba(0, 0, 0, 0.05);
    /* Subtle shadow for depth */
    border-right: 1px solid #f1f5f9;
    /* Tailwind slate-100 like border */
    height: 100%;

    /* [Override] Remove AdminLTE default 50px padding.
       Since Logo is IN the sidebar, we don't need to clear the header. */
    padding-top: 0 !important;
}

/* User Panel (Profile area) */
.skin-black .user-panel>.info,
.skin-black .user-panel>.info>a {
    color: #334155 !important;
    /* Tailwind slate-700 */
}

/* =========================================
   2. Sidebar Menu Styling
   ========================================= */

/* Branding / Header */
.skin-black .logo {
    background-color: #ffffff !important;
    color: #0f172a !important;
    /* Tailwind slate-900 */
    border-bottom: 1px solid #f1f5f9 !important;
    border-right: 1px solid #f1f5f9 !important;
}



.skin-black .logo:hover {
    background-color: #f8fafc !important;
    /* Tailwind slate-50 */
}

/* Header Logo Container - Acts as Spacer for Toggle Button */
.main-header .logo {
    display: block !important;
    width: 230px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    transition: width 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
    /* Match AdminLTE transition */
}

/* Hide only the IMAGE inside the header logo (since we moved it to sidebar) */
.main-header .logo img {
    display: none !important;
}

/* Navbar must have margin to sit next to the logo spacer */
.main-header .navbar {
    margin-left: 230px !important;
    transition: margin-left 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
}

/* Fix Sidebar Toggle Button Visibility */
/* Fix Sidebar Toggle Button Visibility */
.skin-black .main-header .navbar .sidebar-toggle {
    color: #333333 !important;
}

.skin-black .main-header .navbar .sidebar-toggle:hover {
    background-color: #f8fafc !important;
    color: #4f46e5 !important;
}

/* Collapsed State Adjustments for Spacer */
@media (min-width: 768px) {
    .sidebar-collapse .main-header .logo {
        width: 60px !important;
    }

    .sidebar-collapse .main-header .navbar {
        margin-left: 60px !important;
    }
}


/* Menu Header (Categories like 'HOME', 'APPS') */
.skin-black .sidebar-menu>li.header {
    background-color: #ffffff !important;
    color: #94a3b8 !important;
    /* Tailwind slate-400 */
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 20px 25px 10px 25px !important;
}

/* Menu Items (Top Level) */
/* Menu Items (Top Level) */
.skin-black .sidebar-menu>li {
    border-bottom: none !important;
    border-top: none !important;
}

.skin-black .sidebar-menu>li>a {
    border-left: none !important;
    /* Removed border to prevent 3px shift */
    color: #475569 !important;
    /* Tailwind slate-600 */
    font-weight: 500;
    padding: 15px 0 !important;
    /* Unified padding: Vert 15px, Horiz 0 (Handled by Icon Width) */
    transition: all 0.2s ease-in-out;
    border-bottom: none !important;
    display: flex !important;
    align-items: center !important;
    line-height: 18px !important;
    /* Force text line-height to match icon height (Fix 48.56px vs 48px mismatch) */
}

/* Icons (Top Level) */
.skin-black .sidebar-menu>li>a>i {
    color: #94a3b8 !important;
    /* Tailwind slate-400 */
    width: 60px !important;
    /* Fixed width container matching collapsed sidebar */
    min-width: 60px !important;
    /* Prevent shrinking */
    text-align: center;
    margin-right: 0 !important;
    /* Remove gap, let width handle it */
    transition: color 0.2s;
    font-size: 18px;
    flex-shrink: 0;
}

/* Hover State (Top Level) */
.skin-black .sidebar-menu>li:hover>a,
.skin-black .sidebar-menu>li.active>a {
    color: #4f46e5 !important;
    /* Tailwind indigo-600 (Primary Brand Color) */
    background-color: #f8fafc !important;
    /* Tailwind slate-50 */
    box-shadow: inset 3px 0 0 0 #4f46e5 !important;
    /* Indigo accent via shadow (no layout shift) */
}

.skin-black .sidebar-menu>li:hover>a>i,
.skin-black .sidebar-menu>li.active>a>i {
    color: #4f46e5 !important;
    /* Icon becomes primary color */
}

/* =========================================
   3. Treeview (Submenu) Styling
   ========================================= */

.skin-black .sidebar-menu>li>.treeview-menu {
    background-color: #ffffff !important;
    /* Keep white for clean look */
    padding-left: 0 !important;
    margin: 0 !important;
}

.skin-black .treeview-menu>li>a {
    color: #64748b !important;
    /* Tailwind slate-500 */
    padding: 10px 20px 10px 42px !important;
    /* Reduced indentation (was 55px) */
    font-size: 12px;
    /* Reduced font size (was 13px) */
    transition: all 0.2s;
}

/* Submenu Icon (Circle) */
.skin-black .treeview-menu>li>a>i {
    font-size: 10px !important;
    /* Smaller circle icons */
    margin-right: 5px !important;
    /* Tighter spacing */
    width: auto !important;
}

/* Submenu Hover */
.skin-black .treeview-menu>li>a:hover {
    color: #0f172a !important;
    /* Darker text on hover */
    background-color: unset !important;
    /* Clean hover, just text change or subtle bg */
}

.skin-black .treeview-menu>li.active>a {
    color: #4f46e5 !important;
    font-weight: 600;
}

/* Arrow Icons - HIDDEN as requested */
.skin-black .sidebar-menu>li>a>.fa-angle-left,
.skin-black .sidebar-menu>li>a>.pull-right-container>.fa-angle-left {
    display: none !important;
}

/* =========================================
   4. Collapsed Sidebar Optimizations
   ========================================= */

/* Center icons when collapsed */
@media (min-width: 768px) {

    /* Force full height for sidebar on PC */
    .main-sidebar,
    .left-side {
        min-height: 100vh !important;
    }

    /* Override AdminLTE default: Prevent sidebar from disappearing off-screen */
    .sidebar-collapse .main-sidebar,
    .sidebar-collapse .left-side {
        transform: translate(0, 0) !important;
        width: 60px !important;
    }

    /* Adjust content margin to match new sidebar width */
    .sidebar-collapse .content-wrapper,
    .sidebar-collapse .main-footer {
        margin-left: 60px !important;
    }

    /* Hide logo if user wanted (optional) or just clip it */
    .sidebar-collapse .logo {
        width: 60px !important;
        overflow: visible !important;
        /* Allow icon to be fully seen if slightly larger */
    }

    /* Logo Toggle Logic (New: Stationary Icon + Text) */
    .logo-link {
        display: block;
        height: 100%;
        width: 100%;
        padding-left: 0;
    }

    .logo-obj {
        display: flex;
        align-items: center;
        /* Start from left so icon stays pinned */
        justify-content: flex-start;
        height: 100%;
        width: 100%;
    }

    .logo-icon {
        height: 22px;
        /* Reduced to ~22px to prevent overflow */
        width: auto;
        display: block !important;
        /* Center in collapsed 60px: (60 - 22)/2 = 19px margin-left */
        margin-left: 19px !important;
        margin-right: 0 !important;
        /* Removed as requested */
        margin-top: 0 !important;
        flex-shrink: 0;
    }

    .logo-text {
        height: 22px;
        /* Matched to icon height */
        width: auto;
        display: block;
        opacity: 1;
        transition: opacity 0.2s, visibility 0.2s;
        margin-top: 0;
        /* Let flexbox handle alignment */
        transform: none;
        /* Reset transform so it sits naturally centered */
    }

    /* Collapsed State: Hide Text */
    .sidebar-collapse .logo-text {
        display: none !important;
    }

    .sidebar-collapse .logo-icon {
        /* Keep margins identical to expanded state so it doesn't move */
        margin-left: 19px !important;
    }
}


.sidebar-collapse .sidebar-menu>li>a {
    padding: 15px 0 !important;
    text-align: center;
    border: none !important;
    /* Remove ALL borders to prevent shift */
    display: flex !important;
    /* Force flex centering */
    justify-content: center !important;
    align-items: center !important;
}

/* Recreate active border using box-shadow (doesn't affect layout) */
.sidebar-collapse .sidebar-menu>li.active>a {
    box-shadow: inset 3px 0 0 0 #4f46e5 !important;
}

.sidebar-collapse .sidebar-menu>li>a>i {
    /* Collapsed specific overrides no longer strictly needed if base is 60px, but kept for safety */
    margin: 0 !important;
    width: 60px !important;
    font-size: 18px;
    display: block;
    float: none !important;
}

/* Hide text in collapsed mode if not hidden by JS (Double safety) */
.sidebar-collapse .sidebar-menu>li>a>span {
    display: none !important;
}

/* Hide treeview menu in collapsed mode to prevent messy overlap */
/* The popup logic is disabled in favor of full sidebar expansion on hover */
/*
.sidebar-collapse .sidebar-menu>li:hover>.treeview-menu {
    position: absolute;
    left: 50px;
    top: 0;
    width: 200px;
    background-color: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f1f5f9;
    border-radius: 0 8px 8px 0;
    padding: 10px 0 !important;
    display: block !important;
}

.sidebar-collapse .sidebar-menu>li:hover>.treeview-menu>li>a {
    padding-left: 20px !important;
}
*/

/* CRITICAL: Force hide all submenus when collapsed.
   This prevents "squashed" text on page load if the menu was active.
   Hovering will remove .sidebar-collapse, allowing this to show naturally. */
.sidebar-collapse .treeview-menu {
    display: none !important;
}

/* Hide Header in Collapsed */
.sidebar-collapse .sidebar-menu>li.header {
    display: none !important;
    /* Or show as dots */
    /* content: '...'; display: block; text-align: center; */
}

/* =========================================
   5. Mobile & Tablet Responsive Fixes
   ========================================= */

/* Mobile & Tablet Responsive Fixes */
/* Reverted to Mobile only (< 768px) per user request to match PC layout on Tablet */
@media (max-width: 767px) {

    /* [Fix] Restore Padding on Mobile because Header Logo is dominant */
    /* [Fix] Restore Padding on Mobile because Header Logo is dominant */
    /* [Fix] Restore Padding on Mobile because Header Logo is dominant */
    .skin-black .main-sidebar,
    .skin-black .left-side,
    .skin-black .sidebar,
    section.sidebar {
        padding-top: 50px !important;
        min-height: 100vh !important;
        /* Force full height */
        height: 100vh !important;
        border-radius: 0 !important;
        /* Remove curved edges */
        width: 230px !important;
        /* Force full width (Text visible) */
    }

    /* Aggressive Safety: Remove ALL rounded corners in sidebar on mobile */
    .skin-black .sidebar *,
    section.sidebar *,
    .skin-black .main-sidebar,
    .skin-black .left-side,
    .slimScrollDiv,
    .slimScrollDiv *,
    .slimScrollBar,
    .slimScrollRail {
        border-radius: 0 !important;
        clip-path: none !important;
        mask: none !important;
        -webkit-mask: none !important;
        box-shadow: none !important;
    }

    /* Target specific wrappers to ensure full height and no gaps */
    .slimScrollDiv {
        min-height: 100vh !important;
        height: 100vh !important;
    }

    /* Restore Logo Image in Header (It was hidden for PC Sidebar-only approach) */
    .main-header .logo img {
        display: inline-block !important;
        height: 20px;
        /* Adjust size as needed */
        margin-top: -3px;
    }

    /* Logo Container: Standard AdminLTE Mobile Style (Stacked) */
    .main-header .logo {
        width: 100% !important;
        /* Full width on top */
        text-align: center;
        background-color: #ffffff !important;
        /* Match theme */
        border-bottom: 1px solid #f1f5f9;
        display: block !important;
        padding: 0 15px !important;
        height: 50px !important;
        line-height: 50px !important;
        float: none !important;
    }

    /* Navbar: Reset Margin */
    .main-header .navbar {
        margin-left: 0 !important;
        float: none !important;
        width: 100% !important;
    }

    /* Restore AdminLTE Mobile Padding for Content (Stacked Header = 100px) */
    .content-wrapper {
        padding-top: 0px !important;
    }

    .right-side,
    .main-footer {
        padding-top: 100px !important;
    }

    /* Adjust Sidebar mobile padding to match 100px header */
    .skin-black .main-sidebar,
    .skin-black .left-side,
    .skin-black .sidebar,
    section.sidebar {
        padding-top: 50px !important;
    }

    /* Force Toggle Button (Just in case) */
    .main-header .navbar .sidebar-toggle {
        margin-left: 0 !important;
        border: none !important;
    }

    /* CRITICAL FIX: Force Text Visibility on Mobile */
    /* Even if body has .sidebar-collapse, mobile menu must act as expanded */
    .sidebar-collapse .sidebar-menu>li>a>span,
    .skin-black .sidebar-menu>li>a>span {
        display: inline !important;
    }

    /* [Fix] Mobile Sidebar Alignment & Spacing */
    .sidebar-collapse .sidebar-menu>li>a,
    .skin-black .sidebar-menu>li>a {
        justify-content: flex-start !important;
        /* Left align */
        padding-left: 20px !important;
        /* Add breathing room */
    }

    /* Restore Icon Spacing for Left Align */
    .sidebar-collapse .sidebar-menu>li>a>i,
    .skin-black .sidebar-menu>li>a>i {
        margin-right: 10px !important;
        width: auto !important;
        /* Allow natural width or fixed? keeping fixed 60px might be too wide, let's verify. 
                                   Actually top-level icons have width 60px globally. 
                                   Let's reset width to auto or smaller fixed for left-align. */
        width: 30px !important;
        /* Standard icon width */
        min-width: 30px !important;
        text-align: center;
    }

    /* [Fix] Show Active Submenus on Mobile even if 'Collapsed' class is present */
    .sidebar-collapse .sidebar-menu .treeview.active .treeview-menu {
        display: block !important;
    }

    /* [Feature] Lock Body Scroll when Sidebar is Open (Mobile) */
    body.sidebar-open {
        overflow: hidden !important;
        height: 100% !important;
        /* Prevent scroll chaining */
        position: fixed;
        width: 100%;
    }

    /* Mobile Sidebar Footer Adjustment */
    .skin-black .sidebar-footer {
        width: 230px !important;
        /* Full width on mobile */
    }
}

/* =========================================
   6. Sidebar Footer (Logout Button)
   ========================================= */

.main-sidebar {
    padding-bottom: 50px !important;
    /* Make space for footer */
}

.sidebar-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 230px;
    height: 50px;
    background-color: #ffffff;
    border-top: 1px solid #f1f5f9;
    z-index: 1000;
    /* Above scroll content */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sync transition exactly with AdminLTE sidebar animation */
    transition: width 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
}

.sidebar-footer .btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #3057B9;
    /* User Requested Blue */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.sidebar-footer .btn-logout:hover {
    color: #307095;
    /* Darker Blue on Hover */
    background-color: #f0f8ff;
    /* AliceBlue (Very Light Blue) */
}

.sidebar-footer .btn-logout i {
    font-size: 18px;
    margin-right: 10px;
}

/* Collapsed State Footer */
.sidebar-collapse .sidebar-footer {
    width: 60px !important;
}

.sidebar-collapse .sidebar-footer .btn-logout span {
    display: none !important;
}

.sidebar-collapse .sidebar-footer .btn-logout i {
    margin-right: 0 !important;
}

/* Adjust Content Height for Footer */
.sidebar,
.slimScrollDiv {
    height: calc(100% - 50px) !important;
    /* Subtract footer height */
    min-height: auto !important;
    padding-bottom: 0 !important;
}