/* maila M0 UI 基礎樣式：純 CSS 與少量原生 JavaScript，無外部字型、無 CDN。
   設計原則見 docs/ui-ux-v1.md §7（中性色＋單一重點色、可讀字級、觸控目標 44px、
   Focus Visible、狀態不只用顏色）與 docs/brand-assets-v1.md §3（品牌維持原始比例）。 */

:root {
  --maila-bg: #f5f7fa;
  --maila-surface: #ffffff;
  --maila-border: #d5dce5;
  --maila-text: #15273a; /* 深海軍藍：與官方字標同一色系 */
  --maila-text-muted: #4c5c6e;
  --maila-accent: #0b6bcb; /* 單一重點色（對白底對比約 5.3:1） */
  --maila-radius: 8px;
  --maila-touch: 44px; /* 觸控目標最小高度 */
  --maila-bottom-nav: 64px;
  --maila-header-height: 61px; /* 品牌觸控目標 44px ＋ 上下留白 16px ＋ 邊框 1px */
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  max-width: 100%;
  background: var(--maila-bg);
  color: var(--maila-text);
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", "PingFang TC",
    "Microsoft JhengHei", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  /* 長商品名稱與中文換行不得撐出水平捲動 */
  overflow-wrap: anywhere;
}

img {
  max-width: 100%;
  height: auto;
}

/* 鍵盤操作：只對鍵盤焦點顯示外框，滑鼠點擊不顯示。 */
:focus-visible {
  outline: 3px solid var(--maila-accent);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

.skip-link {
  position: absolute;
  top: -9999px;
  left: 8px;
  z-index: 10;
  padding: 12px 16px;
  background: var(--maila-surface);
  color: var(--maila-accent);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 8px;
}

/* 視覺隱藏但保留給螢幕閱讀器與其他輔助技術。 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Header 與品牌 ───────────────────────────────────────────── */

.site-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--maila-header-height);
  padding: 8px 16px;
  background: var(--maila-surface);
  border-bottom: 1px solid var(--maila-border);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--maila-touch);
  text-decoration: none;
}

/* 官方原檔維持原始比例：只固定高度，寬度自動。 */
.brand__icon {
  width: auto;
  height: 32px;
}

.brand__wordmark {
  width: auto;
  height: 24px;
}

/* 手機 Header 為圖像 only（docs/brand-assets-v1.md §2）：full 模式在手機只顯示圖像，
   以 media query 切換顯示，不同時出現兩組品牌。wordmark 模式不受此規則影響。 */
.brand--full .brand__wordmark {
  display: none;
}

/* ── 導覽（手機底部三入口／桌面左側固定導覽）─────────────────── */

.site-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  background: var(--maila-surface);
  border-top: 1px solid var(--maila-border);
}

.site-nav__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__item {
  flex: 1 1 0;
  min-width: 0;
}

.site-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--maila-touch);
  padding: 8px;
  color: var(--maila-text-muted);
  font-size: 15px;
  text-decoration: none;
}

/* 目前頁面：加粗＋底線標記，不只靠顏色。 */
.site-nav__link[aria-current="page"] {
  color: var(--maila-accent);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--maila-accent);
}

/* ── 主要內容 ────────────────────────────────────────────────── */

.site-layout {
  display: block;
}

.site-main {
  width: 100%;
  max-width: 960px; /* 桌面避免行長過長 */
  margin: 0 auto;
  padding: 16px;
}

.page-title {
  margin: 0 0 16px;
  font-size: 24px;
}

.section {
  margin-bottom: 32px;
}

.section__title {
  margin: 0 0 12px;
  font-size: 20px;
}

/* 卡片清單：手機單欄、桌面三欄。 */
.card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  padding: 16px;
  background: var(--maila-surface);
  border: 1px solid var(--maila-border);
  border-radius: var(--maila-radius);
}

.card__title {
  margin: 0 0 8px;
  font-size: 18px;
}

.card__status {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 10px;
  border: 1px solid var(--maila-border);
  border-radius: 999px;
  color: var(--maila-text-muted);
  font-size: 14px;
}

.card__progress {
  margin: 0;
  color: var(--maila-text-muted);
}

.card__todo {
  margin: 8px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--maila-accent);
}

/* 明細收合：原生 details/summary，零 JavaScript。 */
.card__details {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--maila-border);
}

.card__summary {
  min-height: var(--maila-touch);
  padding: 10px 0;
  color: var(--maila-accent);
  cursor: pointer;
}

.card__detail-list {
  margin: 0;
  padding-left: 20px;
}

.empty-state {
  margin: 0;
  padding: 24px 16px;
  background: var(--maila-surface);
  border: 1px dashed var(--maila-border);
  border-radius: var(--maila-radius);
  color: var(--maila-text-muted);
}

.page-summary,
.page-note {
  margin: 0 0 12px;
}

.site-footer {
  padding: 16px;
  border-top: 1px solid var(--maila-border);
  color: var(--maila-text-muted);
  font-size: 14px;
}

.site-footer p {
  margin: 0;
}

/* ── Invoice 核價工作頁 ──────────────────────────────────────── */

.invoice-errors {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid #b42318;
  border-left-width: 4px;
  background: #fff4f2;
  color: #7a271a;
}

.invoice-errors p,
.invoice-issues ul {
  margin: 0;
}

.invoice-errors[hidden],
.invoice-source__empty[hidden],
.invoice-source__text[hidden] {
  display: none;
}

.invoice-paste {
  padding: 16px;
  background: var(--maila-surface);
  border: 1px solid var(--maila-border);
  border-radius: var(--maila-radius);
}

.invoice-paste form,
.invoice-review__form,
.invoice-review__form-scroll {
  min-width: 0;
}

.invoice-paste label,
.invoice-reconciliation label,
.invoice-item__field label {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
}

.invoice-paste textarea,
.invoice-item__field input:not([type="checkbox"]),
.invoice-item__field select,
.invoice-reconciliation input,
.invoice-paste button,
.invoice-review__actions button {
  width: 100%;
  max-width: 100%;
  min-height: var(--maila-touch);
  padding: 8px 12px;
  border: 1px solid var(--maila-border);
  border-radius: 4px;
  background: var(--maila-surface);
  color: var(--maila-text);
  font: inherit;
}

.invoice-paste textarea {
  min-height: 180px;
  resize: vertical;
  overflow-wrap: anywhere;
}

.invoice-paste button,
.invoice-review__actions button {
  border-color: var(--maila-accent);
  background: var(--maila-accent);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.invoice-workspace {
  display: grid;
  gap: 16px;
  align-items: start;
}

.invoice-source,
.invoice-review {
  min-width: 0;
  padding: 16px;
  background: var(--maila-surface);
  border: 1px solid var(--maila-border);
  border-radius: var(--maila-radius);
}

.invoice-source__header .section__title,
.invoice-review__header .section__title {
  margin-bottom: 8px;
}

.invoice-source__empty {
  margin: 16px 0 0;
  padding: 12px;
  border: 1px dashed var(--maila-border);
  color: var(--maila-text-muted);
}

.invoice-source__details {
  margin-top: 16px;
  min-width: 0;
}

.invoice-source__details summary {
  min-height: var(--maila-touch);
  padding: 10px 0;
  color: var(--maila-accent);
  font-weight: 700;
  cursor: pointer;
}

.invoice-source__text {
  max-height: calc(100vh - 240px);
  margin: 0;
  padding: 16px;
  overflow: auto;
  border: 1px solid var(--maila-border);
  background: var(--maila-bg);
  color: var(--maila-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
}

.invoice-review__header {
  min-width: 0;
}

.invoice-issues {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid #b42318;
  background: #fff4f2;
  color: #7a271a;
}

.invoice-issues ul {
  padding-left: 20px;
}

.invoice-items-section,
.invoice-reconciliation {
  min-width: 0;
  margin-top: 20px;
}

.invoice-items {
  min-width: 0;
}

.invoice-items__header,
.invoice-item {
  min-width: 0;
}

.invoice-items__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.invoice-item {
  display: grid;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--maila-border);
}

.invoice-item__name,
.invoice-item__field,
.invoice-item__discount {
  min-width: 0;
}

.invoice-item__name .card__title {
  overflow-wrap: anywhere;
}

.invoice-item__name p {
  margin: 0;
  color: var(--maila-text-muted);
  font-size: 14px;
}

.invoice-item__notice {
  grid-column: 1 / -1;
  margin: 0;
  color: #7a271a;
}

.invoice-item__field .page-note,
.invoice-item__field .field-hint {
  display: block;
  margin-bottom: 4px;
  color: #7a271a;
  font-size: 14px;
}

.invoice-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: var(--maila-touch);
  padding: 8px 0;
  font-weight: 700;
  cursor: pointer;
}

.invoice-check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
}

.invoice-totals {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
}

.invoice-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--maila-border);
}

.invoice-totals dt,
.invoice-totals dd {
  min-width: 0;
  margin: 0;
}

.invoice-totals dd {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.invoice-review__actions {
  position: sticky;
  bottom: var(--maila-bottom-nav);
  z-index: 3;
  margin-top: 20px;
  padding: 12px 0 0;
  background: var(--maila-surface);
  border-top: 1px solid var(--maila-border);
}

/* 手機／平板：工作區單欄，品項逐段核對；原文 details 預設收合。 */
@media (max-width: 1023px) {
  .invoice-workspace {
    display: block;
  }

  .invoice-review {
    margin-top: 16px;
  }

  .invoice-items__header {
    display: none;
  }
}

/* ── 桌面（768px 以上）：左側固定導覽＋多欄卡片 ────────────────── */

@media (min-width: 768px) {
  .brand--full .brand__wordmark {
    display: inline-block;
  }

  .site-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  .site-nav {
    position: sticky;
    top: 0;
    right: auto;
    bottom: auto;
    left: auto;
    /* 扣除 Header 高度：側欄不把頁面撐出一整個額外的 viewport 高度 */
    height: calc(100vh - var(--maila-header-height));
    border-top: none;
    border-right: 1px solid var(--maila-border);
  }

  .site-nav__list {
    flex-direction: column;
    gap: 4px;
    padding: 16px 12px;
  }

  .site-nav__link {
    justify-content: flex-start;
    padding: 12px 16px;
    font-size: 16px;
  }

  .site-nav__link[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--maila-accent);
  }

  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .invoice-review__actions {
    bottom: 16px;
  }
}

/* Invoice 桌面工作區：原文與核對表單並列，兩側各自維持可用的捲動／固定操作。 */
@media (min-width: 1024px) {
  .invoice-workspace {
    grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.25fr);
  }

  .invoice-source {
    position: sticky;
    top: 16px;
  }

  .invoice-review {
    position: static;
    display: block;
    max-height: none;
    overflow: visible;
  }

  .invoice-review__form {
    display: block;
    min-height: 0;
    overflow: visible;
  }

  .invoice-review__form-scroll {
    min-height: 0;
    overflow: visible;
    padding-right: 0;
  }

  .invoice-items__header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(4.5rem, 0.65fr) minmax(6rem, 0.8fr) minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    background: var(--maila-surface);
    border-bottom: 2px solid var(--maila-border);
    color: var(--maila-text-muted);
    font-size: 14px;
    font-weight: 700;
  }

  .invoice-item {
    grid-template-columns: minmax(0, 1.3fr) minmax(4.5rem, 0.65fr) minmax(6rem, 0.8fr) minmax(0, 1fr);
    align-items: start;
  }

  .invoice-item__discount {
    grid-column: 1 / -1;
  }

  .invoice-review__actions {
    position: sticky;
    bottom: 16px;
    flex: none;
    margin-top: 20px;
  }
}

/* 手機：底部固定導覽不得蓋住頁尾內容。 */
@media (max-width: 767px) {
  body {
    padding-bottom: var(--maila-bottom-nav);
  }
}


/* 尊重系統的減少動態偏好。 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}