/* 2026-10-18（perf/观感）：这条规则是给 Dash 的「回调等待转圈」写的，但它连着把 app.py 里那段
   首屏骨架（#preboot-fallback，class 也叫 _dash-loading）一起命中了 —— 骨架被挤成 218px 宽、
   固定在屏幕中间，还把 loading.webp 拉伸成它的背景，于是冷开那 0.6~1.2 秒里用户看到的是一条
   中间竖条＋转圈，而不是设计好的整屏骨架。用 :not(#preboot-fallback) 把骨架排出去：
   骨架按它自己的内联样式（整屏、侧栏 256px ＋ 顶栏 48px ＋ 正文）渲染，真·Dash 转圈样式不变。 */
._dash-loading:not(#preboot-fallback) {
    color: transparent;
    position: fixed;
    width: calc(544px / 2.5);
    height: calc(408px / 2.5);
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    background-image: url("/assets/imgs/loading.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* 骨架自己：整屏、不要转圈图、也不要被定位规则带走 */
#preboot-fallback {
    position: static;
    width: auto;
    height: auto;
    background-image: none;
}

._dash-loading::after {
    content: '';
}

#login-form-container .ant-card-head-wrapper {
    text-align: center;
}

#login-form-container .ant-card-head-title {
    font-size: 26px !important;
    font-weight: bold;
}

/*滚动条自定义样式*/
*::-webkit-scrollbar-thumb {
    background-color: #bfbfbf;
    outline: none;
    border-radius: 6px;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/*火狐浏览器*/
* {
    scrollbar-width: thin;
}
/* 表格列宽自适应：允许卡片内的表格组件收缩，配合 tableLayout=auto 与表体横向滚动 */
.ant-card-body > .ant-spin-nested-loading {
  min-width: 0;
}
.ant-card-body > .ant-spin-nested-loading .ant-spin-container {
  min-width: 0;
}

/* ============================================================
   UI 优化 2026-09-30：全局视觉规范（圆角 / 阴影 / 留白 / 悬停反馈）
   ============================================================ */

/* --- 基础 --- */
body {
    background-color: #f5f7fa;
    -webkit-font-smoothing: antialiased;
}

/* --- 按钮 --- */
.ant-btn {
    border-radius: 6px;
    transition: all 0.2s ease;
}
.ant-btn-primary:not(.ant-btn-dangerous) {
    box-shadow: 0 2px 6px rgba(24, 144, 255, 0.25);
}
.ant-btn-primary:not(.ant-btn-dangerous):hover {
    box-shadow: 0 4px 10px rgba(24, 144, 255, 0.35);
}

/* --- 卡片 --- */
.ant-card {
    border-radius: 12px;
    transition: box-shadow 0.2s ease;
}
.ant-card-bordered {
    border-color: #eef1f6;
}
.ant-card:hover {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

/* --- 表格 --- */
.ant-table {
    border-radius: 10px;
}
.ant-table-thead > tr > th {
    background: #f7f9fc;
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
}
.ant-table-tbody > tr:nth-child(even) > td {
    background: #fbfcfe;
}
.ant-table-tbody > tr:hover > td {
    background: #eff6ff !important;
}
.ant-pagination {
    padding: 0 8px;
}

/* --- 侧边菜单：选中/悬停圆角化 --- */
#side-menu .ant-menu-item,
#side-menu .ant-menu-submenu-title {
    border-radius: 8px;
    margin-inline: 8px;
    width: calc(100% - 16px);
    transition: background 0.2s ease;
}
#side-menu .ant-menu-sub.ant-menu-inline {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* --- 头部 --- */
.header-search-hint kbd {
    margin: 0 2px;
    padding: 1px 7px;
    border-radius: 5px;
    background: #f5f6f8;
    border-color: #e5e9f0;
    color: #64748b;
    box-shadow: none;
    font-size: 12px;
}
.ant-breadcrumb {
    font-size: 13px;
}

/* --- 输入控件 --- */
.ant-input,
.ant-select-selector,
.ant-input-number {
    border-radius: 6px !important;
}

/* --- 弹层 --- */
.ant-modal-content {
    border-radius: 12px;
}
.ant-drawer-content-wrapper .ant-drawer-content {
    border-radius: 10px 0 0 10px;
}
.ant-drawer-header {
    border-bottom-color: #f0f2f7;
}

/* --- 统计数值 --- */
.ant-statistic-content-value {
    font-weight: 600;
}

/* --- 登录页 --- */
#login-form-container .ant-card {
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
}
#login-form-container .ant-btn {
    border-radius: 8px;
}

/* --- 滚动条悬停 --- */
*::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

/* --- Markdown 渲染浅色化（FefferyMarkdown 默认注入 GitHub 深色主题） --- */
.markdown-body {
    background-color: #ffffff !important;
    color: #24292f !important;
}
.markdown-body h1,
.markdown-body h2 {
    border-bottom-color: #e8ebf0 !important;
}
.markdown-body a {
    color: #0969da !important;
}
.markdown-body table tr {
    background-color: #ffffff !important;
}
.markdown-body table tr:nth-child(2n) {
    background-color: #f6f8fa !important;
}
.markdown-body table td,
.markdown-body table th {
    border-color: #d8dee4 !important;
    color: #24292f !important;
}
.markdown-body blockquote {
    color: #57606a !important;
    border-left-color: #d0d7de !important;
}
.markdown-body pre {
    background-color: #f6f8fa !important;
}
.markdown-body code {
    background-color: rgba(175, 184, 193, 0.2) !important;
    color: #24292f !important;
}

/* --- 隐藏无标题卡片渲染出的空头部（统一消除卡片顶部空白） --- */
.ant-card-head:not(:has(.ant-card-head-title)) {
    display: none !important;
}

/* --- dcc.Graph 在 flex 卡片体内宽度塌陷修复 --- */
.dash-graph {
    width: 100%;
    min-width: 0;
}

/* --- 首屏正文骨架（TC-20261015-18 A2②；2026-10-15 去文案） ---
   外壳上屏了、正文还没画出来那 1~2 秒（@杠精 1.2Mbps 实测最长 1.6 秒连续空帧），
   正文区里得露出骨架；正文一进 DOM（.dfo-page）就被下面这条自动收走 ——
   纯 CSS 判据，没有 JS 计时器、没有「猜多久算加载完」。
   骨架里只有灰条 `.dfo-skel-bar`、**一个字都不写**（老板 2026-10-15 红框「把这个傻逼提示
   去掉」，与外壳静默骨架同一族口径）。 */
.dfo-first-skeleton {
    display: block;
}
#index-main-content-container:has(.dfo-page) .dfo-first-skeleton {
    display: none !important;
}

/* --- 首屏 loading 骨架（静默，2026-10-15 老板红框点名「把这个提示去掉」） ---
   `app-mount` 初值 = views/page_fallback.skeleton()：与外壳同形的灰条骨架，
   **一个字都不写**（原来那里写「正在加载页面／地址栏路由信息 ＋ 重新加载」，老板截图标红骂）。
   取色走令牌，V2/V3 那些浅色主题换一处就能换掉骨架配色。
   唯一会露字的是 `.dfo-boot-slow`：8 秒前 opacity:0，纯 CSS 延时（没有 JS 计时器）——
   它是「真卡住了」的出口，正常加载下骨架早被真外壳换掉，这一行看不到。 */
.dfo-boot-bar {
    background: var(--dfo-bg2, #212C3C);
    border-radius: 3px;
}
.dfo-boot-slow {
    opacity: 0;
    animation: dfo-boot-slow-reveal 0s linear 8s both;
}
@keyframes dfo-boot-slow-reveal {
    to { opacity: 1; }
}