/* ==================================================================
 * Dark mode overrides
 * Tailwind play CDN 이 darkMode='class' 설정을 무시하는 이슈가 있어
 * html.dark 클래스 기반으로 색상을 직접 override.
 * 모든 selector 에 html.dark 접두사 + !important 로 specificity 보장.
 * ================================================================== */

html.dark { color-scheme: dark; }

/* ----- 배경 ----- */
html.dark body { background-color: rgb(2, 6, 23); color: rgb(226, 232, 240); }
html.dark .bg-white { background-color: rgb(30, 41, 59) !important; }
html.dark .bg-slate-50 { background-color: rgb(15, 23, 42) !important; }
html.dark .bg-slate-50\/50 { background-color: rgba(30, 41, 59, 0.5) !important; }
html.dark .bg-slate-50\/60 { background-color: rgba(30, 41, 59, 0.6) !important; }
html.dark .bg-slate-100 { background-color: rgb(51, 65, 85) !important; }
html.dark .bg-slate-100\/50 { background-color: rgba(51, 65, 85, 0.5) !important; }
html.dark .bg-slate-100\/60 { background-color: rgba(51, 65, 85, 0.6) !important; }
html.dark .bg-slate-900 { background-color: rgb(2, 6, 23) !important; }
html.dark .bg-slate-800 { background-color: rgb(15, 23, 42) !important; }

/* 기간별 카드 톤 (라이트는 매우 옅은 파스텔, 다크는 채도 낮춤) */
html.dark .bg-sky-50\/60 { background-color: rgba(2, 132, 199, 0.10) !important; }
html.dark .border-sky-200 { border-color: rgba(2, 132, 199, 0.35) !important; }
html.dark .bg-sky-100 { background-color: rgba(2, 132, 199, 0.25) !important; }
html.dark .text-sky-700 { color: rgb(125, 211, 252) !important; }

html.dark .bg-violet-50\/60 { background-color: rgba(124, 58, 237, 0.10) !important; }
html.dark .border-violet-200 { border-color: rgba(124, 58, 237, 0.35) !important; }
html.dark .bg-violet-100 { background-color: rgba(124, 58, 237, 0.25) !important; }
html.dark .text-violet-700 { color: rgb(196, 181, 253) !important; }

/* 상태 배지 톤 (입금/출금/적중/낙첨 등) */
html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.12) !important; }
html.dark .text-emerald-700 { color: rgb(110, 231, 183) !important; }
html.dark .text-emerald-600 { color: rgb(52, 211, 153) !important; }
html.dark .bg-rose-50 { background-color: rgba(244, 63, 94, 0.12) !important; }
html.dark .text-rose-700 { color: rgb(252, 165, 165) !important; }
html.dark .text-rose-600 { color: rgb(251, 113, 133) !important; }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12) !important; }
html.dark .text-amber-700 { color: rgb(252, 211, 77) !important; }
html.dark .text-amber-600 { color: rgb(252, 211, 77) !important; }
html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.15) !important; }
html.dark .text-indigo-700 { color: rgb(165, 180, 252) !important; }
html.dark .bg-cyan-50 { background-color: rgba(6, 182, 212, 0.15) !important; }
html.dark .text-cyan-700 { color: rgb(103, 232, 249) !important; }

/* ----- 텍스트 — 다크 배경 위 가독성 확보 (한 단계씩 밝게) ----- */
html.dark .text-slate-950 { color: rgb(241, 245, 249) !important; } /* slate-100 */
html.dark .text-slate-900 { color: rgb(241, 245, 249) !important; } /* slate-100 */
html.dark .text-slate-800 { color: rgb(226, 232, 240) !important; } /* slate-200 */
html.dark .text-slate-700 { color: rgb(226, 232, 240) !important; } /* slate-200 */
html.dark .text-slate-600 { color: rgb(203, 213, 225) !important; } /* slate-300 */
html.dark .text-slate-500 { color: rgb(203, 213, 225) !important; } /* slate-300 */
html.dark .text-slate-400 { color: rgb(203, 213, 225) !important; } /* slate-300 */
html.dark .text-slate-300 { color: rgb(226, 232, 240) !important; } /* slate-200 */
html.dark .text-slate-200 { color: rgb(241, 245, 249) !important; } /* slate-100 */

/* 추가 텍스트 색상 (link, gray 등) */
html.dark .text-blue-600 { color: rgb(96, 165, 250) !important; }
html.dark .text-blue-700 { color: rgb(96, 165, 250) !important; }
html.dark .text-gray-700 { color: rgb(226, 232, 240) !important; }
html.dark .text-gray-600 { color: rgb(203, 213, 225) !important; }
html.dark .text-gray-500 { color: rgb(203, 213, 225) !important; }
html.dark .text-gray-400 { color: rgb(203, 213, 225) !important; }

/* ----- 보더 ----- */
html.dark .border-slate-100 { border-color: rgb(51, 65, 85) !important; }
html.dark .border-slate-200 { border-color: rgb(51, 65, 85) !important; }
html.dark .border-slate-300 { border-color: rgb(71, 85, 105) !important; }
html.dark .border-slate-700 { border-color: rgb(51, 65, 85) !important; }
html.dark .border-slate-800 { border-color: rgb(30, 41, 59) !important; }

/* divide */
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(51, 65, 85) !important; }
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(51, 65, 85) !important; }

/* hover */
html.dark .hover\:bg-slate-50:hover { background-color: rgba(51, 65, 85, 0.5) !important; }
html.dark .hover\:bg-slate-100:hover { background-color: rgba(51, 65, 85, 0.7) !important; }
html.dark .hover\:bg-slate-100\/50:hover { background-color: rgba(51, 65, 85, 0.5) !important; }
html.dark .hover\:bg-slate-100\/60:hover { background-color: rgba(51, 65, 85, 0.6) !important; }
html.dark .hover\:bg-slate-800:hover { background-color: rgb(30, 41, 59) !important; }
/* primary 버튼 hover — dark 의 bg-slate-700 !important 를 덮어쓰기 */
html.dark .hover\:bg-slate-500:hover { background-color: rgb(100, 116, 139) !important; }
html.dark .hover\:bg-slate-600:hover { background-color: rgb(71, 85, 105) !important; }
html.dark .hover\:text-slate-900:hover { color: rgb(241, 245, 249) !important; }
html.dark .hover\:text-blue-600:hover { color: rgb(96, 165, 250) !important; }

/* odd/even (유저 목록 + 내역 row) */
html.dark .odd\:bg-white:nth-child(odd) { background-color: rgb(30, 41, 59) !important; }
html.dark .even\:bg-slate-50\/50:nth-child(even) { background-color: rgba(51, 65, 85, 0.5) !important; }
html.dark .even\:bg-slate-50\/60:nth-child(even) { background-color: rgba(51, 65, 85, 0.5) !important; }

/* form input */
html.dark input[type="text"],
html.dark input[type="password"],
html.dark input[type="search"],
html.dark input[type="email"] {
    background-color: rgb(15, 23, 42);
    color: rgb(226, 232, 240);
    border-color: rgb(51, 65, 85);
}
html.dark input::placeholder { color: rgb(100, 116, 139); }

/* skeleton bg */
html.dark .bg-slate-200 { background-color: rgb(51, 65, 85) !important; }

/* slate-700 (배지/배경) */
html.dark .bg-slate-700 { background-color: rgb(51, 65, 85) !important; }

/* sticky header */
html.dark header.bg-white { background-color: rgb(15, 23, 42) !important; border-color: rgb(30, 41, 59) !important; }

/* dl grid (background between cells) */
html.dark dl.bg-slate-100 { background-color: rgb(51, 65, 85) !important; }
html.dark dl.bg-slate-100 > .bg-white { background-color: rgb(30, 41, 59) !important; }