/*
 * 共用元件：身分證辨識彈窗樣式
 *
 * 用途：第一層「是否要進行『身分認證』?」彈窗第四顆【使用身分證】按鈕（由 idcard-recognize.js
 *       的 addSwalButton() 插入）樣式。SweetAlert2(v11) 的白字／字級／圓角／hover／焦點光暈
 *       只寫在 .swal2-confirm／.swal2-deny／.swal2-cancel 三個變體規則，button:where(.swal2-styled)
 *       本身沒有 color，所以只掛 swal2-styled 會落到瀏覽器預設黑字、方角、字級小一號；
 *       第四顆與 deny 鈕的樣式因此改由本檔另外補齊。
 * 使用方式：由 Views/Shared/_IdCardRecognizePartial.cshtml 以 <link rel="stylesheet"> 載入，
 *          僅工作者註冊頁(RegisterPerson.cshtml)與帳號升級頁(Upgrade.cshtml)這兩頁會用到。
 *
 * 建構日期:115/09/11
 * 建構人:宇峰
 * 修改說明:115/09/11-批次二：辨識彈窗改版樣式(宇峰)
 */

/* 第一層身分驗證方式選擇彈窗：第四顆【使用身分證】按鈕（由 idcard-recognize.js addSwalButton 插入） */
/* 特異度 (0,2,0) 大於 SweetAlert2 的 div:where(.swal2-container) button:where(.swal2-styled) (0,0,2)
   與 Bootstrap reboot 的 button (0,0,1)，不需 !important */
.swal2-styled.swal2-idcard {
    color: #fff;
    background-color: #0f6e56;                                     /* 深青綠，白字對比 6.2:1 */
    border-radius: var(--swal2-confirm-button-border-radius, .25em);
    font-size: 2.0rem;                                             /* 對齊主題給 .swal2-confirm/.swal2-cancel 的 !important 數值 */
    padding: 12px 24px;
}

.swal2-styled.swal2-idcard:hover,
.swal2-styled.swal2-idcard:active {
    background-color: #0a5643;
}

.swal2-styled.swal2-idcard:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 110, 86, .45);
}

/* deny 鈕（【使用自然人憑證】）補齊與 confirm/cancel 相同的字級內距；只在載入本 CSS 的兩頁生效 */
/* 特異度 (0,2,0) 大於 Swal 的 deny 規則 (0,1,2) */
.swal2-styled.swal2-deny {
    font-size: 2.0rem;
    padding: 12px 24px;
}

/* ============================================================
   以下規則由批次二（辨識彈窗改版）補充
   ============================================================ */

/* 色票變數：集中定義於 .idcard-swal（Swal customClass.popup），
   除 hover 的 fallback 色碼外，所有顏色一律引用這些變數，方便日後統一調色 */
.idcard-swal {
    --idcard-accent: #0f6e56;
    --idcard-accent-hover: #0a5643;
    --idcard-accent-soft: #eef7f3;
    --idcard-border: #dee2e6;
    --idcard-tab-bg: #e9ecef;
    --idcard-tab-hover-bg: #dde3ea;
    --idcard-tab-line: 3px;
    --idcard-error-bg: #f8d7da;
    --idcard-error-fg: #842029;
    --idcard-error-line: #b02a37;
    --idcard-success-fg: #146c43;
    --idcard-disabled-bg: #adb5bd;
    --idcard-disabled-fg: #fff;
    --idcard-focus: 0 0 0 3px rgba(15, 110, 86, .45);
}

/* Swal 的 html-container 預設 overflow:auto 會裁掉頁簽選中狀態的負 margin，本彈窗改為可視即可 */
.idcard-swal-body {
    overflow: visible;
    text-align: left;
    padding: 1rem 1.2rem .3rem;
}

/* 主題把 .swal2-popup 的字級鎖 1.8rem!important、html 根字級 62.5%，元件內文字統一改回 16px 基準 */
.idcard-recognize-body {
    font-size: 1.6rem;
    line-height: 1.5;
}

/* 焦點框通則：主題全域已把 :focus{outline:none} 關掉，鍵盤操作時另補鍵盤可見的焦點光暈 */
.idcard-swal .nav-link:focus-visible,
.idcard-swal .btn:focus-visible,
.idcard-swal .form-control:focus-visible {
    outline: none;
    box-shadow: var(--idcard-focus);
}

/* 狀態列的焦點只供螢幕報讀軟體移焦使用，不需要顯示焦點框 */
.idcard-status:focus {
    outline: none;
}

/* 說明文字：兩行文案，值內以換行分隔（white-space:pre-line 會保留 resx 內的換行） */
.idcard-desc {
    text-align: left;
    white-space: pre-line;
    font-size: 1.4rem;
    color: #555;
    margin-bottom: 1.2rem;
}

/* 頁簽列：上傳／拍照兩顆頁簽，選中頁簽白底並與下方面板相連 */
.idcard-tabs {
    border-bottom: 1px solid var(--idcard-border);
}

.idcard-tabs .nav-link {
    margin-bottom: -1px;
    padding: 1rem 1.6rem;
    font-size: 1.6rem;
    color: #495057;
    background: var(--idcard-tab-bg);
    border: 1px solid var(--idcard-border);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.idcard-tabs .nav-link:hover:not(.active) {
    background: var(--idcard-tab-hover-bg);
    color: #212529;
}

.idcard-tabs .nav-link.active {
    background: #fff;
    color: var(--idcard-accent);
    font-weight: 600;
    border-bottom-color: #fff;
    box-shadow: inset 0 var(--idcard-tab-line) 0 var(--idcard-accent);
}

/* 選中頁簽同時是鍵盤焦點時，上緣色線與焦點光暈要疊加，不能互蓋（寫在通則與 .active 之後） */
.idcard-swal .idcard-tabs .nav-link.active:focus-visible {
    box-shadow: inset 0 var(--idcard-tab-line) 0 var(--idcard-accent), var(--idcard-focus);
}

/* 頁簽面板共通外框：與頁簽列上緣相連，下緣收圓角 */
.idcard-tab-pane {
    border: 1px solid var(--idcard-border);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    padding: 1.6rem;
    background: #fff;
    margin-bottom: 1.2rem;
}

/* 上傳面板：拖放區虛線框，拖曳中／鍵盤聚焦時反白提示 */
.idcard-dropzone {
    border: 2px dashed var(--idcard-border);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
}

.idcard-dropzone.is-dragover,
.idcard-dropzone:focus-within {
    border-color: var(--idcard-accent);
    background: var(--idcard-accent-soft);
}

/* NLayout 主題把 .form-control 鎖 height:34px，會裁掉原生 file 選檔按鈕，這裡改回自動高度 */
.idcard-swal input[type=file].form-control {
    height: auto;
    font-size: 1.6rem;
    padding: .6rem .8rem;
}

/* 已選檔案列：檔名＋移除鈕（不可再掛 d-flex，與 [hidden] 同為 !important、後載者勝） */
.idcard-filerow {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: 1rem;
}

/* 上傳影像預覽 */
.idcard-preview {
    display: block;
    max-width: 100%;
    max-height: min(40vh, 400px);
    margin: 1rem auto 0;
    border-radius: 6px;
    background: #f7f7f7;
}

/* 拍照觀景窗：BS5 .ratio > * 會把子元素撐成 absolute 100%，video/canvas 與佔位訊息疊在同一格內 */
.idcard-viewfinder {
    background: #000;
    border-radius: 6px;
    overflow: hidden;
}

.idcard-viewfinder > video,
.idcard-viewfinder > canvas {
    object-fit: contain;
}

/* 相機啟動中佔位訊息，置中顯示於觀景窗上 */
.idcard-camera-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    color: #fff;
    background: rgba(0, 0, 0, .6);
}

/* 拍攝／重拍按鈕列 */
.idcard-camera-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.2rem;
}

/* 狀態列：常駐顯示辨識中／錯誤／成功訊息 */
.idcard-status {
    min-height: 2.4rem;
    font-size: 1.5rem;
    color: #666;
    margin-top: .8rem;
}

/* 不用 Bootstrap .alert-*：前端主題會把 .alert 文字強制改成白色，反而看不清楚 */
.idcard-status.is-error {
    color: var(--idcard-error-fg);
    background: var(--idcard-error-bg);
    border-left: 4px solid var(--idcard-error-line);
    padding: .6rem 1rem;
    font-weight: 600;
}

.idcard-status.is-success {
    color: var(--idcard-success-fg);
}

/* 頁尾提示：icon 常駐 DOM，僅在已準備好（is-ready）時顯示並轉綠色 */
.idcard-footer-hint {
    font-size: 1.4rem;
    color: #666;
    margin: 0;
}

.idcard-footer-hint i {
    display: none;
}

.idcard-footer-hint.is-ready {
    color: var(--idcard-success-fg);
}

.idcard-footer-hint.is-ready i {
    display: inline;
    margin-right: .4rem;
}

/* 功能鈕列：頁尾提示靠左、【上傳辨識】【返回】靠右成組 */
.idcard-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.2rem;
}

.idcard-footer-hint {
    margin-right: auto;
}

/* 按鈕尺寸：對齊本彈窗字級放大版，移除鈕（btn-sm）維持主題原尺寸 */
.idcard-swal .btn:not(.btn-sm) {
    min-height: 4.4rem;
    font-size: 1.6rem;
    border-radius: 6px;
    margin: 0;
}

.idcard-swal .btn-sm {
    border-radius: 4px;
}

/* 抵銷 front 主題 .btn i{top:3px}／NLayout 主題 .btn i{top:1px} 造成的圖示垂直位移 */
.idcard-swal .btn i {
    position: static;
    font-size: inherit;
    margin-right: .4rem;
}

/* 主要按鈕（【上傳辨識】【拍攝】）：與第一層【使用身分證】同色，白字對比 6.2:1 */
.btn-idcard-primary {
    background: var(--idcard-accent);
    border-color: var(--idcard-accent);
    color: #fff;
}

.btn-idcard-primary:hover {
    background: var(--idcard-accent-hover);
}

.btn-idcard-primary[aria-disabled=true] {
    background: var(--idcard-disabled-bg);
    border-color: var(--idcard-disabled-bg);
    color: var(--idcard-disabled-fg);
    cursor: not-allowed;
}

/* 辨識中遮罩：以 JS createElement 動態 append 到 Swal.getPopup()，不放樣板或 html 容器內，
   .swal2-popup 是 position:relative 的 grid，absolute 子元素才能蓋滿含標題的整個彈窗 */
.swal2-popup .idcard-busy-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: 2rem;
    text-align: center;
    background: rgba(255, 255, 255, .9);
    cursor: progress;
}

/* BS5 spinner-border 以 currentColor 畫邊框，設定 color 即可套色，不需另外覆寫 border */
.idcard-busy-overlay .spinner-border {
    width: 4.8rem;
    height: 4.8rem;
    border-width: .4rem;
    color: var(--idcard-accent);
}

.idcard-busy-text {
    font-size: 1.8rem;
    font-weight: 600;
    color: #212529;
}

.idcard-busy-hint {
    font-size: 1.5rem;
    color: #495057;
}

.idcard-busy-slow {
    font-size: 1.4rem;
    color: var(--idcard-error-line);
}

/* 375px 直向：頁簽兩格各半、功能鈕整列堆疊（頁尾提示在最上、主要鈕其次，依 DOM 順序自然排列） */
@media (max-width: 575.98px) {
    .idcard-tabs .nav-link {
        padding: 1rem .4rem;
        font-size: 1.5rem;
    }

    .idcard-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .idcard-actions .btn {
        width: 100%;
    }
}