/* ===== 快修鸭手机店管理后台 · 极简纯白主题 ===== */
:root{
  --primary:#3b6cff;
  --primary-d:#2f5ae0;
  --primary-soft:#eef3ff;
  --green:#00b42a;
  --green-d:#0a9b27;
  --red:#f53f3f;
  --red-soft:#ffece8;
  --bg:#f5f6f8;
  --surface:#ffffff;
  --text:#1d2129;
  --muted:#86909c;
  --border:#ebedf0;
  --border-strong:#e0e3e8;
  --side:#ffffff;
  --side-hover:#f5f6f8;
  --side-active:#eef3ff;
  --radius:12px;
  --shadow:0 1px 3px rgba(20,30,50,.05);
  --shadow-lg:0 24px 60px rgba(20,30,50,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;line-height:1.6}
a{color:inherit;text-decoration:none}

/* 布局 */
.layout{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--side);border-right:1px solid var(--border);color:var(--text);
  display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:20}
.brand{display:flex;align-items:center;gap:11px;padding:20px 18px;border-bottom:1px solid var(--border)}
.brand-logo{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#f2f3f5}
.brand-logo-text{width:40px;height:40px;border-radius:50%;background:var(--primary);display:flex;
  align-items:center;justify-content:center;font-size:22px;color:#fff}
.brand-text strong{display:block;color:var(--text);font-size:16px}
.brand-text small{color:var(--muted);font-size:12px}
.nav{padding:10px;display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:10px;color:#4e5969;
  transition:.15s;position:relative}
.nav-item:hover{background:var(--side-hover);color:var(--text)}
.nav-item.active{background:var(--side-active);color:var(--primary);font-weight:600}
.nav-item.active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:18px;background:var(--primary);border-radius:0 3px 3px 0}
.nav-icon{font-size:16px;width:20px;text-align:center}

.main{flex:1;margin-left:230px;display:flex;flex-direction:column;min-width:0}
.topbar{height:60px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;
  padding:0 22px;gap:14px;position:sticky;top:0;z-index:10}
.topbar-title{font-size:18px;font-weight:700}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.user{color:var(--muted)}
.menu-toggle{display:none;border:none;background:transparent;font-size:22px;cursor:pointer;color:var(--text)}

.content{padding:22px;max-width:1200px;width:100%}

/* 卡片/统计 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:20px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;
  box-shadow:var(--shadow)}
.stat-label{color:var(--muted);font-size:13px}
.stat-value{font-size:26px;font-weight:800;margin:6px 0 2px}
.stat-sub{font-size:12px;color:var(--muted)}
.stat-sub.danger{color:var(--red)}
.accent-green{border-left:3px solid var(--green)}
.accent-blue{border-left:3px solid var(--primary)}
.accent-purple{border-left:3px solid #7c3aed}

/* 面板 */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;
  box-shadow:var(--shadow);margin-bottom:20px}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px}
.panel-head h3{font-size:16px;font-weight:700}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.link{color:var(--primary);font-size:13px;margin-right:10px}
.link.danger{color:var(--red)}
.muted{color:var(--muted)}
.small{font-size:12px}
.empty{padding:30px;text-align:center;color:var(--muted)}
.money{font-variant-numeric:tabular-nums;font-weight:600}
.strong{font-weight:800}
.actions{white-space:nowrap}

/* 表格 */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--border);font-size:13px}
.table th{color:var(--muted);font-weight:600;background:#fafbfc}
.table tbody tr:hover{background:#fafbfc}
.total-row td{font-weight:800;background:var(--primary-soft);border-top:2px solid var(--primary)}

/* 徽标 */
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;
  background:#f2f3f5;color:#4e5969}
.badge-blue{background:var(--primary-soft);color:var(--primary)}
.badge-green{background:#e8ffea;color:var(--green-d)}
.badge-red{background:var(--red-soft);color:var(--red)}

/* 表单 */
.form{display:flex;flex-direction:column;gap:12px}
.form label{font-size:13px;color:var(--text);font-weight:600;margin-top:4px}
.form input,.form textarea,.form select{
  width:100%;padding:10px 12px;border:1px solid var(--border-strong);border-radius:10px;font-size:14px;
  font-family:inherit;background:#fff;color:var(--text);transition:.15s}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(59,108,255,.12)}
.form textarea{resize:vertical}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-actions{display:flex;gap:10px;margin-top:6px}
.checkbox{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text);font-weight:400;margin:4px 0;cursor:pointer}
.checkbox input[type=checkbox]{width:auto;margin:0;padding:0;border:none;box-shadow:none;cursor:pointer;accent-color:var(--primary)}
.checkbox:hover{color:var(--primary),--text}

/* 按钮 */
.btn{display:inline-block;padding:10px 16px;border-radius:10px;border:1px solid transparent;
  font-size:14px;font-weight:600;cursor:pointer;text-align:center;transition:.15s}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-d)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-d)}
.btn-ghost{background:#fff;border-color:var(--border-strong);color:var(--text)}
.btn-ghost:hover{background:var(--side-hover)}
.btn-block{width:100%}
.btn-sm{padding:7px 12px;font-size:13px}

/* 提示 */
.alert{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:14px}
.alert-success{background:#e8ffea;color:#0a9b27;border:1px solid #b7ebc0}
.alert-error{background:var(--red-soft);color:#cb2634;border:1px solid #fbc4c4}

/* 工具栏 */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filter input,.filter select{padding:8px 12px;border:1px solid var(--border-strong);border-radius:9px;font-size:13px;background:#fff}

/* 商品卡片列表 */
.card-list{display:flex;flex-direction:column;gap:10px;max-height:560px;overflow-y:auto}
.prod-item{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--border);border-radius:12px;background:#fff}
.prod-thumb{width:48px;height:48px;border-radius:10px;background:#f2f3f5;display:flex;align-items:center;
  justify-content:center;overflow:hidden;font-size:22px;flex-shrink:0}
.prod-thumb img{width:100%;height:100%;object-fit:cover}
.prod-info{flex:1;min-width:0}
.prod-name{font-weight:600}
.prod-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:12px}
.prod-meta .price{color:var(--green-d);font-weight:700}
.prod-actions{flex-shrink:0}

/* LOGO 预览（圆形） */
.thumb-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.logo-preview{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.logo-img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:1px solid var(--border);background:#f2f3f5}
.logo-img.empty{display:flex;align-items:center;justify-content:center;font-size:32px}

/* 图表 */
.chart{display:flex;align-items:flex-end;gap:10px;height:200px;padding-top:10px}
.chart-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.chart-bar{width:60%;max-width:36px;background:linear-gradient(180deg,var(--primary),#8fb0ff);border-radius:6px 6px 0 0;min-height:2px;transition:.2s}
.chart-val{font-size:11px;color:var(--muted)}
.chart-day{font-size:11px;color:var(--muted)}


/* ===== 维修中面板 ===== */
.repair-panel{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow-y:auto}
.repair-card{border:1px solid var(--border);border-radius:12px;padding:14px 16px;background:var(--surface);display:flex;align-items:center;gap:12px;transition:.15s}
.repair-card:hover{border-color:var(--primary);box-shadow:var(--shadow)}
.repair-info{flex:1;min-width:0}
.repair-device{font-weight:700;font-size:15px}
.repair-meta{font-size:12px;color:var(--muted);margin-top:2px}
.repair-amount{font-weight:800;color:var(--primary);font-size:16px;white-space:nowrap;min-width:60px}
.btn-complete{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;border-radius:999px;border:1px solid var(--green);background:#e8ffea;color:var(--green-d);font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;transition:.2s;white-space:nowrap;line-height:1.4}
.btn-complete:hover{background:var(--green);color:#fff;box-shadow:0 3px 10px rgba(0,180,42,.35);transform:translateY(-1px)}
.repair-empty{color:var(--muted);padding:18px;text-align:center;font-size:13px}
.repair-count{font-size:12px;color:var(--muted);background:var(--side-hover);padding:2px 10px;border-radius:999px}
/* 提示块 */
.tips{margin-top:16px;padding:14px;border-radius:10px;background:#fafbfc;border:1px dashed var(--border-strong);font-size:13px;color:var(--muted)}
.tips p{margin:4px 0}
.tips code{background:var(--primary-soft);padding:1px 6px;border-radius:5px;color:var(--primary)}

/* 快速操作 */
.quick-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

/* ===== 弹窗（新增/编辑） ===== */
.modal{position:fixed;inset:0;z-index:1000;display:none}
.modal.open{display:block}
.modal-mask{position:absolute;inset:0;background:rgba(20,30,50,.38)}
.modal-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:520px;max-width:94vw;
  max-height:90vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:var(--shadow-lg)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  border-bottom:1px solid var(--border);position:sticky;top:0;background:#fff;z-index:1}
.modal-head h3{font-size:16px;font-weight:700}
.modal-x{border:none;background:transparent;font-size:22px;cursor:pointer;color:var(--muted);line-height:1;padding:0 4px}
.modal-x:hover{color:var(--text)}
.modal-body{padding:20px}

/* ===== 销售开单：商品搜索 ===== */
.prod-search{position:relative}
.prod-search input{margin-bottom:8px}
.prod-dropdown{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--border-strong);
  border-radius:10px;box-shadow:var(--shadow-lg);max-height:260px;overflow:auto;z-index:30;margin-top:-4px}
.prod-dropdown.show{display:block}
.pd-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--border)}
.pd-item:last-child{border-bottom:none}
.pd-item:hover{background:var(--primary-soft)}
.pd-name{font-weight:600}
.pd-meta{font-size:12px;color:var(--muted)}
.pd-empty{padding:14px;text-align:center;color:var(--muted)}
.prod-selected{margin-top:4px}

/* ===== 登录页（左右分栏 · 极简白） ===== */
.login-split{display:flex;min-height:100vh}
.login-aside{flex:0 0 44%;background:var(--bg);border-right:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;padding:30px}
.login-brand{text-align:center;display:flex;flex-direction:column;align-items:center}
.login-logo{width:144px;height:144px;border-radius:50%;object-fit:cover;margin-bottom:18px;background:#fff;
  border:1px solid var(--border)}
.login-logo-text{width:144px;height:144px;border-radius:50%;background:var(--primary);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:76px;margin-bottom:18px}
.login-brand h1{font-size:24px;font-weight:800;color:var(--text)}
.login-sub{color:var(--muted);font-size:14px;margin-top:8px}
.login-main{flex:1;display:flex;align-items:center;justify-content:center;padding:30px;background:#fff}
.login-form-wrap{width:330px;max-width:100%}
.login-title{font-size:22px;font-weight:800;margin-bottom:6px}
.login-tip{color:var(--muted);font-size:13px;margin-bottom:22px}
.login-form{display:flex;flex-direction:column;gap:14px}
.login-form label{font-size:13px;font-weight:600}
.login-form input{padding:12px 14px;border:1px solid var(--border-strong);border-radius:10px;font-size:14px}
.login-form input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,108,255,.12)}
.login-foot{text-align:center;color:var(--muted);font-size:12px;margin-top:20px}

/* 响应式 */
@media (max-width:860px){
  .sidebar{transform:translateX(-100%);transition:.25s;width:230px}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .menu-toggle{display:block}
  .grid-2{grid-template-columns:1fr}
  .content{padding:16px}
  .login-split{flex-direction:column}
  .login-aside{flex:none;border-right:none;border-bottom:1px solid var(--border);padding:40px 20px}
  .login-main{padding:36px 20px}
}
/* ===== 财务报表增强 ===== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.stat-card.highlight {
  background: linear-gradient(135deg, var(--primary) 0%, #0056b3 100%);
  border: none;
  color: #fff;
}
.stat-label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.stat-card.highlight .stat-label {
  color: rgba(255,255,255,0.8);
}
.stat-value {
  font-size: 24px;
  font-weight: 800;
}
.stat-card.highlight .stat-value {
  font-size: 28px;
}

/* ===== 类型徽标 ===== */
.badge.type-sale { background: #d4edda; color: #155724; }
.badge.type-repair { background: #cce5ff; color: #004085; }
.badge.type-service { background: #fff3cd; color: #856404; }

/* ===== 财务表格 ===== */
.amount { font-weight: 700; color: var(--primary); }
.editable {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.2s;
}
.editable:hover {
  background: var(--side-hover);
}
.link.danger { color: #dc3545; }
.link.danger:hover { color: #a71d2a; text-decoration: underline; }

/* ===== 筛选表单 ===== */
.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-row label {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.filter-row input, .filter-row select {
  width: auto;
  min-width: 120px;
}

/* ===== Logo/Favicon 预览 ===== */
.logo-preview, .favicon-preview {
  margin: 8px 0;
  padding: 8px;
  background: var(--side-hover);
  border-radius: 8px;
  display: inline-block;
}

/* ===== 危险操作面板 ===== */
.panel[style*="border-color:#dc3545"] .panel-head {
  background: #fff5f5;
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .filter-form { flex-direction: column; align-items: stretch; }
  .filter-row { flex-wrap: wrap; }
  .stat-value { font-size: 20px; }
  .stat-card.highlight .stat-value { font-size: 24px; }
}

/* ===== 维修中右侧面板（只显示有维修中订单时） ===== */
.in-progress-panel {
  border-left: 3px solid #f59e0b !important;
}
.in-progress-panel .panel-head {
  background: #fffbeb;
  border-radius: 8px 8px 0 0;
}
.count-badge {
  display: inline-block;
  background: #f59e0b;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 6px;
}
.in-progress-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
.ip-card {
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 14px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.ip-card:hover {
  box-shadow: 0 4px 12px rgba(245,158,11,0.15);
  transform: translateY(-1px);
}
.ip-device {
  font-weight: 700;
  font-size: 15px;
  color: #1f2937;
  margin-bottom: 6px;
}
.ip-meta {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 10px;
  line-height: 1.5;
}
.ip-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ip-amount {
  font-size: 18px;
  font-weight: 800;
  color: #f59e0b;
}
.btn-ip-complete {
  display: inline-block;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 25px;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(16,185,129,0.3);
  transition: all 0.2s;
}
.btn-ip-complete:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 4px 14px rgba(16,185,129,0.4);
  transform: scale(1.03);
  color: #fff !important;
}
.btn-ip-complete:active {
  transform: scale(0.98);
}

/* ===== 提示框（维修类型说明） ===== */
.hint-box {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--muted);
  padding: 10px 14px;
  background: var(--surface);
  border-radius: 8px;
  border-left: 3px solid var(--primary);
}

/* ===== 统计卡片（财务报表） ===== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.stat-card.highlight {
  background: linear-gradient(135deg, var(--primary) 0%, #0056b3 100%);
  border: none;
  color: #fff;
}
.stat-label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.stat-card.highlight .stat-label {
  color: rgba(255,255,255,0.8);
}
.stat-value {
  font-size: 24px;
  font-weight: 800;
}
.stat-card.highlight .stat-value {
  font-size: 28px;
}

/* ===== 筛选表单 ===== */
.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-row label {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  min-width: 40px;
}
.filter-row input,
.filter-row select {
  width: auto;
  min-width: 120px;
}

/* ===== 类型徽标 ===== */
.badge.type-sale    { background: #d4edda; color: #155724; }
.badge.type-repair  { background: #cce5ff; color: #004085; }
.badge.type-service { background: #fff3cd; color: #856404; }

/* ===== 财务表格 ===== */
.amount {
  font-weight: 700;
  color: var(--primary);
}
.editable {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.2s;
  border-bottom: 1px dashed var(--muted);
}
.editable:hover {
  background: var(--side-hover);
  border-bottom-color: var(--primary);
}
.link.danger {
  color: #dc3545;
  font-weight: 600;
}
.link.danger:hover {
  color: #a71d2a;
  text-decoration: underline;
}

/* ===== Logo / Favicon 预览 ===== */
.logo-preview,
.favicon-preview {
  margin: 8px 0;
  padding: 10px;
  background: var(--side-hover);
  border-radius: 10px;
  display: inline-block;
}

/* ===== 危险操作面板 ===== */
.panel-danger {
  border: 2px solid #dc3545;
}
.panel-danger .panel-head {
  background: #fff5f5;
  border-radius: 8px 8px 0 0;
}

/* ===== 响应式 ===== */
@media (max-width: 900px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  .filter-form { flex-direction: column; align-items: stretch; }
  .filter-row { flex-wrap: wrap; }
  .stat-value { font-size: 20px; }
  .stat-card.highlight .stat-value { font-size: 24px; }
}
@media (max-width: 600px) {
  .stats-row { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr !important; }
}