/* com_eventsmanager — TMI brand theme for the front-end pages (dashboard, apply,
   submit, event, participants). Scoped to .tmi-em so nothing else on the
   page changes. Maps the Bootstrap green / blue the pages use onto TMI red
   and navy. */
.tmi-em {
  --tmi-red: #D92B2B;
  --tmi-red-dark: #B01F1F;
  --tmi-red-light: #F5E5E5;
  --tmi-navy: #0F1628;
  --tmi-navy-2: #1a2744;
  --tmi-gray-50: #F8F8FA;
  --tmi-gray-500: #6B7280;
  --tmi-gray-700: #374151;
  --tmi-border: #E5E7EB;
  --tmi-shadow: 0 2px 12px rgba(0, 0, 0, .06);
  font-family: 'Inter', 'Montserrat', system-ui, sans-serif;
  color: var(--tmi-gray-700);
}

/* Headings and links */
.tmi-em h1, .tmi-em h2, .tmi-em h3, .tmi-em h4, .tmi-em h5, .tmi-em h6 { color: var(--tmi-navy); }
.tmi-em h1 { font-weight: 800; }
.tmi-em h4 { font-weight: 700; }
.tmi-em a:not(.btn) { color: var(--tmi-red); text-decoration: none; }
.tmi-em a:not(.btn):hover { color: var(--tmi-red-dark); }
.tmi-em .card-title a { color: var(--tmi-navy); font-weight: 700; }
.tmi-em .card-title a:hover { color: var(--tmi-red); }

/* Buttons: red primary, navy outline secondary */
.tmi-em .btn { border-radius: 8px; font-weight: 600; box-shadow: none !important; }
.tmi-em .btn-success,
.tmi-em .btn-primary {
  background: var(--tmi-red) !important;
  border-color: var(--tmi-red) !important;
  color: #fff !important;
}
.tmi-em .btn-success:hover, .tmi-em .btn-success:focus,
.tmi-em .btn-primary:hover, .tmi-em .btn-primary:focus {
  background: var(--tmi-red-dark) !important;
  border-color: var(--tmi-red-dark) !important;
}
.tmi-em .btn-outline-primary,
.tmi-em .btn-outline-success,
.tmi-em .btn-outline-secondary {
  background: #fff !important;
  border: 1.5px solid var(--tmi-navy) !important;
  color: var(--tmi-navy) !important;
}
.tmi-em .btn-outline-primary:hover, .tmi-em .btn-outline-success:hover, .tmi-em .btn-outline-secondary:hover {
  background: var(--tmi-navy) !important;
  color: #fff !important;
}
.tmi-em .btn-outline-danger { border-color: var(--tmi-red) !important; color: var(--tmi-red) !important; }
.tmi-em .btn-outline-danger:hover { background: var(--tmi-red) !important; color: #fff !important; }

/* Colour utilities used for icons and badges */
.tmi-em .text-success, .tmi-em .text-primary { color: var(--tmi-red) !important; }
/* Status badges (dashboard): soft pills, same colours as the member profile */
.tmi-em .badge.bg-success, .tmi-em .badge.bg-warning, .tmi-em .badge.bg-danger,
.tmi-em .badge.bg-info, .tmi-em .badge.bg-secondary {
  border-radius: 999px;
  padding: .35em .8em;
  font-weight: 700;
  font-size: .72rem;
  text-transform: capitalize;
}
.tmi-em .badge.bg-success { background: #E7F6EC !important; color: #1E7B3C !important; }
.tmi-em .badge.bg-warning { background: #FFF4E0 !important; color: #9A5B00 !important; }
.tmi-em .badge.bg-danger { background: var(--tmi-red-light) !important; color: var(--tmi-red-dark) !important; }
.tmi-em .badge.bg-info { background: #E8EEFB !important; color: #2647A6 !important; }
.tmi-em .badge.bg-secondary { background: #F0F0F4 !important; color: var(--tmi-gray-500) !important; }
.tmi-em .badge.bg-primary {
  background: var(--tmi-red-light) !important;
  color: var(--tmi-red) !important;
  border-radius: 999px;
  padding: .35em .8em;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .68rem;
}

/* Cards */
.tmi-em .card {
  border: 1px solid var(--tmi-border) !important;
  border-radius: 16px;
  box-shadow: var(--tmi-shadow);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tmi-em .row .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(15, 22, 40, .08); }
.tmi-em .card-header.bg-success {
  background: linear-gradient(135deg, var(--tmi-navy) 0%, var(--tmi-navy-2) 100%) !important;
  border: 0;
  padding: 1rem 1.25rem;
}
.tmi-em .card-header.bg-success h4 { color: #fff; font-weight: 800; }
.tmi-em .card-header.bg-success .fas { color: var(--tmi-red); }
.tmi-em .card-footer { background: var(--tmi-gray-50); border-top: 1px solid var(--tmi-border); }
.tmi-em .card.bg-light { background: var(--tmi-gray-50) !important; box-shadow: none; }

/* Alerts: one calm style instead of Bootstrap cyan */
.tmi-em .alert-info,
.tmi-em .alert-success {
  background: var(--tmi-gray-50);
  border: 1px solid var(--tmi-border);
  border-left: 4px solid var(--tmi-red);
  border-radius: 10px;
  color: var(--tmi-gray-700);
}
.tmi-em .alert-warning { border-left: 4px solid #D97706; border-radius: 10px; }

/* Breadcrumb */
.tmi-em .breadcrumb { background: transparent; padding: 0; font-size: .85rem; }
.tmi-em .breadcrumb-item.active { color: var(--tmi-gray-500); }

/* Tables (dashboard) */
.tmi-em .table-responsive {
  background: #fff;
  border: 1px solid var(--tmi-border);
  border-radius: 16px;
  box-shadow: var(--tmi-shadow);
}
.tmi-em .table { margin: 0; }
.tmi-em .table td { padding-top: .85rem; padding-bottom: .85rem; }
.tmi-em .table thead th {
  background: var(--tmi-gray-50);
  color: var(--tmi-gray-500);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--tmi-border);
}

/* Forms */
.tmi-em .form-control:focus,
.tmi-em .form-select:focus {
  border-color: var(--tmi-red);
  box-shadow: 0 0 0 3px rgba(217, 43, 43, .12);
}
.tmi-em .form-control, .tmi-em .form-select { border-radius: 10px; border-color: var(--tmi-border); }
.tmi-em .form-check-input:checked { background-color: var(--tmi-red); border-color: var(--tmi-red); }
.tmi-em .form-check-input:focus { box-shadow: 0 0 0 3px rgba(217, 43, 43, .15); border-color: var(--tmi-red); }

/* "I am participating as" — each option is a card; the chosen one turns red */
.tmi-em .form-check.border {
  border-radius: 12px !important;
  border-color: var(--tmi-border) !important;
  padding: .9rem 1rem .9rem 2.6rem !important;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.tmi-em .form-check.border:hover { border-color: var(--tmi-red) !important; }
.tmi-em .form-check.border:has(.form-check-input:checked) {
  border-color: var(--tmi-red) !important;
  background: var(--tmi-red-light);
}
.tmi-em .form-check.border .form-check-input { margin-left: -1.6rem; }
.tmi-em .form-check.border .form-check-label { cursor: pointer; color: var(--tmi-navy); }