/* ── AVON HMO Recruitment Portal — Brand Stylesheet ─────────────────────────
   Brand palette
     Purple  #59058D  (primary)
     Green   #488948  (success / approved)
     Gray    #6E6E70  (secondary / neutral)
     Yellow  #FFF212  (accent / highlight)
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --avon-purple:     #59058D;
  --avon-green:      #488948;
  --avon-gray:       #6E6E70;
  --avon-yellow:     #FFF212;
  --bs-primary:      #59058D;
  --bs-primary-rgb:  89, 5, 141;
  --bs-link-color:   #59058D;
  --bs-link-hover-color: #7B1AB5;
}

/* ── Base ──────────────────────────────────────────────────────────────────── */

body {
  background-color: #f8f9fa;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Bootstrap primary overrides ───────────────────────────────────────────── */

.btn-primary {
  background-color: #59058D !important;
  border-color:     #59058D !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  background-color: #7B1AB5 !important;
  border-color:     #7B1AB5 !important;
}

/* ── Form focus states ─────────────────────────────────────────────────────── */

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #59058D;
  box-shadow: 0 0 0 0.2rem rgba(89, 5, 141, 0.2);
}

.form-check-input:checked {
  background-color: #59058D;
  border-color:     #59058D;
}

/* ── Dash dcc.Dropdown ─────────────────────────────────────────────────────── */

.Select-control:hover {
  border-color: #59058D !important;
}
.is-focused .Select-control {
  border-color: #59058D !important;
  box-shadow: 0 0 0 0.2rem rgba(89, 5, 141, 0.2) !important;
}
.Select-menu-outer {
  border-color: #59058D !important;
  border-radius: 6px;
}
.Select-option.is-selected {
  background-color: #59058D !important;
  color: #fff !important;
}
.Select-option.is-focused {
  background-color: rgba(89, 5, 141, 0.08) !important;
}
.VirtualizedSelectFocusedOption {
  background-color: rgba(89, 5, 141, 0.08) !important;
}
.VirtualizedSelectSelectedOption {
  background-color: #59058D !important;
  color: #fff !important;
}

/* ── DataTable filter input ────────────────────────────────────────────────── */

.dash-filter input:focus {
  outline: none;
  border-color: #59058D;
  box-shadow: 0 0 0 0.15rem rgba(89, 5, 141, 0.2);
}

/* ── Breadcrumb ────────────────────────────────────────────────────────────── */

.breadcrumb-item.active {
  color: #6E6E70;
}
.breadcrumb-item a {
  color: #59058D;
  text-decoration: none;
}
.breadcrumb-item a:hover {
  color: #7B1AB5;
  text-decoration: underline;
}

/* ── Navbar active link ────────────────────────────────────────────────────── */

.navbar .nav-link:hover {
  color: #FFF212 !important;
  opacity: 1 !important;
}

/* ── Scrollbar (Webkit) ────────────────────────────────────────────────────── */

::-webkit-scrollbar           { width: 6px; height: 6px; }
::-webkit-scrollbar-track     { background: #f8f9fa; }
::-webkit-scrollbar-thumb     { background: #59058D; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #7B1AB5; }