/* 簡易管理頁樣式 */
.mg-container { max-width: 1280px; margin: 24px auto; padding: 16px; }
.mg-container.wide { max-width: none; margin-left: 12px; margin-right: 12px; }
@media (min-width: 1680px) { .mg-container.wide { max-width: none; } }
.mg-actions { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; overflow-x: auto; white-space: nowrap; }
.mg-actions .search-box { position: relative; display: inline-flex; align-items: center; }
.mg-actions .search-box input[type="text"] { padding-right: 28px; }
.mg-actions .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;
}
.mg-actions .search-clear:hover { background: #f3f4f6; color: #374151; }
.mg-actions .search-box input[type="text"]:not(:placeholder-shown) ~ .search-clear {
  display: inline-flex; align-items: center; justify-content: center;
}
.mg-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.mg-form label { display: flex; flex-direction: column; font-size: 14px; }
.mg-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mg-table th, .mg-table td { border-bottom: 1px solid #ddd; padding: 8px; text-align: left; }
.mg-table th { background: #f6f6f6; white-space: normal; word-break: break-word; overflow: visible; text-overflow: clip; }
.mg-table td { white-space: normal; word-break: break-word; overflow: visible; text-overflow: clip; vertical-align: top; }
.mg-badge { padding: 2px 6px; border-radius: 4px; background: #eee; }

/* 管理頁導覽 */
:root { --accent: #2563eb; }
.mg-nav { position: sticky; top: 0; background: #fff; border-bottom: 1px solid #e5e5e5; box-shadow: 0 1px 2px rgba(0,0,0,.04); z-index: 10; }
.mg-nav .mg-nav-inner { max-width: 1280px; margin: 0 auto; padding: 10px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: nowrap; }
/* Tab-style navigation items */
.mg-nav a { display: inline-block; padding: 10px 6px; border: none; border-radius: 0; text-decoration: none; color: #6b7280; background: transparent; font-weight: 600; position: relative; white-space: nowrap; flex-shrink: 0; }
/* underline indicator */
.mg-nav a { border-bottom: 3px solid transparent; }
.mg-nav a:hover { color: #111827; border-bottom-color: #f472b6; }
.mg-nav a.active, .mg-nav a[aria-current="page"] { color: #111827; border-bottom-color: var(--accent); }
.mg-nav .spacer { flex: 1; }
/* 初始權限隱藏：避免未授權導覽連結在載入時閃現 */
.mg-nav .mg-nav-inner a[href*="index.html"],
.mg-nav .mg-nav-inner a[href*="customers.html"],
.mg-nav .mg-nav-inner a[href*="customer_types.html"],
.mg-nav .mg-nav-inner a[href*="vendors.html"],
.mg-nav .mg-nav-inner a[href*="vendor_types.html"],
.mg-nav .mg-nav-inner a[href*="payments.html"],
.mg-nav .mg-nav-inner a[href*="order_statuses.html"],
.mg-nav .mg-nav-inner a[href*="users.html"],
.mg-nav .mg-nav-inner a[href*="permissions.html"],
.mg-nav .mg-nav-inner a[href*="reminders.html"],
.mg-nav .mg-nav-inner a[href*="pospal_products.html"],
.mg-nav .mg-nav-inner a[href*="pospal_customers.html"],
.mg-nav .mg-nav-inner a[href*="logs.html"],
.mg-nav .mg-nav-inner a[href*="maintenance.html"] {
  display: none;
}
/* --- modern table styles for order statuses --- */
.table-modern { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 12px; overflow: visible; box-shadow: 0 1px 3px rgba(0,0,0,0.06); table-layout: fixed; }
.table-modern.pospal-wide { width: 180%; }
.table-modern.pospal-wide th, .table-modern.pospal-wide td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 銀豹商品表：欄位重排後的定寬與對齊 */
.table-modern.pospal-wide th:nth-child(1), .table-modern.pospal-wide td:nth-child(1) { width: 80px; }
.table-modern.pospal-wide th:nth-child(2), .table-modern.pospal-wide td:nth-child(2) { width: 140px; }
.table-modern.pospal-wide th:nth-child(3), .table-modern.pospal-wide td:nth-child(3) { width: 280px; }
.table-modern.pospal-wide th:nth-child(4), .table-modern.pospal-wide td:nth-child(4) { width: 80px; text-align: right; }
.table-modern.pospal-wide th:nth-child(5), .table-modern.pospal-wide td:nth-child(5) { width: 100px; }
.table-modern.pospal-wide th:nth-child(6), .table-modern.pospal-wide td:nth-child(6) { width: 120px; text-align: right; }
.table-modern.pospal-wide th:nth-child(7), .table-modern.pospal-wide td:nth-child(7) { width: 120px; text-align: right; }
.table-modern.pospal-wide th:nth-child(8), .table-modern.pospal-wide td:nth-child(8) { width: 140px; }
.table-modern.pospal-wide th:nth-child(9), .table-modern.pospal-wide td:nth-child(9) { width: 240px; }
.table-modern.pospal-wide th:nth-child(10), .table-modern.pospal-wide td:nth-child(10) { width: 120px; }
.table-modern.pospal-wide th:nth-child(11), .table-modern.pospal-wide td:nth-child(11) { width: 120px; }
.table-modern.pospal-wide th:nth-child(12), .table-modern.pospal-wide td:nth-child(12) { width: 140px; }
.table-modern.pospal-wide th:nth-child(13), .table-modern.pospal-wide td:nth-child(13) { width: 80px; }
.table-modern.pospal-wide th:nth-child(14), .table-modern.pospal-wide td:nth-child(14) { width: 100px; }
.table-modern.pospal-wide th:nth-child(15), .table-modern.pospal-wide td:nth-child(15) { width: 100px; }
.table-modern.pospal-wide th:nth-child(16), .table-modern.pospal-wide td:nth-child(16) { width: 140px; }
.table-modern.pospal-wide th:nth-child(17), .table-modern.pospal-wide td:nth-child(17) { width: 180px; }
/* 行動版維持原先的換行/縮排設定 */
.table-modern thead tr { background: #f9fafb; }
.table-modern th, .table-modern td { padding: 14px 16px; border-bottom: 1px solid #eef2f7; }
.table-modern th { white-space: normal; word-break: break-word; overflow: visible; text-overflow: clip; }
.table-modern td { white-space: normal; word-break: break-word; overflow: visible; text-overflow: clip; vertical-align: top; }
.table-modern tbody tr:hover { background: #f7fbff; }
.table-modern .col-check { width: 44px; text-align: center; }
.table-modern .col-actions { width: 160px; text-align: right; }
/* UA 欄（僅操作日誌頁）限制欄寬、文字單行省略；保留 tooltip 溢出顯示 */
.table-modern.logs-ua th:nth-child(9), .table-modern.logs-ua td:nth-child(9) { width: 520px; }
.table-modern td.ua { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ua-text { display: inline-block; max-width: 500px; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }

/* 操作日誌頁：提高可讀性，適度加寬重點欄位 */
.table-modern.logs-ua th:nth-child(1), .table-modern.logs-ua td:nth-child(1) { width: 170px; }
.table-modern.logs-ua th, .table-modern.logs-ua td { overflow: hidden; }
.table-modern.logs-ua th:nth-child(2), .table-modern.logs-ua td:nth-child(2) { width: 140px; }
.table-modern.logs-ua td:nth-child(2) { white-space: nowrap; word-break: normal; overflow: hidden; }
.table-modern.logs-ua th:nth-child(3), .table-modern.logs-ua td:nth-child(3) { width: 140px; }
.table-modern.logs-ua th:nth-child(7), .table-modern.logs-ua td:nth-child(7) { width: 140px; }
.table-modern.logs-ua th:nth-child(8), .table-modern.logs-ua td:nth-child(8) { width: 140px; }
.table-modern.logs-ua td:nth-child(1), .table-modern.logs-ua td:nth-child(8) { white-space: nowrap; }
/* 操作日誌：允許細節與 UA 欄 tooltip 溢出顯示，避免被裁切 */
.table-modern.logs-ua td:nth-child(7),
.table-modern.logs-ua td.ua {
  overflow: visible;
  position: relative;
}
@media (max-width: 640px) {
  .table-modern.logs-ua th:nth-child(9), .table-modern.logs-ua td:nth-child(9) { width: 260px; }
  /* 行動版：欄寬較緊湊但避免換行破壞可讀性 */
  .table-modern.logs-ua th:nth-child(1), .table-modern.logs-ua td:nth-child(1) { width: 120px; }
  .table-modern.logs-ua th:nth-child(2), .table-modern.logs-ua td:nth-child(2) { width: 110px; }
  .table-modern.logs-ua th:nth-child(3), .table-modern.logs-ua td:nth-child(3) { width: 120px; }
  .table-modern.logs-ua th:nth-child(7), .table-modern.logs-ua td:nth-child(7) { width: 110px; }
  .table-modern.logs-ua th:nth-child(8), .table-modern.logs-ua td:nth-child(8) { width: 120px; }
  .ua-text { max-width: 240px; }
}
/* Center align for sort and status columns */
.table-modern .col-sort, .table-modern .col-status { text-align: center; }
.table-modern .col-sort input { text-align: center; }

.pill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #e9eef7; color: #334155; font-size: 12px; }
.badge { display:inline-block; padding: 4px 10px; border-radius: 999px; font-size:12px; font-weight:600; }
.badge-success { background:#6ee7b7; color:#084c3a; }
.badge-muted { background:#cfd4db; color:#334155; }
.badge-gray { background:#f3f4f6; color:#4b5563; }

/* Increase specificity to ensure override of base .badge background */
.badge.badge-success { background:#6ee7b7; color:#084c3a; }
.badge.badge-muted { background:#cfd4db; color:#334155; }

.menu { position: relative; display: inline-block; }
.menu-trigger { border: none; background: transparent; cursor: pointer; color: #64748b; border-radius: 6px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.menu-trigger:hover { background: #f1f5f9; }
.menu .dots { font-size: 16px; line-height: 1; }
.menu-dropdown { position: absolute; right: 0; top: 100%; margin-top: 6px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,0.08); width: 160px; display: none; z-index: 50; overflow: hidden; white-space: normal; }
.menu-dropdown.open { display: block; }
.menu-dropdown button { width: 100%; text-align: left; padding: 10px 12px; border: none; background: #fff; cursor: pointer; font-size: 14px; color: #374151; display: block; }
.menu-dropdown button:hover { background: #f9fafb; }
.menu-dropdown .danger { color: #b91c1c; }

/* 強制訂單狀態頁的操作欄按鈕配色，避免被其他樣式覆蓋造成白底白字 */
.table-modern .col-actions .btn.primary { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.table-modern .col-actions .btn.outline { background: #f3f4f6 !important; color: #1f2937 !important; border-color: #d1d5db !important; }
.table-modern .col-actions .btn { vertical-align: middle; }

/* 分頁導覽 */
.pager { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; gap: 12px; border-top: 1px solid #e5e7eb; margin-top: 8px; }
.pager .pager-left { display: flex; gap: 8px; align-items: center; }
.pager .pager-right { display: flex; gap: 8px; align-items: center; }
.pager .muted { color: #6b7280; font-size: 14px; }

/* 可排序欄位樣式 */
th.sortable { cursor: pointer; user-select: none; }
th.sortable .sort-arrow { margin-left: 4px; color: #6b7280; }
/* 方向箭頭顯示 */
th.sortable.asc .sort-arrow::before { content: "▲"; }
th.sortable.desc .sort-arrow::before { content: "▼"; }
/* 目前作用中的欄位強調 */
th.sortable.active { color: #111827; }
th.sortable.active .sort-arrow { color: var(--accent); }
/* 右上角使用者選單 */
.user-menu { position: relative; }
.user-menu-trigger { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: #1f2937; color: #fff; cursor: pointer; border: 1px solid #111827; }
.user-menu-trigger:hover { background: #111827; }
.user-avatar { width: 28px; height: 28px; border-radius: 50%; background: #e5e7eb; color: #374151; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.user-info { display: flex; flex-direction: column; line-height: 1.1; }
.user-name { font-weight: 700; font-size: 13px; }
.user-role { font-size: 12px; color: #cbd5e1; }
.user-caret { margin-left: 4px; font-size: 12px; opacity: .9; }
.user-menu-dropdown { position: absolute; right: 0; top: calc(100% + 8px); width: 220px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,.12); padding: 8px; display: none; }
.user-menu-dropdown.open { display: block; }
.user-menu-dropdown .section-title { font-size: 12px; color: #6b7280; padding: 4px 8px; }
.user-menu-item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: none; background: transparent; cursor: pointer; color: #374151; }
.user-menu-item:hover { background: #f3f4f6; }
.user-menu-item .icon { width: 18px; text-align: center; opacity:.8; }

/* ——— Mobile tweaks ——— */
@media (max-width: 640px) {
  .mg-container { margin: 12px auto; padding: 12px; }
  .mg-actions { flex-wrap: wrap; }
  .mg-form { grid-template-columns: 1fr; }

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

  /* 管理頁表格同樣使用水平滾動以保留欄位 */
  .mg-table, .table-modern { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mg-table th, .mg-table td, .table-modern th, .table-modern td { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
  .table-modern .col-actions { width: auto; }
}