/*
 * ============================================================
 * 機車旅遊紀錄本 — 設計系統 v2
 * Design System: MotoGP Racing × 台灣正體中文排版
 * ============================================================
 *
 * 靈感：Dorna Sports（MotoGP 主辦單位）品牌視覺識別
 *   碳纖維車身 → 深黑底色
 *   賽車紅旗   → 主色 Racing Red
 *   計時板橘   → 數據強調色
 *   頒獎台金銀 → 資料顯示色
 *
 * 使用方式：
 *   <link rel="stylesheet" href="design-system.css">
 *   再在各模組 <style> 中寫結構性樣式
 * ============================================================
 */

/* ============================================================
   0. GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;600;700&family=Noto+Sans+TC:wght@300;400;500;700&family=DM+Mono:wght@400;500&display=swap');

/* ============================================================
   1. DESIGN TOKENS — 色票
   ============================================================ */
:root {
  /* ── Background ── */
  --bg:           #0A0A0A;   /* 碳纖維黑，頁面底色 */
  --surface:      #141414;   /* 卡片底色 */
  --surface2:     #1C1C1C;   /* 次層卡片、輸入框 */
  --surface3:     #242424;   /* hover、選中背景 */

  /* ── Border ── */
  --border:       #383838;   /* 主要邊框（原 #2A2A2A → 調亮，輸入框更清晰）*/
  --border2:      #4A4A4A;   /* 次要邊框（原 #363636 → 調亮）*/

  /* ── Text ── */
  --text:         #FFFFFF;   /* 主要文字（純白，最高對比）*/
  --text-dim:     #D4D4D4;   /* 次要文字（原 #BDBDBD → 調亮）*/
  --muted:        #969696;   /* 輔助說明、placeholder（原 #6E6E6E → 對比 6:1，過 WCAG AA）*/

  /* ── Primary — MotoGP Racing Red ── */
  --red:          #E8001D;
  --red-mid:      #B8001A;   /* hover / active */
  --red-dim:      #2A0308;   /* 紅色半透明背景 */

  /* ── Accent — Timing Board Orange ── */
  --orange:       #FF5500;   /* 計時板橘：油費、里程 */
  --orange-dim:   #2B1500;

  /* ── Awards ── */
  --gold:         #D4AF37;   /* P1 最佳成績 */
  --gold-dim:     #2B2200;
  --silver:       #C0C0C0;   /* P2 一般數據 */

  /* ── Status ── */
  --green:        #22C55E;   /* 完成、已造訪 */
  --green-dim:    #052712;
  --blue:         #3B82F6;   /* 資訊、住宿 */
  --blue-dim:     #071730;
  --yellow:       #F59E0B;   /* 警示 */
  --yellow-dim:   #2B1E00;

  /* ── Aliases（向下相容）── */
  --accent:       var(--red);
  --accent-mid:   var(--red-mid);
  --accent-dim:   var(--red-dim);

  /* ── Layout ── */
  --nav-h:        56px;
  --header-h:     52px;
  --fab-size:     48px;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  word-break: break-word;
}

html {
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', 'PingFang TC', 'Heiti TC', '微軟正黑體', 'Noto Sans TC', sans-serif;
  line-height: 1.8;
  letter-spacing: 0.02em;   /* 繁體中文全域字距 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 700;
}

p { letter-spacing: 0.04em; }

a {
  color: inherit;
  text-decoration: none;
}

img, video {
  max-width: 100%;
  display: block;
}

input, textarea, select, button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

button { cursor: pointer; }

/* ============================================================
   3. TYPOGRAPHY UTILITIES
   ============================================================ */

/* 展示數字（天數、里程）— Bebas Neue */
.font-display,
.bebas {
  font-family: 'Bebas Neue', 'Space Grotesk', sans-serif;
  letter-spacing: 0.02em;
}

/* 等寬（座標、時間、ODO）— DM Mono */
.font-mono,
.mono {
  font-family: 'DM Mono', 'Courier New', monospace;
  font-variant-numeric: tabular-nums;
}

/* 中文內文 — Noto Sans TC */
.font-zh {
  font-family: 'Noto Sans TC', 'PingFang TC', '微軟正黑體', sans-serif;
}

/* UI label 字距 */
.label-ui {
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

/* 數字等寬 */
.tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
   4. APP SHELL
   ============================================================ */

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

/* ── Header ── */
.app-header {
  height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
  flex-shrink: 0;
  z-index: 30;
}

.app-header__title {
  font-size: 17px;
  font-weight: 700;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header__sub {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
  font-family: 'DM Mono', monospace;
}

.app-header__btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  flex-shrink: 0;
  border-radius: 0;
  transition: color 0.15s;
}

.app-header__btn:active { color: var(--red); }

/* ── Scrollable Content Area ── */
.app-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   5. BOTTOM NAVIGATION
   ============================================================ */

.bottom-nav {
  height: var(--nav-h);
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  position: relative;
  z-index: 30;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
  position: relative;
}

.bottom-nav__item.active {
  color: var(--red);
}

.bottom-nav__item.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  background: var(--red);
}

.bottom-nav__icon {
  font-size: 22px;
  line-height: 1;
}

/* Material Symbols Sharp */
.material-symbols-sharp {
  font-family: 'Material Symbols Sharp';
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-sharp.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.bottom-nav__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ============================================================
   6. CARDS & SURFACES
   ============================================================ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}

.card + .card { margin-top: 1px; }

.card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.card__body { padding: 14px; }

/* ============================================================
   7. FORM ELEMENTS
   ============================================================ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  font-size: 15px;
  border-radius: 0;
  transition: border-color 0.15s;
}

.form-input:focus {
  border-color: var(--red);
  outline: none;
}

.form-input::placeholder { color: var(--muted); }

textarea.form-input {
  resize: none;
  line-height: 1.6;
}

/* Select */
.form-select {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  font-size: 15px;
  border-radius: 0;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E6E6E' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  appearance: none;
}

.form-select:focus { border-color: var(--red); }

/* Chip / Pill Toggle */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  padding: 5px 10px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.chip.active {
  border-color: var(--red);
  background: var(--red-dim);
  color: var(--red);
}

.chip:active { opacity: 0.7; }

/* ============================================================
   8. BUTTONS
   ============================================================ */

/* Primary Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  border-radius: 0;
  white-space: nowrap;
}

.btn-primary {
  background: var(--red);
  color: #fff;
  border: none;
}

.btn-primary:active { background: var(--red-mid); }

.btn-secondary {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border2);
}

.btn-secondary:active { background: var(--surface3); }

.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.btn-ghost:active { background: var(--surface2); }

.btn-danger {
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid var(--red-mid);
}

.btn-danger:active { background: var(--red); color: #fff; }

.btn-full { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: 13px; }

/* FAB — 48px 正方形，Racing Red */
.fab {
  position: fixed;
  bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  width: var(--fab-size);
  height: var(--fab-size);
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 20;
  border-radius: 0;
  box-shadow: none;
  transition: background 0.15s, transform 0.15s;
}

.fab:active {
  background: var(--red-mid);
  transform: scale(0.95);
}

/* ============================================================
   9. BOTTOM SHEET MODAL
   ============================================================ */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.sheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 3px solid var(--red);  /* MotoGP 感 */
  z-index: 51;
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.sheet.open {
  transform: translateY(0);
}

.sheet__header {
  position: sticky;
  top: 0;
  background: var(--surface);
  padding: 16px 16px 12px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  z-index: 1;
}

.sheet__title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
}

.sheet__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 20px;
}

.sheet__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ============================================================
   10. TOAST NOTIFICATION
   ============================================================ */

#toast-container {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}

.toast {
  background: #fff;
  color: #111;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 0;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s;
  text-align: center;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.error { background: var(--red); color: #fff; }
.toast.success { background: var(--green); color: #fff; }

/* ============================================================
   11. STATS BAR
   ============================================================ */

.stats-bar {
  display: flex;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.stats-bar__item {
  flex: 1;
  padding: 12px 8px;
  text-align: center;
  border-right: 1px solid var(--border);
}

.stats-bar__item:last-child { border-right: none; }

.stats-bar__value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  color: var(--red);
  letter-spacing: 0.02em;
  line-height: 1;
}

.stats-bar__value.orange { color: var(--orange); }
.stats-bar__value.gold   { color: var(--gold); }
.stats-bar__value.green  { color: var(--green); }

.stats-bar__label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-top: 2px;
}

/* ============================================================
   12. BADGE / TAG
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
}

.badge-red    { color: var(--red);    background: var(--red-dim); }
.badge-orange { color: var(--orange); background: var(--orange-dim); }
.badge-gold   { color: var(--gold);   background: var(--gold-dim); }
.badge-green  { color: var(--green);  background: var(--green-dim); }
.badge-blue   { color: var(--blue);   background: var(--blue-dim); }
.badge-yellow { color: var(--yellow); background: var(--yellow-dim); }
.badge-muted  { color: var(--muted);  background: var(--surface2); border-color: var(--border); }

/* ============================================================
   13. DIVIDER
   ============================================================ */

.divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}

.divider-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 16px;
}

.divider-label::before,
.divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ============================================================
   14. SECTION HEADERS
   ============================================================ */

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 6px;
}

.section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.section-action {
  font-size: 13px;
  color: var(--red);
  font-weight: 600;
}

/* ============================================================
   15. EMPTY STATE
   ============================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 32px;
  text-align: center;
  color: var(--muted);
  gap: 12px;
}

.empty-state__icon {
  font-size: 48px;
  opacity: 0.4;
}

.empty-state__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dim);
}

.empty-state__desc {
  font-size: 13px;
  line-height: 1.6;
  max-width: 240px;
}

/* ============================================================
   16. LIST ITEMS
   ============================================================ */

.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.list-item:last-child { border-bottom: none; }
.list-item:active { background: var(--surface3); }

.list-item__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.list-item__body { flex: 1; min-width: 0; }

.list-item__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-item__sub {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 1px;
}

.list-item__right {
  flex-shrink: 0;
  text-align: right;
}

.list-item__amount {
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

/* ============================================================
   17. FILTER TABS
   ============================================================ */

.filter-bar {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding: 0 16px;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.filter-bar::-webkit-scrollbar { display: none; }

.filter-tab {
  flex-shrink: 0;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.filter-tab.active {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* ============================================================
   18. PHOTO GRID
   ============================================================ */

.photo-grid { display: grid; gap: 2px; }

.photo-grid-1 { grid-template-columns: 1fr; }
.photo-grid-2 { grid-template-columns: 1fr 1fr; }
.photo-grid-3 { grid-template-columns: 2fr 1fr; }
.photo-grid-3 .grid-main { grid-row: span 2; }
.photo-grid-4plus { grid-template-columns: 1fr 1fr; }

.photo-grid img,
.photo-grid .photo-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: var(--surface2);
}

.photo-grid-1 img,
.photo-grid-1 .photo-thumb {
  aspect-ratio: 16/9;
}

.photo-more-overlay {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-more-overlay::after {
  content: attr(data-more);
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Bebas Neue', sans-serif;
  color: #fff;
  letter-spacing: 0.05em;
}

/* ============================================================
   19. SCROLLBAR RESET
   ============================================================ */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}

*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border2); }

/* ============================================================
   20. UTILITIES
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.text-red    { color: var(--red); }
.text-orange { color: var(--orange); }
.text-gold   { color: var(--gold); }
.text-green  { color: var(--green); }
.text-blue   { color: var(--blue); }
.text-muted  { color: var(--muted); }
.text-dim    { color: var(--text-dim); }

.bg-surface  { background: var(--surface); }
.bg-surface2 { background: var(--surface2); }
.bg-red-dim  { background: var(--red-dim); }

.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px; }

.d-flex   { display: flex; }
.d-none   { display: none; }
.flex-1   { flex: 1; }
.gap-4    { gap: 4px; }
.gap-6    { gap: 6px; }
.gap-8    { gap: 8px; }
.gap-10   { gap: 10px; }
.gap-12   { gap: 12px; }
.gap-16   { gap: 16px; }
.ai-center { align-items: center; }
.jc-between { justify-content: space-between; }

.p-16 { padding: 16px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
.py-8  { padding-top: 8px; padding-bottom: 8px; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }

/* ============================================================
   21. JS HELPERS (toggled by JS)
   ============================================================ */

.hidden { display: none !important; }
.invisible { visibility: hidden; }

/* ============================================================
   22. SAFE AREA SUPPORT
   ============================================================ */

@supports (padding: env(safe-area-inset-bottom)) {
  .app-body {
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  }
  .fab {
    bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));
  }
}