/* theme: classic — login (login) */
/* 「classic」= 沉穩商務。深海軍藍主色 + 冷調中性灰藍,細緻描邊、分層柔和陰影、
   明確字體層級與 hover/focus 打磨。完全保留 snapshot 排版,零 DOM 改動。 */

/* ── 設計變數(宣告喺 body,唔用 :root)────────────────────────────── */
body.ty-theme-classic {
  --tc-navy:      #1f4e79;   /* 主色:經典海軍藍 */
  --tc-navy-2:    #2c6aa8;   /* 主色亮階(漸層 / hover)*/
  --tc-navy-3:    #163a5c;   /* 主色深階(按下)*/
  --tc-ink:       #1c2a38;   /* 主要文字 */
  --tc-muted:     #5c6b7a;   /* 次要文字 / label */
  --tc-line:      #d5dde6;   /* 描邊 */
  --tc-field-bg:  #fbfcfe;   /* 輸入框底 */
  --tc-danger:    #b3261e;   /* 錯誤 */
  --tc-ring:      rgba(31, 78, 121, .18);

  min-height: 100vh;
  color: var(--tc-ink);
  background:
    radial-gradient(120% 90% at 50% -10%, #ffffff 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #eef2f7 0%, #e4eaf1 100%) fixed;
  font-family: "Segoe UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── 標題 ─────────────────────────────────────────────────────────── */
body.ty-theme-classic .ty-brand {
  color: var(--tc-navy-3);
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 1.6rem !important;
}
/* 標題下方細緻裝飾線(純 CSS 偽元素,無新增 DOM)*/
body.ty-theme-classic .ty-brand::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin: .7rem auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--tc-navy), var(--tc-navy-2));
}

/* ── 卡片 ─────────────────────────────────────────────────────────── */
body.ty-theme-classic .card {
  border: 1px solid var(--tc-line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(22, 42, 66, .05),
    0 12px 28px -12px rgba(22, 42, 66, .22);
  overflow: hidden;
}
/* 卡片頂部主色細帶(利用 card 上緣,無移位)*/
body.ty-theme-classic .card::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--tc-navy-3), var(--tc-navy-2));
}
body.ty-theme-classic .card-body {
  padding: 1.75rem 1.6rem 1.6rem;
}

/* ── 表單欄位 ─────────────────────────────────────────────────────── */
body.ty-theme-classic .form-label {
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--tc-muted);
  margin-bottom: .35rem;
}
body.ty-theme-classic .form-control {
  border: 1px solid var(--tc-line);
  border-radius: 9px;
  background: var(--tc-field-bg);
  color: var(--tc-ink);
  padding: .58rem .8rem;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body.ty-theme-classic .form-control::placeholder { color: #9aa7b4; }
body.ty-theme-classic .form-control:hover {
  border-color: #b7c4d1;
}
body.ty-theme-classic .form-control:focus {
  border-color: var(--tc-navy);
  background: #ffffff;
  box-shadow: 0 0 0 .2rem var(--tc-ring);
  outline: none;
}

/* ── 錯誤訊息 ─────────────────────────────────────────────────────── */
body.ty-theme-classic #login-error {
  color: var(--tc-danger) !important;
  font-weight: 500;
}

/* ── 登入按鈕 ─────────────────────────────────────────────────────── */
body.ty-theme-classic .btn-primary {
  --bs-btn-bg: var(--tc-navy);
  --bs-btn-border-color: var(--tc-navy);
  border: 1px solid var(--tc-navy-3);
  border-radius: 9px;
  background: linear-gradient(180deg, var(--tc-navy-2), var(--tc-navy));
  font-weight: 600;
  letter-spacing: .06em;
  padding: .6rem 1rem;
  margin-top: .35rem;
  box-shadow: 0 6px 14px -6px rgba(31, 78, 121, .55);
  transition: filter .15s ease, box-shadow .15s ease, transform .04s ease;
}
body.ty-theme-classic .btn-primary:hover {
  background: linear-gradient(180deg, #337ec4, var(--tc-navy-2));
  box-shadow: 0 8px 18px -6px rgba(31, 78, 121, .6);
}
body.ty-theme-classic .btn-primary:focus,
body.ty-theme-classic .btn-primary:focus-visible {
  box-shadow: 0 0 0 .25rem var(--tc-ring), 0 6px 14px -6px rgba(31, 78, 121, .5);
  outline: none;
}
body.ty-theme-classic .btn-primary:active {
  background: linear-gradient(180deg, var(--tc-navy), var(--tc-navy-3));
  transform: translateY(1px);
  box-shadow: 0 3px 8px -4px rgba(31, 78, 121, .55);
}

/* ── RWD:桌面 / 平板 / 手機 ───────────────────────────────────────
   版面用 Bootstrap .container(max-width:24rem)置中,本皮膚不寫死闊度。
   375px 手機:卡片隨容器內縮,box-sizing 繼承 Bootstrap,無橫向捲動。 */
@media (max-width: 575.98px) {
  body.ty-theme-classic .card-body { padding: 1.4rem 1.2rem 1.3rem; }
  body.ty-theme-classic .ty-brand { font-size: 1.35rem; }
}