/* ============================================================
   Theme: Light / Dark toggle via [data-bs-theme]
   ============================================================ */

/* Theme toggle button */
.theme-toggle {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1050;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #dee2e6;
  background: #fff;
  color: #212529;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: all 0.3s;
}
.theme-toggle:hover {
  transform: scale(1.1);
}
[data-bs-theme="dark"] .theme-toggle {
  background: #343a40;
  color: #f8f9fa;
  border-color: #495057;
}

/* Dark theme overrides */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .bg-light {
  background-color: #1a1d21 !important;
  color: #dee2e6;
}

[data-bs-theme="dark"] .card {
  background-color: #212529;
  border-color: #343a40;
  color: #dee2e6;
}

[data-bs-theme="dark"] .card-header {
  background-color: #2b3035;
  border-color: #343a40;
  color: #f8f9fa;
}

[data-bs-theme="dark"] .table {
  color: #dee2e6;
  --bs-table-bg: #212529;
  --bs-table-striped-bg: #2b3035;
  --bs-table-hover-bg: #323539;
  border-color: #343a40;
}

[data-bs-theme="dark"] .table th,
[data-bs-theme="dark"] .table td {
  border-color: #343a40;
}

[data-bs-theme="dark"] .table-warning {
  --bs-table-bg: #332d00 !important;
  color: #ffc107;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: #2b3035;
  border-color: #495057;
  color: #dee2e6;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: #343a40;
  border-color: #0d6efd;
  color: #f8f9fa;
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: #6c757d;
}

[data-bs-theme="dark"] .list-group-item {
  background-color: #212529;
  border-color: #343a40;
  color: #dee2e6;
}

[data-bs-theme="dark"] .navbar.bg-light {
  background-color: #212529 !important;
}

[data-bs-theme="dark"] .accordion-button {
  background-color: #2b3035;
  color: #dee2e6;
  border-color: #343a40;
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: #0d6efd;
  color: #fff;
}

[data-bs-theme="dark"] .accordion-body {
  background-color: #212529;
}

[data-bs-theme="dark"] .accordion-item {
  border-color: #343a40;
}

[data-bs-theme="dark"] .modal-content {
  background-color: #212529;
  border-color: #343a40;
  color: #dee2e6;
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
  border-color: #343a40;
}

[data-bs-theme="dark"] .alert-info {
  background-color: #0a3d62;
  border-color: #0d6efd;
  color: #9ec5fe;
}

[data-bs-theme="dark"] .alert-success {
  background-color: #0a3622;
  border-color: #198754;
  color: #75b798;
}

[data-bs-theme="dark"] .alert-warning {
  background-color: #332d00;
  border-color: #ffc107;
  color: #ffda6a;
}

[data-bs-theme="dark"] .alert-danger {
  background-color: #2c0b0e;
  border-color: #dc3545;
  color: #ea868f;
}

[data-bs-theme="dark"] .text-muted {
  color: #6c757d !important;
}

[data-bs-theme="dark"] .btn-outline-secondary {
  color: #adb5bd;
  border-color: #495057;
}

[data-bs-theme="dark"] .btn-outline-primary {
  color: #6ea8fe;
  border-color: #6ea8fe;
}

[data-bs-theme="dark"] .btn-outline-dark {
  color: #dee2e6;
  border-color: #6c757d;
}

[data-bs-theme="dark"] .btn-outline-success {
  color: #75b798;
  border-color: #75b798;
}

[data-bs-theme="dark"] .btn-outline-info {
  color: #6edff6;
  border-color: #6edff6;
}

[data-bs-theme="dark"] .btn-outline-warning {
  color: #ffda6a;
  border-color: #ffda6a;
}

[data-bs-theme="dark"] .btn-outline-danger {
  color: #ea868f;
  border-color: #ea868f;
}

[data-bs-theme="dark"] .progress {
  background-color: #343a40;
}

[data-bs-theme="dark"] a {
  color: #6ea8fe;
}

[data-bs-theme="dark"] .form-text {
  color: #6c757d;
}

[data-bs-theme="dark"] .form-check-input {
  background-color: #2b3035;
  border-color: #495057;
}

/* ============================================================ */

/* Custom styles to complement Bootstrap */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  transition: background-color 0.3s, color 0.3s;
}

.card {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: background-color 0.3s, border-color 0.3s;
}

.table th {
  border-top: none;
}

/* Mobile-first responsive design */
@media (max-width: 768px) {
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .card {
    margin-bottom: 1rem;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  /* Stack buttons vertically on mobile */
  .btn {
    margin-bottom: 0.5rem;
    width: 100%;
    font-size: 0.9rem;
  }
  
  .btn.me-2 {
    margin-right: 0 !important;
  }
  
  /* Make form controls full width */
  .form-control, .form-select {
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Responsive table */
  .table-responsive {
    font-size: 0.85rem;
  }
  
  .table td, .table th {
    padding: 0.5rem 0.25rem;
    font-size: 0.8rem;
  }
  
  /* Navigation improvements */
  .navbar {
    padding: 0.5rem;
  }
  
  .navbar .btn {
    font-size: 0.8rem;
    padding: 0.375rem 0.75rem;
    margin: 0.25rem;
    width: auto;
  }
  
  /* Accordion improvements */
  .accordion-button {
    font-size: 0.9rem;
    padding: 0.75rem;
  }
  
  .accordion-body {
    padding: 1rem;
  }
  
  /* Form improvements */
  .row .col-md-6, .row .col-md-4, .row .col-md-3, .row .col-md-2 {
    margin-bottom: 1rem;
  }
  
  /* Timer and status improvements */
  #timer {
    font-size: 1.2rem;
    font-weight: bold;
  }
  
  /* Event list improvements */
  .list-group-item {
    padding: 0.75rem;
    font-size: 0.9rem;
  }
  
  /* Modal improvements */
  .modal-dialog {
    margin: 1rem;
  }
  
  /* Alert improvements */
  .alert {
    margin: 0.5rem;
    font-size: 0.9rem;
  }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    max-width: 95%;
  }
  
  .btn {
    font-size: 0.9rem;
  }
  
  .table {
    font-size: 0.9rem;
  }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  .btn {
    min-height: 44px; /* Apple's recommended touch target size */
    padding: 0.75rem 1rem;
  }
  
  .form-control, .form-select {
    min-height: 44px;
    padding: 0.75rem;
  }
  
  .accordion-button {
    min-height: 44px;
  }
}

/* Landscape phone orientation */
@media (max-width: 768px) and (orientation: landscape) {
  .container {
    padding-top: 0.5rem;
  }
  
  .card {
    margin-bottom: 0.5rem;
  }
  
  .btn {
    margin-bottom: 0.25rem;
    padding: 0.5rem 0.75rem;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .card {
    box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1);
  }
}
