/* ── 常一嚐 × 九如 品牌樣式 ─────────────────────────── */
:root {
  --cream: #FBF6E8;        /* 頁面底色（LOGO 奶油底） */
  --paper: #FFFFFF;
  --ink: #2B2523;          /* LOGO 黑 */
  --ink-soft: #7A716B;
  --line: #EFE6CF;
  --yellow: #FFD41D;       /* LOGO 黃：主要強調色 */
  --yellow-deep: #F0BE00;
  --red: #E23227;          /* LOGO 紅：警示／低庫存 */
  --orange: #E8850C;       /* LOGO 橘：領用／待處理 */
  --green: #3FA46A;        /* LOGO 綠：入庫／完成 */
  --pink: #F08876;
}

* { -webkit-tap-highlight-color: transparent; }

html, body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
  overscroll-behavior-y: none;
}

/* 卡片 */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  box-shadow: 0 1px 3px rgba(43, 37, 35, .05);
}

/* 大按鈕（平板觸控：最小高度 48px） */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.25rem;
  border-radius: 9999px; font-weight: 700; font-size: 1rem;
  border: 1px solid transparent;
  transition: transform .06s ease, opacity .15s ease;
  cursor: pointer; user-select: none;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--yellow); color: var(--ink); }
.btn-primary:hover { background: var(--yellow-deep); }
.btn-green  { background: var(--green);  color: #fff; }
.btn-orange { background: var(--orange); color: #fff; }
.btn-red    { background: var(--red);    color: #fff; }
.btn-ghost  { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: #fff; }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* 狀態小標籤 */
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .65rem; border-radius: 9999px;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.chip-red    { background: #FDEAE8; color: var(--red); }
.chip-orange { background: #FCEFDD; color: var(--orange); }
.chip-green  { background: #E7F4EC; color: var(--green); }
.chip-gray   { background: #F2EEE3; color: var(--ink-soft); }
.chip-yellow { background: #FFF6CC; color: #8A6D00; }

/* 頁面切換淡入 */
.view { display: none; }
.view.active { display: block; animation: fadeIn .18s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 底部導覽列 */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: .55rem 0 .5rem; color: var(--ink-soft);
  font-size: .78rem; font-weight: 700; cursor: pointer;
}
.tab-item svg { width: 26px; height: 26px; }
.tab-item.active { color: var(--ink); }
.tab-item.active .tab-ico {
  background: var(--yellow); border-radius: 9999px; padding: 4px 18px;
}
.tab-ico { padding: 4px 18px; border-radius: 9999px; transition: background .15s; }

/* 直向平板：單位切換器換行到頂欄第二列，避免與使用者資訊擠在同一行 */
@media (max-width: 900px) {
  #unit-switcher {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start !important;
    overflow-x: auto;
  }
}

/* 數字輸入（盤點／數量） */
.qty-input {
  box-sizing: border-box;
  width: 110px; min-height: 52px; text-align: center;
  font-size: 1.35rem; font-weight: 800;
  background: #fff; border: 2px solid var(--line); border-radius: .9rem;
  outline: none;
}
.qty-input:focus { border-color: var(--yellow-deep); }

/* 彈窗 */
dialog { border: none; background: transparent; padding: 0; max-width: 100vw; }
dialog::backdrop { background: rgba(43, 37, 35, .45); }
.modal {
  background: var(--paper); border-radius: 1.5rem; overflow: hidden;
  width: min(640px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
}

/* 儲存中遮罩＋spinner */
#saving-overlay {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(43, 37, 35, .45); backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center;
}
#saving-overlay.show { display: flex; }
.saving-box {
  background: var(--paper); border-radius: 1.25rem; padding: 28px 36px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: 0 8px 30px rgba(43, 37, 35, .2);
}
.spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid var(--line); border-top-color: var(--yellow-deep);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.6s; }
}

/* Toast */
#toast {
  position: fixed; top: 1.25rem; left: 50%; transform: translate(-50%, -16px);
  background: var(--ink); color: #fff; padding: .7rem 1.4rem;
  border-radius: 9999px; font-weight: 700; font-size: .95rem;
  opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 100;
  display: flex; align-items: center; gap: .5rem;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #DDD3B8; border-radius: 4px; }