/* ============================================================================
 * SurgeNode v2 :: sn-tokens.css
 *
 * FROZEN. Phase 2 agents READ this file and must not edit it. If you need a
 * colour, a radius or a font, reference the custom property. Do not redeclare
 * one, and do not add a new palette here. Page level and component work goes
 * in css/custom.css, which loads after this file and therefore wins at equal
 * specificity.
 *
 * Provenance: every custom property below was read out of
 *   CT 105 /var/www/html-v2/app/globals.css   (branch v3-simple)
 *   CT 105 /var/www/html-v2/app/layout.tsx
 * and resolved to its LAST declaration at a global scope. globals.css is four
 * stacked generations of the design and the early values are dead; the file
 * declares the radii as 0px around line 88 and then overrides them to the soft
 * values around line 1646. The soft values are the live ones.
 *
 * docs/nova-design-system.md is STALE and was not used. It documents fonts,
 * radii and shadows that are not live.
 *
 * Design language, stated once so it does not have to be rediscovered:
 *   flat, hairline borders instead of shadows, one cobalt accent on a
 *   near black ground, soft radii, no glows.
 * ==========================================================================*/


/* ---------------------------------------------------------------------------
 * 1. Fonts, self hosted.
 *
 * The marketing site gets these from next/font. WHMCS has no equivalent
 * pipeline, so the woff2 files are served from this theme. They were taken
 * from the Pterodactyl panel, which already self hosts the same three files,
 * and verified byte identical to the official @fontsource-variable packages.
 *
 * All three are variable fonts on the weight axis, so one file per family
 * covers every weight the design uses. Do not add static weight files.
 * ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/geist-mono-latin-wght-normal.woff2') format('woff2-variations');
}


/* ---------------------------------------------------------------------------
 * 2. Tokens.
 *
 * Ordered alphabetically, as extracted. Values that are var() references are
 * left as references so the indirection the site relies on survives: the
 * per game theme scopes in section 3 work by reassigning --cobalt, and every
 * accent in the theme has to follow it.
 * ------------------------------------------------------------------------ */

:root {
  /* Family names. next/font emits --font-sans-family and friends as generated
     face names; here they are the self hosted family names declared above. */
  --font-sans-family: 'Inter';
  --font-display-family: 'Plus Jakarta Sans';
  --font-mono-family: 'Geist Mono';

  --accent: var(--color-sky-400);
  --accent-foreground: var(--color-slate-950);
  --amber: #ffb900;
  --amber-dim: rgba(255,185,0,.16);
  --background: var(--color-slate-950);
  --band: var(--font-mono-family), ui-monospace, monospace;
  --band-bg: #000000;
  --border: var(--line);
  --brand: var(--font-display-family), sans-serif;
  --card: var(--ink-850);
  --card-foreground: var(--color-slate-100);
  --cobalt: #00bcff;
  --cobalt-dim: rgba(0,188,255,.18);
  --cobalt-hi: #00bcff;
  --cobalt-lo: #0092c7;
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-amber: var(--color-amber-400);
  --color-amber-400: #ffb900;
  --color-background: var(--background);
  --color-border: var(--border);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-cobalt: var(--color-sky-400);
  --color-cobalt-hi: var(--color-sky-400);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-emerald-300: #22c55e;
  --color-foreground: var(--foreground);
  --color-ink-100: var(--color-slate-100);
  --color-ink-200: var(--color-slate-200);
  --color-ink-300: var(--color-slate-300);
  --color-ink-400: var(--color-slate-400);
  --color-ink-500: var(--color-slate-600);
  --color-ink-600: var(--color-slate-700);
  --color-ink-700: var(--color-slate-800);
  --color-ink-800: var(--color-slate-900);
  --color-ink-850: var(--ink-850);
  --color-ink-900: var(--color-slate-950);
  --color-input: var(--input);
  --color-mint: var(--color-emerald-300);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-ring: var(--ring);
  --color-rose-400: #ff4d6d;
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-sky-400: #00bcff;
  --color-sky-500: #00a6e0;
  --color-sky-600: #0092c7;
  --color-slate-50: #ffffff;
  --color-slate-100: #f5f5f5;
  --color-slate-200: #d4d4d4;
  --color-slate-300: #c9c9c9;
  --color-slate-400: #8f8f8f;
  --color-slate-500: #8f8f8f;
  --color-slate-600: #2a2a2a;
  --color-slate-700: #1c1c1c;
  --color-slate-800: #111111;
  --color-slate-900: #0a0a0a;
  --color-slate-950: #050505;
  --color-success: var(--success);
  --danger: #ff4d6d;
  --destructive: var(--color-rose-400);
  --destructive-foreground: #fff;
  --display: var(--font-display-family), var(--font-sans-family), ui-sans-serif, sans-serif;
  --dot-color: rgba(255,255,255,.09);
  --dot-gap: 22px;
  --dot-size: 1px;
  --font-display: var(--display);
  --font-mono: var(--mono);
  --font-sans: var(--sans);
  --foreground: var(--color-slate-100);
  --ink-100: #f5f5f5;
  --ink-200: #d4d4d4;
  --ink-300: #c9c9c9;
  --ink-400: #8f8f8f;
  --ink-500: #8f8f8f;
  --ink-600: #2a2a2a;
  --ink-700: #1c1c1c;
  --ink-750: #0d0d0d;
  --ink-800: #111111;
  --ink-850: #0a0a0a;
  --ink-900: #050505;
  --ink-on-accent: #04202c;
  --input: var(--line);
  --line: rgba(255,255,255,.14);
  --line-soft: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.22);
  --mint: #22c55e;
  --mint-dim: rgba(34,197,94,.14);
  --mono: var(--font-mono-family), ui-monospace, 'SF Mono', Menlo, monospace;
  --muted: var(--color-slate-900);
  --muted-foreground: var(--color-slate-400);
  --popover: var(--ink-850);
  --popover-foreground: var(--color-slate-100);
  --primary: var(--color-sky-400);
  --primary-foreground: var(--color-slate-950);
  --r-btn: 6px;
  --r-chip: 6px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-pill: 999px;
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --ring: var(--color-sky-400);
  --sans: var(--font-sans-family), ui-sans-serif, system-ui, sans-serif;
  --secondary: var(--color-slate-900);
  --secondary-foreground: var(--color-slate-100);
  --shadow-accent: 0 0 0 1px var(--cobalt);
  --shadow-hard: 0 1px 0 rgba(255,255,255,.04);
  --stat: var(--font-display-family), sans-serif;
  --success: var(--color-emerald-300);

  /* TRAP, carried verbatim for fidelity but deliberately never referenced
     below. --shadow-soft and --shadow-pop are offset "pop" shadows from an
     earlier brutalist generation that the flattening pass never got to. Every
     rule that used to consume them now ends in `box-shadow: none`, so on the
     live site they are declared and unused. Do not start using them: a 5px
     offset white shadow is the one thing on this design doing shadows instead
     of hairlines. Use --shadow-hard, or nothing. */
  --shadow-soft: 5px 5px 0 rgba(255,255,255,.06);
  --shadow-pop: 5px 5px 0 rgba(255,255,255,.06);

  /* Chrome measurements. Not from globals.css; these are the WHMCS side
     equivalents of the site's .nav-strip and .wrap, kept here so the header
     and footer templates and any Phase 2 page agree on one number. */
  --sn-wrap-max: 1280px;
  --sn-nav-island-max: 1120px;
  --sn-ease: cubic-bezier(.22,.61,.36,1);
}


/* ---------------------------------------------------------------------------
 * 3. Per game accent scopes.
 *
 * The site reassigns --cobalt per game so a game page keeps its own colour
 * without any component knowing about it. Carried here in full because the
 * store sells per game products and this file is frozen: if a Phase 2 agent
 * needs game branding on a product page, the scope has to already exist.
 *
 * Usage: put the class on any ancestor, typically <body> or a card wrapper.
 * Every accent below inherits through var(--cobalt), including button fills,
 * focus rings and link colour, so nothing else needs to change.
 * ------------------------------------------------------------------------ */

.theme-minecraft    { --cobalt: #4FBF56; --cobalt-hi: #4FBF56; --ink-on-accent: #06170a; --game-accent: #4FBF56; }
.theme-rust         { --cobalt: #E13B22; --cobalt-hi: #E13B22; --ink-on-accent: #1d0703; --game-accent: #E13B22; }
.theme-cs2          { --cobalt: #F5B325; --cobalt-hi: #F5B325; --ink-on-accent: #1c1300; --game-accent: #F5B325; }
.theme-samp         { --cobalt: #F26F22; --cobalt-hi: #F26F22; --ink-on-accent: #1a0c02; --game-accent: #F26F22; }
.theme-hytale       { --cobalt: #8B5CF6; --cobalt-hi: #8B5CF6; --ink-on-accent: #120826; --game-accent: #8B5CF6; }
.theme-palworld     { --cobalt: #38BDF8; --cobalt-hi: #38BDF8; --ink-on-accent: #04121f; --game-accent: #38BDF8; }
.theme-terraria     { --cobalt: #2FD69E; --cobalt-hi: #2FD69E; --ink-on-accent: #03170f; --game-accent: #2FD69E; }
.theme-sbox         { --cobalt: #2E6BE8; --cobalt-hi: #2E6BE8; --ink-on-accent: #040f26; --game-accent: #2E6BE8; }
.theme-fivem        { --cobalt: #00BCFF; --cobalt-hi: #00BCFF; --ink-on-accent: #04202c; --game-accent: #00BCFF; }
.theme-arma3        { --cobalt: #6E7F3C; --cobalt-hi: #6E7F3C; --ink-on-accent: #0d1204; --game-accent: #6E7F3C; }
.theme-reforger     { --cobalt: #C79A5B; --cobalt-hi: #C79A5B; --ink-on-accent: #1d1405; --game-accent: #C79A5B; }
.theme-squad        { --cobalt: #4E7A5E; --cobalt-hi: #4E7A5E; --ink-on-accent: #04140b; --game-accent: #4E7A5E; }
.theme-redm         { --cobalt: #C1322B; --cobalt-hi: #C1322B; --ink-on-accent: #1d0503; --game-accent: #C1322B; }
.theme-gmod         { --cobalt: #2B7FB8; --cobalt-hi: #2B7FB8; --ink-on-accent: #03121d; --game-accent: #2B7FB8; }
.theme-dayz         { --cobalt: #8A8F5C; --cobalt-hi: #8A8F5C; --ink-on-accent: #12140a; --game-accent: #8A8F5C; }
.theme-tf2          { --cobalt: #CF7336; --cobalt-hi: #CF7336; --ink-on-accent: #1c0e03; --game-accent: #CF7336; }
.theme-assettocorsa { --cobalt: #D0D3D8; --cobalt-hi: #D0D3D8; --ink-on-accent: #0b0d10; --game-accent: #D0D3D8; }


/* ---------------------------------------------------------------------------
 * 4. Base elements.
 *
 * Everything from here down has to out rank templates/nexus/css/theme.min.css,
 * which is a LIGHT theme and is 242 KB of fairly specific selectors. The
 * `body` ancestor prefix appears on a lot of these rules for exactly that
 * reason, and it is the same trick globals.css itself resorts to in its last
 * generation. It lifts a bare class from (0,1,0) to (0,1,1) without needing
 * !important, which would take the override away from Phase 2 as well.
 * ------------------------------------------------------------------------ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html,
body {
  background: var(--ink-900);
  color: var(--ink-100);
}

body {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Tracking is ONE value across every heading level, matching the live site.
   globals.css resolves .h-display/.h-1/.h-2/.h-3 to letter-spacing -0.018em at
   its final generation (globals.css:1576-1580) and no component <style> block
   overrides it. Earlier generations used -0.03em (globals.css:871) and -0.015em
   (globals.css:873); those are dead. Do not reintroduce a per-level value. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--display);
  color: var(--ink-100);
  letter-spacing: -0.018em;
  font-weight: 700;
}

h1, .h1 { font-size: clamp(26px, 2.9vw, 40px); line-height: 1.15; font-weight: 800; }
h2, .h2 { font-size: clamp(21px, 2.1vw, 29px); line-height: 1.2;  font-weight: 800; }
h3, .h3 { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.3; font-weight: 700; }
h4, .h4 { font-size: 16px; }
h5, .h5 { font-size: 14.5px; }
h6, .h6 { font-size: 13px; }

p { color: var(--ink-200); }

a {
  color: var(--cobalt);
  text-decoration: none;
  transition: color .15s ease;
}

a:hover,
a:focus {
  color: color-mix(in srgb, var(--cobalt) 86%, #ffffff);
  text-decoration: none;
}

small, .small { font-size: 12.5px; }

hr { border-top: 1px solid var(--line); }

code, kbd, pre, samp,
.text-monospace {
  font-family: var(--mono);
}

code {
  color: var(--cobalt);
  background: var(--ink-800);
  border-radius: var(--r-chip);
  padding: 2px 5px;
  font-size: 12.5px;
}

pre {
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink-200);
  padding: 14px 16px;
}

::selection {
  background: var(--cobalt);
  color: var(--ink-on-accent);
}

/* One visible focus convention site wide, matching the marketing site.
   :focus-visible only, so a mouse click on a button does not draw a ring but
   a keyboard tab does. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
body .btn:focus-visible,
body .nav-link:focus-visible {
  outline: 2px solid var(--cobalt-hi);
  outline-offset: 2px;
  border-radius: inherit;
  box-shadow: none;
}

/* Scrollbars. Firefox first, then the WebKit pseudo elements. */
html {
  scrollbar-color: var(--ink-600) var(--ink-900);
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb {
  background: var(--ink-600);
  border-radius: var(--r-pill);
  border: 2px solid var(--ink-900);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }


/* ---------------------------------------------------------------------------
 * 5. Dot grid.
 *
 * The same background layer the marketing site paints as .page-grid and the
 * Pterodactyl panel also uses, so the three products match. Exactly
 * rgba(255,255,255,.09), 22px spacing, 1px dots.
 *
 * position: fixed rather than a body background so it does not scroll and does
 * not multiply the painted area with page length. z-index 0 and
 * pointer-events: none keep it behind everything and inert. Every card surface
 * in section 6 is opaque, so the grid never shows through a panel.
 * ------------------------------------------------------------------------ */

.sn-page-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(var(--dot-color) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-gap) var(--dot-gap);
  background-position: center top;
  background-repeat: repeat;
}

/* Anything that has to sit above the grid needs a stacking context. The three
   page level landmarks get one here so no page has to remember. */
body > header.header,
body > #main-body,
body > footer.footer {
  position: relative;
  z-index: 1;
}

@media (prefers-contrast: more) {
  .sn-page-grid { display: none; }
}


/* ---------------------------------------------------------------------------
 * 6. Bootstrap 4 bridge.
 *
 * nexus ships Bootstrap 4.5.3 and every .tpl in the theme is written against
 * it. These rules repaint the primitives that appear on more or less every
 * page onto the tokens above, so that Phase 2 agents inherit a dark surface
 * instead of each writing their own.
 *
 * This is deliberately primitives only. Page specific work belongs in
 * custom.css.
 * ------------------------------------------------------------------------ */

/* --- Buttons ---
   Box model matched to the site: padding 10px 16px and line-height 1.6, which
   the site inherits from `body` because its own .btn never declares one
   (globals.css:375 sets display/gap/white-space only). Bootstrap's .btn ships
   line-height 1.5, so without this the button is ~3px shorter than the site's.

   DELIBERATELY NOT PORTED, and this is not an oversight:
     display: inline-flex  - `body .btn` is (0,1,1) and would outrank
       Bootstrap's `.btn-block { display: block }` at (0,1,0), collapsing the
       full-width promo-code button at standard_cart/viewcart.tpl:493 and the
       five domain buttons in configureproductdomain.tpl, plus 10+ nexus
       client-area templates. That is a live-cart regression traded for nothing.
     gap: 8px  - the site's buttons are `text + <svg>` with no literal space.
       WHMCS markup is `<i class="fas ..."></i>` followed by real whitespace, so
       a gap here ADDS to a space that is already there and reads wider than the
       site, not closer to it. Different markup, so it is not a like-for-like
       port. Once padding and line-height match, inline-block and inline-flex
       render a plain text button identically. */
body .btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--r-btn);
  padding: 10px 16px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

body .btn-lg { font-size: 15px; padding: 13px 22px; }
body .btn-sm { font-size: 13px; padding: 6px 12px; }

body .btn-primary,
body .btn-info {
  background: var(--cobalt);
  border-color: var(--cobalt);
  color: var(--ink-on-accent);
}

/* color-mix against the CURRENT accent, not against literal cyan, so a page
   inside a .theme-<game> scope lightens its own colour on hover instead of
   snapping back to brand cobalt. */
body .btn-primary:hover,
body .btn-primary:focus,
body .btn-info:hover,
body .btn-info:focus {
  background: color-mix(in srgb, var(--cobalt) 86%, #ffffff);
  border-color: color-mix(in srgb, var(--cobalt) 86%, #ffffff);
  color: var(--ink-on-accent);
}

body .btn-default,
body .btn-secondary,
body .btn-light {
  background: var(--ink-850);
  border-color: var(--line-strong);
  color: var(--ink-100);
}

body .btn-default:hover,
body .btn-secondary:hover,
body .btn-light:hover {
  background: var(--ink-800);
  border-color: var(--line-strong);
  color: var(--ink-100);
}

body .btn-outline-light,
body .btn-outline-secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-200);
}

body .btn-outline-light:hover,
body .btn-outline-secondary:hover {
  background: var(--ink-800);
  border-color: var(--line-strong);
  color: var(--ink-100);
}

body .btn-success { background: var(--mint); border-color: var(--mint); color: #04140b; }
body .btn-success:hover { background: color-mix(in srgb, var(--mint) 86%, #ffffff); border-color: color-mix(in srgb, var(--mint) 86%, #ffffff); }
body .btn-danger  { background: var(--danger); border-color: var(--danger); color: #1d0703; }
body .btn-danger:hover { background: color-mix(in srgb, var(--danger) 86%, #ffffff); border-color: color-mix(in srgb, var(--danger) 86%, #ffffff); }
body .btn-warning { background: var(--amber); border-color: var(--amber); color: #1a1200; }
body .btn-warning:hover { background: #ffc933; border-color: #ffc933; }
body .btn-link { color: var(--cobalt); border-color: transparent; background: transparent; }

body .btn:disabled,
body .btn.disabled { opacity: var(--disabled-opacity); }

/* --- Cards and panels --- */
body .card,
body .panel {
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: none;
  color: var(--ink-200);
}

body .card-header,
body .panel-heading {
  background: var(--ink-800);
  border-bottom: 1px solid var(--line);
  color: var(--ink-100);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: 0;
}

body .card-header:first-child {
  border-top-left-radius: calc(var(--r-md) - 1px);
  border-top-right-radius: calc(var(--r-md) - 1px);
}

body .card-footer {
  background: var(--ink-800);
  border-top: 1px solid var(--line);
  color: var(--ink-200);
}

body .card-title { color: var(--ink-100); }
body .card-body { color: var(--ink-200); }

/* --- Forms --- */
body .form-control,
body .custom-select,
body select.form-control,
body textarea.form-control,
body .input-group-text {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  color: var(--ink-100);
  font-family: var(--sans);
  font-size: 14px;
  box-shadow: none;
}

body .form-control:focus,
body .custom-select:focus {
  background: var(--ink-800);
  border-color: var(--cobalt);
  color: var(--ink-100);
  box-shadow: var(--shadow-accent);
  outline: none;
}

body .form-control::placeholder { color: var(--ink-400); opacity: 1; }
body .form-control:disabled,
body .form-control[readonly] { background: var(--ink-750); color: var(--ink-400); }

body .input-group-text {
  background: var(--ink-750);
  color: var(--ink-300);
}

/* The native select popup is drawn by the OS, so a dark control with light
   options is unreadable on Windows and Linux until the option colours are set
   too. Chrome and Firefox both honour this. */
body select.form-control option,
body .custom-select option {
  background: var(--ink-800);
  color: var(--ink-100);
}

body label,
body .col-form-label { color: var(--ink-200); font-size: 13.5px; font-weight: 500; }
body .form-text,
body .help-block { color: var(--ink-400); }

body .custom-control-label::before {
  background: var(--ink-800);
  border: 1px solid var(--line-strong);
}
body .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--cobalt);
  border-color: var(--cobalt);
}

/* --- Tables --- */
body .table {
  color: var(--ink-200);
  border-color: var(--line);
}

body .table th,
body .table thead th {
  color: var(--ink-400);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  border-bottom: 1px solid var(--line);
  border-top: 0;
}

body .table td { border-top: 1px solid var(--line-soft); }

body .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.02); }
body .table-hover tbody tr:hover { background: var(--ink-800); color: var(--ink-100); }
body .table-bordered,
body .table-bordered td,
body .table-bordered th { border-color: var(--line); }

/* --- Alerts --- */
body .alert {
  border-radius: var(--r-md);
  border-width: 1px;
  border-style: solid;
  box-shadow: none;
  font-size: 14px;
}

body .alert-info    { background: var(--cobalt-dim); border-color: var(--cobalt); color: var(--ink-100); }
body .alert-success { background: var(--mint-dim);   border-color: var(--mint);   color: var(--ink-100); }
body .alert-warning { background: var(--amber-dim);  border-color: var(--amber);  color: var(--ink-100); }
body .alert-danger  { background: rgba(255,77,109,.14); border-color: var(--danger); color: var(--ink-100); }
body .alert a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }

/* --- Badges --- */
body .badge {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0;
  border-radius: var(--r-chip);
  padding: 4px 7px;
}

body .badge-primary,
body .badge-info { background: var(--cobalt); color: var(--ink-on-accent); }
body .badge-dark  { background: var(--ink-700); color: var(--ink-100); }
body .badge-light { background: var(--ink-700); color: var(--ink-100); }
body .badge-success { background: var(--mint); color: #04140b; }
body .badge-danger  { background: var(--danger); color: #1d0703; }
body .badge-warning { background: var(--amber); color: #1a1200; }
body .badge-pill { border-radius: var(--r-pill); }

/* --- Dropdowns --- */
body .dropdown-menu {
  background: var(--ink-850);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  color: var(--ink-200);
  padding: 6px;
}

body .dropdown-menu .dropdown-item,
body .dropdown-menu > li > a {
  color: var(--ink-200);
  border-radius: var(--r-chip);
  font-size: 13.5px;
  padding: 8px 10px;
}

body .dropdown-menu .dropdown-item:hover,
body .dropdown-menu .dropdown-item:focus,
body .dropdown-menu > li > a:hover {
  background: var(--ink-800);
  color: var(--ink-100);
}

body .dropdown-divider { border-top: 1px solid var(--line); }

/* --- List groups --- */
body .list-group-item {
  background: transparent;
  border-color: var(--line-soft);
  color: var(--ink-200);
  font-size: 13.5px;
}

body .list-group-item-action:hover,
body .list-group-item-action:focus {
  background: var(--ink-800);
  color: var(--ink-100);
}

body .list-group-item.active {
  background: var(--cobalt-dim);
  border-color: var(--line-soft);
  color: var(--ink-100);
  box-shadow: inset 2px 0 0 var(--cobalt);
}

body .list-group-item.disabled { color: var(--ink-500); background: transparent; }

/* --- Modals --- */
body .modal-content {
  background: var(--ink-850);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--ink-200);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

body .modal-header,
body .modal-footer { border-color: var(--line); }
body .modal-title { color: var(--ink-100); }
body .modal-backdrop.show { opacity: .72; background: #000; }
body .close { color: var(--ink-200); text-shadow: none; opacity: .8; }
body .close:hover { color: var(--ink-100); opacity: 1; }

/* --- Popovers and tooltips --- */
body .popover {
  background: var(--ink-850);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink-200);
}
body .popover-header { background: var(--ink-800); border-bottom-color: var(--line); color: var(--ink-100); }
body .popover-body { color: var(--ink-200); }
body .tooltip-inner {
  background: var(--ink-700);
  color: var(--ink-100);
  border-radius: var(--r-chip);
  font-size: 12.5px;
}

/* --- Tabs, pills, pagination, breadcrumb --- */
body .nav-tabs { border-bottom: 1px solid var(--line); }
body .nav-tabs .nav-link {
  color: var(--ink-400);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-weight: 600;
}
body .nav-tabs .nav-link:hover { color: var(--ink-100); border-bottom-color: var(--line-strong); }
body .nav-tabs .nav-link.active {
  background: transparent;
  color: var(--ink-100);
  border-bottom-color: var(--cobalt);
}

body .nav-pills .nav-link { border-radius: var(--r-chip); color: var(--ink-300); }
body .nav-pills .nav-link.active { background: var(--cobalt); color: var(--ink-on-accent); }

body .page-link {
  background: var(--ink-850);
  border-color: var(--line);
  color: var(--ink-200);
}
body .page-link:hover { background: var(--ink-800); border-color: var(--line-strong); color: var(--ink-100); }
body .page-item.active .page-link { background: var(--cobalt); border-color: var(--cobalt); color: var(--ink-on-accent); }
body .page-item.disabled .page-link { background: var(--ink-850); border-color: var(--line-soft); color: var(--ink-500); }

body .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 13px;
}
body .breadcrumb-item,
body .breadcrumb-item + .breadcrumb-item::before { color: var(--ink-400); }
body .breadcrumb-item a { color: var(--ink-300); }
body .breadcrumb-item a:hover { color: var(--cobalt); }
body .breadcrumb-item.active { color: var(--ink-100); }

/* --- Progress, misc --- */
body .progress { background: var(--ink-700); border-radius: var(--r-pill); }
body .progress-bar { background: var(--cobalt); }
body .text-muted { color: var(--ink-400); }
body .bg-light { background: var(--ink-800); }
body .border { border-color: var(--line); }


/* ---------------------------------------------------------------------------
 * 7. Header chrome.
 *
 * Matches the marketing site's nav: transparent at rest, condensing into a
 * rounded island once the page scrolls, brand wordmark with a cobalt "Node".
 *
 * The island state is driven by data-scrolled on .sn-nav-strip, set by the
 * small inline listener in header.tpl. If that script never runs the bar is
 * simply a static, readable bar, which is the whole no JS story.
 *
 * Everything here is styling only. The markup underneath is nexus's, so the
 * Bootstrap collapse, the dropdown toggles, the notifications popover and the
 * cart count element all still behave exactly as WHMCS expects.
 * ------------------------------------------------------------------------ */

body #header.header {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Top bar, the logged in strip that carries notifications and the account
   switcher. Kept above the nav, quiet. */
body #header .topbar {
  background: var(--ink-850);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}

body #header .topbar .btn {
  background: transparent;
  border-color: transparent;
  color: var(--ink-300);
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 10px;
}

body #header .topbar .btn:hover { background: var(--ink-800); color: var(--ink-100); }
body #header .topbar .input-group-text {
  background: transparent;
  border: 0;
  color: var(--ink-400);
  font-size: 12.5px;
}
body #header .topbar .btn-active-client { color: var(--ink-100); font-weight: 600; }

body .client-alerts { list-style: none; margin: 0; padding: 0; }
body .client-alerts li a {
  display: flex;
  gap: 8px;
  padding: 8px 6px;
  border-radius: var(--r-chip);
  color: var(--ink-200);
}
body .client-alerts li a:hover { background: var(--ink-800); color: var(--ink-100); }
body .client-alerts li.none { color: var(--ink-400); padding: 8px 6px; }

/* --- The nav strip and its island --- */
body .sn-nav-strip {
  --sn-island-gap: 14px;
  position: sticky;
  top: 0;
  z-index: 1030;
  background: transparent;
  border-bottom: 1px solid transparent;
  padding-top: 0;
  transition: border-color .28s ease, padding-top .34s var(--sn-ease), background-color .28s ease;
}

body .sn-nav-strip[data-scrolled="true"] { padding-top: var(--sn-island-gap); }

body .sn-nav-strip .navbar {
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 0;
  transition:
    max-width .34s var(--sn-ease),
    margin .34s var(--sn-ease),
    padding .34s var(--sn-ease),
    background-color .28s ease,
    border-color .28s ease,
    border-radius .34s var(--sn-ease);
}

body .sn-nav-strip[data-scrolled="true"] > .sn-nav-bar {
  max-width: var(--sn-nav-island-max);
  margin: 0 auto 14px;
  padding: 9px 16px 9px 20px;
  border-radius: var(--r-pill);
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--ink-850) 72%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  overflow: visible;
}

/* The main navbar row hides itself into the island once scrolled on wide
   screens, so the island stays a pill rather than a rounded slab. Below the
   xl breakpoint the row is already collapsed behind the burger. */
body .sn-nav-strip[data-scrolled="true"] .main-navbar-wrapper {
  border-top-color: transparent;
}

/* --- Brand --- */
body .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0;
  color: var(--ink-100);
}

/* The site has ONE logo size, .brand-mark { height: 26px } (globals.css:267),
   never overridden. The wordmark inherits 15px from .brand (globals.css:266).
   This is the element the customer compares directly across the two systems:
   site wordmark, click Deploy, cart wordmark. Keep both in step. */
body .navbar-brand .logo-img { max-height: 26px; width: auto; display: block; }

body .sn-brand-name {
  font-family: var(--brand);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink-100);
  line-height: 1;
}

body .sn-brand-name span { color: var(--cobalt); }

/* --- Nav links, rendered from the WHMCS menu object graph --- */
body .main-navbar-wrapper {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-soft);
  padding: 0;
}

body .sn-nav-strip[data-scrolled="true"] .main-navbar-wrapper { border-top-color: transparent; }

body #header .navbar-nav .nav-link,
body #header .navbar-nav > li > a,
body #header #nav > li > a {
  font-family: var(--sans);
  /* 13px, not the 14px in globals.css:1599. nav.tsx:671 redeclares .nav-link at
     equal specificity and renders in <body>, i.e. after the stylesheet, so it
     wins the cascade. Verified against the served markup on :3002. */
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-200);
  border-radius: var(--r-btn);
  padding: 8px 11px;
  transition: background-color .15s ease, color .15s ease;
}

body #header .navbar-nav > li > a:hover,
body #header #nav > li > a:hover,
body #header .navbar-nav > li.active > a {
  background: var(--ink-800);
  color: var(--ink-100);
}

body #header .navbar-nav > li > a > i { color: var(--ink-400); }
body #header .navbar-nav > li > a:hover > i,
body #header .navbar-nav > li.active > a > i { color: var(--cobalt); }

/* The cart button and the burger, the two toolbar controls. */
body #header .toolbar .nav-link {
  color: var(--ink-200);
  border-radius: var(--r-btn);
  border: 1px solid transparent;
}
body #header .toolbar .nav-link:hover { background: var(--ink-800); color: var(--ink-100); }
body #header .cart-btn .badge { background: var(--cobalt); color: var(--ink-on-accent); }

/* Knowledgebase search in the header. */
body #header .search .form-control {
  background: var(--ink-800);
  border-color: var(--line);
  border-left: 0;
  color: var(--ink-100);
  font-size: 13.5px;
}
body #header .search .btn {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-right: 0;
  color: var(--ink-400);
}
body #header .search .form-control:focus { box-shadow: none; border-color: var(--cobalt); }

/* --- Breadcrumb bar --- */
body .master-breadcrumb {
  background: transparent;
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 0;
  position: relative;
  z-index: 1;
}


/* ---------------------------------------------------------------------------
 * 8. Sidebar chrome.
 *
 * The client area's left rail. Rendered from $primarySidebar and
 * $secondarySidebar, so the shape is whatever WHMCS and any hooks put there.
 * ------------------------------------------------------------------------ */

body .sidebar .card-sidebar {
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: none;
}

body .sidebar .card-sidebar .card-header {
  background: transparent;
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
}

body .sidebar .card-sidebar .card-title {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-400);
  text-transform: none;
}

body .sidebar .card-sidebar .card-title > i { color: var(--cobalt); }
body .sidebar .card-minimise { color: var(--ink-500); font-size: 11px; cursor: pointer; }

body .sidebar .list-group-item {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-soft);
  padding: 9px 14px;
  color: var(--ink-200);
}

body .sidebar .list-group-item:first-child { border-top: 0; }
body .sidebar .list-group-item-action:hover { background: var(--ink-800); color: var(--ink-100); }
body .sidebar .list-group-item.active {
  background: var(--cobalt-dim);
  color: var(--ink-100);
  box-shadow: inset 2px 0 0 var(--cobalt);
}

body .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 10px; }
body .sidebar-menu-item-icon-wrapper {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: var(--r-chip);
  background: var(--ink-800);
  border: 1px solid var(--line);
}
body .sidebar-menu-item-icon { color: var(--cobalt); font-size: 12px; }
body .sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper { border-color: var(--cobalt); }
body .sidebar-menu-item-label { flex: 1 1 auto; min-width: 0; }
body .sidebar-menu-item-badge { flex: 0 0 auto; }


/* ---------------------------------------------------------------------------
 * 9. Footer chrome.
 *
 * Matches the marketing site's footer: flat near black, a hairline top rule,
 * a brand column with a blurb and social buttons, then link columns.
 * ------------------------------------------------------------------------ */

body #footer.footer {
  background: var(--ink-900);
  border-top: 1px solid var(--line);
  color: var(--ink-400);
  margin-top: 64px;
  padding: 52px 0 28px;
}

body .sn-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 40px;
}

body .sn-footer-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; }
body .sn-footer-brand .logo-img { max-height: 26px; width: auto; }

body .sn-footer-blurb {
  color: var(--ink-200);
  font-size: 13.5px;
  line-height: 1.65;
  max-width: 280px;
  margin: 0 0 20px;
}

/* Sentence case, NOT uppercase. footer.tsx:105 sets no text-transform and
   globals.css:1810 (`body .footer h4`, which outranks it) sets it to `none`
   explicitly. The 0.01em tracking here is a sentence-case value; the design's
   real uppercase micro-labels sit at .05-.06em. Uppercasing at 0.01em renders
   cramped caps as well as the wrong case. */
body .sn-footer-col h4 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.01em;
  color: var(--ink-400);
  margin: 0 0 14px;
}

body .sn-footer-col ul { list-style: none; margin: 0; padding: 0; }
body .sn-footer-col li { margin-bottom: 8px; }
body .sn-footer-col a { color: var(--ink-200); font-size: 13px; }
body .sn-footer-col a:hover { color: var(--cobalt); }

body .sn-footer-socials { display: flex; gap: 8px; }
body .sn-footer-social {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-chip);
  border: 1px solid var(--line-strong);
  background: var(--ink-850);
  color: var(--ink-200);
  font-size: 13px;
}
body .sn-footer-social:hover {
  color: var(--ink-on-accent);
  background: var(--cobalt);
  border-color: var(--cobalt);
}

body .sn-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-400);
  font-family: var(--sans);
  font-size: 11px;
}

body .sn-footer-bottom .nav-link { color: var(--ink-400); font-size: 11px; padding: 0; }
body .sn-footer-bottom .nav-link:hover { color: var(--cobalt); }
body .sn-footer-bottom .sn-footer-legal { margin-right: auto; }
body #footer .copyright { color: var(--ink-500); font-size: 11px; }

/* The locale and currency switcher, and the social icons WHMCS renders from
   its own settings, both live in the bottom row. */
body #footer .list-inline { margin: 0; }
body #footer .list-inline-item .btn {
  font-size: 11px;
  padding: 5px 9px;
  border-radius: var(--r-chip);
  background: var(--ink-850);
  border-color: var(--line-strong);
  color: var(--ink-200);
}
body #footer .list-inline-item .btn:hover { background: var(--ink-800); color: var(--ink-100); }

@media (max-width: 1100px) {
  body .sn-footer-grid { grid-template-columns: 1.4fr repeat(2, 1fr); gap: 36px; }
}
@media (max-width: 860px) {
  body .sn-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 540px) {
  body .sn-footer-grid { grid-template-columns: 1fr; gap: 26px; }
  body #footer.footer { padding: 40px 0 24px; }
}


/* ---------------------------------------------------------------------------
 * 10. Page shell.
 *
 * #main-body is nexus's content section. It has to sit above the dot grid and
 * carry the page's vertical rhythm.
 * ------------------------------------------------------------------------ */

body #main-body { padding: 28px 0 0; min-height: 42vh; }

body #fullpage-overlay {
  background: rgba(5,5,5,.86);
  color: var(--ink-100);
}

/* The generic "loading" spinner colour, used by the AJAX modal and the
   fullpage overlay. */
body .fa-spin,
body .fa-circle-notch { color: var(--cobalt); }