/* =========================================================================
 * SchoolLink 設計系統 — theme.css (風格 A：柔和圓潤 + 吉祥物融合)
 *
 * 視覺單一真相 (對應 config.js 的邏輯單一真相)。
 *
 * 用法:
 *   <link rel="stylesheet" href="shared/theme.css">
 *   元件採「opt-in class」(.sl-* 前綴),不覆蓋頁面既有的 element 選擇器,
 *   所以可以一頁一頁安全遷移,不會一掛上就改動還沒遷移的頁面。
 *
 * 風格 A 取向: 大圓角、暖色感、柔和陰影、吉祥物當陪伴主持人。
 * ========================================================================= */

:root {
  /* ===== 品牌主色 ===== */
  --sl-primary:        #4F46E5;   /* 靛藍 */
  --sl-primary-dark:   #4338CA;
  --sl-primary-soft:   #EEF2FF;   /* 淡靛藍底 */

  /* ===== 吉祥物三色 (小澳 / 小蓮 / 嗶嗶) ===== */
  --sl-ao:    #0085ff;  --sl-ao-soft:   #E6F2FF;   /* 小澳 天藍 */
  --sl-lian:  #ff66a3;  --sl-lian-soft: #FFEAF2;   /* 小蓮 蓮粉 */
  --sl-bibi:  #ffb700;  --sl-bibi-soft: #FFF6E2;   /* 嗶嗶 琥珀 */

  /* ===== 介面背景 / 表面 ===== */
  --sl-bg:        #F5F5F8;   /* 頁面底 (柔和淺灰) */
  --sl-surface:   #FFFFFF;   /* 卡片 / 浮層 */
  --sl-surface-2: #FAFAFB;   /* 次級表面 (列、輸入框底) */

  /* ===== 文字 ===== */
  --sl-text:       #1F2937;
  --sl-text-muted: #6B7280;
  --sl-text-hint:  #9CA3AF;
  --sl-text-on-primary: #FFFFFF;

  /* ===== 語意色 ===== */
  --sl-success: #1D9E75;  --sl-success-soft: #E1F5EE;   /* 加分 / 正向 */
  --sl-danger:  #E24B4A;  --sl-danger-soft:  #FCEBEB;   /* 扣分 / 危險 */
  --sl-warning: #BA7517;  --sl-warning-soft: #FAEEDA;

  /* ===== 邊框 ===== */
  --sl-border:      #ECECF1;
  --sl-border-soft: #F3F4F6;

  /* ===== 圓角 (風格 A：偏大) ===== */
  --sl-radius-sm:   10px;
  --sl-radius-md:   14px;
  --sl-radius-lg:   18px;
  --sl-radius-xl:   24px;
  --sl-radius-pill: 999px;

  /* ===== 柔和陰影 ===== */
  --sl-shadow-sm: 0 1px 3px rgba(17,24,39,0.05);
  --sl-shadow-md: 0 4px 16px rgba(79,70,229,0.08);
  --sl-shadow-lg: 0 12px 32px rgba(17,24,39,0.10);

  /* ===== 間距節奏 ===== */
  --sl-space-1: 4px;  --sl-space-2: 8px;  --sl-space-3: 12px;
  --sl-space-4: 16px; --sl-space-5: 24px; --sl-space-6: 32px;

  /* ===== 字體 ===== */
  --sl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", sans-serif;

  /* ===== 過場 ===== */
  --sl-transition: 0.2s ease;
}

/* ========================= 基礎元件 (opt-in .sl-*) ========================= */

/* --- 卡片 --- */
.sl-card {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-xl);
  box-shadow: var(--sl-shadow-md);
  padding: var(--sl-space-5);
}

/* --- 按鈕 --- */
.sl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sl-font); font-size: 1rem; font-weight: 600;
  padding: 12px 18px; border-radius: var(--sl-radius-md);
  border: 1px solid var(--sl-border); background: var(--sl-surface); color: var(--sl-text);
  cursor: pointer; transition: transform var(--sl-transition), box-shadow var(--sl-transition), background var(--sl-transition);
}
.sl-btn:hover { box-shadow: var(--sl-shadow-sm); transform: translateY(-1px); }
.sl-btn:active { transform: scale(0.98); }
.sl-btn--primary {
  background: var(--sl-primary); color: var(--sl-text-on-primary);
  border-color: transparent; box-shadow: 0 4px 14px rgba(79,70,229,0.25);
}
.sl-btn--primary:hover { background: var(--sl-primary-dark); box-shadow: 0 6px 18px rgba(79,70,229,0.35); }
.sl-btn--block { width: 100%; }

/* --- 輸入框 --- */
.sl-input {
  width: 100%; box-sizing: border-box; font-family: var(--sl-font); font-size: 1rem;
  padding: 12px 14px; border-radius: var(--sl-radius-md);
  border: 2px solid var(--sl-border); background: var(--sl-surface-2); color: var(--sl-text);
  transition: border-color var(--sl-transition), background var(--sl-transition);
}
.sl-input:focus { outline: none; border-color: var(--sl-primary); background: var(--sl-surface); }

/* --- 藥丸標籤 --- */
.sl-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--sl-radius-pill);
  font-size: 0.8rem; font-weight: 600;
  background: var(--sl-primary-soft); color: var(--sl-primary-dark);
}
.sl-pill--success { background: var(--sl-success-soft); color: var(--sl-success); }
.sl-pill--danger  { background: var(--sl-danger-soft);  color: var(--sl-danger); }

/* --- 吉祥物頭像 (暫代圓臉,正式版換角色插畫) --- */
.sl-mascot {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.sl-mascot--ao   { background: var(--sl-ao); }
.sl-mascot--lian { background: var(--sl-lian); }
.sl-mascot--bibi { background: var(--sl-bibi); }

/* --- 龍虎榜列 (Phase 3 用) --- */
.sl-rank-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--sl-radius-lg);
  background: var(--sl-surface-2); margin-bottom: 8px;
}
.sl-rank-row--top { background: var(--sl-bibi-soft); }
.sl-rank-badge {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #5a3d00; background: #E2E2E2;
}
.sl-rank-badge--1 { background: var(--sl-bibi); color: #5a3d00; }
.sl-score-pos { color: var(--sl-success); font-weight: 600; }
.sl-score-neg { color: var(--sl-danger);  font-weight: 600; }

/* --- 無障礙:尊重「減少動態」偏好 --- */
@media (prefers-reduced-motion: reduce) {
  .sl-btn { transition: none; }
  .sl-btn:hover, .sl-btn:active { transform: none; }
}

/* =========================================================================
 * V2 主角色系 — 由各角色「圈圈色」發想的整頁配色
 * 由 shared/mascot-theme.js 在 body 加上 theme-ao / theme-lian / theme-bibi。
 * 變數:--g1/--g2 漸層、--accent 強調、--accent-soft 淺底、--accent-deep 深字、
 *       --heading 標題、--muted 次級文字。
 * ========================================================================= */
/* 預設色系(小蓮)— 作為無 JS / FOUC 前的 fallback,避免空值閃白。
   實際主題由 mascot-theme.js 在 <head> 同步把 theme-* class 掛到 <html>。
   class 同層特異度,故 .theme-* 須排在 :root 之後才能覆蓋。 */
:root {
  --g1:#FFE4EE; --g2:#F3E6FF; --accent:#FF66A3; --accent-soft:#FFE3EE; --accent-deep:#C2436E; --heading:#4A2F5E; --muted:#8A6E94;
  --role1-soft:#FFE0EC; --role1-ink:#C2436E; --role2-soft:#EFE6FF; --role2-ink:#7E54C8;
}

/* 三主角色系(role1=老師/主角色端、role2=家長/漸層第二色端,同源可分) */
.theme-ao   { --g1:#DCEFFF; --g2:#ECE9FF; --accent:#0085FF; --accent-soft:#E3F1FF; --accent-deep:#1366A8; --heading:#243A52; --muted:#6E86A0;
              --role1-soft:#E0EFFF; --role1-ink:#1366A8; --role2-soft:#E7E4FB; --role2-ink:#5A50C8; }
.theme-lian { --g1:#FFE4EE; --g2:#F3E6FF; --accent:#FF66A3; --accent-soft:#FFE3EE; --accent-deep:#C2436E; --heading:#4A2F5E; --muted:#8A6E94;
              --role1-soft:#FFE0EC; --role1-ink:#C2436E; --role2-soft:#EFE6FF; --role2-ink:#7E54C8; }
.theme-bibi { --g1:#FFEFCE; --g2:#FFE7EE; --accent:#FFB700; --accent-soft:#FFF3D6; --accent-deep:#A8740C; --heading:#5A4326; --muted:#9A8256;
              --role1-soft:#FFF0CE; --role1-ink:#A8740C; --role2-soft:#FFE0E6; --role2-ink:#C75A6A; }

/* =========================================================================
 * 深色模式(html.dark)——只覆寫語意 token,各頁用 var(--sl-*) 即自動跟著變。
 * accent / accent-deep(鮮豔主色)在深底仍清楚,故不改;改背景/表面/文字/邊框/
 * soft 底色與主題漸層。color-scheme:dark 讓原生控件(scrollbar/表單)也變深。
 * ========================================================================= */
html.dark {
  --sl-bg:        #0E1320;
  --sl-surface:   #1A2131;
  --sl-surface-2: #141A27;
  --sl-text:       #E6E9EF;
  --sl-text-muted: #9BA6B6;
  --sl-text-hint:  #6B7688;
  --sl-text-on-primary: #FFFFFF;
  --sl-border:      #2B3344;
  --sl-border-soft: #222A39;
  --sl-primary-soft: #1E2740;
  --sl-success-soft: #10271F;
  --sl-danger-soft:  #2C1818;
  --sl-warning-soft: #2A2310;
  --sl-shadow-sm: 0 1px 3px rgba(0,0,0,0.45);
  --sl-shadow-md: 0 10px 30px rgba(0,0,0,0.5);
  color-scheme: dark;
}
/* 深色:主題漸層改深底、標題改亮、accent-soft 改深色調(供淡底徽章/列) */
html.dark.theme-ao   { --g1:#0F1828; --g2:#121426; --heading:#CFE0F2; --muted:#8AA0B8; --accent-soft:#15263A; --role1-soft:#15263A; --role1-ink:#7FB6F0; --role2-soft:#1B1E3A; --role2-ink:#A9A2F0; }
html.dark.theme-lian { --g1:#241522; --g2:#1C1428; --heading:#F2D6E2; --muted:#B894A6; --accent-soft:#2E1A24; --role1-soft:#2E1A24; --role1-ink:#F08AB0; --role2-soft:#241B36; --role2-ink:#BBA6F0; }
html.dark.theme-bibi { --g1:#241E10; --g2:#241616; --heading:#F0E0C0; --muted:#B8A678; --accent-soft:#2A2310; --role1-soft:#2A2310; --role1-ink:#F0C860; --role2-soft:#2A1A1E; --role2-ink:#F0A0A8; }

/* 漸層底 helper(預設 fallback 用小蓮粉) */
.sl-gradient-bg {
  background: linear-gradient(165deg, var(--g1, #FFE4EE) 0%, var(--g2, #F3E6FF) 100%);
  background-attachment: fixed;
}

/* =========================================================================
 * 跨頁平滑轉場 — 同源 MPA View Transitions
 * 啟用後跳頁(index ↔ 登入頁)自動淡入淡出;標掛 .vt-brand / .vt-hero 的元素
 * 會在兩頁之間平滑飛移變形。不支援的瀏覽器自動退回即時切換,不會壞。
 * ========================================================================= */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.32s; }
.vt-brand { view-transition-name: sl-brand; }
.vt-hero  { view-transition-name: sl-hero; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* =========================================================================
 * V2 共用頁面外殼 — 各頁套 class,版面只定義一次(消除重複)
 * 全部 scope 在 .sl-page 之下,不影響非 V2 頁面(generator / reset-password)。
 * 結構:<body class="sl-page"> → .sl-wrap → .hero + .panel
 * ========================================================================= */
.sl-page {
  margin: 0; padding: 24px; box-sizing: border-box;
  font-family: var(--sl-font);
  background: linear-gradient(165deg, var(--g1) 0%, var(--g2) 100%);
  background-attachment: fixed;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
}

.sl-page .sl-wrap { width: 100%; max-width: 400px; }

/* Hero */
.sl-page .hero { text-align: center; padding: 0.5rem 0 1.4rem; }
.sl-page .hero-mascot { display: flex; justify-content: center; align-items: flex-end; min-height: 80px; margin-bottom: 0.9rem; }
.sl-page .hero h1 { margin: 0; font-size: 2rem; font-weight: 700; color: var(--heading); letter-spacing: 0.5px; }
.sl-page .hero .tagline { margin: 6px 0 0; font-size: 0.93rem; color: var(--muted); }

/* 白面板 */
.sl-page .panel { background: var(--sl-surface); border-radius: 26px; box-shadow: 0 18px 44px rgba(80,60,90,0.13); overflow: hidden; }

/* 滑動表單容器(登入頁) */
.sl-page .forms-container { position: relative; width: 100%; }
.sl-page .forms-container.anim-ready { transition: height 0.3s ease-in-out; }
.sl-page .form-slide {
  position: absolute; top: 0; left: 0; width: 100%; padding: 1.75rem; box-sizing: border-box;
  transition: transform 0.4s ease-in-out, opacity 0.4s;
  opacity: 0; transform: translateX(100%); pointer-events: none;
}
.sl-page .form-slide.active { opacity: 1; transform: translateX(0); pointer-events: all; }
.sl-page .form-slide h2 { color: var(--heading); }

/* 輸入框 */
.sl-page .input-group { position: relative; margin-bottom: 1.1rem; }
.sl-page .input-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.sl-page .input-group input {
  width: 100%; box-sizing: border-box; padding: 13px 13px 13px 42px;
  border: 1.5px solid var(--sl-border); border-radius: 14px; font-size: 1rem;
  outline: none; background: var(--sl-surface-2); color: var(--sl-text); transition: var(--sl-transition);
}
.sl-page .input-group input:focus { border-color: var(--accent); background: var(--sl-surface); }

/* 主按鈕(themed 深色,確保白字對比) */
.sl-page .btn-block {
  width: 100%; padding: 14px; border: none; border-radius: 14px;
  background: var(--accent-deep); color: #fff; font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: var(--sl-transition);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent-deep) 30%, transparent);
}
.sl-page .btn-block:hover { filter: brightness(1.1); }
.sl-page .btn-block:disabled { opacity: 0.7; cursor: not-allowed; }

/* 次按鈕(描邊) */
.sl-page .btn-outline {
  background: transparent; border: 1.5px solid var(--sl-border); color: var(--muted);
  box-shadow: none; font-weight: 700;
}
.sl-page .btn-outline:hover { border-color: var(--accent); color: var(--accent-deep); background: transparent; box-shadow: none; filter: none; }

/* 連結 / 錯誤訊息 */
.sl-page .links { margin-top: 1.4rem; text-align: center; font-size: 0.9rem; color: var(--muted); }
.sl-page .links a { color: var(--accent-deep); text-decoration: none; cursor: pointer; font-weight: 600; display: inline-block; padding: 6px 4px; }
/* 預留訊息槽:永遠佔位、用 opacity 切換顯隱 → 出錯不撐開版面(零彈跳) */
.sl-page .error-msg { color: var(--sl-danger); text-align: center; margin-bottom: 0.6rem; font-size: 0.9rem; min-height: 1.4rem; opacity: 0; transition: opacity 0.18s ease; }
.sl-page .error-msg.show { opacity: 1; }

/* 左上角返回鈕(導覽慣例:左上=返回);毛玻璃浮在漸層上 */
.sl-page .sl-back {
  position: fixed; top: 16px; left: 16px; z-index: 20;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 15px 8px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--heading); font-size: 0.85rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 3px 12px rgba(80,60,90,0.12); transition: var(--sl-transition);
}
.sl-page .sl-back:hover { background: rgba(255,255,255,0.92); transform: translateX(-1px); }
html.dark .sl-page .sl-back { background: rgba(20,26,39,0.6); box-shadow: 0 3px 12px rgba(0,0,0,0.4); }
html.dark .sl-page .sl-back:hover { background: rgba(20,26,39,0.92); }

/* 統一頁尾:純版權(各頁套用) */
.sl-page .sl-foot { text-align: center; margin-top: 1.2rem; }
.sl-page .sl-foot .copy { font-size: 0.74rem; color: var(--muted); opacity: 0.7; }

/* ===== 平板:卡片與主角放大,不再小而孤單 ===== */
@media (min-width: 700px) {
  .sl-page .sl-wrap { max-width: 460px; }
  .sl-page .hero h1 { font-size: 2.2rem; }
  .sl-page .panel { border-radius: 30px; }
}

/* ===== 矮視窗(橫向手機 / 鍵盤彈出):壓縮 hero 騰出空間 ===== */
@media (max-height: 520px) {
  .sl-page { align-items: flex-start; }
  .sl-page .hero { padding: 0.25rem 0 0.6rem; }
  .sl-page .hero-mascot { min-height: 56px; margin-bottom: 0.4rem; }
  .sl-page .hero h1 { font-size: 1.5rem; }
  .sl-page .hero .tagline { font-size: 0.82rem; }
}

/* =========================================================================
 * 底部導航列(像 app)— 只在手機/平板顯示,桌機隱藏。內容由各頁自訂。
 * 用法:<nav class="sl-bnav"> 內放 .sl-bnav-item / .sl-bnav-fab。
 *      內容頁記得在 ≤768px 時加 body padding-bottom 留位。
 * ========================================================================= */
.sl-bnav { display: none; }
@media (max-width: 768px) {
  .sl-bnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(255,255,255,0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--sl-border, #ECECF1);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around; align-items: flex-end;
    box-shadow: 0 -4px 20px rgba(80,60,90,0.07);
  }
  .sl-bnav-item {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none; cursor: pointer; padding: 6px 2px;
    color: var(--muted, #8A6E94); font-size: 0.68rem; font-weight: 600;
    text-decoration: none; transition: var(--sl-transition);
  }
  .sl-bnav-item i { font-size: 1.15rem; }
  .sl-bnav-item.active { color: var(--accent-deep, #C2436E); }
  .sl-bnav-fab {
    flex: 0 0 auto; width: 52px; height: 52px; margin: -22px 4px 0; border-radius: 50%;
    background: var(--accent-deep, #C2436E); color: #fff; border: 4px solid #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem; cursor: pointer;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-deep, #C2436E) 40%, transparent);
    transition: var(--sl-transition);
  }
  .sl-bnav-fab:active { transform: scale(0.94); }
}
/* 深色模式:底部導覽列跟著變深(原本硬編白底,深色 app/standalone 會與內容打架) */
html.dark .sl-bnav { background: rgba(20,26,39,0.94); border-top-color: var(--sl-border, #2A3345); box-shadow: 0 -4px 20px rgba(0,0,0,0.4); }
html.dark .sl-bnav-fab { border-color: var(--sl-surface, #141A27); }