/* sales-status.css — Sales Status page (Unit 2). */
/* Material-inspired, mobile-first, matches existing pages' palette. */

:root {
  --color-primary: #6750A4;
  --color-primary-container: #EADDFF;
  --color-on-primary: #FFFFFF;
  --color-on-primary-container: #21005D;
  --color-secondary: #625B71;
  --color-surface: #FFFBFE;
  --color-surface-variant: #E7E0EC;
  --color-on-surface: #1C1B1F;
  --color-on-surface-variant: #49454F;
  --color-outline: #79747E;
  --color-outline-variant: #CAC4D0;
  --color-error: #B3261E;
  --color-error-container: #F9DEDC;
  --color-success: #2E7D32;
  --color-danger: #D32F2F;
  --color-warn: #B26A00;
  --color-warn-container: #FFE3B3;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;

  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.8rem;
  --font-size-md: 0.9rem;
  --font-size-lg: 1.1rem;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.2);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-on-surface);
  background: var(--color-surface);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

.hidden { display: none !important; }
.view { min-height: 100dvh; }
.view#main-view { display: flex; flex-direction: column; height: 100dvh; }

/* ─── Buttons (shared look) ─── */
.btn {
  font: inherit; border: none; border-radius: var(--radius-full);
  padding: 10px 18px; cursor: pointer; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-text { background: none; color: var(--color-primary); }
.btn-icon { background: none; padding: 8px; border-radius: var(--radius-full); color: var(--color-on-surface); }
.btn-sm { padding: 6px 12px; font-size: var(--font-size-sm); }
.btn-xs { padding: 4px 10px; font-size: var(--font-size-xs); }
.btn-full { width: 100%; }
.btn-danger { background: var(--color-danger); color: #fff; }

/* ─── Login ─── */
.login-container { max-width: 380px; margin: 0 auto; padding: 48px 20px; }
.app-title { font-size: 1.6rem; text-align: center; color: var(--color-primary); margin-bottom: 24px; }
.app-subtitle { font-size: 1rem; color: var(--color-on-surface-variant); }
.form-heading { font-size: var(--font-size-lg); margin-bottom: 16px; }
.field-group { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.field-group label { font-size: var(--font-size-sm); color: var(--color-on-surface-variant); }
.field-group input, .breakdown-secret-select {
  font: inherit; padding: 10px 12px; border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-sm); background: #fff;
}
.error-message { color: var(--color-error); font-size: var(--font-size-sm); margin-bottom: 12px; }

/* ─── Header ─── */
.app-header {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-sm);
}
.app-header .btn-icon { color: var(--color-on-primary); }
.header-title { font-size: var(--font-size-lg); flex: 1; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.user-email { font-size: var(--font-size-xs); opacity: .9; }
.app-header .btn-text { color: var(--color-on-primary); }

.loading-bar { height: 3px; background: var(--color-primary-container); overflow: hidden; }
.loading-bar-inner { height: 100%; width: 40%; background: var(--color-primary); animation: loading-slide 1s infinite; }
@keyframes loading-slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* ─── Tabs ─── */
.sales-tab-bar { display: flex; gap: 4px; padding: 8px 12px; background: var(--color-surface-variant); }
.sales-tab {
  flex: 1; font: inherit; font-size: var(--font-size-sm); font-weight: 600;
  padding: 8px 4px; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-on-surface-variant); cursor: pointer;
}
.sales-tab--active { background: var(--color-primary); color: var(--color-on-primary); }

.sales-content { flex: 1; overflow-y: auto; padding: 12px; }
.sales-section { display: block; }

/* ─── Dashboard metric cards ─── */
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.metric-card {
  background: #fff; border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md); padding: 14px; box-shadow: var(--shadow-sm);
}
.metric-card__label { font-size: var(--font-size-xs); color: var(--color-on-surface-variant); }
.metric-card__value { font-size: 1.3rem; font-weight: 700; margin-top: 4px; }
.metric-card--warn .metric-card__value { color: var(--color-warn); }

/* ─── Inventory ─── */
.inventory-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.inventory-toolbar .search-bar { flex: 1; margin-bottom: 0; }
.inventory-toolbar .btn--active { background: var(--color-primary-container); color: var(--color-on-primary-container); }
.search-bar { margin-bottom: 12px; }
.search-input-wrapper { position: relative; }
.search-input-wrapper input {
  width: 100%; font: inherit; padding: 10px 34px 10px 12px;
  border: 1px solid var(--color-outline-variant); border-radius: var(--radius-sm);
}
.search-input-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--color-outline);
}

.inventory-list { display: flex; flex-direction: column; gap: 10px; }
.series-card { background: #fff; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.series-card__header {
  display: flex; align-items: center; gap: 8px; padding: 12px; cursor: pointer;
}
.series-card__name { flex: 1; font-weight: 600; font-size: var(--font-size-md); }
.badge { font-size: var(--font-size-xs); padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-primary-container); color: var(--color-on-primary-container); white-space: nowrap; }
.badge--warn { background: var(--color-warn-container); color: var(--color-warn); }
.badge--blind { background: #E0F2F1; color: #00695C; }
.item-convert-btn { margin-left: 8px; color: #00695C; }
.convert-list { display: flex; flex-direction: column; gap: 4px; max-height: 48dvh; overflow-y: auto; margin: 8px 0; }
.convert-row { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-sm); font-size: var(--font-size-sm); cursor: pointer; }
.convert-row__date { color: var(--color-on-surface-variant); }
.convert-row__cond { flex: 1; color: var(--color-on-surface-variant); font-size: var(--font-size-xs); }
.convert-row__qty { font-weight: 700; color: var(--color-primary); }
.convert-row__price { font-weight: 600; }
.convert-row--sel { background: var(--color-primary-container); border-color: var(--color-primary); }
.review-row { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-sm); font-size: var(--font-size-sm); }
.review-row__select { margin-left: auto; font: inherit; font-size: var(--font-size-xs); padding: 4px 6px; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-sm); max-width: 45%; }
.manage-search { margin: 4px 0 8px; }
.manage-search input { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-sm); }
.manage-list { display: flex; flex-direction: column; gap: 4px; max-height: 55dvh; overflow-y: auto; }
.manage-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-sm); font-size: var(--font-size-xs); }
.manage-row__date { color: var(--color-on-surface-variant); white-space: nowrap; }
.manage-row__cond { flex: 1; color: var(--color-on-surface-variant); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manage-row__price { font-weight: 600; white-space: nowrap; }
.manage-row__select { font: inherit; font-size: var(--font-size-xs); padding: 4px; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-sm); max-width: 30%; }
.manage-row__qty { width: 52px; font: inherit; padding: 4px; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-sm); text-align: center; }
.series-card__items { border-top: 1px solid var(--color-outline-variant); padding: 6px 12px 12px; }
.item-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--font-size-sm); border-bottom: 1px dashed var(--color-outline-variant); }
.item-row:last-child { border-bottom: none; }
.item-row__name { flex: 1; }
.item-row__secret { color: var(--color-primary); font-size: var(--font-size-xs); margin-left: 4px; }
.item-row__nums { display: flex; gap: 10px; color: var(--color-on-surface-variant); }
.item-row__stock { font-weight: 700; color: var(--color-on-surface); }
.item-row__stock--neg, .stock-neg { color: var(--color-danger); }

/* ─── Monthly ─── */
.monthly-filter { margin-bottom: 12px; display: flex; gap: 8px; align-items: center; }
.monthly-filter .monthly-year-select { flex: 1; }
.monthly-year-select {
  font: inherit; padding: 8px 12px; border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-sm); background: #fff; width: 100%;
}
.monthly-list { display: flex; flex-direction: column; gap: 8px; }
.month-row { background: #fff; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-md); }
.month-row__header { display: flex; align-items: center; gap: 10px; padding: 12px; cursor: pointer; }
.month-row__ym { font-weight: 700; }
.month-row__nums { margin-left: auto; display: flex; gap: 12px; font-size: var(--font-size-sm); color: var(--color-on-surface-variant); }
.month-row__calc { color: var(--color-outline); font-style: italic; }
.month-flag-badge { font-size: var(--font-size-xs); font-weight: 700; padding: 1px 8px; border-radius: var(--radius-full); background: var(--color-warn-container); color: var(--color-warn); margin-left: 6px; }
.month-flag-badge--ok { background: #E0F2F1; color: #00695C; }
.month-row__detail { border-top: 1px solid var(--color-outline-variant); padding: 6px 12px 12px; }
.sales-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sales-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-xs); }
.sales-table th, .sales-table td { padding: 6px 8px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--color-outline-variant); }
.sales-table thead th {
  position: sticky; top: 0; background: var(--color-surface-variant);
  color: var(--color-on-surface-variant); font-weight: 600; font-size: 0.7rem;
}
.sales-table tbody tr:last-child td { border-bottom: none; }
.sales-table .col-num { text-align: right; }
.sales-table .col-date { color: var(--color-on-surface-variant); }
.sales-table .col-name { white-space: normal; min-width: 140px; }
.sale-tag { display: inline-block; font-size: 0.62rem; font-weight: 600; padding: 1px 5px; border-radius: var(--radius-full); margin-right: 5px; vertical-align: middle; }
.sale-tag--box { background: var(--color-warn-container); color: var(--color-warn); }
.sale-tag--blind { background: #E0F2F1; color: #00695C; }
.sales-table .col-cond { color: var(--color-on-surface-variant); font-size: 0.68rem; }
.sales-table .col-id { white-space: nowrap; }
.sale-item-id { font-family: ui-monospace, monospace; font-size: 0.68rem; color: var(--color-on-surface-variant); }
.sale-item-id-edit { background: none; border: none; cursor: pointer; font-size: 0.75rem; padding: 0 4px; opacity: 0.6; }
.sale-item-id-edit:hover { opacity: 1; }
.sale-qty-multi { font-weight: 700; color: var(--color-primary); }
.sales-table .stock-neg { color: var(--color-danger); }
.sales-table .cost-zero { color: var(--color-warn); font-weight: 600; background: var(--color-warn-container); }
.sales-table .margin-high { color: var(--color-warn); font-weight: 700; background: var(--color-warn-container); }

/* ─── 標記 (mark: 贈品 / 損失) ─── */
.sales-table .col-mark { text-align: center; white-space: nowrap; }
.mark-select { font: inherit; font-size: 0.68rem; padding: 2px 6px; border: 1px solid var(--color-outline); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-on-surface-variant); cursor: pointer; }
.mark-select--gift { background: #E8F5E9; border-color: var(--color-success); color: var(--color-success); font-weight: 700; }
.mark-select--loss { background: var(--color-error-container); border-color: var(--color-danger); color: var(--color-danger); font-weight: 700; }
.mark-select--wholesale { background: #E3F2FD; border-color: #1565C0; color: #1565C0; font-weight: 700; }
.mark-select--physical { background: #F3E5F5; border-color: #6A1B9A; color: #6A1B9A; font-weight: 700; }
.mark-select--iopenmall { background: #FFF3E0; border-color: #E65100; color: #E65100; font-weight: 700; }
.mark-select--coupang { background: #FFEBEE; border-color: #C62828; color: #C62828; font-weight: 700; }
.mark-select--myship { background: #E0F7FA; border-color: #00838F; color: #00838F; font-weight: 700; }
.mark-select--group { background: #FFF8E1; border-color: #F9A825; color: #8D6E00; font-weight: 700; }
.sale-row--gift { background: rgba(46, 125, 50, 0.06); }
.sale-row--loss { background: rgba(211, 47, 47, 0.06); }
.sale-row--loss td:not(.col-mark) { text-decoration: line-through; text-decoration-color: rgba(211, 47, 47, 0.4); }
.sale-row--wholesale { background: rgba(21, 101, 192, 0.06); }
.sale-row--physical { background: rgba(106, 27, 154, 0.06); }
.sale-row--iopenmall { background: rgba(230, 81, 0, 0.06); }
.sale-row--coupang { background: rgba(198, 40, 40, 0.06); }
.sale-row--myship { background: rgba(0, 131, 143, 0.06); }
.sale-row--group { background: rgba(249, 168, 37, 0.08); }

/* ─── Empty / error ─── */
.empty-state, .error-state { text-align: center; padding: 40px 16px; color: var(--color-on-surface-variant); }

/* ─── Sidebar ─── */
.sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 50; }
.sidebar-panel { width: 260px; max-width: 80%; height: 100%; background: #fff; box-shadow: var(--shadow-lg); padding: 16px; }
.sidebar-header { margin-bottom: 16px; }
.sidebar-title { font-size: 1.2rem; font-weight: 700; color: var(--color-primary); }
.sidebar-subtitle { font-size: var(--font-size-xs); color: var(--color-on-surface-variant); }
.sidebar-nav-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.sidebar-nav-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-sm); color: var(--color-on-surface); text-decoration: none; }
.sidebar-nav-item--active { background: var(--color-primary-container); color: var(--color-on-primary-container); font-weight: 600; }
.sidebar-nav-icon { font-size: 1.1rem; }

/* ─── Bottom sheet (breakdown) ─── */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 60; display: flex; align-items: flex-end; }
.bottom-sheet {
  width: 100%; max-height: 88dvh; overflow-y: auto; background: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 8px 16px 24px;
  box-shadow: var(--shadow-lg);
}
.drag-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--color-outline-variant); margin: 8px auto; }
.sheet-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sheet-title { flex: 1; font-size: var(--font-size-lg); }
.sheet-actions { margin-top: 16px; }

.breakdown-warning { background: var(--color-warn-container); color: var(--color-warn); padding: 8px 12px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); margin-bottom: 10px; }
.breakdown-boxcount { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.breakdown-boxcount label { font-size: var(--font-size-sm); font-weight: 600; }
.breakdown-boxcount input { width: 80px; font: inherit; padding: 8px; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-sm); text-align: center; }
.breakdown-type-bar { display: flex; gap: 6px; margin: 8px 0; }
.breakdown-type-btn {
  flex: 1; font: inherit; font-size: var(--font-size-sm); font-weight: 600;
  padding: 8px; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-on-surface-variant); cursor: pointer;
}
.breakdown-type-btn--active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.breakdown-blind-info { padding: 12px; background: #E0F2F1; color: #00695C; border-radius: var(--radius-sm); font-size: var(--font-size-md); text-align: center; margin: 8px 0; }
.breakdown-counter { display: flex; align-items: center; gap: 6px; padding: 8px 0; font-weight: 600; }
.breakdown-counter__value { font-size: 1.2rem; }
.breakdown-counter--valid .breakdown-counter__value { color: var(--color-success); }
.breakdown-counter--invalid .breakdown-counter__value { color: var(--color-danger); }
.breakdown-rows { display: flex; flex-direction: column; gap: 6px; }
.breakdown-row { display: flex; align-items: center; gap: 8px; }
.breakdown-row__name { flex: 1; font-size: var(--font-size-sm); }
.breakdown-row__secret { color: var(--color-primary); font-size: var(--font-size-xs); }
.breakdown-row__qty { width: 64px; font: inherit; padding: 6px 8px; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-sm); text-align: center; }
.breakdown-row__remove { background: none; border: none; color: var(--color-danger); cursor: pointer; font-size: 1.1rem; }
.breakdown-secret-select { width: 100%; margin-top: 8px; }
.breakdown-add-secret-wrap { margin-top: 8px; }

/* ─── Toast ─── */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--color-on-surface); color: #fff; padding: 10px 18px;
  border-radius: var(--radius-full); font-size: var(--font-size-sm); z-index: 100; box-shadow: var(--shadow-md);
}
.toast--error { background: var(--color-danger); }

/* ─── Shopee Sales Import ──────────────────────────────────────────────────── */
.sales-import-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 6px 12px 0;
}

.shopee-import-actions {
  display: flex;
  justify-content: flex-end;
  padding: 4px 0;
}

.shopee-import-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-secondary, #625B71);
  padding: 8px 4px;
}
.shopee-filter-group {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.shopee-filter-btn {
  color: var(--color-primary, #6750A4);
  font-weight: 600;
  white-space: nowrap;
}

.shopee-import-preview {
  max-height: 55vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.shopee-import-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.shopee-import-table th,
.shopee-import-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--color-outline-variant, #CAC4D0);
  text-align: left;
  white-space: nowrap;
}
.shopee-import-table thead th {
  position: sticky;
  top: 0;
  background: var(--color-surface, #FFFBFE);
  font-weight: 600;
}

/* Row match state cues (not colour-only: unmatched shows a 配對 button) */
.shopee-row--unmatched td {
  background: #FFF8E1;
}
.shopee-row--matched td {
  background: transparent;
}

.shopee-row-map-btn {
  color: var(--color-primary, #6750A4);
  font-weight: 600;
}
.shopee-row-product {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface, #1D1B20);
  margin-bottom: 2px;
  white-space: normal;
  word-break: break-word;
}
.shopee-row-option {
  display: block;
  font-size: 11px;
  color: var(--color-secondary, #625B71);
  margin-top: 2px;
  white-space: normal;
  word-break: break-word;
}
.shopee-row-id {
  display: inline-block;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--color-primary, #6750A4);
  background: var(--color-primary-container, #EADDFF);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
}
.shopee-row-id--pending {
  color: #5d4000;
  background: #fff176;
  font-family: inherit;
}
.shopee-row-item-picker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.shopee-row-item-select {
  max-width: 220px;
  font-size: 12px;
  padding: 2px 4px;
  border: 1px solid var(--color-outline-variant, #CAC4D0);
  border-radius: 4px;
  background: var(--color-surface, #FFFBFE);
  color: var(--color-on-surface, #1C1B1F);
}
.shopee-row-item-confirm-btn {
  color: var(--color-primary, #6750A4);
  font-weight: 600;
  white-space: nowrap;
}