/* 테마 토큰 및 공통 컴포넌트 테마 보정
 *
 * style.css 다음에 로드되며, 라이트/다크/세피아/고대비 테마에서
 * 공통으로 쓰이는 표면·경계·텍스트 색을 CSS 변수로 제공한다.
 * 템플릿에서는 색상 값을 직접 쓰지 말고 아래 토큰을 사용한다.
 */

:root {
    /* 표면 */
    --surface: #ffffff;
    --surface-alt: #f8f9fa;
    --surface-strong: #e9ecef;
    --surface-sunken: #fcfcfd;

    /* 경계 */
    --border-color: #dee2e6;
    --border-subtle: #e9ecef;
    --border-strong: #ced4da;

    /* 텍스트 */
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #6c757d;
    --text-on-accent: #ffffff;

    /* 강조 */
    --accent: #0d6efd;
    --accent-solid: #0d6efd;
    --accent-soft-bg: #eef2ff;
    --accent-soft-text: #3730a3;

    /* 상태 (연한 배경 + 진한 글자) */
    --state-success-bg: #dcfce7;
    --state-success-text: #166534;
    --state-danger-bg: #fee2e2;
    --state-danger-text: #991b1b;
    --state-warning-bg: #fef3c7;
    --state-warning-text: #92400e;
    --state-info-bg: #e0f2fe;
    --state-info-text: #0c4a6e;
    --state-primary-bg: #dbeafe;
    --state-primary-text: #1e3a8a;
    --state-purple-bg: #f3e8ff;
    --state-purple-text: #6b21a8;
    --state-neutral-bg: #f3f4f6;
    --state-neutral-text: #374151;

    /* 상태 테두리 */
    --state-primary-border: #bfdbfe;
    --state-info-border: #bae6fd;
    --state-danger-border: #fecaca;
    --state-purple-border: #e9d5ff;
    --state-success-border: #bbf7d0;
    --state-warning-border: #fde68a;
    --state-neutral-border: #e5e7eb;

    /* 활동 히트맵 단계 */
    --heat-0: #ebedf0;
    --heat-1: #c6e48b;
    --heat-2: #7bc96f;
    --heat-3: #239a3b;
    --heat-4: #196127;

    /* 그림자 / 오버레이 */
    --shadow-soft: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.15);
    --overlay-backdrop: rgba(0, 0, 0, 0.5);
}

html.dark-mode {
    --surface: #1e1e1e;
    --surface-alt: #242424;
    --surface-strong: #2c2c2c;
    --surface-sunken: #191919;

    --border-color: #3c3c3c;
    --border-subtle: #2c2c2c;
    --border-strong: #4a4a4a;

    --text-primary: #eaeaea;
    --text-secondary: #c9c9c9;
    --text-muted: #a0a0a0;
    --text-on-accent: #ffffff;

    --accent: #6ea8fe;
    --accent-solid: #2563eb;
    --accent-soft-bg: #2a3557;
    --accent-soft-text: #c7d2fe;

    --state-success-bg: #14351f;
    --state-success-text: #7ee2a8;
    --state-danger-bg: #3a1a1c;
    --state-danger-text: #f5a3a8;
    --state-warning-bg: #3a2e12;
    --state-warning-text: #f2cf7a;
    --state-info-bg: #12303d;
    --state-info-text: #8ed4ee;
    --state-primary-bg: #1b2b46;
    --state-primary-text: #a8c8ff;
    --state-purple-bg: #2e2143;
    --state-purple-text: #d5b8f5;
    --state-neutral-bg: #2c2c2c;
    --state-neutral-text: #d0d0d0;

    --state-primary-border: #2f4a75;
    --state-info-border: #1d4c60;
    --state-danger-border: #5f2b30;
    --state-purple-border: #4a3568;
    --state-success-border: #24563a;
    --state-warning-border: #5b4820;
    --state-neutral-border: #3c3c3c;

    --heat-0: #262626;
    --heat-1: #0e4429;
    --heat-2: #006d32;
    --heat-3: #26a641;
    --heat-4: #39d353;

    --shadow-soft: 0 4px 8px rgba(0, 0, 0, 0.55);
    --shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.65);
    --overlay-backdrop: rgba(0, 0, 0, 0.7);
}

html.sepia-theme {
    --surface: #fbf5e6;
    --surface-alt: #efe3cb;
    --surface-strong: #e5d6b8;
    --surface-sunken: #f4ecd8;

    --border-color: #d7c7a7;
    --border-subtle: #e2d5b9;
    --border-strong: #c4ae86;

    --text-primary: #3e3225;
    --text-secondary: #5b4a35;
    --text-muted: #735f45;

    --accent: #8a5a1e;
    --accent-solid: #8a5a1e;
    --accent-soft-bg: #eee0c4;
    --accent-soft-text: #6b4517;

    --state-primary-border: #c3cbb2;
    --state-info-border: #bcc9c4;
    --state-danger-border: #d8b3ab;
    --state-purple-border: #cbbcc9;
    --state-success-border: #bcc9ab;
    --state-warning-border: #dcc79a;
    --state-neutral-border: #d7c7a7;

    --heat-0: #e5d6b8;
    --heat-1: #cbc38a;
    --heat-2: #a9ab5f;
    --heat-3: #7e8a3c;
    --heat-4: #566326;

    --shadow-soft: 0 4px 8px rgba(90, 70, 40, 0.15);
    --shadow-strong: 0 8px 20px rgba(90, 70, 40, 0.2);
    --overlay-backdrop: rgba(60, 45, 25, 0.55);
}

html.contrast-theme {
    --surface: #111111;
    --surface-alt: #1a1a1a;
    --surface-strong: #222222;
    --surface-sunken: #000000;

    --border-color: #f3f300;
    --border-subtle: #b8b800;
    --border-strong: #f3f300;

    --text-primary: #ffffff;
    --text-secondary: #f5f5f5;
    --text-muted: #f8ed8d;
    --text-on-accent: #000000;

    --accent: #f3f300;
    --accent-solid: #f3f300;
    --accent-soft-bg: #1a1a1a;
    --accent-soft-text: #f3f300;

    --state-success-bg: #062b13;
    --state-success-text: #7bffb0;
    --state-danger-bg: #2e0a0d;
    --state-danger-text: #ff9aa2;
    --state-warning-bg: #302300;
    --state-warning-text: #ffd873;
    --state-info-bg: #06222c;
    --state-info-text: #8fe4ff;
    --state-primary-bg: #0b1c33;
    --state-primary-text: #a9ccff;
    --state-purple-bg: #22132f;
    --state-purple-text: #dcb6ff;
    --state-neutral-bg: #1a1a1a;
    --state-neutral-text: #ededed;

    --state-primary-border: #f3f300;
    --state-info-border: #f3f300;
    --state-danger-border: #f3f300;
    --state-purple-border: #f3f300;
    --state-success-border: #f3f300;
    --state-warning-border: #f3f300;
    --state-neutral-border: #f3f300;

    --heat-0: #1a1a1a;
    --heat-1: #2f5d1f;
    --heat-2: #4f9c2c;
    --heat-3: #7fd23f;
    --heat-4: #b6ff5e;

    --overlay-backdrop: rgba(0, 0, 0, 0.8);
}

/* ------------------------------------------------------------------
 * Bootstrap 컴포넌트 다크 모드 보정
 * style.css 가 다루지 않는 컴포넌트를 보완한다.
 * ------------------------------------------------------------------ */

html.dark-mode .bg-white,
html.dark-mode .bg-body,
html.dark-mode .bg-body-tertiary {
    background-color: var(--surface) !important;
    color: var(--text-primary);
}

html.dark-mode .text-dark {
    color: var(--text-primary) !important;
}

html.dark-mode .border,
html.dark-mode .border-top,
html.dark-mode .border-bottom,
html.dark-mode .border-start,
html.dark-mode .border-end,
html.dark-mode .border-light {
    border-color: var(--border-color) !important;
}

html.dark-mode hr {
    border-top-color: var(--border-color);
    opacity: 0.4;
}

/* 리스트 그룹 */
html.dark-mode .list-group-item {
    background-color: var(--surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}

html.dark-mode .list-group-item-action:hover,
html.dark-mode .list-group-item-action:focus {
    background-color: var(--surface-strong);
    color: var(--text-primary);
}

/* 모달 */
html.dark-mode .modal-content {
    background-color: var(--surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
    border-color: var(--border-color);
}

html.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* 탭 / 페이지네이션 */
html.dark-mode .nav-tabs {
    border-bottom-color: var(--border-color);
}

html.dark-mode .nav-tabs .nav-link {
    color: var(--text-secondary);
}

html.dark-mode .nav-tabs .nav-link:hover {
    border-color: var(--border-color);
    background-color: var(--surface-strong);
}

html.dark-mode .nav-tabs .nav-link.active {
    background-color: var(--surface);
    border-color: var(--border-color) var(--border-color) var(--surface);
    color: var(--text-primary);
}

html.dark-mode .page-link {
    background-color: var(--surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}

html.dark-mode .page-item.active .page-link {
    background-color: var(--accent-solid);
    border-color: var(--accent-solid);
    color: #ffffff;
}

html.dark-mode .page-item.disabled .page-link {
    background-color: var(--surface-alt);
    color: var(--text-muted);
}

/* 테이블 */
html.dark-mode .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.07);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
}

html.dark-mode .table-light,
html.dark-mode .table > thead.table-light th,
html.dark-mode .table thead.thead-light th {
    background-color: var(--surface-strong) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* 폼 요소 */
html.dark-mode .form-select,
html.dark-mode .input-group-text {
    background-color: var(--surface-strong);
    border-color: var(--border-color);
    color: var(--text-primary);
}

html.dark-mode .form-control::placeholder {
    color: var(--text-muted);
}

html.dark-mode .form-control:disabled,
html.dark-mode .form-control[readonly] {
    background-color: var(--surface-alt);
    color: var(--text-muted);
}

/* 아코디언 */
html.dark-mode .accordion-item,
html.dark-mode .accordion-button {
    background-color: var(--surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}

html.dark-mode .accordion-button:not(.collapsed) {
    background-color: var(--surface-strong);
    color: var(--text-primary);
}

html.dark-mode .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* 기타 */
html.dark-mode .badge.bg-light {
    background-color: var(--surface-strong) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .breadcrumb {
    background-color: transparent;
}

html.dark-mode .progress {
    background-color: var(--surface-strong);
}

html.dark-mode .close,
html.dark-mode .btn-link {
    color: var(--accent);
}

/* 알림(alert) 계열 */
html.dark-mode .alert-primary {
    background-color: var(--state-primary-bg);
    border-color: var(--state-primary-border);
    color: var(--state-primary-text);
}

html.dark-mode .alert-info {
    background-color: var(--state-info-bg);
    border-color: var(--state-info-border);
    color: var(--state-info-text);
}

html.dark-mode .alert-success {
    background-color: var(--state-success-bg);
    border-color: var(--state-success-border);
    color: var(--state-success-text);
}

html.dark-mode .alert-warning {
    background-color: var(--state-warning-bg);
    border-color: var(--state-warning-border);
    color: var(--state-warning-text);
}

html.dark-mode .alert-danger {
    background-color: var(--state-danger-bg);
    border-color: var(--state-danger-border);
    color: var(--state-danger-text);
}

html.dark-mode .alert-secondary,
html.dark-mode .alert-light,
html.dark-mode .alert-dark {
    background-color: var(--state-neutral-bg);
    border-color: var(--state-neutral-border);
    color: var(--state-neutral-text);
}

html.dark-mode .alert-link {
    color: inherit;
    text-decoration: underline;
}