/* TRL Brand Guidelines 2026 — Colour System */
:root {
  /* Primary palette */
  --trl-dark-navy: #0D1225;
  --trl-blue: #541BFF;
  --trl-green: #3BBD96;
  --trl-white: #FFFFFF;
  --trl-grey: #808080;
  --trl-light-navy: #101348;

  /* Secondary palette */
  --trl-lime: #D1FC87;
  --trl-lilac: #DBC4FF;
  --trl-mint: #B2FFBA;
  --trl-orange: #FFB236;
  --trl-pale-blue: #8CD1FF;
  --trl-coral: #FA8269;

  /* Derived */
  --trl-blue-dark: #4516CC;

  /* Semantic mappings */
  --bg-primary: var(--trl-dark-navy);
  --bg-secondary: var(--trl-light-navy);
  --text-primary: var(--trl-white);
  --text-secondary: var(--trl-grey);
  --accent-primary: var(--trl-blue);
  --accent-primary-hover: var(--trl-blue-dark);
  --accent-success: var(--trl-green);
}

/* Global overrides */
body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Navigation sidebar */
.sidebar {
  background-color: var(--bg-secondary) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar .nav-link {
  color: var(--text-primary) !important;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  background-color: var(--accent-primary) !important;
  color: var(--text-primary) !important;
}

/* Cards and panels */
.card {
  background-color: var(--bg-secondary) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text-primary) !important;
}

.card-header {
  background-color: rgba(84, 27, 255, 0.15) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text-primary) !important;
}

/* Buttons */
.btn-primary {
  background-color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: var(--text-primary) !important;
}

.btn-primary:hover {
  background-color: var(--accent-primary-hover) !important;
  border-color: var(--accent-primary-hover) !important;
}

.btn-success {
  background-color: var(--accent-success) !important;
  border-color: var(--accent-success) !important;
  color: var(--trl-dark-navy) !important;
}

.btn-outline-primary {
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--accent-primary) !important;
  color: var(--text-primary) !important;
}

/* Form controls */
.form-control {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: var(--text-primary) !important;
}

.form-control:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(84, 27, 255, 0.25) !important;
}

.form-control::placeholder {
  color: var(--text-secondary) !important;
}

.form-label {
  color: var(--text-primary) !important;
}

.form-check-label {
  color: var(--text-primary) !important;
}

/* Tables */
.table {
  color: var(--text-primary) !important;
}

.table thead th {
  border-bottom-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--text-primary) !important;
}

.table td {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Links */
a {
  color: var(--trl-lilac) !important;
}

a:hover {
  color: var(--trl-white) !important;
}

/* Alerts */
.alert-danger {
  background-color: rgba(250, 130, 105, 0.15) !important;
  border-color: var(--trl-coral) !important;
  color: var(--trl-coral) !important;
}

.alert-success {
  background-color: rgba(59, 189, 150, 0.15) !important;
  border-color: var(--accent-success) !important;
  color: var(--accent-success) !important;
}

.alert-info {
  background-color: rgba(140, 209, 255, 0.15) !important;
  border-color: var(--trl-pale-blue) !important;
  color: var(--trl-pale-blue) !important;
}

/* Page titles */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
}

/* Footer */
footer, .footer {
  background-color: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Consent page scope items */
.scope-check {
  background-color: var(--bg-secondary) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Badge overrides */
.badge.bg-primary {
  background-color: var(--accent-primary) !important;
}

.badge.bg-success {
  background-color: var(--accent-success) !important;
  color: var(--trl-dark-navy) !important;
}

/* Bootstrap utility overrides for dark theme */
.text-bg-light {
  --bs-bg-opacity: 1 !important;
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.bg-body-tertiary,
.bg-white,
.bg-light {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.text-muted {
  color: var(--text-secondary) !important;
}

.text-bg-light *,
.card * {
  color: inherit;
}

.list-group-item {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.alert-light {
  background-color: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.alert-warning {
  background-color: rgba(255, 178, 54, 0.15) !important;
  border-color: var(--trl-orange) !important;
  color: var(--trl-orange) !important;
}

/* Display numbers in dashboard cards */
.display-1, .display-2, .display-3, .display-4 {
  color: var(--text-primary) !important;
}

/* Table inside cards */
.card .table th {
  color: var(--text-secondary) !important;
}

.card .table td {
  color: var(--text-primary) !important;
}

/* Table footer */
td.text-bg-light {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* Bordered elements inside dark theme */
.border {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dropdown menus */
.dropdown-menu {
  background-color: var(--bg-secondary) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dropdown-item {
  color: var(--text-primary) !important;
}

.dropdown-item:hover {
  background-color: var(--accent-primary) !important;
}
