.required:after {
  content: " *";
  color: red;
}

/* ── Neutralize Sneat template sidebar so our custom sidebar takes full control ── */
#layout-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  z-index: 1030 !important;
}

/* ── Navy branding: override Bootstrap primary spinner color ── */
.spinner-border.text-primary {
  color: #002B5B !important;
}

/* ── Ensure content area fills height ── */
.content-wrapper {
  min-height: 100vh;
}


/* =============================================================================
   RESPONSIVE FIXES — Applied globally across all portal pages
   ============================================================================= */

/* ── 1. Card headers: prevent title + action button from squishing on narrow screens ── */
.card-header.d-flex.justify-content-between,
.card-header.d-flex.justify-content-between.align-items-center {
  flex-wrap: wrap;
  gap: 8px;
}

.card-header .card-title {
  min-width: 0;
  flex-shrink: 1;
  margin-bottom: 0;
}

.card-header a,
.card-header button {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 2. Tables: guarantee horizontal scroll ── */
.table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.table-responsive::-webkit-scrollbar { height: 5px; }
.table-responsive::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.table-responsive::-webkit-scrollbar-thumb { background: #c5c8d0; border-radius: 10px; }
.table-responsive::-webkit-scrollbar-thumb:hover { background: #002B5B; }

/* ── 3. Stat cards: stack on narrow widths ── */
@media (max-width: 900px) {
  .row.mb-4 > [class*="col-lg-4"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
}

/* ── 4. Modals: prevent xl/lg overflow on small screens ── */
@media (max-width: 768px) {
  .modal-dialog.modal-xl,
  .modal-dialog.modal-lg {
    max-width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
  }
  .modal-body { padding: 1rem !important; }
  .modal-footer { flex-wrap: wrap; gap: 8px; }
  .modal-body .row > [class*="col-md"],
  .modal-body .row > [class*="col-lg"] {
    width: 100%; max-width: 100%; flex: 0 0 100%;
  }
}

/* ── 5. Tables inside modals ── */
.modal .table-responsive { max-height: 60vh; overflow-y: auto; overflow-x: auto; }

/* ── 6. Quick actions row wraps naturally ── */
.d-flex.flex-wrap.gap-3 { flex-wrap: wrap !important; }
.d-flex.flex-wrap.gap-3 .btn,
.d-flex.flex-wrap.gap-3 a.btn { flex-shrink: 0; }

/* ── 7. Container padding ── */
.container-xxl.container-p-y { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* ── 8. Input groups on mobile ── */
@media (max-width: 576px) {
  .input-group { flex-wrap: wrap; }
  .input-group .btn { width: 100%; margin-top: 4px; border-radius: 0.375rem !important; }
}

/* ── 9. Badge nowrap ── */
td .badge, th .badge { white-space: nowrap; }

/* ── 10. Mobile column hiding utility ── */
@media (max-width: 768px) {
  .table-hide-mobile { display: none !important; }
}

/* ── 11. Page heading responsive font ── */
h4.fw-bold.py-3 { word-break: break-word; font-size: clamp(1rem, 3vw, 1.5rem); }

/* ── 12. Card datatable on Academies page ── */
.card-datatable.table-responsive { overflow-x: auto !important; }


/* =============================================================================
   BUTTON COLOR STANDARDIZATION — DOBSA Navy 2-Tone System
   All pages fixed via CSS, no JSX changes needed.

   Rule:
     • Filled Navy  → primary action (most important CTA per section)
     • White/Grey   → secondary actions
     • Red          → destructive (delete, reject) — kept as-is
     • Green        → positive confirmation (approve) — kept as-is
     • Amber/Orange → status badges only — kept as-is (convey meaning)
   ============================================================================= */

/* btn-primary: indigo/purple → DOBSA Navy */
.btn-primary,
.btn-primary:visited {
  background-color: #002B5B !important;
  border-color: #002B5B !important;
  color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: #001f45 !important;
  border-color: #001f45 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 43, 91, 0.3) !important;
}

/* btn-info: teal/cyan → neutral grey secondary (matches btn-secondary) */
.btn-info,
.btn-info:visited {
  background-color: #ffffff !important;
  border-color: #dee2e6 !important;
  color: #374151 !important;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: #f8f9fa !important;
  border-color: #002B5B !important;
  color: #002B5B !important;
  box-shadow: none !important;
}

/* btn-secondary: tidy up to match the grey secondary style */
.btn-secondary,
.btn-secondary:visited {
  background-color: #ffffff !important;
  border-color: #dee2e6 !important;
  color: #374151 !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: #f8f9fa !important;
  border-color: #adb5bd !important;
  color: #374151 !important;
  box-shadow: none !important;
}

/* btn-label-primary: indigo icon buttons in tables → navy tones */
.btn-label-primary {
  color: #002B5B !important;
  background-color: rgba(0, 43, 91, 0.08) !important;
  border-color: transparent !important;
}
.btn-label-primary:hover,
.btn-label-primary:focus {
  color: #002B5B !important;
  background-color: rgba(0, 43, 91, 0.15) !important;
}

/* Nav pills active state (Students Management / Transfer tabs) → Navy */
.nav-pills .nav-link.active,
.nav-pills .nav-link:active {
  background-color: #002B5B !important;
  color: #ffffff !important;
}
.nav-pills .nav-link:not(.active):hover {
  color: #002B5B !important;
  background-color: rgba(0, 43, 91, 0.08) !important;
}

/* Checkbox accent color */
.form-check-input:checked {
  background-color: #002B5B !important;
  border-color: #002B5B !important;
}

/* Focus ring → navy */
.form-control:focus,
.form-select:focus {
  border-color: #002B5B !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 43, 91, 0.15) !important;
}

/* Link colors inside tables */
.table a.text-primary,
.table .text-primary {
  color: #002B5B !important;
}

/* Inline text links that use Bootstrap text-primary */
a.text-primary {
  color: #002B5B !important;
}
a.text-primary:hover {
  color: #001f45 !important;
}