/* ============================================================
 * Zender — Sidebar v3 (Compact + Modern)
 * Loaded after tosca-skin.css and tosca-skin-v2.css
 * ============================================================ */

/* ---------- Aside container ---------- */
.app-sidebar,
aside.app-sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e6eef1 !important;
    box-shadow: 0 0 0 1px rgba(20, 168, 168, 0.02), 4px 0 24px -16px rgba(12, 134, 136, 0.18) !important;
    width: 240px !important;
    padding-top: 0 !important;
}

/* Sidebar mini state preserved by AdminTro JS */
.sidenav-toggled .app-sidebar { width: 70px !important; }

/* ---------- Brand / logo block ---------- */
.app-sidebar__logo {
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #eef3f5 !important;
    background: linear-gradient(180deg, #f7fbfc 0%, #ffffff 100%) !important;
    margin-bottom: 6px !important;
}
.app-sidebar__logo .header-brand-img { max-height: 36px !important; width: auto !important; }

/* ---------- Side menu list ---------- */
.side-menu,
.app-sidebar3 {
    padding: 4px 10px 24px !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Scrollbar */
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb {
    background: #cfe1e3;
    border-radius: 8px;
}
.app-sidebar::-webkit-scrollbar-thumb:hover { background: #14a8a8; }
.app-sidebar::-webkit-scrollbar-track { background: transparent; }

/* ---------- Menu rows (li.slide) ---------- */
.side-menu li.slide { margin: 1px 0 !important; padding: 0 !important; }

/* HR dividers — slim & clean */
.side-menu hr,
.app-sidebar hr {
    border: 0 !important;
    border-top: 1px solid #eef3f5 !important;
    margin: 10px 8px !important;
    width: auto !important;
}

/* ---------- Section category labels ---------- */
.side-item-category {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #14a8a8 !important;
    padding: 14px 12px 6px !important;
    margin: 0 !important;
    border: 0 !important;
    list-style: none !important;
    line-height: 1.2 !important;
    opacity: 0.85;
}
.side-item-category:first-child { padding-top: 6px !important; }
.side-item-category .text-primary,
.side-item-category .text-yellow {
    color: #0c8688 !important;
    font-weight: 600 !important;
}

/* ---------- Top-level link rows ---------- */
.side-menu__item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 10px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    color: #2c3e44 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease, transform .1s ease !important;
    position: relative !important;
}

.side-menu__item:hover {
    background: rgba(20, 168, 168, 0.07) !important;
    color: #0c8688 !important;
}

.side-menu__item.active,
.side-menu li.is-expanded > .side-menu__item,
.side-menu li.active > .side-menu__item,
.slide.active > .side-menu__item {
    background: linear-gradient(90deg, rgba(20,168,168,0.13) 0%, rgba(20,168,168,0.05) 100%) !important;
    color: #0c8688 !important;
    font-weight: 600 !important;
}
.side-menu__item.active::before,
.slide.active > .side-menu__item::before {
    content: "" !important;
    position: absolute !important;
    left: -10px !important;
    top: 6px !important;
    bottom: 6px !important;
    width: 3px !important;
    border-radius: 0 3px 3px 0 !important;
    background: #14a8a8 !important;
}

/* ---------- Icons (uniform tosca tile) ---------- */
.side-menu__icon {
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 7px !important;
    background: #f1f7f8 !important;
    color: #14a8a8 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    margin: 0 !important;
    transition: background-color .15s ease, color .15s ease !important;
}
.side-menu__item:hover .side-menu__icon {
    background: #e2f3f3 !important;
    color: #0c8688 !important;
}
.side-menu__item.active .side-menu__icon,
.slide.active > .side-menu__item .side-menu__icon {
    background: linear-gradient(135deg, #14a8a8 0%, #0c8688 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px -2px rgba(12, 134, 136, 0.45) !important;
}

/* Override inline color="..." styles AdminTro injects */
.side-menu__icon[style*="color"] { color: #14a8a8 !important; }
.side-menu__item:hover .side-menu__icon[style*="color"] { color: #0c8688 !important; }
.side-menu__item.active .side-menu__icon[style*="color"],
.slide.active > .side-menu__item .side-menu__icon[style*="color"] { color: #ffffff !important; }

/* ---------- Label ---------- */
.side-menu__label {
    flex: 1 1 auto !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    color: inherit !important;
}

/* ---------- Caret ---------- */
.side-menu .angle {
    color: #9aaeb4 !important;
    font-size: 11px !important;
    margin-left: auto !important;
    transition: transform .2s ease, color .15s ease !important;
}
.side-menu__item:hover .angle { color: #14a8a8 !important; }
.slide.is-expanded > .side-menu__item .angle,
.slide.active > .side-menu__item .angle {
    color: #0c8688 !important;
    transform: rotate(90deg) !important;
}

/* ---------- Submenu (slide-menu) ---------- */
.slide-menu {
    list-style: none !important;
    padding: 2px 0 4px 32px !important;
    margin: 2px 0 4px !important;
    border: 0 !important;
    background: transparent !important;
    position: relative !important;
}
.slide-menu::before {
    content: "" !important;
    position: absolute !important;
    left: 22px !important;
    top: 4px !important;
    bottom: 4px !important;
    width: 1px !important;
    background: #e6eef1 !important;
}

.slide-menu li { margin: 0 !important; padding: 0 !important; }

.slide-item {
    display: flex !important;
    align-items: center !important;
    padding: 5px 10px 5px 12px !important;
    margin: 1px 0 !important;
    border-radius: 6px !important;
    color: #5b6c73 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: background-color .12s ease, color .12s ease !important;
    position: relative !important;
}
.slide-item::before {
    content: "" !important;
    position: absolute !important;
    left: -10px !important;
    top: 50% !important;
    width: 6px !important;
    height: 1px !important;
    background: #d8e4e7 !important;
    transform: translateY(-50%) !important;
}
.slide-item:hover {
    background: rgba(20, 168, 168, 0.07) !important;
    color: #0c8688 !important;
}
.slide-item:hover::before { background: #14a8a8 !important; height: 2px !important; }

.slide-item.active,
.slide-menu li.active > .slide-item {
    background: rgba(20, 168, 168, 0.12) !important;
    color: #0c8688 !important;
    font-weight: 600 !important;
}
.slide-item.active::before { background: #14a8a8 !important; height: 2px !important; width: 8px !important; }

/* ---------- Mini sidebar (collapsed) ---------- */
.sidenav-toggled .app-sidebar .side-menu__label,
.sidenav-toggled .app-sidebar .angle,
.sidenav-toggled .app-sidebar .side-item-category,
.sidenav-toggled .app-sidebar hr { display: none !important; }
.sidenav-toggled .side-menu__item { justify-content: center !important; padding: 8px !important; }
.sidenav-toggled .side-menu__icon { margin: 0 !important; }
.sidenav-toggled .side-menu { padding: 6px 8px !important; }

/* On hover-expand show labels */
.sidenav-toggled.sidenav-toggled1 .app-sidebar .side-menu__label,
.sidenav-toggled.sidenav-toggled1 .app-sidebar .angle,
.sidenav-toggled.sidenav-toggled1 .app-sidebar .side-item-category {
    display: revert !important;
}

/* ---------- Main content shift sync (just padding-left fix) ---------- */
.app-content,
.main-content {
    transition: margin-left .2s ease !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 991px) {
    .app-sidebar { box-shadow: 4px 0 24px -8px rgba(12, 134, 136, 0.25) !important; }
}