:root {
    --ph-bg-color: #121212;
    --ph-text-color: #ffffff;
    --primary-color: #fa5305;
    --secondary-color: #3a0ca3;
}

.dark-mode {
    --dark-bg: #18181b;
    --dark-text: #f4f4f5;
    --dark-text-light: #a1a1aa;
    --dark-card-bg: #23232a;
    --dark-card-header: #27272a;
    --dark-border: #3f3f46;
    --dark-hover: #27272a;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.4);
    --accent-color: #fa5305;
    --primary-rgb: 250, 83, 5;
}

body {
  transition: background-color 0.3s, color 0.3s;
}

/* Dark mode styles */
.dark-mode {
    background-color: var(--ph-bg-color) !important;
    color: var(--ph-text-color) !important;
}

.dark-mode header {
    background-color: #1a1a1a !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .site-menu a {
    color: #ffffff !important;
}

.dark-mode .site-menu a:hover,
.dark-mode .site-menu .active a {
    color: var(--primary-color) !important;
}

.dark-mode .mobile-menu {
    background-color: #1a1a1a !important;
}

.dark-mode .mobile-menu a {
    color: #ffffff !important;
}

.dark-mode .mobile-icon-nav {
    background-color: #1a1a1a !important;
}

.dark-mode .mobile-icon-nav a {
    color: #ffffff !important;
}

.dark-mode .feature-card,
.dark-mode .notification-card {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

.dark-mode .dashboard-card {
    background: var(--dark-card-bg);
    border: 1px solid var(--dark-border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-mode .feature-card p,
.dark-mode .dashboard-card li,
.dark-mode .notification-card p {
    color: #cccccc !important;
}

.dark-mode .dashboard {
    background-color: var(--ph-bg-color) !important;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: var(--dark-text) !important;
}

.dark-mode .footer-section {
    background-color: #0a0a0a !important;
}

.dark-mode .footer-section .links a {
    color: #aaaaaa !important;
}

/* Toggle container */
.toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Toggle track (rounded pill) */
.toggle {
    width: 38px;
    height: 20px;
    border-radius: 50px;
    background-color: #fa5305;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 2px;
    overflow: hidden;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

/* Toggle circle */
.toggle-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    z-index: 1;
}

.toggle-circle svg {
    width: 10px;
    height: 10px;
    stroke-width: 2.0;
    color: #fa5305;
}

/* Dark mode: circle slides right */
.dark-mode .toggle-circle {
    transform: translateX(18px);
}


/* Dark Mode Styles for Admin Dashboard */
.dark-mode .admin-dashboard {
    background: var(--dark-bg);
    color: var(--dark-text);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-mode .dashboard-header h1 {
    color: var(--dark-text);
}

.dark-mode .stat-card {
    background: var(--dark-card-bg);
    border: 1px solid var(--dark-border);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.dark-mode .stat-card:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--primary-color);
    background: var(--dark-card-bg);
    border-color: var(--primary-color);
}

.dark-mode .stat-info h3 {
    color: var(--dark-text) !important;
}

.dark-mode .stat-info p {
    color: var(--dark-text-light) !important;
}

.dark-mode .quick-actions-section h2 {
    color: var(--dark-text) !important;
}

.dark-mode .action-card {
    background: var(--dark-card-bg);
    border: 1px solid var(--dark-border);
    color: var(--dark-text);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
}

.dark-mode .action-card:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
    border-color: var(--primary-color);
    color: var(--dark-text);
    transform: translateY(-2px);
}

.dark-mode .action-card p {
    color: var(--accent-color);
}

.dark-mode .card-header {
    border-bottom-color: var(--dark-border);
    background: var(--dark-card-header);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-mode .card-header h3 {
    color: var(--dark-text) !important;
}

.dark-mode .view-all {
    color: var(--primary-color);
}

.dark-mode .view-all:hover {
    color: var(--primary-light);
}

.dark-mode .empty-state {
    color: var(--dark-text-light);
}

.dark-mode .analytics-value {
    color: var(--primary-color);
}

.dark-mode .analytics-label {
    color: var(--dark-text-light);
}

.dark-mode .coins-stat-item h4 {
    color: var(--dark-text-light);
}

.dark-mode .coins-value {
    color: var(--primary-color);
}

.dark-mode .tier-distribution h4 {
    color: var(--dark-text);
}

/* Tier items maintain their colors in dark mode but with better contrast */
.tier-item h5 {
    color: rgb(0, 0, 0) !important;
}

.dark-mode .tier-item.bronze { 
    background: #c47628; 
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.dark-mode .tier-item.silver { 
    background: #999494; 
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.dark-mode .tier-item.gold { 
    background: #e0c110; 
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.dark-mode .tier-item.platinum { 
    background: #e6e1d7; 
    color: #333 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.dark-mode .tier-item.diamond { 
    background: #6ad4ec; 
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Form elements in dark mode */
.dark-mode input,
.dark-mode select,
.dark-mode textarea {
    background: var(--dark-card-bg);
    border: 1px solid var(--dark-border);
    color: var(--dark-text);
}

.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

/* Table styles for dark mode */
.dark-mode table {
    background: var(--dark-card-bg);
    color: var(--dark-text);
}

.dark-mode th {
    background: var(--dark-card-header);
    color: var(--dark-text);
    border-bottom: 1px solid var(--dark-border);
}

.dark-mode td {
    border-bottom: 1px solid var(--dark-border);
    color: var(--dark-text);
}

.dark-mode tr:hover {
    background: var(--dark-hover);
}

/* Modal and overlay styles */
.dark-mode .modal {
    background: rgba(0, 0, 0, 0.8);
}

.dark-mode .modal-content {
    background: var(--dark-card-bg);
    border: 1px solid var(--dark-border);
    color: var(--dark-text);
}

.dark-mode .modal-header {
    border-bottom: 1px solid var(--dark-border);
    background: var(--dark-card-header);
}

.dark-mode .modal-footer {
    border-top: 1px solid var(--dark-border);
    background: var(--dark-card-header);
}

/* Loading states */
.dark-mode .loading {
    background: var(--dark-card-bg);
}

.dark-mode .loading::after {
    border-color: var(--primary-color) transparent transparent transparent;
}

.dark-mode .loading-state i {
    color: var(--primary-color, #60a5fa);
}

/* Chart containers */
.dark-mode .chart-container {
    background: var(--dark-card-bg);
    border: 1px solid var(--dark-border);
}

/* Tooltips */
.dark-mode .tooltip {
    background: var(--dark-card-bg);
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.dark-mode .tooltip::before {
    border-top-color: var(--dark-border);
}

/* Scrollbar styling for dark mode */
.dark-mode ::-webkit-scrollbar {
    width: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
    background: var(--dark-card-bg);
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--dark-border);
    border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Selection color */
.dark-mode ::selection {
    background: var(--primary-color);
    color: white;
}

.dark-mode ::-moz-selection {
    background: var(--primary-color);
    color: white;
}

/* Focus states for accessibility */
.dark-mode .action-card:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.dark-mode .btn-primary {
    background: linear-gradient(135deg, var(--primary-color, #3b82f6) 0%, var(--primary-dark, #1d4ed8) 100%);
    color: white;
    border: 1px solid var(--primary-color, #3b82f6);
}

.dark-mode .btn-primary:hover {
    background: #ffffff;
    color: var(--primary-color, #e9531d);
    border-color: var(--primary-color, #e9531d);
}

.dark-mode .btn-primary:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.dark-mode .btn-primary:focus {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

/* Success, warning, error states */
.dark-mode .alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid #10b981;
    color: #10b981;
}

.dark-mode .alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid #f59e0b;
    color: #f59e0b;
}

.dark-mode .alert-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid #ef4444;
    color: #ef4444;
}

.dark-mode .alert-info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid #3b82f6;
    color: #3b82f6;
}

.dark-mode .profile-dropdown,
.dark-mode .profile-dropdown a,
.dark-mode .profile-dropdown li {
    color: #fff !important;
}

.dark-mode .profile-dropdown a:hover,
.dark-mode .profile-dropdown li:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}



/* Enhanced Dark Mode Styles for Admin Users Page */
.dark-mode .page-header h1 {
    color: var(--dark-text, #f8fafc);
}

.dark-mode .header-actions .btn {
    background: var(--primary-color, #3b82f6);
    color: white;
}

.dark-mode .header-actions .btn:hover {
    background: var(--primary-dark, #1d4ed8);
    color: white;
}

/* Enhanced Stats Overview Dark Mode */
.dark-mode .stat-info h4 {
    color: var(--dark-text, #f8fafc);
}

/* Enhanced Table Controls Dark Mode */
.dark-mode .search-input {
    background: var(--dark-card-bg, #1e293b);
    border: 2px solid var(--dark-border, #475569);
    color: var(--dark-text, #f8fafc);
}

.dark-mode .search-input:focus {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    background: var(--dark-card-bg, #1e293b);
}

.dark-mode .search-input::placeholder {
    color: var(--dark-text-light, #94a3b8);
}

.dark-mode .search-box i {
    color: var(--primary-color, #3b82f6);
}

.dark-mode .search-input:focus + i {
    color: var(--primary-dark, #1d4ed8);
}

.dark-mode .filter-select {
    background: var(--dark-card-bg, #1e293b);
    border: 2px solid var(--dark-border, #475569);
    color: var(--dark-text, #f8fafc);
}

.dark-mode .filter-select:focus {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Enhanced Table Dark Mode */
.dark-mode .users-table {
    background: var(--dark-card-bg, #1e293b);
}

.dark-mode .users-table th {
    background: linear-gradient(135deg, var(--dark-card-header, #334155) 0%, var(--dark-card-bg, #1e293b) 100%);
    color: var(--dark-text, #f8fafc);
    border-bottom: 3px solid var(--primary-color, #3b82f6);
}

.dark-mode .users-table td {
    color: var(--dark-text, #e2e8f0);
    border-bottom: 1px solid var(--dark-border, #475569);
}

.dark-mode .users-table tbody tr {
    border-left: 3px solid transparent;
}

.dark-mode .users-table tbody tr:hover {
    background: var(--dark-hover, #374151);
    transform: translateX(2px);
    border-left-color: var(--primary-color, #3b82f6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Enhanced Checkbox Dark Mode */
.dark-mode .select-all {
    accent-color: var(--primary-color, #3b82f6);
}

.dark-mode .empty-state i {
    color: var(--primary-color, #3b82f6);
    opacity: 0.8;
}

.dark-mode .empty-state p {
    color: var(--dark-text, #e2e8f0) !important;
    font-weight: 500;
}

.dark-mode .empty-state .btn-primary {
    background: linear-gradient(135deg, var(--primary-color, #3b82f6) 0%, var(--primary-dark, #1d4ed8) 100%);
    color: white;
}

.dark-mode .empty-state .btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark, #1d4ed8) 0%, var(--primary-darker, #1e40af) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

/* Enhanced Action Buttons Dark Mode */
.dark-mode .btn-action {
    background: var(--dark-card-bg, #1e293b);
    border: 1px solid var(--dark-border, #475569);
    color: var(--dark-text-light, #94a3b8);
}

.dark-mode .btn-action:hover {
    background: var(--primary-color, #3b82f6);
    color: white;
    transform: scale(1.1);
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
}

/* Enhanced Bulk Actions Dark Mode */
.dark-mode .bulk-actions {
    background: linear-gradient(135deg, var(--dark-card-header, #334155) 0%, var(--dark-card-bg, #1e293b) 100%);
    border-top: 2px solid var(--dark-border, #475569);
}

.dark-mode .bulk-action-select {
    background: var(--dark-card-bg, #1e293b);
    border: 2px solid var(--dark-border, #475569);
    color: var(--dark-text, #f8fafc);
}

.dark-mode .bulk-action-select:focus {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.dark-mode .bulk-actions .btn {
    background: linear-gradient(135deg, var(--secondary-color, #10b981) 0%, var(--secondary-dark, #047857) 100%);
    color: white;
}

.dark-mode .bulk-actions .btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--secondary-dark, #047857) 0%, var(--secondary-darker, #065f46) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.dark-mode .bulk-actions .btn:disabled {
    background: var(--dark-text-light, #64748b);
    color: var(--dark-text, #f8fafc);
    opacity: 0.6;
}

/* Enhanced Roles Grid Dark Mode */
.dark-mode .role-item {
    background: var(--dark-card-bg, #1e293b);
    border: 1px solid var(--dark-border, #475569);
}

.dark-mode .role-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    border-color: var(--primary-color, #3b82f6);
}

.dark-mode .role-info h4 {
    color: var(--dark-text, #f8fafc);
}

.dark-mode .role-info p {
    color: var(--dark-text-light, #94a3b8);
}

/* Role icons maintain their vibrant colors in dark mode */
.dark-mode .role-icon.admin { 
    background: #ef4444; 
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
}
.dark-mode .role-icon.coach { 
    background: #3b82f6; 
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.4);
}
.dark-mode .role-icon.player { 
    background: #10b981; 
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.4);
}
.dark-mode .role-icon.fan { 
    background: #8b5cf6; 
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.4);
}

/* Enhanced Quick Actions Dark Mode */
.dark-mode .quick-action-btn {
    background: var(--dark-card-bg, #1e293b);
    border: 1px solid var(--dark-border, #475569);
    color: var(--dark-text, #f8fafc);
}

.dark-mode .quick-action-btn:hover {
    background: var(--dark-hover, #374151);
    border-color: var(--primary-color, #3b82f6);
    transform: translateY(-1px);
    color: var(--dark-text, #f8fafc);
}

.dark-mode .quick-action-btn .action-icon {
    background: var(--secondary-color, #10b981);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.4);
}

.dark-mode .action-text h4 {
    color: var(--dark-text, #f8fafc);
}

.dark-mode .action-text p {
    color: var(--dark-text-light, #94a3b8) !important;
}

/* Enhanced Badge Dark Mode */
.dark-mode .badge {
    background: var(--accent-color, #f59e0b);
    color: var(--dark-text, #1f2937);
    font-weight: 600;
}

/* Enhanced Status badges with gradients in dark mode */
.dark-mode .status-active { 
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.4);
}
.dark-mode .status-pending { 
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.4);
}
.dark-mode .status-suspended { 
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
}

/* Enhanced Scrollbar Dark Mode */
.dark-mode .table-container::-webkit-scrollbar-track {
    background: var(--dark-card-header, #334155);
    border-radius: 4px;
}

.dark-mode .table-container::-webkit-scrollbar-thumb {
    background: var(--dark-border, #64748b);
    border-radius: 4px;
}

.dark-mode .table-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color, #3b82f6);
}

/* Enhanced Focus states for accessibility in dark mode */
.dark-mode .search-input:focus,
.dark-mode .filter-select:focus,
.dark-mode .bulk-action-select:focus {
    outline: 2px solid var(--primary-color, #3b82f6);
    outline-offset: 2px;
}

.dark-mode .quick-action-btn:focus,
.dark-mode .btn-action:focus {
    outline: 2px solid var(--primary-color, #3b82f6);
    outline-offset: 2px;
}

/* Enhanced Selection color in dark mode */
.dark-mode ::selection {
    background: var(--primary-color, #3b82f6);
    color: white;
}

.dark-mode ::-moz-selection {
    background: var(--primary-color, #3b82f6);
    color: white;
}

/* Enhanced Responsive adjustments for dark mode */
@media (max-width: 768px) {
    .dark-mode .admin-stats-overview {
        background: transparent;
    }
    
    .dark-mode .users-table th,
    .dark-mode .users-table td {
        border-color: var(--dark-border, #475569);
    }
}

@media (max-width: 480px) {
    .dark-mode .search-input,
    .dark-mode .filter-select {
        border-width: 1px;
    }
    
    .dark-mode .bulk-actions .btn {
        font-size: 0.85rem;
    }
}

/* Enhanced Animation for smooth theme transition */
.dark-mode .role-item,
.dark-mode .quick-action-btn,
.dark-mode .search-input,
.dark-mode .filter-select,
.dark-mode .bulk-action-select,
.dark-mode .btn-action {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced hover effects for dark mode */
.dark-mode .dashboard-card:hover,
.dark-mode .role-item:hover,
.dark-mode .quick-action-btn:hover {
    transform: translateY(-2px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}

/* Enhanced Table row selection in dark mode */
.dark-mode .users-table tbody tr.selected {
    background: linear-gradient(135deg, var(--primary-color, #3b82f6) 0%, var(--primary-dark, #1d4ed8) 100%);
    color: white;
}

.dark-mode .users-table tbody tr.selected:hover {
    background: linear-gradient(135deg, var(--primary-dark, #1d4ed8) 0%, var(--primary-darker, #1e40af) 100%);
}

/* Enhanced Placeholder text in dark mode */
.dark-mode ::placeholder {
    color: var(--dark-text-light, #64748b);
    opacity: 0.8;
}

.dark-mode :-ms-input-placeholder {
    color: var(--dark-text-light, #64748b);
    opacity: 0.8;
}

.dark-mode ::-ms-input-placeholder {
    color: var(--dark-text-light, #64748b);
    opacity: 0.8;
}

/* Additional dark mode enhancements */
.dark-mode .table-container {
    background: var(--dark-card-bg, #1e293b);
}

.dark-mode .users-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.dark-mode .users-table tbody tr:nth-child(even):hover {
    background: var(--dark-hover, #374151);
}

/* Ensure text contrast in dark mode */
.dark-mode .stat-icon,
.dark-mode .role-icon,
.dark-mode .quick-action-btn .action-icon {
    color: white !important;
}

/* Dark mode specific shadows for depth */
.dark-mode .role-item,
.dark-mode .quick-action-btn {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .role-item:hover,
.dark-mode .quick-action-btn:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}

/* Removed empty ruleset for .dark-mode .dashboard-header */

.dark-mode .page-header h1 {
    color: var(--dark-text, #f4f4f5);
}

.dark-mode .period-select {
    background: var(--dark-card-bg, #23232a);
    color: var(--dark-text, #f4f4f5);
    border-color: var(--dark-border, #3f3f46);
}

.dark-mode .period-select:focus {
    border-color: var(--primary-color, #fa5305);
}

.dark-mode .stat-card::before {
    background: linear-gradient(90deg, var(--primary-color, #fa5305), var(--secondary-color, #3a0ca3));
}

.dark-mode .stat-icon {
    background: linear-gradient(135deg, var(--primary-color, #fa5305), var(--secondary-color, #3a0ca3));
    color: #fff;
    box-shadow: 0 4px 12px rgba(250, 83, 5, 0.3);
}

.dark-mode .stat-info h4 {
    color: var(--dark-text, #f4f4f5);
}

.dark-mode .stat-trend.positive {
    color: #10b981;
}
.dark-mode .stat-trend.negative {
    color: #ef4444;
}
.dark-mode .stat-trend.neutral {
    color: #6b7280;
}

.dark-mode .legend-item {
    color: var(--dark-text-light, #a1a1aa);
}

.dark-mode .legend-color.new-users {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}
.dark-mode .legend-color.active-users {
    background: linear-gradient(135deg, #10b981, #047857);
}

.dark-mode .live-indicator {
    color: #ef4444;
}

.dark-mode .pulse-dot {
    background: #ef4444;
}

.dark-mode .chart-control {
    background: var(--dark-card-bg, #23232a);
    color: var(--dark-text-light, #a1a1aa);
    border-color: var(--dark-border, #3f3f46);
}

.dark-mode .chart-control.active {
    background: var(--primary-color, #fa5305);
    color: #fff;
    border-color: var(--primary-color, #fa5305);
}

.dark-mode .chart-control:hover:not(.active) {
    border-color: var(--primary-color, #fa5305);
    color: var(--primary-color, #fa5305);
}

.dark-mode .chart-container {
    background: linear-gradient(135deg, rgba(36,36,40,0.9) 0%, rgba(36,36,40,0.7) 100%);
    border-radius: 8px;
}

.dark-mode .empty-chart-state,
.dark-mode .empty-activity-state,
.dark-mode .empty-geo-state,
.dark-mode .empty-device-state,
.dark-mode .empty-feature-state {
    color: var(--dark-text-light, #a1a1aa);
}

.dark-mode .empty-chart-state i,
.dark-mode .empty-activity-state i,
.dark-mode .empty-geo-state i,
.dark-mode .empty-device-state i,
.dark-mode .empty-feature-state i {
    color: var(--primary-color, #fa5305);
    opacity: 0.7;
}

.dark-mode .empty-chart-state p,
.dark-mode .empty-activity-state p,
.dark-mode .empty-geo-state p,
.dark-mode .empty-device-state p,
.dark-mode .empty-feature-state p {
    color: var(--dark-text, #f4f4f5);
}

.dark-mode .empty-chart-state small,
.dark-mode .empty-activity-state small,
.dark-mode .empty-geo-state small,
.dark-mode .empty-device-state small,
.dark-mode .empty-feature-state small {
    color: var(--dark-text-light, #a1a1aa);
}

.dark-mode .metric-item {
    background: var(--dark-card-bg, #23232a);
    border-color: var(--dark-border, #3f3f46);
}

.dark-mode .metric-item:hover {
    box-shadow: var(--shadow, 0 4px 6px rgba(0,0,0,0.3));
    border-color: var(--primary-color, #fa5305);
}

.dark-mode .metric-value {
    color: var(--dark-text, #f4f4f5);
}

.dark-mode .metric-label {
    color: var(--dark-text-light, #a1a1aa);
}

.dark-mode .metric-change.positive {
    color: #10b981;
}
.dark-mode .metric-change.negative {
    color: #ef4444;
}

.dark-mode .activity-feed {
    background: var(--dark-card-bg, #23232a);
}

.dark-mode .activity-feed::-webkit-scrollbar-track {
    background: var(--dark-card-header, #27272a);
}

.dark-mode .activity-feed::-webkit-scrollbar-thumb {
    background: var(--dark-border, #3f3f46);
}

.dark-mode .activity-feed::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color, #fa5305);
}

.dark-mode canvas {
    background: transparent;
}

.dark-mode .metric-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-mode .chart-container {
    background: linear-gradient(135deg, rgba(36,36,40,0.9) 0%, rgba(36,36,40,0.7) 100%);
    border-radius: 8px;
    margin: 0 20px 20px 20px;
}

.dark-mode .chart-container.loading {
    background: var(--dark-card-header, #27272a);
}

.dark-mode .chart-container.loading::after {
    color: var(--dark-text-light, #a1a1aa);
}


/* Dark Mode Styles for Admin Settings Popup */
.dark-mode .admin-settings-popup-overlay {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px) saturate(200%);
    -webkit-backdrop-filter: blur(12px) saturate(200%);
}

.dark-mode .admin-settings-popup {
    background: rgba(30, 30, 35, 0.95);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px) saturate(200%);
    -webkit-backdrop-filter: blur(15px) saturate(200%);
}

.dark-mode .admin-settings-popup-header {
    background: #fa5305;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .admin-settings-popup-content {
    background: transparent;
}

.dark-mode .admin-settings-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .admin-settings-section h3 {
    color: #fa5305;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .admin-settings-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dark-mode .admin-settings-item:last-child {
    border-bottom: none;
}

.dark-mode .admin-settings-item-label {
    color: #e0e0e0;
    font-weight: 500;
}

.dark-mode .admin-settings-item-description {
    color: #a0a0a0;
}

/* Dark Mode Toggle Switch */
.dark-mode .admin-settings-toggle-slider {
    background-color: #555;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .admin-settings-toggle-slider:before {
    background-color: #e0e0e0;
}

.dark-mode input:checked + .admin-settings-toggle-slider {
    background-color: #fa5305;
    border-color: #fa5305;
}

.dark-mode input:checked + .admin-settings-toggle-slider:before {
    background-color: #ffffff;
}

/* Dark Mode Select Styles */
.dark-mode .admin-settings-select {
    background: rgba(45, 45, 50, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
}

.dark-mode .admin-settings-select:focus {
    border-color: #fa5305;
    box-shadow: 0 0 0 3px rgba(250, 83, 5, 0.3);
    background: rgba(50, 50, 55, 0.95);
}

.dark-mode .admin-settings-select option {
    background: #2d2d32;
    color: #e0e0e0;
}

/* Dark Mode Input Styles */
.dark-mode .admin-settings-input {
    background: rgba(45, 45, 50, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
}

.dark-mode .admin-settings-input:focus {
    border-color: #fa5305;
    box-shadow: 0 0 0 3px rgba(250, 83, 5, 0.3);
    background: rgba(50, 50, 55, 0.95);
}

.dark-mode .admin-settings-input:disabled {
    background: rgba(60, 60, 65, 0.5);
    color: #888;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Dark Mode Badge Styles */
.dark-mode .admin-settings-badge {
    background: rgba(250, 83, 5, 0.2);
    color: #ff7b3d;
    border: 1px solid rgba(250, 83, 5, 0.3);
}

/* Dark Mode Button Styles */
.dark-mode .admin-settings-btn-primary {
    background: #fa5305;
    color: white;
    border: 1px solid #fa5305;
}

.dark-mode .admin-settings-btn-primary:hover {
    background: #e04a04;
    border-color: #e04a04;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(250, 83, 5, 0.4);
}

.dark-mode .admin-settings-btn-secondary {
    background: rgba(60, 60, 65, 0.8);
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .admin-settings-btn-secondary:hover {
    background: rgba(80, 80, 85, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.dark-mode .admin-settings-btn-outline {
    background: transparent;
    color: #fa5305;
    border: 1px solid #fa5305;
}

.dark-mode .admin-settings-btn-outline:hover {
    background: rgba(250, 83, 5, 0.15);
    color: #ff7b3d;
    border-color: #ff7b3d;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(250, 83, 5, 0.2);
}

/* Dark Mode Alert Styles */
.dark-mode .admin-settings-alert-info {
    background: rgba(250, 83, 5, 0.15);
    color: #ff7b3d;
    border-left: 3px solid #fa5305;
    border: 1px solid rgba(250, 83, 5, 0.2);
}

.dark-mode .admin-settings-alert-warning {
    background: rgba(255, 193, 7, 0.15);
    color: #ffd54f;
    border-left: 3px solid #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.2);
}

.dark-mode .admin-settings-alert i {
    color: inherit;
}

/* Dark Mode Role Permissions Section */
.dark-mode .admin-role-permissions {
    background: rgba(250, 83, 5, 0.08);
    border: 1px solid rgba(250, 83, 5, 0.15);
    border-radius: 8px;
}

.dark-mode .admin-role-permissions h4 {
    color: #ff7b3d;
}

.dark-mode .permission-item {
    color: #b0b0b0;
}

.dark-mode .permission-item i {
    color: #fa5305;
}

/* Dark Mode Scrollbar */
.dark-mode .admin-settings-popup::-webkit-scrollbar {
    width: 8px;
}

.dark-mode .admin-settings-popup::-webkit-scrollbar-track {
    background: rgba(30, 30, 35, 0.8);
    border-radius: 4px;
}

.dark-mode .admin-settings-popup::-webkit-scrollbar-thumb {
    background: rgba(250, 83, 5, 0.4);
    border-radius: 4px;
}

.dark-mode .admin-settings-popup::-webkit-scrollbar-thumb:hover {
    background: rgba(250, 83, 5, 0.6);
}

/* Dark Mode Focus States */
.dark-mode .admin-settings-btn:focus,
.dark-mode .admin-settings-select:focus,
.dark-mode .admin-settings-input:focus,
.dark-mode .admin-settings-toggle input:focus + .admin-settings-toggle-slider {
    outline: 2px solid #fa5305;
    outline-offset: 2px;
}

/* Dark Mode Transitions */
.dark-mode .admin-settings-popup,
.dark-mode .admin-settings-popup-overlay,
.dark-mode .admin-settings-btn,
.dark-mode .admin-settings-toggle-slider,
.dark-mode .admin-settings-select,
.dark-mode .admin-settings-input {
    transition: all 0.3s ease;
}

/* Dark Mode Responsive Adjustments */
@media (max-width: 768px) {
    .dark-mode .admin-settings-popup {
        background: rgba(30, 30, 35, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .dark-mode .admin-settings-item {
        background: rgba(40, 40, 45, 0.5);
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 8px;
    }
    
    .dark-mode .admin-settings-item:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .dark-mode .admin-settings-popup-header {
        background: #fa5305;
    }
    
    .dark-mode .admin-settings-popup-content {
        background: transparent;
    }
    
    .dark-mode .admin-settings-actions {
        gap: 8px;
    }
}

/* Dark Mode Animation Enhancements */
.dark-mode .admin-settings-popup-overlay.active .admin-settings-popup {
    animation: darkPopupScaleIn 0.3s ease-out;
}

@keyframes darkPopupScaleIn {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Dark Mode Hover Effects */
.dark-mode .admin-settings-close:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
}

.dark-mode .admin-settings-item:hover {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    transition: all 0.2s ease;
}

/* Dark Mode Text Selection */
.dark-mode .admin-settings-popup ::selection {
    background: rgba(250, 83, 5, 0.3);
    color: #ffffff;
}

.dark-mode .admin-settings-popup ::-moz-selection {
    background: rgba(250, 83, 5, 0.3);
    color: #ffffff;
}

/* Dark Mode Placeholder Text */
.dark-mode .admin-settings-input::placeholder {
    color: #888;
}

.dark-mode .admin-settings-select:invalid {
    color: #888;
}

/* Dark Mode Disabled States */
.dark-mode .admin-settings-btn:disabled {
    background: rgba(80, 80, 85, 0.5);
    color: #666;
    border-color: rgba(255, 255, 255, 0.1);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.dark-mode .admin-settings-btn:disabled:hover {
    background: rgba(80, 80, 85, 0.5);
    color: #666;
    border-color: rgba(255, 255, 255, 0.1);
    transform: none;
    box-shadow: none;
}


/* Dark Mode Styles for Admin Profile Popup */
.dark-mode .admin-profile-popup-overlay {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px) saturate(200%);
    -webkit-backdrop-filter: blur(12px) saturate(200%);
}

.dark-mode .admin-profile-popup {
    background: rgba(30, 30, 35, 0.95);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px) saturate(200%);
    -webkit-backdrop-filter: blur(15px) saturate(200%);
}

.dark-mode .admin-profile-popup-header {
    background: #fa5305;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .admin-profile-popup-content {
    background: transparent;
}

.dark-mode .admin-profile-avatar .avatar {
    background: #fa5305;
    border: 3px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .avatar-edit {
    background: #fa5305;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .avatar-edit:hover {
    background: #e04a04;
    border-color: rgba(255, 255, 255, 0.2);
}

.dark-mode .admin-profile-info-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .admin-profile-info-section h3 {
    color: #fa5305;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .admin-profile-detail-label {
    color: #b0b0b0;
}

.dark-mode .admin-profile-detail-value {
    background: rgba(250, 83, 5, 0.12);
    color: #e0e0e0;
    border-left: 3px solid #fa5305;
}

/* Dark Mode Form Styles */
.dark-mode .admin-profile-form-label {
    color: #b0b0b0;
}

.dark-mode .admin-profile-form-control {
    background: rgba(45, 45, 50, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
}

.dark-mode .admin-profile-form-control:focus {
    border-color: #fa5305;
    box-shadow: 0 0 0 3px rgba(250, 83, 5, 0.3);
    background: rgba(50, 50, 55, 0.95);
}

.dark-mode .admin-profile-form-control:disabled {
    background-color: rgba(60, 60, 65, 0.5);
    color: #888;
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .admin-profile-form-control::placeholder {
    color: #888;
}

/* Dark Mode Button Styles */
.dark-mode .admin-profile-btn-primary {
    background: #fa5305;
    color: white;
    border: 1px solid #fa5305;
}

.dark-mode .admin-profile-btn-primary:hover {
    background: #e04a04;
    border-color: #e04a04;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(250, 83, 5, 0.4);
}

.dark-mode .admin-profile-btn-secondary {
    background: rgba(60, 60, 65, 0.8);
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .admin-profile-btn-secondary:hover {
    background: rgba(80, 80, 85, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.dark-mode .admin-profile-btn-outline {
    background: transparent;
    color: #fa5305;
    border: 1px solid #fa5305;
}

.dark-mode .admin-profile-btn-outline:hover {
    background: rgba(250, 83, 5, 0.15);
    color: #ff7b3d;
    border-color: #ff7b3d;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(250, 83, 5, 0.2);
}

/* Dark Mode Toggle Switch */
.dark-mode .admin-profile-edit-toggle {
    color: white;
}

.dark-mode .admin-profile-toggle-slider {
    background-color: #555;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .admin-profile-toggle-slider:before {
    background-color: #e0e0e0;
}

/* Dark Mode Alert Styles */
.dark-mode .admin-profile-alert-info {
    background: rgba(250, 83, 5, 0.15);
    color: #ff7b3d;
    border-left: 3px solid #fa5305;
    border: 1px solid rgba(250, 83, 5, 0.2);
}

.dark-mode .admin-profile-alert-warning {
    background: rgba(255, 193, 7, 0.15);
    color: #ffd54f;
    border-left: 3px solid #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.2);
}

.dark-mode .admin-profile-alert i {
    color: inherit;
}

/* Dark Mode Close Button */
.dark-mode .admin-profile-close:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
}

/* Dark Mode Scrollbar */
.dark-mode .admin-profile-popup::-webkit-scrollbar {
    width: 8px;
}

.dark-mode .admin-profile-popup::-webkit-scrollbar-track {
    background: rgba(30, 30, 35, 0.8);
    border-radius: 4px;
}

.dark-mode .admin-profile-popup::-webkit-scrollbar-thumb {
    background: rgba(250, 83, 5, 0.4);
    border-radius: 4px;
}

.dark-mode .admin-profile-popup::-webkit-scrollbar-thumb:hover {
    background: rgba(250, 83, 5, 0.6);
}

/* Dark Mode Focus States */
.dark-mode .admin-profile-btn:focus,
.dark-mode .admin-profile-form-control:focus,
.dark-mode .admin-profile-toggle input:focus + .admin-profile-toggle-slider {
    outline: 2px solid #fa5305;
    outline-offset: 2px;
}

/* Dark Mode Transitions */
.dark-mode .admin-profile-popup,
.dark-mode .admin-profile-popup-overlay,
.dark-mode .admin-profile-btn,
.dark-mode .admin-profile-toggle-slider,
.dark-mode .admin-profile-form-control {
    transition: all 0.3s ease;
}

/* Dark Mode Responsive Adjustments */
@media (max-width: 768px) {
    .dark-mode .admin-profile-popup {
        background: rgba(30, 30, 35, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .dark-mode .admin-profile-detail-item {
        background: rgba(40, 40, 45, 0.5);
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 8px;
    }
    
    .dark-mode .admin-profile-detail-item:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .dark-mode .admin-profile-popup-header {
        background: #fa5305;
    }
    
    .dark-mode .admin-profile-popup-content {
        background: transparent;
    }
    
    .dark-mode .admin-profile-actions {
        gap: 8px;
    }
}

/* Dark Mode Animation Enhancements */
.dark-mode .admin-profile-popup-overlay.active .admin-profile-popup {
    animation: darkProfilePopupScaleIn 0.3s ease-out;
}

@keyframes darkProfilePopupScaleIn {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Dark Mode Hover Effects */
.dark-mode .admin-profile-close:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
}

.dark-mode .admin-profile-detail-item:hover {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    transition: all 0.2s ease;
}

/* Dark Mode Text Selection */
.dark-mode .admin-profile-popup ::selection {
    background: rgba(250, 83, 5, 0.3);
    color: #ffffff;
}

.dark-mode .admin-profile-popup ::-moz-selection {
    background: rgba(250, 83, 5, 0.3);
    color: #ffffff;
}

/* Dark Mode Disabled States */
.dark-mode .admin-profile-btn:disabled {
    background: rgba(80, 80, 85, 0.5);
    color: #666;
    border-color: rgba(255, 255, 255, 0.1);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.dark-mode .admin-profile-btn:disabled:hover {
    background: rgba(80, 80, 85, 0.5);
    color: #666;
    border-color: rgba(255, 255, 255, 0.1);
    transform: none;
    box-shadow: none;
}

/* Dark Mode Edit Mode Enhancements */
.dark-mode .admin-profile-edit-mode .admin-profile-detail-value {
    display: none;
}

.dark-mode .admin-profile-edit-mode .admin-profile-form-control {
    display: block;
}

/* Dark Mode Select Dropdown Styling */
.dark-mode .admin-profile-form-control[type="select"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23fa5305' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
}

/* Dark Mode Input Group Enhancements */
.dark-mode .admin-profile-detail-item:focus-within {
    background: rgba(250, 83, 5, 0.05);
    border-radius: 6px;
    transition: all 0.2s ease;
}

/* Dark Mode Loading States */
.dark-mode .admin-profile-btn.loading {
    background: rgba(80, 80, 85, 0.7);
    color: transparent;
    position: relative;
}

.dark-mode .admin-profile-btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid #fa5305;
    border-radius: 50%;
    animation: darkSpin 1s linear infinite;
}

@keyframes darkSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Dark Mode Success States */
.dark-mode .admin-profile-btn.success {
    background: #28a745;
    border-color: #28a745;
}

.dark-mode .admin-profile-btn.success:hover {
    background: #218838;
    border-color: #218838;
}

/* Dark Mode Error States */
.dark-mode .admin-profile-form-control.error {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

.dark-mode .admin-profile-btn.error {
    background: #dc3545;
    border-color: #dc3545;
}

.dark-mode .admin-profile-btn.error:hover {
    background: #c82333;
    border-color: #c82333;
}

/* === CUSTOM TOOLTIP STYLES === */
/* === DARK MODE STYLES === */
@media (prefers-color-scheme: dark) {
  .custom-tooltip {
    color: rgba(255, 255, 255, 0.95);
  }
  
  .custom-tooltip::before {
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.3),
      0 2px 8px rgba(0, 0, 0, 0.2);
  }
  
  .custom-tooltip::after {
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* === POSITION VARIANTS === */

/* Top position */
.custom-tooltip.top {
  transform: translate(-50%, -8px);
}

.custom-tooltip.top::after {
  left: 50%;
  top: 100%;
  transform: translateX(-50%) rotate(45deg);
}

.custom-tooltip.top.show {
  transform: translate(-50%, -12px);
}

/* Bottom position */
.custom-tooltip.bottom {
  transform: translate(-50%, 8px);
}

.custom-tooltip.bottom::after {
  left: 50%;
  top: -6px;
  transform: translateX(-50%) rotate(45deg);
}

.custom-tooltip.bottom.show {
  transform: translate(-50%, 12px);
}

/* Left position */
.custom-tooltip.left {
  transform: translate(-8px, -50%);
}

.custom-tooltip.left::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.custom-tooltip.left.show {
  transform: translate(-12px, -50%);
}

/* Right position (default) */
.custom-tooltip.right {
  transform: translate(8px, -50%);
}

.custom-tooltip.right::after {
  left: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.custom-tooltip.right.show {
  transform: translate(12px, -50%);
}

/* === SIZE VARIANTS === */
.custom-tooltip.small .custom-tooltip-content {
  padding: 8px 12px;
  font-size: 12px;
}

.custom-tooltip.large .custom-tooltip-content {
  padding: 10px 14px;
  font-size: 14px;
  white-space: normal;
  max-width: 300px;
}

/* === MULTILINE SUPPORT === */
.custom-tooltip.multiline .custom-tooltip-content {
  white-space: normal;
  max-width: 280px;
  text-align: center;
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
  .custom-tooltip {
    transition: opacity 0.1s ease;
  }
}

/* Hide native tooltips when custom tooltip is active */
body.custom-tooltip-active [title] {
  pointer-events: none;
}


/* Dark mode styles for create-team.php */
.dark-mode .card-header i {
    color: #ff6c16;
}


/* Labels & Text */
.dark-mode .form-label {
    color: #ddd;
}

/* Inputs */
.dark-mode .form-control.color-picker {
    background: transparent;
    cursor: pointer;
}

.dark-mode .form-control.color-text {
    background: #2a2a2a;
    color: #f1f1f1;
}

.dark-mode .form-control.color-text:focus {
    border-color: #ff6c16;
    outline: none;
}


/* Logo Upload */
.dark-mode .logo-upload-area {
    background: #2a2a2a;
}

.dark-mode .logo-preview {
    border: 1px solid #444;
}


/* Buttons */
.dark-mode .btn.btn-outline {
    background: transparent;
    color: #f1f1f1;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #666;
    transition: background 0.2s, color 0.2s;
}

.dark-mode .btn.btn-outline:hover {
    background: #ff6c16;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    border-color: #ff6c16;
}

/* File Input (Hidden) */
.dark-mode input[type="file"] {
    display: none;
}


.dark-mode .channel-label {
    color: white;
}

.dark-mode .create-content-form .form-group {
    color: var(--primary-color);
}

.dark-mode .create-content-form .form-control {
    background: #2a2a2a;
    color: #f1f1f1;
    border: 1px solid #444;
}

.dark-mode .image-upload-area {
    background: #2a2a2a;
    color: var(--primary-color);
}


/* Dark mode styles for .quick-actions-mini and .action-mini-card */
.dark-mode .action-mini-card {
    background: var(--dark-card-bg, #23232a);
    color: var(--dark-text, #f4f4f5);
    border: 1px solid var(--dark-border, #3f3f46);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.dark-mode .action-mini-card:hover {
    border-color: var(--primary-color, #fa5305);
    color: var(--dark-text, #fff);
    box-shadow: 0 8px 18px rgba(0,0,0,0.4);
}

.dark-mode .action-mini-icon {
    background: var(--primary-color, #fa5305);
    color: #fff;
}

.dark-mode .action-mini-info h4 {
    color: var(--dark-text, #f4f4f5);
}

.dark-mode .action-mini-info p {
    color: var(--dark-text-light, #a1a1aa);
}


/* Button Styles */
.dark-mode .content-actions .btn {
    background: var(--dark-card-bg, #23232a);
    color: var(--dark-text, #f4f4f5);
    border: 1px solid var(--dark-border, #3f3f46);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}


/* Video Information */
/* To have primary text color */
.dark-mode .video-title,
.dark-mode .video-description,
.dark-mode .video-category,
.dark-mode .video-team,
.dark-mode .video-tags {
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.9rem;
}


.dark-mode .video-allow {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.85rem;
}

.dark-mode .form-actions .postbtn, .dark-mode .createbtn {
    background: var(--primary-color);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.dark-mode .form-actions .postbtn:hover, .dark-mode .createbtn:hover {
    background: #e04a04;
    box-shadow: 0 6px 20px rgba(250, 83, 5, 0.4);
}

.dark-mode .form-actions .postbtn:disabled {
    background: rgba(80, 80, 85, 0.5);
    color: #666;
    cursor: not-allowed;
    box-shadow: none;
}

.dark-mode .form-actions .cancelbtn {
    background: rgba(60, 60, 65, 0.8);
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.dark-mode .form-actions .cancelbtn:hover {
    background: rgba(80, 80, 85, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.dark-mode .uploadBtn {
    background: var(--primary-color);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.dark-mode .uploadBtn:hover {
    background: #e04a04;
    box-shadow: 0 6px 20px rgba(250, 83, 5, 0.4);
}


.dark-mode .view-option {
    padding: 6px 10px;
    border: 1px solid var(--dark-border, #3f3f46);
    background: var(--dark-card-bg, #23232a);
    color: var(white, #a1a1aa);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dark-mode .view-option:hover {
    color: var(--primary-color, #fa5305);
    background: var(--dark-hover, #27272a);
}

.dark-mode .view-option.active {
    background: var(black, whitesmoke);
    border-color: var(--primary-color, white);
    color: #fff;
}



/* Dark Mode Styles for Performance Grid */
.dark-mode .performance-grid {
    background: transparent;
}

.dark-mode .performance-card {
    background: #23232a !important;
    color: white !important;
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .performance-column .chart-container {
    background: #23233a !important;
}

.dark-mode .performance-card .card-header {
    background: var(--dark-card-header, #1a202c);
    border-bottom: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .performance-card .card-header h3 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .time-filter select,
.dark-mode .stat-filters select {
    background: var(--dark-card-bg, #2d3748);
    border: 1px solid var(--dark-border-color, #4a5568);
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .time-filter select:focus,
.dark-mode .stat-filters select:focus {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.dark-mode .card-content {
    background: transparent !important;
}

.dark-mode .stat-item {
    background: var(--dark-card-header, #1a202c);
    color: red !important;
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .stat-value {
    color: var(--primary-color, #60a5fa);
}

.dark-mode .stat-label {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .training-stat {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .training-info h4 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .training-value {
    color: var(--primary-color, #60a5fa);
}

.dark-mode .detailed-stats-section {
    background: var(--dark-card-bg, #2d3748);
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .section-header h2 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .stats-table {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .stats-table th {
    background: var(--primary-color, #1e40af);
    color: white;
    border-bottom: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .stats-table td {
    color: var(--dark-text-color, #e2e8f0);
    border-bottom: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .stats-table tr:hover {
    background: var(--dark-hover-color, #2d3748);
}

.dark-mode .empty-state small {
    color: var(--dark-text-light, #718096);
    opacity: 0.8;
}

/* Chart container dark mode adjustments */
.dark-mode .chart-container {
    background: var(--dark-card-header, #1a202c);
    border-radius: 8px;
    border: 1px solid var(--dark-border-color, #4a5568);
}


/* Badges grid dark mode */
.dark-mode .badges-grid {
    background: transparent;
}

/* Feedback list dark mode */
.dark-mode .feedback-list {
    background: transparent;
}

/* Training stats container */
.dark-mode .training-stats {
    background: transparent;
}

/* Stats grid container */
.dark-mode .stats-grid {
    background: transparent;
}


/* Dark Mode Styles for Training Page */
.dark-mode .player-training {
    background: transparent;
}

.dark-mode .training-grid {
    background: transparent;
}

.dark-mode .training-card {
    background: #23232a !important;
    color: white !important;
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .training-card .card-header {
    background: var(--dark-card-header, #1a202c);
    border-bottom: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .training-card .card-header h3 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .time-filter select,
.dark-mode .schedule-filters select {
    background: var(--dark-card-bg, #2d3748);
    border: 1px solid var(--dark-border-color, #4a5568);
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .time-filter select:focus,
.dark-mode .schedule-filters select:focus {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.dark-mode .card-content {
    background: transparent !important;
}

.dark-mode .stat-item {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .stat-value {
    color: var(--primary-color, #60a5fa);
}

.dark-mode .stat-label {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .training-overview .stat-card {
    background: #23232a !important;
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .training-overview .stat-info h3 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .training-overview .stat-info p {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .upload-area {
    background: var(--dark-card-header, #1a202c);
    border: 2px dashed var(--dark-border-color, #4a5568);
}

.dark-mode .upload-area:hover {
    border-color: var(--primary-color, #3b82f6);
    background: var(--dark-hover-color, #2d3748);
}

.dark-mode .upload-area i {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .upload-area p {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .upload-area small {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .sessions-list,
.dark-mode .uploads-list,
.dark-mode .goals-list {
    background: transparent;
}

.dark-mode .training-schedule-section {
    background: var(--dark-card-bg, #2d3748);
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .section-header h2 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .schedule-container {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .schedule-list {
    background: transparent;
}

/* Stats grid container */
.dark-mode .stats-grid {
    background: transparent;
}

/* Upload actions container */
.dark-mode .upload-actions {
    background: transparent;
}

/* Upload section container */
.dark-mode .upload-section {
    background: transparent;
}

/* Training overview container */
.dark-mode .training-overview {
    background: transparent;
}

/* Page header dark mode */
.dark-mode .page-header h1 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .page-header p {
    color: var(--dark-text-light, #a0aec0);
}



/* Dark Mode Styles for Matches Page */
.dark-mode .player-matches {
    background: transparent;
}

.dark-mode .matches-grid {
    background: transparent;
}

.dark-mode .matches-card {
    background: #23232a !important;
    color: white !important;
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .matches-card .card-header {
    background: var(--dark-card-header, #1a202c);
    border-bottom: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .matches-card .card-header h3 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .time-filter select,
.dark-mode .matches-filters select {
    background: var(--dark-card-bg, #2d3748);
    border: 1px solid var(--dark-border-color, #4a5568);
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .time-filter select:focus,
.dark-mode .matches-filters select:focus {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}


.dark-mode .position-filter, .dark-mode .type-filter, .dark-mode .time-filter {
    padding: 4px 12px;
    border-radius: 6px;
    background: var(--dark-card-bg, #2d3748) !important;
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .card-content {
    background: transparent !important;
}

.dark-mode .stat-item {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .stat-value {
    color: var(--primary-color, #60a5fa);
}

.dark-mode .stat-label {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .matches-overview .stat-card {
    background: #23232a !important;
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .matches-overview .stat-info h3 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .matches-overview .stat-info p {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .formation-field {
    background: #1e4620;
    border: 1px solid #2e7d32;
}

.dark-mode .formation-line {
    background: rgba(255, 255, 255, 0.2);
}

.dark-mode .formation-info h4 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .formation-info p {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .matches-list,
.dark-mode .opponent-info,
.dark-mode .preparation-list {
    background: transparent;
}

.dark-mode .recent-matches-section {
    background: var(--dark-card-bg, #2d3748);
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .section-header h2 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .section-header {
    background: var(--dark-card-header, #1a202c) !important;
}

.dark-mode .matches-table-container {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .matches-table {
    background: transparent;
}

.dark-mode .matches-table th {
    background: var(--primary-color, #1e40af);
    color: white;
    border-bottom: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .matches-table td {
    color: var(--dark-text-color, #e2e8f0);
    border-bottom: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .matches-table tr:hover {
    background: var(--dark-hover-color, #2d3748);
}

/* Stats grid container */
.dark-mode .stats-grid {
    background: transparent;
}

/* Tactics section container */
.dark-mode .tactics-section {
    background: transparent;
}

/* Formation preview container */
.dark-mode .formation-preview {
    background: transparent;
}

/* Matches overview container */
.dark-mode .matches-overview {
    background: transparent;
}

/* Page header dark mode */
.dark-mode .page-header h1 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .page-header p {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .matches-filter, .dark-mode .results-filter {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--dark-card-bg, #2d3748) !important;
    color: var(--dark-text-color, #e2e8f0);
}


/* Dark Mode Styles for Team Page */
.dark-mode .player-team {
    background: transparent;
}

.dark-mode .team-grid {
    background: transparent;
}

.dark-mode .team-card {
    background: #23232a !important;
    color: white !important;
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .team-card .card-header {
    background: var(--dark-card-header, #1a202c);
    border-bottom: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .team-card .card-header h3 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .position-filter select,
.dark-mode .schedule-filters select {
    background: var(--dark-card-bg, #2d3748);
    border: 1px solid var(--dark-border-color, #4a5568);
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .position-filter select:focus,
.dark-mode .schedule-filters select:focus {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.dark-mode .card-content {
    background: transparent !important;
}

.dark-mode .stat-item {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .stat-value {
    color: var(--primary-color, #60a5fa);
}

.dark-mode .stat-label {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .team-overview .stat-card {
    background: #23232a !important;
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .team-overview .stat-info h3 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .team-overview .stat-info p {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .player-item {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .player-name {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .player-position {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .announcement-item,
.dark-mode .chat-message,
.dark-mode .staff-item {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .roster-list,
.dark-mode .announcements-list,
.dark-mode .chat-preview,
.dark-mode .staff-list {
    background: transparent;
}

.dark-mode .team-schedule-section {
    background: var(--dark-card-bg, #2d3748);
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .section-header h2 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .section-header {
    background: var(--dark-card-header, #1a202c) !important;
}

.dark-mode .schedule-container {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .schedule-list {
    background: transparent;
}

/* Stats grid container */
.dark-mode .stats-grid {
    background: transparent;
}

/* Roster list container */
.dark-mode .roster-list {
    background: transparent;
}

/* Team overview container */
.dark-mode .team-overview {
    background: transparent;
}

/* Page header dark mode */
.dark-mode .page-header h1 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .page-header p {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .schedule-type, .dark-mode .schedule-timeframe {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--dark-card-bg, #2d3748) !important;
    color: var(--dark-text-color, #e2e8f0);
}

/* Player avatar dark mode */
.dark-mode .player-avatar {
    background: var(--secondary-color);
    color: white;
}

/* Player number dark mode */
.dark-mode .player-number {
    background: var(--primary-color);
    color: white;
}


/* Dark Mode Styles for Fans Page */
.dark-mode .player-fans {
    background: transparent;
}

.dark-mode .fans-grid {
    background: transparent;
}

.dark-mode .fans-card {
    background: #23232a !important;
    color: white !important;
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .fans-card .card-header {
    background: var(--dark-card-header, #1a202c);
    border-bottom: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .fans-card .card-header h3 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .interaction-filter select,
.dark-mode .social-filters select {
    background: var(--dark-card-bg, #2d3748);
    border: 1px solid var(--dark-border-color, #4a5568);
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .interaction-filter select:focus,
.dark-mode .social-filters select:focus {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.dark-mode .card-content {
    background: transparent !important;
}

.dark-mode .stat-item {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .stat-value {
    color: var(--primary-color, #60a5fa);
}

.dark-mode .stat-label {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .fans-overview .stat-card {
    background: #23232a !important;
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .fans-overview .stat-info h3 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .fans-overview .stat-info p {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .post-input textarea {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .post-input textarea:focus {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.dark-mode .action-btn {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
    color: var(--dark-text-color, #e2e8f0);
}

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

.dark-mode .interaction-item,
.dark-mode .qa-item,
.dark-mode .message-item {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .fan-name {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .interaction-text,
.dark-mode .qa-question,
.dark-mode .message-text {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .interaction-time,
.dark-mode .qa-time,
.dark-mode .message-time {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .interactions-list,
.dark-mode .qa-sessions,
.dark-mode .messages-list {
    background: transparent;
}

.dark-mode .social-media-section {
    background: var(--dark-card-bg, #2d3748);
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .section-header h2 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .section-header {
    background: var(--dark-card-header, #1a202c) !important;
}

.dark-mode .social-stats-container {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .social-stats-grid {
    background: transparent;
}

/* Stats grid container */
.dark-mode .stats-grid {
    background: transparent;
}

/* Post creation container */
.dark-mode .post-creation {
    background: transparent;
}

/* Fans overview container */
.dark-mode .fans-overview {
    background: transparent;
}

/* Page header dark mode */
.dark-mode .page-header h1 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .page-header p {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .social-platform, .dark-mode .social-timeframe {
    background: var(--dark-card-bg, #2d3748) !important;
    color: var(--dark-text-color, #e2e8f0);
}

/* Fan avatar dark mode */
.dark-mode .fan-avatar {
    background: var(--secondary-color);
    color: white;
}

.dark-mode .type-filter,
.dark-mode .timeframe-filter,
.dark-mode .platform-filter {
    background: var(--dark-card-bg, #2d3748) !important;
    color: var(--dark-text-color, #e2e8f0);
    border: 1px solid var(--dark-border-color, #4a5568);
}



/* Dark Mode Styles for Achievements Page */
.dark-mode .player-achievements {
    background: transparent;
}

.dark-mode .achievements-grid {
    background: transparent;
}

.dark-mode .achievements-card {
    background: #23232a !important;
    color: white !important;
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .achievements-card .card-header {
    background: var(--dark-card-header, #1a202c);
    border-bottom: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .achievements-card .card-header h3 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .achievement-filter select,
.dark-mode .badges-filters select {
    background: var(--dark-card-bg, #2d3748);
    border: 1px solid var(--dark-border-color, #4a5568);
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .achievement-filter select:focus,
.dark-mode .badges-filters select:focus {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.dark-mode .card-content {
    background: transparent !important;
}

.dark-mode .stat-item {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .stat-value {
    color: var(--primary-color, #60a5fa);
}

.dark-mode .stat-label {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .achievements-overview .stat-card {
    background: #23232a !important;
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .achievements-overview .stat-info h3 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .achievements-overview .stat-info p {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .featured-badge {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .badge-info h4 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .badge-info p {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .level-number {
    color: var(--primary-color, #60a5fa);
}

.dark-mode .level-name {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .progress-stats {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .achievement-item,
.dark-mode .challenge-item {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .achievement-name,
.dark-mode .challenge-name {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .achievement-desc,
.dark-mode .challenge-desc {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .achievement-progress,
.dark-mode .challenge-progress {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .achievements-list,
.dark-mode .challenges-list {
    background: transparent;
}

.dark-mode .badges-collection-section {
    background: var(--dark-card-bg, #2d3748);
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .section-header h2 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .section-header {
    background: var(--dark-card-header, #1a202c) !important;
}

.dark-mode .badges-container {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .badges-grid {
    background: transparent;
}

.dark-mode .badge-item.locked .badge-icon {
    background: var(--dark-border-color, #4a5568);
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .badge-title {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .badge-desc {
    color: var(--dark-text-light, #a0aec0);
}

/* Stats grid container */
.dark-mode .stats-grid {
    background: transparent;
}

/* Level progress container */
.dark-mode .level-progress {
    background: transparent;
}

/* Achievements overview container */
.dark-mode .achievements-overview {
    background: transparent;
}

/* Page header dark mode */
.dark-mode .page-header h1 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .page-header p {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .badges-category, .dark-mode .badges-status {
    background: var(--dark-card-bg, #2d3748) !important;
    color: var(--dark-text-color, #e2e8f0);
}

/* Achievement icon dark mode */
.dark-mode .achievement-icon,
.dark-mode .challenge-icon {
    background: var(--secondary-color);
    color: white;
}


.dark-mode .achievements-card {
    background: #23232a !important;
    color: white !important;
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}


.dark-mode .type-filter, .dark-mode .category-filter, .dark-mode .status-filter {
    background: var(--dark-card-bg, #2d3748) !important;
    color: var(--dark-text-color, #e2e8f0);
    border: 1px solid var(--dark-border-color, #4a5568);
}


/* Dark Mode Styles for Coach Team Page */
.dark-mode .coach-team {
    background: transparent;
}

.dark-mode .team-grid {
    background: transparent;
}

.dark-mode .team-card {
    background: #23232a !important;
    color: white !important;
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .team-card .card-header {
    background: var(--dark-card-header, #1a202c);
    border-bottom: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .team-card .card-header h3 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .position-filter select,
.dark-mode .schedule-filters select {
    background: var(--dark-card-bg, #2d3748);
    border: 1px solid var(--dark-border-color, #4a5568);
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .position-filter select:focus,
.dark-mode .schedule-filters select:focus {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.dark-mode .card-content {
    background: transparent !important;
}

.dark-mode .stat-item {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .stat-value {
    color: var(--primary-color, #60a5fa);
}

.dark-mode .stat-label {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .team-overview .stat-card {
    background: #23232a !important;
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .team-overview .stat-info h3 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .team-overview .stat-info p {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .player-item {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .player-name {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .player-position {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .tool-item {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .tool-info h4 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .tool-info p {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .announcement-item,
.dark-mode .staff-item {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .roster-list,
.dark-mode .management-tools,
.dark-mode .announcements-list,
.dark-mode .staff-list {
    background: transparent;
}

.dark-mode .team-schedule-section {
    background: var(--dark-card-bg, #2d3748);
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .section-header h2 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .section-header {
    background: var(--dark-card-header, #1a202c) !important;
}

.dark-mode .schedule-container {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .schedule-list {
    background: transparent;
}

/* Stats grid container */
.dark-mode .stats-grid {
    background: transparent;
}

/* Team overview container */
.dark-mode .team-overview {
    background: transparent;
}

/* Page header dark mode */
.dark-mode .page-header h1 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .page-header p {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .schedule-type, .dark-mode .schedule-timeframe {
    background: var(--dark-card-bg, #2d3748) !important;
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .position-filter, .dark-mode .type-filter, .dark-mode .time-filter {
    background: var(--dark-card-bg, #2d3748) !important;
    color: var(--dark-text-color, #e2e8f0);
}

/* Player avatar dark mode */
.dark-mode .player-avatar {
    background: var(--secondary-color);
    color: white;
}

/* Player number dark mode */
.dark-mode .player-number {
    background: var(--primary-color);
    color: white;
}

/* Tool icons dark mode */
.dark-mode .tool-item i {
    background: var(--secondary-color);
    color: white;
}


/* Dark Mode Styles for Coach Players Page */
.dark-mode .coach-players {
    background: transparent;
}

.dark-mode .players-overview .stat-card {
    background: #23232a !important;
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .players-overview .stat-info h3 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .players-overview .stat-info p {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .action-bar {
    background: var(--dark-card-bg, #2d3748);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .search-box input {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .search-box input:focus {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.dark-mode .status-filter, 
.dark-mode .position-filter {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .btn-secondary {
    background: var(--dark-card-header, #1a202c);
    color: var(--dark-text-color, #e2e8f0);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .btn-secondary:hover {
    background: var(--dark-hover-color, #2d3748);
    border-color: var(--primary-color, #3b82f6);
}

.dark-mode .btn-outline {
    background: transparent;
    color: var(--dark-text-color, #e2e8f0);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .btn-outline:hover {
    background: var(--dark-hover-color, #2d3748);
    border-color: var(--primary-color, #3b82f6);
}

.dark-mode .player-card {
    background: #23232a !important;
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .player-header {
    background: var(--dark-card-header, #1a202c);
    border-bottom: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .player-name {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .player-number {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .player-stat {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .stat-value {
    color: var(--primary-color, #60a5fa);
}

.dark-mode .stat-label {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .players-table-section {
    background: var(--dark-card-bg, #2d3748);
    border: 1px solid var(--dark-border-color, #4a5568);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .section-header {
    background: var(--dark-card-header, #1a202c) !important;
}

.dark-mode .section-header h2 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .players-table-container {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .players-table {
    background: transparent;
}

.dark-mode .players-table th {
    background: var(--primary-color, #1e40af);
    color: white;
    border-bottom: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .players-table td {
    color: var(--dark-text-color, #e2e8f0);
    border-bottom: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .players-table tr:hover {
    background: var(--dark-hover-color, #2d3748);
}

.dark-mode .table-player-name {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .table-player-email {
    color: var(--dark-text-light, #a0aec0);
}

.dark-mode .bulk-actions {
    background: var(--dark-card-bg, #2d3748);
    border: 1px solid var(--dark-border-color, #4a5568);
}

.dark-mode .bulk-info {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .bulk-action-select {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
    color: var(--dark-text-color, #e2e8f0);
}

/* Status badges dark mode */
.dark-mode .status-active {
    background: #1e4620;
    color: #4ade80;
}

.dark-mode .status-injured {
    background: #451a1a;
    color: #f87171;
}

.dark-mode .status-reserve {
    background: #1e293b;
    color: #94a3b8;
}

/* Page header dark mode */
.dark-mode .page-header h1 {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .page-header p {
    color: var(--dark-text-light, #a0aec0);
}

/* Search icon dark mode */
.dark-mode .search-box i {
    color: var(--dark-text-light, #a0aec0);
}

/* Player avatar dark mode */
.dark-mode .player-avatar,
.dark-mode .table-avatar {
    background: var(--secondary-color);
    color: white;
}

/* Checkbox dark mode */
.dark-mode input[type="checkbox"] {
    background: var(--dark-card-header, #1a202c);
    border: 1px solid var(--dark-border-color, #4a5568);
    border-radius: 8px;
    width: 16px;
    height: 16px;
    appearance: none;
    cursor: pointer;
    outline: none;
}

.dark-mode input[type="checkbox"]:checked {
    background: var(--primary-color, #3b82f6);
    border-color: var(--primary-color, #3b82f6);
}


.dark-mode .matches-popup {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

.dark-mode .popup-content {
    background-color: #23232a !important;
    color: #f4f4f5 !important;
    border: 1px solid #444;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.dark-mode .close-btn {
    color: #888 !important;
}

.dark-mode .close-btn:hover,
.dark-mode .close-btn:focus {
    color: #fa5305 !important;
}

.dark-mode .popup-empty-state {
    color: #a1a1aa !important;
}

.dark-mode .popup-empty-state i {
    color: #444 !important;
    opacity: 0.7;
}

/* Dark mode for performance-card */
.dark-mode .performance-card {
    background: var(--dark-card-bg, #23232a);
    border: 1px solid var(--dark-border-color, #3f3f46);
    border-radius: clamp(10px, 2.5vw, 12px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
    color: var(--dark-text, #f4f4f5);
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Header in dark mode */
.dark-mode .performance-card .card-header {
    background: linear-gradient(180deg, var(--dark-card-header, #27272a), rgba(39,39,42,0.9));
    border-bottom: 1px solid var(--dark-border-color, #3f3f46);
    color: var(--dark-text, #f4f4f5);
}

/* Heading color/contrast */
.dark-mode .performance-card .card-header h3 {
    color: var(--dark-text, #f4f4f5);
    transition: color 0.2s ease;
}

/* Subtle hover/depth when interacting */
.dark-mode .performance-card:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
    transform: translateY(-2px);
}

/* Ensure inner text/controls keep readable contrast */
.dark-mode .performance-card * {
    color: inherit;
}


/* Dark mode color scheme for analytics items */
.dark-mode .analytics-item {
    background: var(--dark-card-header, #23232a);
    border-color: var(--dark-border, #3f3f46);
    color: var(--dark-text, #f4f4f5);
}

/* Inner value & label colors for contrast */
.dark-mode .analytics-item .analytics-value,
.dark-mode .analytics-item .value {
    color: var(--primary-color, #fa5305);
    font-weight: 600;
}

.dark-mode .analytics-item .analytics-label,
.dark-mode .analytics-item .label {
    color: var(--dark-text-light, #a1a1aa);
}

/* Dark mode styles for league-item */
.dark-mode .league-item {
    background: var(--dark-card-bg, #23232a);
    border: 1px solid var(--dark-border, #3f3f46);
    color: var(--dark-text, #f4f4f5);
    box-shadow: 0 4px 8px rgba(0,0,0,0.45);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.18s ease, box-shadow 0.25s ease;
}

/* Logo / avatar inside item */
.dark-mode .league-item .league-logo,
.dark-mode .league-item .avatar {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.03);
}

/* Primary text and meta */
.dark-mode .league-item .league-name {
    color: var(--dark-text, #f4f4f5);
    font-weight: 600;
}

.dark-mode .league-item .league-meta,
.dark-mode .league-item .league-sub {
    color: var(--dark-text-light, #a1a1aa);
}

/* Badge / status inside */
.dark-mode .league-item .badge,
.dark-mode .league-item .league-badge {
    background: var(--accent-color, #fa5305);
    color: var(--dark-text, #18181b);
}

/* Hover and focus affordances */
.dark-mode .league-item:hover {
    background: linear-gradient(90deg, rgba(var(--primary-rgb,250,83,5),0.06), var(--dark-hover, #27272a));
    border-color: var(--primary-color, #fa5305);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.55);
}

.dark-mode .league-item:focus {
    outline: 2px solid rgba(var(--primary-rgb,250,83,5),0.16);
    outline-offset: 3px;
}

/* Selected state */
.dark-mode .league-item.selected {
    background: linear-gradient(135deg, rgba(var(--primary-rgb,250,83,5),0.12), rgba(58,12,163,0.06));
    border-color: var(--primary-color, #fa5305);
    color: #fff;
}

.dark-mode .category-item {
    background: linear-gradient(180deg, var(--dark-card-header, #27272a), var(--dark-card-bg, #23232a));
    border: 1px solid var(--dark-border, #3f3f46);
    color: var(--dark-text, #f4f4f5);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
    transition: background 0.2s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

/* hover / focus affordances */
.dark-mode .category-item:hover,
.dark-mode .category-item:focus {
    border-color: var(--primary-color, #fa5305);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6);
    transform: translateY(-2px);
}

/* icon area (if present) */
.dark-mode .category-item .category-icon {
    background: linear-gradient(135deg, var(--primary-color, #fa5305), var(--secondary-color, #3a0ca3));
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}

/* title / main text */
.dark-mode .category-item .category-title {
    color: var(--dark-text, #f4f4f5);
    font-weight: 600;
}

/* secondary/meta text */
.dark-mode .category-item .category-meta {
    color: var(--dark-text-light, #a1a1aa);
}


/* Dark Mode Styles */
.dark-mode .admin-users {
    background: #1a1a1a;
}

.dark-mode .page-header h1 {
    color: #ffffff;
}

.dark-mode .page-header p {
    color: #b0b0b0;
}

.dark-mode .dashboard-card.full-width {
    background: #2d2d2d;
    border-color: #404040;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .dashboard-card .card-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .dashboard-card .card-header h3 {
    color: #ffffff;
}

.dark-mode .dashboard-card .card-content {
    background: #2d2d2d;
}

.dark-mode .form-section {
    background: #363636;
    border-color: #404040;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark-mode .form-section h4 {
    color: #ffffff;
}

.dark-mode .role-option label {
    background: #363636;
    border-color: #404040;
}

.dark-mode .role-option label:hover {
    border-color: var(--primary-color, #e9531d);
    background: #404040;
}

.dark-mode .role-option input[type="radio"]:checked + label {
    background: rgba(233, 83, 29, 0.15);
    border-color: var(--primary-color, #e9531d);
}

.dark-mode .role-option i {
    color: #b0b0b0;
}

.dark-mode .role-option input[type="radio"]:checked + label i {
    color: var(--primary-color, #e9531d);
}

.dark-mode .role-option span {
    color: #e0e0e0;
}

.dark-mode .role-option input[type="radio"]:checked + label span {
    color: var(--primary-color, #e9531d);
}

.dark-mode .form-label {
    color: #e0e0e0;
}

.dark-mode .form-control {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .form-control:focus {
    background: #404040 !important;
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 0 3px rgba(233, 83, 29, 0.2);
}

.dark-mode .form-control::placeholder {
    color: #888888 !important;
}

.dark-mode textarea.form-control {
    background: #363636 !important;
}

.dark-mode .setting-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .setting-info h5 {
    color: #ffffff;
}

.dark-mode .setting-info p {
    color: #b0b0b0;
}

.dark-mode .slider {
    background-color: #555555;
}

.dark-mode input:checked + .slider {
    background-color: var(--primary-color, #e9531d);
}

.dark-mode .btn-outline {
    background: transparent;
    color: #e0e0e0;
    border-color: #555555;
}

.dark-mode .btn-outline:hover:not(:disabled) {
    background: #404040;
    border-color: var(--primary-color, #e9531d);
    color: var(--primary-color, #e9531d);
}

.dark-mode select.form-control {
    background-color: #363636 !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

.dark-mode .form-actions {
    background: #363636;
    border-top-color: #404040;
}

/* Dark mode print styles */
@media print {
    .dark-mode .admin-users {
        background: white !important;
    }
    
    .dark-mode .dashboard-card {
        background: white !important;
        border-color: #000 !important;
    }
    
    .dark-mode .form-section,
    .dark-mode .setting-item,
    .dark-mode .role-option label {
        background: white !important;
        border-color: #000 !important;
    }
    
    .dark-mode .form-control {
        background: white !important;
        border-color: #000 !important;
        color: #000 !important;
    }
    
    .dark-mode .page-header h1,
    .dark-mode .form-section h4,
    .dark-mode .setting-info h5,
    .dark-mode .role-option span,
    .dark-mode .form-label {
        color: #000 !important;
    }
    
    .dark-mode .page-header p,
    .dark-mode .setting-info p {
        color: #333 !important;
    }
}

/* Ensure dark mode overrides light theme */
.dark-mode body {
    background: #1a1a1a !important;
}

.dark-mode .container {
    background: transparent !important;
}

/* High contrast dark mode support */
@media (prefers-contrast: high) {
    .dark-mode .form-control {
        border-color: #666666 !important;
    }
    
    .dark-mode .role-option label {
        border-color: #666666;
    }
    
    .dark-mode .setting-item {
        border-color: #666666;
    }
    
    .dark-mode .dashboard-card {
        border-color: #666666;
    }
}

/* Reduced motion in dark mode */
@media (prefers-reduced-motion: reduce) {
    .dark-mode .form-control,
    .dark-mode .role-option label,
    .dark-mode .btn,
    .dark-mode .slider,
    .dark-mode .slider:before {
        transition: none;
    }
}




/* Dark Mode Styles for Fan Profile */
.dark-mode .fan-profile {
    background: #1a1a1a;
}

.dark-mode .profile-header {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .profile-info h1 {
    color: #ffffff;
}

.dark-mode .profile-info p {
    color: #b0b0b0;
}

.dark-mode .stat-value {
    color: var(--primary-color, #e9531d);
}

.dark-mode .stat-label {
    color: #b0b0b0;
}

.dark-mode .stat-trend.neutral {
    color: #b0b0b0;
}

.dark-mode .profile-card {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .profile-card .card-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .profile-card .card-header h3 {
    color: #ffffff;
}

.dark-mode .edit-btn {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode .edit-btn:hover {
    background: #ffffff;
    color: var(--primary-color, #e9531d);
    border-color: var(--primary-color, #e9531d);
}

.dark-mode .profile-card .card-content {
    background: #2d2d2d;
}

.dark-mode .info-item label {
    color: #b0b0b0;
}

.dark-mode .info-item span {
    color: #ffffff;
}

.dark-mode .setting-item,
.dark-mode .preference-item,
.dark-mode .account-item {
    border-bottom-color: #404040;
}

.dark-mode .setting-info h4,
.dark-mode .preference-info h4 {
    color: #ffffff;
}

.dark-mode .setting-info p,
.dark-mode .preference-info p {
    color: #b0b0b0;
}

.dark-mode .slider {
    background-color: #555555;
}

.dark-mode .visibility-select {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .account-info i {
    color: #ffffff;
}

.dark-mode .account-info span {
    color: #ffffff;
}

.dark-mode .btn-danger {
    background: #dc3545;
    border-color: #dc3545;
}

.dark-mode .btn-danger:hover {
    background: #c82333;
    border-color: #bd2130;
}

.dark-mode .account-management-section {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .section-header h2 {
    color: #ffffff;
}

.dark-mode .management-btn {
    background: #363636;
    border-color: #404040;
}

.dark-mode .management-btn:hover {
    border-color: var(--primary-color, #e9531d);
    background: #404040;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.dark-mode .management-btn.danger:hover {
    border-color: #dc3545;
    background: #4a1a1f;
}

.dark-mode .management-btn i {
    color: var(--primary-color, #e9531d);
}

.dark-mode .management-btn.danger i {
    color: #dc3545;
}

.dark-mode .management-btn span {
    color: #ffffff;
}

.dark-mode .management-btn p {
    color: #b0b0b0;
}


.dark-mode .form-control {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .form-control:focus {
    border-color: var(--primary-color, #e9531d) !important;
    background: #404040 !important;
}

.dark-mode .btn-outline {
    background: transparent;
    color: var(--primary-color, #e9531d);
    border-color: var(--primary-color, #e9531d);
}

.dark-mode .btn-outline:hover {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode .edit-avatar-btn i {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 5px;
}

/* Popup styles for dark mode */
.dark-mode .matches-popup {
    background-color: rgba(0, 0, 0, 0.7);
}

.dark-mode .popup-content {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #ffffff;
}

.dark-mode .close-btn {
    color: #b0b0b0;
}

.dark-mode .close-btn:hover,
.dark-mode .close-btn:focus {
    color: #ffffff;
}

.dark-mode .popup-empty-state {
    color: #b0b0b0;
}

.dark-mode .popup-empty-state i {
    color: #666666;
}

/* Animation for live elements in dark mode */
@keyframes darkLivePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(233, 83, 29, 0.7);
        background: #e9531d;
        transform: scale(1);
    }
    100% {
        box-shadow: 0 0 10px 4px rgba(233, 83, 29, 0.6);
        background: #ed6a3d;
        transform: scale(1.15);
    }
}

.dark-mode .live-pulse {
    animation: darkLivePulse 2s infinite;
}

/* High contrast mode support for dark mode */
@media (prefers-contrast: high) {
    .dark-mode .stat-card,
    .dark-mode .profile-card,
    .dark-mode .account-management-section,
    .dark-mode .profile-header {
        border: 2px solid #ffffff;
    }

    .dark-mode .badge,
    .dark-mode .edit-btn,
    .dark-mode .btn {
        border: 1px solid currentColor;
    }

    .dark-mode .switch .slider {
        border: 1px solid #ffffff;
    }

    .dark-mode .form-control {
        border-width: 2px;
    }
}

/* Reduced motion support for dark mode */
@media (prefers-reduced-motion: reduce) {
    .dark-mode .stat-card,
    .dark-mode .management-btn,
    .dark-mode .edit-btn,
    .dark-mode .btn,
    .dark-mode .slider,
    .dark-mode .slider:before {
        transition: none;
    }

    .dark-mode .stat-card:hover,
    .dark-mode .management-btn:hover,
    .dark-mode .edit-btn:hover,
    .dark-mode .btn-primary:hover,
    .dark-mode .btn-outline:hover {
        transform: none;
    }

    .dark-mode .live-pulse {
        animation: none;
    }
}

/* Print styles for dark mode */
@media print {
    .dark-mode .fan-profile {
        background: white !important;
    }
    
    .dark-mode .profile-header,
    .dark-mode .stat-card,
    .dark-mode .profile-card,
    .dark-mode .account-management-section {
        background: white !important;
        border-color: #000 !important;
        box-shadow: none !important;
    }
    
    .dark-mode .profile-info h1,
    .dark-mode .profile-card .card-header h3,
    .dark-mode .section-header h2,
    .dark-mode .info-item span,
    .dark-mode .setting-info h4,
    .dark-mode .management-btn span,
    .dark-mode .account-info span {
        color: #000 !important;
    }
    
    .dark-mode .profile-info p,
    .dark-mode .stat-label,
    .dark-mode .info-item label,
    .dark-mode .setting-info p,
    .dark-mode .management-btn p {
        color: #333 !important;
    }
    
    .dark-mode .stat-value {
        color: var(--primary-color, #e9531d) !important;
    }
    
    .dark-mode .view-all {
        color: var(--primary-color, #e9531d) !important;
    }
}

/* Ensure dark mode overrides for form elements */
.dark-mode select.visibility-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* Specific overrides for avatar edit button in dark mode */
.dark-mode .edit-avatar-btn i {
    color: #ffffff;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

/* Team list items in dark mode */
.dark-mode .teams-list {
    color: #ffffff;
}

/* Connected accounts section in dark mode */
.dark-mode .connected-accounts {
    background: transparent;
}

/* Button states in dark mode */
.dark-mode .btn:disabled,
.dark-mode .btn[disabled] {
    background: #555555;
    color: #888888;
    cursor: not-allowed;
    border-color: #555555;
    opacity: 0.6;
}

.dark-mode .btn:disabled:hover,
.dark-mode .btn[disabled]:hover {
    transform: none;
    box-shadow: none;
}

/* Focus states for accessibility in dark mode */
.dark-mode .btn:focus,
.dark-mode .form-control:focus,
.dark-mode .edit-btn:focus,
.dark-mode .management-btn:focus {
    outline: 2px solid var(--primary-color, #e9531d);
    outline-offset: 2px;
}

/* Selection styles in dark mode */
.dark-mode ::selection {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode ::-moz-selection {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}




/* Dark Mode Styles for Fan Settings */
.dark-mode .fan-settings {
    background: #1a1a1a;
}

.dark-mode .page-header h1 {
    color: #ffffff;
}

.dark-mode .page-header p {
    color: #b0b0b0;
}

.dark-mode .settings-card {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .card-content {
    background: #2d2d2d;
}

.dark-mode .settings-form {
    background: transparent;
}

.dark-mode .form-group label {
    color: #e0e0e0;
}

.dark-mode .form-control {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .form-control:focus {
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 0 3px rgba(233, 83, 29, 0.2);
    background: #404040 !important;
}

.dark-mode .form-control::placeholder {
    color: #888888 !important;
}

.dark-mode .security-options,
.dark-mode .notification-options,
.dark-mode .privacy-options {
    background: transparent;
}

.dark-mode .security-item,
.dark-mode .notification-item,
.dark-mode .privacy-item {
    border-bottom-color: #404040;
}

.dark-mode .security-item:last-child,
.dark-mode .notification-item:last-child,
.dark-mode .privacy-item:last-child {
    border-bottom: none;
}

.dark-mode .security-info h4,
.dark-mode .notification-info h4,
.dark-mode .privacy-info h4 {
    color: #ffffff;
}

.dark-mode .security-info p,
.dark-mode .notification-info p,
.dark-mode .privacy-info p {
    color: #b0b0b0;
}

/* Switch Toggle in Dark Mode */
.dark-mode .slider {
    background-color: #555555;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}


.dark-mode .slider:before {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.dark-mode .switch input:focus + .slider {
    box-shadow: 0 0 0 3px rgba(233, 83, 29, 0.3);
}

.dark-mode .switch.disabled,
.dark-mode .switch input:disabled + .slider {
    opacity: 0.4;
}

/* Button Styles in Dark Mode */
.dark-mode .btn-danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
    border: none;
}

.dark-mode .btn-danger:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.dark-mode .btn-secondary {
    background: #363636;
    color: #e0e0e0;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.dark-mode .btn-secondary:hover {
    background: #404040;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .btn-outline {
    background: transparent;
    color: var(--primary-color, #e9531d);
    border: 2px solid var(--primary-color, #e9531d);
    box-shadow: none;
}

.dark-mode .btn-outline:hover {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233, 83, 29, 0.3);
}

/* Account Actions in Dark Mode */
.dark-mode .account-actions {
    background: transparent;
}

/* Modal Styles in Dark Mode */
.dark-mode .modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

.dark-mode .modal-header h3 {
    color: #ffffff;
}

.dark-mode .modal-close {
    color: #b0b0b0;
    background: none;
    border: none;
}

.dark-mode .modal-close:hover {
    color: #ffffff;
    background: #404040;
    border-radius: 4px;
}

.dark-mode .modal-body {
    background: #2d2d2d;
    color: #ffffff;
}

.dark-mode .password-form {
    background: transparent;
}

/* Form Actions in Dark Mode */
.dark-mode .form-actions {
    background: transparent;
    border-top: none;
}

/* Focus States for Accessibility in Dark Mode */
.dark-mode .form-control:focus,
.dark-mode .btn:focus,
.dark-mode .switch input:focus + .slider,
.dark-mode .modal-close:focus {
    outline: 2px solid var(--primary-color, #e9531d);
    outline-offset: 2px;
}

/* Selection Styles in Dark Mode */
.dark-mode ::selection {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode ::-moz-selection {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

/* Enhanced Switch Styles for Dark Mode */
.dark-mode .switch input:not(:checked) + .slider {
    background-color: #404040;
}

.dark-mode .switch input:checked + .slider {
    background-color: var(--primary-color, #e9531d);
}

/* Touch device optimizations for dark mode */
@media (hover: none) and (pointer: coarse) {
    .dark-mode .btn-danger:hover,
    .dark-mode .btn-primary:hover,
    .dark-mode .btn-secondary:hover,
    .dark-mode .btn-outline:hover {
        transform: none;
    }

    .dark-mode .btn-primary:hover {
        box-shadow: 0 2px 8px rgba(233, 83, 29, 0.3) !important;
    }

    .dark-mode .btn-danger:hover {
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
    }

    .dark-mode .slider:active:before {
        width: clamp(14px, 3.5vw, 16px);
        background-color: #f0f0f0;
    }
}

/* High contrast mode support for dark mode */
@media (prefers-contrast: high) {
    .dark-mode .settings-card,
    .dark-mode .modal-content {
        border: 2px solid #ffffff;
    }

    .dark-mode .btn,
    .dark-mode .form-control,
    .dark-mode .switch .slider {
        border: 1px solid currentColor;
    }

    .dark-mode .switch input:checked + .slider {
        border-color: var(--primary-color, #e9531d);
    }

    .dark-mode .security-item,
    .dark-mode .notification-item,
    .dark-mode .privacy-item {
        border-bottom-width: 2px;
        border-bottom-color: #ffffff;
    }
}

/* Reduced motion support for dark mode */
@media (prefers-reduced-motion: reduce) {
    .dark-mode .btn,
    .dark-mode .form-control,
    .dark-mode .slider,
    .dark-mode .slider:before {
        transition: none;
    }

    .dark-mode .btn-danger:hover,
    .dark-mode .btn-primary:hover,
    .dark-mode .btn-secondary:hover,
    .dark-mode .btn-outline:hover {
        transform: none;
    }

    .dark-mode .slider:active:before {
        width: clamp(14px, 3.5vw, 16px);
    }
}

/* Print styles for dark mode */
@media print {
    .dark-mode .fan-settings {
        background: white !important;
    }
    
    .dark-mode .settings-card,
    .dark-mode .modal-content {
        background: white !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    
    .dark-mode .page-header h1,
    .dark-mode .modal-header h3,
    .dark-mode .security-info h4,
    .dark-mode .notification-info h4,
    .dark-mode .privacy-info h4,
    .dark-mode .form-group label {
        color: #000 !important;
    }
    
    .dark-mode .page-header p,
    .dark-mode .security-info p,
    .dark-mode .notification-info p,
    .dark-mode .privacy-info p {
        color: #333 !important;
    }
    
    .dark-mode .form-control {
        background: white !important;
        border-color: #000 !important;
        color: #000 !important;
    }
    
    .dark-mode .btn-primary,
    .dark-mode .btn-danger,
    .dark-mode .btn-secondary,
    .dark-mode .btn-outline {
        background: #f0f0f0 !important;
        color: #000 !important;
        border: 1px solid #000 !important;
    }
    
    .switch,
    .modal-overlay {
        display: none !important;
    }
}

/* Safe area insets for notched devices in dark mode */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .dark-mode .fan-settings {
            padding-left: max(5px, env(safe-area-inset-left));
            padding-right: max(5px, env(safe-area-inset-right));
        }
        
        .dark-mode .modal-content {
            margin-left: max(5px, env(safe-area-inset-left));
            margin-right: max(5px, env(safe-area-inset-right));
        }
    }
}

/* Performance optimizations for low-end devices in dark mode */
@media (max-width: 768px) and (prefers-reduced-data: reduce) {
    .dark-mode .settings-card {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    .dark-mode .btn-primary,
    .dark-mode .btn-danger {
        background: var(--primary-color, #e9531d) !important;
    }
    
    .dark-mode .btn-primary:hover,
    .dark-mode .btn-danger:hover {
        background: #d4420c !important;
    }
}


.dark-mode ::-webkit-scrollbar-track {
    background: #2d2d2d;
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: #555555;
    border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #666666;
}

/* Input type specific styles for dark mode */
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode input[type="text"],
.dark-mode input[type="tel"],
.dark-mode select {
    background: #363636 !important;
    color: #ffffff !important;
}

/* Textarea specific styles for dark mode */
.dark-mode textarea.form-control {
    background: #363636 !important;
    color: #ffffff !important;
    border-color: #404040 !important;
}

.dark-mode textarea.form-control:focus {
    background: #404040 !important;
    border-color: var(--primary-color, #e9531d) !important;
}

/* Success and error states for dark mode */
.dark-mode .form-control.success {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.dark-mode .form-control.error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Loading states for dark mode */
.dark-mode .btn.loading {
    background: #555555 !important;
    color: #888888 !important;
    cursor: not-allowed;
}

.dark-mode .btn.loading:hover {
    transform: none;
    box-shadow: none;
}




/* Dark Mode Styles for Chat Page */
.dark-mode .player-chat {
    background: #1a1a1a;
}

.dark-mode .page-header h1 {
    color: #ffffff;
}

.dark-mode .page-header p {
    color: #b0b0b0;
}

.dark-mode .chat-overview .stat-card {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .chat-overview .stat-card:hover {
    border-color: var(--primary-color, #e9531d);
    background: #363636;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.dark-mode .chat-overview .stat-info h3 {
    color: #ffffff;
}

.dark-mode .chat-overview .stat-info p {
    color: #b0b0b0;
}

.dark-mode .chat-card {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .chat-card .card-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .chat-card .card-header h3 {
    color: #ffffff;
}

.dark-mode .chat-card .card-content {
    background: #2d2d2d;
}

/* Chat Filter in Dark Mode */
.dark-mode .chat-filter select {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .chat-filter select:focus {
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 5px rgba(233, 83, 29, 0.3);
}

.dark-mode .chat-filter select option {
    background: #363636;
    color: #ffffff;
}

/* Quick Actions Grid in Dark Mode */
.dark-mode .action-card h4 {
    color: #ffffff;
}

.dark-mode .action-icon {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

/* Chat Lists in Dark Mode */
.dark-mode .chat-item,
.dark-mode .conversation-item,
.dark-mode .fan-message-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .chat-item:hover,
.dark-mode .conversation-item:hover,
.dark-mode .fan-message-item:hover {
    background: #404040;
    border-color: var(--primary-color, #e9531d);
}

.dark-mode .chat-name,
.dark-mode .conversation-name {
    color: #ffffff;
}

.dark-mode .chat-preview,
.dark-mode .conversation-preview {
    color: #b0b0b0;
}

.dark-mode .chat-time,
.dark-mode .conversation-time {
    color: #888888;
}

.dark-mode .chat-badge {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

/* Stats Grid in Dark Mode */
.dark-mode .stat-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .stat-value {
    color: var(--primary-color, #e9531d);
}

.dark-mode .stat-label {
    color: #b0b0b0;
}

/* Chat Popup Styles in Dark Mode */
.dark-mode .chat-popup-overlay {
    background: rgba(0, 0, 0, 0.7);
}

.dark-mode .chat-popup {
    background: #2d2d2d;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.dark-mode .popup-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .popup-header h3 {
    color: #ffffff;
}

.dark-mode .popup-close {
    color: #b0b0b0;
    background: none;
    border: none;
}

.dark-mode .popup-close:hover {
    color: #ffffff;
    background: #404040;
    border-radius: 4px;
}

.dark-mode .popup-content {
    background: #2d2d2d;
    color: #ffffff;
}

.dark-mode .popup-section h4 {
    color: #ffffff;
}

/* New Chat Options in Dark Mode */
.dark-mode .chat-option-btn {
    background: #363636;
    border-color: #404040;
    color: #ffffff;
}

.dark-mode .chat-option-btn:hover {
    border-color: var(--primary-color, #e9531d);
    background: #404040;
}

.dark-mode .chat-option-btn i {
    color: var(--primary-color, #e9531d);
}

.dark-mode .chat-option-btn span {
    color: #ffffff;
}

/* Settings List in Dark Mode */
.dark-mode .settings-list {
    background: transparent;
}

.dark-mode .setting-item {
    background: transparent;
}

.dark-mode .setting-label {
    color: #ffffff;
}

/* Switch Toggle in Dark Mode */
.dark-mode .slider {
    background-color: #555555;
}

.dark-mode .slider:before {
    background-color: #ffffff;
}

/* Privacy Options in Dark Mode */
.dark-mode .privacy-select {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .privacy-select:focus {
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 5px rgba(233, 83, 29, 0.3);
}

.dark-mode .privacy-select option {
    background: #363636;
    color: #ffffff;
}

/* Popup Actions in Dark Mode */
.dark-mode .popup-actions {
    background: #363636;
    border-top-color: #404040;
}

/* Button Styles in Dark Mode */
.dark-mode .btn-secondary {
    background: #363636;
    color: #e0e0e0;
    border: 1px solid #404040;
}

.dark-mode .btn-secondary:hover {
    background: #404040;
    color: #ffffff;
    border-color: var(--primary-color, #e9531d);
}

/* Avatar Styles in Dark Mode */
.dark-mode .chat-avatar,
.dark-mode .conversation-avatar {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

/* Focus States for Accessibility in Dark Mode */
.dark-mode .chat-filter select:focus,
.dark-mode .btn:focus,
.dark-mode .chat-option-btn:focus,
.dark-mode .privacy-select:focus,
.dark-mode .popup-close:focus {
    outline: 2px solid var(--primary-color, #e9531d);
    outline-offset: 2px;
}

/* Selection Styles in Dark Mode */
.dark-mode ::selection {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode ::-moz-selection {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

/* Enhanced Switch Styles for Dark Mode */
.dark-mode .switch input:not(:checked) + .slider {
    background-color: #404040;
}

.dark-mode .switch input:checked + .slider {
    background-color: var(--primary-color, #e9531d);
}

/* Touch device optimizations for dark mode */
@media (hover: none) and (pointer: coarse) {
    .dark-mode .chat-overview .stat-card:hover,
    .dark-mode .action-card:hover,
    .dark-mode .chat-item:hover,
    .dark-mode .conversation-item:hover,
    .dark-mode .fan-message-item:hover,
    .dark-mode .chat-option-btn:hover {
        transform: none;
    }

    .dark-mode .chat-overview .stat-card:hover {
        background: #363636;
        border-color: #404040;
    }

    .dark-mode .btn-primary:hover:not(:disabled) {
        transform: none;
        box-shadow: 0 2px 8px rgba(233, 83, 29, 0.3);
    }
}

/* High contrast mode support for dark mode */
@media (prefers-contrast: high) {
    .dark-mode .chat-card,
    .dark-mode .chat-overview .stat-card,
    .dark-mode .chat-item,
    .dark-mode .conversation-item,
    .dark-mode .fan-message-item,
    .dark-mode .stat-item,
    .dark-mode .chat-popup {
        border: 2px solid #ffffff;
    }

    .dark-mode .btn,
    .dark-mode .chat-filter select,
    .dark-mode .privacy-select,
    .dark-mode .switch .slider {
        border: 1px solid currentColor;
    }

    .dark-mode .switch input:checked + .slider {
        border-color: var(--primary-color, #e9531d);
    }

    .dark-mode .chat-card .card-header,
    .dark-mode .popup-header {
        border-bottom-width: 2px;
        border-bottom-color: #ffffff;
    }
}

/* Reduced motion support for dark mode */
@media (prefers-reduced-motion: reduce) {
    .dark-mode .chat-overview .stat-card,
    .dark-mode .action-card,
    .dark-mode .chat-item,
    .dark-mode .conversation-item,
    .dark-mode .fan-message-item,
    .dark-mode .chat-option-btn,
    .dark-mode .slider,
    .dark-mode .btn {
        transition: none;
    }

    .dark-mode .chat-overview .stat-card:hover,
    .dark-mode .action-card:hover,
    .dark-mode .btn-primary:hover:not(:disabled) {
        transform: none;
    }
}

/* Print styles for dark mode */
@media print {
    .dark-mode .player-chat {
        background: white !important;
    }
    
    .dark-mode .chat-card,
    .dark-mode .chat-overview .stat-card,
    .dark-mode .stat-item {
        background: white !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    
    .dark-mode .page-header h1,
    .dark-mode .chat-card .card-header h3,
    .dark-mode .popup-header h3,
    .dark-mode .chat-overview .stat-info h3,
    .dark-mode .chat-name,
    .dark-mode .conversation-name,
    .dark-mode .setting-label,
    .dark-mode .popup-section h4 {
        color: #000 !important;
    }
    
    .dark-mode .page-header p,
    .dark-mode .chat-overview .stat-info p,
    .dark-mode .chat-preview,
    .dark-mode .conversation-preview,
    .dark-mode .chat-time,
    .dark-mode .conversation-time,
    .dark-mode .stat-label {
        color: #333 !important;
    }
    
    .dark-mode .chat-filter select,
    .dark-mode .privacy-select {
        background: white !important;
        border-color: #000 !important;
        color: #000 !important;
    }
    
    .dark-mode .btn-secondary {
        background: #f0f0f0 !important;
        color: #000 !important;
        border: 1px solid #000 !important;
    }
    
    .switch,
    .chat-popup-overlay,
    .matches-popup {
        display: none !important;
    }
}

/* Additional Popup Styles in Dark Mode */
.dark-mode .matches-popup {
    background-color: rgba(0, 0, 0, 0.7);
}

.dark-mode .popup-content {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #ffffff;
}

.dark-mode .close-btn {
    color: #b0b0b0;
}

.dark-mode .close-btn:hover,
.dark-mode .close-btn:focus {
    color: #ffffff;
}

.dark-mode .popup-empty-state {
    color: #b0b0b0;
}

.dark-mode .popup-empty-state i {
    color: #666666;
}

/* Scrollbar styling for dark mode (where supported) */
.dark-mode ::-webkit-scrollbar {
    width: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
    background: #2d2d2d;
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: #555555;
    border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #666666;
}

/* Status indicators in dark mode */
.dark-mode .status-online {
    background: #10b981 !important;
}

.dark-mode .status-offline {
    background: #6b7280 !important;
}

.dark-mode .status-away {
    background: #f59e0b !important;
}

/* Message bubble styles for future chat implementation */
.dark-mode .message-bubble {
    background: #363636;
    color: #ffffff;
    border: 1px solid #404040;
}

.dark-mode .message-bubble.own {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
    border-color: var(--primary-color, #e9531d);
}

.dark-mode .message-time {
    color: #888888;
}

/* Typing indicator in dark mode */
.dark-mode .typing-indicator {
    background: #363636;
    border-color: #404040;
}

.dark-mode .typing-indicator span {
    background: #b0b0b0;
}

/* Chat input styles for dark mode */
.dark-mode .chat-input {
    background: #363636;
    border-color: #404040;
    color: #ffffff;
}

.dark-mode .chat-input:focus {
    border-color: var(--primary-color, #e9531d);
    background: #404040;
}

.dark-mode .chat-input::placeholder {
    color: #888888;
}

/* Unread message indicators in dark mode */
.dark-mode .unread-indicator {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

/* Loading states for dark mode */
.dark-mode .loading-skeleton {
    background: linear-gradient(90deg, #363636 25%, #404040 50%, #363636 75%);
    background-size: 200% 100%;
}

/* Error states for dark mode */
.dark-mode .error-message {
    background: #7f1d1d;
    color: #fecaca;
    border-color: #dc2626;
}

/* Success states for dark mode */
.dark-mode .success-message {
    background: #064e3b;
    color: #a7f3d0;
    border-color: #10b981;
}




/* Dark Mode Styles for Add Player Page */
.dark-mode .add-player {
    background: #1a1a1a;
}

.dark-mode .page-header h1 {
    color: #ffffff;
}

.dark-mode .page-header p {
    color: #b0b0b0;
}

.dark-mode .form-card,
.dark-mode .preview-card,
.dark-mode .help-card,
.dark-mode .recent-card {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .form-card .card-header,
.dark-mode .preview-card .card-header,
.dark-mode .help-card .card-header,
.dark-mode .recent-card .card-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .form-card .card-header h3,
.dark-mode .preview-card .card-header h3,
.dark-mode .help-card .card-header h3,
.dark-mode .recent-card .card-header h3 {
    color: #ffffff;
}

.dark-mode .form-card .card-content,
.dark-mode .preview-card .card-content,
.dark-mode .help-card .card-content,
.dark-mode .recent-card .card-content {
    background: #2d2d2d;
}

/* Form Styles in Dark Mode */
.dark-mode .player-form {
    background: transparent;
}

.dark-mode .form-section h4 {
    color: #ffffff;
    border-bottom-color: var(--primary-color, #e9531d);
}

.dark-mode .form-group label {
    color: #e0e0e0;
}

.dark-mode .form-group input,
.dark-mode .form-group select,
.dark-mode .form-group textarea {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .form-group input:focus,
.dark-mode .form-group select:focus,
.dark-mode .form-group textarea:focus {
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 0 2px rgba(233, 83, 29, 0.2);
    background: #404040 !important;
}

.dark-mode .form-group input:invalid:not(:focus):not(:placeholder-shown),
.dark-mode .form-group select:invalid:not(:focus) {
    border-color: #ef4444;
}

.dark-mode .form-group input::placeholder,
.dark-mode .form-group textarea::placeholder {
    color: #888888 !important;
}

.dark-mode .error-message {
    color: #ef4444;
}

.dark-mode .form-actions {
    border-top-color: #404040;
    background: transparent;
}

/* Button Styles in Dark Mode */
.dark-mode .btn-secondary {
    background: #363636;
    color: #e0e0e0;
    border: 1px solid #404040;
}

.dark-mode .btn-secondary:hover {
    background: #404040;
    color: #ffffff;
    border-color: var(--primary-color, #e9531d);
}

/* Preview Styles in Dark Mode */
.dark-mode .player-preview {
    background: #363636;
    border-color: #404040;
}

.dark-mode .preview-avatar {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode .preview-info h4 {
    color: #ffffff;
}

.dark-mode .preview-position {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode .preview-number {
    color: #b0b0b0;
}

.dark-mode .preview-detail {
    color: #b0b0b0;
}

.dark-mode .preview-detail i {
    color: var(--primary-color, #e9531d);
}

/* Help Styles in Dark Mode */
.dark-mode .help-items {
    background: transparent;
}

.dark-mode .help-item {
    background: transparent;
}

.dark-mode .help-item i {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode .help-content strong {
    color: #ffffff;
}

.dark-mode .help-content p {
    color: #b0b0b0;
}

/* Recent Players Styles in Dark Mode */
.dark-mode .recent-players {
    background: transparent;
}

.dark-mode .recent-player {
    background: #363636;
    border-color: #404040;
}

.dark-mode .recent-avatar {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode .recent-name {
    color: #ffffff;
}

.dark-mode .recent-position {
    color: #b0b0b0;
}

/* Select Dropdown Styling in Dark Mode */
.dark-mode .form-group select {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .form-group select option {
    background: #363636;
    color: #ffffff;
}

/* Focus States for Accessibility in Dark Mode */
.dark-mode .form-group input:focus,
.dark-mode .form-group select:focus,
.dark-mode .form-group textarea:focus,
.dark-mode .btn:focus,
.dark-mode .view-all:focus {
    outline: 2px solid var(--primary-color, #e9531d);
    outline-offset: 2px;
}

/* Selection Styles in Dark Mode */
.dark-mode ::selection {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode ::-moz-selection {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

/* Scrollbar styling for dark mode (where supported) */
.dark-mode ::-webkit-scrollbar {
    width: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
    background: #2d2d2d;
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: #555555;
    border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #666666;
}

/* Form Validation States in Dark Mode */
.dark-mode .form-group.success input,
.dark-mode .form-group.success select,
.dark-mode .form-group.success textarea {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2);
}

.dark-mode .form-group.error input,
.dark-mode .form-group.error select,
.dark-mode .form-group.error textarea {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2);
}

.dark-mode .success-message {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* High contrast mode support for dark mode */
@media (prefers-contrast: high) {
    .dark-mode .form-card,
    .dark-mode .preview-card,
    .dark-mode .help-card,
    .dark-mode .recent-card {
        border: 2px solid #ffffff;
    }

    .dark-mode .btn,
    .dark-mode .form-group input,
    .dark-mode .form-group select,
    .dark-mode .form-group textarea,
    .dark-mode .player-preview,
    .dark-mode .recent-player {
        border: 1px solid currentColor;
    }

    .dark-mode .form-card .card-header,
    .dark-mode .preview-card .card-header,
    .dark-mode .help-card .card-header,
    .dark-mode .recent-card .card-header {
        border-bottom-width: 2px;
        border-bottom-color: #ffffff;
    }

    .dark-mode .form-section h4 {
        border-bottom-width: 3px;
    }
}

/* Reduced motion support for dark mode */
@media (prefers-reduced-motion: reduce) {
    .dark-mode .form-group input,
    .dark-mode .form-group select,
    .dark-mode .form-group textarea,
    .dark-mode .btn {
        transition: none;
    }

    .dark-mode .btn-primary:hover:not(:disabled) {
        transform: none;
    }

    .dark-mode .loading-skeleton {
        animation: none;
    }
}

/* Print styles for dark mode */
@media print {
    .dark-mode .add-player {
        background: white !important;
    }
    
    .dark-mode .form-card,
    .dark-mode .preview-card,
    .dark-mode .help-card,
    .dark-mode .recent-card {
        background: white !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    
    .dark-mode .page-header h1,
    .dark-mode .form-card .card-header h3,
    .dark-mode .preview-card .card-header h3,
    .dark-mode .help-card .card-header h3,
    .dark-mode .recent-card .card-header h3,
    .dark-mode .form-section h4,
    .dark-mode .form-group label,
    .dark-mode .preview-info h4,
    .dark-mode .recent-name,
    .dark-mode .help-content strong {
        color: #000 !important;
    }
    
    .dark-mode .page-header p,
    .dark-mode .preview-number,
    .dark-mode .preview-detail,
    .dark-mode .recent-position,
    .dark-mode .help-content p {
        color: #333 !important;
    }
    
    .dark-mode .form-group input,
    .dark-mode .form-group select,
    .dark-mode .form-group textarea {
        background: white !important;
        border-color: #000 !important;
        color: #000 !important;
    }
    
    .dark-mode .btn-secondary {
        background: #f0f0f0 !important;
        color: #000 !important;
        border: 1px solid #000 !important;
    }
    
    .dark-mode .badge,
    .dark-mode .preview-position,
    .dark-mode .preview-avatar,
    .dark-mode .recent-avatar,
    .dark-mode .help-item i {
        background: #000 !important;
        color: white !important;
        border: 1px solid #000 !important;
    }
}

/* Enhanced form elements for better dark mode visibility */
.dark-mode .form-group input[type="date"],
.dark-mode .form-group input[type="time"],
.dark-mode .form-group input[type="datetime-local"] {
    color-scheme: dark;
}

.dark-mode .form-group input[type="range"] {
    background: #404040;
}

.dark-mode .form-group input[type="range"]::-webkit-slider-thumb {
    background: var(--primary-color, #e9531d);
}

.dark-mode .form-group input[type="range"]::-moz-range-thumb {
    background: var(--primary-color, #e9531d);
}

/* Required field indicators in dark mode */
.dark-mode .form-group label.required::after {
    color: #ef4444;
    content: " *";
}

/* Form hints and helper text in dark mode */
.dark-mode .form-hint {
    color: #888888;
}

/* Character counter for text areas in dark mode */
.dark-mode .char-counter {
    color: #888888;
}

.dark-mode .char-counter.warning {
    color: #f59e0b;
}

.dark-mode .char-counter.error {
    color: #ef4444;
}

/* Form section dividers in dark mode */
.dark-mode .form-section-divider {
    border-top: 1px solid #404040;
}

/* Success state for form submission in dark mode */
.dark-mode .form-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.dark-mode .form-success h4 {
    color: #10b981;
}

.dark-mode .form-success p {
    color: #a7f3d0;
}



/* Dark Mode Styles for Create Announcement Page */
.dark-mode .create-announcement {
    background: #1a1a1a;
}

.dark-mode .announcement-form-card {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .announcement-form-card .card-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .announcement-form-card .card-header h3 {
    color: #ffffff;
}

.dark-mode .announcement-form {
    background: transparent;
}

.dark-mode .form-section {
    border-bottom-color: #404040;
    background: transparent;
}

.dark-mode .section-title {
    color: #ffffff;
}

.dark-mode .form-input,
.dark-mode .form-select,
.dark-mode .form-textarea {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .form-input:focus,
.dark-mode .form-select:focus,
.dark-mode .form-textarea:focus {
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 0 2px rgba(233, 83, 29, 0.2);
    background: #404040 !important;
}

.dark-mode .form-help {
    color: #b0b0b0;
}

/* Editor Toolbar in Dark Mode */
.dark-mode .editor-toolbar {
    background: #363636;
    border-color: #404040;
}

.dark-mode .toolbar-btn {
    background: #404040;
    border-color: #555555;
    color: #ffffff;
}

.dark-mode .toolbar-btn:hover {
    background: #4a4a4a;
    border-color: var(--primary-color, #e9531d);
}

/* Audience Selector in Dark Mode */
.dark-mode .audience-selector,
.dark-mode .notification-options {
    background: transparent;
}

.dark-mode .audience-option label,
.dark-mode .notification-option label {
    color: #ffffff;
}

/* Player Selection in Dark Mode */
.dark-mode .player-selection {
    background: #363636;
    border-color: #404040;
}

.dark-mode .player-checkbox {
    background: transparent;
}

.dark-mode .player-checkbox:hover {
    background: #404040;
}

.dark-mode .player-checkbox label {
    color: #ffffff;
}

/* File Upload in Dark Mode */
.dark-mode .file-upload-area {
    background: #363636;
    border-color: #404040;
}

.dark-mode .file-upload-area:hover {
    border-color: var(--primary-color, #e9531d);
    background: #404040;
}

.dark-mode .file-upload-area i {
    color: #b0b0b0;
}

.dark-mode .file-upload-area p {
    color: #ffffff;
}

.dark-mode .file-upload-area small {
    color: #b0b0b0;
}

.dark-mode .file-list {
    background: transparent;
}

.dark-mode .file-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .file-icon {
    color: var(--primary-color, #e9531d);
}

.dark-mode .file-name {
    color: #ffffff;
}

.dark-mode .file-size {
    color: #b0b0b0;
}

.dark-mode .file-remove {
    color: #b0b0b0;
    background: transparent;
}

.dark-mode .file-remove:hover {
    color: #ef4444;
    background: #4a1a1f;
}

/* Form Actions Footer in Dark Mode */
.dark-mode .form-actions-footer {
    background: #363636;
    border-top-color: #404040;
}

/* Preview Panel in Dark Mode */
.dark-mode .preview-panel {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .preview-panel .card-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .preview-panel .card-header h3 {
    color: #ffffff;
}

.dark-mode .preview-content {
    background: #363636;
    color: #ffffff;
}

.dark-mode .preview-placeholder {
    color: #b0b0b0;
    background: transparent;
}

.dark-mode .preview-placeholder i {
    color: #666666;
}

.dark-mode .preview-placeholder p {
    color: #b0b0b0;
}

.dark-mode .preview-placeholder small {
    color: #888888;
}

/* Button Styles in Dark Mode (only new variants) */
.dark-mode .btn-outline {
    background: transparent;
    color: #e0e0e0;
    border: 1px solid #404040;
}

.dark-mode .btn-outline:hover {
    background: #404040;
    color: #ffffff;
    border-color: var(--primary-color, #e9531d);
}

.dark-mode .btn-sm {
    background: #404040;
    color: #ffffff;
    border: 1px solid #555555;
}

.dark-mode .btn-sm:hover {
    background: #4a4a4a;
    border-color: var(--primary-color, #e9531d);
}

/* Form Validation in Dark Mode */
.dark-mode .form-input:invalid:not(:focus),
.dark-mode .form-select:invalid:not(:focus),
.dark-mode .form-textarea:invalid:not(:focus) {
    border-color: #ef4444 !important;
}

/* Select Dropdown Styling in Dark Mode */
.dark-mode .form-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 40px;
}

.dark-mode .form-select option {
    background: #363636;
    color: #ffffff;
}

/* Checkbox and Radio Styling in Dark Mode */
.dark-mode .audience-option input[type="radio"],
.dark-mode .notification-option input[type="checkbox"],
.dark-mode .player-checkbox input[type="checkbox"] {
    filter: invert(0.8) hue-rotate(180deg);
}

/* Focus States for New Elements */
.dark-mode .form-input:focus,
.dark-mode .form-select:focus,
.dark-mode .form-textarea:focus,
.dark-mode .toolbar-btn:focus,
.dark-mode .file-upload-area:focus,
.dark-mode .file-remove:focus {
    outline: 2px solid var(--primary-color, #e9531d);
    outline-offset: 2px;
}

/* Scrollbar for Player Selection in Dark Mode */
.dark-mode .player-selection::-webkit-scrollbar {
    width: 8px;
}

.dark-mode .player-selection::-webkit-scrollbar-track {
    background: #2d2d2d;
}

.dark-mode .player-selection::-webkit-scrollbar-thumb {
    background: #555555;
    border-radius: 4px;
}

.dark-mode .player-selection::-webkit-scrollbar-thumb:hover {
    background: #666666;
}

/* Rich Text Editor Content Area in Dark Mode */
.dark-mode .form-textarea[contenteditable="true"] {
    background: #363636 !important;
    color: #ffffff !important;
}

.dark-mode .form-textarea[contenteditable="true"]:focus {
    background: #404040 !important;
}

/* Drag and Drop States for File Upload */
.dark-mode .file-upload-area.drag-over {
    border-color: var(--primary-color, #e9531d);
    background: #404040;
    box-shadow: 0 0 0 3px rgba(233, 83, 29, 0.1);
}

/* Character Counter for Text Areas */
.dark-mode .char-counter {
    color: #888888;
    font-size: clamp(0.7rem, 1.4vw, 0.75rem);
    text-align: right;
    margin-top: 4px;
}

.dark-mode .char-counter.warning {
    color: #f59e0b;
}

.dark-mode .char-counter.error {
    color: #ef4444;
}

/* Form Hint Text */
.dark-mode .form-hint {
    color: #888888;
    font-size: clamp(0.7rem, 1.4vw, 0.75rem);
    margin-top: 4px;
}

/* Touch device optimizations for new elements */
@media (hover: none) and (pointer: coarse) {
    .dark-mode .toolbar-btn:hover {
        background: #404040;
        border-color: #555555;
    }
    
    .dark-mode .file-upload-area:hover {
        background: #363636;
        border-color: #404040;
    }
    
    .dark-mode .player-checkbox:hover {
        background: transparent;
    }
    
    .dark-mode .btn-outline:hover {
        background: transparent;
        border-color: #404040;
    }
}

/* High contrast mode support for new elements */
@media (prefers-contrast: high) {
    .dark-mode .announcement-form-card,
    .dark-mode .preview-panel {
        border: 2px solid #ffffff;
    }
    
    .dark-mode .form-section {
        border-bottom-width: 2px;
    }
    
    .dark-mode .editor-toolbar {
        border-width: 2px;
        border-bottom: none;
    }
    
    .dark-mode .file-upload-area,
    .dark-mode .player-selection,
    .dark-mode .file-item {
        border-width: 2px;
    }
    
    .dark-mode .toolbar-btn,
    .dark-mode .btn-outline,
    .dark-mode .btn-sm {
        border-width: 2px;
    }
}

/* Reduced motion support for new elements */
@media (prefers-reduced-motion: reduce) {
    .dark-mode .form-input,
    .dark-mode .form-select,
    .dark-mode .form-textarea,
    .dark-mode .toolbar-btn,
    .dark-mode .player-checkbox,
    .dark-mode .file-upload-area,
    .dark-mode .file-remove,
    .dark-mode .btn-outline,
    .dark-mode .btn-sm {
        transition: none;
    }
}

/* Print styles for new elements */
@media print {
    .dark-mode .announcement-form-card,
    .dark-mode .preview-panel {
        background: white !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    
    .dark-mode .announcement-form-card .card-header h3,
    .dark-mode .preview-panel .card-header h3,
    .dark-mode .section-title,
    .dark-mode .audience-option label,
    .dark-mode .notification-option label,
    .dark-mode .player-checkbox label,
    .dark-mode .file-upload-area p,
    .dark-mode .file-name {
        color: #000 !important;
    }
    
    .dark-mode .form-input,
    .dark-mode .form-select,
    .dark-mode .form-textarea {
        background: white !important;
        border-color: #000 !important;
        color: #000 !important;
    }
    
    .dark-mode .form-help,
    .dark-mode .file-upload-area small,
    .dark-mode .file-size,
    .dark-mode .preview-placeholder {
        color: #333 !important;
    }
    
    .dark-mode .editor-toolbar,
    .dark-mode .file-upload-area,
    .dark-mode .player-selection,
    .dark-mode .file-item {
        background: #f8f8f8 !important;
        border-color: #000 !important;
    }
    
    .dark-mode .toolbar-btn,
    .dark-mode .btn-outline,
    .dark-mode .btn-sm {
        background: #f0f0f0 !important;
        color: #000 !important;
        border: 1px solid #000 !important;
    }
}



/* Dark Mode Styles for Add Staff Page */
.dark-mode .add-staff {
    background: #1a1a1a;
}

.dark-mode .content-grid {
    background: transparent;
}

.dark-mode .form-card,
.dark-mode .preview-card,
.dark-mode .help-card,
.dark-mode .recent-card {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .form-card .card-header,
.dark-mode .preview-card .card-header,
.dark-mode .help-card .card-header,
.dark-mode .recent-card .card-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .form-card .card-header h3,
.dark-mode .preview-card .card-header h3,
.dark-mode .help-card .card-header h3,
.dark-mode .recent-card .card-header h3 {
    color: #ffffff;
}

.dark-mode .card-content {
    background: #2d2d2d;
}

/* Form Styles in Dark Mode */
.dark-mode .staff-form {
    background: transparent;
}

.dark-mode .form-section h4 {
    color: #ffffff;
    border-bottom-color: #404040;
}

.dark-mode .form-row {
    background: transparent;
}

.dark-mode .form-group label {
    color: #e0e0e0;
}

.dark-mode .form-group input,
.dark-mode .form-group select,
.dark-mode .form-group textarea {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .form-group input:focus,
.dark-mode .form-group select:focus,
.dark-mode .form-group textarea:focus {
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 0 2px rgba(233, 83, 29, 0.2);
    background: #404040 !important;
}

.dark-mode .form-group input::placeholder,
.dark-mode .form-group textarea::placeholder {
    color: #888888 !important;
}

.dark-mode .error-message {
    color: #ef4444;
}

/* Availability Grid in Dark Mode */
.dark-mode .availability-grid {
    background: #363636;
    border-color: #404040;
}

.dark-mode .checkbox-label {
    color: #ffffff;
}

.dark-mode .checkbox-label input[type="checkbox"] {
    filter: invert(0.8) hue-rotate(180deg);
}

/* Form Actions in Dark Mode */
.dark-mode .form-actions {
    border-top-color: #404040;
    background: transparent;
}

/* Preview Styles in Dark Mode */
.dark-mode .staff-preview {
    background: #363636;
    border-color: #404040;
}

.dark-mode .preview-avatar {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode .preview-info h4 {
    color: #ffffff;
}

.dark-mode .preview-info p {
    color: var(--primary-color, #e9531d);
}

.dark-mode .detail-item {
    color: #b0b0b0;
}

.dark-mode .detail-item i {
    color: var(--primary-color, #e9531d);
}

/* Help Styles in Dark Mode */
.dark-mode .help-items {
    background: transparent;
}

.dark-mode .help-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .help-item i {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode .help-info h5 {
    color: #ffffff;
}

.dark-mode .help-info p {
    color: #b0b0b0;
}

/* Recent List in Dark Mode */
.dark-mode .recent-list {
    background: transparent;
}

.dark-mode .recent-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .recent-avatar {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode .recent-name {
    color: #ffffff;
}

.dark-mode .recent-role {
    color: #b0b0b0;
}


/* Select Dropdown Styling in Dark Mode */
.dark-mode .form-group select {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .form-group select option {
    background: #363636;
    color: #ffffff;
}

/* Focus States for Accessibility in Dark Mode */
.dark-mode .form-group input:focus,
.dark-mode .form-group select:focus,
.dark-mode .form-group textarea:focus,
.dark-mode .checkbox-label input:focus,
.dark-mode .btn:focus {
    outline: 2px solid var(--primary-color, #e9531d);
    outline-offset: 2px;
}

/* Form Validation States in Dark Mode */
.dark-mode .form-group.success input,
.dark-mode .form-group.success select,
.dark-mode .form-group.success textarea {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2);
}

.dark-mode .form-group.error input,
.dark-mode .form-group.error select,
.dark-mode .form-group.error textarea {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2);
}

/* Staff Role Badges in Dark Mode */
.dark-mode .role-badge {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
    font-weight: 600;
}

/* Department Tags in Dark Mode */
.dark-mode .department-tag {
    background: #404040;
    color: #ffffff;
    border: 1px solid #555555;
}

/* Staff Status Indicators in Dark Mode */
.dark-mode .status-inactive {
    color: #6b7280;
}

.dark-mode .status-pending {
    color: #f59e0b;
}

/* Permission Groups in Dark Mode */
.dark-mode .permission-group {
    background: #363636;
    border: 1px solid #404040;
}

.dark-mode .permission-group h5 {
    color: #ffffff;
}

/* Staff Photo Upload in Dark Mode */
.dark-mode .photo-upload-area {
    background: #363636;
    border: 2px dashed #404040;
    transition: all 0.3s ease;
}

.dark-mode .photo-upload-area:hover {
    border-color: var(--primary-color, #e9531d);
    background: #404040;
}

.dark-mode .photo-upload-area i {
    color: #b0b0b0;
    font-size: clamp(2rem, 5vw, 2.5rem);
    margin-bottom: 8px;
}

.dark-mode .photo-upload-area p {
    color: #ffffff;
    margin: 0 0 4px 0;
    font-weight: 500;
}

.dark-mode .photo-upload-area small {
    color: #b0b0b0;
}

/* Touch device optimizations for new elements */
@media (hover: none) and (pointer: coarse) {
    .dark-mode .photo-upload-area:hover {
        background: #363636;
        border-color: #404040;
    }
    
    .dark-mode .help-item:hover {
        background: #363636;
    }
    
    .dark-mode .recent-item:hover {
        background: #363636;
    }
}

/* High contrast mode support for new elements */
@media (prefers-contrast: high) {
    .dark-mode .form-card,
    .dark-mode .preview-card,
    .dark-mode .help-card,
    .dark-mode .recent-card {
        border: 2px solid #ffffff;
    }
    
    .dark-mode .form-section h4 {
        border-bottom-width: 2px;
    }
    
    .dark-mode .availability-grid,
    .dark-mode .staff-preview,
    .dark-mode .help-item,
    .dark-mode .recent-item {
        border-width: 2px;
    }
    
    .dark-mode .permission-group {
        border-width: 2px;
    }
    
    .dark-mode .photo-upload-area {
        border-width: 3px;
    }
}

/* Reduced motion support for new elements */
@media (prefers-reduced-motion: reduce) {
    .dark-mode .form-group input,
    .dark-mode .form-group select,
    .dark-mode .form-group textarea,
    .dark-mode .checkbox-label,
    .dark-mode .photo-upload-area {
        transition: none;
    }
}

/* Print styles for new elements */
@media print {
    .dark-mode .form-card,
    .dark-mode .preview-card,
    .dark-mode .help-card,
    .dark-mode .recent-card {
        background: white !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    
    .dark-mode .form-card .card-header h3,
    .dark-mode .preview-card .card-header h3,
    .dark-mode .help-card .card-header h3,
    .dark-mode .recent-card .card-header h3,
    .dark-mode .form-section h4,
    .dark-mode .form-group label,
    .dark-mode .preview-info h4,
    .dark-mode .recent-name,
    .dark-mode .help-info h5,
    .dark-mode .checkbox-label {
        color: #000 !important;
    }
    
    .dark-mode .form-group input,
    .dark-mode .form-group select,
    .dark-mode .form-group textarea {
        background: white !important;
        border-color: #000 !important;
        color: #000 !important;
    }
    
    .dark-mode .preview-info p,
    .dark-mode .detail-item,
    .dark-mode .recent-role,
    .dark-mode .help-info p {
        color: #333 !important;
    }
    
    .dark-mode .availability-grid,
    .dark-mode .staff-preview,
    .dark-mode .help-item,
    .dark-mode .recent-item {
        background: #f8f8f8 !important;
        border-color: #000 !important;
    }
    
    .dark-mode .preview-avatar,
    .dark-mode .recent-avatar,
    .dark-mode .help-item i {
        background: #000 !important;
        color: white !important;
    }
    
    .dark-mode .photo-upload-area {
        background: #f8f8f8 !important;
        border-color: #000 !important;
    }
    
    .dark-mode .photo-upload-area p {
        color: #000 !important;
    }
}

/* Staff-specific form enhancements */
.dark-mode .staff-id-badge {
    background: linear-gradient(135deg, #363636, #404040);
    border: 1px solid #555555;
}

.dark-mode .staff-id-badge h5 {
    color: #ffffff;
}

.dark-mode .staff-id-badge p {
    color: #b0b0b0;
}

/* Emergency Contact Section */
.dark-mode .emergency-contact-section {
    background: #363636;
}

.dark-mode .emergency-contact-section h5 {
    color: #ffffff;
}

/* Staff Notes Section */
.dark-mode .staff-notes {
    background: #363636;
}

.dark-mode .staff-notes p {
    color: #b0b0b0;
}

/* Access Level Indicators */
.dark-mode .access-level.admin {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.dark-mode .access-level.manager {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.dark-mode .access-level.staff {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.dark-mode .access-level.viewer {
    background: rgba(107, 114, 128, 0.2);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.3);
}


/* Dark Mode Color Schemes for Coach Edit Roster Page */
.dark-mode .coach-edit-roster {
    background: #1a1a1a;
}

.dark-mode .action-bar {
    background: #2d2d2d;
}

.dark-mode .view-toggle {
    background: #363636;
    border-color: #404040;
}

.dark-mode .view-btn {
    color: #b0b0b0;
}

.dark-mode .view-btn.active {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode .team-filter {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .btn-danger {
    background: #dc2626;
    color: #ffffff;
}

.dark-mode .btn-danger:hover {
    background: #b91c1c;
}

.dark-mode .players-section,
.dark-mode .formation-section {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .section-header {
    border-bottom-color: #404040;
}

.dark-mode .section-header h2 {
    color: #ffffff;
}

.dark-mode .player-card {
    background: #363636;
    border-color: #404040;
}

.dark-mode .player-card:hover {
    border-color: var(--primary-color, #e9531d);
    box-shadow: 0 2px 8px rgba(233, 83, 29, 0.3);
}

.dark-mode .player-name {
    color: #ffffff;
}

.dark-mode .player-position {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode .player-number {
    color: #b0b0b0;
}

.dark-mode .formation-select {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .field-container {
    background: #1b5e20;
    border-color: #145214;
}

.dark-mode .soccer-field {
    background: #2e7d32;
    border-color: #ffffff;
}

.dark-mode .center-circle,
.dark-mode .center-line,
.dark-mode .penalty-area,
.dark-mode .goal-area {
    border-color: rgba(255, 255, 255, 0.5);
}

.dark-mode .slot-label {
    color: rgba(255, 255, 255, 0.7);
}

.dark-mode .player-slot {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
}

.dark-mode .player-slot:hover {
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.2);
}

.dark-mode .player-slot.occupied {
    border-color: var(--primary-color, #e9531d);
    background: rgba(233, 83, 29, 0.2);
}

.dark-mode .stat {
    background: #363636;
    border-color: #404040;
}

.dark-mode .stat-value {
    color: var(--primary-color, #e9531d);
}

.dark-mode .stat-label {
    color: #b0b0b0;
}

.dark-mode .player-details-panel {
    background: #2d2d2d;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
}

.dark-mode .panel-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .panel-header h3 {
    color: #ffffff;
}

.dark-mode .close-panel {
    color: #b0b0b0;
}

.dark-mode .close-panel:hover {
    color: #ffffff;
    background: #404040;
}

.dark-mode .player-info {
    border-bottom-color: #404040;
}

.dark-mode .player-details h4 {
    color: #ffffff;
}

.dark-mode .player-details p {
    color: #b0b0b0;
}

.dark-mode .form-group label {
    color: #e0e0e0;
}

.dark-mode .form-group input,
.dark-mode .form-group select {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .form-group input:focus,
.dark-mode .form-group select:focus {
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 5px rgba(233, 83, 29, 0.3);
}

.dark-mode .unsaved-warning {
    background: #4a3c1a;
    border-color: #d97706;
}

.dark-mode .warning-content {
    color: #fbbf24;
}

/* Soccer field specific dark mode enhancements */
.dark-mode .field-lines {
    filter: brightness(0.8);
}

.dark-mode .player-slot.drag-over {
    border-color: var(--primary-color, #e9531d);
    background: rgba(233, 83, 29, 0.3);
}

/* Formation specific dark mode styles */
.dark-mode .formation-preset {
    background: #363636;
    border: 1px solid #404040;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dark-mode .formation-preset:hover {
    border-color: var(--primary-color, #e9531d);
    background: #404040;
}

.dark-mode .formation-preset.active {
    border-color: var(--primary-color, #e9531d);
    background: rgba(233, 83, 29, 0.2);
}

/* Player status indicators in dark mode */
.dark-mode .player-status {
    padding: 2px 6px;
    border-radius: 8px;
    font-size: clamp(0.6rem, 1.3vw, 0.7rem);
    font-weight: 600;
}

.dark-mode .player-status.available {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.dark-mode .player-status.injured {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.dark-mode .player-status.suspended {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

/* Drag and drop states in dark mode */
.dark-mode .drop-zone {
    background: rgba(233, 83, 29, 0.1);
    border: 2px dashed var(--primary-color, #e9531d);
}

.dark-mode .drop-zone.active {
    background: rgba(233, 83, 29, 0.2);
    border-style: solid;
}

/* Position group labels in dark mode */
.dark-mode .position-group-label {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
    font-size: clamp(0.8rem, 1.8vw, 0.9rem);
}

/* Formation strategy notes in dark mode */
.dark-mode .strategy-notes {
    background: #363636;
    border: 1px solid #404040;
    border-radius: 6px;
    padding: 12px;
    margin-top: 15px;
}

.dark-mode .strategy-notes h5 {
    color: #ffffff;
    margin: 0 0 8px 0;
    font-size: clamp(0.85rem, 1.8vw, 0.9rem);
}

.dark-mode .strategy-notes p {
    color: #b0b0b0;
    margin: 0;
    font-size: clamp(0.75rem, 1.6vw, 0.8rem);
    line-height: 1.4;
}


/* Dark Mode Color Schemes for Coach Staff Page */
.dark-mode .coach-staff {
    background: #1a1a1a;
}

.dark-mode .staff-overview {
    background: transparent;
}

.dark-mode .stat-icon {
    background: linear-gradient(135deg, var(--primary-color, #e9531d) 0%, #d4420c 100%);
}

.dark-mode .stat-trend.neutral {
    color: #b0b0b0;
}

.dark-mode .staff-grid {
    background: transparent;
}

.dark-mode .staff-card {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .staff-card .card-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .staff-card .card-header h3 {
    color: #ffffff;
}

.dark-mode .staff-filter {
    background: transparent;
}

.dark-mode .department-filter,
.dark-mode .status-filter,
.dark-mode .role-filter {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .card-content {
    background: #2d2d2d;
}

.dark-mode .staff-list {
    background: transparent;
}

.dark-mode .staff-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .staff-item:hover {
    border-color: var(--primary-color, #e9531d);
    box-shadow: 0 2px 8px rgba(233, 83, 29, 0.3);
}

.dark-mode .staff-avatar {
    background: var(--primary-color, #e9531d);
}

.dark-mode .staff-name {
    color: #ffffff;
}

.dark-mode .staff-role {
    color: var(--primary-color, #e9531d);
}

.dark-mode .staff-department {
    color: #b0b0b0;
}

.dark-mode .action-btn {
    background: #404040;
    border-color: #555555;
    color: #ffffff;
}

.dark-mode .action-btn:hover {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
    border-color: var(--primary-color, #e9531d);
}

.dark-mode .stats-grid {
    background: transparent;
}

.dark-mode .stat-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .stat-value {
    color: #ffffff;
}

.dark-mode .stat-label {
    color: #b0b0b0;
}

.dark-mode .quick-actions-grid {
    background: transparent;
}

.dark-mode .action-icon {
    background: linear-gradient(135deg, var(--primary-color, #e9531d) 0%, #d4420c 100%);
}

.dark-mode .activity-list {
    background: transparent;
}

.dark-mode .activity-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .activity-icon {
    background: var(--primary-color, #e9531d);
}

.dark-mode .activity-text {
    color: #ffffff;
}

.dark-mode .activity-time {
    color: #b0b0b0;
}

.dark-mode .department-stats {
    background: transparent;
}

.dark-mode .department-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .department-name {
    color: #ffffff;
}

.dark-mode .department-count {
    color: var(--primary-color, #e9531d);
}

.dark-mode .staff-management-section {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .section-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .section-header h2 {
    color: #ffffff;
}

.dark-mode .management-filters {
    background: transparent;
}

.dark-mode .staff-table-container {
    background: transparent;
}

.dark-mode .staff-table th {
    background: #363636;
    color: #ffffff;
    border-bottom-color: #404040;
}

.dark-mode .staff-table td {
    background: #2d2d2d;
    color: #ffffff;
    border-bottom-color: #404040;
}

.dark-mode .staff-table tr:hover {
    background: #363636;
}

.dark-mode .table-actions {
    background: transparent;
}

/* Staff status indicators in dark mode */
.dark-mode .status-indicator.active {
    background: #10b981;
}

.dark-mode .status-indicator.inactive {
    background: #6b7280;
}

.dark-mode .status-indicator.on-leave {
    background: #f59e0b;
}

/* Department-specific colors in dark mode */
.dark-mode .department-coaching {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.dark-mode .department-medical {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.dark-mode .department-administration {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.dark-mode .department-scouting {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Staff role badges in dark mode */
.dark-mode .role-badge {
    font-weight: 600;
}

.dark-mode .role-badge.head-coach {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.dark-mode .role-badge.assistant-coach {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.dark-mode .role-badge.physio {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.dark-mode .role-badge.analyst {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

/* Performance indicators in dark mode */
.dark-mode .performance-excellent {
    color: #10b981;
}

.dark-mode .performance-good {
    color: #22c55e;
}

.dark-mode .performance-average {
    color: #eab308;
}

.dark-mode .performance-poor {
    color: #ef4444;
}

/* Availability status in dark mode */
.dark-mode .availability-available {
    color: #10b981;
}

.dark-mode .availability-busy {
    color: #f59e0b;
}

.dark-mode .availability-unavailable {
    color: #ef4444;
}

/* Staff search and filter in dark mode */
.dark-mode .staff-search {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .staff-search::placeholder {
    color: #888888 !important;
}

/* Staff detail modals in dark mode */
.dark-mode .staff-modal {
    background: #2d2d2d;
    border: 1px solid #404040;
}

.dark-mode .staff-modal-header {
    background: #363636;
    border-bottom-color: #404040;
    color: #ffffff;
}

.dark-mode .staff-modal-body {
    background: #2d2d2d;
    color: #ffffff;
}

/* Export buttons in dark mode */
.dark-mode .btn-export {
    background: #404040;
    color: #ffffff;
    border: 1px solid #555555;
}

.dark-mode .btn-export:hover {
    background: #4a4a4a;
    border-color: var(--primary-color, #e9531d);
}


/* Dark Mode Color Schemes for Coach Matches Page */
.dark-mode .coach-matches {
    background: #1a1a1a;
}

.dark-mode .matches-overview .stat-card {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .matches-overview .stat-card:hover {
    border-color: var(--primary-color, #e9531d);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.dark-mode .matches-overview .stat-icon {
    background: var(--primary-color, #e9531d);
}

.dark-mode .matches-overview .stat-info h3 {
    color: #ffffff;
}

.dark-mode .matches-overview .stat-info p {
    color: #b0b0b0;
}

.dark-mode .matches-grid {
    background: transparent;
}

.dark-mode .matches-card {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .matches-card .card-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .matches-card .card-header h3 {
    color: #ffffff;
}

.dark-mode .match-filter,
.dark-mode .schedule-filters {
    background: transparent;
}

.dark-mode .match-filter select,
.dark-mode .schedule-filters select {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .match-filter select:focus,
.dark-mode .schedule-filters select:focus {
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 5px rgba(233, 83, 29, 0.3);
}

.dark-mode .matches-card .card-content {
    background: #2d2d2d;
}

.dark-mode .matches-list,
.dark-mode .lineup-management,
.dark-mode .preparation-list,
.dark-mode .opponent-list {
    background: transparent;
}

.dark-mode .match-item,
.dark-mode .lineup-item,
.dark-mode .preparation-item,
.dark-mode .opponent-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .match-icon,
.dark-mode .lineup-icon,
.dark-mode .preparation-icon,
.dark-mode .opponent-icon {
    background: var(--primary-color, #e9531d);
}

.dark-mode .match-name,
.dark-mode .lineup-name,
.dark-mode .preparation-name,
.dark-mode .opponent-name {
    color: #ffffff;
}

.dark-mode .match-details,
.dark-mode .lineup-details,
.dark-mode .preparation-details,
.dark-mode .opponent-details {
    color: #b0b0b0;
}

.dark-mode .match-time,
.dark-mode .lineup-time,
.dark-mode .preparation-time,
.dark-mode .opponent-time {
    color: #888888;
}

.dark-mode .stats-grid {
    background: transparent;
}

.dark-mode .stat-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .stat-value {
    color: var(--primary-color, #e9531d);
}

.dark-mode .stat-label {
    color: #b0b0b0;
}

.dark-mode .match-schedule-section {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .section-header {
    background: #363636 !important;
    border-bottom-color: #404040;
}

.dark-mode .section-header h2 {
    color: #ffffff;
}

.dark-mode .competition-filter,
.dark-mode .time-filter,
.dark-mode .status-filter {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .schedule-container {
    background: #363636;
    border-color: #404040;
}

.dark-mode .schedule-list {
    background: #363636;
}

/* Match status indicators in dark mode */
.dark-mode .match-status {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: clamp(0.7rem, 1.6vw, 0.75rem);
    font-weight: 600;
}

.dark-mode .match-status.upcoming {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.dark-mode .match-status.live {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.dark-mode .match-status.completed {
    background: rgba(107, 114, 128, 0.2);
    color: #6b7280;
}

.dark-mode .match-status.cancelled {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Competition type badges in dark mode */
.dark-mode .competition-badge {
    background: #404040;
    color: #ffffff;
    border: 1px solid #555555;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: clamp(0.7rem, 1.6vw, 0.75rem);
}

/* Match result indicators in dark mode */
.dark-mode .match-result {
    font-weight: 700;
    font-size: clamp(0.9rem, 2vw, 1rem);
}

.dark-mode .match-result.win {
    color: #10b981;
}

.dark-mode .match-result.loss {
    color: #ef4444;
}

.dark-mode .match-result.draw {
    color: #f59e0b;
}

/* Team colors in dark mode */
.dark-mode .team-home {
    color: #3b82f6;
}

.dark-mode .team-away {
    color: #ef4444;
}

/* Match importance indicators in dark mode */
.dark-mode .importance-high {
    border-left: 4px solid #ef4444;
}

.dark-mode .importance-medium {
    border-left: 4px solid #f59e0b;
}

.dark-mode .importance-low {
    border-left: 4px solid #6b7280;
}

/* Preparation status in dark mode */
.dark-mode .preparation-status {
    padding: 4px 8px;
    border-radius: 8px;
    font-size: clamp(0.7rem, 1.6vw, 0.75rem);
    font-weight: 600;
}

.dark-mode .preparation-status.complete {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.dark-mode .preparation-status.in-progress {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.dark-mode .preparation-status.pending {
    background: rgba(107, 114, 128, 0.2);
    color: #6b7280;
}

/* Opponent strength indicators in dark mode */
.dark-mode .opponent-strength {
    font-weight: 600;
}

.dark-mode .opponent-strength.strong {
    color: #ef4444;
}

.dark-mode .opponent-strength.medium {
    color: #f59e0b;
}

.dark-mode .opponent-strength.weak {
    color: #10b981;
}

/* Match venue indicators in dark mode */
.dark-mode .venue-home {
    color: #3b82f6;
}

.dark-mode .venue-away {
    color: #ef4444;
}

.dark-mode .venue-neutral {
    color: #6b7280;
}

/* Weather conditions in dark mode */
.dark-mode .weather-sunny {
    color: #f59e0b;
}

.dark-mode .weather-cloudy {
    color: #6b7280;
}

.dark-mode .weather-rainy {
    color: #3b82f6;
}

/* Match statistics progress bars in dark mode */
.dark-mode .stat-progress {
    background: #404040;
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
}

.dark-mode .stat-progress-fill {
    background: var(--primary-color, #e9531d);
    height: 100%;
    border-radius: 4px;
}

/* Timeline indicators in dark mode */
.dark-mode .timeline-item {
    border-left: 2px solid #404040;
    padding-left: 15px;
    position: relative;
}

.dark-mode .timeline-item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-color, #e9531d);
}

/* Match notes section in dark mode */
.dark-mode .match-notes {
    background: #363636;
    border: 1px solid #404040;
    border-radius: 8px;
    padding: 12px;
    margin-top: 10px;
}

.dark-mode .match-notes h5 {
    color: #ffffff;
    margin: 0 0 8px 0;
    font-size: clamp(0.85rem, 1.8vw, 0.9rem);
}

.dark-mode .match-notes p {
    color: #b0b0b0;
    margin: 0;
    font-size: clamp(0.75rem, 1.6vw, 0.8rem);
    line-height: 1.4;
}

/* Popup styles in dark mode */
.dark-mode .matches-popup {
    background-color: rgba(0, 0, 0, 0.7);
}

.dark-mode .popup-content {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #ffffff;
}

.dark-mode .close-btn {
    color: #b0b0b0;
}

.dark-mode .close-btn:hover,
.dark-mode .close-btn:focus {
    color: #ffffff;
}

.dark-mode .popup-empty-state {
    color: #b0b0b0;
}

.dark-mode .popup-empty-state i {
    color: #666666;
}

/* Form elements in popups for dark mode */
.dark-mode .match-form input,
.dark-mode .match-form select,
.dark-mode .match-form textarea {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .match-form input:focus,
.dark-mode .match-form select:focus,
.dark-mode .match-form textarea:focus {
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 5px rgba(233, 83, 29, 0.3);
}

/* Tactical formation preview in dark mode */
.dark-mode .formation-preview {
    background: #1b5e20;
    border: 2px solid #145214;
    border-radius: 8px;
    padding: 15px;
}

.dark-mode .formation-field {
    background: #2e7d32;
    border: 2px solid #ffffff;
}

/* Player availability in dark mode */
.dark-mode .availability-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.dark-mode .availability-indicator.available {
    background: #10b981;
}

.dark-mode .availability-indicator.doubtful {
    background: #f59e0b;
}

.dark-mode .availability-indicator.unavailable {
    background: #ef4444;
}


/* Dark Mode Color Schemes for Coach Tactics Page */
.dark-mode .coach-tactics {
    background: #1a1a1a;
}

.dark-mode .tactics-overview .stat-card {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .tactics-overview .stat-card:hover {
    border-color: var(--primary-color, #e9531d);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.dark-mode .tactics-overview .stat-icon {
    background: var(--primary-color, #e9531d);
}

.dark-mode .tactics-overview .stat-info h3 {
    color: #ffffff;
}

.dark-mode .tactics-overview .stat-info p {
    color: #b0b0b0;
}

.dark-mode .tactics-grid {
    background: transparent;
}

.dark-mode .tactics-card {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .tactics-card .card-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .tactics-card .card-header h3 {
    color: #ffffff;
}

.dark-mode .formation-filter,
.dark-mode .prep-filters {
    background: transparent;
}

.dark-mode .formation-filter select,
.dark-mode .prep-filters select {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .formation-filter select:focus,
.dark-mode .prep-filters select:focus {
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 5px rgba(233, 83, 29, 0.3);
}

.dark-mode .tactics-card .card-content {
    background: #2d2d2d;
}

.dark-mode .tactic-creation {
    background: transparent;
}

.dark-mode .tactic-input input,
.dark-mode .tactic-input select,
.dark-mode .tactic-input textarea {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .tactic-input input:focus,
.dark-mode .tactic-input select:focus,
.dark-mode .tactic-input textarea:focus {
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 5px rgba(233, 83, 29, 0.3);
}

.dark-mode .tactic-input input::placeholder,
.dark-mode .tactic-input textarea::placeholder {
    color: #888888 !important;
}

.dark-mode .formation-builder {
    background: transparent;
}

.dark-mode .formation-preview {
    background: #1b5e20;
    border-color: #145214;
}

.dark-mode .formation-lines {
    background: transparent;
}

.dark-mode .formation-line {
    background: rgba(255, 255, 255, 0.3);
}

.dark-mode .player-positions {
    background: transparent;
}

.dark-mode .tactics-list,
.dark-mode .drills-list {
    background: transparent;
}

.dark-mode .tactic-item,
.dark-mode .drill-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .tactic-icon,
.dark-mode .drill-icon {
    background: var(--primary-color, #e9531d);
}

.dark-mode .tactic-name,
.dark-mode .drill-name {
    color: #ffffff;
}

.dark-mode .tactic-desc,
.dark-mode .drill-desc {
    color: #b0b0b0;
}

.dark-mode .tactic-formation,
.dark-mode .drill-type {
    color: #888888;
}

.dark-mode .match-prep-section {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .section-header {
    background: #363636 !important;
    border-bottom-color: #404040;
}

.dark-mode .section-header h2 {
    color: #ffffff;
}

.dark-mode .type-filter,
.dark-mode .opponent-filter {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .prep-container {
    background: #363636;
    border-color: #404040;
}

.dark-mode .prep-list {
    background: #363636;
}

/* Tactical style indicators in dark mode */
.dark-mode .tactic-style {
    font-weight: 600;
}

.dark-mode .tactic-style.attacking {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.dark-mode .tactic-style.defensive {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.dark-mode .tactic-style.balanced {
    background: rgba(107, 114, 128, 0.2);
    color: #6b7280;
}

.dark-mode .tactic-style.counter-attack {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

/* Formation complexity indicators in dark mode */
.dark-mode .complexity-simple {
    color: #10b981;
}

.dark-mode .complexity-moderate {
    color: #f59e0b;
}

.dark-mode .complexity-complex {
    color: #ef4444;
}

/* Drill difficulty levels in dark mode */
.dark-mode .difficulty-beginner {
    color: #10b981;
}

.dark-mode .difficulty-intermediate {
    color: #f59e0b;
}

.dark-mode .difficulty-advanced {
    color: #ef4444;
}

/* Tactical phase indicators in dark mode */
.dark-mode .phase-offensive {
    background: rgba(16, 185, 129, 0.1);
    border-left: 4px solid #10b981;
}

.dark-mode .phase-defensive {
    background: rgba(59, 130, 246, 0.1);
    border-left: 4px solid #3b82f6;
}

.dark-mode .phase-transition {
    background: rgba(245, 158, 11, 0.1);
    border-left: 4px solid #f59e0b;
}

/* Player role indicators in dark mode */
.dark-mode .role-goalkeeper {
    color: #ef4444;
}

.dark-mode .role-defender {
    color: #3b82f6;
}

.dark-mode .role-midfielder {
    color: #f59e0b;
}

.dark-mode .role-forward {
    color: #10b981;
}

/* Formation success rate indicators in dark mode */
.dark-mode .success-high {
    color: #10b981;
}

.dark-mode .success-medium {
    color: #f59e0b;
}

.dark-mode .success-low {
    color: #ef4444;
}

/* Drill duration indicators in dark mode */
.dark-mode .duration-short {
    color: #10b981;
}

.dark-mode .duration-medium {
    color: #f59e0b;
}

.dark-mode .duration-long {
    color: #ef4444;
}

/* Tactical principle indicators in dark mode */
.dark-mode .principle-possession {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.dark-mode .principle-pressing {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.dark-mode .principle-counter {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Player position dots in formation builder */
.dark-mode .position-dot {
    background: var(--primary-color, #e9531d);
    border: 2px solid #ffffff;
    transform: translate(-50%, -50%);
}

.dark-mode .position-dot.goalkeeper {
    background: #ef4444;
}

.dark-mode .position-dot.defender {
    background: #3b82f6;
}

.dark-mode .position-dot.midfielder {
    background: #f59e0b;
}

.dark-mode .position-dot.forward {
    background: #10b981;
}

/* Tactical notes section in dark mode */
.dark-mode .tactic-notes {
    background: #363636;
    border: 1px solid #404040;
}

.dark-mode .tactic-notes h5 {
    color: #ffffff;
}

.dark-mode .tactic-notes p {
    color: #b0b0b0;
}

/* Drill objectives in dark mode */
.dark-mode .drill-objectives {
    background: #363636;
    border: 1px solid #404040;
}

.dark-mode .drill-objectives h6 {
    color: #ffffff;
}

.dark-mode .drill-objectives ul {
    color: #b0b0b0;
}

/* Formation statistics in dark mode */
.dark-mode .formation-stats {
    background: #363636;
    border: 1px solid #404040;
}

.dark-mode .formation-stats h5 {
    color: #ffffff;
}

.dark-mode .stat-row {
    border-bottom: 1px solid #404040;
}

.dark-mode .stat-label {
    color: #b0b0b0;
}

.dark-mode .stat-value {
    color: #ffffff;
    font-weight: 600;
}

/* Popup styles in dark mode */
.dark-mode .matches-popup {
    background-color: rgba(0, 0, 0, 0.7);
}

.dark-mode .popup-content {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #ffffff;
}

.dark-mode .close-btn {
    color: #b0b0b0;
}

.dark-mode .close-btn:hover,
.dark-mode .close-btn:focus {
    color: #ffffff;
}

.dark-mode .popup-empty-state {
    color: #b0b0b0;
}

.dark-mode .popup-empty-state i {
    color: #666666;
}

/* Tactical analysis sections in dark mode */
.dark-mode .analysis-section {
    background: #363636;
}

.dark-mode .analysis-section h4 {
    color: #ffffff;
}

.dark-mode .strength-item {
    color: #10b981;
}

.dark-mode .weakness-item {
    color: #ef4444;
}

/* Formation comparison in dark mode */
.dark-mode .comparison-grid {
    background: #363636;
    border: 1px solid #404040;
}

.dark-mode .comparison-item {
    border-bottom: 1px solid #404040;
}

.dark-mode .comparison-item:last-child {
    border-bottom: none;
}

.dark-mode .comparison-label {
    color: #b0b0b0;
}

.dark-mode .comparison-value {
    color: #ffffff;
    font-weight: 600;
}



/* Dark Mode Color Schemes for Coach Announcements Page */
.dark-mode .coach-announcements {
    background: #1a1a1a;
}

.dark-mode .announcements-overview .stat-card {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .announcements-overview .stat-card:hover {
    border-color: var(--primary-color, #e9531d);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.dark-mode .announcements-overview .stat-icon {
    background: var(--primary-color, #e9531d);
}

.dark-mode .announcements-overview .stat-info h3 {
    color: #ffffff;
}

.dark-mode .announcements-overview .stat-info p {
    color: #b0b0b0;
}

.dark-mode .announcements-grid {
    background: transparent;
}

.dark-mode .announcements-card {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .announcements-card .card-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .announcements-card .card-header h3 {
    color: #ffffff;
}

.dark-mode .announcement-filter,
.dark-mode .management-filters {
    background: transparent;
}

.dark-mode .announcement-filter select,
.dark-mode .management-filters select {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .announcement-filter select:focus,
.dark-mode .management-filters select:focus {
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 5px rgba(233, 83, 29, 0.3);
}

.dark-mode .announcements-card .card-content {
    background: #2d2d2d;
}

.dark-mode .announcements-list,
.dark-mode .scheduled-list,
.dark-mode .templates-list {
    background: transparent;
}

.dark-mode .announcement-item,
.dark-mode .scheduled-item,
.dark-mode .template-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .announcement-icon {
    background: var(--primary-color, #e9531d);
}

.dark-mode .announcement-title {
    color: #ffffff;
}

.dark-mode .announcement-preview {
    color: #b0b0b0;
}

.dark-mode .announcement-meta {
    color: #888888;
}

.dark-mode .announcement-type {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode .create-announcement-preview {
    background: transparent;
}

.dark-mode .announcement-form-mini {
    background: transparent;
}

.dark-mode .form-input-mini,
.dark-mode .form-textarea-mini {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .form-input-mini:focus,
.dark-mode .form-textarea-mini:focus {
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 3px rgba(233, 83, 29, 0.3);
}

.dark-mode .form-input-mini::placeholder,
.dark-mode .form-textarea-mini::placeholder {
    color: #888888 !important;
}

.dark-mode .btn-outline-mini {
    background: transparent;
    border-color: #404040;
    color: #e0e0e0;
}

.dark-mode .btn-outline-mini:hover {
    background: #404040;
    border-color: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode .btn-primary-mini {
    background: linear-gradient(135deg, var(--primary-color, #e9531d) 0%, #d4420c 100%);
    color: #ffffff;
}

.dark-mode .btn-primary-mini:hover {
    background: linear-gradient(135deg, #d4420c 0%, #bf3a0a 100%);
}

.dark-mode .announcements-management-section {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .section-header {
    background: #363636 !important;
    border-bottom-color: #404040;
}

.dark-mode .section-header h2 {
    color: #ffffff;
}

.dark-mode .status-filter,
.dark-mode .timeframe-filter {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .announcements-table-container {
    background: #363636;
    border-color: #404040;
}

.dark-mode .announcements-table th {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode .announcements-table td {
    background: #2d2d2d;
    color: #ffffff;
    border-bottom-color: #404040;
}

.dark-mode .announcements-table tr:hover {
    background: #404040;
}

/* Announcement status indicators in dark mode */
.dark-mode .announcement-status {
    font-weight: 600;
}

.dark-mode .announcement-status.published {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.dark-mode .announcement-status.scheduled {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.dark-mode .announcement-status.draft {
    background: rgba(107, 114, 128, 0.2);
    color: #6b7280;
}

.dark-mode .announcement-status.expired {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Announcement priority indicators in dark mode */
.dark-mode .priority-high {
    border-left: 4px solid #ef4444;
}

.dark-mode .priority-medium {
    border-left: 4px solid #f59e0b;
}

.dark-mode .priority-low {
    border-left: 4px solid #6b7280;
}

/* Audience type badges in dark mode */
.dark-mode .audience-team {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.dark-mode .audience-staff {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.dark-mode .audience-all {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Template category indicators in dark mode */
.dark-mode .template-category {
    font-weight: 600;
}

.dark-mode .template-category.match {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.dark-mode .template-category.training {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.dark-mode .template-category.general {
    background: rgba(107, 114, 128, 0.2);
    color: #6b7280;
}

.dark-mode .template-category.urgent {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

/* Read status indicators in dark mode */
.dark-mode .read-status.read {
    background: #10b981;
}

.dark-mode .read-status.unread {
    background: #ef4444;
}

.dark-mode .read-status.partial {
    background: #f59e0b;
}

/* Delivery status indicators in dark mode */
.dark-mode .delivery-status {
    font-weight: 600;
}

.dark-mode .delivery-status.sent {
    color: #10b981;
}

.dark-mode .delivery-status.failed {
    color: #ef4444;
}

.dark-mode .delivery-status.pending {
    color: #f59e0b;
}

/* Announcement importance indicators in dark mode */
.dark-mode .importance-critical {
    color: #ef4444;
    font-weight: 700;
}

.dark-mode .importance-important {
    color: #f59e0b;
    font-weight: 600;
}

.dark-mode .importance-normal {
    color: #6b7280;
}

/* Template usage statistics in dark mode */
.dark-mode .usage-high {
    color: #10b981;
}

.dark-mode .usage-medium {
    color: #f59e0b;
}

.dark-mode .usage-low {
    color: #6b7280;
}

/* Schedule timing indicators in dark mode */
.dark-mode .timing-upcoming {
    color: #10b981;
}

.dark-mode .timing-past {
    color: #6b7280;
}

.dark-mode .timing-overdue {
    color: #ef4444;
}

/* Response rate indicators in dark mode */
.dark-mode .response-excellent {
    color: #10b981;
}

.dark-mode .response-good {
    color: #22c55e;
}

.dark-mode .response-poor {
    color: #ef4444;
}

/* Announcement analytics in dark mode */
.dark-mode .analytics-card {
    background: #363636;
    border: 1px solid #404040;
}

.dark-mode .analytics-card h4 {
    color: #ffffff;
}

.dark-mode .analytics-metric {
    border-bottom: 1px solid #404040;
}

.dark-mode .analytics-metric:last-child {
    border-bottom: none;
}

/* Quick action buttons in dark mode */
.dark-mode .quick-action {
    background: #404040;
    border: 1px solid #555555;
    color: #ffffff;
}

.dark-mode .quick-action:hover {
    background: #4a4a4a;
    border-color: var(--primary-color, #e9531d);
}

/* Template preview in dark mode */
.dark-mode .template-preview {
    background: #363636;
    border: 1px solid #404040;
}

.dark-mode .template-preview h5 {
    color: #ffffff;
}

.dark-mode .template-preview p {
    color: #b0b0b0;
}

/* Bulk actions panel in dark mode */
.dark-mode .bulk-actions {
    background: #363636;
    border: 1px solid #404040;
}

.dark-mode .bulk-actions h5 {
    color: #ffffff;
}


/* Announcement history in dark mode */
.dark-mode .history-item {
    background: #363636;
    border: 1px solid #404040;
}

.dark-mode .history-action {
    color: #ffffff;
    font-weight: 600;
}

.dark-mode .history-details {
    color: #b0b0b0;
}

/* Popup styles in dark mode */
.dark-mode .matches-popup {
    background-color: rgba(0, 0, 0, 0.7);
}

.dark-mode .popup-content {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #ffffff;
}

.dark-mode .close-btn {
    color: #b0b0b0;
}

.dark-mode .close-btn:hover,
.dark-mode .close-btn:focus {
    color: #ffffff;
}

.dark-mode .popup-empty-state {
    color: #b0b0b0;
}

.dark-mode .popup-empty-state i {
    color: #666666;
}

/* Form elements in popups for dark mode */
.dark-mode .announcement-form input,
.dark-mode .announcement-form select,
.dark-mode .announcement-form textarea {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .announcement-form input:focus,
.dark-mode .announcement-form select:focus,
.dark-mode .announcement-form textarea:focus {
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 5px rgba(233, 83, 29, 0.3);
}


/* Dark Mode Color Schemes for Coach Team Settings Page */
.dark-mode .coach-team-settings {
    background: #1a1a1a;
}

.dark-mode .settings-nav {
    background: #2d2d2d;
}

.dark-mode .nav-tab {
    color: #b0b0b0;
    border-bottom-color: transparent;
}

.dark-mode .nav-tab:hover {
    color: var(--primary-color, #e9531d);
}

.dark-mode .nav-tab.active {
    color: var(--primary-color, #e9531d);
    border-bottom-color: var(--primary-color, #e9531d);
}

.dark-mode .settings-content {
    background: transparent;
}

.dark-mode .settings-card {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .settings-card .card-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .settings-card .card-header h3 {
    color: #ffffff;
}

.dark-mode .settings-card .card-content {
    background: #2d2d2d;
}

.dark-mode .settings-form {
    background: transparent;
}

.dark-mode .form-group label {
    color: #e0e0e0;
}

.dark-mode .form-input,
.dark-mode .form-select,
.dark-mode .form-textarea {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .form-input:focus,
.dark-mode .form-select:focus,
.dark-mode .form-textarea:focus {
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 0 2px rgba(233, 83, 29, 0.2);
}

.dark-mode .form-help {
    color: #b0b0b0;
}

.dark-mode .form-checkbox {
    background: #363636;
    border-color: #404040;
}

.dark-mode .checkbox-group label {
    color: #e0e0e0;
}

.dark-mode .form-color {
    background: #363636;
    border-color: #404040;
}

.dark-mode .color-hex {
    color: #ffffff;
    background: #363636;
}

.dark-mode .logo-preview {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode .upload-actions {
    background: transparent;
}

.dark-mode .range-separator {
    color: #b0b0b0;
}

.dark-mode .danger-zone {
    border-color: #7f1d1d;
}

.dark-mode .danger-zone .card-header {
    background: #4a1a1f;
    border-bottom-color: #7f1d1d;
}

.dark-mode .danger-zone .card-header h3 {
    color: #ef4444;
}

.dark-mode .danger-item {
    background: #4a1a1f;
    border-color: #7f1d1d;
}

.dark-mode .danger-info h4 {
    color: #ef4444;
}

.dark-mode .danger-info p {
    color: #fca5a5;
}

.dark-mode .btn-warning {
    background: #f59e0b;
    color: #ffffff;
}

.dark-mode .btn-warning:hover {
    background: #d97706;
}

.dark-mode .btn-danger {
    background: #dc2626;
    color: #ffffff;
}

.dark-mode .btn-danger:hover {
    background: #b91c1c;
}

.dark-mode .settings-actions {
    background: #2d2d2d;
}

.dark-mode .btn-secondary {
    background: #363636;
    color: #e0e0e0;
    border-color: #404040;
}

.dark-mode .btn-secondary:hover {
    background: #404040;
    border-color: var(--primary-color, #e9531d);
}

.dark-mode .btn-outline {
    background: transparent;
    color: #e0e0e0;
    border-color: #404040;
}

.dark-mode .btn-outline:hover {
    background: #404040;
    border-color: var(--primary-color, #e9531d);
}

/* Form validation in dark mode */
.dark-mode .form-input:invalid,
.dark-mode .form-select:invalid,
.dark-mode .form-textarea:invalid {
    border-color: #ef4444;
}

.dark-mode .form-input:valid,
.dark-mode .form-select:valid,
.dark-mode .form-textarea:valid {
    border-color: #10b981;
}

/* Settings category indicators in dark mode */
.dark-mode .settings-category {
    background: #363636;
    border-left: 4px solid var(--primary-color, #e9531d);
}

.dark-mode .settings-category h4 {
    color: #ffffff;
}

.dark-mode .settings-category p {
    color: #b0b0b0;
}

/* Team color scheme preview in dark mode */
.dark-mode .color-scheme-preview {
    background: #363636;
    border: 1px solid #404040;
}

.dark-mode .color-scheme-preview h5 {
    color: #ffffff;
}

.dark-mode .color-swatch {
    border: 2px solid #404040;
}

/* Permission levels in dark mode */
.dark-mode .permission-level {
    font-weight: 600;
}

.dark-mode .permission-level.admin {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.dark-mode .permission-level.coach {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.dark-mode .permission-level.staff {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Integration status in dark mode */
.dark-mode .integration-status {
    font-weight: 600;
}

.dark-mode .integration-status.connected {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.dark-mode .integration-status.disconnected {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.dark-mode .integration-status.pending {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

/* Backup status in dark mode */
.dark-mode .backup-status {
    color: #10b981;
}

.dark-mode .backup-status.outdated {
    color: #f59e0b;
}

.dark-mode .backup-status.failed {
    color: #ef4444;
}

/* Setting descriptions in dark mode */
.dark-mode .setting-description {
    background: #363636;
    border: 1px solid #404040;
}

.dark-mode .setting-description h6 {
    color: #ffffff;
}

.dark-mode .setting-description p {
    color: #b0b0b0;
}

/* Team member roles in dark mode */
.dark-mode .role-badge {
    font-weight: 600;
}

.dark-mode .role-badge.owner {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

.dark-mode .role-badge.coach {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.dark-mode .role-badge.assistant {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

/* Import/export status in dark mode */
.dark-mode .import-status.success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.dark-mode .import-status.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.dark-mode .import-status.warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

/* License status in dark mode */
.dark-mode .license-status.active {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.dark-mode .license-status.expired {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.dark-mode .license-status.warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

/* System requirements in dark mode */
.dark-mode .requirement-met {
    color: #10b981;
}

.dark-mode .requirement-warning {
    color: #f59e0b;
}

.dark-mode .requirement-error {
    color: #ef4444;
}

/* Settings group headers in dark mode */
.dark-mode .settings-group-header {
    background: #363636;
    border-bottom: 2px solid var(--primary-color, #e9531d);
}

.dark-mode .settings-group-header h4 {
    color: #ffffff;
}

/* Configuration warnings in dark mode */
.dark-mode .config-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.dark-mode .config-warning h5 {
    color: #f59e0b;
}

.dark-mode .config-warning p {
    color: #fbbf24;
}


/* Dark Mode Styles for Coach Performance */
.dark-mode .coach-performance {
    background: #1a1a1a;
}

.dark-mode .page-header h1 {
    color: #ffffff;
}

.dark-mode .page-header p {
    color: #b0b0b0;
}

.dark-mode .performance-overview .stat-card {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .performance-overview .stat-card:hover {
    border-color: var(--primary-color, #e9531d);
    background: #363636;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.dark-mode .performance-overview .stat-info h3 {
    color: #ffffff;
}

.dark-mode .performance-overview .stat-info p {
    color: #b0b0b0;
}

.dark-mode .performance-card {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .performance-card .card-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .performance-card .card-header h3 {
    color: #ffffff;
}

.dark-mode .performance-card .card-content {
    background: #2d2d2d;
}

/* Filter Styles in Dark Mode */
.dark-mode .position-filter select,
.dark-mode .analytics-filters select,
.dark-mode .type-filter,
.dark-mode .time-filter {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .position-filter select:focus,
.dark-mode .analytics-filters select:focus,
.dark-mode .type-filter:focus,
.dark-mode .time-filter:focus {
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 5px rgba(233, 83, 29, 0.3);
    background: #404040 !important;
}

/* Players List Styles in Dark Mode */
.dark-mode .player-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .player-item:hover {
    background: #404040;
    border-color: var(--primary-color, #e9531d);
}

.dark-mode .player-name {
    color: #ffffff;
}

.dark-mode .player-position {
    color: #b0b0b0;
}

.dark-mode .player-rating {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

/* Stats Grid in Dark Mode */
.dark-mode .stat-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .stat-value {
    color: var(--primary-color, #e9531d);
}

.dark-mode .stat-label {
    color: #b0b0b0;
}

/* Lists in Dark Mode */
.dark-mode .alert-item,
.dark-mode .training-item,
.dark-mode .fitness-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .alert-item:hover,
.dark-mode .training-item:hover,
.dark-mode .fitness-item:hover {
    background: #404040;
    border-color: var(--primary-color, #e9531d);
}

/* Analytics Section in Dark Mode */
.dark-mode .analytics-section {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .section-header {
    background: #363636 !important;
    border-bottom-color: #404040;
}

.dark-mode .section-header h2 {
    color: #ffffff;
}

.dark-mode .analytics-container {
    background: #363636;
    border-color: #404040;
}

.dark-mode .analytics-list {
    background: #363636;
    color: #ffffff;
}

/* Popup Styles in Dark Mode */
.dark-mode .matches-popup {
    background-color: rgba(0, 0, 0, 0.7);
}

.dark-mode .popup-content {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #ffffff;
}

.dark-mode .close-btn {
    color: #b0b0b0;
}

.dark-mode .close-btn:hover,
.dark-mode .close-btn:focus {
    color: #ffffff;
}

.dark-mode .popup-empty-state {
    color: #b0b0b0;
}

.dark-mode .popup-empty-state i {
    color: #666666;
}

/* Player Avatar in Dark Mode */
.dark-mode .player-avatar {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

/* Stat Icon in Dark Mode */
.dark-mode .performance-overview .stat-icon {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

/* Enhanced hover effects for dark mode */
.dark-mode .player-item:hover .player-avatar {
    background: #ffffff;
    color: var(--primary-color, #e9531d);
    transform: scale(1.1);
}

/* Table and list styles for analytics in dark mode */
.dark-mode .analytics-list table {
    color: #ffffff;
    background: #363636;
}

.dark-mode .analytics-list th {
    background: #404040;
    color: #ffffff;
    border-bottom: 2px solid #555555;
}

.dark-mode .analytics-list td {
    border-bottom: 1px solid #404040;
    background: #363636;
}

.dark-mode .analytics-list tr:hover td {
    background: #404040;
}

/* Scrollbar styling for analytics container in dark mode */
.dark-mode .analytics-container::-webkit-scrollbar {
    height: 8px;
}

.dark-mode .analytics-container::-webkit-scrollbar-track {
    background: #2d2d2d;
}

.dark-mode .analytics-container::-webkit-scrollbar-thumb {
    background: #555555;
}

.dark-mode .analytics-container::-webkit-scrollbar-thumb:hover {
    background: #666666;
}

/* Focus states for accessibility in dark mode */
.dark-mode .position-filter select:focus,
.dark-mode .analytics-filters select:focus,
.dark-mode .type-filter:focus,
.dark-mode .time-filter:focus,
.dark-mode .close-btn:focus {
    outline: 2px solid var(--primary-color, #e9531d);
    outline-offset: 2px;
}

/* Selection styles in dark mode */
.dark-mode ::selection {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode ::-moz-selection {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

/* Touch device optimizations for dark mode */
@media (hover: none) and (pointer: coarse) {
    .dark-mode .performance-overview .stat-card:hover {
        transform: none;
        background: #2d2d2d;
    }
    
    .dark-mode .player-item:hover {
        background: #363636;
        border-color: #404040;
    }
    
    .dark-mode .performance-overview .stat-card:hover .stat-icon,
    .dark-mode .player-item:hover .player-avatar {
        transform: none;
        background: var(--primary-color, #e9531d);
        color: #ffffff;
    }
}

/* High contrast mode support for dark mode */
@media (prefers-contrast: high) {
    .dark-mode .performance-overview .stat-card,
    .dark-mode .performance-card,
    .dark-mode .analytics-section {
        border: 2px solid #ffffff;
    }
    
    .dark-mode .player-item,
    .dark-mode .stat-item,
    .dark-mode .alert-item,
    .dark-mode .training-item,
    .dark-mode .fitness-item {
        border: 2px solid #ffffff;
    }
    
    .dark-mode .section-header {
        border-bottom: 2px solid #ffffff;
    }
    
    .dark-mode .analytics-container {
        border: 2px solid #ffffff;
    }
    
    .dark-mode .position-filter select,
    .dark-mode .analytics-filters select {
        border: 2px solid #ffffff;
    }
}

/* Reduced motion support for dark mode */
@media (prefers-reduced-motion: reduce) {
    .dark-mode .performance-overview .stat-card,
    .dark-mode .player-item,
    .dark-mode .alert-item,
    .dark-mode .training-item,
    .dark-mode .fitness-item {
        transition: none;
    }
    
    .dark-mode .performance-overview .stat-card:hover {
        transform: none;
    }
    
    .dark-mode .performance-overview .stat-card:hover .stat-icon,
    .dark-mode .player-item:hover .player-avatar {
        transform: none;
    }
}

/* Print styles for dark mode */
@media print {
    .dark-mode .coach-performance {
        background: white !important;
    }
    
    .dark-mode .performance-overview .stat-card,
    .dark-mode .performance-card,
    .dark-mode .analytics-section {
        background: white !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    
    .dark-mode .page-header h1,
    .dark-mode .performance-card .card-header h3,
    .dark-mode .section-header h2,
    .dark-mode .performance-overview .stat-info h3,
    .dark-mode .player-name,
    .dark-mode .stat-value {
        color: #000 !important;
    }
    
    .dark-mode .page-header p,
    .dark-mode .performance-overview .stat-info p,
    .dark-mode .player-position,
    .dark-mode .stat-label,
    .dark-mode .empty-state,
    .dark-mode .empty-state p {
        color: #333 !important;
    }
    
    .dark-mode .player-item,
    .dark-mode .stat-item,
    .dark-mode .alert-item,
    .dark-mode .training-item,
    .dark-mode .fitness-item {
        background: #f8f8f8 !important;
        border: 1px solid #ccc !important;
    }
    
    .dark-mode .position-filter select,
    .dark-mode .analytics-filters select {
        background: white !important;
        border-color: #000 !important;
        color: #000 !important;
    }
    
    .dark-mode .player-rating,
    .dark-mode .badge {
        background: #000 !important;
        color: white !important;
    }
    
    .dark-mode .performance-overview .stat-icon {
        background: #000 !important;
        color: white !important;
    }
    
    .dark-mode .player-avatar {
        background: #000 !important;
        color: white !important;
    }
    
    .switch,
    .matches-popup {
        display: none !important;
    }
}

/* Safe area insets for notched devices in dark mode */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .dark-mode .coach-performance {
            padding-left: max(10px, env(safe-area-inset-left));
            padding-right: max(10px, env(safe-area-inset-right));
        }
        
        .dark-mode .popup-content {
            margin-left: max(10px, env(safe-area-inset-left));
            margin-right: max(10px, env(safe-area-inset-right));
        }
    }
}

/* Performance optimizations for low-end devices in dark mode */
@media (max-width: 768px) and (prefers-reduced-data: reduce) {
    .dark-mode .performance-overview .stat-card,
    .dark-mode .performance-card {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    .dark-mode .performance-overview .stat-card:hover {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }
}

/* Enhanced analytics table styling for dark mode */
.dark-mode .analytics-list table {
    width: 100%;
    border-collapse: collapse;
}

.dark-mode .analytics-list th,
.dark-mode .analytics-list td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #404040;
}

.dark-mode .analytics-list th {
    font-weight: 600;
    background: #404040;
    color: #ffffff;
}

.dark-mode .analytics-list tr:nth-child(even) {
    background: #363636;
}

.dark-mode .analytics-list tr:nth-child(odd) {
    background: #2d2d2d;
}

.dark-mode .analytics-list tr:hover {
    background: #404040;
}

/* Chart container styling for dark mode */
.dark-mode .chart-container {
    background: #363636;
    border: 1px solid #404040;
    border-radius: 8px;
    padding: 15px;
}

.dark-mode .chart-container canvas {
    background: transparent;
}



/* Dark Mode Styles for Scouting Page */
.dark-mode .coach-scouting {
    background: #1a1a1a;
}

.dark-mode .page-header h1 {
    color: #ffffff;
}

.dark-mode .page-header p {
    color: #b0b0b0;
}

.dark-mode .scouting-overview .stat-card {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .scouting-overview .stat-card:hover {
    border-color: var(--primary-color, #e9531d);
    background: #363636;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.dark-mode .scouting-overview .stat-info h3 {
    color: #ffffff;
}

.dark-mode .scouting-overview .stat-info p {
    color: #b0b0b0;
}

.dark-mode .scouting-card {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .scouting-card .card-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .scouting-card .card-header h3 {
    color: #ffffff;
}

.dark-mode .scouting-card .card-content {
    background: #2d2d2d;
}

/* Filter Styles in Dark Mode */
.dark-mode .opponent-filter select,
.dark-mode .analysis-filters select,
.dark-mode .analysis-type,
.dark-mode .analysis-timeframe,
.dark-mode .opponent-filter,
.dark-mode .type-filter,
.dark-mode .time-filter {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .opponent-filter select:focus,
.dark-mode .analysis-filters select:focus,
.dark-mode .analysis-type:focus,
.dark-mode .analysis-timeframe:focus {
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 5px rgba(233, 83, 29, 0.3);
    background: #404040 !important;
}

/* Report Creation Styles in Dark Mode */
.dark-mode .report-creation {
    background: transparent;
}

.dark-mode .report-input textarea {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .report-input textarea:focus {
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 5px rgba(233, 83, 29, 0.3);
    background: #404040 !important;
}

.dark-mode .report-input textarea::placeholder {
    color: #888888 !important;
}

.dark-mode .action-btn {
    background: #363636;
    border-color: #404040;
    color: #b0b0b0;
}

.dark-mode .action-btn:hover {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
    border-color: var(--primary-color, #e9531d);
}

/* Lists and Items in Dark Mode */
.dark-mode .opponents-list,
.dark-mode .reports-list,
.dark-mode .watchlist {
    background: transparent;
}

.dark-mode .opponent-item,
.dark-mode .report-item,
.dark-mode .watchlist-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .opponent-item:hover,
.dark-mode .report-item:hover,
.dark-mode .watchlist-item:hover {
    background: #404040;
    border-color: var(--primary-color, #e9531d);
}

.dark-mode .opponent-name,
.dark-mode .report-title,
.dark-mode .watchlist-name {
    color: #ffffff;
}

.dark-mode .opponent-details,
.dark-mode .report-desc,
.dark-mode .watchlist-position,
.dark-mode .opponent-status,
.dark-mode .report-date,
.dark-mode .watchlist-rating {
    color: #b0b0b0;
}

/* Icons and Avatars in Dark Mode */
.dark-mode .opponent-logo,
.dark-mode .report-icon,
.dark-mode .watchlist-avatar {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode .scouting-overview .stat-icon {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

/* Stats Grid in Dark Mode */
.dark-mode .stats-grid {
    background: transparent;
}

.dark-mode .stat-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .stat-value {
    color: var(--primary-color, #e9531d);
}

.dark-mode .stat-label {
    color: #b0b0b0;
}

/* Match Analysis Section in Dark Mode */
.dark-mode .match-analysis-section {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .section-header {
    background: #363636 !important;
    border-bottom-color: #404040;
}

.dark-mode .section-header h2 {
    color: #ffffff;
}

.dark-mode .analysis-container {
    background: #363636;
    border-color: #404040;
}

.dark-mode .analysis-list {
    background: #363636;
    color: #ffffff;
}

/* Badge and Links in Dark Mode */
.dark-mode .badge {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

/* Popup Styles in Dark Mode */
.dark-mode .matches-popup {
    background-color: rgba(0, 0, 0, 0.7);
}

.dark-mode .popup-content {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #ffffff;
}

.dark-mode .close-btn {
    color: #b0b0b0;
}

.dark-mode .close-btn:hover,
.dark-mode .close-btn:focus {
    color: #ffffff;
}

.dark-mode .popup-empty-state {
    color: #b0b0b0;
}

.dark-mode .popup-empty-state i {
    color: #666666;
}

/* Enhanced hover effects for dark mode */
.dark-mode .scouting-overview .stat-card:hover .stat-icon {
    background: #ffffff;
    color: var(--primary-color, #e9531d);
    transform: scale(1.1);
}

.dark-mode .opponent-item:hover .opponent-logo,
.dark-mode .report-item:hover .report-icon,
.dark-mode .watchlist-item:hover .watchlist-avatar {
    background: #ffffff;
    color: var(--primary-color, #e9531d);
    transform: scale(1.1);
}

/* Report Actions in Dark Mode */
.dark-mode .report-actions {
    background: transparent;
    border-top: none;
}

.dark-mode .action-buttons {
    background: transparent;
}

/* Analysis Table Styles in Dark Mode */
.dark-mode .analysis-list table {
    color: #ffffff;
    background: #363636;
}

.dark-mode .analysis-list th {
    background: #404040;
    color: #ffffff;
    border-bottom: 2px solid #555555;
}

.dark-mode .analysis-list td {
    border-bottom: 1px solid #404040;
    background: #363636;
}

.dark-mode .analysis-list tr:nth-child(even) td {
    background: #2d2d2d;
}

.dark-mode .analysis-list tr:hover td {
    background: #404040;
}

/* Scrollbar styling for analysis container in dark mode */
.dark-mode .analysis-container::-webkit-scrollbar {
    height: 8px;
}

.dark-mode .analysis-container::-webkit-scrollbar-track {
    background: #2d2d2d;
    border-radius: 4px;
}

.dark-mode .analysis-container::-webkit-scrollbar-thumb {
    background: #555555;
    border-radius: 4px;
}

.dark-mode .analysis-container::-webkit-scrollbar-thumb:hover {
    background: #666666;
}

/* Focus states for accessibility in dark mode */
.dark-mode .opponent-filter select:focus,
.dark-mode .analysis-filters select:focus,
.dark-mode .analysis-type:focus,
.dark-mode .analysis-timeframe:focus,
.dark-mode .report-input textarea:focus,
.dark-mode .action-btn:focus,
.dark-mode .btn:focus,
.dark-mode .close-btn:focus {
    outline: 2px solid var(--primary-color, #e9531d);
    outline-offset: 2px;
}

/* Selection styles in dark mode */
.dark-mode ::selection {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode ::-moz-selection {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

/* Touch device optimizations for dark mode */
@media (hover: none) and (pointer: coarse) {
    .dark-mode .scouting-overview .stat-card:hover {
        transform: none;
        background: #2d2d2d;
    }
    
    .dark-mode .opponent-item:hover,
    .dark-mode .report-item:hover,
    .dark-mode .watchlist-item:hover {
        background: #363636;
        border-color: #404040;
    }
    
    .dark-mode .action-btn:hover {
        background: #363636;
        color: #b0b0b0;
        border-color: #404040;
    }
    
    .dark-mode .scouting-overview .stat-card:hover .stat-icon,
    .dark-mode .opponent-item:hover .opponent-logo,
    .dark-mode .report-item:hover .report-icon,
    .dark-mode .watchlist-item:hover .watchlist-avatar {
        transform: none;
        background: var(--primary-color, #e9531d);
        color: #ffffff;
    }
}

/* High contrast mode support for dark mode */
@media (prefers-contrast: high) {
    .dark-mode .scouting-card,
    .dark-mode .scouting-overview .stat-card,
    .dark-mode .match-analysis-section {
        border: 2px solid #ffffff;
    }
    
    .dark-mode .opponent-item,
    .dark-mode .report-item,
    .dark-mode .watchlist-item,
    .dark-mode .stat-item {
        border: 2px solid #ffffff;
    }
    
    .dark-mode .section-header {
        border-bottom: 2px solid #ffffff;
    }
    
    .dark-mode .analysis-container {
        border: 2px solid #ffffff;
    }
    
    .dark-mode .opponent-filter select,
    .dark-mode .analysis-filters select,
    .dark-mode .report-input textarea {
        border: 2px solid #ffffff;
    }
    
    .dark-mode .btn,
    .dark-mode .action-btn {
        border: 2px solid currentColor;
    }
}

/* Reduced motion support for dark mode */
@media (prefers-reduced-motion: reduce) {
    .dark-mode .scouting-overview .stat-card,
    .dark-mode .action-btn,
    .dark-mode .btn,
    .dark-mode .opponent-item,
    .dark-mode .report-item,
    .dark-mode .watchlist-item {
        transition: none;
    }
    
    .dark-mode .scouting-overview .stat-card:hover {
        transform: none;
    }
    
    .dark-mode .scouting-overview .stat-card:hover .stat-icon,
    .dark-mode .opponent-item:hover .opponent-logo,
    .dark-mode .report-item:hover .report-icon,
    .dark-mode .watchlist-item:hover .watchlist-avatar {
        transform: none;
    }
}

/* Print styles for dark mode */
@media print {
    .dark-mode .coach-scouting {
        background: white !important;
    }
    
    .dark-mode .scouting-overview .stat-card,
    .dark-mode .scouting-card,
    .dark-mode .match-analysis-section {
        background: white !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    
    .dark-mode .page-header h1,
    .dark-mode .scouting-card .card-header h3,
    .dark-mode .section-header h2,
    .dark-mode .scouting-overview .stat-info h3,
    .dark-mode .opponent-name,
    .dark-mode .report-title,
    .dark-mode .watchlist-name,
    .dark-mode .stat-value {
        color: #000 !important;
    }
    
    .dark-mode .page-header p,
    .dark-mode .scouting-overview .stat-info p,
    .dark-mode .opponent-details,
    .dark-mode .report-desc,
    .dark-mode .watchlist-position,
    .dark-mode .stat-label {
        color: #333 !important;
    }
    
    .dark-mode .opponent-item,
    .dark-mode .report-item,
    .dark-mode .watchlist-item,
    .dark-mode .stat-item {
        background: #f8f8f8 !important;
        border: 1px solid #ccc !important;
    }
    
    .dark-mode .opponent-filter select,
    .dark-mode .analysis-filters select,
    .dark-mode .report-input textarea {
        background: white !important;
        border-color: #000 !important;
        color: #000 !important;
    }
    
    .dark-mode .badge,
    .dark-mode .opponent-logo,
    .dark-mode .report-icon,
    .dark-mode .watchlist-avatar,
    .dark-mode .scouting-overview .stat-icon {
        background: #000 !important;
        color: white !important;
    }
    
    .dark-mode .action-btn {
        background: #f0f0f0 !important;
        color: #000 !important;
        border: 1px solid #000 !important;
    }
    
    .matches-popup {
        display: none !important;
    }
}

/* Safe area insets for notched devices in dark mode */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .dark-mode .coach-scouting {
            padding-left: max(10px, env(safe-area-inset-left));
            padding-right: max(10px, env(safe-area-inset-right));
        }
        
        .dark-mode .popup-content {
            margin-left: max(10px, env(safe-area-inset-left));
            margin-right: max(10px, env(safe-area-inset-right));
        }
    }
}

/* Performance optimizations for low-end devices in dark mode */
@media (max-width: 768px) and (prefers-reduced-data: reduce) {
    .dark-mode .scouting-overview .stat-card,
    .dark-mode .scouting-card {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    .dark-mode .scouting-overview .stat-card:hover {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }
}

/* Chart and visualization styles for dark mode */
.dark-mode .analysis-chart {
    background: #363636;
    border: 1px solid #404040;
}

.dark-mode .analysis-chart canvas {
    background: transparent;
}

/* Status indicators in dark mode */
.dark-mode .status-indicator {
    background: #404040;
    color: #b0b0b0;
}

.dark-mode .status-indicator.active {
    background: #10b981;
    color: #ffffff;
}

.dark-mode .status-indicator.inactive {
    background: #6b7280;
    color: #ffffff;
}

.dark-mode .status-indicator.pending {
    background: #f59e0b;
    color: #ffffff;
}

/* Rating stars in dark mode */
.dark-mode .rating-stars {
    color: #555555;
}

.dark-mode .rating-stars .active {
    color: var(--primary-color, #e9531d);
}

.dark-mode .progress-fill {
    background: var(--primary-color, #e9531d);
}

/* Individual type item */
.dark-mode .card-content .type-item {
    background: linear-gradient(180deg, var(--dark-card-header, #27272a), var(--dark-card-bg, #23232a));
    border: 1px solid var(--dark-border, #3f3f46);
    color: var(--dark-text, #f4f4f5);
    box-shadow: 0 6px 16px rgba(0,0,0,0.45);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Hover / focus affordance */
.dark-mode .card-content .type-item:hover,
.dark-mode .card-content .type-item:focus-within {
    transform: translateY(-4px);
    border-color: var(--primary-color, #fa5305);
    box-shadow: 0 14px 30px rgba(0,0,0,0.6);
    outline: none;
}

/* Icon container */
.dark-mode .card-content .type-icon {
    color: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.45);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Icon hover lift */
.dark-mode .card-content .type-item:hover .type-icon {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 22px rgba(0,0,0,0.6);
}

/* Type-specific color treatments */
.dark-mode .card-content .type-icon.premier {
    background: linear-gradient(135deg, var(--primary-color, #fa5305), rgba(var(--primary-rgb,250,83,5),0.15));
    border: 1px solid rgba(250,83,5,0.12);
}
.dark-mode .card-content .type-icon.super {
    background: linear-gradient(135deg, var(--secondary-color, #3a0ca3), rgba(58,12,163,0.12));
    border: 1px solid rgba(58,12,163,0.12);
}
.dark-mode .card-content .type-icon.division {
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    color: var(--dark-text, #f4f4f5);
    border: 1px solid rgba(255,255,255,0.03);
}
.dark-mode .card-content .type-icon.women {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    border: 1px solid rgba(139,92,246,0.12);
}



/* Type info (values and label) */
.dark-mode .card-content .type-info h4 {
    color: var(--primary-color, #fa5305);
    font-weight: 700;
}
.dark-mode .card-content .type-info p {
    color: var(--dark-text-light, #a1a1aa);
}

/* Empty state within this card-content */
.dark-mode .card-content .empty-state {
    color: var(--dark-text-light, #a1a1aa);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    border: 1px dashed var(--dark-border, #3f3f46);
}

/* Empty state icon */
.dark-mode .card-content .empty-state i {
    color: rgba(var(--primary-rgb,250,83,5), 0.95);
}

/* Empty state small text */
.dark-mode .card-content .empty-state small {
    color: var(--dark-text-light, #a1a1aa);
}

/* Tighten contrast for high-contrast preference */
@media (prefers-contrast: more) {
    .dark-mode .card-content .type-item {
        border-color: #ffffff;
        box-shadow: none;
    }
    .dark-mode .card-content .type-info p,
    .dark-mode .card-content .empty-state {
        color: #ffffff;
    }
}


/* Dark Mode Color Schemes for Admin Store */
.dark-mode .admin-store {
    background: #1a1a1a;
}

.dark-mode .page-header h1 {
    color: #ffffff;
}

.dark-mode .page-header p {
    color: #b0b0b0;
}

.dark-mode .dashboard-card.full-width {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .dashboard-card .card-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .dashboard-card .card-header h3 {
    color: #ffffff;
}

.dark-mode .dashboard-card .card-content {
    background: #2d2d2d;
}

/* Form Sections */
.dark-mode .form-section {
    border-bottom-color: #404040;
}

.dark-mode .form-section h4,
.dark-mode .form-section h5 {
    color: #ffffff;
}

/* Form Elements */
.dark-mode .form-label {
    color: #e0e0e0;
}

.dark-mode .form-control {
    background: #363636 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.dark-mode .form-control:focus {
    border-color: var(--primary-color, #e9531d) !important;
    box-shadow: 0 0 0 2px rgba(233, 83, 29, 0.2);
    background: #404040 !important;
}

.dark-mode .form-control::placeholder {
    color: #888888 !important;
}

.dark-mode textarea.form-control {
    background: #363636 !important;
}

.dark-mode select.form-control {
    background-color: #363636 !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

.dark-mode input[type="file"].form-control {
    background: #363636 !important;
}

.dark-mode input[type="file"].form-control::file-selector-button {
    background: #404040 !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}

.dark-mode input[type="file"].form-control::file-selector-button:hover {
    background: #4a4a4a !important;
}

.dark-mode .form-help {
    color: #b0b0b0;
}

/* Product Type Selection */
.dark-mode .type-option label {
    background: #363636;
    border-color: #404040;
    color: #ffffff;
}

.dark-mode .type-option label:hover {
    border-color: var(--primary-color, #e9531d);
    background: #404040;
}

.dark-mode .type-option input[type="radio"]:checked + label {
    border-color: var(--primary-color, #e9531d);
    background-color: rgba(233, 83, 29, 0.1);
}

.dark-mode .type-option label i {
    color: var(--primary-color, #e9531d);
}

.dark-mode .type-option label span {
    color: #ffffff;
}

.dark-mode .type-option label small {
    color: #b0b0b0;
}

/* Image Upload Section */
.dark-mode .upload-area {
    background: #363636;
    border-color: #404040;
}

.dark-mode .upload-area:hover {
    border-color: var(--primary-color, #e9531d);
    background-color: rgba(233, 83, 29, 0.05);
}

.dark-mode .upload-area i {
    color: #b0b0b0;
}

.dark-mode .upload-area:hover i {
    color: var(--primary-color, #e9531d);
}

.dark-mode .upload-area p {
    color: #ffffff;
}

.dark-mode .upload-area small {
    color: #b0b0b0;
}

/* Image Preview */
.dark-mode .image-preview {
    background: #363636;
}

.dark-mode .remove-image {
    background: #dc3545;
    color: #ffffff;
}

.dark-mode .remove-image:hover {
    background: #c82333;
}

/* Attributes Section */
.dark-mode .attribute-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .attribute-header h5 {
    color: #ffffff;
}

.dark-mode .variant-row {
    background: #404040;
    border-color: #555555;
}

/* Settings Grid */
.dark-mode .setting-item {
    background: #363636;
    border-color: #404040;
}

.dark-mode .setting-info h5 {
    color: #ffffff;
}

.dark-mode .setting-info p {
    color: #b0b0b0;
}

/* Switch Toggle */
.dark-mode .slider {
    background-color: #555555;
}

.dark-mode input:checked + .slider {
    background-color: var(--primary-color, #e9531d);
}

.dark-mode .slider:before {
    background-color: #ffffff;
}

/* Form Actions */
.dark-mode .form-actions {
    border-top-color: #404040;
}

/* Buttons */
.dark-mode .btn-primary {
    background: var(--primary-color, #e9531d) !important;
    color: #ffffff !important;
    border-color: var(--primary-color, #e9531d) !important;
}

.dark-mode .btn-primary:hover:not(:disabled) {
    background: #d4420c !important;
    border-color: #d4420c !important;
}

.dark-mode .btn-secondary {
    background: #555555 !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}

.dark-mode .btn-secondary:hover:not(:disabled) {
    background: #666666 !important;
    border-color: #666666 !important;
}

.dark-mode .btn-outline {
    background: transparent !important;
    color: #e0e0e0 !important;
    border-color: #555555 !important;
}

.dark-mode .btn-outline:hover:not(:disabled) {
    background: var(--primary-color, #e9531d) !important;
    border-color: var(--primary-color, #e9531d) !important;
    color: #ffffff !important;
}

/* Notifications */
.dark-mode .notification {
    background: #2d2d2d;
    border-left-color: var(--primary-color, #e9531d);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.dark-mode .notification-success {
    border-left-color: #10b981;
}

.dark-mode .notification-error {
    border-left-color: #dc3545;
}

.dark-mode .notification-content span {
    color: #ffffff;
}

.dark-mode .notification-success .notification-content i {
    color: #10b981;
}

.dark-mode .notification-error .notification-content i {
    color: #dc3545;
}

/* Gallery */
.dark-mode .gallery-item {
    background: #363636;
    border: 1px solid #404040;
}

/* Focus States */
.dark-mode .form-control:focus,
.dark-mode .btn:focus,
.dark-mode .type-option input[type="radio"]:focus + label {
    outline: 2px solid var(--primary-color, #e9531d);
    outline-offset: 2px;
}

/* Selection Colors */
.dark-mode ::selection {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

.dark-mode ::-moz-selection {
    background: var(--primary-color, #e9531d);
    color: #ffffff;
}

/* Disabled States */
.dark-mode .btn:disabled,
.dark-mode .btn[disabled] {
    background: #555555 !important;
    color: #888888 !important;
    border-color: #555555 !important;
}

/* Print Styles for Dark Mode */
@media print {
    .dark-mode .admin-store {
        background: white !important;
    }
    
    .dark-mode .dashboard-card.full-width {
        background: white !important;
        border: 1px solid #000 !important;
    }
    
    .dark-mode .page-header h1,
    .dark-mode .dashboard-card .card-header h3,
    .dark-mode .form-section h4,
    .dark-mode .form-section h5,
    .dark-mode .form-label,
    .dark-mode .type-option label span,
    .dark-mode .upload-area p,
    .dark-mode .attribute-header h5,
    .dark-mode .setting-info h5 {
        color: #000 !important;
    }
    
    .dark-mode .page-header p,
    .dark-mode .form-help,
    .dark-mode .type-option label small,
    .dark-mode .upload-area small,
    .dark-mode .setting-info p {
        color: #333 !important;
    }
    
    .dark-mode .form-control {
        background: white !important;
        border-color: #000 !important;
        color: #000 !important;
    }
    
    .dark-mode .type-option label {
        background: #f8f8f8 !important;
        border-color: #000 !important;
    }
    
    .dark-mode .upload-area {
        background: #f8f8f8 !important;
        border-color: #000 !important;
    }
    
    .dark-mode .attribute-item,
    .dark-mode .setting-item,
    .dark-mode .variant-row {
        background: #f8f8f8 !important;
        border-color: #000 !important;
    }
}