/* ============================================================
   EGE2026 style.css — 深空藍黑 + 金色漸變（對齊 hk-salary-mpf-app 風格）
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
[hidden] { display: none !important; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  background: #0c1428;
  color: #e0e0e0;
  min-height: 100vh;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0f1a30; }
::-webkit-scrollbar-thumb { background: #2a3a5c; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a4a6c; }

/* ─── Layout ─── */
.app-layout {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* ─── Sidebar ─── */
.sidebar {
  width: 220px;
  background: linear-gradient(180deg, #0f1a30 0%, #1b2a4a 100%);
  border-right: 1px solid #2a3a5c;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width .15s ease;
}
.sidebar-brand {
  padding: 22px 20px 16px;
  border-bottom: 1px solid #2a3a5c;
}
.sidebar-brand h1 {
  font-size: 1.05rem;
  color: #c8a951;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.35;
}
.sidebar-brand .sub { font-size: .72rem; color: #6a7a9a; margin-top: 3px; }
.sidebar-brand .tag { font-size: .7rem; color: #c8a951; opacity: .85; margin-top: 6px; }
.sidebar-nav { flex: 1; padding: 10px 0; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  cursor: pointer;
  color: #8a9aba;
  font-size: .9rem;
  transition: all .2s;
  border-left: 3px solid transparent;
}
.nav-item:hover { color: #e0e0e0; background: rgba(200,169,81,.05); }
.nav-item.active {
  color: #c8a951;
  background: rgba(200,169,81,.08);
  border-left-color: #c8a951;
  font-weight: 600;
}
.nav-item .icon { font-size: 1.15rem; width: 24px; text-align: center; }
.nav-item { cursor: pointer; }
@media (hover: hover) { .nav-item { cursor: grab; } .nav-item:active { cursor: grabbing; } }
/* 寬屏（側欄豎排）導航項：靜態禁觸屏滾動 —— touch-action 必須喺按下前已生效，
   拖拽先唔會被瀏覽器滾動打斷（pointerdown 先動態設置係太遲，真實平板會失效） */
@media (min-width: 761px) {
  .sidebar-nav { touch-action: none; }
  .nav-item { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}
.nav-item.dragging { opacity: .5; background: rgba(200,169,81,.15); border-left-color: #c8a951; }
.nav-item.drag-over { border-top: 2px solid #c8a951; }
.sidebar-nav .drag-hint { font-size: .62rem; color: #4a5a7a; padding: 2px 20px 0; }
.sidebar-foot { padding: 12px 20px; border-top: 1px solid #2a3a5c; }
.sidebar-foot .ver { font-size: .65rem; color: #4a5a7a; }
.sidebar-foot .copy { font-size: .65rem; color: #4a5a7a; margin-top: 2px; }

/* ─── Sidebar resizer（拖拽把手）─── */
.sidebar-resizer {
  position: absolute;
  top: 0; bottom: 0;
  width: 5px;
  left: 220px;
  cursor: col-resize;
  z-index: 30;
  background: transparent;
  transition: background .2s;
}
.sidebar-resizer:hover, .sidebar-resizer:active { background: rgba(200,169,81,.4); }
body.resizing { user-select: none; cursor: col-resize; }

/* ─── Main area ─── */
.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.topbar {
  background: #1b2a4a;
  border-bottom: 1px solid #2a3a5c;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 12px;
}
.topbar h2 { font-size: 1.05rem; color: #c8a951; font-weight: 600; }
.topbar .company { font-size: .8rem; color: #6a7a9a; white-space: nowrap; }
.content {
  flex: 1;
  padding: 24px 28px 60px;
  overflow-y: auto;
}

/* ─── Page title ─── */
.page-title { font-size: 1rem; font-weight: 600; color: #c8a951; margin: 4px 0 14px; }
.page-title:first-child { margin-top: 0; }

/* ─── Cards ─── */
.card {
  background: #1b2a4a;
  border: 1px solid #2a3a5c;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}
.card-header {
  font-size: 1rem;
  font-weight: 600;
  color: #c8a951;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #2a3a5c;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hint-text { font-size: .78rem; color: #6a7a9a; margin-bottom: 14px; line-height: 1.6; }

/* ─── KPI grid ─── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.kpi-card {
  background: linear-gradient(135deg, #1b2a4a, #24345a);
  border: 1px solid #2a3a5c;
  border-radius: 10px;
  padding: 18px 20px;
  text-align: center;
}
.kpi-card .label { font-size: .75rem; color: #6a7a9a; letter-spacing: .5px; }
.kpi-card .value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #c8a951;
  margin-top: 6px;
}
.kpi-card .value.green { color: #6fcf97; }
.kpi-card .value.red { color: #e07070; }
.kpi-card .value.warn { color: #e0a04a; }

/* ─── Chart（趨勢柱狀圖）─── */
.chart { display: flex; align-items: flex-end; gap: 5px; height: 180px; padding-top: 8px; overflow-x: auto; }
.chart-col { flex: 1; min-width: 26px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.chart-bar { border-radius: 4px 4px 0 0; width: 62%; min-height: 2px; }
.chart-bar.inc { background: linear-gradient(180deg, #6fcf97, #3d9b6a); }
.chart-bar.exp { background: linear-gradient(180deg, #e07070, #b04a4a); }
.chart-label { font-size: .62rem; color: #6a7a9a; margin-top: 5px; white-space: nowrap; }
.chart-legend { display: flex; gap: 16px; margin-top: 10px; font-size: .78rem; color: #8a9aba; }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg::before { content: ""; width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lg-inc::before { background: #3d9b6a; }
.lg-exp::before { background: #b04a4a; }

/* ─── Forms ─── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: .75rem; color: #8a9aba; font-weight: 500; }
.form-group input, .form-group select, .nlp-input, .search-input {
  background: #0f1a30;
  border: 1px solid #2a3a5c;
  border-radius: 6px;
  padding: 9px 12px;
  color: #e0e0e0;
  font-size: .9rem;
  transition: border-color .2s;
  width: 100%;
}
.form-group input:focus, .form-group select:focus, .nlp-input:focus, .search-input:focus {
  border-color: #c8a951;
  outline: none;
  box-shadow: 0 0 0 3px rgba(200,169,81,.12);
}
.form-group input::placeholder, .nlp-input::placeholder, .search-input::placeholder { color: #4a5a7a; }
.form-group select option { background: #0f1a30; color: #e0e0e0; }
.form-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .2s;
  text-decoration: none;
}
.btn-gold {
  background: linear-gradient(135deg, #c8a951, #d4b865);
  color: #0f1a30;
}
.btn-gold:hover { background: linear-gradient(135deg, #d4b865, #e0c878); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(200,169,81,.3); }
.btn-outline {
  background: transparent;
  border: 1px solid #2a3a5c;
  color: #8a9aba;
}
.btn-outline:hover { border-color: #c8a951; color: #c8a951; }
.btn-danger {
  background: transparent;
  border: 1px solid #5c2a3a;
  color: #cc5555;
}
.btn-danger:hover { background: rgba(204,85,85,.1); }
.btn-mic { background: linear-gradient(135deg, #c8a951, #d4b865); color: #0f1a30; font-size: 1.05rem; padding: 8px 16px; }
.btn-mic.listening { background: #b04a4a; color: #fff; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.btn-sm { padding: 5px 12px; font-size: .75rem; }

/* ─── NLP 預覽 ─── */
.nlp-row { display: flex; gap: 10px; flex-wrap: wrap; }
.nlp-input { flex: 1; min-width: 240px; font-size: .95rem; }
.nlp-preview {
  margin-top: 14px;
  background: rgba(200,169,81,.06);
  border: 1px solid rgba(200,169,81,.3);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: .88rem;
}
.nlp-preview .pv-line { margin: 3px 0; color: #c8d4ea; }
.nlp-preview .pv-tag {
  display: inline-block;
  background: #c8a951;
  color: #0f1a30;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: .7rem;
  font-weight: 700;
  margin-right: 7px;
}
.nlp-preview .pv-actions { margin-top: 10px; display: flex; gap: 8px; }

/* ─── Toolbar & search ─── */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.toolbar select, .toolbar .btn { flex-shrink: 0; }
.toolbar select {
  background: #0f1a30; border: 1px solid #2a3a5c; border-radius: 6px;
  padding: 8px 10px; color: #e0e0e0; font-size: .85rem;
}
.search-row { margin-bottom: 14px; }

/* ─── Records list ─── */
.rec-list { display: flex; flex-direction: column; gap: 8px; }
.rec-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid #2a3a5c;
  border-radius: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,.02);
}
.rec-item:hover { border-color: rgba(200,169,81,.4); }
.rec-item .d { font-size: .75rem; color: #6a7a9a; min-width: 82px; }
.rec-item .t { font-size: .7rem; font-weight: 700; border-radius: 4px; padding: 3px 8px; }
.rec-item .t.exp { background: rgba(224,112,112,.15); color: #e07070; }
.rec-item .t.inc { background: rgba(111,207,151,.15); color: #6fcf97; }
.rec-item .c { font-size: .7rem; background: rgba(200,169,81,.12); border-radius: 4px; padding: 3px 8px; color: #c8a951; }
.rec-item .desc { flex: 1; min-width: 130px; font-size: .86rem; color: #e0e0e0; }
.rec-item .sup, .rec-item .pay { font-size: .72rem; color: #6a7a9a; }
.rec-item .amt { font-size: .95rem; font-weight: 700; min-width: 88px; text-align: right; }
.rec-item .amt.exp { color: #e07070; }
.rec-item .amt.inc { color: #6fcf97; }
.rec-del { border: 1px solid #5c2a3a; background: transparent; color: #cc5555; border-radius: 5px; padding: 5px 10px; cursor: pointer; font-size: .72rem; transition: background .2s; }
.rec-del:hover { background: rgba(204,85,85,.12); }
.rec-del.bk-btn { border-color: #2a3a5c; color: #c8a951; }
.rec-del.bk-btn:hover { background: rgba(200,169,81,.08); }

/* ─── Pager ─── */
.pager { display: flex; align-items: center; gap: 14px; justify-content: center; margin-top: 16px; font-size: .8rem; color: #8a9aba; }
.pager .btn:disabled { opacity: .4; cursor: default; }

/* ─── Empty state ─── */
.empty-state { text-align: center; padding: 30px 20px; color: #4a5a7a; font-size: .85rem; }

/* ─── Bar list（統計）─── */
.bar-list { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-name { width: 108px; font-size: .8rem; color: #8a9aba; flex-shrink: 0; }
.bar-track { flex: 1; background: #0f1a30; border-radius: 5px; height: 24px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #c8a951, #e0c878); min-width: 4px; }
.bar-fill.green { background: linear-gradient(90deg, #3d9b6a, #6fcf97); }
.bar-fill.red { background: linear-gradient(90deg, #b04a4a, #e07070); }
.bar-val { width: 108px; text-align: right; font-size: .8rem; font-weight: 700; color: #e0e0e0; flex-shrink: 0; }
.bar-pct { width: 40px; text-align: right; font-size: .7rem; color: #6a7a9a; flex-shrink: 0; }

/* ─── Backup ─── */
.backup-status { display: flex; flex-direction: column; gap: 8px; font-size: .85rem; margin-bottom: 14px; color: #8a9aba; line-height: 1.6; }
.backup-status b { color: #c8a951; }

/* ─── 類別管理 ─── */
.cat-manage { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cat-col { border: 1px solid #2a3a5c; border-radius: 8px; padding: 14px; background: rgba(255,255,255,.02); }
.cat-col-title { font-size: .85rem; font-weight: 600; color: #c8a951; margin-bottom: 10px; }
.cat-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cat-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #0f1a30; border-radius: 6px; }
.cat-row .cat-name { flex: 1; font-size: .8rem; color: #e0e0e0; }
.cat-row .cat-del { border: 0; background: transparent; color: #cc5555; cursor: pointer; font-size: .85rem; padding: 2px 6px; border-radius: 4px; }
.cat-row .cat-del:hover { background: rgba(204,85,85,.15); }
.cat-add-row { display: flex; gap: 6px; }
.cat-add-row input {
  flex: 1; background: #0f1a30; border: 1px solid #2a3a5c; border-radius: 6px;
  padding: 7px 10px; color: #e0e0e0; font-size: .8rem;
}
.cat-add-row input:focus { border-color: #c8a951; outline: none; }

/* ─── Modal ─── */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(2px);
}
.modal-box {
  background: #1b2a4a;
  border: 1px solid #2a3a5c;
  border-radius: 12px;
  width: 90%;
  max-width: 520px;
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid #2a3a5c;
}
.modal-head h3 { color: #c8a951; font-size: 1rem; }
.modal-x { border: 0; background: transparent; color: #6a7a9a; font-size: 1rem; cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.modal-x:hover { color: #e0e0e0; background: rgba(255,255,255,.05); }
.modal-body { padding: 18px 20px; font-size: .88rem; line-height: 1.7; color: #c8d4ea; }
.modal-body .m-line { margin: 4px 0; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px 18px; border-top: 1px solid #2a3a5c; }

/* ─── About ─── */
.about p { margin: 7px 0; font-size: .83rem; line-height: 1.7; color: #8a9aba; }
.about .warn-text { color: #e0a04a; }
.about .ver-text { margin-top: 14px; font-size: .7rem; color: #4a5a7a; }

/* ─── 手機 ─── */
@media (max-width: 760px) {
  .app-layout { flex-direction: column; }
  .sidebar { width: 100% !important; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #2a3a5c; align-items: center; }
  .sidebar-brand { border-bottom: 0; padding: 10px 14px; flex-shrink: 0; }
  .sidebar-nav { flex: 1; display: flex; overflow-x: auto; padding: 4px; }
  .nav-item { padding: 8px 12px; border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
  .nav-item.active { border-left: 0; border-bottom-color: #c8a951; }
  .sidebar-foot { display: none; }
  .sidebar-resizer { display: none; }
  .content { padding: 16px 14px 70px; }
  .topbar { padding: 10px 16px; }
  .topbar h2 { font-size: .9rem; }
  .cat-manage { grid-template-columns: 1fr; }
  .kpi-card .value { font-size: 1.2rem; }
  .chart { height: 140px; }
}

/* ─── 開單（v0.3）─── */
.bill-type-row { display: flex; gap: 12px; margin-bottom: 14px; }
.bill-type {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #2a3a5c; border-radius: 20px;
  padding: 8px 16px; font-size: .85rem; color: #8a9aba;
  cursor: pointer; transition: all .2s;
}
.bill-type:has(input:checked) { border-color: #c8a951; color: #c8a951; background: rgba(200,169,81,.08); }
.bill-type input { accent-color: #c8a951; cursor: pointer; }
.chk-row { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: #8a9aba; cursor: pointer; }
.chk-row input { accent-color: #c8a951; cursor: pointer; }

/* 收據／報價單 A4 紙張預覽（白紙黑字，與深色界面形成對比） */
.bill-sheet {
  background: #ffffff;
  color: #000000;
  border: 1px solid #6a7a9a;
  border-radius: 4px;
  padding: 30px 34px;
  max-width: 620px;
  margin: 0 auto;
  font-family: "Microsoft JhengHei", "PMingLiU", "Noto Sans TC", sans-serif;
  line-height: 1.55;
}
.bill-sheet * { color: #000000; }
.bs-head { text-align: center; margin-bottom: 22px; }
.bs-company { font-size: 1.5rem; font-weight: 800; letter-spacing: 2px; }
.bs-sub { font-size: .72rem; color: #333 !important; margin-top: 2px; }
.bs-title {
  text-align: center; font-size: 1.55rem; font-weight: 800;
  letter-spacing: 12px; margin-bottom: 18px;
  border-bottom: 2px solid #333; padding-bottom: 10px;
}
.bs-meta { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: 10px; }
.bs-row { display: flex; gap: 8px; font-size: .9rem; padding: 5px 0; }
.bs-row .k { flex-shrink: 0; color: #333 !important; }
.bs-row .v { flex: 1; }
.bs-amount-wrap { border-top: 1px solid #999; border-bottom: 1px solid #999; margin: 12px 0; padding: 12px 0; }
.bs-amount { display: flex; justify-content: space-between; align-items: baseline; }
.bs-amount .lab { font-size: .85rem; }
.bs-amount .num { font-size: 1.7rem; font-weight: 800; }
.bs-cn { font-size: .78rem; color: #222 !important; margin-top: 6px; text-align: right; }
.bs-sign { display: flex; gap: 40px; margin-top: 34px; font-size: .82rem; }
.bs-sign .sig { flex: 1; border-top: 1px solid #555; padding-top: 6px; text-align: center; color: #333 !important; }
.bs-foot { text-align: center; margin-top: 30px; font-size: .8rem; color: #333 !important; }
/* 粮單（薪金單）明細表格 */
.bs-salary-table { border: 1px solid #999; margin: 12px 0; }
.bs-st-row { display: flex; justify-content: space-between; padding: 8px 10px; font-size: .88rem; border-bottom: 1px dashed #bbb; }
.bs-st-row:last-child { border-bottom: 0; }
.bs-st-row span:first-child { color: #333 !important; }
.bs-st-row span:last-child { font-weight: 600; text-align: right; }

@media print {
  @page { size: A4; margin: 8mm; }
  body { background: #ffffff !important; }
  body * { visibility: hidden !important; }
  #billPreview, #billPreview * { visibility: visible !important; }
  /* 唔打印嘅區域徹底隱藏（display:none 唔佔位）——唔會再逼出第 2 頁空白 */
  .sidebar, .sidebar-resizer, .topbar,
  .content > section:not(#bill),
  #bill .page-title,
  #bill .card:not(:has(#billPreview)),
  #bill .card #billPrevEmpty,
  #bill .card #billActions { display: none !important; }
  /* 單據卡：淨低佢一個，佔滿一頁 */
  #bill .card:has(#billPreview) {
    display: block !important;
    background: #ffffff !important;
    border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important; padding: 0 !important;
  }
  #billPreview {
    display: block !important;
    position: static !important;
    width: 100% !important; max-width: none !important;
    margin: 0 !important; border: 0 !important; border-radius: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }
  .bill-sheet { border: 0 !important; }
}
@media (max-width: 760px) {
  .bill-sheet { padding: 18px 16px; }
  .bs-sign { flex-direction: column; gap: 14px; }
}

/* ─── 開單項目明細（可加可減） ─── */
.bill-lines-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 10px; gap: 10px; }
.form-section-label { font-size: .88rem; font-weight: 600; color: #c8a951; }
.btn-sm { padding: 6px 12px; font-size: .75rem; }
.bill-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.bill-line { display: flex; gap: 8px; align-items: center; }
.bill-line .bl-name { flex: 1; min-width: 140px; }
.bill-line .bl-qty { width: 64px; }
.bill-line .bl-price { width: 100px; }
.bill-line input {
  background: #0f1a30; border: 1px solid #2a3a5c; border-radius: 6px;
  padding: 8px 10px; color: #e0e0e0; font-size: .82rem;
}
.bill-line input:focus { border-color: #c8a951; outline: none; }
.bill-line .bl-sub { width: 92px; text-align: right; font-size: .82rem; color: #c8a951; font-weight: 600; flex-shrink: 0; }
.bill-line .bl-del {
  border: 1px solid #5c2a3a; background: transparent; color: #cc5555;
  border-radius: 5px; width: 30px; height: 34px; cursor: pointer; flex-shrink: 0; font-size: .75rem;
}
.bill-line .bl-del:hover { background: rgba(204,85,85,.12); }
.amount-group { margin-bottom: 12px; }
.amount-group input { font-size: 1.05rem; font-weight: 700; color: #c8a951; }
.amount-group input[readonly] { background: rgba(200,169,81,.06); border-color: rgba(200,169,81,.35); }
.hint-text { font-size: .72rem; color: #6a7a9a; }

/* 收據／報價單內嘅項目明細行 */
.bs-items { margin: 10px 0 4px; }
.bs-items-head, .bs-items-row { display: flex; gap: 10px; font-size: .82rem; }
.bs-items-head { font-weight: 700; border-bottom: 2px solid #555; padding: 4px 0; }
.bs-items-row { border-bottom: 1px dotted #aaa; padding: 4px 0; }
.bs-items-head span:nth-child(1), .bs-items-row span:nth-child(1) { flex: 3; }
.bs-items-head span:nth-child(2), .bs-items-row span:nth-child(2) { flex: 1; text-align: right; }
.bs-items-head span:nth-child(3), .bs-items-row span:nth-child(3) { flex: 2; text-align: right; }
.bs-items-head span:nth-child(4), .bs-items-row span:nth-child(4) { flex: 2; text-align: right; }
@media (max-width: 760px) {
  .bill-lines-head { flex-direction: column; align-items: flex-start; }
  .bill-line { flex-wrap: wrap; }
  .bill-line .bl-name { min-width: 100%; order: -1; }
  .bill-line .bl-qty, .bill-line .bl-price { flex: 1; }
}r
.input-with-btn{display:flex;gap:6px;align-items:center;}r
.input-with-btn input{flex:1;min-width:0;}r
.dl-btn{padding:8px 12px;border:1px solid #2a3a5c;border-radius:6px;background:#0f1a30;color:#c8a951;cursor:pointer;font-size:.8rem;flex-shrink:0;}r
.dl-btn:hover{border-color:#c8a951;background:rgba(200,169,81,.08);}r
.hint-text{font-size:.72rem;color:#6a7a9a;margin-top:2px;}r



.name-arrow{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNCcgaGVpZ2h0PSc4Jz48cGF0aCBkPSdNMSAxbDYgNiA2LTYnIHN0cm9rZT0nIzkwYTRjOCcgc3Ryb2tlLXdpZHRoPScyJyBmaWxsPSdub25lJy8+PC9zdmc+");background-repeat:no-repeat;background-position:right 12px center;background-size:14px 8px;padding-right:38px;cursor:pointer;-webkit-appearance:none;appearance:none;}

.name-arrow-wrap{position:relative;display:block;}
.name-arrow-wrap input{padding-right:38px;-webkit-appearance:none;appearance:none;cursor:pointer;}
.name-arrow-wrap::after{content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#90a4c8;font-size:14px;pointer-events:none;}

/* 電話可加可減（上圖樣式：每行輸入框+紅✕、底部新電話+➤加） */
.tel-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.tel-row input{flex:1;min-width:0}
.tel-del{width:34px;min-height:34px;border:1px solid #c0392b;border-radius:6px;background:rgba(192,57,43,.12);color:#e74c3c;font-size:.85rem;cursor:pointer;flex-shrink:0}
.tel-del:hover{background:#c0392b;color:#fff}
.tel-add-row{display:flex;gap:8px;margin-top:8px;align-items:center}
.tel-add-row .tel-new{flex:1;min-width:0}

/* 出糧 MPF 行 */
.mpf-line{margin-top:8px;font-size:.78rem;color:#90a4c8}
.mpf-line b{color:#c8a951}
/* 月歷圖標：深色主題下原黑色 → 白色 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:invert(1);cursor:pointer}

/* ─── 平板／觸屏優化（2026-09-08） ─── */
/* 觸屏粗指針（手指/觸控筆）加大按鈕同輸入區，防 iOS 聚焦自動縮放 */
@media (pointer: coarse) {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; }
  .btn, .btn-outline, .btn-danger, .btn-gold, .btn-mic { min-height: 44px; padding: 10px 18px; font-size: .95rem; }
  .btn-sm { min-height: 40px; padding: 8px 14px; font-size: .82rem; }
  .rec-del { min-height: 38px; padding: 7px 12px; font-size: .8rem; }
  input, select, textarea { font-size: 16px !important; }  /* 16px 以上先唔會喺 iOS 聚焦時自動 zoom */
  .search-input { min-height: 42px; }
  .nav-item { padding: 15px 20px; font-size: .95rem; }
  .nav-item .icon { font-size: 1.3rem; width: 30px; }
  .form-group label { font-size: .85rem; }
  .sidebar-resizer { width: 12px; }  /* 觸屏把手加粗，容易揸 */
  .sidebar-resizer:hover, .sidebar-resizer:active { background: rgba(200,169,81,.35); }
  .rec-item { padding: 14px 14px; gap: 8px; }
  .kpi-card { padding: 14px; }
  .pager button { min-height: 40px; padding: 8px 14px; }
  .page-title { font-size: 1.15rem; }
}
/* 觸屏禁長按彈系統選單（導航/列表操作區） */
@media (pointer: coarse) {
  .nav-item, .btn, .btn-outline, .btn-danger, .rec-del, .toolbar button { -webkit-touch-callout: none; }
}