/* ─────────────────────────────────────────────────────────────
   테마: 대시보드형(연회색 바탕 + 흰 카드 + 검정 강조)
   -------------------------------------------------------------
   - 페이지 바탕은 연회색, 내용은 흰 카드에 얹는다(얇은 테두리 + 12~16px 라운드)
   - 강조는 검정 하나로 통일. 버튼·표 머리글·수치 패널이 검정이다.
   - 빨강은 삭제/재고부족처럼 "위험"에만 남긴다.

   부트스트랩 위에 덧씌우는 레이어라 이 파일과 App.razor의 link 한 줄만
   지우면 원래 모습으로 돌아온다.
   ───────────────────────────────────────────────────────────── */

:root {
    --ui-bg: #f5f5f5;          /* 페이지 바탕 */
    --ui-surface: #ffffff;     /* 카드·표 */
    --ui-ink: #111111;         /* 글자·강조 */
    --ui-ink-soft: #2b2b2b;    /* 검정 버튼 hover */
    --ui-muted: #8a8a8a;       /* 보조 글자 */
    --ui-border: #e8e8e8;
    --ui-fill: #f0f0f0;        /* 보조 버튼 바탕 */
    --ui-fill-hover: #e4e4e4;
    --ui-danger: #d92d20;
    --ui-radius: 14px;         /* 카드 */
    --ui-radius-sm: 10px;      /* 버튼·입력칸 */
}

html, body {
    background-color: var(--ui-bg);
    color: var(--ui-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ui-ink);
}

h1 { font-size: 1.65rem; }

.text-muted { color: var(--ui-muted) !important; }

a { color: var(--ui-ink); }
a:hover { color: #000; }

/* ── 버튼: 각지지 않은 사각(알약 아님), 검정이 기본 ──────── */
.btn {
    border-radius: var(--ui-radius-sm);
    font-weight: 600;
    border: 1px solid transparent;
    padding: 0.5rem 1.1rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-sm { padding: 0.3rem 0.75rem; font-size: 0.85rem; border-radius: 8px; }

.btn-primary {
    background-color: var(--ui-ink);
    border-color: var(--ui-ink);
    color: #fff;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--ui-ink-soft);
    border-color: var(--ui-ink-soft);
    color: #fff;
}

/* 보조 버튼: 흰 바탕 + 얇은 테두리 (레퍼런스의 Connect Wallet 형태)
   btn-success(엑셀 내보내기 등)도 여기에 넣는다 — 강조색을 검정 하나로 쓰는 테마에서
   초록 버튼 하나만 남으면 그것만 눈에 띈다. */
.btn-secondary, .btn-outline-secondary, .btn-outline-primary, .btn-light, .btn-success {
    background-color: var(--ui-surface);
    border-color: #d5d5d5;
    color: var(--ui-ink);
}

.btn-secondary:hover, .btn-outline-secondary:hover,
.btn-outline-primary:hover, .btn-light:hover, .btn-success:hover,
.btn-secondary:focus, .btn-outline-secondary:focus,
.btn-outline-primary:focus, .btn-light:focus, .btn-success:focus {
    background-color: var(--ui-fill);
    border-color: var(--ui-ink);
    color: var(--ui-ink);
}

/* 위험한 동작에만 빨강을 쓴다 */
.btn-danger {
    background-color: var(--ui-danger);
    border-color: var(--ui-danger);
    color: #fff;
}

.btn-danger:hover, .btn-danger:focus {
    background-color: #b42318;
    border-color: #b42318;
    color: #fff;
}

.btn-outline-danger {
    background-color: var(--ui-surface);
    border-color: #f0c4c0;
    color: var(--ui-danger);
}

.btn-outline-danger:hover, .btn-outline-danger:focus {
    background-color: var(--ui-danger);
    border-color: var(--ui-danger);
    color: #fff;
}

.btn:disabled, .btn.disabled {
    background-color: var(--ui-fill);
    border-color: var(--ui-border);
    color: var(--ui-muted);
    opacity: 1;
}

.btn-link {
    background: none;
    border: none;
    padding: 0;
    font-weight: 600;
    text-decoration: none;
    color: var(--ui-ink);
}

.btn-link:hover { color: #000; text-decoration: underline; background: none; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.12);
    outline: none;
}

/* ── 입력칸 ──────────────────────────────────────────────── */
.form-control, .form-select {
    background-color: var(--ui-surface);
    border: 1px solid #dcdcdc;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-ink);
}

.form-control { padding: 0.5rem 0.9rem; }

/* 선택 상자는 오른쪽에 화살표가 그려지므로 그만큼 자리를 비워둬야 한다.
   여백을 한 줄로 뭉뚱그려 지정했더니 화살표가 글자 위로 겹쳤다(입고·출고 처리의 '구분' 칸). */
.form-select { padding: 0.5rem 2.25rem 0.5rem 0.9rem; }

.form-control:focus, .form-select:focus { border-color: var(--ui-ink); }
.form-control::placeholder { color: var(--ui-muted); }

.form-control-sm { border-radius: 8px; padding: 0.3rem 0.7rem; }

/* 표 안의 숫자 입력칸은 폭이 아주 좁다. 좌우 여백을 줄이고, 값 옆에 붙는 스피너
   화살표(위/아래 버튼)를 없애 글자가 들어갈 자리를 확보한다. 스피너는 폭을 20px 가까이
   먹으면서 정작 모바일에서는 나타나지도 않는다 — 수량은 직접 입력하는 편이 빠르다. */
.table .form-control-sm[type="number"] {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
}

.table .form-control-sm[type="number"]::-webkit-outer-spin-button,
.table .form-control-sm[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.table .form-control-sm[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.form-select-sm { border-radius: 8px; padding: 0.3rem 1.75rem 0.3rem 0.6rem; }

.form-label { font-weight: 600; font-size: 0.9rem; }

.form-check-input:checked {
    background-color: var(--ui-ink);
    border-color: var(--ui-ink);
}

/* ── 카드: 흰 바탕 + 얇은 테두리 ─────────────────────────── */
.card {
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: none;
}

.card-body { padding: 1.1rem 1.25rem; }
.card-title { font-weight: 700; }

/* ── 표: 흰 카드 위에, 머리글은 검정 ─────────────────────── */
.table-responsive {
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
}

.table {
    --bs-table-striped-bg: #fafafa;
    margin-bottom: 0;
    border-color: var(--ui-border);
}

.table > thead th {
    white-space: nowrap;
    background-color: var(--ui-ink);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.85rem;
    border-color: var(--ui-ink);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

/* 머리글 안의 버튼·표시(정렬 화살표, 잠금, 개수 배지)도 어두운 바탕에 맞춘다 */
.table > thead th .btn-link,
.table > thead th .text-muted,
.table > thead th a { color: rgba(255, 255, 255, 0.75) !important; }

.table > thead th .btn-link:hover { color: #fff !important; }
.table > thead th .badge.bg-primary { background-color: #fff !important; color: var(--ui-ink) !important; }

/* 부트스트랩이 머리글 아래 선을 currentColor로 칠하는 규칙을 덮는다 */
.table > :not(:last-child) > :last-child > * { border-bottom-color: var(--ui-ink); }

.table > tbody td { border-color: var(--ui-border); }
.table-bordered > :not(caption) > * > * { border-color: var(--ui-border); }

/* 고정된 관리 열은 app.css에서 흰 배경을 깔아둔다(가로 스크롤 시 아래 칸이 비치지 않게).
   머리글까지 흰색이면 검은 머리글 줄 오른쪽 끝만 하얗게 뚫려 보이므로 여기서 되돌린다. */
.resizable-table th.col-actions { background-color: var(--ui-ink); }

/* 표 첫 줄/마지막 줄이 카드 모서리를 넘지 않게 */
.table > thead tr:first-child th:first-child { border-top-left-radius: var(--ui-radius); }
.table > thead tr:first-child th:last-child  { border-top-right-radius: var(--ui-radius); }

/* ── 배지 ────────────────────────────────────────────────── */
.badge { border-radius: 8px; font-weight: 600; }
.badge.bg-primary { background-color: var(--ui-ink) !important; }
.badge.bg-secondary { background-color: var(--ui-fill) !important; color: var(--ui-ink); }
.badge.bg-info { background-color: var(--ui-fill) !important; color: var(--ui-ink); }

/* ── 모달·알림 ───────────────────────────────────────────── */
.modal-content {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
}

.modal-header, .modal-footer { border-color: var(--ui-border); }

.alert {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
}

.alert-info { background-color: var(--ui-surface); color: var(--ui-ink); }
.alert-warning { background-color: #fffaf0; border-color: #f5e3c0; color: #6b4300; }
.alert-danger { background-color: #fef4f3; border-color: #f5cfcb; color: #912018; }

/* 상태 행은 옅게 — 강조는 검정이 맡는다 */
.table-danger { --bs-table-bg: #fdecea; }
.table-warning { --bs-table-bg: #fff8e8; }

/* ── 아코디언(사용 가이드) ───────────────────────────────── */
.accordion-item {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    margin-bottom: 0.5rem;
    background-color: var(--ui-surface);
}

.accordion-button { font-weight: 600; border-radius: var(--ui-radius) !important; }

.accordion-button:not(.collapsed) {
    background-color: var(--ui-ink);
    color: #fff;
    box-shadow: none;
}

.accordion-button:focus { box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.12); }

/* 월별 통계 — 접은 카드.
   화면에서만 숨기고 인쇄에는 항상 포함한다. 조건부 렌더링(@if)으로 아예 안 그리면
   접어둔 상태로 인쇄했을 때 보고서에서 그 자료가 통째로 빠져버리기 때문이다. */
.stats-collapsed { display: none; }
@media print {
    .stats-collapsed { display: block !important; }
}