* { box-sizing: border-box; }
body { font-family: -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif; margin: 0; background: #f5f6f8; color: #222; }
header { display: flex; justify-content: space-between; align-items: center; background: #1f2937; color: #fff; padding: 14px 20px; }
header h1 { font-size: 18px; margin: 0; }

/* sheet tabs（比照 Google Sheet 分頁切換，對應站編 merchant_id） */
.sheet-tabs { display: flex; gap: 2px; overflow-x: auto; background: #dfe3e8; padding: 6px 12px 0; }
.sheet-tabs .tab {
    padding: 7px 14px; border: 1px solid #c4cad4; border-bottom: none;
    border-radius: 6px 6px 0 0; background: #eef0f3; color: #555;
    font-size: 12px; white-space: nowrap; cursor: pointer;
}
.sheet-tabs .tab.active {
    background: #2563eb; color: #fff; font-weight: 700;
    border-color: #1e40af; box-shadow: 0 2px 6px rgba(37, 99, 235, .4);
    transform: translateY(-1px);
}

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 20px; background: #fff; border-bottom: 1px solid #e2e4e8; }
.toolbar input, .toolbar select { padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; }
.toolbar input.wide { flex: 1; min-width: 180px; }
.toolbar .spacer { flex: 1; }
.statsbar { padding: 6px 20px; font-size: 12px; color: #666; }

button { cursor: pointer; padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; background: #fff; font-size: 13px; }
button.primary { background: #2563eb; color: #fff; border-color: #2563eb; }
button.danger { background: #fff; color: #dc2626; border-color: #f3b4b4; }
button.danger:hover { background: #fee2e2; }
button.mini { padding: 3px 8px; font-size: 12px; }

.grid-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; }
th, td { padding: 0; border: 1px solid #e5e7eb; text-align: left; white-space: nowrap; }
th { background: #f0f1f3; padding: 8px 10px; position: sticky; top: 0; z-index: 1; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: #e2e6ec; }
th.sortable::after { content: " ⇅"; color: #bbb; font-size: 11px; }
th.sortable.sort-asc::after { content: " ▲"; color: #2563eb; }
th.sortable.sort-desc::after { content: " ▼"; color: #2563eb; }
td { padding: 7px 10px; min-width: 90px; }
tbody tr:nth-child(even) { background: #f4f6f8; }
tbody tr:hover { background: #eaf1fb; }
th.ro, td.ro { background: #fafafa; color: #888; }
td.editable { cursor: cell; }
td.editable:hover { background: #eef4ff; }
td.editable input, td.editable select { width: 100%; padding: 5px 6px; border: 1px solid #2563eb; border-radius: 3px; font-size: 13px; font-family: inherit; }
tr.new-row { background: #fffbe6; }
tr.new-row td.editable { background: #fff8d6; }
.exp-soon { color: #b45309; font-weight: 600; }
.exp-over { color: #dc2626; font-weight: 700; }

.pager { display: flex; align-items: center; gap: 12px; padding: 14px 20px; }

/* 編輯模式按鈕 */
#btnEdit { background: transparent; color: #cbd5e1; border-color: #475569; }
#btnEdit:hover { background: #374151; color: #fff; }
#btnEdit.lock-on { background: #16a34a; color: #fff; border-color: #16a34a; }

/* 唯讀模式：滑鼠不呈現可編輯提示 */
body.readonly td { cursor: default; }

/* 搜尋命中列的高亮閃爍 */
tbody tr.hit { animation: hitflash 2.5s ease-out; }
@keyframes hitflash {
    0%, 25% { background: #fde68a; box-shadow: inset 0 0 0 2px #f59e0b; }
    100% { background: transparent; box-shadow: none; }
}