/* Shared red theme overrides for auth and user-facing dashboard layouts. */
:root {
  --trdx-red-400: #f87171;
  --trdx-red-500: #ef4444;
  --trdx-red-600: #dc2626;
  --trdx-red-ring: rgba(239, 68, 68, 0.28);
}

body.auth-premium,
body.trdx-premium,
body.application.application-offset {
  --bs-primary: var(--trdx-red-500);
}

body.auth-premium .btn-primary,
body.trdx-premium .btn-primary,
body.application.application-offset .btn-primary {
  background-color: var(--trdx-red-500) !important;
  border-color: var(--trdx-red-500) !important;
}

body.auth-premium .btn-primary:hover,
body.auth-premium .btn-primary:focus,
body.trdx-premium .btn-primary:hover,
body.trdx-premium .btn-primary:focus,
body.application.application-offset .btn-primary:hover,
body.application.application-offset .btn-primary:focus {
  background-color: var(--trdx-red-600) !important;
  border-color: var(--trdx-red-600) !important;
  box-shadow: 0 0 0 0.2rem var(--trdx-red-ring) !important;
}

body.trdx-premium .btn-success,
body.application.application-offset .btn-success {
  background-color: var(--trdx-red-500) !important;
  border-color: var(--trdx-red-500) !important;
}

body.trdx-premium .btn-success:hover,
body.application.application-offset .btn-success:hover {
  background-color: var(--trdx-red-600) !important;
  border-color: var(--trdx-red-600) !important;
}

body.application.application-offset .text-primary,
body.application.application-offset a.text-primary {
  color: var(--trdx-red-500) !important;
}

body.application.application-offset .bg-primary,
body.application.application-offset .badge-primary {
  background-color: var(--trdx-red-500) !important;
  border-color: var(--trdx-red-500) !important;
}

body.application.application-offset .page-item.active .page-link,
body.application.application-offset .nav-pills .nav-link.active,
body.application.application-offset .custom-control-input:checked ~ .custom-control-label::before,
body.application.application-offset .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--trdx-red-500) !important;
  border-color: var(--trdx-red-500) !important;
}

body.application.application-offset .page-link:focus,
body.application.application-offset .form-control:focus,
body.application.application-offset .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem var(--trdx-red-ring) !important;
  border-color: var(--trdx-red-500) !important;
}

body.auth-premium .form-control:focus,
body.auth-premium select:focus,
body.trdx-premium .form-control:focus,
body.trdx-premium .form-control:focus-visible {
  border-color: var(--trdx-red-500) !important;
  box-shadow: 0 0 0 0.2rem var(--trdx-red-ring) !important;
}