:root {
  --bg: #f8f9fa;
  --card: #ffffff;
  --text: #222;
  --muted: #6b7280;
  --primary: #2563eb; /* vivid blue for better contrast */
  --border: #e5e7eb;
  /* 釘選偏移：管理導覽高度與標題欄高度（可依實際視覺再調整） */
  --mg-nav-h: 48px;
  --toolbar-h: 52px;
}

/* 優先載入好看的中文字體（Noto Sans TC），若無則用系統中文字體 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }
html, body { height: 100%; overflow-x: auto; }
body {
  margin: 0;
  font-family: 'Microsoft JhengHei', 'PingFang TC', 'PingFang HK', 'Noto Sans TC', 'Noto Sans CJK TC', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
}

.app { min-width: 100%; max-width: none; margin: 24px; padding: 0 16px; }

.toolbar {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 12px;
  position: sticky;
  top: var(--mg-nav-h);
  z-index: 9;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
/* 首頁工具列改為上下兩行顯示，並提升偏移變數供表頭使用 */
.toolbar.two-rows { flex-direction: column; align-items: stretch; gap: 8px; }
.app.has-two-rows { --toolbar-h: 92px; }

.search-group, .action-group { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; }

/* 搜尋框：內嵌清除按鈕 */
.search-box { position: relative; display: inline-flex; align-items: center; }
.search-box input[type="text"] { padding-right: 28px; }
.search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 999px;
  border: none; background: #fff; color: #9ca3af; cursor: pointer;
  display: none; line-height: 1; font-size: 14px; font-weight: 700;
}
.search-clear:hover { background: #f3f4f6; color: #374151; }
/* 有內容時顯示清除按鈕（搭配 placeholder 存在） */
.search-box input[type="text"]:not(:placeholder-shown) ~ .search-clear { display: inline-flex; align-items: center; justify-content: center; }

input[type="text"], input[type="date"], select {
  height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: #fff;
}

.btn {
  height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); cursor: pointer;
}
.btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Enhanced button system */
.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: #1f2937; transition: transform .02s ease, box-shadow .2s ease, background .2s ease, color .2s ease; font-family: 'Microsoft JhengHei', 'PingFang TC', 'PingFang HK', 'Noto Sans TC', 'Noto Sans CJK TC', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial; }
.btn:hover { box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .6; cursor: not-allowed; }
.btn .icon { font-size: 14px; }
/* 圓形黑底白叉圖示（取消） */
.icon-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

.btn.secondary { background: #9fb3c8; color: #fff; border-color: #9fb3c8; }
.btn.success { background: #6ee7b7; color: #084c3a; border-color: #6ee7b7; }
.btn.danger { background: #fb7185; color: #ffffff; border-color: #fb7185; }
.btn.warning { background: #fbbf24; color: #1f2937; border-color: #fbbf24; }
.btn.help { background: #c084fc; color: #ffffff; border-color: #c084fc; }
.btn.text { background: transparent; border-color: transparent; color: #1f2937; }
.btn.link { background: transparent; border-color: transparent; color: var(--primary); text-decoration: underline; }
.btn.outline { background: #fff; color: #1f2937; }
.btn.outline.primary { color: var(--primary); border-color: var(--primary); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn.lg { height: 40px; padding: 0 16px; font-size: 16px; }

/* 調整首頁 orders 表格風格，與管理頁一致的卡片化樣式 */
/* 改為整頁水平滾動，由 body 承擔捲動；容器不攔截 */
.table-wrap { overflow-x: visible; }
table.orders { width: auto; min-width: 0; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--border); border-radius: 12px; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.06); table-layout: fixed; }
table.orders thead th, table.orders tbody td { box-sizing: border-box; }
table.orders thead tr { background: #f9fafb; }
table.orders thead th { position: sticky; top: calc(var(--mg-nav-h) + var(--toolbar-h)); z-index: 3; background: #fff; text-align: left; padding: 6px 6px; font-weight: 600; border-bottom: 1px solid var(--border); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 0 rgba(0,0,0,0.06); min-width: 0; }
table.orders tbody td { border-top: 1px solid var(--border); padding: 6px 6px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* 訂單表格：所有文字靠左對齊 */
table.orders tbody td { text-align: left; }
table.orders tbody tr:hover { background: #f7fbff; }

/* 快速編輯欄：移除鉛筆按鈕的方形外框，置中顯示 */
table.orders thead th.col-fast { text-align: center; }
table.orders tbody td.col-fast { text-align: center; }
.orders .col-fast .fast-edit {
  background: transparent;
  border-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  height: auto;
  min-width: 0;
  line-height: 1;
  color: #1f2937;
}
.orders .col-fast .fast-edit:hover { color: var(--primary); box-shadow: none; transform: none; }

/* 快速提醒鈴鐺：與鉛筆一致的透明按鈕樣式 */
.orders .col-fast .fast-remind {
  background: transparent;
  border-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  height: auto;
  min-width: 0;
  line-height: 1;
  color: #1f2937;
  margin-right: 8px;
}
.orders .col-fast .fast-remind:hover { color: var(--primary); box-shadow: none; transform: none; }

/* 快速刪除垃圾桶：與鉛筆一致的透明按鈕樣式 */
.orders .col-fast .fast-delete {
  background: transparent;
  border-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  height: auto;
  min-width: 0;
  line-height: 1;
  color: #1f2937;
  margin-left: 8px;
}
.orders .col-fast .fast-delete:hover { color: var(--primary); box-shadow: none; transform: none; }

/* 兩行截斷容器：包在 td 內，避免改變 table-cell 布局 */
.clip-2 {
  white-space: inherit;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}

/* 多行欄位頂端對齊，視覺更整齊 */
table.orders tbody td:nth-child(3), /* 客戶 */
table.orders tbody td:nth-child(4), /* 項目 */
table.orders tbody td:nth-child(5), /* 打印名 */
table.orders tbody td:nth-child(14) /* 備註 */
{ vertical-align: top; }

/* 打印名欄：減少左右內距，允許更窄的最小寬度 */
table.orders thead th:nth-child(5),
table.orders tbody td:nth-child(5) {
  padding-left: 4px;
  padding-right: 4px;
}

.col-ops { width: 60px; }
/* 操作欄需允許下拉選單溢出顯示，避免被遮住 */
table.orders tbody td.col-ops { overflow: visible !important; position: relative; }
/* 訂單頁操作選單：靠內側展開，避免超出左邊界 */
.orders .menu-dropdown { left: 0; right: auto; z-index: 2000; overflow: visible; white-space: normal; }

/* —— 附件縮圖 —— */
.inline-attachments td { background: #f9fafb; }
.attachments { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.attachments .att-head { color: #6b7280; font-size: 13px; }
.attachments .att-actions { display: flex; align-items: center; gap: 8px; }
.attachments .att-list { display: flex; flex-wrap: wrap; gap: 8px; }
.attachments .thumb { position: relative; width: 96px; height: 96px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.attachments .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attachments .thumb .del { position: absolute; top: 2px; right: 2px; border: none; background: rgba(0,0,0,0.5); color: #fff; width: 20px; height: 20px; border-radius: 999px; cursor: pointer; line-height: 20px; }

/* —— 照片彈窗 —— */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 5000; }
.modal { position: relative; background: #fff; border-radius: 10px; padding: 12px; max-width: 92vw; max-height: 92vh; overflow: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.modal-title { font-weight: 600; margin-bottom: 8px; }
.modal-close { position: absolute; top: 6px; right: 10px; border: none; background: transparent; font-size: 22px; cursor: pointer; }
.modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.modal-img img { width: 100%; height: auto; display: block; border-radius: 6px; }

/* 欄寬拖拉手把 */
.col-resizer {
  position: absolute;
  top: 0; right: 0;
  width: 10px; height: 100%;
  cursor: col-resize;
  user-select: none; -webkit-user-select: none; pointer-events: auto; z-index: 2;
}
.col-resizer:hover { background: rgba(0,0,0,0.06); }
th.sortable { padding-right: 6px; cursor: default; }
.sort-label { cursor: pointer; user-select: none; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* 使用內層包裹控制表頭布局，避免改變 th 的 table-cell 行為 */
.th-inner { display: flex; align-items: center; gap: 4px; min-width: 0; }
.th-inner .sort-label { flex: 1 1 0; min-width: 0; }
.th-inner .sort-arrow { flex: 0 0 auto; }

/* 表內新增：避免輸入元件溢出與重疊 */
table.orders input.in,
table.orders select.in {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* 表格內快速編輯：統一控件高度與垂直對齊 */
table.orders td { vertical-align: middle; }
table.orders input.in:not([type="checkbox"]),
table.orders select.in,
table.orders .combo-display {
  height: 26px;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 20px;
  box-sizing: border-box;
  vertical-align: middle;
}
/* 快速新增列：checkbox 與文字高度一致、置中 */
table.orders tr.inline-new td label,
table.orders tr.inline-edit td label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  line-height: 26px;
}
table.orders tr.inline-new td label input[type="checkbox"],
table.orders tr.inline-edit td label input[type="checkbox"] { margin: 0; }
/* combo 顯示區與內容垂直置中 */
.combo-display { display: inline-flex; align-items: center; }
/* 具體欄位寬度建議（防止過寬） */
table.orders input.in[type="number"] { width: 80px; }
table.orders input.in[type="datetime-local"] { width: 170px; }
table.orders select.in.orderStatus { max-width: 160px; }
table.orders select.in.vendor { max-width: 160px; }
table.orders select.in.payment { max-width: 140px; }
table.orders input.in.printName { max-width: 140px; }
table.orders input.in.noteItem { max-width: 220px; }
.ops { display: flex; align-items: center; gap: 8px; }
.op-btn { border: none; background: transparent; color: var(--muted); cursor: pointer; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; color: #333; background: #fff; }
.badge.state { border-color: #cfe1ff; background: #e9f1ff; color: #18408b; }
/* 依內容變色：僅覆蓋色彩，不改 pill 外觀 */
.badge.state.s-pending { border-color:#cfe1ff; background:#e9f1ff; color:#18408b; }
.badge.state.s-ordered { border-color:#bfece6; background:#e5f7f5; color:#0e5f53; }
.badge.state.s-shipping { border-color:#ffd7a8; background:#fff4e5; color:#8b5a0e; }
.badge.state.s-arrived { border-color:#bff2bf; background:#e9fce9; color:#145c22; }
.badge.state.s-done { border-color:#bff2bf; background:#e9fce9; color:#145c22; }
.badge.state.s-cancel { border-color:#ffbdbd; background:#ffeaea; color:#8a1f1f; }
.badge.state.s-default { border-color:#d7dce2; background:#eff3f6; color:#334155; }
.badge.flag { border-color:#d7dce2; background:#eff3f6; color:#334155; }
.badge.flag.yes { border-color:#bff2bf; background:#e9fce9; color:#145c22; }
.badge.flag.no { border-color:#d7dce2; background:#eff3f6; color:#334155; }
.money { text-align: right; }
/* 覆蓋訂單表格中的金額欄，改為靠左對齊 */
table.orders td.money { text-align: left; }

.empty { color: var(--muted); text-align: center; padding: 24px; }

/* —— 提醒鈴與面板 —— */
.reminder-bell { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start; width: auto; height: auto; margin-right: 8px; }
.reminder-bell .bell-btn { position: relative; width: 28px; height: 28px; border: none; background: transparent; cursor: pointer; font-size: 18px; line-height: 1; }
/* 未讀徽章：貼齊鈴按鈕右下角 */
.reminder-bell .bell-btn .badge { position: absolute; bottom: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #fff; }
/* 鈴下方統計列 */
.reminder-bell .stats-inline { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1; white-space: nowrap; }
/* 未讀數字紅色（僅在未讀>0時） */
.reminder-bell .stats-inline .unread.has { color: #ef4444; }
.reminder-bell .stats-inline .count { color: inherit; }
.reminder-panel { display: none; position: absolute; right: 0; top: calc(100% + 6px); width: 360px; max-height: 380px; overflow: auto; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.12); z-index: 3000; }
.reminder-panel.open { display: block; }
.reminder-panel .panel-header { padding: 8px 10px; font-weight: 600; border-bottom: 1px solid var(--border); }
.reminder-panel .panel-list { list-style: none; margin: 0; padding: 0; }
.reminder-panel .panel-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.reminder-panel .panel-item .meta { color: var(--muted); font-size: 11px; }
.reminder-panel .panel-item .actions { margin-left: auto; display: flex; gap: 6px; }
.reminder-panel .panel-footer { padding: 8px 10px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.reminder-panel .panel-footer .stats { color: var(--muted); font-size: 12px; }
/* 面板底部統計：未讀數字紅色（僅在未讀>0時） */
.reminder-panel .panel-footer .stats .unread.has { color: #ef4444; }
.reminder-panel .panel-footer .stats .count { color: inherit; }
/* 調整提醒面板內容字級較小，避免過大造成擁擠 */
.reminder-panel .panel-item .content { font-size: 12px; }
/* 下拉提醒內有底色的標籤文字再縮小一級，不影響紅色未讀圓點 */
.reminder-panel .panel-item .content .badge.state,
.reminder-panel .panel-item .content .badge.flag { font-size: 11px; }

/* 提醒面板納期圓形徽章 */
.reminder-panel .panel-item .due { flex: 0 0 auto; }
.due-circle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #fde68a; /* amber-200 */
  color: #7c2d12; /* amber-900 */
  font-weight: 700;
  line-height: 1.05;
  font-size: 10px;
  border: 1px solid #f59e0b; /* amber-500 */
}
.due-circle .due-ddmm { font-size: 11px; font-weight: 700; }
.due-circle .due-yyyy { font-size: 10px; }

/* 重訂超時尾部圓形徽章（底色與納期不同） */
.reminder-panel .panel-item .overdue { flex: 0 0 auto; }
.overdue-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #ffeaea; /* rose-100 */
  color: #7f1d1d; /* rose-900 */
  font-weight: 700;
  font-size: 12px;
  border: 1px solid #ef4444; /* rose-500 */
}

/* 訂單列表打印名前的提醒鈴標誌 */
.bell-mark { margin-right: 6px; }

/* 對話框（新增訂單）風格：卡片化、圓角與陰影 */
dialog.form-dialog { border: none; padding: 0; border-radius: 12px; outline: none; box-shadow: none; max-height: 90vh; }
.form-card { background: #fff; border-radius: 12px; box-shadow: 0 10px 32px rgba(0,0,0,0.18); width: 520px; max-height: 85vh; overflow: auto; padding: 16px; }
.form-card.sm { width: 360px; }
.form-card h3 { margin: 0 0 8px 0; font-size: 18px; }
.form-card p.hint { margin: 0 0 12px 0; color: #6b7280; font-size: 12px; }
.form-card .form-hint { margin: 0 0 12px 0; color: #6b7280; font-size: 12px; }
.modal-title { margin: 0 0 8px 0; font-size: 16px; }
.modal-message { margin: 0 0 12px 0; white-space: pre-wrap; color: #374151; }
.form-grid label { display: block; margin: 8px 0 4px; font-size: 14px; }
.form-grid input[type="text"],
.form-grid input[type="number"],
.form-grid input[type="date"],
.form-grid input[type="datetime-local"],
.form-grid select { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
dialog::backdrop { background: rgba(0,0,0,0.35); }

/* 密碼輸入眼睛按鈕（與站點按鈕系統一致的簡化外觀） */
.eye-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: #f3f4f6; border-radius: 6px; width: 30px; height: 30px; cursor: pointer; }

/* 自訂 combo（可過濾）外觀 */
.combo { position: relative; }
.combo-display { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; background: #fff; }
/* 覆蓋內距由 8px 改為 4px，避免比 input 高 */
.combo-display { padding: 4px 8px; }
/* 面板固定向下展開，避免向上被裁切 */
.combo-panel { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1000; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.12); max-height: 260px; overflow: auto; }
.combo-filter { width: 100%; padding: 8px; border: 0; border-bottom: 1px solid #eee; box-sizing: border-box; }
.combo-list { max-height: 180px; overflow: auto; margin: 0; padding: 4px 0; list-style: none; }
.combo-list li { padding: 6px 10px; cursor: pointer; }
.combo-list li.active { background: rgba(0,0,0,0.06); }

/* combo 開啟時取消該儲存格的 overflow，避免面板被裁切 */
table.orders tbody td:has(.combo.open) { overflow: visible; }

/* ——— Mobile tweaks ——— */
@media (max-width: 640px) {
  .app { margin: 12px auto; padding: 0 10px; }
  .toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .search-group, .action-group { flex-wrap: wrap; }
  .search-group > * { flex: 1 1 auto; }
  input[type="text"], input[type="date"], select { width: 100%; }

  /* 導覽列在手機上可水平滑動 */
  .mg-nav .mg-nav-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px; }
  .mg-nav a { padding: 8px 4px; font-size: 13px; }

  /* 訂單列表在手機上使用水平滾動，避免每字都換行 */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.orders thead th, table.orders tbody td { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
.ops { gap: 6px; }

/* 避免快速新增列的操作按鈕覆蓋到日期輸入框 */
table.orders tbody tr.inline-new td.col-ops { overflow: hidden; }
/* 縮小 icon-only 內距，降低實際寬度以免溢出 */
.btn.icon-only { padding: 2px; }
.btn { height: 30px; }

/* icon-only: 無底色、單色圖示按鈕，用於快速新增操作列 */
.btn.icon-only { background: transparent !important; color: #111 !important; border-color: transparent !important; box-shadow: none !important; padding: 4px; }
.btn.icon-only:hover { background: #f3f4f6; }
.btn.icon-only:active { transform: scale(.98); }
.btn.icon-only .icon, .btn.icon-only svg { width: 16px; height: 16px; display: inline-block; }
/* 快速新增列：縮小操作區間距 */
table.orders tbody tr.inline-new .ops { gap: 4px; }
}