/* =========================================================================
   폼페이 관리자/총판 테마 오버라이드
   =========================================================================
   🔴 관리자·총판 화면은 NobleUI "demo2" 테마(남색 카드 + 파란 버튼)를 쓴다.
      회원 화면(pompeii.css)의 검정+용암 느낌과 달라, 사장님이 "user 로그인과
      비슷한 느낌을 줘야 한다"고 지시했다(2026-09-16).
   이 파일은 demo2/style.css **뒤에** 실려 색만 회원 화면에 맞춰 덮는다.
   ⛔ demo2/style.css 를 직접 고치지 말 것 — 그건 기능 클래스가 수천 줄 얽혀 있어
      건드리면 레이아웃이 깨진다. 색만 여기서 덮는다.
   ⚠ demo2 는 링크에 버전 꼬리표가 없어 브라우저가 옛 파란 버전을 영구 캐시한다.
      이 파일은 ?v= 를 달아 부르므로 항상 최신이 실린다.
   ========================================================================= */

:root {
  --pom-obsidian: #0B0A0C;
  --pom-ash-900: #121013;
  --pom-ash-800: #1A171B;
  --pom-ash-700: #241F26;
  --pom-ash-600: #322B34;
  --pom-lava: #FF4D1C;
  --pom-gold: #D4AF37;
  --pom-marble: #E8DCC8;
  --pom-text: #E9E4DC;
  --pom-text-dim: #9E958C;
  --pom-text-mute: #6B645E;

  /* Bootstrap/NobleUI 가 참조하는 변수도 함께 덮는다 */
  --bs-primary: #FF4D1C;
  --bs-primary-rgb: 255, 77, 28;
  --bs-link-color: #FF4D1C;
  --bs-link-hover-color: #FF7A3D;
  --bs-body-bg: #0B0A0C;
  --primary: #FF4D1C;
}

/* ── 바탕 ───────────────────────────────────────────────────────────── */
body,
.page-wrapper,
.page-wrapper.full-page,
.main-wrapper,
.page-content {
  background: var(--pom-obsidian) !important;
  color: var(--pom-text);
}

/* 로그인 화면의 은은한 용암 배경 (회원 로그인과 같은 결) */
.page-wrapper.full-page {
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(255, 77, 28, .08) 0%, transparent 60%),
    var(--pom-obsidian) !important;
}

/* ── 카드 / 로그인 패널 ─────────────────────────────────────────────── */
.card,
.auth-form-wrapper {
  background: var(--pom-ash-900) !important;
  border: 1px solid var(--pom-ash-600) !important;
  color: var(--pom-text);
}
.auth-page .card {
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  border-radius: 14px;
  overflow: hidden;
}

/* ── 글자 ───────────────────────────────────────────────────────────── */
.card-title,
h1, h2, h3, h4, h5, h6,
.text-dark, .text-body {
  color: var(--pom-text) !important;
}
.text-muted {
  color: var(--pom-text-dim) !important;
}
.form-label {
  color: var(--pom-gold) !important;
  font-weight: 600;
}
a, .text-primary {
  color: var(--pom-lava) !important;
}
a:hover {
  color: #FF7A3D !important;
}

/* 로그인 브랜드명 옆 역할 배지 (원래 파란 span 자리) */
.noble-ui-logo {
  color: var(--pom-text) !important;
  font-weight: 900;
  letter-spacing: .04em;
  font-size: 1.55rem;
}
.noble-ui-logo span {
  color: var(--pom-lava) !important;
  font-weight: 700;
}

/* ── 입력칸 ─────────────────────────────────────────────────────────── */
.form-control,
.form-select {
  background: var(--pom-ash-800) !important;
  border: 1px solid var(--pom-ash-600) !important;
  color: var(--pom-text) !important;
}
.form-control::placeholder {
  color: var(--pom-text-mute) !important;
}
.form-control:focus,
.form-select:focus {
  background: var(--pom-ash-800) !important;
  border-color: var(--pom-lava) !important;
  box-shadow: 0 0 0 3px rgba(255, 77, 28, .16) !important;
  color: var(--pom-text) !important;
}
/* 🔴 크롬 자동완성이 입력칸을 흰색으로 덮는 것을 막는다(회원 로그인과 동일 처리).
   author 스타일보다 위에서 칠하므로 안쪽 그림자로만 이길 수 있다. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--pom-ash-800) inset !important;
  -webkit-text-fill-color: var(--pom-text) !important;
  caret-color: var(--pom-text);
  transition: background-color 9999s ease-in-out 0s;
}

/* ── 버튼 ───────────────────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #FF7A3D 0%, #FF4D1C 45%, #C8300A 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(255, 77, 28, .28);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: linear-gradient(135deg, #FF8A4D 0%, #FF5A2C 45%, #D8380A 100%) !important;
  color: #fff !important;
}
.btn-outline-primary {
  border-color: var(--pom-lava) !important;
  color: var(--pom-lava) !important;
}
.btn-outline-primary:hover {
  background: var(--pom-lava) !important;
  color: #fff !important;
}

/* ── 사이드바 (대시보드) ─────────────────────────────────────────────── */
.sidebar,
.sidebar .sidebar-header {
  background: var(--pom-obsidian) !important;
  border-color: var(--pom-ash-600) !important;
}
.sidebar .sidebar-brand {
  color: var(--pom-marble) !important;
  font-weight: 800;
}
.sidebar .nav .nav-item .nav-link {
  color: var(--pom-text-dim) !important;
}
.sidebar .nav .nav-item .nav-link:hover,
.sidebar .nav .nav-item.active > .nav-link {
  color: var(--pom-marble) !important;
  background: rgba(255, 77, 28, .10) !important;
}
.sidebar .nav .nav-item .nav-link .link-icon,
.sidebar .nav .nav-item.active > .nav-link .link-icon {
  color: var(--pom-lava) !important;
}

/* ── 상단 바 (대시보드) ─────────────────────────────────────────────── */
.navbar,
.horizontal-menu .bottom-navbar,
.horizontal-menu .navbar {
  background: var(--pom-ash-900) !important;
  border-color: var(--pom-ash-600) !important;
}

/* ── 배지·표 ────────────────────────────────────────────────────────── */
.badge.bg-primary,
.bg-primary {
  background: var(--pom-lava) !important;
}
.table {
  --bs-table-color: var(--pom-text);
  color: var(--pom-text);
}

/* =========================================================================
   표(테이블) 가독성 — 2026-09-16 사장님 지적
   =========================================================================
   사장님: "헤더 부분이 밝아서 글자도 밝고 해서 안 보여"
           "회원목록인데 아예 안보여"
           "테이블 오브젝트가 있는 다른 페이지도 다 그렇다"

   🔴 원인은 **내가 만든 회귀**다. 이 파일 위쪽의
        .text-dark { color: var(--pom-text) !important; }
      가 글자를 밝게 바꿨는데, **바탕은 밝은 채로 뒀다.**
      회원목록 행은 blade 에 이렇게 박혀 있다(실측 list.blade.php:149):
        <tr class="align-middle text-dark ... table-primary">
      부트스트랩 .table-primary 는 바탕이 **#e0e3ff(연보라)** 다.
      → 연보라 바탕 + 밝은 글자 = 아무것도 안 보인다.
      머리글도 같다. blade 19곳이 <thead class="bg-light"> 이고
      .bg-light 는 #E9E4DC(밝은 회색)인데 .table thead th 글자색은 #9E958C 였다.

   ⛔ 고치는 방향을 "글자를 다시 어둡게"로 잡지 말 것.
      이 화면은 검은 테마다. 어둡게 되돌리면 바탕이 밝은 표만 읽히고
      나머지 전부가 깨진다. **바탕을 어둡게 내리는 것이 맞다.**

   ⚠ 부트스트랩5 표는 셀 색을 CSS 변수로 칠한다(실측 demo2/style.css:1823).
        .table > :not(caption) > * > * {
            color: var(--bs-table-color);
            background-color: var(--bs-table-bg);
            box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
        }
      그래서 셀에 !important 를 퍼붓는 것이 아니라 **변수만 바꾸면** 된다.
      ⛔ 셀 선택자에 background !important 를 걸지 말 것 —
         줄무늬(striped)·마우스오버(hover)가 통째로 죽는다.
   ========================================================================= */

/* ── 표 바탕과 글자 ─────────────────────────────────────────────────── */
.table {
  --bs-table-color: var(--pom-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--pom-ash-600);
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: var(--pom-text);
  --bs-table-striped-bg: rgba(255, 255, 255, .028);
  --bs-table-active-color: var(--pom-marble);
  --bs-table-active-bg: rgba(255, 77, 28, .14);
  --bs-table-hover-color: var(--pom-marble);
  --bs-table-hover-bg: rgba(255, 77, 28, .10);
  color: var(--pom-text);
  border-color: var(--pom-ash-600);
}

/* ── 머리글: 한 단 밝은 흑요석 띠 + 금색 글자 ───────────────────────
   🔴 blade 19곳이 <thead class="bg-light"> 다. .bg-light 는 부트스트랩
      유틸리티라 !important 로 칠해진다 — 아래 '밝은 바탕 유틸리티' 절에서
      .bg-light 자체를 어둡게 바꿔 뿌리를 끊는다. 여기서는 글자와 띠만 맡는다. */
.table > thead > tr > th,
.table > thead > tr > td,
.table thead th {
  background-color: var(--pom-ash-700) !important;
  color: var(--pom-gold) !important;
  font-weight: 700 !important;
  border-bottom: 2px solid var(--pom-ash-500) !important;
  box-shadow: none !important;   /* 상황별 색이 머리글을 덮지 않게 */
}
/* 머리글 안의 작은 글자(정렬 아이콘·부제)도 같이 */
.table > thead > tr > th *,
.table thead th * { color: inherit; }

/* ── 본문 셀 ────────────────────────────────────────────────────────── */
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th {
  border-color: var(--pom-ash-600);
}
/* 🔴 blade 가 셀·행에 .text-dark 를 달아 둔 곳이 많다(회원목록이 그렇다).
      이 파일 위쪽에서 이미 밝게 바꾸지만, 표 안에서는 확실히 못박는다. */
.table .text-dark,
.table .text-body,
.table .text-black { color: var(--pom-text) !important; }

/* ── 상황별 행 색(table-primary 등) — 파스텔을 어두운 띠로 ────────────
   🔴 원래 값(실측): table-primary #e0e3ff · table-info #cff4fc ·
      table-light #E9E4DC … 전부 밝고 글자색은 #000 이다.
   ⛔ 이 블록을 지우지 말 것 — 지우면 회원목록이 다시 연보라로 돌아가
      밝은 바탕 + 밝은 글자가 된다.
   ⚠ 색을 완전히 같게 만들지 말 것 — 회원목록은 이 색으로
      **무기명(table-info)과 일반(table-primary)을 구분**한다. */
.table-primary,
.table-secondary,
.table-success,
.table-info,
.table-warning,
.table-danger,
.table-light,
.table-dark {
  --bs-table-color: var(--pom-text);
  --bs-table-striped-color: var(--pom-text);
  --bs-table-active-color: var(--pom-marble);
  --bs-table-hover-color: var(--pom-marble);
  --bs-table-border-color: var(--pom-ash-600);
  --bs-table-active-bg: rgba(255, 77, 28, .16);
  --bs-table-hover-bg: rgba(255, 77, 28, .12);
  color: var(--pom-text);
}
.table-primary   { --bs-table-bg: #1C151A; --bs-table-striped-bg: #221A20; }
.table-info      { --bs-table-bg: #12191C; --bs-table-striped-bg: #171F22; }
.table-secondary { --bs-table-bg: #17151A; --bs-table-striped-bg: #1C1A20; }
.table-success   { --bs-table-bg: #121A15; --bs-table-striped-bg: #17211A; }
.table-warning   { --bs-table-bg: #1E1913; --bs-table-striped-bg: #251F18; }
.table-danger    { --bs-table-bg: #1E1317; --bs-table-striped-bg: #25181C; }
.table-light     { --bs-table-bg: #1A171B; --bs-table-striped-bg: #201C21; }
.table-dark      { --bs-table-bg: #0B0A0C; --bs-table-striped-bg: #100E11; }

/* ── 밝은 바탕 유틸리티 — 검은 화면에서는 전부 틀린 색이다 ──────────
   🔴 .bg-light 는 머리글 19곳 말고도 입력칸·상자에 16곳 더 쓰인다(실측 35곳).
      한 곳씩 blade 를 고치면 빠뜨린다. 유틸리티 자체를 어둡게 바꾼다.
   ⛔ 이 블록을 지우지 말 것 — 지우면 머리글이 다시 밝은 회색이 된다.
   ⚠ 부트스트랩 배경 유틸리티는 !important 로 선언돼 있어
      이쪽도 !important 여야 이긴다. */
.bg-light,
.bg-body,
.bg-body-tertiary,
.bg-body-secondary {
  background-color: var(--pom-ash-700) !important;
  color: var(--pom-text) !important;
}
.bg-white {
  background-color: var(--pom-ash-900) !important;
  color: var(--pom-text) !important;
}
/* 입력칸에 bg-light 가 붙은 곳(배당 입력 등)은 입력칸 색으로 */
.form-control.bg-light,
.form-select.bg-light,
.form-control.bg-white,
.form-select.bg-white {
  background-color: var(--pom-ash-800) !important;
  color: var(--pom-text) !important;
  border-color: var(--pom-ash-600) !important;
}

/* ── 표 테두리·감싸개 ───────────────────────────────────────────────── */
.table-bordered > :not(caption) > * { border-color: var(--pom-ash-600); }
.table-bordered > :not(caption) > * > * { border-color: var(--pom-ash-600); }
.table-responsive { border-radius: var(--pom-r-sm); }

/* 빈 표 안내문("등록된 수신자가 없습니다") */
.table > tbody > tr > td[colspan] { color: var(--pom-text-dim); }

/* ── 쪽 넘김 ────────────────────────────────────────────────────────── */
.pagination .page-link {
  background-color: var(--pom-ash-800);
  border-color: var(--pom-ash-600);
  color: var(--pom-text-dim);
}
.pagination .page-link:hover {
  background-color: var(--pom-ash-700);
  color: var(--pom-marble);
}
.pagination .page-item.active .page-link {
  background-color: var(--pom-lava);
  border-color: var(--pom-lava);
  color: #fff;
}
.pagination .page-item.disabled .page-link {
  background-color: var(--pom-ash-900);
  border-color: var(--pom-ash-600);
  color: var(--pom-text-mute);
}