/* ════════════════════════════════════════════════════════════════════
   Cloudflare 设计系统 — 全局风格层
   --------------------------------------------------------------------
   位置：本块必须保留在 app.css 顶部。声明设计 token、覆盖 MudBlazor 内
   置 CSS 变量、定义组件外观默认值，并在 [data-theme="dark"] 下提供完
   整暗色变体。下方的旧规则若仍直接使用色号而非 token，请优先迁移。
   ════════════════════════════════════════════════════════════════════ */

:root {
    /* 品牌色（橙色仅作品牌锚点，不主导功能 UI） */
    --cf-brand-orange: #F38020;
    --cf-brand-orange-hover: #D96A10;
    --cf-brand-orange-soft: rgba(243, 128, 32, 0.08);

    /* 功能主色（Primary）——所有主操作按钮、focus 环、tab 滑块用蓝 */
    --cf-primary: #0051C3;
    --cf-primary-hover: #003682;
    --cf-primary-soft: rgba(0, 81, 195, 0.08);
    --cf-brand-blue: var(--cf-primary);
    --cf-brand-blue-hover: var(--cf-primary-hover);
    --cf-brand-blue-soft: var(--cf-primary-soft);

    /* 表面层（页面背景改为纯白，与 surface 一致——卡片靠 1px 边框区分层级，
       Linear / GitHub / Notion 风格的极简一致性） */
    --cf-bg-page: #FFFFFF;
    --cf-bg-surface: #FFFFFF;
    --cf-bg-elevated: #FFFFFF;
    --cf-bg-subtle: #FAFAFB;
    --cf-bg-muted: #EEEFF2;
    --cf-bg-hover: rgba(15, 20, 25, 0.04);
    --cf-bg-active: rgba(15, 20, 25, 0.06);
    /* 选中态用中性灰，绝不带橙色——按 Cloudflare Dashboard 实际观感 */
    --cf-bg-selected: rgba(15, 20, 25, 0.06);

    /* 边框 */
    --cf-border-default: #E5E7EB;
    --cf-border-strong: #D0D7DE;
    --cf-border-subtle: #EEF1F4;
    --cf-border-focus: var(--cf-primary);

    /* 文字 */
    --cf-text-primary: #1D1D1F;
    --cf-text-secondary: #6B6F76;
    --cf-text-tertiary: #9CA3AF;
    --cf-text-inverse: #FFFFFF;
    --cf-text-link: var(--cf-primary);

    /* 状态色 */
    --cf-success: #16A34A;
    --cf-success-bg: rgba(22, 163, 74, 0.08);
    --cf-warning: #F38020;
    --cf-warning-bg: rgba(243, 128, 32, 0.08);
    --cf-error: #D92C20;
    --cf-error-bg: rgba(217, 44, 32, 0.08);
    --cf-info: #0051C3;
    --cf-info-bg: rgba(0, 81, 195, 0.08);

    /* 圆角 */
    --cf-radius-sm: 4px;
    --cf-radius-md: 6px;
    --cf-radius-lg: 8px;
    --cf-radius-pill: 9999px;

    /* 阴影（极轻） */
    --cf-shadow-none: none;
    --cf-shadow-overlay: 0 4px 12px rgba(15, 20, 25, 0.08);
    --cf-shadow-modal: 0 8px 24px rgba(15, 20, 25, 0.12);
    /* 蓝色 focus ring */
    --cf-shadow-focus-ring: 0 0 0 3px rgba(0, 81, 195, 0.24);

    /* 字体 */
    --cf-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
    --cf-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    /* 高度 / 间距 */
    --cf-topbar-height: 3.5rem;
    --cf-sidebar-width: 250px;
    --cf-sidebar-center-offset: 125px;
}

[data-theme="dark"] {
    --cf-bg-page: #0E1117;
    --cf-bg-surface: #161B22;
    --cf-bg-elevated: #1A1F26;
    --cf-bg-subtle: #161B22;
    --cf-bg-muted: #21262D;
    --cf-bg-hover: rgba(230, 237, 243, 0.06);
    --cf-bg-active: rgba(230, 237, 243, 0.08);
    /* 暗色下选中仍是中性灰（提亮的中性叠加），不染色 */
    --cf-bg-selected: rgba(230, 237, 243, 0.08);

    --cf-border-default: #30363D;
    --cf-border-strong: #3D4450;
    --cf-border-subtle: #21262D;

    --cf-text-primary: #E6EDF3;
    --cf-text-secondary: #8B949E;
    --cf-text-tertiary: #6E7681;

    /* 暗色下蓝色提亮以保持对比度，仍是 Primary 主色 */
    --cf-primary: #2F77E0;
    --cf-primary-hover: #5C9AF0;
    --cf-primary-soft: rgba(47, 119, 224, 0.12);
    --cf-text-link: var(--cf-primary);

    --cf-brand-orange: #FBAD41;
    --cf-brand-orange-hover: #F38020;
    --cf-brand-orange-soft: rgba(251, 173, 65, 0.12);

    --cf-success: #3FB950;
    --cf-success-bg: rgba(63, 185, 80, 0.12);
    --cf-warning: #FBAD41;
    --cf-warning-bg: rgba(251, 173, 65, 0.12);
    --cf-error: #F85149;
    --cf-error-bg: rgba(248, 81, 73, 0.12);
    --cf-info: #2F77E0;
    --cf-info-bg: rgba(47, 119, 224, 0.12);

    --cf-shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.4);
    --cf-shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.5);
    --cf-shadow-focus-ring: 0 0 0 3px rgba(47, 119, 224, 0.32);

    color-scheme: dark;
}

html,
body {
    font-family: var(--cf-font-sans);
    background-color: var(--cf-bg-page);
    color: var(--cf-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1:focus {
    outline: none;
}

a,
.btn-link {
    color: var(--cf-text-link);
}

.btn-primary {
    color: var(--cf-text-inverse);
    background-color: var(--cf-brand-orange);
    border-color: var(--cf-brand-orange);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: var(--cf-shadow-focus-ring);
}

/* ────────────────────────────────────────────────────────────────────
   MudBlazor 全局变量覆盖：拍平阴影、收紧圆角、关闭涟漪
   ──────────────────────────────────────────────────────────────────── */
.mud-theme,
.mud-application-layout,
.mud-application-layout-content {
    --mud-default-borderradius: var(--cf-radius-md);
    --mud-elevation-0: none;
    --mud-elevation-1: none;
    --mud-elevation-2: none;
    --mud-elevation-3: none;
    --mud-elevation-4: var(--cf-shadow-overlay);
    --mud-elevation-5: var(--cf-shadow-overlay);
    --mud-elevation-6: var(--cf-shadow-overlay);
    --mud-elevation-7: var(--cf-shadow-overlay);
    --mud-elevation-8: var(--cf-shadow-modal);
    --mud-elevation-9: var(--cf-shadow-modal);
    --mud-elevation-10: var(--cf-shadow-modal);
    --mud-elevation-11: var(--cf-shadow-modal);
    --mud-elevation-12: var(--cf-shadow-modal);
    --mud-elevation-13: var(--cf-shadow-modal);
    --mud-elevation-14: var(--cf-shadow-modal);
    --mud-elevation-15: var(--cf-shadow-modal);
    --mud-elevation-16: var(--cf-shadow-modal);
    --mud-elevation-17: var(--cf-shadow-modal);
    --mud-elevation-18: var(--cf-shadow-modal);
    --mud-elevation-19: var(--cf-shadow-modal);
    --mud-elevation-20: var(--cf-shadow-modal);
    --mud-elevation-21: var(--cf-shadow-modal);
    --mud-elevation-22: var(--cf-shadow-modal);
    --mud-elevation-23: var(--cf-shadow-modal);
    --mud-elevation-24: var(--cf-shadow-modal);
}

/* 涟漪透明度已在 CloudflareTheme 中设为 0；不要隐藏 .mud-ripple 根元素，
   MudBlazor 的按钮与菜单触发器也会带这个类。 */

/* Paper / Card 默认：白底 + 1px 边框 + 无阴影 */
.mud-paper {
    background-color: var(--cf-bg-surface);
    color: var(--cf-text-primary);
}
.mud-paper:not(.mud-dialog):not(.mud-snackbar):not(.mud-tooltip):not(.mud-menu-popover):not(.mud-list):not(.notification-panel) {
    border-radius: var(--cf-radius-md);
    box-shadow: none;
    border: 1px solid var(--cf-border-default);
}
.mud-paper.mud-paper-outlined {
    border: 1px solid var(--cf-border-default);
}
.mud-card {
    border-radius: var(--cf-radius-md);
    box-shadow: none;
    border: 1px solid var(--cf-border-default);
    background-color: var(--cf-bg-surface);
}
.mud-card-actions { padding: 12px 16px; }

/* ────────────────────────────────────────────────────────────────────
   去除卡片套卡片：外层 Paper/Card 若内部含子 Paper/Card/Table，则透明化外层
   只让最内层的"叶子"组件保留边框 + 白底。
   要求浏览器支持 :has() —— Chrome ≥105 / Safari ≥15.4 / Firefox ≥121。
   注：MudTable 渲染的 .mud-table 在 DOM 里不带 .mud-paper class，需单独列出。
   ──────────────────────────────────────────────────────────────────── */
.mud-paper:not(.mud-dialog):not(.mud-snackbar):not(.mud-tooltip):not(.mud-menu-popover):not(.mud-popover):not(.notification-panel):not(.notification-popover):has(.mud-paper:not(.mud-dialog):not(.mud-snackbar):not(.mud-tooltip):not(.mud-menu-popover):not(.mud-popover):not(.mud-list):not(.notification-panel)),
.mud-paper:not(.mud-dialog):not(.mud-snackbar):not(.mud-tooltip):not(.mud-menu-popover):not(.mud-popover):not(.notification-panel):not(.notification-popover):has(.mud-card),
.mud-paper:not(.mud-dialog):not(.mud-snackbar):not(.mud-tooltip):not(.mud-menu-popover):not(.mud-popover):not(.notification-panel):not(.notification-popover):has(.mud-table),
.mud-card:has(.mud-card),
.mud-card:has(.mud-table),
.mud-card:has(.mud-paper:not(.mud-dialog):not(.mud-snackbar):not(.mud-tooltip):not(.mud-menu-popover):not(.mud-popover):not(.mud-list)) {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Button 风格：去阴影、不大写、低饱和 hover —— 颜色由 MudBlazor Palette 驱动，
   不在 CSS 强行染色（C# 主题已配 Primary=蓝、Secondary=橙），仅压平视觉。 */
.mud-button-root {
    border-radius: var(--cf-radius-md);
    text-transform: none;
    font-weight: 500;
    letter-spacing: normal;
    box-shadow: none !important;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.mud-button-root:hover { box-shadow: none !important; }

/* Outlined / Text 默认中性，不强行用 palette 染色，避免按钮文字也变蓝 */
.mud-button-outlined:not(.mud-button-outlined-primary):not(.mud-button-outlined-secondary):not(.mud-button-outlined-error):not(.mud-button-outlined-warning):not(.mud-button-outlined-success):not(.mud-button-outlined-info) {
    border: 1px solid var(--cf-border-strong);
    background-color: var(--cf-bg-surface);
    color: var(--cf-text-primary);
}
.mud-button-outlined:not(.mud-button-outlined-primary):not(.mud-button-outlined-secondary):not(.mud-button-outlined-error):not(.mud-button-outlined-warning):not(.mud-button-outlined-success):not(.mud-button-outlined-info):hover {
    background-color: var(--cf-bg-subtle);
    border-color: var(--cf-text-secondary);
}

.mud-icon-button {
    border-radius: var(--cf-radius-md);
}
.mud-icon-button:hover {
    background-color: var(--cf-bg-hover);
}

/* FAB 也压扁 */
.mud-fab {
    box-shadow: var(--cf-shadow-overlay);
}
.mud-fab:hover {
    box-shadow: var(--cf-shadow-overlay);
}

/* 输入框：1px 边框、收紧圆角、focus 蓝色细环——border-color 由 MudBlazor primary 驱动 */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--cf-radius-md);
    border-color: var(--cf-border-strong);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.mud-input.mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: var(--cf-text-secondary);
}
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-width: 1px;
    box-shadow: var(--cf-shadow-focus-ring);
}
.mud-input-label.mud-input-label-outlined {
    color: var(--cf-text-secondary);
}

/* Dialog */
.mud-dialog {
    border-radius: var(--cf-radius-lg);
    box-shadow: var(--cf-shadow-modal);
    border: 1px solid var(--cf-border-default);
    background-color: var(--cf-bg-surface);
}
.mud-dialog-title {
    border-bottom: 1px solid var(--cf-border-subtle);
    padding: 16px 24px;
    font-weight: 600;
}
.mud-dialog-actions {
    border-top: 1px solid var(--cf-border-subtle);
    padding: 12px 24px;
}

/* Tabs：下划线 2px 蓝、字体不大写 */
.mud-tabs .mud-tabs-toolbar {
    background-color: transparent;
    border-bottom: 1px solid var(--cf-border-default);
    box-shadow: none;
}
.mud-tabs .mud-tab {
    text-transform: none;
    font-weight: 500;
    min-height: 40px;
    color: var(--cf-text-secondary);
}
.mud-tabs .mud-tab.mud-tab-active {
    color: var(--cf-text-primary);
}
.mud-tabs .mud-tab-slider {
    background-color: var(--cf-primary);
    height: 2px;
}

/* Table */
.mud-table {
    border: 1px solid var(--cf-border-default);
    border-radius: var(--cf-radius-md);
    background-color: var(--cf-bg-surface);
    box-shadow: none;
}
.mud-table .mud-table-head {
    background-color: var(--cf-bg-subtle);
}
.mud-table .mud-table-head .mud-table-cell {
    color: var(--cf-text-secondary);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: none;
    border-bottom: 1px solid var(--cf-border-default);
    /* 表头不换行：列宽不足时由水平滚动承担，杜绝"项目经理"被拆成两行的情况 */
    white-space: nowrap;
}
.mud-table .mud-table-row {
    transition: background-color 120ms ease;
}
.mud-table .mud-table-row:hover {
    background-color: var(--cf-bg-hover);
}
.mud-table .mud-table-cell {
    border-bottom: 1px solid var(--cf-border-subtle);
    color: var(--cf-text-primary);
}
.mud-table .mud-table-foot .mud-table-cell {
    border-top: 1px solid var(--cf-border-default);
}

/* Menu / Popover */
.mud-popover {
    border-radius: var(--cf-radius-md);
    border: 1px solid var(--cf-border-default);
    box-shadow: var(--cf-shadow-overlay);
    background-color: var(--cf-bg-surface);
}
.mud-list {
    background-color: var(--cf-bg-surface);
}
.mud-list-item {
    border-radius: var(--cf-radius-sm);
}
.mud-list-item:hover {
    background-color: var(--cf-bg-hover);
}

/* Chip */
.mud-chip {
    border-radius: var(--cf-radius-sm);
    font-weight: 500;
    box-shadow: none;
}
.mud-chip.mud-chip-outlined {
    border: 1px solid var(--cf-border-strong);
    background-color: var(--cf-bg-surface);
}

/* Alert */
.mud-alert {
    border-radius: var(--cf-radius-md);
    box-shadow: none;
    border: 1px solid transparent;
    padding: 12px 16px;
}
.mud-alert.mud-alert-filled-success { background-color: var(--cf-success-bg); color: var(--cf-success); border-color: rgba(22,163,74,0.24); }
.mud-alert.mud-alert-filled-warning { background-color: var(--cf-warning-bg); color: var(--cf-warning); border-color: rgba(243,128,32,0.24); }
.mud-alert.mud-alert-filled-error { background-color: var(--cf-error-bg); color: var(--cf-error); border-color: rgba(217,44,32,0.24); }
.mud-alert.mud-alert-filled-info { background-color: var(--cf-info-bg); color: var(--cf-info); border-color: rgba(0,81,195,0.24); }

/* Snackbar：强制 outlined 风格——白底 + severity 色 1px 边框 + severity 色图标和文字。
   覆盖默认 filled 变体的饱和色铺满，让通知条与 Cloudflare 卡片观感统一。 */
.mud-snackbar {
    border-radius: var(--cf-radius-md);
    border: 1px solid var(--cf-border-default);
    box-shadow: var(--cf-shadow-overlay);
    background-color: var(--cf-bg-surface) !important;
    color: var(--cf-text-primary) !important;
}
.mud-snackbar.mud-alert-filled-success,
.mud-snackbar.mud-alert-outlined-success,
.mud-snackbar.mud-alert-text-success { border-color: var(--cf-success); }
.mud-snackbar.mud-alert-filled-success .mud-icon-root,
.mud-snackbar.mud-alert-outlined-success .mud-icon-root,
.mud-snackbar.mud-alert-text-success .mud-icon-root { color: var(--cf-success); }

.mud-snackbar.mud-alert-filled-warning,
.mud-snackbar.mud-alert-outlined-warning,
.mud-snackbar.mud-alert-text-warning { border-color: var(--cf-warning); }
.mud-snackbar.mud-alert-filled-warning .mud-icon-root,
.mud-snackbar.mud-alert-outlined-warning .mud-icon-root,
.mud-snackbar.mud-alert-text-warning .mud-icon-root { color: var(--cf-warning); }

.mud-snackbar.mud-alert-filled-error,
.mud-snackbar.mud-alert-outlined-error,
.mud-snackbar.mud-alert-text-error { border-color: var(--cf-error); }
.mud-snackbar.mud-alert-filled-error .mud-icon-root,
.mud-snackbar.mud-alert-outlined-error .mud-icon-root,
.mud-snackbar.mud-alert-text-error .mud-icon-root { color: var(--cf-error); }

.mud-snackbar.mud-alert-filled-info,
.mud-snackbar.mud-alert-outlined-info,
.mud-snackbar.mud-alert-text-info { border-color: var(--cf-info); }
.mud-snackbar.mud-alert-filled-info .mud-icon-root,
.mud-snackbar.mud-alert-outlined-info .mud-icon-root,
.mud-snackbar.mud-alert-text-info .mud-icon-root { color: var(--cf-info); }

/* 关闭按钮也用主文字色，避免在白底上看不见 */
.mud-snackbar .mud-snackbar-close-button,
.mud-snackbar .mud-button-root.mud-icon-button { color: var(--cf-text-secondary); }

/* Divider */
.mud-divider {
    border-color: var(--cf-border-default);
    background-color: transparent;
}

/* Tooltip */
.mud-tooltip {
    border-radius: var(--cf-radius-sm);
    font-size: 0.75rem;
    padding: 4px 8px;
    background-color: rgba(15, 20, 25, 0.92);
}
[data-theme="dark"] .mud-tooltip {
    background-color: rgba(230, 237, 243, 0.92);
    color: #0E1117;
}

/* Progress */
.mud-progress-linear {
    border-radius: var(--cf-radius-pill);
    overflow: hidden;
}

/* Switch / Checkbox 焦点环 */
.mud-checkbox:focus-within .mud-icon-button,
.mud-switch:focus-within .mud-icon-button {
    box-shadow: var(--cf-shadow-focus-ring);
    border-radius: var(--cf-radius-md);
}

/* ────────────────────────────────────────────────────────────────────
   NavMenu / 侧边栏导航项
   ──────────────────────────────────────────────────────────────────── */
.sidebar-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--cf-topbar-height);
    padding: 0 16px;
    background-color: var(--cf-bg-surface);
    border-bottom: 1px solid var(--cf-border-default);
}
.sidebar-brand-row .navbar-brand {
    color: var(--cf-text-primary);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    text-decoration: none;
}
.sidebar-brand-row .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231D1D1F' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 1.25em;
    height: 1.25em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    display: inline-block;
}
[data-theme="dark"] .sidebar-brand-row .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23E6EDF3' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.sidebar .nav-link {
    color: var(--cf-text-secondary);
    border-radius: var(--cf-radius-md);
    padding: 8px 12px;
    margin: 2px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
}
.sidebar .nav-link:hover {
    background-color: var(--cf-bg-hover);
    color: var(--cf-text-primary);
    text-decoration: none;
}
/* 选中态：中性灰背景 + 深色文字（按 Cloudflare Dashboard 实际观感，不带任何蓝/橙染色） */
.sidebar .nav-link.active {
    background-color: var(--cf-bg-selected);
    color: var(--cf-text-primary);
    font-weight: 600;
}
.sidebar .nav-link.active .mud-icon-root {
    color: var(--cf-text-primary);
}
.sidebar .nav-link .mud-icon-root {
    color: inherit;
}
.sidebar .navbar-brand {
    color: var(--cf-text-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* 顶栏品牌（仅小屏不显示，>=641px 在主区域顶栏显示） */
.top-row-brand {
    display: none;
}
.top-row-brand-text {
    font-weight: 600;
    font-size: 1rem;
    color: var(--cf-text-primary);
    letter-spacing: -0.01em;
}
.top-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
/* 顶栏交互项的显式可见性保险栓：避免在意外级联或缓存错位时
   被父级 transparent/visibility 规则误伤。 */
.top-row-actions > *,
.top-row-actions .mud-icon-button,
.top-row-actions .mud-button-root,
.top-row-actions .mud-avatar,
.top-row-actions .mud-badge-root {
    visibility: visible !important;
    opacity: 1 !important;
}
.top-row-actions .mud-icon-button {
    color: var(--cf-text-secondary);
}
.top-row-actions .mud-icon-button:hover {
    color: var(--cf-text-primary);
    background-color: var(--cf-bg-hover);
}
.theme-toggle-btn {
    color: var(--cf-text-secondary) !important;
}
.theme-toggle-btn:hover {
    color: var(--cf-text-primary) !important;
}

/* ────────────────────────────────────────────────────────────────────
   面包屑栏：放在 .top-row 之下、@Body 之上。Cloudflare 风格——浅灰背景、
   小字号、链接灰，当前页（最后一项）深色。
   ──────────────────────────────────────────────────────────────────── */
.cf-breadcrumb-bar {
    /* 始终贴在 topbar 下方，不随页面滚动消失。z-index 低于 topbar(1300) 和 dialog(1400)，
       高于普通内容；自身带不透明背景，避免下方内容透出。 */
    position: sticky;
    top: var(--cf-topbar-height);
    z-index: 1290;
    padding: 20px 2rem 8px;
    background-color: var(--cf-bg-surface);
    border-bottom: 1px solid var(--cf-border-subtle);
    font-size: 0.8125rem;
}
.cf-breadcrumb-bar .mud-breadcrumbs {
    padding: 0;
    margin: 0;
}
.cf-breadcrumb-bar .mud-breadcrumbs .mud-breadcrumb-item a {
    color: var(--cf-text-secondary);
    text-decoration: none;
    transition: color 120ms ease;
}
.cf-breadcrumb-bar .mud-breadcrumbs .mud-breadcrumb-item a:hover {
    color: var(--cf-text-primary);
}
.cf-breadcrumb-bar .mud-breadcrumbs .mud-breadcrumb-item:last-child a,
.cf-breadcrumb-bar .mud-breadcrumbs .mud-breadcrumb-item.mud-disabled,
.cf-breadcrumb-bar .mud-breadcrumbs .mud-breadcrumb-item.mud-disabled a {
    color: var(--cf-text-primary);
    font-weight: 500;
    cursor: default;
    pointer-events: none;
}
.cf-breadcrumb-bar .mud-breadcrumbs .mud-breadcrumb-separator {
    color: var(--cf-text-tertiary);
    margin: 0 6px;
}
@media (max-width: 640px) {
    .cf-breadcrumb-bar {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ────────────────────────────────────────────────────────────────────
   通用页面骨架：.cf-page / .cf-page-header / .cf-page-body
   用于从 Dialog 转换过来的全页面视图——页头放标题 + 操作按钮，
   下方是内容主体。靠面包屑栏提供层级导航，不重复显示返回按钮。
   ──────────────────────────────────────────────────────────────────── */
.cf-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 18px 0 40px;
}
.cf-page-header {
    position: sticky;
    top: calc(var(--cf-topbar-height) + 48px);
    z-index: 1280;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    margin: -8px 0 0;
    padding-top: 8px;
    padding-bottom: 4px;
    flex-wrap: wrap;
    background-color: var(--cf-bg-surface);
    border-bottom: 1px solid var(--cf-border-subtle);
}
.cf-page-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}
.cf-page-back-button {
    flex: 0 0 auto;
    color: var(--cf-text-secondary) !important;
}
.cf-page-back-button:hover {
    color: var(--cf-text-primary) !important;
}
.cf-page-title {
    color: var(--cf-text-primary);
    margin: 0;
    font-size: 1.375rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: normal;
}
.cf-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.cf-page-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 显式"容器卡片"：当一个页面的主内容（表格、Tabs 等）需要白色容器边界时，
   外面包一层 .cf-card 即可。比纯靠 .mud-paper 默认样式更可控、不会被 :has() 误剥。 */
.cf-card {
    background-color: var(--cf-bg-surface);
    border: 1px solid var(--cf-border-default);
    border-radius: var(--cf-radius-md);
    padding: 16px;
}
.cf-card.cf-card-flush {
    padding: 0;
}

/* 章节模式：无边框、无底色，靠"小号大写标题 + 浅分隔线"做层级。
   用于详情页内部的多 section 分块，对应 Cloudflare 设置页的密集表单结构。 */
.cf-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cf-border-subtle);
}
.cf-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.cf-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 24px;
}
.cf-section-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cf-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}
.cf-section-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 在 .cf-page 内部，所有 MudPaper Outlined 自动呈现为"章节"——无边框、无底色、
   底部细分隔。配合内部 Typo.subtitle1 自动成为章节标题（小写灰大写），
   实现 ProjectDetailPage 等转换页面的 Cloudflare 设置页式密集表单观感，
   且无需改任何 razor markup。 */
.cf-page .mud-paper.mud-paper-outlined {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 4px 0 20px 0 !important;
    border-bottom: 1px solid var(--cf-border-subtle) !important;
}
.cf-page .mud-paper.mud-paper-outlined:last-child {
    border-bottom: none !important;
    padding-bottom: 4px !important;
}
.cf-page .mud-paper.mud-paper-outlined > * + * {
    margin-top: 12px;
}
.cf-page .mud-paper.mud-paper-outlined .mud-text.mud-typography-subtitle1 {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--cf-text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}
.cf-page .mud-paper.mud-paper-outlined .mud-text.mud-typography-subtitle2 {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--cf-text-primary) !important;
    margin: 0;
}

/* ──────────────────────────────────────────────────────────────────── */


.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    /* Blazor 运行时检测到未捕获异常时把本元素 display 切到 block。
       样式向 Cloudflare 错误观感对齐：浅红底 + 1px 错误边 + 错误色文字。 */
    color-scheme: normal;
    background: var(--cf-error-bg);
    color: var(--cf-error);
    border-top: 1px solid var(--cf-error);
    bottom: 0;
    box-shadow: var(--cf-shadow-overlay);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 0.875rem;
}

#blazor-error-ui .reload {
    color: var(--cf-error);
    text-decoration: underline;
    margin-left: 8px;
    font-weight: 600;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    color: var(--cf-error);
    font-size: 1rem;
    line-height: 1;
    padding: 4px 6px;
    border-radius: var(--cf-radius-sm);
}
#blazor-error-ui .dismiss:hover {
    background-color: rgba(217, 44, 32, 0.12);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

code {
    color: #c02d76;
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
    text-align: start;
}



/* ═══════════════════════════════════════════════════════════
   MainLayout 样式（原 MainLayout.razor.css）
   ═══════════════════════════════════════════════════════════ */

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.sidebar {
    background-color: var(--cf-bg-surface);
    border-right: 1px solid var(--cf-border-default);
}

.top-row {
    background-color: var(--cf-bg-surface);
    border-bottom: 1px solid var(--cf-border-default);
    box-shadow: none;
    height: var(--cf-topbar-height);
    /* 三列网格：左 1fr 占位 / 中间 auto（search） / 右 1fr 占位——search 自然居中，
       actions 推到右端、brand 推到左端。即便 brand 是 display:none，左列仍保留 1fr 空间。 */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    /* 必须低于 MudBlazor dialog 的 1400，否则居中弹窗顶部会被本栏盖住；
       snackbar 已通过 top:4rem 物理偏移避开本栏，不依赖 z-index。 */
    z-index: 1300;
}
/* 显式锁定列号，避免 .top-row-brand (display:none) 导致后续子元素自动前移
   填入空闲列、把 actions 推到中间列的问题。 */
.top-row > .top-row-brand { grid-column: 1; justify-self: start; }
.top-row > .gs-topbar-search { grid-column: 2; justify-self: center; }
.top-row > .top-row-actions { grid-column: 3; justify-self: end; }

.top-row a,
.top-row .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
    color: var(--cf-text-secondary);
}

.top-row a:hover,
.top-row .btn-link:hover {
    text-decoration: none;
    color: var(--cf-text-primary);
}

.top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════
   Snackbar 顶部偏移
   ───────────────────────────────────────────────────────────
   MudBlazor 默认把 top-right snackbar 钉在 top:24px，会覆盖
   主内容区高 3.5rem 的工具栏（搜索框 / 通知 / 退出登录）。
   将 top 推到 4rem，让出工具栏并留出 0.5rem 视觉间隙。
   ═══════════════════════════════════════════════════════════ */
.mud-snackbar.mud-snackbar-location-top-right,
.mud-snackbar.mud-snackbar-location-top-left,
.mud-snackbar.mud-snackbar-location-top-center {
    top: 4rem;
}

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

    .top-row a,
    .top-row .btn-link {
        margin-left: 0;
    }
}

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

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

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

    /* 全屏弹窗避让侧边栏：当 MudDialog 同时具有 dialog-respect-sidebar 和 mud-dialog-fullscreen 类时，
       通过 :has() 把外层容器整体右移 250px，保持左侧 sidebar 可见。
       仅在 ≥641px 屏宽下生效——小屏时 sidebar 折叠为顶部 navbar。 */
    .mud-dialog-container:has(.mud-dialog.dialog-respect-sidebar.mud-dialog-fullscreen) {
        left: 250px;
        width: calc(100% - 250px);
    }
}

/* 全屏弹窗避让主内容顶部工具栏，避免遮住搜索框、通知和用户入口。 */
.mud-dialog-container:has(.mud-dialog.mud-dialog-fullscreen) {
    top: 3.5rem;
    height: calc(100vh - 3.5rem);
}

.mud-dialog-container:has(.mud-dialog.mud-dialog-fullscreen) .mud-dialog-fullscreen {
    height: calc(100vh - 3.5rem) !important;
    max-height: calc(100vh - 3.5rem) !important;
}

/* ═══════════════════════════════════════════════════════════
   全屏弹窗内部 body 高度修复
   ───────────────────────────────────────────────────────────
   说明：MudDialog 在 fullscreen 下，.mud-dialog-content 已 flex:1 撑满
   title 和 actions 之间的空间。但项目里几个 dialog 的内部 body 容器
   设置了 max-height: 60~75vh，造成内部 body 收缩、父容器富余，视觉
   上表现为 body 底部到 actions 行之间的大块空白。本块在 fullscreen
   态下解除这些 max-height 上限，并改为 height: 100% 填满父容器。
   ═══════════════════════════════════════════════════════════ */
.mud-dialog-fullscreen .project-detail-body,
.mud-dialog-fullscreen .drill-dialog-content,
.mud-dialog-fullscreen .pf-treeview {
    max-height: none;
    height: 100%;
}

ol {
    list-style-type: cjk-decimal;
    /* 第一层: 一, 二, 三 */
}

ol ol {
    list-style-type: decimal;
    /* 第二层: 1, 2, 3 */
}

ol ol ol {
    list-style-type: lower-alpha;
    /* 第三层: a, b, c */
}

ol ol ol ol {
    list-style-type: lower-roman;
    /* 第四层: i, ii, iii */
}

/* ═══════════════════════════════════════════════════════════
   NavMenu 样式（原 NavMenu.razor.css）
   ═══════════════════════════════════════════════════════════ */

.navbar-toggler {
    background-color: var(--cf-bg-hover);
    border: 1px solid var(--cf-border-default);
    border-radius: var(--cf-radius-sm);
}

.sidebar .top-row {
    min-height: var(--cf-topbar-height);
    background-color: var(--cf-bg-surface);
    border-bottom: 1px solid var(--cf-border-default);
    box-shadow: none;
}

.navbar-brand {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cf-text-primary);
    letter-spacing: -0.01em;
}

.bi {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

/* ────────── 钻孔附件 ────────── */

.drill-file-image-preview-wrapper {
    width: 100%;
    max-width: 560px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.drill-file-image-preview {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 4px;
}

/* ────────── MudBlazor Responsive Image 可拖拽容器 ────────── */

.responsive-image-preview-shell {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.responsive-image-resize-frame {
    position: relative;
    box-sizing: border-box;
    width: min(100%, 720px);
    min-width: min(220px, 100%);
    max-width: 100%;
    border: 0;
    border-radius: 0;
    padding: 0 18px 0 0;
    overflow: visible;
    background: transparent;
}

.responsive-image-preview-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 18px rgba(31, 41, 55, 0.22);
}

.responsive-image-resize-handle {
    position: absolute;
    top: 0;
    right: 4px;
    bottom: 0;
    width: 10px;
    cursor: ew-resize;
    touch-action: none;
    border-radius: 6px;
    background: transparent;
}

.responsive-image-resize-handle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 48px;
    max-height: 70%;
    border-radius: 999px;
    background: var(--mud-palette-lines-default);
    box-shadow: 0 2px 8px rgba(31, 41, 55, 0.28);
    transform: translate(-50%, -50%);
}

.responsive-image-resize-handle:hover,
.responsive-image-resize-handle:focus-visible {
    background: transparent;
}

body.responsive-image-resizing {
    cursor: ew-resize;
    -webkit-user-select: none;
    user-select: none;
}

/* ────────── 项目文件树 ────────── */

.project-file-tree .mud-expand-panel {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    margin-bottom: 8px;
}

.project-file-leaf-list {
    border-left: 2px solid var(--mud-palette-lines-default);
    margin-left: 10px;
    padding-left: 10px;
}

/* ────────── 项目文件树（MudTreeView） ────────── */

/* 不限制树高度，让其随内容自然撑开，由整个页面（窗口）提供滚动条，避免组件内部独立滚动与底部留白。 */
.pf-treeview {
    overflow: visible;
}

/* 文件夹命名弹窗：单个输入框，内容不会溢出，去掉偶发的纵向滚动条并留出浮动标签空间。 */
.pf-name-dialog .mud-dialog-content {
    overflow-y: hidden;
    padding-top: 12px;
}

/* 文件夹行点击和悬浮样式 */
.pf-tree-folder-row>.mud-treeview-item-content {
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
}

.pf-tree-folder-row>.mud-treeview-item-content:hover {
    background: var(--cf-bg-hover);
}

/* 文件夹行：名称 + hover 浮现的操作图标 */
.pf-folder-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.pf-folder-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-folder-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    visibility: hidden;
}

.pf-tree-folder-row>.mud-treeview-item-content:hover .pf-folder-actions,
.pf-folder-actions:focus-within {
    visibility: visible;
}

/* 「移动到…」目标选择列表 */
.pf-move-picker {
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--cf-border, rgba(0, 0, 0, 0.12));
    border-radius: 6px;
    padding: 4px 0;
}

.pf-move-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.pf-move-item:hover {
    background: var(--cf-bg-hover);
}

.pf-move-item-selected {
    background: var(--cf-bg-hover);
    font-weight: 600;
}

.pf-move-item-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* 文件行悬浮样式 */
.pf-treeview .mud-treeview-item-content:hover {
    background: var(--cf-bg-hover);
    border-radius: 4px;
}

.pf-tree-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.pf-tree-file-row-structured {
    position: relative;
    overflow: hidden;
    column-gap: 12px;
}

.pf-tree-file-highlight {
    background: #fff3e0 !important;
    animation: pf-highlight-fade 3s ease-out forwards;
}

@keyframes pf-highlight-fade {
    0% {
        background: #fff3e0;
    }

    100% {
        background: transparent;
    }
}

.pf-tree-file-name {
    flex: 1;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    min-width: 0;
}

/* 结构化行：文件名列容器。宽度由全局 CSS 变量 --pf-name-col-width 控制（默认 280px），
   可通过列右侧的分隔条拖拽调整（见 .pf-tree-col-resizer 及 index.html 的全局指针逻辑）。 */
.pf-tree-file-row-structured .pf-tree-file-name-col {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 var(--pf-name-col-width, 280px);
    min-width: 120px;
    overflow: hidden;
    padding-right: 8px;
}

/* 文件名列内的文件名：填满列剩余空间，过长时省略号截断。 */
.pf-tree-file-row-structured .pf-tree-file-name-col .pf-tree-file-name {
    flex: 1 1 auto;
    min-width: 0;
}

/* 文件名列右侧的可拖拽分隔条（热区 8px，含一条居中竖线，悬浮/拖拽时高亮）。 */
.pf-tree-col-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
    /* 高于操作按钮区（z-index:2），使列宽拖到按钮下方时手柄仍可抓取拖回。 */
    z-index: 3;
}

.pf-tree-col-resizer::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
    width: 2px;
    height: 60%;
    background: var(--cf-border-strong);
    border-radius: 1px;
    transition: background 0.15s;
}

.pf-tree-col-resizer:hover::after,
body.pf-col-resizing .pf-tree-col-resizer::after {
    background: var(--mud-palette-primary);
}

/* 拖拽列宽过程中：全局禁用文本选择并保持列宽光标。 */
body.pf-col-resizing {
    cursor: col-resize;
    -webkit-user-select: none;
    user-select: none;
}

.pf-tree-file-name-clickable {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--mud-palette-primary);
    cursor: pointer;
    font: inherit;
    line-height: inherit;
    text-align: left;
}

.pf-tree-file-name-clickable:hover {
    text-decoration: underline;
}

.pf-tree-file-name-clickable:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.pf-tree-file-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.pf-tree-file-meta>.mud-chip,
.pf-tree-file-meta>.mud-tooltip-root,
.pf-tree-file-version,
.pf-tree-file-uploader,
.pf-tree-file-time,
.pf-tree-file-size {
    flex-shrink: 0;
}

.pf-tree-file-version {
    color: var(--mud-palette-primary);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}

.pf-tree-file-version:hover {
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    text-decoration: underline;
}

.pf-tree-file-version-static {
    cursor: default;
}

.pf-tree-file-version-static:hover {
    background: transparent;
    text-decoration: none;
}

.pf-tree-file-uploader,
.pf-tree-file-time,
.pf-tree-file-size,
.pf-tree-file-description {
    font-size: 0.75rem;
    color: var(--cf-text-secondary);
    white-space: nowrap;
}

.pf-tree-file-size,
.pf-tree-file-description {
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-tree-file-size {
    max-width: 96px;
}

.pf-tree-file-description {
    flex: 1 1 300px;
    min-width: 120px;
    max-width: 360px;
    color: var(--mud-palette-text-secondary);
}

.pf-tree-file-actions {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    margin-left: auto;
}

/* 结构化文件行：操作按钮区锚定在行最右侧并悬浮于中间信息之上。
   拖宽文件名列时，中间信息（chip / 版本号 / 上传人 / 时间 / 说明）整体右移、滑入按钮下方被遮住，
   而右侧按钮始终固定可见、不会被挤出组件。背景取行底色（页面背景）以实现无缝"遮盖"。 */
.pf-tree-file-row-structured .pf-tree-file-actions {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    margin-left: 0;
    padding-left: 12px;
    background-color: var(--cf-bg-page);
    z-index: 2;
}

/* 行 hover 时把同样的 hover 叠加色合成到按钮背景上，使遮盖区与整行 hover 底色保持一致。 */
.pf-treeview .mud-treeview-item-content:hover .pf-tree-file-row-structured .pf-tree-file-actions {
    background-image: linear-gradient(var(--cf-bg-hover), var(--cf-bg-hover));
}

.pf-tree-file-actions>.mud-tooltip-root,
.pf-tree-file-actions>.mud-menu {
    display: inline-flex;
    align-items: center;
    height: 32px;
}

.pf-tree-untyped-file-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 4px;
}

.pf-tree-assign-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 2px;
}

/* ────────── 文件搜索 ────────── */

.pf-search-wrapper {
    position: relative;
    z-index: 10001;
}

.pf-search-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.4);
}

.pf-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 400px;
    overflow-y: auto;
    background: var(--cf-bg-surface);
    color: var(--cf-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 10002;
}

.pf-search-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
}

.pf-search-item:hover,
.pf-search-item-active {
    background: var(--cf-bg-hover);
}

.pf-search-item-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pf-search-item-name {
    font-size: 0.875rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-search-item-path {
    font-size: 0.75rem;
    color: var(--cf-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-search-project-header {
    display: flex;
    align-items: center;
    padding: 6px 12px 2px 12px;
    background: var(--cf-bg-subtle);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pf-image-preview-dialog-shell {
    width: 100%;
    max-height: min(70vh, 640px);
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: transparent;
}

.pf-image-preview-dialog-shell--fullscreen {
    height: calc(100vh - 112px);
    max-height: calc(100vh - 112px);
    align-items: center;
    justify-content: center;
    padding: 0;
}

.pf-image-preview-dialog-frame {
    width: 100%;
    min-width: min(260px, 100%);
    max-width: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-right: 0;
}

.pf-image-preview-dialog-frame--fullscreen {
    width: min(100%, 1280px);
    max-width: calc(100vw - 64px);
    display: flex;
    justify-content: center;
}

.pf-image-preview-dialog-image {
    width: 100%;
    height: auto;
    max-height: none;
    display: block;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 18px rgba(31, 41, 55, 0.22);
}

.pf-image-preview-dialog-image--fullscreen {
    max-height: calc(100vh - 128px);
}

/* ── 图片预览弹窗标题文本 ── */
.pf-image-preview-title {
    min-width: 0;
}

.pf-image-preview-toolbar {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    margin-bottom: 8px;
}

.pf-image-preview-version-panel {
    min-width: 0;
    width: 100%;
    max-width: 280px;
    justify-self: start;
}

.pf-image-preview-version-select {
    width: 100%;
    min-width: 0;
}

/* ── 图片预览弹窗顶部操作按钮区（居中） ── */
.pf-image-preview-actions {
    justify-self: center;
    width: auto;
    margin-bottom: 0;
}

.pf-image-preview-toolbar-spacer {
    min-width: 0;
}

.pf-image-preview-version-loading {
    margin-bottom: 8px;
}

/* ── 图片预览弹窗内部去除 MudDialog 默认上下间距 ── */
.mud-dialog .mud-dialog-content:has(.pf-image-preview-dialog-shell) {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* ────────── 钻孔布置图（项目基本信息） ────────── */

.pf-layout-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.pf-layout-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 4px;
}

/* ────────── 文件上传拖拽区（通用） ────────── */

.file-upload-dropzone {
    position: relative;
    min-height: 96px;
    border: 1px dashed var(--cf-primary);
    border-radius: 8px;
    /* 使用主题感知的低饱和底色：亮色下淡蓝、暗色下深一档 surface；文字色继承主题 */
    background: var(--cf-bg-subtle);
    color: var(--cf-text-secondary);
    overflow: hidden;
    transition: border-color 0.2s, background 0.2s;
}

[data-theme="dark"] .file-upload-dropzone {
    background: var(--cf-bg-muted);
}

.file-upload-dropzone-dragover {
    border-color: var(--cf-success);
    border-width: 2px;
    background: var(--cf-success-bg);
}

.file-upload-dropzone-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}

/* 多文件累加模式下的历史输入元素：隐藏但保留在 DOM 中，以维持其已选文件的底层引用。 */
.file-upload-dropzone-input-retained {
    display: none;
}

.file-upload-dropzone-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    padding: 12px;
}

/* ────────── 项目文件表格 ────────── */

.project-file-table-wrap {
    overflow: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

.project-file-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    table-layout: fixed;
}

.project-file-table th,
.project-file-table td {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 8px;
    vertical-align: middle;
}

.project-file-table th.resizable {
    resize: horizontal;
    overflow: auto;
    min-width: 120px;
    max-width: 560px;
}

.project-file-table th span {
    display: inline-block;
    white-space: nowrap;
}

.truncate-1 {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.bi-house-door-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.nav-item:first-of-type {
    padding-top: 1rem;
}

.nav-item:last-of-type {
    padding-bottom: 1rem;
}

.nav-item a {
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}

.nav-item a.active {
    background-color: rgba(255, 255, 255, 0.37);
    color: white;
}

.nav-item a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }

    .nav-scrollable.collapse:not(.show) {
        display: block;
    }

    .nav-scrollable {
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* ═══════════════════════════════════════════════════════════
   DrillHoleDesignDialog 样式
   ═══════════════════════════════════════════════════════════ */

/* ── 技术要求 Markdown 内容 ── */
.tech-req-md-content p {
    margin-bottom: 0.25em;
}

.tech-req-md-content ol,
.tech-req-md-content ul {
    margin-top: 0;
}

/* ── 技术要求 Markdown 有序列表多级编号样式 ── */
.tech-req-md-content ol {
    list-style-type: cjk-decimal;
}

.tech-req-md-content ol ol {
    list-style-type: decimal;
}

.tech-req-md-content ol ol ol {
    list-style-type: lower-alpha;
}

.tech-req-md-content ol ol ol ol {
    list-style-type: lower-roman;
}

/* ── 技术要求内联参数控件 ── */
.tech-req-inline-param {
    display: inline-flex;
    vertical-align: baseline;
}

.tech-req-inline-param .mud-input-control {
    width: 100%;
    min-width: 0;
}

/* ── 技术要求内联参数：输入文字黑色 & 下划线加强 ── */
.tech-req-inline-param .mud-input>input,
.tech-req-inline-param .mud-input .mud-select-input {
    color: var(--cf-text-primary) !important;
}

.tech-req-inline-param .mud-input-underline::before {
    border-bottom-color: var(--cf-border-strong) !important;
}

.tech-req-inline-param .mud-input-underline::after {
    border-bottom-color: var(--mud-palette-primary) !important;
}

/* ── 钻孔对话框内容容器 ── */
.drill-dialog-content {
    width: 100%;
    max-width: 100%;
    min-width: 700px;
    min-inline-size: 0;
    overflow-y: visible;
    overflow-x: hidden;
    padding-right: 0;
    max-height: none;
    box-sizing: border-box;
}

.drill-dialog-content > *,
.drill-dialog-content .mud-stack,
.drill-dialog-content .mud-grid,
.drill-dialog-content .mud-grid-item {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.drill-dialog-content--fullscreen {
    max-height: calc(100vh - 120px);
}

@media (max-width: 640px) {
    /* 手机端：钻孔设计弹窗去掉 700px 硬下限，否则会撑开 dialog 出现横向滚动条。 */
    .drill-dialog-content {
        min-width: 0;
        padding-right: 0;
    }
}

/* ── 区域标题 ── */
.drill-section-title {
    font-weight: 700;
    color: var(--cf-text-primary);
}

/* ── 钻孔表单标题栏（返回按钮 + 钻孔名称）下方间距 ── */
.drill-form-title-bar {
    margin-bottom: 20px;
}

/* ── 钻孔详情顶部钻孔切换器 ── */
.drill-hole-switcher {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cf-border-subtle);
    overflow-x: auto;
    flex-wrap: nowrap;
}

.drill-hole-switch-button {
    white-space: nowrap;
}

/* ── 钻孔信息/施工/报告页的钻孔切换栏：固定在页面标题下方 ── */
.drill-page-hole-switcher {
    position: sticky;
    top: calc(var(--cf-topbar-height) + 100px);
    z-index: 1270;
    margin: 0 0 24px;
    padding: 10px 0 12px;
    background-color: var(--cf-bg-surface);
    border-bottom: 1px solid var(--cf-border-subtle);
}

/* ── 大区域上方间距（钻孔基本信息/钻探设计/专项设计/技术要求） ── */
.drill-section-gap {
    margin-top: 40px;
}

.drill-edit-section > .mud-divider {
    margin-top: 12px !important;
    margin-bottom: 18px !important;
}

.drill-terminal-horizon-section {
    margin-top: 24px;
}

/* ── 关键工序与应对措施编辑模式边框 ── */
.kp-edit-border {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

/* ── 子标题加粗 ── */
.drill-subtitle {
    font-weight: 600;
}

/* ── 子标题加粗带上间距 ── */
.drill-subtitle-mt {
    font-weight: 600;
    margin-top: 8px;
}

/* ── 标签文字加粗 ── */
.drill-label-bold {
    font-weight: 500;
}

/* ── 标签文字加粗带下间距 ── */
.drill-label-bold-mb {
    font-weight: 500;
    margin-bottom: 4px;
}

/* ── 次要提示文字 ── */
.drill-text-muted {
    color: var(--cf-text-secondary);
}

/* ── 层位信息提示文字 ── */
.drill-horizon-hint {
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

/* ── 层位信息内联图标 ── */
.drill-icon-inline {
    vertical-align: middle;
    margin-top: -2px;
}

/* ── 钻孔列表表格 ── */
.drill-hole-table {
    max-height: 400px;
    overflow-y: auto;
}

/* ── 操作列宽度 ── */
.col-actions {
    width: 100px;
}

/* ── 层位选择器容器 ── */
.horizon-selector-box {
    width: 220px;
    border-bottom: 1px solid var(--mud-palette-action-default);
    position: relative;
    top: -4px;
}

/* ── 监测层位选择器容器 ── */
.monitor-horizon-selector {
    flex: 1;
    max-width: 300px;
    border-bottom: 1px solid var(--mud-palette-action-default);
}

/* ── 层位/菜单选择按钮 ── */
.horizon-select-btn {
    text-transform: none;
    width: 100%;
    justify-content: space-between;
    padding: 0px 8px 4px 8px;
}

/* ── 技术要求内层位选择按钮 ── */
.horizon-inline-btn {
    text-transform: none;
    padding: 0 2px;
    min-width: auto;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
    color: var(--cf-text-primary) !important;
}

/* ── 展示模式下禁用的层位选择按钮保持正文黑色 ── */
.horizon-inline-btn.mud-disabled,
.horizon-inline-btn:disabled,
.horizon-inline-btn.mud-disabled .mud-button-label,
.horizon-inline-btn:disabled .mud-button-label,
.horizon-inline-btn.mud-disabled .mud-icon-root,
.horizon-inline-btn:disabled .mud-icon-root {
    color: var(--cf-text-primary) !important;
    opacity: 1 !important;
}

/* ── 层位/清除按钮 ── */
.clear-btn-sm {
    padding: 4px;
}

.clear-btn-xs {
    padding: 2px;
}

/* ── 菜单 flex:1 ── */
.flex-fill {
    flex: 1;
}

/* ── 表单字段固定宽度 ── */
.field-w80 {
    width: 80px;
}

.field-w100 {
    width: 100px;
}

.field-w120 {
    width: 120px;
}

.field-w220 {
    width: 220px;
}

/* ── 终孔深度输入区 ── */
.field-depth-input {
    flex: 0 0 auto;
    width: 200px;
}

/* ── 开次距离输入区 ── */
.field-distance-flex {
    flex: 1;
    max-width: 240px;
}

/* ── 终孔层位占位区 ── */
.field-spacer-w216 {
    width: 216px;
}

/* ── 表单行间距 ── */
.form-gap-16 {
    gap: 16px;
}

/* ── 开关控件容器 ── */
.switch-container {
    width: 100px;
    position: relative;
    top: 3px;
}

/* ── 水文监测开关对齐 ── */
.switch-align-top {
    position: relative;
    top: 3px;
}

/* ── 子区域间距 ── */
.section-gap-top {
    margin-top: 16px;
}

/* ── 技术要求项目卡片（外层，不含边框） ── */
.tech-req-card {
    /* 小标题行不加边框，边框仅在内容区 */
    scroll-margin-top: 96px;
}

/* ── 技术要求操作区 ── */
.tech-req-actions {
    position: relative;
}

/* ── 钻孔设计 section 容器，作为标题行 sticky 的定位上下文 ── */
.drill-edit-section,
.tech-req-section {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* ──
   关键修复：MudCollapse 展开后默认会给 .mud-collapse-wrapper 设置 overflow-y: auto，
   这会让 wrapper 自身成为一个新的滚动祖先，导致内部 position: sticky 元素的粘附阈值
   相对于这个永远不滚动的 wrapper 计算，sticky 行为完全失效。
   仅在 .mud-collapse-entered 状态（展开完成）覆写为 visible，让 sticky 元素正确响应外层
   页面级滚动。折叠动画过程仍保留 overflow: hidden，不会破坏过渡效果。
── */
.drill-dialog-content .mud-collapse-entered .mud-collapse-wrapper {
    overflow: visible !important;
}

/* ── 钻孔设计标题行在编辑模式下悬浮 ── */
.drill-section-header-sticky,
.tech-req-header-sticky {
    position: sticky;
    top: calc(var(--cf-topbar-height) + 100px);
    z-index: 10;
    background: var(--mud-palette-surface);
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 4px;
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.08);
}

/* ── 钻孔设计 in-page 重排：取消内层标题悬浮，避免标题行截断输入框或后续内容 ── */
.drill-design-page {
    gap: 10px;
    padding-top: 12px;
}

.drill-design-page .cf-page-header {
    min-height: 44px;
    margin-top: -4px;
}

.drill-design-page .cf-page-body {
    gap: 12px;
}

.drill-design-page .drill-dialog-content {
    padding-top: 0;
}

.drill-design-page .mud-collapse-entered .mud-collapse-wrapper,
.drill-design-page .mud-collapse-entered .mud-collapse-wrapper-inner {
    overflow: visible !important;
}

.drill-design-page .drill-form-panel {
    padding: 0;
}

.drill-design-page .drill-hole-switcher {
    margin-top: 0;
    margin-bottom: 28px;
    padding: 10px 0 14px;
}

.drill-design-page .drill-edit-section,
.drill-design-page .tech-req-section {
    overflow: visible;
    padding: 18px 0 26px;
    border-bottom: 1px solid var(--cf-border-subtle);
}

.drill-design-page .drill-edit-section:first-of-type {
    padding-top: 4px;
}

.drill-design-page .drill-edit-section:last-of-type,
.drill-design-page .tech-req-section:last-of-type {
    border-bottom: none;
    padding-bottom: 8px;
}

.drill-design-page .drill-section-header-sticky,
.drill-design-page .tech-req-header-sticky {
    position: static;
    top: auto;
    z-index: auto;
    background: transparent;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

.drill-design-page .drill-section-title,
.drill-design-page .pumping-tech-req-title {
    color: var(--cf-text-primary) !important;
}

.drill-design-page .drill-edit-section > .mud-stack,
.drill-design-page .tech-req-section > .mud-stack,
.drill-design-page .pumping-tech-req-header {
    position: static;
    z-index: auto;
}

.drill-design-page .drill-section-gap {
    margin-top: 0;
}

.drill-design-page .drill-edit-section > .mud-stack:first-child,
.drill-design-page .tech-req-section > .mud-stack:first-child {
    min-height: 36px;
    margin-bottom: 8px;
}

.drill-design-page .drill-edit-section > .mud-divider,
.drill-design-page .tech-req-section > .mud-divider {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

.drill-design-page .drill-terminal-horizon-section {
    margin-top: 28px;
}

.drill-design-page .drill-subtitle-mt {
    margin-top: 20px;
}

.drill-design-page .horizon-selector-box {
    top: 0;
}

/* ── 任务取消文本按钮 ── */
.task-cancel-inline-button {
    text-decoration: underline;
    min-width: unset;
    padding: 0 4px;
}

/* ── 技术要求内容区边框 ── */
.tech-req-content-box {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 16px;
}

/* ── 技术要求内容区（内联参数模板） ── */
.tech-req-content-inline {
    line-height: 2.4;
    font-size: 1rem;
    color: var(--cf-text-primary);
}

.tech-req-json-param {
    width: 100%;
    margin: 8px 0;
}

.tech-req-multiline-param,
.tech-req-multiline-display {
    width: 100%;
    margin-top: 8px;
}

.special-template-blocks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.special-template-singleblock {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 10px 12px;
    background-color: var(--mud-palette-background);
}

.tech-req-json-param .plugging-method-table th,
.tech-req-json-param .plugging-method-table td {
    padding: 3px 8px;
    line-height: 1.25;
}

.tech-req-json-param .plugging-method-table .mud-table-cell,
.tech-req-json-param .mud-table-root th,
.tech-req-json-param .mud-table-root td {
    padding: 3px 8px;
    line-height: 1.25;
}

.tech-req-json-param .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.tech-req-json-param .mud-input-control-input-container {
    min-height: 0;
}

.tech-req-json-param .mud-input {
    margin-top: 0;
    min-height: 24px;
}

.tech-req-json-param .mud-input>input {
    height: 24px;
    min-height: 24px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.25;
}

.tech-req-json-param .mud-icon-button {
    width: 28px;
    height: 28px;
    padding: 2px;
}

.special-template-flow {
    padding: 4px 0;
}

.special-template-collapsible {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow: hidden;
}

/* ── 技术要求纯文本内容 ── */
.tech-req-static-text {
    color: var(--cf-text-primary);
    white-space: pre-wrap;
}

/* ── 技术要求 Markdown 渲染框 ── */
.tech-req-md-box {
    color: var(--cf-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 12px 16px;
}

/* ── 水文监测内容左对齐 ── */
.hydro-monitor-content-left {
    text-align: left;
    white-space: normal;
}

/* ── 水文监测层位下划线标记 ── */
.hydro-layer-underline {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── 抽水试验专项设计外层边框容器（完整封闭边框） ── */
.pumping-design-fieldset {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 16px;
}

/* ── 抽水试验专项设计标题文字 ── */
.pumping-design-legend-text {
    font-size: 0.875rem;
    white-space: nowrap;
}

/* ── 抽水试验专项设计内部内容区 ── */
.pumping-design-inner {
    padding: 0;
}

/* ── 抽水试验展示模式内容区（无边框） ── */
.pumping-view-content {
    padding: 0;
}

/* ── 抽水试验技术要求区域（与层位间距稍大） ── */
.pumping-tech-req-section {
    margin-top: 12px;
}

/* ── 抽水试验技术要求标题行 ── */
.pumping-tech-req-header {
    align-items: center;
}

/* ── 抽水试验技术要求小标题 ── */
.pumping-tech-req-title {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* ── 抽水试验技术要求 Markdown 渲染框（无外层边框） ── */
.pumping-tech-req-md-box {
    color: var(--cf-text-primary);
    padding: 8px 0 8px 28px;
}

/* ── 测录井显示文字 ── */
.well-logging-display {
    font-size: 1rem;
    color: var(--cf-text-primary);
}

/* ── 测录井内联选择器 ── */
.well-logging-inline-select {
    display: inline-flex;
    vertical-align: baseline;
    min-width: 120px;
    max-width: 360px;
}

/* ── 层位内联参数 ── */
.horizon-inline-param {
    display: inline-flex;
    vertical-align: baseline;
    align-items: center;
}

/* ── 头像按钮（MainLayout） ── */
.avatar-clickable {
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   通用工具类
   ═══════════════════════════════════════════════════════════ */

/* ── 字重 ── */
.fw-semibold {
    font-weight: 600;
}

.fw-medium {
    font-weight: 500;
}

.fw-medium-mb {
    font-weight: 500;
    margin-top: 4px;
}

/* ── 可点击元素 ── */
.clickable {
    cursor: pointer;
}

/* ── 文本对齐工具类（Bootstrap 风格命名，MudBlazor 9 未自带，由本项目补齐） ── */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* ═══════════════════════════════════════════════════════════
   认证页面（Login / Register）样式
   ═══════════════════════════════════════════════════════════ */

.auth-page-center {
    min-height: 80vh;
}

.auth-card {
    width: 100%;
    max-width: 400px;
}

@media (max-width: 640px) {
    /* 手机端：登录/注册/忘记密码/重置密码卡片收紧 padding 与上边距，
       让小屏幕上不至于内容被边缘吃掉。 */
    .auth-page-center {
        min-height: 0;
        margin-top: 24px !important;
    }

    .auth-card {
        padding: 20px !important;
        max-width: 100%;
    }

    /* 忘记密码验证码行：按钮换行到下方，避免水平挤压。 */
    .code-input-row {
        flex-wrap: wrap;
    }

    .code-input-row .send-code-btn {
        width: 100%;
        margin-top: 4px;
    }
}

/* ═══════════════════════════════════════════════════════════
   项目基本信息 in-page 样式
   ═══════════════════════════════════════════════════════════ */

.project-detail-loading {
    min-height: 200px;
}

.content:has(.project-detail-page) {
    min-height: calc(100vh - var(--cf-topbar-height));
    background-color: var(--cf-bg-surface);
}

.project-detail-page {
    background-color: var(--cf-bg-surface);
}

.project-detail-body {
    width: 100%;
}

.project-detail-body > .mud-paper {
    border-color: var(--cf-border-default);
    border-radius: var(--cf-radius-lg);
    background: var(--cf-bg-surface);
    overflow: hidden;
}

.project-detail-body > .mud-paper > .mud-stack:first-child {
    min-height: 42px;
    margin: -16px -16px 16px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--cf-border-subtle);
    background: var(--cf-bg-subtle);
}

.project-detail-body > .mud-paper .mud-typography-subtitle1,
.project-detail-body > .mud-paper .mud-typography-subtitle2 {
    color: var(--cf-text-secondary);
    font-size: 0.875rem;
}

.project-detail-body .mud-icon-button {
    width: 32px;
    height: 32px;
    color: var(--cf-text-secondary);
}

.project-detail-body .mud-grid-item {
    min-width: 0;
}

.role-card-bg {
    background: var(--cf-bg-subtle);
    text-align: center;
    border: 1px solid var(--cf-border-subtle);
    border-radius: var(--cf-radius-md);
}

.outsource-card-bg {
    background: var(--cf-bg-subtle);
    border: 1px solid var(--cf-border-subtle);
    border-radius: var(--cf-radius-md);
}

.coord-file-alert {
    border-color: var(--mud-palette-dark);
    color: var(--mud-palette-dark);
}

.coord-file-alert-header {
    font-weight: 600;
    margin-bottom: 4px;
}

.coord-file-alert-list {
    margin: 0 0 0 20px;
    padding: 0;
    line-height: 1.7;
}

.coord-error-list {
    margin: 4px 0 0 16px;
    padding: 0;
}

.coord-point-count {
    color: #757575;
    margin-left: 16px;
}

.coord-select-min {
    min-width: 200px;
}

.coord-data-table {
    max-height: 300px;
    overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════
   Admin 样式
   ═══════════════════════════════════════════════════════════ */

.admin-form-row {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.admin-group-select {
    width: 210px;
}

.admin-validity-select {
    width: 120px;
}

.admin-group-desc {
    color: #757575;
    margin-top: -4px;
}

.admin-company-type-select {
    width: 200px;
}

.admin-company-name-input {
    min-width: 240px;
    flex: 1;
}

.admin-company-type-desc {
    color: #757575;
    margin-top: -8px;
}

@media (max-width: 640px) {
    /* 手机端：admin-form-row 里的所有固定宽度控件展开到全宽，避免水平拥挤。 */
    .admin-form-row {
        align-items: stretch;
    }

    .admin-form-row .admin-group-select,
    .admin-form-row .admin-validity-select,
    .admin-form-row .admin-company-type-select,
    .admin-form-row .admin-company-name-input {
        width: 100%;
        min-width: 0;
    }

    /* 添加按钮拉满，按钮行不需要 align-end。 */
    .admin-form-row .mud-button {
        width: 100%;
    }
}

.admin-template-content-cell {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 500px;
}

/* ═══════════════════════════════════════════════════════════
   CompanyEditDialog 样式
   ═══════════════════════════════════════════════════════════ */

.company-edit-left {
    flex: 1;
    min-width: 420px;
}

.company-edit-right {
    width: 350px;
    min-width: 350px;
}

.dept-row {
    width: 100%;
}

.dept-name-container {
    flex: 1;
    overflow: hidden;
}

.dept-name-text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   ProjectCreateDialog 样式
   ═══════════════════════════════════════════════════════════ */

.project-create-body {
    min-width: 560px;
    max-height: 70vh;
    overflow-y: auto;
}

.project-role-autocomplete-popover {
    overflow-y: hidden !important;
    max-height: none !important;
}

.project-role-autocomplete-popover .mud-list {
    max-height: 280px;
    overflow-y: auto;
}

.md-preview-box {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════
   Projects 样式
   ═══════════════════════════════════════════════════════════ */

/* ── 多行文本编辑框：支持拖拽改变高度 ── */
textarea {
    resize: vertical !important;
}

.project-create-btn-wrapper {
    display: flex;
    justify-content: flex-start;
}

.project-status-select {
    min-width: 80px;
}

@media (max-width: 640px) {
    /* 手机端"新建项目"按钮拉满宽度，便于拇指点击。 */
    .project-create-btn-wrapper {
        justify-content: stretch;
    }

    .project-create-btn-wrapper .mud-button {
        width: 100%;
    }

    /* MudTable 在 <Sm 断点下切换为卡片堆叠模式（MudBlazor 内置），
       此处只把状态选择器的最小宽度放开，让堆叠卡片里的状态选项不被截断。 */
    .project-list-table .project-status-select {
        min-width: 100%;
    }
}

/* ── 层位验证错误文字 ── */
.horizon-validation-error {
    color: #d32f2f;
    font-size: 0.75rem;
    margin-top: 2px;
    line-height: 1.3;
}

/* ── ProjectCreateDialog 删除矿区/井田按钮 ── */
.mining-delete-btn {
    font-size: 0.75rem !important;
    min-height: 28px;
    padding: 2px 8px !important;
    width: fit-content;
}

/* ═══════════════════════════════════════════════════════════
   JSON 编辑器样式
   ═══════════════════════════════════════════════════════════ */

/* ── JSON 编辑器容器 ── */
.json-editor-container {
    position: relative;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow: hidden;
}

/* ── JSON 编辑器文本域 ── */
.json-editor-textarea {
    width: 100%;
    min-height: 160px;
    padding: 12px 16px;
    font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--cf-text-primary);
    background-color: var(--cf-bg-subtle);
    border: none;
    outline: none;
    resize: vertical !important;
    -moz-tab-size: 2;
    tab-size: 2;
    white-space: pre;
    overflow-x: auto;
    box-sizing: border-box;
}

.json-editor-textarea:focus {
    background-color: var(--cf-bg-surface);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.json-editor-textarea::placeholder {
    color: var(--cf-text-tertiary);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   堵漏方法表格样式
   ═══════════════════════════════════════════════════════════ */

/* ── 堵漏方法 HTML 表格（由 PluggingJsonHelper.ToHtmlTable 生成） ── */
.plugging-method-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow: hidden;
    font-size: 0.875rem;
}

.plugging-method-table thead tr {
    background-color: var(--mud-palette-background);
}

.plugging-method-table th {
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    border-bottom: 2px solid var(--mud-palette-lines-default);
}

.plugging-method-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    vertical-align: top;
}

.plugging-method-table tbody tr:last-child td {
    border-bottom: none;
}

.plugging-method-table tbody tr:hover {
    background-color: var(--cf-bg-hover);
}

/* ═══════ 通知系统 ═══════ */

.notification-popover {
    z-index: 10001;
}

.notification-panel {
    width: 380px;
    max-height: 480px;
    display: flex;
    flex-direction: column;
}

.notification-list {
    overflow-y: auto;
    max-height: 400px;
}

.notification-item {
    cursor: pointer;
    transition: background-color 0.15s;
}

.notification-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.notification-unread {
    background-color: rgba(25, 118, 210, 0.06);
}

.notification-title {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-message {
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-message-full {
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
}

.notification-item-inner {
    display: flex;
    align-items: stretch;
}

.notification-item-content {
    flex: 1;
    min-width: 0;
}

.notification-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    overflow: hidden;
    cursor: pointer;
    transition: width 0.15s, background-color 0.15s;
    flex-shrink: 0;
}

.notification-item:hover .notification-expand-btn {
    width: 32px;
    background-color: rgba(0, 0, 0, 0.06);
}

.notification-expand-btn:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.notification-action-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    overflow: hidden;
    cursor: pointer;
    transition: width 0.15s, background-color 0.15s;
    flex-shrink: 0;
    flex-direction: column;
}

.notification-item:hover .notification-action-btns {
    width: 36px;
    background-color: rgba(0, 0, 0, 0.06);
}

.notification-action-btns:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.notification-tabs .mud-tabs-tabbar {
    min-height: 36px;
    width: 100% !important;
}

.notification-tabs .mud-tabs-tabbar-content {
    width: 100% !important;
}

.notification-tabs .mud-tabs-tabbar-content .mud-tabs-tabbar-wrapper {
    width: 100% !important;
}

.notification-tabs .mud-tabs-tabbar-wrapper>.mud-tooltip-root {
    flex: 1 1 50% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.notification-tabs .mud-tab {
    flex: 1 1 50% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.notification-badge-sm .mud-badge {
    font-size: 0.625rem;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
}

.notification-tabs .mud-badge-dot {
    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
}

.notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
}

/* ═══════ 钻具组合区域 ═══════ */

.drill-tool-assembly-highlight {
    border: 2px solid #f44336;
    border-radius: 4px;
    padding: 12px;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

.drill-tool-assembly-review-info {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.task-status-text-red {
    font-size: 0.85rem;
    color: #f44336;
    white-space: nowrap;
}

.task-status-text-submitted {
    font-size: 0.85rem;
    color: #f44336;
    white-space: nowrap;
}

.task-history-link {
    font-size: 0.85rem !important;
    color: #9e9e9e !important;
    text-transform: none !important;
    min-width: auto !important;
    padding: 0 4px !important;
    cursor: pointer;
}

.task-history-link:hover {
    text-decoration: underline;
    color: #757575 !important;
}

.task-history-popover {
    padding: 16px;
    max-width: 640px;
    max-height: 400px;
    overflow-y: auto;
}

/* ═══════════════════════════════════════════ */
/*        全局搜索覆盖层 (GlobalSearch)         */
/* ═══════════════════════════════════════════ */

.gs-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--cf-overlay-dark, rgba(0, 0, 0, 0.5));
    z-index: 10100;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gs-container {
    width: 100%;
    max-width: 720px;
    background: var(--cf-bg-surface);
    color: var(--cf-text-primary);
    border: 1px solid var(--cf-border-default);
    border-radius: 12px;
    box-shadow: var(--cf-shadow-modal);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

.gs-input-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cf-border-default);
    min-height: 48px;
}

.gs-chip {
    margin: 0 !important;
}

.gs-input {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    font-size: 16px;
    line-height: 24px;
    background: transparent;
    color: var(--cf-text-primary);
}

.gs-input::placeholder {
    color: var(--cf-text-tertiary);
}

.gs-hints {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--cf-border-subtle);
}

.gs-hint-text {
    font-size: 12px;
    color: var(--cf-text-secondary);
}

.gs-loading {
    padding: 0 16px;
}

.gs-results {
    overflow-y: auto;
    max-height: calc(70vh - 100px);
    padding: 4px 0;
}

.gs-section-header {
    display: flex;
    align-items: center;
    padding: 8px 16px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--cf-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gs-result-item {
    display: flex;
    align-items: flex-start;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.1s;
}

.gs-result-item:hover,
.gs-result-item-active {
    background: var(--cf-bg-hover);
}

.gs-result-icon {
    margin-top: 2px;
    color: var(--cf-text-secondary);
    flex-shrink: 0;
}

.gs-result-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.gs-result-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--cf-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-result-subtitle {
    font-size: 12px;
    color: var(--cf-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.gs-result-path {
    color: var(--cf-text-tertiary);
}

.gs-result-match {
    color: var(--cf-text-secondary);
}

.gs-result-badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--cf-info-bg);
    color: var(--cf-info);
    margin-left: 6px;
    vertical-align: middle;
    font-weight: 500;
}

.gs-highlight {
    background: var(--cf-warning-bg);
    color: var(--cf-warning);
    padding: 0 1px;
    border-radius: 2px;
    font-weight: 600;
}

.gs-no-results {
    padding: 24px 16px;
    text-align: center;
}

/* 顶栏搜索按钮 */
.gs-topbar-search {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--cf-border-default);
    border-radius: var(--cf-radius-md);
    cursor: pointer;
    background: var(--cf-bg-subtle);
    transition: border-color 120ms ease, background-color 120ms ease;
    min-width: 280px;
    max-width: 400px;
}

.gs-topbar-search:hover {
    border-color: var(--cf-border-strong);
    background: var(--cf-bg-surface);
}

.gs-topbar-search-icon {
    color: var(--cf-text-tertiary);
}

.gs-topbar-placeholder {
    flex: 1;
    font-size: 13px;
    color: var(--cf-text-tertiary);
    -webkit-user-select: none;
    user-select: none;
}

.gs-topbar-shortcut {
    font-size: 11px;
    color: var(--cf-text-tertiary);
    background: var(--cf-bg-muted);
    border: 1px solid var(--cf-border-default);
    border-radius: var(--cf-radius-sm);
    padding: 1px 6px;
    margin-left: 8px;
    font-family: var(--cf-font-mono);
}

/* 操作符提示圆形图标 */
.gs-hint-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    flex-shrink: 0;
    -webkit-user-select: none;
    user-select: none;
}

.gs-hint-circle:hover {
    opacity: 0.8;
}

.gs-hint-circle-info {
    background: #e3f2fd;
    color: #1976d2;
}

.gs-hint-circle-success {
    background: #e8f5e9;
    color: #388e3c;
}

.gs-hint-circle-warning {
    background: #fff3e0;
    color: #f57c00;
}

/* 搜索结果回车图标 */
.gs-result-enter {
    flex-shrink: 0;
    color: #bdbdbd;
    margin-left: 8px;
    align-self: center;
}

.gs-result-item-active .gs-result-enter {
    color: #757575;
}

/* 手机端悬浮搜索按钮 */
.gs-fab-mobile {
    display: none;
}

@media (max-width: 768px) {
    .gs-fab-mobile {
        display: block;
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 9999;
        /* touch-action: none 让浏览器在 pointer 事件期间不抢走手势（不滚动页面），
           cursor: grab 给桌面浏览器一个可拖动的视觉提示。 */
        touch-action: none;
        cursor: grab;
    }

    .gs-fab-mobile:active {
        cursor: grabbing;
    }

    .gs-topbar-search {
        display: none !important;
    }

    .gs-container {
        max-width: 95vw;
    }
}

/* ────────── FileUploadCard 单行布局 ────────── */

.file-card-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.file-card-category-chip {
    flex-shrink: 0;
}

/* ────────── 多文件批量上传：已选文件列表 ────────── */

.file-upload-batch-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-upload-batch-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    border-radius: 6px;
}

.file-upload-batch-row:hover {
    background: var(--cf-bg-subtle);
}

.file-upload-batch-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-upload-batch-status {
    flex-shrink: 0;
}

/* ────────── Home Layout ────────── */

.home-page-header {
    padding: 16px 0;
}

.home-layout {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    min-height: calc(100vh - 64px);
    gap: 0;
}

.home-left,
.home-center {
    min-width: 0;
}

.home-right {
    position: relative;
}

.vp-sidebar {
    position: sticky;
    top: 80px;
    padding: 16px 12px 16px 0;
}

.vp-timeline-scroll {
    --vp-timeline-item-height: 112px;
    --vp-timeline-visible-height: 472px;
    max-height: var(--vp-timeline-visible-height);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    /* 默认滚动条完全透明（Firefox），悬停 timeline 区域时淡入。 */
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.2s ease;
}

.vp-timeline-scroll:hover {
    scrollbar-color: #bdbdbd transparent;
}

.vp-timeline-scroll::-webkit-scrollbar {
    /* 保留 4px 宽度的轨道占位，确保 hover 时滚动条出现不会导致内容横向回流。 */
    width: 4px;
}

.vp-timeline-scroll::-webkit-scrollbar-thumb {
    /* WebKit (Chrome/Safari/Edge)：拇指默认透明，由 hover 触发淡入。 */
    background: transparent;
    border-radius: 2px;
    transition: background-color 0.2s ease;
}

.vp-timeline-scroll:hover::-webkit-scrollbar-thumb {
    background: #bdbdbd;
}

.vp-sidebar .mud-timeline {
    margin-left: 0;
}

.vp-sidebar .mud-timeline-vertical .mud-timeline-item {
    min-height: var(--vp-timeline-item-height);
    padding-bottom: 16px;
}

.vp-sidebar .mud-timeline-item-content {
    overflow: visible;
}

.vp-responsible-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.vp-responsible-content {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.vp-responsible-label,
.vp-responsible-empty {
    color: #5f6b7a;
    white-space: nowrap;
}

.vp-responsible-name {
    min-width: 0;
    padding: 0 !important;
    justify-content: flex-start;
    text-transform: none !important;
}

.vp-responsible-name .mud-button-label {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

.vp-responsible-select {
    min-width: 180px;
    max-width: 220px;
}

.vp-responsible-select .mud-input-slot {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vp-responsible-action {
    margin-left: 2px;
}

.vp-empty-state {
    color: #7d8896;
}

.vp-timeline-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vp-timeline-desc {
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    max-height: 4.5em;
    cursor: default;
    transition: max-height 0.3s ease;
}

.vp-timeline-desc:hover {
    line-clamp: unset;
    -webkit-line-clamp: unset;
    max-height: 600px;
    overflow: visible;
}

@media (max-width: 960px) {
    .vp-sidebar {
        position: static;
        max-height: none;
        padding-right: 0;
    }

    .vp-responsible-row {
        align-items: flex-start;
    }

    .vp-responsible-content {
        flex-wrap: wrap;
    }

    .vp-responsible-select {
        min-width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    /* 手机端：放弃 3 列网格，单列堆叠展示。home-left/center 为空占位，直接隐藏，把
       含真正内容的 home-right 拉满。同时收敛 timeline / 负责人区的横向尺寸。 */
    .home-layout {
        display: block;
    }

    .home-left,
    .home-center {
        display: none;
    }

    .home-right {
        width: 100%;
    }

    .vp-sidebar {
        padding: 12px 4px;
    }

    /* 手机端取消 timeline 标题强制单行，避免长版本号被截断。 */
    .vp-timeline-title {
        white-space: normal;
        word-break: break-word;
    }

    /* 负责人名字按钮取消固定 max-width=180px 的限制，按可用宽度展开。 */
    .vp-responsible-name .mud-button-label {
        max-width: 100%;
    }

    /* 手机端 timeline 可视高度更紧凑，避免占满整屏。 */
    .vp-timeline-scroll {
        --vp-timeline-visible-height: 60vh;
    }

    /* 手机端 timeline 描述展开行数减少，hover 展开改为 :focus-within 同时支持触屏点击。 */
    .vp-timeline-desc {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        max-height: 3em;
    }

    .vp-timeline-desc:hover,
    .vp-timeline-desc:focus-within {
        -webkit-line-clamp: unset;
        line-clamp: unset;
        max-height: 600px;
    }
}

/* ── 重置密码页面 - 规则面板绝对定位于卡片右侧 ── */
/* .reset-pw-outer 是 MudPaper 的直接父容器，position:relative 是绝对定位的锚点 */
.reset-pw-outer {
    position: relative;
    width: 100%;
    max-width: 400px;
    overflow: visible;
}

/* top:142px = pa-10(40) + h4行高(42) + subtitle行高(28) + mb-8(32) */
.password-rules-side {
    position: absolute;
    left: calc(100% + 5px);
    top: 142px;
    width: 152px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 6px 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1;
}

/* 屏幕较窄时卡片右侧没有空间，隐藏侧边面板 */
@media (max-width: 860px) {
    .password-rules-side {
        display: none;
    }
}

/* ── 忘记密码页面 - 验证码行布局 ── */
/* align-items: flex-start 让按钮顶部与输入框顶部对齐，
   HelperText=" " 让 MudTextField 高度固定不因错误文本增加 */
.code-input-row {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.code-input-row .code-input-field {
    flex: 1;
    min-width: 0;
}

.code-input-row .send-code-btn {
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 72px;
    margin-top: 10px;
    font-size: 0.8125rem;
    letter-spacing: 0;
}

/* ── 钻孔列表 - 操作列菜单 ── */
.drill-hole-table .col-actions {
    width: 80px;
    text-align: center;
}

.drill-hole-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 菜单弹层中，将“删除”项与其他项做视觉分隔（增加上方间距 + 红色文字） */
.drill-hole-action-delete {
    color: var(--mud-palette-error) !important;
    margin-top: 4px;
}

.drill-hole-action-delete .mud-list-item-text {
    color: var(--mud-palette-error) !important;
}

/* ── 钻孔报告弹窗布局 ── */
.drill-reports-layout {
    display: flex;
    gap: 16px;
    align-items: stretch;
    min-height: 360px;
}

.drill-reports-tree {
    flex: 1;
    min-width: 0;
}

.drill-reports-file-tree {
    max-height: 52vh;
}

.drill-report-empty-row {
    min-height: 32px;
}

.drill-reports-config {
    width: 360px;
    flex-shrink: 0;
    border-left: 1px solid var(--mud-palette-divider);
    padding-left: 16px;
    animation: drill-reports-config-slide 160ms ease-out;
}

@keyframes drill-reports-config-slide {
    from {
        opacity: 0;
        transform: translateX(8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.drill-reports-config-paper {
    background-color: var(--mud-palette-surface);
}

.drill-reports-config-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.drill-reports-config-label {
    min-width: 80px;
    flex-shrink: 0;
}

.drill-reports-config-select {
    min-width: 120px;
    flex: 1;
}

@media (max-width: 640px) {
    /* 手机端：钻孔报告弹窗双栏 (tree + config) 改为竖直堆叠，避免 360px 固定宽度撑屏。 */
    .drill-reports-layout {
        flex-direction: column;
        min-height: 0;
        gap: 12px;
    }

    .drill-reports-config {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--mud-palette-divider);
        padding-left: 0;
        padding-top: 12px;
    }

    /* 文件树在手机端高度收缩，避免占满整屏。 */
    .drill-reports-file-tree {
        max-height: 40vh;
    }
}

.drill-reports-template-note {
    line-height: 1.8;
}

.drill-report-generate-download-link {
    color: var(--mud-palette-error) !important;
    min-width: unset;
    padding: 0 4px;
    vertical-align: baseline;
}

/* file tree 单行布局：图标 + 文本 + 操作按钮组 */
.drill-report-row-content {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.drill-report-row-icon {
    flex-shrink: 0;
}

.drill-report-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drill-report-row-meta {
    color: var(--mud-palette-text-secondary);
}

.drill-report-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* 历史版本弹窗 - 备注列宽度限制，避免长文本撑爆表格 */
.report-version-message {
    max-width: 320px;
    word-break: break-all;
    color: var(--mud-palette-text-secondary);
}

.admin-svg-threat-content {
    display: block;
    max-width: 360px;
    max-height: 96px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--mud-palette-error);
}

.admin-svg-threat-key {
    display: block;
    max-width: 260px;
    word-break: break-all;
    color: var(--mud-palette-text-secondary);
}

.admin-entry-check-message {
    display: block;
    max-width: 320px;
    word-break: break-all;
    color: var(--mud-palette-text-secondary);
}

.admin-page-tabs {
    --admin-top-row-height: 0px;
    --admin-tabbar-height: 48px;
    --admin-sticky-gap: 0.1px;
}

.admin-page-tabs>.mud-tabs-tabbar {
    position: sticky;
    top: calc(var(--admin-top-row-height) + var(--admin-sticky-gap));
    z-index: 20;
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.08);
}

.admin-entry-check-editor {
    width: 100%;
    scroll-margin-top: calc(var(--admin-top-row-height, 0px) + var(--admin-sticky-gap, 8px) + var(--admin-tabbar-height, 48px) + 16px);
}

.admin-entry-check-header-sticky {
    position: sticky;
    top: calc(var(--admin-top-row-height, 0px) + var(--admin-sticky-gap, 8px) + var(--admin-tabbar-height, 48px));
    z-index: 15;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 4px;
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.08);
}

.admin-entry-check-table-collapsed {
    align-self: flex-start;
    min-width: unset;
    padding-left: 0;
}

@media (min-width: 641px) {
    .admin-page-tabs {
        /* 累计高度：顶部 navbar (--cf-topbar-height 3.5rem) + 面包屑 48px + 页面标题区域 ~52px。
           三层都已 position:sticky，单算 navbar 会让 tabbar 卡在面包屑后面，视觉上像被滚出。 */
        --admin-top-row-height: calc(3.5rem + 100px);
    }
}

.admin-entry-check-category {
    width: 100%;
}

.admin-entry-check-category-title {
    margin-bottom: 8px;
}

.admin-entry-check-item-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.admin-entry-check-item-row:last-of-type {
    border-bottom: none;
}

.admin-entry-check-item-fields {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.admin-entry-check-item-config {
    display: grid;
    grid-template-columns: minmax(140px, 0.7fr) repeat(2, minmax(180px, 1fr));
    gap: 8px;
}

.admin-entry-check-item-id {
    width: 32px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .admin-entry-check-item-config {
        grid-template-columns: 1fr;
    }

    .entry-check-role-conditions {
        grid-column: 1 / -1;
    }
}

/* 开工验收岗位类条目：岗位条件序列容器，横跨「完成方式」右侧的配置区。 */
.entry-check-role-conditions {
    grid-column: 2 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 单条岗位条件行：岗位下拉（占满）+ 连接符下拉（定宽）+ 删除按钮。 */
.entry-check-role-condition-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.entry-check-role-condition-row > .mud-input-control:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

/* 连接符下拉与末条占位块：定宽，保持各行岗位下拉左对齐。 */
.entry-check-connector-select {
    flex: 0 0 84px;
    width: 84px;
}

/* 开工验收「施工队岗位」多选弹层：MudSelect 默认会让 .mud-popover 与内部 .mud-list
   同时 overflow-y: auto，岗位枚举较长时出现双滚动条；将滚动收敛到内部 list。 */
.entry-check-role-popover {
    overflow-y: hidden !important;
    max-height: none !important;
}

.entry-check-role-popover .mud-list {
    max-height: 280px;
    overflow-y: auto;
}

/* 文件模板选择器弹层：同样将滚动收敛到内部 list，避免双滚动条。 */
.report-template-picker-popover {
    overflow-y: hidden !important;
    max-height: none !important;
}

.report-template-picker-popover .mud-list {
    max-height: 320px;
    overflow-y: auto;
}

/* 文件模板选择器中的类别表头条目（禁用、不可选，仅作分组分隔）。 */
.report-template-picker-header {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    opacity: 1 !important;
}

/* 特种作业证书类条目的说明文案，与「完成方式」下拉垂直居中对齐。 */
.admin-entry-check-cert-hint {
    align-self: center;
}

/* ═══════ 钻孔施工页 ═══════
   钻孔施工页主体继续沿用 .cf-page 的 1080px 居中骨架；
   左侧 Stepper 不参与主体布局，固定侧挂在主体左边缘外侧，避免施工页与信息/报告页切换时主体左右跳。
   MudBlazor 9.0 的 MudStepper 不支持垂直方向，所以用 button 自实现 step 切换。 */

.borehole-construction-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.borehole-construction-wrap > .cf-page.borehole-construction-page {
    min-width: 0;
}

.borehole-construction-page .cf-page-body {
    overflow: visible;
}

.construction-stepper-nav {
    position: fixed;
    top: calc(var(--cf-topbar-height) + 56px);
    left: calc(50% + var(--cf-sidebar-center-offset) - 540px - 161px);
    z-index: 1260;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 156px;
    padding: 14px 0 0;
    background: transparent;
    border: none;
}

.construction-stepper-nav-title {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    color: var(--cf-text-secondary) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin: 0 0 6px 12px !important;
    line-height: 1.4 !important;
}

.construction-step-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    color: var(--cf-text-secondary);
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.4;
    transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.construction-step-item:hover {
    background: var(--cf-bg-hover);
    color: var(--cf-text-primary);
}

.construction-step-item--active {
    color: var(--mud-palette-primary);
    border-left-color: var(--mud-palette-primary);
    font-weight: 600;
}

.construction-step-item--completed {
    color: var(--cf-text-primary);
}

.construction-step-icon {
    flex-shrink: 0;
    color: currentColor;
}

.construction-step-title {
    min-width: 0;
}

.construction-stepper-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.construction-stepper-nav-row {
    width: 100%;
    display: flex;
    align-items: center;
    /* 两个按钮直接子元素，space-between 自动让它们一个靠左、一个靠右，无需 MudSpacer。 */
    justify-content: space-between;
    gap: 8px;
    padding: 12px 0 8px;
    margin-top: 8px;
    border-top: 1px solid var(--cf-border-subtle);
}

@media (max-width: 1679px) {
    /* 侧向空间不足时，把 Stepper 放到钻孔切换栏下方，并使用自适应网格避免挤入左侧边栏。 */
    .construction-stepper-nav {
        position: static;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        overflow-x: visible;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .construction-stepper-nav-title {
        display: none;
    }

    .construction-step-item {
        min-width: 0;
        justify-content: center;
        border-left: none;
        border-bottom: 2px solid transparent;
        padding: 8px 12px;
        text-align: center;
    }

    .construction-step-item--active {
        border-left-color: transparent;
        border-bottom-color: var(--mud-palette-primary);
    }

    .construction-step-title {
        overflow-wrap: anywhere;
    }
}

.entry-check-sticky-panel {
    /* sticky top 要跟 .drill-page-hole-switcher 的 sticky bottom 紧贴：
       Switcher 贴在 topbar+100px、自身约 54px 高，底部约在 topbar+154px。
       这里取 topbar+150px 让本面板与上方 Switcher 重叠 4px，
       因 Switcher z-index=1270 远高于本面板 z-index=11，重叠区域
       会被 Switcher 覆盖，避免滚动时内容从两个 sticky 之间的缝隙"溜"出来。 */
    position: sticky;
    top: calc(var(--cf-topbar-height) + 150px);
    z-index: 11;
    margin: -8px -8px 8px;
    padding: 8px;
    background: var(--cf-bg-surface);
    border-bottom: 1px solid var(--cf-border-subtle);
}

.entry-check-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.entry-check-source-text {
    min-width: 0;
}

.entry-check-action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.entry-check-item {
    padding: 4px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.entry-check-item:last-child {
    border-bottom: none;
}

.entry-check-checked {
    text-decoration: none;
    color: var(--mud-palette-text-primary);
}

.entry-check-required-file {
    margin: 2px 0 10px 34px;
    padding: 10px;
    border-left: 3px solid var(--mud-palette-primary);
    background: var(--mud-palette-background);
}

.drilling-daily-report-panels .mud-expand-panel {
    border: 1px solid var(--mud-palette-lines-default);
    margin-bottom: 8px;
}

.construction-settings-panels .mud-expand-panel {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    margin-bottom: 8px;
}

.construction-settings-report-divider {
    margin: 12px 0;
}

.retest-coordinate-section {
    padding: 12px 0;
}

.retest-coordinate-section--active-task {
    border: 2px solid #f44336;
    border-radius: 4px;
    padding: 12px;
}

.construction-stage-main {
    min-width: 0;
}

.daily-report-status-section {
    /* 与 .entry-check-sticky-panel 同理：sticky top 设为 cf-topbar-height + 150px，
       与上方 DrillHoleSwitcher（贴在 topbar+100、高 ~54px → 底部约 topbar+154px）形成 4px 重叠，
       因 Switcher z-index=1270 高于本节点，重叠区由 Switcher 覆盖。用户点击日报方格触发
       自动滚动时，会落到这个 sticky 位置；继续手动下滚时，方格区也会停在原位不再移动。 */
    position: sticky;
    top: calc(var(--cf-topbar-height) + 150px);
    z-index: 10;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

/* 桌面端：竖向 7 行（代表一周），列数随方格数量自动扩展。
   ───────────────────────────────────────────────────────────
   原本用 flex+wrap+max-height 模拟分列，但 MudTooltip 的 inline-block 包裹层
   会因 baseline 把 flex item 撑得高于 14px，导致一列塞不下 7 个、且相邻列
   高度不一致时上下错位。改用 grid 显式锁死每行 14px，彻底解决这两个问题。 */
.daily-report-status-grid {
    display: grid;
    grid-template-rows: repeat(7, 14px);
    grid-auto-flow: column;
    grid-auto-columns: 14px;
    gap: 2px;
    width: 100%;
    overflow: visible;
}

/* 强制每个 grid item 及其 Mud 包裹层为严格 14×14 block：
   - 取消 .mud-tooltip-root 默认的 inline-block（baseline 不稳）
   - 让 .mud-menu 这层 div 不再以"自然内容高"撑大单元格
   仅在本 grid 内生效，不污染其他位置的 MudTooltip / MudMenu。 */
.daily-report-status-grid > *,
.daily-report-status-grid .mud-tooltip-root,
.daily-report-status-grid .mud-tooltip-root.mud-tooltip-inline,
.daily-report-status-grid .mud-menu {
    display: block;
    width: 14px;
    height: 14px;
    line-height: 0;
}

.daily-report-status-square {
    width: 14px;
    height: 14px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.daily-report-status-square--archived {
    background: #43a047;
}

.daily-report-status-square--submitted {
    background: #fbc02d;
}

.daily-report-status-square--rejected {
    background: #e57373;
}

.daily-report-status-square--pending-reedit {
    /* 已修改待复核：橙色斜纹背景，让其在 Submitted 黄色和 Archived 绿色之间形成明显视觉差异，提示 CCTEG 需进入对比弹窗复核。 */
    background: repeating-linear-gradient(
        135deg,
        #fb8c00 0 4px,
        #ef6c00 4px 8px
    );
}

.daily-report-status-square--missing {
    background: #bdbdbd;
}

.daily-report-status-square--default {
    background: var(--mud-palette-lines-default);
}

.daily-report-status-square:hover,
.daily-report-status-square:focus-visible {
    outline: 2px solid #f6821f;
    outline-offset: 1px;
}

.daily-report-status-square--selected {
    box-shadow: 0 0 0 2px #f6821f;
    position: relative;
    z-index: 1;
}

.daily-report-status-square--task-active,
.daily-report-status-square--task-active:hover,
.daily-report-status-square--task-active:focus-visible,
.daily-report-status-square--task-active.daily-report-status-square--selected {
    outline: none;
    box-shadow: 0 0 0 2px var(--mud-palette-error);
    position: relative;
    z-index: 1;
}

.daily-report-detail-panel {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    position: relative;
}

.daily-report-detail-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 8px 8px 0 0;
    background: #f6821f;
}

.daily-report-detail-header {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 12px;
}

.daily-report-reporter-button {
    color: #374151 !important;
    min-width: 0;
    padding: 0 4px;
    text-transform: none;
}

.daily-report-reporter-button:hover {
    color: #c2410c !important;
    background: rgba(246, 130, 31, 0.08) !important;
}

.daily-report-approver-text {
    color: #4b5563;
}

.daily-report-section-heading {
    margin-top: 4px;
}

.daily-report-section-title {
    color: #111827;
    font-weight: 650;
}

.daily-report-metric-grid {
    margin-top: 0;
}

.daily-report-info-tile {
    height: 100%;
    min-height: 68px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
    box-sizing: border-box;
}

.daily-report-info-label {
    margin-bottom: 4px;
    color: #6b7280;
    font-size: 0.75rem;
    line-height: 1.2;
}

.daily-report-info-value {
    color: #111827;
    font-size: 0.95rem;
    line-height: 1.45;
    font-weight: 500;
    word-break: break-word;
}

.daily-report-condition-table {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.daily-report-condition-table th {
    background: #f9fafb;
    color: #4b5563;
    font-weight: 650;
}

.daily-report-condition-table td {
    border-top: 1px solid #f0f0f0;
}

.daily-report-plan-box {
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
}

/* 移动端：横向 7 列（代表一周），行数随方格数量自动扩展。
   wrapper 强制尺寸的规则在桌面段已声明，本媒体查询仅切换 grid 主轴。 */
@media (max-width: 600px) {
    .daily-report-status-grid {
        grid-template-rows: 14px;
        grid-template-columns: repeat(7, 14px);
        grid-auto-rows: 14px;
        grid-auto-columns: auto;
        grid-auto-flow: row;
        width: max-content;
        max-width: 100%;
    }
}

.daily-report-condition-table th:first-child,
.daily-report-condition-table td:first-child {
    width: 160px;
    white-space: nowrap;
}

.daily-report-multiline {
    white-space: pre-wrap;
    word-break: break-word;
}

.daily-report-add-select {
    min-width: 220px;
}

.daily-report-progress-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
    border-left: 4px solid var(--mud-palette-primary);
    background: var(--mud-palette-background);
}

.daily-report-progress-stat,
.daily-report-progress-opening {
    min-width: 0;
}

.daily-report-progress-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.daily-report-progress-stat--primary .mud-typography-h6 {
    color: var(--mud-palette-primary);
}

.daily-report-progress-opening {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.daily-report-added-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.daily-report-added-item-content {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

.daily-report-auto-summary {
    padding: 8px 12px;
    border-left: 3px solid var(--mud-palette-primary);
    background: var(--mud-palette-background);
}

.daily-report-design-popover-anchor {
    display: inline-flex;
    align-items: center;
}

.daily-report-design-panel {
    width: min(680px, calc(100vw - 32px));
    max-height: min(420px, calc(100vh - 96px));
    overflow: auto;
    padding: 12px;
}

.daily-report-design-table {
    min-width: 560px;
}

.daily-report-design-table th,
.daily-report-design-table td {
    white-space: nowrap;
    vertical-align: top;
}

.daily-report-design-table th:nth-child(2),
.daily-report-design-table td:nth-child(2),
.daily-report-design-table th:nth-child(5),
.daily-report-design-table td:nth-child(5) {
    white-space: normal;
    min-width: 140px;
}

@media (max-width: 600px) {
    .entry-check-action-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .entry-check-action-buttons {
        width: 100%;
    }

    .construction-stepper-nav-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .daily-report-progress-summary {
        grid-template-columns: 1fr;
    }

    .daily-report-progress-opening {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════
   移动端响应式基线（≤640px）
   ───────────────────────────────────────────────────────────
   说明：本块通过覆盖 MudBlazor 全局 class 与提供通用 utility
   class，把整个应用在手机屏宽下的体验拉到可用基线，避免逐文件
   修改 markup。断点 640px 与 .sidebar 折叠断点(641px)对齐。
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

    /* ── 1. 弹窗：手机端几乎占满屏宽，预留小边距。注意排除 .mud-dialog-fullscreen——
       全屏态应该真正占满整个屏幕，不留 8px 边距，否则下方/侧边会出现空白条。 ── */
    .mud-dialog-container .mud-dialog:not(.mud-dialog-fullscreen) {
        margin: 8px !important;
        max-width: calc(100vw - 16px) !important;
        width: calc(100vw - 16px) !important;
    }

    /* 全屏态在手机端：避让主内容顶部工具栏。 */
    .mud-dialog-container .mud-dialog.mud-dialog-fullscreen {
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(100vh - 3.5rem) !important;
        max-height: calc(100vh - 3.5rem) !important;
    }

    /* 弹窗内容区缩窄 padding 节省横向空间。 */
    .mud-dialog-content {
        padding: 12px !important;
    }

    .mud-dialog-title {
        padding: 12px 12px 4px !important;
        font-size: 1.05rem !important;
    }

    .mud-dialog-actions {
        padding: 8px 12px !important;
        flex-wrap: wrap;
        gap: 4px;
    }

    /* ── 2. 表格与数据网格：手机端强制横向滚动而非压缩列宽 ── */
    .mud-table-container,
    .mud-data-grid {
        overflow-x: auto !important;
    }

    /* ── 3. Tabs 横滑：手机端 tab 头允许横向滚动而不挤压 ── */
    .mud-tabs-toolbar-wrapper,
    .mud-tabs-toolbar {
        overflow-x: auto !important;
    }

    .mud-tabs-toolbar-scroll-button {
        display: none !important;
    }

    /* ── 4. MudStack Row 行布局在手机端自动折行 ── */
    .mud-stack-row {
        flex-wrap: wrap;
    }

    /* ── 4.1 MudGrid item 在手机端强制满宽 ── */
    /* 项目里的 dialog 大量使用 MudItem xs="6"/xs="4" 做 2-3 列表单布局，
       手机端把它们全部展开为 100%，让内容竖直堆叠不再横向溢出。 */
    [class*="mud-grid-item-xs-"] {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    /* ── 5. 输入控件占满可用宽度，避免水平拥挤 ── */
    .mud-input-control {
        width: 100%;
    }

    /* ── 6. 卡片 / Paper 紧凑化 padding ── */
    .mud-card-content,
    .mud-paper.pa-6 {
        padding: 12px !important;
    }

    .mud-paper.pa-4 {
        padding: 10px !important;
    }

    /* ── 7. 顶部 TopRow 内的元素避免拥挤（如搜索框、用户头像） ── */
    .gs-topbar-search {
        display: none;
    }

    /* ── 8. 触控目标最小高度（WCAG 推荐 44x44） ── */
    .mud-button-root {
        min-height: 40px;
    }

    /* ── 9. 排版字号收敛 ── */
    h1, .mud-typography-h1 { font-size: 1.5rem !important; }
    h2, .mud-typography-h2 { font-size: 1.35rem !important; }
    h3, .mud-typography-h3 { font-size: 1.2rem !important; }
    h4, .mud-typography-h4 { font-size: 1.1rem !important; }

    /* ── 10. 全屏弹窗在手机端不再让位 sidebar（sidebar 已折叠为顶部） ── */
    /* （由 @media (min-width: 641px) 的 :has() 规则只在大屏生效保证） */
}

/* ───────── 通用 utility class（任意断点可用） ───────── */

/* 在 razor 上挂 .mobile-only-stack，让 .mud-stack-row 在手机端转纵向。 */
@media (max-width: 640px) {
    .mobile-only-stack.mud-stack-row,
    .mobile-only-stack .mud-stack-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .mobile-hide {
        display: none !important;
    }

    .mobile-full-width {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (min-width: 641px) {
    .mobile-show {
        display: none !important;
    }
}

.drilling-fluid-inline-select {
    border-bottom: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 0;
    min-width: 88px;
    padding-left: 2px;
    padding-right: 2px;
}

.drilling-fluid-inline-param {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.daily-report-fluid-consumption,
.daily-report-fluid-detail {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    /* 否则 padding 把盒子撑出父容器 24px，逼出外层 dialog 的横向滚动条，
       与内层 .daily-report-fluid-table-wrap 一起形成"上下两条 x scrollbar"。 */
    box-sizing: border-box;
}

.daily-report-fluid-detail {
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
}

.daily-report-fluid-box {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 12px;
    box-sizing: border-box;
}

/* 日报编辑/补写/添加对话框：禁止其内容区出现横向滚动条。
   钻井液消耗表格自身已有 .daily-report-fluid-table-wrap 提供可滚动的横向视图，
   外层 dialog 不应再独立出一条 x 滚动条。y 方向继续允许滚动。 */
.daily-report-edit-dialog .mud-dialog-content {
    overflow-x: hidden;
}

.daily-report-fluid-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.daily-report-fluid-type-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
}

.daily-report-fluid-type-field {
    min-width: 180px;
}

.daily-report-fluid-requirement-anchor {
    display: inline-flex;
    align-items: center;
}

.daily-report-fluid-requirement-popover {
    max-width: min(360px, calc(100vw - 32px));
    max-height: 180px;
    overflow: auto;
    padding: 10px 12px;
}

.daily-report-fluid-requirement-text {
    white-space: pre-wrap;
}

.daily-report-fluid-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 3px;
}

.daily-report-fluid-summary-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 8px;
}

.daily-report-fluid-table {
    min-width: max-content;
}

.daily-report-fluid-table .mud-table-container {
    overflow-x: visible;
}

.daily-report-fluid-table table {
    min-width: 1514px;
}

.daily-report-fluid-table th,
.daily-report-fluid-table td {
    white-space: nowrap;
    vertical-align: top;
}

.daily-report-fluid-detail .daily-report-fluid-table th {
    background: #f9fafb;
    color: #4b5563;
    font-weight: 650;
}

.daily-report-fluid-detail .daily-report-fluid-table td {
    border-top: 1px solid #f0f0f0;
}

.daily-report-fluid-table th:nth-child(1),
.daily-report-fluid-table td:nth-child(1) {
    min-width: 56px;
    text-align: center;
}

.daily-report-fluid-table th:nth-child(2),
.daily-report-fluid-table td:nth-child(2),
.daily-report-fluid-table th:nth-child(3),
.daily-report-fluid-table td:nth-child(3) {
    min-width: 286px;
}

.daily-report-fluid-table th:nth-child(4),
.daily-report-fluid-table td:nth-child(4) {
    min-width: 86px;
}

.daily-report-fluid-table th:nth-child(5),
.daily-report-fluid-table td:nth-child(5),
.daily-report-fluid-table th:nth-child(6),
.daily-report-fluid-table td:nth-child(6),
.daily-report-fluid-table th:nth-child(7),
.daily-report-fluid-table td:nth-child(7),
.daily-report-fluid-table th:nth-child(8),
.daily-report-fluid-table td:nth-child(8) {
    min-width: 118px;
}

.daily-report-fluid-table th:nth-child(9),
.daily-report-fluid-table td:nth-child(9) {
    min-width: 88px;
}

.daily-report-fluid-table th:nth-child(10),
.daily-report-fluid-table td:nth-child(10) {
    min-width: 280px;
    white-space: normal;
}

.daily-report-fluid-table th:nth-child(11),
.daily-report-fluid-table td:nth-child(11) {
    min-width: 64px;
}

.daily-report-fluid-row-number {
    padding-top: 18px !important;
    font-weight: 500;
}

.daily-report-fluid-time-input {
    min-width: 108px;
}

.daily-report-fluid-date-input {
    min-width: 148px;
}

.daily-report-fluid-datetime-cell {
    display: grid;
    grid-template-columns: minmax(148px, 1fr) minmax(108px, 0.75fr);
    gap: 8px;
    align-items: end;
}

.daily-report-fluid-interval {
    padding-top: 18px !important;
    font-weight: 500;
}

.daily-report-fluid-change {
    padding-top: 18px !important;
    font-weight: 500;
}

.construction-crew-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0;
    overflow-x: hidden;
    box-sizing: border-box;
    contain: inline-size;
}

.construction-crew-task-frame {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0;
    overflow-x: hidden;
    box-sizing: border-box;
    contain: inline-size;
}

.construction-crew-header {
    margin-bottom: 8px;
}

.construction-crew-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 3px;
    box-sizing: border-box;
    contain: inline-size;
    overscroll-behavior-x: contain;
}

.construction-crew-table {
    width: max-content;
    max-width: none;
    min-width: 1080px;
}

.construction-crew-table .mud-table-container {
    width: max-content;
    max-width: none;
    overflow-x: visible;
}

.construction-crew-table table {
    min-width: 1080px;
}

.construction-crew-table th,
.construction-crew-table td {
    white-space: nowrap;
    vertical-align: top;
}

.construction-crew-table th:nth-child(1),
.construction-crew-table td:nth-child(1) {
    min-width: 120px;
}

.construction-crew-table th:nth-child(2),
.construction-crew-table td:nth-child(2),
.construction-crew-table th:nth-child(8),
.construction-crew-table td:nth-child(8) {
    min-width: 210px;
}

.construction-crew-table th:nth-child(3),
.construction-crew-table td:nth-child(3) {
    min-width: 96px;
}

.construction-crew-table th:nth-child(4),
.construction-crew-table td:nth-child(4),
.construction-crew-table th:nth-child(5),
.construction-crew-table td:nth-child(5) {
    min-width: 180px;
}

.construction-crew-table th:nth-child(6),
.construction-crew-table td:nth-child(6),
.construction-crew-table th:nth-child(7),
.construction-crew-table td:nth-child(7),
.construction-crew-table th:nth-child(9),
.construction-crew-table td:nth-child(9) {
    min-width: 80px;
    text-align: center;
}

.construction-crew-certificate-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 250px;
}

.construction-crew-certificate-select {
    flex: 1 1 190px;
    min-width: 190px;
}

.construction-crew-file-cell {
    min-width: 64px;
}

.construction-crew-file-dropzone {
    min-height: 44px;
    padding: 6px;
}

.construction-crew-file-dropzone .file-upload-dropzone-content {
    gap: 4px;
}

/* 施工队证件 dropzone 紧凑模式：单行 36px 高度，仅显示一个图标，与同行 MudTextField 节奏对齐。 */
.construction-crew-file-dropzone-compact {
    min-height: 36px;
    height: 36px;
    width: 56px;
    padding: 0;
    border-radius: 6px;
    border-style: solid;
    border-color: var(--mud-palette-lines-inputs);
}

.construction-crew-file-dropzone-compact:hover {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.04);
}

.construction-crew-file-dropzone-compact .file-upload-dropzone-content {
    padding: 0;
    gap: 0;
}

/* 已上传状态：背景与边框采用 success 色提示，无需文字。 */
.construction-crew-file-dropzone-uploaded {
    background: rgba(var(--mud-palette-success-rgb), 0.08);
    border-color: var(--mud-palette-success);
}

.construction-crew-file-dropzone-uploaded:hover {
    border-color: var(--mud-palette-success);
    background: rgba(var(--mud-palette-success-rgb), 0.14);
}

.construction-crew-profile-dialog {
    min-width: 0;
    max-width: 100%;
}

.construction-crew-profile-link {
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    text-transform: none;
}

.daily-report-fluid-crew-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: stretch;
    width: 100%;
}

.daily-report-fluid-crew-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    min-height: 68px;
    min-width: 150px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
    box-sizing: border-box;
}

.daily-report-fluid-crew-label {
    line-height: 1.2;
    color: #6b7280 !important;
}

.daily-report-fluid-crew-value {
    min-height: 30px;
    display: flex;
    align-items: center;
    color: #111827;
    font-weight: 500;
}

.daily-report-fluid-crew-link {
    align-self: flex-start;
    min-height: 30px;
    line-height: 1.2;
    padding: 0;
    color: #111827 !important;
    text-decoration: none !important;
    font-weight: 600;
}

.daily-report-fluid-crew-link:hover {
    color: #c2410c !important;
    background: transparent !important;
}

.daily-report-fluid-crew-link .mud-button-label {
    text-decoration: none !important;
}

@media (max-width: 960px) {
    .daily-report-fluid-summary-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .daily-report-fluid-summary-row {
        grid-template-columns: 1fr;
    }
}

.construction-crew-profile-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.construction-crew-profile-image-card {
    min-width: 0;
}

.construction-crew-profile-image-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    max-height: 260px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    overflow: hidden;
    background: var(--mud-palette-background-grey);
}

.construction-crew-profile-image {
    max-height: 260px;
    object-fit: contain;
}

/* ═══════════════════════════════════════════════════════════
   其余 Dialog 移动端 min-width 解锁
   ───────────────────────────────────────────────────────────
   说明：项目里几个 Dialog 的 body 容器或子组件设置了硬 min-width
   （420~980px），在手机屏宽 ≤640px 时会撑开父容器导致横向溢出。
   本块统一关掉这些硬下限，让 dialog 自适应窗口宽度。
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    /* ProjectFilesDialog：文件表格固定 980px 太宽，改为流式布局，依赖 baseline
       的 .mud-table-container { overflow-x: auto } 在 fallback 上提供横向滚动。 */
    .project-file-table {
        min-width: 0;
        table-layout: auto;
    }

    /* CompanyEditDialog：左右两栏 (420 + 350) 在手机端纵向堆叠，各占满宽度。 */
    .company-edit-left,
    .company-edit-right {
        min-width: 0;
        width: 100%;
    }

    /* ProjectCreateDialog：表单 body 去掉 560 下限。 */
    .project-create-body {
        min-width: 0;
    }
}

/* ================================================================== */
/*  DailyReportComparisonDialog：外协修改归档日报 → CCTEG 字段级 diff   */
/* ================================================================== */

.daily-report-comparison-dialog .comparison-content {
    /* 内容区允许自然撑高，垂直空间紧凑，避免在大型移动端弹窗里出现双重滚动。 */
    width: 100%;
}

.daily-report-comparison-dialog .comparison-header {
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
}

.daily-report-comparison-dialog .comparison-table {
    width: 100%;
    table-layout: fixed;
}

.daily-report-comparison-dialog .comparison-table .comparison-col-label {
    width: 24%;
    min-width: 132px;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: top;
}

.daily-report-comparison-dialog .comparison-table .comparison-col-old,
.daily-report-comparison-dialog .comparison-table .comparison-col-new {
    width: 38%;
    vertical-align: top;
}

.daily-report-comparison-dialog .comparison-text {
    margin: 0;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 修改后单元格的红框 + 浅红底色，作为"新添加或者修改的部分"视觉信号。 */
.daily-report-comparison-dialog .comparison-cell-changed {
    outline: 2px solid var(--mud-palette-error);
    outline-offset: -2px;
    background: rgba(244, 67, 54, 0.06);
    border-radius: 2px;
}

/* 整行高亮：让 label 列也带上轻微底色，便于在长表中快速扫到变更项。 */
.daily-report-comparison-dialog .comparison-row-changed > .comparison-col-label {
    background: rgba(244, 67, 54, 0.04);
}

/* 区域头部行：用于工况、钻井液消耗等列表型字段的"整体红框"入口。
   字体加粗、底色淡灰，与下方子条目形成视觉分组。 */
.daily-report-comparison-dialog .comparison-row-section-header > td {
    background: rgba(0, 0, 0, 0.025);
    font-weight: 600;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* 区域子条目：缩进 label，并轻度降低底色对比，强调它是 header 的下级。 */
.daily-report-comparison-dialog .comparison-col-label-indent {
    padding-left: 24px !important;
    font-weight: 400 !important;
    color: var(--mud-palette-text-secondary);
}

.daily-report-comparison-dialog .comparison-row-section-item > td {
    border-top: 1px dashed var(--mud-palette-lines-default);
}

.user-info-dialog-label {
    width: 100px;
}

/* ═══════════════════════════════════════════════════════════
   暗色模式专项修复
   ═══════════════════════════════════════════════════════════ */

[data-theme="dark"] .cf-page-header-flat-dark {
    /* sticky 元素必须不透明，否则滚动文本会穿透显示在标题后方。
       使用 page 底色保持原"扁平不显卡片"的视觉，同时遮挡滚动内容。 */
    background: var(--cf-bg-page);
    border-bottom-color: transparent;
}

[data-theme="dark"] .drill-design-page .cf-page-header:not(.cf-page-header-flat-dark),
[data-theme="dark"] .drill-related-page .cf-page-header,
[data-theme="dark"] .borehole-construction-page .cf-page-header,
[data-theme="dark"] .project-detail-page .cf-page-header,
[data-theme="dark"] .project-files-page .cf-page-header {
    background: var(--cf-bg-page);
    border-bottom-color: var(--cf-border-subtle);
}

[data-theme="dark"] .cf-breadcrumb-bar {
    background-color: var(--cf-bg-page);
    border-bottom-color: var(--cf-border-subtle);
}

[data-theme="dark"] .content:has(.project-detail-page),
[data-theme="dark"] .project-detail-page {
    background-color: var(--cf-bg-page);
}

[data-theme="dark"] .project-detail-body > .mud-paper > .mud-stack:first-child {
    background: transparent;
}

[data-theme="dark"] .drill-page-hole-switcher,
[data-theme="dark"] .entry-check-sticky-panel,
[data-theme="dark"] .daily-report-status-section {
    background: var(--cf-bg-page);
}

[data-theme="dark"] .construction-step-item {
    color: var(--cf-text-secondary);
}

[data-theme="dark"] .construction-step-item:hover {
    background: rgba(230, 237, 243, 0.05);
    color: var(--cf-text-primary);
}

[data-theme="dark"] .construction-step-item--active {
    color: var(--cf-primary);
    border-color: var(--cf-primary);
}

[data-theme="dark"] .construction-step-item--completed {
    color: var(--cf-text-primary);
}

[data-theme="dark"] .tech-req-md-content,
[data-theme="dark"] .tech-req-content-inline,
[data-theme="dark"] .tech-req-static-text,
[data-theme="dark"] .tech-req-md-box,
[data-theme="dark"] .pumping-tech-req-md-box,
[data-theme="dark"] .well-logging-display,
[data-theme="dark"] .tech-req-inline-text,
[data-theme="dark"] .tech-req-multiline-display,
[data-theme="dark"] .hydro-monitor-content-left {
    color: var(--cf-text-primary) !important;
}

[data-theme="dark"] .tech-req-content-box,
[data-theme="dark"] .tech-req-md-box,
[data-theme="dark"] .special-template-singleblock,
[data-theme="dark"] .pumping-design-fieldset {
    background: transparent;
    border-color: var(--cf-border-default);
}

[data-theme="dark"] .tech-req-inline-param .mud-input > input,
[data-theme="dark"] .tech-req-inline-param .mud-input .mud-select-input,
[data-theme="dark"] .horizon-inline-btn,
[data-theme="dark"] .horizon-inline-btn.mud-disabled,
[data-theme="dark"] .horizon-inline-btn:disabled,
[data-theme="dark"] .horizon-inline-btn.mud-disabled .mud-button-label,
[data-theme="dark"] .horizon-inline-btn:disabled .mud-button-label,
[data-theme="dark"] .horizon-inline-btn.mud-disabled .mud-icon-root,
[data-theme="dark"] .horizon-inline-btn:disabled .mud-icon-root {
    color: var(--cf-text-primary) !important;
}

[data-theme="dark"] .json-editor-textarea {
    color: var(--cf-text-primary);
    background: #0D1117;
}

[data-theme="dark"] .json-editor-textarea:focus {
    background: #0D1117;
}

[data-theme="dark"] .plugging-method-table thead tr,
[data-theme="dark"] .daily-report-condition-table th,
[data-theme="dark"] .daily-report-fluid-detail .daily-report-fluid-table th {
    background: var(--cf-bg-muted);
    color: var(--cf-text-secondary);
}

[data-theme="dark"] .plugging-method-table th,
[data-theme="dark"] .plugging-method-table td,
[data-theme="dark"] .daily-report-condition-table td,
[data-theme="dark"] .daily-report-fluid-detail .daily-report-fluid-table td {
    border-color: var(--cf-border-default);
}

[data-theme="dark"] .daily-report-status-section {
    border-color: var(--cf-border-default);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .daily-report-status-square--missing {
    background: #4B5563;
}

[data-theme="dark"] .daily-report-status-square--submitted {
    background: #D29922;
}

[data-theme="dark"] .daily-report-status-square--archived {
    background: #238636;
}

[data-theme="dark"] .daily-report-status-square--rejected {
    background: #DA3633;
}

[data-theme="dark"] .daily-report-detail-panel {
    background:
        linear-gradient(180deg, rgba(47, 119, 224, 0.08), transparent 92px),
        var(--cf-bg-surface);
    border-color: var(--cf-border-default);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    color: var(--cf-text-primary);
}

[data-theme="dark"] .daily-report-detail-panel::before {
    height: 2px;
    background: linear-gradient(90deg, var(--cf-primary), var(--cf-brand-orange));
}

[data-theme="dark"] .daily-report-detail-header {
    border-bottom-color: var(--cf-border-default);
}

[data-theme="dark"] .daily-report-section-title,
[data-theme="dark"] .daily-report-info-value,
[data-theme="dark"] .daily-report-fluid-crew-value,
[data-theme="dark"] .daily-report-fluid-crew-link {
    color: var(--cf-text-primary) !important;
}

[data-theme="dark"] .daily-report-reporter-button {
    color: var(--cf-text-primary) !important;
}

[data-theme="dark"] .daily-report-reporter-button:hover,
[data-theme="dark"] .daily-report-fluid-crew-link:hover {
    color: var(--cf-brand-orange) !important;
    background: rgba(251, 173, 65, 0.10) !important;
}

[data-theme="dark"] .daily-report-approver-text,
[data-theme="dark"] .daily-report-info-label,
[data-theme="dark"] .daily-report-fluid-crew-label {
    color: var(--cf-text-secondary) !important;
}

[data-theme="dark"] .daily-report-info-tile,
[data-theme="dark"] .daily-report-plan-box,
[data-theme="dark"] .daily-report-fluid-crew-field,
[data-theme="dark"] .daily-report-fluid-detail {
    background: rgba(230, 237, 243, 0.03);
    border-color: var(--cf-border-default);
    color: var(--cf-text-primary);
}

[data-theme="dark"] .daily-report-condition-table {
    border-color: var(--cf-border-default);
}

[data-theme="dark"] .daily-report-progress-summary,
[data-theme="dark"] .daily-report-auto-summary {
    background: rgba(47, 119, 224, 0.10);
}

[data-theme="dark"] .pf-treeview .mud-treeview-item-content:hover,
[data-theme="dark"] .pf-tree-folder-row > .mud-treeview-item-content:hover {
    background: rgba(230, 237, 243, 0.05);
    color: var(--cf-text-primary);
}

[data-theme="dark"] .pf-tree-file-highlight {
    background: rgba(251, 173, 65, 0.16) !important;
}

[data-theme="dark"] .pf-search-dropdown {
    background: var(--cf-bg-surface);
    color: var(--cf-text-primary);
}

[data-theme="dark"] .pf-search-item:hover,
[data-theme="dark"] .pf-search-item-active {
    background: rgba(230, 237, 243, 0.05);
}

@media (max-width: 640px) {
    /* 手机端：3 列表格压缩到 2 列布局——标签独占一行，旧/新值上下堆叠。 */
    .daily-report-comparison-dialog .comparison-table,
    .daily-report-comparison-dialog .comparison-table thead,
    .daily-report-comparison-dialog .comparison-table tbody,
    .daily-report-comparison-dialog .comparison-table tr,
    .daily-report-comparison-dialog .comparison-table td,
    .daily-report-comparison-dialog .comparison-table th {
        display: block;
        width: 100%;
    }

    .daily-report-comparison-dialog .comparison-table thead {
        display: none;
    }

    .daily-report-comparison-dialog .comparison-table tr {
        padding: 8px 0;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .daily-report-comparison-dialog .comparison-table .comparison-col-old::before {
        content: "修改前：";
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
        display: block;
    }

    .daily-report-comparison-dialog .comparison-table .comparison-col-new::before {
        content: "修改后：";
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
        display: block;
    }
}

/* ═══════ 设备明细任务通知滚动锚点 ═══════
   通过通知跳进来时 scrollIntoView 会把锚点对齐到 viewport top:0，
   但顶部 sticky 栈高度 ≈ topbar 56 + 面包屑 48 ≈ 104px，会把标题盖住。
   scroll-margin-top 让浏览器在计算滚动位置时把这部分高度预先让出来。
*/
#drill-equipment-inventory-section,
#drill-equipment-inventory-section-edit {
    scroll-margin-top: 120px;
}

/* 设备明细 φ 前缀视觉标识：渲染在型号/规格输入框左侧，作纯展示标签，不参与 value */
.drill-equipment-phi-affix {
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
    -webkit-user-select: none;
    user-select: none;
    line-height: 1;
    padding-bottom: 2px;
}