/* ==============================================
 * BJJ Video Analyzer - Bootstrap Override Layer
 * Auto-generated from apps/videos/utils/colors.py
 * Do not edit manually.
 * Regenerate with: python manage.py generate_design_tokens
 *
 * Load order: after Bootstrap, after colors.css.
 * See PRD-0034 §5 for component patterns and §11 Q5 for the
 * long-term-solution rationale.
 * ============================================== */

/* ---------- Bootstrap CSS variable overrides ----------
 * Ensures `var(--bs-*)` consumers (Bootstrap's own internal styling,
 * third-party Bootstrap-aware components) pick up the new palette.
 */
:root {
  --bs-primary: var(--brand-600);
  --bs-primary-rgb: 124, 58, 237;
  --bs-secondary: var(--neutral-500);
  --bs-secondary-rgb: 113, 113, 122;
  --bs-success: var(--success-600);
  --bs-success-rgb: 22, 163, 74;
  --bs-info: var(--info-600);
  --bs-info-rgb: 37, 99, 235;
  --bs-warning: var(--warning-600);
  --bs-warning-rgb: 217, 119, 6;
  --bs-danger: var(--danger-600);
  --bs-danger-rgb: 220, 38, 38;
  --bs-light: var(--neutral-50);
  --bs-dark: var(--neutral-900);
  --bs-body-bg: var(--surface-page);
  --bs-body-color: var(--text-body);
  --bs-border-color: var(--color-border);
  --bs-link-color: var(--brand-600);
  --bs-link-hover-color: var(--brand-700);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
}

/* ---------- Body / typography ---------- */
body {
  background-color: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading);
}

a {
  color: var(--brand-600);
}
a:hover {
  color: var(--brand-700);
}

/* ---------- Card (PRD-0034 §5.1) ---------- */
.card {
  background-color: var(--surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 1.25rem;
}

.card-body {
  padding: 1.25rem;
}

.card-footer {
  background-color: transparent;
  border-top: 1px solid var(--color-border);
  padding: 0.875rem 1.25rem;
}

/* Forbid Bootstrap's colored top/left card accents (§5.1).
 * Override .border-primary etc. on cards specifically so other elements
 * that intentionally want a colored border are unaffected. */
.card.border-primary,
.card.border-secondary,
.card.border-success,
.card.border-info,
.card.border-warning,
.card.border-danger,
.card.border-light,
.card.border-dark {
  border-color: var(--color-border) !important;
  border-width: 1px !important;
}

/* ---------- Button hierarchy (PRD-0034 §5.2) ---------- */
.btn {
  border-radius: var(--radius-md);
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: background-color 150ms ease, border-color 150ms ease,
              color 150ms ease, box-shadow 150ms ease;
}
.btn-sm { padding: 0.3125rem 0.75rem; font-size: 0.8125rem; border-radius: var(--radius-sm); }
.btn-lg { padding: 0.625rem 1.25rem; font-size: 1.0625rem; }

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
  border-color: var(--brand-400);
}

.btn-primary {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
  color: #ffffff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-700);
  border-color: var(--brand-700);
  color: #ffffff;
}
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--brand-400);
  border-color: var(--brand-400);
  color: #ffffff;
}

.btn-secondary {
  background-color: var(--surface-card);
  border-color: var(--color-border-strong);
  color: var(--text-body);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--neutral-100);
  border-color: var(--color-border-strong);
  color: var(--text-heading);
}

.btn-outline-primary {
  color: var(--brand-600);
  border-color: var(--brand-600);
  background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
  color: #ffffff;
}

/* `.btn-success` uses success-700 (white-on-#15803D = 4.62:1) instead of
 * success-600 (3.30:1, fails AA body). Hover darkens via `filter: brightness()`
 * since the scale tops out at -700. */
.btn-success {
  background-color: var(--success-700);
  border-color: var(--success-700);
  color: #ffffff;
}
.btn-success:hover,
.btn-success:focus {
  background-color: var(--success-700);
  border-color: var(--success-700);
  color: #ffffff;
  filter: brightness(0.92);
}

/* `.btn-warning` keeps warning-600 background but uses dark text — yellow with
 * white text fails AA (3.19:1); dark text on yellow is the conventional and
 * accessible treatment (neutral-900 on warning-600 = 9.4:1). */
.btn-warning {
  background-color: var(--warning-600);
  border-color: var(--warning-600);
  color: var(--neutral-900);
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--warning-700);
  border-color: var(--warning-700);
  color: var(--neutral-900);
}

.btn-danger {
  background-color: var(--danger-600);
  border-color: var(--danger-600);
  color: #ffffff;
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--danger-700);
  border-color: var(--danger-700);
  color: #ffffff;
}

.btn-info {
  background-color: var(--info-600);
  border-color: var(--info-600);
  color: #ffffff;
}
.btn-info:hover,
.btn-info:focus {
  background-color: var(--info-700);
  border-color: var(--info-700);
  color: #ffffff;
}

.btn-light {
  background-color: var(--neutral-100);
  border-color: var(--neutral-200);
  color: var(--text-heading);
}
.btn-light:hover,
.btn-light:focus {
  background-color: var(--neutral-200);
  border-color: var(--color-border-strong);
  color: var(--text-heading);
}

.btn-dark {
  background-color: var(--neutral-900);
  border-color: var(--neutral-900);
  color: #ffffff;
}
.btn-dark:hover,
.btn-dark:focus {
  background-color: var(--neutral-800);
  border-color: var(--neutral-800);
  color: #ffffff;
}

.btn-link {
  color: var(--brand-600);
  text-decoration: none;
}
.btn-link:hover {
  color: var(--brand-700);
  text-decoration: underline;
}

/* New ghost variant — for low-chrome list row actions (PRD-0034 §5.2) */
.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--text-body);
}
.btn-ghost:hover,
.btn-ghost:focus {
  background-color: var(--neutral-100);
  color: var(--text-heading);
}

.btn-ghost-danger {
  background-color: transparent;
  border-color: transparent;
  color: var(--danger-600);
}
.btn-ghost-danger:hover,
.btn-ghost-danger:focus {
  background-color: var(--danger-50);
  color: var(--danger-700);
}

/* ---------- Alerts (PRD-0034 §5.3) ----------
 * Subtle tint background + dark readable text (no left accent). */
.alert {
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  border-width: 1px;
  border-style: solid;
  color: var(--text-heading);
}

.alert-primary {
  background-color: var(--brand-50);
  border-color: var(--brand-100);
  color: var(--brand-900);
}
.alert-success {
  background-color: var(--success-50);
  border-color: var(--success-100);
  color: var(--success-700);
}
.alert-warning {
  background-color: var(--warning-50);
  border-color: var(--warning-100);
  color: var(--warning-700);
}
.alert-danger {
  background-color: var(--danger-50);
  border-color: var(--danger-100);
  color: var(--danger-700);
}
.alert-info {
  background-color: var(--info-50);
  border-color: var(--info-100);
  color: var(--neutral-900);
}
.alert-secondary {
  background-color: var(--neutral-50);
  border-color: var(--color-border);
  color: var(--text-body);
}
.alert-light {
  background-color: var(--neutral-50);
  border-color: var(--color-border);
  color: var(--text-body);
}
.alert-dark {
  background-color: var(--neutral-100);
  border-color: var(--color-border-strong);
  color: var(--text-heading);
}

/* ---------- Badges (PRD-0034 §5.5) ----------
 * Subtle pill shape with tinted background. */
.badge {
  border-radius: var(--radius-full);
  padding: 0.125rem 0.625rem;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.badge.bg-primary {   background-color: var(--brand-100)   !important; color: var(--brand-700)   !important; }
.badge.bg-secondary { background-color: var(--neutral-100) !important; color: var(--neutral-700) !important; }
.badge.bg-success {   background-color: var(--success-100) !important; color: var(--success-700) !important; }
.badge.bg-info {      background-color: var(--info-50)     !important; color: var(--info-700)    !important; }
.badge.bg-warning {   background-color: var(--warning-100) !important; color: var(--warning-700) !important; }
.badge.bg-danger {    background-color: var(--danger-100)  !important; color: var(--danger-700)  !important; }
.badge.bg-light {     background-color: var(--neutral-100) !important; color: var(--neutral-900) !important; }
.badge.bg-dark {      background-color: var(--neutral-800) !important; color: #ffffff             !important; }
.badge.text-bg-primary,
.badge.text-bg-secondary,
.badge.text-bg-success,
.badge.text-bg-info,
.badge.text-bg-warning,
.badge.text-bg-danger,
.badge.text-bg-light,
.badge.text-bg-dark {
  /* Bootstrap 5.3's text-bg-* uses both bg and color; we follow same tinted pattern. */
}
.badge.text-bg-primary {   background-color: var(--brand-100)   !important; color: var(--brand-700)   !important; }
.badge.text-bg-secondary { background-color: var(--neutral-100) !important; color: var(--neutral-700) !important; }
.badge.text-bg-success {   background-color: var(--success-100) !important; color: var(--success-700) !important; }
.badge.text-bg-info {      background-color: var(--info-50)     !important; color: var(--info-700)    !important; }
.badge.text-bg-warning {   background-color: var(--warning-100) !important; color: var(--warning-700) !important; }
.badge.text-bg-danger {    background-color: var(--danger-100)  !important; color: var(--danger-700)  !important; }
.badge.text-bg-light {     background-color: var(--neutral-100) !important; color: var(--neutral-900) !important; }
.badge.text-bg-dark {      background-color: var(--neutral-800) !important; color: #ffffff             !important; }

/* ---------- Forms ---------- */
.form-control,
.form-select {
  border-radius: var(--radius-sm);
  border-color: var(--color-border);
  color: var(--text-heading);
  background-color: var(--surface-card);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}
.form-control::placeholder { color: var(--text-subtle); }
.form-label { color: var(--text-heading); font-weight: 500; }
.form-text { color: var(--text-muted); }

.form-check-input:checked {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
}
.form-check-input:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

/* ---------- Links & focus ring (global) ---------- */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

/* ---------- Tables ---------- */
.table {
  --bs-table-bg: var(--surface-card);
  color: var(--text-body);
  border-color: var(--color-border);
}
.table > :not(caption) > * > * {
  border-bottom-color: var(--color-divider);
}
.table > thead {
  color: var(--text-heading);
}

/* ---------- List groups ---------- */
.list-group-item {
  background-color: var(--surface-card);
  border-color: var(--color-divider);
  color: var(--text-body);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--neutral-50);
  color: var(--text-heading);
}
.list-group-item.active {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
  color: #ffffff;
}

/* ---------- Dropdowns / popovers ---------- */
.dropdown-menu {
  border-radius: var(--radius-md);
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
  padding: 0.375rem;
}
.dropdown-item {
  border-radius: var(--radius-sm);
  color: var(--text-body);
  padding: 0.5rem 0.75rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--neutral-100);
  color: var(--text-heading);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--brand-50);
  color: var(--brand-700);
}

.popover {
  border-radius: var(--radius-md);
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
}

/* ---------- Modals ---------- */
.modal-content {
  border-radius: var(--radius-lg);
  border-color: var(--color-border);
  box-shadow: var(--shadow-lg);
}
.modal-header,
.modal-footer {
  border-color: var(--color-divider);
}

/* ---------- Navs / tabs ---------- */
.nav-tabs {
  border-bottom-color: var(--color-border);
}
.nav-tabs .nav-link {
  color: var(--text-muted);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.nav-tabs .nav-link:hover {
  color: var(--text-heading);
  border-color: transparent;
}
.nav-tabs .nav-link.active {
  color: var(--brand-700);
  background-color: var(--surface-card);
  border-color: var(--color-border) var(--color-border) var(--surface-card);
}

.nav-pills .nav-link.active {
  background-color: var(--brand-600);
  color: #ffffff;
}

/* ---------- Progress ---------- */
.progress {
  background-color: var(--neutral-200);
  border-radius: var(--radius-full);
  height: 6px;
}
.progress-bar {
  background-color: var(--brand-600);
  border-radius: var(--radius-full);
}
.progress-bar.bg-success { background-color: var(--success-600) !important; }
.progress-bar.bg-warning { background-color: var(--warning-600) !important; }
.progress-bar.bg-danger {  background-color: var(--danger-600)  !important; }
.progress-bar.bg-info {    background-color: var(--info-600)    !important; }

/* ---------- Pagination ---------- */
.page-link {
  color: var(--brand-600);
  border-color: var(--color-border);
}
.page-link:hover {
  background-color: var(--neutral-50);
  color: var(--brand-700);
}
.page-item.active .page-link {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
  color: #ffffff;
}