/* =====================================================================
   YOOBO — WHMCS "Twenty-One" theme override
   Matches the visual language of https://yoobo.host
   (dark surface, yellow accent, Fredoka/Inter type, hard-edge "console"
   panels with thick borders + offset shadows)

   INSTALL:
   Paste this into your Theme Editor addon (WHMCS Cloud) or replace
   templates/twenty-one/css/custom.css if you have file access, then
   hard-refresh the client area.

   NOTE ON !important: the stock theme.css scopes a lot of its own
   background/colour rules to a parent class (e.g. ".client-home-cards
   .card-header", ".sidebar .list-group-item.active", ".home-domain-search
   .input-group-wrapper .btn"). Those beat a plain ".card-header" rule on
   specificity alone, regardless of load order, and the stock sheet uses
   !important itself in a few of those same spots — so this file uses
   !important on the handful of colour/background/border declarations
   that need to reliably win everywhere, not as a blanket habit.
   ===================================================================== */

/* ---------- Fonts (same pair the marketing site uses) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ---------- Brand palette ---------- */
:root {
  --yb-yellow: #ffc72c;
  --yb-yellow-bright: #ffd75e;
  --yb-yellow-dark: #e0a800;

  --yb-950: #101215; /* page background */
  --yb-900: #16181c; /* card / panel surface */
  --yb-800: #1e2126; /* header, inputs, table head */
  --yb-700: #2a2e35; /* borders */
  --yb-600: #3a3f48; /* borders, hover surfaces */
  --yb-500: #565c66; /* disabled / muted icons */
  --yb-400: #8a8f98; /* muted text */
  --yb-300: #b4b8bf; /* secondary text */
  --yb-200: #d8dade;
  --yb-100: #f4f4f5; /* body text on dark */
  --yb-white: #ffffff;

  --yb-green: #28c840;  /* "online"/success, matches site's status dot */
  --yb-red: #ff5f57;

  --yb-font-heading: "Fredoka", "Inter", system-ui, sans-serif;
  --yb-font-body: "Inter", system-ui, sans-serif;
  --yb-shadow-hard: 6px 6px 0 rgba(0, 0, 0, 0.45);

  /* Re-point the Bootstrap variables the stock theme.css declares so any
     component that references var(--primary) etc. also picks up the brand */
  --primary: var(--yb-yellow);
  --dark: var(--yb-950);
  --light: var(--yb-900);

  /* Re-point the Nexus Cart custom-property layer (store/addon pages) too */
  --primary-50: var(--yb-100);
  --primary-100: var(--yb-200);
  --primary-200: var(--yb-300);
  --primary-300: var(--yb-400);
  --primary-400: var(--yb-500);
  --primary-500: var(--yb-yellow);
  --primary-600: var(--yb-yellow);
  --primary-700: var(--yb-yellow-dark);
  --primary-800: var(--yb-yellow-dark);
  --primary-900: var(--yb-900);
  --primary-950: var(--yb-950);
  --primary-lifted: var(--yb-yellow-bright);
  --primary-accented: var(--yb-yellow-dark);
  --text: var(--yb-100);
  --text-muted: var(--yb-400);
  --text-lifted: var(--yb-300);
  --text-inverted: var(--yb-950);
  --border: var(--yb-700);
  --border-muted: var(--yb-800);
  --border-lifted: var(--yb-600);
  --bg: var(--yb-950);
  --bg-muted: var(--yb-900);
  --bg-lifted: var(--yb-800);
  --bg-accented: var(--yb-700);
  --bg-inverted: var(--yb-100);
  --rounding-sm: 0.4rem;
  --rounding-md: 0.75rem;
  --rounding-lg: 1.1rem;
}

/* Native checkboxes/radios (Safe Search, TLD multiselect, etc.) pick up
   the brand colour automatically, no per-widget CSS needed */
* { accent-color: var(--yb-yellow); }

/* =====================================================================
   Base / typography
   ===================================================================== */
html { font-size: 15px; }

body,
body.primary-bg-color {
  background-color: var(--yb-950) !important;
  color: var(--yb-100);
  font-family: var(--yb-font-body);
}

h1, h2, h3, h4, h5, h6,
.card-title, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--yb-font-heading);
  font-weight: 600;
  color: var(--yb-white);
}

a {
  color: var(--yb-yellow);
}
a:hover,
a:focus {
  color: var(--yb-yellow-bright);
}

hr { border-color: var(--yb-700); }

::selection { background: var(--yb-yellow); color: var(--yb-950); }

/* Yellow-on-dark scrollbar, same treatment as the site's console panel */
* { scrollbar-width: thin; scrollbar-color: var(--yb-yellow) var(--yb-900); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--yb-900); }
::-webkit-scrollbar-thumb {
  background: var(--yb-yellow);
  border: 2px solid var(--yb-900);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--yb-yellow-bright); }

/* =====================================================================
   Header / top bar / main nav / breadcrumb
   ===================================================================== */
#header.header {
  background: var(--yb-900);
  border-bottom: 2px solid var(--yb-700);
}

#header .topbar {
  background: var(--yb-950);
  border-bottom: 1px solid var(--yb-800);
  color: var(--yb-300);
}
#header .topbar .btn { color: var(--yb-300); }
#header .topbar .btn:hover { color: var(--yb-yellow); }

.navbar.navbar-light { background: transparent; }

.navbar-light .navbar-brand,
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
  color: var(--yb-yellow) !important;
  font-family: var(--yb-font-heading);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--yb-200);
  font-family: var(--yb-font-heading);
  font-weight: 500;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--yb-yellow);
}
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--yb-yellow);
}

.navbar-nav.toolbar .cart-btn,
.navbar-nav.toolbar .nav-link {
  color: var(--yb-200);
}
.navbar-nav.toolbar .nav-link:hover { color: var(--yb-yellow); }

.form-inline .form-control,
.input-group .form-control {
  background: var(--yb-800);
  border-color: var(--yb-700);
  color: var(--yb-100);
}

/* The grey bar under the nav ("Portal Home" / page trail) */
.master-breadcrumb {
  background-color: var(--yb-900) !important;
  border-bottom: 1px solid var(--yb-700);
}
.breadcrumb {
  background-color: transparent !important;
}
.breadcrumb-item,
.breadcrumb-item a {
  color: var(--yb-300);
}
.breadcrumb-item.active { color: var(--yb-400); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--yb-600); }

/* =====================================================================
   Sidebar
   ===================================================================== */
.card-sidebar {
  background: var(--yb-900);
  border: 2px solid var(--yb-700);
  border-radius: var(--rounding-lg);
  box-shadow: var(--yb-shadow-hard);
}
.card-sidebar > .card-header {
  background: var(--yb-800) !important;
  border-bottom: 1px solid var(--yb-700);
  border-radius: calc(var(--rounding-lg) - 2px) calc(var(--rounding-lg) - 2px) 0 0;
}
.card-sidebar .card-title {
  color: var(--yb-white);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.list-group-item.list-group-item-action {
  background: transparent;
  color: var(--yb-300);
  border-color: var(--yb-800);
}
.list-group-item.list-group-item-action:hover {
  background: var(--yb-800);
  color: var(--yb-white);
}
.list-group-item.list-group-item-action.active,
.sidebar .list-group-item.list-group-item-action.active,
.sidebar .list-group-item.active {
  background-color: var(--yb-yellow) !important;
  border-color: var(--yb-yellow) !important;
  color: var(--yb-950) !important;
  font-weight: 600;
}
.list-group-item.list-group-item-action.active .sidebar-menu-item-icon,
.sidebar .list-group-item.active > i {
  color: var(--yb-950) !important;
}

/* =====================================================================
   Cards / dashboard panels
   ===================================================================== */
.card {
  background: var(--yb-900) !important;
  border: 2px solid var(--yb-700);
  border-radius: var(--rounding-lg);
  box-shadow: var(--yb-shadow-hard);
}
.card-header {
  background: var(--yb-800) !important;
  border-bottom: 1px solid var(--yb-700);
  color: var(--yb-white);
}
.card-footer {
  background: var(--yb-800) !important;
  border-top: 1px solid var(--yb-700);
}
.card > .list-group-item {
  background: transparent;
  border-color: var(--yb-800);
  color: var(--yb-200);
}
.card-body, .card-text, .card p { color: var(--yb-200); }
/* This also fixes .client-home-cards .card-header, which the stock sheet
   pins to white at higher specificity than a plain .card-header rule. */
.client-home-cards small { color: var(--yb-400); }

/* .card's border-color above also overwrites the coloured top strip that
   dashboard status panels use to signal category (.card.card-accent-*) —
   restore the original strip colours on top of the dark border. */
.card.card-accent-gold { border-top-color: #f0ad4e !important; }
.card.card-accent-green { border-top-color: #5cb85c !important; }
.card.card-accent-red { border-top-color: #d9534f !important; }
.card.card-accent-blue { border-top-color: #5bc0de !important; }
.card.card-accent-orange { border-top-color: #ff6600 !important; }
.card.card-accent-pink { border-top-color: #e671b8 !important; }
.card.card-accent-purple { border-top-color: #7b4f9d !important; }
.card.card-accent-teal { border-top-color: #00aba9 !important; }
.card.card-accent-turquoise { border-top-color: #1abc9c !important; }
.card.card-accent-emerald { border-top-color: #2ecc71 !important; }
.card.card-accent-midnight-blue { border-top-color: #2c3e50 !important; }
.card.card-accent-sun-flower { border-top-color: #f1c40f !important; }
.card.card-accent-pomegranate { border-top-color: #c0392b !important; }
.card.card-accent-silver { border-top-color: #bdc3c7 !important; }
.card.card-accent-asbestos { border-top-color: #7f8c8d !important; }

/* =====================================================================
   Homepage: "How can we help" / "Your Account" icon tiles
   These are plain <a class="card-accent-*"> elements, not .card, so they
   need their own rules — the stock sheet gives them a white tile
   (.action-icon-btns a) with a faint icon colour.
   ===================================================================== */
.action-icon-btns a {
  background-color: var(--yb-900) !important;
  color: var(--yb-200) !important;
  border: 2px solid var(--yb-700);
  border-radius: var(--rounding-md);
  font-family: var(--yb-font-heading);
  font-weight: 500;
  box-shadow: var(--yb-shadow-hard);
}
.action-icon-btns a:hover {
  color: var(--yb-white) !important;
  border-color: var(--yb-yellow);
}
.action-icon-btns a .ico-container i {
  color: var(--yb-yellow) !important;
}

/* Homepage domain search box — ships as .bg-white (a Bootstrap utility
   that sets background with !important), so it needs matching !important */
.home-domain-search.bg-white {
  background-color: var(--yb-950) !important;
}
.home-domain-search .input-group-wrapper {
  background-color: var(--yb-900) !important;
  border: 2px solid var(--yb-700);
  border-radius: var(--rounding-md);
}
.home-domain-search .input-group-wrapper .form-control,
.home-domain-search .input-group-wrapper textarea {
  background-color: transparent !important;
  color: var(--yb-white);
}
.home-domain-search .input-group-wrapper .btn {
  border-radius: 999px !important;
}
.home-domain-search .tld-logos { color: var(--yb-400); }

/* Bootstrap-multiselect dropdown (advanced domain search: TLDs / max length) */
.multiselect-container {
  background-color: var(--yb-900);
  border: 2px solid var(--yb-700);
  border-radius: var(--rounding-md);
}
.multiselect-container > li > a,
.multiselect-container > li > label {
  color: var(--yb-200);
}
.multiselect-container > li > a:hover,
.multiselect-container > li.active > a {
  background-color: var(--yb-800);
  color: var(--yb-white);
}
.btn.multiselect,
.btn.dropdown-toggle {
  background-color: var(--yb-800);
  border-color: var(--yb-700);
  color: var(--yb-100);
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  font-family: var(--yb-font-heading);
  font-weight: 600;
  border-radius: 999px;
  border-width: 2px;
}

.btn-primary {
  color: var(--yb-950) !important;
  background-color: var(--yb-yellow) !important;
  border-color: var(--yb-yellow) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
  color: var(--yb-950) !important;
  background-color: var(--yb-yellow-bright) !important;
  border-color: var(--yb-yellow-bright) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 199, 44, 0.35);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--yb-yellow-dark) !important;
  border-color: var(--yb-yellow-dark) !important;
  color: var(--yb-950) !important;
}
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--yb-600) !important;
  border-color: var(--yb-600) !important;
  color: var(--yb-300) !important;
}

.btn-outline-primary {
  color: var(--yb-yellow);
  border-color: var(--yb-yellow);
}
.btn-outline-primary:hover {
  background-color: var(--yb-yellow);
  border-color: var(--yb-yellow);
  color: var(--yb-950);
}

.btn-secondary,
.btn-default {
  background-color: transparent;
  border-color: var(--yb-600);
  color: var(--yb-200);
}
.btn-secondary:hover,
.btn-default:hover {
  background-color: var(--yb-800);
  border-color: var(--yb-500);
  color: var(--yb-white);
}

/* Transfer / "go" actions — tinted to the brand's green instead of stock
   Bootstrap green, still reads as a distinct affordance from primary */
.btn-success {
  background-color: var(--yb-green) !important;
  border-color: var(--yb-green) !important;
  color: var(--yb-950) !important;
}
.btn-success:hover,
.btn-success:focus {
  background-color: #34d94f !important;
  border-color: #34d94f !important;
  color: var(--yb-950) !important;
}

.btn-link { color: var(--yb-yellow); }

/* "Deploy a Server"-style pop on primary CTAs, subtle, no motion sickness */
.btn-primary:active { transform: translateY(1px); }

/* =====================================================================
   Forms
   ===================================================================== */
.form-control {
  background-color: var(--yb-800);
  border: 1.5px solid var(--yb-700);
  color: var(--yb-100);
  border-radius: 0.6rem;
}
.form-control::placeholder { color: var(--yb-500); }
.form-control:focus {
  background-color: var(--yb-800);
  border-color: var(--yb-yellow);
  color: var(--yb-white);
  box-shadow: 0 0 0 0.2rem rgba(255, 199, 44, 0.25);
}
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--yb-900);
  color: var(--yb-500);
}

.input-group-text {
  background-color: var(--yb-800);
  border-color: var(--yb-700);
  color: var(--yb-300);
}

.custom-select,
select.form-control {
  background-color: var(--yb-800);
  color: var(--yb-100);
  border-color: var(--yb-700);
}

.custom-control-label::before {
  background-color: var(--yb-800);
  border-color: var(--yb-600);
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--yb-yellow);
  border-color: var(--yb-yellow);
}

/* =====================================================================
   Tables / invoices / order review
   ===================================================================== */
.table {
  color: var(--yb-200);
}
.table thead th {
  background-color: var(--yb-800);
  color: var(--yb-white);
  border-color: var(--yb-700);
  font-family: var(--yb-font-heading);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}
.table td,
.table th {
  border-color: var(--yb-800);
}
.table-hover tbody tr:hover {
  background-color: var(--yb-800);
  color: var(--yb-white);
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* =====================================================================
   Status pills / labels (kept semantic colours, just squared up to pills
   with better contrast against the dark surface)
   ===================================================================== */
.label,
.status,
.badge {
  border-radius: 999px;
  font-family: var(--yb-font-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.status-active,
.status-open,
.status-completed,
.status-paid {
  background-color: var(--yb-green);
  color: var(--yb-950);
}
.badge-primary { background-color: var(--yb-yellow); color: var(--yb-950); }
.badge-secondary { background-color: var(--yb-700); color: var(--yb-100); }

/* =====================================================================
   Alerts
   ===================================================================== */
.alert {
  border-width: 2px;
  border-radius: var(--rounding-md);
}
.alert-info {
  background-color: rgba(255, 199, 44, 0.12);
  border-color: var(--yb-yellow);
  color: var(--yb-100);
}
.alert-success {
  background-color: rgba(40, 200, 64, 0.12);
  border-color: var(--yb-green);
  color: var(--yb-100);
}
.alert-warning {
  background-color: rgba(240, 173, 78, 0.14);
  border-color: #f0ad4e;
  color: var(--yb-100);
}
.alert-danger {
  background-color: rgba(217, 83, 79, 0.14);
  border-color: #d9534f;
  color: var(--yb-100);
}

/* =====================================================================
   Pagination / dropdowns / modals
   ===================================================================== */
.page-link {
  background-color: var(--yb-900);
  border-color: var(--yb-700);
  color: var(--yb-200);
}
.page-link:hover {
  background-color: var(--yb-800);
  color: var(--yb-yellow);
}
.page-item.active .page-link {
  background-color: var(--yb-yellow);
  border-color: var(--yb-yellow);
  color: var(--yb-950);
}
.page-item.disabled .page-link {
  background-color: var(--yb-900);
  border-color: var(--yb-800);
  color: var(--yb-600);
}

.dropdown-menu {
  background-color: var(--yb-900);
  border: 2px solid var(--yb-700);
  border-radius: var(--rounding-md);
  box-shadow: var(--yb-shadow-hard);
}
.dropdown-item { color: var(--yb-200); }
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--yb-800);
  color: var(--yb-white);
}
.dropdown-divider { border-color: var(--yb-700); }

.modal-content {
  background-color: var(--yb-900);
  border: 2px solid var(--yb-700);
  border-radius: var(--rounding-lg);
}
.modal-header,
.modal-footer {
  border-color: var(--yb-700);
}

/* =====================================================================
   Footer
   ===================================================================== */
#footer.footer {
  background: var(--yb-950);
  border-top: 2px solid var(--yb-700);
  color: var(--yb-400);
}
#footer.footer .nav-link { color: var(--yb-300); }
#footer.footer .nav-link:hover { color: var(--yb-yellow); }
#footer.footer .copyright { color: var(--yb-500); }

/* =====================================================================
   Misc
   ===================================================================== */
code {
  color: var(--yb-yellow);
  background: var(--yb-800);
  border-radius: 0.3rem;
  padding: 0.1em 0.35em;
}

::placeholder { color: var(--yb-500); }