/* Bootstrap 5 theme bridge */

:root,
[data-theme='light'] {
  --bs-secondary: #6b7280;
  --bs-border-radius: 12px;
  --bs-border-radius-sm: 8px;
  --bs-emphasis-color: var(--text);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-bg: var(--surface-2);
  --bs-tertiary-color: var(--muted);
}

.card {
  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--border);
  --bs-card-color: var(--text);
  background: var(--surface);
  border-color: var(--border);
  transition:
    background 0.2s,
    border-color 0.2s;
}

.card .card-body {
  color: inherit;
}

.card h2,
.card .h5 {
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

.form-control,
.form-select {
  background-color: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--input-bg);
  border-color: var(--primary);
  color: var(--text);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 20%, transparent);
}

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

.input-group-text {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--muted);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: var(--surface-2);
  --bs-table-hover-color: var(--text);
}

.table-light,
.table > :not(caption) > * > .table-light {
  --bs-table-bg: var(--surface-3);
  --bs-table-color: var(--text);
}

.btn {
  font-weight: 600;
  border-radius: 8px;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s,
    transform 0.1s;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-color: var(--on-primary);
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-hover-color: var(--on-primary);
  --bs-btn-active-bg: var(--primary-hover);
  --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-active-color: var(--on-primary);
  --bs-btn-focus-shadow-rgb: 79, 70, 229;
}

.btn-secondary {
  --bs-btn-bg: var(--surface-2);
  --bs-btn-border-color: var(--border);
  --bs-btn-color: var(--text);
  --bs-btn-hover-bg: var(--surface-3);
  --bs-btn-hover-border-color: var(--border);
  --bs-btn-hover-color: var(--text);
  --bs-btn-active-bg: var(--surface-3);
  --bs-btn-active-border-color: var(--border);
  --bs-btn-active-color: var(--text);
}

.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  --bs-btn-hover-bg: color-mix(in srgb, var(--primary) 12%, transparent);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-hover-color: var(--primary);
  --bs-btn-active-bg: color-mix(in srgb, var(--primary) 18%, transparent);
  --bs-btn-active-border-color: var(--primary);
  --bs-btn-active-color: var(--primary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--border);
  --bs-btn-hover-color: var(--text);
  --bs-btn-active-bg: var(--surface-3);
  --bs-btn-active-border-color: var(--border);
  --bs-btn-active-color: var(--text);
}

.btn-google {
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--border);
  --bs-btn-color: var(--text);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  --bs-btn-hover-color: var(--text);
}

.app-nav {
  --bs-navbar-color: var(--muted);
  --bs-navbar-hover-color: var(--text);
  --bs-navbar-active-color: var(--primary);
  --bs-navbar-toggler-border-color: var(--border);
}

.app-nav .nav-link {
  color: var(--muted);
  border-radius: 8px;
  transition:
    color 0.15s,
    background 0.15s;
}

.app-nav .nav-link:hover,
.app-nav .nav-link:focus {
  color: var(--text);
  background: var(--surface-2);
}

.app-nav .nav-link.active,
.app-nav .nav-link.active:hover,
.app-nav .nav-link.active:focus {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

[data-theme='dark'] .app-nav .nav-link {
  color: var(--nav-link);
}

[data-theme='dark'] .app-nav .nav-link:hover,
[data-theme='dark'] .app-nav .nav-link:focus {
  color: var(--text);
  background: var(--nav-link-hover-bg);
}

[data-theme='dark'] .app-nav .nav-link.active,
[data-theme='dark'] .app-nav .nav-link.active:hover,
[data-theme='dark'] .app-nav .nav-link.active:focus {
  color: var(--primary-hover);
  background: var(--nav-active-bg);
  box-shadow: inset 0 0 0 1px var(--nav-active-ring);
}

.alert-info,
.status-info {
  --bs-alert-bg: var(--status-info-bg);
  --bs-alert-border-color: color-mix(in srgb, var(--status-info-text) 25%, transparent);
  --bs-alert-color: var(--status-info-text);
}

.alert-success,
.status-success {
  --bs-alert-bg: var(--status-success-bg);
  --bs-alert-border-color: color-mix(in srgb, var(--success) 25%, transparent);
  --bs-alert-color: var(--success);
}

.alert-danger,
.status-error {
  --bs-alert-bg: var(--status-error-bg);
  --bs-alert-border-color: color-mix(in srgb, var(--error) 25%, transparent);
  --bs-alert-color: var(--error);
}

.swal2-icon.swal2-success {
  border-color: var(--success);
  color: var(--success);
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: var(--success);
}

.swal2-icon.swal2-success [class^='swal2-success-circular-line'],
.swal2-icon.swal2-success .swal2-success-fix {
  background-color: var(--surface) !important;
}

.game-card,
.match-item,
.quiz-option,
.theme-toggle,
.nav-logout,
.rate-btn {
  font-family: inherit;
}

.game-card,
.match-item,
.quiz-option {
  background-color: var(--surface-2);
  color: var(--text);
}

.game-card:hover,
.match-item:hover:not(.solved),
.quiz-option:hover:not(.answered) {
  color: var(--text);
}

.rate-btn:hover {
  filter: brightness(0.96);
}

.rate-0:hover {
  background: #fecaca;
  color: #991b1b;
}
.rate-2:hover {
  background: #fed7aa;
  color: #9a3412;
}
.rate-3:hover {
  background: #fef3c7;
  color: #92400e;
}
.rate-4:hover {
  background: #d1fae5;
  color: #065f46;
}
.rate-5:hover {
  background: #bbf7d0;
  color: #166534;
}

.card a:not(.btn),
.table a:not(.btn) {
  color: var(--primary);
  text-decoration: none;
}

.card a:not(.btn):hover,
.table a:not(.btn):hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.badge.text-bg-secondary {
  background-color: var(--surface-2) !important;
  color: var(--text) !important;
}

.badge-info {
  background: var(--status-info-bg);
  color: var(--status-info-text);
}

.badge-error {
  background: var(--status-error-bg);
  color: #ef4444;
}

.badge-dup {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  font-weight: 600;
}

[data-theme='dark'] .level-badge {
  color: var(--on-primary);
}