:root {
  --accent: #286EA0;
  --link: #3366FF;
  --menu-bg: #F4F4F4;
  --menu-hover-bg: #EAEAEA;
  --text: #505050;
  --footer-text: #5A5A5A;
  /* CMS4 教材/成員/課程管理系列頁面的內文字色跟連結色，跟其他頁不一樣（見各自 .css 的 body/A 規則） */
  --text-alt: #5A5A5A;

  /* 登入 / 教學記錄新增：紅框 + 綠色表頭三段式表格（舊 TeachingRecord\CSSFiles\UserLogin.css） */
  --box-border: #CC0000;
  --box-header-bg: #CCFF99;
  --box-header-text: #006600;
  --box-body-text: #3366FF;
  --box-footer-border: #999999;
  --warn-red: #FF0000;

  /* 教學記錄列表（舊 TeachingRecordList.aspx GridView 配色） */
  --tr-list-header-bg: #4A3C8C;
  --tr-list-header-text: #F7F7F7;
  --tr-list-row-bg: #E7E7FF;
  --tr-list-alt-bg: #F7F7F7;

  /* 首頁 / 分類管理：CMS4 MainContent.css */
  --home-table-border: #9966FF;

  /* 教材列表：CMS4 MaterialList.css（GridView） */
  --material-list-header-bg: #558CFF;
  --material-list-alt-bg: #F0F8FF;

  /* 教材新增/編輯：CMS4 MaterialEdit.css / MaterialInsert.css */
  --material-edit-border: #9900FF;
  --material-edit-line: #009900;
  --material-edit-row-bg: #E6FFE6;

  /* 成員管理：CMS4 MemberMgt.css */
  --member-header-bg: #CC66FF;
  --member-alt-bg: #EEE1FF;

  /* 課程管理：CMS4 CourseMgt.css */
  --course-header-bg: #339933;
  --course-alt-bg: #E6FFE6;

  /* 首頁橫向分類選單（CMS4 BootMenu.ascx + superfish.css，舊系統 sf-menu 配色） */
  --category-bar-bg: #c06014;
  --category-bar-hover-bg: #2cbd5e;
  --category-bar-text: #ffffff;
}

body {
  color: var(--text);
  font-family: "Microsoft JhengHei", Arial, sans-serif;
  font-size: 1rem;
  /* 主流 RWD 換行邏輯：優先在空格/標點等自然斷點換行，真的放不下（長網址、長檔名）才在詞中間斷 */
  overflow-wrap: break-word;
  word-break: normal;
}

a {
  color: var(--link);
}

/* asp-validation-summary 渲染出的 <ul><li> 預設會有紅色項目符號（繼承 .text-danger 的顏色），
   只是錯誤訊息清單，不需要項目符號 */
.text-danger ul {
  list-style: none;
  padding-left: 0;
}

/* 密碼欄位旁的顯示/隱藏切換鈕 */
.password-field {
  position: relative;
  display: block;
  width: 100%;
  max-width: 20em;
}

.password-field input {
  width: 100%;
  box-sizing: border-box !important;
  padding-right: 2em !important;
}

.password-toggle {
  position: absolute !important;
  right: 0.4em !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  background: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  cursor: pointer;
  color: #767676;
}

.password-toggle:hover {
  color: var(--text);
}

.password-toggle .icon-eye {
  display: none;
}

.password-toggle.is-visible .icon-eye {
  display: block;
}

.password-toggle.is-visible .icon-eye-off {
  display: none;
}

/* 表格儲存格文字自動換行，避免長字串（例如網址、長說明文字）不斷行撐寬單一欄位、擠壓旁邊欄位 */
table {
  table-layout: fixed;
}

/* 登入／新增教學記錄的兩欄表單表格內容短，用固定版面反而會把欄位擠太窄
   （例如把「選擇檔案」按鈕的文字切掉），這兩個維持自動版面 */
body.page-login table,
body.page-tr-insert table {
  table-layout: auto;
}

td, th {
  line-height: 1.5;
}

/* 表單標籤欄（例如「學年度」「教學記錄檔案」）欄位窄，中文字逐字斷行會變得很難讀，
   維持單行不斷行；欄寬不夠就讓內容欄自己撐開，不會影響全站其他長文字的換行邏輯 */
.field-label {
  white-space: nowrap;
}

/* 內容超過約 6 行就在格子內滾動，不要一直撐高整列。
   注意：max-height/overflow 直接放在 <td> 上在表格版面演算法裡不可靠（列高還是會被內容撐開），
   所以改成包一層 <div class="cell-scroll"> 在裡面，這個 div 才是真的做捲動裁切的容器。 */
.cell-scroll {
  max-height: 9em;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #D0D0D0 transparent;
}

.cell-scroll::-webkit-scrollbar {
  width: 6px;
}

.cell-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.cell-scroll::-webkit-scrollbar-thumb {
  background-color: #D0D0D0;
  border-radius: 3px;
}

.cell-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #B0B0B0;
}

input[type="file"] {
  max-width: 100%;
}

.form-inline {
  display: inline;
}

h1 {
  margin-top: 2px;
  padding: 4px 0 4px 4px;
  width: 98%;
  font-size: 1.15rem;
  font-weight: normal;
  color: var(--accent);
  text-indent: 4px;
  letter-spacing: 1px;
  border-left: 4px solid var(--accent);
  border-bottom: 1px solid var(--accent);
}

/* 各管理頁「編輯／新增 XXX」次標題，之前沒設過樣式，會吃到瀏覽器預設的 h2 大小（比 h1 還大） */
h2 {
  margin-top: 1.2em;
  font-size: 1rem;
  font-weight: bold;
  color: var(--text);
}

/* 站台按鈕與超連結的統一外觀：微圓角、有明確可點擊樣式，取代裸的藍字底線連結 */
.btn {
  border-radius: 0.3rem;
}

/* 首頁橫向分類選單，對照舊系統 CMS4\CSSFiles\superfish.css 的 .sf-menu（BootMenu.ascx 產生） */
.category-bar,
.category-bar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1rem;
}

.category-bar {
  display: flex;
  flex-wrap: wrap;
  background: var(--category-bar-bg);
  border-top: 1px solid #dFeEFF;
  border-bottom: 1px solid #dFeEFF;
}

.category-bar > li {
  position: relative;
}

/* 明確蓋掉 link/visited/focus/active 這幾個瀏覽器預設會各自上色的狀態，
   確保「剛點過」「目前有 focus」的項目跟其他項目顏色一致，不會看起來像壞掉 */
.category-bar a,
.category-bar a:link,
.category-bar a:visited,
.category-bar a:focus,
.category-bar a:active {
  display: block;
  padding: 0.35em 0.5em;
  background: transparent;
  color: var(--category-bar-text);
  text-decoration: none;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  outline: none;
}

.category-bar li:hover {
  background: var(--category-bar-hover-bg);
}

.category-bar li:hover > a {
  color: #fff;
}

.category-bar ul {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  min-width: 12em;
  z-index: 50;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
}

.category-bar li:hover > ul {
  display: block;
}

.category-bar ul li {
  background: var(--category-bar-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.category-bar ul ul {
  top: 0;
  left: 100%;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.btn-primary {
  color: #fff;
  background-color: var(--accent);
  border-color: #235f8a;
}

html {
  position: relative;
  min-height: 100%;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ============================================================
   以下依 _Layout.cshtml 設定的 body class，套用各頁面對應的舊系統配色。
   RenderBody() 內容不屬於 _Layout.cshtml.css 的 scoped 範圍，所以放這裡（全域）。
   ============================================================ */

/* ---- page-login / page-tr-insert：TeachingRecord 紅框綠頭三段式表格 ---- */
body.page-login .box,
body.page-tr-insert .box {
  /* 用 fit-content 讓框跟著表格內容需要的寬度自動撐大（例如標籤欄不斷行時），
     而不是寫死寬度，內容超出去被 overflow: hidden 裁掉（曾經發生「送出」按鈕被切掉的問題） */
  width: fit-content;
  min-width: 22em;
  max-width: 34em;
  margin: 2em auto;
  border: 1px solid var(--box-border);
  border-radius: 4px;
  overflow: hidden;
}

body.page-login table,
body.page-tr-insert table {
  width: 100%;
  border-collapse: collapse;
}

body.page-login thead td,
body.page-tr-insert thead td {
  background: var(--box-header-bg);
  color: var(--box-header-text);
  font-weight: bold;
  text-align: center;
  padding: 0.6em;
}

body.page-login tbody td,
body.page-tr-insert tbody td {
  padding: 0.6em 1em;
  color: var(--box-body-text);
}

body.page-login tfoot td,
body.page-tr-insert tfoot td {
  padding: 0.6em 1em;
  border-top: 1px dotted var(--box-footer-border);
  text-align: right;
}

body.page-login .field-icon,
body.page-tr-insert .field-icon {
  vertical-align: middle;
  margin-right: 0.3em;
}

body.page-tr-insert .warn-text {
  color: var(--warn-red);
}

/* ---- page-tr-list：教學記錄列表 GridView 配色 ---- */
body.page-tr-list h1 {
  margin-top: 0.5em;
}

body.page-tr-list table {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
}

body.page-tr-list th {
  background: var(--tr-list-header-bg);
  color: var(--tr-list-header-text);
  font-weight: bold;
  padding: 0.4em;
}

body.page-tr-list td {
  background: var(--tr-list-row-bg);
  padding: 0.4em;
}

body.page-tr-list tbody tr:nth-child(even) td {
  background: var(--tr-list-alt-bg);
}

/* 分頁頁碼固定一排，頁數太多就橫向捲動，不要換行變好幾排 */
.tr-pager {
  display: block;
  white-space: nowrap;
  overflow-x: auto;
  padding: 0.3em 0;
}

.tr-pager a {
  display: inline-block;
  margin-right: 0.4em;
}

/* ---- page-home：CMS4 首頁 / 教材瀏覽（MainContent.css） ---- */
body.page-home table {
  border: 1px solid var(--home-table-border);
  border-collapse: collapse;
  width: 100%;
}

body.page-home thead th,
body.page-home thead td {
  border: 1px solid var(--home-table-border);
  background: var(--home-table-border);
  color: #fff;
  padding: 0.4em;
}

body.page-home tbody td {
  border-bottom: 1px dotted #666633;
  padding: 0.4em;
}

/* ---- page-nature-admin：分類管理，沿用 CMS4 MainContent 風格 ---- */
body.page-nature-admin h1 {
  font-size: 1rem;
  border-left-width: 2px;
}

body.page-nature-admin table {
  border: 1px solid var(--home-table-border);
  border-collapse: collapse;
}

body.page-nature-admin th,
body.page-nature-admin td {
  padding: 0.4em;
}

body.page-nature-admin th {
  border: 1px solid var(--home-table-border);
  background: var(--home-table-border);
  color: #fff;
}

body.page-nature-admin td {
  border-bottom: 1px dotted #666633;
}

/* ---- CMS4 教材/成員/課程管理系列：body 文字跟連結是 #5A5A5A，不是站台預設的 #505050/#3366FF
   （對照 MaterialList/MaterialEdit/MaterialInsert/MaterialShow/MemberMgt/CourseMgt.css 的 body/A 規則） ---- */
body.page-material-list,
body.page-material-edit,
body.page-material-insert,
body.page-member-mgt,
body.page-course-mgt {
  color: var(--text-alt);
}

body.page-material-list a:not(.btn),
body.page-material-edit a:not(.btn),
body.page-material-insert a:not(.btn),
body.page-member-mgt a:not(.btn),
body.page-course-mgt a:not(.btn) {
  color: var(--text-alt);
  text-decoration: none;
}

body.page-material-list a:not(.btn):hover,
body.page-material-edit a:not(.btn):hover,
body.page-material-insert a:not(.btn):hover,
body.page-member-mgt a:not(.btn):hover,
body.page-course-mgt a:not(.btn):hover {
  text-decoration: underline;
}

/* ---- page-material-list：教材管理列表 ---- */
body.page-material-list table {
  border-collapse: collapse;
  width: 100%;
}

body.page-material-list th {
  background: var(--material-list-header-bg);
  color: #fff;
  text-align: center;
  padding: 0.4em;
}

body.page-material-list td {
  padding: 0.4em;
}

body.page-material-list tbody tr:nth-child(even) td {
  background: var(--material-list-alt-bg);
}

/* ---- page-material-edit / page-material-insert：教材新增/編輯表單 ---- */
body.page-material-edit form,
body.page-material-insert form {
  border: 1px dashed var(--material-edit-border);
  padding: 1em;
  max-width: 40em;
}

body.page-material-edit label,
body.page-material-insert label {
  display: block;
  margin-top: 0.8em;
  font-weight: bold;
  border-bottom: 1px solid var(--material-edit-line);
  padding-bottom: 0.2em;
}

body.page-material-edit input[type="text"],
body.page-material-edit input:not([type]),
body.page-material-edit textarea,
body.page-material-insert input[type="text"],
body.page-material-insert input:not([type]),
body.page-material-insert textarea {
  width: 100%;
}

body.page-material-edit p,
body.page-material-insert p {
  background: var(--material-edit-row-bg);
  padding: 0.4em;
}

/* ---- page-member-mgt：成員管理 ---- */
body.page-member-mgt table {
  border-collapse: collapse;
  width: 100%;
}

body.page-member-mgt th {
  background: var(--member-header-bg);
  color: #fff;
  padding: 0.4em;
}

body.page-member-mgt td {
  padding: 0.4em;
}

body.page-member-mgt tbody tr:nth-child(even) td {
  background: var(--member-alt-bg);
}

/* ---- page-course-mgt：課程管理 ---- */
body.page-course-mgt table {
  border-collapse: collapse;
  width: 100%;
  max-width: 500px;
}

body.page-course-mgt th {
  background: var(--course-header-bg);
  color: #fff;
  padding: 0.4em;
}

body.page-course-mgt td {
  padding: 0.4em;
  text-align: center;
}

body.page-course-mgt tbody tr:nth-child(even) td {
  background: var(--course-alt-bg);
}

/* ---- page-pwdchange：無專屬表格配色，僅沿用 CMS4 基本 body 樣式 ---- */
body.page-pwdchange {
  text-align: center;
}

body.page-pwdchange form {
  display: inline-block;
  text-align: left;
}

/* ============================================================
   全站外框（banner／側邊選單／教學記錄底部選單／footer）。
   注意：這些規則本來放在 Pages/Shared/_Layout.cshtml.css（CSS isolation scoped 檔案），
   但 asp-page 產生的 <a>/<form> 標籤不會帶 scope 屬性（ASP.NET Core tag helper 已知限制），
   scoped 選擇器永遠比對不到，樣式完全套用不到——所以整批搬來這裡的全域 CSS。
   ============================================================ */

.site-banner {
  display: block;
  width: 100%;
}

.site-banner img {
  display: block;
  width: 100%;
  height: auto;
  border: none;
}

.site-frame {
  display: flex;
  align-items: flex-start;
  gap: 0;
  max-width: 1024px;
  margin: 0 auto;
  padding: 10px;
}

/* 教學記錄頁面沒有頂部 CMS banner，讓 BG.png 直接切齊最上方，不要留 site-frame 的上邊距 */
.tr-frame {
  padding-top: 0;
}

.site-menu {
  flex: 0 0 170px;
  width: 170px;
  margin-right: 16px;
  background: #fff;
  border: 1px solid #E3E3E3;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.site-menu ul {
  list-style: none;
  margin: 0;
  padding: 6px;
}

.site-menu li {
  margin-bottom: 2px;
}

.site-menu a {
  display: block;
  padding: 0.5em 0.7em;
  border-radius: 4px;
  border-left: 3px solid transparent;
  color: var(--text);
  text-decoration: none;
  outline: none;
  transition: background-color 0.12s, color 0.12s;
}

.site-menu a:hover {
  background: #EAF2FF;
  color: var(--accent);
  border-left-color: var(--accent);
}

.site-menu a.active {
  background: #EAF2FF;
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: bold;
}

.site-menu-bottom {
  padding: 10px 12px;
  border-top: 1px solid #EEEEEE;
  background: #FAFAFA;
}

.site-menu-user {
  font-size: 0.85rem;
  color: #505050;
  margin: 0 0 0.4em;
}

.site-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 10px;
}

/* 教學記錄頁面（登入/列表/新增）沒有左側選單，內容區改滿版；
   舊 TeachingRecord\Images\BG.png（風車/仙子場景，含「教學記錄表」字樣）當背景圖，
   內容（登入框/表格）疊在圖層上方，落在圖片上三分之一的位置（對照舊系統 #Content 疊在 body 背景圖上的做法）。
   background-position 用 left（不是 center），避免容器比圖片窄時把左邊的「教學記錄表」字樣裁掉。 */
.tr-content {
  background-image: url(../images/BG.png);
  background-repeat: no-repeat;
  background-position: left top;
  min-height: 417px;
  padding-top: 140px;
  box-sizing: border-box;
}

.site-menu-login {
  margin-top: 0.5em;
}

.site-menu-login label {
  display: block;
  font-size: 0.85rem;
  color: #505050;
  margin-top: 0.4em;
}

.site-menu-login input[type="text"],
.site-menu-login input[type="password"] {
  width: 100%;
  border: 1px dotted #505050;
  padding: 2px 4px;
}

.site-menu-login button {
  margin-top: 0.5em;
  border: 1px solid #666666;
  background: #F4F4F4;
}

/* 對照舊 TeachingRecord\Pages\Menu.aspx（底部橫向圖示選單），MenuBG1.gif 橫向重複底紋 */
.tr-menu {
  max-width: 1024px;
  margin: 10px auto 0;
  padding: 10px 5px;
  text-align: right;
  background-color: #FFFFFF;
  background-image: url(../images/MenuBG1.gif);
  background-repeat: repeat-x;
  font-size: 0.9rem;
  color: #3C3C3C;
}

.tr-menu a {
  color: #3366FF;
  text-decoration: none;
  margin-left: 1em;
}

.tr-menu a:hover {
  text-decoration: underline;
}

.tr-menu img {
  vertical-align: middle;
  margin-right: 0.2em;
}

.tr-menu-user {
  margin-left: 1em;
}

.site-footer {
  margin-top: 20px;
  padding: 10px 20px 6px 20px;
  text-align: center;
  color: #5A5A5A;
  font-size: 0.85rem;
  background-image: url(../images/FooterBG.gif);
  background-repeat: repeat-x;
}

.site-footer a {
  color: #5A5A5A;
}

@media (max-width: 700px) {
  .site-frame {
    flex-direction: column;
  }

  .site-menu {
    width: auto;
    margin-right: 0;
    margin-bottom: 10px;
  }
}