/* ============================================================
 * 機械與自動化工程系 — 系務系統 樣式
 *
 * 設計依據：UI UX Pro Max 產出的設計系統
 *   風格：Swiss Modernism 2.0 × Data-Dense Dashboard
 *   色盤：Research Lab / University Department（學術海軍藍＋金）
 *   字型：Inter（拉丁與數字）＋ Noto Sans TC（中文）
 *
 * 純 CSS，無建置步驟。改動請同步 records.css。
 *
 * 【改字級】只要改下面 --fs-* 那一組，全站跟著放大。
 * 【改區塊顏色】卡片加 data-sec="gold|blue|..." 就會自動有
 *   頂部色帶、淡色底與同色標題，不用另外寫 CSS。
 * ============================================================ */

/* ---------- 設計權杖 ---------- */
:root {
  /* 品牌（Research Lab / University Department） */
  --c-primary: #1e3a5f;          /* 學術海軍藍 */
  --c-primary-dark: #16293f;
  --c-primary-fg: #ffffff;
  --c-secondary: #2563eb;
  --c-accent: #a16207;           /* 金色點綴 */
  --c-accent-soft: #fdf6e7;

  /* 表面 */
  --c-bg: #f8fafc;
  --c-surface: #ffffff;
  --c-surface-2: #f1f5f9;
  --c-muted: #64748b;         /* 次要文字（沿用舊名，HTML 內嵌樣式有用） */
  --c-muted-bg: #e9eef5;      /* 淺色表面 */
  --c-border: #cbd5e1;
  --c-border-soft: #e2e8f0;

  /* 文字 */
  --c-text: #0f172a;
  --c-text-2: #475569;
  --c-muted-fg: #64748b;

  /* 狀態 */
  --c-danger: #dc2626;
  --c-danger-soft: #fef2f2;
  --c-success: #15803d;

  /* ---------- 字級尺度（改這裡＝全站放大） ---------- */
  --fs-xs: 13px;      /* 極小的輔助說明 */
  --fs-sm: 14px;      /* 次要文字、標籤 */
  --fs-base: 16px;    /* 內文 */
  --fs-md: 17px;      /* 清單主標 */
  --fs-lg: 20px;      /* 卡片標題 */
  --fs-xl: 24px;      /* 月份標題 */
  --fs-kpi: 28px;     /* 統計數字 */
  --fs-brand: 21px;   /* 頁首主標 */

  /* ---------- 區塊配色（每一區一個顏色，一眼看出用途） ---------- */
  --sec-navy:   #1e3a5f;  --sec-navy-bg:   #eef3f9;  --sec-navy-bd:   #d3e0f0;
  --sec-gold:   #a16207;  --sec-gold-bg:   #fdf8ea;  --sec-gold-bd:   #f0e0bd;
  --sec-blue:   #2563eb;  --sec-blue-bg:   #eff5fe;  --sec-blue-bd:   #d3e2fa;
  --sec-green:  #15803d;  --sec-green-bg:  #eef8f1;  --sec-green-bd:  #cfe9da;
  --sec-purple: #6d28d9;  --sec-purple-bg: #f4f1fe;  --sec-purple-bd: #ddd5fb;
  --sec-teal:   #0f766e;  --sec-teal-bg:   #ecf7f6;  --sec-teal-bd:   #cbe8e5;
  --sec-rose:   #be123c;  --sec-rose-bg:   #fdf1f4;  --sec-rose-bd:   #f7d3dc;

  /* 尺度 */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 1px 3px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, .09), 0 2px 4px rgba(15, 23, 42, .04);

  /* 版面 */
  --gap: 8px;
  --card-pad: 18px;
  --maxw: 1180px;      /* 內容寬度（不含左右留白） */
  --gut: 18px;         /* 左右留白 —— 頁首與內容一定要用同一個值 */
  --touch: 46px;

  /* 焦點（無障礙：鍵盤操作一定要看得到） */
  --ring: 0 0 0 3px rgba(30, 58, 95, .26);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  /* Inter 負責拉丁字母與數字；中文自動落到 Noto Sans TC
     （Inter 沒有中文字形，所以中文字不會被它影響）。 */
  font-family: Inter, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
               system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--fs-base);
  line-height: 1.65;
}

/* 日期、時間、數字用等寬數字，直排時才不會左右跳動 */
.month-label, .num, time, .today-date, .today-item-time, .ev-main small { font-variant-numeric: tabular-nums; }

a { color: var(--c-secondary); text-underline-offset: 2px; }

/* 全站統一的鍵盤焦點樣式 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--c-secondary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- 頁首 ---------- */
.site-header {
  background: var(--c-primary);
  border-bottom: 3px solid var(--c-accent);
  padding: 0 var(--gut);
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .16);
}
.site-header .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-height: 68px;
  padding: 10px 0;
}
.brand { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.brand h1 {
  margin: 0;
  font-size: var(--fs-brand);
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--c-primary-fg);
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand h1::before {
  content: "";
  width: 4px;
  height: 21px;
  border-radius: 2px;
  background: var(--c-accent);
  flex: 0 0 auto;
}
.brand p { margin: 2px 0 0 14px; font-size: var(--fs-sm); color: #bfcfe0; }

/* ---------- 主要功能頁籤（各頁共用） ----------
   行事曆／公差/招生記錄做成「分段控制項」（segmented control）而不是普通連結：
   兩個選項包在同一個膠囊底裡、被選中的那顆變白底 ——
   一眼就看得出「這裡有兩個分頁可以切」，而不是三個各自獨立的連結。 */
.site-tabs {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .17);
}
.site-tabs .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 20px;
  border-radius: 999px;
  text-decoration: none;
  color: #cfdcec;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.site-tabs .tab:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.site-tabs .tab.is-active {
  background: #fff;
  color: var(--c-primary);
  box-shadow: 0 1px 4px rgba(8, 18, 34, .25);
}

/* ---------- 漢堡選單（手機才出現） ---------- */
.nav-toggle {
  display: none;                 /* 桌機不需要，桌機直接把功能顯示在頁首 */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .11);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease;
}
.nav-toggle:hover { background: rgba(255, 255, 255, .2); }
.nav-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .22); }

/* 展開後的功能清單。貼在頁首下緣、靠右對齊。 */
.nav-menu {
  position: absolute;
  right: var(--gut);
  top: calc(100% - 4px);
  z-index: 60;
  min-width: 200px;
  padding: 6px;
  border-radius: 13px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: 0 14px 34px rgba(8, 18, 34, .26);
}
.nav-menu[hidden] { display: none; }
.nav-menu-item {
  display: block;
  padding: 12px 14px;
  border-radius: 9px;
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.nav-menu-item:hover { background: var(--c-surface-2); }
.nav-menu-item[hidden] { display: none; }

/* 選單裡的「按鈕版」項目（修改密碼／登出）。
   <button> 不會繼承 <a> 的排版，沒補這幾條會變成一顆原生灰按鈕。 */
.nav-menu-btn {
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.nav-menu-danger { color: #b91c1c; }
.nav-menu-danger:hover { background: #fee2e2; }
#menu-user[hidden] { display: none; }

/* ---------- 徽章 ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--c-surface-2);
  color: var(--c-text-2);
}
.badge-admin { background: var(--c-accent-soft); color: #854d0e; border: 1px solid #f3dfae; }
.badge[hidden] { display: none !important; }

/* ---------- 圓形頭像 ---------- */
/* 這組規則放在 styles.css（而不是 records.css），
   因為行事曆頁（index.html）也要顯示登入者的頭像，
   而它只載入 styles.css。 */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-border-soft);
  color: #fff;
  font-weight: 700;
  line-height: 1;
  user-select: none;
  /* 用外框做出「貼在卡片上」的乾淨圓邊，不另外加邊框以免壓到照片 */
  box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 3px var(--c-border-soft);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 工具列：登入者本人 */
.avatar-lg { width: 48px; height: 48px; font-size: 21px; }

/* 頁首（深色底）：登入者本人 */
.avatar-md { width: 40px; height: 40px; font-size: 18px; }

/* 記錄列表：該筆記錄的教師 */
.avatar-sm { width: 34px; height: 34px; font-size: 15px; margin-right: 10px; }

/* 還沒登入時不佔位 */
.avatar-slot:empty { display: none; }

/* 手機：頭像縮一點，不要佔掉版面 */
@media (max-width: 767px) {
  .avatar-lg { width: 42px; height: 42px; font-size: 19px; }
  .avatar-sm { width: 30px; height: 30px; font-size: 14px; margin-right: 8px; }
}

/* ---------- 頁首的登入者身分（頭像 ＋ 姓名 ＋ 角色） ---------- */
.who-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  max-width: 260px;
}
.who-chip[hidden] { display: none; }
/* 頁首是深色底，頭像的外框要跟著換色，否則會出現一圈白邊 */
.site-header .avatar {
  box-shadow: 0 0 0 2px var(--c-primary), 0 0 0 3px rgba(255, 255, 255, .45);
}
.who-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.who-name {
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.who-role { color: #b9c8dd; font-size: 12px; white-space: nowrap; }
.who-role[hidden] { display: none; }

@media (max-width: 767px) {
  /* 手機仍然保留登入者（頭像＋姓名＋角色）——這是「我是誰」的依據。
     只把尺寸縮小並限制寬度，免得長名字把頁首擠爆。 */
  .who-chip { padding: 3px 10px 3px 4px; max-width: 145px; gap: 8px; }
  .who-name { font-size: 13px; }
  .who-role { font-size: 11px; }
}

/* ---------- 按鈕 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 17px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .12s ease;
}
.btn:hover { background: var(--c-surface-2); border-color: #b8c4d4; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-primary-fg);
}
.btn-primary:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); }
.btn-danger { color: var(--c-danger); border-color: #fecaca; background: var(--c-danger-soft); }
.btn-danger:hover { background: #fee2e2; border-color: #fca5a5; }
.btn-ghost { border-color: transparent; background: transparent; }

/* ---------- LINE 登入（登入卡與綁定列共用） ---------- */
/* LINE 官方綠 #06C755。這裡只用文字標記，不放官方 logo 圖檔（商標問題）。 */
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #06c755;
  border: 1px solid #05b34b;
  color: #fff;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--radius);
}
.btn-line:hover { background: #05b34b; }
.btn-line:active { background: #049a41; }
.btn-line-sm {
  margin-left: auto;
  background: #06c755;
  border: 1px solid #05b34b;
  color: #fff;
  font-weight: 700;
  padding: 6px 14px;
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
}
.btn-line-sm:hover { background: #05b34b; }

/* 登入卡裡的「或」分隔線 */
.or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 14px;
  color: var(--c-muted-fg);
  font-size: var(--fs-sm);
}
.or-divider::before,
.or-divider::after { content: ""; flex: 1; height: 1px; background: var(--c-border-soft); }

/* ⚠️ 下面這些元素自己有 display 規則，會蓋掉瀏覽器預設的 [hidden] { display: none }。
   只設 hidden 屬性而沒有這幾行，元素在畫面上照樣看得到 ——
   「以為藏起來了、其實還露在外面」就是這樣發生的。 */
.or-divider[hidden],
.line-bind[hidden] { display: none; }

/* 綁定狀態列（登入後顯示在工具列下方） */
.line-bind {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius);
}
.line-bind-label { font-weight: 700; color: var(--c-text-2); font-size: var(--fs-sm); }
.line-bind-state { font-size: var(--fs-sm); font-weight: 700; }
.line-bind-state.is-on { color: var(--c-success); }
.line-bind-state.is-off { color: var(--c-muted-fg); }
/* 深海軍藍頁首上的 ghost 按鈕 */
.site-header .btn-ghost { color: #d3dded; border-color: rgba(255, 255, 255, .22); }
.site-header .btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
/* 淺色底上的 ghost 按鈕 */
.card .btn-ghost, .modal-box .btn-ghost { color: var(--c-text-2); }
.card .btn-ghost:hover, .modal-box .btn-ghost:hover { background: var(--c-surface-2); color: var(--c-text); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn[hidden] { display: none !important; }

/* ---------- 版面 ---------- */
/* max-width 要加上左右留白，內容才會跟頁首齊左齊右
   （少了這個，頁首與卡片會差一個留白的寬度，看起來就是沒對齊） */
.wrap {
  max-width: calc(var(--maxw) + var(--gut) * 2);
  margin: 0 auto;
  padding: var(--gut);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.month-label {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: .3px;
  min-width: 170px;
  color: var(--c-primary);
}
.toolbar .spacer { margin-left: auto; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--c-surface);
  border: 1px solid #dbe3ec;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--card-pad);
}
/* 登入表單：窄一點比較好讀，而且置中
   （只設 max-width 會靠左，右邊留一大片空白，看起來像版面壞掉） */
#login-card {
  max-width: 470px;
  margin-left: auto;
  margin-right: auto;
}
#login-card .btn-primary { width: 100%; }

.card + .card { margin-top: 18px; }
/* 標題在工具列裡時不畫底線（旁邊還有下拉與按鈕，畫線會很怪） */
.toolbar h2 { margin: 0; padding-bottom: 0; border-bottom: none; }
/* 工具列裡的控制項間距要一致，否則下拉與按鈕會黏在一起 */
.toolbar select, .toolbar .btn { min-height: 42px; }

/* 卡片標題 —— 用 .card h2（不是 > h2），
   否則標題若放在 .toolbar 裡就吃不到，會變成瀏覽器預設的超大標題 */
.card h2 {
  margin: 0 0 14px;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: .2px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--c-border-soft);
}

/* ============================================================
 * 區塊配色：卡片加 data-sec="xxx" 就會自動上色。
 * 目的＝不用讀文字也知道這一區在做什麼。
 * ============================================================ */
.card[data-sec="navy"]   { --sec: var(--sec-navy);   --sec-bg: var(--sec-navy-bg);   --sec-bd: var(--sec-navy-bd); }
.card[data-sec="gold"]   { --sec: var(--sec-gold);   --sec-bg: var(--sec-gold-bg);   --sec-bd: var(--sec-gold-bd); }
.card[data-sec="blue"]   { --sec: var(--sec-blue);   --sec-bg: var(--sec-blue-bg);   --sec-bd: var(--sec-blue-bd); }
.card[data-sec="green"]  { --sec: var(--sec-green);  --sec-bg: var(--sec-green-bg);  --sec-bd: var(--sec-green-bd); }
.card[data-sec="purple"] { --sec: var(--sec-purple); --sec-bg: var(--sec-purple-bg); --sec-bd: var(--sec-purple-bd); }
.card[data-sec="teal"]   { --sec: var(--sec-teal);   --sec-bg: var(--sec-teal-bg);   --sec-bd: var(--sec-teal-bd); }
.card[data-sec="rose"]   { --sec: var(--sec-rose);   --sec-bg: var(--sec-rose-bg);   --sec-bd: var(--sec-rose-bd); }

.card[data-sec] {
  border-color: var(--sec-bd);
  border-top: 4px solid var(--sec);
  background: linear-gradient(180deg, var(--sec-bg) 0, var(--c-surface) 130px);
}
.card[data-sec] h2 { color: var(--sec); border-bottom-color: var(--sec-bd); }
.card[data-sec] .toolbar h2 { color: var(--sec); }

/* ---------- 今日行程（頁面的視覺主角） ---------- */
/* 使用者進站後第一眼要看的就是這裡，所以刻意做得比月曆卡更「重」：
   金色漸層頂帶（全頁只有這裡有）＋ 深藍日期膠囊 ＋ 行程數徽章 ＋ 大陰影。
   月曆卡維持純白，兩者放在一起才分得出主次。 */
.today-panel {
  position: relative;
  background: linear-gradient(180deg, #fffdf7 0%, #ffffff 62%);
  border: 1px solid #ecdcb2;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 26px rgba(30, 58, 95, .10), 0 2px 6px rgba(30, 58, 95, .05);
  padding: 20px 22px 20px;
  margin-bottom: 22px;
  overflow: hidden;
}
/* 頂端金色漸層細帶：一眼就認出「這是今日行程」 */
.today-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--c-accent) 0%, #d9a441 55%, #f0cf8e 100%);
}
.today-panel[hidden] { display: none; }

.today-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #f0e4c8;
}
.today-label {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--c-primary);
  letter-spacing: .6px;
}
/* 日期做成深底白字膠囊：比原本的灰字醒目得多 */
.today-date {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fff;
  background: var(--c-primary);
  border-radius: 999px;
  padding: 3px 12px;
  font-variant-numeric: tabular-nums;
}
/* 「N 項」徽章：靠右，讓標題列有左右平衡 */
.today-count {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-accent);
  background: var(--c-accent-soft);
  border: 1px solid #f0dfae;
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
}
.today-count[hidden] { display: none; }

.today-body { display: flex; flex-direction: column; gap: 10px; }

/* 行程卡改成白底＋外框＋陰影：浮在淡金面板上才跳得出來。
   左側色條加粗到 6px，類別一眼可辨。 */
.today-item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-left: 6px solid var(--ev-accent, var(--c-border));
  box-shadow: var(--shadow-sm);
}
.today-item-time {
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  min-width: 62px;
}
/* 今天的行程標題：全頁最大的字，GSAP 呼吸字打在這上面。
   line-height 留寬一點，字放大後才不會黏在一起。 */
.today-item-title {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.35;
  letter-spacing: .2px;
  flex: 1 1 auto;
  min-width: 0;
}
.today-item-loc {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-soft);
  border-radius: 999px;
  padding: 2px 10px;
}
/* 系上參加人員（從會議通知的「出席」欄解析出來的本系人名）。
   flex-basis:100% 強制換到下一行 —— 卡片是 flex-wrap，
   不這樣寫會擠在標題右邊、把標題壓縮。
   顏色用主色但字級退一階，讓它可讀卻不跟標題搶。 */
.today-item-people {
  flex-basis: 100%;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-primary);
  line-height: 1.5;
  padding-left: 2px;
}
/* 「今天沒有安排行程。」—— 面板唯一的一行字，一樣要呼吸。
   底色從淡灰改成主文字色、字重加粗、字級提一級：
   呼吸動畫會把透明度壓到 0.48，原本的淡灰字在谷底會淡到像壞掉。 */
.today-none {
  margin: 0;
  padding: 8px 2px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-text);
}

@media (max-width: 640px) {
  .today-panel { padding: 16px 16px 18px; margin-bottom: 18px; }
  .today-item { padding: 12px 14px; gap: 10px; }
  .today-item-title { font-size: var(--fs-lg); }
  .today-item-time { min-width: 52px; }
}

/* ---------- 月曆 ---------- */
#calendar { background: var(--c-surface); }
.fc {
  --fc-border-color: var(--c-border-soft);
  --fc-today-bg-color: #cfe1f8;
  --fc-page-bg-color: var(--c-surface);
  --fc-neutral-bg-color: var(--c-surface-2);
  font-size: var(--fs-sm);
}
.fc .fc-col-header-cell { background: var(--c-surface-2); padding: 5px 0; }
.fc .fc-col-header-cell-cushion {
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .6px;
  text-decoration: none;
  padding: 5px 0;
}
.fc .fc-day-sat .fc-col-header-cell-cushion,
.fc .fc-day-sun .fc-col-header-cell-cushion { color: #b91c1c; }
.fc .fc-daygrid-day-number {
  color: var(--c-text-2);
  text-decoration: none;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  padding: 5px 8px;
}
/* 月曆格子的文字要比一般說明再大一點，不然整片看過去很吃力。
   放大後標題更容易被截斷 —— 所以 tooltip（calendar.js 的 eventDidMount）
   一定要在，滑鼠移上去才讀得到全名。

   事件卡的外觀參考 Fantastical：
   底色是「極淡的同色底」（不是整片飽和色）、文字是深同色，
   左側再壓一條飽和色條 —— 類別一眼可辨，整片月曆也不會花花綠綠。
   底色與文字色由 calendar.js 用行內樣式指定（FullCalendar 的機制），
   左側色條用 ::before 畫（行內樣式蓋不到偽元素，才不會被吃掉）。 */
.fc .fc-event {
  position: relative;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px 2px 10px;   /* 左邊留給色條 */
  border-radius: 7px;
  transition: filter .15s ease;
}
.fc .fc-event::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--ev-accent, transparent);
  border-radius: 7px 0 0 7px;
  pointer-events: none;
}
.fc .fc-event:hover { filter: brightness(.95); }
/* GSAP 進場動畫會縮放事件，變形原點置中才不會從角落放大 */
.fc .fc-event { transform-origin: center center; }
/* 左側色條只畫在「有底色的整塊事件」上（月檢視的全天／跨日行程）。
   有時段的行程在月檢視是一顆小圓點＋文字，沒有底色可以壓色條 ——
   硬畫會變成一條孤零零的直線浮在日期格裡。
   清單檢視同理，靠小圓點辨色就好（跟 Fantastical 的議程列表一樣）。 */
.fc .fc-daygrid-block-event::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--ev-accent, transparent);
  border-radius: 7px 0 0 7px;
  pointer-events: none;
}
/* 時間型事件的小圓點：FullCalendar 會用行內樣式把顏色設成事件底色
   （現在是淡色 tint，畫出來幾乎看不見），所以要用 !important 蓋成飽和色。 */
.fc .fc-daygrid-event-dot,
.fc .fc-list-event-dot {
  border-color: var(--ev-accent, var(--c-primary)) !important;
}
/* 標題太長要截斷並顯示「…」，不要讓字被切一半（月曆格子很窄） */
.fc .fc-event-title,
.fc .fc-event-title-container,
.fc .fc-list-event-title { overflow: hidden; text-overflow: ellipsis; }
.fc .fc-daygrid-event { overflow: hidden; max-width: 100%; }
.fc .fc-daygrid-block-event .fc-event-title { white-space: nowrap; }
/* 相鄰的跨日事件之間留一點縫，否則兩條會黏成一條看不出是兩件事 */
.fc .fc-daygrid-block-event { margin-top: 1px; }
/* 跨日事件的頭尾做圓角，才看得出「從哪天到哪天」，
   否則橫條貫穿整週，會以為是一整週的活動 */
.fc .fc-daygrid-block-event.fc-event-start {
  border-top-left-radius: 6px; border-bottom-left-radius: 6px;
}
.fc .fc-daygrid-block-event.fc-event-end {
  border-top-right-radius: 6px; border-bottom-right-radius: 6px;
}
.fc .fc-list-event:hover td { background: var(--c-surface-2); }
.fc .fc-list-day-cushion { background: var(--c-surface-2); }
.fc .fc-toolbar-title { font-size: 20px; font-weight: 700; }
/* 日期格可以連點兩下新增事件（見 calendar.js 的 dateClick），
   所以整格都要看起來可以點。 */
.fc .fc-daygrid-day { cursor: pointer; }

/* ---------- 今天：只留淡藍底 ---------- */
/* 使用者指定「本週格子底色不用、當天日期的黑色外框也不用」。
   所以這裡刻意只剩下底色：
     - 本週整列淡藍底（fc-day-is-week）      → 移除
     - 今天格子的內縮海軍藍外框（box-shadow）→ 移除
     - 日期數字的深藍圓形底（pill）          → 移除
   保留淡藍底是為了還看得出「今天是哪一格」，但不再搶眼。
   .fc-day-today 由 FullCalendar 依瀏覽器時區標記；
   .fc-day-is-tpe 由我們依台北日期標記 —— 兩者都上色，
   台灣的使用者會看到同一格，時區跑掉時也不會兩個「今天」打架。 */
.fc .fc-day-today,
.fc .fc-day-is-tpe {
  background: #cfe1f8 !important;
}
.fc .fc-day-today .fc-daygrid-day-number,
.fc .fc-day-is-tpe .fc-daygrid-day-number {
  color: var(--c-primary);
  font-weight: 700;
}

/* ---------- 連續多日的長條事件：不特別凸顯 ---------- */
/* 這裡刻意「沒有」任何樣式。
   原本本週的行程會套金色外框＋粗體（.fc-event-thisweek），
   但跨整週的長條事件（例如「授課教師先期評等」10/12–10/18）整條被框住，
   變成月曆上最搶眼的東西，非常突兀。
   使用者指定：連續長期的行程不要特別凸顯，要凸顯的是「當天」的事件，
   用呼吸燈（GSAP 光暈，見 calendar.js 的 animateToday）就好，當週的不用。
   所以：
     - 本週外框       → 移除
     - 當天單日事件   → 呼吸燈（行內 box-shadow，GSAP 驅動）
     - 連續多日事件   → 什麼都不加（.fc-event-multiday 只是給 animateToday 排除用）
   保留這個 class 的標記是為了讓 JS 能排除它，不是為了上樣式。 */

/* ---------- 過去的事件：反灰 ---------- */
/* 已經結束的行程淡出成灰階，眼睛自然會落在還沒發生的事情上。
   用 filter: grayscale 而不是改背景色，是因為事件底色由 FullCalendar
   用行內樣式指定，CSS 蓋不掉。
   opacity 再壓到 .55，讓它明顯退到背景去。 */
.fc .fc-event.fc-event-past {
  filter: grayscale(1);
  opacity: .55;
}
/* 反灰的行程不需要 hover 再變亮，否則游標移過去又「活」過來 */
.fc .fc-event.fc-event-past:hover { filter: grayscale(1); }

/* ---------- 圖例 ---------- */
.legend {
  display: flex;
  gap: 10px 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius);
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  font-weight: 500;
}
.legend i {
  width: 15px; height: 15px; border-radius: 5px;
  display: inline-block; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .14);
}

/* ============================================================
 * 表單
 * ============================================================ */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="date"],
.field input[type="time"],
.field input[type="number"],
.field input[type="file"],
.field select,
.field textarea,
.filters select {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-base);
  font-family: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { min-height: 84px; resize: vertical; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #b8c4d4; }
.field input:focus, .field select:focus, .field textarea:focus,
.filters select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: var(--ring);
}
.field input[type="file"] { padding: 8px 11px; cursor: pointer; }
.field .hint { font-weight: 400; color: var(--c-text-2); }

/* ---------- 表單分區塊（讓每個欄位群組有自己的顏色） ---------- */
.fblock {
  --fb: var(--sec-navy);
  --fb-bg: var(--sec-navy-bg);
  --fb-bd: var(--sec-navy-bd);
  background: var(--fb-bg);
  border: 1px solid var(--fb-bd);
  border-left: 5px solid var(--fb);
  border-radius: var(--radius);
  padding: 13px 15px;
  margin-bottom: 13px;
}
.fblock[data-sec="gold"]   { --fb: var(--sec-gold);   --fb-bg: var(--sec-gold-bg);   --fb-bd: var(--sec-gold-bd); }
.fblock[data-sec="blue"]   { --fb: var(--sec-blue);   --fb-bg: var(--sec-blue-bg);   --fb-bd: var(--sec-blue-bd); }
.fblock[data-sec="green"]  { --fb: var(--sec-green);  --fb-bg: var(--sec-green-bg);  --fb-bd: var(--sec-green-bd); }
.fblock[data-sec="purple"] { --fb: var(--sec-purple); --fb-bg: var(--sec-purple-bg); --fb-bd: var(--sec-purple-bd); }
.fblock[data-sec="teal"]   { --fb: var(--sec-teal);   --fb-bg: var(--sec-teal-bg);   --fb-bd: var(--sec-teal-bd); }
.fblock[data-sec="rose"]   { --fb: var(--sec-rose);   --fb-bg: var(--sec-rose-bg);   --fb-bd: var(--sec-rose-bd); }

.fblock-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--fb);
  margin-bottom: 11px;
  text-transform: none;
}
.fblock-title::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fb);
  flex: 0 0 auto;
}
/* 區塊裡最後一個欄位不要多留白，否則底部會空一塊 */
.fblock > .field:last-child, .fblock > .row2:last-child .field { margin-bottom: 0; }
.fblock .field input, .fblock .field select, .fblock .field textarea { background: var(--c-surface); }

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  min-height: 42px;
  cursor: pointer;
  user-select: none;
}
.checkbox input {
  width: 19px;
  height: 19px;
  min-height: 0;
  accent-color: var(--c-primary);
  cursor: pointer;
}

.hint { font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.6; }
/* 標籤「裡面」的括號說明維持小一級，否則標籤會太長而換行 */
.field .hint { font-size: 13px; }

.field-error {
  background: var(--c-danger-soft);
  border: 1px solid #fecaca;
  border-left: 3px solid var(--c-danger);
  color: #991b1b;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: var(--fs-sm);
  margin-bottom: 12px;
}

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

/* ---------- 空狀態 / 載入 / 錯誤 ---------- */
.empty, .loading, .error-box {
  text-align: center;
  padding: 42px 16px;
  color: var(--c-text-2);
}
.empty { font-size: var(--fs-base); }
.error-box { color: var(--c-danger); }
.error-box code {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--c-danger-soft);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  color: #991b1b;
  word-break: break-all;
}

.skeleton {
  height: 15px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: sk 1.3s ease infinite;
  margin: 10px 0;
}
@keyframes sk { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

/* ---------- Modal ---------- */
/* 頭像可點（點了開修改密碼視窗） */
.who-chip.who-clickable {
  cursor: pointer;
  border-radius: 999px;
  transition: background .15s;
}
.who-chip.who-clickable:hover,
.who-chip.who-clickable:focus-visible { background: rgba(255, 255, 255, .12); }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  display: none;
  /* 用 flex-start + 盒子 margin:auto —— 空間夠時置中，
     空間不夠（手機鍵盤彈出、可視高度只剩一半）時整層可以捲，
     按鈕才不會被推到畫面外點不到。align-items:center 會把上下都切掉。 */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  z-index: 50;
}
.modal.show { display: flex; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.modal-box {
  position: relative;                 /* 右上角關閉鈕的定位基準 */
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 540px;
  margin: auto;                       /* 配合上面的 flex-start 才會置中 */
  padding: 22px;
  box-shadow: var(--shadow-md);
  animation: pop .2s cubic-bezier(.2, .8, .3, 1);
}

/* 事件詳情的「說明」：連結可點、換行要保留 */
#m-desc {
  /* ⚠️ 沒有這行的話說明裡的換行會被吃掉，整段擠成一團：
     連結和下一行標題黏在一起，「來源：」也會被接在網址尾巴。
     用 pre-wrap 而不是 pre-line —— pre-line 會把「行首空白」吃掉，
     說明裡用來縮排的全形空白（　）就沒作用了。pre-wrap 兩者都保留。 */
  white-space: pre-wrap;
}
#m-desc a {
  color: #1D4ED8;
  text-decoration: underline;
  word-break: break-all;
  /* 整段（含折行）往內縮，讓網址讀起來是「・簡報」底下的一項。
     用 padding 而不是 text-indent —— text-indent 對 inline 元素無效。 */
  padding-left: 1.4em;
}
#m-desc a:hover { color: #1E3A8A; }
#m-desc-wrap { line-height: 1.7; }

/* 事件詳情的「出席人員」：獨立在說明之上，淡底比較好掃讀 */
#m-att {
  display: inline-block;
  white-space: normal;
  line-height: 1.65;
  background: #f1f5f9;
  border-left: 3px solid #94a3b8;
  border-radius: 6px;
  padding: 7px 11px;
  margin-top: 2px;
}

/* 頭像右上角的紅色未完成標記（像訊息未讀那樣） */
.who-chip .avatar-slot { position: relative; }
.who-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  box-sizing: border-box;        /* 寬高要含內距與邊框，單一數字才是正圓 */
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 18px;             /* 22 - 上下邊框各 2px */
  text-align: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  pointer-events: none;          /* 不要擋到點頭像 */
}

/* 帳號選單裡的「未完成的事情」提醒 */
.acct-todo {
  margin: 4px 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
}
.acct-todo-head {
  font-size: 13.5px;
  color: #9a3412;
  margin-bottom: 6px;
}
.acct-todo-head b { font-size: 15.5px; }
.acct-todo-list { list-style: none; margin: 0; padding: 0; }
.acct-todo-list li { border-top: 1px solid #fed7aa; }
.acct-todo-list li:first-child { border-top: 0; }
.acct-todo-list a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 0;
  text-decoration: none;
  color: #7c2d12;
  font-size: 14px;
}
.acct-todo-list a:hover .acct-todo-title { text-decoration: underline; }
.acct-todo-kind {
  flex: 0 0 auto;
  font-size: 11.5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #ffedd5;
  color: #9a3412;
}
.acct-todo-title { flex: 1 1 auto; }
.acct-todo-go { flex: 0 0 auto; font-size: 12.5px; color: #c2410c; white-space: nowrap; }

/* 帳號選單（點頭像後）：兩顆大按鈕，手機也好按 */
.acct-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.acct-actions .btn {
  justify-content: flex-start;
  padding: 13px 16px;
  font-size: 15px;
  text-align: left;
}
.acct-actions .acct-danger { color: #b91c1c; border-color: #fecaca; }
.acct-actions .acct-danger:hover { background: #fef2f2; border-color: #fca5a5; }

/* 右上角關閉鈕：不管內容多長、鍵盤有沒有彈出，永遠在第一眼看得到的位置 */
.modal-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.modal-x:hover,
.modal-x:focus-visible { background: #f1f5f9; color: #0f172a; }
@keyframes pop { from { transform: translateY(8px) scale(.985); opacity: .6 } to { transform: none; opacity: 1 } }
.modal-box h3 {
  padding-right: 36px;                /* 讓標題不會撞到右上角關閉鈕 */
  margin: 0 0 14px;
  font-size: var(--fs-lg);
  font-weight: 700;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--c-border-soft);
  color: var(--c-primary);
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* 表單型 Modal（在月曆上連點兩下叫出來的新增事件視窗） */
.modal-box-form { max-width: 580px; }
/* 刪除確認：內容很少，框太寬會顯得空 */
.modal-box-sm { max-width: 420px; }

/* 破壞性動作推到最左邊，跟右邊的「關閉／修改」隔開 */
.modal-actions .act-left { margin-right: auto; }

/* 實心紅鈕：確認刪除用。軟底色的 .btn-danger 在確認框裡不夠「重」，
   這種一旦按下去無法復原的動作要讓它一眼看起來就是紅的。 */
.btn-danger-solid {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: #fff;
}
.btn-danger-solid:hover { background: #b91c1c; border-color: #b91c1c; }
/* 開始／結束各自「日期＋時間」一組，兩欄並排。
   手機放不下就自動疊成一欄，不要硬擠成兩欄讓日期被切掉。 */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }

/* 勾選項（全天事件）：整行都可以點，不要只有那個小方框能點 */
.check-line {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 600;
  color: var(--c-text);
}
.check-line input[type="checkbox"] {
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 0;
  accent-color: var(--c-primary);
  cursor: pointer;
}

/* ---------- 事件列表（管理後台 / 公差/招生記錄） ---------- */
.ev-list { list-style: none; margin: 0; padding: 0; }
.ev-list li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 6px;
  border-bottom: 1px solid var(--c-border-soft);
}
.ev-list li:last-child { border-bottom: none; }
.ev-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.ev-main { flex: 1; min-width: 0; }
.ev-main strong { display: block; font-size: var(--fs-md); }
.ev-main small { color: var(--c-text-2); font-size: var(--fs-xs); }
.ev-actions { display: flex; gap: 6px; flex: 0 0 auto; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 16px);
  background: var(--c-primary);
  color: #fff;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: var(--fs-base);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 90;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-error { background: #b91c1c; }
.toast-ok { background: var(--c-success); }

/* ---------- 頁尾 ---------- */
.site-footer {
  max-width: calc(var(--maxw) + var(--gut) * 2);
  margin: 0 auto;
  padding: 26px var(--gut) 36px;
  color: var(--c-text-2);
  font-size: 14px;
  text-align: center;
}

/* ---------- 手機 ---------- */
@media (max-width: 767px) {
  :root { --gut: 13px; --fs-kpi: 24px; --fs-xl: 21px; --fs-lg: 18px; }

  /* 手機的頁首只留兩列：
     第一列＝系所名稱 ＋ 登入者頭像 ＋ 漢堡選單，第二列＝兩個功能頁籤。
     原本是「標題／副標／三個導覽／頭像＋徽章＋新增事件／管理後台」五列，
     光頁首就吃掉手機畫面三分之一，往下滑才看得到行程。 */
  .site-header .inner {
    min-height: 0;
    padding: 10px 0;
    gap: 10px;
  }
  /* flex-basis 必須是 0，不能是 auto。
     用 auto 的話，flex 換行的判斷會拿「標題的內容寬度」當基準（約 208px），
     加上頭像與漢堡就超過 360px，於是頭像和漢堡被擠到第二、第三列，
     頁首又長回四列。設成 0 之後它只佔「剩下的空間」，
     三個元素才會乖乖待在同一列。 */
  .brand { flex: 1 1 0; min-width: 0; }
  .brand h1 { font-size: 16px; min-width: 0; }
  .brand h1::before { height: 17px; width: 3px; }
  /* 標題不要截斷成「機械與自動化工…」——系名被切掉就失去辨識作用。
     改成最多折兩行：兩行 15px×1.25 = 38px，比漢堡鈕的 44px 還矮，
     所以第一列的高度不會變，頁首仍然維持兩列。 */
  .brand h1 > span {
    font-size: 15px;
    line-height: 1.25;
    min-width: 0;
    overflow: hidden;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* 中文本來可以逐字斷行，於是 390px 會斷成「…工程系 行／事曆」這種爛位置。
       keep-all 讓中文不在字與字之間斷，只留空白處當斷點 →
       「機械與自動化工程系／行事曆」；真的遇到超長字串再靠 anywhere 保底。 */
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .brand p { display: none; }        /* 副標題省掉，省下整整一列 */

  /* 功能頁籤換到第二列。
     「教師通訊錄」在手機**收進漢堡選單**（桌機仍保留頁籤），
     所以手機只剩 4 個頁籤 → 一列就排得下，不必再換行。
     原本 5 個頁籤實測總寬 448px，在 320／360／375／390／414px 全部溢出。 */
  .site-tabs {
    order: 10;
    flex: 1 0 100%;
    flex-wrap: wrap;
  }
  .site-tabs .tab[data-mobile-hide] { display: none; }
  .site-tabs .tab {
    /* 依內容寬度分配（不是等寬）：390px 一列排得下、文字不必折行。
       white-space:nowrap 讓頁籤不會被壓到比文字還窄 ——
       窄機（320px）時整顆頁籤換到下一列，而不是把「記錄」拆成兩行。 */
    flex: 1 1 auto;
    min-height: var(--touch);
    padding: 8px 8px;
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
  }

  /* 其餘功能（管理後台／新增事件／管理員徽章）收進漢堡選單 */
  .hdr-desktop { display: none !important; }
  .nav-toggle { display: inline-flex; }

  .month-label { min-width: 0; width: 100%; }
  .toolbar { gap: 8px; }
  .toolbar .btn { flex: 1; }
  .row2 { grid-template-columns: 1fr; }
  .card { border-radius: var(--radius); }
  .modal-box { max-height: 92vh; padding: 17px; }
  .modal-actions .btn { flex: 1; }
  .ev-list li { flex-wrap: wrap; }
  .ev-actions { width: 100%; justify-content: flex-end; }
}

/* ---------- 窄機（360px 這類）----------
   第一列扣掉頭像籤與漢堡鈕之後只剩約 123px，
   15px 的系名需要約 135px，於是會被 overflow-wrap:anywhere
   從中間切開成「機械與自動化工程／系 行事曆」。
   縮到 13px 就放得下 —— 系名完整、登入者姓名也完整，兩者都不犧牲。 */
@media (max-width: 389px) {
  .brand h1 > span { font-size: 13px; }
}

/* ---------- 平板 ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .wrap { padding: 16px; }
}

/* ---------- 尊重系統的「減少動態」偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- 列印 ---------- */
@media print {
  .site-header, .site-tabs, .nav-toggle, .nav-menu, .toolbar, .legend, .site-footer, .toast, .stats { display: none !important; }
  body { background: #fff; }
  .card { border: none; box-shadow: none; padding: 0; }
}

/* ============================================================
   可收合區塊（手風琴）
   ------------------------------------------------------------
   使用者原則：進頁面要清爽，先看清單（標題＋筆數），要內容再點開。
   HTML：.acc-head（標題列）＋ .acc-body（內容），預設 hidden。
   ============================================================ */
.acc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.acc-head:hover { color: var(--sec, var(--c-primary)); }
.acc-head:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; border-radius: 4px; }

/* 三角形箭頭：收起時朝右、展開時轉成朝下 */
.acc-chev {
  flex: none;
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .18s ease;
}
.acc-open .acc-chev { transform: rotate(90deg); }

/* 尊重「減少動態」偏好 */
@media (prefers-reduced-motion: reduce) {
  .acc-chev { transition: none; }
}