/* ============================================================
   集团资产管理系统 · 视觉系统「青玻」
   松青的骨架（纯净、单一强调色、等宽数字、小号大写表头）
   + 玻璃的三样东西（磨砂浮板、浮动侧栏、一束极淡的薄荷光）
   ============================================================ */

@font-face { font-family: "Geist"; src: url("vendor/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("vendor/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --font-sans: "Geist", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-mono: "Geist Mono", "PingFang SC", "Microsoft YaHei", ui-monospace, monospace;

  --bg: #f3f6f4;
  --surface: rgba(255, 255, 255, .78);
  --surface-2: rgba(255, 255, 255, .55);
  --solid: #ffffff;
  --ink: #101311;
  --ink-2: #2b312d;
  --muted: #67706b;
  --faint: #9aa39e;
  --line: rgba(16, 19, 17, .07);
  --line-2: rgba(16, 19, 17, .12);
  --glass-line: rgba(255, 255, 255, .75);

  --accent: #1f6f4a;
  --accent-dark: #175a3b;
  --accent-soft: rgba(31, 111, 74, .10);
  --accent-tint: rgba(31, 111, 74, .045);
  --blue: #4f7fd9;
  --amber: #b7791f;
  --red: #c0392b;
  --gray: #8a9390;

  --r: 14px;
  --r-sm: 9px;
  --r-xs: 6px;
  --glass: 0 8px 24px rgba(20, 50, 35, .07), 0 1px 2px rgba(20, 50, 35, .04), inset 0 1px 0 rgba(255, 255, 255, .9);
  --blur: blur(22px) saturate(1.3);

  /* ---- Element Plus 换肤 ---- */
  --el-color-primary: #1f6f4a;
  --el-color-primary-light-3: #4f8f70;
  --el-color-primary-light-5: #7fae97;
  --el-color-primary-light-7: #b0cebe;
  --el-color-primary-light-8: #c9ded3;
  --el-color-primary-light-9: #e5efe9;
  --el-color-primary-dark-2: #175a3b;
  --el-color-success: #3d8b5f;
  --el-color-success-light-9: #e7f2ec;
  --el-color-warning: #b7791f;
  --el-color-warning-light-9: #f8f1e4;
  --el-color-danger: #c0392b;
  --el-color-danger-light-9: #f8e9e7;
  --el-color-error: #c0392b;
  --el-color-info: #8a9390;
  --el-color-info-light-9: #eef1ef;
  --el-border-radius-base: 9px;
  --el-border-radius-small: 6px;
  --el-border-radius-round: 20px;
  --el-border-color: rgba(16, 19, 17, .14);
  --el-border-color-light: rgba(16, 19, 17, .09);
  --el-border-color-lighter: rgba(16, 19, 17, .07);
  --el-border-color-extra-light: rgba(16, 19, 17, .05);
  --el-border-color-hover: #7fae97;
  --el-text-color-primary: #101311;
  --el-text-color-regular: #2b312d;
  --el-text-color-secondary: #67706b;
  --el-text-color-placeholder: #9aa39e;
  --el-fill-color: rgba(16, 19, 17, .05);
  --el-fill-color-light: rgba(31, 111, 74, .05);
  --el-fill-color-lighter: rgba(16, 19, 17, .03);
  --el-fill-color-blank: #ffffff;
  --el-bg-color: #ffffff;
  --el-bg-color-overlay: #ffffff;
  --el-bg-color-page: #f3f6f4;
  --el-font-family: var(--font-sans);
  --el-font-size-base: 13.5px;
  --el-box-shadow: 0 24px 60px rgba(20, 50, 35, .16);
  --el-box-shadow-light: 0 8px 24px rgba(20, 50, 35, .10);
  --el-box-shadow-lighter: 0 4px 12px rgba(20, 50, 35, .08);
  --el-mask-color: rgba(16, 25, 20, .35);
}

/* 不支持磨砂的浏览器退化成不透明白面板 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --surface: #ffffff; --surface-2: #f8faf9; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 6% -8%, #dfeee6 0%, transparent 62%),
    radial-gradient(700px 420px at 100% 105%, #f6f3ea 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
}
a { color: var(--accent); text-decoration: none; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); font-size: 12px; }

/* ---------- 玻璃面板 ---------- */
.panel {
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass);
  border-radius: var(--r);
}

/* ---------- 登录 ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: 100%; max-width: 380px; padding: 36px 32px 30px; display: grid; gap: 12px; }
.login-card .mark { width: 40px; height: 40px; border-radius: 11px; background: var(--accent); position: relative; margin-bottom: 6px; box-shadow: 0 6px 14px rgba(31, 111, 74, .28); }
.login-card .mark::after { content: ""; position: absolute; inset: 11px; border-radius: 4px; background: rgba(255, 255, 255, .92); }
.login-card h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.login-card p { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.login-card .el-input__wrapper { height: 42px; }
.login-card .el-form-item { margin-bottom: 12px; }
.login-card .foot { text-align: center; color: var(--faint); font-size: 12px; margin-top: 4px; }

/* ---------- 布局 ---------- */
.layout { display: flex; min-height: 100vh; padding: 12px; gap: 12px; }
.sidebar { width: 228px; flex-shrink: 0; position: sticky; top: 12px; height: calc(100vh - 24px); display: flex; flex-direction: column; padding: 16px 12px 12px; gap: 2px; }
.sidebar .logo { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.sidebar .logo .mark { width: 22px; height: 22px; border-radius: 6px; background: var(--accent); position: relative; box-shadow: 0 4px 10px rgba(31, 111, 74, .28); flex-shrink: 0; }
.sidebar .logo .mark::after { content: ""; position: absolute; inset: 6px; border-radius: 2.5px; background: rgba(255, 255, 255, .92); }
.sidebar .menu { display: flex; flex-direction: column; gap: 2px; }
.sidebar .menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--muted); cursor: pointer; transition: background .12s, color .12s; user-select: none; }
.sidebar .menu-item .el-icon { font-size: 16px; }
.sidebar .menu-item:hover { background: rgba(16, 19, 17, .04); color: var(--ink); }
.sidebar .menu-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.sidebar .me { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 4px 2px; font-size: 13px; }
.sidebar .me .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.sidebar .me .who { flex: 1; min-width: 0; line-height: 1.3; }
.sidebar .me .who b, .sidebar .me .who span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .me .who b { font-weight: 500; }
.sidebar .me .who span { color: var(--muted); font-size: 11.5px; }
.sidebar .me .el-button { margin: 0; padding: 6px; }
.sidebar .me .el-button + .el-button { margin-left: 0; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 10px 8px 0; }
.header h1 { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.header .sub { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.header .actions { display: flex; align-items: center; gap: 6px; }
.content { display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px; }

/* ---------- 工具条 / 表格面板 ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 12px 14px; }
.filter-bar .grow { flex: 1; }
.table-panel { padding: 8px 6px 4px; }
.table-panel .table-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 10px; }
.table-panel .table-head h3 { font-size: 14px; font-weight: 600; }
.page-bar { display: flex; justify-content: flex-end; padding: 12px 8px 4px; }

/* ---------- 统计卡 ---------- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.stat-card { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 10px; min-height: 104px; }
.stat-card.clickable { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.stat-card.clickable:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(20, 50, 35, .10), 0 1px 2px rgba(20, 50, 35, .04), inset 0 1px 0 rgba(255, 255, 255, .9); }
.stat-card .label { font-size: 12px; letter-spacing: .02em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.stat-card .icon { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.stat-card .icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stat-card .icon.amber { background: rgba(183, 121, 31, .12); color: var(--amber); }
.stat-card .icon.red { background: rgba(192, 57, 43, .10); color: var(--red); }
.stat-card .icon.gray { background: rgba(138, 147, 144, .14); color: var(--gray); }
.stat-card .icon.blue { background: rgba(79, 127, 217, .12); color: var(--blue); }
.stat-card .value { font-family: var(--font-mono); font-size: 28px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; overflow-wrap: anywhere; }
.stat-card .value small { font-family: var(--font-sans); font-size: 14px; color: var(--muted); margin-left: 5px; letter-spacing: 0; }
.stat-card .hint { font-size: 12px; color: var(--muted); }

.chart-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.chart-box { padding: 18px 20px; min-width: 0; }
.chart-box h3 { font-size: 14px; font-weight: 600; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: baseline; }
.chart-box h3 span { font-size: 12px; font-weight: 400; color: var(--muted); }
.log-timeline { max-height: 360px; overflow-y: auto; }
.log-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.log-row:first-child { border-top: 0; }
.log-row .time { margin-left: auto; color: var(--faint); font-size: 12px; white-space: nowrap; }
.log-row .code { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* ---------- 状态胶囊 ---------- */
.st { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; padding: 2px 9px 2px 7px; border-radius: var(--r-xs); white-space: nowrap; --c: var(--gray);
  background: color-mix(in srgb, var(--c) 10%, white); border: 1px solid color-mix(in srgb, var(--c) 28%, white); color: color-mix(in srgb, var(--c) 85%, var(--ink)); }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.st-领用 { --c: var(--accent); }
.st-空闲 { --c: var(--blue); }
.st-维修 { --c: var(--amber); }
.st-处置待审核, .st-交接待确认 { --c: var(--amber); }
.st-已报废 { --c: var(--gray); }
.st-已盘 { --c: var(--accent); }
.st-未盘 { --c: var(--gray); }
.st-位置异常, .st-盘盈 { --c: var(--amber); }
.st-盘亏 { --c: var(--red); }
.st-进行中 { --c: var(--blue); }
.st-已完成 { --c: var(--accent); }
.st-已打印 { --c: var(--accent); }
.st-未打印 { --c: var(--gray); }
.st-启用 { --c: var(--accent); }
.st-停用 { --c: var(--gray); }
.st-admin { --c: var(--red); }
.st-manager { --c: var(--accent); }
.st-viewer { --c: var(--gray); }

/* ---------- 扫码结果横幅 ---------- */
.scan-banner { padding: 12px 16px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; border: 1px solid transparent; }
.scan-ok { background: rgba(31, 111, 74, .10); color: var(--accent-dark); border-color: rgba(31, 111, 74, .2); }
.scan-warn { background: rgba(183, 121, 31, .10); color: #7f5412; border-color: rgba(183, 121, 31, .25); }
.scan-err { background: rgba(192, 57, 43, .08); color: #8e2a1f; border-color: rgba(192, 57, 43, .22); }
.scan-bar { background: var(--accent-tint); border: 1px solid rgba(31, 111, 74, .12); }

/* ---------- 标签 ---------- */
.label-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.label-card { background: #fff; border: 1px dashed var(--line-2); border-radius: 8px; padding: 12px; text-align: center; page-break-inside: avoid; }
.label-card img { width: 100%; max-width: 120px; }
.label-card .code { font-family: var(--font-mono); font-size: 11px; color: var(--ink); margin-top: 4px; word-break: break-all; }
.label-card .name { font-size: 12px; font-weight: 600; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-card .info { font-size: 10px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Element Plus 细调 ---------- */
.el-button { font-weight: 500; }
.el-button--primary { box-shadow: 0 6px 14px rgba(31, 111, 74, .22); }
.el-button--primary:hover { box-shadow: 0 8px 18px rgba(31, 111, 74, .28); }
.el-button.is-text { box-shadow: none; }
.el-input__wrapper, .el-select__wrapper, .el-textarea__inner { background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px var(--el-border-color-light) inset, 0 1px 2px rgba(20, 50, 35, .04); }
.el-input__wrapper.is-focus, .el-select__wrapper.is-focused { box-shadow: 0 0 0 1.5px var(--accent) inset !important; }
.el-input-number .el-input__wrapper { padding-left: 32px; padding-right: 32px; }

/* 行底用不透明白：固定列的 sticky 单元格 background:inherit 自 tr，透明会压住被滚动过去的文字 */
.el-table { --el-table-bg-color: #ffffff; --el-table-tr-bg-color: #ffffff; --el-table-header-bg-color: #eef4f1; --el-table-border-color: var(--line); --el-table-row-hover-bg-color: #f5f9f6; --el-table-header-text-color: var(--muted); --el-table-text-color: var(--ink-2); --el-table-current-row-bg-color: #e9f2ed; font-size: 13px; border-radius: 8px; }
.el-table th.el-table__cell { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }
.el-table th.el-table__cell:first-child { border-radius: 8px 0 0 8px; }
.el-table th.el-table__cell:last-child { border-radius: 0 8px 8px 0; }
.el-table .el-table__cell { padding: 9px 0; }
.el-table .cell { padding: 0 12px; line-height: 1.45; }
.el-table__inner-wrapper::before { display: none; }
.el-table__body tr:last-child td.el-table__cell { border-bottom: 0; }
.el-table .code { font-family: var(--font-mono); font-size: 12.5px; }
.el-table .num { font-family: var(--font-mono); }
.el-table__empty-text { color: var(--faint); }

.el-dialog { border-radius: 16px; box-shadow: var(--el-box-shadow); padding: 22px 24px; }
.el-dialog__header { padding: 0 0 14px; margin-right: 0; }
.el-dialog__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.el-dialog__body { padding: 0; }
.el-dialog__footer { padding: 16px 0 0; }
.el-message-box { border-radius: 14px; }
.el-descriptions__label { font-size: 12px; letter-spacing: .02em; }
.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell { border-color: var(--line); }
.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__label { background: var(--accent-tint); color: var(--muted); }
.el-tabs__nav-wrap::after { height: 1px; background: var(--line); }
.el-tabs__item { font-weight: 500; color: var(--muted); }
.el-tabs__item.is-active { color: var(--accent); }
.el-tabs__active-bar { background: var(--accent); }
.el-pagination { --el-pagination-button-bg-color: transparent; }
.el-pagination.is-background .el-pager li { background: rgba(255, 255, 255, .7); border-radius: 7px; }
.el-pagination.is-background .el-pager li.is-active { background: var(--accent); }
.el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next { background: rgba(255, 255, 255, .7); border-radius: 7px; }
.el-alert { border-radius: var(--r-sm); }
.el-tag { border-radius: 6px; font-weight: 500; }
.el-select-dropdown, .el-popper.is-light { border-radius: 10px; box-shadow: var(--el-box-shadow-light); }
.el-checkbox__inner { border-radius: 4px; }
.el-divider__text { background: #fff; }
.el-message { border-radius: 10px; }

/* ---------- 打印 ---------- */
@media print {
  body { background: #fff; }
  .no-print, .sidebar, .header { display: none !important; }
  .layout { padding: 0; display: block; }
  .main, .content { display: block; }
  .label-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .label-card { border: 1px solid #ccc; padding: 6px; }
}

/* ---------- 手机 ---------- */
@media (max-width: 768px) {
  .layout { flex-direction: column; padding: 8px; gap: 8px; }
  .sidebar { width: 100%; height: auto; position: static; padding: 8px 8px 6px; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 2px 8px; }
  .sidebar .logo { padding: 4px 4px; font-size: 14px; order: 1; }
  .sidebar .me { order: 2; margin: 0 0 0 auto; padding: 0; gap: 4px; }
  .sidebar .me .avatar { width: 26px; height: 26px; font-size: 11px; }
  .sidebar .me .who { display: none; }
  .sidebar .menu { order: 3; flex-direction: row; overflow-x: auto; flex: 1 1 100%; gap: 2px; padding-bottom: 2px; scrollbar-width: none; }
  .sidebar .menu::-webkit-scrollbar { display: none; }
  .sidebar .menu-item { padding: 7px 10px; white-space: nowrap; font-size: 13px; }
  .stat-card .value { font-size: 20px; }
  .header { padding: 4px 4px 0; }
  .header h1 { font-size: 21px; }
  .chart-row { grid-template-columns: 1fr; }
  .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat-card { padding: 12px 14px; min-height: 0; }
  .filter-bar { padding: 10px; }
  .filter-bar .el-input, .filter-bar .el-select { width: 100% !important; }
  .label-grid { grid-template-columns: repeat(2, 1fr); }
  .el-dialog { --el-dialog-width: 94% !important; padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}