/*
 * Groove brand theme — recolors the Stisla admin template's default primary
 * (#6777ef) to the app's teal accent (#008080). Loaded last so it wins the
 * cascade. Pure color overrides — no layout changes.
 */

:root {
  --groove-teal: #008080;
  --groove-teal-dark: #006b6b;
  --groove-teal-soft: rgba(0, 128, 128, 0.15);
}

/* ---- Buttons ---- */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--groove-teal) !important;
  border-color: var(--groove-teal) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--groove-teal-dark) !important;
  border-color: var(--groove-teal-dark) !important;
  box-shadow: none !important;
}
.btn-outline-primary {
  color: var(--groove-teal) !important;
  border-color: var(--groove-teal) !important;
}
.btn-outline-primary:hover {
  background-color: var(--groove-teal) !important;
  color: #fff !important;
}

/* ---- Text / backgrounds / badges ---- */
.text-primary { color: var(--groove-teal) !important; }
.bg-primary { background-color: var(--groove-teal) !important; }
.badge-primary { background-color: var(--groove-teal) !important; }

/* ---- Links ---- */
a { color: var(--groove-teal); }
a:hover { color: var(--groove-teal-dark); }

/* ---- Sidebar active / hover (Stisla) ---- */
.main-sidebar .sidebar-menu li.active > a,
.main-sidebar .sidebar-menu li a:hover {
  background-color: var(--groove-teal) !important;
  color: #fff !important;
}
.main-sidebar .sidebar-menu li.active > a i,
.main-sidebar .sidebar-menu li a:hover i,
.main-sidebar .sidebar-menu li.active > a .badge {
  color: #fff !important;
}
.sidebar-brand a { color: var(--groove-teal) !important; }

/* ---- Form focus ---- */
.form-control:focus,
.custom-select:focus {
  border-color: var(--groove-teal) !important;
  box-shadow: 0 0 0 0.2rem var(--groove-teal-soft) !important;
}

/* ---- Pagination ---- */
.page-item.active .page-link {
  background-color: var(--groove-teal) !important;
  border-color: var(--groove-teal) !important;
}
.page-link { color: var(--groove-teal); }

/* ---- Checkbox / radio / switches ---- */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--groove-teal) !important;
  border-color: var(--groove-teal) !important;
}

/* ---- Tabs / pills ---- */
.nav-pills .nav-link.active { background-color: var(--groove-teal) !important; }

/* ---- Misc primary accents ---- */
.spinner-border.text-primary,
.spinner-grow.text-primary { color: var(--groove-teal) !important; }
.progress-bar { background-color: var(--groove-teal); }
.dropdown-item.active,
.dropdown-item:active { background-color: var(--groove-teal); }