/* ═══════════════════════════════════════════════════════════════
   StorePOS Global Styles v2.0 — iOS-Quality Beauty POS System
   2026 · Manrope · Linear icons · Restrained palette
   ═══════════════════════════════════════════════════════════════ */

/* ───── 0. 本地字体（不依赖 Google Fonts）─────
   原来各页 <link> 到 fonts.googleapis.com，国内客户打开加载不出来，
   细字排版整个走样。Manrope 可变字体，一个 24KB 文件覆盖 200-700 全部字重。
   只取 latin 子集，中文交给后面的系统字体。 */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('./fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

/* Material Symbols —— 全站图标都靠它。
   走 CDN 的话国内加载不出来就是满屏空方块，比字体走样严重得多，所以必须本地。 */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;               /* 图标宁可晚一点出现，也不能先闪一堆方块 */
  src: url('./fonts/material-symbols.woff2') format('woff2');
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ───── 0.1 全局文字高清渲染（去毛边）— 所有 29 页统一 ───── */
html, body, body * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html, body {
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "kern" 1, "liga" 1;
}
/* 中文标题/¥ 数字字符更锐利 */
h1, h2, h3, h4, h5, h6,
.pos-h1, .pos-h2, .pos-h3,
.pos-stat-val, .pos-stat-value,
[class*="cash-num"], [class*="-tabular"] {
  font-feature-settings: "tnum" 1, "kern" 1, "liga" 1;
  text-rendering: geometricPrecision;
}
/* 统一标题字号锚点（防止各页 h1 各自 size 不一） */
.pos-h1 { font-size: 22px !important; font-weight: 500 !important; letter-spacing: -.3px; line-height: 1.3; }
.pos-h2 { font-size: 16px !important; font-weight: 500 !important; letter-spacing: -.2px; line-height: 1.4; }
.pos-h3 { font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: -.1px; line-height: 1.5; }
/* 全局去粗体保险（700+ 收口到 600；800/900/bold 全部降下来） */
[style*="font-weight:700"], [style*="font-weight: 700"],
[style*="font-weight:800"], [style*="font-weight: 800"],
[style*="font-weight:900"], [style*="font-weight: 900"],
[style*="font-weight:bold"], [style*="font-weight: bold"],
[style*="font-weight:bolder"], [style*="font-weight: bolder"] {
  font-weight: 600 !important;
}
/* HTML 原生粗体标签也降级 */
b, strong { font-weight: 600 !important; }

/* ───── 1. Design Tokens (CSS Variables) ───── */
:root {
  /* Brand — 亮烟蓝 (bright modern blue, lifted from #5b73b5) */
  --pos-primary: #5b8def;
  --pos-primary-hover: #4a7be0;
  --pos-primary-soft: rgba(91, 141, 239, 0.1);

  /* Text */
  --pos-ink: #1f2937;
  --pos-ink-2: #374151;
  --pos-sub: #6b7280;
  --pos-muted: #9ca3af;

  /* Surface */
  --pos-bg: #f9f9f7;
  --pos-card: #ffffff;
  --pos-line: #f0f0ee;
  --pos-line-2: #e5e7eb;
  --pos-hover: #f5f6f8;

  /* Semantic */
  --pos-success: #059669;
  --pos-success-soft: rgba(16, 185, 129, 0.1);
  --pos-warning: #d97706;
  --pos-warning-soft: rgba(245, 158, 11, 0.1);
  --pos-danger: #dc2626;
  --pos-danger-soft: rgba(239, 68, 68, 0.1);
  --pos-info: #2563eb;
  --pos-info-soft: rgba(59, 130, 246, 0.1);

  /* Radius */
  --pos-r-sm: 6px;
  --pos-r-md: 10px;
  --pos-r-lg: 12px;
  --pos-r-xl: 16px;

  /* Shadows */
  --pos-shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --pos-shadow-md: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.02);
  --pos-shadow-lg: 0 4px 20px rgba(0,0,0,.08);
}

/* ───── 2. Base ───── */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; }
html, body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  font-weight: 300;                  /* 细体艺术字: light */
  font-size: 13px;
  line-height: 1.55;
  color: var(--pos-ink);
  background: var(--pos-bg);
  letter-spacing: 0;
}
button, input, select, textarea { font-family: inherit; color: inherit; font-weight: 400; }

/* ───── 3. Typography Scale — 细体艺术字 (no bold) ───── */
.pos-h1 { font-size: 22px; font-weight: 400; color: var(--pos-ink); letter-spacing: -0.4px; line-height: 1.3; margin: 0; }
.pos-h2 { font-size: 16px; font-weight: 400; color: var(--pos-ink); letter-spacing: -0.2px; line-height: 1.4; margin: 0; }
.pos-h3 { font-size: 14px; font-weight: 500; color: var(--pos-ink); letter-spacing: -0.1px; line-height: 1.45; margin: 0; }
.pos-body { font-size: 13px; font-weight: 300; color: var(--pos-ink); line-height: 1.55; }
.pos-sub  { font-size: 12px; font-weight: 300; color: var(--pos-sub); line-height: 1.55; }
.pos-caption { font-size: 11px; font-weight: 300; color: var(--pos-muted); line-height: 1.4; }
.pos-label { font-size: 10px; font-weight: 400; color: var(--pos-muted); text-transform: uppercase; letter-spacing: 0.8px; }

/* Override aggressive Tailwind / inline weights to thin */
h1 { font-size: 22px; font-weight: 400; letter-spacing: -0.4px; color: var(--pos-ink); }
h2 { font-size: 16px; font-weight: 400; letter-spacing: -0.2px; color: var(--pos-ink); }
h3 { font-size: 14px; font-weight: 500; letter-spacing: -0.1px; color: var(--pos-ink); }
h4 { font-size: 13px; font-weight: 500; color: var(--pos-ink); }
strong, b { font-weight: 500; }   /* 把粗体也调薄 */

/* ───── 4. Cards ───── */
.pos-card {
  background: var(--pos-card);
  border-radius: var(--pos-r-lg);
  border: 1px solid var(--pos-line);
  box-shadow: var(--pos-shadow-md);
  transition: box-shadow .2s, transform .15s;
}
.pos-card:hover { box-shadow: var(--pos-shadow-lg); }
.pos-card-flat { background: var(--pos-card); border-radius: var(--pos-r-lg); border: 1px solid var(--pos-line); }
.pos-card-pad { padding: 20px; }
.pos-card-pad-sm { padding: 14px; }

/* Stat card (large number card) */
.pos-stat-card { background: var(--pos-card); border: 1px solid var(--pos-line); border-radius: var(--pos-r-lg); padding: 18px 20px; }
.pos-stat-card .pos-stat-label { font-size: 11px; color: var(--pos-muted); font-weight: 400; margin-bottom: 10px; letter-spacing: 0.2px; }
.pos-stat-card .pos-stat-value { font-size: 28px; font-weight: 300; color: var(--pos-ink); letter-spacing: -0.8px; line-height: 1.1; }
.pos-stat-card .pos-stat-trend { font-size: 11px; font-weight: 400; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; }
.pos-stat-card .pos-stat-trend.up { color: var(--pos-success); }
.pos-stat-card .pos-stat-trend.down { color: var(--pos-danger); }

/* ───── 5. Tables ───── */
.pos-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pos-table thead th {
  text-align: left; font-size: 10px; font-weight: 400; color: var(--pos-muted);
  text-transform: uppercase; letter-spacing: 0.8px;
  padding: 14px; background: var(--pos-bg);
  border-bottom: 1px solid var(--pos-line);
}
.pos-table tbody td {
  padding: 14px; font-size: 13px; font-weight: 300; color: var(--pos-ink);
  border-bottom: 0.5px solid var(--pos-line); height: 46px;
}
.pos-table tbody tr { transition: background .15s; }
.pos-table tbody tr:hover { background: var(--pos-hover); }
.pos-table tbody tr:last-child td { border-bottom: none; }
.pos-table-wrap { background: var(--pos-card); border: 1px solid var(--pos-line); border-radius: var(--pos-r-lg); overflow: hidden; }

/* ───── 6. Buttons ───── */
.pos-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: 8px;
  padding: 10px 18px; font-weight: 400; font-size: 13px; cursor: pointer;
  transition: all .15s; line-height: 1; white-space: nowrap; letter-spacing: 0.1px;
}
.pos-btn:active { transform: scale(.97); }
.pos-btn-primary { background: var(--pos-primary); color: #fff; }
.pos-btn-primary:hover { background: var(--pos-primary-hover); }
.pos-btn-secondary { background: #fff; color: var(--pos-primary); border-color: var(--pos-primary); }
.pos-btn-secondary:hover { background: var(--pos-primary-soft); }
.pos-btn-ghost { background: transparent; color: var(--pos-primary); }
.pos-btn-ghost:hover { background: var(--pos-primary-soft); }
.pos-btn-outline { background: #fff; color: var(--pos-ink-2); border-color: var(--pos-line-2); }
.pos-btn-outline:hover { background: var(--pos-hover); }
.pos-btn-danger { background: var(--pos-danger); color: #fff; }
.pos-btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--pos-card); border: 1px solid var(--pos-line); color: var(--pos-ink-2); }
.pos-btn-icon:hover { background: var(--pos-hover); }
.pos-btn-sm { padding: 6px 12px; font-size: 12px; }
.pos-btn-lg { padding: 12px 22px; font-size: 14px; }

/* ───── 7. Badges (Status Tags) ───── */
.pos-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 400; letter-spacing: 0.2px;
  line-height: 1.4; white-space: nowrap;
}
.pos-badge-success { background: var(--pos-success-soft); color: var(--pos-success); }
.pos-badge-warning { background: var(--pos-warning-soft); color: var(--pos-warning); }
.pos-badge-danger  { background: var(--pos-danger-soft);  color: var(--pos-danger); }
.pos-badge-info    { background: var(--pos-info-soft);    color: var(--pos-info); }
.pos-badge-neutral { background: var(--pos-bg); color: var(--pos-sub); }
.pos-badge-primary { background: var(--pos-primary-soft); color: var(--pos-primary); }

/* ───── 8. Inputs ───── */
.pos-input, .pos-select {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--pos-line-2); border-radius: 8px;
  padding: 9px 12px; font-size: 13px; font-weight: 400;
  background: #fff; color: var(--pos-ink); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.pos-input:focus, .pos-select:focus {
  border-color: var(--pos-primary);
  box-shadow: 0 0 0 3px var(--pos-primary-soft);
}
.pos-input::placeholder { color: var(--pos-muted); }

/* ───── 9. Tabs ───── */
.pos-tabs { display: inline-flex; gap: 2px; background: var(--pos-bg); padding: 3px; border-radius: 8px; border: 1px solid var(--pos-line); }
.pos-tab {
  padding: 7px 16px; font-size: 12px; font-weight: 400;
  color: var(--pos-sub); background: transparent; border: none;
  border-radius: 6px; cursor: pointer; transition: all .15s;
}
.pos-tab:hover { color: var(--pos-ink); }
.pos-tab.active { background: #fff; color: var(--pos-primary); font-weight: 500; box-shadow: var(--pos-shadow-sm); }

/* ───── 10. Section Title (page heading with action) ───── */
.pos-section {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 14px; padding-bottom: 0;
}
.pos-section-title { font-size: 15px; font-weight: 400; color: var(--pos-ink); letter-spacing: -0.2px; }
.pos-section-sub { font-size: 11px; color: var(--pos-muted); margin-top: 3px; font-weight: 300; }
.pos-section-action { font-size: 12px; color: var(--pos-sub); cursor: pointer; font-weight: 400; }
.pos-section-action:hover { color: var(--pos-primary); }

/* ───── 11. Icons (line-only, single color) ───── */
.pos-icon {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  display: inline-block; vertical-align: middle; flex-shrink: 0;
}
.pos-icon-sm { width: 16px; height: 16px; stroke-width: 1.8; }
.pos-icon-lg { width: 24px; height: 24px; stroke-width: 1.5; }
.pos-icon-xl { width: 32px; height: 32px; stroke-width: 1.4; }

/* Material Symbols compat — keep thin */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' -25, 'opsz' 20;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; color: var(--pos-ink-2);
}

/* ───── 12. Scrollbar (minimal) ───── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ───── 13. Sidebar Unification (all pages 240px) ───── */
aside[class*="sidebar"], aside.pos-sidebar {
  width: 240px !important; background: #fff;
  border-right: 1px solid var(--pos-line);
  font-family: 'Manrope', sans-serif !important;
}
aside .nav-item, aside .sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; margin: 1px 8px;
  font-size: 13px; font-weight: 300; color: var(--pos-sub);
  border-radius: 8px; cursor: pointer;
  transition: all .15s; text-decoration: none;
}
aside .nav-item:hover, aside .sidebar-item:hover { background: var(--pos-hover); color: var(--pos-ink); }
aside .nav-item.active, aside .sidebar-item.active {
  background: var(--pos-primary-soft); color: var(--pos-primary); font-weight: 500;
}

/* ───── 14. Animations ───── */
.pos-slide-in { animation: posSlideIn .3s cubic-bezier(.25,.46,.45,.94); }
@keyframes posSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pos-fade-in { animation: posFade .25s ease; }
@keyframes posFade { from { opacity: 0; } to { opacity: 1; } }

/* ───── 15. Mobile Responsive ───── */
@media (max-width: 768px) {
  aside { transform: translateX(-100%); transition: transform .25s; z-index: 200 !important; }
  aside.open { transform: translateX(0); }
  main, [style*="margin-left:200px"], [style*="margin-left:240px"] {
    margin-left: 0 !important; padding-top: 56px !important;
  }
  .pos-mobile-bar {
    position: fixed; top: 0; left: 0; right: 0; height: 56px; background: #fff;
    border-bottom: 1px solid var(--pos-line); display: flex; align-items: center;
    padding: 0 16px; gap: 12px; z-index: 100; box-shadow: 0 1px 8px rgba(0,0,0,.06);
  }
  .pos-mobile-bar .menu-btn {
    width: 36px; height: 36px; border: none; background: var(--pos-bg); border-radius: 8px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
}
@media (max-width: 480px) {
  [style*="grid-template-columns: repeat(3"], [style*="grid-template-columns:repeat(3,"],
  [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns:repeat(4,"],
  [style*="grid-template-columns: repeat(5"], [style*="grid-template-columns:repeat(5,"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ───── 16. Retina hairlines ───── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .pos-card, .pos-card-flat, .pos-stat-card, .pos-table-wrap, .pos-input, .pos-select { border-width: 0.5px; }
}