/* =====================================================================
   NTUST 學雜費管理系統 - 全域樣式
   設計來源：/DESIGN.md（Linear, Light-adapted）
   - 唯一 accent：薰衣草紫 #5e6ad2（不引入第二強調色）
   - 字體：Inter / Noto Sans TC（_Host.cshtml 載入）
   - 形狀：卡片 12px、按鈕 8px；用 1px hairline 取代 shadow 分層
   ===================================================================== */

/* ---------- 1. 設計 token（CSS variables）---------- */
:root {
    /* Linear 紫 accent ladder */
    --ds-primary:        #5e6ad2;
    --ds-primary-hover:  #4d57b8;
    --ds-primary-soft:   #eceeff;
    --ds-primary-soft-2: #f5f6ff;
    --ds-on-primary:     #ffffff;

    /* Ink ladder */
    --ds-ink:            #18191c;
    --ds-ink-muted:      #3a3d44;
    --ds-ink-subtle:     #6b7280;
    --ds-ink-tertiary:   #9aa0a8;

    /* Surface ladder */
    --ds-canvas:         #fafafa;
    --ds-surface-1:      #ffffff;
    --ds-surface-2:      #f5f6f7;
    --ds-hairline:       #e7e8eb;
    --ds-hairline-strong:#d4d6db;

    /* Semantic */
    --ds-success:        #1b8a3a;
    --ds-success-soft:   #e6f4ea;
    --ds-warn:           #b76e00;
    --ds-warn-soft:      #fff4e0;
    --ds-danger:         #c0392b;

    /* Shape */
    --ds-r-sm: 6px;
    --ds-r-md: 8px;
    --ds-r-lg: 12px;
    --ds-r-xl: 16px;
    --ds-r-pill: 9999px;

    /* Spacing (4px base) */
    --ds-s-xxs: 4px;
    --ds-s-xs:  8px;
    --ds-s-sm:  12px;
    --ds-s-md:  16px;
    --ds-s-lg:  24px;
    --ds-s-xl:  32px;

    /* Type */
    --ds-font-text:    "Inter", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    --ds-font-display: "Inter", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    --ds-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------- 2. 全域字型 + 平滑 ---------- */
html, body {
    font-family: var(--ds-font-text);
    background: var(--ds-canvas);
    color: var(--ds-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.05px;
}

/* ---------- 3. MudBlazor 全域覆寫 ---------- */
/* AppBar：白底 + 1px hairline 取代 shadow */
.mud-appbar.mud-elevation-1,
.mud-appbar.mud-elevation-4 {
    box-shadow: none !important;
    border-bottom: 1px solid var(--ds-hairline);
}
.mud-appbar {
    color: var(--ds-ink) !important;
}

/* Drawer：去 shadow 改 hairline */
.mud-drawer {
    box-shadow: none !important;
    border-right: 1px solid var(--ds-hairline) !important;
}
.mud-drawer-content { overflow-y: auto !important; }
.mud-drawer-header { padding-bottom: 8px; }

/* NavLink：active 用淡紫底 + 紫字（不再藍色橫條） */
.mud-nav-link {
    border-radius: var(--ds-r-sm);
    margin: 2px 8px;
    padding: 6px 12px !important;
    font-size: 13px;
}
.mud-nav-link:hover {
    background-color: var(--ds-surface-2) !important;
}
.mud-nav-link.active {
    background-color: var(--ds-primary-soft) !important;
    color: var(--ds-primary) !important;
    font-weight: 500;
}
.mud-nav-link.active .mud-icon-root {
    color: var(--ds-primary) !important;
}
.mud-nav-link.mud-nav-link-disabled { opacity: 0.5; }

/* Paper / Card：圓角 12 + hairline；shadow 拿掉，改細線分區 */
.mud-paper {
    border-radius: var(--ds-r-lg) !important;
    border: 1px solid var(--ds-hairline);
}
.mud-paper.mud-elevation-0 { border: none; }
.mud-paper.mud-elevation-1,
.mud-paper.mud-elevation-2,
.mud-paper.mud-elevation-3,
.mud-paper.mud-elevation-4 {
    box-shadow: none !important;
}

/* Buttons：8px rounded、不大寫、padding 收緊 */
.mud-button-root {
    border-radius: var(--ds-r-md) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    min-height: 32px;
}
.mud-button-filled.mud-button-filled-primary {
    box-shadow: none !important;
}
.mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--ds-primary-hover) !important;
    box-shadow: none !important;
}
.mud-button-outlined {
    border-color: var(--ds-hairline-strong) !important;
}
.mud-button-outlined:hover {
    background-color: var(--ds-surface-2) !important;
}

/* Inputs：8px rounded */
.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--ds-r-md) !important;
}

/* Progress bar：紫色漸層 + pill */
.mud-progress-linear {
    border-radius: var(--ds-r-pill) !important;
    overflow: hidden;
}
.mud-progress-linear .mud-progress-linear-bar {
    background-color: var(--ds-primary) !important;
}

/* Table：行高放大 + hairline
   投影機是 1280x720 —— MudBlazor 預設的 14px 在大螢幕後排看很吃力。
   15px 幅度刻意保守：這是每天要看八小時的行政系統，放太大反而難用。
   （這段註解原本就在，但底下只有邊框規則，字級與列高其實從來沒被放大過。） */
.mud-table-root .mud-table-row {
    border-bottom: 1px solid var(--ds-hairline);
}
.mud-table-root .mud-table-cell {
    border-bottom: none !important;
    font-size: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.mud-table-root .mud-table-head .mud-table-cell {
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-ink-subtle);
}

/* Dialog：圓角 16 */
.mud-dialog {
    border-radius: var(--ds-r-xl) !important;
}

/* Chip：pill */
.mud-chip { border-radius: var(--ds-r-pill) !important; }

/* ---------- 4. 設計專屬輔助 class（給頁面用）---------- */

/* 頁首：eyebrow + title + actions */
.ds-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ds-s-md);
    margin-bottom: var(--ds-s-lg);
    flex-wrap: wrap;
}
.ds-page-eyebrow {
    color: var(--ds-ink-subtle);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}
.ds-page-title {
    font-family: var(--ds-font-display);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.6px;
    line-height: 1.2;
    color: var(--ds-ink);
    margin: 0;
}
.ds-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* KPI 卡片容器：給右上角 icon tile 預留絕對定位空間，並穩定卡片高度讓四張對齊 */
.ds-kpi-card {
    position: relative;
    min-height: 156px;
    display: flex;
    flex-direction: column;
}

/* Eyebrow（小標）— 比卡片其他元素小、加正字距讓它讀起來像「分類標籤」 */
.ds-kpi-eyebrow {
    color: var(--ds-ink-subtle);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
    margin-bottom: 8px;
}

/* KPI 主數字：dashboard 主角，40px / 600 / 強負字距 */
.ds-kpi-value {
    font-family: var(--ds-font-display);
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -1.0px;
    line-height: 1.1;
    color: var(--ds-ink);
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}
.ds-kpi-value .ds-currency {
    font-size: 14px;
    color: var(--ds-ink-subtle);
    font-weight: 500;
}
.ds-kpi-foot {
    margin-top: 20px;
    color: var(--ds-ink-tertiary);
    font-size: 12px;
    font-weight: 400;
}
.ds-kpi-value.is-success { color: var(--ds-success); }
.ds-kpi-value.is-warn    { color: var(--ds-warn); }

/* 主應收 KPI 卡 — 用淡紫漸層底凸顯，不再用左色條 */
.ds-kpi-card-accent {
    background: linear-gradient(180deg, var(--ds-primary-soft-2), var(--ds-surface-1) 60%) !important;
    border-color: rgba(94, 106, 210, 0.35) !important;
}

/* Icon tile：右上角浮貼 40×40 圓角色塊，配對語意色 */
.ds-kpi-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: var(--ds-r-md);
    display: grid;
    place-items: center;
    background: var(--ds-primary-soft);
    color: var(--ds-primary);
}
.ds-kpi-icon .mud-icon-root { font-size: 20px; }

.ds-kpi-icon.is-neutral { background: var(--ds-surface-2);     color: var(--ds-ink-muted); }
.ds-kpi-icon.is-primary { background: var(--ds-primary-soft);  color: var(--ds-primary); }
.ds-kpi-icon.is-success { background: var(--ds-success-soft);  color: var(--ds-success); }
.ds-kpi-icon.is-warn    { background: var(--ds-warn-soft);     color: var(--ds-warn); }

/* 狀態 pill */
.ds-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--ds-r-pill);
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
}
.ds-pill-success {
    background: var(--ds-success-soft);
    color: #1b6e34;
}
.ds-pill-success .ds-dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: var(--ds-success);
}
.ds-pill-mono {
    background: var(--ds-surface-2);
    color: var(--ds-ink-muted);
    font-family: var(--ds-font-mono);
    font-size: 11px;
    border: 1px solid var(--ds-hairline);
}

/* Sidebar eyebrow（給 NavMenu 分組標題） */
.ds-nav-eyebrow {
    color: var(--ds-ink-tertiary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 8px 16px 4px;
    margin: 0;
}

/* ---------- 5. Blazor 錯誤 UI（保留）---------- */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ==========================================================================
   Copilot 右側面板
   刻意不用右下角氣泡：投影機可讀性 + 「並肩工作」的語意 + 答案與資料並排。
   ========================================================================== */

/* 啟動鈕必須讓開 feedback widget 的兩顆 FAB：
   .fab       bottom:24px  高 52px → 佔 24–76px
   .fab-inbox bottom:88px  高 44px → 佔 88–132px
   因此最低要從 132px 之上開始，取 148px 留 16px 間距。 */
.copilot-launcher {
    position: fixed;
    right: 24px;
    bottom: 148px;
    z-index: 1200;
}

.copilot-panel {
    position: fixed;
    top: 64px;              /* AppBar 高度 */
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 92vw;
    background: #fff;
    border-left: 1px solid var(--ds-hairline, #e6e6e9);
    box-shadow: -8px 0 32px rgba(0, 0, 0, .06);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    z-index: 1201;
}

.copilot-panel.copilot-open { transform: translateX(0); }

/* Copilot 面板開啟時，整個隱藏 feedback widget。
   不是「往左推」而是「隱藏」的三個理由：
   1. feedback widget 掛在 Shadow DOM（host = #__ntust-feedback-host），
      外部 CSS 無法選到內部的 .fab，推不動
   2. 它的 z-index 是 2147483640+，遠高於本面板，抽屜會整個蓋住 Copilot
   3. 兩者的使用者本來就不同 —— feedback 是客戶審查 mockup 用，
      Copilot 是承辦人做事用，不會同時使用
   host 在 light DOM，隱藏它會連同整個 shadow tree 一起消失。 */
body:has(.copilot-open) #__ntust-feedback-host { display: none !important; }

.copilot-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ds-hairline, #e6e6e9);
    flex: 0 0 auto;
}

.copilot-avatar {
    width: 30px; height: 30px; border-radius: 8px;
    background: linear-gradient(135deg, #5e6ad2, #828fff);
    color: #fff; display: grid; place-items: center; font-size: 14px;
}

.copilot-body { flex: 1 1 auto; overflow-y: auto; padding: 16px; }

.copilot-empty { text-align: center; padding: 32px 8px; color: var(--ds-ink-muted, #6b6b76); }

.copilot-suggest {
    display: block; width: 100%; text-align: left;
    margin: 6px 0; padding: 10px 12px;
    font-size: 13px; line-height: 1.5;
    background: #f7f7f9; border: 1px solid var(--ds-hairline, #e6e6e9);
    border-radius: 8px; cursor: pointer; color: var(--ds-ink, #1a1a1f);
    transition: background .12s, border-color .12s;
}
.copilot-suggest:hover { background: #f0f0ff; border-color: #5e6ad2; }

.copilot-turn { margin-bottom: 16px; }
.copilot-user { display: flex; justify-content: flex-end; }

.copilot-bubble-user {
    background: #5e6ad2; color: #fff;
    padding: 9px 13px; border-radius: 14px 14px 4px 14px;
    max-width: 85%; font-size: 14px; line-height: 1.55;
}

.copilot-bubble-assistant {
    font-size: 14px; line-height: 1.65; color: var(--ds-ink, #1a1a1f);
}

/* tool 執行狀態列 —— 讓 tool calling 可見，這在 demo 時本身就是賣點 */
.copilot-activity {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--ds-ink-subtle, #8a8a95);
    background: #f7f7f9; border-radius: 6px;
    padding: 5px 9px; margin-bottom: 6px; width: fit-content;
}
.copilot-activity-declined { color: #b45309; background: #fef3c7; }

.copilot-caret {
    display: inline-block; width: 2px; height: 14px;
    background: #5e6ad2; margin-left: 2px; vertical-align: text-bottom;
    animation: copilot-blink 1s steps(2) infinite;
}
@keyframes copilot-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* L2 確認卡片 —— agent loop 在此暫停 */
.copilot-confirm {
    border: 1px solid #f0b429; background: #fffbeb;
    border-radius: 10px; padding: 13px; margin: 8px 0 16px;
}
.copilot-confirm-title {
    display: flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: 14px; color: #92400e; margin-bottom: 6px;
}
.copilot-confirm-summary { font-size: 13.5px; color: var(--ds-ink, #1a1a1f); margin-bottom: 8px; }
.copilot-confirm-details {
    margin: 0 0 12px; padding-left: 18px;
    font-size: 12.5px; color: var(--ds-ink-muted, #6b6b76); line-height: 1.65;
}
.copilot-confirm-actions { display: flex; gap: 8px; }

.copilot-footer {
    display: flex; align-items: center; gap: 4px;
    padding: 10px 12px; border-top: 1px solid var(--ds-hairline, #e6e6e9);
    flex: 0 0 auto;
}
.copilot-footer .mud-input-control { flex: 1 1 auto; }

@media (max-width: 700px) {
    .copilot-panel { width: 100vw; max-width: 100vw; }
}

/* 建議問句 chips —— 常駐在輸入框上方，demo 時連續問三題不用重整 */
.copilot-chips {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 10px 12px 0;
    flex: 0 0 auto;
}
.copilot-chip {
    flex: 1 1 auto;
    padding: 7px 10px;
    font-size: 12px; line-height: 1.3;
    background: #f7f7f9;
    border: 1px solid var(--ds-hairline, #e6e6e9);
    border-radius: 999px;
    cursor: pointer;
    color: var(--ds-ink, #1a1a1f);
    white-space: nowrap;
    transition: background .12s, border-color .12s;
}
.copilot-chip:hover:not(:disabled) { background: #f0f0ff; border-color: #5e6ad2; }
.copilot-chip:disabled { opacity: .45; cursor: default; }

/* ============================================================
   導覽模式（demo-tour.js）

   注意：遮罩的 position / background / z-index / display 一律由 JS 寫成
   inline style，這裡不要再訂。實測包在共用外層 div 裡時半透明底色不會被繪製，
   因此那幾個元素改為各自直接掛在 body 下、樣式由 JS 完全掌控。
   這一段只負責「看起來長怎樣」。
   ============================================================ */

.tour-ring {
    border: 2px solid #5e6ad2;
    border-radius: 8px;
    box-shadow: 0 0 0 3px rgba(94, 106, 210, .28);
    transition: top .12s ease, left .12s ease, width .12s ease, height .12s ease;
}

.tour-tip {
    width: min(400px, calc(100vw - 24px));
    background: #fff;
    border: 1px solid var(--ds-hairline, #e7e8eb);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(12, 13, 18, .28);
    padding: 16px 18px 12px;
    font-family: var(--ds-font-text, system-ui, sans-serif);
}
.tour-tip-title {
    font-size: 15px; font-weight: 600; line-height: 1.35;
    color: var(--ds-ink, #18191c); margin-bottom: 6px;
}
.tour-tip-body {
    font-size: 13.5px; line-height: 1.75;
    color: var(--ds-ink-muted, #3a3d44);
}
.tour-tip-act {
    margin-top: 10px; padding: 8px 10px;
    background: var(--ds-primary-soft, #eceeff);
    border-radius: 8px;
    font-size: 13px; font-weight: 500;
    color: var(--ds-primary-hover, #4d57b8);
}
.tour-tip-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 14px; padding-top: 10px;
    border-top: 1px solid var(--ds-hairline, #e7e8eb);
}
.tour-count {
    font-family: var(--ds-font-mono, monospace);
    font-size: 12px; color: var(--ds-ink-tertiary, #9aa0a8);
    font-variant-numeric: tabular-nums;
}
.tour-btns { display: flex; gap: 6px; }
.tour-btn {
    border: 1px solid var(--ds-hairline-strong, #d4d6db);
    background: #fff; color: var(--ds-ink-muted, #3a3d44);
    border-radius: 7px; padding: 6px 12px;
    font-size: 13px; font-family: inherit; cursor: pointer;
    transition: background .12s, border-color .12s;
}
.tour-btn:hover:not(:disabled) { background: var(--ds-surface-2, #f5f6f7); }
.tour-btn:disabled { opacity: .4; cursor: default; }
.tour-next {
    background: var(--ds-primary, #5e6ad2);
    border-color: var(--ds-primary, #5e6ad2);
    color: #fff; font-weight: 500;
}
.tour-next:hover:not(:disabled) { background: var(--ds-primary-hover, #4d57b8); }

/* 找不到目標時的降級樣式 —— 提示框置中，並說明還能繼續。
   業務在台上絕不能卡住。 */
.tour-tip.is-lost::after {
    content: "找不到這一步要指的畫面，可能是資料還沒載入或頁面不同。按「下一步」可以繼續。";
    display: block;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--ds-hairline-strong, #d4d6db);
    font-size: 12px; line-height: 1.6;
    color: var(--ds-warn, #b76e00);
}

/* AppBar 上的開關 */
.tour-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--ds-hairline-strong, #d4d6db);
    background: #fff; color: var(--ds-ink-muted, #3a3d44);
    border-radius: 999px; padding: 5px 13px;
    font-size: 12.5px; font-family: inherit; cursor: pointer;
    white-space: nowrap; margin-right: 12px;
    transition: background .12s, border-color .12s, color .12s;
}
.tour-toggle:hover { background: var(--ds-primary-soft-2, #f5f6ff); border-color: var(--ds-primary, #5e6ad2); }
.tour-toggle.is-on {
    background: var(--ds-primary, #5e6ad2);
    border-color: var(--ds-primary, #5e6ad2);
    color: #fff;
}

/* 導覽進行中把 feedback widget 藏起來 —— 少一顆按鈕少一次誤點 */
body.tour-on #__ntust-feedback-host { display: none !important; }

/* 下一步在別頁、但只能靠點畫面過去（批次詳情 / 計算明細的網址帶 ID，
   導覽不知道要導去哪一筆）。把提示做得比一般的「請點」更醒目。 */
.tour-tip.is-blocked .tour-tip-act {
    background: var(--ds-warn-soft, #fff4e0);
    color: var(--ds-warn, #b76e00);
}

/* Demo 重點面板：MudAlert 的訊息容器預設是收縮寬度（實測 960px 的框裡只有 159px），
   MudSpacer 因此推不開，收合時「展開」會黏在標題後面。撐開它才對得整齊。 */
.demo-banner .mud-alert-message {
    flex: 1 1 auto;
    width: 100%;
}

/* ============================================================
   登入前的兩頁（/gate 與 /Account/Login）共用的底
   ------------------------------------------------------------
   為什麼要有這個：觀眾看到的順序是
   /intro（深色＋紫）→ /gate → 登入頁 → app（淺色＋紫）。
   這兩頁原本是藍色漸層，是全場唯一「不像同一套系統」的地方。
   改成深色＋紫，正好接住 /intro 的收尾。

   背景分兩層：**先是純 CSS 漸層，再疊一張抽象背景圖**。
   圖沒載到、離線放映、或現場覺得 AI 味太重想拿掉時，
   把 background-image 整行註解掉畫面照樣完整 —— 不要讓放映依賴一個檔案。
   ============================================================ */
body.auth-bg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin: 0;

    background-color: #0f1016;
    /* 第一層（上）＝半透明漸層，第二層（下）＝背景圖。
       順序不能反：圖是不透明的，放上面會把漸層蓋掉。 */
    background-image:
        radial-gradient(ellipse 80% 60% at 20% 15%, rgba(94, 106, 210, .38), transparent 60%),
        radial-gradient(ellipse 70% 50% at 85% 85%, rgba(130, 143, 255, .22), transparent 65%),
        url('/img/auth-bg.webp');
    background-size: auto, auto, cover;
    background-position: center, center, center;
    background-repeat: no-repeat;
}