/* ============================================================
 * Tosin EIP Theme — 對齊 Tosin Portal 設計語言
 * ------------------------------------------------------------
 * 依賴：tokens.css（須先載入）
 * 命名規則：所有元件 class 一律以 `tos-` 前綴，避免與 Bootstrap 衝突。
 * 設計原則：手機優先、≤ 640px 為主要排版，桌機以單欄置中。
 * ============================================================ */

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

.tos-mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; }

/* ---------- Layout ---------- */

/* 整頁容器：手機滿版、桌機置中於 480px */
.tos-app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 頁面內容主區：避開頂條 + 底部安全留白 */
.tos-main {
  flex: 1 1 auto;
  padding: 16px;
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

/* ---------- TopBar (56px 頂條) ---------- */
.tos-topbar {
  height: 56px;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.tos-topbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* allow truncation */
}

.tos-topbar__logo {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1); /* PNG 強制變白 */
  flex-shrink: 0;
}

.tos-topbar__title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tos-topbar__title-sub {
  font-size: 11px;
  opacity: 0.7;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.tos-topbar__title-main {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 內頁簡化版（單行標題） */
.tos-topbar__title-single {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.tos-topbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* TopBar 內的 outline 小按鈕 (高 32px) */
.tos-topbar__btn {
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.4);
  background: transparent;
  color: var(--on-accent);
  border-radius: var(--r-2);
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease;
  font-family: inherit;
}

.tos-topbar__btn:hover,
.tos-topbar__btn:focus {
  background: rgba(255,255,255,0.12);
  color: var(--on-accent);
}

/* ---------- MenuItem (首頁功能列) ---------- */
.tos-menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}

.tos-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 60px;
  padding: 0 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  color: var(--ink);
  text-decoration: none;
  transition: all 120ms ease;
  cursor: pointer;
}

.tos-menu-item:hover,
.tos-menu-item:focus {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}

.tos-menu-item:active {
  transform: translateY(1px);
}

.tos-menu-item__icon {
  color: var(--accent);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tos-menu-item__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}

/* 頁尾版本資訊 */
.tos-app-footer {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-4);
  padding: 28px 16px 8px;
  letter-spacing: 0.02em;
}

/* ---------- StatCard (大數值卡) ---------- */
.tos-stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--sh-1);
  margin-bottom: 16px;
}

.tos-stat-card__greeting {
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  padding: 8px 16px;
  text-align: center;
  letter-spacing: 0.02em;
}

.tos-stat-card__body {
  padding: 24px 20px;
  text-align: center;
}

.tos-stat-card__label {
  font-size: 12.5px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.tos-stat-card__value {
  font-family: var(--font-mono);
  font-size: 56px;
  font-weight: 500;
  color: var(--accent);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1, "zero" 1;
}

.tos-stat-card__unit {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-3);
  font-weight: 400;
  margin-left: 6px;
}

/* 主數值下方的小 pill 群（如「本年新增 +30.0」、「已使用 0.0」） */
.tos-stat-card__pills {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* ---------- KvRow (詳細資料表) ---------- */
.tos-kv-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--sh-1);
}

.tos-kv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.tos-kv-row:last-child { border-bottom: 0; }

.tos-kv-row__label {
  font-size: 13px;
  color: var(--ink-2);
}

.tos-kv-row__value {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  font-feature-settings: "tnum" 1, "zero" 1;
}

.tos-kv-row__value--pos { color: var(--pos); }
.tos-kv-row__value--neg { color: var(--neg); }
.tos-kv-row__value--muted { color: var(--ink-3); }

/* ---------- Pill (狀態標籤) ---------- */
.tos-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.tos-pill--pos { background: var(--pos-soft); color: var(--pos); }
.tos-pill--neg { background: var(--neg-soft); color: var(--neg); }
.tos-pill--warn { background: var(--warn-soft); color: var(--warn); }
.tos-pill--info { background: var(--info-soft); color: var(--info); }
.tos-pill--neutral { background: var(--bg-2); color: var(--ink-2); }

/* ---------- Section Title / Card Header ---------- */
.tos-section-title {
  font-size: 12.5px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 24px 0 10px 4px;
}

/* ---------- Form (登入頁 / 修改密碼) ---------- */
.tos-form-group { margin-bottom: 14px; }

.tos-label {
  display: block;
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
  margin-bottom: 6px;
}

.tos-input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}

.tos-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.tos-input--mono { font-family: var(--font-mono); }

/* Textarea（多行文字輸入） */
.tos-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  resize: vertical;
  min-height: 80px;
  outline: none;
  line-height: 1.5;
}
.tos-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* 原生 checkbox / radio 染色 */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* H2 區段標題（admin 等多區段頁面用） */
.tos-h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 24px 0 12px;
  padding: 0 4px;
  letter-spacing: 0.01em;
}
.tos-h2:first-child { margin-top: 4px; }
.tos-h2 .tos-pill { font-weight: 500; margin-left: 6px; }

/* ---------- Button ---------- */
.tos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
  min-width: 88px;
}

.tos-btn--primary {
  background: var(--accent);
  color: var(--on-accent);
}
.tos-btn--primary:hover,
.tos-btn--primary:focus {
  background: var(--accent-2);
  color: var(--on-accent);
}

.tos-btn--outline {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink);
}
.tos-btn--outline:hover,
.tos-btn--outline:focus {
  border-color: var(--accent);
  color: var(--accent);
}

.tos-btn--block { width: 100%; }

.tos-btn--sm {
  height: 36px;
  padding: 0 14px;
  font-size: 13.5px;
  min-width: 0;
}

/* ---------- Select（下拉選單，外觀對齊 tos-input） ---------- */
.tos-select {
  width: 100%;
  height: 38px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236A6E76' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  cursor: pointer;
}
.tos-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* tos-input 較小尺寸（搭配篩選卡用） */
.tos-input--sm {
  height: 38px;
  font-size: 14px;
}

/* ---------- 篩選卡片 ---------- */
.tos-filter-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 14px;
  margin-bottom: 16px;
  box-shadow: var(--sh-1);
}

.tos-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.tos-filter-grid > .tos-filter-cell--full {
  grid-column: 1 / -1;
}

.tos-filter-cell .tos-label {
  margin-bottom: 4px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

.tos-filter-actions {
  display: flex;
  gap: 8px;
}
.tos-filter-actions .tos-btn { flex: 1 1 auto; }

/* ---------- 紀錄卡片（清單型頁面通用） ---------- */
.tos-record-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tos-record-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.tos-record-card:not(details) {
  padding: 14px 16px;
}

/* 可展開版本（用 <details>） */
details.tos-record-card {
  overflow: hidden;
}
details.tos-record-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 40px 14px 16px;
  position: relative;
}
details.tos-record-card > summary::-webkit-details-marker,
details.tos-record-card > summary::marker { display: none; content: ''; }
details.tos-record-card > summary::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 150ms ease;
}
details.tos-record-card[open] > summary::after {
  transform: translateY(-30%) rotate(-135deg);
  border-color: var(--accent);
}
details.tos-record-card[open] { border-color: var(--line-2); }
details.tos-record-card > summary:hover { background: var(--surface-2); }

.tos-record-card__detail {
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.tos-record-card__detail .tos-kv-row {
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.tos-record-card__detail .tos-kv-row:last-child { border-bottom: 0; }

.tos-kv-row--compact {
  height: 36px;
  font-size: 12.5px;
}
.tos-kv-row--total {
  background: var(--surface-2);
  font-weight: 600;
}
.tos-kv-row--total .tos-kv-row__value { font-size: 15px; }

.tos-record-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.tos-record-card__title {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.tos-record-card__metric {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
}

.tos-record-card__dates {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-3);
}

.tos-record-card__sub {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.5;
}

/* 三等分分數區（考評卡專用，自評/主管/總經理 並排對等） */
.tos-record-card__scores {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin-top: 8px;
}
.tos-score-cell {
  text-align: center;
  padding: 6px 4px;
  border-radius: var(--r-1);
  background: var(--surface-2);
}
.tos-score-cell__label {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.tos-score-cell__value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.2;
}

/* 「最近顯示 N 筆」之類的提示文 */
.tos-list-hint {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-4);
  margin: 12px 0;
}

/* ---------- Alert / Flash ---------- */
.tos-alert {
  padding: 10px 14px;
  border-radius: var(--r-2);
  font-size: 13.5px;
  margin-bottom: 14px;
  border: 1px solid transparent;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.tos-alert--info { background: var(--info-soft); border-color: #C9D8E6; color: var(--info); }
.tos-alert--pos { background: var(--pos-soft); border-color: #C5D9C8; color: var(--pos); }
.tos-alert--neg { background: var(--neg-soft); border-color: #E7C7C0; color: var(--neg); }
.tos-alert--warn { background: var(--warn-soft); border-color: #DCD2A4; color: var(--warn); }

/* ---------- Breadcrumb (內頁) ---------- */
.tos-breadcrumb {
  font-size: 12.5px;
  color: var(--ink-3);
  padding: 12px 16px 0;
}

.tos-breadcrumb a {
  color: var(--ink-3);
  text-decoration: none;
}

.tos-breadcrumb a:hover { color: var(--accent); }

.tos-breadcrumb__sep {
  display: inline-block;
  margin: 0 6px;
  color: var(--ink-4);
}

.tos-breadcrumb__current {
  color: var(--ink);
  font-weight: 500;
}

/* ---------- Utility ---------- */
.tos-spacer-12 { height: 12px; }
.tos-spacer-16 { height: 16px; }
.tos-spacer-24 { height: 24px; }

.tos-text-muted { color: var(--ink-3); }
.tos-text-small { font-size: 12.5px; }

/* 桌機略寬一點仍維持單欄 */
@media (min-width: 768px) {
  .tos-app { max-width: 480px; }
}

/* ============================================================
 * Login Page — 全屏置中 layout
 * ============================================================ */
.tos-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  position: relative;
}

.tos-login__lang {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
}

.tos-login__brand {
  text-align: center;
  padding: 24px 0 28px;
}

/* Logo 用 CSS mask 重新著色為 --accent（steel-blue）。
   來源圖採用內容飽滿的 logo-white.png（雖叫 white，實為藍色商標），
   mask 只取其 alpha channel，背景色由 background-color 決定。
   要改成其他色（白/灰/反白）只需覆蓋 background-color 即可。 */
.tos-login__logo {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto 14px;
  background-color: var(--accent);
  -webkit-mask: url("../images/logo-white.png") center / contain no-repeat;
          mask: url("../images/logo-white.png") center / contain no-repeat;
}

/* 品牌區的英文 eyebrow（小標） */
.tos-login__brand-eyebrow {
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}

/* 品牌區的中文副標 */
.tos-login__brand-sub {
  font-size: 13.5px;
  color: var(--ink-2);
  font-weight: 500;
  letter-spacing: 0.02em;
}


.tos-login__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 28px 24px;
  box-shadow: var(--sh-2);
}

.tos-login__lead {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 0 0 20px;
  line-height: 1.6;
  text-align: center;
}

/* 密碼輸入框 wrap（右側放眼睛切換按鈕） */
.tos-input-wrap {
  position: relative;
}
.tos-input-wrap .tos-input {
  padding-right: 44px;
}
.tos-input-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-2);
}
.tos-input-toggle:hover { color: var(--accent); background: var(--accent-soft); }
.tos-input-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }


.tos-login__footer {
  margin-top: auto;
  padding-top: 32px;
  text-align: center;
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.1em;
}

/* ============================================================
 * Lang Switcher — 純 CSS dropdown（用 <details>，不依賴 JS）
 * ============================================================ */
.tos-lang-switcher {
  position: relative;
}
.tos-lang-switcher summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  user-select: none;
  font-family: var(--font-sans);
}
.tos-lang-switcher summary::-webkit-details-marker,
.tos-lang-switcher summary::marker { display: none; content: ''; }
.tos-lang-switcher summary::after {
  content: '▾';
  font-size: 10px;
  margin-left: 2px;
  color: var(--ink-3);
}
.tos-lang-switcher[open] summary {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.tos-lang-switcher ul {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  min-width: 130px;
  box-shadow: var(--sh-2);
  z-index: 50;
}
.tos-lang-switcher li a {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.tos-lang-switcher li a:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.tos-lang-switcher li a.is-active {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-soft);
}

/* TopBar 內版 lang switcher — outline 白色版 */
.tos-topbar .tos-lang-switcher summary {
  background: transparent;
  border-color: rgba(255,255,255,0.4);
  color: var(--on-accent);
}
.tos-topbar .tos-lang-switcher summary::after { color: rgba(255,255,255,0.7); }
.tos-topbar .tos-lang-switcher[open] summary {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.6);
  color: var(--on-accent);
}