/*
 * Soft UI Dashboard - Dark Mode Extension
 * Extends the existing Soft UI Dashboard design system with dark mode support
 * Maintains the characteristic soft design with proper contrast and accessibility
 */

:root {
  /* Light Mode Variables (Default Soft UI Dashboard) */
  --soft-bg-body: #f8f9fa;
  --soft-bg-card: #ffffff;
  --soft-bg-navbar: rgba(255, 255, 255, 0.8);
  --soft-bg-sidebar: #ffffff;
  --soft-text-primary: #344767;
  --soft-text-secondary: #67748e;
  --soft-text-muted: #8392ab;
  --soft-border-color: #e9ecef;
  --soft-border-radius: 0.75rem;
  --soft-shadow-soft: 0 0.25rem 0.375rem -0.0625rem rgba(20, 20, 43, 0.12), 
                      0 0.125rem 0.25rem -0.0625rem rgba(20, 20, 43, 0.07);
  --soft-shadow-card: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
  --soft-gradient-primary: linear-gradient(310deg, #7928ca 0%, #ff0080 100%);
  --soft-gradient-info: linear-gradient(310deg, #2152ff 0%, #21d4fd 100%);
  --soft-gradient-success: linear-gradient(310deg, #17ad37 0%, #98ec2d 100%);
  --soft-gradient-warning: linear-gradient(310deg, #f53939 0%, #fbcf33 100%);
  
  /* Form and Input Variables */
  --soft-input-bg: #ffffff;
  --soft-input-border: #d2d6da;
  --soft-input-focus: #e91e63;
  --soft-input-text: #495057;
  
  /* Table Variables */
  --soft-table-bg: transparent;
  --soft-table-stripe: rgba(0, 0, 0, 0.02);
  --soft-table-border: #e9ecef;
  --soft-table-header-bg: #f8f9fa;
  
  /* Button Variables */
  --soft-btn-primary-bg: #e91e63;
  --soft-btn-primary-text: #ffffff;
  --soft-btn-secondary-bg: #8392ab;
  --soft-btn-secondary-text: #ffffff;
}

/* Dark Mode Variables */
body.dark-mode {
  /* Core Background Colors */
  --soft-bg-body: #0f1419;
  --soft-bg-card: #1a202c;
  --soft-bg-navbar: rgba(26, 32, 44, 0.9);
  --soft-bg-sidebar: #1a202c;
  
  /* Text Colors */
  --soft-text-primary: #f7fafc;
  --soft-text-secondary: #e2e8f0;
  --soft-text-muted: #a0aec0;
  
  /* Border and Divider Colors */
  --soft-border-color: #2d3748;
  
  /* Shadows for Dark Mode */
  --soft-shadow-soft: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.25), 
                      0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.15);
  --soft-shadow-card: 0 20px 27px 0 rgba(0, 0, 0, 0.2);
  
  /* Form and Input Colors */
  --soft-input-bg: #2d3748;
  --soft-input-border: #4a5568;
  --soft-input-focus: #e91e63;
  --soft-input-text: #f7fafc;
  
  /* Table Colors */
  --soft-table-bg: transparent;
  --soft-table-stripe: rgba(255, 255, 255, 0.05);
  --soft-table-border: #2d3748;
  --soft-table-header-bg: #2d3748;
  
  /* Gradients adjusted for dark mode */
  --soft-gradient-primary: linear-gradient(310deg, #7928ca 0%, #ff0080 100%);
  --soft-gradient-info: linear-gradient(310deg, #2152ff 0%, #21d4fd 100%);
  --soft-gradient-success: linear-gradient(310deg, #17ad37 0%, #98ec2d 100%);
  --soft-gradient-warning: linear-gradient(310deg, #f53939 0%, #fbcf33 100%);
}

/* Core Layout Adjustments */
body.dark-mode {
  background-color: var(--soft-bg-body) !important;
  color: var(--soft-text-primary) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Card Components */
body.dark-mode .card {
  background-color: var(--soft-bg-card) !important;
  border: 1px solid var(--soft-border-color) !important;
  box-shadow: var(--soft-shadow-card) !important;
  color: var(--soft-text-primary) !important;
}

body.dark-mode .card-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--soft-border-color) !important;
  color: var(--soft-text-primary) !important;
}

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

/* Navigation Components */
body.dark-mode .navbar {
  background-color: var(--soft-bg-navbar) !important;
  backdrop-filter: saturate(200%) blur(30px);
  border: 1px solid var(--soft-border-color) !important;
}

body.dark-mode .navbar .nav-link {
  color: var(--soft-text-primary) !important;
}

body.dark-mode .navbar .nav-link:hover {
  color: var(--soft-input-focus) !important;
}

body.dark-mode .breadcrumb-item,
body.dark-mode .breadcrumb-item a {
  color: var(--soft-text-secondary) !important;
}

body.dark-mode .breadcrumb-item.active {
  color: var(--soft-text-primary) !important;
}

/* Sidebar */
body.dark-mode .sidenav {
  background-color: var(--soft-bg-sidebar) !important;
  border-right: 1px solid var(--soft-border-color) !important;
}

body.dark-mode .sidenav .nav-link {
  color: var(--soft-text-secondary) !important;
}

body.dark-mode .sidenav .nav-link:hover,
body.dark-mode .sidenav .nav-link.active {
  background-color: rgba(233, 30, 99, 0.1) !important;
  color: var(--soft-input-focus) !important;
}

/* Form Controls */
body.dark-mode .form-control {
  background-color: var(--soft-input-bg) !important;
  border: 1px solid var(--soft-input-border) !important;
  color: var(--soft-input-text) !important;
}

body.dark-mode .form-control:focus {
  background-color: var(--soft-input-bg) !important;
  border-color: var(--soft-input-focus) !important;
  color: var(--soft-input-text) !important;
  box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.25) !important;
}

body.dark-mode .form-control::placeholder {
  color: var(--soft-text-muted) !important;
}

body.dark-mode .input-group-text {
  background-color: var(--soft-input-bg) !important;
  border: 1px solid var(--soft-input-border) !important;
  color: var(--soft-text-secondary) !important;
}

/* Tables */
body.dark-mode .table {
  color: var(--soft-text-primary) !important;
  border-color: var(--soft-table-border) !important;
}

body.dark-mode .table th {
  background-color: var(--soft-table-header-bg) !important;
  border-color: var(--soft-table-border) !important;
  color: var(--soft-text-primary) !important;
}

body.dark-mode .table td {
  border-color: var(--soft-table-border) !important;
  color: var(--soft-text-primary) !important;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--soft-table-stripe) !important;
}

body.dark-mode .table-hover > tbody > tr:hover > td {
  background-color: rgba(233, 30, 99, 0.05) !important;
}

/* Statistics Tables Specific */
body.dark-mode .score-input {
  background-color: var(--soft-input-bg) !important;
  border: 1px solid var(--soft-input-border) !important;
  color: var(--soft-input-text) !important;
}

body.dark-mode .score-input:focus {
  border-color: var(--soft-input-focus) !important;
  box-shadow: 0 0 0 2px rgba(233, 30, 99, 0.3) !important;
}

body.dark-mode .score-input.valid {
  background-color: rgba(23, 173, 55, 0.15) !important;
  color: #48bb78 !important;
  border-color: #48bb78 !important;
}

body.dark-mode .score-input.eliminated {
  background-color: rgba(245, 57, 57, 0.15) !important;
  color: #f56565 !important;
  border-color: #f56565 !important;
}

body.dark-mode .result-cell {
  background-color: var(--soft-table-header-bg) !important;
  color: var(--soft-text-primary) !important;
}

body.dark-mode .judge-name-vertical {
  background-color: var(--soft-bg-card) !important;
  color: var(--soft-text-primary) !important;
  border: 1px solid var(--soft-border-color) !important;
}

/* Buttons */
body.dark-mode .btn-primary {
  background: var(--soft-gradient-primary) !important;
  border: none !important;
  color: white !important;
}

body.dark-mode .btn-secondary {
  background-color: var(--soft-btn-secondary-bg) !important;
  border: 1px solid var(--soft-btn-secondary-bg) !important;
  color: var(--soft-btn-secondary-text) !important;
}

body.dark-mode .btn-outline-primary {
  border: 1px solid var(--soft-input-focus) !important;
  color: var(--soft-input-focus) !important;
  background-color: transparent !important;
}

body.dark-mode .btn-outline-primary:hover {
  background-color: var(--soft-input-focus) !important;
  color: white !important;
}

/* Dropdowns */
body.dark-mode .dropdown-menu {
  background-color: var(--soft-bg-card) !important;
  border: 1px solid var(--soft-border-color) !important;
  box-shadow: var(--soft-shadow-soft) !important;
}

body.dark-mode .dropdown-item {
  color: var(--soft-text-primary) !important;
}

body.dark-mode .dropdown-item:hover {
  background-color: rgba(233, 30, 99, 0.1) !important;
  color: var(--soft-input-focus) !important;
}

/* Alerts */
body.dark-mode .alert {
  border: 1px solid var(--soft-border-color) !important;
  color: var(--soft-text-primary) !important;
}

body.dark-mode .alert-info {
  background-color: rgba(33, 82, 255, 0.15) !important;
  border-color: rgba(33, 82, 255, 0.3) !important;
}

body.dark-mode .alert-success {
  background-color: rgba(23, 173, 55, 0.15) !important;
  border-color: rgba(23, 173, 55, 0.3) !important;
}

body.dark-mode .alert-warning {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

body.dark-mode .alert-danger {
  background-color: rgba(245, 57, 57, 0.15) !important;
  border-color: rgba(245, 57, 57, 0.3) !important;
}

/* Modals */
body.dark-mode .modal-content {
  background-color: var(--soft-bg-card) !important;
  border: 1px solid var(--soft-border-color) !important;
  color: var(--soft-text-primary) !important;
}

body.dark-mode .modal-header {
  border-bottom: 1px solid var(--soft-border-color) !important;
}

body.dark-mode .modal-footer {
  border-top: 1px solid var(--soft-border-color) !important;
}

/* Theme Toggle Button */
.theme-toggle {
  position: relative;
  width: 50px;
  height: 25px;
  background: linear-gradient(45deg, #ffa726, #fb8c00);
  border-radius: 25px;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.theme-toggle::before {
  content: '☀️';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

body.dark-mode .theme-toggle {
  background: linear-gradient(45deg, #1a202c, #2d3748);
}

body.dark-mode .theme-toggle::before {
  content: '🌙';
  transform: translateX(25px);
  background: #2d3748;
  color: #ffd700;
}

/* Phase Headers Dark Mode */
body.dark-mode .semifinales-header {
  background: linear-gradient(135deg, #2b6cb8, #1e40af) !important;
  color: white !important;
}

body.dark-mode .finales-header {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  color: white !important;
}

body.dark-mode .overalls-header {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  color: white !important;
}

/* Text and Typography */
body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4, 
body.dark-mode h5, 
body.dark-mode h6 {
  color: var(--soft-text-primary) !important;
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode div {
  color: var(--soft-text-primary);
}

body.dark-mode .text-muted {
  color: var(--soft-text-muted) !important;
}

body.dark-mode .text-secondary {
  color: var(--soft-text-secondary) !important;
}

/* Loading and Spinner */
body.dark-mode .spinner-border {
  border-color: var(--soft-text-muted);
  border-right-color: transparent;
}

/* Smooth Transitions */
* {
  transition: background-color 0.3s ease, 
              border-color 0.3s ease, 
              color 0.3s ease, 
              box-shadow 0.3s ease;
}

/* Print Styles */
@media print {
  body.dark-mode {
    background-color: white !important;
    color: black !important;
  }
  
  body.dark-mode .card,
  body.dark-mode .table,
  body.dark-mode .score-input {
    background-color: white !important;
    color: black !important;
    border-color: #000 !important;
  }
}