/* ColaIT 教育訓練系統 共用樣式 */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", "Microsoft JhengHei", "微軟正黑體", sans-serif;
    font-size: 15px;
    color: #2d3436;
    background-color: #f5f6f8;
}

/* ===== 頁首 ===== */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 56px;
    background-color: #1f3a5f;
    color: #ffffff;
}

.site-title {
    font-size: 18px;
    font-weight: bold;
}

/* ===== 導覽列（下拉選單） ===== */
.site-nav {
    display: flex;
    align-self: stretch;
    align-items: stretch;
    margin-right: auto;
}

/* 首頁這種單一連結，與下拉選單的標題對齊 */
.site-nav > a {
    display: flex;
    align-items: center;
    padding: 0 12px;
    margin-left: 20px;
    color: #dfe6ee;
    text-decoration: none;
}

.site-nav > a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.nav-menu {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.nav-toggle {
    padding: 6px 12px;
    border: 0;
    border-radius: 4px;
    background-color: transparent;
    color: #dfe6ee;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
}

.nav-toggle:after {
    content: " ▾";
    font-size: 12px;
}

.nav-toggle:hover {
    color: #ffffff;
}

.nav-menu.is-open .nav-toggle {
    background-color: #2b4d7a;
    color: #ffffff;
}

/* 展開的選單蓋在內容上方，所以要疊在最前面 */
.nav-drop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 150px;
    padding: 6px 0;
    border: 1px solid #e1e4e8;
    border-radius: 0 0 6px 6px;
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(31, 58, 95, 0.18);
}

.nav-menu.is-open .nav-drop {
    display: block;
}

.nav-drop a {
    display: block;
    padding: 7px 16px;
    color: #2d3436;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.nav-drop a:hover {
    background-color: #f0f3f7;
    color: #1f3a5f;
}

/* 學員只有一個選單，不做成下拉：選單名稱不顯示，項目橫向排在頂端列上 */
.nav-menu.is-flat {
    align-items: stretch;
    margin-left: 0;
}

.nav-menu.is-flat .nav-toggle {
    display: none;
}

.nav-menu.is-flat .nav-drop {
    display: flex;
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

.nav-menu.is-flat .nav-drop a {
    display: flex;
    align-items: center;
    padding: 0 12px;
    margin-left: 8px;
    color: #dfe6ee;
    font-size: 15px;
}

.nav-menu.is-flat .nav-drop a:hover {
    background-color: transparent;
    color: #ffffff;
    text-decoration: underline;
}

/*
   ===== 主內容 =====
   寬度用「上限 ＋ 置中」，不要用百分比。
   以前寫 width:60% 再配一條 max-width:1280px 的例外，視窗從 1280 拉大 1px，
   內容欄會從 949px 掉到 476px，教材裡幾十個表格當場被擠爆。
*/
.site-main {
    width: auto;
    max-width: 1280px;
    margin: 24px auto;
    padding: 24px;
    box-sizing: border-box;
    background-color: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
}

h1 {
    margin-top: 0;
    font-size: 22px;
    color: #1f3a5f;
}

/*
   ===== 連結 =====
   瀏覽器預設的藍字＋粗底線（點過變紫）跟站台配色打架。
   改成站台主色（深藍）、底線淡淡的往下拉開一點，滑鼠移上去底線才變實；點過的不變色。
   全部包在 :where() 裡、權重是 0：按鈕、入口卡、課程名稱這些有自己 class 的連結一定蓋得過，
   不會出現「點過的主要按鈕字變紫」這種事。
*/
:where(a) {
    color: #1f3a5f;
    text-decoration: underline;
    text-decoration-color: rgba(31, 58, 95, .3);
    text-underline-offset: 3px;
}

:where(a:visited) {
    color: #1f3a5f;
}

:where(a:hover) {
    color: #2b4d7a;
    text-decoration-color: currentColor;
}

/*
   ===== 下拉選單與輸入框 =====
   原生下拉每台電腦長得不一樣，而且跟旁邊的輸入框高度對不齊。
   統一成白底、淡灰框、圓角，右邊畫一個箭頭；點進去框線變主色。
   同樣用 :where() 壓低權重，個別欄位要改寬度、字型時直接寫 class 就好。
   教材內容（.course-content）裡的表單是 HTML 課的示範，要保留瀏覽器原本的樣子，所以排除。
*/
:where(select, input[type="text"], input[type="password"], input[type="date"],
       input[type="time"], input[type="number"], input:not([type])):where(:not(.course-content *)) {
    height: 32px;
    padding: 4px 10px;
    border: 1px solid #c3cbd4;
    border-radius: 4px;
    background-color: #ffffff;
    color: #2d3436;
    font-family: inherit;
    font-size: 14px;
    vertical-align: middle;
}

:where(select):where(:not(.course-content *)) {
    padding-right: 30px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231f3a5f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}

:where(select, input[type="text"], input[type="password"], input[type="date"],
       input[type="time"], input[type="number"], input:not([type])):where(:not(.course-content *)):hover {
    border-color: #95a0a6;
}

:where(select, textarea, input[type="text"], input[type="password"], input[type="date"],
       input[type="time"], input[type="number"], input:not([type])):where(:not(.course-content *)):focus {
    border-color: #1f3a5f;
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 58, 95, .15);
}

:where(select:disabled, input[readonly]):where(:not(.course-content *)) {
    background-color: #f5f6f8;
    color: #95a0a6;
}

:where(select option:disabled) {
    color: #b0bac4;
}

/*
   ===== 選擇檔案 =====
   原生「選擇檔案」按鈕是灰底方角，跟站台的 .btn 不同調。
   按鈕本身改成跟 .btn-sm 一樣；旁邊「未選擇任何檔案」的字維持原樣。
   ::-webkit-file-upload-button 是舊版 Edge／Chrome 的寫法，
   要跟 ::file-selector-button 分開寫，寫在同一條裡舊瀏覽器會整條不認。
*/
:where(input[type="file"]):where(:not(.course-content *)) {
    color: #636e72;
    font-family: inherit;
    font-size: 13px;
    vertical-align: middle;
}

:where(input[type="file"]):where(:not(.course-content *))::file-selector-button {
    margin-right: 8px;
    padding: 4px 12px;
    border: 1px solid #c3cbd4;
    border-radius: 4px;
    background-color: #ffffff;
    color: #2d3436;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

:where(input[type="file"]):where(:not(.course-content *))::-webkit-file-upload-button {
    margin-right: 8px;
    padding: 4px 12px;
    border: 1px solid #c3cbd4;
    border-radius: 4px;
    background-color: #ffffff;
    color: #2d3436;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

:where(input[type="file"]):where(:not(.course-content *)):hover::file-selector-button {
    background-color: #f0f3f7;
}

:where(input[type="file"]):where(:not(.course-content *)):hover::-webkit-file-upload-button {
    background-color: #f0f3f7;
}

:where(input[type="file"]):where(:not(.course-content *)):focus-visible {
    outline: none;
}

:where(input[type="file"]):where(:not(.course-content *)):focus-visible::file-selector-button {
    border-color: #1f3a5f;
    box-shadow: 0 0 0 3px rgba(31, 58, 95, .15);
}

/* demo-box 裡是 HTML 課的示範，連結保留瀏覽器原樣 */
.demo-box a,
.demo-box a:visited,
.demo-box a:hover {
    all: revert;
}

.db-status {
    display: block;
    margin: 12px 0;
    color: #636e72;
}

/* ===== 資料表格 ===== */
.data-grid {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.data-grid th,
.data-grid td {
    padding: 8px 12px;
    border-bottom: 1px solid #e1e4e8;
    text-align: left;
}

.data-grid th {
    background-color: #f0f3f7;
    color: #1f3a5f;
}

.data-grid tr:hover td {
    background-color: #f8fafc;
}

/* ===== 頁面標題列 ===== */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.page-head h1 {
    margin: 0;
}

/* ===== 按鈕 ===== */
.btn {
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid #c3cbd4;
    border-radius: 4px;
    background-color: #ffffff;
    color: #2d3436;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover {
    background-color: #f0f3f7;
}

.btn-primary {
    border-color: #1f3a5f;
    background-color: #1f3a5f;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #2b4d7a;
}

.btn-sm {
    padding: 4px 12px;
    font-size: 13px;
    margin-top: 8px;
}

/* ===== 訊息列 ===== */
.msg {
    display: block;
    margin-bottom: 12px;
}

.msg:empty {
    display: none;
}

.msg-ok {
    padding: 8px 12px;
    border-left: 3px solid #2e7d5b;
    background-color: #eef7f2;
    color: #1d5e43;
}

.msg-error {
    padding: 8px 12px;
    border-left: 3px solid #c0392b;
    background-color: #fdeeec;
    color: #96281b;
}

/* ===== 表單區塊 ===== */
.form-block {
    margin: 0 0 20px;
    padding: 12px 16px 16px;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
}

.form-block legend {
    padding: 0 8px;
    color: #1f3a5f;
    font-weight: bold;
}

.form-grid {
    width: 100%;
    border-collapse: collapse;
}

.form-grid th {
    width: 90px;
    padding: 6px 8px;
    color: #636e72;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
}

.form-grid td {
    padding: 6px 8px;
}

.hint {
    margin-left: 8px;
    color: #95a0a6;
    font-size: 13px;
}

.toolbar {
    margin-bottom: 12px;
}

.form-actions {
    padding-top: 8px;
    text-align: right;
}

/* ===== 課程列表 ===== */
.hint-block {
    margin: 0 0 16px;
    color: #636e72;
    font-size: 14px;
}

.course-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.course-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid #eef1f4;
}

.course-code {
    flex: 0 0 44px;
    color: #95a0a6;
    font-family: Consolas, monospace;
    font-size: 13px;
}

.course-name {
    flex: 1;
    color: #1f3a5f;
    font-size: 15px;
    text-decoration: none;
}

.course-name:hover {
    text-decoration: underline;
}

.course-days {
    color: #95a0a6;
    font-size: 13px;
}

/* 課程列表：課名、天數、標籤三欄，天數與標籤固定寬度才對得齊 */
.course-list .course-title {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.course-list .course-title .course-name {
    flex: 0 1 auto;
}

.course-list .course-days {
    flex: 0 0 64px;
    text-align: right;
}

.course-list .course-tag {
    flex: 0 0 72px;
    text-align: right;
}

/* 檢核課：淡黃底＋左邊一條黃線，整份清單裡一眼就看得到哪三天要考 */
/* 左線用 inset 陰影畫，不佔寬度，課程代碼才不會比別列往右偏 */
.course-list li.is-exam {
    box-shadow: inset 4px 0 0 #c9a227;
    background-color: #fdf9ec;
}

.course-list li.is-exam .course-name {
    font-weight: bold;
}

.exam-tag {
    padding: 1px 8px;
    border-radius: 10px;
    background-color: #f7ecd2;
    color: #6b5713;
    font-size: 12px;
    font-weight: bold;
}

.course-nomaterial {
    padding: 1px 8px;
    border-radius: 10px;
    background-color: #f4f5f7;
    color: #95a0a6;
    font-size: 12px;
}

/* ===== 課程內容 ===== */
.course-sec {
    margin-bottom: 24px;
}

.course-sec h2 {
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid #eef1f4;
    color: #1f3a5f;
    font-size: 16px;
}

.course-content p {
    margin: 0 0 10px;
    line-height: 1.8;
}

.course-ask {
    padding: 10px 14px;
    border-left: 3px solid #c9a227;
    background-color: #fdf9ec;
    color: #6b5713;
}

.goal-list,
.step-list {
    margin: 0 0 10px;
    padding-left: 24px;
    line-height: 1.9;
}

.res-list {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.res-list li {
    padding: 5px 0;
}

.res-list a {
    color: #1f3a5f;
}

.res-note {
    margin-left: 8px;
    color: #95a0a6;
    font-size: 13px;
}

.tag {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 12px;
    vertical-align: 1px;
}

.tag-video {
    background-color: #fde9e7;
    color: #96281b;
}

/*
   教材表格的外殼（由 T00S110_CourseDetail 用 jQuery 包上去，作法同 code-wrap）。
   萬一還是有壓不下去的表格（例如教材刻意示範寫死寬度的舊式 HTML 表格），
   讓它在自己的框框裡橫捲，不要溢出白色卡片外面。
*/
.table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.unit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.unit-table th,
.unit-table td {
    padding: 7px 10px;
    border: 1px solid #e1e4e8;
    text-align: left;
    vertical-align: top;
    /*
       ValidationSettings:UnobtrusiveValidationMode 這種沒有空白的識別字，
       預設斷不了，一格就把整張表撐寬。這裡用 break-word 不用 anywhere：
       break-word 只在那個字自己一行也放不下時才斷，算欄寬時仍然照整個字算，
       所以 ListUserDataByCompanyCode 這種東西不會被切成兩半（命名標準那幾張表會看錯）。
       真的擠不下的表格交給外面的 .table-wrap 橫捲。
    */
    overflow-wrap: break-word;
}

/*
   表頭與第一欄以前寫 white-space:nowrap，整張表的最小寬度就等於第一欄最長那句的長度
   （最誇張的一張要 893px）。拿掉之後欄寬夠時一樣不會換行，欄寬不夠才換。
*/
.unit-table th {
    background-color: #f0f3f7;
    color: #1f3a5f;
}

.unit-table td:first-child {
    background-color: #fafbfc;
}

.code-block {
    padding: 10px 14px;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    background-color: #fafbfc;
    line-height: 1.8;
}

.course-content code {
    padding: 1px 5px;
    border-radius: 3px;
    /* 本文裡的長識別字（命名空間、檔案路徑）一行放不下時要能斷，不要把版面撐開 */
    overflow-wrap: break-word;
    background-color: #f0f3f7;
    font-family: Consolas, monospace;
    font-size: 13px;
}

.mark-ok { color: #2e7d5b; }
.mark-ng { color: #c0392b; }

/* ===== 頁首登入狀態 ===== */
.site-user {
    color: #dfe6ee;
    font-size: 13px;
    white-space: nowrap;
}

.site-link {
    margin-left: 10px;
    color: #ffffff;
    text-decoration: none;
}

.site-link:hover {
    text-decoration: underline;
}

/* ===== 首頁入口 ===== */
.section-title {
    margin: 24px 0 10px;
    font-size: 15px;
    color: #636e72;
    font-weight: normal;
}

.welcome-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border: 1px solid #cfe0f2;
    border-radius: 6px;
    background-color: #f2f7fd;
}

.entry-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* 入口卡：左邊一格圖示、右邊名稱與說明。圖示是 Default.aspx 裡的線條 SVG，顏色跟著文字 */
.entry-card {
    flex: 1 1 220px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    text-decoration: none;
    color: #2d3436;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.entry-card:hover {
    border-color: #1f3a5f;
    background-color: #f8fafc;
    box-shadow: 0 4px 12px rgba(31, 58, 95, .12);
    transform: translateY(-1px);
}

.entry-icon {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #f0f3f7;
    color: #1f3a5f;
}

.entry-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.entry-card:hover .entry-icon {
    background-color: #1f3a5f;
    color: #ffffff;
}

.entry-text {
    flex: 1;
    min-width: 0;
}

.icon-sprite {
    display: none;
}

/* ===== 首頁：新手指南 ===== */
.guide-box {
    margin-top: 16px;
    padding: 14px 18px 16px;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    background-color: #fafbfc;
}

.guide-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.guide-title {
    color: #1f3a5f;
    font-weight: bold;
}

.guide-close,
.guide-open {
    padding: 2px 8px;
    border: 0;
    background: none;
    color: #636e72;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.guide-close:hover,
.guide-open:hover {
    color: #1f3a5f;
    text-decoration: underline;
}

.guide-open {
    margin-top: 10px;
    padding-left: 0;
}

.guide-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-step {
    display: flex;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    background-color: #ffffff;
}

.guide-no {
    flex: 0 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #1f3a5f;
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
}

.guide-step.is-done .guide-no {
    background-color: #2e7d4f;
}

.guide-step.is-done .guide-name {
    color: #636e72;
    text-decoration: line-through;
}

.guide-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.guide-name {
    color: #2d3436;
    font-weight: bold;
    font-size: 14px;
}

.guide-desc {
    color: #636e72;
    font-size: 13px;
    line-height: 1.6;
}

.guide-link {
    margin-top: auto;
    font-size: 13px;
    text-decoration: none;
}

@media (max-width: 900px) {
    .guide-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.entry-name {
    display: block;
    margin-bottom: 4px;
    color: #1f3a5f;
    font-weight: bold;
}

.entry-desc {
    display: block;
    color: #95a0a6;
    font-size: 13px;
    line-height: 1.6;
}

/* ===== 登入頁（整頁置中） ===== */
.login-page {
    max-width: 460px;
    margin: 0 auto;
}

.page-head-center {
    justify-content: center;
}

.login-card {
    padding: 0 20px 16px;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
}

.login-card .form-grid th {
    width: 110px;
}

.login-card .form-actions {
    text-align: center;
}

/* 登入頁籤：學員／導師（免密碼）與管理員（帳號＋密碼） */
.login-tabs {
    display: flex;
    margin: 0 -20px 16px;
    border-bottom: 1px solid #e1e4e8;
}

.login-tab {
    flex: 1;
    padding: 12px 0;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: #636e72;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
}

.login-tab:hover {
    color: #1f3a5f;
    background-color: #f6f8fa;
}

.login-tab.is-active {
    border-bottom-color: #004dec;
    color: #1f3a5f;
    font-weight: bold;
}

/* 沒被選到的頁籤內容不顯示（is-active 由後置程式先給一次，再由 jQuery 接手切換） */
.login-pane {
    display: none;
}

.login-pane.is-active {
    display: block;
}

.login-pc {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed #e1e4e8;
    color: #636e72;
    font-size: 14px;
}

.login-page .hint-block {
    margin-top: 16px;
    margin-bottom: 0;
    text-align: center;
}

/* ===== 我的課表 ===== */
.trainee-card {
    margin-bottom: 20px;
    padding: 14px 18px;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    background-color: #fafbfc;
}

.trainee-name {
    font-size: 17px;
    font-weight: bold;
    color: #1f3a5f;
}

.trainee-id {
    margin-left: 8px;
    color: #95a0a6;
    font-family: Consolas, monospace;
    font-size: 13px;
}

.trainee-meta {
    margin-top: 4px;
    color: #636e72;
    font-size: 13px;
}

.progress-bar {
    height: 8px;
    margin-top: 12px;
    border-radius: 4px;
    background-color: #e6eaef;
    overflow: hidden;
}

.progress-done {
    height: 100%;
    background-color: #2e7d5b;
}

.progress-text {
    margin-top: 5px;
    color: #636e72;
    font-size: 13px;
}

.today-box {
    margin-bottom: 20px;
    padding: 12px 16px;
    border-left: 3px solid #1f3a5f;
    background-color: #f2f7fd;
}

.today-label {
    margin-bottom: 6px;
    color: #1f3a5f;
    font-size: 13px;
    font-weight: bold;
}

.today-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 3px 0;
}

.today-course {
    color: #1f3a5f;
    font-size: 15px;
    font-weight: bold;
}

/* 報到前置作業：看完後按「我已閱讀」，後面的課程才會開放（T00S240 最下方） */
.prep-read {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px 16px;
    border: 1px solid #e6e0cd;
    border-left: 3px solid #8a6d17;
    border-radius: 4px;
    background-color: #fdf9ef;
}

.prep-read-main {
    margin-right: auto;
}

/* 尚未開放的課程：名稱照樣看得到，但點不進去 */
.course-name.is-lock,
.today-course.is-lock {
    color: #95a0a6;
    cursor: default;
}

.lock-mark {
    margin-left: 6px;
    color: #95a0a6;
    font-size: 12px;
    font-weight: normal;
}

.cell-date {
    font-family: Consolas, monospace;
}

.cell-week {
    color: #95a0a6;
    font-size: 13px;
}

.schedule-grid tr.row-today td {
    background-color: #f2f7fd;
}

.schedule-grid tr.row-done td {
    color: #95a0a6;
}

/* ===== 狀態標籤 ===== */
.state {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.state-done {
    background-color: #eef7f2;
    color: #1d5e43;
}

.state-today {
    background-color: #e8f0fa;
    color: #1f3a5f;
}

.state-late {
    background-color: #fdeeec;
    color: #96281b;
}

.state-wait {
    background-color: #f4f5f7;
    color: #95a0a6;
}

/* 彈性課程：沒有固定時間，上課日由導師視進度安排 */
.state-flex {
    background-color: #fdf6e3;
    color: #8a6d17;
}

/* ===== 課程行事曆 ===== */
/* 訓練期間跨月時，每個月各畫一個月曆疊在同一個畫面上 */
.cal-month {
    margin-bottom: 16px;
}

.cal {
    border-collapse: collapse;
    table-layout: fixed;
}

.cal td,
.cal th {
    border: 1px solid #e1e4e8;
}

.cal-title {
    padding: 8px;
    background-color: #1f3a5f;
    color: #ffffff;
}

.cal-title a {
    color: #ffffff;
    text-decoration: none;
}

.cal-head {
    padding: 6px;
    background-color: #f0f3f7;
    color: #1f3a5f;
    font-size: 13px;
    text-align: center;
}

.cal-day {
    height: 84px;
    padding: 4px 6px;
    vertical-align: top;
    font-size: 13px;
}

.cal-other {
    background-color: #fafbfc;
}

.cal-today {
    background-color: #fdf9ec;
}

.cal-holiday {
    background-color: #f7f8f9;
    color: #95a0a6;
}

.cal-note {
    color: #95a0a6;
    font-size: 12px;
}

.cal-course {
    display: block;
    margin-top: 3px;
    padding: 2px 5px;
    border-left: 3px solid #1f3a5f;
    background-color: #eef3fa;
    color: #1f3a5f;
    font-size: 12px;
    line-height: 1.5;
    text-decoration: none;
}

.cal-course:hover {
    background-color: #dde8f5;
}

/* 報到前置作業：和第一堂課同一天，用另一個顏色分辨 */
.cal-course.is-prep {
    border-left-color: #8a6d17;
    background-color: #fdf6e3;
    color: #8a6d17;
}

.cal-course.is-prep:hover {
    background-color: #f7ecd2;
}

/* 前置作業還沒閱讀之前，其他課程只看得到名稱 */
.cal-course.is-lock {
    border-left-color: #d3d8dd;
    background-color: #f4f5f7;
    color: #95a0a6;
}

/*
   檢核課：跟課程教材列表同一組金黃色，比前置作業（很淡的黃）、今天（淡黃底）再深一階＋粗體，
   但不用實心深金色（太重、字不好讀）；還沒開放的檢核照樣標金線，考試那天一眼就找得到。
*/
.cal-course.is-exam {
    border-left-color: #c9a227;
    background-color: #f8e9b8;
    color: #5c4a0e;
    font-weight: bold;
}

.cal-course.is-exam:hover {
    background-color: #f2dd97;
}

.cal-course.is-exam .cal-course-day {
    color: #8a6d17;
}

.cal-course.is-lock.is-exam {
    border-left-color: #c9a227;
    background-color: #fdf9ec;
    color: #8a6d17;
    font-weight: normal;
}

.cal-course-day {
    color: #7a8794;
}

.cal-legend {
    margin: 10px 0;
    color: #636e72;
    font-size: 13px;
}

.legend-item {
    margin-right: 16px;
}

.legend-box {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    border: 1px solid #e1e4e8;
    vertical-align: -1px;
}

.legend-course { background-color: #eef3fa; }
.legend-exam { background-color: #f8e9b8; border-color: #c9a227; }
.legend-holiday { background-color: #f7f8f9; }
.legend-today { background-color: #fdf9ec; }

/* ===== 作業繳交 ===== */
/* 作業繳交：份數 0／0 的課不給上傳，只留一句說明 */
/*
   ===== 梯次維護：儲存列 =====
   梯次資料、新人名單、課程行事曆一起存。儲存列黏在視窗底部（課表很長，不必捲到底才按得到），
   外層 .batch-edit 結束的地方它就停住，不會跑進下面的「個別學員調整」。
*/
.batch-edit {
    position: relative;
}

.save-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin: 0 -24px 24px;
    padding: 10px 24px;
    border-top: 1px solid #e1e4e8;
    background-color: rgba(255, 255, 255, .96);
    box-shadow: 0 -4px 10px rgba(31, 58, 95, .08);
}

.save-bar-text {
    color: #636e72;
    font-size: 13px;
}

.save-bar .btn {
    min-width: 120px;
}

/* ===== 排課設定：導師看到的組別是固定的，用文字標出來 ===== */
.group-fixed {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    background-color: #f0f3f7;
    color: #1f3a5f;
    font-weight: bold;
}

/* ===== 梯次維護：整批順延 ===== */
.shift-box {
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px dashed #c3cbd4;
    border-radius: 6px;
    background-color: #fafbfc;
    font-size: 14px;
    line-height: 2.4;
}

.shift-title {
    margin-right: 8px;
    color: #1f3a5f;
    font-weight: bold;
}

.shift-box .hint {
    display: block;
    margin-left: 0;
    line-height: 1.6;
}

/* ===== 課程回饋：各檔案的ＡＩ評語（唯讀，收合式） ===== */
.ai-files {
    margin-bottom: 16px;
}

.ai-files-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ai-files-title {
    color: #1f3a5f;
    font-weight: bold;
}

.ai-files-head .btn-sm {
    margin: 0 0 0 auto;
}

.ai-file {
    margin-bottom: 6px;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    background-color: #ffffff;
}

.ai-file > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
}

.ai-file > summary::-webkit-details-marker {
    display: none;
}

.ai-file > summary:before {
    content: "▸";
    color: #95a0a6;
}

.ai-file[open] > summary:before {
    content: "▾";
}

.ai-file > summary:hover {
    background-color: #f8fafc;
}

.ai-file-name {
    flex: 0 1 auto;
    max-width: 280px;
    overflow: hidden;
    color: #2d3436;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ai-file-brief {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: #636e72;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ai-file[open] .ai-file-brief {
    visibility: hidden;
}

.ai-file-time {
    color: #95a0a6;
    font-size: 12px;
    white-space: nowrap;
}

.ai-file > .ai-summary-full,
.ai-file > .hint {
    margin: 0 12px 10px;
}

.ai-file > .ai-summary-full + .ai-summary-full {
    margin-top: -4px;
}

.no-submit {
    padding: 10px 14px;
    border-left: 3px solid #95a0a6;
    background-color: #fafbfc;
    color: #636e72;
    font-size: 14px;
    line-height: 1.7;
}

.no-submit b {
    color: #2d3436;
}

.file-input {
    padding: 4px 0;
}

.link-danger {
    color: #96281b;
}

/* ===== 課程頁版面 ===== */
/* 標題列三顆按鈕一樣大（以前上一課／下一課用 btn-sm，比「回課程列表」矮一截又往下掉） */
.course-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.course-nav .btn[disabled],
.course-nav .btn.aspNetDisabled {
    color: #b0bac4;
    cursor: not-allowed;
}

/* 目錄底下的換課連結：跟著目錄黏在畫面上 */
.toc-nav {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e1e4e8;
}

.toc-nav a,
.toc-nav span {
    flex: 1;
    padding: 5px 0;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    background-color: #ffffff;
    color: #1f3a5f;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
}

.toc-nav a:hover {
    border-color: #1f3a5f;
    background-color: #f0f3f7;
}

.toc-nav .is-lock {
    color: #b0bac4;
    cursor: not-allowed;
}

.toc-nav .is-empty {
    visibility: hidden;
}

/* 教材最後面的上一課／下一課大卡片 */
.course-pager {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #e1e4e8;
}

.pager-card {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    color: #2d3436;
    text-decoration: none;
}

a.pager-card:hover {
    border-color: #1f3a5f;
    background-color: #f8fafc;
}

.pager-next {
    align-items: flex-end;
    text-align: right;
}

.pager-card.is-empty {
    visibility: hidden;
}

.pager-card.is-lock {
    background-color: #fafbfc;
    color: #b0bac4;
    cursor: not-allowed;
}

.pager-label {
    color: #95a0a6;
    font-size: 13px;
}

.pager-name {
    color: #1f3a5f;
    font-size: 16px;
    font-weight: bold;
}

.pager-card.is-lock .pager-name {
    color: #b0bac4;
}

.pager-lock {
    font-size: 12px;
}

.course-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding: 8px 14px;
    border-left: 3px solid #1f3a5f;
    background-color: #f2f7fd;
    color: #1f3a5f;
    font-size: 14px;
}

.course-body {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

/*
   本課目錄：07 之後的教材很長（十一章、三十幾個小節），整頁展開捲起來容易迷路。
   目錄做成兩層——平常只列章名，捲到哪一章就把那一章的小節展開，
   目前所在的章與小節都會標色。判斷目前位置的捲動偵測寫在 T00S110_CourseDetail.aspx。
   目錄本身可能比視窗高，所以限高 ＋ 自己捲。
*/
.course-toc {
    position: sticky;
    top: 16px;
    flex: 0 0 210px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    background-color: #fafbfc;
    font-size: 13px;
}

.toc-title {
    margin-bottom: 6px;
    color: #1f3a5f;
    font-weight: bold;
}

.course-toc ul {
    list-style: none;
}

/* 只清最外層那一層的預設邊界；巢狀的 .toc-sub 要自己的縮排，
   寫成 .course-toc ul 的話選擇器權重會蓋掉 .toc-sub 的 padding */
.course-toc > ul {
    margin: 0;
    padding: 0;
}

.course-toc li {
    padding: 3px 0;
    line-height: 1.5;
}

.course-toc a {
    display: block;
    color: #636e72;
    text-decoration: none;
}

.course-toc a:hover {
    color: #1f3a5f;
}

/* 目前所在的章 */
.toc-chap.is-active > a {
    color: #1f3a5f;
    font-weight: bold;
}

/* 小節：平常收起來，只有目前所在的那一章展開。
   左邊那條線只是視覺上的層次線，要和文字拉開距離才不會擠在一起 */
.toc-sub {
    display: none;
    margin: 5px 0 8px 2px;
    padding-left: 14px;
    border-left: 2px solid #e6eaee;
}

.toc-chap.is-active > .toc-sub {
    display: block;
}

.toc-sub li {
    padding: 3px 0;
}

/* 小節標題很長（例如 5-1），縮成一行，滑鼠移上去看完整名稱 */
.toc-sub a {
    overflow: hidden;
    color: #8a97a3;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.toc-sub li.is-active > a {
    color: #1f3a5f;
    font-weight: bold;
}

/*
   回到最上方：教材頁很長（04 有八章），捲到後面要回頂端很麻煩。
   固定在右下角，捲過一個畫面高度才淡入，沒捲動時不擋內容。
*/
.back-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 50;
    display: none;
    box-sizing: border-box;
    width: 42px;
    height: 42px;
    /* ^ 這個字元本身偏上，用 padding-top 把它壓到視覺正中間 */
    padding: 6px 0 0;
    border: 1px solid #c3cbd4;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    color: #1f3a5f;
    font-size: 22px;
    line-height: 34px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.back-top:hover {
    border-color: #1f3a5f;
    background-color: #1f3a5f;
    color: #ffffff;
}

.course-content {
    flex: 1;
    min-width: 0;
}

.course-content h3 {
    margin: 18px 0 8px;
    color: #2b4d7a;
    font-size: 15px;
}

/* ===== 教材元件 ===== */
.outline-card {
    padding: 4px 14px;
    border: 1px solid #cfe0f2;
    border-radius: 6px;
    background-color: #f8fbff;
}

.outline-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.outline-table th,
.outline-table td {
    padding: 8px 6px;
    border-bottom: 1px solid #e6eef8;
    text-align: left;
    vertical-align: top;
}

.outline-table tr:last-child th,
.outline-table tr:last-child td {
    border-bottom: none;
}

.outline-table th {
    width: 90px;
    color: #1f3a5f;
    font-weight: normal;
    white-space: nowrap;
}

.outline-table .goal-list {
    margin-bottom: 0;
}

/*
   教材裡的三種提示框，形狀一致、用顏色區分性質：
     .note      綠　背景知識補充
     .course-ask 黃　要動手試或跟指導員討論
     .hint      灰　寫法與用詞的提醒
   .hint 在表單頁是欄位旁的行內小字，所以這裡限定只在教材內容中改成整塊呈現。
*/
.note {
    margin: 12px 0;
    padding: 10px 14px;
    border-left: 3px solid #2e7d5b;
    background-color: #f2f8f5;
    color: #1d5e43;
    line-height: 1.8;
}

.course-content .hint {
    display: block;
    margin: 12px 0;
    margin-left: 0;
    padding: 10px 14px;
    border-left: 3px solid #c3cbd4;
    background-color: #f7f8f9;
    color: #636e72;
    font-size: 14px;
    line-height: 1.8;
}

pre.code-block {
    margin: 10px 0;
    padding: 12px 14px;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    background-color: #fafbfc;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.7;
    overflow-x: auto;
    white-space: pre;
}

/*
   程式碼區塊右上角的「複製」按鈕（由 T00S110_CourseDetail 用 jQuery 包上去）。
   教材裡展開的設定檔、程式片段學員直接複製就好，不必另外提供下載檔。
*/
.code-wrap {
    position: relative;
}

.code-wrap pre.code-block {
    /* 空出右上角放按鈕，避免蓋住第一行程式碼 */
    padding-right: 72px;
}

.code-wrap .code-copy {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 10px;
    border: 1px solid #c3cbd4;
    border-radius: 4px;
    background-color: #ffffff;
    color: #7a8a99;
    font-family: "Segoe UI", "Microsoft JhengHei", "微軟正黑體", sans-serif;
    font-size: 12px;
    line-height: 1.6;
    cursor: pointer;
    opacity: .55;
}

.code-wrap:hover .code-copy {
    opacity: 1;
}

.code-wrap .code-copy:hover {
    border-color: #1f3a5f;
    color: #1f3a5f;
}

.code-wrap .code-copy.is-done {
    border-color: #3f8f68;
    color: #3f8f68;
    opacity: 1;
}

.demo-box {
    margin: 10px 0;
    padding: 12px 14px;
    border: 1px dashed #c3cbd4;
    border-radius: 4px;
    background-color: #ffffff;
    /* 裡面放的是教材刻意示範的原始寫法（有的寫死了寬度），壓不下去就讓它自己橫捲 */
    overflow-x: auto;
}

.demo-label {
    margin-bottom: 8px;
    color: #95a0a6;
    font-size: 12px;
}

.exercise {
    margin: 12px 0;
    padding: 12px 16px;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
}

.exercise-title {
    margin-bottom: 6px;
    color: #1f3a5f;
    font-weight: bold;
}

/*
   題目圖片一律以原始尺寸呈現（學員要照著做，縮圖會看不出框線與間距），
   內容欄放不下時由這個容器自己橫向捲動，不去擠壓版面。
*/
.exercise-img {
    margin: 10px 0 4px;
    padding: 8px;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    background-color: #fafbfc;
    overflow-x: auto;
}

.exercise-img img {
    display: block;
}

/*
   教材本文裡的操作截圖（開發工具畫面、流程示意）。
   和 .exercise-img 的差別：題目圖要原尺寸（學員照著做，差一個像素都看得出來），
   操作截圖只是示意，縮到欄寬剛好，不必橫向捲。
*/
.course-fig {
    margin: 10px 0 14px;
    padding: 8px;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    background-color: #fafbfc;
}

.course-fig img {
    display: block;
    max-width: 100%;
    height: auto;
}

.course-fig .fig-cap {
    margin: 6px 2px 0;
    color: #95a0a6;
    font-size: 12px;
}

/* 繳交作業後才開放的區塊，未開放時顯示這張卡片 */
.locked-box {
    padding: 14px 18px;
    border: 1px dashed #c3cbd4;
    border-radius: 6px;
    background-color: #fafbfc;
    color: #636e72;
}

.locked-title {
    margin-bottom: 6px;
    color: #95a0a6;
    font-size: 13px;
}

.check-list {
    margin: 0 0 10px;
    padding-left: 20px;
    list-style: none;
    line-height: 1.9;
}

.check-list li:before {
    content: "☐ ";
    color: #95a0a6;
}

/* ===== 角色標記（頁首與帳號維護） ===== */
.role-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 10px;
    background-color: #1f3a5f;
    color: #ffffff;
    font-size: 12px;
}

.role-mentor {
    background-color: #2e7d5b;
}

/*
   ===== 練習／作業份數 =====
   課表的練習與作業各自一欄，直接顯示「已交／應交」，不做成連結。
   task-done 交齊、task-part 交了一部分、task-none 還沒交、task-lock 尚未開放。
*/
.task {
    display: inline-block;
    min-width: 44px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 12px;
    text-align: center;
}

.task-done {
    background-color: #eef7f2;
    color: #1d5e43;
}

.task-part {
    background-color: #fdf9ec;
    color: #8a6d1f;
}

.task-none {
    background-color: #f4f5f7;
    color: #95a0a6;
}

.task-lock {
    background-color: #f4f5f7;
    color: #7a848a;
    border: 1px dashed #c9cfd4;
}

.task-move {
    background-color: #fdf9ec;
    color: #8a6d1f;
    min-width: 0;
}

.task-ex {
    background-color: #e8f0fa;
    color: #1f3a5f;
    min-width: 0;
}

.task-hw {
    background-color: #f3ecfa;
    color: #4a2f6b;
    min-width: 0;
}

/* 加分題（BN01…）：不列入份數，用琥珀色和練習、作業分開 */
.task-bn {
    background-color: #fdf4e6;
    color: #8a5f1f;
    min-width: 0;
}

/* ===== 導師看板：可複製的 File Server 路徑 ===== */
.path-box {
    width: 360px;
    height: 28px;
    padding: 3px 6px;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    background-color: #fafbfc;
    color: #4a5459;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

/*
   ===== ＡＩ評語 =====
   評語掛在「繳交的那一個檔案」上，導師在看板逐檔編輯、學員在作業繳交頁看自己那一則。
   內容是整段文字，用等寬字體排，換行照著輸入時的樣子顯示。
*/
.memo-box {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #c3cbd4;
    border-radius: 4px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.6;
    box-sizing: border-box;
    resize: vertical;
}

.ai-summary {
    color: #4a5459;
    font-size: 13px;
    line-height: 1.6;
}

/* 明細區的全文：保留換行，太長時自己捲 */
.ai-summary-full {
    margin: 0;
    padding: 8px 10px;
    border-left: 3px solid #4a90d9;
    background-color: #f7f9fb;
    color: #4a5459;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.data-grid tr.row-picked td {
    background-color: #f2f7fd;
}

/* ===== 表單零件 ===== */
.inline-check {
    margin-left: 12px;
    font-size: 13px;
}

.text-area {
    width: 96%;
    padding: 6px 8px;
    border: 1px solid #d7dbdf;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
}

/* ===== 頁尾 ===== */
.site-footer {
    width: auto;
    max-width: 1280px;
    margin: 0 auto 24px;
    padding: 0 24px;
    color: #95a0a6;
    font-size: 13px;
    text-align: center;
    box-sizing: border-box;
}

/*
   ===== 視窗比上限窄的時候：左右各留 16px，不要貼齊邊 =====
   1312 ＝ 上限 1280 ＋ 左右各 16。寬到這個數以上就交給上面的 auto 置中，
   兩段接得起來，沒有斷點。
*/
@media (max-width: 1312px) {
    .site-main,
    .site-footer {
        margin-left: 16px;
        margin-right: 16px;
    }
}


/* ===== 備課提醒（導師看板）與備課重點（T00S330） ===== */
/* 看板只放「課前要先做」；今天／下一個工作日各一欄，窄螢幕疊成一欄 */
.prep-block {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.prep-block legend {
    width: 100%;
}

.prep-day {
    flex: 1 1 380px;
    min-width: 0;
}

.prep-day-title {
    margin-bottom: 8px;
    color: #1f3a5f;
    font-weight: bold;
}

.prep-course {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid #e1e4e8;
    border-left: 3px solid #1f3a5f;
    border-radius: 4px;
    background-color: #fafbfc;
}

.prep-title {
    color: #1f3a5f;
    font-size: 15px;
}

.prep-title .course-code {
    margin-right: 6px;
}

.prep-links {
    margin-top: 6px;
}

.prep-links .btn {
    margin-right: 6px;
}

.prep-none {
    margin: 4px 0;
    color: #95a0a6;
    font-size: 13px;
}

/* 導師看板的「課前要先做」清單（內容截自備課重點，一般圓點） */
.prep-block .mg-check {
    margin: 6px 0 0;
    padding-left: 22px;
    font-size: 14px;
    line-height: 1.8;
}

.prep-block code,
.mg-body code {
    padding: 1px 5px;
    border-radius: 3px;
    overflow-wrap: break-word;
    background-color: #f0f3f7;
    font-family: Consolas, monospace;
    font-size: 13px;
}

/*
   備課重點：一門課一個畫面，單欄由上往下讀，不做成卡片，
   每段只用標題下的細線分開。行距放寬，清單一條一條分得開。
*/
.mg-body {
    font-size: 15px;
    line-height: 2;
}

.mg-sec {
    margin-bottom: 28px;
}

.mg-sec h2 {
    margin: 0 0 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e1e4e8;
    color: #1f3a5f;
    font-size: 17px;
}

.mg-sec p,
.mg-sec ul {
    margin: 6px 0;
}

.mg-sec li + li {
    margin-top: 8px;
}

/*
   今天怎麼帶：橫向時間軸，一個 li 一個時段。圓點串成一條線，
   底下依序是時段、上什麼、這段結束交的練習（深藍標籤；作業用灰色 mg-hw）。
   窄螢幕改成直向，線在左邊。
*/
.mg-timeline {
    display: flex;
    margin: 14px 0 4px;
    padding: 0;
    list-style: none;
}

.mg-timeline li,
.mg-sec .mg-timeline li + li {
    margin-top: 0;
}

.mg-timeline li {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 28px 16px 0 0;
}

/* 節點 */
.mg-timeline li::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 14px;
    height: 14px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background-color: #1f3a5f;
    box-shadow: 0 0 0 1px #1f3a5f;
    z-index: 1;
}

/* 連到下一個節點的線 */
.mg-timeline li::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 14px;
    right: 0;
    height: 2px;
    background-color: #cfdcec;
}

.mg-timeline li:last-child::after {
    display: none;
}

.mg-time {
    display: block;
    color: #1f3a5f;
    font-weight: bold;
    font-size: 15px;
}

.mg-what {
    display: block;
    color: #2d3436;
    font-size: 14px;
    line-height: 1.8;
}

.mg-ex {
    display: inline-block;
    margin-top: 6px;
    padding: 1px 10px;
    border-radius: 10px;
    background-color: #1f3a5f;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.7;
}

.mg-ex.mg-hw {
    background-color: #eef1f4;
    color: #636e72;
}

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

    .mg-timeline li {
        padding: 0 0 18px 30px;
    }

    .mg-timeline li::after {
        top: 17px;
        bottom: 0;
        left: 6px;
        right: auto;
        width: 2px;
        height: auto;
    }
}

/*
   ===== 導覽列：導師的「作業批改」待評數字、頁首的導師工具包 =====
   數字是琥珀色小圓標，和頁首深藍分得開；工具包放在登入者名字前面，批改時才會用到。
*/
.nav-count {
    display: inline-block;
    min-width: 18px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 9px;
    background-color: #e2b04f;
    color: #1f2a36;
    font-size: 11px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
}

.site-kit {
    margin: 0 14px 0 0;
    padding: 3px 9px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 4px;
}

.site-kit:hover {
    background-color: #2b4d7a;
    text-decoration: none;
}

/*
   ===== 小測驗（T00S250、課程頁的 {QUIZ} 卡片、學員檔案的作答紀錄） =====
   答對綠、答錯紅，分數 80 以上綠、60 以上藍、其餘紅。題號圓標與選項字母用站台深藍。
*/
.quiz-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 12px 0;
    padding: 14px 18px;
    border: 1px solid #c7d6ea;
    border-left: 4px solid #1f3a5f;
    border-radius: 6px;
    background-color: #f4f8fd;
}

.quiz-card .btn {
    white-space: nowrap;
}

.quiz-intro,
.quiz-score-card {
    margin-bottom: 16px;
    padding: 16px 20px;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    background-color: #ffffff;
}

.quiz-intro p {
    margin: 0 0 8px;
    line-height: 1.7;
}

.quiz-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.quiz-score-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
}

.quiz-score-card .quiz-actions {
    margin-top: 0;
}

.quiz-score {
    font-size: 32px;
}

.quiz-score-sub {
    flex: 1;
    color: #5b6b7b;
}

.quiz-pt {
    font-weight: bold;
}

.quiz-pt-good { color: #1d5e43; }
.quiz-pt-ok   { color: #1f3a5f; }
.quiz-pt-low  { color: #96281b; }

.quiz-item {
    margin-bottom: 14px;
    padding: 16px 20px;
    border: 1px solid #e1e4e8;
    border-left: 4px solid #e1e4e8;
    border-radius: 6px;
    background-color: #ffffff;
}

/* 作答中：答過的題目左邊框變藍 */
.quiz-item.is-answered { border-left-color: #3d6ea8; }

.quiz-item.is-right { border-left: 4px solid #2e7d5b; }
.quiz-item.is-wrong { border-left: 4px solid #c0392b; }

.quiz-q {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.6;
}

.quiz-no {
    flex: none;
    min-width: 26px;
    height: 26px;
    border-radius: 13px;
    background-color: #1f3a5f;
    color: #ffffff;
    font-size: 13px;
    line-height: 26px;
    text-align: center;
}

.quiz-type {
    flex: none;
    padding: 0 6px;
    border-radius: 3px;
    background-color: #f0f3f7;
    color: #5b6b7b;
    font-size: 12px;
    font-weight: normal;
}

.quiz-text {
    flex: 1;
    min-width: 0;
}

.quiz-qno {
    flex: none;
    color: #95a0a6;
    font-size: 12px;
    font-weight: normal;
}

.quiz-mark {
    flex: none;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.quiz-mark.is-right { background-color: #eef7f2; color: #1d5e43; }
.quiz-mark.is-wrong { background-color: #fdeeec; color: #96281b; }

/*
   選擇題的選項：RadioButtonList 用 Flow 版面輸出（input＋label＋br）。
   圓鈕藏起來（仍可用鍵盤操作），整個 label 做成可點的卡片，選中時整張亮起來。
*/
.quiz-choice {
    display: grid;
    gap: 8px;
    margin: 12px 0 0 34px;
}

.quiz-choice br {
    display: none;
}

.quiz-choice input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.quiz-choice label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px solid #d5dce4;
    border-radius: 6px;
    background-color: #ffffff;
    line-height: 1.5;
    cursor: pointer;
    transition: border-color 0.12s, background-color 0.12s;
}

.quiz-choice label:hover {
    border-color: #3d6ea8;
    background-color: #f4f8fd;
}

.quiz-choice input:checked + label {
    border-color: #1f3a5f;
    background-color: #e8f1fb;
    box-shadow: inset 0 0 0 1px #1f3a5f;
}

.quiz-choice input:focus + label {
    outline: 2px solid #9dbbe0;
    outline-offset: 1px;
}

.quiz-choice input:checked + label .quiz-letter {
    border-color: #1f3a5f;
    background-color: #1f3a5f;
    color: #ffffff;
}

/* 底部固定的交卷列 */
.quiz-submit-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 16px;
    padding: 12px 18px;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -3px 10px rgba(31, 58, 95, 0.08);
}

.quiz-submit-bar .quiz-actions {
    margin-top: 0;
}

.quiz-progress {
    color: #5b6b7b;
}

.quiz-progress b {
    color: #1f3a5f;
    font-size: 18px;
}

ul.quiz-opts {
    margin: 12px 0 0 34px;
    padding: 0;
    list-style: none;
}

.quiz-letter {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 6px;
    border: 1px solid #c3cbd4;
    border-radius: 50%;
    color: #3d6ea8;
    font-size: 13px;
    font-weight: bold;
}

.quiz-choice .quiz-letter {
    margin-right: 0;
}

ul.quiz-opts li {
    display: flex;
    align-items: center;
    margin: 4px 0;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
}

ul.quiz-opts li.is-answer .quiz-letter { border-color: #2e7d5b; background-color: #2e7d5b; color: #ffffff; }
ul.quiz-opts li.is-picked .quiz-letter { border-color: #c0392b; background-color: #c0392b; color: #ffffff; }

ul.quiz-opts li.is-answer {
    background-color: #eef7f2;
    color: #1d5e43;
    font-weight: bold;
}

ul.quiz-opts li.is-picked {
    background-color: #fdeeec;
    color: #96281b;
}

.quiz-you {
    margin-left: 8px;
    padding: 0 6px;
    border: 1px solid currentColor;
    border-radius: 8px;
    font-size: 12px;
    font-weight: normal;
}

input.quiz-name {
    width: 360px;
    max-width: calc(100% - 34px);
    margin: 12px 0 0 34px;
    padding: 9px 12px;
    border: 1px solid #d5dce4;
    border-radius: 6px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 15px;
}

input.quiz-name:focus {
    border-color: #1f3a5f;
    outline: 2px solid #9dbbe0;
    outline-offset: 1px;
}

.quiz-line {
    margin: 6px 0 0 34px;
}

.quiz-label {
    display: inline-block;
    width: 72px;
    color: #5b6b7b;
    font-size: 13px;
}

.quiz-explain {
    margin: 10px 0 0 34px;
    padding: 8px 12px;
    border-radius: 4px;
    background-color: #f8fafc;
    color: #4a5560;
    font-size: 14px;
    line-height: 1.6;
}

table.quiz-hist {
    margin-bottom: 8px;
    border-collapse: collapse;
    font-size: 13px;
}

table.quiz-hist td {
    padding: 3px 12px 3px 0;
}

table.quiz-hist .btn-sm {
    margin-top: 0;
}

/* ===== 前置作業項目維護（T00S430） =====
   項目欄的補充說明很長，自動版面會把其他短欄擠到一字一行；
   短欄一律不換行，只讓項目欄換行吃掉剩下的寬度。 */
.prep-item-grid th,
.prep-item-grid td {
    white-space: nowrap;
}

.prep-item-grid td.col-wrap {
    min-width: 240px;
    white-space: normal;
}

.prep-item-grid .role-tag {
    margin-left: 0;
}