/* ===============================
   JAVIS Admin — Tabler 호환 테마 브리지

   레이아웃과 기본 팔레트는 Tabler(Bootstrap 5)가 담당합니다.
   이 파일은 화면이 쓰는 커스텀 변수/클래스(--bg-card, .list-wrapper 등)를
   Tabler 토큰에 연결해, 화면 마크업을 고치지 않고도 테마가 일관되게 적용되도록 합니다.
   다크모드는 app.js가 data-theme 과 data-bs-theme 을 함께 설정해 동작합니다.
================================= */

:root, [data-theme="light"] {
    --bg-body:        var(--tblr-body-bg, #f1f5f9);
    --bg-card:        var(--tblr-bg-surface, #ffffff);
    --bg-card-inner:  var(--tblr-bg-surface-secondary, #f8fafc);
    --bg-input:       var(--tblr-bg-forms, #ffffff);
    --bg-sidebar:     var(--tblr-bg-surface, #ffffff);
    --bg-topbar:      var(--tblr-bg-surface, #ffffff);
    --text-main:      var(--tblr-body-color, #1e293b);
    --text-muted:     var(--tblr-secondary, #64748b);
    --text-emphasis:  var(--tblr-heading-color, #0f172a);
    --border-color:   var(--tblr-border-color, #e2e8f0);
    --table-stripe:   var(--tblr-bg-surface-tertiary, #f8fafc);
    --accent-color:   var(--tblr-primary, #0d6efd);
}

/* 다크모드 값은 Tabler의 [data-bs-theme=dark] 가 --tblr-* 를 갈아끼우면
   위 매핑을 통해 자동으로 따라옵니다. 별도 재정의가 필요 없습니다. */


/* Bold & Small element visibility in dark mode */
[data-theme="dark"] b, 
[data-theme="dark"] strong, 
[data-theme="dark"] .fw-bold { 
    color: var(--text-emphasis) !important; 
}

[data-theme="dark"] small {
    color: var(--text-muted) !important;
}

.text-emphasis { color: var(--text-emphasis) !important; }
.text-main { color: var(--text-main) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--accent-color) !important; }
.text-success { color: #198754 !important; }
.text-warning { color: #f59e0b !important; } /* 선명한 오렌지/옐로우 */
.text-danger { color: #dc3545 !important; }

[data-theme="dark"] .text-success { color: #4ade80 !important; } /* 밝은 연두 */
[data-theme="dark"] .text-warning { color: #fbbf24 !important; } /* 밝은 황금색 */
[data-theme="dark"] .text-danger { color: #f87171 !important; }  /* 밝은 빨강 */

.bg-card { background-color: var(--bg-card) !important; }
.bg-card-inner { background-color: var(--bg-card-inner) !important; border: 1px solid var(--border-color) !important; }

/* ===============================
   Tables & Lists
================================= */
.table { color: var(--text-main) !important; }
.table-light { background-color: var(--table-stripe) !important; color: var(--text-main) !important; }
[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: var(--bg-card);
    border-bottom-color: var(--border-color);
    color: var(--text-main) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--table-stripe) !important; }

/* ===============================
   Cards & Components
================================= */
.card { border: 1px solid var(--border-color); border-radius: 1rem; background-color: var(--bg-card); }
.form-control, .form-select, .input-group-text {
    background-color: var(--bg-input) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}
label { color: var(--text-main); font-weight: 500; }
[data-theme="dark"] label { color: var(--text-muted); }
[data-theme="dark"] label.fw-bold { color: var(--text-main); }
.btn { border-radius: 0.5rem; font-weight: 600; }

/* 대시보드 지표 타일 배경 */
.bg-theme-subtle { background-color: var(--table-stripe); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }

/* ===============================
   Dark Mode — Bootstrap Component Overrides
================================= */

/* text-dark / bg-white / bg-light */
[data-theme="dark"] .text-dark  { color: var(--text-emphasis) !important; }
[data-theme="dark"] .bg-white   { background-color: var(--bg-card) !important; }
[data-theme="dark"] .bg-light   { background-color: var(--bg-card-inner) !important; color: var(--text-muted) !important; }

/* Navbar (mobile top bar) */
[data-theme="dark"] .navbar-light { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .navbar-light .navbar-brand,
[data-theme="dark"] .navbar-light .navbar-brand * { color: var(--text-emphasis) !important; }

/* Dropdown */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
[data-theme="dark"] .dropdown-item        { color: var(--text-main); }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus  { background-color: var(--table-stripe); color: var(--text-emphasis); }
[data-theme="dark"] .dropdown-divider     { border-color: var(--border-color); }

/* Card header */
[data-theme="dark"] .card-header {
    background-color: var(--bg-card-inner);
    border-bottom-color: var(--border-color);
    color: var(--text-main);
}

/* Modal */
[data-theme="dark"] .modal-content {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { border-color: var(--border-color); }
[data-theme="dark"] .btn-close    { filter: invert(1) grayscale(1); }

/* Alerts */
[data-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.2);
    border-color: rgba(25, 135, 84, 0.35);
    color: #75b798;
}
[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.2);
    border-color: rgba(220, 53, 69, 0.35);
    color: #ea868f;
}

/* Badge: bg-light text-dark */
[data-theme="dark"] .badge.bg-light {
    background-color: var(--bg-card-inner) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

/* ===============================
   Tabler 레이아웃 미세 조정
================================= */

/* 사이드바: 섹션 목록이 남은 높이를 나눠 가지며 벌어지는 것을 방지 */
.navbar-vertical .navbar-collapse { justify-content: flex-start; }
.navbar-vertical .navbar-collapse > .sidebar-section { width: 100%; }
.navbar-vertical .sidebar-section > .navbar-nav { flex-grow: 0; width: 100%; }

/* 사이드바 섹션 접기/펼치기 (<details>) — 현재 페이지가 든 섹션만 펼친 채로 열린다 */
.sidebar-section > summary { list-style: none; cursor: pointer; display: flex; align-items: center; user-select: none; }
.sidebar-section > summary::-webkit-details-marker { display: none; }
.sidebar-section > summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .65rem; margin-left: auto; transition: transform .15s; }
.sidebar-section:not([open]) > summary::after { transform: rotate(-90deg); }

/* 본문 가운데 정렬 래퍼 — 기존 화면들이 쓰던 폭 유지 */
.content-container, .list-wrapper { width: 100%; }

/* Tabler는 .badge 기본 글자색을 회색 계열로 두지만, 이 앱은 Bootstrap 관례대로
   .badge 에 bg-success / bg-danger 같은 진한 배경을 함께 쓴다.
   그대로 두면 초록 배경에 회색 글자가 되어 읽히지 않으므로 대비를 지정한다. */
.badge.bg-primary,
.badge.bg-secondary,
.badge.bg-success,
.badge.bg-danger,
.badge.bg-info,
.badge.bg-dark    { color: #fff; }
.badge.bg-warning,
.badge.bg-light   { color: #1e293b; }