/* CRITICAL RESET: Browser Default Bullet Points Override */
/* This must be at the top with highest priority */

/* Method 1: Direct targeting */
#layout-menu ul.menu-inner {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#layout-menu ul.menu-inner li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Method 2: Universal selector in menu context */
#layout-menu * {
    list-style: none !important;
    list-style-type: none !important;
}

/* Method 3: Body override */
body #layout-menu ul,
body #layout-menu li {
    list-style: none !important;
    list-style-type: none !important;
}

/* Method 4: CSS Reset approach */
aside[id="layout-menu"] ul,
aside[id="layout-menu"] li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Mobile Menu Icon Fixes - Khắc phục icon đè chữ */

/* CRITICAL: Ẩn bullet points của thẻ <li> trong menu - Maximum Specificity */
aside#layout-menu ul,
aside#layout-menu.sneat-menu ul,
aside#layout-menu .menu-inner,
aside#layout-menu .menu-sub,
.sneat-menu.layout-menu ul,
.sneat-menu.layout-menu .menu-inner,
.sneat-menu.layout-menu .menu-sub,
.menu-vertical ul,
.menu-vertical .menu-inner,
.menu-vertical .menu-sub {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin: 0 !important;
}

aside#layout-menu li,
aside#layout-menu.sneat-menu li,
aside#layout-menu .menu-item,
.sneat-menu.layout-menu li,
.sneat-menu.layout-menu .menu-item,
.menu-vertical li,
.menu-vertical .menu-item {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    position: relative;
    margin: 0 !important;
    padding-left: 0 !important;
}

/* Maximum override cho pseudo-elements */
aside#layout-menu li::before,
aside#layout-menu li::after,
aside#layout-menu .menu-item::before,
aside#layout-menu .menu-item::after,
aside#layout-menu.sneat-menu li::before,
aside#layout-menu.sneat-menu li::after,
.sneat-menu.layout-menu li::before,
.sneat-menu.layout-menu li::after,
.menu-vertical li::before,
.menu-vertical li::after,
.menu-vertical .menu-item::before,
.menu-vertical .menu-item::after {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
}

/* Fix icon overlap với text trên mobile */
@media (max-width: 768px) {
    /* CRITICAL: Đảm bảo menu-link có flexbox layout đúng */
    .menu-vertical .menu-link {
        display: flex !important;
        align-items: center !important;
        padding: 0.75rem 1rem !important;
        min-height: 2.75rem;
        gap: 0; /* Reset gap, sẽ dùng margin thay thế */
    }
    
    /* ICON: Cố định kích thước và vị trí */
    .menu-vertical .menu-icon {
        flex-shrink: 0 !important; /* Không cho phép shrink */
        flex-grow: 0 !important;   /* Không cho phép grow */
        width: 1.75rem !important; /* Fixed width */
        height: 1.75rem !important; /* Fixed height */
        margin-right: 1rem !important; /* Khoảng cách với text */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center;
    }
    
    /* ICON SIZE: Điều chỉnh size icon */
    .menu-vertical .menu-icon::before {
        font-size: 1.125rem !important;
        line-height: 1 !important;
        display: block !important;
    }
    
    /* TEXT: Đảm bảo text có đủ không gian */
    .menu-vertical .menu-link > div {
        flex: 1 1 auto !important; /* Cho phép grow và shrink */
        min-width: 0 !important;   /* Cho phép shrink xuống 0 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.875rem; /* Giảm nhẹ font size trên mobile */
    }
    
    /* SUBMENU: Fix tương tự cho menu con */
    .menu-vertical .menu-sub .menu-link {
        padding-left: 3rem !important; /* Thêm indent cho submenu */
        padding-right: 1rem !important;
        padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
        min-height: 2.5rem;
        display: flex !important;
        align-items: center !important;
    }
    
    .menu-vertical .menu-sub .menu-icon {
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
        margin-right: 0.75rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .menu-vertical .menu-sub .menu-icon::before {
        font-size: 1rem !important;
        line-height: 1 !important;
        display: block !important;
    }
    
    .menu-vertical .menu-sub .menu-link > div {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 0.8125rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Fix cho tablet */
@media (min-width: 769px) and (max-width: 991px) {
    .menu-vertical .menu-icon {
        margin-right: 0.625rem !important;
    }
    
    .menu-vertical .menu-link > div {
        font-size: 0.9rem;
    }
}

/* Đảm bảo menu header không bị ảnh hưởng */
.menu-header {
    padding: 0.75rem 1rem 0.25rem;
}

.menu-header-text {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* RemixIcon specific fixes trên mobile */
@media (max-width: 768px) {
    /* Đảm bảo tất cả RemixIcon trong menu hoạt động đúng */
    .menu-vertical .menu-link .tf-icons[class*="ri-"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    /* Override các icon cụ thể nếu cần */
    .menu-vertical .tf-icons.ri-home-fill,
    .menu-vertical .tf-icons.ri-layout-2-line,
    .menu-vertical .tf-icons.ri-lifebuoy-line,
    .menu-vertical .tf-icons.ri-organization-chart,
    .menu-vertical .tf-icons.ri-star-line,
    .menu-vertical .tf-icons.ri-alarm-line,
    .menu-vertical .tf-icons.ri-settings-line,
    .menu-vertical .tf-icons.ri-user-line,
    .menu-vertical .tf-icons.ri-file-list-line {
        width: inherit !important;
        height: inherit !important;
        line-height: inherit !important;
    }
}

/* Hover effects cho mobile */
@media (max-width: 768px) {
    .menu-vertical .menu-link:hover,
    .menu-vertical .menu-link:focus {
        background-color: rgba(0,0,0,0.04);
        transition: background-color 0.2s ease;
    }
    
    .menu-vertical .menu-item.active > .menu-link {
        background-color: rgba(105, 108, 255, 0.08);
    }
}

/* UNIVERSAL: Ẩn tất cả bullet points - Nuclear Option */

/* Target tất cả menu containers với highest specificity */
html body aside#layout-menu ul,
html body aside#layout-menu ol,
html body aside#layout-menu.sneat-menu ul,
html body aside#layout-menu.sneat-menu ol,
html body .sneat-menu.layout-menu ul,
html body .sneat-menu.layout-menu ol,
html body .layout-menu ul,
html body .layout-menu ol,
html body .menu-vertical ul,
html body .menu-vertical ol {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    list-style-position: outside !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin: 0 !important;
}

/* Target tất cả menu items */
html body aside#layout-menu li,
html body aside#layout-menu .menu-item,
html body aside#layout-menu.sneat-menu li,
html body aside#layout-menu.sneat-menu .menu-item,
html body .sneat-menu.layout-menu li,
html body .sneat-menu.layout-menu .menu-item,
html body .layout-menu li,
html body .layout-menu .menu-item,
html body .menu-vertical li,
html body .menu-vertical .menu-item {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    list-style-position: outside !important;
    position: relative;
    margin: 0 !important;
    padding-left: 0 !important;
}

/* Nuclear option cho pseudo-elements */
html body aside#layout-menu li::before,
html body aside#layout-menu li::after,
html body aside#layout-menu .menu-item::before,
html body aside#layout-menu .menu-item::after,
html body aside#layout-menu.sneat-menu li::before,
html body aside#layout-menu.sneat-menu li::after,
html body .sneat-menu.layout-menu li::before,
html body .sneat-menu.layout-menu li::after,
html body .layout-menu li::before,
html body .layout-menu li::after,
html body .menu-vertical li::before,
html body .menu-vertical li::after,
html body .menu-vertical .menu-item::before,
html body .menu-vertical .menu-item::after {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Target CSS3 markers */
html body aside#layout-menu li::marker,
html body .sneat-menu li::marker,
html body .layout-menu li::marker,
html body .menu-vertical li::marker,
html body .menu-item::marker,
html body .menu-inner li::marker,
html body .menu-sub li::marker {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
}

/* DEBUG: Để debug layout trên mobile (remove sau khi fix xong) */
/*
@media (max-width: 768px) {
    .menu-vertical .menu-link {
        border: 1px solid red !important;
    }
    
    .menu-vertical .menu-icon {
        background-color: rgba(255, 0, 0, 0.2) !important;
        border: 1px solid blue !important;
    }
    
    .menu-vertical .menu-link > div {
        background-color: rgba(0, 255, 0, 0.2) !important;
        border: 1px solid green !important;
    }
}
*/