/* ============================================================
   alert-dialog.css — AlertDialogService 共用 Dialog 樣式
   spec: layout-common-alert-dialog-spec-v1.md
   ============================================================ */

/* ── 兩欄 Content 區 ── */
.dialog-content {
    padding: 36px 24px;
    min-height: 130px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 18px;
}
.dialog-no-title {
    -webkit-align-items: center;
    align-items: center;
}

/* ── 左欄 icon ── */
.dialog-icon-col {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    width: 52px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
.dialog-icon {
    font-size: 44px;
}
.dialog-icon-info    { color: rgb(var(--info-color));    }
.dialog-icon-success { color: rgb(var(--success-color)); }
.dialog-icon-warning { color: rgb(var(--warning-color)); }
.dialog-icon-danger  { color: rgb(var(--danger-color));  }

/* ── 右欄文字 ── */
.dialog-text-col {
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
}
.dialog-title {
    font-size: 18px;
    font-weight: bold;
    color: #222;
    line-height: 1.3;
    margin-bottom: 8px;
}
.dialog-message {
    font-size: 16px;
    color: #444;
    line-height: 1.7;
}

.dialog-close {
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 1;
    min-width: 44px;
    min-height: 44px;
    font-size: 30px;
}

/* ── z-index：保證 alert dialog 永遠浮在其他 modal 之上 ──
   既有 cckm.css 有 `.modal-open .modal.in { z-index: 100000 !important }` 強制 — 蓋掉 UI Bootstrap 1.3.2
   自動 stacking（1050 + index×10），讓任何 nested modal 都撞同一個 z-index。
   修法：用更高 specificity (3 classes) 強制 alert-dialog 拉到 100010；backdrop 同步抬到 100005。 */
.modal-open .modal.alert-dialog-window.in { z-index: 100010 !important; }
.modal-open .modal-backdrop.alert-dialog-backdrop { z-index: 100005 !important; }

/* ── 視窗垂直＋水平置中 ── */
/* !important 覆蓋 Bootstrap .modal.in .modal-dialog { transform: translate(0,0) } */
.alert-dialog-window .modal-dialog {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: 560px;
    max-width: calc(100vw - 32px);
}

/* ── Footer ── */
.dialog-ft {
    padding: 11px 20px;
    border-top: 1px solid #eee;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    gap: 8px;
    background: #fafafa;
}

.dialog-ft-confirm-first .dialog-confirm-btn {
    -webkit-order: 1;
    order: 1;
}
.dialog-ft-confirm-first .dialog-cancel-btn {
    -webkit-order: 2;
    order: 2;
}