/* ════════════════════════════════════════════════════════════════
   bootstrap-overrides.css
   Loaded AFTER bootstrap.min.css to retheme all Bootstrap
   components to the Sheepow dark premium design system.
   ════════════════════════════════════════════════════════════════ */

/* -- Buttons ---------------------------------------------------- */
.btn {
  font-family: var(--font);
  font-weight: 600;
  border-radius: var(--r-pill) !important;
  transition: all var(--t-mid) !important;
  letter-spacing: -0.01em;
}

.btn-primary {
  background: var(--g-primary) !important;
  border-color: var(--purple) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(124,58,237,0.3);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: var(--glow-purple) !important;
  color: #fff !important;
}

.btn-outline-primary {
  background: transparent !important;
  border: 1.5px solid rgba(124,58,237,0.5) !important;
  color: var(--purple-3) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background: var(--purple-dim) !important;
  border-color: var(--purple) !important;
  color: var(--purple-2) !important;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--card) !important;
  border: 1px solid var(--b2) !important;
  color: var(--t2) !important;
}
.btn-secondary:hover {
  background: var(--card-h) !important;
  border-color: var(--b3) !important;
  color: var(--t1) !important;
}

.btn-outline-secondary {
  background: transparent !important;
  border: 1px solid var(--b2) !important;
  color: var(--t3) !important;
}
.btn-outline-secondary:hover {
  background: var(--card) !important;
  color: var(--t1) !important;
}

.btn-success {
  background: rgba(16,185,129,0.18) !important;
  border: 1px solid var(--green) !important;
  color: #34d399 !important;
}
.btn-danger {
  background: rgba(239,68,68,0.15) !important;
  border: 1px solid #EF4444 !important;
  color: #fca5a5 !important;
}
.btn-warning {
  background: var(--gold-dim) !important;
  border: 1px solid var(--gold) !important;
  color: var(--gold) !important;
}
.btn-info {
  background: var(--cyan-dim) !important;
  border: 1px solid var(--cyan) !important;
  color: var(--cyan) !important;
}

.btn-light, .btn-outline-light {
  background: var(--b1) !important;
  border-color: var(--b2) !important;
  color: var(--t2) !important;
}
.btn-light:hover, .btn-outline-light:hover {
  background: var(--b2) !important;
  color: var(--t1) !important;
}

.btn-link { color: var(--purple-3) !important; }
.btn-link:hover { color: var(--purple-2) !important; }

.btn-close { filter: invert(1) opacity(0.6); }
.btn-close:hover { filter: invert(1) opacity(1); }

/* -- Form controls --------------------------------------------- */
.form-control, .form-select {
  background-color: var(--surface) !important;
  border: 1px solid var(--b2) !important;
  border-radius: var(--r-sm) !important;
  color: var(--t1) !important;
  font-family: var(--font);
}
.form-control:focus, .form-select:focus {
  background-color: var(--surface) !important;
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.2) !important;
  color: var(--t1) !important;
}
.form-control::placeholder { color: var(--t4) !important; }
.form-select option { background: var(--surface); color: var(--t1); }
.form-label { color: var(--t2) !important; font-weight: 500 !important; font-size: 0.88rem !important; }
.form-text  { color: var(--t4) !important; }

.form-check-input {
  background-color: var(--surface) !important;
  border: 1.5px solid var(--b3) !important;
}
.form-check-input:checked {
  background-color: var(--purple) !important;
  border-color: var(--purple) !important;
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(124,58,237,0.25) !important; }
.form-check-label { color: var(--t2) !important; }

/* -- Input groups ---------------------------------------------- */
.input-group-text {
  background: var(--surface) !important;
  border: 1px solid var(--b2) !important;
  color: var(--t3) !important;
}

/* -- Dropdowns -------------------------------------------------- */
.dropdown-menu {
  background: var(--card) !important;
  border: 1px solid var(--b2) !important;
  border-radius: var(--r) !important;
  padding: 6px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(20px);
}
.dropdown-item {
  color: var(--t2) !important;
  border-radius: var(--r-sm) !important;
  padding: 8px 14px !important;
  font-size: 0.9rem !important;
  transition: background var(--t-fast), color var(--t-fast) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--purple-dim) !important;
  color: var(--purple-3) !important;
}
.dropdown-item.active, .dropdown-item:active {
  background: var(--purple) !important;
  color: #fff !important;
}
.dropdown-divider { border-color: var(--b1) !important; }
.dropdown-header { color: var(--t4) !important; font-size: 0.72rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; }

/* -- Navbar (Bootstrap native) ---------------------------------- */
.navbar {
  background: rgba(7,6,13,0.88) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--b1) !important;
}
.navbar-brand { color: var(--t1) !important; font-weight: 800 !important; }
.navbar-toggler { border-color: var(--b2) !important; }
.navbar-toggler-icon { filter: invert(1) opacity(0.7); }
.nav-link { color: var(--t2) !important; }
.nav-link:hover, .nav-link.active { color: var(--purple-3) !important; }

/* -- Cards ------------------------------------------------------ */
.card {
  background: var(--card) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r) !important;
  color: var(--t1) !important;
}
.card-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--b1) !important;
  font-weight: 600 !important;
  color: var(--t1) !important;
}
.card-footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--b1) !important;
}

/* -- Accordion -------------------------------------------------- */
.accordion-item {
  background: var(--card) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r-sm) !important;
  margin-bottom: 6px;
  overflow: hidden;
}
.accordion-button {
  background: var(--card) !important;
  color: var(--t1) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  font-family: var(--font) !important;
}
.accordion-button:not(.collapsed) {
  background: var(--surface) !important;
  color: var(--purple-3) !important;
}
.accordion-button::after { filter: invert(1) opacity(0.55); }
.accordion-body {
  background: var(--surface) !important;
  color: var(--t2) !important;
}

/* -- Modals (Bootstrap) ---------------------------------------- */
.modal-content {
  background: var(--surface) !important;
  border: 1px solid var(--b2) !important;
  border-radius: var(--r-lg) !important;
  color: var(--t1) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.65) !important;
}
.modal-header { border-bottom: 1px solid var(--b1) !important; }
.modal-footer { border-top: 1px solid var(--b1) !important; }
.modal-title { font-weight: 700 !important; color: var(--t1) !important; }
.modal-backdrop.show { opacity: 0.75 !important; background-color: #030208 !important; }

/* -- Badges ----------------------------------------------------- */
.badge { font-family: var(--font) !important; border-radius: var(--r-pill) !important; }
.badge.bg-primary   { background: var(--purple-dim) !important; color: var(--purple-3) !important; border: 1px solid rgba(124,58,237,0.3) !important; }
.badge.bg-success   { background: rgba(16,185,129,0.15) !important; color: #34d399 !important; }
.badge.bg-danger    { background: rgba(239,68,68,0.15)  !important; color: #fca5a5 !important; }
.badge.bg-warning   { background: var(--gold-dim) !important; color: var(--gold) !important; }
.badge.bg-secondary { background: var(--b1) !important; color: var(--t3) !important; }
.badge.bg-info      { background: var(--cyan-dim) !important; color: var(--cyan) !important; }

/* -- Tables ----------------------------------------------------- */
.table {
  color: var(--t2) !important;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--surface);
  --bs-table-hover-bg: var(--card-h);
  --bs-table-border-color: var(--b1);
}
.table thead th {
  color: var(--t4) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--b2) !important;
}
.table td, .table th { border-color: var(--b1) !important; }

/* -- Alerts ----------------------------------------------------- */
.alert { border-radius: var(--r) !important; font-size: 0.9rem !important; }
.alert-primary  { background: var(--purple-dim) !important; border-color: rgba(124,58,237,0.3) !important; color: var(--purple-3) !important; }
.alert-success  { background: rgba(16,185,129,0.12) !important; border-color: rgba(16,185,129,0.3) !important; color: #34d399 !important; }
.alert-danger   { background: rgba(239,68,68,0.12) !important; border-color: rgba(239,68,68,0.3) !important; color: #fca5a5 !important; }
.alert-warning  { background: var(--gold-dim) !important; border-color: rgba(245,158,11,0.3) !important; color: var(--gold) !important; }
.alert-info     { background: var(--cyan-dim) !important; border-color: rgba(34,211,238,0.3) !important; color: var(--cyan) !important; }

/* -- Pagination ------------------------------------------------- */
.page-link {
  background: var(--card) !important;
  border-color: var(--b2) !important;
  color: var(--t2) !important;
}
.page-link:hover { background: var(--card-h) !important; color: var(--purple-3) !important; }
.page-item.active .page-link { background: var(--purple) !important; border-color: var(--purple) !important; color: #fff !important; }
.page-item.disabled .page-link { background: var(--surface) !important; color: var(--t4) !important; }

/* -- Offcanvas / Drawer ---------------------------------------- */
.offcanvas {
  background: var(--surface) !important;
  border-color: var(--b2) !important;
}
.offcanvas-header { border-bottom: 1px solid var(--b1) !important; }
.offcanvas-title { color: var(--t1) !important; font-weight: 700 !important; }

/* -- List groups ------------------------------------------------ */
.list-group-item {
  background: var(--card) !important;
  border-color: var(--b1) !important;
  color: var(--t2) !important;
  transition: background var(--t-fast), color var(--t-fast);
}
.list-group-item:hover { background: var(--card-h) !important; color: var(--t1) !important; }
.list-group-item.active { background: var(--purple) !important; border-color: var(--purple) !important; color: #fff !important; }

/* -- Progress --------------------------------------------------- */
.progress {
  background: var(--b1) !important;
  border-radius: var(--r-pill) !important;
  height: 6px !important;
}
.progress-bar { background: var(--g-primary) !important; }

/* -- Toasts / Spinners ----------------------------------------- */
.toast {
  background: var(--card) !important;
  border-color: var(--b2) !important;
  color: var(--t1) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
.toast-header {
  background: var(--surface) !important;
  color: var(--t2) !important;
  border-bottom: 1px solid var(--b1) !important;
}
.spinner-border { color: var(--purple) !important; }
.spinner-grow   { color: var(--purple) !important; }

/* -- Tabs ------------------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--b1) !important; }
.nav-tabs .nav-link {
  color: var(--t3) !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
  font-weight: 500 !important;
}
.nav-tabs .nav-link:hover { color: var(--t1) !important; background: var(--b1) !important; }
.nav-tabs .nav-link.active {
  background: var(--card) !important;
  border-color: var(--b2) var(--b2) var(--card) !important;
  color: var(--purple-3) !important;
}

/* -- Pills nav -------------------------------------------------- */
.nav-pills .nav-link { color: var(--t3) !important; border-radius: var(--r-pill) !important; }
.nav-pills .nav-link:hover { background: var(--b1) !important; color: var(--t1) !important; }
.nav-pills .nav-link.active { background: var(--purple) !important; color: #fff !important; }

/* -- Tooltips --------------------------------------------------- */
.tooltip-inner {
  background: var(--surface) !important;
  color: var(--t1) !important;
  border: 1px solid var(--b2) !important;
  border-radius: var(--r-sm) !important;
  font-size: 0.8rem !important;
  padding: 6px 12px !important;
}

/* -- Misc ------------------------------------------------------- */
hr { border-color: var(--b1) !important; opacity: 1 !important; }
.text-muted     { color: var(--t4) !important; }
.text-secondary { color: var(--t3) !important; }
.text-primary   { color: var(--purple-3) !important; }
.bg-body        { background: var(--bg) !important; }
.bg-body-secondary { background: var(--surface) !important; }
.bg-primary     { background: var(--purple) !important; }

/* -- Settings page ---------------------------------------------- */
.sp-settings-page {
  padding: 40px clamp(20px, 5vw, 64px) 100px;
  max-width: 800px;
  margin: 0 auto;
  min-height: 100vh;
}
.sp-settings-header {
  margin-bottom: 36px;
}
.sp-settings-header__title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color: var(--t1);
  letter-spacing: -0.03em;
  margin: 8px 0 6px;
}
.sp-settings-header__sub {
  font-size: 0.95rem;
  color: var(--t4);
}
.sp-settings-accordion {
  display: flex;
  flex-direction: column;
  gap: 4px;
}