/* daideal6 管理后台 共享设计语言
 * ------------------------------------------------------------
 * 命名空间：所有自定义 class 以 .ds- 或 .admin- 前缀做隔离，
 * 不覆盖 .task-runtime-settings-modal / .order-row-risk-* 等历史样式。
 * 配套脚本：static/clear-workflow/components.js（window.AdminComponents）。
 * 文档：docs/design_system.md。
 * 颜色 hex 与 Bootstrap 5 默认主题保持一致（语义色对齐），同时独立
 * 于既有 --primary-color / --primary-light 等老 token，避免破坏旧 UI。
 * ------------------------------------------------------------ */

:root {
    /* 状态语义色（与 Bootstrap 5 默认对齐） */
    --ds-primary: #2563eb;
    --ds-success: #16a34a;
    --ds-warning: #d97706;
    --ds-danger:  #dc2626;
    --ds-info:    #0891b2;
    --ds-muted:   #64748b;

    /* 文字 / 背景 / 边框 */
    --ds-bg-card:        #ffffff;
    --ds-bg-page:        #f8fafc;
    --ds-bg-elevated:    #ffffff;
    --ds-border:         #e2e8f0;
    --ds-border-strong:  #cbd5e1;
    --ds-text:           #1e293b;
    --ds-text-soft:      #475569;
    --ds-text-muted:     #64748b;

    /* 阴影 */
    --ds-shadow-card:    0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .04);
    --ds-shadow-drawer:  -8px 0 24px rgba(15, 23, 42, .12);
    --ds-shadow-hover:   0 4px 14px rgba(37, 99, 235, .12);

    /* 圆角 */
    --ds-radius:    10px;
    --ds-radius-sm: 6px;
    --ds-radius-lg: 16px;

    /* 间距 */
    --ds-space-card-pad: 16px;
    --ds-space-card-gap: 12px;
    --ds-space-row-h:    56px;

    /* 字号 */
    --ds-fs-title: 16px;
    --ds-fs-sub:   14px;
    --ds-fs-body:  13px;
    --ds-fs-hint:  12px;

    /* 状态色辅助：状态徽章背景 + 前景 */
    --ds-status-pending-bg:   #fef3c7;  --ds-status-pending-fg:   #92400e;
    --ds-status-running-bg:   #dbeafe;  --ds-status-running-fg:   #1d4ed8;
    --ds-status-paused-bg:    #e0e7ff;  --ds-status-paused-fg:    #3730a3;
    --ds-status-scheduled-bg: #ede9fe;  --ds-status-scheduled-fg: #5b21b6;
    --ds-status-completed-bg: #dcfce7;  --ds-status-completed-fg: #166534;
    --ds-status-failed-bg:    #fee2e2;  --ds-status-failed-fg:    #991b1b;
    --ds-status-cancelled-bg: #f1f5f9;  --ds-status-cancelled-fg: #475569;
    --ds-status-refunding-bg: #cffafe;  --ds-status-refunding-fg: #155e75;
    --ds-status-refunded-bg:  #ccfbf1;  --ds-status-refunded-fg:  #115e59;
    --ds-status-partial-bg:   #fef9c3;  --ds-status-partial-fg:   #854d0e;
}

/* ============================================================
 * 1. .status-badge  —— 10 种状态徽章
 * ============================================================ */
.ds-status-badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--ds-fs-hint);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
    background: var(--ds-bg-card);
    color: var(--ds-text-soft);
}
.status-badge .bi { font-size: 11px; line-height: 1; }
.status-badge.status-pending,
.ds-status-badge.status-pending   { background: var(--ds-status-pending-bg);   color: var(--ds-status-pending-fg); }
.status-badge.status-running,
.ds-status-badge.status-running   { background: var(--ds-status-running-bg);   color: var(--ds-status-running-fg); }
.status-badge.status-running .bi { animation: ds-spin 1.4s linear infinite; }
.status-badge.status-paused,
.ds-status-badge.status-paused    { background: var(--ds-status-paused-bg);    color: var(--ds-status-paused-fg); }
.status-badge.status-scheduled,
.ds-status-badge.status-scheduled { background: var(--ds-status-scheduled-bg); color: var(--ds-status-scheduled-fg); }
.status-badge.status-completed,
.ds-status-badge.status-completed { background: var(--ds-status-completed-bg); color: var(--ds-status-completed-fg); }
.status-badge.status-failed,
.ds-status-badge.status-failed    { background: var(--ds-status-failed-bg);    color: var(--ds-status-failed-fg); }
.status-badge.status-cancelled,
.ds-status-badge.status-cancelled { background: var(--ds-status-cancelled-bg); color: var(--ds-status-cancelled-fg); }
.status-badge.status-refunding,
.ds-status-badge.status-refunding { background: var(--ds-status-refunding-bg); color: var(--ds-status-refunding-fg); }
.status-badge.status-refunded,
.ds-status-badge.status-refunded  { background: var(--ds-status-refunded-bg);  color: var(--ds-status-refunded-fg); }
.status-badge.status-partial_refunded,
.ds-status-badge.status-partial_refunded { background: var(--ds-status-partial-bg); color: var(--ds-status-partial-fg); }

@keyframes ds-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ============================================================
 * 2. .ds-order-card —— 订单卡片
 *    一行 56px；多行撑开；卡片间距 12px
 * ============================================================ */
.ds-order-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ds-bg-card);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    padding: var(--ds-space-card-pad);
    margin-bottom: var(--ds-space-card-gap);
    box-shadow: var(--ds-shadow-card);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    overflow: hidden;
}
.ds-order-card::before {
    /* 左侧状态色竖条 */
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ds-muted);
    opacity: .85;
}
.ds-order-card[data-status-tone="primary"]  ::before,
.ds-order-card.status-primary::before   { background: var(--ds-primary); }
.ds-order-card.status-success::before   { background: var(--ds-success); }
.ds-order-card.status-warning::before   { background: var(--ds-warning); }
.ds-order-card.status-danger::before    { background: var(--ds-danger); }
.ds-order-card.status-info::before      { background: var(--ds-info); }
.ds-order-card.status-muted::before     { background: var(--ds-muted); }

/* 简化写法：所有 ds-order-card 默认有竖条，但颜色受 state class 控制。
   上面的 ::before 默认 background 仍是 muted，state class 直接覆盖颜色。 */
.ds-order-card.status-primary::before   { background: var(--ds-primary); }
.ds-order-card.status-success::before   { background: var(--ds-success); }
.ds-order-card.status-warning::before   { background: var(--ds-warning); }
.ds-order-card.status-danger::before    { background: var(--ds-danger); }
.ds-order-card.status-info::before      { background: var(--ds-info); }
.ds-order-card.status-muted::before     { background: var(--ds-muted); }

.ds-order-card:hover {
    border-color: var(--ds-border-strong);
    box-shadow: var(--ds-shadow-hover);
    transform: translateY(-1px);
}

.ds-order-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ds-order-card__title {
    font-size: var(--ds-fs-title);
    font-weight: 600;
    color: var(--ds-text);
    line-height: 1.35;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-order-card__sub {
    font-size: var(--ds-fs-sub);
    color: var(--ds-text-soft);
    margin: 2px 0 0;
    line-height: 1.4;
}
.ds-order-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    font-size: var(--ds-fs-body);
    color: var(--ds-text);
}
.ds-order-card__row {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 8px;
    align-items: baseline;
}
.ds-order-card__row .k {
    color: var(--ds-text-muted);
    font-size: var(--ds-fs-hint);
}
.ds-order-card__row .v {
    color: var(--ds-text);
    word-break: break-word;
}
.ds-order-card__hint {
    color: var(--ds-text-muted);
    font-size: var(--ds-fs-hint);
    margin-top: 6px;
}
.ds-order-card__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: flex-end;
}

/* 紧凑单行版本（任务列表专用） */
.ds-order-card.is-row {
    flex-direction: row;
    align-items: center;
    min-height: var(--ds-space-row-h);
    padding: 8px var(--ds-space-card-pad);
}
.ds-order-card.is-row .ds-order-card__head { flex: 1; min-width: 0; }
.ds-order-card.is-row .ds-order-card__body { display: none; }

/* ============================================================
 * 3. .ds-task-row —— 任务列表行（任务卡片，列结构）
 * ============================================================ */
.ds-task-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: var(--ds-space-row-h);
    padding: 8px var(--ds-space-card-pad);
    background: var(--ds-bg-card);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    margin-bottom: var(--ds-space-card-gap);
    box-shadow: var(--ds-shadow-card);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.ds-task-row:hover { background: var(--ds-bg-page); border-color: var(--ds-border-strong); }

.ds-task-row__title {
    font-size: var(--ds-fs-title);
    font-weight: 600;
    color: var(--ds-text);
    margin: 0;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-task-row__sub {
    font-size: var(--ds-fs-hint);
    color: var(--ds-text-muted);
    margin-top: 2px;
    line-height: 1.4;
}
.ds-task-row__progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.ds-task-row__progress-text {
    font-size: var(--ds-fs-body);
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
}
.ds-task-row__progress-bar {
    width: 100%;
    height: 6px;
    background: var(--ds-bg-page);
    border-radius: 999px;
    overflow: hidden;
}
.ds-task-row__progress-fill {
    height: 100%;
    background: var(--ds-primary);
    transition: width .3s ease;
}
.ds-task-row__meta {
    font-size: var(--ds-fs-body);
    color: var(--ds-text-soft);
    line-height: 1.4;
}
.ds-task-row__meta .v {
    color: var(--ds-text);
    font-weight: 600;
}
.ds-task-row__actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

@media (max-width: 768px) {
    .ds-task-row { grid-template-columns: 1fr; gap: 8px; }
    .ds-task-row__actions { justify-content: flex-end; }
}

/* ============================================================
 * 4. .ds-timeline —— 时间线 6 步
 * ============================================================ */
.ds-timeline {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 0;
    width: 100%;
    overflow-x: auto;
}
.ds-timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.ds-timeline-node {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--ds-muted);
    background: transparent;
    box-shadow: 0 0 0 3px transparent;
    transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.ds-timeline-node.done   { background: var(--ds-primary); border-color: var(--ds-primary); }
.ds-timeline-node.active {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .22);
}
.ds-timeline-node.idle   { background: transparent; border-color: var(--ds-muted); }

.ds-timeline-line {
    flex: 1;
    height: 2px;
    background: var(--ds-border);
    min-width: 24px;
    align-self: center;
    margin-top: -22px;
}
.ds-timeline-line.done { background: var(--ds-primary); }

.ds-timeline-label {
    font-size: var(--ds-fs-hint);
    color: var(--ds-text-muted);
    white-space: nowrap;
}
.ds-timeline-label.active  { color: var(--ds-text); font-weight: 600; }
.ds-timeline-label.done    { color: var(--ds-primary); font-weight: 600; }

.ds-timeline-dot-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
    flex-shrink: 0;
}

/* ============================================================
 * 5. .ds-detail-drawer —— 右侧 480px 抽屉
 * ============================================================ */
.ds-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .32);
    z-index: 1080;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.ds-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.ds-detail-drawer {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 480px;
    max-width: 100vw;
    background: var(--ds-bg-card);
    box-shadow: var(--ds-shadow-drawer);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .24s cubic-bezier(.16, 1, .3, 1);
    z-index: 1081;
    border-top-left-radius: var(--ds-radius-lg);
    border-bottom-left-radius: var(--ds-radius-lg);
    overflow: hidden;
}
.ds-detail-drawer.open { transform: translateX(0); }

.ds-detail-drawer > header {
    position: sticky;
    top: 0;
    background: var(--ds-bg-elevated);
    border-bottom: 1px solid var(--ds-border);
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    flex-shrink: 0;
    z-index: 1;
}
.ds-detail-drawer > header .ds-drawer-title {
    font-size: var(--ds-fs-title);
    font-weight: 600;
    color: var(--ds-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-detail-drawer > header .ds-drawer-close {
    border: 0;
    background: transparent;
    color: var(--ds-text-muted);
    width: 32px;
    height: 32px;
    border-radius: var(--ds-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    margin-left: -8px;
}
.ds-detail-drawer > header .ds-drawer-close:hover {
    background: var(--ds-bg-page);
    color: var(--ds-text);
}

.ds-detail-drawer > main {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--ds-bg-page);
    min-height: 0;
}

.ds-detail-drawer > footer {
    position: sticky;
    bottom: 0;
    background: var(--ds-bg-elevated);
    border-top: 1px solid var(--ds-border);
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    gap: 12px;
    flex-shrink: 0;
    z-index: 1;
}

body.ds-drawer-open {
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .ds-detail-drawer { width: 100vw; border-radius: 0; }
}

/* ============================================================
 * 6. .ds-empty-state —— 空状态
 * ============================================================ */
.ds-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    min-height: 240px;
    text-align: center;
    color: var(--ds-text-soft);
}
.ds-empty-state .ds-empty-icon {
    font-size: 32px;
    color: var(--ds-muted);
    margin-bottom: 4px;
}
.ds-empty-state .ds-empty-title {
    font-size: var(--ds-fs-sub);
    font-weight: 600;
    color: var(--ds-text);
    margin: 0;
}
.ds-empty-state .ds-empty-desc {
    font-size: var(--ds-fs-hint);
    color: var(--ds-text-muted);
    margin: 0;
    max-width: 360px;
    line-height: 1.5;
}
.ds-empty-state .ds-empty-action { margin-top: 12px; }

/* ============================================================
 * 7. 兼容 / 兜底
 * ============================================================ */
.ds-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-bg-card);
    color: var(--ds-text);
    font-size: var(--ds-fs-body);
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    text-decoration: none;
}
.ds-btn:hover { box-shadow: var(--ds-shadow-card); }
.ds-btn:disabled,
.ds-btn[disabled] {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
}
.ds-btn--primary  { background: var(--ds-primary); color: #fff; }
.ds-btn--primary:hover  { background: #1d4ed8; }
.ds-btn--success  { background: var(--ds-success); color: #fff; }
.ds-btn--success:hover  { background: #15803d; }
.ds-btn--warning  { background: var(--ds-warning); color: #fff; }
.ds-btn--warning:hover  { background: #b45309; }
.ds-btn--danger   { background: var(--ds-danger);  color: #fff; }
.ds-btn--danger:hover   { background: #b91c1c; }
.ds-btn--ghost    { background: transparent; color: var(--ds-text-soft); border-color: var(--ds-border-strong); }
.ds-btn--ghost:hover    { color: var(--ds-text); background: var(--ds-bg-page); }
.ds-btn--sm       { padding: 3px 10px; font-size: var(--ds-fs-hint); }

/* ============================================================
 * 8. 状态徽章扩展：paused_long / refunding_stuck / overdue_payment
 *    异常态用 --ds-danger 加 2px 描边 + 浅红底色
 * ============================================================ */
:root {
    --ds-status-paused-long-bg:    #fee2e2;  --ds-status-paused-long-fg:    #991b1b;
    --ds-status-refunding-stuck-bg:#fef3c7;  --ds-status-refunding-stuck-fg:#92400e;
    --ds-status-overdue-payment-bg:#fff7ed;  --ds-status-overdue-payment-fg:#9a3412;
}
.status-badge.status-paused_long,
.ds-status-badge.status-paused_long {
    background: var(--ds-status-paused-long-bg);
    color: var(--ds-status-paused-long-fg);
    border: 2px solid var(--ds-danger);
}
.status-badge.status-refunding_stuck,
.ds-status-badge.status-refunding_stuck {
    background: var(--ds-status-refunding-stuck-bg);
    color: var(--ds-status-refunding-stuck-fg);
    border: 2px solid var(--ds-danger);
}
.status-badge.status-overdue_payment,
.ds-status-badge.status-overdue_payment {
    background: var(--ds-status-overdue-payment-bg);
    color: var(--ds-status-overdue-payment-fg);
    border: 2px solid var(--ds-danger);
}

/* ============================================================
 * 9. 任务监控页专用：视图 tab 切换器 + 节点切换器
 * ============================================================ */
.tm-view-tabs {
    display: flex;
    gap: 4px;
    margin: 12px 0;
    padding: 4px;
    background: var(--ds-bg-page);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    width: fit-content;
}
.tm-view-tab {
    border: 0;
    background: transparent;
    color: var(--ds-text-soft);
    padding: 6px 14px;
    border-radius: var(--ds-radius-sm);
    font-size: var(--ds-fs-body);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s ease, color .15s ease;
}
.tm-view-tab:hover { background: var(--ds-bg-card); color: var(--ds-text); }
.tm-view-tab.active {
    background: var(--ds-primary);
    color: #fff;
}
.tm-view-tab.active .tm-view-count {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}
.tm-view-count {
    font-size: var(--ds-fs-hint);
    background: var(--ds-bg-card);
    color: var(--ds-text-muted);
    padding: 1px 6px;
    border-radius: 999px;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
}

.tm-node-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    padding: 6px 12px;
    background: var(--ds-bg-card);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
}
.tm-node-switcher__label {
    font-size: var(--ds-fs-hint);
    color: var(--ds-text-muted);
    font-weight: 600;
    margin: 0;
}
.tm-node-switcher select {
    border: 0;
    background: transparent;
    font-size: var(--ds-fs-body);
    color: var(--ds-text);
    font-weight: 600;
    padding: 4px 8px;
    cursor: pointer;
    min-width: 140px;
}
.tm-node-switcher select:focus { outline: 2px solid var(--ds-primary); outline-offset: 1px; border-radius: 4px; }

/* 跨节点任务行高亮 + 远端 badge */
.ds-task-row[data-is-remote="1"] {
    border-left: 3px solid var(--ds-info);
    background: linear-gradient(90deg, rgba(8,145,178,.04) 0%, transparent 40%);
}
.ds-task-row .tm-remote-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--ds-info);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: 6px;
}

/* ============================================================
 * 10. 异常分组（4 种 collapse 面板）
 * ============================================================ */
.tm-exception-groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
}
.tm-exception-group {
    background: var(--ds-bg-card);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    padding: 10px 14px;
}
.tm-exception-group[open] { box-shadow: var(--ds-shadow-card); }
.tm-exception-group > summary {
    cursor: pointer;
    list-style: none;
    font-size: var(--ds-fs-sub);
    font-weight: 600;
    color: var(--ds-text);
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.tm-exception-group > summary::-webkit-details-marker { display: none; }
.tm-exception-group > summary::before {
    content: "▸";
    display: inline-block;
    color: var(--ds-text-muted);
    transition: transform .15s ease;
    width: 12px;
}
.tm-exception-group[open] > summary::before { transform: rotate(90deg); }
.tm-exception-count {
    font-size: var(--ds-fs-hint);
    background: var(--ds-bg-page);
    color: var(--ds-text-muted);
    padding: 1px 6px;
    border-radius: 999px;
    font-weight: 700;
    margin-left: auto;
}
.tm-exception-list {
    list-style: none;
    padding: 8px 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tm-exception-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    background: var(--ds-bg-page);
    border-radius: var(--ds-radius-sm);
    font-size: var(--ds-fs-body);
}
.tm-exception-item__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-exception-item__hint { color: var(--ds-text-muted); font-size: var(--ds-fs-hint); }
.tm-exception-empty { color: var(--ds-text-muted); font-size: var(--ds-fs-hint); padding: 8px 4px 4px; }
.tm-exception-total {
    text-align: right;
    color: var(--ds-text-muted);
    font-size: var(--ds-fs-hint);
    padding-top: 4px;
}
.tm-exception-total b { color: var(--ds-danger); font-size: var(--ds-fs-sub); }

/* ============================================================
 * 11. 抽屉内的 4 个 tab 切换器（概览/配置/时间线/退款）
 * ============================================================ */
.tm-drawer-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--ds-border);
    margin: -16px -16px 12px;
    padding: 0 16px;
    background: var(--ds-bg-elevated);
    position: sticky;
    top: 0;
    z-index: 1;
}
.tm-drawer-tab {
    border: 0;
    background: transparent;
    color: var(--ds-text-muted);
    padding: 10px 14px;
    font-size: var(--ds-fs-body);
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.tm-drawer-tab:hover { color: var(--ds-text); }
.tm-drawer-tab.active {
    color: var(--ds-primary);
    border-bottom-color: var(--ds-primary);
}
.tm-drawer-pane { display: none; }
.tm-drawer-pane.active { display: block; }

.tm-refund-empty { color: var(--ds-text-muted); font-size: var(--ds-fs-body); padding: 12px; text-align: center; }
.tm-refund-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tm-refund-item {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 12px;
    padding: 8px 10px;
    background: var(--ds-bg-page);
    border-radius: var(--ds-radius-sm);
    font-size: var(--ds-fs-body);
}
.tm-refund-item__id { font-family: ui-monospace, SFMono-Regular, monospace; }
.tm-refund-item__amount { font-weight: 600; color: var(--ds-text); }
.tm-refund-item__at { color: var(--ds-text-muted); font-size: var(--ds-fs-hint); }

/* 抽屉 header 里的节点 badge */
.ds-detail-drawer > header .tm-drawer-node-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--ds-bg-page);
    color: var(--ds-text-soft);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--ds-fs-hint);
    font-weight: 600;
}

/* ============================================================
 * 8. Refactor A：抽屉 tab / 折叠子任务 / 骨架屏 / 错误态
 * ============================================================ */
.ds-tab-bar {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--ds-border);
    margin: -4px 0 12px;
    overflow-x: auto;
}
.ds-tab {
    border: 0;
    background: transparent;
    color: var(--ds-text-soft);
    padding: 8px 12px;
    font-size: var(--ds-fs-body);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    border-radius: 0;
    transition: color .15s ease, border-color .15s ease;
}
.ds-tab:hover { color: var(--ds-text); }
.ds-tab--active {
    color: var(--ds-primary);
    border-bottom-color: var(--ds-primary);
    font-weight: 600;
}
.ds-tab-panel { min-height: 160px; }

.ds-kv-block { display: flex; flex-direction: column; gap: 6px; }
.ds-kv-block .ds-order-card__row {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 8px;
    align-items: baseline;
}

/* 子任务列表卡片 */
.ds-tasks-list { display: flex; flex-direction: column; gap: 8px; }
.ds-task-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--ds-bg-card);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
}
.ds-task-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ds-task-card__title {
    font-size: var(--ds-fs-body);
    font-weight: 600;
    color: var(--ds-text);
}
.ds-task-card__progress-text {
    font-size: var(--ds-fs-hint);
    color: var(--ds-text-soft);
    font-variant-numeric: tabular-nums;
}
.ds-task-card__meta {
    display: flex;
    gap: 12px;
    font-size: var(--ds-fs-hint);
    color: var(--ds-text-muted);
    flex-wrap: wrap;
}

/* 折叠区（details/summary） */
.ds-foldable {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-bg-card);
    margin-top: 4px;
}
.ds-foldable[open] { box-shadow: var(--ds-shadow-card); }
.ds-foldable__summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ds-text-soft);
    font-size: var(--ds-fs-body);
}
.ds-foldable__summary::-webkit-details-marker { display: none; }
.ds-foldable__body { padding: 4px 12px 12px; }

/* 订单来源 badge */
.ds-source-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: var(--ds-fs-hint);
    font-weight: 600;
    line-height: 1.4;
    background: var(--ds-bg-page);
    color: var(--ds-text-soft);
    border: 1px solid var(--ds-border);
}
.ds-source-primary { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.ds-source-info    { background: #cffafe; color: #155e75; border-color: #a5f3fc; }
.ds-source-warning { background: #fef3c7; color: #92400e; border-color: #fde68a; }

/* 骨架屏 */
.ds-skeleton-list { display: flex; flex-direction: column; gap: 12px; }
.ds-skeleton {
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: ds-skeleton-pulse 1.6s ease-in-out infinite;
    border-radius: var(--ds-radius);
}
.ds-skeleton--order { height: 96px; }
@keyframes ds-skeleton-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 错误态 */
.ds-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    min-height: 200px;
    text-align: center;
    color: var(--ds-text-soft);
}
.ds-error-icon { font-size: 32px; color: var(--ds-danger); }
.ds-error-title { font-size: var(--ds-fs-sub); font-weight: 600; color: var(--ds-text); margin: 0; }
.ds-error-desc { font-size: var(--ds-fs-hint); color: var(--ds-text-muted); margin: 0; max-width: 360px; line-height: 1.5; }
.ds-error-action { margin-top: 8px; }

/* ============================================================
 * 12. 任务监控控制台（2026-10-22）
 * ------------------------------------------------------------
 * 目标：首屏就能看到任务列表。做法：
 *   - 8 个统计卡收成一行紧凑指标条（点击筛选能力不变）；
 *   - 视图 tab 与节点切换器并排一行；
 *   - 状态/服务器/平台收进可折叠的「筛选条件」面板；
 *   - 搜索框常驻在任务列表上方；
 *   - 代理成本明细默认收起。
 * ============================================================ */

/* 紧凑指标条：覆盖 admin_page_html_head.py 里的 .stat 大卡样式 */
.tm-metric-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}
.tm-metric-bar .stat.tm-metric {
    flex: 1 1 116px;
    min-width: 104px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 10px;
    border-radius: var(--ds-radius-sm);
    font-size: var(--ds-fs-hint);
    color: var(--ds-text-soft);
    white-space: nowrap;
}
.tm-metric-bar .stat.tm-metric b {
    display: inline;
    margin-top: 0;
    font-size: var(--ds-fs-sub);
    font-weight: 700;
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
}
.tm-metric-bar .stat.tm-metric b.bad { color: var(--ds-danger); }
.tm-metric-bar .stat.tm-metric b.ok  { color: var(--ds-success); }

/* 控制台：视图 tab + 节点切换器同一行 */
.tm-console { padding: 10px 12px; }
.tm-console-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.tm-console-bar .tm-view-tabs { margin: 0; }
.tm-console-bar .tm-node-switcher { margin: 0; }
/* 排序切换器：跟节点切换器一样靠右，但自己占位，不把节点切换器挤到中间 */
.tm-console-bar .tm-sort-switcher { margin: 0 0 0 auto; }

/* 任务列表排序切换器（2026-10-25） */
.tm-sort-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    padding: 6px 12px;
    background: var(--ds-bg-card);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
}
.tm-sort-switcher__label {
    font-size: var(--ds-fs-hint);
    color: var(--ds-text-muted);
    font-weight: 600;
    margin: 0;
}
.tm-sort-switcher select {
    border: 0;
    background: transparent;
    font-size: var(--ds-fs-body);
    color: var(--ds-text);
    font-weight: 600;
    padding: 4px 8px;
    cursor: pointer;
    min-width: 180px;
}
.tm-sort-switcher select:focus { outline: 2px solid var(--ds-primary); outline-offset: 1px; border-radius: 4px; }

/* 可折叠的筛选条件面板 */
.tm-filter {
    margin-top: 10px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-bg-card);
}
.tm-filter__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: var(--ds-fs-body);
    font-weight: 600;
    color: var(--ds-text-soft);
    user-select: none;
}
.tm-filter__summary::-webkit-details-marker { display: none; }
.tm-filter__summary::after {
    content: "▾";
    margin-left: auto;
    color: var(--ds-text-muted);
    transition: transform .15s ease;
}
.tm-filter[open] .tm-filter__summary::after { transform: rotate(180deg); }
.tm-filter-badge {
    font-size: var(--ds-fs-hint);
    font-weight: 700;
    background: var(--ds-bg-page);
    color: var(--ds-text-muted);
    border-radius: 999px;
    padding: 1px 8px;
}
.tm-filter-badge--on { background: var(--ds-primary); color: #fff; }
.tm-toolbar--filters {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    padding: 2px 12px 12px;
}

/* 常驻搜索框 */
.tm-list-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}
.tm-search {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-bg-card);
    color: var(--ds-text);
    font-size: var(--ds-fs-body);
}
.tm-search:focus { outline: 2px solid var(--ds-primary); outline-offset: 1px; }

/* 通用折叠区（代理成本明细） */
.tm-collapse {
    margin-top: 10px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-bg-card);
}
.tm-collapse__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: var(--ds-fs-body);
    font-weight: 600;
    color: var(--ds-text-soft);
    user-select: none;
}
.tm-collapse__summary::-webkit-details-marker { display: none; }
.tm-collapse[open] > .tm-collapse__summary {
    border-bottom: 1px solid var(--ds-border);
    margin-bottom: 10px;
}

/* 任务卡「更多」下拉（取消 / 归档） */
.ds-task-more {
    position: relative;
    display: inline-flex;
}
.ds-task-more > summary { list-style: none; }
.ds-task-more > summary::-webkit-details-marker { display: none; }
.ds-task-more__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    min-width: 132px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    box-shadow: var(--ds-shadow-card);
}
.ds-task-more__item {
    width: 100%;
    justify-content: flex-start;
}
.ds-task-row:has(.ds-task-more[open]) {
    position: relative;
    z-index: 6;
}

/* 抽屉「配置」tab：只读摘要 + 打开完整配置 */
.tm-config-summary-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--ds-bg-card);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
}

/* 抽屉（z-index 1081）比 .admin-modal（1000）高：从抽屉打开完整配置弹窗时，
   弹窗必须盖在抽屉之上，否则「点开了却看不见」。 */
#tmConfigModal { z-index: 1090; }