/* 客服外包管理系统 - 通用样式 */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --primary:#2f6bff; --primary-dark:#1f54d6;
  --bg:#f4f6fb; --card:#fff; --border:#e6e9f2;
  --text:#1f2430; --muted:#6b7280;
  --green:#16a34a; --red:#dc2626; --amber:#d97706; --ok:#e8f6ec; --warn:#fff6e5;
  --radius:10px;
}
body { font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.6; }
a { color:var(--primary); text-decoration:none; }
a:hover { color:var(--primary-dark); }

/* 顶栏 */
.topbar { background:#fff; border-bottom:1px solid var(--border); padding:0 20px; height:60px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50; }
.topbar .brand { font-weight:700; font-size:17px; color:var(--text); }
.topbar .brand span { color:var(--primary); }
.topbar .nav a { margin-left:18px; color:var(--muted); }
.topbar .nav a:hover,.topbar .nav a.active { color:var(--primary); font-weight:600; }
.topbar .user { display:flex; align-items:center; gap:12px; }
.topbar .user .name { font-weight:600; }

.layout { display:flex; min-height:calc(100vh - 60px); }
/* 侧边栏 */
.sidebar { width:210px; background:#fff; border-right:1px solid var(--border); padding:16px 10px; flex-shrink:0; }
.sidebar a { display:block; padding:10px 14px; border-radius:8px; color:var(--muted); margin-bottom:2px; }
.sidebar a:hover { background:#f0f3fb; color:var(--text); }
.sidebar a.active { background:var(--primary); color:#fff; }
.main { flex:1; padding:22px 26px; min-width:0; }

/* 卡片 */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:16px; }
.card h3 { font-size:15px; margin-bottom:12px; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:16px; }
.stat { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.stat .num { font-size:26px; font-weight:700; color:var(--primary); margin-top:4px; }
.stat .lbl { color:var(--muted); font-size:13px; }
.stat .num.green{color:var(--green);} .stat .num.red{color:var(--red);} .stat .num.amber{color:var(--amber);}

/* 表格 */
table { width:100%; border-collapse:collapse; background:#fff; }
th,td { padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle; }
th { background:#fafbfe; color:var(--muted); font-weight:600; font-size:13px; white-space:nowrap; }
tr:hover td { background:#f8faff; }
.table-wrap { overflow-x:auto; }

/* 徽章 */
.badge { display:inline-block; padding:2px 10px; border-radius:20px; font-size:12px; }
.badge.blue{background:#e8f0ff;color:var(--primary);}
.badge.green{background:var(--ok);color:var(--green);}
.badge.amber{background:var(--warn);color:var(--amber);}
.badge.red{background:#ffe9e9;color:var(--red);}
.badge.gray{background:#eef0f5;color:var(--muted);}

/* 按钮 */
.btn { display:inline-block; padding:8px 16px; border-radius:8px; border:none; cursor:pointer; font-size:14px; background:#eef1f7; color:var(--text); }
.btn.primary { background:var(--primary); color:#fff; }
.btn.primary:hover { background:var(--primary-dark); }
.btn.danger { background:var(--red); color:#fff; }
.btn.green { background:var(--green); color:#fff; }
.btn.sm { padding:5px 10px; font-size:13px; }
a.btn { text-decoration:none; }

/* 表单 */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.field { display:flex; flex-direction:column; }
.field label { font-size:13px; color:var(--muted); margin-bottom:5px; }
.field input,.field select,.field textarea { padding:9px 11px; border:1px solid var(--border); border-radius:8px; font-size:14px; background:#fff; }
.field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color:var(--primary); }
.field textarea { min-height:80px; resize:vertical; }
.form-actions { margin-top:16px; display:flex; gap:10px; }
.search-bar { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.search-bar input,.search-bar select { padding:8px 11px; border:1px solid var(--border); border-radius:8px; background:#fff; }
.toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px; }

/* 提示 */
.msg { padding:12px 14px; border-radius:8px; margin-bottom:14px; font-size:14px; }
.msg.success { background:var(--ok); color:var(--green); }
.msg.error { background:#ffe9e9; color:var(--red); }

/* 分页/小工具 */
.muted{color:var(--muted);} .right{text-align:right;}
.empty { text-align:center; color:var(--muted); padding:30px 0; }
.hidden{display:none;}

/* 登录页 */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#2f6bff,#5b8bff); padding:16px; }
.login-box { width:360px; max-width:100%; background:#fff; border-radius:14px; padding:34px; box-shadow:0 20px 50px rgba(0,0,0,.15); }
.login-box h1 { font-size:20px; margin-bottom:6px; }
.login-box .sub { color:var(--muted); margin-bottom:20px; font-size:13px; }
.login-box .field { margin-bottom:14px; }

/* ===== 全设备自适应（手机 / 平板 / 电脑） ===== */
.menu-btn { display:none; background:none; border:none; font-size:22px; line-height:1; cursor:pointer;
            color:var(--text); padding:6px 8px; margin-right:4px; border-radius:8px; flex-shrink:0; }
.menu-btn:hover { background:#f0f3fb; }
.backdrop { display:none; }

@media (max-width:900px){
  .main { padding:16px 12px; }
  .card { padding:14px 12px; }
  .stat .num { font-size:22px; }
  .search-bar input,.search-bar select { min-width:120px; flex:1; }
}
@media (max-width:820px){
  /* 顶栏：允许换行，避免长店名挤压 */
  .topbar { height:auto; min-height:56px; flex-wrap:wrap; padding:6px 10px; gap:4px 8px; }
  .topbar .nav { display:none; }
  .topbar .brand { font-size:14px; min-width:0; }
  .topbar .brand span { display:none; }            /* 隐藏“管理后台/客户中心”副标 */
  .topbar .user { gap:8px; }
  .topbar .user .name { display:none; }            /* 隐藏长店名/用户名，避免顶栏挤行 */
  .menu-btn { display:block; }
  .sidebar { position:fixed; top:0; left:0; bottom:0; width:248px; z-index:80; padding-top:60px;
             transform:translateX(-100%); transition:transform .22s ease;
             box-shadow:8px 0 24px rgba(31,36,48,.18); overflow-y:auto; }
  body.menu-open .sidebar { transform:translateX(0); }
  .backdrop { display:block; position:fixed; inset:0; background:rgba(20,25,40,.45);
              z-index:75; opacity:0; pointer-events:none; transition:opacity .22s; }
  body.menu-open .backdrop { opacity:1; pointer-events:auto; }

  /* 表格：外层 .table-wrap 横向滑动，表格保持原生布局 */
  .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
  th, td { white-space:nowrap; }
  /* 排期表列多，需要更宽才能完整显示 */
  table.schedule-table { min-width:720px; }
}
@media (max-width:520px){
  body { font-size:13px; }
  .card { padding:12px 10px; }
  .stat-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .stat { padding:12px; }
  .stat .num { font-size:20px; }
  .form-actions { flex-wrap:wrap; }
  .btn { padding:7px 12px; }
  th, td { padding:8px 10px; }
  .login-box { padding:26px 20px; }
  .toolbar { gap:8px; }
  .toolbar h2, .toolbar > *:first-child { font-size:18px; }
}