/*
 * WayMCMS.Console — 확인 다이얼로그 · 토스트 · 처리결과 배너
 *
 * 브라우저 기본 confirm/alert 는 테마도 못 따라가고 줄바꿈도 못 살린다.
 * 대신 js/consoleUi.js 가 여기 정의된 마크업을 만들어 띄운다.
 *
 * 색 규칙(console-admin.css 와 동일):
 *   - 표면·경계선은 Tabler 변수(--tblr-bg-surface / --tblr-border-color)에 맡긴다.
 *     여기서 고정하면 다크 테마가 깨진다.
 *   - 종류별 강조색만 --ops-tone 하나로 받아 아이콘·테두리·연한 배경에 함께 쓴다.
 *     (연한 배경은 color-mix 로 만든다 — Tabler 1.4 도 쓰는 방식이라 지원 범위가 같다.
 *      혹시 못 쓰는 브라우저면 바로 위 줄의 단색 표면이 남아 읽는 데는 지장 없다.)
 */

/* 종류별 강조색. 배너·다이얼로그·토스트가 같은 토큰을 공유한다.
   ★ 아래 컴포넌트들은 --ops-tone 을 자기 규칙에서 기본값으로 선언하지 않는다.
     같은 요소에 붙는 같은 특이성의 선언이라 나중에 나온 쪽이 이기고, 그러면
     .ops-flash 가 .ops-tone-* 를 덮어써 전부 회색이 된다(실제로 그랬다).
     기본값은 var(--ops-tone, ...) 의 두 번째 인자로만 준다. */
.ops-tone-success { --ops-tone: var(--tblr-success); }
.ops-tone-danger  { --ops-tone: var(--tblr-danger); }
.ops-tone-warning { --ops-tone: var(--tblr-warning); }
.ops-tone-info    { --ops-tone: var(--tblr-info); }
.ops-tone-question { --ops-tone: var(--ops-accent-on-surface); }

/* ── 처리 결과 배너 ─────────────────────────────────────────────────────
   컨트롤러가 TempData 에 넣은 결과를 _Flash.cshtml 이 그린다.
   토스트가 아니라 배너인 이유: 임시 비밀번호·실패 사유처럼 "읽고 옮겨 적어야 하는"
   메시지가 섞여 있어 자동으로 사라지면 안 된다. 닫기는 사람이 한다. */
.ops-flash-stack {
    display: grid;
    gap: .5rem;
    margin-bottom: 1rem;
}
.ops-flash {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .75rem .875rem;
    border: 1px solid var(--tblr-border-color);
    border-inline-start: 3px solid var(--ops-tone, var(--tblr-secondary));
    border-radius: var(--tblr-border-radius, .375rem);
    background-color: var(--tblr-bg-surface);
    background-color: color-mix(in srgb, var(--ops-tone, var(--tblr-secondary)) 9%, var(--tblr-bg-surface));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    animation: ops-slide-down .22s ease-out both;
}
.ops-flash-icon {
    flex: none;
    color: var(--ops-tone, var(--tblr-secondary));
    font-size: 1.05rem;
    line-height: 1.4;
}
.ops-flash-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: pre-line;   /* 컨트롤러가 넣은 줄바꿈을 살린다 */
    word-break: break-word;
}
.ops-flash-close {
    flex: none;
    border: 0;
    background: none;
    padding: 0 .125rem;
    line-height: 1.4;
    color: var(--tblr-secondary);
    cursor: pointer;
    opacity: .7;
}
.ops-flash-close:hover { opacity: 1; }
.ops-flash.ops-leaving {
    animation: ops-fade-out .18s ease-in both;
}

/* ── 확인 다이얼로그 ──────────────────────────────────────────────────── */
.ops-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;              /* Tabler 모달(1055)보다 위 — 모달 위에서도 확인을 받는다 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .55);
    animation: ops-fade-in .15s ease-out both;
}
.ops-dialog {
    width: 100%;
    max-width: 27rem;
    overflow: hidden;
    border: 1px solid var(--tblr-border-color);
    border-radius: .75rem;
    background-color: var(--tblr-bg-surface);
    color: var(--tblr-body-color);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .35);
    animation: ops-dialog-in .18s cubic-bezier(.2, .8, .3, 1) both;
}
.ops-dialog-body {
    display: flex;
    gap: .875rem;
    padding: 1.25rem 1.25rem 1rem;
}
.ops-dialog-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: 1.1rem;
    color: var(--ops-tone, var(--tblr-secondary));
    background-color: color-mix(in srgb, var(--ops-tone, var(--tblr-secondary)) 16%, transparent);
}
.ops-dialog-title {
    margin: .125rem 0 .25rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}
.ops-dialog-message {
    margin: 0;
    color: var(--tblr-secondary-color, var(--tblr-body-color));
    font-size: .875rem;
    line-height: 1.55;
    white-space: pre-line;   /* 메시지에 넣은 줄바꿈을 살린다 */
    word-break: break-word;
}
.ops-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--tblr-border-color);
}

/* ── 토스트 ──────────────────────────────────────────────────────────────
   되돌아볼 필요 없는 짧은 안내(복사됨, 요청 보냄)만 여기로. 결과 기록은 배너로. */
.ops-toasts {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1090;
    display: grid;
    gap: .5rem;
    width: min(22rem, calc(100vw - 2rem));
    pointer-events: none;
}
.ops-toast {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .625rem .75rem;
    border: 1px solid var(--tblr-border-color);
    border-inline-start: 3px solid var(--ops-tone, var(--tblr-secondary));
    border-radius: .5rem;
    background-color: var(--tblr-bg-surface);
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .18);
    font-size: .875rem;
    pointer-events: auto;
    animation: ops-slide-left .2s ease-out both;
}
.ops-toast-icon { flex: none; color: var(--ops-tone, var(--tblr-secondary)); }
.ops-toast-text { flex: 1 1 auto; min-width: 0; white-space: pre-line; word-break: break-word; }
.ops-toast.ops-leaving { animation: ops-fade-out .18s ease-in both; }

/* 다이얼로그가 떠 있는 동안 뒤 본문이 스크롤되지 않게 */
.ops-dialog-open { overflow: hidden; }

@keyframes ops-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ops-fade-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-.25rem); } }
@keyframes ops-slide-down { from { opacity: 0; transform: translateY(-.375rem); } to { opacity: 1; transform: none; } }
@keyframes ops-slide-left { from { opacity: 0; transform: translateX(.75rem); } to { opacity: 1; transform: none; } }
@keyframes ops-dialog-in { from { opacity: 0; transform: translateY(.75rem) scale(.97); } to { opacity: 1; transform: none; } }

/* 움직임을 줄여 달라는 설정이면 등장 효과만 끈다(표시 자체는 유지). */
@media (prefers-reduced-motion: reduce) {
    .ops-flash, .ops-dialog, .ops-dialog-backdrop, .ops-toast,
    .ops-flash.ops-leaving, .ops-toast.ops-leaving {
        animation: none;
    }
}