/* ===================== 基底與主題 ===================== */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; overscroll-behavior: none; }
:root{
  --brand:#0a6dca; --brand-dark:#065aa8;
  --ok:#10b981; --error:#ef4444;
  --glass:rgba(255,255,255,.18); --glass-2:rgba(255,255,255,.22);
  --radius:1.2rem; --shadow:0 12px 32px rgba(0,0,0,.28);
}

body{
  font-family:"Noto Sans TC",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:#fff;
  /* 不再讓背景圖參與排版高度 */
  background:none;
  overflow-x:hidden;
  padding-top:50px;
}
/* 背景圖→獨立固定層，不占版面高度，所以不會撐出底部空白 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url('/圖片/DSC_1999.webp');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  /* 柔光：看起來更乾淨 */
  filter:saturate(1.05);
}

/* 手機上避免 GPU 抖動 */
@media (max-width: 1024px){
  body::before{ background-attachment:scroll; }
}

/* ===================== 導覽列 ===================== */
.main-navbar{
  position:fixed; top:0; width:100%;
  background-color:rgb(255, 72, 0);
  padding:.2rem 1.5rem; z-index:9999;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.nav-container{ display:flex; justify-content:space-between; align-items:center; max-width:1200px; margin:0 auto; }
.nav-left .logo{ height:50px; display:block; }
.nav-right{ display:flex; align-items:center; }
.nav-right a{ color:#fff; text-decoration:none; margin-left:1.2rem; font-weight:700; transition:color .25s; }
.nav-right a:hover{ color:#63e6be; }

/* ===================== Hero ===================== */
.hero-section{
  text-align:center;
  padding:1.2rem 1rem;
  background:var(--glass);
  backdrop-filter:blur(10px);
  border-radius:var(--radius);
  margin:1rem auto .6rem;        /* 下外距縮小 */
  max-width:400px;
  box-shadow:var(--shadow);
}
.hero-section h1{
  font-size:2rem; font-weight:700; letter-spacing:.01em;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}

/* ===================== 卡片 ===================== */
.camera-card{
  background:var(--glass);
  backdrop-filter:blur(12px);
  padding:1.3rem;
  border-radius:calc(var(--radius) + .3rem);
  margin:.9rem auto .6rem;       /* 下外距縮小，避免尾端白邊 */
  width:min(95%,1100px);
  box-shadow:var(--shadow);
  border:1px solid var(--glass-2);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.camera-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(0,0,0,.32);
  border-color:rgba(255,255,255,.35);
}
.camera-card h2{
  margin:.2rem 0 .8rem; text-align:center; font-size:1.35rem; font-weight:900;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}

/* ===================== 表格 ===================== */
.table-wrap{
  width:100%;
  overflow:auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:var(--shadow);
  background:rgba(17,24,39,.85);    /* 深色底讓字更清楚 */
}
.nice-table{ width:100%; border-collapse:collapse; color:#f1f5f9; }
.nice-table thead th{
  position:sticky; top:0;
  background:#f13d06; color:#fff; text-align:center;
  padding:.7rem .6rem; font-weight:800; letter-spacing:.02em;
}
.nice-table td, .nice-table th{
  border-left:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:.65rem .6rem; text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.nice-table tbody tr:nth-child(odd){ background:rgba(255,255,255,.05); }
.nice-table tbody tr:hover{ background:rgba(255,255,255,.15); transition:.2s; }

/* ===================== 狀態 badge ===================== */
.badge{
  display:inline-block; min-width:5.5em;
  padding:.28rem .6rem; border-radius:999px;
  font-weight:800; font-size:.9rem; letter-spacing:.01em; color:#fff;
}
.badge.outbound{ background:linear-gradient(135deg,#3b82f6,#1d4ed8); }
.badge.arrived { background:linear-gradient(135deg,#10b981,#047857); }
.badge.hospital{ background:linear-gradient(135deg,#fbbf24,#b45309); color:#111; }
.badge.back    { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
.badge.return  { background:linear-gradient(135deg,#60a5fa,#2563eb); }
.badge.other   { background:#6b7280; }

/* ===================== 按鈕 ===================== */
.pill-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.52rem 1.1rem;
  border-radius:999px; border:none; cursor:pointer;
  background:linear-gradient(135deg,#e67d06,#e60404);
  color:#fff; font-weight:800; letter-spacing:.02em;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:transform .2s, box-shadow .25s, background .3s;
}
.pill-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.32);
  background:linear-gradient(135deg,#e67d06,#e60404);
}

/* ===================== 訪問人數（內容底部，置中顯示） ===================== */
#visitor-count{
  display: inline-block;
  padding: .55rem 1.15rem;
  margin: 1.25rem auto 2.25rem; /* 上間距 1.25rem，下方留空 2.25rem (可調) */
  background: rgba(17,24,39,.65);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transition: transform .25s, background .25s;
  /* 取消固定定位，回到內容流 */
  position: static;
  left: auto;
  transform: none;
  z-index: auto;
  text-align: center;
}

/* 手機版可再調整間距，避免被下方工具列遮擋 */
@media (max-width: 768px){
  #visitor-count{
    margin: 1rem auto 3.5rem; /* 手機下方多留點空間 */
    font-size: 14px;
    padding: .45rem .95rem;
  }
}

/* 桌機 hover 效果（可保留） */
#visitor-count:hover{
  background: rgba(17,24,39,.85);
  transform: scale(1.02);
}

#visitor-count:hover{ transform:translateX(-50%) translateY(-2px); background:rgba(17,24,39,.78); }

/* ===================== 版尾空白的保險 ===================== */
/* 主內容底部內距很小 */
main.main-content{ padding-bottom:.2rem; }
/* 主內容最後一個直屬子元素不可再有下外距 */
main.main-content > :last-child{ margin-bottom:0 !important; }

/* ===================== 小尺寸優化 ===================== */
@media (max-width:520px){
  /* ⚡ 修正：僅對表格非 no-data-row 的列隱藏第一欄 */
  .nice-table tbody tr:not(.no-data-row) td:nth-child(1), 
  .nice-table thead th:nth-child(1){ 
    display:none; 
  }

  /* ⚡ 修正：讓無資料訊息列的 td 完整顯示 */
  .nice-table tbody tr.no-data-row td {
    display: table-cell !important;
    text-align: center !important;
  }
  
  .nice-table td, .nice-table th{ font-size:.9rem; padding:.55rem .5rem; }
}
main.main-content > :last-child {
  margin-bottom: 0 !important;
}

#visitor-count {
  margin-bottom: 0.5rem !important;
}
/* 修正：彩帶畫布不佔版面高度，避免頁面多出可捲區域 */
#confetti{
  position: fixed;      /* 從「排版元素」改為「固定覆蓋層」 */
  inset: 0;             /* 佔滿整個視窗 */
  z-index: 50;          /* 在內容之上、導覽之下依需求可調 */
  pointer-events: none; /* 不阻擋點擊 */
  display: block;       /* 避免瀏覽器將其當 inline 導致微小空隙 */
}
/* 119.css */
/* 既有規則（保留）：小螢幕隱藏第 1 欄 */
@media (max-width:520px){
  .nice-table td:nth-child(1),
  .nice-table th:nth-child(1){ display:none; }

  /* 例外：無資料訊息列 － 強制顯示整格 */
  .nice-table tbody tr.no-data td{
    display: table-cell !important;
    text-align: center;
  }
}

/* ========== Modal 視窗 ========== */
.modal {
  display: none; /* 預設隱藏 */
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}

/* ========== Modal 視窗 ========== */
.modal {
  display: none; /* 預設隱藏 */
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}

/* Modal 內容 */
.modal-content {
  background: rgba(17,24,39,.95);
  margin: 5% auto;
  padding: 1rem 1.5rem;
  border-radius: 14px;
  width: min(95%, 900px);
  max-height: 90vh;       /* ⚡ 限制高度，不超過螢幕 */
  overflow-y: auto;       /* ⚡ 超過時可捲動 */
  color: #fff;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

/* 開啟 / 關閉動畫 */
.modal.show .modal-content {
  animation: modalFadeIn .35s ease forwards;
}
.modal.hide .modal-content {
  animation: modalFadeOut .25s ease forwards;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes modalFadeOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-20px) scale(0.95); }
}

/* 深色滾動條樣式 */
.modal-content::-webkit-scrollbar {
  width: 10px;
}
.modal-content::-webkit-scrollbar-track {
  background: transparent;
}
.modal-content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 6px;
}
.modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.4);
}

/* 關閉按鈕 */
.close-btn {
  float: right;
  font-size: 2rem;
  font-weight: 900;
  cursor: pointer;
  color: #fff;
  margin-top: -0.5rem;
}
.close-btn:hover {
  color: #f87171;
}
/* ---------- 手機: 只隱藏「最新案件」表的第1欄 (序號) ---------- */
@media (max-width:520px){
  /* 只對主要案件表隱藏序號（保留統計表） */
  #ptfd-119 td:nth-child(1),
  #ptfd-119 th:nth-child(1) {
    display: none;
  }

  /* 確保「無資料」訊息列仍完整顯示（如果有用到） */
  #ptfd-119 .no-data td {
    display: table-cell !important;
    text-align: center;
  }
}

/* ---------- 手機: 強制在統計卡顯示第1欄（月份） ---------- */
@media (max-width:520px){
  /* 讓統計表（card-119-stats）在小螢幕也顯示第一欄（月份） */
  #card-119-stats .nice-table th:nth-child(1),
  #card-119-stats .nice-table td:nth-child(1) {
    display: table-cell !important;
  }

  /* 小螢幕時避免內容換行太亂，讓表格可橫向滾動（.table-wrap 已有 overflow） */
  #card-119-stats .nice-table th,
  #card-119-stats .nice-table td {
    white-space: nowrap;
  }
}

/* 🟢 無案件狀態訊息置中美化 */
.nice-table .no-data-cell {
  text-align: center !important;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  color: #4AB28D;
  padding: 1.2rem 0;
  background: rgba(255,255,255,0.05);
  border: none !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ===================== 目前案件（資訊型樣式） ===================== */
#card-119 {
  position: relative;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.04)
    ),
    var(--glass);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 14px 32px rgba(0,0,0,0.28);
}

/* ❌ 移除即時監控標籤、燈條 */
#card-119::before,
#card-119::after {
  content: none !important;
}

/* 標題統一為資訊卡片風格 */
#card-119 h2 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  color: #ffffff;
}

/* 表頭回到「資訊站」色系 */
#card-119 .nice-table thead th {
  background: linear-gradient(135deg, #ff7a00, #ff9500);
  color: #fff;
  font-weight: 800;
}

/* 無案件狀態：冷靜、穩定 */
#card-119 .no-data-cell {
  color: #a7f3d0;
  font-weight: 700;
  letter-spacing: 0.04em;
}
#card-119-recent {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.03)
    ),
    var(--glass);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 12px 28px rgba(0,0,0,0.26);
}

#card-119-recent h2 {
  font-weight: 800;
  letter-spacing: 0.05em;
}