/* ═══════════════════════════════════════════════════════════════════════════
   台夫·餐饮系统 管理后台 — 全局样式基座
   视觉蓝本：美团管家 PC（docs/meituan_pic/IMG_8023–8032）
   设计原则：浅暖画布 + 纯白卡片 + 金橙强调 + 细边柔和阴影；文字层级靠字重/字号表达
   约束：门店断网部署 → 不引 Web Font，中文优先字体栈
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── 1. 字体与基础重置 ───────────────────────── */
html, body {
    font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Source Han Sans SC",
                 "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--tf-ink);
    background: var(--tf-canvas);
}

*, *::before, *::after { box-sizing: border-box; }

h1:focus { outline: none; }

a, .btn-link { color: var(--tf-accent-strong); }

/* 数字统一等宽：报表列与金额才能纵向对齐 */
.mud-table-cell, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6,
.tf-crumb, .tf-stat-value, .tf-page-title { font-variant-numeric: tabular-nums; }

/* ───────────────────────── 2. 设计令牌 ───────────────────────── */
:root {
    /* 品牌 */
    --tf-accent: #E8720C;
    --tf-accent-strong: #C85F06;
    --tf-accent-soft: #FFF4E2;
    --tf-accent-line: #F6D9B4;
    /* 选中态文字专用深橙：在白卡 / 画布 / 金橙浅底上实测均 ≥4.5:1（5.29 / 4.90 / 4.90），
       满足 WCAG AA 正文对比度，因此可以同时用在「白底上的选中文字」（页签）与
       「金橙浅底上的选中文字」（域签 / 侧栏 / 分段选择器）。
       ⚠️ 不要退回去用 --tf-accent-strong(#C85F06)：它在白底 4.12:1、浅底 3.8:1，两头都不达标。 */
    --tf-accent-on-soft: #A85506;
    /* 中性 */
    --tf-ink: #1F2430;
    --tf-ink-2: #5A6070;
    --tf-ink-3: #8A909C;
    --tf-line: #ECEDF0;
    --tf-line-2: #F3F4F7;
    --tf-surface: #FFFFFF;
    --tf-canvas: #F7F6F3;
    --tf-canvas-2: #F1F0EC;
    /* 语义 */
    --tf-success: #2E9E6B;  --tf-success-soft: #E4F4EC;
    --tf-warning: #E0A400;  --tf-warning-soft: #FDF3D9;
    --tf-error: #D64545;    --tf-error-soft: #FBE7E7;
    --tf-info: #3B82F6;     --tf-info-soft: #E7F0FE;
    /* 形状与纵深 */
    --tf-radius: 12px;
    --tf-radius-sm: 8px;
    --tf-radius-lg: 16px;
    --tf-shadow-1: 0 1px 2px rgba(31, 36, 48, .04), 0 1px 3px rgba(31, 36, 48, .05);
    --tf-shadow-2: 0 2px 6px rgba(31, 36, 48, .05), 0 6px 18px rgba(31, 36, 48, .06);
    --tf-shadow-3: 0 10px 30px rgba(31, 36, 48, .12);
    --tf-ring: 0 0 0 3px rgba(232, 114, 12, .18);
}

/* ───────────────────────── 3. 主内容区：浅暖画布 + 纵深 ───────────────────────── */
.tf-main,
.mud-main-content {
    background: var(--tf-canvas) !important;
}

/* 极淡的双点渐变，避免大面积纯灰的平板感（点阵密度很低，不干扰阅读） */
.mud-main-content::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(1200px 520px at 88% -10%, rgba(232, 114, 12, .05), transparent 60%),
        radial-gradient(900px 440px at -8% 110%, rgba(59, 130, 246, .045), transparent 62%);
}

.tf-main > *, .mud-main-content > * { position: relative; z-index: 1; }

/* ───────────────────────── 4. 顶栏 ───────────────────────── */
.tf-appbar {
    background: var(--tf-surface) !important;
    color: var(--tf-ink) !important;
    border-bottom: 1px solid var(--tf-line);
    box-shadow: 0 1px 0 rgba(31, 36, 48, .02);
}

/* 顶栏内边距对齐内容区 `.tf-page`（28px），让品牌与面包屑左缘落在同一条竖线上 */
.tf-appbar .mud-toolbar-gutters { padding-left: 28px; padding-right: 28px; }

/* ⚠️ 顶栏横向留白（实测缺陷）：
   MudBlazor 的 `.mud-toolbar` 自身**没有 gap**，而 `MudSelect Class="mr-3"` 的类只落在内层
   `.mud-input-control` 上（外层 `.mud-select` 拿不到 margin），于是实测
   「门店选择器(974..1191) → 用户区(1191..1309) → 图标按钮 → 图标按钮」相邻间距全是 0px，
   视觉上完全贴死；1440px 下已占用 1145/1193px，再窄就会叠字。
   在工具栏层面统一给 8px，一次性解决整条右簇。 */
.tf-appbar .mud-toolbar { gap: 6px; }

/* 门店选择器给宽度上限：默认它会撑到 217px，把右侧用户区挤到贴边。
   超长门店名由 MudSelect 自身省略号处理。 */
.tf-appbar .mud-select { max-width: 168px; }

/* 顶栏各块不参与收缩：窄屏时优先隐藏次要文字，而不是把控件压变形/叠字 */
.tf-brand, .tf-domains, .tf-user, .tf-appbar .mud-select,
.tf-appbar .mud-tooltip-root, .tf-appbar .mud-icon-button { flex-shrink: 0; }

.tf-brand { display: flex; align-items: center; gap: 10px; margin-right: 12px; }

.tf-brand-mark {
    width: 30px; height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, #F5943C 0%, #E8720C 55%, #D1600A 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(232, 114, 12, .35);
    letter-spacing: 0;
}

.tf-brand-text {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: var(--tf-ink);
}

/* 6px（原 4px）：激活态胶囊底色与相邻标签之间太近，观感是「贴在一起」 */
.tf-domains { display: flex; align-items: center; gap: 6px; height: 100%; }

.tf-domain {
    appearance: none; background: none; border: 0;
    border-radius: 8px;
    padding: 0 15px;
    height: 36px;
    font: inherit; font-size: 14px; font-weight: 500;
    color: var(--tf-ink-2);
    cursor: pointer; white-space: nowrap;
    transition: background-color .14s ease, color .14s ease;
}

.tf-domain:hover { color: var(--tf-ink); background: var(--tf-line-2); }
.tf-domain:focus-visible { outline: 2px solid var(--tf-accent); outline-offset: 1px; }

/* 顶栏「域签」选中态：走 9b 全站统一配方 */
.tf-domain.active {
    color: var(--tf-accent-on-soft);
    background: var(--tf-accent-soft);
    font-weight: 600;
}

.tf-who { font-size: 13px; color: var(--tf-ink-2); margin-right: 4px; }

/* 顶栏用户区：头像 + 姓名/角色 */
.tf-user {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px; border-radius: 999px;
    background: var(--tf-line-2);
}
.tf-user-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, #F5943C, #E8720C);
    color: #fff; font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.tf-user-name {
    font-size: 13px; font-weight: 600; color: var(--tf-ink); line-height: 1.2;
    white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis;
}
.tf-user-role { font-size: 11px; color: var(--tf-ink-3); line-height: 1.2; white-space: nowrap; }

/* ───────────────────────── 5. 侧栏导航 ───────────────────────── */
.tf-drawer, .tf-drawer .mud-drawer-content { overflow: visible !important; }

.tf-drawer {
    background: var(--tf-surface) !important;
    border-right: 1px solid var(--tf-line);
    width: 236px;
}

.tf-nav { padding: 10px 10px 20px; }

.tf-nav-item { position: relative; }

.tf-nav-head {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 0 12px;
    height: 42px;
    margin-bottom: 2px;
    background: none; border: 0;
    border-radius: var(--tf-radius-sm);
    font: inherit; font-size: 14px; color: var(--tf-ink);
    cursor: pointer; text-align: left;
    transition: background-color .14s ease, color .14s ease;
}

.tf-nav-head:hover { background: var(--tf-line-2); }
.tf-nav-head:focus-visible { outline: 2px solid var(--tf-accent); outline-offset: -1px; }

.tf-nav-icon { color: var(--tf-ink-3); transition: color .14s ease; }
.tf-nav-label { flex: 1; }
.tf-nav-caret { color: #B6BBC4; font-size: 15px; }

/* 侧栏导航选中态：统一配方 + 3px 金色左条（侧栏需要更强的位置指向） */
.tf-nav-item.active > .tf-nav-head {
    background: var(--tf-accent-soft);
    color: var(--tf-accent-on-soft);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--tf-accent);
}
.tf-nav-item.active > .tf-nav-head .tf-nav-icon { color: var(--tf-accent); }

/* 悬停浮层：解决左侧栏装不下子页面的问题（对齐参考图分组浮层） */
.tf-flyout {
    display: none;
    position: absolute;
    left: calc(100% + 8px);
    top: -6px;
    z-index: 1500;
    min-width: 320px; max-width: 480px;
    background: var(--tf-surface);
    border: 1px solid var(--tf-line);
    border-radius: var(--tf-radius);
    box-shadow: var(--tf-shadow-3);
    padding: 16px 18px;
}

.tf-nav-item:hover > .tf-flyout,
.tf-nav-item:focus-within > .tf-flyout { display: block; }

.tf-flyout-title {
    font-size: 12px; font-weight: 600; color: var(--tf-ink-3);
    letter-spacing: .04em;
    margin-bottom: 12px;
}

.tf-flyout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }

.tf-flyout-link {
    display: block; padding: 8px 10px;
    border-radius: var(--tf-radius-sm);
    text-decoration: none;
    transition: background-color .12s ease;
}
.tf-flyout-link:hover { background: var(--tf-line-2); }
.tf-flyout-link.current { background: var(--tf-accent-soft); }
.tf-flyout-link-label { display: block; font-size: 13.5px; color: var(--tf-ink); }
.tf-flyout-link.current .tf-flyout-link-label { color: var(--tf-accent-on-soft); font-weight: 600; }
.tf-flyout-link-hint { display: block; font-size: 12px; color: var(--tf-ink-3); margin-top: 2px; line-height: 1.5; }

/* ───────────────────────── 6. 页头 / 面包屑 ───────────────────────── */
.tf-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 28px 40px;
}

.tf-page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 20px;
}

.tf-page-heading { min-width: 0; }

.tf-page-title {
    font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
    color: var(--tf-ink); margin: 0; line-height: 1.3;
}

.tf-page-sub { font-size: 13px; color: var(--tf-ink-2); margin: 4px 0 0; }

.tf-crumb {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    padding: 0; margin: 0 0 4px;
    font-size: 12.5px; color: var(--tf-ink-3);
}
.tf-crumb-domain { color: var(--tf-ink-2); }
.tf-crumb-sep { color: #C4C8D0; }
.tf-crumb-page { color: var(--tf-ink-2); font-weight: 500; }
.tf-crumb-hint { margin-left: auto; font-size: 12px; color: var(--tf-ink-3); }

/* ───────────────────────── 7. 全局：卡片 / 面板 ───────────────────────── */
.mud-paper {
    border: 1px solid var(--tf-line);
    box-shadow: var(--tf-shadow-1) !important;
    border-radius: var(--tf-radius) !important;
}

.mud-paper.mud-elevation-0 { box-shadow: var(--tf-shadow-1) !important; }
.mud-paper.mud-elevation-1,
.mud-paper.mud-elevation-2 { box-shadow: var(--tf-shadow-1) !important; }
.mud-paper.mud-elevation-3,
.mud-paper.mud-elevation-4 { box-shadow: var(--tf-shadow-2) !important; }

/* 表格容器用卡片观感 */
.mud-table-container {
    border: 1px solid var(--tf-line);
    border-radius: var(--tf-radius);
    background: var(--tf-surface);
    /* ⚠️ 这里曾写 `overflow: hidden`（为裁切圆角）→ 把 MudBlazor 自带的 `overflow-y:auto` 一起干掉了，
       且横向溢出被裁掉、**无法左右滑动**（会员详情「资金流水」8 列在 600px 弹窗里看不全右侧）。
       只约束 X 轴，Y 轴交回 MudBlazor；圆角裁切不受影响（border-radius 仍生效）。 */
    overflow-x: auto;
}

/* ───────────────────────── 8. 全局：表格 ───────────────────────── */
.mud-table {
    background: var(--tf-surface);
    border-radius: var(--tf-radius);
}

/* ⚠️ 覆盖 MudBlazor 的 dense 变体：
   MudBlazor 自带 `.mud-table-dense * .mud-table-row .mud-table-cell{padding:6px 24px 6px 16px}`
   是 (0,3,0) 特异性，会压掉单类选择器 → 实测行高只有 32px，且左右内边距不对称（左 16 / 右 24），
   表格因此显得「挤」。这里借 `.mud-table-body`(tbody) 把数据行提到 (0,4,0)，表头提到 (0,3,0)，
   在 app.css 后加载的同特异性下必胜。 */
.mud-table-head .mud-table-cell,
.mud-table .mud-table-head .mud-table-cell {
    background: #FAFAF8;
    color: var(--tf-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    border-bottom: 1px solid var(--tf-line);
    padding: 12px 16px;
}

.mud-table-cell,
.mud-table .mud-table-body .mud-table-row .mud-table-cell,
.mud-table .mud-table-body .mud-table-row .mud-table-cell:last-child {
    border-bottom: 1px solid var(--tf-line-2);
    color: var(--tf-ink);
    font-size: 13.5px;
    padding: 10px 16px;
}

/* 行内标签（状态/支付方式）不要顶到单元格边缘 */
.mud-table .mud-table-body .mud-table-row .mud-table-cell > .mud-chip { margin: 0; }

.mud-table-row:hover { background: var(--tf-accent-soft) !important; }

.mud-table-pager {
    background: #FAFAF8;
    border-top: 1px solid var(--tf-line);
}
.mud-table-pagination .mud-table-pagination-caption,
.mud-table-pagination-toolbar .mud-typography { color: var(--tf-ink-2); }

/* 分页器「每页 / 20」相邻 0px（MudBlazor 未设 gap） */
.mud-table-pagination-display { gap: 6px; }
.mud-table-pagination-display > div { display: flex; align-items: center; }

/* 工具条：与表头同底色，形成清晰分区 */
.mud-table-toolbar {
    background: var(--tf-surface);
    border-bottom: 1px solid var(--tf-line);
    padding: 12px 16px;
}

/* 简单表格（MudSimpleTable）：用于看板等只读小表 */
.mud-simple-table { width: 100%; }
.mud-simple-table table { width: 100%; border-collapse: collapse; }
.mud-simple-table th {
    text-align: left;
    font-size: 12.5px; font-weight: 600; color: var(--tf-ink-2);
    background: #FAFAF8;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tf-line);
}
.mud-simple-table td {
    font-size: 13.5px; color: var(--tf-ink);
    padding: 12px 16px;
    border-bottom: 1px solid var(--tf-line-2);
}
.mud-simple-table tr:last-child td { border-bottom: 0; }
.mud-simple-table tbody tr:hover td { background: var(--tf-accent-soft); }

/* 辅助说明文字 */
.tf-muted-line {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--tf-ink-3);
    line-height: 1.6;
}

/* ───────────────────────── 9. 全局：按钮 ───────────────────────── */
.mud-button-root {
    border-radius: var(--tf-radius-sm) !important;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    transition: box-shadow .16s ease, background-color .16s ease, transform .06s ease;
}
.mud-button-root:active { transform: translateY(1px); }
.mud-button-root:focus-visible { box-shadow: var(--tf-ring) !important; }

.mud-button-filled.mud-button-filled-primary {
    box-shadow: 0 1px 2px rgba(232, 114, 12, .28) !important;
}
.mud-button-filled.mud-button-filled-primary:hover {
    box-shadow: 0 4px 12px rgba(232, 114, 12, .3) !important;
}

.mud-button-outlined { border-width: 1px !important; }
.mud-button-text { padding-left: 10px; padding-right: 10px; }

/* ⚠️ MudBlazor 自身不给相邻按钮任何间距，页面靠手写 `mr-*` 类兜（易漏）；
   实测订单页「刷新 / 导出 CSV」只隔 5px，观感是「按钮粘在一起」。
   这里全局兜底：同一容器内相邻按钮拉开 8px。
   刻意**不加 `!important`**：MudButtonGroup 的横向折叠边框规则
   `.mud-button-group-horizontal:not(...)>:not(:first-child) .mud-button-root{margin-left:-1px}`
   特异性 (0,4,0) 高于本规则 (0,2,0)，分段控件不会被破坏。 */
.mud-button-root + .mud-button-root,
.mud-button-root + .mud-icon-button,
.mud-icon-button + .mud-button-root,
.mud-icon-button + .mud-icon-button { margin-left: 8px; }

/* 按钮组内部显式复位，避免被上面的兜底影响（横向组保留 -1px 折叠边框） */
.mud-button-group-root .mud-button-root + .mud-button-root { margin-left: -1px !important; }
.mud-button-group-vertical .mud-button-root + .mud-button-root { margin-left: 0 !important; }

/* 图标按钮：默认方形圆角，悬停给一圈浅底 */
.mud-icon-button {
    border-radius: 10px !important;
    transition: background-color .14s ease;
}
.mud-icon-button:hover { background: var(--tf-line-2); }

/* ═══════════════════ 9b. 全站「选中态」统一配方（唯一规则） ═══════════════════
   凡是「一组里挑一个 / 当前所处位置」的界面，选中项**一律**用这一套：
       底色 var(--tf-accent-soft)  +  细边 var(--tf-accent-line)
       +  文字 var(--tf-accent-on-soft) 加粗
   需要更强指向的场景（侧栏导航）再叠一条 3px 金色左条。

   为什么必须收口成一条规则：改造前同一个报表页里并存两套橙色 ——
     · 左侧导航 / 顶栏域签  → --tf-accent-soft #FFF4E2 + --tf-accent-strong #C85F06（令牌橙）
     · 报表目录侧栏         → #FFF3E8 + #E23A12（从移动端搬过来的硬编码橙，非本后台品牌色）
   一眼看去就是「两个后台拼在一起」。现在统一走令牌，改令牌即全站同步。 */

/* 下拉 / 列表弹层里的「当前选中项」（MudSelect、MudList）：
   MudBlazor 不是靠某个 .mud-selected-item 规则上色，而是挂工具类
   mud-primary-text + mud-primary-hover（= 文字 #E8720C + 6% 橙底），与 9b 的选中配方不是一回事。
   这两个工具类自带 !important，所以此处同样要 !important 才能压住。 */
.mud-list-item.mud-selected-item.mud-primary-text {
    color: var(--tf-accent-on-soft) !important;
    font-weight: 600;
}
.mud-list-item.mud-selected-item.mud-primary-hover {
    background-color: var(--tf-accent-soft) !important;
}

/* ═══════════════════ 9c. 全局：分段选择器（互斥单选） ═══════════════════
   用途：同一维度的互斥单选 —— 报表中心「今日 / 近 7 日 / 近 30 日」、
   总部多门店对比「近 7 / 30 / 90 日」、财务收支流水「近 7 日 / 近 30 日 / 近 1 年」。
   统一实现在 Components/Shared/SegmentedControl.razor。

   ⚠️ 为什么不用 MudButtonGroup + 每个子按钮给 Color（原实现，实测无效）：
      MudBlazor 自带 CSS 里有一组 (0,3,0) 特异性的「覆盖子样式」规则
        .mud-button-group-root.mud-button-group-override-styles .mud-button      { color: var(--mud-palette-text-primary) }
        .mud-button-group-root.mud-button-group-override-styles .mud-button-root { background-color: inherit; border: none; box-shadow: none }
      它们把组内**所有**子按钮强制成同一个墨色文字、透明底、无边框，
      子按钮自己的 `.mud-button-text-primary` 只有 (0,1,0)，被稳稳压掉。
      实测三个按钮的 computed style 完全相同（bg rgba(0,0,0,0) / color #1F2430 / weight 600）
      → 页面上的 `PeriodColor()` 是**视觉上的死代码**，用户根本无法辨认当前选中项。 */
.tf-seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--tf-canvas-2);
    border: 1px solid var(--tf-line);
    border-radius: var(--tf-radius-sm);
}

.tf-seg-item {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 30 + 3×2 padding = 36px 总高，与顶栏域签 .tf-domain 同档，保持后台密度一致 */
    height: 30px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: var(--tf-ink-2);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}

.tf-seg-item:hover { background: var(--tf-surface); color: var(--tf-ink); }
.tf-seg-item:focus-visible { outline: 2px solid var(--tf-accent); outline-offset: 1px; }
.tf-seg-item:disabled { color: var(--tf-ink-3); cursor: not-allowed; background: transparent; }

/* 选中态：必须写在 :hover 之后 —— 两者特异性同为 (0,2,0)，靠书写顺序取胜；
   同时显式补一条 :hover，避免鼠标悬停在选中项上时又变回未选中的白底。

   为什么还要加 box-shadow：轨道底色 --tf-canvas-2(#F1F0EC) 与选中底色 --tf-accent-soft(#FFF4E2)
   亮度太接近，只靠填色对比，扫一眼分不出哪个是「当前」；补一层 1px 投影让选中项「浮」起来，
   与卡片同一套纵深语言，不改 9b 的选色配方。 */
.tf-seg-item[aria-checked="true"],
.tf-seg-item[aria-checked="true"]:hover {
    background: var(--tf-accent-soft);
    border-color: var(--tf-accent-line);
    color: var(--tf-accent-on-soft);
    font-weight: 600;
    box-shadow: var(--tf-shadow-1);
}

/* ───────────────────────── 10. 全局：输入控件 ───────────────────────── */
.mud-input-control .mud-input-outlined-border { border-color: var(--tf-line) !important; }
.mud-input-control .mud-input-outlined:hover .mud-input-outlined-border { border-color: #C8CCD4 !important; }
.mud-input-control .mud-input-outlined.mud-input-focused .mud-input-outlined-border,
.mud-input-control .mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--tf-accent) !important;
    border-width: 1.5px !important;
}
.mud-input-control .mud-input-outlined { border-radius: var(--tf-radius-sm); }
.mud-input.mud-input-filled { border-radius: var(--tf-radius-sm) var(--tf-radius-sm) 0 0; }

.mud-input-label { color: var(--tf-ink-2); }
.mud-input-helper-text { color: var(--tf-ink-3); }

/* ⚠️⚠️ 根因：MudBlazor 9 把独立的 `<MudToolbar>` 渲染成自定义元素 `<mudtoolbar class="…">`，
   而 MudBlazor 自带的 CSS 里**没有任何 `mudtoolbar` 规则**（实测 MudBlazor.min.css 命中 0 处）
   → 浏览器按「未知元素」处理，`display:inline`。实测后果（订单明细页）：
     · 工具条不是 flex 容器 → `MudSpacer`(`.flex-grow-1`) 完全失效，右对齐布局崩塌；
     · 筛选下拉 `.mud-select`(width:100%) 与日期范围选择器各自独占一整行（实测 264..1401 = 1137px）；
     · 相邻按钮之间只剩 HTML 空白符宽度（≈5px），观感就是「按钮挤在一起」。
   注意：顶栏内部用的是 `div.mud-toolbar`（有类），与本元素不是同一个东西，故必须分开处理。 */
mudtoolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    flex-wrap: wrap;
}

/* 工具条内的日期范围选择器：无固有宽度，flex 下会被 spacer 压成一个小方块（只剩日历图标） */
mudtoolbar > .mud-picker,
mudtoolbar .mud-picker { min-width: 240px; flex: 0 0 auto; }

/* 工具条内的下拉/输入框：默认 width:100%，作为 flex 项仍会占满整行 → 给上限宽度。
   注：Orders.razor 的 `Class="status-filter"` 在 CSS 中并无定义（死类），故用通用规则兜底。 */
mudtoolbar > .mud-select,
mudtoolbar > .mud-input-control { max-width: 200px; }

/* 工具条内的按钮不参与拉伸 */
mudtoolbar > .mud-button-root { flex: 0 0 auto; }

/* 上面已有 `gap:8px`，把全局「相邻按钮 +8px」的兜底在本元素内复位，避免出现 16px 双重间距
   （(0,2,1) > (0,2,0)，无需 !important） */
mudtoolbar > .mud-button-root + .mud-button-root,
mudtoolbar > .mud-button-root + .mud-icon-button,
mudtoolbar > .mud-icon-button + .mud-button-root,
mudtoolbar > .mud-icon-button + .mud-icon-button { margin-left: 0; }

/* ───────────────────────── 11. 全局：标签 / 徽标 ───────────────────────── */
.mud-chip {
    border-radius: 999px !important;
    font-size: 12px;
    font-weight: 600;
    height: 26px;
}
.mud-chip.mud-chip-size-small { height: 22px; font-size: 11.5px; }

/* ───────────────────────── 12. 全局：页签 ───────────────────────── */
.mud-tabs-tabbar {
    background: transparent;
    border-bottom: 1px solid var(--tf-line);
}
.mud-tab {
    font-size: 14px;
    font-weight: 500;
    color: var(--tf-ink-2);
    text-transform: none;
    min-width: 0;
    padding: 0 18px;
}
/* 页签选中态：白底上的选中文字，走同一个 --tf-accent-on-soft（不再是 accent-strong，
   后者在白底只有 4.12:1，不达 AA） */
.mud-tab.mud-tab-active { color: var(--tf-accent-on-soft); font-weight: 600; }
.mud-tabs-indicator { background: var(--tf-accent) !important; height: 3px !important; border-radius: 3px 3px 0 0; }

/* ───────────────────────── 13. 全局：对话框 / 抽屉面板 ───────────────────────── */
.mud-dialog {
    border-radius: var(--tf-radius-lg) !important;
    box-shadow: var(--tf-shadow-3);
}
.mud-dialog-title { padding: 20px 24px 8px; }
.mud-dialog-title .mud-typography { font-weight: 700; letter-spacing: -0.01em; }
.mud-dialog-content { padding: 8px 24px 4px; }
.mud-dialog-actions { padding: 12px 24px 20px; }

.mud-overlay .mud-overlay-content { backdrop-filter: saturate(120%); }

/* 键值区（弹窗里的「字段: 值」清单）：宽容器走 2 列栅格，窄屏回落单列。
   替代原来铺满整宽的 MudSimpleTable —— 弹窗加宽到 960px 后单列表格会右半边全空。 */
.tf-kv-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 28px;
    padding: 4px 18px;
    background: var(--tf-surface);
    border: 1px solid var(--tf-line);
    border-radius: var(--tf-radius);
}
@media (min-width: 760px) { .tf-kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tf-kv {
    display: flex; align-items: baseline; gap: 12px;
    padding: 9px 0; min-width: 0;
    border-bottom: 1px solid var(--tf-line);
    font-size: 13.5px; line-height: 1.5;
}
.tf-kv:last-child { border-bottom: none; }
.tf-kv-k { flex: 0 0 76px; color: var(--tf-ink-2); }
.tf-kv-v { color: var(--tf-ink); font-weight: 600; overflow-wrap: anywhere; }

.mud-expansion-panels .mud-expand-panel {
    border-radius: var(--tf-radius) !important;
    border: 1px solid var(--tf-line);
    box-shadow: var(--tf-shadow-1);
    margin-bottom: 10px;
}

/* ───────────────────────── 14. 全局：提示条 ───────────────────────── */
.mud-alert {
    border-radius: var(--tf-radius-sm);
    border-width: 1px;
}

/* ───────────────────────── 15. 全局：进度 / 骨架 / 空态 ───────────────────────── */
.mud-progress-circular { color: var(--tf-accent); }

.tf-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--tf-ink-3);
    text-align: center;
}
.tf-empty-icon { font-size: 40px; color: #D3D6DD; }
.tf-empty-text { font-size: 14px; }

/* ───────────────────────── 16. KPI 统计卡（样板） ───────────────────────── */
.tf-stat {
    position: relative;
    height: 100%;
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px;
    background: var(--tf-surface);
    border: 1px solid var(--tf-line);
    border-radius: var(--tf-radius);
    box-shadow: var(--tf-shadow-1);
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
}
.tf-stat:hover { box-shadow: var(--tf-shadow-2); transform: translateY(-1px); }

/* 左侧 3px 语义色条：让一组卡片按语义自成一格 */
.tf-stat::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--stat-color, var(--tf-accent));
}

.tf-stat-icon {
    flex: none;
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--stat-soft, var(--tf-accent-soft));
    color: var(--stat-color, var(--tf-accent));
}
.tf-stat-icon .mud-icon-root { font-size: 22px !important; }

.tf-stat-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tf-stat-label { font-size: 12.5px; color: var(--tf-ink-2); font-weight: 500; }
.tf-stat-value {
    font-size: 26px; font-weight: 700; line-height: 1.15;
    color: var(--tf-ink); letter-spacing: -0.02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tf-stat-value.is-accent { color: var(--stat-color, var(--tf-accent)); }
.tf-stat-hint { font-size: 12px; color: var(--tf-ink-3); margin-top: 1px; }

/* 语义变体 */
.tf-stat.s-success { --stat-color: var(--tf-success); --stat-soft: var(--tf-success-soft); }
.tf-stat.s-warning { --stat-color: var(--tf-warning); --stat-soft: var(--tf-warning-soft); }
.tf-stat.s-error   { --stat-color: var(--tf-error);   --stat-soft: var(--tf-error-soft); }
.tf-stat.s-info    { --stat-color: var(--tf-info);    --stat-soft: var(--tf-info-soft); }
.tf-stat.s-accent  { --stat-color: var(--tf-accent);  --stat-soft: var(--tf-accent-soft); }

/* ───────────────────────── 17. 分区标题 ───────────────────────── */
.tf-section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: var(--tf-ink);
    margin: 24px 0 12px;
}
.tf-section-title::before {
    content: ""; width: 3px; height: 15px; border-radius: 2px;
    background: var(--tf-accent);
}

/* ───────────────────────── 18. 报表卡片目录 ───────────────────────── */
.report-card { cursor: pointer; height: 100%; }
.report-card .mud-paper {
    height: 100%;
    transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.report-card:hover .mud-paper,
.report-card:focus-visible .mud-paper {
    border-color: var(--tf-accent-line);
    background: var(--tf-accent-soft);
    box-shadow: var(--tf-shadow-2) !important;
}
.report-card:focus-visible { outline: 2px solid var(--tf-accent); outline-offset: 2px; }

/* ───────────────────────── 19. 错误边界 / 校验 ───────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--tf-success); }
.invalid { outline: 1px solid var(--tf-error); }
.validation-message { color: var(--tf-error); }

.blazor-error-boundary {
    background: var(--tf-error);
    border-radius: var(--tf-radius);
    padding: 1rem 1rem 1rem 3.2rem;
    color: white;
    background-image: none;
    position: relative;
}
.blazor-error-boundary::before {
    content: "!";
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,.25);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.blazor-error-boundary::after { content: "页面发生错误，请刷新重试。"; }

/* ───────────────────────── 20. 响应式 ───────────────────────── */
/* 顶栏是「固定成本」布局：品牌 143 + 5 个域签 474 + 门店选择器 ≤168 + 用户区 118 + 2 图标 96
   + 6px 间距 ≈ 1040px，加上侧栏 236 与内容内边距 48 = 1324px。
   因此按档位逐级让出空间——此前只在 640px 才隐藏文字，为时已晚，1280 屏已会叠字。 */
@media (max-width: 1340px) {
    .tf-brand-text { display: none; }
}

@media (max-width: 1180px) {
    .tf-user-name { display: none; }
    .tf-domain { padding: 0 12px; }
    .tf-appbar .mud-select { max-width: 140px; }
}

@media (max-width: 1100px) {
    .tf-page { padding: 16px 18px 32px; }
}

/* 用 (0,2,0) 选择器：基础规则 `.tf-user-meta{display:flex}` 定义在媒体查询之后，
   同特异性会被后者覆盖，故提高一级。 */
@media (max-width: 1024px) {
    .tf-user .tf-user-meta { display: none; }
    .tf-user { padding: 4px; }
}

@media (max-width: 960px) {
    .tf-domains { overflow-x: auto; scrollbar-width: none; }
    .tf-domains::-webkit-scrollbar { display: none; }
    .tf-domain { padding: 0 11px; font-size: 13px; }
    .tf-flyout { display: none !important; }
    .tf-crumb-hint { display: none; }
    .tf-page-title { font-size: 19px; }
}

@media (max-width: 640px) {
    .tf-page { padding: 12px 12px 28px; }
    .tf-appbar .mud-select { max-width: 120px; }
    /* 窄屏：分段选择器整条可横向滑动，不撑破页头；触摸目标保持 ≥30px 高 */
    .tf-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .tf-seg::-webkit-scrollbar { display: none; }
    .tf-seg-item { padding: 0 11px; flex: 0 0 auto; }
}

/* 顶栏用户区文字栏 */
.tf-user-meta { display: flex; flex-direction: column; }

/* ───────────────────────── 21. 登录页（品牌分栏） ───────────────────────── */
.tf-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: var(--tf-canvas);
}

.tf-auth-hero {
    position: relative;
    overflow: hidden;
    /* 左右内边距取品牌区宽度的 24%：保证任意视口下文案缩进占比恒定，不贴屏幕左边 */
    padding: 56px clamp(56px, 24%, 340px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    color: #fff;
    background:
        radial-gradient(900px 520px at 86% -12%, rgba(255, 255, 255, .2), transparent 60%),
        linear-gradient(150deg, #F5943C 0%, #E8720C 46%, #BE500A 100%);
}

/* 低密度点阵：给大面积色块一点纵深，不干扰文字 */
.tf-auth-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 42%, #000 58%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 42%, #000 58%, transparent);
}

.tf-auth-hero > * { position: relative; z-index: 1; }

.tf-auth-brand { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }

.tf-auth-mark {
    width: 30px; height: 30px; border-radius: 9px;
    background: rgba(255, 255, 255, .22);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}

.tf-auth-slogan { font-size: 40px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; margin: 8px 0 0; }
.tf-auth-desc { font-size: 15px; opacity: .93; margin: 0; max-width: 32ch; }

.tf-auth-points { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 10px; }
.tf-auth-points li { position: relative; padding-left: 22px; font-size: 14px; opacity: .95; }
.tf-auth-points li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; }

.tf-auth-panel { display: flex; align-items: center; justify-content: center; padding: 32px; }

.tf-auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--tf-surface);
    border: 1px solid var(--tf-line);
    border-radius: var(--tf-radius-lg);
    box-shadow: var(--tf-shadow-2);
    padding: 34px 32px;
}

.tf-auth-title { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin: 0; color: var(--tf-ink); }
.tf-auth-sub { font-size: 13px; color: var(--tf-ink-2); margin: 6px 0 22px; }

@media (max-width: 860px) {
    .tf-auth { grid-template-columns: 1fr; }
    .tf-auth-hero { padding: 32px 24px; gap: 12px; }
    .tf-auth-slogan { font-size: 28px; }
    .tf-auth-points { display: none; }
    .tf-auth-panel { padding: 24px 16px 40px; }
}

/* ───────────────────────── 22. 无障碍：尊重减弱动效 ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tf-stat, .tf-stat:hover,
    .mud-button-root, .mud-button-root:active,
    .tf-domain, .tf-nav-head, .tf-flyout-link, .report-card .mud-paper,
    .tf-seg-item {
        transition: none !important;
        transform: none !important;
    }
}