/* ═══════════════════════════════════════════════════════════════════
   MQT 主視覺主題(霧墨藍)— 單一主題檔
   ─────────────────────────────────────────────────────────────────────
   結構(由上而下):
     1. :root --mq-* 色票      ← 全站唯一色值定義點,換主題只改這區
     2. 全站 body 級元件        SweetAlert2 按鈕 / 數字鍵盤確定鍵
                               (popup 掛在 body 下,吃不到頁面 scope)
     3. 考試/練習作答頁         scope = #pageBodyLayout
     4. 監場系統               scope = body.layout-fixed(監場 layout 專屬)
   載入:三個 layout 皆於 vnstyle.css 之後載入本檔。
   設計對照:docs/superpowers/specs/2026-07-03-exam-slate-blue-theme-design.md
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. 色票 ── */
:root {
    --mq-primary: #567a99;         /* 板岩藍:主按鈕/題型badge/選取色/計算機鈕/swal確認 */
    --mq-primary-hover: #46688a;
    --mq-danger: #c07a6f;          /* 霧紅:危險按鈕 */
    --mq-danger-hover: #a9695f;
    --mq-success: #31acb1;         /* teal 綠:成功/確定/儲存鈕、小畫家鈕(2026-07-07 使用者定案,取自 .icon.pin 配色;原霧綠 #5e8f7e 太淡) */
    --mq-success-hover: #28959a;
    --mq-secondary: #8a9299;       /* 霧灰:次要按鈕/swal取消 */
    --mq-secondary-hover: #767f86;
    --mq-badge-stem: #b56f63;      /* 題幹 badge 紅棕 */
    --mq-badge-sec: #9aa0a6;       /* 題號/題組 badge */
    --mq-text: #313a42;            /* 主文字 */
    --mq-notice: #b5695c;          /* 注意事項/等待提示紅棕 */
    --mq-header-bg: #e7ecf1;       /* 考生資訊標頭淡藍底 */
    --mq-header-text: #2c3a46;
    --mq-border: #d3d1c9;          /* 輸入框/下拉邊框暖灰 */
    --mq-border-cool: #cfd6de;     /* 標頭外框/欄位分隔冷灰 */
    --mq-pane-pdf: #ffffff;        /* 正式考試 PDF 欄底(純白,2026-07-16 試行:暖米偏黃、冷灰撞標頭、純灰嫌醜,改試白底) */
    --mq-pane-answer: #f7f7f7;     /* 正式考試作答欄底(近白微灰,留一絲灰讓白色作答格不至於消失) */
    --mq-pane-practice: #f6f1d9;   /* 練習模式底(淡奶油黃) */
    --mq-divider: #cdcbc3;         /* 題目間分隔線 */
    --mq-brand-orange: #d03500;    /* 品牌主標橘紅(取樣自官方banner) */
    --mq-brand-orange-dark: #a12b00;
    --mq-brand-dark: #282828;      /* 品牌副標近黑 */
}

/* SweetAlert2 按鈕全站統一主題色(單一設定點)。
   swal 容器掛在 body 下,吃不到頁面容器前綴;放在 vnstyle.css(三個 layout
   都載入)→ 考試/練習/預覽/監場的所有 swal 按鈕一律霧墨藍,不必逐頁設定。
   !important 是必要的:SweetAlert2 會把按鈕色以 inline style 寫在元素上。 */
.swal2-styled.swal2-confirm {
    background-color: var(--mq-primary) !important;
}

    .swal2-styled.swal2-confirm:hover {
        background-color: var(--mq-primary-hover) !important;
    }

    .swal2-styled.swal2-confirm:focus {
        box-shadow: 0 0 0 3px rgba(86, 122, 153, .35) !important;
    }

.swal2-styled.swal2-cancel {
    background-color: var(--mq-secondary) !important;
}

    .swal2-styled.swal2-cancel:hover {
        background-color: var(--mq-secondary-hover) !important;
    }

/* 數字鍵盤(jquery.keypad,popup 掛 body 下)「確定」鍵與結束練習/危險鈕同色。
   只改背景、不動 border —— 其他鍵的黑框是瀏覽器原生 button 邊框(庫沒設),
   蓋掉 border-color 會讓確定看起來沒有外框、跟同排不一致 */
.keypad-popup .keypad-close {
    background: var(--mq-danger);
    color: #fff;
}

    .keypad-popup .keypad-close:hover {
        background: var(--mq-danger-hover);
    }

/* 試卷預覽「試卷編號」方塊(③④ 試卷預覽 partial 作答區右上):
   淡藍底+板岩藍框+深藍字,對齊考生資訊標頭語彙;原 text-muted 小字太不明顯(2026-07-16 使用者回饋) */
.paper-no-badge {
    display: inline-block;
    padding: .25rem .75rem;
    background-color: var(--mq-header-bg);
    border: 1px solid var(--mq-primary);
    border-radius: .375rem;
    color: var(--mq-header-text);
    font-weight: 600;
}

/* ═══ 監場系統按鈕/彈窗跟隨霧墨藍主題(scope=body.layout-fixed)═══
   scope 用監場 layout 專屬的 body class(不能用 .app-wrapper —— 違規處理等
   modal 定義在 wrapper「外面」會套不到)。專案 Bootstrap 為 5.1(按鈕尚未
   變數化,--bs-btn-* 無效),故直接覆寫屬性+偽類,與考試端主題同款寫法;
   色值一律引用上方 --mq-* 色票。舊 Bootstrap3 皮膚殘留的按鈕規則
   (vnstyle-supervision.css 的 #5cb85c/#607D8B)已一併清除。 */
body.layout-fixed .btn {
    border-radius: 8px; /* 與考試端一致(蓋掉本檔全域 .btn{border-radius:0}) */
}

body.layout-fixed .btn-primary,
body.layout-fixed .btn-primary:focus {
    background-color: var(--mq-primary);
    border-color: var(--mq-primary);
    color: #fff;
}

    body.layout-fixed .btn-primary:hover,
    body.layout-fixed .btn-primary:active {
        background-color: var(--mq-primary-hover);
        border-color: var(--mq-primary-hover);
        color: #fff;
    }

body.layout-fixed .btn-success,
body.layout-fixed .btn-success:focus {
    background-color: var(--mq-success);
    border-color: var(--mq-success);
    color: #fff;
}

    body.layout-fixed .btn-success:hover,
    body.layout-fixed .btn-success:active {
        background-color: var(--mq-success-hover);
        border-color: var(--mq-success-hover);
        color: #fff;
    }

body.layout-fixed .btn-danger,
body.layout-fixed .btn-danger:focus {
    background-color: var(--mq-danger);
    border-color: var(--mq-danger);
    color: #fff;
}

    body.layout-fixed .btn-danger:hover,
    body.layout-fixed .btn-danger:active {
        background-color: var(--mq-danger-hover);
        border-color: var(--mq-danger-hover);
        color: #fff;
    }

body.layout-fixed .btn-secondary,
body.layout-fixed .btn-secondary:focus {
    background-color: var(--mq-secondary);
    border-color: var(--mq-secondary);
    color: #fff;
}

    body.layout-fixed .btn-secondary:hover,
    body.layout-fixed .btn-secondary:active {
        background-color: var(--mq-secondary-hover);
        border-color: var(--mq-secondary-hover);
        color: #fff;
    }

body.layout-fixed .btn-outline-primary {
    color: var(--mq-primary);
    border-color: var(--mq-primary);
}

    body.layout-fixed .btn-outline-primary:hover,
    body.layout-fixed .btn-outline-primary:active {
        background-color: var(--mq-primary);
        border-color: var(--mq-primary);
        color: #fff;
    }

/* 監場首頁標頭資訊 pills(日期/場地/梯次/場次):原 Bootstrap bg-success 綠
   → 板岩藍跟隨主題(2026-07-16)。不動 .bg-success 全域 —— 「已登入」狀態徽章仍要綠 */
body.layout-fixed .sup-header-pill {
    background-color: var(--mq-primary);
}

/* 彈窗標題列:淡藍底 + 板岩藍底線(呼應考試端標頭/等待卡風格) */
body.layout-fixed .modal-header {
    background-color: var(--mq-header-bg);
    border-bottom: 2px solid var(--mq-primary);
    color: var(--mq-header-text);
}


/* ═══════════════════════════════════════════════════════════════════
   考場作答頁「霧墨藍」配色（2026-07-03）
   全部以 #pageBodyLayout 前綴 → 只作用於 Exam / PracticeExam 作答流程,
   不影響 登入(_MinimalLayout) / 監場(_SupervisionLayout) / QB·FM 預覽 / admin。
   設計: docs/superpowers/specs/2026-07-03-exam-slate-blue-theme-design.md
   ═══════════════════════════════════════════════════════════════════ */

/* 作答區背景(2026-07-16 使用者校準,第三輪:白底試行):
   正式=白底(PDF 欄 #ffffff / 作答欄 #f7f7f7)。歷程:7/6 暖米 #f2f1ec/#eeece6
   偏黃與練習難分 → 7/3 spec 冷灰 #edf0f3/#e7ebef 與標頭淡藍 #e7ecf1 撞色 →
   改版前純灰 #f0f0f0/#e0e0e0 使用者覺得不好看 → 試白底。
   分隔線維持原黑色細線(不覆寫)。
   練習=維持黃色系但調淡(原 #F0E68C99 卡其黃 → 淡奶油黃) */
#pageBodyLayout .left-block  { background-color: var(--mq-pane-pdf); }
#pageBodyLayout .right-block { background-color: var(--mq-pane-answer); }
#pageBodyLayout .practice-bg { background-color: var(--mq-pane-practice) !important; } /* 練習模式(未被 JS 移除 .practice-bg 時) */

/* 考生資訊標頭:白 → 淡藍底 + 板岩藍底線 + 深藍字 + 柔外框 */
#pageBodyLayout .trytopnav-level-b,
#pageBodyLayout .trytopnav-level-c { background-color: var(--mq-header-bg); }
#pageBodyLayout .trytopnav {
    border-color: var(--mq-border-cool);
    border-bottom: 2px solid var(--mq-primary);
    color: var(--mq-header-text);
}

/* Badge:題型/題幹/題號 → 霧墨藍色系(蓋 Bootstrap .bg-* 的 !important) */
#pageBodyLayout .badge.bg-primary   { background-color: var(--mq-primary) !important; }
#pageBodyLayout .badge.bg-danger    { background-color: var(--mq-badge-stem) !important; }
#pageBodyLayout .badge.bg-secondary { background-color: var(--mq-badge-sec) !important; }

/* 按鈕:霧墨藍 + 圓角 8px(蓋 vnstyle 的 .btn{border-radius:0}) */
#pageBodyLayout .btn { border-radius: 8px; }
#pageBodyLayout .btn-primary,
#pageBodyLayout .btn-primary:focus  { background-color: var(--mq-primary); border-color: var(--mq-primary); color: #fff; }
#pageBodyLayout .btn-primary:hover,
#pageBodyLayout .btn-primary:active { background-color: var(--mq-primary-hover); border-color: var(--mq-primary-hover); color: #fff; }
#pageBodyLayout .btn-danger,
#pageBodyLayout .btn-danger:focus   { background-color: var(--mq-danger); border-color: var(--mq-danger); color: #fff; }
#pageBodyLayout .btn-danger:hover,
#pageBodyLayout .btn-danger:active  { background-color: var(--mq-danger-hover); border-color: var(--mq-danger-hover); color: #fff; }
#pageBodyLayout .btn-success,
#pageBodyLayout .btn-success:focus  { background-color: var(--mq-success); border-color: var(--mq-success); color: #fff; }
#pageBodyLayout .btn-success:hover,
#pageBodyLayout .btn-success:active { background-color: var(--mq-success-hover); border-color: var(--mq-success-hover); color: #fff; }
#pageBodyLayout .btn-secondary,
#pageBodyLayout .btn-secondary:focus  { background-color: var(--mq-secondary); border-color: var(--mq-secondary); color: #fff; }
#pageBodyLayout .btn-secondary:hover,
#pageBodyLayout .btn-secondary:active { background-color: var(--mq-secondary-hover); border-color: var(--mq-secondary-hover); color: #fff; }

/* 單選/複選:選取色 → 霧墨藍 */
#pageBodyLayout .right-block input[type="radio"],
#pageBodyLayout .right-block input[type="checkbox"] { accent-color: var(--mq-primary); }

/* 題目間 2px 黑分隔線 → 柔化板岩灰(蓋 inline border 顏色) */
#pageBodyLayout .quest hr { border-color: var(--mq-divider) !important; }