:root {
  --brand: #0d6efd;
  --brand-dark: #0a58ca;
  --surface: #f4f6fb;
  --card-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
  --radius: 14px;
  --text-muted: #64748b;
}

body {
  font-family: "Segoe UI", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
  background: linear-gradient(160deg, #eef2ff 0%, #f8fafc 45%, #fff 100%);
  min-height: 100vh;
  color: #0f172a;
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 手機：確保傳統 collapse 選單未展開時不佔版面（雙保險） */
@media (max-width: 991.98px) {
  .navbar-expand-lg .navbar-collapse.collapse:not(.show) {
    display: none !important;
  }
}

/* 手機 offcanvas 選單寬度 */
@media (max-width: 991.98px) {
  .navbar .offcanvas.offcanvas-end {
    width: min(320px, 100vw - 1rem);
  }
}

/* 桌面版導覽：避免「線上選購」「購物車」「會員中心」與按鈕被擠成直向斷字 */
@media (min-width: 992px) {
  .navbar-expand-lg > .container {
    flex-wrap: nowrap;
  }
  .navbar-expand-lg .offcanvas {
    min-width: 0;
  }
  .navbar-expand-lg .offcanvas .offcanvas-body {
    flex-wrap: nowrap !important;
    justify-content: flex-end;
  }
  .navbar-expand-lg .navbar-nav {
    flex-wrap: nowrap !important;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    white-space: nowrap;
  }
  .navbar-expand-lg .offcanvas .offcanvas-body .d-lg-flex,
  .navbar-expand-lg .offcanvas .offcanvas-body .d-grid {
    flex-wrap: nowrap !important;
  }
  .navbar-expand-lg .offcanvas .offcanvas-body .btn {
    white-space: nowrap;
  }
}

/* 購物車：窄螢幕保留最小寬度，以橫向捲動取代欄位被壓扁 */
.table-cart-wrap .table-cart-products {
  min-width: 20rem;
  table-layout: auto;
}
@media (max-width: 575.98px) {
  .table-cart-wrap .table-cart-products {
    min-width: 22.5rem;
  }
}

/* 品名：中文不要用 break-word（會在字中間硬切），改在詞間換行 */
.table-cart-products .cart-col-name {
  min-width: 5rem;
  max-width: 11rem;
  word-break: normal;
  overflow-wrap: break-word;
}
@media (min-width: 576px) {
  .table-cart-products .cart-col-name {
    max-width: 16rem;
  }
}
@media (min-width: 992px) {
  .table-cart-products .cart-col-name {
    max-width: 22rem;
  }
}

/* 單價／小計：保留金額一行 */
.table-cart-products .cart-col-money {
  white-space: nowrap;
  min-width: 4.75rem;
}

/* 數量：勿用 width:1%（窄螢幕會把欄壓到變直向）；強制橫向 input-group */
.table-cart-products .cart-col-qty {
  width: auto;
  min-width: 7.75rem;
  max-width: 10rem;
  white-space: nowrap;
  vertical-align: middle;
}
.table-cart-products .cart-qty-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  min-width: 7.25rem;
  max-width: 10rem;
}
.table-cart-products .cart-qty-group > .btn {
  flex: 0 0 auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.table-cart-products .cart-qty-group > .cart-qty-input {
  flex: 1 1 auto;
  min-width: 2.25rem;
  max-width: 4rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.table-cart-products .cart-col-actions {
  width: auto;
  min-width: 3.25rem;
  white-space: nowrap;
  vertical-align: middle;
}

/* 會員中心：訂單列表窄螢幕以橫向捲動維持欄內不斷字 */
.table-member-orders-wrap {
  -webkit-overflow-scrolling: touch;
}
.table-member-orders {
  /* 略大於各欄 min-width 總和，確保窄螢幕先出現橫向捲動而非欄內斷字 */
  min-width: 30rem;
  width: 100%;
  table-layout: auto;
}
.table-member-orders th,
.table-member-orders td {
  vertical-align: middle;
}
.table-member-orders .member-col-id {
  white-space: nowrap;
  min-width: 3.25rem;
}
.table-member-orders .member-col-money {
  white-space: nowrap;
  min-width: 7rem;
  font-variant-numeric: tabular-nums;
}
.table-member-orders .member-col-status {
  white-space: nowrap;
  min-width: 4.5rem;
}
.table-member-orders .member-col-time {
  white-space: nowrap;
  min-width: 11.5rem;
  font-variant-numeric: tabular-nums;
}
.table-member-orders .member-col-action {
  white-space: nowrap;
  width: 1%;
  padding-left: 0.5rem;
}
.table-member-orders .member-col-action .btn {
  min-width: 3.5rem;
  padding-left: 0.65rem;
  padding-right: 0.65rem;
}

/* 訂單明細 modal 內表格 */
.table-order-detail-wrap {
  -webkit-overflow-scrolling: touch;
}
.table-order-detail {
  min-width: 16rem;
}
.table-order-detail td:first-child {
  word-break: normal;
  overflow-wrap: break-word;
  max-width: 12rem;
}
@media (min-width: 576px) {
  .table-order-detail td:first-child {
    max-width: none;
  }
}

.hero-panel {
  border-radius: var(--radius);
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%);
  color: #fff;
  box-shadow: var(--card-shadow);
  padding: 2.5rem 2rem;
}

.hero-panel h1 {
  font-weight: 700;
}

.card-elevated {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  background: #fff;
}

.card-elevated .card-header {
  background: transparent;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 600;
}

.btn-brand {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 0.55rem 1.25rem;
  border-radius: 10px;
}

.btn-brand:hover {
  color: #fff;
  filter: brightness(1.05);
}

.form-control:focus,
.form-select:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}

.footer-mini {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* 會員中心頂部：會員編號 QR */
.member-qr-banner .member-qr-card {
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--card-shadow);
  border: 1px solid #e2e8f0;
  padding: 1rem 1.25rem;
}
.member-qr-banner #memberQrHost img,
.member-qr-banner #memberQrHost canvas {
  display: block;
  margin: 0 auto;
}
.member-qr-banner .member-qr-img {
  max-width: 168px;
  height: auto;
}

/* Admin shell */
.admin-shell {
  min-height: 100vh;
  background: #0f172a;
}

.admin-sidebar {
  width: 260px;
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  color: #e2e8f0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 1.25rem 0;
  z-index: 1030;
  border-right: 1px solid rgba(148, 163, 184, 0.15);
}

.admin-sidebar .brand {
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0 1.25rem 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  margin-bottom: 0.75rem;
}

.admin-sidebar .nav-link {
  color: #cbd5e1;
  padding: 0.65rem 1.25rem;
  border-radius: 0;
  border-left: 3px solid transparent;
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
  color: #fff;
  background: rgba(59, 130, 246, 0.12);
  border-left-color: #3b82f6;
}

.admin-main {
  margin-left: 260px;
  padding: 1.5rem 2rem 3rem;
  background: #f1f5f9;
  min-height: 100vh;
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.table-admin thead {
  background: #e2e8f0;
  font-size: 0.875rem;
}

.product-row-draggable {
  cursor: move;
}

.product-row-draggable .product-drag-handle {
  cursor: grab;
}

.product-row-dragging {
  opacity: 0.55;
}

.product-row-drop-target {
  box-shadow: inset 0 3px 0 #3b82f6;
}

.badge-soft {
  font-weight: 500;
  padding: 0.35em 0.65em;
}

.product-upload-zone {
  border: 2px dashed #cbd5e1;
  border-radius: var(--radius);
  background: #f8fafc;
  min-height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.product-upload-zone:hover,
.product-upload-zone--active {
  border-color: var(--brand);
  background: #eff6ff;
}

.product-upload-hint {
  text-align: center;
  line-height: 1.5;
}

.product-upload-preview-wrap {
  width: 100%;
  text-align: center;
}

.product-upload-preview {
  max-width: 100%;
  max-height: 12rem;
  object-fit: contain;
  border-radius: 8px;
}

@media (max-width: 991.98px) {
  .admin-sidebar {
    position: relative;
    width: 100%;
    min-height: auto;
  }
  .admin-main {
    margin-left: 0;
  }
}