/* ==========================================================================
   Brand primary — RED (#971110)
   Loaded LAST (after style.css / color-1.css / responsive.css / attendance.css
   / erp-sidebar.css) so it overrides the Cuba theme's hardcoded teal #006666.

   Rule of thumb: RED is the PRIMARY ACTION colour — it belongs on buttons,
   links, active/selected states and small accents. It is NOT a text colour;
   headings, values and body copy stay dark (#1e293b / slate). Do not add
   `color:#971110` to reading text here.
   ========================================================================== */

:root { --brand: #971110; --brand-hover: #830f0e; --brand-ink: #181818; }

/* ── Primary buttons ─────────────────────────────────────────────────────── */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not([disabled]):not(.disabled).active,
.btn-primary:not([disabled]):not(.disabled):active {
  background-color: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ── Outline / ghost primary ─────────────────────────────────────────────── */
.btn-outline-primary {
  color: var(--brand) !important;
  border-color: var(--brand) !important;
  background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

/* ── Primary accents (badges / backgrounds / links) ──────────────────────── */
.badge.badge-primary,
.badge.bg-primary,
.bg-primary { background-color: var(--brand) !important; }

.text-primary { color: var(--brand) !important; }

a { color: var(--brand); }
a:hover { color: var(--brand-hover); }

/* Form controls focus ring picks up the brand */
.form-control:focus,
.form-select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 .15rem rgba(151, 17, 16, .15) !important;
}

/* Checkboxes / radios / switches checked state */
.form-check-input:checked {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* Spinners / links that used the theme teal utility */
.spinner-border.text-primary,
.spinner-border.text-theme { color: var(--brand) !important; }

/* ── Filter / Create buttons — RED system-wide ───────────────────────────── */
.btn-filter.apply,
.btn-primary-sm {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.btn-filter.apply:hover,
.btn-primary-sm:hover {
  background: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
  color: #fff !important;
}

/* ── Pagination — RED system-wide (custom .pg-btn + Bootstrap .page-link) ── */
.pg-btn.active {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.pg-btn:hover { border-color: var(--brand) !important; color: var(--brand) !important; }

.pagination .page-item.active .page-link,
.page-item.active .page-link {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.pagination .page-link,
.page-link { color: var(--brand) !important; }
.pagination .page-link:hover,
.page-link:hover { color: var(--brand-hover) !important; border-color: var(--brand) !important; }