/* PHASE 3: MOBILE DASHBOARD */
:root {
  --dash-space-xs: 4px;
  --dash-space-sm: 8px;
  --dash-space-md: 12px;
  --dash-space-lg: 16px;
  --dash-radius-sm: 12px;
  --dash-radius-md: 16px;
}

html { font-kerning: normal; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

.app-header {
  min-height: 112px;
  padding: max(28px, env(safe-area-inset-top)) 16px 12px;
  background-position: center 34%;
}
.header-top { margin-bottom: 0; gap: 12px; }
.trip-title { font-size: 1.25rem; line-height: 1.15; }
.trip-sub { margin-top: 4px; font-size: 0.6875rem; letter-spacing: 0.02em; }
.header-right { min-width: 104px; }
.weather-mini { display: none; }
.weather-temp { color: rgba(255,255,255,0.82); font-size: 0.6875rem; }
.rate-badge { margin-top: 5px; min-height: 26px; padding: 4px 9px; }
#sync-status { color: rgba(255,255,255,0.82) !important; font-size: 0.625rem !important; }
.trip-list-back-btn { min-height: 44px; margin: -10px 0 -7px !important; padding: 8px 0 !important; }
.trip-list-back-btn:focus-visible { outline: 3px solid rgba(255,255,255,0.9); outline-offset: 2px; border-radius: 6px; }
.app-header > button[title="更換背景圖"] {
  right: 12px !important; bottom: 10px !important; width: 44px !important; height: 44px !important;
}

.date-tabs-wrap { padding: 0 12px 10px; background-position: center 67%; }
.date-tabs { gap: 6px; scroll-padding-inline: 12px; }
.day-tab {
  min-width: 60px; min-height: 44px; padding: 5px 12px; border-radius: 12px;
  font-size: 0.75rem; line-height: 1.15; font-family: inherit;
}
.day-tab:focus-visible { outline: 3px solid rgba(255,255,255,0.9); outline-offset: 2px; }

.main-scroll { padding: 12px 16px calc(92px + env(safe-area-inset-bottom)); scroll-behavior: smooth; }
#page-itinerary:not(.hidden) { display: flex; flex-direction: column; }
#today-summary-card { order: 1; }
#packing-summary-card { order: 2; }
#weather-card-container { order: 3; }
#day-expense-mini { display: none; order: 4; }
#timeline-container { order: 5; }
#page-itinerary[data-trip-phase="active"] #timeline-container,
#page-itinerary[data-trip-phase="after"] #timeline-container { order: 2; }
#page-itinerary[data-trip-phase="active"] #packing-summary-card,
#page-itinerary[data-trip-phase="after"] #packing-summary-card { order: 3; }
#page-itinerary[data-trip-phase="active"] #weather-card-container,
#page-itinerary[data-trip-phase="after"] #weather-card-container { order: 4; }

.today-summary.dashboard-brief {
  margin-bottom: var(--dash-space-md); padding: var(--dash-space-lg); border: 0;
  border-radius: var(--dash-radius-md); box-shadow: 0 3px 8px rgba(15,25,35,0.12);
}
.dashboard-brief-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dashboard-day-line { display: flex; align-items: center; gap: 8px; min-height: 26px; color: var(--ink2); font-size: 0.75rem; font-weight: 700; }
.dashboard-phase-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 9px; border-radius: 999px; background: var(--blue); color: white; }
.dashboard-phase-pill.active { background: var(--accent); }
.dashboard-phase-pill.before { background: var(--blue); }
.dashboard-phase-pill.after { background: var(--ink2); }
.dashboard-area { margin-top: 5px; color: var(--ink); font-size: 1rem; font-weight: 800; line-height: 1.25; }
.dashboard-weather-glance { display: flex; align-items: center; gap: 5px; min-height: 32px; padding: 4px 8px; border-radius: 999px; background: #e7f6f2; color: #075e57; font-size: 0.75rem; }
.dashboard-weather-glance strong { font-family: 'Outfit', sans-serif; font-variant-numeric: tabular-nums; }

.dashboard-mission { padding: 16px 0 14px; }
.dashboard-mission-label { color: var(--accent); font-size: 0.75rem; font-weight: 800; }
.dashboard-mission-title { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; color: var(--ink); font-size: 1.375rem; font-weight: 800; line-height: 1.2; text-wrap: balance; }
.dashboard-mission-title time { color: var(--ink); font: 700 1.75rem/1 'Outfit', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dashboard-context-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--ink2); font-size: 0.8125rem; line-height: 1.35; }
.dashboard-context-label { flex: 0 0 auto; min-width: 40px; padding: 3px 7px; border-radius: 999px; background: var(--paper2); color: var(--ink2); font-size: 0.6875rem; font-weight: 800; text-align: center; }
.dashboard-mission-desc { display: -webkit-box; margin-top: 8px; overflow: hidden; color: var(--ink2); font-size: 0.8125rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-wrap: pretty; }

.dashboard-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--paper2); border-bottom: 1px solid var(--paper2); }
.dashboard-fact { min-width: 0; padding: 11px 8px; text-align: center; }
.dashboard-fact + .dashboard-fact { border-left: 1px solid var(--paper2); }
.dashboard-fact span { display: block; color: var(--ink2); font-size: 0.6875rem; line-height: 1.2; }
.dashboard-fact strong { display: block; margin-top: 4px; overflow: hidden; color: var(--ink); font: 700 0.875rem/1.2 'Outfit','Noto Sans TC',sans-serif; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }

.dashboard-status { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 9px 10px; border-radius: var(--dash-radius-sm); }
.dashboard-status.safe { background: #e7f6f2; color: #075e57; }
.dashboard-status.warning { background: #fff2dc; color: #7b4300; }
.dashboard-status-mark { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; background: #075e57; color: white; font-size: 0.75rem; font-weight: 900; }
.dashboard-status.warning .dashboard-status-mark { background: #7b4300; }
.dashboard-status > span:last-child { min-width: 0; }
.dashboard-status strong, .dashboard-status small { display: block; }
.dashboard-status strong { font-size: 0.8125rem; }
.dashboard-status small { margin-top: 2px; font-size: 0.6875rem; line-height: 1.35; }

.dashboard-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.dashboard-action {
  min-height: 44px; padding: 8px 6px; border: 1px solid var(--paper3); border-radius: var(--dash-radius-sm);
  background: white; color: var(--ink2); font: 800 0.8125rem/1.2 'Noto Sans TC',sans-serif; cursor: pointer;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out, transform 180ms ease-out;
}
.dashboard-action.is-primary { border-color: var(--accent); background: var(--accent); color: white; }
@media (hover: hover) { .dashboard-action:not(.is-primary):hover { border-color: var(--ink2); background: var(--paper); } }
.dashboard-action:active { transform: scale(0.98); }
.dashboard-action:disabled { opacity: 0.55; cursor: wait; transform: none; }
.dashboard-action:focus-visible { outline: 3px solid rgba(212,80,42,0.35); outline-offset: 2px; }

.dashboard-weather-details { margin-bottom: 12px; border-bottom: 1px solid var(--paper3); }
.dashboard-weather-details summary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 2px; color: var(--ink2); cursor: pointer; list-style: none; }
.dashboard-weather-details summary::-webkit-details-marker { display: none; }
.dashboard-weather-details summary span:first-child { min-width: 0; }
.dashboard-weather-details summary strong, .dashboard-weather-details summary small { display: block; }
.dashboard-weather-details summary strong { color: var(--ink); font-size: 0.8125rem; }
.dashboard-weather-details summary small { margin-top: 2px; overflow: hidden; font-size: 0.6875rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-weather-detail-temp { flex: 0 0 auto; color: var(--green); font: 700 1.125rem/1 'Outfit',sans-serif; }
.dashboard-weather-detail-body { display: grid; gap: 4px; padding: 0 2px 12px; color: var(--ink2); font-size: 0.75rem; line-height: 1.4; }

.timeline-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 10px; }
.timeline-section-heading h2 { color: var(--ink); font-size: 1rem; line-height: 1.25; }
.timeline-section-heading span { color: var(--ink2); font-size: 0.75rem; }
.itinerary-risk-summary.warning { margin-bottom: 10px; }
.itinerary-risk-summary.safe { display: none; }

.bottom-nav { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.nav-item { min-height: 48px; justify-content: center; }

@media (max-width: 350px) {
  .app-header { padding-inline: 12px; }
  .main-scroll { padding-inline: 12px; }
  .today-summary.dashboard-brief { padding: 14px; }
  .dashboard-mission-title { gap: 7px; font-size: 1.125rem; }
  .dashboard-mission-title time { font-size: 1.5rem; }
  .dashboard-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-fact:nth-child(3) { border-left: 0; border-top: 1px solid var(--paper2); }
  .dashboard-fact:nth-child(4) { border-top: 1px solid var(--paper2); }
  .dashboard-actions { grid-template-columns: 1fr 1fr; }
  .dashboard-action:first-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-action { transition: none; }
  .dashboard-action:active { transform: none; }
  .main-scroll { scroll-behavior: auto; }
}