/*!
 * 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);
}

/* 区标题下面那行小字（原型 .secondary-kicker）。
   admin_menu 没有这个字段，文案由 bootstrap.php 从 PrototypePageCatalog 带到前端后插进来，
   插成功的面板会被打上 .has-kicker——此时分隔线要从标题挪到副标题下面，
   否则会在标题和副标题之间横一条线，把原本一整块的页头切成两段。 */
body.gex-proto-nav .sub-menu-item.has-kicker > h4 {
    padding-bottom: 0 !important;
    border-bottom: 0;
}

/* 原型 .secondary-kicker 实测：12px / 400 / rgb(102,121,140) / line-height 18px /
   margin-top 2px，整块 .secondary-head 的内边距是 25px 22px 16px。 */
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 10px;
}

/* ===========================================================================
   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));
}

/* 窄屏：面板收起，只留图标栏。原型 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;
}