@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Account/Pages/Login.razor.rz.scp.css */
body[b-ng0kb9o36r] {
    font-family: 'Montserrat', sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}


#login-bg.container-fluid[b-ng0kb9o36r] {
    padding: 0;
    height: 100%;
    position: absolute;
}

#login[b-ng0kb9o36r] {
    padding-top: 10%;
    text-align: center;
    text-transform: uppercase;
}


.login[b-ng0kb9o36r] {
    width: 100%;
    height: 620px;
    /*background-color: #fff;*/
    background-color: rgba(255, 255, 255, 0.8); /* 半透明白色 */
    position: relative;
    padding: 15px;
    padding-top: 30px;
}

    .login h1[b-ng0kb9o36r] {
        margin-top: 30px;
        font-weight: bold;
        font-size: 60px;
        letter-spacing: 3px;
    }

    .login form[b-ng0kb9o36r] {
        max-width: 420px;
        margin: 30px auto;
    }

    .login .btn[b-ng0kb9o36r] {
        border-radius: 50px;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 2px;
        font-size: 20px;
        padding: 14px;
        background-color: #0B6DC1;
    }
@media(max-width: 500px) {
    .bg-img[b-ng0kb9o36r], .bg-color[b-ng0kb9o36r] {
        min-width: 100%;
        height: 50%;
        margin: 0;
    }

    .forgot-password[b-ng0kb9o36r] {
        text-align: right;
        float: left;
        padding: 20px 0;
    }


    #login[b-ng0kb9o36r] {
        padding-top: 50px;
    }
}
/* /Components/Account/Shared/LoginLayout.razor.rz.scp.css */
.page[b-cyrfs91sik] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-cyrfs91sik] {
    flex: 1;
}

.sidebar[b-cyrfs91sik] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-cyrfs91sik] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-cyrfs91sik]  a, .top-row[b-cyrfs91sik]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-cyrfs91sik]  a:hover, .top-row[b-cyrfs91sik]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-cyrfs91sik]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-cyrfs91sik] {
        justify-content: space-between;
    }

    .top-row[b-cyrfs91sik]  a, .top-row[b-cyrfs91sik]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-cyrfs91sik] {
        flex-direction: row;
    }

    .sidebar[b-cyrfs91sik] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-cyrfs91sik] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-cyrfs91sik]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-cyrfs91sik], article[b-cyrfs91sik] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-cyrfs91sik] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-cyrfs91sik] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-qzmq23iwqw] {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* 应用式外壳：全局 `.page` 可能被其它样式改成 row（2026-10-28 浏览器 smoke 实测过），
   这里用双类选择器钉死“全宽 + 纵向”，⛔ 不要退回内联 style。 */
.page.app-shell[b-qzmq23iwqw] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

main[b-qzmq23iwqw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* 用 clip 而不是 hidden：hidden 会让另一轴被计算为 auto，从而形成滚动/裁剪盒，
       顶栏「更多」下拉菜单一旦超出顶栏高度就会被裁掉；clip 只裁横向、不建滚动盒，
       纵向保持可见。不支持 clip 的旧内核走下面的 @supports not 回退（等同原行为）。 */
    overflow-x: clip;
    overflow-y: visible;
}

@supports not (overflow: clip) {
    main[b-qzmq23iwqw] {
        overflow-x: hidden;
    }
}

article.content[b-qzmq23iwqw] {
    background-color: #f7f7f7;
    flex: 1;
    /* ⭐ 2026-10-11 加 `min-width: 0`：**页面出现横向滚动条的根因**。
       CSS flex 子项的初始值是 `min-width: auto` —— **不会收窄到内容固有宽度以下**。
       于是：页内宽内容（如 `/account/access-audit` 的权限矩阵表：25 角色 × 74px ≈ 2030px）
       把本子项撑到 2030px ⇒ `main` 跟着变宽 ⇒ 上面的 `overflow-x: clip` **只裁不滚**，
       溢出被推到 `body` ⇒ 浏览器出现**横向滚动条**；而 `.table-responsive` 的 `overflow-x:auto` 也因为
       父链没有“确定宽度”而**失效**。
       补上 `min-width: 0` 后，本子项恢复可收缩 ⇒ 宽表回到卡片内部自己滚动，页面不再变宽。
       ⚠ 这只是“允许收缩”，不会把窄内容拉宽，对其他页面无副作用。 */
    min-width: 0;
}

.sidebar[b-qzmq23iwqw] {
    /* 浅色侧栏（2026-10-10，对齐 D:\DataWebRS\halo-main 的 Halo 后台观感）：
       ⚠ 原来这里是 background-image: url('/assets/sidebar-bg.png')（438×2000 的**深蓝图**，平均亮度 65）
         —— 那才是"深色侧栏"的真正来源。改为白底 + 一条浅灰右分隔线。
       ⚠ sidebar-bg.png **文件保留不删**：StaticFileAuthorizationOrderGuardTests 把它登记在静态文件授权
         清单里（删文件会让那条守卫红）。要回退深色主题：把这一块换回上面那三行即可。 */
    background-color: #fff;
    border-right: 1px solid #e8eaed;
}

.top-row[b-qzmq23iwqw] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row-left[b-qzmq23iwqw]  .nav {
    padding-left: 0.25rem;
}

    .top-row[b-qzmq23iwqw]  a, .top-row[b-qzmq23iwqw]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

        .top-row[b-qzmq23iwqw]  a:hover, .top-row[b-qzmq23iwqw]  .btn-link:hover {
            text-decoration: underline;
        }

        .top-row[b-qzmq23iwqw]  a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

@media (max-width: 640.98px) {
    .top-row[b-qzmq23iwqw] {
        justify-content: space-between;
    }

        .top-row[b-qzmq23iwqw]  a, .top-row[b-qzmq23iwqw]  .btn-link {
            margin-left: 0;
        }
}

/* ══ 手机端导航（2026-10-13 按现场截图对齐）══════════════════════════════════════════
   现场问题（www.meshmi.com 手机截图）：
     ① 顶栏一行放不下 ⇒ 右侧账号簇被裁成 "serv…"（这一条最刺眼：用户连自己是谁都看不到）；
     ② ≤640px 时侧栏只是"堆在正文上方"，一屏里先看到整列菜单，正文被推到下面；
     ③ 触控目标偏小（`.nav-link py-1 px-2` ≈ 30px 高），手机上是"点不准"。
   对策（后台系统的通行做法，Odoo 手机端同样是左滑抽屉）：
     ① 顶栏拆成"左组可横滑 + 右组固定不收缩"，账号簇**永不**被挤出屏幕；
     ② 侧栏变抽屉（translateX + 遮罩 + 锁 body 滚动），正文全宽；
     ③ 粗指针设备把可点区域抬到 ≥44px（Apple HIG / Material 的最小触控尺寸）。
   ⚠ 断点取 767.98px：与 Bootstrap 的 `md` 一致（`d-none d-sm-inline` 那两处配套）。 */
@media (max-width: 767.98px) {
    /* ① 顶栏：左组可横滑、右组固定 */
    .top-row[b-qzmq23iwqw] {
        flex-wrap: nowrap;
        gap: .25rem;
        padding-left: .5rem !important;
        padding-right: .5rem !important;
        /* 刘海屏/挖孔屏：状态栏高度不计入 viewport（配合 App.razor 的 viewport-fit=cover） */
        padding-top: env(safe-area-inset-top);
        height: auto;
        min-height: 3.5rem;
    }

    .top-row-left[b-qzmq23iwqw] {
        flex: 1 1 auto;
        min-width: 0;                 /* 能收缩的前提；缺了它左组会把右组顶出去 */
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;        /* 手机上的横滑条只是噪音（仍可滑动） */
    }

        .top-row-left[b-qzmq23iwqw]::-webkit-scrollbar {
            display: none;
        }

    .top-row-right[b-qzmq23iwqw] {
        flex: 0 0 auto;               /* ⛔ 绝不收缩：账号簇必须完整可见 */
    }

    /* ② 侧栏抽屉 */
    .sidebar[b-qzmq23iwqw] {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(84vw, 320px);
        max-width: none !important;   /* 桌面折叠用的内联 maxWidth 别在手机上生效 */
        z-index: 1045;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: none;
    }

        .sidebar.show[b-qzmq23iwqw] {
            transform: translateX(0);
            box-shadow: 0 0 1.5rem rgba(0, 0, 0, .25);
        }

    .sidebar-backdrop[b-qzmq23iwqw] {
        display: none;
    }

        .sidebar-backdrop.show[b-qzmq23iwqw] {
            display: block;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .35);
            z-index: 1040;
        }

    /* ⚠ F7（2026-10-13 由独立审核抓出）：锁滚动那条**不能写在这里** ——
       scoped CSS 会把 `:global(...)` 原样编成 `:global(body.nav-drawer-open)[b-xxxx]`，
       而 `:global` 不是 CSS 选择器、body 也永远不会带上作用域属性 ⇒ 规则**从不生效**
       （手机端抽屉打开时背后的页面照旧能滚）。已挪到 `wwwroot/app.css`（非作用域）。 */

    /* ③ 正文给"底部安全区"留位（iPhone 的 home 指示条会盖住最后一行的操作按钮） */
    article.content[b-qzmq23iwqw] {
        padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
    }
}

/* 粗指针（手机/平板）：可点区域抬到 44px 起，避免"点不准" */
@media (pointer: coarse) and (max-width: 767.98px) {
    .top-row[b-qzmq23iwqw]  .nav-link,
    .top-row[b-qzmq23iwqw]  button.nav-link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .top-row[b-qzmq23iwqw]  .bi-justify {
        padding: .35rem .5rem;        /* 汉堡图标本身也要够大够好点 */
    }
}

@media (min-width: 641px) {
    .page[b-qzmq23iwqw] {
        flex-direction: row;
    }

    .sidebar[b-qzmq23iwqw] {
        width: 240px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-qzmq23iwqw] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth[b-qzmq23iwqw]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row[b-qzmq23iwqw], article[b-qzmq23iwqw] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-qzmq23iwqw] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-qzmq23iwqw] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-yb5e9jp9da],
.components-reconnect-repeated-attempt-visible[b-yb5e9jp9da],
.components-reconnect-failed-visible[b-yb5e9jp9da],
.components-pause-visible[b-yb5e9jp9da],
.components-resume-failed-visible[b-yb5e9jp9da],
.components-rejoining-animation[b-yb5e9jp9da] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-yb5e9jp9da],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-yb5e9jp9da],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-yb5e9jp9da],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-yb5e9jp9da],
#components-reconnect-modal.components-reconnect-retrying[b-yb5e9jp9da],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-yb5e9jp9da],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-yb5e9jp9da],
#components-reconnect-modal.components-reconnect-failed[b-yb5e9jp9da],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-yb5e9jp9da] {
    display: block;
}


#components-reconnect-modal[b-yb5e9jp9da] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-yb5e9jp9da 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-yb5e9jp9da 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-yb5e9jp9da 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-yb5e9jp9da]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-yb5e9jp9da 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-yb5e9jp9da {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-yb5e9jp9da {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-yb5e9jp9da {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-yb5e9jp9da] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-yb5e9jp9da] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-yb5e9jp9da] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-yb5e9jp9da] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-yb5e9jp9da] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-yb5e9jp9da] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-yb5e9jp9da] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-yb5e9jp9da 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-yb5e9jp9da] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-yb5e9jp9da {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/WebsitePages/WebsiteArticleView.razor.rz.scp.css */
/* ============================================================================
   WebsiteArticleView 的**全屏单栏**版面。

   ⚠ 这里**只做版面**：正文、标题、meta、标签、上下篇全部由共享组件
     `ArticleReadingView` 渲染，它有自己的 `ArticleReadingView.razor.css`（正文段落量度、
     阅读导航的两侧对开都在那里）。
     ⛔ 本文件不重写任何正文样式 —— 那会立刻产生"内外两副样子"的第二套口径。

   ★ 本批（全屏阅读页重做）：**本文件不再给任何宽度上限**。
     上一版在 `.article-view-single` 上写过"上限与居中由共享组件负责"，而现在共享组件
     自己也**没有上限**了（产品反馈："不够专业，应该是全屏"）⇒ 本页正文直接铺满
     `.container-fluid`，可读性只由共享组件的正文段落行宽（`.ql-editor`）兜底。

   ⚠ 历史（别把这段删了又加回来）：本页曾有一段"对外预览"右栏的样式
     （`.article-preview-*` 一族）。那一栏已按产品要求去掉（一页里出现两遍正文，
     且正文里的"公开地址"链接本来就是去看对外效果的入口），故这里**不再有**那些类。
     ⛔ 若将来又要加预览栏，请先想清楚"它和公开地址链接是不是同一件事的两个入口"。

   ⚠ 一条 `@media print` 规则都没有：本仓打印段只有 `app.css` 一处（严格守卫，
     见 `PrintScopePaperBindingGuardTests`）。
   ============================================================================ */

/* ── 全屏查看：页面级 chrome 只有顶部导航（本页挂 `WebsiteLayout`，它刻意不渲染 ERP 侧栏）。
      内容区吃满剩余高度，正文随整页滚动。 */
.article-view-page[b-xofm5ug7y5] {
    /* `100dvh` 而不是 `100vh`：移动端浏览器地址栏收起时 vh 不跟着变，会出现底部被裁。 */
    min-height: calc(100dvh - 3.5rem);
    padding-top: .5rem;
    padding-bottom: 1rem;
}

/* 顶部动作条：一行放"可见性 + 本页独有动作"，**不抢正文的视觉重心**。
   ★ 本批修正后的构成：左边至多一个「仅内部」徽章、右边至多一个「看对外页面」。
     ⛔ **状态与版本不在条里**：`ArticleReadingView` 的 meta 行已经渲染同一个
       `StatusLabel`，放两处就是同一屏说两遍（本批修掉的重复）。
     ⛔ **「去编辑」也不在条里**：阅读导航里那一个才是唯一入口（理由见 .razor 注释）。
   ⚠ 因此本块常常**整体不渲染**（公开 + 无对外地址时）⇒ 别把 `margin-bottom`
     写大：不渲染时上下间距由标题自己的 margin 决定，这里只负责"渲染时"的收尾。 */
.article-view-toolbar[b-xofm5ug7y5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .25rem .25rem .5rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    margin-bottom: 1.25rem;
}

/* 动作组推到最右：状态贴左、动作贴右（宽屏上不会出现"状态与按钮挤在一起"）。 */
.article-view-toolbar-actions[b-xofm5ug7y5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}
/* /Components/Shared/ArticleReadingView.razor.rz.scp.css */
/* ============================================================================
   ArticleReadingView 的**屏幕**排版（对齐 Halo 的"文章列"观感）。

   ★ 2026-10-17 口径：**一个定宽内容列，居中；页面上所有块共用这条左右边界**。

   为什么改（现场反馈原话："内容展示再优化一下，专业一些。左右对称"）：
     上一版是"阅读区铺满 + 正文限 80ch + 配图限 88vw"——
     标题、目录、正文、配图**四个宽度各不相同、全部贴左**，右半边一片空白
     ⇒ 观感既不专业、也明显不对称。定宽 + 同宽 + 居中三个动作一起做，才叫对称。

   ⚠ 打印：本文件**一条 `@media print` 都没有**，也不设置任何 `!important` 宽度。
     本仓 `@media print` 是严格守卫的（`PrintScopePaperBindingGuardTests` 钉着纸面宽只有
     `app.css` 一处来源）。A4 可印宽度约 794px < 96rem ⇒ 这条 `max-width` 在纸上不生效。
   ============================================================================ */

/* 正文外层：只负责"超宽内容不撑破布局"，⛔ 不设宽度上限。
   🔴 正文段落（`.ql-editor`）的排版**不在这里**：它是浏览器里由 Quill 生成的节点，
      不带组件作用域属性 ⇒ 写在本文件里的规则恒不命中。那一段在
      `wwwroot/website.css`（全局），⛔ 不要挪回来。 */
.article-reading-body > [data-article-prose][b-9akmdtrv01] {
    overflow-x: auto;
}

/* ★ 阅读区：**定宽 + 居中**（2026-10-17 现场反馈"专业一些，左右对称"）。
   口径只有一句：**整页只有一个内容列，且左右留白相等**。
   实现要点（⛔ 三点缺一不可，少一个就会重新变成"左边一列、右边一片空"）：
     ① 容器定宽居中（本规则）；
     ② 正文/标题/目录/配图**共用同一个宽度**（`wwwroot/website.css` 里文本量度
        与配图都改成 `100%`，目录取消自己的 `max-width`）；
     ③ 容器内不再出现第二个宽度值（上一版正文限 80ch、配图限 88vw ⇒ 三块宽度各不相同，
        全靠左贴 ⇒ 观感就是"不专业、不对称"）。

   🔴 **两个上限缺一不可**（2026-10-17 现场反馈"内容太靠边了"）：
     · `96rem`（1536px）＝ 宽屏上的**最大列宽**，再宽就不好读；
     · `100% - 6rem`     ＝ 窄窗口（或浏览器放大）时的**保底留白**，
       保证内容**永远不会顶到窗口边缘**：两侧各留 ≥3rem 外白 + 1.5rem 内边距。
     只写 `96rem` 时，窗口一旦窄于 1568px（很常见：非最大化窗口、125% 缩放），
     列就吃满整宽、内容贴边 —— 这正是那次反馈的成因。
     ⚠ 改宽窄只改 `96rem` 这个数，⛔ 不要再去动文本/配图的量度。 */
.article-reading[b-9akmdtrv01] {
    max-width: min(96rem, 100% - 6rem);
    margin-inline: auto;
    padding-inline: 1.5rem;
    /* ★ 2026-10-18 现场反馈"不要边框好看很多"：阅读页的容器一律**不画边框/底/阴影**。
       正文外的任何一圈线都会把"文章"变成"放在盒子里的表单"，与 Halo/Odoo 的文章页观感相反。
       ⚠ 这条是**兜底**：即使将来有人给外层加了 border，也会在下一次构建被这里压回 0。
       ⛔ 不要删掉去"试试是不是它起作用" —— 删了只会让边框回来。 */
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* ── 标题区 ───────────────────────────────────────────────────────────────── */
.article-reading-head[b-9akmdtrv01] {
    margin-bottom: 1.25rem;
}

.article-reading-title[b-9akmdtrv01] {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: .5rem;
    /* 中文长标题在窄屏上不许把布局撑破。 */
    overflow-wrap: anywhere;
}

.article-reading-summary[b-9akmdtrv01] {
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: .75rem;
}

.article-reading-meta[b-9akmdtrv01] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    font-size: .875rem;
    color: var(--bs-secondary-color, #6c757d);
}

.article-reading-meta-item[b-9akmdtrv01] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.article-reading-tags[b-9akmdtrv01] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .6rem;
}

.article-reading-tag[b-9akmdtrv01] {
    text-decoration: none;
}

.article-reading-tag:hover[b-9akmdtrv01] {
    text-decoration: underline;
}

/* ── 正文 ─────────────────────────────────────────────────────────────────── */
.article-reading-body[b-9akmdtrv01] {
    /* 与上方信息区同一左边界。 */
    margin-bottom: 1.5rem;
    /* 标题被锚点跳转时的定位留白（与 app.css 的 .markdown-body 同源做法）。 */
    scroll-margin-top: 5rem;

    /* ★ 2026-10-18 现场口径：正文块**只留上、下两条分隔线，不要左、右竖线**。
       理由：左右竖线会把正文"框"成一个卡片/表单；而上下两条线的作用是**分隔**
       （上面是标题与信息区、下面是阅读导航），这正是长文页的常规做法。
       ⚠ 显式写 `border-top` / `border-bottom` 而不是 `border-block`：
         本仓要兼容的浏览器范围里 `border-block` 的日志式行为不如分写直观，
         且分写能明确表达"左右为 0"这个意图。
       ⛔ 不要再加 `border-inline`（那就是回到"左右竖线"的老观感）。 */
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    border-inline: 0;
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
}

/* ── 未发布横幅（仅站内只读页给 `IsPublished=false`）─────────────────────────
   ★ 为什么用暖色底 + 左侧色条而不是一个灰底小字：它的职责是**拦住误读**
     （把草稿当成定稿、拿去截图或转发），所以要在视觉上"站得住"，
     但又不能像 `alert-danger` 那样喊"出错了"（草稿是正常状态，不是错误）。
     取 Bootstrap 的 warning 系（`#fff3cd` / `#664d03`），与 `alert-warning` 同族。
   ⚠ **刻意不加 `d-print-none`**（与"目录/上下篇"相反）：纸上的一张草稿比屏幕上更容易
     被当成定稿，状态横幅正是最该印出来的那一条。
   ⚠ 不写 `@media print`：本仓打印段的唯一出处是 `app.css`（文件头已声明）。 */
.article-reading-unpublished[b-9akmdtrv01] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
    padding: .6rem .85rem;
    border: 1px solid #ffe69c;
    border-left: 4px solid #ffc107;
    border-radius: .375rem;
    background-color: #fff3cd;
    color: #664d03;
    font-size: .9rem;
}

.article-reading-unpublished-link[b-9akmdtrv01] {
    color: inherit;
    text-decoration: underline;
    margin-inline-start: auto;   /* 推到右端：它是"退路"，不是正文 */
}

/* 图片响应式：正文里的图片一律不溢出容器（Halo 的 prose 也是这一条）。 */
.article-reading-body img[b-9akmdtrv01] {
    max-width: 100%;
    height: auto;
}

/* 表格/代码块：超宽时横向滚动，⛔ 不撑破页面。 */
.article-reading-body :is(table, pre)[b-9akmdtrv01] {
    max-width: 100%;
    overflow-x: auto;
}

/* 标题层级间距（正文里的 h2/h3… 由富文本带进来，这里只统一间距节奏）。 */
.article-reading-body :is(h2, h3, h4)[b-9akmdtrv01] {
    margin-top: 1.5rem;
    scroll-margin-top: 5rem;   /* 目录跳转时不被顶栏盖住 */
}

/* ── 目录（TOC）：由 wwwroot/js/article-toc.js 在浏览器里填充 ─────────────────
   ★ 2026-10-18：**去卡片化**。原先是"浅底 + 圆角 + 1px 边框"的卡片，实测在一屏白底正文里
     它比正文更抢眼（读者第一眼看到的是一个盒子，而不是文章），且与"阅读页不要边框"的口径冲突。
     现在只剩**缩进列表 + 小一号灰字**：目录是导航辅助，不是独立模块。
   ★ 与正文**同宽**：所有块的左右边界必须是一条竖线（理由见文件头）。
   ⚠ 只在有标题可跳转时才出现（脚本找不到标题就保持 `hidden`，不留空框）。 */
.article-reading-toc[b-9akmdtrv01] {
    margin-top: 1rem;
    margin-bottom: .25rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: .875rem;
    max-width: 100%;
}

.article-reading-toc[hidden][b-9akmdtrv01] {
    display: none;
}

.article-reading-toc ol[b-9akmdtrv01] {
    margin: 0;
    padding-left: 1.25rem;
}

.article-reading-toc a[b-9akmdtrv01] {
    text-decoration: none;
}

.article-reading-toc a:hover[b-9akmdtrv01] {
    text-decoration: underline;
}

/* ── 底部导航：**左「上一篇」/ 右「下一篇」**，动作单独一行且低调 ──────────────
   ★ 本批（阅读导航重做）：
     · 两侧对开（`space-between`），阅读方向一目了然；
     · 动作行**居中且是 `btn-link`**（见 .razor 里的注释）—— 阅读页的主视觉是正文。
   ⚠ 缺位占位 `.article-reading-nav-slot` 只占位不可见：不这样做的话，单侧缺席时
     `space-between` 会把剩下的那一条顶到对面去（"下一篇"跑到左边）。 */
.article-reading-nav[b-9akmdtrv01] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.25rem;
    /* ⛔ 不再画 `border-top`：正文块已有下边框，两条线叠在一起就是"双线"。 */
    padding-top: 0;
}

.article-reading-nav-sides[b-9akmdtrv01] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.article-reading-nav-link[b-9akmdtrv01] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    /* 宽屏上标题不铺满整条（否则"上一篇 / 下一篇"会隔着半个屏幕，读起来像两段孤立文字）；
       上限按可读长度取，窄屏靠 `min()` 自动让位。 */
    max-width: min(24rem, 45%);
    text-decoration: none;
}

/* 占位：与真实链接同宽域，但不可见、不吃 hover/焦点。 */
.article-reading-nav-slot[b-9akmdtrv01] {
    visibility: hidden;
}

.article-reading-nav-link--next[b-9akmdtrv01] {
    text-align: end;
    align-items: flex-end;
}

.article-reading-nav-link:hover .article-reading-nav-title[b-9akmdtrv01] {
    text-decoration: underline;
}

.article-reading-nav-label[b-9akmdtrv01] {
    font-size: .75rem;
    color: var(--bs-secondary-color, #6c757d);
}

.article-reading-nav-title[b-9akmdtrv01] {
    font-weight: 500;
}

/* 动作行：居中、低调（`btn-link` 的配色由 Bootstrap 给）。 */
.article-reading-nav-actions[b-9akmdtrv01] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem .5rem;
}

/* 窄屏：两侧改成上下堆叠（否则两条标题在手机宽度上会互相挤压）。 */
@media screen and (max-width: 575.98px) {
    .article-reading-nav-sides[b-9akmdtrv01] {
        flex-direction: column;
        align-items: stretch;
    }

    .article-reading-nav-link[b-9akmdtrv01],
    .article-reading-nav-link--next[b-9akmdtrv01] {
        max-width: 100%;
        align-items: flex-start;
        text-align: start;
    }

    /* 窄屏单列时不需要占位撑开（`space-between` 已不生效）。 */
    .article-reading-nav-slot[b-9akmdtrv01] {
        display: none;
    }
}

/* 窄屏：目录量度自动让位给容器宽（否则窄屏上会出现横向滚动）。
   ⚠ 正文外层已无上限（见文件头）⇒ 这里只需要管目录。 */
@media screen and (max-width: 575.98px) {
    .article-reading-toc[b-9akmdtrv01] {
        max-width: 100%;
    }
}
/* /Components/Shared/EmployeePicker.razor.rz.scp.css */
/* 人员选择器的提示文案：**单行 + 超长省略**，只在真正有信息时出现（见 .razor 的 UpdateHint）。
   设计权衡（改样式前必读）：
   ① 控件只有一个尺寸（正常尺寸，见 .razor 的布局契约），提示字号相应地只有一档 0.8125rem——
      与 .form-text（0.875em）接近；不再按宿主分档，避免"同一控件在不同页面高矮/字号不一"。
   ② 曾考虑把提示 `position:absolute; top:100%` 移出文档流（彻底不影响布局），但**放弃了**：
      表格页的 picker 位于 Bootstrap `.table-responsive`（overflow-x:auto）内，
      按 CSS 规范另一轴的 visible 会被计算成 auto，于是绝对定位到行外的提示会被容器裁掉，
      或压在下一条工序的文字上。稳妥做法是留在文档流里、只占一行、且无事时不渲染。
   ③ 颜色由 .razor 传入（text-success / text-warning / text-muted），此处不写死。 */
.employee-picker-hint[b-17zq69u23i] {
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    /* 提示不该抢走点击（例如表格里紧邻的下拉/按钮） */
    pointer-events: none;
}