/* 施恩德岩板在线库存系统 - 样式 */
:root {
  --brand-red: #d42a20;
  --brand-red-dark: #b31f16;
  --ink: #2b2b2b;
  --muted: #8a8a8a;
  --line: #e8e8e8;
  --bg: #f5f6f7;
  --card: #ffffff;
  --ok: #1a9e5c;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14px;
}
.hidden { display: none !important; }

/* ---------- 登录 ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card {
  background: var(--card); border-radius: 14px; box-shadow: 0 8px 40px rgba(0,0,0,.08);
  padding: 40px 44px 36px; width: 380px; text-align: center;
}
.login-logo { width: 130px; margin-bottom: 14px; }
.login-company { font-size: 16px; font-weight: 700; letter-spacing: 1px; }
.login-sub { font-size: 12px; color: var(--muted); margin: 6px 0 26px; letter-spacing: 2px; }
.login-card input {
  width: 100%; padding: 11px 12px; margin-bottom: 12px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 14px; outline: none; transition: border-color .15s;
}
.login-card input:focus { border-color: var(--brand-red); }
.login-err { color: var(--brand-red); font-size: 12px; min-height: 18px; margin-top: 10px; }

/* ---------- 按钮 ---------- */
.btn {
  border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; cursor: pointer;
  transition: filter .15s, background .15s; font-family: inherit;
}
.btn.primary { background: var(--brand-red); color: #fff; }
.btn.primary:hover { filter: brightness(.92); }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: #555; }
.btn.ghost:hover { background: #f2f2f2; }
.btn.ghost.active { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }
.btn.danger { background: #fff1f0; color: var(--brand-red); border: 1px solid #ffd6d3; }
.btn.danger:hover { background: #ffe4e2; }
.btn.small { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.btn.block { width: 100%; padding: 12px; font-size: 15px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 顶栏 ---------- */
.topbar {
  background: #fff; display: flex; align-items: center; gap: 14px;
  padding: 12px 24px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.topbar-logo { width: 58px; }
.company { font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.sysname { font-size: 12px; color: var(--muted); margin-top: 2px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #ccc; display: inline-block; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(26,158,92,.15); }
.dot.off { background: #d9534f; }
.role-badge {
  background: #fdecea; color: var(--brand-red); border-radius: 10px; padding: 2px 10px; font-size: 12px;
}
.sep { width: 1px; height: 16px; background: var(--line); }

/* ---------- 工具栏 ---------- */
.toolbar { display: flex; align-items: center; gap: 14px; padding: 16px 24px 8px; }
.toolbar input {
  flex: 0 1 340px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; outline: none;
}
.toolbar input:focus { border-color: var(--brand-red); }
#statText { color: var(--muted); font-size: 13px; }
.toolbar .btn { margin-left: auto; }

/* ---------- 表格 ---------- */
.table-wrap { margin: 10px 24px 30px; background: var(--card); border-radius: 12px; overflow: auto; box-shadow: 0 2px 14px rgba(0,0,0,.05); }
table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 1000px; }
thead th {
  background: #fafafa; color: #444; font-weight: 600; text-align: left;
  padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: 11px 14px; border-bottom: 1px solid #f2f2f2; white-space: nowrap; }
tbody tr:hover { background: #fbf6f5; }
tbody tr:last-child td { border-bottom: none; }
td.qty { font-weight: 700; color: var(--brand-red-dark); }
td.op-col { text-align: right; }
th.op-col { text-align: right; }
.op-col .btn { margin-left: 6px; }
.empty-row td { text-align: center; color: var(--muted); padding: 40px 0; }
/* 品名(第2列)与备注(第9列)允许换行，避免长文本撑破列宽 */
tbody td:nth-child(2), tbody td:nth-child(9) { white-space: normal; word-break: break-word; }
/* 列宽拖拽把手：鼠标移到列右边缘出现，可拖动调整列宽 */
#tbl thead th { position: relative; }
.col-resizer { position: absolute; right: -4px; top: 0; height: 100%; width: 9px; cursor: col-resize; z-index: 3; }
.col-resizer:hover, .col-resizer.active { background: rgba(212,42,32,.35); }

/* 出入库流水表 */
.lg-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 880px; table-layout: fixed; }
.lg-table th { background: #fafafa; color: #444; font-weight: 600; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.lg-table td { padding: 8px 10px; border-top: 1px solid #f2f2f2; color: #444; vertical-align: top; }
.lg-table td.lg-wrap { white-space: normal; word-break: break-word; }
.lg-table tr:hover td { background: #fbf6f5; }

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: #fff; border-radius: 14px; padding: 26px 28px; width: 420px; max-height: 90vh; overflow: auto;
  box-shadow: 0 12px 50px rgba(0,0,0,.2);
}
.modal h3 { margin-bottom: 18px; font-size: 16px; }
.modal label { display: block; font-size: 12px; color: #666; margin: 12px 0 5px; }
.modal input, .modal select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; outline: none;
}
.modal input:focus, .modal select:focus { border-color: var(--brand-red); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* 用户管理 */
.user-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f2f2f2; font-size: 13px; }
.user-row .u-name { font-weight: 700; min-width: 90px; }
.user-row .u-role { color: var(--brand-red); font-size: 12px; }

/* ---------- Toast ---------- */
#toast {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 99;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
}
.toast-item {
  background: #333; color: #fff; padding: 9px 18px; border-radius: 8px; font-size: 13px;
  animation: fadein .2s ease; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.toast-item.err { background: var(--brand-red); }
.toast-item.ok { background: var(--ok); }
@keyframes fadein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 余料照片：弹窗预览 + 表格缩略图 + 放大 */
.photo-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.thumb-wrap { position: relative; width: 64px; height: 64px; }
.thumb-wrap .thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #eee; display: block; }
.thumb-wrap .thumb-del { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; line-height: 16px; border-radius: 50%; background: #b31f16; color: #fff; border: none; cursor: pointer; font-size: 12px; padding: 0; }
.tbl-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid #eee; cursor: zoom-in; vertical-align: middle; }
#photoBig img { background: #fff; }

@media (max-width: 640px) {
  .company { font-size: 14px; }
  .toolbar { flex-wrap: wrap; }
  .toolbar .btn { margin-left: 0; }
}