/* 云小二数据站后台样式：零构建（不走 Vite），纯手写，移动端可用 */
:root {
    --bg: #f5f6f8;
    --panel: #fff;
    --line: #e3e6ea;
    --ink: #1f2430;
    --muted: #7b8494;
    --brand: #1a63e8;
    --ok: #1f9254;
    --warn: #b8730f;
    --err: #c8302b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 14px/1.6 -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #eef1f5; padding: 1px 5px; border-radius: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }

/* ===== 顶栏 ===== */
.top {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 10px 20px; background: #fff; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 5;
}
.brand { font-weight: 700; font-size: 15px; }
.top nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.top nav a { padding: 6px 12px; border-radius: 8px; color: var(--muted); }
.top nav a.on { background: #eaf1ff; color: var(--brand); font-weight: 600; }
.logout { margin: 0; }

main { padding: 20px; max-width: 1500px; margin: 0 auto; }
.foot { padding: 16px 20px 32px; color: var(--muted); font-size: 12px; text-align: center; }

/* ===== 卡片 / 面板 ===== */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.card .k { color: var(--muted); font-size: 12.5px; }
.card strong { display: block; font-size: 24px; margin: 4px 0; word-break: break-all; }
.card .sub { font-size: 12px; color: var(--muted); }
.card.warn { border-color: #f0d3a6; background: #fffaf0; }
.card.ok { border-color: #bfe3cd; background: #f6fdf8; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; }
.panel h2 { margin: 0 0 12px; font-size: 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.panel-head h2 { margin-bottom: 12px; }

/* ===== 表格 ===== */
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th, table.grid td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.grid thead th { background: #f8fafc; color: var(--muted); font-weight: 600; white-space: nowrap; }
table.grid tbody tr:hover { background: #fafcff; }
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid .ram, table.grid .errtext { font-size: 12px; color: var(--muted); max-width: 240px; word-break: break-all; }
.money { font-weight: 600; }

table.kv { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.kv th { width: 220px; text-align: left; color: var(--muted); font-weight: 500; padding: 6px 10px 6px 0; vertical-align: top; }
table.kv td { padding: 6px 0; border-bottom: 1px dashed var(--line); }

/* ===== 标签 / 提示 ===== */
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: #eef1f5; color: var(--muted); }
.tag.ok { background: #e3f5ea; color: var(--ok); }
.tag.warn { background: #fdf1dd; color: var(--warn); }
.tag.err { background: #fbe6e5; color: var(--err); }
.muted { color: var(--muted); }
.summary { margin: 12px 0; color: var(--ink); }
.flash { padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; border: 1px solid transparent; }
.flash.ok { background: #e9f7ef; border-color: #bfe3cd; color: #145c37; }
.flash.warn { background: #fdf6e7; border-color: #f0d3a6; color: #7c4d09; }
.flash.err { background: #fdecea; border-color: #f3c3c0; color: #8d211d; }
.flash.warn strong { color: #7c4d09; }

/* ===== 表单 ===== */
.filters, .task-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 14px; }
.filters label, .form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.filters input, .filters select, .form-grid input, .form-grid select {
    padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; background: #fff; color: var(--ink);
}
.filters input[type="date"] { width: 150px; }
/* 订单页筛选面板：对齐阿里云「订单查询」多列网格布局，小屏自动降列 */
.filters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 16px; align-items: end; }
/* 筛选框一键清空（订单页）：有值时框内右侧浮现 × 按钮，点击只清空不提交；
   日期框隐藏 Chrome 原生 ×（只能整框清、样式不统一），统一用自绘按钮 */
input[type="date"]::-webkit-clear-button { display: none; }
.filters label:has(> input[data-clearable]) { position: relative; }
.field { position: relative; display: inline-flex; flex: 1; min-width: 0; }
.field > input, .field > select { width: 100%; min-width: 0; }
.field-clear, .filters label > .field-clear {
    position: absolute; right: 7px; bottom: 6px; width: 18px; height: 18px; line-height: 16px;
    padding: 0; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 1;
    border: 0; border-radius: 50%; background: #b6bcc6; color: #fff; font-size: 13px; font-family: inherit;
}
.field-clear:hover { background: #8892a0; }
.field-clear.visible { display: flex; }
/* 区间框（时间/金额）两端各自包 .field，清空按钮只作用于对应端 */
.filters-grid .range { display: flex; align-items: center; gap: 6px; }
.filters-grid .range input[type="date"] { flex: 1; }
.filters-grid .range input[type="number"] { width: 0; flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; background: #fff; color: var(--ink); }
.filter-actions { display: flex; gap: 10px; align-items: end; }
/* 订单表横滚容器：不再给表格强制 min-width（曾固定 1900px，超出面板宽度会溢出覆盖页边、左侧列被裁切），
   改为每列单元格最小宽度——全列展示时表格自然超宽、在容器内滚动；隐藏部分列后表格可缩回面板内，不出现多余滚动条 */
.table-scroll { overflow-x: auto; position: relative; }
.table-scroll table.grid th, .table-scroll table.grid td { min-width: 84px; }
/* 首列冻结：被 hidden 的单元格仍占 :first-child 位，故用「前面没有可见同类单元格」定位视觉首列；
   隐藏客户 UID 列后冻结自动落到下一个可见列，背景/层级不丢 */
.table-scroll table.grid th:not([hidden]):not(th ~ th), .table-scroll table.grid td:not([hidden]):not(td ~ td) { position: sticky; left: 0; background: var(--panel); z-index: 1; }
table.grid thead th:not([hidden]):not(th ~ th) { background: #f8fafc; }
table.grid tbody tr:hover td:not([hidden]):not(td ~ td) { background: #fafcff; }
/* 列展示开关用 hidden 属性，防被表格样式（display: table-cell）覆盖 */
.table-scroll table.grid [hidden] { display: none !important; }
/* 列展示弹窗（参考阿里云「自定义列表」）：<dialog> 全屏遮罩 + 双列表穿梭 + 拖拽排序；
   方案含顺序，存服务端会话并同步进分页/查询链接的 cols 参数 */
dialog#col-modal { border: 0; padding: 0; background: transparent; width: min(720px, calc(100vw - 24px)); max-height: none; }
dialog#col-modal::backdrop { background: rgba(15, 22, 32, .45); }
.col-dialog { background: #fff; border-radius: 14px; padding: 18px 20px; }
.col-dialog-head { display: flex; align-items: center; justify-content: space-between; }
.col-dialog-head h3 { margin: 0; font-size: 16px; }
.col-x { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px; }
.col-tip { background: #eaf1ff; color: #2a4b7c; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; margin: 12px 0; }
.col-transfer { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
.col-side { border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; min-width: 0; }
.col-side-head { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.col-list { list-style: none; margin: 0; padding: 6px; height: 300px; overflow-y: auto; }
.col-list li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 13px; cursor: grab; }
.col-list li:hover { background: #f3f7ff; }
.col-list li.dragging { opacity: .5; }
.col-list input[type="checkbox"] { cursor: pointer; }
.col-side-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.col-side-foot span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.col-mid { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.col-mid .btn { min-width: 38px; text-align: center; padding: 6px 10px; }
.col-dialog-foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 16px; }
.col-count { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.check { flex-direction: row !important; align-items: center; gap: 6px !important; color: var(--ink) !important; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.form-grid .span2 { grid-column: 1 / -1; }

.btn {
    display: inline-block; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--line);
    background: #fff; color: var(--ink); cursor: pointer; font-size: 13px;
}
.btn:hover { border-color: #c9d2de; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.warn { background: #fff; border-color: #f0d3a6; color: var(--warn); }
.btn.dis { opacity: .45; cursor: default; }
.btn.link { background: none; border: none; color: var(--muted); padding: 0; cursor: pointer; }
form.inline { display: inline; margin: 0; }
.cmd { margin-left: 6px; }
.reveal-form { display: inline-block; margin: 0 0 14px; }

.pager { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
/* 每页显示下拉：与分页条同区，右对齐贴近阿里云「每页显示」位置 */
.per-page { display: flex; justify-content: flex-end; align-items: center; margin-top: 10px; color: var(--muted); font-size: 13px; }
.per-page select { margin-left: 6px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }

pre.json, pre.console {
    background: #0f1620; color: #d7e3f0; padding: 12px 14px; border-radius: 10px;
    overflow: auto; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-all;
}
.token-reveal code { font-size: 13px; background: #fff; border: 1px dashed #bfe3cd; padding: 4px 8px; user-select: all; }

/* ===== 登录页 ===== */
.login-body { display: grid; place-items: center; min-height: 100vh; background: linear-gradient(160deg, #eef3fb, #f7f9fc); }
.login-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px; width: min(400px, 92vw); }
.login-card h1 { margin: 0 0 4px; font-size: 18px; }
.login-card form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.login-card label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); }
.login-card input { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.login-card .btn.primary { padding: 10px; }

@media (max-width: 720px) {
    table.grid { font-size: 12px; }
    table.kv th { width: 120px; }
}