/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Theme
 *
 * This file allows you to customize the theme colors and styles for the entire Nexus template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}


/* PrimeXeon client area brand.
 *
 * GENERATED by tools/whmcs_theme_css.py from pxsync/branding/tokens.py.
 * Edit the tokens, not this file — the invoice email and the PDF read from the
 * same table, and hand-editing here is how the three surfaces drift apart.
 *
 * nexus ships Bootstrap 4.5.3, so most of the work is redefining Bootstrap's
 * own custom properties rather than fighting its selectors.
 */

:root {
  /* --- our own tokens, used by the rules below ------------------------- */
  --px-brand: #06a4e5;
  --px-link: #056287;
  --px-ink: #1f2529;
  --px-body: #41494e;
  --px-muted: #77828a;
  --px-rule: #e6eaec;
  --px-wash: #f1f8fc;
  --px-washline: #d3e9f6;
  --px-alert: #a8442a;
  --px-paper: #ffffff;
  --px-ground: #eceff1;
  --px-xeon: #a4a6a8;

  /* --- nexus's own semantic tokens, re-pointed at the brand -------------
     The compiled theme.min.css draws almost everything through these, so
     setting them here reaches far more of the client area than writing our
     own selectors would — and it keeps us inside nexus's own vocabulary
     rather than fighting it. Stock nexus points --primary at a neutral grey;
     PrimeXeon has an actual brand colour, so the primary ramp becomes blue. */
  --primary-50:  #f1f8fc;
  --primary-100: #dcf0fb;
  --primary-200: #b9e2f7;
  --primary-300: #82ccf1;
  --primary-400: #4dc4f2;
  --primary-500: #06a4e5;
  --primary-600: #0590c8;
  --primary-700: #047ba9;
  --primary-800: #056287;
  --primary-900: #08516e;
  --primary-950: #06344a;

  --primary: #06a4e5;
  --primary-lifted: #0590c8;
  --primary-accented: #047ba9;

  /* Text and rules take the same greys as the invoice email and the PDF, so
     a customer reading the email and then the portal sees one palette. */
  --text: #1f2529;
  --text-accented: #41494e;
  --text-lifted: #41494e;
  --text-muted: #77828a;

  --border-muted: #e6eaec;
  --border: #e6eaec;
  --border-lifted: #d3e9f6;

  --bg-muted: #f1f8fc;
  --bg-lifted: #f1f8fc;
  --bg-accented: #d3e9f6;
  /* The footer's ground. Kept dark — it is the one inverted surface in the
     theme — but moved off nexus's blue-grey onto our own dark ink. */
  --bg-inverted: #0c1013;

  --error: #a8442a;
  --error-lifted: #8f3a24;
  --error-accented: #8f3a24;
}

body {
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color: var(--px-body);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5 {
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color: var(--px-ink);
  letter-spacing: -.01em;
}

/* Colour is spent on the thing that needs paying, and almost nowhere else.
   Links take --px-link rather than the brand blue: #06a4e5 on white is 2.8:1,
   under WCAG AA for body text, where the deeper shade of the same hue is
   6.8:1. The brand blue itself stays on the accent bar, buttons and icons —
   fills, where contrast is carried by the shape rather than the letterforms. */
a { color: var(--px-link); }
a:hover, a:focus { color: var(--px-brand); }

.btn-primary {
  background-color: var(--px-brand);
  border-color: var(--px-brand);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #0590c8;
  border-color: #0590c8;
}
.btn-primary:focus { box-shadow: 0 0 0 .2rem rgba(6, 164, 229, .35); }

.text-primary { color: var(--px-brand) !important; }
.bg-primary { background-color: var(--px-brand) !important; }
.badge-primary { background-color: var(--px-brand); }

/* A full-width brand bar under the masthead. The email uses a 26/74 split
   echoing the wordmark, but at page width that reads as a stray stub rather
   than a deliberate rule, so the client area takes the whole width. */
.header, .main-navbar-wrapper {
  border-bottom: 0;
  position: relative;
}
.header::after, .main-navbar-wrapper::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--px-brand);
}

/* ---- Menu ---------------------------------------------------------------
   Blue for what you can act on, grey for everything else. The navbar sits on
   paper with a faint rule, so the brand bar below it is the only strong edge. */
.navbar.main-navbar-wrapper, .navbar-light {
  background: var(--px-paper);
}
.navbar-light .navbar-nav .nav-link {
  color: var(--px-muted);
  font-weight: 500;
  border-radius: 6px;
  padding-left: .7rem;
  padding-right: .7rem;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--px-brand);
  background: var(--px-wash);
}
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
  color: var(--px-brand);
}
.navbar-nav.toolbar .nav-link { color: var(--px-muted); }
.navbar-nav.toolbar .nav-link:hover { color: var(--px-brand); }

.dropdown-menu {
  border: 1px solid var(--px-rule);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(31, 37, 41, .10);
  padding: .4rem;
}
.dropdown-item {
  color: var(--px-body);
  border-radius: 6px;
  padding: .45rem .7rem;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--px-wash);
  color: var(--px-brand);
}
.dropdown-item.active, .dropdown-item:active {
  background: var(--px-brand);
  color: #fff;
}
.dropdown-divider { border-top-color: var(--px-rule); }
.dropdown-header { color: var(--px-muted); font-weight: 600; }

/* Invoice page: the same payment panel the email leads with — the amount
   answers the question before the prose does. */
.invoice-container .invoice-header {
  background: var(--px-wash);
  border: 1px solid var(--px-washline);
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 26px;
}
.invoice-container .invoice-header .invoice-status {
  font-weight: 600;
  letter-spacing: -.01em;
}
.invoice-container h1, .invoice-container .invoice-total {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--px-ink);
}

/* Overdue swaps exactly one colour, as the email does. */
.invoice-container.is-overdue .invoice-header,
.invoice-status.status-overdue {
  background: #fdf2ef;
  border-color: #f0d9d2;
  color: var(--px-alert);
}

/* Labels beside values, not bold-prefixed prose — the pairs pattern shared with
   the email's Payment Details block and the PDF's footer. */
.table th, .table thead th {
  color: var(--px-muted);
  font-weight: 500;
  border-top: 0;
  border-bottom: 1px solid var(--px-rule);
}
.table td {
  color: var(--px-ink);
  border-top: 1px solid var(--px-rule);
}
.table td.text-right, .table th.text-right { font-variant-numeric: tabular-nums; }

hr { border-top-color: var(--px-rule); }

/* ---- Footer -------------------------------------------------------------
   nexus paints `body, html` with --bg-inverted and lets the footer show it
   through, so the footer is a DARK surface in light mode too — that is the
   theme's design, not a dark-mode leak. Its text therefore takes the dark
   palette in both schemes. nexus's own `.footer .copyright` reads
   --text-lifted, which we re-point at our body grey for the rest of the page;
   over the inverted ground that lands at 2.1:1, so the footer names its own. */
footer.footer, footer.footer a, footer.footer .nav-link { color: #eef2f4; }
footer.footer a:hover, footer.footer .nav-link:hover { color: #4dc4f2; }
footer.footer .copyright, footer.footer .notices { color: #8b969d; }

/* The rule-with-a-label divider. The theme uses it in exactly one place —
   includes/linkedaccounts.tpl, over the Facebook/Google buttons — where nexus
   renders it as small blue centred text, which reads as a stray link rather
   than a caption. Keep the divider, make the label a label: muted, not blue,
   and sitting on our own rule colour. The white behind the text has to match
   the surface it overlaps, which on register.php is paper. */
#registration .sub-heading, .sub-heading { border-top-color: var(--px-rule); }
/* nexus scopes its own version as `#registration .sub-heading span` and
   `body #order-standard_cart .sub-heading span`, so an unscoped rule here
   loses on specificity however late it loads. Match its scoping. The
   background is deliberately left alone: nexus already sets white on
   register and the cart's grey on the cart, and each is right for the
   surface the label overlaps. */
body #registration .sub-heading span,
body #order-standard_cart .sub-heading span,
.sub-heading span, .sub-heading-borderless span {
  color: var(--px-body);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .02em;
}

/* ---- Cards and forms (the register page is five of them) ---------------- */
.card {
  border: 1px solid var(--px-rule);
  border-radius: 12px;
  box-shadow: none;
}
.card-header {
  background: var(--px-wash);
  border-bottom: 1px solid var(--px-washline);
  border-radius: 12px 12px 0 0 !important;
  padding: .85rem 1.25rem;
}
/* Nexus only sizes .card-title inside .primary-content (22px) or .sidebar
   (14px). A card in neither — the register page's "Additional Information" is
   one — falls through to a bare h3 at 1.75rem, which reads as a shout. Size it
   once, here, at .card .card-title so it matches nexus's own specificity and
   wins on load order. */
.card .card-title, .card-header .card-title {
  color: var(--px-ink);
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
}
.card-body > .card-title { margin-bottom: 1rem; }

/* WHMCS nests the "(required fields are marked with *)" note inside the
   heading as italic <small>, so it inherits heading size and weight. It is a
   caption, not part of the title: drop it to its own muted line. */
.card-title small, .card-title i, .card-title em {
  display: block;
  margin-top: .35rem;
  font-size: .8rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: var(--px-muted);
}
.card-title br { display: none; }
.card-minimise { color: var(--px-muted); }

.form-control {
  border: 1px solid var(--px-rule);
  border-radius: 8px;
  color: var(--px-ink);
}
.form-control:focus {
  border-color: var(--px-brand);
  box-shadow: 0 0 0 .2rem rgba(6, 164, 229, .18);
}
.form-control::placeholder { color: var(--px-muted); opacity: 1; }
/* Field labels read at --px-body, not --px-muted: muted is 3.9:1 on paper,
   which is a caption's contrast, and a label someone is filling in is content. */
label, .control-label,
#registration label, #order-standard_cart label {
  color: var(--px-body);
  font-weight: 500;
}
.form-text, .help-block, small.text-muted { color: var(--px-muted); }
.form-group.prepend-icon i, .prepend-icon .field-icon { color: var(--px-muted); }
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--px-brand);
  border-color: var(--px-brand);
}

/* Bootstrap 4 has no .btn-default — it is a Bootstrap 3 class WHMCS still
   emits, so those buttons arrive unstyled. Give them a real secondary. */
.btn-default {
  background: var(--px-paper);
  border: 1px solid var(--px-rule);
  color: var(--px-body);
  border-radius: 8px;
}
.btn-default:hover, .btn-default:focus {
  background: var(--px-wash);
  border-color: var(--px-washline);
  color: var(--px-brand);
}
.btn { border-radius: 8px; font-weight: 500; }

/* Bootstrap's stock success green carries white text at 2.5:1. The marketing
   opt-in Yes/No control is a bootstrap-switch, which uses that green for its
   "on" handle, so it is on the register page every new client sees. Darkened
   until the label is legible; the hue is unchanged. */
.btn-success, .btn-success:not(:disabled):not(.disabled).active {
  background-color: #1c7430;
  border-color: #1c7430;
}
.btn-success:hover, .btn-success:focus {
  background-color: #166127;
  border-color: #166127;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
  background-color: #1c7430;
  border-color: #1c7430;
}
.bootstrap-switch { border-color: var(--px-rule); }

/* Bootstrap's info cyan is another stock colour that fails under white text
   (3.0:1); the knowledgebase puts it on every category's article count. */
.badge-info { background-color: #117a8b; }

.card-sidebar.panel-warning {
  border-color: var(--px-washline);
}
.card-sidebar.panel-warning .card-header {
  background: var(--px-wash);
  color: var(--px-ink);
}

/* Dark mode, driven by the same tokens as the email so a customer with a dark
   OS gets a dark invoice email and a dark portal rather than one of each. */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #4dc4f2;
    --px-brand: #4dc4f2;
    --px-link: #4dc4f2;
    --px-ink: #eef2f4;
    --px-body: #c2cbd1;
    --px-muted: #8b969d;
    --px-rule: #283136;
    --px-wash: #0e2733;
    --px-washline: #1c4155;
    --px-alert: #e0866a;
    --px-paper: #161c20;
    --px-ground: #0c1013;
    --px-xeon: #7f898e;

    /* nexus's own tokens follow the same swap, or the compiled theme keeps
       painting light text colours and white grounds around our dark ones. */
    --primary-lifted: #6fd0f5;
    --primary-accented: #9adff8;
    --text: #eef2f4;
    --text-accented: #c2cbd1;
    --text-lifted: #c2cbd1;
    --text-muted: #8b969d;
    --border-muted: #283136;
    --border: #283136;
    --border-lifted: #1c4155;
    --white: #161c20;
    --bg: #161c20;
    --bg-muted: #0e2733;
    --bg-lifted: #0e2733;
    --bg-accented: #1c4155;
    --bg-inverted: #05080a;
    --error: #e0866a;
  }
  body { background: #0c1013; color: #c2cbd1; }
  .card, .panel, .modal-content { background: #161c20; }
  /* The masthead and the home page's shortcut tiles carry a hard-coded white
     in the compiled theme rather than reading a token, so they are the two
     surfaces that stay light unless named explicitly. Both selectors mirror
     nexus's own — `header.header` and `.action-icon-btns a` — because a looser
     one loses to them on specificity however late it loads. */
  header.header { background: #161c20; }
  .action-icon-btns a {
    background-color: #161c20;
    color: #c2cbd1;
  }
  .action-icon-btns a:hover, .action-icon-btns a:focus {
    background-color: #0e2733;
    color: #eef2f4;
  }
  /* Two more hard-coded lights in the compiled theme, both matched at nexus's
     own specificity: the masthead's account menu and every list-group row
     (the knowledgebase and downloads are built entirely from them). */
  header.header .navbar a { color: #c2cbd1; }
  header.header .navbar a:hover { color: #4dc4f2; }
  .list-group-item {
    background-color: #161c20;
    color: #c2cbd1;
    border-color: #283136;
  }
  .list-group-item:hover, .list-group-item:focus {
    background-color: #0e2733;
    color: #eef2f4;
  }
  /* Bootstrap ships .text-muted with !important, so this needs it to land. */
  .text-muted { color: #8b969d !important; }
  .btn-secondary {
    background-color: #161c20;
    border-color: #283136;
    color: #c2cbd1;
  }
  /* The "off" handle is .bootstrap-switch-secondary, not -default: it carries
     a hard white with near-black text, which on a dark ground reads at 1.1:1. */
  .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary,
  .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
  .bootstrap-switch .bootstrap-switch-label {
    background-color: #161c20;
    color: #c2cbd1;
  }
  #registration label, #order-standard_cart label { color: #c2cbd1; }
  .table td { color: #eef2f4; }
  .btn-primary { background-color: #0b8ec7; border-color: #0b8ec7; }
  .navbar.main-navbar-wrapper, .navbar-light { background: #161c20; }
  .dropdown-menu { background: #161c20; border-color: #283136; }
  .dropdown-item { color: #c2cbd1; }
  .card-header { background: #0e2733; border-bottom-color: #1c4155; }
  /* Here the background DOES need overriding — nexus's is a hard white. */
  body #registration .sub-heading span,
  body #order-standard_cart .sub-heading span,
  .sub-heading span, .sub-heading-borderless span { background: #161c20; }
  .form-control {
    background: #161c20;
    border-color: #283136;
    color: #eef2f4;
  }
  .btn-default {
    background: #161c20;
    border-color: #283136;
    color: #c2cbd1;
  }
}