/**
 * Webcat skin for WHMCS Twenty-One (child theme).
 * Matches the webcat.com.au electric-brutalist design:
 * near-black / acid lime / mono details / sharp corners.
 *
 * Loaded automatically by Twenty-One's head.tpl {assetExists file="custom.css"}.
 */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&family=Unbounded:wght@700;900&display=swap");

:root {
  --wc-ink: #0a0a0a;
  --wc-panel: #101010;
  --wc-panel-2: #161616;
  --wc-paper: #f2f2ec;
  --wc-dim: #9a9a90;
  --wc-acid: #ccff00;
  --wc-acid-press: #a3cc00;
  --wc-hair: rgba(242, 242, 236, 0.16);
  --wc-hair-strong: rgba(242, 242, 236, 0.35);
}

/* ============================ Base ============================ */
html body {
  background: var(--wc-ink) !important;
  color: var(--wc-paper);
  font-family: "Space Grotesk", system-ui, sans-serif;
}
#main-body, .main-body, .app-main { background: transparent !important; }
h1, h2, h3, h4, h5, h6 { color: var(--wc-paper); }
a { color: var(--wc-acid); }
a:hover { color: var(--wc-acid-press); }
hr { border-color: var(--wc-hair); }
.text-muted, .small, small { color: var(--wc-dim) !important; }
::selection { background: var(--wc-acid); color: var(--wc-ink); }

/* Kill rounded corners everywhere */
.card, .btn, .form-control, .custom-select, .dropdown-menu, .modal-content,
.alert, .badge, .list-group-item, .input-group-text, .nav-tabs .nav-link,
.page-link, .progress, .popover, .toast, .img-thumbnail {
  border-radius: 0 !important;
}

/* ============================ Header / nav ============================ */
#header, .header, .app-header, body > header {
  background: var(--wc-ink) !important;
  border-bottom: 1px solid var(--wc-hair);
  box-shadow: none !important;
}
.header .topbar { background: var(--wc-ink) !important; border-bottom: 1px solid var(--wc-hair); }

/* Brand: readable wordmark + pixel-cat mark drawn in pure CSS */
.header .navbar-brand, .navbar-brand {
  color: var(--wc-paper) !important;
  font-family: "Unbounded", sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}
.navbar-brand::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 26px;
  margin-right: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cg fill='%23ccff00'%3E%3Crect x='1' width='2' height='2'/%3E%3Crect x='11' width='2' height='2'/%3E%3Crect x='1' y='2' width='12' height='2'/%3E%3Crect y='4' width='14' height='6'/%3E%3Crect x='4' y='10' width='2' height='2'/%3E%3Crect x='8' y='10' width='2' height='2'/%3E%3C/g%3E%3Cg fill='%230a0a0a'%3E%3Crect x='3' y='5' width='2' height='3'/%3E%3Crect x='9' y='5' width='2' height='3'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
.navbar-brand img.logo-img { max-height: 34px; }
.navbar-brand:has(img.logo-img)::before { display: none; }
.header .navbar, .navbar-main, .navbar {
  background: var(--wc-ink) !important;
}
.navbar .nav-link, .header .nav-link, .header .btn.nav-link, .header .dropdown-toggle {
  color: var(--wc-paper) !important;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
}
.navbar .nav-link:hover, .header .nav-link:hover, .header .dropdown-toggle:hover { color: var(--wc-acid) !important; }
.navbar-brand img, .header .logo img { max-height: 36px; }
.header .input-group.search .form-control { background: var(--wc-panel); }

/* Primary navigation bar (below masthead in twenty-one) */
#main-menu, .navbar-expand-lg {
  background: var(--wc-ink) !important;
  border-bottom: 1px solid var(--wc-hair);
}
#main-menu .nav-link { color: var(--wc-dim) !important; }
#main-menu .nav-link:hover, #main-menu .nav-item.active .nav-link {
  color: var(--wc-acid) !important;
  background: transparent;
}

/* ============================ Sidebar ============================ */
.sidebar .card, .sidebar .list-group-item {
  background: var(--wc-panel);
  border-color: var(--wc-hair);
  color: var(--wc-paper);
}
.sidebar .card-header, .sidebar .card-title {
  background: var(--wc-panel-2);
  color: var(--wc-acid);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--wc-hair);
}
.sidebar .list-group-item.active {
  background: var(--wc-acid);
  border-color: var(--wc-acid);
  color: var(--wc-ink);
}
.sidebar .list-group-item:hover:not(.active) { background: var(--wc-panel-2); color: var(--wc-paper); }

/* ============================ Cards / panels ============================ */
.card {
  background: var(--wc-panel);
  border: 1px solid var(--wc-hair);
  color: var(--wc-paper);
}
.card-header {
  background: var(--wc-panel-2);
  border-bottom: 1px solid var(--wc-hair);
  color: var(--wc-paper);
  font-weight: 700;
}
.card-footer { background: var(--wc-panel-2); border-top: 1px solid var(--wc-hair); }
.bg-light, .bg-white { background: var(--wc-panel) !important; color: var(--wc-paper); }
.border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--wc-hair) !important; }

/* Home shortcuts / tiles */
.home-shortcuts .list-group-item, .tile {
  background: var(--wc-panel);
  border-color: var(--wc-hair);
  color: var(--wc-paper);
}
.home-shortcuts .list-group-item:hover, .tile:hover {
  background: var(--wc-acid);
  color: var(--wc-ink);
}
.home-shortcuts .list-group-item:hover i, .tile:hover i { color: var(--wc-ink); }

/* ============================ Buttons ============================ */
.btn { font-family: "JetBrains Mono", monospace; font-weight: 700; letter-spacing: 0.04em; }
.btn-primary, .btn-success {
  background: var(--wc-acid) !important;
  border-color: var(--wc-acid) !important;
  color: var(--wc-ink) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-success:hover, .btn-success:focus {
  background: var(--wc-paper) !important;
  border-color: var(--wc-paper) !important;
  color: var(--wc-ink) !important;
}
.btn-default, .btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-primary {
  background: transparent !important;
  border: 1px solid var(--wc-hair-strong) !important;
  color: var(--wc-paper) !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover,
.btn-outline-secondary:hover, .btn-outline-primary:hover {
  border-color: var(--wc-acid) !important;
  color: var(--wc-acid) !important;
}
.btn-link { color: var(--wc-acid); }

/* ============================ Forms ============================ */
.form-control, .custom-select, select, textarea {
  background: var(--wc-ink);
  border: 1px solid var(--wc-hair-strong);
  color: var(--wc-paper);
}
.form-control:focus, .custom-select:focus {
  background: var(--wc-ink);
  border-color: var(--wc-acid);
  color: var(--wc-paper);
  box-shadow: 0 0 0 3px rgba(204, 255, 0, 0.15);
}
.form-control::placeholder { color: var(--wc-dim); }
.input-group-text {
  background: var(--wc-panel-2);
  border-color: var(--wc-hair-strong);
  color: var(--wc-dim);
  font-family: "JetBrains Mono", monospace;
}
label, .col-form-label { color: var(--wc-dim); }
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--wc-acid);
  border-color: var(--wc-acid);
}

/* ============================ Tables ============================ */
.table { color: var(--wc-paper); }
.table th { border-color: var(--wc-hair); font-family: "JetBrains Mono", monospace; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wc-dim); }
.table td { border-color: var(--wc-hair); }
.table-striped tbody tr:nth-of-type(odd) { background: var(--wc-panel); }
.table-hover tbody tr:hover { background: var(--wc-panel-2); color: var(--wc-paper); }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input { background: var(--wc-ink); color: var(--wc-paper); border: 1px solid var(--wc-hair-strong); }
.dataTables_wrapper, .dataTables_info { color: var(--wc-dim) !important; }

/* ============================ Dropdowns / modals / popovers ============================ */
.dropdown-menu {
  background: var(--wc-panel);
  border: 1px solid var(--wc-hair-strong);
  color: var(--wc-paper);
}
.dropdown-item { color: var(--wc-paper); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--wc-acid); color: var(--wc-ink); }
.dropdown-divider { border-color: var(--wc-hair); }
.modal-content { background: var(--wc-panel); border: 1px solid var(--wc-hair-strong); color: var(--wc-paper); }
.modal-header, .modal-footer { border-color: var(--wc-hair); }
.close { color: var(--wc-paper); text-shadow: none; }
.popover { background: var(--wc-panel); border-color: var(--wc-hair-strong); }
.popover-body { color: var(--wc-paper); }

/* ============================ Alerts / badges ============================ */
.alert { border-width: 1px; }
.alert-info { background: rgba(204, 255, 0, 0.08); border-color: var(--wc-acid); color: var(--wc-paper); }
.alert-warning { background: rgba(255, 193, 7, 0.1); border-color: #ffc107; color: #ffdd77; }
.alert-danger { background: rgba(220, 53, 69, 0.12); border-color: #dc3545; color: #ff8f9a; }
.alert-success { background: rgba(40, 167, 69, 0.12); border-color: #28a745; color: #7fe09a; }
.badge { font-family: "JetBrains Mono", monospace; letter-spacing: 0.04em; }
.badge-info, .badge-primary { background: var(--wc-acid); color: var(--wc-ink); }

/* Status label colours WHMCS uses on services/invoices */
.label, .status { font-family: "JetBrains Mono", monospace; }

/* ============================ Pagination / tabs / breadcrumb ============================ */
.page-link { background: var(--wc-panel); border-color: var(--wc-hair); color: var(--wc-paper); }
.page-item.active .page-link { background: var(--wc-acid); border-color: var(--wc-acid); color: var(--wc-ink); }
.nav-tabs { border-bottom-color: var(--wc-hair-strong); }
.nav-tabs .nav-link { color: var(--wc-dim); border-color: transparent; font-family: "JetBrains Mono", monospace; }
.nav-tabs .nav-link.active { background: var(--wc-panel); border-color: var(--wc-hair-strong) var(--wc-hair-strong) transparent; color: var(--wc-acid); }
.breadcrumb { background: transparent; font-family: "JetBrains Mono", monospace; font-size: 0.8rem; }
.breadcrumb-item.active { color: var(--wc-dim); }
/* The bar between header and content ships light grey in twenty-one */
.master-breadcrumb { background: var(--wc-ink) !important; border-bottom: 1px solid var(--wc-hair); }

/* Locale button: force the Australian flag (WHMCS shows US for intl English),
   sprite position taken from .iti-flag.au in twenty-one's all.min.css */
.footer .iti-flag.us, #footer .iti-flag.us {
  height: 10px !important;
  background-position: -286px 0 !important;
}
/* To hide the language/currency button entirely (single language + AUD only),
   uncomment:
.footer .btn[data-target="#modalChooseLanguage"] { display: none !important; }
*/

/* ============================ Order forms (standard_cart) ============================ */
.products .product, .product-info, .order-summary, .view-cart-items > .item,
.sub-heading span, .cart-body .card {
  background: var(--wc-panel);
  border-color: var(--wc-hair);
  color: var(--wc-paper);
}
.products .product header, .product-info header { background: var(--wc-panel-2); color: var(--wc-paper); }
.products .product .product-pricing, .price, .product-info .product-pricing { color: var(--wc-acid); font-family: "JetBrains Mono", monospace; }
.sub-heading span { background: var(--wc-ink); color: var(--wc-acid); font-family: "JetBrains Mono", monospace; letter-spacing: 0.1em; }
.view-cart-tabs .nav-link.active { background: var(--wc-panel); color: var(--wc-acid); }
.order-summary { border: 1px solid var(--wc-hair-strong); }
.order-summary .total-due-today-price, .amt { color: var(--wc-acid); font-family: "JetBrains Mono", monospace; }
.promo-container { background: var(--wc-panel-2); border-color: var(--wc-hair); }
#order-standard_cart .field-container .field, #frmConfigureDomains .form-control { background: var(--wc-ink); }

/* Domain search results */
.domain-checker-container { background: var(--wc-panel); border: 1px solid var(--wc-hair-strong); }
.domain-checker-bg { background: var(--wc-ink) !important; }
.domain-lookup-result .domain-available { color: var(--wc-acid); }

/* ============================ Footer ============================ */
#footer, .footer, footer {
  background: var(--wc-ink) !important;
  border-top: 1px solid var(--wc-hair);
  color: var(--wc-dim) !important;
}
#footer a, .footer a, footer a { color: var(--wc-dim); }
#footer a:hover, .footer a:hover, footer a:hover { color: var(--wc-acid); }

/* ============================ Misc chrome ============================ */
.panel, .well, .jumbotron { background: var(--wc-panel); border-color: var(--wc-hair); color: var(--wc-paper); }
.progress { background: var(--wc-panel-2); }
.progress-bar { background: var(--wc-acid); color: var(--wc-ink); }
.list-group-item { background: var(--wc-panel); border-color: var(--wc-hair); color: var(--wc-paper); }
.list-group-item-action:hover { background: var(--wc-panel-2); color: var(--wc-paper); }
.ticket-reply, .message { background: var(--wc-panel); border-color: var(--wc-hair); }
.kb-article, .accordion .card-header { background: var(--wc-panel-2); }
pre, code { background: var(--wc-panel-2); color: var(--wc-acid); font-family: "JetBrains Mono", monospace; border: 1px solid var(--wc-hair); }

/* Loaders / overlays */
.modal-backdrop { background: #000; }
#fullpage-overlay { background: rgba(10, 10, 10, 0.9); }
#fullpage-overlay .msg { color: var(--wc-paper); font-family: "JetBrains Mono", monospace; }

/* ============================ Print: keep invoices light ============================ */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .card, .table, .panel { background: #fff !important; color: #000 !important; border-color: #ddd !important; }
  a { color: #000 !important; }
}

/* ============================ v3: portal home + client dashboard ============================ */
/* Portal home tile cards (.card-columns.home) — keep the coloured accent strips */
.card-columns.home .card, .card-columns .card {
  background: var(--wc-panel) !important;
  border: 1px solid var(--wc-hair) !important;
  color: var(--wc-paper);
}
.card-columns.home .card .card-body, .card-columns .card .card-body { background: transparent !important; }
.card-columns.home .card i, .card-columns .card i { color: var(--wc-dim); }
.card-columns.home .card:hover { border-color: var(--wc-acid) !important; }
.card-columns.home .card:hover i { color: var(--wc-acid); }

/* Client-area dashboard stat tiles (services/domains/tickets/invoices) */
.tiles .tile {
  background: var(--wc-panel) !important;
  border: 1px solid var(--wc-hair) !important;
  color: var(--wc-paper) !important;
}
.tiles .tile .stat { color: var(--wc-paper) !important; font-family: "JetBrains Mono", monospace; font-weight: 700; }
.tiles .tile .title { color: var(--wc-dim) !important; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.1em; }
.tiles .tile i, .tiles .tile svg { color: var(--wc-dim); opacity: 0.6; }
/* keep the coloured .highlight underline bars as-is — nice accent on dark */

/* Panel headers that ship white with pale text */
.card-header, .card .card-header {
  background: var(--wc-panel-2) !important;
  color: var(--wc-paper) !important;
}
.card-header .btn, .card-header a { color: var(--wc-acid) !important; }

/* Base alert (unclassed variants like the email-verification banner) */
.alert { background: var(--wc-panel); color: var(--wc-paper); border-color: var(--wc-hair-strong); }
.alert .btn { border-color: var(--wc-hair-strong); color: var(--wc-paper); }

/* ============================ v3: tables (domain pricing etc.) ============================ */
table, .table, .table th, .table td, thead, tbody { background-color: transparent !important; }
body tr:nth-of-type(odd) { background-color: var(--wc-panel) !important; }
body tr:nth-of-type(even) { background-color: transparent !important; }
body tr:hover { color: var(--wc-paper) !important; background-color: var(--wc-panel-2) !important; }
.table thead th, table thead th { background: var(--wc-ink) !important; color: var(--wc-dim) !important; }

/* Domain search wrapper on cart domain pages (ships white) */
.home-domain-search .input-group-wrapper {
  background: var(--wc-panel) !important;
  border: 1px solid var(--wc-hair-strong) !important;
}
.home-domain-search input.form-control { background: var(--wc-ink) !important; color: var(--wc-paper); }

/* Captcha instruction block */
.captcha-wrapper, .signup-captcha-container { background: transparent !important; color: var(--wc-dim); }

/* ============================ v4: standard_cart (ID-scoped source needs matching specificity) ============================ */
#order-standard_cart .products .product {
  background: var(--wc-panel) !important;
  border: 1px solid var(--wc-hair-strong) !important;
  border-radius: 0 !important;
}
#order-standard_cart .products .product header {
  background: var(--wc-panel-2) !important;
  border-radius: 0 !important;
}
#order-standard_cart .products .product header span {
  color: var(--wc-paper) !important;
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 1rem;
}
#order-standard_cart .product-desc,
#order-standard_cart .product-desc ul,
#order-standard_cart .product-desc li { color: var(--wc-dim) !important; }
#order-standard_cart .product-desc strong { color: var(--wc-paper) !important; }
#order-standard_cart .product-info {
  background: var(--wc-panel-2) !important;
  border-color: var(--wc-hair) !important;
  color: var(--wc-paper) !important;
}
#order-standard_cart .sub-heading span { background: var(--wc-ink) !important; color: var(--wc-acid) !important; }
#order-standard_cart .price, #order-standard_cart .product-pricing { color: var(--wc-acid) !important; }
#order-standard_cart .view-cart-items-header {
  background: var(--wc-ink) !important;
  color: var(--wc-acid) !important;
  border-radius: 0 !important;
  font-family: "JetBrains Mono", monospace;
}
#order-standard_cart .view-cart-items > .item { background: var(--wc-panel) !important; border-color: var(--wc-hair) !important; }
#order-standard_cart .summary-container, #order-standard_cart .order-summary { background: var(--wc-panel) !important; border-color: var(--wc-hair-strong) !important; }

/* Domain pricing table on cart domain pages */
.domain-pricing .tld-pricing-header div:nth-child(odd) { background: var(--wc-panel) !important; border-color: var(--wc-hair) !important; }
.domain-pricing .tld-pricing-header div { color: var(--wc-paper) !important; }

/* ============================ v4: portal home action tiles (.ico-container) ============================ */
/* Longhand borders so the coloured .card-accent-* top strips survive */
.action-icon-btns .ico-container {
  background: var(--wc-panel) !important;
  border-style: solid;
  border-width: 3px 1px 1px 1px;
  border-left-color: var(--wc-hair);
  border-right-color: var(--wc-hair);
  border-bottom-color: var(--wc-hair);
  border-radius: 0 !important;
}
.action-icon-btns .ico-container i { color: var(--wc-dim); }
.action-icon-btns a { color: var(--wc-paper) !important; }
.action-icon-btns a:hover .ico-container { border-left-color: var(--wc-acid); border-right-color: var(--wc-acid); border-bottom-color: var(--wc-acid); }
.action-icon-btns a:hover .ico-container i { color: var(--wc-acid); }