/* ============================================================
   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 responsive
   ============================================================ */

/* All tables scrollable on mobile */
.card-body > table, .card-body > .table-responsive { overflow-x: auto; }
.table { white-space: nowrap; }

/* Prevent iOS zoom on inputs */
.form-control, .form-select { font-size: 16px; }

@media (max-width: 768px) {
  .container { padding-left: 8px; padding-right: 8px; }
  .container.mt-5 { margin-top: 1rem !important; }
  .container.mt-4 { margin-top: 0.5rem !important; }

  h1 { font-size: 1.4rem; }
  h1.mb-4 { margin-bottom: 0.75rem !important; }

  .card { margin-bottom: 0.75rem; border-radius: 8px; }
  .card-body { padding: 0.75rem; }
  .card-header { padding: 0.6rem 0.75rem; }
  .card-header h2 { font-size: 1rem; }

  /* Navigation bar - wrap nicely */
  .navbar { padding: 0.5rem; }
  .navbar .d-flex { flex-wrap: wrap; gap: 4px; }
  .navbar .btn { font-size: 0.75rem; padding: 6px 10px; }

  /* Action buttons - handled by Bootstrap grid (col-6) */
  .btn { font-size: 0.85rem; }

  /* Tables - smaller text, horizontal scroll */
  .table { font-size: 0.75rem; }
  .table td, .table th { padding: 4px 6px; vertical-align: middle; }
  .table .badge { font-size: 0.7rem; }

  /* Wrap all tables in scrollable container */
  .card-body { overflow-x: auto; }

  /* Forms */
  .form-label { font-size: 0.85rem; margin-bottom: 2px; }
  .form-control, .form-select { padding: 6px 10px; }
  .form-check-label { font-size: 0.85rem; }
  .form-text { font-size: 0.75rem; }

  /* Session info */
  #timer { font-size: 1.3rem; font-weight: bold; color: #dc3545; }

  /* Event list */
  .list-group-item { padding: 8px 10px; font-size: 0.85rem; }
  .list-group-item .note-btn { padding: 2px 6px; font-size: 0.75rem; }

  /* Alerts */
  .alert { font-size: 0.85rem; padding: 8px 12px; margin-bottom: 8px; }

  /* Accordion */
  .accordion-button { font-size: 0.9rem; padding: 10px 12px; }
  .accordion-body { padding: 10px; }

  /* Bottom nav buttons */
  .d-flex.flex-wrap.gap-2 { gap: 6px !important; }
  .d-flex.flex-wrap .btn { font-size: 0.8rem; padding: 6px 12px; }

  /* Modal/dialog overlays */
  .note-dialog, .modal-box, .rpt-box { width: 95%; padding: 16px; }

  /* Leaves page */
  .table-hover th, .table-hover td { font-size: 0.75rem; }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; }
  .form-control, .form-select { min-height: 44px; }
  .form-check-input { width: 1.2em; height: 1.2em; }
  .accordion-button { min-height: 48px; }
  .list-group-item .note-btn { min-height: 36px; min-width: 36px; }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .container { max-width: 95%; }
  .table { font-size: 0.85rem; }
}