/* =========================================================
 * style.css：深藍科技風格
 * 顏色都集中在最上面的 :root，想換顏色只要改這裡
 * ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap");

:root {
  --bg: #06101f;              /* 最底層背景：深藍 */
  --panel: rgba(10, 32, 60, 0.72);   /* 玻璃面板底色 */
  --line: rgba(90, 210, 255, 0.45);  /* 面板發光邊框 */
  --glow: rgba(0, 180, 255, 0.35);   /* 外發光 */
  --text: #dcecff;            /* 一般文字 */
  --muted: #8aa4c4;           /* 次要文字 */
  --cyan: #38d6ff;
  --pink: #f06b9a;            /* 例行性 */
  --orange: #ffb020;          /* 臨時性 */
  --green: #3fe0a8;
  --purple: #b18cff;
  --red: #ff4d4d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
  font-size: 14px;
  color: var(--text);
  /* 深藍底加上幾個柔和的藍色光暈，做出科技感 */
  background:
    radial-gradient(circle at 15% 85%, rgba(0, 150, 255, 0.18), transparent 35%),
    radial-gradient(circle at 85% 10%, rgba(0, 120, 255, 0.15), transparent 40%),
    var(--bg);
  min-height: 100vh;
}

a { color: var(--cyan); }

/* ===== 頁首 ===== */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px 0 0;
  background: linear-gradient(90deg, #0a1a33, #0d4fa8 45%, #0a2a5c);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 20px var(--glow);
}

/* 左上角公司標誌 */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: #000;
  color: #fff;
  text-decoration: none;
}
.logo-mark {
  font-size: 30px;
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan);
}
.logo-text { font-size: 30px; font-weight: 700; letter-spacing: 2px; line-height: 1; }
.logo-text small { display: block; font-size: 9px; letter-spacing: 1px; text-align: center; margin-top: 4px; }

.title h1 { margin: 0; font-size: 28px; letter-spacing: 2px; }
.title p { margin: 2px 0 0; color: #bcd6ff; }

/* 右上角的膠囊（使用者、日期） */
.pills { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}
.theme-btn { cursor: pointer; color: var(--text); font: inherit; }
.pill input {
  width: 110px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}
.pill input:focus { outline: none; }

/* ===== 左右兩欄 ===== */
.layout { display: flex; align-items: flex-start; gap: 20px; padding: 20px; }

.sidebar {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 左側的膠囊按鈕 */
.nav-btn, .notice-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 8px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(180deg, #1a2b45, #0e1a2e);
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.nav-btn:hover, .nav-btn.active {
  border-color: var(--cyan);
  box-shadow: 0 0 14px var(--glow);
}
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 16px;
}

/* 管理中心小框 */
.admin-box {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.admin-box h2 { margin: 0 0 6px; font-size: 16px; }
.admin-box a {
  display: block;
  padding: 3px 0 3px 12px;
  color: var(--text);
  text-decoration: none;
}
.admin-box a::before { content: "▸ "; color: var(--cyan); margin-left: -12px; }
.admin-box a:hover, .admin-box a.active { color: var(--cyan); }

/* 下方兩個須知按鈕 */
.notice-btn.green { background: linear-gradient(180deg, #5ff0bf, #22b884); color: #04261a; font-weight: 700; }
.notice-btn.yellow { background: linear-gradient(180deg, #ffd25a, #f0a400); color: #3a2400; font-weight: 700; }
.notice-btn .icon { background: rgba(0, 0, 0, 0.75); color: #fff; font-weight: 700; }

/* ===== 主要內容區 ===== */
.content { flex: 1; min-width: 0; }

/* 一次只顯示一個頁面，script.js 會幫目前頁面加上 active */
.page { display: none; }
.page.active { display: block; }

/* 首頁的區塊與其他頁面，都用「玻璃面板」外觀 */
.box, .page:not(#page-home) {
  padding: 16px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 0 18px var(--glow), inset 0 0 20px rgba(0, 150, 255, 0.08);
}

.page-title, .box-title { margin: 0 0 12px; font-size: 20px; }
.box-title small { font-size: 14px; color: var(--muted); font-weight: 400; }
.scroll { overflow-x: auto; }

.box-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.box-buttons { display: flex; gap: 10px; }

/* 發光的大按鈕 */
.glow-btn {
  padding: 8px 20px;
  border: 0;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.glow-btn.green { background: linear-gradient(180deg, #6ff5c6, #2cc28d); color: #03281b; box-shadow: 0 0 14px rgba(63, 224, 168, 0.5); }
.glow-btn.purple { background: linear-gradient(180deg, #c9b0ff, #8f6af0); color: #1b0a40; box-shadow: 0 0 14px rgba(177, 140, 255, 0.5); }

/* ===== 表格 ===== */
table.list { width: 100%; border-collapse: collapse; }
.list th, .list td {
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.list th { background: rgba(255, 255, 255, 0.06); color: #cfe0f7; font-weight: 500; }
.list tbody tr:hover { background: rgba(56, 214, 255, 0.06); }
.list .empty { color: var(--muted); padding: 30px; font-size: 18px; }
.stat tr.sum td { background: rgba(56, 214, 255, 0.1); font-weight: 700; }

/* ===== 今日會議狀況：時間軸 ===== */
.legend { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: middle; margin-right: 3px; }
.dot.fixed { background: var(--pink); }
.dot.temp { background: var(--orange); }

/* 右邊和下面留空間，放最後一個刻度「18」與「目前時間」文字 */
.timeline { position: relative; min-width: 640px; padding: 0 16px 22px 0; }
.tl-row { display: flex; height: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.tl-head { height: 26px; border-bottom: 0; }
.tl-name { width: 110px; flex-shrink: 0; padding-right: 12px; text-align: right; line-height: 32px; }

/* 每一列的時間軌道，背景畫上每小時一條的細線 */
.tl-track {
  position: relative;
  flex: 1;
  background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px calc(100% / 9));
}
.tl-head .tl-track { background: none; }
.tl-hour { position: absolute; top: 4px; transform: translateX(-50%); color: var(--muted); }

/* 一場會議 = 一條色條，左邊有一顆圓點 */
.tl-bar { position: absolute; top: 10px; height: 12px; border-radius: 6px; }
.tl-bar::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: inherit;
  box-shadow: 0 0 8px currentColor;
}
/* 每間會議室一種顏色：c0 粉紅（Venus）、c1 藍（Earth）、c2 橘（Sun） */
.tl-row.c0 { --room: #f06b9a; --room-soft: rgba(240, 107, 154, 0.12); }
.tl-row.c1 { --room: #4aa8f0; --room-soft: rgba(74, 168, 240, 0.12); }
.tl-row.c2 { --room: #ffb020; --room-soft: rgba(255, 176, 32, 0.12); }
.tl-bar { color: var(--room); background: var(--room); }
/* 軌道底下再鋪一條淡淡的同色底，對應參考圖 */
.tl-row.c0 .tl-track, .tl-row.c1 .tl-track, .tl-row.c2 .tl-track {
  background-image:
    linear-gradient(var(--room-soft), var(--room-soft)),
    repeating-linear-gradient(to right, rgba(128, 160, 200, 0.18) 0 1px, transparent 1px calc(100% / 9));
  background-size: 100% 14px, 100% 100%;
  background-position: 0 9px, 0 0;
  background-repeat: no-repeat, no-repeat;
}

/* 紅色「目前時間」直線 */
.tl-now { position: absolute; top: 22px; bottom: 0; width: 2px; background: var(--red); box-shadow: 0 0 6px var(--red); }
.tl-now span { position: absolute; bottom: 2px; left: 6px; color: var(--red); font-size: 12px; white-space: nowrap; }

/* ===== 表單 ===== */
.form fieldset {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.15);
}
.form .row { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 8px; }
.form .wide { flex: 1; }
.form .wide input { width: 70%; }
.form .block { display: block; margin-top: 8px; }
.form .block textarea, .form .block input { width: 100%; }
.form em { color: var(--red); font-style: normal; }   /* 必填的紅色星號 */
.form p { margin: 8px 0 4px; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.short { width: 70px; }

/* 輸入框、下拉選單、文字區塊都改成深色 */
input[type=text], input[type=date], input[type=number], select, textarea {
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font: inherit;
  color-scheme: dark;   /* 讓日期選擇器也變深色 */
}

.buttons { text-align: center; margin-top: 12px; }
button {
  padding: 6px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(56, 214, 255, 0.12);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
button:hover { background: rgba(56, 214, 255, 0.25); }

/* ===== 查詢條件列 ===== */
.filter { margin-bottom: 12px; line-height: 2.4; }
.hint { color: var(--muted); font-size: 13px; }

/* ===== 會議詳細 ===== */
.detail { line-height: 2; }
.detail b { display: inline-block; min-width: 90px; color: var(--cyan); font-weight: 500; }
.detail hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }

/* ===== 會議室維護：已隱藏區塊 ===== */
.hidden-rooms { margin-top: 12px; }
.hidden-rooms summary { cursor: pointer; color: var(--muted); padding: 6px 0; }

/* ===== 停車預約 ===== */
.sub-title { margin-top: 24px; font-size: 17px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }   /* 兩欄排列的表單 */
.notes { padding-left: 18px; line-height: 1.9; }
.notes .warn { color: var(--red); }

.calendar-head { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 16px 0 8px; font-size: 17px; }
.calendar { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 4px; }
.cal-week { text-align: center; padding: 6px 0; color: var(--muted); font-weight: 700; }
.cal-day {
  min-height: 90px;
  padding: 4px;
  border: 1px solid rgba(128, 160, 200, 0.2);
  border-radius: 8px;
}
.cal-day.empty { border: 0; }
.cal-day.today { border-color: var(--cyan); box-shadow: 0 0 8px var(--glow); }
.cal-num { text-align: right; color: var(--muted); font-size: 12px; }
.cal-item { margin-top: 4px; padding: 4px 6px; border-radius: 6px; font-size: 12px; line-height: 1.5; color: #fff; }
.cal-item.c0 { background: rgba(150, 120, 220, 0.75); }   /* 第 1 個車位：紫色 */
.cal-item.c1 { background: rgba(240, 107, 154, 0.75); }   /* 第 2 個車位：粉紅 */

/* ===== 須知頁面 ===== */
.rules { line-height: 2.2; font-size: 15px; }

/* ===== 狀態文字顏色 ===== */
.st-待審核 { color: var(--orange); }
.st-核可 { color: var(--green); }
.st-駁回, .st-取消 { color: var(--muted); }
.st-協調中 { color: var(--purple); font-weight: 700; }

/* ===== 時段衝突提醒視窗 ===== */
.conflict-dialog {
  max-width: 520px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 0 24px var(--glow);
  backdrop-filter: blur(6px);
}
.conflict-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }   /* 視窗後面的半透明黑底 */
.conflict-dialog h3 { margin: 0 0 10px; color: var(--orange); }
.conflict-dialog ul { padding-left: 18px; line-height: 1.8; }
.coordinate-btn { border-color: var(--purple); }
[data-theme="light"] .conflict-dialog { background: #fff; }

/* 審核頁：協調中的會議下方顯示跟誰衝突 */
.clash { color: var(--purple); font-size: 12px; }

/* ===== 手機等窄螢幕：左側選單改到上方 ===== */
@media (max-width: 800px) {
  .topbar { flex-wrap: wrap; padding: 0 0 12px; }
  .title { padding: 12px 16px 0; }
  .pills { margin: 0 16px; }
  .list th, .list td { white-space: nowrap; }   /* 窄螢幕時表格改成左右滑動，不擠成直排 */
  .layout { flex-direction: column; align-items: stretch; padding: 12px; }
  .sidebar { width: 100%; }
  .grid2 { grid-template-columns: 1fr; }
}

/* =========================================================
 * 淺色版面：<html data-theme="light"> 時套用
 * 只覆蓋顏色，版面位置都和深色版一樣
 * ========================================================= */
[data-theme="light"] {
  --bg: #eef3f9;
  --panel: #ffffff;
  --line: rgba(120, 160, 210, 0.35);
  --glow: rgba(80, 130, 200, 0.18);
  --text: #1d2b3a;
  --muted: #6b7c90;
  --cyan: #1f6fd1;
}
[data-theme="light"] body {
  background:
    radial-gradient(circle at 10% 90%, rgba(80, 160, 255, 0.18), transparent 35%),
    var(--bg);
}
[data-theme="light"] .topbar { background: #ffffff; border-bottom: 1px solid #d6e2f0; box-shadow: 0 2px 10px rgba(0, 40, 90, 0.08); }
[data-theme="light"] .logo { background: transparent; color: #0f2a4a; }
[data-theme="light"] .logo-text small { color: #2aa56b; }
[data-theme="light"] .title p { color: var(--muted); }
[data-theme="light"] .pill { background: #f2f7fd; border-color: #d6e2f0; box-shadow: 0 1px 4px rgba(0, 40, 90, 0.1); }

/* 左側：淡藍色底的群組，按鈕是白色 */
[data-theme="light"] .nav-btn { background: #ffffff; color: var(--text); border-color: #d6e2f0; box-shadow: 0 1px 4px rgba(0, 40, 90, 0.08); }
[data-theme="light"] .nav-btn .icon { background: #dbe8f8; }
[data-theme="light"] .nav-btn.active, [data-theme="light"] .nav-btn:hover { border-color: #1f6fd1; box-shadow: 0 0 10px rgba(31, 111, 209, 0.25); }
[data-theme="light"] .admin-box { background: #e3edf8; }

[data-theme="light"] .box, [data-theme="light"] .page:not(#page-home) { box-shadow: 0 4px 18px rgba(0, 40, 90, 0.08); }
[data-theme="light"] .list th { background: #e8f0fa; color: var(--text); }
[data-theme="light"] .list th, [data-theme="light"] .list td { border-bottom-color: #e3eaf3; }
[data-theme="light"] .tl-row { border-bottom-color: #e3eaf3; }
[data-theme="light"] .tl-track { background: repeating-linear-gradient(to right, #e3eaf3 0 1px, transparent 1px calc(100% / 9)); }
[data-theme="light"] .tl-head .tl-track { background: none; }

[data-theme="light"] .form fieldset { background: #f7fafd; border-color: #d6e2f0; }
[data-theme="light"] input[type=text], [data-theme="light"] input[type=date],
[data-theme="light"] input[type=number], [data-theme="light"] select, [data-theme="light"] textarea {
  background: #ffffff;
  border-color: #c9d7e8;
  color-scheme: light;
}
[data-theme="light"] .pill input { background: transparent; border: 0; }
[data-theme="light"] button { background: #eaf2fc; }
[data-theme="light"] .glow-btn.green { color: #fff; background: linear-gradient(180deg, #34c79a, #12936b); }
[data-theme="light"] .glow-btn.purple { color: #fff; background: linear-gradient(180deg, #a98af5, #7a55e0); }
[data-theme="light"] .notice-btn.green { color: #fff; background: linear-gradient(180deg, #34c79a, #12936b); }
[data-theme="light"] .notice-btn.yellow { color: #fff; background: linear-gradient(180deg, #e8b04a, #c98a1a); }