/* ===== BASE & LAYOUT ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; scroll-padding-top: calc(var(--nav-h) + 8px); }
body { font-family: var(--font-body); font-size: var(--text-base); color: var(--text); background: var(--bg); min-height: 100dvh; line-height: 1.6; }
img, svg { display: block; max-width: 100%; }
a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-h); }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
h1,h2,h3,h4 { text-wrap: balance; line-height: 1.2; }
p, li { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--primary-lt); }
.hidden { display: none !important; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0; }

/* ===== TOP NAV ===== */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 var(--sp-6);
  gap: var(--sp-4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.topnav-logo {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-shrink: 0; text-decoration: none; color: var(--text);
}
.topnav-logo svg { color: var(--primary); }
.logo-name-zh { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.logo-name-en { font-size: var(--text-xs); color: var(--text-muted); }

.nav-tabs-wrapper {
  display: flex; align-items: center; flex: 1; min-width: 0; position: relative;
}
.nav-scroll-btn {
  display: none; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer; z-index: 1; font-size: 14px;
  transition: background .15s, color .15s;
}
.nav-scroll-btn:hover { background: var(--primary-lt); color: var(--primary); }
.nav-tabs {
  display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
  scroll-behavior: smooth;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tab {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-muted); white-space: nowrap;
  transition: background var(--transition), color var(--transition);
  text-decoration: none;
}
.nav-tab:hover { background: var(--surface-2); color: var(--text); }
.nav-tab.active { background: var(--primary-lt); color: var(--primary); }
.nav-tab svg { flex-shrink: 0; }

.nav-right {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-shrink: 0;
}
.clock-block { text-align: right; }
.clock-hms { font-family: var(--font-mono); font-size: var(--text-base); font-weight: 600; color: var(--text); letter-spacing: 0.04em; }
.clock-date { font-size: var(--text-xs); color: var(--text-muted); }
.lunar-chip { font-size: var(--text-xs); color: var(--teal); background: var(--teal-lt); padding: 2px var(--sp-2); border-radius: var(--r-full); white-space: nowrap; }
.theme-btn {
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--surface-2); display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: background var(--transition), color var(--transition);
}
.theme-btn:hover { background: var(--primary-lt); color: var(--primary); }

/* ===== PAGE SHELL ===== */
.page-body { margin-top: var(--nav-h); }
.page { display: none; }
.page.active { display: block; }

/* ===== DASHBOARD GRID ===== */
.dash-grid {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-5);
}

/* ===== CARD ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.card-title { font-size: var(--text-base); font-weight: 700; color: var(--text); }
.card-sub   { font-size: var(--text-xs);   color: var(--text-muted); }
.card-badge {
  font-size: var(--text-xs); padding: 2px var(--sp-2);
  border-radius: var(--r-full); font-weight: 600;
}
.badge-live { background: var(--error-bg); color: var(--error); animation: pulse-badge 2s infinite; }
@keyframes pulse-badge { 0%,100%{opacity:1} 50%{opacity:0.5} }
.badge-source { background: var(--surface-2); color: var(--text-faint); }

/* ===== SECTION HEADER ===== */
.section-hdr {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) 0 var(--sp-2);
}
.section-hdr-icon {
  width: 36px; height: 36px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-lt); color: var(--primary);
  flex-shrink: 0;
}
.section-hdr-title-zh { font-size: var(--text-xl); font-weight: 700; color: var(--text); }
.section-hdr-title-en { font-size: var(--text-sm);  color: var(--text-muted); }

/* ===== SKELETON ===== */
.skel { border-radius: var(--r-sm); background: linear-gradient(90deg,var(--surface-3) 25%,var(--divider) 50%,var(--surface-3) 75%); background-size: 200% 100%; animation: shimmer 1.6s infinite; }
.skel-h1 { height: 44px; width: 60%; }
.skel-h2 { height: 28px; width: 40%; }
.skel-p  { height: 14px; width: 85%; margin: 4px 0; }
.skel-p2 { height: 14px; width: 65%; margin: 4px 0; }
.skel-icon { height: 44px; width: 44px; border-radius: var(--r-full); }
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }

/* ===== TAGS / PILLS ===== */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 600; padding: 3px var(--sp-2); border-radius: var(--r-full); }
.tag-green  { background: var(--success-bg);  color: var(--success); }
.tag-yellow { background: var(--warning-bg);  color: var(--warning); }
.tag-red    { background: var(--error-bg);    color: var(--error); }
.tag-blue   { background: var(--info-bg);     color: var(--info); }
.tag-teal   { background: var(--teal-lt);     color: var(--teal); }
.tag-muted  { background: var(--surface-2);   color: var(--text-muted); }

/* ===== GRID HELPERS ===== */
.g2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.gcol2 { grid-column: span 2; }
.gcol3 { grid-column: span 3; }
.gcol4 { grid-column: span 4; }

/* ===== WARNING STRIP ===== */
.warn-strip {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  background: var(--warning-bg); border: 1px solid var(--warning);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
  color: var(--warning); font-size: var(--text-sm); line-height: 1.5;
}
.warn-strip svg { flex-shrink: 0; margin-top: 2px; }

/* ===== BIG NUMBER ===== */
.big-num { font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.big-unit { font-size: var(--text-lg); color: var(--text-muted); font-weight: 300; }

/* ===== LIST ROWS ===== */
.row-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.row-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2); border: 1px solid var(--divider);
  border-radius: var(--r-md);
  transition: background var(--transition);
}
.row-item:hover { background: var(--surface-3); }
.row-name { font-size: var(--text-sm); color: var(--text); font-weight: 500; }
.row-val  { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); font-weight: 700; }
.row-sub  { font-size: var(--text-xs); color: var(--text-muted); }

/* ===== SCROLLABLE ROW ===== */
.scroll-row { display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2); scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.scroll-row::-webkit-scrollbar { height: 4px; }
.scroll-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ===== FOOTER ===== */
.site-footer {
  border-top: 1px solid var(--border); padding: var(--sp-5) var(--sp-6);
  margin-top: var(--sp-8);
}
.footer-inner {
  max-width: var(--content-max); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8);
  justify-content: space-between; align-items: center;
  font-size: var(--text-xs); color: var(--text-faint);
}
.footer-src { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.footer-src a { color: var(--text-faint); }
.footer-src a:hover { color: var(--primary); }

/* ===== FORECAST CHIPS ===== */
.forecast-chip {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; min-width: 72px; padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--divider);
  border-radius: var(--r-lg); flex-shrink: 0;
  transition: background var(--transition);
}
.forecast-chip:hover { background: var(--surface-3); }
.fc-date { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--text); }
.fc-icon { width: 32px; height: 32px; object-fit: contain; }
.fc-temps { display: flex; gap: 4px; align-items: baseline; }
.fc-hi { font-weight: 700; font-size: var(--text-sm); color: var(--text); }
.fc-lo { font-size: var(--text-xs); color: var(--text-muted); }

/* ===== SURFACE-3 FALLBACK ===== */
:root[data-theme="dark"]  { --surface-3: #1f2b3e; }
:root[data-theme="light"] { --surface-3: #e8eef5; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .gcol4 { grid-column: span 2; }
}
@media (max-width: 700px) {
  .topnav { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .logo-name-en, .lunar-chip { display: none; }
  .clock-date { display: none; }
  .dash-grid { padding: var(--sp-3); gap: var(--sp-3); }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .gcol2, .gcol3, .gcol4 { grid-column: span 1; }
  .card { padding: var(--sp-4); }
}

/* ===== MOBILE RESPONSIVE — OVERRIDE INLINE STYLES ===== */
@media (max-width: 700px) {
  /* Force ALL inline-style grids to single column on mobile */
  .dash-grid > * { grid-column: 1 / -1 !important; }
  .dash-grid [style*="grid-column:span"],
  .dash-grid [style*="grid-column: span"] { grid-column: 1 / -1 !important; }

  /* Home page 4-col → 2-col mini stats */
  #page-home .dash-grid > div:nth-child(-n+4) {
    grid-column: span 1 !important;
  }
  #page-home .dash-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Transport: stack MTR + LRT vertically */
  #page-transport .dash-grid {
    grid-template-columns: 1fr !important;
  }

  /* Weather: single column */
  #page-weather .dash-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tides: single column */
  #page-tides .dash-grid {
    grid-template-columns: 1fr !important;
  }

  /* Parking grid: 1 col */
  #parking-grid {
    grid-template-columns: 1fr !important;
  }

  /* Bus presets: 1 col */
  #bus-presets-grid {
    grid-template-columns: 1fr !important;
  }

  /* Health: 1 col */
  #page-health .dash-grid,
  #h-aed-full {
    grid-template-columns: 1fr !important;
  }

  /* Environment: 1 col */
  #page-environment .dash-grid,
  #e-aqhi {
    grid-template-columns: 1fr !important;
  }

  /* Temperature / rain grids */
  #h-temps, #w-temps, #h-rain, #w-rain {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Forecast chips: allow horizontal scroll */
  .scroll-row { padding-bottom: var(--sp-3); }

  /* Section header: compress */
  .section-hdr-title-zh { font-size: var(--text-lg) !important; }

  /* Nav: hide clock date, lunar on very small */
  .clock-hms { font-size: var(--text-sm) !important; }

  /* CCTV grid: full width */
  #cctv-grid {
    grid-template-columns: 1fr !important;
  }

  /* Big number: smaller on mobile */
  .big-num { font-size: var(--text-2xl) !important; }

  /* Input rows: stack vertically */
  .dash-grid [style*="display:flex"][style*="gap"] {
    flex-wrap: wrap !important;
  }

  /* Card padding reduce */
  .card { padding: var(--sp-3) !important; }

  /* Hide dock on very small */
  .topnav-logo .logo-name-zh { font-size: 12px !important; }

  /* Minimum readable font size on mobile */
  .row-name, .row-val, .row-sub { font-size: 13px !important; min-font-size: 13px; }
  .tag { font-size: 11px !important; }
  .card-sub { font-size: 12px !important; }
  .section-hdr-title-en { font-size: 12px !important; }
}

/* ===== BOTTOM NAV FOR MOBILE ===== */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 300;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--sp-2) 0 calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bottom-nav::-webkit-scrollbar { display: none; }
.bottom-nav-inner {
  display: flex;
  gap: 0;
  min-width: max-content;
  padding: 0 var(--sp-2);
}
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  cursor: pointer;
  min-width: 52px;
  transition: background .15s;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  border: none;
  background: none;
  font-family: inherit;
}
.bottom-nav-item svg { flex-shrink: 0; }
.bottom-nav-item.active { color: var(--primary); background: var(--primary-lt); }
.bottom-nav-item:hover { background: var(--surface-2); }

@media (max-width: 700px) {
  .bottom-nav { display: block; }
  /* Add padding to page body so content isn't hidden behind bottom nav */
  .page-body { padding-bottom: 72px; }
  .site-footer { padding-bottom: calc(var(--sp-5) + 72px); }
  /* Hide top nav tabs on mobile to save space */
  .nav-tabs { display: none !important; }
}

/* ===== NAV SCROLL ARROWS ===== */
@media (min-width: 701px) {
  .nav-scroll-btn { display: flex; }
}
/* On mobile, bottom nav handles navigation, hide top nav tabs entirely */