:root {
  --app-height: 100dvh;
  --max-width: 30rem;
  /* 空域顏色 */
  --color-nfz-gZone: #77c708;
  --color-nfz-yZone: #ffba0d;
  --color-nfz-rZone: #f0382b;
  --color-nfz-nPark: #888888;
  --color-nfz-cPort: #888888;
  --color-nfz-loading: #888888;
  --color-nfz-border: #444444;
  /* 除錯邊框 */
  --debug-box-shadow: none;
}
/* ==============================================================
   佈景主題
============================================================== */
/* theme colors (in index.html): #2563eb */
/* System defalult: Light */
:root {
  --color-fg-1: #1a1a1a;
  --color-fg-2: #4a4a4a;
  --color-bg-1: #ffffff;
  --color-bg-2: #f3f4f6;
  --color-func-fg-idle: #ffffff;
  --color-func-fg-active: #ffffff;
  --color-func-bg-active: #2563eb;
  --color-link: #2563eb;
  --color-border: #e5e7eb;
  --color-filter-map: none;
}
/* System default: dark */
@media (prefers-color-scheme: dark) {
  :root{
    --color-fg-1: #e5e7eb;
    --color-fg-2: #bbbbbb;
    --color-bg-1: #111827;
    --color-bg-2: #1f2937;
    --color-func-fg-idle: #ffffff;
    --color-func-fg-active: #ffffff;
    --color-func-bg-active: #3b82f6;
    --color-link: #60a5fa;
    --color-border: #374151;
    --color-filter-map: invert(100%) hue-rotate(180deg) brightness(88%) contrast(88%) saturate(70%);
  }
}
/* Manual: Light */
:root[prefers-color-scheme-override="light"] {
  --color-fg-1: #1a1a1a;
  --color-fg-2: #4a4a4a;
  --color-bg-1: #ffffff;
  --color-bg-2: #f3f4f6;
  --color-func-fg-idle: #ffffff;
  --color-func-fg-active: #ffffff;
  --color-func-bg-active: #2563eb;
  --color-link: #2563eb;
  --color-border: #e5e7eb;
  --color-filter-map: none;
}
/* Manual: dark */
:root[prefers-color-scheme-override="dark"] {
  --color-fg-1: #e5e7eb;
  --color-fg-2: #bbbbbb;
  --color-bg-1: #111827;
  --color-bg-2: #1f2937;
  --color-func-fg-idle: #ffffff;
  --color-func-fg-active: #ffffff;
  --color-func-bg-active: #3b82f6;
  --color-link: #60a5fa;
  --color-border: #374151;
  --color-filter-map: invert(100%) hue-rotate(180deg) brightness(88%) contrast(88%) saturate(70%);
}

/* ==============================================================
   全域
============================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -ms-overflow-style: none;
  scrollbar-width: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  user-select: none;
  -webkit-user-select: none; /* Chrome Safari */        
  -moz-user-select: none; /* Firefox */
}

::-webkit-scrollbar {
  display: none;
}

html, body {
  height: var(--app-height);
  color: var(--color-fg-1);
  background: var(--color-bg-1); /* 設定整體背景 */
  touch-action: manipulation; /* 禁用double-tap */
}

/* link color */
a {
  color: var(--color-link);
  text-decoration: none;
  font-weight: bold;
}








.hidden{ display:none !important; }
.spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* HTML: <div class="loader"></div> */
.loader {
  width: 3rem;
  aspect-ratio: 3;
  --_g: no-repeat radial-gradient(circle closest-side,var(--color-fg-2) 100%,#0000);
  background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: l3 1s infinite linear;
}
@keyframes l3 {
    20%{background-position:0%   0%, 50%  50%,100%  50%}
    40%{background-position:0% 100%, 50%   0%,100%  50%}
    60%{background-position:0%  50%, 50% 100%,100%   0%}
    80%{background-position:0%  50%, 50%  50%,100% 100%}
}

/* ==============================================================
   App 框架
============================================================== */
app {
  inset: 0;
  position: fixed;
  display: grid;
  grid-template-rows: 1fr auto; /* 上面 main 填滿，下面 nav 自動 */
  background-color: var(--color-bg-2);
  /* safe-area padding */
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}
app-main {
  position: relative;
  overflow: auto;
  /* box-shadow: var(--debug-box-shadow); */
}
app-nav {
  background-color: var(--color-bg-1);
  border-top: 0.125rem solid var(--color-border);
  /* box-shadow: var(--debug-box-shadow); */
}

/* ==============================================================
   主要內容、導覽列
============================================================== */
.tab-content {
  height: 100%;
  overflow: auto;
  box-shadow: var(--debug-box-shadow);
  padding: 1rem;
}

.nav-container {
  max-width: var(--max-width);
  margin: 0 auto; /* align center */
  padding: 0.5rem;
  display: flex;
  justify-content: space-around;
  box-shadow: var(--debug-box-shadow);
}
.nav-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem;
  color: var(--color-fg-2);
  background: none;
  border: none;
  gap: 0.25rem;
  box-shadow: var(--debug-box-shadow);
}
.nav-button.active {
  color: var(--color-func-bg-active);
}
.nav-button i {
  font-size: 1.25rem;
  box-shadow: var(--debug-box-shadow);
}
.nav-button span {
  font-size: 1rem;
  font-weight: bold;
  box-shadow: var(--debug-box-shadow);
}

/* ==============================================================
   提示彈窗
============================================================== */
.swal2-container {
  padding: 1rem 1rem 0 1rem !important;
  box-shadow: var(--debug-box-shadow) !important;
}
.swal2-popup {
  height: 3rem !important;
  display: flex !important;
  align-items: center !important;
  padding: 0.5rem !important;
  gap: 0.5rem !important;
  border-radius: 0.375rem !important; 
  box-shadow: var(--debug-box-shadow) !important;
}
.swal2-icon {
  font-size: 1rem !important;
  margin: 0 !important; 
  padding: 0 !important;
  width: 2rem !important;
  height: 2rem !important;
}
.swal2-title {
  font-size: 1rem !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ==============================================================
   Hero
============================================================== */
/* .hero-title {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 1rem auto;
  text-align: center;
}

.hero-image {
  display: block;
  margin: 1rem auto;
  border-radius: 1rem;
} */

/* ==============================================================
   資訊頁
============================================================== */
.info-time {
  background: var(--color-bg-1);
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--debug-box-shadow);
  gap: 0.5rem;
}
.info-time-date-bar {
  /* display: flex; */
  /* display: block; */
  /* justify-content: space-between; */
  /* gap: 0.25rem; */
  /* margin-bottom: 0.5rem; */
  box-shadow: var(--debug-box-shadow);
}
/* .info-time-date-button {
  flex: 1;
  padding: 0.3rem 0;
  font-size: 0.85rem;
  color: var(--color-fg-1);
  background: var(--color-bg-2);
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  text-align: center;
} */
/* .info-time-date-button.active {
  color: var(--color-func-fg-active);
  background: var(--color-func-bg-active);
} */
.info-time-hour-bar {
  /* position: relative; */
  /* padding-bottom: 1rem; */
  box-shadow: var(--debug-box-shadow);
}
/* .info-time-hour-slider {
  width: 100%;
}
.info-time-hour-ticks {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1rem;
}
.info-time-hour-tick {
  position: absolute;
  font-size: 0.7rem;
  transform: translateX(-50%);
  color: var(--color-fg-2);
} */
.info-time-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.25rem;
  gap: 0.5rem;
  box-shadow: var(--debug-box-shadow);
}
.info-time-show {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 1rem;
  color: var(--color-fg-1);
}
.info-time-show i {
  font-size: 1rem;
}
.info-time-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-fg-1);
}
.info-time-now-button {
  padding: 0.3rem 0.6rem;
  background: var(--color-func-bg-active);
  color: var(--color-func-fg-active);
  border: none;
  border-radius: 0.375rem;
  font-size: 1rem;
}
.info-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 等寬、不溢出 */
  gap: 0.5rem;
}
.info-card {
  background: var(--color-bg-1);
  padding: 0.75rem;
  border-radius: 0.375rem;
  box-shadow: none;
  transition: none;
  display: flex;
  flex-direction: column;
  box-shadow: var(--debug-box-shadow);
}
.info-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.info-card-title {
  font-size: 1rem;
  font-weight: bold;
  color: inherit;
  box-shadow: var(--debug-box-shadow);
}
.info-card-value {
  font-size: 1rem;
  font-weight: bold;
  color: inherit;
  box-shadow: var(--debug-box-shadow);
}
.info-card-icon {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
  box-shadow: var(--debug-box-shadow);
}
/* ==============================================================
   地圖頁
============================================================== */
#map-base-layer {
  width: 100%;
  height: 100%;
  box-shadow: var(--debug-box-shadow);
  position: absolute; inset: 0;
  z-index: 0;
  cursor:pointer;
}
.map-tile-layer {
  filter: var(--color-filter-map);
}
.map-ctrl {
  /* position: absolute;
  width: calc(100% - 2rem); */
  position: relative;
  width: 100%;
  background: var(--color-bg-1);
  padding: 0.5rem;
  border-radius: 0.375rem;
  display: flex;
  gap: 0.5rem;
  overflow: auto;
  box-shadow: var(--debug-box-shadow);
  /* justify-content: center; */
}
.map-ctrl-address-container {
  height: 2rem;
  align-items: center;
  min-width: 0; /* 避面溢出*/
  flex: 1;
  display:flex;
  background: var(--color-bg-2);
  vertical-align: auto;
  border-radius: 0.375rem;
  position: relative;
  box-shadow: var(--debug-box-shadow);
}
.map-ctrl-input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-fg-1);
  font-size: 1rem;
  height: 2rem;
  min-width: 0;
  flex: 1;
  padding: 0 0.25rem;
  box-shadow: var(--debug-box-shadow);
}
.map-ctrl-input::placeholder {
  color: var(--color-fg-2);
}
.map-addr-btn {
  width: 2rem;
  height: 2rem;
  border: none;
  color: var(--color-fg-1);
  background: transparent;
  box-shadow: var(--debug-box-shadow);
  font-size: 1rem;
}
.map-ctrl-btn {
  width: 2rem;
  height: 2rem;
  color: var(--color-func-fg-active);
  background: var(--color-func-bg-active);
  border: none;
  border-radius: 0.375rem;
  font-size: 1rem;
  box-shadow: var(--debug-box-shadow);
}
.map-nfz-info-container {
  position: relative;
  margin: 0.5rem 0 0 auto;
  background: var(--color-bg-1);
  border-radius: 0.375rem;
  padding: 0.5rem;
  box-shadow: var(--debug-box-shadow);
  width: 75%;
  max-width: 20rem;
  max-height: calc(100% - 4rem);
  overflow-y: auto;
  gap: 0.5rem;
  display: flex;
  flex-direction: column;
}
.map-nfz-info-card.is-open .chevron{
  transform: rotate(180deg);
}
.map-nfz-info-card-button .chevron{
  font-size: 0.75rem;
  color: var(--color-fg-2);
  box-shadow: var(--debug-box-shadow);
  transition: transform .2s ease;
}
.map-nfz-info-card-button{
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
  height: 2rem;
  background: var(--color-bg-2);
  border: 0;
  font-size: 0.85rem;
  font-weight: bold;
  box-shadow: var(--debug-box-shadow);
  align-items: center;
  gap: .5rem;
}
.map-nfz-info-card-title{
  flex: 1;
  text-align: left;
  color: var(--color-fg-1);
  box-shadow: var(--debug-box-shadow);
}
.map-nfz-info-card-content {
  padding: 0.5rem;
  background: var(--color-bg-1);
  border-left: 0.25rem solid var(--color-bg-2);
  box-shadow: var(--debug-box-shadow);
  font-size: 0.75rem;
}

/* ==============================================================
   設定頁
============================================================== */
#setting-tab {
  overflow: auto; /* allow scroll */
}
.setting-card {
  background: var(--color-bg-1);
  border: 0.125rem solid var(--color-border);
  border-radius: 0.75rem;
  margin: 0 auto 0.5rem;
  box-shadow: var(--debug-box-shadow);
  max-width: var(--max-width);
}
.setting-card.is-open .setting-card-button{
  border-bottom: 0.125rem solid var(--color-border); /* 分隔線 */
}
.setting-card.is-open .setting-button-icon.chevron {
  transform: rotate(180deg);
}
.setting-card-button{
  width: 100%;
  display: flex;
  justify-content:space-between;
  padding: 1rem;
  background: transparent;
  border:0;
  /* border-radius: 0.75rem; */
  /* box-shadow: var(--debug-box-shadow); */
}
.setting-card-button-title{
  margin: 0;
  font-size:1.125rem;
  color: var(--color-fg-1);
  font-weight: bold;
  line-height: 1.5;
}
.setting-func-button{
  width: 100%;
  display: flex;
  justify-content:space-between;
  padding: 1rem;
  background: var(--color-bg-1);
  border: 0.125rem solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow: var(--debug-box-shadow);
  max-width: var(--max-width);
  margin: 0 auto 0.5rem;
}
.setting-button-icon {
  font-size: 1.125rem;
  color: var(--color-fg-2);
  transition: transform .2s ease;
}
.setting-card-content{
  padding: 1rem;
  font-size:1rem;
}
.setting-preference-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: .5rem;
  align-items: center;
}
.setting-preference-label {
  pointer-events: none;
  box-shadow: var(--debug-box-shadow);
}


/* 右側容器，讓自訂下拉留在同一格 */
/* .setting-preference-item{
  width:100%;
} */
/* 外框：flex 讓左顯示區與右箭頭同列 */
.custom-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .25rem .5rem;
  border: 1px solid var(--color-border);
  border-radius: .25rem;
  background: var(--color-bg-1);
  color: var(--color-fg-1);
}

/* 顯示區（放 placeholder / pill） */
.custom-dropdown-display {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  flex: 1 1 auto;
  /* min-height: 1.5rem; */
  /* align-items: center; */
}

/* 右側 chevron：靠右、可旋轉 */
.custom-dropdown .chevron {
  margin-left: auto;
  font-size: 1rem;
  transition: transform .2s ease;
  pointer-events: none; /* 點擊落到外框 */
}
.custom-dropdown.is-open .chevron { transform: rotate(180deg); }

/* 下拉清單 */
.custom-dropdown-list {
  position: absolute;
  inset: auto 0 0 0;
  transform: translateY(100%);
  margin-top: .25rem;
  z-index: 1000;
  background: var(--color-bg-2);
  color: var(--color-fg-1);
  border-radius: .25rem;
  overflow: auto;
  width: 100%;
}

/* 每列（唯一可點目標） */
.custom-dropdown-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem;
  cursor: pointer;
}
.custom-dropdown-label {
  pointer-events: none; /* 純顯示，不攔截點擊 */
}

/* checkbox 外觀 */
.custom-dropdown-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: .25rem;
  background-color: var(--color-bg-1);
  pointer-events: none; /* 純顯示，不攔截點擊 */
}
.custom-dropdown-checkbox:checked {
  background-color: var(--color-fg-2);
}








/* -----------------------*/
/* Custom Horizontal Picker Styles */
/* 基礎樣式 */
/* .cp-root { position: relative; } */

.cp-track{
  display: flex;
  align-items: center;
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  user-select: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  touch-action: pan-x pinch-zoom;
  padding-top: .5rem;
  padding-bottom: .5rem;
}
/* .cp-track::-webkit-scrollbar { display: none; } */
.cp-track[data-dragging="true"]{ scroll-snap-type: none; cursor: grabbing; }

.cp-option{
  display: grid;
  place-items: center;
  background: var(--color-bg-2);
  color: var(--color-fg-1);
  scroll-snap-align: center;
  /* font-weight: 600; */
  /* letter-spacing: .5px; */
  border: none;
  outline: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
  -webkit-tap-highlight-color: transparent;
  flex: 0 0 auto;       /* ← 自動寬度 */
  padding: .25rem .75rem;
  border-radius: .5rem;
  white-space: nowrap;  /* 不換行 */
  scroll-snap-align: center;
  font-size: 1rem;
}
/* 按下或拖曳期間停用轉場避免閃爍 */
.cp-option:active{ transition: none; }
.cp-track[data-pressing="true"] .cp-option{ transition: none; }

.cp-option[aria-selected="true"]{
  font-weight: bold;
  background: var(--color-func-bg-active);
  color: var(--color-func-fg-active);
  /* transform: scale(1.06); */
}



/* 保險：確保 cp-root 能拿到寬度 */
.info-time-date-bar .cp-root{ width: 100%; }