/**
 * T-Plus 會議室預訂顯示 — 版面骨架 (所有設計風格共用)
 *
 * 顏色不在此檔定義，而是由設計風格 (Design Style) 的調色板提供：
 *   display/theme-default.css — "default" 嶺大官網淺色 (預設)
 *   display/theme-cyber.css   — "cyber"   藍黑霓虹
 * 風格由 <html data-theme> 決定，各頁按網址的 ?theme= 或檔案名設定；
 * 與交通顯示系統 (port 3100) 採用同一套機制與色值。
 *
 * 本檔只保留版面、字級、間距與動畫；新增風格時無須改動這裡。
 * 字體 Poppins (標題) + Ubuntu (內文)，中文回退 PingFang TC / 微軟正黑體。
 * 扁平化：不使用漸層與陰影，圓角 4px，以 1px 細線分隔。
 * 雙語：繁體中文為主、英文為輔 (.en)，英文字級較小並設 9px 下限。
 */

:root {
  /* ── 字體 ── */
  --font-display: 'Poppins', 'Ubuntu', Arial, 'PingFang TC', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif;
  --font-body: 'Ubuntu', Arial, 'PingFang TC', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif;

  --radius: 4px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--ink-strong);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ═══════════════════════════════════════════════
   雙語排版 — 繁體中文為主，英文為輔
   英文字級為中文的 0.65 倍，並設 9px 下限；
   於細小元件中 0.65em 會縮至 6–7px，遠距離無法辨識。
   ═══════════════════════════════════════════════ */
.en {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: max(9px, 0.65em);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

/* 同行顯示：空間不足以分行的細小元件 */
.brand-kicker .en,
.clock-date .en,
.room-tile-status .en,
.status-pill .en,
.room-meta-strip .en,
.now-line-label .en,
.countdown-label .en {
  display: inline;
  margin-top: 0;
  margin-left: 0.4em;
  font-size: max(9px, 0.82em); /* 同樣受 9px 下限保護 */
}

/* 位於彩色或深色底的英文：沿用父層顏色並降低不透明度，確保對比度 */
.brand-kicker .en,
.clock-date .en,
.clock-block .en,
.status-pill .en,
.room-tile-status .en,
.now-line-label .en,
.status-countdown .en {
  color: inherit;
  opacity: 0.78;
}

/* ─── 共用頁首 ─── */
.display-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 4px solid var(--lnu-red);
  color: var(--ink-strong);
  flex-shrink: 0;
}

.display-header .brand {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.display-header .brand img {
  height: 46px;
  width: auto;
  padding-right: 18px;
  border-right: 1px solid var(--line);
  flex-shrink: 0;
}

.display-header .brand-text {
  min-width: 0;
}

.display-header .brand-kicker {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lnu-red);
}

.display-header h1 {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-strong);
}

.display-header h1 .en {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
}

/* 時鐘：白底黑字，與頁首同色系，僅以細框分隔 */
.display-header .clock-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: right;
  flex-shrink: 0;
}

.display-header-tools {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-shrink: 0;
}

.display-filter-block {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.display-area-filter {
  color: var(--ink-soft);
  font-size: 12px;
  white-space: nowrap;
}

.display-header .clock-details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}

.display-area-filter select {
  max-width: 180px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink-strong);
  font: inherit;
}

.display-header .clock-date {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-strong);
}

.display-header .clock-time {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--ink-strong);
}

/* ═══════════════════════════════════════════════
   一覽頁 Index
   ═══════════════════════════════════════════════ */
.index-body { display: flex; flex-direction: column; height: 100vh; }

.index-main {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px 32px;
  background: var(--canvas);
}

.area-block { margin-bottom: 26px; }

.area-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-strong);
  margin-bottom: 12px;
  padding: 0 0 8px 2px;
  border-bottom: 2px solid var(--lnu-red);
}

.area-title .en {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.room-tile {
  display: block;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid;
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.room-tile:hover { background: var(--surface-muted); }
.room-tile:active { background: var(--canvas); }

.room-tile-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.room-tile-name {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}

.room-tile-meta {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.room-tile-meta .en {
  font-size: 10px;
  margin-top: 1px;
}

.room-tile-status {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

.room-tile-status.available { background: var(--available); color: var(--on-status); }
.room-tile-status.occupied { background: var(--occupied); color: var(--on-status); }

.room-tile-note {
  font-size: 12px;
  color: var(--ink-body);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-tile-note .en {
  font-size: 10px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.index-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-soft);
  font-size: 15px;
}

/* ═══════════════════════════════════════════════
   單一房間顯示 Single-room display
   ═══════════════════════════════════════════════ */
/* --text-scale：房間顯示頁的整體字級倍數。
   頁內所有字級均以 calc(基準 px × --text-scale) 表示，
   故只需改動這一個數值，即可同步放大或縮小全頁文字。

   --panel-scale：「現時使用情況」面板在整體倍數之上的額外倍數。
   該面板是房外人員最需要看清的資料，字級較其他部分再放大一級。
   標籤 (活動名稱 / 時間 / 備註) 與其內容同受此倍數影響。 */
.room-body {
  --text-scale: 1.3;
  --panel-scale: 2;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ─── 螢幕邊框狀態燈 Edge status light ───
   覆蓋整個畫面但不接受滑鼠事件，僅以 inset 陰影畫出邊框光暈。
   使用中：紅框呼吸燈（動態較易引起注意）；可使用：綠框恆亮。 */
.edge-glow {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.edge-glow.occupied {
  opacity: 1;
  box-shadow:
    inset 0 0 0 7px var(--occupied),
    inset 0 0 22px 3px rgba(228, 30, 38, 0.28);
  animation: edge-breathe 3.4s ease-in-out infinite;
}

.edge-glow.available {
  opacity: 1;
  box-shadow:
    inset 0 0 0 7px var(--available),
    inset 0 0 20px 4px rgba(95, 125, 10, 0.18);
}

@keyframes edge-breathe {
  0%, 100% { opacity: 0.32; }
  50% { opacity: 1; }
}

/* 幅度較小的呼吸燈 */
@keyframes edge-breathe-soft {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* 系統設定為減少動態效果時（部分平板預設開啟），仍保留呼吸燈，
   但放慢並收窄明暗幅度，避免完全失去「使用中」的動態提示。 */
@media (prefers-reduced-motion: reduce) {
  .edge-glow.occupied { animation: edge-breathe-soft 6s ease-in-out infinite; }
}

/* 房間頁頁首：左為校徽，右為時鐘，中間為單行大字房名 "Lingnan T-Plus <房號>" */
.room-body .display-header { padding: 10px 18px; }

.room-body .display-header h1 {
  margin-top: 0;
  font-size: calc(28px * var(--text-scale));
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.room-body .clock-date { font-size: calc(12px * var(--text-scale)); }
.room-body .clock-time { font-size: calc(28px * var(--text-scale)); }

/* ─── 單欄版面：狀態橫幅在上，現時使用情況佔用餘下全部高度 ─── */
.room-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 24px 24px;
  background: var(--canvas);
}

/* 房間資料欄已移除，現時使用情況獨佔一欄並撐滿餘下高度 */
.info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.info-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 16px 20px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.panel-title {
  font-family: var(--font-display);
  font-size: calc(16px * var(--text-scale) * var(--panel-scale, 1));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.panel-title .en {
  display: inline;
  margin-left: 0.5em;
  font-size: max(9px, 0.85em);
  color: inherit;
  opacity: 0.75;
}

/* ─── 狀態橫幅 Status hero ─── */
.status-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 6px solid var(--line-strong);
  border-radius: var(--radius);
  flex-shrink: 0;
}

.status-hero.occupied { border-left-color: var(--occupied); background: var(--occupied-bg); }
.status-hero.available { border-left-color: var(--available); background: var(--available-bg); }

/* 狀態標籤與倒數之間的彈性間隔。
   橫幅曾在此顯示活動名稱及時間，但與下方「現時使用情況」重複，已移除。 */
.status-headline {
  flex: 1;
  min-width: 0;
}

.status-countdown {
  text-align: right;
  flex-shrink: 0;
  line-height: 1.1;
}

.status-countdown strong {
  display: block;
  font-family: var(--font-display);
  font-size: calc(36px * var(--text-scale));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
}

.status-countdown span {
  font-size: calc(14px * var(--text-scale));
  color: var(--ink-body);
}

.status-countdown .en {
  display: block;
  margin-top: 1px;
  font-size: calc(12px * var(--text-scale));
}

/* 詳細資料列：標籤在左，內容在右。
   面板獨佔整頁後，各列平均分佈於可用高度，避免下方大幅留白。 */
.detail-list {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex: 1;
  min-height: 0;
  gap: 10px;
}

.detail-row {
  display: grid;
  /* 標籤欄闊度跟隨字級一併放大，否則「活動名稱 / Event」會換行 */
  grid-template-columns: calc(124px * var(--text-scale) * var(--panel-scale, 1)) minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
}

.detail-row + .detail-row {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.detail-row dt {
  font-size: calc(17px * var(--text-scale) * var(--panel-scale, 1));
  font-weight: 700;
  color: var(--ink-soft);
}

.detail-row dt .en {
  display: block;
  margin-top: 0;
  font-size: max(9px, 0.78em);
  font-weight: 400;
}

.detail-row dd {
  font-size: calc(23px * var(--text-scale) * var(--panel-scale, 1));
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-strong);
  word-break: break-word;
}

.detail-row dd .en {
  font-size: max(9px, 0.72em);
  margin-top: 1px;
}

/* 可使用時的佔位符號：淡色顯示，表示「沒有資料」而非資料遺失 */
.detail-empty {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.room-back-link {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-body);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 6px 12px;
  flex-shrink: 0;
}

.status-pill {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: calc(18px * var(--text-scale));
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 10px 20px;
  border-radius: var(--radius);
  color: var(--on-status);
  text-align: center;
}

.status-pill.available { background: var(--available); }
.status-pill.occupied { background: var(--occupied); }

.room-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100vh;
  text-align: center;
  padding: 20px;
  color: var(--ink-body);
}

.room-error a {
  padding: 10px 22px;
  background: var(--lnu-red);
  color: var(--on-status);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
}

.room-error a .en { color: inherit; opacity: 0.82; }

/* ═══════════════════════════════════════════════
   8 吋平板橫向 (Lenovo Tab M8, 1280x800 實體像素 ≈ 853x533 CSS 像素)
   高度有限，全頁須一屏顯示：收窄各處留白，縮小次要字級。
   ═══════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 620px) {
  /* 8 吋屏 (853×533 CSS px) 高度有限，無法跟隨大螢幕的 --panel-scale: 2 ——
     實測三行資料在 2 倍下會超出畫面約 190px，而告示板無人會捲動。
     1.5 是此螢幕的上限：實際預訂剛好一屏顯示 (若活動名稱與備註同時很長，
     仍會超出約 33px，屆時可再降至 1.35)。大螢幕不受此限。 */
  .room-body { --text-scale: 1.3; --panel-scale: 1.5; }

  .room-body .display-header { padding: 6px 14px; }
  .room-body .display-header .brand { gap: 14px; }
  .room-body .display-header .brand img { height: 38px; padding-right: 14px; }
  .room-body .display-header h1 { font-size: calc(22px * var(--text-scale)); }

  .room-body .clock-block { padding: 5px 11px; }
  .room-body .clock-date { font-size: calc(11px * var(--text-scale)); }
  .room-body .clock-time { font-size: calc(21px * var(--text-scale)); }

  .room-main {
    gap: 9px;
    padding: 10px 14px 12px;
  }

  .info-grid { gap: 10px; }

  .status-hero {
    gap: 14px;
    padding: 10px 16px;
  }

  .status-countdown strong { font-size: calc(27px * var(--text-scale)); }
  .status-countdown span { font-size: calc(13px * var(--text-scale)); }
  .status-pill { font-size: calc(15px * var(--text-scale)); padding: 8px 16px; }

  .info-panel {
    gap: 8px;
    padding: 10px 14px 11px;
  }

  .panel-title { font-size: calc(14px * var(--text-scale) * var(--panel-scale, 1)); padding-bottom: 5px; }

  .detail-list { gap: 5px; }
  .detail-row {
    /* 標籤改為單行「中文 English」後需要較闊的欄位，基準由 96px 調升至 112px */
    grid-template-columns: calc(112px * var(--text-scale) * var(--panel-scale, 1)) minmax(0, 1fr);
    gap: 10px;
  }
  .detail-row + .detail-row { padding-top: 5px; }

  /* 活動名稱與備註均由管理員自由輸入，過長會把版面撐出畫面。
     面板字級放大 1.5 倍後，8 吋屏一行已佔約 50px，一個三行的活動名稱
     就足以把「備註」推出畫面之外 —— 而告示板無人會捲動，等同資料消失。
     故各資料值一律限兩行，其餘以省略號收結；兩行在放大後的字級下，
     可見字數仍多於未放大時的三行。 */
  .detail-row dd {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .detail-row dt { font-size: calc(15px * var(--text-scale) * var(--panel-scale, 1)); }
  .detail-row dd { font-size: calc(20px * var(--text-scale) * var(--panel-scale, 1)); }

  /* 高度緊絀：標籤及資料值的英文均改為同行顯示，每列各省下一行高度。
     面板放大 1.5 倍後，單靠資料值一項已不足以令全頁維持一屏。 */
  .detail-row dt .en {
    display: inline;
    margin-top: 0;
    margin-left: 0.4em;
    font-size: max(9px, 0.62em);
  }

  .detail-row dd .en {
    display: inline;
    margin-top: 0;
    margin-left: 0.45em;
    font-size: max(9px, 0.68em);
  }
}

/* 直向平板 Portrait tablet：資料面板改為上下排列。
   本系統以橫向為準，直向僅作備援：房名改為可換行，避免被截斷。 */
@media (max-aspect-ratio: 1/1) {
  .display-header h1 { font-size: 17px; }
  .room-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

  /* 直向時校徽已佔去大半闊度，房名改置於校徽下方一整行 */
  .room-body .display-header .brand { flex-wrap: wrap; }

  .room-body .display-header h1 {
    flex: 1 1 100%;
    font-size: calc(20px * var(--text-scale));
    white-space: normal;
  }

  .room-main { padding: 12px 14px 14px; gap: 10px; }

  .status-hero {
    flex-wrap: wrap;
    gap: 12px;
  }

  .status-countdown strong { font-size: calc(24px * var(--text-scale)); }
}