/* sidebar.css 
   Updated with Teal Buttons, White Icons & Expandable Submenus
*/

:root {
    --sidebar-width: 260px;
    --collapsed-btn-size: 60px;
    --page-margin: 40px;
    --primary-purple: #4b0082;
    --fenz-teal: #17A2B8;        /* Professional Teal */
    --fenz-teal-hover: #006666;  /* Darker Teal for hover */
    --bg-white: #ffffff;
    --border-color: #ddd;
}

/* =========================================
   1. GLOBAL PAGE LAYOUT
   ========================================= */
body {
    margin: 0 !important;
    padding-left: calc(var(--sidebar-width) + var(--page-margin)) !important;
    padding-right: var(--page-margin) !important;
    padding-top: 20px !important;
    transition: padding-left 0.3s ease !important;
    box-sizing: border-box !important;
    min-height: 100vh;
}

body.osm-no-margin {
    padding-left: calc(var(--collapsed-btn-size) + var(--page-margin)) !important;
    padding-right: var(--page-margin) !important;
}

/* =========================================
   2. SIDEBAR CONTAINER
   ========================================= */
#osm-sidebar-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: var(--sidebar-width) !important;
    background-color: var(--bg-white) !important;
    border-right: 1px solid var(--border-color) !important;
    z-index: 999999 !important;
    transition: transform 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 2px 0 10px rgba(0,0,0,0.05) !important;
}

#osm-sidebar-container.collapsed {
    transform: translateX(calc(var(--sidebar-width) * -1)) !important;
}

/* =========================================
   3. TEAL SQUARED ICON BUTTONS
   ========================================= */
.osm-icon-btn {
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    
    /* Teal Theme Applied Here */
    background: var(--fenz-teal) !important;
    color: #ffffff !important; /* Forces SVG icons to be white */
    border: none !important;   /* Cleaner look for colored buttons */
    
    padding: 0 !important;
    border-radius: 4px !important;
    transition: background 0.2s ease !important;
}

.osm-icon-btn:hover {
    background: var(--fenz-teal-hover) !important;
    color: #ffffff !important;
}

/* Header inside Sidebar */
.sidebar-header {
    padding: 10px 15px !important;
    display: flex !important;
    justify-content: flex-end !important;
    border-bottom: 1px solid #eee !important;
}

/* Floating MENU button */
#osm-open-btn {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 99999 !important;
}


/* =========================================
   4. NAVIGATION & NESTED MENUS (Animated & Styled)
   ========================================= */
#osm-sidebar-nav {
    overflow-y: auto !important;
    flex-grow: 1 !important;
}

.osm-menu, .osm-menu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* Base styling for all menu items */
.osm-menu a, .menu-label {
    display: block !important;
    padding: 12px 20px !important;
    color: #333333 !important; /* Modern dark grey */
    text-decoration: none !important; /* Removed the underline */
    cursor: pointer !important;
    font-size: 15px !important;
    border-bottom: 1px solid #f1f1f1 !important; /* Softer separator */
    position: relative !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Group header labels */
.menu-label {
    font-weight: 600 !important;
    color: var(--primary-purple) !important; /* Keep top-level groups distinct */
}

/* Smooth hover effect */
.osm-menu a:hover, .menu-label:hover {
    background-color: rgba(23, 162, 184, 0.08) !important; /* 8% opacity FENZ Teal */
    color: var(--fenz-teal-hover) !important;
}

/* Chevron indicator for dropdowns */
.has-children > .menu-label::after {
    content: '\25B8' !important; 
    position: absolute !important;
    right: 20px !important;
    font-size: 12px !important;
    transition: transform 0.3s ease-in-out !important;
}

/* Rotate chevron smoothly when expanded */
.has-children.expanded > .menu-label::after {
    transform: rotate(90deg) !important;
}

/* Submenu container animation */
.submenu {
    max-height: 0 !important;
    overflow: hidden !important;
    background: #fafafa !important;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out !important;
}

/* Expand state */
.has-children.expanded > .submenu {
    max-height: 500px !important; 
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Indentations for nested levels */
.osm-menu ul .menu-label, 
.osm-menu ul a { padding-left: 40px !important; }

.osm-menu ul ul .menu-label, 
.osm-menu ul ul a { padding-left: 60px !important; }


/* =========================================
   5. BACK BUTTON POSITION
   ========================================= */
.back-dashboard-btn {
    position: fixed !important;
    top: 10px !important;
    z-index: 99998 !important;
    transition: left 0.3s ease !important;
}

body:not(.osm-no-margin) .back-dashboard-btn {
    left: calc(var(--sidebar-width) + 15px) !important;
}

body.osm-no-margin .back-dashboard-btn {
    left: 60px !important;
}