/* =====================================================================
   BIGPOS 운영자 콘솔 스타일

   기반은 Bootstrap 5.3(wwwroot/lib/bootstrap)이다. 관리자웹과 같은 기준이다(D-036).
   버튼·표·입력칸·알림·배지·확인 창은 Bootstrap 표준 클래스를 그대로 쓴다.
   이 파일에는 Bootstrap에 없는 것만 둔다 — 운영자 셸(사이드바·상단바),
   화면 머리, 숫자 칸, 요약 카드, 발급 정보 칸.

   ⚠ 여기에 버튼·표·입력칸 모양을 다시 만들지 말 것.
     예전에는 화면마다 <style>로 .btn·table.grid·.badge를 따로 만들어서
     화면끼리 모양이 갈렸다. 규칙은 docs/05-운영.md 「관리자웹 화면 규칙」에 있다.
   ⚠ 사이드바만 보라색이다. 매장 관리자웹과 한눈에 구분하려는 것이다.
   ===================================================================== */

:root {
    --bs-body-font-family: -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", Roboto, sans-serif;
    --bs-body-font-size: 0.9375rem;

    --app-bg: #f5f6f8;
    --app-sidebar: #2b2540;
    --app-sidebar-accent: #7c3aed;
    --app-sidebar-text: #c7ced9;
    --app-sidebar-width: 220px;
}

body {
    background: var(--app-bg);
}

h1:focus {
    outline: none;
}

/* ===== 셸: 사이드바 + 상단바 + 본문 ===== */
.admin-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--app-sidebar-width);
    flex-shrink: 0;
    background: var(--app-sidebar);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar .brand {
    padding: 1rem 1.25rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.sidebar .brand span {
    font-weight: 400;
    opacity: 0.7;
    font-size: 0.875rem;
    margin-left: 0.2rem;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0 1rem;
    overflow-y: auto;
    flex: 1;
}

.nav-menu .nav-item {
    display: block;
    padding: 0.55rem 1.25rem;
    color: var(--app-sidebar-text);
    text-decoration: none;
    font-size: 0.9rem;
    border-left: 3px solid transparent;
}

.nav-menu .nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.nav-menu .nav-item.active {
    background: rgba(124, 58, 237, 0.22);
    border-left-color: var(--app-sidebar-accent);
    color: #fff;
    font-weight: 600;
}

.admin-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    height: 56px;
    background: #fff;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar .store-name {
    font-weight: 600;
}

.content {
    padding: 1.5rem 2rem 3rem;
    max-width: 1440px;
    width: 100%;
}

/* ===== 화면 머리(Shared/PageHeader.razor) ===== */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.page-header h1 {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0;
}

.page-header .page-desc {
    color: var(--bs-secondary-color);
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    max-width: 60rem;
}

.page-header .page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* 카드 밖 소제목(요약 카드 묶음 위) */
.section-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.6rem;
}

/* 카드 머리의 제목은 화면 제목보다 한 단계 작게 */
.card-header h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.card-header {
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

/* 카드가 표를 바로 감쌀 때 — 표의 바깥 선을 카드 선에 맞춘다 */
.card > .table-responsive > .table,
.card > .table {
    margin-bottom: 0;
}

.card > .table-responsive > .table > :not(caption) > * > :first-child,
.card > .table > :not(caption) > * > :first-child {
    padding-left: 1rem;
}

.card > .table-responsive > .table > :not(caption) > * > :last-child,
.card > .table > :not(caption) > * > :last-child {
    padding-right: 1rem;
}

.card > .table-responsive > .table > tbody > tr:last-child > *,
.card > .table > tbody > tr:last-child > * {
    border-bottom: 0;
}

/* ===== 표 ===== */
.table > thead th {
    color: var(--bs-secondary-color);
    font-weight: 600;
    font-size: 0.8125rem;
    background: var(--bs-tertiary-bg);
    white-space: nowrap;
}

.table td {
    white-space: nowrap;
}

/* 긴 글(메모·사유·감사 상세)이 들어가는 칸만 줄바꿈을 허용한다 */
.table td.wrap {
    white-space: normal;
    min-width: 12rem;
    max-width: 30rem;
}

/* 세로로 놓인 「이름 | 값」 표의 이름 칸 */
.table th.col-label {
    width: 220px;
    white-space: nowrap;
    color: var(--bs-secondary-color);
    font-weight: 600;
    background: var(--bs-tertiary-bg);
}

.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.row-actions {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
    white-space: nowrap;
}

/* 정지된 매장·비활성 운영자 줄. Bootstrap 표는 칸마다 글자색을 칠해서 줄에 색을 달아도 안 먹는다 */
.table > tbody > tr.row-muted > * {
    color: var(--bs-secondary-color);
}

.font-mono {
    font-family: var(--bs-font-monospace);
}

/* ===== 요약 수치 카드 ===== */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.stat-card {
    display: block;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 0.9rem 1.1rem;
    color: inherit;
    text-decoration: none;
}

/* 누르면 해당 목록으로 가는 요약 카드(대시보드) */
.stat-link:hover {
    border-color: var(--bs-primary);
    color: inherit;
}

.stat-label {
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 1.375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ===== 발급 정보(키·임시 비밀번호). 전달할 값이라 크게 보인다 ===== */
.issued-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-bottom: 0.5rem;
}

.issued-grid .k {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
}

.issued-grid .v {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

/* ===== 검색·필터 줄 ===== */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.toolbar .form-control,
.toolbar .form-select {
    width: auto;
}

.toolbar .grow {
    flex: 1 1 16rem;
    min-width: 12rem;
}

.toolbar .toolbar-end {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* 한 줄 입력 폼의 폭 제한(설정 화면). 넓은 화면에서 입력칸이 끝까지 늘어나지 않게 */
.form-narrow {
    max-width: 520px;
}

/* ===== 로딩·빈 상태(Shared/Loading.razor · Shared/EmptyState.razor) ===== */
.state-block {
    color: var(--bs-secondary-color);
    text-align: center;
    padding: 2.5rem 1rem;
}

.state-block .state-title {
    color: var(--bs-body-color);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* ===== 확인 창(Shared/ConfirmDialog.razor) — Bootstrap 모달 마크업을 JS 없이 상태로 띄운다 ===== */
.modal.d-block {
    background: rgba(0, 0, 0, 0.4);
}

/* ===== 로그인 화면(BlankLayout) ===== */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 400px;
}

.auth-brand {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}

.auth-brand span {
    font-weight: 400;
    opacity: 0.6;
    font-size: 1rem;
}

/* ===== Blazor 기본 ===== */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--bs-success);
}

.invalid {
    outline: 1px solid var(--bs-danger);
}

.validation-message {
    color: var(--bs-danger);
}

.blazor-error-boundary {
    background: var(--bs-danger);
    padding: 1rem 1.25rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "오류가 발생했습니다.";
}

/* ===== 반응형(≤768px): 사이드바 → 왼쪽에서 나오는 드로어 ===== */
.nav-toggle { display: none; }
.nav-overlay { display: none; }

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 60;
        width: 78vw;
        max-width: 300px;
        height: auto;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 2px 0 14px rgba(0, 0, 0, 0.25);
    }

    body.nav-open .sidebar {
        transform: translateX(0);
    }

    .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(0, 0, 0, 0.42);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }

    body.nav-open .nav-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .nav-toggle {
        display: inline-flex;
        margin-right: auto;
    }

    .topbar {
        padding: 0 0.9rem;
    }

    /* 상단바는 높이가 고정이라 긴 계정명이 줄바꿈되면 삐져나온다. 한 줄로 묶어 말줄임한다 */
    .topbar .store-name {
        font-size: 0.875rem;
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .content {
        padding: 1rem 0.9rem 2rem;
    }

    .page-header h1 {
        font-size: 1.25rem;
    }

    .toolbar .form-control,
    .toolbar .form-select {
        flex: 1 1 8rem;
    }

    .toolbar .toolbar-end {
        margin-left: 0;
    }

    .table th.col-label {
        width: auto;
    }

    .table td.wrap {
        min-width: 10rem;
        max-width: 14rem;
    }
}

@media (max-width: 420px) {
    .stat-grid {
        grid-template-columns: 1fr 1fr;
    }
}