:root {
  --app-height: 100dvh;
  --max-width: 30rem;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #4a4a4a;
  --color-text-tertiary: #6b7280;
  --color-blue: #2563eb;
  --color-white: #ffffff;
  --color-link: #2563eb;
  --bg-primary: #ffffff;
  --bg-secondary: #f3f4f6;
  --border-color: #e5e7eb;
  /* 狀態顏色 */
  --status-good: #22c55e;
  --status-warning: #f59e0b;
  --status-danger: #ef4444;
  --status-neutral: #6b7280;
  /* 空域顏色 */
  --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;
}

* {
  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-text-primary);
  background-color: var(--bg-primary); /* 設定整體背景 */
  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-text-tertiary) 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(--bg-secondary);
  /* 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(--bg-primary);
  border-top: 0.125rem solid var(--border-color);
  /* 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-text-tertiary);
  background: none;
  border: none;
  gap: 0.25rem;
  box-shadow: var(--debug-box-shadow);
}
.nav-button:hover {
  color: var(--color-text-secondary);
}
.nav-button.active {
  color: var(--color-blue);
}
.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;
}


/* ==============================================================
   資訊頁
============================================================== */
.info-time {
  background: var(--bg-primary);
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--debug-box-shadow);
  gap: 0.5rem;
}
.info-time-date-bar {
  display: flex;
  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;
  background: var(--bg-secondary);
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  text-align: center;
}
.info-time-date-button.active {
  background: var(--color-blue);
  color: var(--color-white);
}
.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(--text-tertiary);
}
.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-left {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--text-primary);
}
.info-time-left i {
  font-size: 1rem;
}
.info-time-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
}

.info-time-now-button {
  padding: 0.3rem 0.6rem;
  background: var(--color-blue);
  color: var(--color-white);
  border: none;
  border-radius: 0.375rem;
  font-size: 1rem;
  /* cursor: pointer; */
}



.info-grid {
  display: grid;
  /* grid-template-columns: repeat(3, 1fr); */
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 等寬、不溢出 */
  gap: 0.75rem;
}
.info-card {
  background: var(--bg-primary);
  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: 0.75rem;
  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-layer {
  width: 100%;
  height: 100%;
  box-shadow: var(--debug-box-shadow);
  position: absolute; inset: 0;
  z-index: 0;
  cursor:pointer;
}
.map-control {
  /* position: absolute;
  width: calc(100% - 2rem); */
  position: relative;
  width: 100%;
  background: var(--bg-primary);
  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(--bg-secondary);
  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-text-secondary);
  font-size: 1rem;
  height: 2rem;
  min-width: 0;
  flex: 1;
  padding: 0 0.25rem;
  box-shadow: var(--debug-box-shadow);
}
.map-addr-btn {
  width: 2rem;
  height: 2rem;
  border: none;
  color: var(--color-text-primary);
  background: transparent;
  box-shadow: var(--debug-box-shadow);
  font-size: 1rem;
  box-shadow: var(--debug-box-shadow);
}
.map-ctrl-btn {
  width: 2rem;
  height: 2rem;
  background: var(--color-blue);
  color: var(--color-white);
  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(--bg-primary);
  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-text-secondary);
  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(--bg-secondary);
  border: 0;
  font-size: 0.85rem;
  font-weight: bold;
  box-shadow: var(--debug-box-shadow);
  align-items: center;
  gap: .5rem;
}

.map-nfz-info-card-button .item-title{
  flex: 1;
  text-align: left;
  color: var(--color-text-primary);
  box-shadow: var(--debug-box-shadow);
}

.map-nfz-info-card-content {
  padding: 0.5rem;
  background: var(--bg-primary);
  border-left: 0.25rem solid var(--bg-secondary);
  box-shadow: var(--debug-box-shadow);
  font-size: 0.75rem;
}

/* ==============================================================
   設定頁
============================================================== */
#setting-tab {
  overflow: auto; /* allow scroll */
}
.setting-card {
  background: var(--bg-primary);
  border: 0.125rem solid var(--border-color);
  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(--border-color); /* 分隔線 */
}
.setting-card.is-open .setting-button-icon{
  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-button-title{
  margin: 0;
  font-size:1.125rem;
  color: var(--color-text-primary);
  font-weight: bold;
  line-height: 1.5;
}
.setting-button-icon {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  transition: transform .2s ease;
}
.setting-content{
  padding: 1rem;
}

.setting-func-button{
  width: 100%;
  display: flex;
  justify-content:space-between;
  padding: 1rem;
  background: var(--bg-primary);
  border: 0.125rem solid var(--border-color);
  border-radius: 0.75rem;
  box-shadow: var(--debug-box-shadow);
  max-width: var(--max-width);
  margin: 0 auto 0.5rem;
}




/* 容器 */
#setting-preference {
  display: grid;
  grid-template-columns: minmax(0, 10rem) 1fr;
  column-gap: 1rem;
  row-gap: 0.75rem;
  align-items: center;
  padding: 1rem;
  background: transparent;
  /* border-radius: 0.5rem; */
  /* box-shadow: var(--debug-box-shadow); */
}



/* 清除 Slim Select 或瀏覽器的陰影與聚焦光暈 */
.ss-main,
.ss-main .ss-single,
.ss-main .ss-values,
.ss-list,
.ss-dropdown,
.form-select,
select {
  box-shadow: none !important;
}


/* 若要同時調整邊框顏色或去掉圓角 */
.ss-main,
.form-select {
  border: 0.125rem solid var(--border-color);
  border-radius: 0.375rem;
}