:root{
  --primary:#2563eb;--primary-dark:#1d4ed8;--primary-glow:rgba(37,99,235,.18);
  --secondary:#10b981;--orange:#f59e0b;--danger:#ef4444;
  --dark:#0f172a;--dark2:#1e293b;--bg:#f1f5f9;--bg2:#fff;
  --border:#e2e8f0;--text:#1e293b;--muted:#64748b;
  --purple:#7c3aed;--teal:#0d9488;--indigo:#4f46e5;
  --nav-h:0px;
  --radius:10px;--radius-lg:14px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow-md:0 4px 16px rgba(0,0,0,.1);
  --shadow-lg:0 10px 40px rgba(0,0,0,.14);
}
*{box-sizing:border-box;}
body{font-family:"Microsoft JhengHei","PingFang TC",sans-serif;margin:0;background:var(--bg);color:var(--text);overflow:hidden;}
/* ── NAV ── */
nav{
  background:linear-gradient(90deg,var(--dark) 0%,var(--dark2) 100%);
  padding:0 14px;display:flex;gap:2px;height:var(--nav-h);align-items:center;
  box-shadow:0 2px 12px rgba(0,0,0,.25);position:relative;z-index:100;
}
nav::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);}
nav button{
  background:none;border:none;color:rgba(255,255,255,.55);
  padding:7px 11px;cursor:pointer;border-radius:8px;
  font-weight:600;font-size:12px;transition:all .18s;white-space:nowrap;
  position:relative;letter-spacing:.01em;
}
nav button:hover{background:rgba(255,255,255,.08);color:#fff;}
nav button.active{
  color:#fff;background:var(--primary);
  box-shadow:0 2px 10px rgba(37,99,235,.5);
}
#nav-user-info{
  margin-left:auto;color:rgba(255,255,255,.5);font-size:12px;
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
#nav-user-info span{
  color:#fff;font-weight:700;
  background:rgba(255,255,255,.1);padding:3px 10px;border-radius:20px;font-size:12px;
}
.body-staff .cost-field{display:none !important;}
.body-staff #prod-cost-th,.body-staff #prod-margin-th{display:none !important;}
.body-staff #p-cost,.body-staff #p-margin{visibility:hidden;height:0;margin:0;padding:0;overflow:hidden;}
.body-staff label[for=p-cost],.body-staff label[for=p-margin]{display:none !important;}
.body-staff #modal-edit-cost{display:none !important;}
.body-staff .body-staff-hide{display:none !important;}

.page{display:none;padding:14px;height:calc(100vh - var(--nav-h));overflow-y:auto;}
/* ── 行事曆週視圖仿工程師行程 ── */
.cal-week-col-hdr {
  text-align: center;
  padding: 8px 4px 6px;
  cursor: pointer;
  transition: background .12s;
  border-left: 1px solid #eef0f3;
}
.cal-week-col-hdr:hover { background: #f0f7ff; }
.cal-week-col-hdr.today-hdr { background: #e8f3ff; }
.cal-week-dow {
  font-size: 11px;
  color: #718096;
  font-weight: 700;
  letter-spacing: .02em;
}
.cal-week-date-num {
  font-size: 22px;
  font-weight: 900;
  color: #2d3748;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px auto 0;
  transition: background .15s;
}
.cal-week-date-num.today-circle {
  background: #4a90d9;
  color: #fff;
  box-shadow: 0 3px 10px rgba(74,144,217,.4);
}
.cal-week-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f59e0b;
  margin: 3px auto 0;
  visibility: hidden;
}
.cal-week-dot.has { visibility: visible; }
.cal-week-time-label {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 500;
  padding-right: 4px;
  text-align: right;
  width: 100%;
  display: block;
}

.page.active{display:block;}
#page-calendar.active{display:flex!important;flex-direction:column;padding:0!important;overflow:hidden!important;}
h2{margin:0 0 14px;font-size:19px;}
/* ── CARD ── */
.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.form-box{padding:14px;margin-bottom:12px;}
.toolbar{display:flex;gap:6px;align-items:center;margin-bottom:9px;background:#eef2f7;padding:9px;border-radius:var(--radius);flex-wrap:wrap;}
/* ── TABLE ── */
table{width:100%;border-collapse:collapse;background:#fff;font-size:13px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
th,td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle;}
th{background:#f8fafc;position:sticky;top:0;z-index:1;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;}
tr:hover td{background:#f8fbff;}
tr:last-child td{border-bottom:none;}
/* ── INPUTS ── */
input,select,textarea{
  width:100%;padding:7px 10px;border:1.5px solid var(--border);
  border-radius:var(--radius);margin-bottom:6px;font-size:13px;
  background:#fff;transition:all .18s;outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow);
}
textarea{resize:vertical;min-height:48px;}
label.lbl{font-size:11px;color:var(--muted);margin-bottom:2px;display:block;margin-top:3px;font-weight:600;letter-spacing:.03em;}
/* ── BUTTONS ── */
.btn{
  padding:7px 14px;cursor:pointer;border:none;border-radius:8px;
  font-weight:700;color:#fff;margin:2px;transition:all .18s;font-size:12px;
  letter-spacing:.01em;position:relative;overflow:hidden;
}
.btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.15);}
.btn:active{transform:translateY(0);opacity:1;}
.btn-blue{background:linear-gradient(135deg,var(--primary),var(--primary-dark));}
.btn-green{background:linear-gradient(135deg,#10b981,#059669);}
.btn-orange{background:linear-gradient(135deg,#f59e0b,#d97706);}
.btn-red{background:linear-gradient(135deg,#ef4444,#dc2626);}
.btn-gray{background:linear-gradient(135deg,#64748b,#475569);}
.btn-purple{background:linear-gradient(135deg,#7c3aed,#6d28d9);}
.btn-teal{background:linear-gradient(135deg,#0d9488,#0f766e);}
.btn-dark{background:linear-gradient(135deg,#1e293b,#0f172a);}
.btn-indigo{background:linear-gradient(135deg,#4f46e5,#4338ca);}
.btn-sm{padding:4px 10px;font-size:11px;border-radius:7px;}
.btn-lg{padding:12px 22px;font-size:15px;border-radius:10px;}
/* Checkout */
.checkout-layout{display:flex;gap:10px;height:100%;overflow:hidden;}
.double-sidebar{width:190px;flex-shrink:0;display:flex;flex-direction:column;gap:7px;overflow-y:auto;}
.accordion-wrap{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.accordion-header{background:#f8fafc;padding:10px;cursor:pointer;font-weight:700;text-align:center;border-bottom:1px solid var(--border);user-select:none;font-size:12px;transition:.15s;}
.accordion-header:hover{background:#eef2f7;}
.accordion-body{display:none;padding:6px;max-height:280px;overflow-y:auto;}
.accordion-body.open{display:block;}
.cat-btn{display:block;width:100%;padding:7px 8px;margin-bottom:3px;background:#f4f7f8;border:1.5px solid transparent;border-radius:8px;cursor:pointer;font-size:11px;text-align:center;transition:.15s;font-weight:600;}
.cat-btn:hover{background:#e8f4fe;border-color:rgba(37,99,235,.2);}
.cat-btn.sel-p{background:var(--primary);color:#fff;border-color:var(--primary);}
.cat-btn.sel-s{background:var(--orange);color:#fff;border-color:var(--orange);}
/* ── LOGIN ── */
#login-screen{
  position:fixed;inset:0;background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 50%,#0f172a 100%);
  display:none;align-items:center;justify-content:center;z-index:9999;
}
#login-screen.show{display:flex;}
.login-box{
  background:#fff;border-radius:20px;padding:40px 36px;
  width:100%;max-width:380px;box-shadow:0 25px 60px rgba(0,0,0,.4);
  text-align:center;
}
.login-box h1{font-size:22px;font-weight:800;margin:8px 0 4px;color:#0f172a;}
.login-box p{font-size:13px;color:#64748b;margin:0 0 24px;}
.login-box input{text-align:center;font-size:15px;padding:11px 14px;margin-bottom:10px;}
.login-box .btn-login{
  width:100%;padding:12px;font-size:15px;font-weight:800;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  border:none;border-radius:10px;color:#fff;cursor:pointer;
  transition:all .18s;margin-top:4px;
}
.login-box .btn-login:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(37,99,235,.4);}
#login-error{color:#ef4444;font-size:12px;min-height:18px;margin-top:6px;display:none;}
button.hdr-cust-btn.hdr-input-btn{display:flex!important;align-items:center!important;justify-content:flex-start!important;flex:0 0 28px!important;min-height:28px!important;max-height:28px!important;box-sizing:border-box!important;}
.cart-header-bar .hdr-field{align-items:stretch!important;}
.cart-header-bar .hdr-field select,.cart-header-bar .hdr-field input{margin-bottom:0!important;}
#display-cust{line-height:26px!important;display:inline-block!important;}

/* ══ 手機版響應式設計 (max-width: 768px) ══ */
@media (max-width: 768px) {
  /* 結帳頁：左右改為上下 */
  .checkout-layout {
    flex-direction: column !important;
    height: auto !important;
    overflow: auto !important;
  }
  /* 商品區 */
  .main-area {
    height: 60vh !important;
    overflow-y: auto !important;
    min-height: 300px;
  }
  /* 購物車區 */
  .cart {
    height: 40vh !important;
    min-height: 250px;
  }
  /* 頂部欄位縮小 */
  .cart-header-bar {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .cart-header-bar .hdr-field {
    flex: 1 1 45% !important;
    min-width: 120px !important;
  }
  /* Modal全螢幕 */
  .modal-box {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: 5vh auto !important;
  }
  /* 商品格線縮小 */
  #p-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  /* 隱藏桌面版側邊分類 */
  .cat-sidebar {
    display: none !important;
  }
  /* 頂部按鈕列縮小 */
  .topbar {
    padding: 4px 8px !important;
  }
  .hdr-pay-btn {
    padding: 0 8px !important;
    font-size: 10px !important;
  }
  /* 購物車按鈕列 */
  .action-btn-main {
    font-size: 12px !important;
    padding: 7px 0 !important;
  }
  /* 表格改為卡片 */
  .history-card {
    font-size: 12px !important;
  }
  /* grid-2/3 改為單欄 */
  .grid-2, .grid-3 {
    grid-template-columns: 1fr !important;
  }
  /* 抽屜選單寬度 */
  #side-drawer {
    width: 85vw !important;
  }
  /* 報表工具列換行 */
  .toolbar {
    flex-wrap: wrap !important;
  }
  /* 商品選擇器 */
  #modal-product-picker .modal-box {
    width: 98vw !important;
    height: 90vh !important;
  }
  #picker-cat-panel {
    width: 80px !important;
    min-width: 80px !important;
  }
  /* 結帳頁購物車切換按鈕（手機版顯示） */
  #mobile-cart-toggle {
    display: flex !important;
  }
}

/* 手機版購物車切換按鈕（預設隱藏） */
#mobile-cart-toggle {
  display: none;
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 500;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(37,99,235,.4);
  align-items: center;
  justify-content: center;
}
</style>

/* ══ 結帳確認Modal ══ */
#modal-checkout-confirm {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 10900 !important;
  background: rgba(0,0,0,.5) !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
  padding: 20px !important;
}
.cc-pay-btn {
  background:#fff;border:1.5px solid #e0cfc0;border-radius:8px;
  color:#5a3e28;font-size:14px;font-weight:600;padding:8px 16px;cursor:pointer;
  transition:all .15s;
}
.cc-pay-btn:hover { background:#faf5f0; }
.cc-pay-sel { background:#c8956c !important;border-color:#c8956c !important;color:#fff !important;font-weight:700 !important; }
.cc-quick-btn {
  background:#f5ede4;border:none;border-radius:8px;
  color:#8B6A4A;font-size:14px;font-weight:700;padding:7px 14px;cursor:pointer;
  transition:background .12s;
}
.cc-quick-btn:hover { background:#e8d5c0; }

.cc-inv-btn {
  background:#fff;border:1.5px solid #e0cfc0;border-radius:8px;
  color:#8B6A4A;font-size:14px;font-weight:600;padding:7px 14px;cursor:pointer;
  transition:all .15s;
}
.cc-inv-btn:hover { background:#faf5f0; }
.cc-inv-sel { background:#e8f4ff !important;border-color:#93c5fd !important;color:#1d4ed8 !important;font-weight:700 !important; }