/*
 * ═══════════════════════════════════════════════════════════════
 * ALC AFRICAN DATA LAB — Bootstrap 5 Overrides  v1.0
 * apply.alcafricandatalab.com
 *
 * LOAD ORDER (critical):
 *   1. alc-design-tokens.css   (CSS variables)
 *   2. bootstrap@5.3.2         (Bootstrap base)
 *   3. bootstrap-icons         (icons)
 *   4. alc-design-system.css   (ALC components)
 *   5. THIS FILE               ← last, overrides everything
 *
 * Strategy: Override Bootstrap 5 CSS custom properties at :root
 * so all Bootstrap components inherit ALC colours automatically,
 * then write targeted selectors for structural changes.
 * ═══════════════════════════════════════════════════════════════
 */

/* ════════════════════════════════════════════════════════════════
   1. BOOTSTRAP 5 THEME VARIABLE OVERRIDES
   Bootstrap 5 reads these from :root — changing them re-themes
   all components (buttons, alerts, badges, forms, tables…)
   ════════════════════════════════════════════════════════════════ */
:root {
  /* Fonts */
  --bs-font-sans-serif: 'Plus Jakarta Sans', 'DM Sans', system-ui, -apple-system, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 0.9rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6;

  /* Colours — ALC brand */
  --bs-primary:           #7A3820;
  --bs-primary-rgb:       27, 58, 107;
  --bs-secondary:         #6B5548;
  --bs-secondary-rgb:     100, 116, 139;
  --bs-success:           #2D6A4F;
  --bs-success-rgb:       5, 150, 105;
  --bs-danger:            #DC2626;
  --bs-danger-rgb:        220, 38, 38;
  --bs-warning:           #CF7542;
  --bs-warning-rgb:       217, 119, 6;
  --bs-info:              #0284C7;
  --bs-info-rgb:          2, 132, 199;
  --bs-light:             #F1F5F9;
  --bs-light-rgb:         241, 245, 249;
  --bs-dark:              #0C0805;
  --bs-dark-rgb:          13, 27, 42;

  /* Body */
  --bs-body-color:        #1A0C06;
  --bs-body-bg:           #FAF4EE;
  --bs-secondary-color:   #475569;
  --bs-tertiary-color:    #9E8070;
  --bs-tertiary-bg:       #FDF9F5;

  /* Borders */
  --bs-border-color:      #E8D8CC;
  --bs-border-color-translucent: rgba(14,30,58,.12);

  /* Radius — rounded modern look */
  --bs-border-radius:     8px;
  --bs-border-radius-sm:  6px;
  --bs-border-radius-lg:  12px;
  --bs-border-radius-xl:  16px;
  --bs-border-radius-xxl: 24px;
  --bs-border-radius-pill: 9999px;

  /* Links */
  --bs-link-color:        #CF7542;
  --bs-link-color-rgb:    37, 99, 235;
  --bs-link-hover-color:  #A85A32;
  --bs-link-decoration:   none;

  /* Card */
  --bs-card-spacer-y:       1.25rem;
  --bs-card-spacer-x:       1.25rem;
  --bs-card-border-radius:  12px;
  --bs-card-border-color:   #E8D8CC;
  --bs-card-box-shadow:     0 2px 8px rgba(0,0,0,.08);
  --bs-card-bg:             #FFFFFF;
  --bs-card-cap-bg:         #FDF9F5;

  /* Input */
  --bs-input-bg:            #FFFFFF;
  --bs-input-border-color:  #D4BFB0;
  --bs-input-focus-border-color: #CF7542;
  --bs-input-focus-box-shadow:   0 0 0 3px rgba(207,117,66,.15);
  --bs-input-border-radius: 8px;
  --bs-input-padding-y:     0.6rem;
  --bs-input-padding-x:     0.875rem;

  /* Table */
  --bs-table-bg:            transparent;
  --bs-table-striped-bg:    #FDF9F5;
  --bs-table-hover-bg:      #F5EDE4;
  --bs-table-border-color:  #E8D8CC;

  /* Navbar */
  --bs-navbar-color:        rgba(255,255,255,.75);
  --bs-navbar-hover-color:  #FFFFFF;
  --bs-navbar-active-color: #FFFFFF;
  --bs-navbar-brand-color:  #FFFFFF;
  --bs-navbar-brand-hover-color: #FFFFFF;

  /* Modal */
  --bs-modal-border-radius: 16px;
  --bs-modal-header-border-color: #E8D8CC;
  --bs-modal-footer-border-color: #E8D8CC;
  --bs-modal-content-box-shadow:  0 16px 48px rgba(0,0,0,.14);

  /* Dropdown */
  --bs-dropdown-border-radius: 10px;
  --bs-dropdown-border-color: #E8D8CC;
  --bs-dropdown-box-shadow: 0 4px 16px rgba(0,0,0,.10);
  --bs-dropdown-link-hover-bg: #F5EDE4;
  --bs-dropdown-link-active-bg: #7A3820;

  /* Badge */
  --bs-badge-border-radius: 9999px;
  --bs-badge-padding-y: .3em;
  --bs-badge-padding-x: .75em;

  /* Breadcrumb */
  --bs-breadcrumb-divider-color: #9E8070;
  --bs-breadcrumb-active-color: #1A0C06;

  /* Pagination */
  --bs-pagination-active-bg: #7A3820;
  --bs-pagination-active-border-color: #7A3820;
  --bs-pagination-border-radius: 8px;

  /* Progress */
  --bs-progress-bg: #E8D8CC;
  --bs-progress-border-radius: 9999px;
  --bs-progress-bar-bg: #7A3820;

  /* List group */
  --bs-list-group-border-color: #E8D8CC;
  --bs-list-group-border-radius: 12px;
  --bs-list-group-action-hover-bg: #F5EDE4;
  --bs-list-group-active-bg: #7A3820;
  --bs-list-group-active-border-color: #7A3820;
}


/* ════════════════════════════════════════════════════════════════
   2. GLOBAL BASE
   ════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--bs-font-sans-serif) !important;
  background-color: #FAF4EE !important;
  color: #1A0C06;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1A0C06;
}

a { color: #CF7542; }
a:hover { color: #A85A32; text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════
   3. NAVIGATION  (fixes the nav to ALC deep navy)
   ════════════════════════════════════════════════════════════════ */
.navbar,
.portal-nav,
[class*="portal-nav"],
nav.navbar {
  background: #0C0805 !important;
  border-bottom: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.28) !important;
  min-height: 56px;
}

.navbar-brand,
.portal-brand,
.nav-brand,
.alc-nav-brand {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  font-size: 1rem !important;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
}

.navbar-nav .nav-link,
.portal-nav .nav-link {
  color: rgba(255,255,255,.72) !important;
  font-weight: 500;
  border-radius: 6px;
  padding: 6px 12px !important;
  transition: all .15s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.portal-nav .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.12) !important;
}

/* Navbar toggler (mobile) */
.navbar-toggler { border-color: rgba(255,255,255,.3) !important; }
.navbar-toggler-icon { filter: invert(1); }

/* Top sticky nav that many pages use */
[style*="background:#0C0805"],
[style*="background: #0C0805"] {
  background: #0C0805 !important;
}


/* ════════════════════════════════════════════════════════════════
   4. BUTTONS
   ════════════════════════════════════════════════════════════════ */
.btn {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 10px !important;
  transition: all .18s cubic-bezier(.22,1,.36,1) !important;
  padding: 0.55rem 1.1rem;
}
.btn:active { transform: translateY(1px) !important; }

.btn-primary {
  background: #7A3820 !important;
  border-color: #7A3820 !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(27,58,107,.28) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: #5A2810 !important;
  border-color: #5A2810 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(27,58,107,.4) !important;
}

.btn-secondary {
  background: #6B5548 !important;
  border-color: #6B5548 !important;
  color: #fff !important;
}
.btn-secondary:hover { background: #475569 !important; border-color: #475569 !important; }

.btn-success {
  background: #2D6A4F !important; border-color: #2D6A4F !important;
}
.btn-success:hover { background: #047857 !important; border-color: #047857 !important; }

.btn-danger {
  background: #DC2626 !important; border-color: #DC2626 !important;
}
.btn-danger:hover { background: #B91C1C !important; border-color: #B91C1C !important; }

.btn-warning {
  background: #CF7542 !important; border-color: #CF7542 !important; color: #fff !important;
}
.btn-warning:hover { background: #B45309 !important; border-color: #B45309 !important; }

.btn-info {
  background: #0284C7 !important; border-color: #0284C7 !important; color: #fff !important;
}

.btn-dark {
  background: #0C0805 !important; border-color: #0C0805 !important;
}
.btn-dark:hover { background: #7A3820 !important; border-color: #7A3820 !important; }

.btn-light {
  background: #F1F5F9 !important; border-color: #E8D8CC !important; color: #1A0C06 !important;
}
.btn-light:hover { background: #E8D8CC !important; }

/* Outline variants */
.btn-outline-primary {
  color: #7A3820 !important; border-color: #7A3820 !important;
}
.btn-outline-primary:hover {
  background: #7A3820 !important; color: #fff !important;
}
.btn-outline-secondary {
  color: #6B5548 !important; border-color: #6B5548 !important;
}
.btn-outline-secondary:hover {
  background: #6B5548 !important; color: #fff !important;
}

/* Portal-specific button styles seen in existing files */
.btn-portal {
  background: linear-gradient(135deg,#7A3820,#CF7542) !important;
  border: none !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans',system-ui,sans-serif;
  font-weight: 600;
  border-radius: 10px !important;
  padding: .65rem 1.25rem !important;
}
.btn-portal:hover {
  background: linear-gradient(135deg,#5A2810,#A85A32) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(207,117,66,.35) !important;
}

/* Small/large sizes */
.btn-sm { border-radius: 7px !important; padding: .35rem .75rem !important; font-size: .8rem !important; }
.btn-lg { border-radius: 12px !important; padding: .75rem 1.5rem !important; font-size: 1rem !important; }


/* ════════════════════════════════════════════════════════════════
   5. FORMS
   ════════════════════════════════════════════════════════════════ */
.form-control,
.form-select,
.form-control-sm,
.form-control-lg {
  border-radius: 9px !important;
  border: 1.5px solid #D4BFB0 !important;
  background: #FFFFFF !important;
  color: #1A0C06 !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: .875rem;
  padding: .6rem .875rem !important;
  transition: border-color .15s, box-shadow .15s !important;
  box-shadow: none !important;
}
.form-control:hover, .form-select:hover {
  border-color: #9E8070 !important;
}
.form-control:focus, .form-select:focus {
  border-color: #CF7542 !important;
  box-shadow: 0 0 0 3px rgba(207,117,66,.15) !important;
  outline: none !important;
}
.form-control::placeholder { color: #9E8070 !important; }
.form-control.is-invalid { border-color: #DC2626 !important; }
.form-control.is-valid   { border-color: #2D6A4F !important; }

.form-label {
  font-weight: 600;
  font-size: .875rem;
  color: #1A0C06;
  margin-bottom: .375rem;
}

.form-text { color: #6B5548; font-size: .78rem; }

.input-group-text {
  background: #F1F5F9 !important;
  border: 1.5px solid #D4BFB0 !important;
  color: #6B5548 !important;
  border-radius: 9px !important;
}
.input-group .form-control { border-radius: 0 9px 9px 0 !important; }
.input-group .input-group-text:first-child { border-radius: 9px 0 0 9px !important; border-right: none !important; }

.form-check-input:checked {
  background-color: #CF7542 !important;
  border-color: #CF7542 !important;
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(207,117,66,.2) !important;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px !important;
}

/* Invalid feedback */
.invalid-feedback { font-size: .78rem; color: #DC2626; }
.valid-feedback   { font-size: .78rem; color: #2D6A4F; }


/* ════════════════════════════════════════════════════════════════
   6. CARDS
   ════════════════════════════════════════════════════════════════ */
.card {
  border-radius: 14px !important;
  border: 1px solid #E8D8CC !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
  background: #FFFFFF !important;
  transition: box-shadow .2s, transform .2s !important;
  overflow: hidden;
}
.card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.10) !important;
}
.card-header {
  background: #FDF9F5 !important;
  border-bottom: 1px solid #E8D8CC !important;
  padding: .875rem 1.25rem !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: .875rem;
  color: #1A0C06;
}
.card-footer {
  background: #FDF9F5 !important;
  border-top: 1px solid #E8D8CC !important;
  padding: .75rem 1.25rem !important;
}
.card-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.card-body { padding: 1.25rem !important; }

/* Coloured top-border card variants */
.card.border-primary { border-top: 3px solid #7A3820 !important; border-color: #E8D8CC !important; }
.card.border-success  { border-top: 3px solid #2D6A4F !important; border-color: #E8D8CC !important; }
.card.border-warning  { border-top: 3px solid #CF7542 !important; border-color: #E8D8CC !important; }
.card.border-danger   { border-top: 3px solid #DC2626 !important; border-color: #E8D8CC !important; }
.card.border-info     { border-top: 3px solid #0284C7 !important; border-color: #E8D8CC !important; }


/* ════════════════════════════════════════════════════════════════
   7. BADGES
   ════════════════════════════════════════════════════════════════ */
.badge {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: .68rem !important;
  letter-spacing: .04em !important;
  padding: .3em .75em !important;
  border-radius: 9999px !important;
}
.bg-primary   { background: #7A3820 !important; }
.bg-secondary { background: #6B5548 !important; }
.bg-success   { background: #2D6A4F !important; }
.bg-danger    { background: #DC2626 !important; }
.bg-warning   { background: #CF7542 !important; color: #fff !important; }
.bg-info      { background: #0284C7 !important; }
.bg-dark      { background: #0C0805 !important; }
.bg-light     { background: #F1F5F9 !important; color: #1A0C06 !important; }

/* Soft / outlined badges — common pattern in existing ALC files */
.badge.bg-primary-subtle   { background: #F5EDE4 !important; color: #7A3820 !important; }
.badge.bg-success-subtle   { background: #D1EAD9 !important; color: #2D6A4F !important; }
.badge.bg-warning-subtle   { background: #FEF3C7 !important; color: #B45309 !important; }
.badge.bg-danger-subtle    { background: #FEE2E2 !important; color: #DC2626 !important; }
.badge.bg-info-subtle      { background: #FEF0E8 !important; color: #0284C7 !important; }
.badge.bg-secondary-subtle { background: #F1F5F9 !important; color: #6B5548 !important; }


/* ════════════════════════════════════════════════════════════════
   8. ALERTS
   ════════════════════════════════════════════════════════════════ */
.alert {
  border-radius: 10px !important;
  border-width: 0 0 0 4px !important;
  border-style: solid;
  font-size: .875rem;
  padding: .875rem 1.1rem !important;
}
.alert-primary  { background: #F5EDE4 !important; border-color: #7A3820 !important; color: #7A3820 !important; }
.alert-success  { background: #D1EAD9 !important; border-color: #2D6A4F !important; color: #1A4D36 !important; }
.alert-warning  { background: #FEF3C7 !important; border-color: #CF7542 !important; color: #92400E !important; }
.alert-danger   { background: #FEE2E2 !important; border-color: #DC2626 !important; color: #991B1B !important; }
.alert-info     { background: #FEF0E8 !important; border-color: #0284C7 !important; color: #075985 !important; }
.alert-secondary{ background: #F1F5F9 !important; border-color: #6B5548 !important; color: #3D2518 !important; }
.alert-dark     { background: #F5EDE4 !important; border-color: #0C0805 !important; color: #0C0805 !important; }

.alert-heading { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700; }
.alert-link { font-weight: 700; text-decoration: underline; }


/* ════════════════════════════════════════════════════════════════
   9. TABLES
   ════════════════════════════════════════════════════════════════ */
.table {
  font-size: .875rem;
  border-color: #E8D8CC !important;
  --bs-table-border-color: #E8D8CC;
}
.table thead th,
.table > thead > tr > th {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6B5548 !important;
  background: #FDF9F5 !important;
  border-bottom: 2px solid #E8D8CC !important;
  padding: .75rem 1rem !important;
  white-space: nowrap;
}
.table > tbody > tr > td {
  padding: .875rem 1rem !important;
  color: #3D2518;
  vertical-align: middle;
  border-color: #E8D8CC !important;
}
.table-hover > tbody > tr:hover > * {
  background-color: #F5EDE4 !important;
  cursor: pointer;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #FDF9F5 !important;
}
.table-responsive {
  border-radius: 12px;
  border: 1px solid #E8D8CC;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}


/* ════════════════════════════════════════════════════════════════
   10. MODALS
   ════════════════════════════════════════════════════════════════ */
.modal-content {
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.14) !important;
  overflow: hidden;
}
.modal-header {
  background: #FFFFFF;
  border-bottom: 1px solid #E8D8CC !important;
  padding: 1.25rem 1.5rem !important;
}
.modal-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: #1A0C06;
}
.modal-footer {
  background: #FDF9F5;
  border-top: 1px solid #E8D8CC !important;
  padding: .875rem 1.5rem !important;
}
.modal-body { padding: 1.5rem !important; }
.btn-close {
  background-color: #F1F5F9;
  border-radius: 8px;
  opacity: .7;
  padding: .5rem !important;
}
.btn-close:hover { background-color: #E8D8CC; opacity: 1; }
.modal-backdrop { backdrop-filter: blur(4px); }


/* ════════════════════════════════════════════════════════════════
   11. TABS & PILLS
   ════════════════════════════════════════════════════════════════ */
.nav-tabs {
  border-bottom: 2px solid #E8D8CC !important;
  gap: 2px;
}
.nav-tabs .nav-link {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px;
  padding: .625rem 1.1rem !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: .875rem;
  color: #6B5548 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: all .15s;
}
.nav-tabs .nav-link:hover {
  color: #1A0C06 !important;
  background: #FDF9F5 !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #CF7542 !important;
  border-bottom-color: #CF7542 !important;
  background: transparent !important;
  font-weight: 700;
}

.nav-pills .nav-link {
  border-radius: 10px !important;
  font-weight: 600;
  font-size: .875rem;
  color: #475569 !important;
  padding: .5rem 1rem !important;
  transition: all .15s;
}
.nav-pills .nav-link:hover { background: #F1F5F9 !important; color: #1A0C06 !important; }
.nav-pills .nav-link.active {
  background: #7A3820 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(27,58,107,.28);
}


/* ════════════════════════════════════════════════════════════════
   12. DROPDOWNS
   ════════════════════════════════════════════════════════════════ */
.dropdown-menu {
  border-radius: 12px !important;
  border: 1px solid #E8D8CC !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.10) !important;
  padding: .375rem !important;
  font-size: .875rem;
  min-width: 180px;
}
.dropdown-item {
  border-radius: 8px !important;
  padding: .5rem .875rem !important;
  color: #3D2518 !important;
  font-weight: 500;
  transition: background .12s;
}
.dropdown-item:hover { background: #F5EDE4 !important; color: #1A0C06 !important; }
.dropdown-item.active, .dropdown-item:active {
  background: #7A3820 !important; color: #fff !important;
}
.dropdown-divider { border-color: #E8D8CC !important; margin: .375rem !important; }
.dropdown-header {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #9E8070 !important; padding: .375rem .875rem !important;
}


/* ════════════════════════════════════════════════════════════════
   13. PROGRESS BARS
   ════════════════════════════════════════════════════════════════ */
.progress {
  border-radius: 9999px !important;
  background: #E8D8CC !important;
  overflow: hidden;
}
.progress-bar {
  background: linear-gradient(90deg, #CF7542, #7A3820) !important;
  border-radius: 9999px !important;
  transition: width .5s cubic-bezier(.22,1,.36,1) !important;
  position: relative;
  overflow: hidden;
}
.progress-bar::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  animation: bs-shimmer 2s infinite;
}
@keyframes bs-shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
@media(prefers-reduced-motion:reduce){.progress-bar::after{animation:none}}


/* ════════════════════════════════════════════════════════════════
   14. PAGINATION
   ════════════════════════════════════════════════════════════════ */
.pagination { gap: 3px; }
.page-item .page-link {
  border-radius: 8px !important;
  border: 1px solid #E8D8CC !important;
  color: #3D2518 !important;
  font-weight: 600;
  font-size: .875rem;
  padding: .4rem .75rem !important;
  transition: all .15s;
}
.page-item .page-link:hover { background: #F5EDE4 !important; border-color: #D4BFB0 !important; color: #1A0C06 !important; }
.page-item.active .page-link {
  background: #7A3820 !important;
  border-color: #7A3820 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(27,58,107,.28);
}
.page-item.disabled .page-link { color: #D4BFB0 !important; }


/* ════════════════════════════════════════════════════════════════
   15. LIST GROUPS
   ════════════════════════════════════════════════════════════════ */
.list-group { border-radius: 12px !important; overflow: hidden; }
.list-group-item {
  border-color: #E8D8CC !important;
  padding: .75rem 1.1rem !important;
  font-size: .875rem;
  color: #3D2518;
  transition: background .12s;
}
.list-group-item:hover { background: #FDF9F5 !important; }
.list-group-item.active {
  background: #7A3820 !important;
  border-color: #7A3820 !important;
  color: #fff !important;
}
.list-group-item-action { cursor: pointer; }


/* ════════════════════════════════════════════════════════════════
   16. ACCORDION
   ════════════════════════════════════════════════════════════════ */
.accordion {
  border-radius: 12px !important;
  overflow: hidden;
  border: 1px solid #E8D8CC;
}
.accordion-item { border-color: #E8D8CC !important; }
.accordion-button {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: .9rem !important;
  color: #1A0C06 !important;
  background: #fff !important;
  padding: 1rem 1.25rem !important;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
  color: #CF7542 !important;
  background: #FDF9F5 !important;
  box-shadow: none !important;
}
.accordion-button::after {
  filter: none !important;
}
.accordion-body {
  font-size: .875rem;
  color: #3D2518;
  padding: .5rem 1.25rem 1.25rem !important;
  line-height: 1.7;
}


/* ════════════════════════════════════════════════════════════════
   17. TOASTS & SPINNERS
   ════════════════════════════════════════════════════════════════ */
.toast {
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
  font-size: .875rem;
}
.toast-header {
  background: #0C0805 !important;
  color: #fff !important;
  border-bottom: none !important;
  border-radius: 12px 12px 0 0 !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
}
.spinner-border.text-primary,
.spinner-grow.text-primary { color: #7A3820 !important; }


/* ════════════════════════════════════════════════════════════════
   18. DASHBOARD & PORTAL-SPECIFIC PATTERNS
   (targets the existing inline class names used in ALC PHP files)
   ════════════════════════════════════════════════════════════════ */

/* Welcome banner (gradient used in applicant/dashboard.php) */
.welcome-banner,
.alc-welcome,
[style*="background:linear-gradient(135deg,#0C0805"],
[style*="background: linear-gradient(135deg, #0C0805"] {
  background: linear-gradient(135deg, #0C0805 0%, #7A3820 100%) !important;
  border-radius: 14px !important;
  color: #fff !important;
}

/* Dash cards */
.dash-card {
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
  border: 1px solid #E8D8CC !important;
}
.dash-card-header,.dash-card-hdr {
  background: #FDF9F5 !important;
  border-bottom: 1px solid #E8D8CC !important;
  padding: .75rem 1.1rem !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6B5548 !important;
}

/* Application cards */
.app-card {
  border: 1px solid #E8D8CC !important;
  border-radius: 12px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.app-card:hover {
  border-color: #7A3820 !important;
  box-shadow: 0 4px 16px rgba(122,56,32,.15) !important;
}

/* Status pills the existing pages generate */
.status-pill {
  padding: .25rem .65rem !important;
  border-radius: 9999px !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
}

/* alc-progress used in existing files */
.alc-progress {
  height: 8px !important;
  background: #E8D8CC !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
}
.alc-progress-bar {
  height: 100% !important;
  background: linear-gradient(90deg, #CF7542, #7A3820) !important;
  border-radius: 9999px !important;
  transition: width .4s ease !important;
}


/* ════════════════════════════════════════════════════════════════
   19. BREADCRUMBS, TOOLTIPS, POPOVERS
   ════════════════════════════════════════════════════════════════ */
.breadcrumb-item + .breadcrumb-item::before { color: #9E8070 !important; }
.breadcrumb-item.active { color: #1A0C06 !important; font-weight: 600; }
.breadcrumb-item a { color: #CF7542 !important; }

.tooltip-inner {
  background: #0C0805 !important;
  border-radius: 8px !important;
  font-size: .78rem;
  padding: .35rem .7rem !important;
}
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before { border-top-color: #0C0805 !important; }

.popover {
  border-radius: 12px !important;
  border-color: #E8D8CC !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.10) !important;
}
.popover-header {
  background: #FDF9F5 !important;
  border-bottom-color: #E8D8CC !important;
  border-radius: 12px 12px 0 0 !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
}


/* ════════════════════════════════════════════════════════════════
   20. UTILITIES  (supplement Bootstrap utilities with ALC tokens)
   ════════════════════════════════════════════════════════════════ */
.text-primary   { color: #7A3820 !important; }
.text-secondary { color: #6B5548 !important; }
.text-success   { color: #2D6A4F !important; }
.text-danger    { color: #DC2626 !important; }
.text-warning   { color: #CF7542 !important; }
.text-info      { color: #0284C7 !important; }
.text-muted     { color: #6B5548 !important; }
.text-dark      { color: #0C0805 !important; }

.border         { border-color: #E8D8CC !important; }
.border-primary { border-color: #7A3820 !important; }

.bg-body-secondary { background: #FDF9F5 !important; }
.bg-body-tertiary  { background: #F1F5F9 !important; }

.shadow-sm { box-shadow: 0 2px 8px rgba(0,0,0,.08) !important; }
.shadow    { box-shadow: 0 4px 16px rgba(0,0,0,.10) !important; }
.shadow-lg { box-shadow: 0 8px 32px rgba(0,0,0,.12) !important; }

.rounded    { border-radius: 8px !important; }
.rounded-lg { border-radius: 12px !important; }
.rounded-xl { border-radius: 16px !important; }
.rounded-pill { border-radius: 9999px !important; }

/* fw-semibold is used extensively */
.fw-semibold { font-weight: 600 !important; }
.fw-bold     { font-weight: 700 !important; }


/* ── DROPDOWN — guaranteed readable (white bg, dark text) ─ */
.dropdown-menu{background-color:#ffffff!important;border:1px solid #E8D8CC!important;border-radius:12px!important;box-shadow:0 4px 20px rgba(0,0,0,.14)!important;padding:6px!important;min-width:200px}
.dropdown-item{color:#1A0C06!important;background-color:transparent!important;border-radius:8px!important;padding:9px 14px!important;font-size:.875rem!important;font-weight:500!important;transition:background .12s,color .12s!important;display:flex!important;align-items:center!important}
.dropdown-item:hover,.dropdown-item:focus{background-color:#FAF4EE!important;color:#000000!important;text-decoration:none!important}
.dropdown-item.active,.dropdown-item:active{background-color:#CF7542!important;color:#ffffff!important}
.dropdown-item.text-danger{color:#BE2034!important}
.dropdown-item.text-danger:hover{background-color:#FEE2E2!important;color:#9E1A28!important}
.dropdown-divider{border-color:#E8D8CC!important;margin:4px 6px!important}
.dropdown-header{color:#9E8070!important;font-size:.7rem!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.07em!important;padding:6px 14px!important}