/* ============================================================
   CubroSoft branding for the WHMCS "twenty-one" client theme.
   Upload to: templates/twenty-one/css/custom.css
   The theme loads this file automatically after its own styles.
   Brand: red #c90101 (hover #9c0101), navy #101f28,
   fonts Poppins (headings) / Inter (body) — matching cubrosoft.com
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');

:root {
  --cubro-red: #c90101;
  --cubro-red-dark: #9c0101;
  --cubro-red-light: #ff3b3b;
  --cubro-navy: #101f28;
}

/* ---------- Typography ---------- */
body {
  font-family: 'Inter', 'Open Sans', system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.card-title, .home-shortcuts, .panel-title {
  font-family: 'Poppins', 'Inter', sans-serif;
}

/* ---------- Links ---------- */
a,
.btn-link,
.text-primary {
  color: var(--cubro-red) !important;
}

a:hover,
.btn-link:hover {
  color: var(--cubro-red-dark) !important;
}

/* Keep nav/menu/breadcrumb links neutral, not red */
.navbar a,
.header a,
.master-breadcrumb a,
.footer a,
.btn:not(.btn-link),
.dropdown-menu a,
.nav-tabs a,
.list-group-item {
  color: inherit !important;
}

/* ---------- Primary buttons: #369 blue -> cubrosoft red ---------- */
.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--cubro-red) !important;
  border-color: var(--cubro-red) !important;
  color: #fff !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(--cubro-red-dark) !important;
  border-color: var(--cubro-red-dark) !important;
  color: #fff !important;
}

.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(201, 1, 1, 0.3) !important;
}

.btn-outline-primary {
  color: var(--cubro-red) !important;
  border-color: var(--cubro-red) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: var(--cubro-red) !important;
  border-color: var(--cubro-red) !important;
  color: #fff !important;
}

/* ---------- Other bootstrap primaries ---------- */
.bg-primary,
.badge-primary {
  background-color: var(--cubro-red) !important;
}

.border-primary {
  border-color: var(--cubro-red) !important;
}

.page-item.active .page-link {
  background-color: var(--cubro-red) !important;
  border-color: var(--cubro-red) !important;
}

.page-link {
  color: var(--cubro-red);
}

.progress-bar {
  background-color: var(--cubro-red);
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--cubro-red) !important;
  border-color: var(--cubro-red) !important;
}

.form-control:focus {
  border-color: rgba(201, 1, 1, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(201, 1, 1, 0.15);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--cubro-red) !important;
}

.nav-tabs .nav-link.active {
  border-bottom-color: var(--cubro-red);
  color: var(--cubro-red) !important;
}

/* Spinners / loaders */
.spinner-border,
.text-info {
  color: var(--cubro-red) !important;
}

/* ---------- Header ---------- */
.header {
  border-bottom: 3px solid var(--cubro-red);
}

.header .logo img {
  max-height: 46px;
}

/* ---------- Breadcrumb bar ---------- */
.master-breadcrumb {
  background-color: #f6f7f9;
}

/* ---------- Footer: grey -> cubrosoft navy ---------- */
.footer,
footer.footer,
#footer {
  background-color: var(--cubro-navy) !important;
  color: #eef1f3 !important;
}

.footer a {
  color: #aeb9c0 !important;
}

.footer a:hover {
  color: #ffffff !important;
}

/* ---------- Misc polish ---------- */
.card,
.panel {
  border-radius: 12px;
}

.btn {
  border-radius: 8px;
}

.alert-info {
  border-left: 4px solid var(--cubro-red);
}