/*!
 * GEX 后台侧边栏 · 向 V6 原型靠拢
 * ---------------------------------------------------------------------------
 * 目标（用户 2026-09-10 提的）：
 *   1. 点一级 → 二级和三级**全部展开**，不用再点二级才看到三级
 *   2. 二级变成"分组标题"的样子（灰色小标题），不是可点的下拉
 *   3. 视觉尽量贴近原型
 *
 * ## 为什么纯 CSS + 一小段 JS 就够
 *
 * canbez.dcat-theme 渲染出来的结构，其实已经跟原型的双栏几乎一样：
 *
 *   <aside class="side-scroll">            ← 原型的 .primary-nav（图标栏）
 *     <li class="side-nav-item"><a data-id="90">财务</a>
 *   <aside class="sub-menu">               ← 原型的 .secondary-nav（面板）
 *     <div class="sub-menu-item" data-sub-id="90">
 *       <h4>财务</h4>                       ← 原型的 .secondary-title
 *       <li class="has-treeview sub-item">  ← 原型的 .secondary-label（分组）
 *         <ul class="nav-treeview">         ← 原型的 .secondary-item（页面）
 *
 * **三级本来就全在 DOM 里**，只是被 .nav-treeview{display:none} 折叠了。
 * 所以不用改后端、不用改扩展，覆盖样式 + 阻止折叠即可。
 *
 * ## 约定
 * - 只在 body.gex-proto-nav 作用域内生效，出问题去 bootstrap.php 摘一行就回滚
 * - 色值全部取自原型 dist/styles.css，不做"差不多"的近似
 */

body.gex-proto-nav {
    --gxn-navy-950: #061827;
    --gxn-navy-900: #0b2237;
    --gxn-blue-700: #1769d2;
    --gxn-blue-600: #2379e7;
    --gxn-blue-100: #eaf3ff;
    --gxn-ink: #152b3e;
    --gxn-muted: #66798c;
    --gxn-line: #dce5ed;
    /* 原型：--sidebar-primary 88px / --sidebar-secondary 272px */
    --gxn-rail: 88px;
    --gxn-panel: 272px;
}

/* ===========================================================================
   0. 先把外层容器放宽
   dcat 的 .main-sidebar 默认 260px，而我们要 88（图标栏）+ 272（面板）= 360。
   不放宽的话面板会被 overflow 裁掉——表现成"点了一级右边还是空白"，
   看起来像 JS 没生效，实际是被容器切了。2026-09-10 实测踩到。
   =========================================================================== */
body.gex-proto-nav .main-sidebar,
body.gex-proto-nav .main-sidebar .sidebar,
body.gex-proto-nav .nav-sidebar {
    width: calc(var(--gxn-rail) + var(--gxn-panel)) !important;
    max-width: none !important;
}

/* 两栏并排，谁都不许被压缩 */
body.gex-proto-nav .side-scroll,
body.gex-proto-nav .sub-menu {
    flex: 0 0 auto;
}

/* ===========================================================================
   1. 一级：图标栏
   原型是 88px 宽、深墨蓝渐变、图标在上文字在下。
   =========================================================================== */
body.gex-proto-nav .side-scroll {
    width: var(--gxn-rail) !important;
    background: linear-gradient(180deg, var(--gxn-navy-950) 0%, #07253b 100%);
    border-right: 1px solid rgba(255, 255, 255, .06);
}

body.gex-proto-nav .side-nav-item > .side-nav-link {
    display: flex;
    flex-direction: column;      /* 原型是图标在上、文字在下 */
    align-items: center;
    gap: 4px;
    min-height: 61px;
    padding: 10px 5px 9px !important;
    font-size: 12px;
    line-height: 1.2;
    transition: .18s ease;
    /* 原型未选中态是 #d9e5ee 不是纯白；dcat 全局有 letter-spacing .14px 要收回 */
    color: #d9e5ee !important;
    letter-spacing: normal;
}

body.gex-proto-nav .side-nav-item > .side-nav-link p {
    color: inherit;
    letter-spacing: normal;
}

body.gex-proto-nav .side-nav-item > .side-nav-link i {
    font-size: 20px;
    margin: 0;
}

body.gex-proto-nav .side-nav-item > .side-nav-link p {
    margin: 0;
    max-width: 78px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

body.gex-proto-nav .side-nav-item > .side-nav-link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

/* 原型选中态是实心蓝，不是浅蓝底 */
body.gex-proto-nav .side-nav-link.side-nav-active,
body.gex-proto-nav .side-nav-link.side-nav-active p {
    background: var(--gxn-blue-600) !important;
    color: #fff !important;
}

/* ===========================================================================
   2. 二级面板
   =========================================================================== */
body.gex-proto-nav .sub-menu {
    /* 主题原来是 calc(100% - 75px)，跟着容器变。我们要固定 272，跟原型一致。 */
    width: var(--gxn-panel) !important;
    background: #fff;
    border-right: 1px solid var(--gxn-line);
}

/* 区标题：原型 .secondary-title 是 22px/780，下面一条分隔线 */
body.gex-proto-nav .sub-menu-item h4 {
    font-size: 22px !important;
    font-weight: 780;
    letter-spacing: -.02em;
    color: var(--gxn-ink);
    padding: 25px 22px 16px !important;
    border-bottom: 1px solid var(--gxn-line);
}

body.gex-proto-nav .sub-menu-item.has-kicker > h4 {
    padding-bottom: 0 !important;
    border-bottom: 0;
}

body.gex-proto-nav .sub-menu-item > .gxn-kicker {
    margin-top: 2px;
    padding: 0 22px 16px;
    border-bottom: 1px solid var(--gxn-line);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--gxn-muted);
    letter-spacing: normal;
}

body.gex-proto-nav .sub-menu-item {
    /* 浏览器会在左下角覆盖显示链接地址，末尾留白让最后一项能滚到它上方。 */
    padding: 0 10px 64px;
}

/* ===========================================================================
   3. ★二级 = 分组标题（原型 .secondary-label）
   现在它是个可点的下拉，原型里是不可点的小标题。
   =========================================================================== */
body.gex-proto-nav .sub-item.has-treeview > a.sub-link {
    padding: 15px 13px 5px !important;
    color: #7c8c9c;
    font-size: 12px;
    font-weight: 760;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: none !important;
    cursor: default;             /* 不是链接，别给手型 */
    pointer-events: none;        /* 点它不再折叠——三级永远展开 */
}

/* 去掉分组自己的图标和那个展开箭头——它已经不折叠了，留着是误导。
   fa-angle-left 有更高优先级的规则（dcat 的 treeview），必须 !important。 */
body.gex-proto-nav .sub-item.has-treeview > a.sub-link i,
body.gex-proto-nav .sub-item.has-treeview > a.sub-link > i.fa-angle-left {
    display: none !important;
}

/* dcat 的侧栏折叠态会把 .nav-link 的 font-size 压成 0 来藏文字，
   优先级比我们高，不加 !important 的话分组标题会渲染成"看不见的空行"
   （2026-09-10 实测：文字在 DOM 里，computed font-size 是 0px）。 */
body.gex-proto-nav .sub-menu-item .sub-item.has-treeview > a.sub-link,
body.gex-proto-nav .sub-menu-item .sub-item.has-treeview > a.sub-link p,
body.gex-proto-nav .sub-menu-item .sub-item.has-treeview > a.sub-link span {
    font-size: 12px !important;
    color: #7c8c9c !important;
    line-height: 1.4;
    letter-spacing: .06em;
}

/* 分组行不要 42px 的高度和内边距——它是标题不是按钮 */
body.gex-proto-nav .main-sidebar .sub-item.has-treeview > a.sub-link {
    min-height: 0 !important;
    padding: 15px 13px 5px !important;
}

/* ===========================================================================
   4. ★三级永远展开（原型是点一级就全部露出来）
   主题的 JS 会给非当前项设 display:none，这里用 !important 压过去。
   =========================================================================== */
body.gex-proto-nav .sub-menu-item .nav-treeview {
    display: block !important;
    padding-left: 0;
}

/* 三级条目 = 原型 .secondary-item */
body.gex-proto-nav .sub-menu-item .nav-item > a.sub-link {
    border-radius: 9px;
    color: #41566a;
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 9px 12px !important;
    /* 原型条目之间有 2px 上下外边距（行距 42+4=46）。不加 !important 压不住主题的
       .nav-sidebar .nav-link{margin:0}，实测算出来是 0，条目会挤在一起比原型密一圈。 */
    margin: 2px 0 !important;
}

/* 同上，字号要压过 dcat 折叠态的 font-size:0。
   ⚠️ 只能选 .nav-treeview 底下的：分组那一行 <li> 同时带 nav-item 和 sub-item 两个类，
   写成 .nav-item > a 的话会连分组一起吃掉，把 12px 的分组标题顶成 14px
   （两条规则特异性相同，后写的赢）。2026-09-10 实测踩到。 */
body.gex-proto-nav .sub-menu-item .nav-treeview .nav-item > a.sub-link,
body.gex-proto-nav .sub-menu-item .nav-treeview .nav-item > a.sub-link p,
body.gex-proto-nav .sub-menu-item .nav-treeview .nav-item > a.sub-link span {
    font-size: 14px !important;
    letter-spacing: normal;
}

/* 主题写死了 .main-sidebar .nav-treeview.nav .nav-item .nav-link{padding:14px!important}，
   会把三级缩进成 48px。原型是 9px 12px，必须同等强度压回来。 */
body.gex-proto-nav .main-sidebar .nav-treeview.nav .nav-item > a.sub-link {
    padding: 9px 12px !important;
}

/* 三级的左缩进 48px 来自 adminlte 给 .nav-treeview 的 3rem，它那条 !important
   比我能写的任何选择器都强（试过三轮：加 .nav-link、加 .main-sidebar 都压不住）。
   与其继续堆特异性，不如换个作用点——用负 margin 把整块拉回来，
   再由 a 自己的 padding-left 决定实际缩进。原型里三级跟分组标题左对齐。 */
body.gex-proto-nav .sub-menu-item .nav-treeview {
    margin-left: -36px;
}

body.gex-proto-nav .main-sidebar .nav-treeview.nav .nav-item > a.sub-link.nav-link {
    padding-left: 48px !important;   /* 48 - 36 = 实际左边距 12，跟原型一致 */
}

body.gex-proto-nav .main-sidebar .sub-item.has-treeview > a.sub-link.nav-link {
    padding-left: 13px !important;
}

body.gex-proto-nav .sub-menu-item .nav-item > a.sub-link:hover {
    background: #f1f5f8 !important;
    color: var(--gxn-ink) !important;
}

body.gex-proto-nav .sub-menu-item .nav-item > a.sub-link.sub-active,
body.gex-proto-nav .sub-menu-item .nav-item > a.sub-link.active {
    background: var(--gxn-blue-100) !important;
    color: var(--gxn-blue-700) !important;
    font-weight: 750;
}

/* 三级里的图标原型没有，留着会把文字挤歪 */
body.gex-proto-nav .sub-menu-item .nav-treeview .nav-item > a.sub-link i {
    display: none;
}

/* ===========================================================================
   5. 内容区跟着新的侧栏宽度让位
   =========================================================================== */
body.gex-proto-nav .content-wrapper,
body.gex-proto-nav .main-footer,
body.gex-proto-nav .main-header {
    margin-left: calc(var(--gxn-rail) + var(--gxn-panel));
}

/* Dcat 顶栏实际使用 .header-navbar.fixed-top 的 left，不是 .main-header。 */
@media (min-width: 992px) {
    body.gex-proto-nav .header-navbar.fixed-top {
        left: calc(var(--gxn-rail) + var(--gxn-panel)) !important;
    }
}

/* 桌面端点击正文或当前一级图标后，只保留左侧图标栏。 */
@media (min-width: 992px) {
    body.gex-proto-nav.gex-nav-collapsed .main-sidebar,
    body.gex-proto-nav.gex-nav-collapsed .main-sidebar .sidebar,
    body.gex-proto-nav.gex-nav-collapsed .nav-sidebar {
        width: var(--gxn-rail) !important;
    }

    body.gex-proto-nav.gex-nav-collapsed .sub-menu {
        display: none !important;
    }

    body.gex-proto-nav.gex-nav-collapsed .header-navbar.fixed-top {
        left: var(--gxn-rail) !important;
    }

    body.gex-proto-nav.gex-nav-collapsed .content-wrapper,
    body.gex-proto-nav.gex-nav-collapsed .main-footer,
    body.gex-proto-nav.gex-nav-collapsed .main-header {
        margin-left: var(--gxn-rail) !important;
    }
}

/* 窄屏：面板收起，只留图标栏。原型 620px 以下也是这么处理的。 */
@media (max-width: 900px) {
    body.gex-proto-nav .sub-menu { width: 200px; }
    body.gex-proto-nav .content-wrapper,
    body.gex-proto-nav .main-footer,
    body.gex-proto-nav .main-header {
        margin-left: calc(var(--gxn-rail) + 200px);
    }
}

/* ===========================================================================
   6. （待开发）菜单的样式
   规则：原型有、我们还没做的页面，菜单先建出来标（待开发），指向统一说明页。

   ⚠️ 这里只调灰，**不加 ::after 徽章**：用户要求"菜单后面写（待开发）"，
   这四个字已经写在 admin_menu.title 里了（见 PrototypePageCatalog::PENDING_SUFFIX）。
   再用伪元素补一个就会变成「XX（待开发）待开发」。
   =========================================================================== */
body.gex-proto-nav .sub-menu-item .nav-item > a.sub-link[href*="/coming-soon"],
body.gex-proto-nav .sub-menu-item .nav-item > a.sub-link[href*="/coming-soon"] p,
body.gex-proto-nav .sub-menu-item .nav-item > a.sub-link[href*="/coming-soon"] span {
    color: #97a6b4 !important;
}

/* 选中态还是要看得清，不能连当前页都是灰的 */
body.gex-proto-nav .sub-menu-item .nav-item > a.sub-link[href*="/coming-soon"].sub-active,
body.gex-proto-nav .sub-menu-item .nav-item > a.sub-link[href*="/coming-soon"].sub-active p,
body.gex-proto-nav .sub-menu-item .nav-item > a.sub-link[href*="/coming-soon"].active {
    color: var(--gxn-blue-700) !important;
}

/* ===========================================================================
   7. 三级分组（2026-10-01，GEXFI财务下的「资金账户」「汇率管理」）
   主题原来画第三层分组时丢掉标题、子项平铺；覆盖模板后（resources/views/vendor/canbez.dcat-theme/sub-menu.blade.php）
   它是嵌在上一级列表里的一个 .has-treeview。标题按分组样式但更靠里，子项再缩进一级。
   上面「三级条目」的规则对它同样生效（它也是 .nav-item），所以这里同等或更强地压回来，写在文件末尾。
   =========================================================================== */
body.gex-proto-nav .main-sidebar .nav-treeview .sub-item.has-treeview > a.sub-link.nav-link {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 12px 2px 48px !important;   /* 48 - 36 = 实际左边距 12，与同级条目对齐 */
}
body.gex-proto-nav .sub-menu-item .nav-treeview .sub-item.has-treeview > a.sub-link,
body.gex-proto-nav .sub-menu-item .nav-treeview .sub-item.has-treeview > a.sub-link p,
body.gex-proto-nav .sub-menu-item .nav-treeview .sub-item.has-treeview > a.sub-link span {
    font-size: 12px !important;
    font-weight: 650;
    color: #93a1ae !important;
    letter-spacing: .04em;
    background: none !important;
}
body.gex-proto-nav .sub-menu-item .nav-treeview .nav-treeview {
    margin-left: 0;
}
body.gex-proto-nav .main-sidebar .nav-treeview .nav-treeview.nav .nav-item > a.sub-link.nav-link {
    padding-left: 60px !important;            /* 再往里 12px */
}

/* 不可点击的分类标题：左侧品牌色条标识分组。 */
body.gex-proto-nav .sub-menu-item > .sub-item.has-treeview > a.sub-link.nav-link,
body.gex-proto-nav .sub-menu-item .nav-treeview .sub-item.has-treeview > a.sub-link.nav-link {
    position: relative;
    min-height: 0 !important;
    margin-top: 24px !important;
    margin-right: 2px !important;
    margin-bottom: 8px !important;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    cursor: default;
    pointer-events: none;
}

body.gex-proto-nav .sub-menu-item > .sub-item.has-treeview > a.sub-link.nav-link::before,
body.gex-proto-nav .sub-menu-item .nav-treeview .sub-item.has-treeview > a.sub-link.nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 12px;
    transform: translateY(-50%);
    border-radius: 2px;
    background: #2563eb;
}

body.gex-proto-nav .main-sidebar .sub-menu-item > .sub-item.has-treeview > a.sub-link.nav-link {
    margin-left: 16px !important;
    padding: 6px 8px !important;
}

body.gex-proto-nav .main-sidebar .sub-menu-item .nav-treeview .sub-item.has-treeview > a.sub-link.nav-link {
    margin-left: 52px !important; /* 抵消上层列表的负边距，色条实际位于 16px */
    padding: 6px 8px !important;
}

body.gex-proto-nav .sub-menu-item .sub-item.has-treeview > a.sub-link,
body.gex-proto-nav .sub-menu-item .sub-item.has-treeview > a.sub-link p,
body.gex-proto-nav .sub-menu-item .sub-item.has-treeview > a.sub-link span {
    color: #8c92a4 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    letter-spacing: .5px;
    text-transform: none;
}

body.gex-proto-nav .sub-menu-item .nav-treeview .sub-item.has-treeview > a.sub-link,
body.gex-proto-nav .sub-menu-item .nav-treeview .sub-item.has-treeview > a.sub-link p,
body.gex-proto-nav .sub-menu-item .nav-treeview .sub-item.has-treeview > a.sub-link span {
    color: #8c92a4 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    letter-spacing: .5px;
}

/* 可点击的子菜单与分类标题文字对齐，保持常规字重和清晰的深灰色。 */
body.gex-proto-nav .sub-menu-item .nav-item:not(.has-treeview) > a.sub-link,
body.gex-proto-nav .sub-menu-item .nav-item:not(.has-treeview) > a.sub-link p,
body.gex-proto-nav .sub-menu-item .nav-item:not(.has-treeview) > a.sub-link span {
    color: #334155 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

body.gex-proto-nav .main-sidebar .sub-menu-item > .nav-item:not(.has-treeview) > a.sub-link.nav-link {
    padding-left: 24px !important;
}

body.gex-proto-nav .main-sidebar .sub-menu-item > .sub-item.has-treeview > .nav-treeview.nav > .nav-item:not(.has-treeview) > a.sub-link.nav-link {
    padding-left: 36px !important; /* 比分类标题略靠右，避免子菜单缩进过深 */
}

body.gex-proto-nav .sub-menu-item .nav-item:not(.has-treeview) > a.sub-link:hover,
body.gex-proto-nav .sub-menu-item .nav-item:not(.has-treeview) > a.sub-link:hover p,
body.gex-proto-nav .sub-menu-item .nav-item:not(.has-treeview) > a.sub-link:hover span {
    color: #1e293b !important;
}

body.gex-proto-nav .sub-menu-item .nav-item:not(.has-treeview) > a.sub-link.sub-active,
body.gex-proto-nav .sub-menu-item .nav-item:not(.has-treeview) > a.sub-link.sub-active p,
body.gex-proto-nav .sub-menu-item .nav-item:not(.has-treeview) > a.sub-link.sub-active span,
body.gex-proto-nav .sub-menu-item .nav-item:not(.has-treeview) > a.sub-link.active,
body.gex-proto-nav .sub-menu-item .nav-item:not(.has-treeview) > a.sub-link.active p,
body.gex-proto-nav .sub-menu-item .nav-item:not(.has-treeview) > a.sub-link.active span {
    color: var(--gxn-blue-700) !important;
}

body.gex-proto-nav .sub-menu-item .nav-item:not(.has-treeview) > a.sub-link[href*="/coming-soon"]:not(.active):not(.sub-active),
body.gex-proto-nav .sub-menu-item .nav-item:not(.has-treeview) > a.sub-link[href*="/coming-soon"]:not(.active):not(.sub-active) p,
body.gex-proto-nav .sub-menu-item .nav-item:not(.has-treeview) > a.sub-link[href*="/coming-soon"]:not(.active):not(.sub-active) span {
    color: #97a6b4 !important;
}