/* Hostsawa colours for the WHMCS client area (theme hostsawa, based on twenty-one).
   Hand-written source: scripts/whmcs-chrome.mjs copies it to assets/hs/whmcs.css, which includes/head.tpl loads
   after the theme's own stylesheets. It restyles WHMCS's pages; the website header and footer are styled by hs.css,
   which is scoped to .hs. Twenty-one's primary is #336699 throughout, so these rules follow its own selectors. */
:root {
  --hs-brand: #0050b0;        /* buttons, links, the client-area bar */
  --hs-brand-dark: #003e8a;   /* hover / active */
  --hs-brand-darker: #003172;
  --hs-navy: #001040;         /* the logged-in top bar */
  --hs-tint: #f3f6fb;         /* page background */
  --hs-line: #e3e8f0;
  --hs-ink: #1b2436;
  --hs-ring: rgba(0, 80, 176, .25);
  --hs-accent: #008a00;       /* green, on its own only: the cart count */
}

/* ---- Type: the same two families as the websites (hs.css loads the font files) ---- */
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--hs-ink); }
h1, h2, h3, h4, h5, h6, .card-title, .panel-title, .h1, .h2, .h3, .h4, .h5 {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; font-weight: 700; letter-spacing: -.01em;
}

/* ---- Page background ---- */
.primary-bg-color { background-color: var(--hs-tint); }
.master-breadcrumb { background-color: #e9eef7; border-bottom: 1px solid var(--hs-line); }

/* ---- Links ---- */
a { color: var(--hs-brand); }
a:hover { color: var(--hs-brand-dark); }
.btn-link { color: var(--hs-brand); }
.btn-link:hover { color: var(--hs-brand-dark); }

/* ---- The client-area bar: Hostsawa blue, white items (Jeff, 31 Oct) ---- */
header.header .main-navbar-wrapper { background-color: var(--hs-brand); }
header.header .main-navbar-wrapper .navbar-collapse { padding: .5rem 0; }   /* 56px bar, as on hostnali.com (Jeff, 31 Oct) */
/* Jeff's includes/navbar.tpl renders the menu as bare <a class="pr-4">, not .nav-link, so these rules match
   any direct child anchor — keyed to .nav-link they silently did nothing and the bar stayed 41px tall. */
header.header .main-navbar-wrapper .navbar-nav > li > a { padding-top: .5rem; padding-bottom: .5rem; }
header.header .main-navbar-wrapper .toolbar { align-self: center; }
/* Bootstrap zeroes a .container inside a .navbar, and the bar itself has no padding, so below xl the bar
   needs its own gutter or the menu and the cart sit against the edge of the screen */
@media (max-width: 1199.98px) {
  header.header .main-navbar-wrapper > .container { padding-left: 1rem; padding-right: 1rem; }
  header.header .main-navbar-wrapper .navbar-collapse { padding: .35rem 0 .6rem; }
  header.header .main-navbar-wrapper .navbar-nav > li > a { padding-left: 0; padding-right: 0; }
}
header.header .main-navbar-wrapper a,
header.header .main-navbar-wrapper .navbar-nav a,
header.header .main-navbar-wrapper .navbar-text,
header.header .main-navbar-wrapper .btn { color: #fff; }
header.header .main-navbar-wrapper .navbar-nav a { font-weight: 600; border-radius: 6px; }
header.header .main-navbar-wrapper .navbar-nav > li > a:hover,
header.header .main-navbar-wrapper .navbar-nav > li > a:focus,
header.header .main-navbar-wrapper .navbar-nav > li.show > a { background-color: rgba(255, 255, 255, .14); color: #fff; }
header.header .main-navbar-wrapper .navbar-nav > li.active > a { background-color: rgba(255, 255, 255, .2); color: #fff; }
header.header .main-navbar-wrapper .client-area-label { font-weight: 700; }
/* dropdowns stay light, so their items keep dark text */
header.header .main-navbar-wrapper .dropdown-menu { border: 0; box-shadow: 0 14px 34px rgba(0, 16, 64, .18); }
header.header .main-navbar-wrapper .dropdown-menu a { color: var(--hs-ink); }
header.header .main-navbar-wrapper .dropdown-menu a:hover { background-color: var(--hs-tint); color: var(--hs-brand); }
header.header .dropdown-item.active, header.header .dropdown-item:active { background-color: var(--hs-brand); color: #fff; }
/* cart and menu button sit in the blue bar */
header.header .main-navbar-wrapper .toolbar { margin-left: 1.5rem; }   /* clear of the Account link (Jeff, 31 Oct) */
header.header .main-navbar-wrapper .toolbar .nav-link { border-color: rgba(255, 255, 255, .45); color: #fff; padding: .45rem .8rem;
  overflow: visible; }   /* the theme clips .cart-btn, which cut the count off */
header.header .main-navbar-wrapper .toolbar .nav-link:hover { background-color: rgba(255, 255, 255, .14); color: #fff; }
/* A small round count on the corner, not a pill across the icon */
header.header .main-navbar-wrapper .toolbar .nav-link .badge {
  top: -7px; right: -7px; display: grid; place-items: center; min-width: 19px; height: 19px;
  padding: 0 4px; border-radius: 19px; background-color: var(--hs-accent); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1; opacity: 1;
}
@media (max-width: 1199.98px) { header.header .main-navbar-wrapper .toolbar { margin-left: 0; } }

/* ---- The logged-in bar above it ---- */
header.header .topbar { background-color: var(--hs-navy); }

/* ---- Buttons ---- */
.btn-primary, .btn-primary.disabled, .btn-primary:disabled {
  background-color: var(--hs-brand); border-color: var(--hs-brand); color: #fff;
}
.btn-primary:hover { background-color: var(--hs-brand-dark); border-color: var(--hs-brand-dark); color: #fff; }
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle { background-color: var(--hs-brand-darker); border-color: var(--hs-brand-darker); }
.btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 .2rem var(--hs-ring);
}
.btn-outline-primary, .btn-outline-primary.disabled, .btn-outline-primary:disabled { color: var(--hs-brand); border-color: var(--hs-brand); }
.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 { background-color: var(--hs-brand); border-color: var(--hs-brand); color: #fff; }

/* ---- Utilities and components that carry the primary colour ---- */
.bg-primary { background-color: var(--hs-brand) !important; }
.text-primary { color: var(--hs-brand) !important; }
.border-primary { border-color: var(--hs-brand) !important; }
.badge-primary { background-color: var(--hs-brand); color: #fff; }
.progress-bar { background-color: var(--hs-brand); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--hs-brand); color: #fff; }
.list-group-item.active { background-color: var(--hs-brand); border-color: var(--hs-brand); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--hs-brand); }
.page-link { color: var(--hs-brand); }
.page-item.active .page-link { background-color: var(--hs-brand); border-color: var(--hs-brand); color: #fff; }
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus,
.pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus {
  background-color: var(--hs-brand); border-color: var(--hs-brand); color: #fff;
}
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  background-color: var(--hs-brand); border-color: var(--hs-brand);
}
.custom-range::-webkit-slider-thumb { background-color: var(--hs-brand); }
.custom-range::-moz-range-thumb { background-color: var(--hs-brand); }
.custom-range::-ms-thumb { background-color: var(--hs-brand); }
.form-control:focus, .custom-select:focus { border-color: #7aa6dd; box-shadow: 0 0 0 .2rem var(--hs-ring); }
.input-group .btn-reveal-pw:hover, .input-group .btn-reveal-pw:active { color: var(--hs-brand); }
/* order/invoice status chips that used the primary colour */
.status-onhold, .status-payment-pending, .status-delivered { background-color: var(--hs-brand); }
.domain-pricing .tld-pricing-header div:nth-child(odd) { border-color: var(--hs-brand); }

/* ---- Cards, panels and the sidebar ---- */
.card, .panel { border-color: var(--hs-line); border-radius: 12px; }
.card-header, .panel-heading { background-color: #fff; border-bottom: 1px solid var(--hs-line); }
.sidebar .list-group-item.active, .sidebar .list-group-item.active:hover, .sidebar .list-group-item.active:focus {
  background-color: var(--hs-brand); border-color: var(--hs-brand); color: #fff;
}
.sidebar .list-group-item.active .badge { color: var(--hs-brand); }
.table thead th { border-bottom-color: var(--hs-line); color: var(--hs-ink); }

/* ---- Green is the accent only, never a second brand colour (the websites' rule) ---- */
.btn-success { background-color: #008a00; border-color: #008a00; }
.btn-success:hover { background-color: #007000; border-color: #007000; }
.text-success { color: #008a00 !important; }