/**
 * 設計風格 (Design Style) — "cyber"：藍黑霓虹
 * 網址：/display/cyber.html、/display/room.html?id=…&theme=cyber
 *
 * 色值與交通顯示系統 (port 3100) 的 css/theme-cyber.css 一致，
 * 兩塊告示牌並排時屬同一套設計。版面與 default 完全相同 —
 * 本檔只覆寫顏色與少量發光效果。
 *
 * 前半為調色板 (對應 theme-default.css 的同名變數)，
 * 後半為 display.css 中寫死顏色的位置所需的針對性覆寫。
 */

:root[data-theme='cyber'] {
  /* ── 霓虹色板 ── */
  --cy-void: #04070f;
  --cy-deep: #070d1a;
  --cy-panel: #0b1424;
  --cy-panel-2: #101c31;
  --cy-cyan: #00e5ff;
  --cy-violet: #8b6cff;
  --cy-magenta: #ff3d8b;
  --cy-green: #00ffa3;

  /* 等寬字體：時鐘與倒數對齊且更有機械感，離線時回退至系統等寬字體 */
  --font-mono: 'Cascadia Mono', Consolas, ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── 對應共用變數 ──
     注意：深色底上的「-dark」變體要比本色更亮才看得見，故與淺色風格相反。 */
  --lnu-red: var(--cy-magenta);
  --lnu-red-dark: #ff7ab3;
  --lnu-ink: #060b16;
  --lnu-lime: var(--cy-green);
  --lnu-slate: #4a6b93;

  --surface: var(--cy-panel);
  --surface-muted: var(--cy-panel-2);
  --canvas: var(--cy-deep);
  --line: #1c3352;
  --line-strong: #2a4d7a;

  --ink-strong: #e6f3ff;
  --ink-body: #a9c6e6;
  --ink-soft: #6d8db3;

  /* ── 房間狀態色 ──
     可使用＝霓虹綠，使用中＝霓虹洋紅，與 3100 的「即將到站／已到站」同一組訊號色。 */
  --available: var(--cy-green);
  --available-bg: rgba(0, 255, 163, 0.12);
  --occupied: var(--cy-magenta);
  --occupied-bg: rgba(255, 61, 139, 0.14);

  /* 霓虹色極亮，狀態標籤改用深色字才有足夠對比 (白字只有約 3:1) */
  --on-status: #04070f;
}

/* ═══ 底層網格 ═══
   固定於畫面底部的青色格線，透過內容之間的空隙透出。
   內容需提升至網格之上，否則定位過的 ::before 會蓋住它們。 */
:root[data-theme='cyber'] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.06) 1px, transparent 1px);
  background-size: 52px 52px;
}

:root[data-theme='cyber'] body > * {
  position: relative;
  z-index: 1;
}

/* 邊框狀態燈須維持在最上層 (display.css 已設 z-index:50) */
:root[data-theme='cyber'] .edge-glow {
  z-index: 50;
}

/* ═══ 頁首 ═══ */
:root[data-theme='cyber'] .display-header {
  background: rgba(6, 12, 24, 0.92);
  /* 分隔線改用青→紫→洋紅霓虹，取代淺色風格的品牌紅實線 */
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--cy-cyan) 0%, var(--cy-violet) 50%, var(--cy-magenta) 100%) 1;
}

:root[data-theme='cyber'] .display-header .brand-kicker {
  color: var(--cy-cyan);
}

:root[data-theme='cyber'] .display-header h1 {
  letter-spacing: 0.04em;
  text-shadow: 0 0 18px rgba(0, 229, 255, 0.4);
}

/* 時鐘方塊在 display.css 中寫死為白底 */
:root[data-theme='cyber'] .display-header .clock-block {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: inset 0 0 24px rgba(0, 229, 255, 0.06);
}

:root[data-theme='cyber'] .clock-time {
  font-family: var(--font-mono);
  text-shadow: 0 0 16px rgba(0, 229, 255, 0.45);
}

/* ═══ 一覽頁 ═══ */
:root[data-theme='cyber'] .area-title {
  border-bottom-color: var(--cy-cyan);
  text-shadow: 0 0 14px rgba(0, 229, 255, 0.3);
}

:root[data-theme='cyber'] .room-tile {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.04) 0%, transparent 60%), var(--surface);
  border-color: var(--line);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.45);
}

:root[data-theme='cyber'] .room-tile:hover {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.1) 0%, transparent 60%), var(--surface-muted);
}

:root[data-theme='cyber'] .room-tile:active {
  background: var(--surface-muted);
}

/* 狀態標籤：霓虹底 + 深色字，並加光暈令遠距離一眼分辨 */
:root[data-theme='cyber'] .room-tile-status.available,
:root[data-theme='cyber'] .status-pill.available {
  box-shadow: 0 0 16px rgba(0, 255, 163, 0.45);
}

:root[data-theme='cyber'] .room-tile-status.occupied,
:root[data-theme='cyber'] .status-pill.occupied {
  box-shadow: 0 0 16px rgba(255, 61, 139, 0.45);
}

/* ═══ 單一房間頁 ═══ */
:root[data-theme='cyber'] .status-hero {
  border-color: var(--line);
  border-left-color: var(--line-strong);
}

:root[data-theme='cyber'] .status-hero.occupied {
  border-color: rgba(255, 61, 139, 0.45);
  border-left-color: var(--occupied);
}

:root[data-theme='cyber'] .status-hero.available {
  border-color: rgba(0, 255, 163, 0.4);
  border-left-color: var(--available);
}

:root[data-theme='cyber'] .status-countdown strong {
  font-family: var(--font-mono);
  text-shadow: 0 0 18px rgba(0, 229, 255, 0.45);
}

:root[data-theme='cyber'] .info-panel {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.04) 0%, transparent 55%), var(--surface);
  border-color: var(--line);
  box-shadow: 0 0 26px rgba(0, 0, 0, 0.5);
}

:root[data-theme='cyber'] .panel-title {
  color: var(--cy-cyan);
  border-bottom-color: rgba(0, 229, 255, 0.28);
}

/* ─── 螢幕邊框狀態燈 ───
   光暈色在 display.css 中寫死為品牌紅／橄欖綠，需換成霓虹色並加強。 */
:root[data-theme='cyber'] .edge-glow.occupied {
  box-shadow:
    inset 0 0 0 7px var(--occupied),
    inset 0 0 34px 5px rgba(255, 61, 139, 0.45);
}

:root[data-theme='cyber'] .edge-glow.available {
  box-shadow:
    inset 0 0 0 7px var(--available),
    inset 0 0 30px 5px rgba(0, 255, 163, 0.3);
}

/* ═══ 錯誤頁 ═══ */
:root[data-theme='cyber'] .room-error a {
  box-shadow: 0 0 18px rgba(255, 61, 139, 0.4);
}