/* MoyerMade Digital | WHMCS Twenty-One child theme
 * Branding only: retain parent templates, layout, and semantic status colors.
 * Selectors verified against WHMCS/templates-twenty-one.
 */

:root {
  --mmd-cobalt: #3158ed;
  --mmd-cobalt-hover: #2544c7;
  --mmd-cobalt-active: #1d36a6;
  --mmd-ink: #141723;
  --mmd-coral: #ff805e;
  --mmd-page: #f5f7fb;
  --mmd-subtle: #eef2f8;
  --mmd-white: #ffffff;
}

body.primary-bg-color {
  color: var(--mmd-ink);
  background-color: var(--mmd-page);
}

/* Parent white cards and the existing responsive header stay in place. */
header.header {
  background-color: var(--mmd-white);
}

header.header .topbar,
footer.footer {
  background-color: var(--mmd-ink);
}

header.header .main-navbar-wrapper {
  border-bottom: 2px solid var(--mmd-cobalt);
}

.master-breadcrumb {
  background-color: var(--mmd-subtle);
}

/* Coral is decorative; it is not used for small text on white. */
footer.footer {
  border-top: 3px solid var(--mmd-coral);
}

/* Low-specificity link rules preserve semantic buttons, alerts, and badges. */
a,
.btn-link,
.page-link {
  color: var(--mmd-cobalt);
}

a:hover,
a:focus,
.btn-link:hover,
.btn-link:focus,
.page-link:hover,
.page-link:focus {
  color: var(--mmd-cobalt-hover);
}

.btn-primary {
  color: var(--mmd-white);
  background-color: var(--mmd-cobalt);
  border-color: var(--mmd-cobalt);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
  color: var(--mmd-white);
  background-color: var(--mmd-cobalt-hover);
  border-color: var(--mmd-cobalt-hover);
}

.btn-primary.disabled,
.btn-primary:disabled {
  color: var(--mmd-white);
  background-color: var(--mmd-cobalt);
  border-color: var(--mmd-cobalt);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: var(--mmd-white);
  background-color: var(--mmd-cobalt-active);
  border-color: var(--mmd-cobalt-active);
}

.btn-outline-primary {
  color: var(--mmd-cobalt);
  border-color: var(--mmd-cobalt);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  color: var(--mmd-white);
  background-color: var(--mmd-cobalt);
  border-color: var(--mmd-cobalt);
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  color: var(--mmd-cobalt);
  background-color: transparent;
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus,
.btn-outline-primary:focus,
.btn-outline-primary.focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(49, 88, 237, 0.28);
}

.page-item.active .page-link,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus,
.dropdown-item.active,
.dropdown-item:active,
header.header .dropdown-item.active,
header.header .dropdown-item:active,
.badge-primary {
  color: var(--mmd-white);
  background-color: var(--mmd-cobalt);
  border-color: var(--mmd-cobalt);
}

/* Match Bootstrap's existing primary utility specificity. */
.text-primary {
  color: var(--mmd-cobalt) !important;
}

a.text-primary:hover,
a.text-primary:focus {
  color: var(--mmd-cobalt-hover) !important;
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--mmd-cobalt);
  box-shadow: 0 0 0 0.2rem rgba(49, 88, 237, 0.18);
}

/* Keep existing validation styles; add a visible keyboard focus perimeter. */
a[href]:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--mmd-cobalt);
  outline-offset: 2px;
}