/* ===================================================================
   桃園國小班級網頁系統 — 共用樣式
   設計方向：配色取材自桃小校徽與校網識別色（校徽紅／校徽金），
   但用扁平、俐落的現代排版方式呈現，不做漸層/擬物化，維持
   「左側選單＋分類色塊」的熟悉操作邏輯，拿掉 IE6 相容的舊寫法。
   =================================================================== */

:root {
  --color-primary: #b3271f;      /* 校徽文字紅 */
  --color-primary-dark: #7a1a15; /* 深校徽紅，頁首/頁尾用 */
  --color-accent: #b8842a;       /* 校徽金 */
  --color-accent-light: #f5e6c4; /* 淺校徽金，色塊底色用 */
  --color-bg: #faf7f1;
  --color-surface: #ffffff;
  --color-border: #e8ddc9;
  --color-text: #2a211a;
  --color-text-muted: #7a6f5e;
  --color-success: #2f7a4f;
  --color-danger: #a83b30;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(40, 25, 15, 0.08);
  --sidebar-width: 240px;
  --header-height: 60px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans TC", "Noto Sans CJK TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  font-size: 17px; /* 全站字體加大一級，提升可讀性（原本沒有明訂，瀏覽器預設 16px） */
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.app-header {
  height: var(--header-height);
  background: var(--color-primary-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: var(--shadow);
}

.app-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
}

.app-header .brand small {
  /* 班級名稱原本 0.72rem 太小、opacity 0.85 也偏淡，老師反映在頁首看不清楚
     自己現在是在哪個班網——放大字級、拿掉透明度，加粗一點，讓左邊「班級
     名稱」跟右邊放大後的「教師姓名」在視覺份量上比較平衡（見下面
     .user-teacher-name）。 */
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  opacity: 1;
}

.brand-logo {
  display: flex;
  flex-shrink: 0;
}
.brand-logo img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: #fff;
  border: 2px solid var(--color-accent-light);
}

.hero-banner {
  position: relative;
  background: var(--color-primary-dark);
  color: #fff;
  overflow: hidden;
}
.hero-banner-inner {
  position: relative;
  z-index: 2;
  padding: 40px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  flex-wrap: wrap;
}
.hero-banner-logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: #fff;
  border: 3px solid var(--color-accent-light);
  flex-shrink: 0;
}
.hero-banner-text h1 {
  margin: 0 0 6px;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.hero-banner-text p {
  margin: 0;
  font-size: 1rem;
  opacity: 0.9;
}
@media (max-width: 560px) {
  .hero-banner-inner { padding: 28px 16px; }
  .hero-banner-text h1 { font-size: 1.3rem; }
}

/* 輪播照片圖層：hero-banner（全站首頁）跟 site-hero（班網頁首）共用。
   純 CSS keyframes 切換，不需要 JavaScript，見 layout.php render_hero_photos()。 */
.hero-photos {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
}
.hero-slide.active { opacity: 1; }
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(20,10,8,.72) 0%, rgba(20,10,8,.25) 55%, rgba(20,10,8,.05) 100%);
}

/* 班網自己的橫幅：不放系統大標題，只有照片/配色背景 + 班級介紹疊字（見 site.php）。
   班級名稱本身不放在這裡，維持在原本 .page-title 的位置。 */
.site-hero {
  position: relative;
  height: 300px;
  overflow: hidden;
  color: #fff;
  background: var(--color-primary-dark);
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.site-hero-text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 18px 32px;
}
.site-hero-text p {
  margin: 0;
  font-weight: 700;
  font-size: 48pt;
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0,0,0,.55);
}
@media (max-width: 700px) {
  .site-hero { height: 180px; border-radius: 0; margin: 0 -24px 18px; }
  .site-hero-text { padding: 14px 18px; }
  .site-hero-text p { font-size: 22pt; }
}

/* 榮譽榜跑馬燈：卡片式橫向自動捲動，滑鼠移入暫停。 */
.honor-ticker {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 0;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.honor-ticker .label-tag {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--color-primary-dark);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  font-weight: 700;
  font-size: 0.92rem;
  z-index: 2;
  border-radius: var(--radius) 0 0 var(--radius);
  white-space: nowrap;
}
.honor-ticker .fade-edge {
  position: absolute; top: 0; bottom: 0; width: 60px; z-index: 1; pointer-events: none;
}
.honor-ticker .fade-left { left: 128px; background: linear-gradient(90deg, var(--color-surface), rgba(255,255,255,0)); }
.honor-ticker .fade-right { right: 0; background: linear-gradient(270deg, var(--color-surface), rgba(255,255,255,0)); }
.honor-ticker .track-wrap { padding-left: 128px; overflow: hidden; }
.honor-ticker .track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: honor-scroll-left 26s linear infinite;
}
.honor-ticker:hover .track { animation-play-state: paused; }
@keyframes honor-scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.honor-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-accent-light);
  border-radius: 999px;
  padding: 7px 16px 7px 8px;
  white-space: nowrap;
}
.honor-card .medal {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.honor-card .info { display: flex; flex-direction: column; line-height: 1.25; }
.honor-card .name { font-weight: 700; font-size: 0.92rem; color: var(--color-text); }
.honor-card .detail { font-size: 0.76rem; color: var(--color-text-muted); }
@media (max-width: 560px) {
  .honor-ticker .label-tag { position: static; border-radius: var(--radius); margin: 0 16px 10px; display: inline-flex; }
  .honor-ticker .fade-left, .honor-ticker .fade-right { display: none; }
  .honor-ticker .track-wrap { padding-left: 16px; }
}

.app-header nav.breadcrumb {
  font-size: 0.85rem;
  opacity: 0.9;
}

.app-header nav.breadcrumb a { color: #fff; }

.app-header .user-box {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
}

.user-box .user-teacher-name {
  /* 對應左側放大後的 .brand small（班級名稱），這裡把右側教師姓名一併放大、
     加粗，讓「班級名稱（靠左）／教師姓名（靠右）」在頁首兩端的視覺重量相近。 */
  font-size: 1.05rem;
  font-weight: 700;
}

.btn {
  display: inline-block;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  transition: opacity .15s ease;
}
.btn:hover { opacity: .88; text-decoration: none; }
.btn-outline {
  background: transparent;
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}
.btn-outline.on-light { border-color: var(--color-primary); color: var(--color-primary); }
.btn-secondary { background: #fff; color: var(--color-primary); border-color: var(--color-primary); }
.btn-danger { background: var(--color-danger); }
.btn-sm { padding: 5px 12px; font-size: 0.8rem; }

.layout {
  display: flex;
  min-height: calc(100vh - var(--header-height));
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 18px 0;
}

.sidebar .group-title {
  font-size: 0.75rem;
  color: #fff;
  background: var(--color-accent);
  padding: 6px 16px;
  margin: 14px 0 4px;
  letter-spacing: .05em;
}

.sidebar a.menu-item {
  display: block;
  padding: 10px 20px;
  color: var(--color-text);
  font-size: 1rem;
  border-left: 3px solid transparent;
}
.sidebar a.menu-item:hover { background: var(--color-accent-light); text-decoration: none; }
.sidebar a.menu-item.active {
  border-left-color: var(--color-primary);
  background: var(--color-accent-light);
  color: var(--color-primary);
  font-weight: 700;
}

.main {
  flex: 1;
  min-width: 0;
  padding: 24px;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 20px;
}

.card h2, .card h3 { margin-top: 0; }

.page-title {
  font-size: 32pt;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--color-primary-dark);
}
@media (max-width: 560px) {
  .page-title { font-size: 22pt; }
}

/* Google Classroom／Meet 快速圖示（見 site.php h1 那一行右側）。尺寸故意
   比 .page-title 略小一點（page-title 32pt≈43px），不要搶走班級名稱的
   視覺重量。連結有設定時走正常配色；沒設定時用 grayscale+降低透明度做
   出「灰掉」的停用感，滑鼠移上去有 title 提示文字說明原因。 */
.site-quicklinks {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.quicklink-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.quicklink-icon img {
  width: 100%;
  height: 100%;
  display: block;
}
a.quicklink-icon:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.quicklink-icon--disabled {
  cursor: default;
  filter: grayscale(1) opacity(0.4);
}
@media (max-width: 560px) {
  .quicklink-icon { width: 28px; height: 28px; }
}

.cover-photo {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 18px;
}

.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--color-border);
}
.post-list li:last-child { border-bottom: none; }
.post-list .idx { color: var(--color-text-muted); font-size: 0.85rem; width: 28px; flex-shrink: 0; }
.post-list .title { flex: 1; font-weight: 600; font-size: 1.02rem; }
.post-list .meta { color: var(--color-text-muted); font-size: 0.85rem; white-space: nowrap; }

.empty-state {
  text-align: center;
  color: var(--color-text-muted);
  padding: 40px 20px;
}

/* scroll-margin-top：左側「年級」選單點了會跳到 #grade-N 錨點，但頁首是
   position:sticky（見 .app-header），直接跳的話年級標題會被頁首蓋住一截，
   加這個讓瀏覽器捲動時自動預留頁首高度的空間。 */
.grade-group { margin-bottom: 24px; scroll-margin-top: calc(var(--header-height) + 12px); }
.grade-group h3 {
  background: var(--color-accent);
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  display: inline-block;
  font-size: 0.95rem;
}

.class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.class-card {
  position: relative; /* 讓角落的 .card-ribbon 用 absolute 定位在這張卡片內 */
  overflow: hidden; /* 把 .card-ribbon 裁到跟卡片一樣的圓角，不然圖片的直角會蓋掉圓角 */
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--color-surface);
  box-shadow: var(--shadow);
}
.class-card .card-row {
  /* 改成「班級名稱＋教師姓名」同一行置中對齊（老師指定的版面，參考
     「一年三班　林繡屏」的排法），不再是左右分布——名稱長或老師多的
     時候允許換行（flex-wrap），置中排版下用刪節號會很奇怪，改成完整
     顯示，最長就多疊一行。 */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.class-card .name { font-weight: 700; }
/* 「NEW」角落色帶：取代原本的「有更新！」徽章圖（星星+紅框那張），改用
   老師提供的紅色對角緞帶圖，直接整張圖用、不用重新出圖。定位在卡片左
   上角、蓋在圓角上方，靠 .class-card 的 overflow:hidden 裁成跟卡片
   一樣的圓角（見上面）。圖片本身四周留白跟卡片背景（純白）同色，裁切
   後看起來就是貼齊圓角的三角色帶，不需要另外去背。這裡故意不用動畫、
   維持靜態——新版設計本身已經夠顯眼，不需要閃爍。 */
.class-card .card-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: auto;
  pointer-events: none;
}
.class-card .teachers {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}
/* 班級卡片底下的「最後更新」日期，字級刻意壓小、顏色用 muted，不要跟
   上面班級名稱／教師姓名搶視覺重量，單純給想確認「這個班網是不是還有
   在維護」的人看一眼日期用的。跟著上面文字一起改成置中。 */
.class-card .card-updated {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* 側邊欄「最後上站使用者」清單（見 includes/layout.php render_global_menu()）。
   跟 .menu-item 是不同東西——這裡不是可點的連結，純顯示姓名＋日期，所以
   另外寫一套排版，不共用 .menu-item 的 hover/active 樣式。 */
.recent-logins {
  padding: 4px 16px 10px;
}
.recent-login-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  font-size: 0.88rem;
  border-bottom: 1px dashed var(--color-border);
}
.recent-login-row:last-child { border-bottom: none; }
.recent-login-name {
  color: var(--color-text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-login-date {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  flex-shrink: 0;
}

table.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.data-table th, table.data-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
table.data-table th { color: var(--color-text-muted); font-weight: 600; font-size: 0.8rem; }

form .field { margin-bottom: 16px; }
form label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.88rem; }
form .hint { color: var(--color-text-muted); font-size: 0.78rem; margin-top: 4px; }
form input[type=text], form input[type=email], form input[type=url], form input[type=number],
form input[type=password], form textarea, form select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.92rem;
  font-family: inherit;
}
form textarea { min-height: 140px; resize: vertical; }
form .checkbox-row { display: flex; align-items: center; gap: 8px; }
form .checkbox-row input { width: auto; }

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  background: var(--color-accent-light);
  color: var(--color-primary-dark);
}
.badge.readonly { background: #f6e6e6; color: var(--color-danger); }
.badge.draft { background: #fff2d6; color: #93650a; }

/* 後台「班級活動監控」矩陣表（admin/activity_dashboard.php）：每格顯示
   有沒有用過某功能＋最後一次時間，用色彩區分一眼可辨識，不用另外做圖示。 */
.activity-cell { text-align: center; white-space: nowrap; }
.activity-yes { color: var(--color-success); font-weight: 700; font-size: 1rem; }
.activity-no { color: var(--color-border); font-weight: 700; font-size: 1rem; }
.activity-time { display: block; font-size: 0.72rem; color: var(--color-text-muted); font-weight: 400; margin-top: 2px; }
.activity-time.activity-time--unknown { font-style: italic; }

.flash {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 0.9rem;
}
.flash.success { background: #e5f6ec; color: var(--color-success); }
.flash.error { background: #fbe8e8; color: var(--color-danger); }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }

.pagination { display: flex; gap: 6px; margin-top: 16px; }
.pagination a, .pagination span {
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.85rem;
}
.pagination .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.link-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.link-card .icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--color-primary-dark);
  border: 1px solid var(--color-border);
}
.link-card .body { flex: 1; min-width: 0; }
.link-card .title { font-weight: 700; margin-bottom: 2px; }
.link-card .desc { font-size: 0.85rem; color: var(--color-text-muted); margin: 4px 0 8px; white-space: pre-line; }
.link-card .meta { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 6px; }

.site-footer {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  padding: 24px 12px;
}

.menu-toggle { display: none; }

@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    display: none;
  }
  .sidebar.open { display: block; }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
  }
  .app-header nav.breadcrumb { display: none; }
}

/* ============================================================
   課表（schedule.php）：字級規格是照老師提供的實體課表照片確認過的——
   節次、星期、授課教師、學年度都要放大，並排成 A4 橫向方便直接列印。

   字型：老師上傳了兩份言字型——
     1. 「BpmfIansui」（檔名帶 Bpmf）：每個字會自動疊顯示注音符號，不是
        單純的書法字體，只給「低年級（1、2年級）」班網用
        （.schedule-sheet--bpmf 這個修飾 class，由 schedule.php 依
        sites.grade 動態加上），中高年級用會被注音符號干擾。
     2. 「Iansui」原版（無注音）：給中高年級跟沒設年級的站台
        （科任/行政/社團）用，一樣是書法感字體，但沒有疊注音符號。
   兩份字型檔各約 6.5MB／9MB（TrueType，未壓縮成 woff2——這台環境沒有
   brotli 可以轉檔），但只有訪客真的打開課表頁才會下載對應那一份，且
   瀏覽器會快取。
   ============================================================ */
@font-face {
  font-family: 'IansuiBpmf';
  src: url('/assets/fonts/Iansui-Bpmf-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Iansui';
  src: url('/assets/fonts/Iansui-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.schedule-sheet {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  /* 中高年級／沒設年級的站台預設用這份（無注音）。 */
  font-family: 'Iansui', 'Microsoft JhengHei', '微軟正黑體', sans-serif;
}
.schedule-sheet--bpmf {
  /* 低年級蓋掉上面那份，改用有注音的版本。 */
  font-family: 'IansuiBpmf', 'Microsoft JhengHei', '微軟正黑體', sans-serif;
}
/* 課表本體現在是唯一內容，不用再跟右側教師清單搶版面，維持一般文件流
   即可（.schedule-layout／.schedule-table-wrap 這兩層留著沒拆掉，是
   避免大改 schedule.php 的巢狀結構，純粹當一般容器用，不再有絕對定位
   或百分比寬度切分）。 */
.schedule-layout {
  position: relative;
}
.schedule-table-wrap {
  width: 100%;
  /* 表格現在多了「我們的老師」欄，共 8 欄；螢幕太窄時（見下面手機版
     media query）與其把每欄硬壓到擠成一字一行（跟以前直式書寫側欄
     被壓扁是同一種問題），改成讓表格維持可讀寬度、外層可以左右滑動
     捲動，捲軸取代硬擠。 */
  overflow-x: auto;
}
/* 科任教師清單改成表格最右側一欄（.col-staff，見下面），不再是右側
   獨立的直式書寫側欄——原本的側欄版面遇到「體育」「資訊」這種兩個字
   角色名稱，欄位一窄就會被拆成單字直式堆疊、看起來像破版，改成跟 Word
   匯出版一樣的表格欄位（見 schedule.php 的 $staffSlots／$renderStaffCell）
   後，這個問題不會再發生：文字維持一般橫式書寫，跟著儲存格自動換行。 */
.schedule-table .col-staff {
  width: 12%;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  /* 跟其他欄位做出區別（老師要求），淺綠色跟服裝列的淺黃(#faf3e6)／午休列的
     淺卡其(#eef3e2)都拉開一點色相/飽和度，不會被誤認成同一種底色。這條規則
     故意寫在 .schedule-table th 之後（見上面），靠 2 個 class 的選擇器優先度
     蓋掉 th 預設的表頭底色，所以「我們的師長」表頭跟底下的儲存格會是同一種
     綠；午休/服裝列那兩格因為有 .lunch-row td／.dress-row td 這種「class+
     element」選擇器優先度更高，还是維持原本那兩列自己的顏色，不會被這裡蓋掉。 */
  background: #d9f0df;
}
.cell-staff-entry {
  /* 字級跟課表本體「科目」欄（.subject）同步，各版本（一般／注音／手機／
     列印）都要對應調整，見下面各自的覆寫規則。 */
  font-size: 20pt;
  line-height: 1.4;
}
.cell-staff-entry + .cell-staff-entry {
  margin-top: 6px;
}
/* 一格塞兩位教師時（中高年級科任較多，見 schedule.php／docx_export.php
   的 $staffSlots 演算法：位子不夠一格一位時改成兩位一組），字級要跟著
   縮小，不然兩行姓名疊起來會把這一列撐高、破壞版面（列印版尤其容易因此
   擠成 2 頁，前面已經實測踩過這個坑）。用 :has() 偵測同一格裡有沒有
   「後面接著另一位」（.cell-staff-entry + .cell-staff-entry），有的話
   才縮小，一格只有一位維持原本字級不變。下面各版本（一般／注音／手機／
   列印）都要各自加一條對應覆寫，理由跟各自的單人版字級規則一樣。 */
.schedule-table .col-staff:has(.cell-staff-entry + .cell-staff-entry) .cell-staff-entry {
  font-size: 14pt;
  line-height: 1.15;
}
.schedule-table .col-staff:has(.cell-staff-entry + .cell-staff-entry) .cell-staff-entry + .cell-staff-entry {
  margin-top: 2px;
}
.schedule-table .staff-role {
  font-weight: 700;
  color: var(--color-primary-dark);
}
.schedule-title {
  font-size: 26pt;
  font-weight: 700;
  text-align: center;
  color: var(--color-primary-dark);
  margin-bottom: 16px;
}
/* 導師姓名跟標題文字放在同一行（原本試過拆成獨立一行、字級縮小，老師反映
   看起來太小，改成跟標題並排、字級只比標題小一點，比較顯眼）。只有課表
   本體是 role==='導師' 那筆填了姓名才會顯示（見 schedule.php），科任/
   行政站台通常沒有「導師」這個角色，就不會多印這一段。 */
.schedule-title-teacher {
  font-size: 20pt;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-left: 16px;
}
.schedule-table {
  width: 100%;
  min-width: 720px; /* 多了「我們的老師」欄共 8 欄，太窄螢幕靠 .schedule-table-wrap 的 overflow-x:auto 捲動，不硬壓縮欄寬 */
  border-collapse: collapse;
  table-layout: fixed;
}
.schedule-table th,
.schedule-table td {
  border: 2px solid var(--color-border);
  text-align: center;
  vertical-align: middle;
  padding: 12px 4px;
}
.schedule-table th {
  font-size: 20pt;
  font-weight: 700;
  background: #f6efe0;
  color: var(--color-primary-dark);
}
/* 節次／時間原本是同一欄裡疊兩行（節次數字＋時段文字），改成兩個獨立
   欄位：節次欄縮到剛好放得下 1-2 位數字就好（.col-period），時間欄
   （.col-time）放時段文字，兩欄合計比原本的單欄（12%）略寬一點，讓
   時段文字有自己的欄位不用跟節次數字擠；星期一～五 5 欄則因此縮窄
   （table-layout:fixed 下沒設寬度的欄位會平分剩餘空間，不用另外手動
   算百分比）。 */
.schedule-table .col-period { width: 7%; font-size: 18pt; font-weight: 700; }
.schedule-table .col-time { width: 11%; font-size: 13pt; font-weight: 700; }
.schedule-table .period-no { font-size: 24pt; line-height: 1.1; }
.schedule-table .period-time { font-size: 13pt; color: var(--color-text-muted); }
.schedule-table .subject { font-size: 20pt; font-weight: 700; line-height: 1.25; }
/* .cell-teacher（科目下方的授課教師姓名）老師反映列印太擠，schedule.php
   已經不再輸出這個 div 了（教師姓名改成只在右側「我們的師長」欄看）。
   這條規則保留著沒刪，純粹是萬一之後要恢復比較方便，目前沒有任何地方
   會用到、不會影響版面。 */
.schedule-table .cell-teacher { font-size: 14pt; color: var(--color-text-muted); margin-top: 4px; }
.schedule-table .dress-row td { font-size: 15pt; background: #faf3e6; }
.schedule-table .dress-row .col-period { font-weight: 700; }
/* 午休固定列（12:00-13:00，見 schedule.php 插入邏輯）：跟服裝列一樣用
   淺色底跟其他課程列區隔開來，字級比科目小一點，畢竟只是提示用的固定
   內容不是真正排課。 */
/* 午休列現在是單一 td（colspan 蓋滿節次＋時間＋五個星期欄），只印一行
   「午休　12:00-13:00」，比原本節次列矮很多——這樣多這一列不會把表格
   擠出單張 A4（見 schedule.php 插入邏輯／print 區塊裡 padding 也一起
   調過）。 */
.schedule-table .lunch-row td { font-size: 14pt; background: #eef3e2; color: var(--color-text-muted); font-weight: 700; padding-top: 4px; padding-bottom: 4px; }

/* 注音字型（低年級）版本：字符本身因為疊注音符號會比一般字高，一開始
   字級縮得比較保守，後來老師實測列印預覽發現下方跟右側教師清單欄還
   空一大截（見交接記錄的截圖），才又把字級／欄高／教師清單字級都放大，
   盡量把 A4 版面用滿，不要浪費空間。 */
.schedule-sheet--bpmf .schedule-title { font-size: 23pt; }
.schedule-sheet--bpmf .schedule-title-teacher { font-size: 17pt; }
.schedule-sheet--bpmf .schedule-table th { font-size: 15pt; }
.schedule-sheet--bpmf .schedule-table .col-period { font-size: 13pt; }
.schedule-sheet--bpmf .schedule-table .col-time { font-size: 10pt; }
.schedule-sheet--bpmf .schedule-table .period-no { font-size: 18pt; }
.schedule-sheet--bpmf .schedule-table .period-time { font-size: 10pt; }
.schedule-sheet--bpmf .schedule-table .subject { font-size: 16pt; }
.schedule-sheet--bpmf .schedule-table .cell-teacher { font-size: 10pt; }
.schedule-sheet--bpmf .schedule-table .dress-row td { font-size: 11pt; }
.schedule-sheet--bpmf .schedule-table .lunch-row td { font-size: 11pt; }
.schedule-sheet--bpmf .schedule-table th,
.schedule-sheet--bpmf .schedule-table td { padding: 5px 6px; }
/* 教師清單欄字級對齊本區塊的「科目」字級（.schedule-sheet--bpmf
   .schedule-table .subject 是 16pt），理由同上面一般版。 */
.schedule-sheet--bpmf .cell-staff-entry { font-size: 16pt; letter-spacing: 1px; }
.schedule-sheet--bpmf .schedule-table .col-staff:has(.cell-staff-entry + .cell-staff-entry) .cell-staff-entry {
  font-size: 12pt;
  letter-spacing: 0;
  line-height: 1.15;
}
/* 注音字體每個字旁邊會多疊一個小小的注音符號，同樣字級下比一般字型實際
   佔的寬度更大，原本 12% 的欄寬（跟一般版共用同一條規則）擠不太下，
   姓名常常斷得很零碎（老師反映「被切掉」）。這裡專門給注音版桌機/平板
   畫面加寬到 18%（多出來的寬度由其餘沒設寬度的星期欄自動平分讓出，
   table-layout:fixed 的關係，不用手動重算每欄百分比）。特別限定
   @media screen，不要動到列印——列印版另外有自己實測過剛好塞滿單張
   A4 的 16% 設定（見下面 @media print），這裡改了會連動影響列印版面，
   反而可能把好不容易調好的單頁列印又擠成 2 頁。 */
@media screen {
  .schedule-sheet--bpmf .schedule-table .col-staff { width: 18%; }
}

/* 低年級版面再加一層配色／圖示，照老師傳的實體注音課表範例調的：
   淺藍標題列、節次改成圓形色塊、服裝列淺黃底、右側教師清單加「師長
   介紹」標題跟星星裝飾。原圖裡的插圖（太陽公公、動物樂團）是別人畫的
   美術素材，沒有一起做——這裡只做版面／配色／圖示這幾層。 */
.schedule-sheet--bpmf .schedule-table th {
  background: #dbeeff;
  color: #1f5c8b;
}
/* 注音版表頭整排都是淺藍（見上面），「我們的師長」欄位要跟旁邊的表頭
   區隔開來，維持跟一般版一樣的淺綠、不要被表頭統一底色蓋掉——這條要
   寫在上面那條之後，且要多帶 .col-staff 這個 class 才會贏過去（3 個
   class+1 element 對 2 個 class+1 element）。 */
.schedule-sheet--bpmf .schedule-table th.col-staff {
  background: #d9f0df;
  color: var(--color-primary-dark);
}
.schedule-sheet--bpmf .schedule-table .period-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: #4a90d9;
  color: #fff;
}
.schedule-sheet--bpmf .schedule-table .dress-row td { background: #fff6d5; }

@media (max-width: 700px) {
  .schedule-title { font-size: 18pt; }
  .schedule-table th { font-size: 13pt; }
  .schedule-table .col-period { font-size: 12pt; }
  .schedule-table .period-no { font-size: 16pt; }
  .schedule-table .period-time { font-size: 10pt; }
  .schedule-table .subject { font-size: 13pt; }
  .schedule-table .cell-teacher { font-size: 10pt; }
  .schedule-table .dress-row td { font-size: 11pt; }
  .cell-staff-entry { font-size: 13pt; }
  .schedule-sheet--bpmf .cell-staff-entry { font-size: 13pt; letter-spacing: 0; }
  .schedule-table .col-staff:has(.cell-staff-entry + .cell-staff-entry) .cell-staff-entry { font-size: 10pt; line-height: 1.1; }
  .schedule-sheet--bpmf .schedule-table .col-staff:has(.cell-staff-entry + .cell-staff-entry) .cell-staff-entry { font-size: 9pt; letter-spacing: 0; line-height: 1.1; }
}

@media print {
  .no-print { display: none !important; }
  .app-header, .sidebar, .site-footer, nav.breadcrumb { display: none !important; }
  .main { padding: 0; }
  .schedule-sheet { border: none; padding: 0; }
  /* 列印時的字級/列高。這裡只影響中高年級（一般字體）版面——低年級注音
     版有自己一整套 .schedule-sheet--bpmf 專屬規則，class 優先度比這裡
     高，不會被這裡蓋掉。
     中高年級版原本這裡壓得比較保守（怕擠不進單張 A4），後來實測發現
     列印起來表格下方還空 2-3 成高度沒用到，跟老師確認過要盡量把 A4
     版面用滿（頁面邊界維持 6mm 不變，不用再縮），所以整套再放大一輪、
     列高也加高，同時仍然維持單張列印（有實測用 A4 尺寸的列印輸出確認過)。
     節次時段（如「08:20-09:00」）字級刻意留小，沒有跟著放大：那一欄
     （.col-period）寬度窄，字級放大會擠到換行變兩行，反而把整張表墊
     高、擠成 2 頁（實測抓到過這個問題）。 */
  .schedule-title { margin-bottom: 2px; font-size: 20pt; }
  .schedule-title-teacher { font-size: 16pt; }
  .schedule-table th,
  .schedule-table td { padding: 1px 5px; border-width: 1px; }
  .schedule-table .lunch-row td { padding-top: 1px; padding-bottom: 1px; }
  .schedule-table .dress-row td { padding-top: 1px; padding-bottom: 1px; }
  /* 師長欄兩位以上疊在同一格時，行距壓緊一點，避免服裝列被擠到第 2 頁。 */
  .cell-staff-entry + .cell-staff-entry { margin-top: 2px; }
  .schedule-table th { font-size: 18pt; }
  .schedule-table .col-period { font-size: 15pt; }
  .schedule-table .col-time { font-size: 11pt; }
  .schedule-table .period-no { font-size: 21pt; }
  .schedule-table .period-time { font-size: 10pt; margin-top: 1px; }
  .schedule-table .subject { font-size: 18pt; }
  .schedule-table .cell-teacher { font-size: 12pt; margin-top: 1px; }
  .schedule-table .dress-row td { font-size: 13pt; }
  .schedule-table .lunch-row td { font-size: 12pt; }
  /* 教師清單欄字級跟著課表本體的科目字級（.subject）一起縮，維持兩者
     視覺上同一個量級。 */
  .cell-staff-entry { font-size: 18pt; line-height: 1.05; }
  /* 一格塞兩位教師時（見上面 style.css 開頭同名規則的說明）列印版縮更小，
     這裡沒有「已知固定的最後一格」可以特別放寬，兩位以上疊在任何一列都
     可能發生，字級一定要壓夠小才不會把整張表撐成 2 頁。 */
  .schedule-table .col-staff:has(.cell-staff-entry + .cell-staff-entry) .cell-staff-entry { font-size: 12pt; line-height: 1; }
  /* 師長欄字級放大到 18pt 後，原本 12% 寬度常常兩個字就換行，導致整列
     被墊高、擠成 2 頁——放寬到 16%（多出來的寬度從其餘天數欄自動平分
     扣掉，因為 table-layout:fixed 下沒設寬度的欄位是平分剩餘空間）。 */
  .schedule-table .col-staff { width: 16%; }
  /* 注音版列印：IansuiBpmf 這套字型每個字旁邊都疊了一個小注音符號，
     實際佔寬比一般字型寬不少，上面那些字級/欄寬是照一般字型（.woff
     沒有注音符號）調的，注音版套用真正的字型之後「科目」欄常常擠成
     兩行、把整張表墊高擠成 2 頁（用真的注音字型實測 pdfinfo 抓到過），
     這裡另外收窄一輪、把師長欄寬度也讓一些回去給科目欄。 */
  .schedule-sheet--bpmf .schedule-table .subject { font-size: 13pt; }
  .schedule-sheet--bpmf .schedule-table .cell-teacher { font-size: 9pt; }
  .schedule-sheet--bpmf .schedule-table .col-period { font-size: 11pt; }
  .schedule-sheet--bpmf .schedule-table .col-time { font-size: 9pt; }
  .schedule-sheet--bpmf .schedule-table .period-no { font-size: 15pt; }
  .schedule-sheet--bpmf .schedule-table th { font-size: 13pt; }
  .schedule-sheet--bpmf .schedule-table .col-staff { width: 12%; }
  .schedule-sheet--bpmf .cell-staff-entry { font-size: 13pt; line-height: 1.05; }
  .schedule-sheet--bpmf .schedule-table .col-staff:has(.cell-staff-entry + .cell-staff-entry) .cell-staff-entry { font-size: 9pt; line-height: 1; }
  /* 老師要求左右頁緣要留約 1.5cm 空白（跟 docx 匯出版一致，見
     includes/docx_export.php 的 $sectPr 說明），原本上下左右統一 6mm，
     改成左右 15mm、上下維持 6mm——上下沒有多留白的需求，維持原本
     設定不動，改太多反而可能把好不容易調好的單頁列印又擠成 2 頁。 */
  @page { size: A4 landscape; margin: 6mm 15mm; }
}