/* BasketManager Pro - Enhanced Dark Mode */
/* Compatible with Bootstrap 5.3.3 and new design system */

/* CSS transition disabler (used when changing themes to prevent flicker) */
.no-transition,
.no-transition * {
    transition: none !important;
}

/* Dark mode style configuration */
:root {
    color-scheme: light;
}

:root.dark {
    color-scheme: dark;
    
    /* Override Bootstrap variables for dark mode */
    --bs-body-color: #e2e8f0;
    --bs-body-color-rgb: 226, 232, 240;
    --bs-body-bg: #0f172a;
    --bs-body-bg-rgb: 15, 23, 42;
    
    /* Enhanced primary colors for dark mode */
    --bs-primary: #60a5fa;
    --bs-primary-rgb: 96, 165, 250;
    --bs-primary-hover: #3b82f6;
    --bs-primary-active: #2563eb;
    --bs-primary-bg-subtle: #1e3a8a;
    --bs-primary-border-subtle: #1e40af;
    --bs-primary-text-emphasis: #93c5fd;
    
    /* Enhanced secondary colors */
    --bs-secondary: #94a3b8;
    --bs-secondary-rgb: 148, 163, 184;
    --bs-secondary-hover: #64748b;
    --bs-secondary-bg-subtle: #1e293b;
    --bs-secondary-border-subtle: #334155;
    --bs-secondary-text-emphasis: #cbd5e1;
    
    /* Enhanced semantic colors for dark mode */
    --bs-success: #34d399;
    --bs-success-rgb: 52, 211, 153;
    --bs-success-hover: #10b981;
    --bs-success-bg-subtle: #064e3b;
    
    --bs-warning: #fbbf24;
    --bs-warning-rgb: 251, 191, 36;
    --bs-warning-hover: #f59e0b;
    --bs-warning-bg-subtle: #451a03;
    
    --bs-danger: #f87171;
    --bs-danger-rgb: 248, 113, 113;
    --bs-danger-hover: #ef4444;
    --bs-danger-bg-subtle: #450a0a;
    
    --bs-info: #60a5fa;
    --bs-info-rgb: 96, 165, 250;
    --bs-info-hover: #3b82f6;
    --bs-info-bg-subtle: #0c2543;
    
    /* Enhanced border colors */
    --bs-border-color: #334155;
    --bs-border-color-rgb: 51, 65, 85;
    
    /* Enhanced box shadows for dark mode */
    --bs-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
    --bs-box-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
    --bs-box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2);
}

/* Apply dark mode to main elements using Bootstrap variables */
.dark body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Enhanced Sidebar Dark Mode */
.dark .sidebar-container {
    background-color: var(--bs-secondary-bg-subtle) !important;
    border-color: var(--bs-border-color) !important;
}

.dark .sidebar-section-title {
    color: var(--bs-secondary) !important;
}

.dark .sidebar-link {
    color: var(--bs-body-color) !important;
}

.dark .sidebar-link:hover {
    background-color: var(--bs-border-color) !important;
    color: var(--bs-primary) !important;
}

.dark .sidebar-link.active,
.dark .submenu-link.active {
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-primary-text-emphasis) !important;
}

.dark .submenu-link {
    color: var(--bs-secondary) !important;
}

.dark .submenu-link:hover {
    color: var(--bs-primary) !important;
}

/* Improved visibility for dropdowns in dark mode */
.dark #theme-dropdown,
.dark #userDropdown div,
.dark #notificationDropdown div {
    border: 1px solid var(--color-gray-400);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Headers and navigation */
.dark header {
    background-color: var(--color-primary-700);
}

.dark header button {
    color: white;
}

.dark header button:hover {
    background-color: var(--color-primary-600);
    color: white;
}

/* Theme switcher colors */
.dark .theme-switcher button {
    color: white;
}

.dark footer {
    background-color: var(--color-gray-50);
}

/* Enhanced Cards and Containers Dark Mode */
.dark .card,
.dark .dashboard-card,
.dark .team-card,
.dark .bg-white {
    background-color: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-body-color);
    border-color: var(--bs-border-color) !important;
}

.dark .card-header,
.dark .card-footer {
    background-color: var(--bs-border-color) !important;
    border-color: var(--bs-border-color) !important;
}

.dark .modal-content {
    background-color: var(--bs-secondary-bg-subtle) !important;
    border-color: var(--bs-border-color) !important;
}

/* Breadcrumbs, tabs, and navigation items */
.dark .nav-tabs .nav-link.active {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-500);
    border-bottom-color: var(--color-gray-200);
    color: var(--color-primary-500);
}

.dark .nav-tabs .nav-link:not(.active) {
    background-color: var(--color-gray-300);
    border-color: var(--color-gray-500);
    color: var(--color-gray-700);
}

.dark .nav-tabs {
    border-bottom-color: var(--color-gray-500);
}

/* Enhanced Form Elements Dark Mode */
.dark .form-control,
.dark .form-select,
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="date"],
.dark textarea,
.dark select {
    background-color: var(--bs-border-color);
    border-color: var(--bs-secondary);
    color: var(--bs-body-color);
}

.dark .form-control:focus,
.dark .form-select:focus,
.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    background-color: var(--bs-border-color);
    border-color: var(--bs-primary);
    color: var(--bs-body-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.dark .form-label {
    color: var(--bs-body-color);
}

/* Enhanced Button Dark Mode */
.dark .btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

.dark .btn-primary:hover {
    background-color: var(--bs-primary-hover);
    border-color: var(--bs-primary-hover);
    color: white;
}

.dark .btn-secondary {
    background-color: var(--bs-border-color);
    border-color: var(--bs-secondary);
    color: var(--bs-body-color);
}

.dark .btn-secondary:hover {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: var(--bs-body-color);
}

.dark .btn-outline-primary {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background-color: transparent;
}

.dark .btn-outline-primary:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

/* Enhanced Table Dark Mode */
.dark .table,
.dark .data-table {
    --bs-table-bg: var(--bs-secondary-bg-subtle);
    --bs-table-hover-bg: var(--bs-border-color);
    --bs-table-border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.dark .table th,
.dark .data-table th {
    background-color: var(--bs-border-color);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.dark .table td,
.dark .data-table td {
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.dark .table-striped > tbody > tr:nth-of-type(odd) > td,
.dark .table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: var(--bs-border-color);
}

.dark .table tbody tr:hover,
.dark .data-table tr:hover {
    background-color: var(--bs-border-color);
}

/* Borders */
.dark .border {
    border-color: var(--color-gray-500) !important;
}

.dark .border-t,
.dark .border-b,
.dark .border-l,
.dark .border-r {
    border-color: var(--color-gray-500) !important;
}

/* Text Colors */
.dark .text-gray-500 {
    color: var(--color-gray-500) !important;
}

.dark .text-gray-600 {
    color: var(--color-gray-600) !important;
}

.dark .text-gray-700 {
    color: var(--color-gray-700) !important;
}

.dark .text-gray-800 {
    color: var(--color-gray-800) !important;
}

.dark .text-gray-900 {
    color: var(--color-gray-900) !important;
}

/* Background Colors */
.dark .bg-gray-50 {
    background-color: var(--color-gray-100) !important;
}

.dark .bg-gray-100 {
    background-color: var(--color-gray-200) !important;
}

.dark .bg-gray-200 {
    background-color: var(--color-gray-300) !important;
}

/* Shadows */
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-sm,
.dark .shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.4) !important;
}

/* Enhanced Alerts Dark Mode */
.dark .alert-success {
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success);
    border-color: var(--bs-success-bg-subtle);
}

.dark .alert-danger {
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger);
    border-color: var(--bs-danger-bg-subtle);
}

.dark .alert-info {
    background-color: var(--bs-info-bg-subtle);
    color: var(--bs-info);
    border-color: var(--bs-info-bg-subtle);
}

.dark .alert-warning {
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-warning);
    border-color: var(--bs-warning-bg-subtle);
}

.dark .alert-primary {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    border-color: var(--bs-primary-bg-subtle);
}

/* Enhanced Badges Dark Mode */
.dark .badge {
    background-color: var(--bs-secondary);
    color: white;
}

.dark .text-bg-primary {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

.dark .text-bg-secondary {
    background-color: var(--bs-secondary) !important;
    color: white !important;
}

.dark .text-bg-success {
    background-color: var(--bs-success) !important;
    color: white !important;
}

.dark .text-bg-warning {
    background-color: var(--bs-warning) !important;
    color: white !important;
}

.dark .text-bg-danger {
    background-color: var(--bs-danger) !important;
    color: white !important;
}

.dark .text-bg-info {
    background-color: var(--bs-info) !important;
    color: white !important;
}

/* Calendar */
.dark .calendar th,
.dark .calendar td {
    border-color: var(--color-gray-500);
}

.dark .calendar .today {
    background-color: var(--color-primary-900);
    color: var(--color-primary-100);
}

.dark .calendar .event-training {
    background-color: var(--color-blue-50);
    color: var(--color-blue-700);
}

.dark .calendar .event-game {
    background-color: var(--color-red-50);
    color: var(--color-red-700);
}

/* Basketball court diagram */
.dark .basketball-court {
    background-color: #b27921;
    border-color: #5a3919;
}

.dark .basketball-court .center-circle,
.dark .basketball-court .key {
    border-color: #ddd;
}

.dark .basketball-court .hoop {
    background-color: #ddd;
}

/* Dropdowns */
.dark .user-dropdown-menu,
.dark .notification-dropdown-menu {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-500);
}

/* Custom styles for specific elements */
.dark .hover-card:hover {
    background-color: var(--color-gray-300);
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}

/* High contrast mode */
.dark.high-contrast {
    --color-primary-500: #ffdd00;
    --color-primary-600: #ffe133;
    --color-primary-700: #ffe866;
    
    --color-gray-900: #ffffff;
    --color-gray-800: #f0f0f0;
    --color-gray-100: #000000;
    --color-gray-200: #0a0a0a;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dark * {
        transition: none !important;
        animation: none !important;
    }
}