/* ============================================================================
 * MyStore · 小然掌柜 全局样式（移动端优先，一套代码三端适配）
 * 结构：1. 主题 CSS 变量（4套主题 + 租户主题色覆盖）
 *       2. 基础组件（卡片/按钮/输入框/徽标/状态点）
 *       3. 弹窗（蓝色标题栏、可拖拽、居中、无 iframe）
 *       4. 表格（列宽拖拽、表头排序、横向滚动）
 *       5. 底部导航 / 浮动按钮 / 多选弹层 / Toast
 * 说明：布局排布主要用 Tailwind 工具类（CDN），本文件负责主题与业务组件
 * ========================================================================== */

/* ============ 1. 主题 CSS 变量 ============ */
/* 默认主题：清新白（浅色背景 + 蓝色主色调） */
:root,
[data-theme="清新白"] {
  --primary: #2563eb;          /* 主色（按钮/标题/导航） */
  --primary-2: #1d4ed8;        /* 主色加深（按下态） */
  --primary-soft: #eff6ff;     /* 主色浅底（选中背景） */
  --bg: #f1f5f9;               /* 页面背景 */
  --card: #ffffff;             /* 卡片背景 */
  --text: #1e293b;             /* 主文字 */
  --muted: #64748b;            /* 次要文字 */
  --border: #e2e8f0;           /* 边框 */
  --danger: #dc2626;           /* 危险/删除 */
  --success: #16a34a;          /* 成功 */
  --warn: #d97706;             /* 警告 */
  --tabbar: #ffffff;           /* 底部导航背景 */
  --shadow: 0 4px 14px rgba(15, 23, 42, 0.08); /* 卡片阴影 */
}

/* 深色护眼：深灰背景 + 亮色文字，低对比度 */
[data-theme="深色护眼"] {
  --primary: #60a5fa;
  --primary-2: #3b82f6;
  --primary-soft: #1e3a5f;
  --bg: #0f172a;
  --card: #1e293b;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --border: #334155;
  --danger: #f87171;
  --success: #4ade80;
  --warn: #fbbf24;
  --tabbar: #1e293b;
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* 收银台高对比：大按钮、高饱和、间距大（触屏） */
[data-theme="收银台高对比"] {
  --primary: #f97316;
  --primary-2: #ea580c;
  --primary-soft: #fff7ed;
  --bg: #fef3c7;
  --card: #ffffff;
  --text: #1c1917;
  --muted: #78716c;
  --border: #fde68a;
  --danger: #dc2626;
  --success: #16a34a;
  --warn: #ca8a04;
  --tabbar: #ffffff;
  --shadow: 0 4px 14px rgba(120, 53, 15, 0.15);
}

/* 超市绿：绿色主色调，生鲜超市风 */
[data-theme="超市绿"] {
  --primary: #059669;
  --primary-2: #047857;
  --primary-soft: #ecfdf5;
  --bg: #f0fdf4;
  --card: #ffffff;
  --text: #14532d;
  --muted: #6b7280;
  --border: #d1fae5;
  --danger: #dc2626;
  --success: #059669;
  --warn: #d97706;
  --tabbar: #ffffff;
  --shadow: 0 4px 14px rgba(5, 150, 105, 0.12);
}

/* ============ 2. 基础组件 ============ */
html { -webkit-text-size-adjust: 100%; }        /* 防移动端横屏字体缩放 */
body {
  background: var(--bg);                         /* 主题背景 */
  color: var(--text);                            /* 主题文字 */
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  padding-bottom: 64px;                          /* 为底部导航预留空间 */
  transition: background 0.3s, color 0.3s;       /* 主题切换过渡 */
}

/* 卡片：列表页/详情页通用容器 */
.ms-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

/* 按钮：主按钮（渐变科技感）/ 次按钮 / 危险按钮 / 幽灵按钮 */
.ms-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 14px; font-weight: 600;
  padding: 8px 16px; cursor: pointer; user-select: none;
  transition: all 0.15s; border: 1px solid transparent;
}
.ms-btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2)); /* 3D科技风渐变 */
  color: #fff; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}
.ms-btn-primary:active { transform: scale(0.97); opacity: 0.9; }
.ms-btn-ghost { background: var(--card); color: var(--primary); border-color: var(--primary); }
.ms-btn-danger { background: var(--danger); color: #fff; }
.ms-btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.ms-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 输入框 / 下拉框 / 文本域 */
.ms-input, .ms-select, .ms-textarea {
  width: 100%; background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font-size: 14px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ms-input:focus, .ms-select:focus, .ms-textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
/* 移动端锁定（只读）文本框统一底色：明亮#dfe7f6 / 深色#2b3d6b，防CSS白底覆盖 */
.ms-input[readonly], .ms-textarea[readonly] { background: #dfe7f6; color: var(--text); }
[data-theme="深色护眼"] .ms-input[readonly], [data-theme="深色护眼"] .ms-textarea[readonly] { background: #2b3d6b; }
.ms-textarea { min-height: 80px; resize: vertical; }

/* 表单行：标签 + 控件 */
.ms-form-item { margin-bottom: 12px; }
.ms-form-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }

/* 徽标（状态/标签） */
.ms-badge {
  display: inline-block; padding: 2px 8px; border-radius: 9999px;
  font-size: 11px; font-weight: 600; line-height: 1.6;
}
.ms-badge-green { background: #dcfce7; color: #15803d; }
.ms-badge-red   { background: #fee2e2; color: #b91c1c; }
.ms-badge-blue  { background: var(--primary-soft); color: var(--primary); }
.ms-badge-gray  { background: var(--bg); color: var(--muted); }
[data-theme="深色护眼"] .ms-badge-green { background: #14532d; color: #4ade80; }
[data-theme="深色护眼"] .ms-badge-red   { background: #7f1d1d; color: #fca5a5; }

/* 状态点（库存预警等） */
.ms-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.ms-dot-danger { background: var(--danger); }
.ms-dot-success { background: var(--success); }

/* 空数据占位 */
.ms-empty { text-align: center; color: var(--muted); padding: 48px 16px; font-size: 13px; }

/* 列表行（移动端卡片行） */
.ms-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--card);
}
.ms-row:last-child { border-bottom: none; }
.ms-row-title { font-size: 14px; font-weight: 600; color: var(--text); }
.ms-row-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* 搜索栏（隐藏内嵌边框，仅保留底部线） */
.ms-search-wrap { padding: 10px 12px; }
.ms-search {
  display: flex; align-items: center; gap: 6px;
  background: var(--card); border-bottom: 1px solid var(--border); border-radius: 0;
}
.ms-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; padding: 8px 4px; color: var(--text); }
.ms-search input::placeholder { color: var(--muted); }

/* ============ 3. 弹窗（蓝色标题栏、可拖拽、居中、无iframe） ============ */
.ms-modal-mask {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 23, 42, 0.5); /* 半透明遮罩 */
  display: flex; align-items: center; justify-content: center;
  animation: ms-fade 0.15s;
}
.ms-modal {
  width: 92%; max-width: 420px; max-height: 84vh;
  background: var(--card); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  animation: ms-pop 0.2s;
}
.ms-modal-title {
  background: linear-gradient(135deg, #2563eb, #1d4ed8); /* 蓝色标题栏（固定色，不随主题） */
  color: #fff; font-size: 15px; font-weight: 700;
  padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;
  cursor: move; user-select: none; /* 可拖拽 */
}
.ms-modal-close { cursor: pointer; font-size: 18px; padding: 0 4px; opacity: 0.85; }
.ms-modal-close:hover { opacity: 1; }
.ms-modal-body { flex: 1; overflow-y: auto; padding: 16px; }
.ms-modal-foot { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }
@keyframes ms-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ms-pop { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ============ 4. 表格（列宽拖拽、表头排序、横向滚动） ============ */
.ms-table-wrap { overflow-x: auto; background: var(--card); }
.ms-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.ms-table th {
  background: var(--bg); color: var(--text); font-weight: 600;
  padding: 8px 10px; text-align: left; white-space: nowrap;
  position: relative; cursor: pointer; user-select: none; border-bottom: 1px solid var(--border);
}
.ms-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; color: var(--text); }
.ms-table tbody tr:hover { background: var(--primary-soft); } /* 行悬停 */
/* 列宽拖拽手柄（th 右侧边缘，鼠标拖拽调整列宽） */
.ms-th-resize {
  position: absolute; right: -3px; top: 0; width: 7px; height: 100%;
  cursor: col-resize; z-index: 2;
}
.ms-th-resize:hover { background: var(--primary); opacity: 0.4; }
/* 排序箭头指示 */
.ms-th-sort { margin-left: 4px; font-size: 10px; color: var(--muted); }

/* ============ 5. 底部导航 / 浮动按钮 / 多选弹层 / Toast ============ */
/* 底部 Tab 导航（移动端主战场：首页/收银/商品/报表/我的） */
.ms-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
  background: var(--tabbar); border-top: 1px solid var(--border);
  display: flex; padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
}
.ms-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 6px 0; color: var(--muted); text-decoration: none; font-size: 11px;
}
.ms-tab.active { color: var(--primary); } /* 当前页高亮 */
.ms-tab .ms-tab-ico { font-size: 20px; line-height: 1; }

/* 浮动新增按钮（右下角，科技感） */
.ms-fab {
  position: fixed; right: 16px; bottom: 84px; z-index: 800;
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4); cursor: pointer; border: none;
}
.ms-fab:active { transform: scale(0.95); }

/* 多选下拉弹层（复选框勾选，不用选中背景色） */
.ms-pop-list { max-height: 260px; overflow-y: auto; }
.ms-pop-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px; border-bottom: 1px solid var(--border); font-size: 14px;
}
.ms-pop-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); }
.ms-pop-item:last-child { border-bottom: none; }

/* Toast 轻提示 */
.ms-toast {
  position: fixed; left: 50%; bottom: 120px; z-index: 2000;
  transform: translateX(-50%); padding: 10px 18px; border-radius: 8px;
  background: rgba(15, 23, 42, 0.85); color: #fff; font-size: 13px;
  animation: ms-fade 0.2s; max-width: 80%; text-align: center;
}
.ms-toast-error { background: rgba(220, 38, 38, 0.92); }
.ms-toast-success { background: rgba(22, 163, 74, 0.92); }

/* 分页条（移动端紧凑型） */
.ms-pager { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; font-size: 12px; color: var(--muted); }
.ms-pager button {
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.ms-pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.ms-pager select { border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); font-size: 12px; padding: 3px 4px; }

/* 顶栏 */
.ms-header {
  position: sticky; top: 0; z-index: 900;
  background: var(--card); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
}
.ms-header .ms-logo { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.ms-header .ms-shop-name { font-size: 15px; font-weight: 700; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }