/**
 * Mobile Sidebar Menu — MITN Design System v2.0
 * Off-canvas drawer #main-menu.mobile-sidebar (mobile + tablet).
 * Visual layer only — does NOT override Flatsome's nav-slide structural rules
 * (position:absolute toggle, position:fixed sub-menu, translate animations).
 *
 * Tokens: assets/css/tokens.css
 */

#main-menu.mobile-sidebar {
    --mitn-ms-accent: var(--color-brand-primary, #dd3333);
    --mitn-ms-accent-hover: var(--color-brand-primary-hover, #c12424);
    --mitn-ms-accent-soft: var(--color-brand-surface, #fef1f1);
    --mitn-ms-text: var(--color-text-primary, #111111);
    --mitn-ms-body: var(--color-text-body, #1f2937);
    --mitn-ms-muted: var(--color-text-muted, #4b5563);
    --mitn-ms-border: var(--color-border-subtle, #e5e7eb);
    --mitn-ms-bg: var(--color-surface-base, #ffffff);
    --mitn-ms-bg-soft: var(--color-surface-raised, #f9fafb);

    background: var(--mitn-ms-bg);
    color: var(--mitn-ms-text);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    box-shadow: var(--shadow-lg, 0 12px 24px rgba(15, 23, 42, 0.10));
}

#main-menu .sidebar-menu {
    background: var(--mitn-ms-bg);
    padding: 0 !important;
}

/* -------------------------------------------------------------------------
   1. Tabs (Menu / Sản phẩm) — sticky header
   ------------------------------------------------------------------------- */
#main-menu .sidebar-menu-tabs {
    margin: 0;
    background: var(--mitn-ms-bg);
    border-bottom: 1px solid var(--mitn-ms-border);
    position: sticky;
    top: 0;
    z-index: 2;
}

#main-menu .sidebar-menu-tabs__tab {
    background: transparent;
    margin: 0;
    position: relative;
}

#main-menu .sidebar-menu-tabs__tab.active {
    background: transparent;
}

#main-menu .sidebar-menu-tabs__tab-link {
    min-height: 48px;
    padding: var(--s-3, 12px) var(--s-4, 16px) !important;
    color: var(--mitn-ms-muted);
    font-family: var(--font-heading, 'Be Vietnam Pro', sans-serif);
    font-size: var(--fs-sm, 14px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: color var(--duration-fast, 200ms) var(--ease-standard, ease);
}

#main-menu .sidebar-menu-tabs__tab-link:hover,
#main-menu .sidebar-menu-tabs__tab-link:focus-visible {
    color: var(--mitn-ms-text);
}

#main-menu .sidebar-menu-tabs__tab.active .sidebar-menu-tabs__tab-link {
    color: var(--mitn-ms-accent);
}

#main-menu .sidebar-menu-tabs__tab.active::after {
    content: '';
    position: absolute;
    left: var(--s-4, 16px);
    right: var(--s-4, 16px);
    bottom: -1px;
    height: 3px;
    background: var(--mitn-ms-accent);
    border-radius: 2px 2px 0 0;
    pointer-events: none;
}

#main-menu .sidebar-menu-tabs__tab-link:focus-visible {
    outline: 3px solid var(--color-focus-ring, #2563eb);
    outline-offset: -3px;
    border-radius: var(--radius-sm, 4px);
}

/* -------------------------------------------------------------------------
   2. Menu lists — keep Flatsome's structural layout, restyle visuals only
   ------------------------------------------------------------------------- */
#main-menu .nav-sidebar.nav-vertical > li.menu-item,
#main-menu .nav-sidebar.nav-vertical > li + li {
    position: relative;
    border-top: 1px solid var(--mitn-ms-border) !important;
    background: var(--mitn-ms-bg);
    transition: background var(--duration-fast, 200ms) var(--ease-standard, ease);
}

#main-menu .nav-sidebar.nav-vertical > li.menu-item:first-child {
    border-top: 0 !important;
}

/* Hover / active row */
#main-menu .nav-sidebar.nav-vertical > li.menu-item:hover,
#main-menu .nav-sidebar.nav-vertical > li.menu-item.active {
    background-color: var(--mitn-ms-accent-soft) !important;
}

/* Anchor — full row, right padding leaves space for absolutely-positioned toggle */
#main-menu .nav-sidebar.nav-vertical > li.menu-item > a {
    display: block;
    min-height: 48px;
    padding: 14px 56px 14px var(--s-4, 16px) !important;
    color: var(--mitn-ms-text);
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--fs-sm, 14px);
    font-weight: 600;
    line-height: var(--lh-snug, 1.35);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: color var(--duration-fast, 200ms) var(--ease-standard, ease);
}

/* Leaf items without children: no right reserve needed (no toggle) */
#main-menu .nav-sidebar.nav-vertical > li.menu-item:not(.has-child):not(.menu-item-has-children) > a {
    padding-right: var(--s-4, 16px) !important;
}

#main-menu .nav-sidebar.nav-vertical > li.menu-item > a:hover,
#main-menu .nav-sidebar.nav-vertical > li.menu-item > a:focus-visible {
    color: var(--mitn-ms-accent);
}

#main-menu .nav-sidebar.nav-vertical > li.menu-item > a:focus-visible {
    outline: 3px solid var(--color-focus-ring, #2563eb);
    outline-offset: -3px;
}

/* Current page / ancestor */
#main-menu .nav-sidebar.nav-vertical > li.current-menu-item,
#main-menu .nav-sidebar.nav-vertical > li.current-menu-parent,
#main-menu .nav-sidebar.nav-vertical > li.current-menu-ancestor {
    background-color: var(--mitn-ms-accent-soft) !important;
    box-shadow: inset 3px 0 0 var(--mitn-ms-accent);
}

#main-menu .nav-sidebar.nav-vertical > li.current-menu-item > a,
#main-menu .nav-sidebar.nav-vertical > li.current-menu-parent > a,
#main-menu .nav-sidebar.nav-vertical > li.current-menu-ancestor > a {
    color: var(--mitn-ms-accent);
}

/* -------------------------------------------------------------------------
   3. Toggle button (chevron-right) — KEEP Flatsome's position:absolute layout,
      only change visuals so we don't break the nav-slide mechanism.
   ------------------------------------------------------------------------- */
#main-menu .nav-sidebar.nav-vertical > li > .toggle {
    /* keep Flatsome's absolute positioning; just give it a proper 48x48 hit target */
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 48px;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mitn-ms-muted);
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-left: 1px solid var(--mitn-ms-border);
    transition: background var(--duration-fast, 200ms) var(--ease-standard, ease),
                color var(--duration-fast, 200ms) var(--ease-standard, ease);
}

#main-menu .nav-sidebar.nav-vertical > li > .toggle:hover,
#main-menu .nav-sidebar.nav-vertical > li > .toggle:focus-visible {
    background: rgba(0, 0, 0, 0.04);
    color: var(--mitn-ms-accent);
}

#main-menu .nav-sidebar.nav-vertical > li > .toggle:focus-visible {
    outline: 3px solid var(--color-focus-ring, #2563eb);
    outline-offset: -3px;
}

/* Highlight when parent panel is open */
#main-menu .nav-sidebar.nav-vertical > li.has-child[aria-expanded="true"] > .toggle,
#main-menu .nav-sidebar.nav-vertical > li.menu-item.active > .toggle {
    color: var(--mitn-ms-accent);
}

/* -------------------------------------------------------------------------
   4. Sub-menu panel — Flatsome already handles position/transform.
      Visual restyle only; inherit anchor/toggle rules from level-1.
   ------------------------------------------------------------------------- */
#main-menu .nav-slide > li > .sub-menu,
#main-menu .nav-slide > li > ul.children {
    background: var(--mitn-ms-bg);
    padding: 0 !important;
    list-style: none;
}

#main-menu .nav-slide > li > .sub-menu > li,
#main-menu .nav-slide > li > ul.children > li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    position: relative;
}

#main-menu .nav-slide > li > .sub-menu > li:not(.nav-slide-header),
#main-menu .nav-slide > li > ul.children > li:not(.nav-slide-header) {
    border-top: 1px solid var(--mitn-ms-border);
    background: var(--mitn-ms-bg);
    transition: background var(--duration-fast, 200ms) var(--ease-standard, ease);
}

#main-menu .nav-slide > li > .sub-menu > li:not(.nav-slide-header):hover,
#main-menu .nav-slide > li > .sub-menu > li:not(.nav-slide-header).active,
#main-menu .nav-slide > li > ul.children > li:not(.nav-slide-header):hover,
#main-menu .nav-slide > li > ul.children > li:not(.nav-slide-header).active {
    background-color: var(--mitn-ms-accent-soft) !important;
}

/* Level-1 items inside a slide (direct children of the current sub-menu) — UPPERCASE + BOLD */
#main-menu .nav-slide > li > .sub-menu > li:not(.nav-slide-header) > a,
#main-menu .nav-slide > li > ul.children > li:not(.nav-slide-header) > a {
    display: block;
    min-height: 48px;
    padding: 14px 56px 14px var(--s-4, 16px) !important;
    color: var(--mitn-ms-text) !important;
    font-family: var(--font-heading, 'Be Vietnam Pro', sans-serif);
    font-size: var(--fs-sm, 14px) !important;
    font-weight: 700 !important;
    line-height: var(--lh-snug, 1.35);
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

#main-menu .nav-slide > li > .sub-menu > li:not(.nav-slide-header):not(.has-child):not(.menu-item-has-children) > a,
#main-menu .nav-slide > li > ul.children > li:not(.nav-slide-header):not(.has-child):not(.menu-item-has-children) > a {
    padding-right: var(--s-4, 16px) !important;
}

/* Level-3+ (sub-sub items shown inline under a level-2 parent) — normal weight, sentence case, slightly indented */
#main-menu .nav-slide > li > .sub-menu > li > .sub-menu li > a,
#main-menu .nav-slide > li > .sub-menu > li > ul.children li > a,
#main-menu .nav-slide > li > ul.children > li > .sub-menu li > a,
#main-menu .nav-slide > li > ul.children > li > ul.children li > a {
    min-height: 44px !important;
    padding: 10px 16px 10px 32px !important;
    color: var(--mitn-ms-body) !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: var(--fs-sm, 14px) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Nested ul wrapper: no top-border, soft background to visually group */
#main-menu .nav-slide > li > .sub-menu > li > .sub-menu,
#main-menu .nav-slide > li > .sub-menu > li > ul.children,
#main-menu .nav-slide > li > ul.children > li > .sub-menu,
#main-menu .nav-slide > li > ul.children > li > ul.children {
    background: var(--mitn-ms-bg-soft) !important;
    padding: 0 !important;
    list-style: none;
    border-top: 1px solid var(--mitn-ms-border);
}

#main-menu .nav-slide > li > .sub-menu > li > .sub-menu > li,
#main-menu .nav-slide > li > .sub-menu > li > ul.children > li,
#main-menu .nav-slide > li > ul.children > li > .sub-menu > li,
#main-menu .nav-slide > li > ul.children > li > ul.children > li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border-top: 1px solid var(--mitn-ms-border);
}

#main-menu .nav-slide > li > .sub-menu > li > .sub-menu > li:first-child,
#main-menu .nav-slide > li > .sub-menu > li > ul.children > li:first-child,
#main-menu .nav-slide > li > ul.children > li > .sub-menu > li:first-child,
#main-menu .nav-slide > li > ul.children > li > ul.children > li:first-child {
    border-top: 0;
}

/* Slide-back header */
#main-menu .nav-slide-header {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--mitn-ms-border);
    background: var(--mitn-ms-bg-soft) !important;
}

#main-menu .nav-slide-header > .toggle {
    /* This toggle is positioned absolutely by Flatsome too — restore it inline */
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: var(--s-2, 8px);
    width: 100% !important;
    min-height: 48px;
    height: auto !important;
    margin: 0;
    padding: var(--s-3, 12px) var(--s-4, 16px) !important;
    border: 0 !important;
    background: transparent;
    color: var(--mitn-ms-text);
    font-family: var(--font-heading, 'Be Vietnam Pro', sans-serif);
    font-size: var(--fs-sm, 14px);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-fast, 200ms) var(--ease-standard, ease),
                color var(--duration-fast, 200ms) var(--ease-standard, ease);
}

#main-menu .nav-slide-header > .toggle:hover,
#main-menu .nav-slide-header > .toggle:focus-visible {
    background: var(--mitn-ms-accent-soft);
    color: var(--mitn-ms-accent);
}

#main-menu .nav-slide-header > .toggle:focus-visible {
    outline: 3px solid var(--color-focus-ring, #2563eb);
    outline-offset: -3px;
}

#main-menu .nav-slide-header > .toggle i.icon-angle-left {
    font-size: 18px;
    color: var(--mitn-ms-muted);
    line-height: 1;
}

#main-menu .nav-slide-header > .toggle:hover i.icon-angle-left,
#main-menu .nav-slide-header > .toggle:focus-visible i.icon-angle-left {
    color: var(--mitn-ms-accent);
}

/* -------------------------------------------------------------------------
   5. Safe-area inset for notched phones
   ------------------------------------------------------------------------- */
@supports (padding: max(0px)) {
    #main-menu .sidebar-menu-tabs {
        padding-top: env(safe-area-inset-top, 0);
    }
    #main-menu .sidebar-menu {
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }
}

/* -------------------------------------------------------------------------
   6. Reduced-motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #main-menu .sidebar-menu-tabs__tab-link,
    #main-menu .nav-sidebar.nav-vertical > li.menu-item > a,
    #main-menu .nav-sidebar.nav-vertical > li > .toggle,
    #main-menu .nav-slide-header > .toggle {
        transition: none !important;
    }
}