/* ============================================================================
   yuntech-theme.css — YunTech SSO 現代化外觀層 (Modernization layer)
   ----------------------------------------------------------------------------
   這個檔案是「純覆蓋層」(override-only)：
     - 一定要放在 <head> 中所有 css <link> 的「最後一個」。
     - 移除那一行 <link> 就完全回到原本的樣子，不會留下任何副作用。
     - 不修改 bootstrap.min.css / style.css (Inspinia) / custom.css。
     - 盡量不碰 Kendo 內部 (.k-*)，只加 focus ring 與少量表面色彩。

   This file is an override-only layer. It must be the LAST stylesheet in
   <head>. Deleting that one <link> restores the previous look exactly.

   目錄 / Sections
     01  Design tokens
     02  Typography (zh-TW + Latin)
     03  Focus visibility (:focus-visible)
     04  Surfaces & cards (.ibox)
     05  Forms & floating labels
     06  Buttons
     07  Links
     08  Page header / navbar / sidebar
     09  Footer & touch targets
     10  Alerts, toasts, badges
     11  Kendo — 安全範圍的表格 / 輸入框微調
     12  Scrollbars & motion preferences
   ========================================================================== */


/* ==========================================================================
   01  DESIGN TOKENS
   校色黃 #fed42e 與校色藍綠 #17c9cf 為出發點，往「可讀」的方向推導：
   原始 #17c9cf 對白底只有 2.0:1，無法當作按鈕底色或文字色，
   因此推導出加深、略去飽和的 --yt-primary #0d8288 (對白字 4.6:1)。
   黃色只作為「深底上的強調色」(側邊欄 focus ring、標題細節)，不放在白底文字。
   ========================================================================== */
:root {
    /* --- Brand ------------------------------------------------------------ */
    --yt-brand-yellow: #fed42e; /* 校色黃 — 僅用於深底強調 */
    --yt-brand-yellow-deep: #d8ac00; /* 黃色在淺底時的可讀變體 */
    --yt-brand-teal: #17c9cf; /* 校色藍綠 — 僅用於裝飾/漸層 */

    /* --- Primary (由校色藍綠加深而來) --------------------------------------- */
    --yt-primary: #0d8288; /* 白字 4.60:1  AA */
    --yt-primary-hover: #0a6d72; /* 白字 5.79:1 */
    --yt-primary-active: #085c60; /* 白字 6.94:1 */
    --yt-primary-soft: #e6f5f6; /* 淺色底 (hover 背景、tag) */
    --yt-primary-softer: #f2fafb;
    --yt-primary-disabled: #7cbabd;
    --yt-primary-ring: rgba(13,130,136,0.32);

    /* --- Inspinia 既有色，保留讓未套用的區塊不衝突 ---------------------------- */
    --yt-legacy-green: #1ab394;
    --yt-header-bg: #1ab394; /* 訪客頁最上方的校名橫幅底色 */
    --yt-navy: #2f4050; /* 側邊欄 */
    --yt-navy-soft: #3a4b5c;

    /* --- Semantic --------------------------------------------------------- */
    --yt-info: #1a76b0; /* 由 Inspinia #1c84c6 加深 → 白字 4.93:1 */
    --yt-info-hover: #15618f;
    --yt-warning: #f8ac59; /* 維持 Inspinia 橘，但改用深色文字 */
    --yt-warning-hover: #f09a3c;
    --yt-warning-ink: #43310c; /* 橘底上的文字 6.9:1 */
    --yt-danger: #d64550;
    --yt-danger-hover: #b8323d;
    --yt-success: #1f9c7d;

    /* --- Neutrals --------------------------------------------------------- */
    --yt-ink-900: #1f2a37; /* 標題 */
    --yt-ink-700: #3d4753; /* 強調內文 */
    --yt-ink-600: #5a6472; /* 內文 */
    --yt-ink-500: #7b8592; /* 次要 / 標籤 */
    --yt-ink-400: #9aa3ae; /* 佔位符 */
    --yt-line: #e4e8ec; /* 一般分隔線 */
    --yt-line-strong: #b8c0c9; /* 輸入框邊框 — 原 #d2d8de 對白底僅 ~1.4:1 幾乎看不見，加深到 ~1.8:1 讓欄位邊界清楚可辨 */
    --yt-surface: #ffffff;
    --yt-surface-2: #f7f9fa; /* 卡片內的次要區塊 */
    --yt-canvas: #f2f5f7; /* 頁面底色 */

    /* --- Spacing ---------------------------------------------------------- */
    --yt-s1: 4px;
    --yt-s2: 8px;
    --yt-s3: 12px;
    --yt-s4: 16px;
    --yt-s5: 24px;
    --yt-s6: 32px;

    /* --- Radius ----------------------------------------------------------- */
    --yt-radius-sm: 6px;
    --yt-radius: 10px;
    --yt-radius-lg: 14px;
    --yt-radius-pill: 999px;

    /* --- Elevation (3 階) --------------------------------------------------- */
    --yt-shadow-1: 0 1px 2px rgba(31,42,55,0.05), 0 1px 3px rgba(31,42,55,0.04);
    --yt-shadow-2: 0 2px 4px rgba(31,42,55,0.05), 0 8px 20px rgba(31,42,55,0.07);
    --yt-shadow-3: 0 10px 32px rgba(31,42,55,0.13);

    /* --- Motion ----------------------------------------------------------- */
    --yt-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --yt-dur-fast: 0.12s;
    --yt-dur: 0.18s;

    /* --- Focus ------------------------------------------------------------ */
    --yt-focus: var(--yt-primary); /* 淺底 */
    --yt-focus-on-dark: var(--yt-brand-yellow); /* 深底 (側邊欄 7.4:1) */
    --yt-focus-halo: #ffffff;

    /* --- Fonts ------------------------------------------------------------ */
    /* Latin 走 Open Sans (本機 ~/Content/fonts/open-sans.css)，
       CJK 依序退回系統的繁中字型。不引入任何外部字型 CDN。 */
    --yt-font: "Open Sans", "Segoe UI", "Noto Sans TC", "PingFang TC",
               "Microsoft JhengHei", "微軟正黑體", "Helvetica Neue",
               Helvetica, Arial, sans-serif;
}


/* ==========================================================================
   02  TYPOGRAPHY
   中英混排：行高放寬到 1.6–1.7，中文才不會擠在一起；
   Inspinia 原本 h1–h6 是 font-weight:100 的 2015 風格，改回可讀的 500–600。
   ========================================================================== */
body {
    font-family: var(--yt-font);
    font-size: 14px; /* Inspinia 原本 13px，略放大 */
    line-height: 1.6;
    color: var(--yt-ink-600);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 中文段落再放鬆一點 */
.ibox-content,
.ibox-content p,
.page-heading p {
    line-height: 1.7;
}

/* 側邊欄 / 頂欄 / 頁尾維持原本較小的字級，避免高度被撐開造成版面位移 */
.navbar-static-side,
.nav.metismenu,
.navbar-top-links,
#page_footer,
.footer {
    font-size: 13px;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--yt-font);
    color: var(--yt-ink-900);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
}

h1 { font-size: 1.625rem; } /* 26px */
h2 { font-size: 1.375rem; } /* 22px */
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.9375rem; }
h6 { font-size: 0.8125rem; }

/* 中文標題不需要負字距 */
:lang(zh-Hant) h1,
:lang(zh-Hant) h2,
:lang(zh-Hant) h3 {
    letter-spacing: 0.01em;
}

small, .small { font-size: 0.8125rem; }

.text-muted { color: var(--yt-ink-500) !important; }

/* CJK 不能靠 Latin 的斷字規則；長字串（信箱、系統代碼）要能換行 */
.ibox-content,
.page-heading,
.list-group-item,
.footer {
    overflow-wrap: break-word;
    word-break: normal;
    line-break: strict;
}


/* ==========================================================================
   03  FOCUS VISIBILITY
   全站原本幾乎沒有可見的鍵盤焦點樣式。改用 box-shadow 雙層環：
   內圈白色 halo + 外圈品牌色，因此在白底、彩色按鈕、深色側邊欄都看得見，
   而且不會像 outline-offset 造成版面位移。

   為什麼用 !important：custom.css 有多條 id 層級、且帶 !important 的
   box-shadow（例如 #MainPageWrapper input.inputText:focus、
   #MainPageWrapper #LoginSubmitBtn:hover），沒有 !important 就會把焦點環吃掉。
   焦點可見度是無障礙的硬需求，這裡刻意用 !important 收斂，範圍僅限
   :focus-visible 狀態，不影響其他狀態的外觀。
   ========================================================================== */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.close:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible {
    outline: 2px solid transparent !important; /* Windows 高對比模式的後備 */
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--yt-focus-halo),
                0 0 0 4px var(--yt-focus) !important;
    border-radius: var(--yt-radius-sm);
}

/* 輸入框保留自己的圓角，不要被上面那條蓋掉 */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus-visible {
    border-radius: inherit;
}

/* 深色側邊欄 / 深色頁尾條上改用校色黃 (對 #2f4050 為 7.4:1) */
.navbar-static-side a:focus-visible,
#side-menu a:focus-visible,
.nav-header a:focus-visible,
.sidebar-container a:focus-visible {
    box-shadow: 0 0 0 2px var(--yt-navy),
                0 0 0 4px var(--yt-focus-on-dark) !important;
}

/* Kendo：只加焦點環，其餘 .k-* 內部樣式一律不動 */
.k-textbox:focus-within,
.k-input:focus-visible,
.k-widget input:focus-visible,
.k-button:focus-visible,
.k-switch:focus-visible,
.k-link:focus-visible {
    box-shadow: 0 0 0 2px var(--yt-focus-halo),
                0 0 0 4px var(--yt-focus) !important;
    outline: 2px solid transparent !important;
    outline-offset: 2px;
}

/* 滑鼠點擊時不要出現焦點環（:focus-visible 已處理鍵盤情境） */
.btn:focus:not(:focus-visible) {
    box-shadow: none;
}


/* ==========================================================================
   04  SURFACES & CARDS (.ibox)
   Inspinia 的卡片其實是「幾個各自帶 1px 邊線的白色區塊」堆起來的。
   這裡把外框收攏到 .ibox 上：白底 + 柔和圓角 + 1px 邊 + 極淡陰影，
   內部 .ibox-title / .ibox-content 的邊線改為單一分隔線，不再重複。
   注意：不加 position/overflow，避免影響現有絕對定位與 Kendo 浮層。
   ========================================================================== */
.gray-bg,
.bg-muted {
    background-color: var(--yt-canvas);
}

.ibox {
    background-color: var(--yt-surface);
    border: 1px solid var(--yt-line);
    border-radius: var(--yt-radius-lg);
    box-shadow: var(--yt-shadow-1);
    margin-bottom: 20px;
    transition: box-shadow var(--yt-dur) var(--yt-ease),
                border-color var(--yt-dur) var(--yt-ease);
}

.ibox:hover {
    box-shadow: var(--yt-shadow-2);
    border-color: #d8dee3;
}

/* 讓第一個/最後一個子區塊貼合外框圓角（bg-danger 之類的標題底色才不會露角） */
.ibox > *:first-child {
    border-top-left-radius: calc(var(--yt-radius-lg) - 1px);
    border-top-right-radius: calc(var(--yt-radius-lg) - 1px);
}

.ibox > *:last-child {
    border-bottom-left-radius: calc(var(--yt-radius-lg) - 1px);
    border-bottom-right-radius: calc(var(--yt-radius-lg) - 1px);
}

.ibox > .ibox-title {
    background-color: transparent;
    border-style: solid;
    border-color: var(--yt-line);
    border-width: 0 0 1px 0; /* 原本是「上緣 2px」，改成「下緣 1px」的標題分隔 */
    min-height: 0;
    padding: 14px 90px 12px 18px;
}

.ibox > .ibox-content {
    background-color: transparent;
    border-width: 0;
    padding: 14px 18px 16px;
}

/* 同一張卡片內連續兩段 content 時才需要中間分隔線 */
.ibox > .ibox-content + .ibox-content {
    border-top: 1px solid var(--yt-line);
}

.ibox > .ibox-footer {
    background-color: var(--yt-surface-2);
    border-top: 1px solid var(--yt-line);
    padding: 10px 18px;
}

/* 卡片標題字級：Inspinia 用 h5(14px)，但專案裡混用了 h2/h3，統一收斂 */
.ibox-title h1,
.ibox-title h2,
.ibox-title h3,
.ibox-title h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--yt-ink-900);
    margin: 0;
    line-height: 1.45;
}

.ibox-title h5 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--yt-ink-900);
    margin: 0;
    line-height: 1.45;
}

.ibox-title > small,
.ibox-title .text-muted {
    color: var(--yt-ink-500);
}

/* 帶底色的卡片標題（例如錯誤頁的 .ibox-title.bg-danger）：
   原本標題文字沿用 .ibox-title 的灰色，在紅底上只有 ~2.6:1。改為白字 4.6:1。 */
.ibox-title.bg-danger,
.ibox-title.bg-primary,
.ibox-title.bg-success,
.ibox-title.bg-info,
.ibox-title.bg-dark,
.ibox-title.bg-danger h1, .ibox-title.bg-danger h2,
.ibox-title.bg-danger h3, .ibox-title.bg-danger h4,
.ibox-title.bg-danger h5,
.ibox-title.bg-primary h1, .ibox-title.bg-primary h2,
.ibox-title.bg-primary h3, .ibox-title.bg-primary h4,
.ibox-title.bg-primary h5,
.ibox-title.bg-success h1, .ibox-title.bg-success h2,
.ibox-title.bg-success h3, .ibox-title.bg-success h4,
.ibox-title.bg-success h5,
.ibox-title.bg-info h1, .ibox-title.bg-info h2,
.ibox-title.bg-info h3, .ibox-title.bg-info h4,
.ibox-title.bg-info h5,
.ibox-title.bg-dark h1, .ibox-title.bg-dark h2,
.ibox-title.bg-dark h3, .ibox-title.bg-dark h4,
.ibox-title.bg-dark h5 {
    color: #ffffff;
}

/* 標題右側的工具列圖示 — 給它一個可點的方塊（ibox-title 高度有限，用 32px） */
.ibox-tools > a,
.ibox-tools > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    border-radius: var(--yt-radius-sm);
    color: var(--yt-ink-500);
    transition: background-color var(--yt-dur-fast) var(--yt-ease),
                color var(--yt-dur-fast) var(--yt-ease);
}

.ibox-tools > a:hover,
.ibox-tools > button:hover {
    background-color: var(--yt-primary-soft);
    color: var(--yt-primary);
    text-decoration: none;
}

/* Bootstrap 的 .rounded 帶 !important（登入卡片 .ibox.rounded），需要對等覆蓋 */
.ibox.rounded,
#MainPageWrapper .ibox.rounded {
    border-radius: var(--yt-radius-lg) !important;
}

#MainPageWrapper .ibox.rounded > .ibox-content.rounded {
    border-radius: calc(var(--yt-radius-lg) - 1px) !important;
}

/* 登入卡片：略深一點的陰影，讓它從灰底浮起來 */
#MainPageWrapper .ibox.rounded {
    box-shadow: var(--yt-shadow-2);
}

#MainPageWrapper .ibox.rounded:hover {
    box-shadow: var(--yt-shadow-2); /* 登入卡不是可點卡片，不要有 hover 抬升 */
}

/* 卡片內的清單（各首頁的捷徑清單） */
.ibox-content .list-group-item {
    border-color: var(--yt-line);
    padding: 0.5rem 0.75rem;
    transition: background-color var(--yt-dur-fast) var(--yt-ease);
}

.ibox-content .list-group-item:hover {
    background-color: var(--yt-primary-softer);
}

/* 常用系統卡片（_MostUsedCard）把 .ibox-content 的內距歸零，讓「更多／關閉」那條
   全寬按鈕貼齊卡片下緣；它自己殘留的下框線（custom.css inline border-color:#ccc）
   跟 .ibox 新加的外框線只隔不到 2px，視覺上疊成一條粗線/雙線。這裡讓它貼齊外框、
   不重複畫線，並補上跟外框一致的圓角，收合處才會密合（同 .ibox > *:last-child
   的圓角處理邏輯，只是這兩個按鈕是 .ibox-content 的子元素，不是 .ibox 的直接子元素，
   套不到那條規則）。 */
#MostUsedCard_ibox_content > #SystemLinkMore,
#SystemLinkMoreDiv #SystemLinkInBlock {
    border-bottom: 0;
    border-bottom-left-radius: calc(var(--yt-radius-lg) - 1px);
    border-bottom-right-radius: calc(var(--yt-radius-lg) - 1px);
}

/* 「更多」彈出面板（_EmpMoreLinks / _StudMoreLinks）用 Inspinia 的 .ibox-h860
   固定高度（880px）塞兩個 .ibox-title + .ibox-content.morelinks-list 區塊；
   單一區塊超過 800px 時 .morelinks-list 自己的 max-height + overflow-y:auto
   會捲動，但兩個區塊「加總」超過 880px 時，父層 .ibox-h860 本身沒有 overflow
   控制，超出的項目會直接溢出卡片圓角邊界（本檔把 body 字級 13→14px 後，
   幾個連結較多的欄位剛好被推過臨界值）。比照 .morelinks-list 同樣改成內部
   捲動，圓角也會正確裁切內容，不會再看到文字溢出卡片外。 */
.ibox-h860 {
    overflow-y: auto;
    overflow-x: hidden;
}


/* ==========================================================================
   05  FORMS & FLOATING LABELS
   注意：custom.css 的 `input.inputText` 特異度 (0,1,1) 高於 `.form-control`，
   高度與 padding-top（浮動標籤要用的空間）刻意保留不動，只調邊框/圓角/色彩。
   ========================================================================== */
.form-control {
    border: 1px solid var(--yt-line-strong);
    border-radius: var(--yt-radius-sm);
    color: var(--yt-ink-700);
    background-color: var(--yt-surface);
    transition: border-color var(--yt-dur) var(--yt-ease),
                box-shadow var(--yt-dur) var(--yt-ease),
                background-color var(--yt-dur) var(--yt-ease);
}

.form-control::placeholder {
    color: var(--yt-ink-400);
}

.form-control:focus {
    border-color: var(--yt-primary);
    box-shadow: 0 0 0 3px var(--yt-primary-ring);
    outline: 0;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--yt-surface-2);
    color: var(--yt-ink-500);
    border-color: var(--yt-line);
    cursor: not-allowed;
}

.form-control.k-invalid,
.form-control[aria-invalid="true"] {
    border-color: var(--yt-danger);
}

.form-control.k-invalid:focus,
.form-control[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(214,69,80,0.28);
}

label,
.control-label {
    color: var(--yt-ink-700);
    font-weight: 600;
}

/* --- 登入 / 改密碼頁的大輸入框 ------------------------------------------- */
#MainPageWrapper input.inputText {
    border-width: 1px;
    border-color: var(--yt-line-strong);
    border-radius: var(--yt-radius);
    font-size: 1rem;
    color: var(--yt-ink-900);
    background-color: var(--yt-surface) !important; /* 蓋掉 .bg-light 的灰 */
    transition: border-color var(--yt-dur) var(--yt-ease),
                box-shadow var(--yt-dur) var(--yt-ease);
}

#MainPageWrapper input.inputText:hover:not(:focus) {
    border-color: #b9c1c9;
}

/* custom.css 的 `#MainPageWrapper input.inputText:focus` 用了
   `box-shadow: ... rgba(0,123,255,.15) !important`（Bootstrap 藍），
   與品牌色不一致，故此處同樣以 !important 收斂成品牌藍綠。 */
#MainPageWrapper input.inputText:focus {
    border-color: var(--yt-primary);
    box-shadow: 0 0 0 3px var(--yt-primary-ring) !important;
    outline: 0;
}

/* 浮動標籤：原本 11pt / 深色，跟輸入值搶焦點且左緣對不齊
   （left:25px 是相對 .col-12 的邊框盒，欄位左內距 15px + 輸入框內距 16px = 31px）。
   改成小字、對齊輸入值的左緣 → 更像現代的 floating label。
   顏色原本用 --yt-ink-500（對白底僅 ~3.7:1），使用者反映看不清楚；
   改用 --yt-ink-700（~9.5:1，遠超 7:1）並把字級從 0.75rem 加大到 0.8125rem
   （與 small/.small 同級），top/left 不變，浮動動畫與對齊不受影響。 */
#MainPageWrapper .floating-label {
    left: 31px;
    top: 7px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--yt-ink-700);
    transition: color var(--yt-dur) var(--yt-ease);
}

#MainPageWrapper .form-group:focus-within .floating-label {
    color: var(--yt-primary);
}

/* 密碼顯示切換：原本只有一個 ~14px 的圖示。撐成 40×40 的點擊區，
   負 margin 讓圖示的視覺中心維持在原位（原 right:14px + 半個圖示 ≒ 21px）。 */
#MainPageWrapper #ViewPwBtn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-right: -13px;
    border-radius: var(--yt-radius-pill);
    transition: background-color var(--yt-dur-fast) var(--yt-ease);
}

#MainPageWrapper #ViewPwBtn:hover {
    background-color: var(--yt-primary-soft);
}

/* 驗證碼列的重新整理鈕也一併放大 */
#RefreshCaptchaBtn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--yt-radius-pill);
}

#RefreshCaptchaBtn:hover {
    background-color: var(--yt-primary-soft);
}

/* 語言切換小連結 — 加大點擊區並讓 hover 有品牌色 */
.lang-switcher .lang-btn,
#MainPageWrapper .lang-switcher .lang-btn,
.page-heading .lang-switcher .lang-btn {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 3px 10px;
    border-radius: var(--yt-radius-pill);
    color: var(--yt-ink-600);
}

#MainPageWrapper .lang-switcher .lang-btn:hover,
.page-heading .lang-switcher .lang-btn:hover {
    background-color: var(--yt-primary-soft);
    color: var(--yt-primary-active);
}


/* ==========================================================================
   06  BUTTONS
   btn-primary 由 Inspinia 綠 #1ab394（白字僅 2.65:1）改為推導後的品牌藍綠
   #0d8288（白字 4.60:1）。btn-warning 保留原本的橘，但文字改深色 (6.9:1)，
   因此「主要 / 警示」的語意讀起來仍然一致。
   ========================================================================== */
.btn {
    border-radius: var(--yt-radius-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background-color var(--yt-dur) var(--yt-ease),
                border-color var(--yt-dur) var(--yt-ease),
                box-shadow var(--yt-dur) var(--yt-ease),
                color var(--yt-dur) var(--yt-ease);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    box-shadow: none;
    cursor: not-allowed;
}

.btn-xs {
    border-radius: var(--yt-radius-sm);
}

/* --- Primary ------------------------------------------------------------ */
.btn-primary {
    color: #ffffff;
    background-color: var(--yt-primary);
    border-color: var(--yt-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    color: #ffffff;
    background-color: var(--yt-primary-hover);
    border-color: var(--yt-primary-hover);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #ffffff;
    background-color: var(--yt-primary-active);
    border-color: var(--yt-primary-active);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.16);
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #ffffff;
    background-color: var(--yt-primary-disabled);
    border-color: var(--yt-primary-disabled);
}

.btn-primary.btn-outline,
.btn-outline-primary {
    color: var(--yt-primary);
    border-color: var(--yt-primary);
    background-color: transparent;
}

.btn-outline-primary:hover {
    color: #ffffff;
    background-color: var(--yt-primary);
    border-color: var(--yt-primary);
}

/* 登入送出鈕 — 稍微加高，符合 44px 觸控建議 */
#LoginSubmitBtn {
    min-height: 42px;
    border-radius: var(--yt-radius);
    box-shadow: 0 2px 6px rgba(13,130,136,0.24);
}

#LoginSubmitBtn:hover {
    box-shadow: 0 4px 12px rgba(13,130,136,0.32);
}

/* --- Warning (深色文字，語意不變) ----------------------------------------- */
.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus {
    color: var(--yt-warning-ink);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus {
    background-color: var(--yt-warning-hover);
    border-color: var(--yt-warning-hover);
}

.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active {
    color: var(--yt-warning-ink);
}

/* --- Success (Inspinia 把 success 定義成藍色；只加深到可讀門檻) -------------- */
.btn-success {
    background-color: var(--yt-info);
    border-color: var(--yt-info);
}

.btn-success:hover,
.btn-success:focus,
.btn-success.focus {
    background-color: var(--yt-info-hover);
    border-color: var(--yt-info-hover);
}

/* --- Neutral / outline -------------------------------------------------- */
.btn-white,
.btn-default {
    background-color: var(--yt-surface);
    border-color: var(--yt-line-strong);
    color: var(--yt-ink-700);
}

.btn-white:hover,
.btn-default:hover {
    background-color: var(--yt-surface-2);
    border-color: #c2cad1;
    color: var(--yt-ink-900);
}

.btn-outline-secondary {
    color: var(--yt-ink-600);
    border-color: var(--yt-line-strong);
}

.btn-outline-secondary:hover {
    background-color: var(--yt-ink-700);
    border-color: var(--yt-ink-700);
    color: #ffffff;
}


/* ==========================================================================
   07  LINKS
   只在內容區換連結色，避免蓋掉 custom.css 針對登入頁（#MainPageWrapper .login-*）
   刻意指定的紅/藍語意色（那些選擇器帶 id，特異度較高，這裡不會動到）。
   ========================================================================== */
.ibox-content a:not(.btn),
.ibox-title a:not(.btn),
.page-heading a:not(.btn):not([class*="lang"]) {
    color: #0a6a86; /* 對白底 6.1:1 */
    transition: color var(--yt-dur-fast) var(--yt-ease);
}

.ibox-content a:not(.btn):hover,
.ibox-title a:not(.btn):hover,
.page-heading a:not(.btn):not([class*="lang"]):hover {
    color: #084f66;
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ==========================================================================
   08  PAGE HEADER / NAVBAR / SIDEBAR
   ========================================================================== */
.page-heading {
    background-color: var(--yt-surface);
    border-bottom: 1px solid var(--yt-line) !important; /* 對等覆蓋 .border-bottom */
    padding: 4px 10px 14px 10px;
    box-shadow: 0 1px 2px rgba(31,42,55,0.03);
}

/* 這個專案裡 .navbar-static-top 只有訪客版頂欄（_TopNavbar_Visitor.cshtml）在用，
   是校色藍綠橫幅，不是 Inspinia 原本那種可另外套白底的頂欄（站內版頂欄用的是
   #SearchBarNav / #NavigationNav，class 是 navbar-fixed-top，不會被這裡命中）。
   先前這裡疊了一層 background-color:var(--yt-surface) + border-bottom，
   但 custom.css 的 .md-skin .navbar-static-top{background-color:#1ab394 !important}
   優先度更高，背景色其實從沒真的變白過；border-bottom 卻沒被蓋掉，變成橫幅
   下緣一條跟藍綠色不搭的淺線（「白線」）。這個規則對這個專案沒有正面作用，
   直接移除即可讓橫幅下緣恢復原本乾淨的單色邊界。 */

/* 側邊欄：略柔和的深藍，選中項用品牌藍綠當左側指示條 */
.nav.metismenu > li.active > a,
.nav > li.active > a {
    color: #ffffff;
}

.navbar-default .nav > li.active {
    border-left-color: var(--yt-primary);
}

.nav > li > a {
    transition: background-color var(--yt-dur-fast) var(--yt-ease),
                color var(--yt-dur-fast) var(--yt-ease);
}

/* 側邊欄內的「搜尋選單」輸入框（#InputFilter）上下都貼齊相鄰色塊（深底的
   profile 區塊 / 選單本體），套用全站 .form-control 的圓角後，四個角會露出
   側邊欄背景色，看起來像沒密合、卡片跟側邊欄「接不起來」。側邊欄內的表單
   元件維持方正，圓角只留給內容區真正獨立的卡片與輸入框。 */
.navbar-static-side .form-control {
    border-radius: 0;
}

/* --------------------------------------------------------------------------
   側邊欄使用者區塊 (.nav-header) — 校園鐘塔底圖「亮面品牌板」
   蓋掉 style.css :9115 的 .md-skin .nav-header { background: url(patterns/4.png) }

   〔為什麼不再壓深色 scrim〕
   這個區塊在真實頁面上是夾在兩條「平塗亮色」之間的：上面是橫跨整個畫面寬度
   的頂欄 #1ab394 (style.css :9280 .md-skin .navbar-fixed-top，position:fixed
   left:0 right:0)，下面緊接著「搜尋選單」輸入框 .bg-info #17a2b8，再下面是白
   底選單。任何深色 scrim 都會讓這裡變成兩條鮮豔亮帶中間的一塊濁色，跟周邊
   色塊互相打架；而底圖本身是「左深右淺」，鐘塔畫在最亮的右側 —— 這張圖本來
   就是要在亮面上看的。所以改成反過來做：不壓暗，改在文字欄位「提亮」，文字
   換成深藍綠墨色。

   〔為什麼要放大底圖，而不是 cover〕
   原圖 590x380，鐘塔實測佔 x 516..579（只有 64px 寬 ≈ 全圖 11%）。側邊欄寬
   220px (style.css :1310 body.fixed-sidebar .navbar-static-side)，用 cover 時
   鐘塔只會被畫成約 24px 寬的細條 —— 這才是前兩次「看不到底圖」的真正原因，
   scrim 只是加重症狀。這裡固定放大到 660px 寬（約 1.12 倍），鐘塔約 71px，
   佔側邊欄三分之一，一眼就認得出是鐘塔。

   〔縱向裁切〕
   原圖縱向：塔尖 y≈80、塔冠含校徽 y 146..171、簷口 171..185、窗層 185..225。
   用固定 px 位移 -114px（不用 %）：系所名／姓名兩行改成單行不換行後，教職員版
   與學生版的區塊高度都固定在 126px，塔冠剛好落在縱向中線。固定 px 而非 % 仍
   是保守作法——往後若哪個變體的行高或內距被調整導致區塊變高，塔身圖案只會
   自然多露出一段（上下都出血），不會跟著跑位。 */
.md-skin .nav-header {
    background:
        /* 1) 文字欄位的「提亮」薄膜：左側最濃、往右遞減，到 72% 完全透明，
              鐘塔所在的右側幾乎不受影響。顏色是底圖亮端的同色系再提亮。 */
        linear-gradient(90deg,
            rgba(224, 246, 243, 0.93) 0%,
            rgba(224, 246, 243, 0.86) 38%,
            rgba(224, 246, 243, 0.62) 52%,
            rgba(224, 246, 243, 0.24) 62%,
            rgba(224, 246, 243, 0.00) 72%),
        /* 2) 上緣微提亮、下緣微收深，讓色塊有厚度，不是一張平貼的圖。
              上緣只給 0.22，避免在 #1ab394 頂欄下方糊出一條白線。 */
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.00) 40%,
            rgba(4, 64, 67, 0.09) 100%),
        /* 3) 底圖本體 */
        url("patterns/nav-header-yuntech.png") 100% -114px / 660px auto no-repeat;
    background-color: #d3ebe8; /* 圖片載入前的後備底色（底圖亮端的平均色） */
    text-shadow: none;         /* 深色文字不需要、也不能用深色陰影 */
}

/* 文字改深藍綠墨色。#06373a 取自底圖自身最深的一端 rgb(10,56,57)，屬同色系
   加深，不是另外發明的顏色；次要行 #0a4b4f 略淺一階，維持兩行的層級差。
   實測（把文字隱藏後逐像素量真實背景）：主行 6.9–8.0:1、次要行 5.1–6.2:1，
   教職員版與學生版都通過 WCAG AA。
   選擇器一律收斂到 .profile-element 之內：使用者選單 #NavHeaderMenu 也長在
   .nav-header 裡面，但它是白底下拉選單，不該被這裡的底圖用色影響。 */
.md-skin .nav-header .profile-element > a {
    color: #06373a;
    text-shadow: none;
}

.md-skin .nav-header .profile-element .text-light,  /* 姓名那行掛的是 bootstrap .text-light */
.md-skin .nav-header .profile-element .text-muted {
    color: #0a4b4f !important;
}

/* 教職員／校友用的校徽 (Content/Images/head/YunTech_0.png) 是「純白色去背」圖
   （實測非透明像素全是 #ffffff），放在亮底上會整個消失。這裡把它放進一個深
   藍綠圓片裡：白圖案恢復可辨識，尺寸也跟學生版的 50px 圓形大頭貼一致，兩種
   身分的版面因此對齊。學生大頭貼有 id="HeaderPhotoImage"，用 :not() 排除，
   照片不會被套上圓片與內距。行內 style 寫死了 width/margin-top，必須用
   !important 才蓋得掉。 */
.md-skin .nav-header .profile-element .img-circle img:not(#HeaderPhotoImage) {
    width: 50px !important;
    height: 50px !important;
    margin-top: 0 !important;
    padding: 7px;
    box-sizing: border-box;
    object-fit: contain;
    background-color: #06484b;
    border-radius: 50%;
}

.md-skin .nav-header .profile-element .img-circle {
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(6, 55, 58, 0.18); /* 亮底上圈出頭像邊界 */
}

/* 真實內容防呆（這是既有 bug，跟底圖無關）：bootstrap 的
   .dropdown-toggle { white-space: nowrap } 會讓長系所名在 220px 側邊欄完全不
   換行，直接被裁掉半個字 —— 例如「設計學研究所創意生活設計碩士班」。第一版
   改成折行（white-space: normal + overflow-wrap: anywhere），使用者驗收「還
   可以，但是不要折行」——「圖資處--資訊系統組」（9 字）用原本 58px 留白會在
   「資訊系統」後斷成兩行，改回單行、溢出時用刪節號，不能再走回硬裁字的老路。

   〔留白從 58px 收到 42px 的依據〕
   「圖資處--資訊系統組」實測單行自然寬度 124px；側邊欄內文可用寬度固定
   170px（220 - 左右 padding 各 25px），要單行塞下就只能把留白從 58px（鐘塔
   左緣 x=137px，零重疊）收到 42px（文字右緣落到 x=153px，吃進鐘塔下段 16px
   ——窗層／簷口一帶的淡色底，不是塔身深色主體）。用本機 mock（真實 markup +
   bootstrap/style.css/custom.css/本檔的疊層順序）把文字設 visibility:hidden
   後截圖，逐像素量測合成後的底色，對兩行墨色（主行 #06373a、次行 #0a4b4f）
   算 WCAG 對比：42px 留白下整個文字涵蓋範圍內最差像素在鐘塔窗台交界處，
   次行 4.64:1、主行 6.17:1，兩者都通過一般文字 4.5:1 門檻，所以採用 42px、
   讓「圖資處--資訊系統組」單行塞下；比 42px 更窄不影響這個最差像素（它就在
   單行塞下所需的寬度範圍內躲不掉），比 42px 更寬則沒必要多吃鐘塔版位。
   超過可用寬度的名稱（如前述「設計學研究所創意生活設計碩士班」）一律用
   text-overflow: ellipsis 截斷，兩行（系所名、姓名）都套用，維持一致。 */
.md-skin .nav-header .profile-element > a.dropdown-toggle {
    display: block;
    padding-right: 42px;
    white-space: nowrap;
}

.md-skin .nav-header .profile-element > a.dropdown-toggle .block {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 焦點環改成適合亮底的組合（section 03 那條是給深色側邊欄用的深色底環）。 */
.md-skin .nav-header a:focus-visible {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #06484b !important;
}


/* ==========================================================================
   09  FOOTER & TOUCH TARGETS
   原本頁尾的快捷連結是 .btn-xs（約 20px 高）— 觸控幾乎點不到。
   改成最小 40px 的點擊區；同時把頁尾垂直內距由 10px 收到 4px，
   整體高度只從 ~42px 變成 ~48px，不會明顯遮住內容。
   ========================================================================== */
#page_footer,
.footer.fixed {
    padding: 4px 16px;
    /* iPhone 底部安全區（僅在版型加了 viewport-fit=cover 時才非 0，目前為 0，
       先寫進去讓日後開啟 cover 時不用回頭改）。 */
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--yt-line);
    background-color: var(--yt-surface);
}

/* 頁尾本體改成 flex 單列 —— 這一步同時修掉一個既有的版面爆炸。
   原本的結構是「.float-right 的連結列 + 一個一般 block 的版權宣告」。連結列
   浮動後寬度是 shrink-to-fit，一旦它吃滿整個可用寬度（英文版最明顯：992px 時
   七個帶標籤的連結需要 755px，可用只有 740px），版權宣告那塊 block 的行框就被
   壓成幾乎 0 寬，「© 國立雲林科技大學 版權所有」被迫一個字一行 —— 實測頁尾
   會從 49px 暴增到 242.73px，整片蓋住畫面下半部。改成 flex 後兩塊各自佔位，
   版權宣告寬度不夠就用刪節號截斷，不會再往下長。 */
#page_footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* 連結列在 markup 裡排在版權宣告之前，用 order 換回「版權在左、連結在右」。 */
#page_footer > .form-inline {
    order: 2;
    flex: 0 1 auto;
    min-width: 0;
    /* nowrap 是頁尾高度可預測的關鍵：空間不足時讓標籤用刪節號縮，
       而不是整排折行把頁尾撐成兩倍高。 */
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
}

#page_footer .btn-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* min-width 同時是「觸控點擊區下限」和「flex 收縮下限」：收到只剩圖示為止。 */
    flex: 0 1 auto;
    min-height: 40px;
    min-width: 40px;
    padding: 6px 10px;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: var(--yt-radius-sm);
    color: var(--yt-ink-600);
    text-decoration: none;
    transition: background-color var(--yt-dur-fast) var(--yt-ease),
                color var(--yt-dur-fast) var(--yt-ease);
}

#page_footer .btn-xs i {
    flex: 0 0 auto;
    font-size: 0.95rem;
}

/* flex item 的自動最小寬度是 min-content，中英文都要顯式歸零才能真的截斷。
   CJK 的 min-content 是「一個字」，不歸零就會退化成一字一行。

   這只是保險絲，正常情況不該看到刪節號：_Footer.cshtml 的文字標籤原本掛
   d-none d-lg-inline（≥992px 顯示），但實測 992px 側邊欄佔掉 220px 後，
   連結列光是中文標籤就要 ~823px、可用只有 725px，英文更長，等於 992～1199px
   這段永遠塞不下。標籤已改掛 d-none d-xl-inline（≥1200px），這段只顯示圖示。 */
#page_footer .btn-xs > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#page_footer .btn-xs:hover,
#page_footer .btn-xs:focus {
    background-color: var(--yt-primary-soft);
    color: var(--yt-primary-active);
    text-decoration: none;
}

#page_footer > .d-none.d-md-block {
    display: flex !important;
    order: 1;
    flex: 0 1 auto;
    margin-right: auto;
    min-width: 0;
    align-items: center;
    min-height: 40px;
    color: var(--yt-ink-500);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    #page_footer > .d-none.d-md-block {
        display: none !important;
    }
}


/* --------------------------------------------------------------------------
   09a  固定頁尾的內容留白（手機遮擋 bug）

   〔問題〕#page_footer 是 position:fixed; bottom:0; z-index:1000，脫離文件流，
   但四個版型的內容容器 #page-wrapper 從來沒有為它預留底部空間。捲到頁面最底
   時，最後一筆內容會被壓在頁尾底下 —— 手機最明顯，因為文字標籤被
   d-none d-xl-inline 收掉後只剩一排圖示，使用者看到的就是「底部按鈕列蓋住
   版面」（例如首頁公告卡的 1 2 3 分頁列點不到）。首頁（FacultyHome 那一類）
   沒有包 .wrapper-content，內容底下只有 .ibox 的 margin，緩衝最薄、最容易中招。

   〔為什麼加在 #page-wrapper〕_Footer 這個 partial 在 _Layout / _Layout_Student
   / _Layout_Visitor / _Layout_Alumni 四個版型裡都是 #page-wrapper 的直接子
   元素，改一處四個版型同時生效，也不必碰 vendor 的 style.css。

   〔留白 64px 的計算依據〕頁尾實際高度 = 上內距 4 + 內容列 40（.btn-xs 的
   min-height，見上方規則）+ 下內距 4 + 上框線 1 = 49px。用真實 markup 疊
   bootstrap/custom/style/本檔的載入順序做 mock，在 360×740 量到 48.73px，
   與計算相符。64 - 49 = 15px 是視覺緩衝，讓最後一筆內容不會「貼」在頁尾上。
   49px 這個數字站得住腳的前提是「頁尾永遠單排」，由上面 flex + nowrap +
   d-xl-inline 那組規則保證；已用 280～1920px × 中英文共 40 組實測驗證高度
   固定在 48.73px。 */
#page-wrapper {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* 窄螢幕把左右內距收窄，讓那排圖示不必縮就能單排放下。
   7 個圖示（教職員/學生最多 7 個）+ 2px gap = 7×40 + 6×2 = 292px；
   桌機的左右內距 16px 會讓總寬變成 324px，在 320px 寬的機型（iPhone SE、
   舊 Android）就塞不下。收到 8px → 292 + 16 = 308px，320px 仍放得下，
   而且點擊區維持 40×40 不縮水。 */
@media (max-width: 575.98px) {
    #page_footer,
    .footer.fixed {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* 極窄機型（摺疊機外螢幕 ~280px）再收一階：7×34 + 8×2 = 254px。
   高度仍是 40px，所以上面的 64px 留白不用跟著改。 */
@media (max-width: 359.98px) {
    #page_footer > .form-inline {
        gap: 0;
    }

    #page_footer .btn-xs {
        min-width: 34px;
        padding-left: 2px;
        padding-right: 2px;
    }
}


/* --------------------------------------------------------------------------
   09b  YuntechApp 下載橫幅（#YuntechAppFooter）

   這條橫幅同樣是 .footer.fixed（bottom:0）且 z-index:5000，等於整片蓋在
   #page_footer 上面 —— 頁尾那排連結在橫幅出現時完全點不到，而且它比頁尾更高，
   遮住的內容更多。改成「疊在頁尾上方」而不是「蓋住頁尾」：bottom 從 0 抬到
   頁尾高度 49px。

   高度也一併鎖成可預測值：改用 flex 單列、關閉按鈕靠右、商店徽章統一 40px 高、
   App 名稱過長時以刪節號截斷（i18n 後的字串長度不可控，CJK 也不能靠 Latin 的
   斷字規則）。橫幅高度 = 上內距 3 + 內容 40 + 下內距 3 + 上框線 1 = 47px。

   顯示與否由 _Footer.cshtml 的 UA 判斷決定，CSS 看不到，所以那支 script 會在
   真的顯示時替 <body> 掛上 .has-app-banner，讓下面這條把留白加到
   49 + 47 = 96，再加 16px 緩衝 = 112px。使用者按叉叉收合後 class 會移除，
   留白自動退回 64px。若 JS 因故沒跑，最差情況就是退回修正前的行為（頁尾本身
   的 64px 留白仍在），不會比現在更糟。 */
#YuntechAppFooter {
    bottom: calc(49px + env(safe-area-inset-bottom, 0px));
}

/* 只針對 .show 狀態設 flex，否則 ID 選擇器會蓋過 bootstrap 的
   .collapse:not(.show){display:none}，使用者就關不掉這條橫幅了。 */
#YuntechAppFooter.show {
    display: flex;
    align-items: center;
    gap: 8px;
}

#YuntechAppFooter > .ml-4 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    /* 原本的 .ml-4（24px）在 flex 單列下太寬，會把徽章擠到沒空間；收成 8px，
       配上元素自帶的 3px inline padding 剛好和頁尾圖示的左內距對齊。 */
    margin-left: 8px !important;
}

#YuntechAppFooter > .ml-4 > strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#YuntechAppFooter > .ml-4 > a {
    flex: 0 0 auto;
    line-height: 0;
}

#YuntechAppFooter > .ml-4 > a > img {
    height: 40px !important;
    width: auto;
}

/* float 在 flex 容器裡不生效，用 order + margin-left:auto 把叉叉推到最右邊。 */
#YuntechAppFooter > .btn {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 40px;
    min-height: 40px;
    padding: 0 8px;
    line-height: 1;
}

#YuntechAppFooter > .btn > i {
    font-size: 1.5rem;
}

body.has-app-banner #page-wrapper {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

/* 右下角浮動 ChatBot（chatbot.css 的 bottom:60px）本來只比單排頁尾高 11px，
   橫幅一疊上來就會被 z-index:5000 蓋掉。橫幅在的時候把它一起往上推。
   chatbot.css 是在 <body> 由 _ChatBot 載入、排在本檔之後，所以這裡靠
   body.has-app-banner 的加權（0,2,1 > 0,1,0）取勝，不用 !important。 */
body.has-app-banner .floating-chat:not(.expand),
body.has-app-banner .ChatBotBtnBg {
    bottom: calc(108px + env(safe-area-inset-bottom, 0px));
}

/* Error.cshtml / AccessDeny.cshtml 是自帶 <head> 的獨立頁，頁首那組 logo 是
   「白色去背圖」，原本是給彩色橫幅用的，放在淺灰底上完全看不見。
   這兩頁的 #MainPageWrapper 是 body 的直接子元素（其他版型都包在
   #wrapper > #page-wrapper 裡），所以下面的選擇器只會命中這兩頁。
   純 CSS 補一塊品牌色底板，不動 view。 */
body.gray-bg > #MainPageWrapper > .row > div > .text-center > a {
    display: inline-flex;
    align-items: center;
    background-color: var(--yt-header-bg);
    padding: 8px 18px;
    border-radius: var(--yt-radius);
    box-shadow: var(--yt-shadow-1);
}

/* 其他小型圖示控制項 — 一併補足點擊區 */
.close {
    min-width: 40px;
    min-height: 40px;
    border-radius: var(--yt-radius-pill);
    opacity: 0.6;
    transition: background-color var(--yt-dur-fast) var(--yt-ease),
                opacity var(--yt-dur-fast) var(--yt-ease);
}

.close:hover {
    opacity: 1;
    background-color: rgba(31,42,55,0.06);
}


/* ==========================================================================
   10  ALERTS / TOASTS / BADGES
   ========================================================================== */
.alert {
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--yt-radius);
    padding: 12px 16px;
    box-shadow: var(--yt-shadow-1);
    line-height: 1.65;
}

.alert-warning {
    background-color: #fff8e8;
    border-color: #f2d18a;
    border-left-color: #e0a02c;
    color: #6b4c07;
}

.alert-danger {
    background-color: #fdeeef;
    border-color: #f3bfc3;
    border-left-color: var(--yt-danger);
    color: #7d1f27;
}

.alert-success {
    background-color: #ebf8f4;
    border-color: #b8e5d8;
    border-left-color: var(--yt-success);
    color: #14513f;
}

.alert-info {
    background-color: var(--yt-primary-softer);
    border-color: #b7e0e2;
    border-left-color: var(--yt-primary);
    color: #0a4a4e;
}

.alert .close {
    min-width: 40px;
    min-height: 40px;
}

/* toastr 的 CSS 是在 <body> 由 _Messages 動態載入的，會排在本檔之後，
   因此這裡必須用 !important 才蓋得過去（僅限外觀，不影響行為）。 */
#toast-container > div {
    border-radius: var(--yt-radius) !important;
    box-shadow: var(--yt-shadow-3) !important;
    opacity: 0.97 !important;
    padding: 14px 16px 14px 50px !important;
    font-family: var(--yt-font) !important;
    line-height: 1.6 !important;
}

.badge {
    border-radius: var(--yt-radius-pill);
    font-family: var(--yt-font);
    font-weight: 600;
}

.label {
    border-radius: var(--yt-radius-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
}


/* ==========================================================================
   11  KENDO — 安全範圍的微調
   只動「外框圓角 / 表頭字重 / 斑馬紋 / hover 底色」這類純視覺屬性，
   不碰 padding、line-height、height —— 那些會影響 Kendo 的列高計算與虛擬捲動。
   ========================================================================== */
.k-grid {
    border-radius: var(--yt-radius);
    border-color: var(--yt-line);
    font-family: var(--yt-font);
}

.k-grid .k-grid-header th.k-header,
.k-grid .k-grid-header .k-link {
    color: var(--yt-ink-700);
    font-weight: 600;
}

.k-grid tbody tr.k-alt {
    background-color: var(--yt-surface-2);
}

.k-grid tbody tr:hover,
.k-grid tbody tr.k-alt:hover {
    background-color: var(--yt-primary-softer);
}

.k-widget,
.k-textbox,
.k-button {
    font-family: var(--yt-font);
}


/* ==========================================================================
   12  SCROLLBARS & MOTION
   ========================================================================== */
/* 側邊欄（深底）— 細捲軸 */
.navbar-static-side,
#side-menu,
.sidebar-container {
    scrollbar-width: thin;
    scrollbar-color: #56697d transparent;
}

.navbar-static-side::-webkit-scrollbar,
#side-menu::-webkit-scrollbar,
.sidebar-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.navbar-static-side::-webkit-scrollbar-track,
#side-menu::-webkit-scrollbar-track,
.sidebar-container::-webkit-scrollbar-track {
    background: transparent;
}

.navbar-static-side::-webkit-scrollbar-thumb,
#side-menu::-webkit-scrollbar-thumb,
.sidebar-container::-webkit-scrollbar-thumb {
    background-color: #56697d;
    border-radius: var(--yt-radius-pill);
}

.navbar-static-side::-webkit-scrollbar-thumb:hover,
#side-menu::-webkit-scrollbar-thumb:hover,
.sidebar-container::-webkit-scrollbar-thumb:hover {
    background-color: #6c8098;
}

/* 卡片內部（淺底）的捲動區 */
.ibox-content {
    scrollbar-width: thin;
    scrollbar-color: #c4ccd3 transparent;
}

.ibox-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.ibox-content::-webkit-scrollbar-thumb {
    background-color: #c4ccd3;
    border-radius: var(--yt-radius-pill);
}

.ibox-content::-webkit-scrollbar-thumb:hover {
    background-color: #a9b3bc;
}

/* 尊重系統的「減少動態效果」設定 */
@media (prefers-reduced-motion: reduce) {
    .ibox,
    .btn,
    .form-control,
    .nav > li > a,
    #page_footer .btn-xs,
    .ibox-content .list-group-item {
        transition: none !important;
    }
}