/* 顶栏毛玻璃 —— 官网的招牌观感：内容从半透明顶栏下面透出来一点。
   AppbarBackground 在 AppTheme 里已经设成 0.8 透明度，这里补上模糊。
   两个模式都要，backdrop-filter 不吃颜色所以不用分开写 */
.app-bar {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* 主内容区跟着抽屉走，MudBlazor 已经处理了，这里只补一个最小高度，
   内容少的页面底部不至于空一大块白 */
.app-main {
    min-height: 100vh;
    background-color: var(--mud-palette-background-gray);
}

/* 表格：MudBlazor 默认没有竖线，字段多的表（订单、任务详情）眼睛容易串行。
   给需要的表加 table-grid 类 —— 用 CSS 变量取色，明暗自动跟着变 */
.table-grid td,
.table-grid th {
    border-right: 1px solid var(--mud-palette-table-lines);
}

.table-grid td:last-child,
.table-grid th:last-child {
    border-right: none;
}

/* 表头底色，有竖线之后表头不区分会显得很平 */
.table-grid thead th {
    background-color: var(--mud-palette-background-gray);
}

/* 滚动条收细并淡化，默认那条在浅色抽屉上很扎眼 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-action-default);
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ============ 登录页 ============ */
/* 尺寸和留白照 Masa Pro 模板那版：卡片 510x680，比 MudBlazor 默认宽松得多。
   后台的登录页一天只看一次，宽松点显得郑重，密集了像个弹窗 */
.empty-layout {
    min-height: 100vh;
    background-color: var(--mud-palette-background-gray);
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: 510px;
    max-width: 100%;
    min-height: 680px;
    padding: 48px 45px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
}

.login-head {
    text-align: center;
    padding-top: 12px;
    padding-bottom: 40px;
}

/* 表单撑开剩余空间，页脚永远贴底 —— 有无错误提示都不会让按钮上下跳 */
.login-form {
    flex: 1;
}

/* 提示区固定高度，出不出错都占这么多 */
.login-hint {
    min-height: 24px;
    margin: 8px 0 16px;
}

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

/* 窄屏不强求 680 高，手机上会顶出一屏多 */
@media (max-height: 760px), (max-width: 560px) {
    .login-card {
        min-height: auto;
        padding: 32px 24px;
    }

    .login-head {
        padding-bottom: 24px;
    }
}

/* ============ 详情表 ============ */
/* 「标签 : 值」两列：标签列给点底色跟数值分开。
   用 CSS 变量取色，明暗自动跟着变 —— 写死 #FAFBFE 的话暗色下会白晃晃一条 */
.detail-label {
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    font-size: 0.8125rem;
}

/* 原始报文：等宽字体 + 可滚动，长 JSON 不至于把弹窗撑爆 */
.raw-payload {
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 12px;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow: auto;
    margin: 0;
}

/* ============ 支付二维码 ============ */
.qr-frame {
    display: inline-block;
    padding: 12px;
    border-radius: 12px;
    border: 2px solid var(--mud-palette-lines-default);
    /* 码必须是白底黑块才扫得出来，暗色模式下也不能跟着变深 */
    background: #fff;
}

/* 扫过的码连边框一起变红，隔着几步远也看得出来这张别再扫了 */
.qr-frame--scanned {
    border-color: var(--mud-palette-error);
}

/* 订单号这类要逐字核对的内容用等宽字体，看错一位就是另一单 */
.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ============ 状态标签浅色底 ============ */
/* Masa 那种「浅色底 + 深色字」的标签观感，MudBlazor 的 Variant.Text 是透明底，
   在密集表格里跟普通文字分不开。用主色的 12% 透明度当底 ——
   走 rgb 变量而不是写死颜色，明暗两套自动跟着变 */
.mud-chip.mud-chip-text.mud-chip-color-primary { background-color: rgba(var(--mud-palette-primary-rgb), 0.12); }
.mud-chip.mud-chip-text.mud-chip-color-secondary { background-color: rgba(var(--mud-palette-secondary-rgb), 0.12); }
.mud-chip.mud-chip-text.mud-chip-color-info { background-color: rgba(var(--mud-palette-info-rgb), 0.12); }
.mud-chip.mud-chip-text.mud-chip-color-success { background-color: rgba(var(--mud-palette-success-rgb), 0.12); }
.mud-chip.mud-chip-text.mud-chip-color-warning { background-color: rgba(var(--mud-palette-warning-rgb), 0.12); }
.mud-chip.mud-chip-text.mud-chip-color-error { background-color: rgba(var(--mud-palette-error-rgb), 0.12); }
.mud-chip.mud-chip-text.mud-chip-color-default { background-color: var(--mud-palette-background-gray); }

/* 表格里的标签不要撑高行 */
.mud-table-cell .mud-chip {
    height: 22px;
}

/* ============ 名单批量导入 ============ */
/* 拖放区外观。拖放行为本身归 MudFileUpload 管（DragAndDrop="true"），
   这里只画样子 —— 之前是自己拿 InputFile 铺一层透明输入框实现的，删掉了 */
.import-drop {
    height: 96px;
    border-style: dashed;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.import-drop:hover {
    border-color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04);
}

/* MudFileUpload 拖拽悬停时给整个拖放区上色 */
.mud-file-upload-dragarea .import-drop {
    border-color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
}

/* 步骤条在弹窗里不需要额外内边距，内容区已经有了 */
.import-stepper {
    box-shadow: none;
}

/* 校验不过的行整行标出来，扫一眼就知道要改哪几条 */
.import-row--error {
    background-color: rgba(var(--mud-palette-error-rgb), 0.06);
}

.import-row--error td {
    color: var(--mud-palette-error);
}

/* ============ 二维码墙 ============ */
.wall-item {
    position: relative;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 8px;
    text-align: center;
    /* 码必须白底黑块才扫得出来，暗色模式下也不能跟着变深 */
    background: #fff;
    height: 100%;
}

/* 扫过的整块变红，隔着几步远也看得出来这张别再扫了。
   ★ 红色优先级最高：盖过下面两种付款方式的颜色 —— 「别再扫」比「用哪个 App」要紧 */
.wall-item--scanned {
    border-color: var(--mud-palette-error);
    background: #FFF8F8;
}

/* 付款方式（09-22 用户定）：拿错 App 扫的当场看得出来。
   ⚠️ 用的是两家的品牌色写死值，不走主题变量 —— 这张卡片是白底的（码必须白底才扫得出来），
   暗色模式下跟着主题变会变成浅色，在白底上根本看不见 */
.wall-item--alipay {
    border-color: #1677FF;
}

.wall-item--wechat {
    border-color: #07C160;
}

.wall-item img {
    width: 100%;
    max-width: 150px;
    aspect-ratio: 1;
    display: block;
    margin: 0 auto;
}

/* 码中间那个付款方式 logo（09-22 用户要的，照支付宝官方码那种样式）。
   ⚠️⚠️ **尺寸别往大调**：能挡住中间是因为码用 ECC Q（25% 容错），
   现在 logo 占约 5% 面积，留着大把余量。调到 40% 以上就扫不出来了，
   而且【不报错】—— 只是那一队人对着屏幕扫半天没反应 */
.wall-qr {
    position: relative;
    width: 100%;
    max-width: 150px;
    margin: 0 auto;
}

.wall-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 23%;
    aspect-ratio: 1;
    border-radius: 24%;
    /* 白边把 logo 和码块隔开，扫描算法更容易定位 —— 官方码也是这么留白的 */
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    /* 跟着码的大小走，手机上码小了字也跟着小 */
    font-size: 15px;
    line-height: 1;
    user-select: none;
}

.wall-logo--alipay {
    background: #1677FF;
}

.wall-logo--wechat {
    background: #07C160;
}

/* 微信那个双气泡：撑满 logo 方块的大部分，留一圈绿边 */
.wall-logo svg {
    width: 74%;
    height: 74%;
    display: block;
}

/* 这几行字压在白底二维码卡片上，不能用主题色变量 —— 暗色下会变成白字白底 */
.wall-amount {
    font-size: 14px;
    font-weight: 700;
    color: #1B2559;
    margin-top: 6px;
}

.wall-line {
    font-size: 12px;
    color: #1B2559;
    margin-top: 2px;
}

/* 白底上原来是 #6B77A3，只有 4.38:1，差一点到 AA 线。11px 的小字更该给足对比 */
.wall-sub {
    font-size: 11px;
    color: #66719B;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 备注：比姓名那行深一档（扫码的人要读它），单行省略免得长备注把卡片撑变形 */
.wall-remark {
    font-size: 12px;
    font-weight: 600;
    color: #1B2559;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wall-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #E53935;
    color: #fff;
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 10px;
}

/* 链接很长，等宽 + 允许断行，免得把表格撑出横向滚动条 */
.link-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--mud-palette-primary);
    word-break: break-all;
}

/* ============ 公开支付页 ============ */
/* 这一页发给外人，在手机上打开。固定浅色不跟随主题 ——
   付款的人没有「切主题」这个上下文，而且二维码必须白底才扫得出来 */
.pay-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 24px 12px 40px;
    box-sizing: border-box;
    background: #F4F7FE;
}

/* margin:auto 而不是 align-items:center：同样能垂直居中，
   但内容比屏幕高的时候不会把顶部裁掉滚不上去 */
.pay-shell {
    width: 100%;
    /* 520 → 720（09-22 用户要求）：这一页多半开在电脑上让人拿手机扫屏幕，
       520 的话三列挤下来每张码才 150px，隔一步就扫不着了 */
    max-width: 720px;
    margin: auto;
}

/* 头卡（10-17 重做）：上面「谁的链接 + 待发码」，别的页面锁着的单作为浅琥珀色底条连在下面 */
.pay-head {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(30, 36, 64, .06), 0 8px 24px rgba(30, 36, 64, .06);
    margin-bottom: 14px;
    overflow: hidden;
}

.pay-head-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
}

/* 09-22 用户定：「代理 · 备注人」比标题显眼 —— 看的人关心的是这是谁的链接 */
.pay-head-title { font-size: 12px; font-weight: 500; color: #8A91AE; }
.pay-head-sub { font-size: 16px; font-weight: 700; color: #1E2440; margin-top: 2px; line-height: 1.3; }
.pay-head-stat { flex-shrink: 0; text-align: right; padding-left: 16px; border-left: 1px solid #EEF0F6; }
/* 待发码数字黄色（09-22 用户定），amber-500 */
.pay-head-num { font-size: 26px; font-weight: 800; color: #F59E0B; line-height: 1; font-variant-numeric: tabular-nums; }
.pay-head-label { font-size: 11px; color: #8A91AE; margin-top: 4px; }

.pay-lock {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    background: #FFF6DD;
    border-top: 1px solid #F8E3A6;
    color: #8A5A00;
    font-size: 12px;
    line-height: 1.5;
}

.pay-lock-time { font-weight: 600; font-variant-numeric: tabular-nums; }

.pay-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(112, 144, 176, .12);
}

.pay-state { padding: 56px 24px; text-align: center; }
.pay-state-title { font-size: 16px; font-weight: 600; color: #2B3674; margin-top: 16px; }
.pay-state-sub { font-size: 12px; color: #7681AB; margin-top: 8px; line-height: 1.7; }

/* 手机上两列，屏幕宽了自动变三列 */
.qr-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 480px) {
    .qr-grid { grid-template-columns: repeat(3, 1fr); }
}

.qr-item {
    position: relative;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 12px 10px 14px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(112, 144, 176, .12);
    transition: border-color .15s, background-color .15s;
}

/* 扫过的整块变红：隔着一臂远也能一眼看出这张跳过 */
.qr-item--done {
    border-color: #E53935;
    background: #FFF6F6;
}

.qr-item--done .qr-img { opacity: .45; }

.qr-done-mark {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #E53935;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* ★ 必须是定位上下文：码中间那个付款方式 logo 要绝对定位到正中（09-22） */
.qr-img { position: relative; }

.qr-img img { width: 100%; aspect-ratio: 1; display: block; }

.qr-amount { font-size: 15px; font-weight: 700; color: #2B3674; margin-top: 8px; }
.qr-name { font-size: 11px; color: #7681AB; margin-top: 2px; }
/* 备注人改草绿（09-22 用户定）。用 light-green-700 而不是更浅的 ——
   白底上浅绿的小字看不清，这一行是分单子的关键信息 */
.qr-remark { font-size: 12px; font-weight: 600; color: #689F38; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-order { font-size: 11px; color: #7681AB; font-family: ui-monospace, Menlo, monospace; margin-top: 2px; }
.qr-expire { font-size: 11px; color: #d97706; margin-top: 4px; }   /* Tailwind amber-600，跟「还给别人」按钮同一个橙 */
.qr-expire--soon { color: #E5484D; font-weight: 600; }
.qr-no { font-family: var(--mud-typography-monospace-family, ui-monospace, monospace); letter-spacing: .3px; }

.pay-actions { margin-top: 18px; }

/* 用原生 button 不用 MudButton：这一页要固定浅色，
   MudButton 会跟着主题变色，暗色下按钮会变成深底 */
.pay-btn-main {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 24px;
    background: #594AE2;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.pay-btn-main:disabled { opacity: .6; cursor: default; }

/* 次要操作：橙色实心（Tailwind amber-600，不刺眼），字小一点，看得出是按钮但不跟主按钮抢 */
.pay-btn-release {
    width: 100%;
    height: 40px;
    margin-top: 12px;
    border: none;
    border-radius: 20px;
    background: #d97706;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

/* 开启声音提醒：绿色实心，跟主按钮、还码按钮分开 */
.pay-btn-sound {
    width: 100%;
    height: 40px;
    margin-top: 12px;
    border: none;
    border-radius: 20px;
    background: #16a34a;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

/* 支付页三颗按钮的手感（10-07 用户说的：鼠标放上去、按下去都没反应，不知道按没按上）。
   放上去变亮带阴影，按下去缩一下变深；禁用的不动 */
.pay-btn-main,
.pay-btn-release,
.pay-btn-sound {
    transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}

.pay-btn-main:hover:not(:disabled),
.pay-btn-release:hover:not(:disabled),
.pay-btn-sound:hover:not(:disabled) {
    filter: brightness(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.pay-btn-main:active:not(:disabled),
.pay-btn-release:active:not(:disabled),
.pay-btn-sound:active:not(:disabled) {
    transform: scale(.97);
    filter: brightness(.9);
    box-shadow: none;
}

/* 订单统计四张分布表（代理 / 机型 / 城市 / 门店）：超过 5 行出滚动条（10-08 用户定）。
   紧凑表格一行约 33px，表头 + 5 行 ≈ 200 */
.stats-scroll {
    max-height: 200px;
    overflow: auto;
}

.pay-foot {
    margin-top: 14px;
    text-align: center;
    font-size: 11px;
    color: #7681AB;
    line-height: 1.7;
}

/* ============ 左侧抽屉 ============ */
/* drawer 里现在只有 MudNavMenu 一个元素（logo 挪去 AppBar 了）——
   多个元素在 .mud-drawer-content 这个 flex column 里抢高度时，
   菜单会被整体推到半屏以下，怎么调 flex 都按不住。
   一个元素就没有分配问题。 */
/* drawer 内部：banner 固定，菜单吃掉剩余空间并自己滚。
   **每个子项的 flex 都要写死** —— 不写的话浏览器按内容分配，
   banner 会被拉高、菜单被挤到半屏以下（这个坑踩过一次） */
.drawer-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.drawer-banner {
    flex: 0 0 auto;
    /* 左右不留 padding：图片自己 210px 定宽居中，drawer 是 240px */
    padding: 24px 0 2px;
}

.drawer-banner img {
    display: block;
    width: 210px;
    max-width: calc(100% - 16px);
    height: 85px;
    margin: 0 auto;

    /* 图已按 210:85 裁好（09-28 换的折叠屏图），居中铺满即可 */
    object-fit: cover;
    object-position: 50% 50%;

    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
}

/* 产品图是纯白底，深色界面里会白得刺眼 */
@media (prefers-color-scheme: dark) {
    .drawer-banner img {
        filter: brightness(.86);
    }
}

:root[data-theme="dark"] .drawer-banner img {
    filter: brightness(.86);
}

:root[data-theme="light"] .drawer-banner img {
    filter: none;
}

/* ⚠️⚠️ **必须是直接子选择器 `>`，写成后代选择器会让二级菜单滚不动。**
   MudNavGroup 内部又渲染了一个完整的 `<MudNavMenu>`（见它的 .razor：
   MudCollapse 里包着 MudNavMenu），后代选择器会把【嵌套的那个】也设成
   overflow-y:auto —— 于是二级菜单区域变成独立滚动容器，鼠标停在
   「抢购任务 / 定时任务」这些子项上滚动时，事件被它接走，只能拖右边的滚动条。
   踩过一次，别把 `>` 去掉。 */
.drawer-inner > .mud-navmenu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 上边距不写在这里 —— MudNavMenu 上挂的 pa-* 间距类带 !important，
   外部样式表的 padding 压不过去。改在组件的 Class 上（见 NavMenu.razor） */

/* 抽屉里的滚动条收细，默认那条在浅色侧边栏上很扎眼 */
.mud-drawer .mud-navmenu::-webkit-scrollbar {
    width: 4px;
}

/* 折叠菜单的箭头：**向左是合上，向下是打开**。

   MudBlazor 默认给的是 ArrowDropDown（▼），展开时 rotate(-180deg) 翻成 ▲ ——
   两个状态都是三角形，只差一个翻转，扫一眼分不出当前是开是合。

   改成 ChevronLeft（◀）之后，合上是 ◀、展开逆时针转 90° 变 ▼。

   ⚠️ 是 -90deg 不是 90deg：ChevronLeft 的尖端朝左，
   顺时针转会变成朝上（▲），只有逆时针才朝下。

   选择器要带 .mud-nav-link 才压得过 MudBlazor 自己那条
   （它是 .mud-nav-link .mud-nav-link-expand-icon.mud-transform，两级） */
.mud-navmenu .mud-nav-link .mud-nav-link-expand-icon.mud-transform,
.mud-navmenu .mud-nav-link .mud-nav-link-expand-icon.mud-transform-disabled {
    transform: rotate(-90deg);
}

/* 箭头位置保持 MudBlazor 默认的行尾右对齐（.mud-nav-link-text 是 width:100%
   把它顶过去的）。试过挪到标题旁边，太挤，还是靠右舒服 —— 别再改了 */

/* 菜单文字统一 500。MudBlazor 默认只给「能展开的一级分组」和「当前选中项」500，
   其余全是 400 —— 一列里两种字重，没选中的那些看着发虚、整个菜单显得细。
   写在 .mud-nav-link-text 上：那个 400 是从 .mud-nav-link 继承下来的，
   继承值优先级最低，直接声明就能盖住，不用堆特异性也不用 !important */
.mud-navmenu .mud-nav-link-text {
    font-weight: 500;
}

/* 菜单图标放大一点。默认 20px 配实心款显得局促，24px 跟 14px 的文字比例更稳 */
.mud-navmenu .mud-nav-link-icon {
    font-size: 1.4rem;
    width: 1.4rem;
    height: 1.4rem;
}

/* 子菜单的图标收一点，层级才看得出来。

   ⚠️ 容器必须写 .mud-navgroup-collapse，不能写 .mud-nav-group ——
   分组的 DOM 是这样的：

     <nav class="mud-nav-group">
       <button class="mud-nav-link">        ← 组自己（一级菜单）
       <div class="mud-navgroup-collapse">  ← 展开的部分
         <MudNavMenu><a class="mud-nav-link">  ← 子项

   写 .mud-nav-group .mud-nav-link 会把那个 button 一起选中，
   结果「结算管理 / 任务配置 / 系统设置」的图标跟着子项一起缩小，
   跟其他一级菜单不齐 */
.mud-navmenu .mud-navgroup-collapse .mud-nav-link-icon {
    font-size: 1.15rem;
    width: 1.15rem;
    height: 1.15rem;
}

/* AppBar 上的站名：窄屏藏起来，给页面标题让位 */
/* ============ 工具条：手机上别塌 ============ */
/* ⚠️ **按钮任何宽度下都不许被压扁。** flex 默认允许收缩，一挤就把
   「备份到历史」断成一列竖着的字 —— 手机上整个按钮变成一根竖条。
   这跟断点无关，是任何时候都不该发生的事 */
.mud-paper .mud-button-root {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ============ 中性状态 chip ============ */
/* MudChip 的 Color.Default 用的是 action-default，明暗两套底下都只有 2 点几比一，
   「待下发」这种要看清的状态挂上去就糊了。改用 text-secondary（浅色 8.6:1、
   深色 5.6:1，主题里专门校过），背景用 hover 那档灰把 chip 的形状留住 */
.mud-chip.chip-neutral {
    color: var(--mud-palette-text-secondary) !important;
    background-color: var(--mud-palette-action-default-hover) !important;
}

/* ============ 表格操作列 ============ */
/* 操作列整列靠右：内容和表头必须一起右对齐，
   只对内容做的话表头文字还在左边，两者对不上 */
.action-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

/* 表头这一侧。MudDataGrid 的表头单元格里还有一层 .column-header，
   它是 flex + justify-content: space-between —— 所以光给 th 设
   text-align 推不动，标题会一直贴在左边。要改的是那一层。 */
.action-head .column-header {
    justify-content: flex-end;
}

/* 名单工具条上的搜索框：Dense 描边输入框天生 42px，比 36.5px 的按钮高一截还沉底。
   把上下内边距收到 7/8px 就跟按钮一样高（19 行高 + 15 + 2 边框 ≈ 36.5） */
.toolbar-search .mud-input-outlined .mud-input-slot.mud-input-root-margin-dense {
    padding-top: 7px;
    padding-bottom: 8px;
}

.toolbar-search.mud-input-control { margin: 0; }

/* ============ 抢购任务 ============ */
.row-pick {
    cursor: pointer;
}

/* 姓名首字头像。没有真实照片，但一列灰字里有个色块，扫视时容易定位到某个人 */
.ava {
    flex: none;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    user-select: none;
}

/* 占用账号数：这一页最要紧的数，给个底色让它跳出来 */
.acc-count {
    display: inline-block;
    min-width: 24px;
    padding: 1px 8px;
    border-radius: 10px;
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

/* 表格铺满宽度 —— 固定像素在宽屏上加起来只占一半，右边空一大片 */
.task-table table {
    width: 100%;
    table-layout: fixed;
}

/* table-layout:fixed 之后超长内容会顶破单元格，统一截断 */
.task-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cursor-pointer {
    cursor: pointer;
}

/* ============ 结算统计 ============ */
/* 代理小计行加个底色，一眼能从明细里分出来 */
.stat-agent-row {
    cursor: pointer;
}

.stat-agent-row td {
    background-color: var(--mud-palette-background-gray);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.stat-agent-row:hover td {
    background-color: var(--mud-palette-table-hover);
}

/* 展开时箭头转成向下，比换一个图标省事且有过渡 */
.stat-caret {
    transition: transform .15s;
}

.stat-caret--open {
    transform: rotate(90deg);
}

/* ============ 主操作按钮 ============ */
/* 备份到历史：这一页唯一的写操作，而且不可逆（订单移出结算范围）。
   给它比普通按钮更重的份量 —— 实心主色 + 一点阴影 + 加宽内边距，
   在一排描边控件里第一眼就能看到。
   禁用态走 MudBlazor 默认（变灰），不另外描 —— 灰下去本身就是「现在不能点」 */
.btn-backup {
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 500;
    letter-spacing: .3px;
    box-shadow: 0 2px 8px rgba(var(--mud-palette-primary-rgb), 0.28);
}

.btn-backup:hover:not(:disabled) {
    box-shadow: 0 4px 14px rgba(var(--mud-palette-primary-rgb), 0.38);
}

.btn-backup:disabled {
    box-shadow: none;
}

/* 异常信息这一列不许换行 —— 「付款后 35 小时没提货」断成两行反而更难读 */
.overdue-cell {
    white-space: nowrap;
}

/* 抢购任务：数字列居中且不换行。内容最多三位数，
   左对齐的话一排数字参差不齐，扫不出大小关系 */
.task-table .num-col {
    text-align: center;
    white-space: nowrap;
}

/* 「任务详情」按钮不许被压成两行 */
.task-table .text-right {
    text-align: right;
    white-space: nowrap;
}

/* 手写表格里的「操作」表头靠右 —— MudSimpleTable 没有 HeaderClass 参数，
   直接给 th 加类。它内部没有 .column-header 那层，text-align 就够 */
.action-head-cell {
    text-align: right;
}

/* ============ 商品管理 ============ */
/* 抢购顺序：这一栏的先后就是抢购程序打的顺序，序号要一眼能看清 */
.prio-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

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

.prio-num {
    flex: none;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.prio-text {
    flex: 1;
    min-width: 0;
}

.prio-ops {
    flex: none;
    display: flex;
    gap: 2px;
}

/* 表格里的优先级角标 */
.prio-badge {
    display: inline-block;
    min-width: 20px;
    margin-right: 6px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

/* 整行可点。复选框不接事件，点击一律交给行处理 —— 
   两边都绑的话点中方框会触发两次、状态原地不动 */
.product-table .row-pick {
    cursor: pointer;
}

.product-table .pick-box {
    pointer-events: none;
}

.city-count {
    opacity: .7;
    font-size: 11px;
}

/* 标题下那行说明里的数字。原来整行是 caption + text-secondary，
   人数、款数全糊在灰色小字里，得凑近了看 —— 而这几个数正是这一页的主语：
   「谁、多少人、选了几款」。放大一档 + 加粗，让它们从句子里跳出来 */
.stat-num {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* 城市名跟下面那排选中的城市标签同色，一眼对得上 */
.stat-hl {
    color: #7B1FA2;
    font-weight: 700;
}

/* 「已选 N 款」是唯一会被这一页改动的数，给它同一个紫 */
.stat-on {
    color: #7B1FA2;
}

@media (prefers-color-scheme: dark) {
    .stat-hl, .stat-on { color: #CE93D8; }
}

:root[data-theme="dark"] .stat-hl,
:root[data-theme="dark"] .stat-on { color: #CE93D8; }

:root[data-theme="light"] .stat-hl,
:root[data-theme="light"] .stat-on { color: #7B1FA2; }

/* 选中的城市用紫色，不用主色 —— 主色是 #594AE2（蓝紫），
   页面上按钮、别的 chip 全是它，选中的那个混在里面一眼挑不出来。
   紫色跟蓝紫拉开了色相，明暗两套都是白字，对比度 8.0:1 / 6.6:1 */
.city-chip-on {
    background-color: #7B1FA2 !important;
    color: #fff !important;
}

/* 紫底上 .7 的白字偏灰，提一点 */
.city-chip-on .city-count {
    opacity: .85;
}

@media (prefers-color-scheme: dark) {
    .city-chip-on {
        background-color: #8E24AA !important;
    }
}

:root[data-theme="dark"] .city-chip-on {
    background-color: #8E24AA !important;
}

:root[data-theme="light"] .city-chip-on {
    background-color: #7B1FA2 !important;
}


/* 通知设置里那排数字框。装的都是两三位数（300、30、5），
   默认宽度撑满一格，一屏扫过去全是空白输入框，看着比实际复杂得多 */
.num-field {
    max-width: 190px;
}

.num-field input {
    font-size: 0.9rem;
}


/* 「筛选」按钮：主题里的 Warning 是 #ff9800 / #ffb545 那种荧光橘，摆在工具栏上太跳，这里压暗一档 */
.btn-filter {
    background-color: #C2662F !important;
    color: #fff !important;
}

.btn-filter:hover {
    background-color: #AC5926 !important;
}

@media (prefers-color-scheme: dark) {
    .btn-filter {
        background-color: #CB7A3E !important;
    }

    .btn-filter:hover {
        background-color: #B96C34 !important;
    }
}

:root[data-theme="dark"] .btn-filter {
    background-color: #CB7A3E !important;
}

:root[data-theme="dark"] .btn-filter:hover {
    background-color: #B96C34 !important;
}

:root[data-theme="light"] .btn-filter {
    background-color: #C2662F !important;
}

:root[data-theme="light"] .btn-filter:hover {
    background-color: #AC5926 !important;
}


/* 草绿：主题的 Success 是 #00c853 / #3dcb6c 那种荧光绿，一排按钮里最抢眼的反而不是主操作 */
.btn-grass {
    background-color: #4E7C2F !important;
    color: #fff !important;
}

.btn-grass:hover {
    background-color: #436A28 !important;
}

/* 深红：主题的 Error 是 #f44336 / #ff5c78 的鲜红，做「清空」这种成片出现的按钮太扎眼 */
.btn-deep-red {
    background-color: #A3342B !important;
    color: #fff !important;
}

.btn-deep-red:hover {
    background-color: #8C2B23 !important;
}

/* 禁用态要还回主题色，否则灰不下去、看着还能点 */
.btn-grass:disabled,
.btn-deep-red:disabled {
    background-color: var(--mud-palette-action-disabled-background) !important;
    color: var(--mud-palette-action-disabled) !important;
}

@media (prefers-color-scheme: dark) {
    .btn-grass {
        background-color: #5E9639 !important;
    }

    .btn-grass:hover {
        background-color: #6EA847 !important;
    }

    .btn-deep-red {
        background-color: #B5423A !important;
    }

    .btn-deep-red:hover {
        background-color: #C64F46 !important;
    }
}

:root[data-theme="dark"] .btn-grass {
    background-color: #5E9639 !important;
}

:root[data-theme="dark"] .btn-grass:hover {
    background-color: #6EA847 !important;
}

:root[data-theme="dark"] .btn-deep-red {
    background-color: #B5423A !important;
}

:root[data-theme="dark"] .btn-deep-red:hover {
    background-color: #C64F46 !important;
}

:root[data-theme="light"] .btn-grass {
    background-color: #4E7C2F !important;
}

:root[data-theme="light"] .btn-grass:hover {
    background-color: #436A28 !important;
}

:root[data-theme="light"] .btn-deep-red {
    background-color: #A3342B !important;
}

:root[data-theme="light"] .btn-deep-red:hover {
    background-color: #8C2B23 !important;
}

/* 按钮组里两段同色，中间要有条缝，否则看着像一个特别长的按钮 */
.mud-button-group-root > .btn-grass:not(:last-child),
.mud-button-group-root > :not(:last-child) .btn-grass {
    border-right: 1px solid rgba(255, 255, 255, .38) !important;
}

/* 组里第二个按钮：铺门店跟配机型不是一回事，同色会让人以为是一个操作的两半 */
.btn-teal {
    background-color: #2E6F78 !important;
    color: #fff !important;
}

.btn-teal:hover {
    background-color: #275E66 !important;
}

.btn-teal:disabled {
    background-color: var(--mud-palette-action-disabled-background) !important;
    color: var(--mud-palette-action-disabled) !important;
}

@media (prefers-color-scheme: dark) {
    .btn-teal {
        background-color: #3B8A95 !important;
    }

    .btn-teal:hover {
        background-color: #479CA8 !important;
    }
}

:root[data-theme="dark"] .btn-teal {
    background-color: #3B8A95 !important;
}

:root[data-theme="dark"] .btn-teal:hover {
    background-color: #479CA8 !important;
}

:root[data-theme="light"] .btn-teal {
    background-color: #2E6F78 !important;
}

:root[data-theme="light"] .btn-teal:hover {
    background-color: #275E66 !important;
}

/* 卡片标题：默认跟正文一个色，一眼扫过去分不出哪儿是标题。青色比主色紫克制，不抢按钮的注意力 */
.card-title {
    color: #1F6F7A !important;
}

@media (prefers-color-scheme: dark) {
    .card-title {
        color: #62C4D3 !important;
    }
}

:root[data-theme="dark"] .card-title {
    color: #62C4D3 !important;
}

:root[data-theme="light"] .card-title {
    color: #1F6F7A !important;
}

/* 门店平铺打钩：下拉的浮层会把整个弹窗糊住，看不见自己刚填的东西。一行几个由容器宽度自己定 */
.pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0 8px;
    width: 100%;
    padding: 6px 8px;
}

/* 「留空 = 不限」这类小字是会踩坑的默认值，灰色跟普通说明混在一起，得标黄跳出来 */
.helper-warn .mud-input-helper-text {
    color: var(--mud-palette-warning) !important;
}

/* 账号池「已派发」芯片：青绿 #46DEC2（用户挑的）。暗色底它做字色；亮色底它做字色不到 2:1，
   改成它做底色 + 深字，两边都看得清 */
.chip-dispatched {
    color: #083D35 !important;
    background-color: #46DEC2 !important;
}

@media (prefers-color-scheme: dark) {
    .chip-dispatched {
        color: #46DEC2 !important;
        background-color: rgba(70, 222, 194, .15) !important;
    }
}

/* ============ 苹果官网风（09-28，回退点 git tag ui-before-apple-theme） ============ */
/* 按钮胶囊形。.mud-button 不含纯图标按钮；按钮组里的直角规则特异性更高，照样生效 */
.mud-button {
    border-radius: 980px;
}

/* 内容区的卡片白底加一道细边；卡片套卡片（表格自己也是一张卡片）里层不再加，免得双线 */
.mud-main-content .mud-paper {
    border: 1px solid var(--mud-palette-lines-default);
}

.mud-main-content .mud-paper .mud-paper {
    border: none;
}

/* 站内信表情面板：弹层默认 z-index 1200，会被聊天框（1300）盖住；压在对话框（1400）下面（10-15） */
.chat-emoji-popover {
    z-index: 1350 !important;
}

/* 顶栏超管公告：从右往左飘，鼠标放上去停（10-16） */
.app-announcement {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 16px;
    font-size: 1.5rem;
    font-weight: 700;
}

.app-announcement span {
    display: inline-block;
    padding-left: 100%;
    animation: app-announcement-scroll 20s linear infinite;
}

.app-announcement:hover span {
    animation-play-state: paused;
}

@keyframes app-announcement-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}