/* 销售管理系统 v3.1 — 样式 */
:root {
  --primary: #1677ff;
  --bg: #f5f6f8;
  --card-bg: #fff;
  --text: #1a1a2e;
  --text-secondary: #666;
  --border: #e8e8e8;
  --success: #52c41a;
  --warning: #faad14;
  --danger: #ff4d4f;
  --sidebar-w: 160px;
}
* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin:0; background:var(--bg); color:var(--text); }

/* ── Login ── */
.login-page { display:flex; justify-content:center; align-items:center; min-height:100vh; margin-left:0 !important; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); }
.login-card { background:#fff; border-radius:12px; padding:40px 32px; width:380px; box-shadow:0 8px 32px rgba(0,0,0,.3); }
.login-card h2 { margin:0 0 8px; text-align:center; }
.login-card .sub { text-align:center; color:var(--text-secondary); margin-bottom:24px; }
.login-card label { font-size:13px; font-weight:600; display:block; margin-bottom:4px; }
.login-card input { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:6px; font-size:14px; margin-bottom:16px; }
.login-card button { width:100%; padding:10px; background:var(--primary); color:#fff; border:none; border-radius:6px; font-size:15px; font-weight:600; cursor:pointer; }
.error-msg { background:#fff1f0; color:var(--danger); padding:8px 12px; border-radius:6px; margin-bottom:16px; font-size:13px; }
.success-msg { background:#f6ffed; color:var(--success); padding:8px 12px; border-radius:6px; margin-bottom:16px; font-size:13px; }

/* ── Layout ── */
.sidebar { position:fixed; top:0; left:0; width:var(--sidebar-w); height:100vh; background: linear-gradient(180deg,#1a1a2e 0%,#16213e 100%); color:#fff; z-index:100; overflow-y:auto; }
.sidebar .logo { padding:20px 16px; font-size:18px; font-weight:700; border-bottom:1px solid rgba(255,255,255,.1); }
.sidebar .user-info { padding:12px 16px; font-size:13px; color:rgba(255,255,255,.6); border-bottom:1px solid rgba(255,255,255,.1); }
.sidebar a { display:block; padding:10px 16px; color:rgba(255,255,255,.75); text-decoration:none; font-size:14px; transition:.15s; }
.sidebar a:hover, .sidebar a.active { background:rgba(255,255,255,.1); color:#fff; }
.sidebar .role-badge { display:inline-block; background:rgba(255,255,255,.15); padding:2px 8px; border-radius:4px; font-size:11px; margin-left:6px; }
.main { margin-left:var(--sidebar-w); padding:20px 24px; min-height:100vh; }
.page-header { margin-bottom:20px; }
.page-header h1 { font-size:22px; font-weight:700; margin:0 0 4px; }
.page-header p { color:var(--text-secondary); margin:0; font-size:13px; }

/* ── Cards ── */
.card { background:var(--card-bg); border-radius:8px; padding:20px; margin-bottom:16px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.card-title { font-size:14px; font-weight:600; margin-bottom:12px; color:var(--text); }
.kpi-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin-bottom:20px; }
.kpi-card { background:var(--card-bg); border-radius:8px; padding:16px 20px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.kpi-card .label { font-size:12px; color:var(--text-secondary); margin-bottom:4px; }
.kpi-card .value { font-size:24px; font-weight:700; }
.kpi-card .sub { font-size:12px; color:var(--text-secondary); }
.gate-open { color:var(--success); }
.gate-closed { color:var(--danger); }
.gate-waiting { color:var(--warning); }

/* ── Tables ── */
.table-wrap { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; font-size:13px; }
table.data th { background:var(--primary); color:#1a1a2e; padding:10px 12px; text-align:left; font-weight:600; white-space:nowrap; position:sticky; top:0; }
table.data td { padding:8px 12px; border-bottom:1px solid var(--border); }
table.data tr:nth-child(even) td { background:rgba(0,0,0,.01); }
table.data tr:hover td { background:rgba(22,119,255,.05); }

/* ── Forms ── */
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:13px; font-weight:600; margin-bottom:4px; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:4px; font-size:13px; }
.form-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
.btn { display:inline-block; padding:8px 18px; border:none; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { opacity:.9; }
.btn-sm { padding:5px 12px; font-size:12px; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); }
.pill { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; }
.pill-active { background:#f6ffed; color:var(--success); }
.pill-inactive { background:#fff1f0; color:var(--danger); }
.pill-open { background:rgba(22,119,255,.1); color:var(--primary); }

/* ── Tabs ── */
.tabs { display:flex; gap:2px; margin-bottom:16px; border-bottom:2px solid var(--border); }
.tab-btn { padding:8px 18px; font-size:13px; font-weight:600; border:none; background:none; cursor:pointer; color:var(--text-secondary); border-bottom:2px solid transparent; margin-bottom:-2px; transition:.15s; }
.tab-btn:hover { color:var(--primary); }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ── Search ── */
.search-bar { display:flex; gap:8px; margin-bottom:16px; }
.search-bar input { flex:1; padding:8px 12px; border:1px solid var(--border); border-radius:4px; font-size:13px; }

/* ── Modal / Expander ── */
.expander { margin-bottom:10px; }
.expander-trigger { cursor:pointer; padding:10px 14px; background:var(--card-bg); border:1px solid var(--border); border-radius:6px; font-size:13px; font-weight:600; }
.expander-body { display:none; padding:12px 14px; border:1px solid var(--border); border-top:none; border-radius:0 0 6px 6px; background:#fafafa; }
.expander-body.open { display:block; }

/* ── Assistant table ── */
.assistant-table-wrap { max-height:70vh; overflow:auto; border:1px solid var(--border); border-radius:6px; }
.assistant-table-wrap table.data th { position:sticky; top:0; z-index:2; }
.wip-input { width:60px; padding:4px 6px; border:1px solid var(--border); border-radius:3px; font-size:12px; text-align:center; }

/* ── Calendar ── */
.calendar-grid { display:grid; grid-template-columns:repeat(7, 42px); gap:3px; }
.cal-header { text-align:center; font-size:11px; font-weight:700; color:var(--text-secondary); padding:4px 0; }
.cal-cell { width:42px; height:42px; border-radius:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:13px; cursor:default; position:relative; background:var(--card-bg); border:1px solid var(--border); transition:.15s; }
.cal-cell:hover { border-color:var(--primary); }
.cal-empty { background:transparent; border:none; }
.cal-day { font-weight:600; font-size:13px; line-height:1; }
.cal-icon { font-size:10px; line-height:1; margin-top:1px; }
.cal-uploaded { background:#f6ffed; border-color:#b7eb8f; }
.cal-uploaded .cal-day { color:#389e0d; }
.cal-missed { background:#fff1f0; border-color:#ffa39e; }
.cal-missed .cal-day { color:#cf1322; }
.cal-today { border:2px solid var(--primary); box-shadow:0 0 0 2px rgba(22,119,255,.15); }
.cal-today .cal-day { color:var(--primary); }
.cal-future { opacity:.35; }
.cal-due { background:#fffbe6; border-color:#ffe58f; }
.cal-due .cal-day { color:#d48806; }

.cal-legend { display:flex; flex-direction:column; gap:8px; font-size:12px; color:var(--text-secondary); padding-top:8px; }
.cal-legend-dot { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:middle; }
.cal-legend-dot.uploaded { background:#b7eb8f; border:1px solid #52c41a; }
.cal-legend-dot.today { background:var(--primary); }
.cal-legend-dot.missed { background:#ffa39e; border:1px solid #ff4d4f; }
.cal-legend-dot.future { background:var(--border); }

/* ── Upload Summary ── */
.upload-summary { border-left:4px solid var(--primary); }
.summary-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin-top:10px; }
.sum-label { display:block; font-size:11px; color:var(--text-secondary); margin-bottom:2px; }
.sum-value { display:block; font-size:14px; font-weight:600; }

/* ── 进度条 ── */
.progress-track { width:100%; height:10px; background:#e8e8e8; border-radius:5px; overflow:hidden; }
.progress-fill { height:100%; width:0; background:linear-gradient(90deg, var(--primary), #36cfc9); border-radius:5px; transition:width .3s ease; }

/* ── Responsive ── */
@media (max-width:768px) {
  .sidebar { width:180px; }
  .main { margin-left:180px; padding:16px; }
}

/* ── Date Filter Dropdown ── */
.date-filter-wrap { position:relative; display:inline-block; }
.date-th { cursor:pointer; font-size:11px; padding:4px 10px; border:1px solid #ddd; border-radius:3px;
  background:#fff; white-space:nowrap; display:inline-block; user-select:none; }
.date-th.df-active { border-color:var(--primary); color:var(--primary); background:#e6f0ff; }
.date-th:hover { border-color:var(--primary); }
.df-arrow { font-size:9px; margin-left:2px; }
.date-filter-drop { display:none; position:absolute; top:100%; right:0; margin-top:4px; background:#fff;
  border:1px solid #ddd; border-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,.12); min-width:260px;
  z-index:1000; padding:8px; max-height:360px; overflow-y:auto; }
.date-filter-drop.show { display:block; }
.date-range-row { display:flex; gap:6px; align-items:center; padding:4px 6px; }
.date-range-row input[type="date"] { font-size:11px; padding:2px 4px; border:1px solid #ddd; border-radius:3px; }
.date-opt { cursor:pointer; padding:4px 8px; border-radius:3px; font-size:11px; transition:.12s; }
.date-opt:hover { background:#e6f0ff; color:var(--primary); }

/* ── 模糊搜索 ── */
.fuzzy-wrap { position:relative; }
.fuzzy-input { width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:4px; font-size:13px; }
.fuzzy-dd { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid var(--border);
  border-radius:0 0 6px 6px; box-shadow:0 6px 20px rgba(0,0,0,.12); max-height:260px; overflow-y:auto;
  z-index:1100; margin-top:-1px; }
.fuzzy-opt { padding:7px 10px; font-size:12px; cursor:pointer; border-bottom:1px solid #f0f0f0; transition:.1s; }
.fuzzy-opt:last-child { border-bottom:none; }
.fuzzy-opt:hover, .fuzzy-opt.hilite { background:#e6f0ff; color:var(--primary); }