/* sysIndex left rail and menu panel styles */

/*左侧菜单宽度*/
.mmc #main-menu #left {
    width: 100% !important;
}

/* 修复theme-default主题下左侧菜单折叠时hover显示黑色背景的问题 */
.theme-default #main-menu .mmc-dropdown-open-ul {
    background: #ffffff !important;
    border: 1px solid #e0e3e4 !important;
}

.theme-default #main-menu .mmc-dropdown-open-ul .mmc-title {
    background: #f7f7f7 !important;
    color: #333333 !important;
}

.theme-default #main-menu .mmc-dropdown-open-ul a {
    color: #333333 !important;
    background-color: #ffffff !important;
}

.theme-default #main-menu .mmc-dropdown-open-ul a:hover {
    background: #e1e9fc !important;
    color: #376aea !important;
}

/* 隐藏菜单折叠时第一层的箭头 */
body.mmc .navigation > .mm-dropdown > a::before,
body.mmc .navigation > .mm-dropdown > a::after {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
}

/* ========================================
 * 双栏菜单 rail/panel 专属 token
 * @date 2026-06-17
 * ======================================== */
:root {
    --rail-w: 76px;
    --panel-w: 212px;
    --menu-brand: #3b6cf0;
    --menu-brand-soft: #eef3ff;
    --menu-brand-text: #2557d6;
    --menu-ink-1: #1f2733;
    --menu-ink-2: #5b6573;
    --menu-ink-3: #8a94a3;
    --menu-hover: #f4f6fa;
    --menu-line: #eceef2;
    --menu-line-strong: #e3e6ec;
    --menu-panel-bg: #ffffff;
    --menu-radius: 8px;
}

/* ========================================
 * 双栏布局：侧边栏尺寸 + mmc 收起体系
 * rail 始终常驻 76px；panel 展开 212px，收起 0px
 * @date 2026-06-17
 * ======================================== */

/* #main-menu 不设背景，由 rail/panel 各自控制 */
#main-menu {
    height: 100% !important;
    background: none !important;
    overflow: hidden !important;
}

/* slimScrollDiv 是 pixel-admin slimScroll 包裹层，需要继承高度和 flex */
#main-menu > .slimScrollDiv {
    height: 100% !important;
    display: flex !important;
    flex-direction: column;
}

/* #main-menu-inner：横向 flex，rail + panel 并排 */
#main-menu-inner {
    display: flex !important;
    flex-direction: row !important;
    height: 100% !important;
    position: relative;
    overflow: visible !important;
    width: auto !important;
}

/* #left 数据暂存区，始终隐藏 */
#left {
    display: none !important;
}

/* #main-menu-toggle 由顶栏汉堡菜单钩子驱动，隐藏 DOM 按钮本身 */
#main-menu-toggle {
    display: none !important;
}


/* 主内容区和菜单宽度统一用 JS 设置 inline style，CSS 只给兜底默认值 */
/* --menu-total-w 由 JS 动态更新（panel 展开=rail+panel，收起=rail） */
:root {
    --menu-total-w: var(--rail-w); /* 默认收起态 */
}

/* 兜底：所有 pixel-admin 宽度覆盖都指向 --menu-total-w */
#main-menu,
body:not(.mmc) #main-menu,
body.mmc #main-menu,
.mme #main-menu {
    width: var(--menu-total-w) !important;
    transition: width 0.2s ease !important;
}

#main-wrapper,
body:not(.mmc) #main-wrapper,
body:not(.mmc).mme #main-wrapper,
body.mmc #main-wrapper,
.mme #main-wrapper {
    padding-left: var(--menu-total-w) !important;
    transition: padding-left 0.2s ease !important;
}

.topLayoutBody #main-wrapper {
    padding-left: 0 !important;
}

/* @media 768px 兜底：保持同 --menu-total-w */
@media (min-width: 768px) {
    #main-menu,
    .mme #main-menu {
        width: var(--menu-total-w) !important;
    }
    #main-wrapper,
    .mme #main-wrapper {
        padding-left: var(--menu-total-w) !important;
    }
}

/* navbar-inner left:0（navbar 本体已从 --menu-total-w 开始，inner 无需再偏移） */
#main-navbar .navbar-inner {
    left: 0 !important;
}

/* 动画速度 0.15s（保留原有加速） */
.animate-mm-sm #content-wrapper,
.animate-mm-sm #main-menu,
.animate-mm-sm #main-navbar .navbar-inner,
.animate-mm-sm #main-wrapper,
.animate-mm-md #content-wrapper,
.animate-mm-md #main-menu,
.animate-mm-md #main-navbar .navbar-inner,
.animate-mm-md #main-wrapper,
.animate-mm-lg #content-wrapper,
.animate-mm-lg #main-menu,
.animate-mm-lg #main-navbar .navbar-inner,
.animate-mm-lg #main-wrapper {
    -webkit-transition: all 0.15s linear !important;
    transition: all 0.15s linear !important;
}

.animate-mm-sm #main-navbar .navbar-header,
.animate-mm-md #main-navbar .navbar-header,
.animate-mm-lg #main-navbar .navbar-header {
    -webkit-transition: all 0.15s linear !important;
    transition: all 0.15s linear !important;
    white-space: nowrap;
    overflow: hidden;
}

/*主框架行内样式提取*/
#main-wrapper.noScrollableHeader {
    vertical-align: unset;
}

/* ========================================
 * 顶部企业名超长处理
 * Why: .navbar-header 在非折叠态被锁为 var(--sidebar-width)=150px，
 *      .navbar-brand 是 bootstrap 默认 float:left + 无 overflow 处理，
 *      ① 加载初期 body 上 mmc/topLayoutBody class 尚未应用，长企业名换行撑高 navbar-header（视觉抖动）
 *      ② 稳定后 150px 装不下长名又被字面截断显示半个字
 * How: navbar-header 锁 50px 高 + nowrap 防抖动；navbar-brand 用 ellipsis 把硬截断改为省略号，配合 JSP 上的 title 提供悬停查看
 * @date 2026-04-27
 * ======================================== */
#main-navbar .navbar-header {
    height: 50px;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
}

#main-navbar .navbar-header .navbar-brand {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}


/* ========================================
 * 双栏菜单：窄图标栏 rail + 常驻二级面板 panel
 * @date 2026-06-17
 * ======================================== */

/* ── rail：蓝色渐变窄图标栏 ── */
.rail {
    width: var(--rail-w);
    flex: 0 0 var(--rail-w);
    background: linear-gradient(180deg, #2f56b8 0%, #3f74e8 55%, #5b93f5 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    z-index: 3;
    height: 100%;
    overflow: hidden;
}

.rail__list {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 6px 5px;
    list-style: none;
    margin: 0;
}

.rail__list::-webkit-scrollbar {
    width: 0;
}

.rail__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 9px 2px 8px;
    border-radius: 10px;
    cursor: pointer;
    color: rgba(255, 255, 255, .75);
    transition: background .16s, color .16s;
    user-select: none;
    text-decoration: none;
}

.rail__item i.fa {
    font-size: 20px;
    line-height: 1;
}

.rail__item span {
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: .2px;
    text-align: center;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rail__item:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.rail__item.is-active {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.rail__item.is-active::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: #fff;
}

/* ── panel：常驻二级面板；padding-top 避开固定顶栏（51px）── */
.panel {
    width: var(--panel-w);
    flex: 0 0 var(--panel-w);
    background: var(--menu-panel-bg);
    border-right: 1px solid var(--menu-line);
    display: flex;
    flex-direction: column;
    z-index: 2;
    height: 100%;
    overflow: visible;
    transition: width .2s ease, flex-basis .2s ease;
    padding-top: 51px;
    box-sizing: border-box;
    position: relative;
}

.panel.is-collapsed {
    width: 0 !important;
    flex-basis: 0 !important;
    overflow: hidden;
}

.panel__top {
    padding: 10px 10px 6px;
    flex-shrink: 0;
}

/* 搜索框 */
.panel__top .search {
    position: relative;
}

.panel__top .search svg {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--menu-ink-3);
    pointer-events: none;
}

.panel__top .search input {
    width: 100%;
    height: 32px;
    border: 1px solid var(--menu-line-strong);
    border-radius: var(--menu-radius);
    padding: 0 10px 0 28px;
    font-size: 12.5px;
    color: var(--menu-ink-1);
    background: #fff;
    transition: border .16s, box-shadow .16s;
    outline: none;
}

.panel__top .search input::placeholder {
    color: var(--menu-ink-3);
}

.panel__top .search input:focus {
    border-color: var(--menu-brand);
    box-shadow: 0 0 0 3px rgba(59, 108, 240, .12);
}

/* 菜单树滚动区 */
.panel .menu {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px 16px;
}

.panel .menu::-webkit-scrollbar {
    width: 6px;
}

.panel .menu::-webkit-scrollbar-thumb {
    background: #e2e5ea;
    border-radius: 3px;
}

/* 底部收起按钮 */
.panel__foot {
    padding: 6px 10px;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
    border-top: 1px solid var(--menu-line);
}

.panel-collapse {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 7px;
    color: var(--menu-ink-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
    padding: 0;
}

.panel-collapse:hover {
    background: var(--menu-hover);
    color: var(--menu-ink-1);
}

.panel-collapse svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* ── nav 菜单树 ── */
.panel .nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* li 标签叶子节点需显式 flex（li 默认 list-item 不继承）*/
li.nav__link {
    display: flex !important;
    list-style: none;
}

.nav__link {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px;
    border-radius: var(--menu-radius);
    color: var(--menu-ink-2);
    cursor: pointer;
    position: relative;
    transition: background .15s, color .15s;
    user-select: none;
    text-decoration: none;
}

.nav__link:hover {
    background: var(--menu-hover);
    color: var(--menu-ink-1);
    text-decoration: none;
}

.nav__link .nav-txt {
    flex: 1;
    font-size: 13px; /* 默认≤10字;11-12字降到12px、≥13字降到11px(见--md/--sm),放不下仍省略号+hover看title */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
}

/* 纵向菜单按字数递进缩字:11-12字12px、≥13字11px,放不下仍省略号+hover title看全称 */
.nav__link .nav-txt.nav-txt--md {
    font-size: 12px;
}

.nav__link .nav-txt.nav-txt--sm {
    font-size: 11px;
}

.nav__link .nav-caret {
    width: 14px;
    height: 14px;
    color: var(--menu-ink-3);
    transition: transform .2s;
    flex-shrink: 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav__group.is-open > .nav__link .nav-caret {
    transform: rotate(90deg);
}

/* 子菜单折叠区 */
.nav__sub {
    display: none;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0;
    list-style: none;
    margin: 0;
}

.nav__group.is-open > .nav__sub {
    display: flex;
}

/* 层级缩进 */
.nav__link.lvl0 {
    padding-left: 22px;
    color: #374152;
    font-weight: 400;
}

.nav__link.lvl1 {
    padding-left: 38px;
    color: #374152;
    font-weight: 400;
}

.nav__link.lvl2 {
    padding-left: 54px;
    color: var(--menu-ink-2);
    font-weight: 400;
}

/* 激活态 */
.nav__link.is-active {
    background: var(--menu-brand-soft) !important;
    color: var(--menu-brand-text) !important;
    text-decoration: none;
}

.nav__link.is-active .nav-txt {
    color: var(--menu-brand-text);
    font-weight: 600;
}

.nav__link.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 0 3px 3px 0;
    background: var(--menu-brand);
}

/* panel 内 a.J_menuItem 重置为 block 撑满 nav__link */
.nav__link a.J_menuItem {
    display: contents;
    color: inherit;
    text-decoration: none;
}

.nav__link a.J_menuItem .nav-txt {
    flex: 1;
}

/* theme-clean 黑夜态下 panel 补暗色 */
body.theme-clean .panel {
    background: #1d1f36;
    border-right-color: #2e3050;
}

body.theme-clean .nav__link {
    color: #b0b8cc;
}

body.theme-clean .nav__link:hover {
    background: #252742;
    color: #e0e4f0;
}

body.theme-clean .nav__link.is-active {
    background: #1e2d5a !important;
    color: #739aff !important;
}

body.theme-clean .nav__link.is-active .nav-txt {
    color: #739aff;
}

body.theme-clean .nav__link.is-active::before {
    background: #739aff;
}

body.theme-clean .panel__top .search input {
    background: #252742;
    border-color: #3a3d60;
    color: #e0e4f0;
}

body.theme-clean .panel__foot {
    border-top-color: #2e3050;
}


/* ── rail 完全收起态（body.rail-hidden） ── */
body.rail-hidden #main-menu {
    width: 0 !important;
    overflow: visible !important;
}
body.rail-hidden #main-wrapper {
    padding-left: 0 !important;
}
body.rail-hidden #main-navbar {
    left: 0 !important;
    width: 100% !important;
}

/* ── rail 底部收起按钮 ── */
.rail__collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    cursor: pointer;
    color: rgba(255,255,255,0.6);
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.rail__collapse-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}
/* 菜单隐藏时箭头朝右（提示可展开） */
body.menu-hidden .rail__collapse-btn svg {
    transform: rotate(180deg);
}

/* ── 整体隐藏左侧菜单（rail + panel 全收）── */
body.menu-hidden #main-menu {
    width: 0 !important;
    overflow: hidden !important;
    transition: width 0.25s ease !important;
}
body.menu-hidden #main-wrapper {
    padding-left: 0 !important;
}
body.menu-hidden #main-navbar {
    left: 0 !important;
    width: 100% !important;
}

/* ── 顶栏展开按钮（菜单隐藏时显示，菜单显示时隐藏）── */
.panel-expand-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #555;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}
.panel-expand-btn:hover {
    color: var(--color-primary, #376AEA);
    background: rgba(55,106,234,0.08);
}
body.menu-hidden .panel-expand-btn {
    display: flex;
}

/* ── 移动端（<768px）：菜单默认收起，顶栏全宽，汉堡按钮恢复 ──
 * 必须放文件末尾，覆盖上面桌面端的 !important 规则 */
@media screen and (max-width: 767px) {
    /* 顶栏全宽，不偏移 */
    #main-navbar {
        left: 0 !important;
        width: 100% !important;
        transition: none !important;
    }

    /* 主内容区无左缩进 */
    #main-wrapper,
    body:not(.mmc) #main-wrapper,
    body.mmc #main-wrapper {
        padding-left: 0 !important;
    }

    /* 菜单默认隐藏在左侧屏幕外（移动端固定展示完整双栏宽度） */
    #main-menu,
    body:not(.mmc) #main-menu,
    body.mmc #main-menu {
        position: fixed !important;
        left: calc(-1 * (var(--rail-w) + var(--panel-w))) !important;
        top: 0 !important;
        height: 100% !important;
        z-index: 1050 !important;
        transition: left 0.25s ease !important;
        width: calc(var(--rail-w) + var(--panel-w)) !important;
    }

    /* body 加 .mobile-menu-open 时菜单滑入 */
    body.mobile-menu-open #main-menu {
        left: 0 !important;
    }

    /* 遮罩层（真实 DOM 元素，能覆盖 iframe） */
    #mobile-menu-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 1040;
    }
    body.mobile-menu-open #mobile-menu-overlay {
        display: block;
    }

    /* 恢复汉堡按钮 */
    #main-navbar .navbar-header .navbar-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 51px;
        padding: 0;
        background: transparent;
        border: none;
        color: #1f2733;
        font-size: 18px;
        cursor: pointer;
    }

    /* 企业名缩短，让出汉堡按钮空间 */
    #main-navbar .navbar-header .navbar-brand {
        max-width: 160px !important;
    }

    .theme-default #main-menu #left {
        width: 100% !important;
    }
}