/* ============================================================
   ERP 统一设计系统 · 共享主题文件
   深色为默认，浅色通过 prefers-color-scheme 自动切换
   只有 2 个语义色：--accent(紫，主色) 和 --danger(红，仅用于真正需要提醒的场景)
   其余状态一律使用中性灰阶 + 文字区分
   ============================================================ */

:root{
  /* 中性色阶（深色默认） */
  --canvas:#18171f;
  --surface:#211f29;
  --surface-2:#2a2833;
  --surface-3:#34323f;
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.16);
  --ink:#ece9f5;
  --ink-2:#a6a2b8;
  --ink-3:#6e6b80;

  /* 唯二语义色 */
  --accent:#7f77dd;
  --accent-strong:#b4acfa;
  --accent-tint:rgba(127,119,221,.16);
  --danger:#e24b4a;
  --danger-strong:#f17877;
  --danger-tint:rgba(226,75,74,.14);

  /* 阴影 */
  --shadow-modal:0 12px 48px rgba(0,0,0,.55);

  /* 圆角 */
  --r-sm:6px;
  --r-md:10px;
  --r-lg:14px;
  --r-full:999px;

  /* 间距 */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;

  /* 字体 */
  --font-ui:'PingFang SC','Microsoft YaHei','Noto Sans SC',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-num:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;

  /* 内容最大宽度（第三步整合时使用） */
  --content-max:960px;
  --sidebar-w:220px;
}

@media (prefers-color-scheme:light){
  :root{
    --canvas:#f7f6fa;
    --surface:#ffffff;
    --surface-2:#f0eef5;
    --surface-3:#e7e4f0;
    --border:rgba(24,20,40,.10);
    --border-strong:rgba(24,20,40,.18);
    --ink:#1e1b29;
    --ink-2:#59566b;
    --ink-3:#8b87a0;
    --accent-strong:#5a50c4;
    --accent-tint:rgba(127,119,221,.10);
    --danger-strong:#b23433;
    --danger-tint:#fcebeb;
    --shadow-modal:0 12px 40px rgba(20,10,40,.14);
  }
}

/* 供页面手动切换主题时使用（跟随系统之外的强制覆盖） */
:root[data-theme="dark"]{
  --canvas:#18171f; --surface:#211f29; --surface-2:#2a2833; --surface-3:#34323f;
  --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.16);
  --ink:#ece9f5; --ink-2:#a6a2b8; --ink-3:#6e6b80;
  --accent-strong:#b4acfa; --accent-tint:rgba(127,119,221,.16);
  --danger-strong:#f17877; --danger-tint:rgba(226,75,74,.14);
  --shadow-modal:0 12px 48px rgba(0,0,0,.55);
}
:root[data-theme="light"]{
  --canvas:#f7f6fa; --surface:#ffffff; --surface-2:#f0eef5; --surface-3:#e7e4f0;
  --border:rgba(24,20,40,.10); --border-strong:rgba(24,20,40,.18);
  --ink:#1e1b29; --ink-2:#59566b; --ink-3:#8b87a0;
  --accent-strong:#5a50c4; --accent-tint:rgba(127,119,221,.10);
  --danger-strong:#b23433; --danger-tint:#fcebeb;
  --shadow-modal:0 12px 40px rgba(20,10,40,.14);
}

/* ============================================================
   通用组件类（各模块可直接复用，第三步整合时会成为主要样式来源）
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r-md);border:1px solid var(--border-strong);background:transparent;color:var(--ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:.15s;font-family:var(--font-ui)}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--danger-strong);border-color:var(--danger)}
.btn.danger:hover{background:var(--danger-tint)}
.btn.sm{padding:5px 11px;font-size:12px;border-radius:var(--r-sm)}

/* 全应用统一的"新建/添加"主按钮：所有模块的创建类按钮都用这一个类，
   保证 + 号、字号、形状、颜色完全一致 */
.btn-create{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r-md);border:1px solid var(--accent);background:var(--accent);color:#fff;font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:.15s;font-family:var(--font-ui);white-space:nowrap}
.btn-create:hover{filter:brightness(1.08)}
.btn-create:active{transform:scale(0.98)}
.btn-create i{font-size:14px}

.mod-hdr{display:flex;align-items:center;gap:12px;margin-bottom:1.25rem}
.mod-logo{width:40px;height:40px;border-radius:var(--r-md);background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;flex-shrink:0}
.mod-hdr h2{font-size:20px;font-weight:500;margin:0;color:var(--ink)}
.mod-hdr p{font-size:13px;color:var(--ink-2);margin:2px 0 0}

.tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:var(--r-full);font-size:11px;font-weight:500}
.tag.accent{background:var(--accent-tint);color:var(--accent-strong)}
.tag.danger{background:var(--danger-tint);color:var(--danger-strong)}
.tag.neutral{background:var(--surface-3);color:var(--ink-2)}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}

.search-box{display:flex;align-items:center;gap:8px;border:1px solid var(--border-strong);border-radius:var(--r-md);padding:8px 12px;color:var(--ink-3)}
.search-box input{border:none;background:none;outline:none;color:var(--ink);font:inherit;font-size:13px;width:100%;font-family:var(--font-ui)}

.stat-card{background:var(--surface-2);border-radius:var(--r-md);padding:12px 16px;border:1px solid transparent;transition:.15s}
.stat-card.active{border-color:var(--accent)}
.stat-card .l{font-size:11px;color:var(--ink-3);margin-bottom:6px}
.stat-card .v{font-family:var(--font-num);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border)}
.tabs .tab{padding:9px 16px;font-size:13px;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;font-weight:500}
.tabs .tab.on{color:var(--accent-strong);border-color:var(--accent)}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-modal);width:100%;max-width:440px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.modal-body{padding:18px}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--border)}

.tbl-wrap{border:1px solid var(--border);border-radius:var(--r-md);overflow-x:auto}
.tbl-wrap table{width:100%;border-collapse:collapse;font-size:13px}
.tbl-wrap th{background:var(--surface-2);text-align:left;font-size:11px;font-weight:600;color:var(--ink-3);padding:9px 12px;border-bottom:1px solid var(--border)}
.tbl-wrap td{padding:9px 12px;border-bottom:1px solid var(--border)}
.tbl-wrap tr:last-child td{border-bottom:none}
.tbl-wrap tbody tr:hover td{background:var(--surface-2)}
.tbl-wrap td.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;text-align:right}
.tbl-wrap tr.warn td{background:var(--danger-tint)}

/* ============================================================
   自定义下拉选择器：替代原生 <select>，完全控制展开后的样式，
   在所有模块里统一使用（不再依赖浏览器/系统绘制的原生下拉列表）
   ============================================================ */
.cs-wrap{position:relative;width:100%;font-family:var(--font-ui)}
.cs-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:8px 12px;background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-md);color:var(--ink);font-size:13px;font-family:inherit;cursor:pointer;transition:border-color .15s;box-sizing:border-box}
.cs-trigger:hover{border-color:var(--border-strong)}
.cs-trigger.cs-open{border-color:var(--accent)}
.cs-trigger.cs-disabled{opacity:.5;cursor:not-allowed}
.cs-trigger .cs-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-trigger .cs-placeholder{color:var(--ink-3)}
.cs-arrow{font-size:14px;color:var(--ink-3);flex-shrink:0;transition:transform .15s}
.cs-arrow.cs-arrow-open{transform:rotate(180deg)}
.cs-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-md);box-shadow:var(--shadow-modal);max-height:240px;overflow-y:auto;z-index:1200;padding:4px}
.cs-opt{padding:8px 10px;font-size:13px;color:var(--ink);border-radius:var(--r-sm);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-opt:hover{background:var(--surface-2)}
.cs-opt.cs-opt-active{background:var(--accent-tint);color:var(--accent-strong);font-weight:500}
.cs-opt.cs-opt-empty{color:var(--ink-3);cursor:default}
.cs-opt.cs-opt-empty:hover{background:none}