/* Custom CSS to extend Tailwind */

/* Custom colors */
.bg-sidebar {
  background-color: #1e293b;
}

.bg-topnav {
  background-color: #ffffff;
}

.dark .bg-topnav {
  background-color: #1e293b;
}

/* Active menu item */
.active-menu {
  @apply bg-blue-500 text-white;
}

.dark .active-menu {
  @apply bg-blue-600;
}

/* Sidebar menu hover */
.sidebar-menu-item:hover {
  @apply bg-gray-700 text-white;
}

.dark .sidebar-menu-item:hover {
  @apply bg-gray-700;
}

/* Transitions */
.sidebar-transition {
  transition: all 0.3s ease-in-out;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.dark ::-webkit-scrollbar-track {
  background: #374151;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Page transitions */
.page-enter {
  opacity: 0;
}
.page-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.page-exit {
  opacity: 1;
}
.page-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

/* 다크모드 강제 스타일 - Tailwind가 작동하지 않을 경우를 위한 백업 */
html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: #111827 !important; /* gray-900 */
    color: #f9fafb !important; /* gray-50 */
}

html.dark header {
    background-color: #1f2937 !important; /* gray-800 */
    border-color: #374151 !important; /* gray-700 */
}

html.dark aside {
    background-color: #1f2937 !important; /* gray-800 */
    border-color: #374151 !important; /* gray-700 */
}

html.dark main {
    background-color: #111827 !important; /* gray-900 */
}

/* 다크모드 카드 스타일 */
html.dark .bg-white {
    background-color: #1f2937 !important; /* gray-800 */
}

html.dark .border-gray-200 {
    border-color: #374151 !important; /* gray-700 */
}

html.dark .text-gray-900 {
    color: #f9fafb !important; /* gray-50 */
}

html.dark .text-gray-700 {
    color: #d1d5db !important; /* gray-300 */
}

html.dark .text-gray-500 {
    color: #9ca3af !important; /* gray-400 */
}

html.dark .text-gray-400 {
    color: #6b7280 !important; /* gray-500 */
}

/* 다크모드 호버 효과 */
html.dark .hover\:bg-gray-50:hover {
    background-color: #374151 !important; /* gray-700 */
}

html.dark .hover\:bg-gray-100:hover {
    background-color: #374151 !important; /* gray-700 */
}

/* 다크모드 폼 요소 */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: #374151 !important; /* gray-700 */
    border-color: #4b5563 !important; /* gray-600 */
    color: #f9fafb !important; /* gray-50 */
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: #3b82f6 !important; /* blue-500 */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important;
}

/* 다크모드 테이블 */
html.dark table thead {
    background-color: #374151 !important; /* gray-700 */
}

html.dark table tbody tr:hover {
    background-color: #374151 !important; /* gray-700 */
}

/* 다크모드 드롭다운 */
html.dark .dropdown-menu {
    background-color: #1f2937 !important; /* gray-800 */
    border-color: #374151 !important; /* gray-700 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.25) !important;
}

/* 다크모드 상태 지시기 - 제거됨 (필요시 다시 활성화 가능) */

/* 다크모드 전환 애니메이션 - 페이지 로딩 완료 후에만 활성화 */
html.loaded body, 
html.loaded header, 
html.loaded aside, 
html.loaded main, 
html.loaded .bg-white, 
html.loaded .border-gray-200, 
html.loaded .text-gray-900, 
html.loaded .text-gray-700, 
html.loaded .text-gray-500 {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

/* 다크모드 스크롤바 */
html.dark ::-webkit-scrollbar {
    width: 6px;
}

html.dark ::-webkit-scrollbar-track {
    background: transparent;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #4b5563; /* gray-600 */
    border-radius: 3px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #6b7280; /* gray-500 */
}

/* 차트 다크모드 지원 */
html.dark canvas {
    filter: brightness(0.9);
}

/* 디버그용 클래스 */
.debug-dark-mode {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    z-index: 10000;
}