/* ============================================================
   base.css  全站基础样式（朴素 / 大字体 / 大按钮）
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Segoe UI", sans-serif;
  font-size: 18px;
  color: #222;
  background: #f5f6f8;
}
body {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 外层不滚，由 .page 自己处理 */
}

a { color: #1565c0; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- 顶部导航 ---------- */
.topbar {
  display: flex;
  align-items: center;
  height: 64px;
  flex-shrink: 0;
  padding: 0 24px;
  background: #1f2d3d;
  color: #fff;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.brand {
  font-size: 22px;
  font-weight: bold;
  margin-right: 32px;
  white-space: nowrap;
}
.nav { display: flex; gap: 6px; flex: 1; }
.nav a {
  display: inline-block;
  padding: 10px 18px;
  font-size: 18px;
  color: #cfd8dc;
  border-radius: 6px;
}
.nav a:hover { background: #2a3b50; color: #fff; text-decoration: none; }
.nav a.active { background: #1565c0; color: #fff; }

/* 顶栏右侧：用户区 */
.user-area {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  border-left: 1px solid #3a4b62;
  color: #cfd8dc;
  font-size: 14px;
  white-space: nowrap;
}
.user-info { color: #fff; }
.user-info .role-tag {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  font-size: 12px;
  border-radius: 3px;
  background: #1565c0;
}
.user-area .btn { background: transparent; border: 1px solid #4a5b72; color: #cfd8dc; }
.user-area .btn:hover { background: #2a3b50; color: #fff; }

/* 收银员视图：隐藏标了 .admin-only 的所有元素 */
body.role-cashier .admin-only { display: none !important; }

/* 高级筛选面板 */
.adv-badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  margin-left: 4px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background: #c62828;
  border-radius: 9px;
  text-align: center;
}
.advanced-panel {
  background: #fff;
  border: 1px solid #d5dde2;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.adv-grid { display: flex; flex-direction: column; gap: 10px; }
.adv-row  {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.adv-row label {
  color: #555;
  font-size: 15px;
  min-width: 70px;
}
.adv-row input[type="number"] { width: 110px; }
.adv-row input[type="text"]   { width: 160px; }
.adv-row span { color: #999; }
.adv-actions {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eef0f3;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- 主区域 ---------- */
.page {
  flex: 1;
  min-height: 0;          /* flex 子项必须，否则会被内容撑大 */
  overflow-y: auto;       /* 其他页面（商品/订单等）局部滚动 */
  padding: 24px;
}
.page h1 { font-size: 26px; margin: 0 0 16px; }
.page h2 { font-size: 22px; margin: 24px 0 12px; }

.loading, .placeholder {
  padding: 40px;
  text-align: center;
  color: #777;
  font-size: 20px;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 18px;
  font-family: inherit;
  border: 1px solid #1565c0;
  background: #1565c0;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: background .1s;
}
.btn:hover  { background: #1976d2; }
.btn:active { background: #0d47a1; }
.btn.large  { padding: 16px 32px; font-size: 22px; }
.btn.ghost  {
  background: #fff; color: #1565c0;
}
.btn.ghost:hover { background: #e3f2fd; }
.btn.danger { background: #c62828; border-color: #c62828; }
.btn.danger:hover { background: #d32f2f; }
.btn.gray   { background: #757575; border-color: #757575; }
.btn.gray:hover { background: #8a8a8a; }
.btn:disabled { background: #bdbdbd; border-color: #bdbdbd; cursor: not-allowed; }

/* ---------- 表单 ---------- */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  font-family: inherit;
  font-size: 18px;
  padding: 8px 12px;
  border: 1px solid #c5c9cf;
  border-radius: 6px;
  background: #fff;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: #1565c0;
  box-shadow: 0 0 0 2px rgba(21,101,192,.15);
}

.form-row { margin-bottom: 12px; }
.form-row label {
  display: inline-block;
  min-width: 100px;
  color: #555;
}

/* ---------- 表格 ---------- */
table.data {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
table.data th, table.data td {
  padding: 12px 14px;
  border-bottom: 1px solid #eceff1;
  text-align: left;
  font-size: 17px;
}
table.data th {
  background: #eceff1;
  font-weight: 600;
  color: #455a64;
}
table.data tbody tr:hover { background: #f9fafb; }
table.data th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
table.data th.sortable:hover { background: #d5dde2; }
.sort-icon { display: inline-block; margin-left: 2px; font-size: 13px; }
.sort-icon.dim    { color: #b0bec5; }
.sort-icon.active { color: #1565c0; font-weight: bold; }

/* ---------- 提示状态 ---------- */
.tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 14px;
  border-radius: 4px;
  margin-left: 6px;
}
.tag.warn  { background: #fff3e0; color: #e65100; }
.tag.danger{ background: #ffebee; color: #c62828; }
.tag.ok    { background: #e8f5e9; color: #2e7d32; }

/* ---------- 通用工具 ---------- */
.hidden { display: none !important; }
.text-right { text-align: right; }
.text-center{ text-align: center; }
.muted { color: #888; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  background: #323232;
  color: #fff;
  border-radius: 6px;
  font-size: 17px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.toast.ok    { background: #2e7d32; }
.toast.err   { background: #c62828; }

/* ---------- 工具栏 ---------- */
.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.toolbar input[type="search"],
.toolbar input[type="text"],
.toolbar select { font-size: 17px; }

/* ---------- 分页 ---------- */
.pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  flex-wrap: wrap;
}
.pagination button {
  padding: 6px 12px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid #c5c9cf;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.pagination button:hover  { background: #e3f2fd; }
.pagination button.active { background: #1565c0; color: #fff; border-color: #1565c0; }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
.pagination span { padding: 0 4px; color: #888; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8vh;
  z-index: 200;
}
.modal {
  background: #fff;
  border-radius: 8px;
  width: 480px;
  max-width: 92vw;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  overflow: hidden;
}
.modal.modal-form  { width: 560px; }
.modal.modal-wide  { width: 720px; }
.modal-title {
  padding: 14px 20px;
  font-size: 19px;
  font-weight: 600;
  background: #f5f6f8;
  border-bottom: 1px solid #e0e0e0;
}
.modal-body {
  padding: 20px;
  max-height: 65vh;
  overflow-y: auto;
}
.modal-body .form-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.modal-body .form-row label {
  min-width: 100px;
  color: #555;
}
.modal-body .form-row input,
.modal-body .form-row select,
.modal-body .form-row textarea { flex: 1; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 20px;
  background: #fafafa;
  border-top: 1px solid #e0e0e0;
}

/* ---------- 收银台 ---------- */
/* 收银台让 .page 不滚（双栏自身锁高，内部各自滚） */
.page.cashier-page { overflow: hidden; padding: 16px; }
.cashier {
  display: grid;
  grid-template-columns: 1fr 460px;
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  height: 100%;
}
.cashier-left, .cashier-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;   /* 关键：让 flex:1 的子项可缩小 */
}

.cashier-search input {
  width: 100%;
  padding: 14px 16px;
  font-size: 22px;
}

.cashier-results {
  flex: 1;
  overflow-y: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.cashier-empty {
  padding: 60px 20px;
  color: #888;
  text-align: center;
  font-size: 18px;
}
.result-item {
  padding: 12px 16px;
  border-bottom: 1px solid #eef0f3;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background .08s;
}
.result-item:hover { background: #e3f2fd; }
.result-item .ri-main { flex: 1; min-width: 0; }
.result-item .ri-name { font-size: 18px; font-weight: 600; }
.result-item .ri-meta { font-size: 14px; color: #777; margin-top: 4px; }
.result-item .ri-price {
  font-size: 22px;
  font-weight: bold;
  color: #c62828;
  margin-right: 8px;
  white-space: nowrap;
}
.result-item .ri-stock {
  font-size: 14px;
  color: #555;
  white-space: nowrap;
}
.result-item.out { background: #fff5f5; }
.result-item.out .ri-name { color: #c62828; }

/* 购物车 */
.cart {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.cart-header {
  padding: 12px 16px;
  background: #eceff1;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-body { flex: 1; overflow-y: auto; }
.cart-empty {
  padding: 60px 20px;
  color: #888;
  text-align: center;
}
.cart-row {
  padding: 6px 10px;
  border-bottom: 1px solid #eef0f3;
}
.cart-row .cr-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-row .cr-fields {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  color: #666;
}
.cart-row input[type="number"] {
  width: 56px;
  padding: 2px 6px;
  font-size: 14px;
  text-align: right;
  border-radius: 4px;
}
.cart-row .cr-sub {
  margin-left: auto;
  font-weight: bold;
  color: #c62828;
  font-size: 16px;
  white-space: nowrap;
}
.cart-row .cr-del {
  padding: 2px 8px;
  font-size: 16px;
  line-height: 1;
  background: transparent;
  color: #c62828;
  border: 1px solid #ffcdd2;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.cart-row .cr-del:hover { background: #ffebee; }

/* 结算面板（紧凑版，让购物车获得更多空间） */
.checkout-panel {
  background: #fff;
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  flex-shrink: 0;
}
.checkout-panel .line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0;
  font-size: 15px;
}
.checkout-panel .line.total {
  font-size: 22px;
  font-weight: bold;
  color: #c62828;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 2px dashed #ddd;
}
.checkout-panel input[type="number"],
.checkout-panel input[type="text"] {
  padding: 4px 8px;
  font-size: 15px;
}
.checkout-panel input[type="number"] {
  width: 100px;
  text-align: right;
}
.checkout-panel .pay-label {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
}
.pay-methods {
  display: flex;
  gap: 6px;
  margin: 4px 0 8px;
}
.pay-methods button {
  flex: 1;
  min-width: 0;
  padding: 6px 4px;
  font-size: 14px;
  font-family: inherit;
  border: 2px solid #c5c9cf;
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
}
.pay-methods button.active {
  border-color: #1565c0;
  background: #1565c0;
  color: #fff;
}
.checkout-panel .remark-row { margin: 6px 0; }
.checkout-panel .remark-row input { width: 100%; }
.btn.checkout-go {
  width: 100%;
  padding: 12px;
  font-size: 19px;
  font-weight: bold;
  margin-top: 6px;
}

/* 应收输入行：高亮 + 大字 */
.checkout-panel .line.line-final { margin: 6px 0; }
.checkout-panel .line-final .final-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff8e1;
  border: 2px solid #c62828;
  border-radius: 6px;
  padding: 2px 8px;
}
.checkout-panel .line-final .final-input-wrap .cny {
  color: #c62828;
  font-weight: bold;
  font-size: 18px;
}
.checkout-panel .line-final input#finalInput {
  width: 110px;
  border: none;
  background: transparent;
  text-align: right;
  font-size: 20px;
  font-weight: bold;
  color: #c62828;
  padding: 2px 0;
  outline: none;
}
.checkout-panel .line-final .btn-link {
  background: transparent;
  border: none;
  color: #1565c0;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  font-family: inherit;
}
.checkout-panel .line-final .btn-link:hover { text-decoration: underline; }

/* 折扣行 */
.checkout-panel .line-discount .discount-pos { color: #2e7d32; }
.checkout-panel .line-discount .discount-neg { color: #e65100; }

/* 警告消息 */
.checkout-panel .warn-msg {
  margin: 6px 0;
  padding: 6px 10px;
  background: #fff3e0;
  color: #e65100;
  font-size: 13px;
  border-radius: 4px;
  border-left: 3px solid #e65100;
}

/* ---------- 通用卡片 ---------- */
.card {
  background: #fff;
  border-radius: 8px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  margin-bottom: 12px;
}
.card h2 { margin-top: 0; font-size: 20px; }

/* ---------- 下拉搜索 ---------- */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #c5c9cf;
  border-radius: 6px;
  margin-top: 4px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  z-index: 50;
}
.dropdown-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #eef0f3;
}
.dropdown-item:hover  { background: #e3f2fd; }
.dropdown-item:last-child { border-bottom: none; }
.dropdown-empty {
  padding: 14px;
  color: #888;
  text-align: center;
}

/* ---------- 已选商品提示框 ---------- */
.selected-prod {
  padding: 12px 14px;
  background: #e3f2fd;
  border-radius: 6px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.selected-prod .sp-name { font-weight: 600; font-size: 17px; }

/* ---------- 设置表单 ---------- */
.settings-form {
  max-width: 640px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.settings-form .form-row {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.settings-form .form-row label {
  min-width: 110px;
  color: #555;
  font-size: 17px;
}

/* ---------- 订单记录 ---------- */
.day-summary {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.day-summary b { color: #c62828; }
.btn-mini {
  padding: 4px 10px;
  font-size: 14px;
}

/* ---------- 收据/小票 ---------- */
.page.receipt-page {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.receipt-actions {
  width: 100%;
  max-width: 600px;
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.receipt-paper {
  width: 80mm;
  background: #fff;
  padding: 8mm 6mm;
  font-family: "Microsoft YaHei", "微软雅黑", "Consolas", monospace;
  font-size: 13px;
  color: #000;
  line-height: 1.5;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.receipt-paper.w58 { width: 58mm; padding: 6mm 4mm; font-size: 12px; }
.receipt-paper .store-name {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
}
.receipt-paper .store-meta {
  text-align: center;
  font-size: 12px;
  color: #222;
}
.receipt-paper hr {
  border: 0;
  border-top: 1px dashed #555;
  margin: 6px 0;
}
.receipt-paper .receipt-meta { font-size: 12px; }
.receipt-items {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.receipt-items th {
  text-align: left;
  font-weight: bold;
  padding: 2px 4px 2px 0;
  border-bottom: 1px solid #888;
}
.receipt-items th.num { text-align: right; }
.receipt-items td {
  padding: 2px 4px 2px 0;
  vertical-align: top;
  word-break: break-all;
}
.receipt-items td.num { text-align: right; white-space: nowrap; }
.receipt-totals .line {
  display: flex;
  justify-content: space-between;
  padding: 1px 0;
}
.receipt-totals .line.total {
  font-size: 15px;
  font-weight: bold;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #888;
}
.receipt-remark { font-size: 12px; margin-top: 4px; }
.thanks {
  text-align: center;
  font-size: 13px;
  padding: 6px 0 2px;
}

/* ---------- 打印 ---------- */
@media print {
  body { background: #fff !important; overflow: visible !important; height: auto !important; }
  .topbar, .toast, .no-print, .modal-overlay { display: none !important; }
  .page { padding: 0 !important; overflow: visible !important; height: auto !important; }
  .receipt-paper {
    box-shadow: none !important;
    margin: 0 !important;
    padding: 2mm !important;
    width: 100% !important;
  }
}

/* ---------- 收银台客户栏 ---------- */
.cashier-customer-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  font-size: 15px;
}
.cashier-customer-bar label { color: #555; }
.cashier-customer-bar select { flex: 0 0 auto; min-width: 200px; }
.cashier-customer-bar .customer-info { margin-left: auto; font-size: 14px; }

/* ---------- 挂账区 ---------- */
.credit-row {
  margin: 10px 0;
  padding: 8px 10px;
  background: #fff8e1;
  border: 1px dashed #ffc107;
  border-radius: 6px;
  font-size: 14px;
}
.credit-row > label { display: block; cursor: pointer; }
.credit-partial {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #ffc107;
  display: flex;
  gap: 14px;
  align-items: center;
}
.credit-partial input[type="number"] {
  padding: 4px 8px;
  font-size: 15px;
}

/* ---------- 客户中心 ---------- */
.customer-header {
  padding: 14px 18px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  margin-bottom: 12px;
}
.customer-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 12px;
  padding: 14px 18px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  margin-bottom: 12px;
  align-items: center;
}
.customer-summary .stat .label { font-size: 13px; color: #777; }
.customer-summary .stat .value { font-size: 22px; font-weight: bold; color: #1f2d3d; }
.customer-summary .stat .value.debt-red { color: #c62828; }
.customer-summary .stat-actions {
  display: flex; flex-direction: column; gap: 6px;
}

.tabs {
  display: flex;
  gap: 4px;
  margin: 12px 0 8px;
  border-bottom: 2px solid #e0e0e0;
}
.tabs a {
  padding: 8px 16px;
  color: #555;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.tabs a:hover { text-decoration: none; color: #1565c0; }
.tabs a.active {
  color: #1565c0;
  border-bottom-color: #1565c0;
  font-weight: 600;
}

.debt-red { color: #c62828; font-weight: bold; }
.ok-text  { color: #2e7d32; }