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

    ** Custom Stylesheet **

    Business Warriors brand reskin of the stock WHMCS
    "Twenty-One" / Nexus theme. Dark, chrome/mono identity —
    matches businesswarriors.global (see the bw-brand design
    system: near-black surfaces, pure white text via opacity,
    system-ui type, white pill CTAs, glass-panel cards).

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

html {
    font-size: 14px;
}

:root {
    --white: #ffffff;

    /* BW neutral scale — near-black surfaces, not pure #000 (matches
       body #020202 elsewhere on businesswarriors.global) */
    --neutral-50: #2a2a2a;
    --neutral-100: #202020;
    --neutral-200: #1a1a1a;
    --neutral-300: #141414;
    --neutral-400: #0f0f0f;
    --neutral-500: #0a0a0a;
    --neutral-600: #060606;
    --neutral-700: #040404;
    --neutral-800: #020202;
    --neutral-900: #020202;
    --neutral-950: #000000;

    --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-950);

    /* Primary = white (BW's CTA is a white-fill/black-text pill) */
    --primary: #ffffff;
    --primary-lifted: #e6e6e6;
    --primary-accented: #cccccc;

    /* Secondary = a lifted dark surface, white text */
    --secondary: #1a1a1a;
    --secondary-lifted: #242424;
    --secondary-accented: #2e2e2e;

    /* Status colors kept — functional signal in a billing UI, not
       decorative brand color, so left at sensible defaults */
    --success: #00c853;
    --success-lifted: #00a844;
    --success-accented: #008a38;
    --info: #3b82f6;
    --info-lifted: #2f6fd6;
    --info-accented: #255bb3;
    --notice: #a855f7;
    --notice-lifted: #9333ea;
    --notice-accented: #7e22ce;
    --warning: #f59e0b;
    --warning-lifted: #d98708;
    --warning-accented: #b56f06;
    --error: #ef4444;
    --error-lifted: #dc2626;
    --error-accented: #b91c1c;

    --grayscale: var(--neutral-500);
    --grayscale-lifted: var(--neutral-600);
    --grayscale-accented: var(--neutral-700);
    --neutral: #9a9a9a;
    --neutral-lifted: #818181;
    --neutral-accented: #676767;

    /* Text — pure white, muted via blended-opacity equivalents
       (white/80, /60, /50 over a #020202 ground) */
    --text-inverted: #020202;
    --text-muted: #818181;
    --text-lifted: #9a9a9a;
    --text-accented: #cccccc;
    --text: #ffffff;

    /* Borders — white/5, /10, /20, /40 blended over #020202 */
    --border-muted: #0f0f0f;
    --border: #1b1b1b;
    --border-lifted: #353535;
    --border-accented: #676767;

    /* Backgrounds */
    --bg: #020202;
    --bg-muted: #0a0a0a;
    --bg-lifted: #121212;
    --bg-accented: #1a1a1a;
    --bg-inverted: #ffffff;

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

    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding — bumped up for BW's glass-panel/pill aesthetic
       (stock theme uses small radii throughout) */
    --rounding-sm: 0.5rem;
    --rounding-md: 0.75rem;
    --rounding-lg: 1rem;

    --letter-spacing: 0em;
    --disabled-opacity: 25%;

    --font-family-sans-serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
    background-color: var(--bg) !important;
    color: var(--text);
}

/* Top nav — pure black (matches businesswarriors.global's nav layer,
   one shade darker than the #020202 body) */
.navbar {
    background-color: #000000 !important;
    border-bottom: 1px solid var(--border);
}

/* Cards / panels — BW "glass panel" treatment: faint white fill,
   faint border, blurred backdrop, floating over the dark ground */
.card {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--rounding-lg) !important;
    backdrop-filter: blur(12px);
}

.card-header {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Primary buttons — BW's signature pill CTA: white fill, black text,
   uppercase, wide tracking, fully rounded */
.btn-primary {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #020202 !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 999px !important;
    padding: 0.6rem 1.5rem;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #e6e6e6 !important;
    border-color: #e6e6e6 !important;
    color: #020202 !important;
}

/* Secondary/outline buttons — ghost pill, white border on dark */
.btn-secondary,
.btn-outline-primary {
    background-color: transparent !important;
    border: 1px solid var(--border-lifted) !important;
    color: var(--text) !important;
    border-radius: 999px !important;
}

.btn-secondary:hover,
.btn-outline-primary:hover {
    border-color: var(--text) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text) !important;
}

/* Page headings — BW's tight, bold display treatment */
h1, .h1 {
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--text);
}

h2, .h2, h3, .h3 {
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
}

/* Bootstrap utility classes used throughout WHMCS's markup directly
   (e.g. the homepage domain-search box, help panels) — these carry
   !important in the base theme, so they need overriding explicitly
   rather than relying on .card alone to catch every panel. */
.bg-white,
.bg-light {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.home-domain-search {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--rounding-lg) !important;
}

.input-group-wrapper,
.input-group,
.input-group-text {
    background-color: transparent !important;
    color: var(--text) !important;
}

/* Homepage/dashboard "quick action" tiles (Announcements, Manage Domains,
   Submit a Ticket, etc.) — accent-bordered cards, separate from .card */
[class*="card-accent-"] {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text) !important;
}
[class*="card-accent-"] * {
    color: var(--text) !important;
}

/* Links */
a {
    color: var(--text);
}
a:hover {
    color: var(--text-accented);
}

/* Form inputs — dark surface, visible borders */
.form-control,
select.form-control,
textarea.form-control {
    background-color: var(--bg-muted) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

.form-control:focus {
    background-color: var(--bg-muted) !important;
    border-color: var(--border-accented) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

/* Tables — keep readable on dark, subtle row separation */
.table {
    color: var(--text);
}
.table td, .table th {
    border-color: var(--border) !important;
}

/* Footer */
footer, .footer {
    background-color: #000000 !important;
    border-top: 1px solid var(--border);
    color: var(--text-lifted);
}