/* Light and Dark theme definitions using CSS variables */

:root {
  /* Light theme (default) */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-tertiary: #e9ecef;
  --color-text-primary: #212529;
  --color-text-secondary: #6c757d;
  --color-text-muted: #868e96;
  --color-border: #dee2e6;
  --color-border-light: #e9ecef;
  --color-shadow: rgba(0, 0, 0, 0.1);

  /* Semantic colors */
  --color-primary: #0d6efd;
  --color-success: #198754;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-info: #0dcaf0;

  /* Navbar */
  --navbar-bg: #ffffff;
  --navbar-text: #212529;
  --navbar-border: #dee2e6;

  /* Card */
  --card-bg: #ffffff;
  --card-text: #212529;
  --card-border: #dee2e6;
  --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

  /* Input/Form */
  --form-bg: #ffffff;
  --form-text: #212529;
  --form-border: #dee2e6;
  --form-focus-border: #0d6efd;
  --form-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);

  /* Footer */
  --footer-bg: #f8f9fa;
  --footer-text: #6c757d;
  --footer-border: #dee2e6;
}

/* Dark theme */
:root[data-theme="dark"] {
  --color-bg-primary: #1a1a1a;
  --color-bg-secondary: #2d2d2d;
  --color-bg-tertiary: #3d3d3d;
  --color-text-primary: #e8e8e8;
  --color-text-secondary: #a8a8a8;
  --color-text-muted: #808080;
  --color-border: #404040;
  --color-border-light: #2d2d2d;
  --color-shadow: rgba(0, 0, 0, 0.3);

  /* Semantic colors (adjusted for dark) */
  --color-primary: #0d6efd;
  --color-success: #198754;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-info: #0dcaf0;

  /* Navbar */
  --navbar-bg: #2d2d2d;
  --navbar-text: #e8e8e8;
  --navbar-border: #404040;

  /* Card */
  --card-bg: #2d2d2d;
  --card-text: #e8e8e8;
  --card-border: #404040;
  --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);

  /* Input/Form */
  --form-bg: #2d2d2d;
  --form-text: #e8e8e8;
  --form-border: #404040;
  --form-focus-border: #0d6efd;
  --form-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);

  /* Footer */
  --footer-bg: #2d2d2d;
  --footer-text: #a8a8a8;
  --footer-border: #404040;
}

/* Apply theme colors to body and common elements */
body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Navbar */
.navbar {
  background-color: var(--navbar-bg) !important;
  color: var(--navbar-text);
  border-bottom: 1px solid var(--navbar-border);
}

.navbar-brand,
.navbar-text,
.nav-link {
  color: var(--navbar-text) !important;
}

.nav-link:hover {
  color: var(--color-primary) !important;
}

/* Cards */
.card {
  background-color: var(--card-bg);
  color: var(--card-text);
  border-color: var(--card-border);
  box-shadow: var(--card-shadow);
}

.card-title {
  color: var(--card-text);
}

.card-text {
  color: var(--color-text-secondary);
}

/* Forms and inputs */
.form-control,
.form-select,
textarea {
  background-color: var(--form-bg);
  color: var(--form-text);
  border-color: var(--form-border);
}

.form-control:focus,
.form-select:focus,
textarea:focus {
  background-color: var(--form-bg);
  color: var(--form-text);
  border-color: var(--form-focus-border);
  box-shadow: var(--form-focus-shadow);
}

.form-control::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.form-label,
label {
  color: var(--color-text-primary);
}

.form-text {
  color: var(--color-text-secondary);
}

/* Buttons */
.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

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

/* Links */
a {
  color: var(--color-primary);
}

a:hover {
  opacity: 0.8;
}

/* Alerts */
.alert {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.alert-danger {
  background-color: rgba(220, 53, 69, 0.1);
  border-color: #dc3545;
  color: #dc3545;
}

.alert-success {
  background-color: rgba(25, 135, 84, 0.1);
  border-color: #198754;
  color: #198754;
}

.alert-info {
  background-color: rgba(13, 202, 240, 0.1);
  border-color: #0dcaf0;
  color: #0dcaf0;
}

/* Footer */
footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  border-top-color: var(--footer-border);
}

/* Tables */
table {
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

thead {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
}

tbody tr {
  border-color: var(--color-border);
}

tbody tr:hover {
  background-color: var(--color-bg-secondary);
}

/* Scrollbar styling for dark mode */
:root[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
}

:root[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 5px;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-secondary);
}

/* Code blocks */
code {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.875em;
}

pre {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-border);
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
}

pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

/* Override Bootstrap's hardcoded utility colors in dark mode */
:root[data-theme="dark"] .text-muted {
  color: var(--color-text-secondary) !important;
}

:root[data-theme="dark"] .text-secondary {
  color: var(--color-text-secondary) !important;
}

:root[data-theme="dark"] .text-dark {
  color: var(--color-text-primary) !important;
}

:root[data-theme="dark"] .text-body-secondary {
  color: var(--color-text-secondary) !important;
}

:root[data-theme="dark"] .text-body-emphasis {
  color: var(--color-text-primary) !important;
}

:root[data-theme="dark"] .lead {
  color: var(--color-text-secondary) !important;
}

:root[data-theme="dark"] .btn-close {
  filter: invert(1);
}

:root[data-theme="dark"] .form-check-input:not(:checked) {
  border-color: var(--color-border);
  background-color: transparent;
}

:root[data-theme="dark"] .form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

:root[data-theme="dark"] .dropdown-menu {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
}

:root[data-theme="dark"] .dropdown-menu .dropdown-item {
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-menu .dropdown-item:focus {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .dropdown-divider {
  border-color: var(--color-border);
}

:root[data-theme="dark"] .modal-content {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .modal-header {
  background-color: var(--color-bg-tertiary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .modal-footer {
  border-color: var(--color-border);
}

:root[data-theme="dark"] .close {
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .btn-close:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Navbar toggler styling for dark mode */
:root[data-theme="dark"] .navbar-toggler {
  border-color: var(--navbar-text);
}

:root[data-theme="dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e8e8e8' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

:root[data-theme="light"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23212529' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Bootstrap's .bg-light is a hardcoded light grey with !important, so it
   keeps its light background in dark mode while the text color still
   flips to the theme's (light) text color - light-on-light. Used for
   card-header bg-light (ELO/Achievements/Teams headers), card bg-light
   (Event-Info box) and pre.bg-light (2FA recovery codes). */
:root[data-theme="dark"] .bg-light {
  background-color: var(--color-bg-tertiary) !important;
  color: var(--color-text-primary) !important;
}

/* Badge styling for dark mode */
:root[data-theme="dark"] .badge {
  color: var(--color-text-primary);
  background-color: var(--color-bg-tertiary);
  border-color: var(--color-border);
}

:root[data-theme="dark"] .badge.bg-primary {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}

:root[data-theme="dark"] .badge.bg-success {
  background-color: var(--color-success) !important;
  color: #ffffff !important;
}

:root[data-theme="dark"] .badge.bg-danger {
  background-color: var(--color-danger) !important;
  color: #ffffff !important;
}

:root[data-theme="dark"] .badge.bg-warning {
  background-color: var(--color-warning) !important;
  color: #000000 !important;
}

:root[data-theme="dark"] .badge.bg-info {
  background-color: var(--color-info) !important;
  color: #000000 !important;
}

/* Small text styling */
:root[data-theme="dark"] small {
  color: var(--color-text-secondary);
}

:root[data-theme="dark"] .small {
  color: var(--color-text-secondary);
}

/* Pagination styling */
:root[data-theme="dark"] .page-link {
  color: var(--color-primary);
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
}

:root[data-theme="dark"] .page-link:hover {
  color: #ffffff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

:root[data-theme="dark"] .page-item.active .page-link {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Breadcrumb styling */
:root[data-theme="dark"] .breadcrumb {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
}

:root[data-theme="dark"] .breadcrumb .breadcrumb-item.active {
  color: var(--color-text-secondary);
}

/* Tooltip styling */
:root[data-theme="dark"] .tooltip-inner {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

/* Help text and form hints */
:root[data-theme="dark"] .form-text,
:root[data-theme="dark"] small.form-text {
  color: var(--color-text-secondary) !important;
}

/* Paragraphs in alerts and cards */
:root[data-theme="dark"] .alert p {
  color: inherit;
}

/* List group styling */
:root[data-theme="dark"] .list-group-item {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .list-group-item.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Progress bar styling */
:root[data-theme="dark"] .progress {
  background-color: var(--color-bg-tertiary);
}

/* Spinner styling */
:root[data-theme="dark"] .spinner-border {
  color: var(--color-primary);
}

:root[data-theme="dark"] .spinner-border-sm {
  color: var(--color-primary);
}

/* Outline button styling for dark mode */
:root[data-theme="dark"] .btn-outline-dark {
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

:root[data-theme="dark"] .btn-outline-dark:hover {
  background-color: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: var(--color-bg-primary);
}

:root[data-theme="dark"] .btn-outline-dark:focus,
:root[data-theme="dark"] .btn-outline-dark.focus {
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
  box-shadow: 0 0 0 0.25rem rgba(232, 232, 232, 0.5);
}

:root[data-theme="dark"] .btn-outline-danger {
  border-color: var(--color-danger);
}

:root[data-theme="dark"] .btn-outline-danger:hover {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: #ffffff;
}

:root[data-theme="dark"] .btn-outline-secondary {
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

:root[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-primary);
}

/* Sortable table columns (shared by rankings, games, admin lists, event
   detail, player profile - see assets/js/sortable-table.js). Sort state is
   communicated through aria-sort, so the arrow shown here and what a screen
   reader announces can never drift apart. */
th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

th.sortable::after {
  content: '\2195'; /* up-down arrow */
  margin-left: 0.35em;
  opacity: 0.3;
  font-weight: normal;
}

th.sortable[aria-sort="ascending"]::after {
  content: '\2191';
  opacity: 1;
}

th.sortable[aria-sort="descending"]::after {
  content: '\2193';
  opacity: 1;
}

th.sortable:hover::after,
th.sortable:focus-visible::after {
  opacity: 1;
}