/* ============================================================
   HAXHOST — "Night match" WHMCS client-area skin
   Child theme of Twenty-One; this file is auto-included AFTER
   all.min.css + theme.min.css via {assetExists file="custom.css"}.

   Brand ground = floodlit pitch (near-black, green cast). Chalk
   lines structure the page. Team red/blue appear only where the
   game does. White is the accent — the ball.
   Source of truth: apps/landing/index.html · same identity as
   the panel at manage.haxhost.com.
   ============================================================ */

/* ---- brand display face (same subset the landing embeds) ---- */
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/saira-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/saira-condensed-800.woff2') format('woff2');
}

:root {
  --hh-pitch: #0d1310;      /* page ground */
  --hh-pitch-2: #121a15;    /* raised surface */
  --hh-pitch-3: #17211b;    /* hover surface */
  --hh-grass: #182920;
  --hh-chalk: #edf2e8;      /* text + lines */
  --hh-chalk-dim: #93a296;  /* secondary text */
  --hh-line: rgba(237, 242, 232, 0.13);
  --hh-line-strong: rgba(237, 242, 232, 0.28);
  --hh-red: #e4572e;        /* home kit — also danger */
  --hh-red-soft: rgba(228, 87, 46, 0.14);
  --hh-blue: #4e8fe0;       /* away kit — links/info */
  --hh-blue-soft: rgba(78, 143, 224, 0.14);
  --hh-green: #35c07e;      /* success on the green-cast ground */
  --hh-green-soft: rgba(53, 192, 126, 0.15);
  --hh-amber: #d9a544;
  --hh-amber-soft: rgba(217, 165, 68, 0.15);
  --hh-ball: #ffffff;       /* primary CTA */
  --hh-ink: #0d1310;        /* text on the ball */
  --hh-display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  color-scheme: dark;
}

/* ============================ ground ============================ */

html { background-color: var(--hh-pitch); }
body,
body.primary-bg-color {
  background-color: var(--hh-pitch) !important;
  color: var(--hh-chalk);
}
hr { border-top-color: var(--hh-line); }
a { color: var(--hh-blue); }
a:hover { color: #74a9e8; }
::selection { background: var(--hh-red); color: #fff; }
.text-muted, .text-secondary { color: var(--hh-chalk-dim) !important; }
.text-dark, .text-black { color: var(--hh-chalk) !important; }
.bg-light, .bg-white { background-color: var(--hh-pitch-2) !important; }
.border, .border-top, .border-right, .border-bottom, .border-left {
  border-color: var(--hh-line) !important;
}

h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--hh-display);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  font-weight: 800;
  color: var(--hh-chalk);
}
h4, h5, h6, .h4, .h5, .h6 { color: var(--hh-chalk); }

/* ============================ header ============================ */

#header .topbar {
  background: var(--hh-pitch-2);
  border-bottom: 1px solid var(--hh-line);
}
#header .topbar .btn { color: var(--hh-chalk-dim); }
#header .topbar .btn:hover { color: var(--hh-chalk); }
#header .topbar .input-group-text {
  background: transparent;
  border-color: var(--hh-line);
  color: var(--hh-chalk-dim);
}
#header .topbar .btn-active-client {
  background: var(--hh-pitch-3);
  border-color: var(--hh-line);
  color: var(--hh-chalk);
}

#header .navbar,
#header .navbar-light {
  background: var(--hh-pitch-2) !important;
  border-bottom: 1px solid var(--hh-line);
}
#header .navbar-brand {
  font-family: var(--hh-display);
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--hh-chalk) !important;
}
#header .navbar-brand .logo-img { max-height: 36px; }

/* main nav — condensed caps like the panel, one surface step above the page */
#header .main-navbar-wrapper {
  background: var(--hh-pitch-2) !important;
  border-bottom: 1px solid var(--hh-line);
}
#header .navbar-nav .nav-link,
#header .navbar-nav .nav-item > a {
  font-family: var(--hh-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  color: rgba(237, 242, 232, 0.85) !important;
}
#header .navbar-nav .nav-link:hover,
#header .navbar-nav .nav-item.active > a,
#header .navbar-nav .nav-item > a:hover {
  color: #ffffff !important;
}
#header .search .form-control {
  background: var(--hh-pitch-2);
  border-color: var(--hh-line);
  color: var(--hh-chalk);
}
#header .search .btn-default {
  background: var(--hh-pitch-2);
  border-color: var(--hh-line);
  color: var(--hh-chalk-dim);
}
#header .cart-btn { color: var(--hh-chalk-dim); }

/* ============================ footer ============================ */

.footer {
  background: var(--hh-pitch-2) !important;
  border-top: 1px solid var(--hh-line);
  color: var(--hh-chalk-dim) !important;
}
.footer a { color: var(--hh-chalk-dim); }
.footer a:hover { color: var(--hh-chalk); }
.footer .copyright { color: var(--hh-chalk-dim); }

/* =========================== surfaces =========================== */

.card, .modal-content, .popover, .dropdown-menu, .list-group-item,
.panel, .well, .jumbotron {
  background-color: var(--hh-pitch-2);
  border-color: var(--hh-line);
  color: var(--hh-chalk);
}
.card { border-radius: 14px; }
.card .card-header, .card .card-footer {
  background: transparent;
  border-color: var(--hh-line);
}
.card .card-header {
  font-family: var(--hh-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--hh-chalk);
}
/* twenty-one's colored top-accent cards → one chalk accent */
[class*='card-accent-'] { border-top-color: var(--hh-line-strong) !important; }

.list-group-item { border-color: var(--hh-line); }
.list-group-item.active {
  background: var(--hh-pitch-3);
  border-color: var(--hh-line-strong);
  color: var(--hh-chalk);
}
.list-group-item-action:hover, .list-group-item-action:focus {
  background: var(--hh-pitch-3);
  color: var(--hh-chalk);
}

/* dropdown menus — one step lighter than their bar, and legible items (the
   parent theme paints nav dropdown links #444 with higher specificity) */
.dropdown-menu {
  background-color: var(--hh-pitch-3);
  border-color: var(--hh-line-strong);
}
.dropdown-menu .dropdown-item,
.dropdown-menu a,
#header .dropdown-menu a {
  color: var(--hh-chalk) !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
#header .dropdown-menu a:hover {
  background: rgba(237, 242, 232, 0.08) !important;
  color: #ffffff !important;
}
.dropdown-divider { border-color: var(--hh-line); }

.modal-header, .modal-footer { border-color: var(--hh-line); }
.close { color: var(--hh-chalk); text-shadow: none; }

/* ============================ tables ============================ */

.table { color: var(--hh-chalk); }
.table th, .table td { border-color: var(--hh-line); }
.table thead th {
  border-bottom-color: var(--hh-line-strong);
  font-family: var(--hh-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hh-chalk-dim);
}
.table-striped tbody tr:nth-of-type(odd) { background: rgba(237, 242, 232, 0.03); }
.table-hover tbody tr:hover { background: var(--hh-pitch-3); color: var(--hh-chalk); }
.table .thead-light th { background: var(--hh-pitch-3); color: var(--hh-chalk-dim); }
div.dataTables_wrapper .dataTables_length select,
div.dataTables_wrapper .dataTables_filter input {
  background: var(--hh-pitch);
  border: 1px solid var(--hh-line);
  color: var(--hh-chalk);
}

/* ============================ forms ============================ */

.form-control, .custom-select, select, textarea {
  background-color: var(--hh-pitch) !important;
  border-color: var(--hh-line-strong) !important;
  color: var(--hh-chalk) !important;
  border-radius: 10px;
}
.form-control:focus, .custom-select:focus {
  border-color: var(--hh-blue) !important;
  box-shadow: 0 0 0 0.15rem var(--hh-blue-soft);
}
.form-control::placeholder { color: var(--hh-chalk-dim); opacity: 0.7; }
.form-control:disabled, .form-control[readonly] { background-color: var(--hh-pitch-3) !important; }
.input-group-text {
  background: var(--hh-pitch-3);
  border-color: var(--hh-line-strong);
  color: var(--hh-chalk-dim);
}
label, .form-control-label, .col-form-label { color: var(--hh-chalk); }
/* Bootstrap's custom file input — the label IS the field and the "Browse"
   affordance is its ::after, neither of which .form-control reaches. */
.custom-file-label {
  background-color: var(--hh-pitch) !important;
  border-color: var(--hh-line-strong) !important;
  color: var(--hh-chalk-dim) !important;
  border-radius: 10px;
}
.custom-file-label::after {
  background-color: var(--hh-pitch-3) !important;
  border-left: 1px solid var(--hh-line-strong);
  color: var(--hh-chalk) !important;
}
.custom-file-input:focus ~ .custom-file-label {
  border-color: var(--hh-blue) !important;
  box-shadow: 0 0 0 0.15rem var(--hh-blue-soft);
}
.custom-control-label::before {
  background-color: var(--hh-pitch);
  border-color: var(--hh-line-strong);
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--hh-blue);
  border-color: var(--hh-blue);
}

/* The bootstrap-markdown editor (ticket open + ticket reply). Twenty-One's
   theme.min.css nails it white with !important at a higher specificity than
   our bare `textarea` rule, so the body stayed white while the text went
   chalk — i.e. invisible typing. Match their specificity to win. */
.md-editor {
  border-color: var(--hh-line-strong);
  border-radius: 10px;
  overflow: hidden;
}
.md-editor > .btn-toolbar,
.md-editor .md-footer {
  background-color: var(--hh-pitch-2) !important;
  border-color: var(--hh-line);
}
.md-editor > textarea.markdown-editor,
.md-editor > .md-preview {
  background-color: var(--hh-pitch) !important;
  color: var(--hh-chalk) !important;
  border-top-color: var(--hh-line) !important;
  border-bottom-color: var(--hh-line) !important;
}
.md-editor > textarea.markdown-editor::placeholder { color: var(--hh-chalk-dim); }
.md-editor > .md-preview { color: var(--hh-chalk); }
div.md-editor.active { border-color: var(--hh-blue); }
.markdown-editor-status { color: var(--hh-chalk-dim); }

/* ============================ buttons ============================ */

.btn {
  border-radius: 999px;
  font-family: var(--hh-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.btn:active { transform: scale(0.97); }

/* primary = the ball */
.btn-primary, .btn-styled-color {
  background-color: var(--hh-ball) !important;
  border-color: var(--hh-ball) !important;
  color: var(--hh-ink) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):active {
  background-color: #e9ede7 !important;
  border-color: #e9ede7 !important;
  color: var(--hh-ink) !important;
}
.btn-outline-primary {
  border-color: var(--hh-line-strong) !important;
  color: var(--hh-chalk) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: var(--hh-pitch-3) !important;
  color: var(--hh-chalk) !important;
}
.btn-default, .btn-secondary, .btn-light {
  background: var(--hh-pitch-3) !important;
  border-color: var(--hh-line) !important;
  color: var(--hh-chalk) !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover {
  background: var(--hh-grass) !important;
  color: var(--hh-chalk) !important;
}
.btn-success {
  background: var(--hh-green-soft) !important;
  border-color: rgba(53, 192, 126, 0.4) !important;
  color: var(--hh-green) !important;
}
.btn-success:hover { background: var(--hh-green) !important; color: var(--hh-ink) !important; }
.btn-danger {
  background: var(--hh-red-soft) !important;
  border-color: rgba(228, 87, 46, 0.4) !important;
  color: var(--hh-red) !important;
}
.btn-danger:hover { background: var(--hh-red) !important; color: #fff !important; }
.btn-info {
  background: var(--hh-blue-soft) !important;
  border-color: rgba(78, 143, 224, 0.4) !important;
  color: var(--hh-blue) !important;
}
.btn-info:hover { background: var(--hh-blue) !important; color: #fff !important; }
.btn-link { color: var(--hh-blue); text-transform: none; letter-spacing: 0; font-family: inherit; }

/* ====================== badges / labels ====================== */

.badge, .label {
  border-radius: 999px;
  font-family: var(--hh-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.badge-info { background: var(--hh-blue-soft); color: var(--hh-blue); }
.badge-success, .status-active { background: var(--hh-green-soft); color: var(--hh-green); }
.badge-danger { background: var(--hh-red-soft); color: var(--hh-red); }
.badge-warning { background: var(--hh-amber-soft); color: var(--hh-amber); }
.badge-secondary, .badge-light { background: var(--hh-pitch-3); color: var(--hh-chalk-dim); }

/* ============================ alerts ============================ */

.alert { border-radius: 12px; border: 1px solid; }
.alert a { color: inherit; text-decoration: underline; font-weight: 600; }
.alert-success { background: var(--hh-green-soft); border-color: rgba(53, 192, 126, 0.4); color: var(--hh-green); }
.alert-danger, .alert-error { background: var(--hh-red-soft); border-color: rgba(228, 87, 46, 0.4); color: var(--hh-red); }
.alert-warning { background: var(--hh-amber-soft); border-color: rgba(217, 165, 68, 0.4); color: var(--hh-amber); }
.alert-info { background: var(--hh-blue-soft); border-color: rgba(78, 143, 224, 0.4); color: var(--hh-blue); }

/* ================== breadcrumbs / pagination ================== */

.breadcrumb { background: transparent; padding-left: 0; }
.breadcrumb-item a { color: var(--hh-chalk-dim); }
.breadcrumb-item.active { color: var(--hh-chalk); }
.page-item .page-link {
  background: var(--hh-pitch-2);
  border-color: var(--hh-line);
  color: var(--hh-chalk-dim);
}
.page-item.active .page-link {
  background: var(--hh-ball);
  border-color: var(--hh-ball);
  color: var(--hh-ink);
}
.page-item .page-link:hover { background: var(--hh-pitch-3); color: var(--hh-chalk); }

/* ======================= tabs / pills ======================= */

.nav-tabs { border-bottom-color: var(--hh-line); }
.nav-tabs .nav-link { color: var(--hh-chalk-dim); }
.nav-tabs .nav-link.active {
  background: var(--hh-pitch-2);
  border-color: var(--hh-line) var(--hh-line) var(--hh-pitch-2);
  color: var(--hh-chalk);
}
.nav-pills .nav-link { border-radius: 999px; color: var(--hh-chalk-dim); }
.nav-pills .nav-link.active { background: var(--hh-pitch-3); color: var(--hh-chalk); }

/* ==================== client-area homepage ==================== */

/* breadcrumb strip under the nav (pale #e9ecef in the parent) */
.master-breadcrumb {
  background: var(--hh-pitch-3) !important;
  border-bottom: 1px solid var(--hh-line);
}
.master-breadcrumb .breadcrumb-item a { color: var(--hh-chalk-dim); }
.master-breadcrumb .breadcrumb-item a:hover { color: var(--hh-chalk); }
.master-breadcrumb .breadcrumb-item.active { color: var(--hh-chalk); }

/* "How can we help" / "Your account" icon tiles (white cards in the parent) */
.action-icon-btns a {
  background: var(--hh-pitch-2) !important;
  border: 1px solid var(--hh-line) !important;
  border-radius: 14px;
  color: var(--hh-chalk) !important;
}
.action-icon-btns a:hover {
  background: var(--hh-pitch-3) !important;
  border-color: var(--hh-line-strong) !important;
}
.action-icon-btns .ico-container i { color: var(--hh-chalk-dim) !important; }

.card-columns.home .card-body i,
.home-shortcuts i { color: var(--hh-chalk-dim); }
.pricing-card-title { font-size: 1.5rem; }

/* tiles row of icons under home ("home-shortcuts") */
.home-shortcuts {
  background: var(--hh-pitch-2);
  border-color: var(--hh-line);
}
.home-shortcuts .list-group-item { background: transparent; }

/* ======================== login/register ======================== */

.mw-540 { border-radius: 16px; }
.providerLinkingFeedback + form .card,
.login-form .card { background: var(--hh-pitch-2); }

/* ================== standard_cart order form ================== */

/* the cart bundles its own light styles; pull its surfaces onto the pitch */
.view-cart-items, .view-cart-items .item,
.order-summary, .summary-container,
.sidebar-collapsed .card, .cart-body .card,
#order-standard_cart .product-info,
#order-standard_cart .products .product,
#order-standard_cart .sub-heading span,
#order-standard_cart .view-cart-items-header {
  background-color: var(--hh-pitch-2) !important;
  border-color: var(--hh-line) !important;
  color: var(--hh-chalk) !important;
}
#order-standard_cart .products .product header .price,
#order-standard_cart .product .product-pricing {
  color: var(--hh-chalk) !important;
}
#order-standard_cart .product header {
  background: transparent !important;
  border-bottom: 1px solid var(--hh-line) !important;
}
#order-standard_cart .product header span { color: var(--hh-chalk) !important; }
#order-standard_cart .sub-heading span {
  font-family: var(--hh-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
#order-standard_cart .summary-totals,
#order-standard_cart .total-due-today {
  border-color: var(--hh-line) !important;
  color: var(--hh-chalk) !important;
}
#order-standard_cart .total-due-today .amt { color: var(--hh-chalk) !important; }
#order-standard_cart .field-container .field { background: var(--hh-pitch) !important; }
#order-standard_cart .header-lined h1,
#order-standard_cart .header-lined { border-color: var(--hh-line) !important; }

/* promo-code / estimate-taxes tabs: the cart hardcodes #f8f8f8 on the panel body and the
   active tab (higher specificity than our generic .nav-tabs rules) → pull both onto the pitch. */
#order-standard_cart .view-cart-tabs .tab-content {
  background-color: var(--hh-pitch-2) !important;
  border: 1px solid var(--hh-line);
  border-radius: 0 10px 10px 10px;
  color: var(--hh-chalk);
}
#order-standard_cart .view-cart-tabs .nav-tabs { border-bottom-color: var(--hh-line) !important; }
#order-standard_cart .view-cart-tabs .nav-tabs a { color: var(--hh-chalk-dim) !important; }
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"] {
  background-color: var(--hh-pitch-2) !important;
  border-color: var(--hh-line) var(--hh-line) var(--hh-pitch-2) !important;
  color: var(--hh-chalk) !important;
}
#order-standard_cart .view-cart-tabs .prepend-icon .field-icon { color: var(--hh-chalk-dim); }

/* ===================== misc chrome / polish ===================== */

.progress { background: var(--hh-pitch-3); }
.progress-bar { background-color: var(--hh-green); }
.tooltip-inner { background: var(--hh-pitch-3); color: var(--hh-chalk); }
.popover-header {
  background: var(--hh-pitch-3);
  border-bottom-color: var(--hh-line);
  color: var(--hh-chalk);
}
.popover-body { color: var(--hh-chalk); }
code, pre { color: var(--hh-blue); background: var(--hh-pitch); }
.text-primary { color: var(--hh-blue) !important; }
.small, small { color: inherit; }

/* kb / announcements list surfaces */
.kb-article, .announcement-single, .accordion .card-header { background: var(--hh-pitch-2); }

/* keep long invoice/ticket tables readable inside cards */
.table-container.clearfix { background: transparent; }