@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700;800&display=swap');

/* ============================================================
   RELAY9 — dark / neon-cyan brand theme (child of twenty-one)
   ============================================================ */
:root {
  --bg:          #050708;
  --bg-elev:     #0a0d0f;
  --bg-elev2:    #0f1418;
  --text:        #d4dde0;
  --text-dim:    #8c969c;
  --text-faint:  #6b7479;
  --line:        #14191c;
  --line-bright: #1f272b;
  --accent:      #00e5ff;
  --accent-br:   #4dfaff;
  --accent-dim:  #0099aa;
  --ok:          #3ee07f;
  --warn:        #ffb547;
  --danger:      #ff3860;
  --mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
}

/* ---------- base ---------- */
html, body, .primary-bg-color {
  background-color: var(--bg) !important;
  color: var(--text);
}
body, .body, p, span, div, td, th, label, li, input, select, textarea, button, .btn {
  font-family: var(--mono) !important;
}
body { font-size: 14px; line-height: 1.5; }
.secondary-bg-color { background-color: var(--bg-elev) !important; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5 { color: #e7eef0; font-weight: 700; letter-spacing: -0.01em; }
hr { border-color: var(--line-bright); }
small, .text-muted { color: var(--text-faint) !important; }

a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-br); text-decoration: none; }

/* ---------- header / nav ---------- */
.header, .navbar, .topbar, .secondary-navbar {
  background-color: var(--bg-elev) !important;
  border-color: var(--line-bright) !important;
}
.topbar { border-bottom: 1px solid var(--line-bright); }
.navbar { border-bottom: 1px solid var(--line-bright); }
.navbar-nav .nav-link, .navbar .nav-link, .topbar .btn, .navbar-light .navbar-nav .nav-link {
  color: var(--text-dim) !important;
}
.navbar-nav .nav-link:hover, .navbar .nav-link:hover { color: var(--accent) !important; }
.navbar-nav .nav-link.active, .nav-item.active > .nav-link { color: var(--accent) !important; }

/* logo: render the Relay9 wordmark, hide the company-name fallback text */
.navbar-brand {
  display: inline-block;
  width: 150px; height: 40px;
  background: url("../img/relay9-logo.svg") no-repeat left center;
  background-size: contain;
  font-size: 0 !important;
  color: transparent !important;
  filter: drop-shadow(0 0 14px rgba(0,229,255,.18));
}
.navbar-brand .logo-img { display: none; }

/* ---------- cards / panels ---------- */
.card, .panel, .well, .list-group-item, .modal-content, .dropdown-menu, .popover {
  background-color: var(--bg-elev) !important;
  border: 1px solid var(--line-bright) !important;
  border-radius: 0 !important;
  color: var(--text);
}
.card-header, .panel-heading, .card-footer, .panel-footer, .modal-header, .modal-footer {
  background-color: var(--bg-elev2) !important;
  border-color: var(--line-bright) !important;
  color: #e7eef0;
}
.panel-sidebar .list-group-item.active, .list-group-item.active {
  background-color: rgba(0,229,255,.08) !important;
  border-color: var(--accent-dim) !important;
  color: var(--accent) !important;
}
.dropdown-menu .dropdown-item { color: var(--text); }
.dropdown-menu .dropdown-item:hover { background-color: rgba(0,229,255,.08); color: var(--accent); }

/* client-area home tiles */
.home-tiles .tile, .home-panels .panel, .market-card, .panel-tabbed {
  background-color: var(--bg-elev) !important;
  border: 1px solid var(--line-bright) !important;
}
.home-tiles .tile:hover { border-color: var(--accent-dim) !important; box-shadow: 0 0 16px rgba(0,229,255,.10); }

/* ---------- buttons ---------- */
.btn { border-radius: 0 !important; font-weight: 500; letter-spacing: .02em; }
.btn-primary, .btn-order, .btn-info {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #04161a !important;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(0,229,255,.18);
}
.btn-primary:hover, .btn-order:hover, .btn-info:hover {
  background-color: var(--accent-br) !important;
  border-color: var(--accent-br) !important;
  color: #04161a !important;
}
.btn-default, .btn-secondary, .btn-light {
  background-color: transparent !important;
  border: 1px solid var(--line-bright) !important;
  color: var(--text) !important;
}
.btn-default:hover, .btn-secondary:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.btn-success { background-color: var(--ok) !important; border-color: var(--ok) !important; color: #04201a !important; }
.btn-danger  { background-color: var(--danger) !important; border-color: var(--danger) !important; }

/* ---------- forms ---------- */
.form-control, .input-group-text, select, textarea, .custom-select, .StripeElement {
  background-color: var(--bg) !important;
  border: 1px solid var(--line-bright) !important;
  border-radius: 0 !important;
  color: var(--text) !important;
}
.form-control:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 .15rem rgba(0,229,255,.18) !important;
  background-color: var(--bg) !important;
  color: var(--text) !important;
}
.form-control::placeholder { color: var(--text-faint) !important; }
.input-group-text { background-color: var(--bg-elev2) !important; color: var(--text-dim) !important; }
label, .control-label { color: var(--text-dim); }

/* ---------- tables ---------- */
.table, .table td, .table th { color: var(--text); border-color: var(--line) !important; }
.table thead th, .table thead td {
  background-color: var(--bg-elev2) !important;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line-bright) !important;
  text-transform: uppercase; font-size: 12px; letter-spacing: .04em;
}
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.015); }
.table-hover tbody tr:hover { background-color: rgba(0,229,255,.05); }

/* ---------- alerts / badges ---------- */
.alert { border-radius: 0; border-width: 1px; }
.alert-info    { background: rgba(0,229,255,.08);  border-color: var(--accent-dim); color: var(--accent-br); }
.alert-success { background: rgba(62,224,127,.08); border-color: var(--ok);    color: var(--ok); }
.alert-warning { background: rgba(255,181,71,.08); border-color: var(--warn);  color: var(--warn); }
.alert-danger  { background: rgba(255,56,96,.08);  border-color: var(--danger);color: #ff7d96; }
.badge-primary, .label-primary { background-color: var(--accent); color: #04161a; }

/* status text colours used across WHMCS */
.label-active, .text-success { color: var(--ok) !important; }
.text-warning { color: var(--warn) !important; }
.text-danger  { color: var(--danger) !important; }

/* ---------- misc surfaces ---------- */
.breadcrumb { background-color: transparent; }
.master-breadcrumb {
  background-color: var(--bg-elev) !important;
  border-bottom: 1px solid var(--line-bright) !important;
}
.master-breadcrumb .breadcrumb, .master-breadcrumb .container { background: transparent !important; }
.master-breadcrumb a { color: var(--text-dim); }
.master-breadcrumb a:hover { color: var(--accent); }
.master-breadcrumb .active, .master-breadcrumb li { color: var(--text-faint); }
.nav-tabs { border-bottom: 1px solid var(--line-bright); }
.nav-tabs .nav-link.active { background: var(--bg-elev); border-color: var(--line-bright) var(--line-bright) var(--bg-elev); color: var(--accent); }
.nav-tabs .nav-link { color: var(--text-dim); border-radius: 0; }
.pagination .page-link { background: var(--bg-elev); border-color: var(--line-bright); color: var(--text-dim); }
.pagination .page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: #04161a; }

/* footer */
#footer, .footer, .footer-shoutout {
  background-color: var(--bg-elev) !important;
  border-top: 1px solid var(--line-bright);
  color: var(--text-faint);
}
#footer a, .footer a { color: var(--text-dim); }
#footer a:hover { color: var(--accent); }

/* login / register split pages */
.split-page, .login-bg, .auth-page { background-color: var(--bg) !important; }

/* search / jumbotron / hero on store + home */
.jumbotron, .header-lined, .domain-checker-container, .search-container {
  background-color: var(--bg-elev) !important;
  border: 1px solid var(--line-bright);
}

/* scrollbar accent (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-bright); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }