:root {
    /* Veil tokens — matched to the client-area mockup for pixel parity. */
    --fused-purple: #b23dff;
    --fused-purple-rgb: 178, 61, 255;
    --fused-purple-ink: #cf8bff;
    --fused-cyan: #00d7d7;
    --fused-cyan-rgb: 0, 215, 215;
    --fused-cyan-ink: #4fe6e6;
    --fused-sidebar: #14151f;
    --fused-sidebar-width: 320px;
    --fused-bg: #0c0d13;
    --fused-surface: #14151f;
    --fused-surface-soft: #1b1d29;
    --fused-raised: #21232f;
    --fused-text: #edeef4;
    --fused-muted: #969ab0;
    --fused-faint: #6a6e82;
    --fused-border: #2a2c3b;
    --fused-border-soft: #21222e;
    --fused-border-strong: #3c3e50;
    --fused-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.55);
    --fused-shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, 0.7);
    --fused-radius: 14px;
    --fused-radius-sm: 9px;
    --fused-radius-lg: 20px;
    --fused-font-display: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
    --fused-font-body: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --fused-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    /* Semantic status colors — separate from the purple/cyan accent. Dark
       values here on the base :root; the light block below overrides. */
    --fused-ok: #35d68a;
    --fused-ok-rgb: 53, 214, 138;
    --fused-warn: #ffb638;
    --fused-warn-rgb: 255, 182, 56;
    --fused-danger: #ff5c78;
    --fused-danger-rgb: 255, 92, 120;
    color-scheme: dark;
}

html[data-fused-theme="light"] {
    --fused-purple-ink: #8b17d6;
    --fused-cyan-ink: #04a2a2;
    --fused-sidebar: #ffffff;
    --fused-bg: #f4f4f9;
    --fused-surface: #ffffff;
    --fused-surface-soft: #fbfaff;
    --fused-raised: #f1f0f8;
    --fused-text: #17181f;
    --fused-muted: #5c6072;
    --fused-faint: #8a8ea0;
    --fused-border: #e5e2f0;
    --fused-border-soft: #eeecf6;
    --fused-border-strong: #cdc9dd;
    --fused-shadow: 0 1px 2px rgba(20, 20, 40, 0.06), 0 14px 34px -16px rgba(30, 20, 60, 0.22);
    --fused-shadow-lg: 0 28px 64px -16px rgba(30, 20, 60, 0.28);
    --fused-ok: #12a862;
    --fused-ok-rgb: 18, 168, 98;
    --fused-warn: #b7791f;
    --fused-warn-rgb: 183, 121, 31;
    --fused-danger: #d63a5b;
    --fused-danger-rgb: 214, 58, 91;
    color-scheme: light;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    /* Keep a slightly denser 19.5px large-display scale, easing to 17.5px when the
       viewport's limiting dimension is laptop-sized. */
    font-size: clamp(109.375%, calc(73.6607% + 0.7143vmin), 121.875%);
    background: var(--fused-sidebar);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.fused-whmcs,
body.fused-whmcs input,
body.fused-whmcs button,
body.fused-whmcs select,
body.fused-whmcs textarea {
    font-family: var(--fused-font-body) !important;
}

body.fused-whmcs h1,
body.fused-whmcs h2,
body.fused-whmcs h3,
body.fused-whmcs h4,
body.fused-whmcs .card-title,
body.fused-whmcs .modal-title,
body.fused-whmcs .account-page-title,
body.fused-whmcs .fused-page-heading h1 {
    font-family: var(--fused-font-display) !important;
    font-weight: 600;
    letter-spacing: -0.015em;
}

body.fused-whmcs .mono,
body.fused-whmcs code,
body.fused-whmcs kbd,
body.fused-whmcs pre,
body.fused-whmcs .ticket-number {
    font-variant-numeric: tabular-nums;
}

body.fused-whmcs code,
body.fused-whmcs kbd,
body.fused-whmcs pre {
    font-family: var(--fused-font-mono) !important;
}

body.fused-whmcs {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background: var(--fused-bg) !important;
    color: var(--fused-text);
}

/* Native checkboxes/radios, reskinned larger (Catalyst-style: ~20px, rounded
   square, filled + checkmark when checked) instead of the browser's tiny
   ~13px default that's fiddly to click. Catalyst's own component hides a real
   input and renders a separate SVG-driven box, which needs React state to
   drive — not portable into plain Smarty/HTML — so this reproduces the same
   visual with a plain appearance:none reskin of the real input instead. */
body.fused-whmcs input[type="checkbox"],
body.fused-whmcs input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin: 0;
    border: 1.5px solid var(--fused-border-strong);
    background: var(--fused-surface);
    position: relative;
    cursor: pointer;
    accent-color: var(--fused-cyan);
    transition: background-color 120ms ease, border-color 120ms ease;
}

body.fused-whmcs input[type="checkbox"] {
    border-radius: 0.35rem;
}

body.fused-whmcs input[type="radio"] {
    border-radius: 999px;
}

body.fused-whmcs input[type="checkbox"]:checked,
body.fused-whmcs input[type="radio"]:checked {
    border-color: var(--fused-cyan);
    background: var(--fused-cyan);
}

body.fused-whmcs input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: 0.08rem;
    width: 0.3rem;
    height: 0.65rem;
    border: solid #042f32;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

body.fused-whmcs input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 0.3rem;
    border-radius: 999px;
    background: #042f32;
}

body.fused-whmcs input[type="checkbox"]:focus-visible,
body.fused-whmcs input[type="radio"]:focus-visible {
    outline: 2px solid rgba(var(--fused-purple-rgb), 0.6);
    outline-offset: 2px;
}

/* Bootstrap's .form-check assumes the old ~13px checkbox (absolute-positioned,
   pulled back with a negative margin to sit in a fixed-width gutter) — fragile
   now that ours is 20px. Flexbox instead, so it holds up at any checkbox size
   and wraps cleanly when the label is a full sentence, not just "Yes". */
body.fused-whmcs .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding-left: 0;
}

body.fused-whmcs .form-check-input {
    position: static;
    flex-shrink: 0;
    margin: 0.15rem 0 0;
}

/* #registration label {color:#666} in vendor theme.css (ID selector) outranks
   a bare class, so this needs the #registration prefix to actually win. */
#registration .fused-checkbox-card-label {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--fused-text);
    line-height: 1.5;
}

body.fused-whmcs a {
    color: #7e22ce;
}

html[data-fused-theme="dark"] body.fused-whmcs a {
    color: #67e8f9;
}

body.fused-whmcs a:hover,
body.fused-whmcs a:focus {
    color: #9333ea;
}

html[data-fused-theme="dark"] body.fused-whmcs a:hover,
html[data-fused-theme="dark"] body.fused-whmcs a:focus {
    color: #a5f3fc;
}

body.fused-whmcs h1,
body.fused-whmcs h2,
body.fused-whmcs h3,
body.fused-whmcs h4,
body.fused-whmcs h5,
body.fused-whmcs h6,
body.fused-whmcs p,
body.fused-whmcs label,
body.fused-whmcs .card-title,
body.fused-whmcs .modal-title {
    color: var(--fused-text);
}

.fused-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    display: flex;
    width: var(--fused-sidebar-width);
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background: var(--fused-sidebar);
    color: #ffffff;
}

html[data-fused-theme="light"] .fused-sidebar {
    color: #111827;
}

html[data-fused-theme="light"] .fused-sidebar-brand,
html[data-fused-theme="light"] .fused-nav-divider {
    border-color: var(--fused-border);
    background: transparent;
}

html[data-fused-theme="light"] .fused-nav-item,
html[data-fused-theme="light"] body.fused-whmcs .fused-nav-item {
    color: #475569;
}

html[data-fused-theme="light"] .fused-nav-item > i {
    color: #64748b;
}

html[data-fused-theme="light"] .fused-nav-item:hover,
html[data-fused-theme="light"] .fused-nav-item:focus,
html[data-fused-theme="light"] body.fused-whmcs .fused-nav-item:hover,
html[data-fused-theme="light"] body.fused-whmcs .fused-nav-item:focus,
html[data-fused-theme="light"] .fused-nav-item.is-active,
html[data-fused-theme="light"] body.fused-whmcs .fused-nav-item.is-active {
    background: #f1f5f9;
    color: #0f172a;
}

html[data-fused-theme="light"] .fused-nav-item.is-active > i {
    color: #0891b2;
}

html[data-fused-theme="light"] .fused-session-name {
    color: #334155;
}

/* Height matches #header.fused-topbar (both 4rem) so the sidebar's brand
   divider and the topbar's bottom border land on the same line across the
   full width of the page, instead of the two borders sitting at different
   heights where the sidebar meets the main content. */
.fused-sidebar-brand {
    display: flex;
    height: 4rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding: 0 1.5rem;
}

.fused-sidebar-brand a {
    display: inline-flex;
    align-items: center;
}

.fused-sidebar-brand .fused-logo-svg {
    display: block;
    width: auto;
    height: 3rem;
}

/* Logo is inlined (includes/fused-logo.tpl), not <img>, specifically so this
   override can reach the wordmark: white reads fine on the dark sidebar, but
   needs to be dark in light theme instead of vanishing against a light bg. */
html[data-fused-theme="light"] .fused-sidebar-brand .fused-logo-svg .three-3 {
    fill: #000000;
}

.fused-sidebar-close {
    display: none;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #a1a1aa;
}

.fused-sidebar-close:hover,
.fused-sidebar-close:focus {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.fused-sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
    scrollbar-color: rgba(113, 113, 122, 0.65) transparent;
    scrollbar-width: thin;
}

.fused-nav-item,
body.fused-whmcs .fused-nav-item {
    position: relative;
    display: flex;
    min-height: 2.625rem;
    align-items: center;
    gap: 0.75rem;
    margin: 0.125rem 0;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--fused-muted);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease;
}

.fused-nav-item > i {
    width: 1.25rem;
    flex: 0 0 1.25rem;
    color: var(--fused-faint);
    font-size: 1rem;
    text-align: center;
    transition: color 140ms ease;
}

/* Count badge on the right of a nav item (Hosting 75, Domains 50 …). */
.fused-nav-item .badge,
.fused-nav-item .count {
    margin-left: auto;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--fused-muted);
    font-size: 0.68rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fused-nav-item.is-active .badge,
.fused-nav-item.is-active .count {
    background: var(--fused-purple);
    color: #fff;
}

.fused-nav-item .count.is-warn {
    background: rgba(var(--fused-warn-rgb), 0.16);
    color: var(--fused-warn);
}

.fused-nav-item.is-active .count.is-warn {
    background: var(--fused-warn);
    color: #2a1c00;
}

.fused-nav-item > i.fused-nav-external-icon {
    width: auto;
    flex: 0 0 auto;
    margin-left: auto;
    color: #71717a;
    font-size: 0.6875rem;
    opacity: 0.75;
}

.fused-nav-item:hover,
.fused-nav-item:focus,
body.fused-whmcs .fused-nav-item:hover,
body.fused-whmcs .fused-nav-item:focus {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    text-decoration: none;
}

.fused-nav-item.is-active,
body.fused-whmcs .fused-nav-item.is-active {
    background: rgba(var(--fused-purple-rgb), 0.12);
    color: var(--fused-purple-ink);
}

.fused-nav-item.is-active > i {
    color: var(--fused-purple-ink);
}

.fused-nav-divider {
    height: 1px;
    margin: 1rem 0.75rem;
    background: rgba(255, 255, 255, 0.07);
}

.fused-nav-group-label {
    padding: 0.875rem 0.625rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fused-faint);
}

@media (max-height: 900px) {
    .fused-sidebar-nav {
        padding: 0.75rem 1rem;
    }

    .fused-nav-item,
    body.fused-whmcs .fused-nav-item {
        min-height: 2.4rem;
        margin: 0.0625rem 0;
        padding: 0.5rem 0.75rem;
    }

    .fused-nav-group-label {
        padding: 0.7rem 0.625rem 0.3rem;
    }
}

.fused-sidebar-backdrop {
    display: none;
}

#header.fused-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    width: calc(100% - var(--fused-sidebar-width));
    height: 4rem;
    margin: 0 0 0 var(--fused-sidebar-width);
    border: 0;
    border-bottom: 1px solid var(--fused-border);
    background: var(--fused-surface);
    box-shadow: none;
}

/* Shares the breadcrumb bar's own .container centering math (same width/
   max-width/margin formula) instead of a hardcoded padding value, so the page
   title and the breadcrumb trail directly below it land at the exact same
   left edge instead of drifting a few pixels apart. Solid --fused-surface
   (was a translucent + blurred rgba) also now matches the breadcrumb bar's
   background exactly instead of reading as a slightly different shade. */
#header.fused-topbar > .container {
    display: flex;
    width: 100%;
    max-width: 80rem;
    align-items: center;
    height: 100%;
}

.fused-menu-button,
.fused-icon-button,
.fused-theme-toggle {
    display: inline-flex;
    width: 2.375rem;
    height: 2.375rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fused-border);
    border-radius: 0.625rem;
    background: var(--fused-surface);
    color: var(--fused-muted);
    text-decoration: none;
}

.fused-topbar-divider {
    display: none;
}

body.fused-whmcs .fused-icon-button {
    color: var(--fused-muted);
}

.fused-menu-button:hover,
.fused-menu-button:focus,
.fused-icon-button:hover,
.fused-icon-button:focus,
.fused-theme-toggle:hover,
.fused-theme-toggle:focus {
    background: rgba(24, 24, 27, 0.05);
    color: var(--fused-text);
    text-decoration: none;
}

html[data-fused-theme="dark"] .fused-menu-button:hover,
html[data-fused-theme="dark"] .fused-menu-button:focus,
html[data-fused-theme="dark"] .fused-icon-button:hover,
html[data-fused-theme="dark"] .fused-icon-button:focus,
html[data-fused-theme="dark"] .fused-theme-toggle:hover,
html[data-fused-theme="dark"] .fused-theme-toggle:focus {
    background: rgba(255, 255, 255, 0.06);
}

.fused-menu-button {
    display: none;
    margin-right: 0.5rem;
}

.fused-page-name {
    min-width: 0;
    overflow: hidden;
    color: var(--fused-text);
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fused-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.fused-theme-light-icon {
    display: none;
}

html[data-fused-theme="dark"] .fused-theme-dark-icon {
    display: none;
}

html[data-fused-theme="dark"] .fused-theme-light-icon {
    display: inline-block;
}

.fused-icon-button {
    position: relative;
}

/* Presence dot rather than a count, matching the mockup's .icon-btn .dot. */
.fused-notification-count {
    position: absolute;
    top: 0.4rem;
    right: 0.45rem;
    display: block;
    width: 0.4375rem;
    height: 0.4375rem;
    overflow: hidden;
    border: 2px solid var(--fused-surface);
    border-radius: 50%;
    background: var(--fused-danger);
    color: transparent;
    font-size: 0;
}

.fused-account-button,
body.fused-whmcs .fused-account-button {
    display: inline-flex;
    max-width: 15rem;
    align-items: center;
    gap: 0.55rem;
    margin-left: 0.1rem;
    padding: 0.3rem 0.7rem 0.3rem 0.3rem;
    border: 1px solid var(--fused-border);
    border-radius: 999px;
    background: var(--fused-surface);
    color: var(--fused-text);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.fused-account-button:hover,
.fused-account-button:focus {
    background: var(--fused-surface-soft);
    border-color: var(--fused-border);
    color: var(--fused-text);
}

.fused-account-icon {
    display: inline-flex;
    width: 1.875rem;
    height: 1.875rem;
    flex: 0 0 1.875rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fused-purple), var(--fused-cyan));
    color: #ffffff;
    font-family: var(--fused-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

html[data-fused-theme="dark"] .fused-account-icon {
    color: #ffffff;
}

.fused-account-name {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    line-height: 1.25;
    text-align: left;
}

.fused-account-name,
.fused-account-name small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fused-account-name small {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--fused-faint);
}

.fused-account-caret {
    flex: 0 0 auto;
    margin-left: 0.15rem;
    font-size: 0.625rem;
    color: var(--fused-faint);
}

.fused-sign-in,
body.fused-whmcs .fused-sign-in {
    padding-inline: 1rem;
}

body.fused-whmcs > .alert,
body.fused-whmcs > .network-issue,
body.fused-whmcs > .client-alert,
body.fused-whmcs > .verification-banner,
body.fused-whmcs #main-body,
#footer.footer {
    margin-left: var(--fused-sidebar-width);
}

.fused-topbar-breadcrumb {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.fused-topbar-breadcrumb .breadcrumb {
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--fused-muted);
    font-size: 0.75rem;
    overflow: hidden;
}

.fused-topbar-breadcrumb .breadcrumb-item {
    flex: 0 0 auto;
    white-space: nowrap;
}

.fused-topbar-breadcrumb .breadcrumb-item:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fused-topbar-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--fused-muted);
}

body.fused-whmcs #main-body {
    min-height: calc(100vh - 4rem);
    padding: 2rem 0 2.5rem;
    background: var(--fused-bg);
}

body.fused-whmcs #main-body > .container,
#footer > .container {
    width: min(100% - 2rem, 80rem);
    max-width: 80rem;
}

.fused-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.fused-page-heading > div,
.fused-page-heading h1 {
    text-align: left;
}

.fused-page-heading h1 {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.12;
}

.fused-page-heading p {
    margin: 0.55rem 0 0;
    color: var(--fused-muted);
    font-size: 0.95rem;
}

.fused-domain-page-heading h1 {
    overflow-wrap: anywhere;
}

.fused-domain-renewal {
    font-variant-numeric: tabular-nums;
}

.fused-page-heading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    flex: 0 0 auto;
}

body.fused-whmcs .btn {
    border-radius: 0.55rem;
    font-weight: 600;
}

body.fused-whmcs .btn-primary,
body.fused-whmcs .btn-info {
    border-color: #00b8bd;
    background: var(--fused-cyan);
    color: #042f32;
    box-shadow: none;
}

body.fused-whmcs .btn-primary:hover,
body.fused-whmcs .btn-primary:focus,
body.fused-whmcs .btn-info:hover,
body.fused-whmcs .btn-info:focus {
    border-color: #00a6aa;
    background: #22e6e6;
    color: #042f32;
}

/* Dashboard action buttons can inherit WHMCS's muted/disabled treatment even
   when they remain actionable links. Keep the cyan actions fully legible. */
body.fused-whmcs .fused-page-heading .btn-primary,
body.fused-whmcs .client-home-cards .btn-primary,
body.fused-whmcs .fused-page-heading .btn-info,
body.fused-whmcs .client-home-cards .btn-info {
    opacity: 1 !important;
    color: #042f32 !important;
    text-shadow: none;
    filter: none;
}

body.fused-whmcs .btn-default,
body.fused-whmcs .btn-secondary,
body.fused-whmcs .btn-outline-primary {
    border-color: var(--fused-border-strong);
    background: var(--fused-surface);
    color: var(--fused-text);
    box-shadow: none;
}

body.fused-whmcs .btn-outline-danger {
    border-color: #dc2626;
    background: transparent;
    color: #dc2626;
    box-shadow: none;
}

body.fused-whmcs .btn-outline-danger:hover,
body.fused-whmcs .btn-outline-danger:focus {
    border-color: #dc2626;
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

/* Bulk registrar-lock confirmation: the page's own copy recommends keeping
   lock enabled, but Enable/Disable were rendered as two equally loud, equally
   large solid buttons with no cue toward either. Outlining Disable keeps it
   fully visible and functional while reflecting that recommendation instead
   of presenting both as equally urgent. */
.fused-reglock-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.fused-reglock-actions .btn i {
    margin-right: 0.4rem;
}

.fused-changelog-subtitle,
.fused-changelog-empty {
    color: var(--fused-muted);
}

.fused-changelog-list {
    border-top: 1px solid var(--fused-border);
}

.fused-changelog-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin: 1.25rem 0;
}

.fused-changelog-search {
    flex: 1 1 16rem;
    max-width: 22rem;
}

/* Filter toolbar: the primary control for this list, so it gets the
   heavier treatment — a segmented-control track with a filled, unambiguous
   active state. Hover only lightens; it never looks like the active state,
   since the two used to share one style and were easy to confuse. */
.fused-changelog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.3rem;
    border: 1px solid var(--fused-border);
    border-radius: 999px;
    background: var(--fused-surface-soft);
}

.fused-changelog-filter {
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--fused-muted);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1;
    padding: 0.42rem 0.75rem;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.fused-changelog-filter:hover {
    color: var(--fused-text);
    background: var(--fused-surface);
}

.fused-changelog-filter:focus-visible {
    outline: 2px solid var(--fused-cyan);
    outline-offset: 1px;
}

.fused-changelog-filter.is-active {
    border-color: rgba(var(--fused-cyan-rgb), 0.4);
    background: rgba(var(--fused-cyan-rgb), 0.16);
    color: var(--fused-text);
}

/* Per-entry tags are metadata riding along next to a title, not a second
   set of controls, so they stay visually quiet: small, square-ish, outline
   only, and only pick up color on hover/focus rather than sitting tinted
   at rest like the filter pills above. */
.fused-changelog-tags {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.fused-changelog-tags button {
    border: 1px solid var(--fused-border);
    border-radius: 0.3rem;
    background: transparent;
    color: var(--fused-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 0.28rem 0.5rem;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease;
}

.fused-changelog-tags button:hover {
    border-color: rgba(var(--fused-cyan-rgb), 0.45);
    color: var(--fused-cyan);
}

.fused-changelog-tags button:focus-visible {
    outline: 2px solid var(--fused-cyan);
    outline-offset: 1px;
}

.fused-changelog-entry {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.25rem 1rem;
    margin: 0 -0.6rem;
    padding: 0.8rem 0.6rem;
    border-bottom: 1px solid var(--fused-border);
    border-radius: 0.4rem;
    color: var(--fused-text);
    text-decoration: none;
}

.fused-changelog-title {
    min-width: 0;
    color: var(--fused-text);
    font-weight: 600;
    line-height: 1.35;
}

.fused-changelog-date {
    color: var(--fused-muted);
    font-family: var(--fused-mono, ui-monospace, monospace);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

body.fused-whmcs .select-account {
    border-top-color: var(--fused-border);
}

body.fused-whmcs .select-account a {
    border-bottom-color: var(--fused-border);
    color: var(--fused-text);
}

body.fused-whmcs .select-account a:not(.disabled):hover,
body.fused-whmcs .select-account a:not(.disabled):focus-visible {
    background: rgba(var(--fused-cyan-rgb), 0.14);
    color: var(--fused-text);
    outline: 2px solid rgba(var(--fused-cyan-rgb), 0.55);
    outline-offset: -2px;
}

html[data-fused-theme="light"] body.fused-whmcs .select-account a:not(.disabled):hover,
html[data-fused-theme="light"] body.fused-whmcs .select-account a:not(.disabled):focus-visible {
    background: #e2e8f0;
    color: #0f172a;
}

.fused-changelog-content {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.fused-free-account {
    white-space: nowrap;
    font-weight: 600;
    color: var(--fused-muted);
}

@media (max-width: 600px) {
    .fused-changelog-entry {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .fused-changelog-content {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.55rem;
    }
}

body.fused-whmcs .btn-default:hover,
body.fused-whmcs .btn-default:focus,
body.fused-whmcs .btn-secondary:hover,
body.fused-whmcs .btn-secondary:focus,
body.fused-whmcs .btn-outline-primary:hover,
body.fused-whmcs .btn-outline-primary:focus {
    border-color: rgba(var(--fused-purple-rgb), 0.35);
    background: rgba(var(--fused-purple-rgb), 0.07);
    color: var(--fused-text);
}

body.fused-whmcs .btn-success {
    border-color: #059669;
    background: #10b981;
    color: #022c22;
    box-shadow: none;
}

body.fused-whmcs .btn-success:hover,
body.fused-whmcs .btn-success:focus {
    border-color: #047857;
    background: #34d399;
    color: #022c22;
}

/* WHMCS's own home-panel buttons (Pay All, Add Funds, etc.) are raw
   core-generated HTML we don't template — same vendor-icon leak already
   neutralized for the summary tiles above: the base client-area theme
   positions some icon glyphs absolutely, which here let the Pay All
   checkmark spill outside the button's rounded corner instead of sitting
   inline before the label. */
body.fused-whmcs .card-body .btn {
    overflow: hidden;
}

body.fused-whmcs .card-body .btn i {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    display: inline-flex;
    margin-right: 0.4rem;
    font-size: 1em;
    vertical-align: middle;
}

body.fused-whmcs .client-home-cards .fused-unpaid-invoice-action {
    display: flex;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0 1rem 0.9rem;
}

body.fused-whmcs .client-home-cards .fused-unpaid-invoice-action .btn {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    margin: 0;
    padding: 0.45rem 0.75rem;
    transform: none;
}

body.fused-whmcs .btn-warning {
    border-color: #d97706;
    background: #f59e0b;
    color: #451a03;
    box-shadow: none;
}

body.fused-whmcs .btn-warning:hover,
body.fused-whmcs .btn-warning:focus {
    border-color: #b45309;
    background: #fbbf24;
    color: #451a03;
}

body.fused-whmcs .btn-danger {
    border-color: #dc2626;
    background: #ef4444;
    color: #ffffff;
    box-shadow: none;
}

body.fused-whmcs .btn-danger:hover,
body.fused-whmcs .btn-danger:focus {
    border-color: #b91c1c;
    background: #f87171;
    color: #ffffff;
}

.fused-summary-grid .row {
    margin: -0.375rem;
}

.fused-summary-grid [class*="col-"] {
    display: flex;
    padding: 0.375rem;
}

.fused-summary-grid .tile {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 7.5rem;
    overflow: hidden;
    border: 1px solid var(--fused-border);
    border-top: 3px solid var(--fused-border);
    border-radius: var(--fused-radius);
    background: var(--fused-surface);
    box-shadow: var(--fused-shadow);
    padding: 1.15rem 1.25rem 1.25rem;
    color: var(--fused-text);
    text-align: left;
    text-decoration: none;
    transition: border-color 140ms ease;
}

/* Only the three non-accent edges tint on hover — the top border carries
   each tile's accent color and should stay put rather than washing out to
   the same purple tint on every tile. */
.fused-summary-grid .tile:hover,
.fused-summary-grid .tile:focus {
    border-right-color: rgba(var(--fused-purple-rgb), 0.28);
    border-bottom-color: rgba(var(--fused-purple-rgb), 0.28);
    border-left-color: rgba(var(--fused-purple-rgb), 0.28);
    background: var(--fused-surface);
    color: var(--fused-text);
    text-decoration: none;
}

.fused-tile-accent-cyan { border-top-color: #0891b2; }
.fused-tile-accent-purple { border-top-color: #7e22ce; }
.fused-tile-accent-amber { border-top-color: #b45309; }
.fused-tile-accent-green { border-top-color: #15803d; }

/* Label-first stat card, matching the mockup: muted label, then a display-face
   value, then a faint sub-line. */
.fused-summary-grid .tile .title {
    order: 1;
    min-width: 0;
    color: var(--fused-muted);
    font-size: 0.78rem;
    font-weight: 500;
    overflow-wrap: normal;
    word-break: normal;
}

.fused-summary-grid .tile .stat {
    order: 2;
    margin-top: 0.5rem;
    min-width: 0;
    color: var(--fused-text);
    font-family: var(--fused-font-display);
    font-size: 1.6875rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.fused-summary-grid .tile .stat small {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--fused-faint);
}

.fused-tile-detail {
    order: 3;
    margin-top: auto;
    padding-top: 0.5rem;
    color: var(--fused-faint);
    font-size: 0.75rem;
}

/* The sidebar consumes a substantial portion of the viewport, so the
   framework's 1200px `xl` breakpoint is too early for four dashboard cards.
   Keep two comfortable columns until there is genuinely enough content
   width for the compact four-column arrangement. */
@media (max-width: 1500px) {
    .fused-summary-grid .col-xl-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

body.fused-whmcs .card,
body.fused-whmcs .modal-content,
body.fused-whmcs .dropdown-menu,
body.fused-whmcs .table-container,
body.fused-whmcs .dataTables_wrapper {
    border-color: var(--fused-border);
    border-radius: var(--fused-radius);
    background: var(--fused-surface);
    color: var(--fused-text);
    box-shadow: var(--fused-shadow);
}

body.fused-whmcs .card {
    overflow: hidden;
}

body.fused-whmcs .card-header,
body.fused-whmcs .card-footer,
body.fused-whmcs .modal-header,
body.fused-whmcs .modal-footer {
    border-color: var(--fused-border);
    background: var(--fused-surface);
    color: var(--fused-text);
}

/* A few modal headers (Generate Password, etc.) are hardcoded with Bootstrap's
   `bg-primary text-white` utility classes right in the markup — and utility
   classes carry !important, so the plain .modal-header rule above never had a
   chance against it. Same idea for .modal-body, which isn't covered by any
   rule above at all and was falling back to Bootstrap's opaque white. */
body.fused-whmcs .modal-header.bg-primary {
    background: var(--fused-surface-soft) !important;
    color: var(--fused-text) !important;
}

body.fused-whmcs .modal-body {
    background: var(--fused-surface);
    color: var(--fused-text);
}

body.fused-whmcs .modal .close {
    color: var(--fused-text);
    text-shadow: none;
    opacity: 0.7;
}

body.fused-whmcs .modal .close:hover,
body.fused-whmcs .modal .close:focus {
    color: var(--fused-text);
    opacity: 1;
}

body.fused-whmcs .card-header {
    padding: 1rem 1.25rem;
}

/* Home-panel icons (e.g. "Unpaid Invoices") sit inline before the heading
   text with no baseline correction, so FontAwesome's glyph metrics read a
   few pixels higher than the title next to it instead of lining up. A
   vertical-align nudge (rather than restructuring .card-title with flex)
   keeps every other .card-title layout — floated header buttons, badges —
   exactly as it was. */
body.fused-whmcs .card-header .card-title > i {
    margin-right: 0.15rem;
    vertical-align: -0.1em;
    color: var(--fused-cyan);
}

html[data-fused-theme="dark"] body.fused-whmcs .card-header .card-title > i {
    color: #67e8f9;
}

body.fused-whmcs .card-body {
    background: var(--fused-surface);
    color: var(--fused-text);
}

body.fused-whmcs .card-accent-blue,
body.fused-whmcs .card-accent-green,
body.fused-whmcs .card-accent-red,
body.fused-whmcs .card-accent-gold,
body.fused-whmcs .card-accent-teal,
body.fused-whmcs .card-accent-midnight-blue,
body.fused-whmcs .card-accent-pomegranate {
    border-top-color: rgba(var(--fused-purple-rgb), 0.35);
}

body.fused-whmcs .list-group-item {
    border-color: var(--fused-border);
    background: var(--fused-surface);
    color: var(--fused-text);
}

body.fused-whmcs .list-group-item-action:hover,
body.fused-whmcs .list-group-item-action:focus {
    background: var(--fused-surface-soft);
    color: var(--fused-text);
}

body.fused-whmcs .list-group-item.active {
    border-color: rgba(var(--fused-cyan-rgb), 0.25);
    background: rgba(var(--fused-cyan-rgb), 0.09);
    color: var(--fused-text);
}

body.fused-whmcs .table,
body.fused-whmcs table,
body.fused-whmcs .table td,
body.fused-whmcs .table th {
    border-color: var(--fused-border);
    background: var(--fused-surface);
    color: var(--fused-text);
}

body.fused-whmcs .table tbody tr,
body.fused-whmcs table tbody tr,
body.fused-whmcs table.dataTable tbody tr,
body.fused-whmcs .dataTables_wrapper .dataTables_processing {
    background: var(--fused-surface);
    color: var(--fused-text);
}

body.fused-whmcs .table-list > tbody > tr > td,
body.fused-whmcs table.table-list tbody td {
    background-color: var(--fused-surface);
}

body.fused-whmcs .table-list > tbody > tr:hover > td {
    background-color: var(--fused-surface-soft);
}

body.fused-whmcs .table thead th,
body.fused-whmcs table thead th {
    border-color: var(--fused-border);
    background: var(--fused-surface-soft);
    color: var(--fused-muted);
    font-size: 0.75rem;
    font-weight: 650;
}

/* The currently-sorted column header (e.g. clicking "Domain" to sort by it)
   gets its own hardcoded light-gray background from vendor theme.css,
   independent of the normal header rule above — stands out as a bright block
   against every other dark header cell until reset here. */
body.fused-whmcs .dataTables_wrapper table.table-list thead th.sorting_asc,
body.fused-whmcs .dataTables_wrapper table.table-list thead th.sorting_desc {
    background-color: var(--fused-surface-soft);
}

body.fused-whmcs .dataTables_wrapper table.table-list thead th {
    text-align: center;
}

body.fused-whmcs .dataTables_wrapper table.table-list > thead > tr > th:first-child,
body.fused-whmcs .dataTables_wrapper #tableInvoicesList > thead > tr > th:first-child,
body.fused-whmcs .dataTables_wrapper #tableTicketsList > thead > tr > th:first-child,
body.fused-whmcs .dataTables_wrapper #tableServicesList > thead > tr > th:nth-child(2),
body.fused-whmcs .dataTables_wrapper #tableEmailServicesList > thead > tr > th:nth-child(2),
body.fused-whmcs .dataTables_wrapper #tableDomainsList > thead > tr > th:nth-child(3) {
    text-align: left;
}

body.fused-whmcs .table-striped tbody tr:nth-of-type(odd) {
    background: rgba(161, 161, 170, 0.06);
}

body.fused-whmcs .table-hover tbody tr:hover {
    background: rgba(var(--fused-purple-rgb), 0.04);
    color: var(--fused-text);
}

/* DataTables' "no records" row (Tickets/Domains/Services — Invoices keeps
   the plain default text) gets an icon, a line of copy, and an action
   button/pair instead of a bare "No records found." — an empty list is
   normal here, so it should read as an invitation, not a dead end. */
body.fused-whmcs td.dataTables_empty {
    padding: 3rem 1.5rem;
    text-align: center;
}

.fused-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
}

.fused-empty-state > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.35rem;
    border-radius: 999px;
    background: var(--fused-surface-soft);
    color: var(--fused-muted);
    font-size: 1.25rem;
}

.fused-empty-state > p {
    margin: 0;
    color: var(--fused-muted);
    font-size: 0.95rem;
}

.fused-empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.fused-domain-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem !important;
}

.fused-domain-actions[hidden] {
    display: none !important;
}

.fused-domain-actions > .btn,
.fused-domain-actions > .btn-group > .btn {
    min-height: 2.35rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.45rem !important;
    font-size: 0.8rem;
    white-space: nowrap;
}

.fused-domain-actions > .btn i,
.fused-domain-actions > .btn-group > .btn i {
    margin-right: 0.25rem;
}

body.fused-whmcs .fused-domain-bulk-menu {
    width: max-content;
    min-width: 15rem;
    max-width: calc(100vw - 2rem);
}

body.fused-whmcs .fused-domain-bulk-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    white-space: normal;
}

body.fused-whmcs .fused-domain-bulk-menu .dropdown-item i {
    flex: 0 0 1rem;
    margin: 0;
    text-align: center;
}

@media (max-width: 575.98px) {
    .fused-domain-actions,
    .fused-domain-actions > .btn-group,
    .fused-domain-actions > .btn-group > .btn {
        width: 100%;
    }

    body.fused-whmcs .fused-domain-bulk-menu {
        width: min(100%, calc(100vw - 2rem));
        min-width: 0;
    }
}

/* The overview panel is populated by WHMCS as menu-item HTML. Show the three
   most recent tickets without creating a nested scrollbar or an oversized card. */
body.fused-whmcs .client-home-cards [menuItemName*="Recent Support Tickets"] > .list-group > .list-group-item:nth-child(n+4) {
    display: none;
}

body.fused-whmcs .client-home-cards [menuItemName*="Recent Support Tickets"] > .list-group {
    max-height: none;
    overflow: hidden;
}

/* Affiliates: keep the referral workspace compact and intentional. The vendor
   template uses oversized Bootstrap defaults and an unstyled DataTables shell,
   which makes an empty referral list feel disconnected from the Veil surface. */
.fused-affiliates {
    max-width: 72rem;
    margin: 0 auto;
}

.fused-affiliates > .row:first-child {
    margin: -0.375rem;
}

.fused-affiliates > .row:first-child > [class*="col-"] {
    padding: 0.375rem;
}

.fused-affiliates .affiliate-stat {
    display: flex;
    min-height: 5.5rem;
    align-items: center;
    gap: 0.75rem;
    margin: 0 !important;
    padding: 1rem 1.15rem;
    border: 1px solid var(--fused-border);
    border-radius: var(--fused-radius);
    background: var(--fused-surface);
    color: var(--fused-muted);
    box-shadow: var(--fused-shadow);
    font-size: 0.875rem;
}

.fused-affiliates .affiliate-stat i {
    color: var(--fused-cyan);
    font-size: 1.05rem;
}

.fused-affiliates .affiliate-stat span {
    color: var(--fused-text);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.fused-affiliates > .card {
    margin: 1.25rem 0 !important;
}

.fused-affiliates > .card .card-body {
    padding: 1.25rem 1.5rem;
}

.fused-affiliates > .card .h3 {
    margin-bottom: 0.7rem;
    color: var(--fused-muted);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fused-affiliates > .row:not(:first-child) {
    margin: 0 auto 1rem;
}

.fused-affiliates > .row:not(:first-child) > .col-md-8 {
    padding: 0;
}

.fused-affiliates > .row:not(:first-child) table {
    margin: 0;
    overflow: hidden;
    border-radius: var(--fused-radius);
    box-shadow: var(--fused-shadow);
}

.fused-affiliates > .row:not(:first-child) table td {
    padding: 0.8rem 1rem;
}

.fused-affiliates > .row:not(:first-child) table td:first-child {
    width: 58%;
    color: var(--fused-muted);
    font-size: 0.8rem;
}

.fused-affiliates > .text-center form {
    margin: 1rem 0 0.5rem;
}

.fused-affiliates .btn-lg {
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
}

.fused-affiliates > .text-center > .text-muted,
.fused-affiliates > .text-muted {
    margin: 0.5rem 0 1.75rem;
    color: var(--fused-muted) !important;
    font-size: 0.8rem;
}

.fused-affiliates > h2 {
    margin: 2rem 0 0.75rem;
    color: var(--fused-text);
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.fused-affiliates .table-container,
.fused-affiliates .dataTables_wrapper {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--fused-border);
    border-radius: var(--fused-radius);
}

.fused-affiliates .dataTables_wrapper .listtable {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--fused-border);
}

.fused-affiliates .dataTables_wrapper .dataTables_filter {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

.fused-affiliates .dataTables_wrapper .dataTables_filter input {
    width: min(17rem, 100%);
    min-height: 2.4rem;
    margin-left: 0.5rem;
}

.fused-affiliates .dataTables_wrapper .dataTables_info {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    color: var(--fused-muted);
    font-size: 0.8rem;
}

.fused-affiliates .dataTables_wrapper .dataTables_length,
.fused-affiliates .dataTables_wrapper .dataTables_paginate {
    padding: 0.75rem;
    color: var(--fused-muted);
    font-size: 0.8rem;
}

.fused-affiliates .dataTables_wrapper .dataTables_paginate {
    float: right;
}

.fused-affiliates .dataTables_wrapper .dataTables_length {
    float: left;
}

.fused-affiliates #tableAffiliatesList {
    margin: 0;
}

.fused-affiliates #tableAffiliatesList th,
.fused-affiliates #tableAffiliatesList td {
    padding: 0.8rem 0.9rem;
    vertical-align: middle;
}

.fused-affiliates #tableAffiliatesList td:first-child,
.fused-affiliates #tableAffiliatesList th:first-child {
    white-space: nowrap;
}

.fused-affiliates > .margin-bottom {
    margin: 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--fused-border);
    border-radius: var(--fused-radius);
    background: var(--fused-surface);
    box-shadow: var(--fused-shadow);
}

.fused-affiliates > .margin-bottom img,
.fused-affiliates > .margin-bottom textarea,
.fused-affiliates > .margin-bottom pre {
    max-width: 100%;
}

@media (max-width: 767.98px) {
    .fused-affiliates .dataTables_wrapper .listtable {
        display: block;
    }

    .fused-affiliates .dataTables_wrapper .dataTables_filter {
        margin-top: 0.6rem;
        text-align: left;
    }

    .fused-affiliates .dataTables_wrapper .dataTables_filter input {
        width: calc(100% - 0.5rem);
        margin-left: 0;
    }

    .fused-affiliates .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: left;
    }
}

body.fused-whmcs .form-control,
body.fused-whmcs .custom-select,
body.fused-whmcs input[type="text"],
body.fused-whmcs input[type="email"],
body.fused-whmcs input[type="password"],
body.fused-whmcs input[type="tel"],
body.fused-whmcs input[type="number"],
body.fused-whmcs input[type="search"],
body.fused-whmcs select,
body.fused-whmcs textarea {
    border-color: var(--fused-border-strong);
    border-radius: 0.55rem;
    background: var(--fused-surface);
    color: var(--fused-text);
    box-shadow: none;
}

body.fused-whmcs .form-control:focus,
body.fused-whmcs .custom-select:focus,
body.fused-whmcs input:focus,
body.fused-whmcs input[type="search"]:focus,
body.fused-whmcs select:focus,
body.fused-whmcs textarea:focus {
    border-color: rgba(var(--fused-purple-rgb), 0.6);
    box-shadow: 0 0 0 0.2rem rgba(var(--fused-purple-rgb), 0.1);
}

body.fused-whmcs .form-control::placeholder,
body.fused-whmcs textarea::placeholder {
    color: var(--fused-muted);
}

/* Vendor hardcodes disabled/readonly fields to a light-mode #e9ecef — on our
   dark theme that's a bright box on a dark page, the opposite of "greyed
   out". Account Details' read-only view (clientareadetails.tpl) leans on
   this for its whole-page locked look, so it needs to actually read as
   dimmed here. */
body.fused-whmcs .form-control:disabled,
body.fused-whmcs .form-control[readonly],
body.fused-whmcs select:disabled,
body.fused-whmcs input:disabled {
    background-color: var(--fused-surface-soft);
    color: var(--fused-muted);
    opacity: 1;
}

/* Support-ticket custom fields (e.g. "Phone Number") render whatever raw
   input HTML the admin's field config produces, which can carry a `size`
   attribute derived from the field's configured max length rather than its
   actual expected input length — with no form-control class and no CSS
   width, the browser sizes the box off that attribute instead, so a max
   length meant only to cap input turns into a comically wide field. Pin a
   sane width regardless of what markup WHMCS core hands us. */
#customFieldsContainer input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    max-width: 28rem;
}

#customFieldsContainer textarea,
#customFieldsContainer select {
    width: 100%;
}

/* For the handful of fields WHMCS core hands us as raw rendered HTML (the
   country dropdown, custom fields, extra fields) — no `disabled` attribute
   to add, so this fakes the same locked, greyed-out treatment with CSS. */
.fused-field-locked {
    opacity: 0.6;
    pointer-events: none;
    filter: grayscale(0.3);
}

/* Five preference types settle into three short rows instead of stretching
   into a wide strip that competes with the client-area sidebar. */
body.fused-whmcs .fused-email-preferences {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
}

body.fused-whmcs .fused-email-preferences label {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.4rem;
    line-height: 1.45;
}

body.fused-whmcs .fused-email-preferences label .form-check-input {
    flex: 0 0 auto;
    margin: 0.2rem 0 0;
}

@media (max-width: 760px) {
    body.fused-whmcs .fused-email-preferences {
        grid-template-columns: 1fr;
    }
}

.fused-contact-introduction .card-body {
    max-width: 46rem;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.fused-contact-introduction-icon {
    display: inline-grid;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    place-items: center;
    border: 1px solid rgba(var(--fused-cyan-rgb), 0.35);
    border-radius: 0.75rem;
    background: rgba(var(--fused-cyan-rgb), 0.1);
    color: var(--fused-cyan);
    font-size: 1.2rem;
}

.fused-contact-introduction p {
    max-width: 42rem;
    color: var(--fused-muted);
    line-height: 1.65;
}

.fused-contact-introduction .btn {
    margin-top: 0.5rem;
}

/* Every DataTables search box on every table, site-wide — not just affiliates.
   Vendor's own rule (theme.css) hardcodes a white background-image search
   icon with `!important` padding and never constrains width, so it renders as
   a plain white pill that can grow past its table's edge at some widths. */
body.fused-whmcs .dataTables_wrapper .dataTables_filter {
    display: flex;
    min-width: 0;
    max-width: 100%;
    float: none;
    margin: 0 auto 0 0;
}

body.fused-whmcs .dataTables_wrapper .dataTables_filter label {
    display: flex;
    min-width: 0;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

body.fused-whmcs .dataTables_wrapper .dataTables_filter label .form-control {
    width: 100% !important;
    max-width: 16rem !important;
    background: var(--fused-surface) !important;
    border: 1px solid var(--fused-border-strong);
    border-radius: 0.55rem;
    padding: 0.5rem 0.85rem !important;
    color: var(--fused-text);
    box-shadow: none;
}

body.fused-whmcs .dataTables_wrapper .dataTables_filter label .form-control::placeholder {
    color: var(--fused-muted);
}

/* DataTables' own .dataTables_info ("Showing 1 to X of Y entries") has zero
   left spacing at all — sits flush against the table container's edge. */
body.fused-whmcs .dataTables_wrapper .dataTables_info {
    float: none;
    padding-left: 0.75rem;
    color: var(--fused-muted);
}

/* The bottom control row (length + pagination) has the same problem as the
   info text above: neither vendor rule for them carries any padding, so
   "Show 10 entries" sits flush against the container's left edge and
   pagination flush against the right — everything else in these tables
   (the search/info row, every cell) keeps a 0.75rem inset, this didn't. */
body.fused-whmcs .dataTables_wrapper .dataTables_length {
    float: none;
    padding: 0.75rem;
    color: var(--fused-muted);
}

body.fused-whmcs .dataTables_wrapper .dataTables_length .form-control,
body.fused-whmcs .dataTables_wrapper .dataTables_length select {
    display: inline-block;
    width: auto;
    margin: 0 0.35rem;
}

body.fused-whmcs .dataTables_wrapper .dataTables_paginate {
    padding: 0.75rem;
}

/* Keep DataTables' search control inside the wrapper. The Bootstrap adapter
   floats it right, while the generated input can retain its intrinsic width;
   on narrower tables that combination lets the field escape the surface.

   WHMCS's own dom string for these tables (`<"listtable"fit>pl`) makes the
   search box, the "Showing X of Y" info text, AND the actual <table> three
   siblings inside this one .listtable div — not just the search box and
   info text as the layout implies. Without `flex-wrap`, flex tries to fit
   all three on one line, and combined with `min-width: 0` below, that
   shrinks the real data table down to a sliver instead of overflowing,
   which effectively hid every row (the earlier `> table` rule below never
   caught this: the table isn't a direct child of .dataTables_wrapper, it's
   nested one level deeper inside .listtable, so that selector never
   matched anything). `flex-basis: 100%` on the table forces it past line
   one's remaining space so it wraps onto its own full-width row below the
   search/info line, which is what this always looked like it was trying to
   do. */
body.fused-whmcs .dataTables_wrapper .listtable {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    align-items: center;
    justify-content: flex-start !important;
    gap: 0.75rem;
    padding: 0.75rem;
    overflow: hidden;
    border-bottom: 1px solid var(--fused-border);
}

/* The WHMCS DataTables adapter can leave the wrapper/table in an inherited
   flex context. Keep the toolbar a full-width block above the table instead
   of allowing the table to occupy the next flex column. */
body.fused-whmcs .table-container,
body.fused-whmcs .dataTables_wrapper {
    display: block !important;
    width: 100%;
    clear: both;
}

body.fused-whmcs .dataTables_wrapper > .row,
body.fused-whmcs .dataTables_wrapper > .dataTables_scroll {
    display: block;
    width: 100%;
    clear: both;
}

body.fused-whmcs .dataTables_wrapper .listtable > * {
    min-width: 0;
}

body.fused-whmcs .dataTables_wrapper .listtable > table {
    flex: 1 1 100%;
}

body.fused-whmcs .dataTables_wrapper .listtable .dataTables_filter {
    flex: 0 1 17rem;
    margin: 0 !important;
}

body.fused-whmcs .dataTables_wrapper .listtable .dataTables_info {
    margin-left: 0;
}

body.fused-whmcs .dataTables_wrapper .listtable .dataTables_filter input,
body.fused-whmcs .dataTables_wrapper .listtable .dataTables_filter .form-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}

body.fused-whmcs .input-group-text,
body.fused-whmcs .input-group-addon {
    border-color: var(--fused-border-strong);
    background: var(--fused-surface-soft);
    color: var(--fused-muted);
}

/* Stripe-hosted fields render their text inside provider iframes, beyond the
   reach of our dark-mode text color. Keep just the hosted card-entry surface
   light so the gateway's dark input text stays readable. */
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #paymentGatewayInput .iframe-input-container,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #paymentGatewayInput .StripeElement,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #tokenGatewayAssistedOutput .iframe-input-container,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #tokenGatewayAssistedOutput .StripeElement,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteInputOutput .iframe-input-container,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteInputOutput .StripeElement,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteUpdateOutput .iframe-input-container,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteUpdateOutput .StripeElement {
    min-height: 2.4rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.55rem;
    background: #ffffff;
    color: #111827;
    color-scheme: light;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #paymentGatewayInput iframe,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #tokenGatewayAssistedOutput iframe,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteInputOutput iframe,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteUpdateOutput iframe {
    width: 100% !important;
}

html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #paymentGatewayInput label,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #tokenGatewayAssistedOutput label,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteInputOutput label,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteUpdateOutput label {
    color: #111827 !important;
}

html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #paymentGatewayInput small,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #paymentGatewayInput .help-block,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #paymentGatewayInput .text-muted,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #tokenGatewayAssistedOutput small,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #tokenGatewayAssistedOutput .help-block,
html[data-fused-theme="dark"] body.fused-whmcs #frmManagePaymentMethod #tokenGatewayAssistedOutput .text-muted,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteInputOutput small,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteInputOutput .help-block,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteInputOutput .text-muted,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteUpdateOutput small,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteUpdateOutput .help-block,
html[data-fused-theme="dark"] body.fused-whmcs .fieldgroup-remoteinput #tokenGatewayRemoteUpdateOutput .text-muted {
    color: #475569 !important;
}

/* Payment-method billing contacts need three stable columns: selection,
   identity, and the address. Keeping the complete address in one grid cell
   lets punctuation and long values wrap together instead of colliding with
   the name or becoming separate flex items. */
#billingContactsContainer .billing-contact-option {
    display: grid !important;
    grid-template-columns: auto minmax(7.5rem, 10rem) minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem 1rem;
    width: 100%;
    margin: 0 0 0.875rem;
    color: var(--fused-text);
    cursor: pointer;
}

#billingContactsContainer .billing-contact-option .name,
#billingContactsContainer .billing-contact-address {
    min-width: 0;
    overflow-wrap: anywhere;
}

#billingContactsContainer .billing-contact-address {
    color: var(--fused-muted);
}

@media (max-width: 767.98px) {
    #billingContactsContainer .billing-contact-option {
        grid-template-columns: auto minmax(0, 1fr);
    }

    #billingContactsContainer .billing-contact-address {
        grid-column: 2;
    }
}

body.fused-whmcs .account-permission-all-warning {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.875rem;
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid rgba(249, 115, 22, 0.5);
    border-left: 0.25rem solid #f97316;
    border-radius: 0.625rem;
    background: rgba(249, 115, 22, 0.1);
    color: var(--fused-text);
}

body.fused-whmcs .account-permission-all-warning.w-hidden {
    display: none;
}

body.fused-whmcs .account-permission-all-warning > i {
    margin-top: 0.15rem;
    color: #fb923c;
}

body.fused-whmcs .account-permission-all-warning strong,
body.fused-whmcs .account-permission-all-warning span {
    display: block;
}

body.fused-whmcs .account-permission-all-warning strong {
    margin-bottom: 0.25rem;
}

body.fused-whmcs .account-permission-all-warning span {
    color: var(--fused-muted);
    line-height: 1.5;
}

body.fused-whmcs .account-user-permission-picker {
    margin-bottom: 1.25rem;
}

body.fused-whmcs .account-permission-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

body.fused-whmcs .account-permission-group {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--fused-border);
    border-radius: 0.625rem;
    background: var(--fused-surface);
}

body.fused-whmcs .account-permission-group h4 {
    margin: 0;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--fused-border);
    background: var(--fused-surface-soft);
    color: var(--fused-text);
    font-size: 0.9375rem;
    font-weight: 650;
    line-height: 1.35;
}

body.fused-whmcs .account-permission-options {
    display: grid;
}

.fused-user-management-heading,
.fused-user-invite-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.fused-user-management-heading {
    justify-content: space-between;
    margin-bottom: 1rem;
}

body.fused-whmcs .account-permission-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    margin: 0;
    padding: 0.875rem 1rem;
    color: var(--fused-text);
    cursor: pointer;
}

body.fused-whmcs .account-permission-option + .account-permission-option {
    border-top: 1px solid var(--fused-border);
}

body.fused-whmcs .account-permission-option:hover {
    background: rgba(var(--fused-cyan-rgb), 0.055);
}

body.fused-whmcs .account-permission-option .form-check-input {
    position: static;
    margin: 0.2rem 0 0;
}

body.fused-whmcs .account-permission-option strong,
body.fused-whmcs .account-permission-option small {
    display: block;
}

body.fused-whmcs .account-permission-option strong {
    color: var(--fused-text);
    font-size: 0.875rem;
    line-height: 1.35;
}

body.fused-whmcs .account-permission-option small {
    margin-top: 0.2rem;
    color: var(--fused-muted);
    line-height: 1.45;
}

@media (max-width: 767.98px) {
    body.fused-whmcs .account-permission-groups {
        grid-template-columns: 1fr;
    }
}

/* Bootstrap's "custom file" input (ticket/reply attachments) is entirely
   unstyled by us — plain white "Choose file" box + light-gray "Browse"
   pseudo-button — same untouched-vendor-white pattern as the DataTables
   search box and the Generate Password modal earlier. */
body.fused-whmcs .custom-file-label {
    background-color: var(--fused-surface);
    color: var(--fused-text);
    border-color: var(--fused-border-strong);
}

body.fused-whmcs .custom-file-label::after {
    background-color: var(--fused-surface-soft);
    color: var(--fused-muted);
    border-left-color: var(--fused-border-strong);
}

body.fused-whmcs .custom-file-input:focus ~ .custom-file-label {
    border-color: rgba(var(--fused-purple-rgb), 0.6);
    box-shadow: 0 0 0 0.2rem rgba(var(--fused-purple-rgb), 0.1);
}

/* Ticket view: "Ticket Information" + "Custom Fields" sidebar cards get
   reflowed (via viewticket.tpl's script) into one clean row of fields above
   the ticket instead of a narrow stacked sidebar. */
body.fused-whmcs .fused-ticket-info-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    border: 1px solid var(--fused-border);
    border-radius: var(--fused-radius);
    background: var(--fused-surface);
    overflow: hidden;
}

body.fused-whmcs .fused-ticket-info-row > div {
    flex: 1 1 10rem;
    padding: 0.85rem 1.25rem;
    border-right: 1px solid var(--fused-border);
    border-bottom: 1px solid var(--fused-border);
    color: var(--fused-text);
}

body.fused-whmcs .fused-ticket-info-row > div:last-child {
    border-right: 0;
}

body.fused-whmcs .fused-ticket-info-row .title {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--fused-muted);
    font-size: 0.7rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Ticket heading: subject as a large title with Reply/Close beside it,
   replacing the old "View Ticket #X" / "Subject: X" / "Ticket ID: #X" stack
   — the info row above already carries the ticket ID and the subject reads
   fine as the page's real title. */
body.fused-whmcs .fused-ticket-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

body.fused-whmcs .fused-ticket-subject {
    margin: 0;
    color: var(--fused-text);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

body.fused-whmcs .fused-ticket-heading .ticket-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 0.5rem;
}

/* CC Recipients moves from the sidebar to right above the reply's submit
   button (also via viewticket.tpl's script) — same card look, just relocated. */
body.fused-whmcs .fused-cc-recipients-inline {
    margin: 0 0 1.5rem;
}

@media (max-width: 575.98px) {
    body.fused-whmcs .fused-ticket-info-row > div {
        flex: 1 1 50%;
    }
}

/* Ticket thread as chat bubbles: the client's own replies (the viewer's own
   words) sit right in an accent bubble, staff/support replies sit left in a
   neutral one — vendor's ".ticket-reply.staff" class already tells the two
   apart, this just gives that distinction a side and a shape instead of the
   flat, undifferentiated divided list it ships as. */
body.fused-whmcs .view-ticket .card-body {
    border-bottom: 0;
    padding: 0.35rem 1.5rem;
}

body.fused-whmcs .view-ticket .card-body:first-child {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--fused-border);
}

body.fused-whmcs .view-ticket .ticket-reply {
    max-width: 82%;
    margin: 0.65rem 0;
}

body.fused-whmcs .view-ticket .ticket-reply:not(.staff) {
    margin-left: auto;
}

body.fused-whmcs .view-ticket .ticket-reply.staff {
    margin-right: auto;
}

body.fused-whmcs .view-ticket .posted-by {
    background: none;
    padding: 0 0.4rem 0.3rem;
    font-size: 0.78rem;
    color: var(--fused-muted);
}

body.fused-whmcs .view-ticket .posted-by .requestor-badge {
    display: inline-flex;
    float: none !important;
    align-items: center;
    margin-left: 0.5rem;
    white-space: nowrap;
    vertical-align: middle;
}

body.fused-whmcs .view-ticket .ticket-reply:not(.staff) .posted-by {
    text-align: right;
}

body.fused-whmcs .view-ticket .message {
    border-radius: 1.1rem;
    background: var(--fused-surface-soft);
    color: var(--fused-text);
}

body.fused-whmcs .view-ticket .ticket-reply.staff .message {
    border-bottom-left-radius: 0.3rem;
}

body.fused-whmcs .view-ticket .ticket-reply:not(.staff) .message {
    background: #7e22ce;
    color: #fff !important;
    border-bottom-right-radius: 0.3rem;
}

body.fused-whmcs .view-ticket .ticket-reply:not(.staff) .message p,
body.fused-whmcs .view-ticket .ticket-reply:not(.staff) .message li,
body.fused-whmcs .view-ticket .ticket-reply:not(.staff) .message blockquote {
    color: #fff !important;
}

body.fused-whmcs .view-ticket .ticket-reply:not(.staff) .message a {
    color: #fff;
    text-decoration: underline;
}

body.fused-whmcs .view-ticket .attachments {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.3);
    font-size: 0.78rem;
}

body.fused-whmcs .view-ticket .ticket-reply.staff .attachments {
    border-top: 1px dashed var(--fused-border);
}

body.fused-whmcs .view-ticket .attachment-list {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.55rem 0 0;
    padding: 0;
}

body.fused-whmcs .view-ticket .attachment-list li {
    display: block;
    width: auto;
    max-width: 100%;
    min-width: 0;
}

body.fused-whmcs .view-ticket .attachment-list li > a,
body.fused-whmcs .view-ticket .attachment-list li > span {
    display: block;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
}

body.fused-whmcs .view-ticket .attachment-list li span {
    display: flex;
    max-width: 22rem;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0.55rem;
    background: rgba(0, 0, 0, 0.12);
}

body.fused-whmcs .view-ticket .ticket-reply.staff .attachment-list li span {
    border-color: var(--fused-border);
    background: var(--fused-surface);
}

body.fused-whmcs .view-ticket .attachment-list li figure {
    flex: 0 0 auto;
    width: 1.8rem;
    margin: 0;
    background: transparent;
    color: currentColor;
    font-size: 1.15rem;
    line-height: 1;
    text-align: center;
}

body.fused-whmcs .view-ticket .attachment-list .caption {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

body.fused-whmcs .view-ticket .attachment-list a:hover .caption,
body.fused-whmcs .view-ticket .attachment-list a:focus-visible .caption {
    text-decoration: underline;
}

/* Latest-ticket conversation follows the client through the portal while
   keeping the full ticket view available for attachments and history. */
.fused-ticket-chat {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
}

.fused-ticket-chat-trigger {
    display: inline-flex;
    min-height: 3.15rem;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 1rem 0.55rem 0.6rem;
    border: 1px solid rgba(var(--fused-cyan-rgb), 0.45);
    border-radius: 999px;
    background: var(--fused-surface);
    color: var(--fused-text);
    font-weight: 700;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.28);
    cursor: pointer;
}

.fused-ticket-chat-trigger:hover,
.fused-ticket-chat-trigger:focus-visible,
.fused-ticket-chat.is-open .fused-ticket-chat-trigger {
    border-color: var(--fused-cyan);
    color: var(--fused-text);
}

.fused-ticket-chat-trigger-icon {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 999px;
    background: var(--fused-cyan);
    color: #042f32;
}

.fused-ticket-chat-panel {
    position: absolute;
    right: 0;
    bottom: 4.15rem;
    display: flex;
    width: min(24rem, calc(100vw - 2rem));
    max-height: min(35rem, calc(100vh - 7rem));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--fused-border-strong);
    border-radius: 0.9rem;
    background: var(--fused-surface);
    color: var(--fused-text);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.36);
}

.fused-ticket-chat-panel[hidden] {
    display: none;
}

.fused-ticket-chat-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--fused-border);
}

.fused-ticket-chat-heading {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
}

.fused-ticket-chat-heading strong {
    font-size: 1rem;
}

.fused-ticket-chat-heading span {
    overflow: hidden;
    color: var(--fused-muted);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fused-ticket-chat-close {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--fused-muted);
    cursor: pointer;
}

.fused-ticket-chat-close:hover,
.fused-ticket-chat-close:focus-visible {
    background: var(--fused-surface-soft);
    color: var(--fused-text);
}

.fused-ticket-chat-messages {
    display: flex;
    min-height: 12rem;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    padding: 1rem;
    overscroll-behavior: contain;
}

.fused-ticket-chat-message {
    width: fit-content;
    max-width: 88%;
    padding: 0.65rem 0.75rem;
    border-radius: 0.8rem;
    background: var(--fused-surface-soft);
}

.fused-ticket-chat-message.is-staff {
    align-self: flex-start;
    border-bottom-left-radius: 0.2rem;
}

.fused-ticket-chat-message.is-staff .fused-ticket-chat-message-meta strong {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border: 1px solid rgba(var(--fused-cyan-rgb), 0.45);
    border-radius: 999px;
    background: rgba(var(--fused-cyan-rgb), 0.12);
    color: var(--fused-cyan);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.2;
}

.fused-ticket-chat-message.is-client {
    align-self: flex-end;
    border-bottom-right-radius: 0.2rem;
    background: #7e22ce;
    color: #fff;
}

.fused-ticket-chat-message.is-third-party {
    align-self: flex-end;
    border-bottom-right-radius: 0.2rem;
    background: #155e75;
    color: #fff;
}

.fused-ticket-chat-message.is-third-party .fused-ticket-chat-message-body {
    color: #fff !important;
}

.fused-ticket-chat-message.is-client .fused-ticket-chat-message-body {
    color: #fff !important;
}

.fused-ticket-chat-message-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.25rem;
    font-size: 0.66rem;
}

.fused-ticket-chat-message-meta time {
    color: inherit;
    opacity: 0.62;
}

.fused-ticket-chat-message-body {
    overflow-wrap: anywhere;
    font-size: 0.78rem;
    line-height: 1.45;
}

.fused-ticket-chat-attachments {
    display: grid;
    gap: 0.3rem;
    margin-top: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px solid currentColor;
    font-size: 0.7rem;
}

.fused-ticket-chat-attachments a {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.35rem;
    color: inherit;
    overflow-wrap: anywhere;
    opacity: 0.82;
}

.fused-ticket-chat-attachments a:hover,
.fused-ticket-chat-attachments a:focus-visible {
    color: inherit;
    opacity: 1;
}

.fused-ticket-chat-empty {
    display: grid;
    min-height: 10rem;
    place-content: center;
    justify-items: center;
    gap: 0.45rem;
    padding: 1rem;
    color: var(--fused-muted);
    text-align: center;
}

.fused-ticket-chat-empty i {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    margin-bottom: 0.25rem;
    border-radius: 999px;
    background: rgba(var(--fused-cyan-rgb), 0.12);
    color: var(--fused-cyan);
    font-size: 1rem;
}

.fused-ticket-chat-empty strong {
    color: var(--fused-text);
    font-size: 0.9rem;
}

.fused-ticket-chat-empty span {
    max-width: 17rem;
    font-size: 0.75rem;
    line-height: 1.45;
}

.fused-ticket-chat-footer {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--fused-border);
}

.fused-ticket-chat-reply {
    display: grid;
    gap: 0.55rem;
}

.fused-ticket-chat-reply textarea {
    width: 100%;
    min-height: 4.75rem;
    max-height: 10rem;
    resize: vertical;
    border: 1px solid var(--fused-border-strong);
    border-radius: 0.55rem;
    background: var(--fused-bg);
    color: var(--fused-text);
    font: inherit;
    font-size: 0.78rem;
    line-height: 1.45;
}

.fused-ticket-chat-reply textarea:focus {
    border-color: var(--fused-cyan);
    box-shadow: 0 0 0 0.18rem rgba(var(--fused-cyan-rgb), 0.16);
    outline: 0;
}

.fused-ticket-chat-upload-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.6rem;
}

.fused-ticket-chat-upload {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    color: var(--fused-cyan);
    font-size: 0.7rem;
    font-weight: 650;
    cursor: pointer;
}

.fused-ticket-chat-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.fused-ticket-chat-upload:focus-within {
    outline: 2px solid var(--fused-cyan);
    outline-offset: 0.2rem;
}

.fused-ticket-chat-upload-summary {
    min-width: 0;
    overflow: hidden;
    color: var(--fused-muted);
    font-size: 0.66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fused-ticket-chat-reply-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.fused-ticket-chat-reply-status {
    min-height: 1.1rem;
    color: var(--fused-muted);
    font-size: 0.68rem;
    line-height: 1.35;
}

.fused-ticket-chat-reply-status.is-error {
    color: #fca5a5;
}

.fused-ticket-chat-reply-status.is-success {
    color: #86efac;
}

.fused-ticket-chat-full-link {
    justify-self: end;
    color: var(--fused-cyan);
    font-size: 0.72rem;
    font-weight: 650;
}

@media (max-width: 575.98px) {
    .fused-ticket-chat {
        right: 0.6rem;
        bottom: 0.6rem;
    }

    .fused-ticket-chat-panel {
        width: calc(100vw - 1.2rem);
    }
}

@media (max-width: 575.98px), (max-height: 575.98px) {
    .fused-ticket-chat-panel {
        max-height: 40vh;
        max-height: 40dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .fused-ticket-chat-messages {
        min-height: 0;
    }
}

/* Replies posted in by email drag their whole quoted thread history along
   with them ("On ... Fused Support <support@fused.com> wrote: > ...") —
   viewticket.tpl's script finds that marker line and moves everything from
   there on into this collapsed-by-default block. `currentColor` for both
   the rule and the text so it dims correctly whether it lands in a purple
   client bubble or a neutral staff one, rather than picking one fixed color
   that only reads well against one of the two backgrounds. */
body.fused-whmcs .view-ticket .fused-quoted-toggle,
body.fused-whmcs .fused-ticket-chat .fused-quoted-toggle {
    display: flex;
    width: fit-content;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    opacity: 0.65;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

body.fused-whmcs .view-ticket .fused-quoted-toggle:hover,
body.fused-whmcs .view-ticket .fused-quoted-toggle:focus,
body.fused-whmcs .fused-ticket-chat .fused-quoted-toggle:hover,
body.fused-whmcs .fused-ticket-chat .fused-quoted-toggle:focus {
    opacity: 1;
}

body.fused-whmcs .view-ticket .fused-quoted-text,
body.fused-whmcs .fused-ticket-chat .fused-quoted-text {
    margin-top: 0.5rem;
    padding-left: 0.75rem;
    border-left: 2px solid currentColor;
    opacity: 0.65;
    font-size: 0.85rem;
}

body.fused-whmcs .view-ticket .fused-quoted-text.fused-quoted-collapsed,
body.fused-whmcs .fused-ticket-chat .fused-quoted-text.fused-quoted-collapsed {
    display: none;
}

@media (max-width: 575.98px) {
    body.fused-whmcs .view-ticket .ticket-reply {
        max-width: 100%;
    }
}

body.fused-whmcs .alert {
    border: 1px solid var(--fused-border);
    border-radius: 0.65rem;
    box-shadow: none;
}

/* Severity tints match the badge palette used everywhere else (soft rgba
   fill + matching border, full-strength text) instead of Bootstrap's
   light-mode alert colors, which read as a stray pale box on a dark card. */
body.fused-whmcs .alert-info {
    background: rgba(var(--fused-cyan-rgb), 0.1);
    border-color: rgba(var(--fused-cyan-rgb), 0.35);
    color: var(--fused-text);
}

body.fused-whmcs .alert-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.35);
    color: var(--fused-text);
}

body.fused-whmcs .alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.35);
    color: var(--fused-text);
}

body.fused-whmcs .alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.35);
    color: var(--fused-text);
}

/* Announcement excerpt callouts: vendor styles the <article> with a hardcoded
   light-mode #f5f5f5 background; our global text color is light-on-dark, so on
   this one component it became near-invisible light text on a near-white box. */
body.fused-whmcs .announcements .announcement article {
    margin: 0;
    padding: 1rem 1.25rem;
    background-color: var(--fused-surface-soft);
    border-left: 4px solid rgba(var(--fused-cyan-rgb), 0.5);
    border-radius: 0 0.4rem 0.4rem 0;
    color: var(--fused-text);
    line-height: 1.6;
}

body.fused-whmcs .announcements .announcement article > :first-child {
    margin-top: 0;
}

body.fused-whmcs .announcements .announcement article > :last-child {
    margin-bottom: 0;
}

/* The list itself: default markup is a plain stack of full-size <h1>s with
   no separation between entries and a Bootstrap .text-muted date row, which
   fails contrast on our dark surface same as everywhere else it shows up. */
body.fused-whmcs .announcements .announcement {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--fused-border);
}

body.fused-whmcs .announcements .announcement:first-child {
    padding-top: 0;
}

body.fused-whmcs .announcements .announcement:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

body.fused-whmcs .announcements .announcement h1 {
    margin: 0 0 0.4rem;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

body.fused-whmcs .announcements .announcement h1 a {
    color: var(--fused-text);
    text-decoration: none;
}

body.fused-whmcs .announcements .announcement h1 a:hover,
body.fused-whmcs .announcements .announcement h1 a:focus {
    color: var(--fused-cyan);
}

body.fused-whmcs .announcements .announcement .list-inline {
    margin: 0 0 0.9rem;
}

body.fused-whmcs .announcements .announcement .text-muted {
    color: var(--fused-muted) !important;
    font-size: 0.85rem;
}

/* Single-announcement page: same Bootstrap .text-muted contrast fix, plus
   comfortable reading measure and line-height for the full post body, and
   safety for any image an admin drops into the announcement text. */
body.fused-whmcs .fused-announcement-detail .text-muted {
    color: var(--fused-muted) !important;
}

body.fused-whmcs .fused-announcement-detail .py-5 {
    max-width: 48rem;
    line-height: 1.7;
}

body.fused-whmcs .fused-announcement-detail .py-5 img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* Shared "sign in to see this" empty state for both the listing and a
   single-announcement permalink when a visitor isn't logged in. */
.fused-locked-notice .card-body {
    padding: 3rem 1.5rem;
}

.fused-locked-icon {
    display: inline-flex;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 1rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(var(--fused-cyan-rgb), 0.12);
    color: var(--fused-cyan);
    font-size: 1.3rem;
}

.fused-locked-copy {
    max-width: 28rem;
    margin: 0 auto 1.25rem;
    color: var(--fused-muted);
}

body.fused-whmcs .badge,
body.fused-whmcs .label {
    border-radius: 999px;
    font-weight: 650;
}

/* Status pills: soft tinted chips instead of solid saturated fills, so text meets
   contrast targets against the dark surface (solid `.label-success` etc. from the
   vendor theme is white-on-#5cb85c, ~2.5:1 — well under WCAG AA). */
body.fused-whmcs .label-success,
body.fused-whmcs .badge-success,
body.fused-whmcs .status-active,
body.fused-whmcs .status-open,
body.fused-whmcs .status-completed,
body.fused-whmcs .status-paid,
body.fused-whmcs .status-accepted,
body.fused-whmcs .requestor-type-owner {
    border: 1px solid rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.16);
    color: #86efac;
}

body.fused-whmcs .label-danger,
body.fused-whmcs .badge-danger,
body.fused-whmcs .status-pending,
body.fused-whmcs .status-unpaid,
body.fused-whmcs .status-inprogress {
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.16);
    color: #fca5a5;
}

body.fused-whmcs .label-warning,
body.fused-whmcs .badge-warning,
body.fused-whmcs .status-pending-transfer,
body.fused-whmcs .status-suspended,
body.fused-whmcs .status-refunded,
body.fused-whmcs .status-customer-reply,
body.fused-whmcs .status-pending-registration,
body.fused-whmcs .status-redemption,
body.fused-whmcs .status-grace {
    border: 1px solid rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.16);
    color: #fcd34d;
}

body.fused-whmcs .label-default,
body.fused-whmcs .badge-secondary,
body.fused-whmcs .badge-light,
body.fused-whmcs .badge-dark,
body.fused-whmcs .status-terminated,
body.fused-whmcs .status-closed,
body.fused-whmcs .status-cancelled,
body.fused-whmcs .status-collections,
body.fused-whmcs .status-expired,
body.fused-whmcs .status-transferred-away {
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
}

body.fused-whmcs .label-info,
body.fused-whmcs .badge-info,
body.fused-whmcs .requestor-type-operator,
body.fused-whmcs .status-onhold,
body.fused-whmcs .status-payment-pending,
body.fused-whmcs .status-delivered {
    border: 1px solid rgba(56, 189, 248, 0.4);
    background: rgba(56, 189, 248, 0.16);
    color: #7dd3fc;
}

body.fused-whmcs .status-answered {
    border: 1px solid rgba(var(--fused-purple-rgb), 0.4);
    background: rgba(var(--fused-purple-rgb), 0.16);
    color: #d8b4fe;
}

body.fused-whmcs .status-fraud,
body.fused-whmcs .status-lost,
body.fused-whmcs .status-dead {
    border: 1px solid var(--fused-border-strong);
    background: rgba(255, 255, 255, 0.06);
    color: var(--fused-muted);
}

/* The pill colors above (including the renewal cart's "Renewing in X days"
   badge, which is a .label-warning) were tuned for the dark surface only —
   light pastel text that reads fine on near-black is close to invisible on
   the light theme's white/near-white surfaces. Same dark-ink pattern
   already used for .status-pill-* in server-status.css. */
html[data-fused-theme="light"] body.fused-whmcs .label-success,
html[data-fused-theme="light"] body.fused-whmcs .badge-success,
html[data-fused-theme="light"] body.fused-whmcs .status-active,
html[data-fused-theme="light"] body.fused-whmcs .status-open,
html[data-fused-theme="light"] body.fused-whmcs .status-completed,
html[data-fused-theme="light"] body.fused-whmcs .status-paid,
html[data-fused-theme="light"] body.fused-whmcs .status-accepted,
html[data-fused-theme="light"] body.fused-whmcs .requestor-type-owner {
    color: #166534;
}

html[data-fused-theme="light"] body.fused-whmcs .label-danger,
html[data-fused-theme="light"] body.fused-whmcs .badge-danger,
html[data-fused-theme="light"] body.fused-whmcs .status-pending,
html[data-fused-theme="light"] body.fused-whmcs .status-unpaid,
html[data-fused-theme="light"] body.fused-whmcs .status-inprogress {
    color: #991b1b;
}

html[data-fused-theme="light"] body.fused-whmcs .label-warning,
html[data-fused-theme="light"] body.fused-whmcs .badge-warning,
html[data-fused-theme="light"] body.fused-whmcs .status-pending-transfer,
html[data-fused-theme="light"] body.fused-whmcs .status-suspended,
html[data-fused-theme="light"] body.fused-whmcs .status-refunded,
html[data-fused-theme="light"] body.fused-whmcs .status-customer-reply,
html[data-fused-theme="light"] body.fused-whmcs .status-pending-registration,
html[data-fused-theme="light"] body.fused-whmcs .status-redemption,
html[data-fused-theme="light"] body.fused-whmcs .status-grace {
    color: #92400e;
}

html[data-fused-theme="light"] body.fused-whmcs .label-default,
html[data-fused-theme="light"] body.fused-whmcs .badge-secondary,
html[data-fused-theme="light"] body.fused-whmcs .badge-light,
html[data-fused-theme="light"] body.fused-whmcs .badge-dark,
html[data-fused-theme="light"] body.fused-whmcs .status-terminated,
html[data-fused-theme="light"] body.fused-whmcs .status-closed,
html[data-fused-theme="light"] body.fused-whmcs .status-cancelled,
html[data-fused-theme="light"] body.fused-whmcs .status-collections,
html[data-fused-theme="light"] body.fused-whmcs .status-expired,
html[data-fused-theme="light"] body.fused-whmcs .status-transferred-away {
    color: #334155;
}

html[data-fused-theme="light"] body.fused-whmcs .label-info,
html[data-fused-theme="light"] body.fused-whmcs .badge-info,
html[data-fused-theme="light"] body.fused-whmcs .requestor-type-operator,
html[data-fused-theme="light"] body.fused-whmcs .status-onhold,
html[data-fused-theme="light"] body.fused-whmcs .status-payment-pending,
html[data-fused-theme="light"] body.fused-whmcs .status-delivered {
    color: #0e7490;
}

html[data-fused-theme="light"] body.fused-whmcs .status-answered {
    color: #6b21a8;
}

body.fused-whmcs .dropdown-item {
    color: var(--fused-text);
}

body.fused-whmcs .dropdown-item:hover,
body.fused-whmcs .dropdown-item:focus {
    background: var(--fused-surface-soft);
    color: var(--fused-text);
}

body.fused-whmcs .sidebar .card {
    box-shadow: none;
}

body.fused-whmcs .sidebar .card-header {
    border-bottom: 1px solid var(--fused-border);
    padding: 0.75rem 1.1rem;
}

body.fused-whmcs .sidebar .card-title {
    font-size: 0.9rem;
    font-weight: 650;
}

body.fused-whmcs .sidebar .card-body {
    padding: 0.85rem 1.1rem;
}

body.fused-whmcs .sidebar .card-sidebar:first-of-type address,
body.fused-whmcs .sidebar .card-sidebar:first-of-type .card-body p {
    margin-bottom: 0.6rem;
    line-height: 1.4;
}

body.fused-whmcs .sidebar .card-sidebar:first-of-type .btn {
    padding: 0.4rem 0.9rem;
    font-size: 0.8125rem;
}

/* Sidebar billing actions inherit the rail's cyan link color, which makes
   the green Pay All action read like blue-on-green. Give sidebar buttons their
   own compact action treatment and strong contrast. */
body.fused-whmcs .sidebar .card .btn-success,
body.fused-whmcs .sidebar .card .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    border-radius: 0.65rem;
    color: #042f32 !important;
    font-weight: 700;
    opacity: 1 !important;
    text-shadow: none;
}

body.fused-whmcs .sidebar .card .btn-default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    border-radius: 0.65rem;
    color: var(--fused-text) !important;
}

body.fused-whmcs .pagination .page-link {
    border-color: var(--fused-border);
    background: var(--fused-surface);
    color: var(--fused-muted);
}

body.fused-whmcs .pagination .page-item.active .page-link {
    border-color: #00aeb3;
    background: var(--fused-cyan);
    color: #042f32;
}

#footer.footer {
    border: 0;
    border-top: 1px solid var(--fused-border);
    background: var(--fused-surface);
    color: var(--fused-muted);
    padding: 1.25rem 0;
}

.fused-footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#footer.footer .copyright {
    color: var(--fused-muted);
    font-size: 0.75rem;
}

.fused-footer-links {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.75rem;
}

#footer.footer .fused-footer-links a,
#footer.footer .fused-footer-links .btn-link {
    margin: 0;
    padding: 0;
    color: var(--fused-muted);
    font-size: 0.75rem;
}

#footer.footer .fused-footer-links a:hover,
#footer.footer .fused-footer-links .btn-link:hover {
    color: var(--fused-text);
}

.popover,
.tooltip-inner {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.popover {
    border-color: var(--fused-border);
    border-radius: var(--fused-radius);
    background: var(--fused-surface);
    color: var(--fused-text);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.popover-user-notifications {
    border-color: var(--fused-border);
}

.popover-user-notifications ul li {
    border-bottom-color: var(--fused-border);
}

.popover-user-notifications ul li a {
    color: var(--fused-text);
}

.popover-user-notifications ul li a:hover {
    background-color: var(--fused-surface-soft);
}

.popover-user-notifications ul li.none {
    color: var(--fused-muted);
}

.popover-user-notifications ul li i.fas.fa-info-circle,
.popover-user-notifications ul li i.far.fa-info-circle {
    color: #0891b2;
}

.popover-user-notifications ul li i.fas.fa-exclamation-triangle,
.popover-user-notifications ul li i.far.fa-exclamation-triangle {
    color: #d97706;
}

.popover-user-notifications ul li i.fas.fa-exclamation-circle,
.popover-user-notifications ul li i.far.fa-exclamation-circle {
    color: #dc2626;
}

.popover-user-notifications ul li i.fas.fa-check-circle,
.popover-user-notifications ul li i.far.fa-check-circle {
    color: #16a34a;
}

html[data-fused-theme="dark"] .popover-user-notifications ul li i.fas.fa-info-circle,
html[data-fused-theme="dark"] .popover-user-notifications ul li i.far.fa-info-circle {
    color: #67e8f9;
}

html[data-fused-theme="dark"] .popover-user-notifications ul li i.fas.fa-exclamation-triangle,
html[data-fused-theme="dark"] .popover-user-notifications ul li i.far.fa-exclamation-triangle {
    color: #fcd34d;
}

html[data-fused-theme="dark"] .popover-user-notifications ul li i.fas.fa-exclamation-circle,
html[data-fused-theme="dark"] .popover-user-notifications ul li i.far.fa-exclamation-circle {
    color: #fca5a5;
}

html[data-fused-theme="dark"] .popover-user-notifications ul li i.fas.fa-check-circle,
html[data-fused-theme="dark"] .popover-user-notifications ul li i.far.fa-check-circle {
    color: #86efac;
}

.client-alerts a,
.client-alerts li {
    color: var(--fused-text);
}

/* Account menu popover — modeled after Tailwind Catalyst's user-menu dropdown
   (icon + label rows, generous hit area, quiet hover, a divider before the
   destructive/exit action) instead of the previous scattered icon buttons. */
.fused-account-menu {
    margin: 0;
    padding: 0.4rem;
    list-style: none;
}

body.fused-whmcs .fused-account-menu li a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--fused-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

body.fused-whmcs .fused-account-menu li a:hover,
body.fused-whmcs .fused-account-menu li a:focus {
    background: var(--fused-surface-soft);
    color: var(--fused-text);
    text-decoration: none;
}

.fused-account-menu li a i {
    width: 1rem;
    color: var(--fused-muted);
    text-align: center;
}

.fused-account-menu-divider {
    height: 1px;
    margin: 0.35rem 0.6rem;
    background: var(--fused-border);
}

::selection {
    background: rgba(var(--fused-purple-rgb), 0.65);
    color: #ffffff;
}

/* WHMCS lays its page sidebar (Your Info/Contacts/Shortcuts, etc.) and main
   content out with plain col-lg-4/col-xl-3 + col-lg-8/col-xl-9, sized as if the
   full viewport were available. Our fixed nav permanently eats
   --fused-sidebar-width (320px) of that before Bootstrap's grid ever sees it, so
   its lg/xl breakpoints kick in ~320px too early and the two columns get
   squeezed into an unreadably narrow sliver. Shift those breakpoints out by the
   nav's width so the split only happens once there's actually room for it. */
@media (min-width: 992px) and (max-width: 1311.98px) {
    body.fused-whmcs #main-body > .container > .row > .col-lg-4.col-xl-3,
    body.fused-whmcs #main-body > .container > .row > .col-lg-8.col-xl-9.primary-content {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 1312px) and (max-width: 1519.98px) {
    body.fused-whmcs #main-body > .container > .row > .col-lg-4.col-xl-3 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    body.fused-whmcs #main-body > .container > .row > .col-lg-8.col-xl-9.primary-content {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}

@media (min-width: 1600px) {
    body.fused-whmcs #main-body > .container,
    #header.fused-topbar > .container {
        width: 100%;
        max-width: none;
        padding-right: 2rem;
        padding-left: 2rem;
    }

    body.fused-whmcs #main-body > .container > .row > .col-lg-4.col-xl-3 {
        flex: 0 0 22rem;
        max-width: 22rem;
    }

    body.fused-whmcs #main-body > .container > .row > .col-lg-8.col-xl-9.primary-content {
        flex: 1 1 0;
        max-width: calc(100% - 22rem);
    }
}

/* Auth pages (login, register, password reset) skip the dashboard chrome
   entirely — no fixed nav, no topbar, no breadcrumb — and render inside this
   centered full-bleed shell instead. See header.tpl / footer.tpl $isAuthPage. */
.fused-auth-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--fused-bg);
    padding: 6rem 1.5rem 3rem;
}

.fused-auth-blob {
    position: absolute;
    z-index: 0;
    border-radius: 999px;
    filter: blur(90px);
    pointer-events: none;
}

.fused-auth-blob-purple {
    top: -12rem;
    left: -12rem;
    width: 34rem;
    height: 34rem;
    background: rgba(var(--fused-purple-rgb), 0.22);
}

.fused-auth-blob-cyan {
    right: -12rem;
    bottom: -12rem;
    width: 32rem;
    height: 32rem;
    background: rgba(var(--fused-cyan-rgb), 0.16);
}

.fused-auth-brand {
    position: relative;
    z-index: 2;
    display: inline-flex;
    margin-bottom: 2rem;
}

.fused-auth-brand .fused-logo-svg {
    height: 4.5rem;
    width: auto;
}

/* Logo is now inlined (includes/fused-logo.tpl) instead of <img src>,
   specifically so this can reach the wordmark fill directly — an <img> is
   opaque to page CSS, which previously meant the best we could do in light
   theme was a drop-shadow halo around the white text. This recolors it
   properly instead. */
html[data-fused-theme="light"] .fused-auth-brand .fused-logo-svg .three-3 {
    fill: #000000;
}

.fused-auth-theme-toggle.fused-auth-theme-toggle {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    z-index: 2;
}

.fused-auth-main {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 30rem;
}

.fused-auth-page-clientregister .fused-auth-main {
    max-width: 56rem;
}

.fused-auth-main .card {
    overflow: hidden;
    border: 1px solid var(--fused-border);
    border-radius: 1rem;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.fused-auth-main > .card > .card-body,
.fused-auth-main > form > .card > .card-body {
    padding: 2.5rem;
}

.fused-auth-main .card-title,
.fused-auth-main .h3 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.fused-auth-main > .card > .card-footer,
.fused-auth-main > form > .card > .card-footer {
    padding: 1.25rem 2.5rem;
    background: var(--fused-surface-soft);
}

/* Google's rendered button ({$provider.code}) can't be restyled — it's their
   own branded widget — so instead of leaving it floating below the card (its
   original spot, right after the form closes), it's pulled in as a second
   footer segment with a divider, reading as one cohesive card. */
.fused-auth-main .card-footer + .card-footer.fused-auth-social {
    border-top: 1px solid var(--fused-border);
}

.fused-auth-main .fused-auth-social .social-signin-btns {
    display: flex;
    justify-content: center;
}

.fused-auth-main .fused-auth-social .providerLinkingFeedback:empty {
    display: none;
}

/* The "Sign Up" divider above the register form (vendor's #registration
   .sub-heading) is a classic "line with text cut into it" trick: a full-width
   border-top plus a span shifted up to straddle it, with the span's own
   background painted over the line to mask the segment behind the text. That
   masking color is hardcoded white, so on our dark background it didn't mask
   anything — the line just ran straight through the text instead of being
   interrupted by it, reading as a stray rule "jetting out" either side. */
#registration .sub-heading {
    border-top-color: var(--fused-border);
}

#registration .sub-heading span {
    background-color: var(--fused-bg);
    color: var(--fused-text);
    font-size: 1.35rem;
    font-weight: 650;
}

.fused-auth-back-link {
    display: block;
    margin-top: 1.5rem;
    color: var(--fused-muted);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.fused-auth-back-link:hover,
.fused-auth-back-link:focus {
    color: var(--fused-text);
    text-decoration: none;
}

.fused-auth-back-link > i {
    margin-right: 0.4rem;
}

@media (min-width: 576px) and (max-height: 850px) {
    body.fused-auth-page-login .fused-auth-shell {
        justify-content: flex-start;
        padding: 1.5rem;
        overflow-y: auto;
    }

    body.fused-auth-page-login .fused-auth-main > form > .card {
        margin-top: 0 !important;
    }

    body.fused-auth-page-login .fused-auth-main > form > .card > .card-body {
        padding-top: 1rem !important;
        padding-bottom: 1.5rem !important;
    }
}

@media (max-width: 575.98px) {
    .fused-auth-shell {
        padding: 5.5rem 1rem 2rem;
    }

    .fused-auth-main > .card > .card-body,
    .fused-auth-main > form > .card > .card-body {
        padding: 1.75rem;
    }

    .fused-auth-main > .card > .card-footer,
    .fused-auth-main > form > .card > .card-footer {
        padding: 1rem 1.75rem;
    }
}

@media (max-width: 1199.98px) {
    .fused-topbar-actions .fused-account-name {
        display: none;
    }

    .fused-topbar-actions .fused-account-button {
        padding-right: 0.35rem;
    }
}

@media (max-width: 991.98px) {
    .fused-sidebar {
        width: min(18rem, 86vw);
        transform: translateX(-100%);
        transition: transform 180ms ease;
    }

    .fused-sidebar-close,
    .fused-menu-button {
        display: inline-flex;
    }

    .fused-sidebar-open {
        overflow: hidden;
    }

    .fused-sidebar-open .fused-sidebar {
        transform: translateX(0);
    }

    .fused-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1039;
        display: block;
        border: 0;
        background: rgba(0, 0, 0, 0.48);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
        backdrop-filter: blur(3px);
    }

    .fused-sidebar-open .fused-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    #header.fused-topbar,
    body.fused-whmcs > .alert,
    body.fused-whmcs > .network-issue,
    body.fused-whmcs > .client-alert,
    body.fused-whmcs > .verification-banner,
    body.fused-whmcs #main-body,
    #footer.footer {
        margin-left: 0;
    }

    #header.fused-topbar {
        width: 100%;
    }

    .fused-sidebar[aria-hidden="true"] {
        visibility: hidden;
    }

    .fused-sidebar[aria-hidden="false"] {
        visibility: visible;
    }
}

@media (max-width: 575.98px) {
    #header.fused-topbar {
        padding: 0;
    }

    .fused-topbar-actions {
        gap: 0;
    }

    .fused-topbar-actions .fused-account-button,
    .fused-topbar-actions > .fused-icon-button:last-child {
        display: none;
    }

    body.fused-whmcs #main-body {
        padding: 1.25rem 0 2rem;
    }

    body.fused-whmcs #main-body > .container,
    #footer > .container {
        width: min(100% - 1.25rem, 80rem);
    }

    .fused-topbar-breadcrumb .breadcrumb-item:not(:nth-last-child(-n+2)) {
        display: none;
    }

    .fused-page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .fused-page-heading .btn {
        align-self: flex-start;
    }

    .fused-summary-grid .tile {
        min-height: 7rem;
        padding: 1rem;
    }

    .fused-summary-grid .tile .stat {
        font-size: 1.45rem;
    }

    .fused-footer-content {
        align-items: flex-start;
        flex-direction: column;
    }

    .fused-footer-links {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .fused-sidebar,
    .fused-topbar,
    .fused-sidebar-backdrop,
    #footer.footer {
        display: none !important;
    }

    #main-body {
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }
}

/* Service-specific shortcuts: Mail MX1 gets an email-only sidebar; ordinary
   services do not inherit email links. S1000 remains intentionally unchanged. */
body.fused-service-email .sidebar .card-sidebar .list-group-item[menuItemName]:not([menuItemName*="Email"]):not([menuItemName*="email"]) {
    display: none !important;
}

body.fused-service-non-email .sidebar .card-sidebar .list-group-item[menuItemName*="Email"],
body.fused-service-non-email .sidebar .card-sidebar .list-group-item[menuItemName*="email"] {
    display: none !important;
}

/* Preserve the existing mail-only / hosting-only product separation. */
body.fused-service-non-email #cPanelQuickEmailPanel,
body.fused-service-non-email #cPanelQuickShortcutsPanel .fused-cpanel-email-category,
body.fused-service-email #cPanelQuickShortcutsPanel .fused-cpanel-hosting-category {
    display: none !important;
}

#cPanelQuickShortcutsPanel .fused-cpanel-shortcut-category {
    --shortcut-color: var(--fused-purple-ink);
    --shortcut-rgb: var(--fused-purple-rgb);
    text-align: left;
    padding: 1.25rem 0;
    border-top: 1px solid var(--fused-border);
}

#cPanelQuickShortcutsPanel .fused-cpanel-popular {
    display: none;
    padding-top: 0;
    border-top: 0;
}

#cPanelQuickShortcutsPanel [data-cpanel-popular="all"],
body.fused-service-email #cPanelQuickShortcutsPanel [data-cpanel-popular="email"],
body.fused-service-non-email #cPanelQuickShortcutsPanel [data-cpanel-popular="hosting"] {
    display: block;
}

body.fused-service-email #cPanelQuickShortcutsPanel [data-cpanel-popular="all"],
body.fused-service-non-email #cPanelQuickShortcutsPanel [data-cpanel-popular="all"] {
    display: none;
}

#cPanelQuickShortcutsPanel [data-cpanel-category="files"],
#cPanelQuickShortcutsPanel [data-cpanel-category="email-configuration"],
#cPanelQuickShortcutsPanel [data-cpanel-category="advanced"] {
    --shortcut-color: var(--fused-warn);
    --shortcut-rgb: var(--fused-warn-rgb);
}

#cPanelQuickShortcutsPanel [data-cpanel-category="databases"],
#cPanelQuickShortcutsPanel [data-cpanel-category="domains"],
#cPanelQuickShortcutsPanel [data-cpanel-category="email-management"],
#cPanelQuickShortcutsPanel [data-cpanel-category="applications"] {
    --shortcut-color: var(--fused-cyan-ink);
    --shortcut-rgb: var(--fused-cyan-rgb);
}

#cPanelQuickShortcutsPanel [data-cpanel-category="security"],
#cPanelQuickShortcutsPanel [data-cpanel-category="email-deliverability"] {
    --shortcut-color: var(--fused-ok);
    --shortcut-rgb: var(--fused-ok-rgb);
}

#cPanelQuickShortcutsPanel [data-cpanel-category="email-filtering"] {
    --shortcut-color: var(--fused-danger);
    --shortcut-rgb: var(--fused-danger-rgb);
}

#cPanelQuickShortcutsPanel .fused-cpanel-shortcut-category:first-child {
    padding-top: 0;
    border-top: 0;
}

#cPanelQuickShortcutsPanel .fused-cpanel-shortcut-category:last-child {
    padding-bottom: 0;
}

#cPanelQuickShortcutsPanel .fused-cpanel-shortcut-category-title {
    margin: 0 0 1rem;
    color: var(--fused-text);
    font-size: 1rem;
    font-weight: 700;
}

#cPanelQuickShortcutsPanel .fused-cpanel-shortcut-grid {
    text-align: center;
    row-gap: 1rem;
}

#cPanelQuickShortcutsPanel .fused-cpanel-shortcut > a {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    color: var(--fused-text);
    text-decoration: none;
    overflow-wrap: anywhere;
    border-radius: 0.75rem;
}

#cPanelQuickShortcutsPanel .fused-cpanel-shortcut-icon {
    display: flex;
    flex: 0 0 3.25rem;
    width: 3.25rem;
    height: 3.25rem;
    align-items: center;
    justify-content: center;
    color: var(--shortcut-color);
    border: 1px solid rgba(var(--shortcut-rgb), 0.24);
    border-radius: 1rem;
    background: rgba(var(--shortcut-rgb), 0.1);
    font-size: 1.375rem;
}

@media (max-width: 575.98px) {
    #cPanelQuickShortcutsPanel .fused-cpanel-shortcut > a {
        padding: 0.5rem 0.125rem;
        font-size: 0.875rem;
    }
}

#cPanelQuickShortcutsPanel .fused-cpanel-shortcut > a:hover .fused-cpanel-shortcut-icon,
#cPanelQuickShortcutsPanel .fused-cpanel-shortcut > a:focus-visible .fused-cpanel-shortcut-icon {
    border-color: var(--shortcut-color);
    background: rgba(var(--shortcut-rgb), 0.2);
}

#cPanelQuickShortcutsPanel .fused-cpanel-shortcut > a:focus-visible {
    outline: 2px solid var(--fused-cyan);
    outline-offset: 2px;
}

/* Mail MX1 exposes account quantity through usage billing. The generic cPanel
   usage and billing summaries duplicate that information and hosting detail. */
body.fused-service-email #cPanelUsagePanel,
body.fused-service-email #cPanelBillingOverviewPanel {
    display: none !important;
}

body.fused-service-email .fused-email-metrics {
    text-align: left;
}

/* The invoice is a standalone WHMCS document, so it opts into the same Veil
   theme tokens without inheriting the portal shell. */
body.fused-invoice-page {
    min-height: 100vh;
    padding: 1rem 0 2rem;
    background: var(--fused-bg) !important;
    color: var(--fused-text);
    --fused-invoice-logo-text: #ffffff;
}

html[data-fused-theme="light"] body.fused-invoice-page {
    --fused-invoice-logo-text: #111827;
}

body.fused-invoice-page .fused-invoice-theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 20;
    background: var(--fused-surface);
    box-shadow: var(--fused-shadow);
}

body.fused-invoice-page .invoice-container {
    max-width: 900px;
    margin: 1rem auto;
    padding: 3.5rem;
    border: 1px solid var(--fused-border);
    border-radius: var(--fused-radius);
    background: var(--fused-surface);
    color: var(--fused-text);
    box-shadow: var(--fused-shadow);
}

body.fused-invoice-page .fused-invoice-logo {
    display: inline-flex;
    margin-bottom: 0.75rem;
}

body.fused-invoice-page .fused-invoice-logo .fused-logo-svg {
    display: block;
    width: auto;
    height: 3.25rem;
}

body.fused-invoice-page .fused-invoice-logo .fused-logo-svg .three-3 {
    fill: var(--fused-invoice-logo-text);
}

body.fused-invoice-page h1,
body.fused-invoice-page h2,
body.fused-invoice-page h3,
body.fused-invoice-page h4,
body.fused-invoice-page h5,
body.fused-invoice-page h6,
body.fused-invoice-page strong,
body.fused-invoice-page label,
body.fused-invoice-page address,
body.fused-invoice-page .card-title,
body.fused-invoice-page .card-subtitle {
    color: var(--fused-text);
}

body.fused-invoice-page address {
    font-style: normal;
}

body.fused-invoice-page .small-text,
body.fused-invoice-page .text-muted {
    color: var(--fused-muted) !important;
}

body.fused-invoice-page hr {
    border-color: var(--fused-border);
}

body.fused-invoice-page .card,
body.fused-invoice-page .panel {
    border-color: var(--fused-border);
    background: var(--fused-surface);
    color: var(--fused-text);
}

body.fused-invoice-page .card-header,
body.fused-invoice-page .panel-heading {
    border-color: var(--fused-border);
    background: var(--fused-surface-soft);
    color: var(--fused-text);
}

body.fused-invoice-page .card-header.bg-success,
body.fused-invoice-page .card-title.bg-info {
    color: #ffffff !important;
}

body.fused-invoice-page .table,
body.fused-invoice-page .table td,
body.fused-invoice-page .table th {
    border-color: var(--fused-border);
    background: transparent;
    color: var(--fused-text);
}

body.fused-invoice-page .table thead td,
body.fused-invoice-page .table thead th,
body.fused-invoice-page .table td.total-row {
    background: var(--fused-surface-soft) !important;
}

body.fused-invoice-page .form-control,
body.fused-invoice-page .custom-select,
body.fused-invoice-page input,
body.fused-invoice-page select {
    border-color: var(--fused-border-strong);
    background: var(--fused-bg);
    color: var(--fused-text);
}

/* The closed box above is fully ours to style, but the open option list on
   a native <select> is drawn by the OS/browser, not CSS — color-scheme is
   the one lever that reaches it, hinting the browser to use its dark native
   popup chrome instead of always-white. Declared directly on the control
   (not just inherited from :root) since some browsers only honor it there. */
body.fused-invoice-page select {
    color-scheme: dark;
}

html[data-fused-theme="light"] body.fused-invoice-page select {
    color-scheme: light;
}

body.fused-invoice-page .fused-payment-method-form {
    position: relative;
    display: inline-flex;
    width: min(100%, 15rem);
    margin-top: 0.35rem;
}

body.fused-invoice-page .fused-payment-method-form::after {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    color: #67e8f9;
    content: "\f078";
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
}

body.fused-invoice-page .fused-payment-method-select {
    width: 100%;
    height: auto;
    min-height: 2.75rem;
    padding: 0.6rem 2.5rem 0.6rem 0.85rem;
    border: 1px solid var(--fused-cyan);
    border-radius: 0.55rem;
    background-color: var(--fused-surface-soft);
    background-image: none;
    color: var(--fused-text);
    font-weight: 600;
    cursor: pointer;
    appearance: none;
}

body.fused-invoice-page .fused-payment-method-select:hover {
    border-color: #67e8f9;
    background-color: var(--fused-surface);
}

body.fused-invoice-page .fused-payment-method-select:focus {
    border-color: var(--fused-cyan);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2);
    outline: 0;
}

html[data-fused-theme="light"] body.fused-invoice-page .fused-payment-method-form::after {
    color: #6d28d9;
}

html[data-fused-theme="light"] body.fused-invoice-page .fused-payment-method-select {
    border-color: #7c3aed;
    background-color: #ffffff;
}

@media (max-width: 575.98px) {
    body.fused-invoice-page .fused-payment-method-form {
        width: 100%;
    }
}

body.fused-invoice-page .btn-default {
    border-color: var(--fused-border-strong);
    background: var(--fused-surface-soft);
    color: var(--fused-text);
}

body.fused-invoice-page .btn-default:hover,
body.fused-invoice-page .btn-default:focus {
    border-color: var(--fused-cyan);
    background: var(--fused-surface);
    color: var(--fused-text);
}

body.fused-invoice-page .invoice-qr-wrapper {
    width: fit-content;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: #ffffff;
}

body.fused-invoice-page > p.text-center a {
    color: var(--fused-cyan);
}

body.fused-invoice-page .payment-btn-container-footer {
    margin-bottom: 1.25rem;
}

@media (max-width: 895px) {
    body.fused-invoice-page .invoice-container {
        margin: 3.75rem 0.75rem 1rem;
        padding: 2rem;
    }
}

@media (max-width: 575.98px) {
    body.fused-invoice-page .invoice-container {
        padding: 1.25rem;
    }

    body.fused-invoice-page .fused-invoice-logo .fused-logo-svg {
        height: 2.75rem;
    }
}

@media print {
    body.fused-invoice-page,
    body.fused-invoice-page .invoice-container,
    body.fused-invoice-page .card,
    body.fused-invoice-page .panel,
    body.fused-invoice-page .card-header,
    body.fused-invoice-page .panel-heading,
    body.fused-invoice-page .table,
    body.fused-invoice-page .table td,
    body.fused-invoice-page .table th,
    body.fused-invoice-page .table thead td,
    body.fused-invoice-page .table thead th,
    body.fused-invoice-page .table td.total-row {
        border-color: #d1d5db !important;
        background: #ffffff !important;
        color: #111827 !important;
        box-shadow: none !important;
    }

    body.fused-invoice-page .invoice-container {
        margin: 0 auto;
    }

    body.fused-invoice-page h1,
    body.fused-invoice-page h2,
    body.fused-invoice-page h3,
    body.fused-invoice-page h4,
    body.fused-invoice-page strong,
    body.fused-invoice-page address,
    body.fused-invoice-page .small-text,
    body.fused-invoice-page .text-muted {
        color: #111827 !important;
    }

    body.fused-invoice-page .fused-invoice-logo .fused-logo-svg .three-3 {
        fill: #111827 !important;
    }
}

/* ==========================================================================
   Veil component kit (P1)

   The reusable vocabulary the redesigned client-area pages are built from:
   usage meters, status dots + pills, collapsible groups, detail
   headers, key/value rows, banners, and toasts. Nothing here is wired into a
   page yet — later phases add the markup. Every color routes through the
   veil tokens (including the --fused-ok / --fused-warn / --fused-danger set
   added to :root above) so light and dark both resolve.
   ========================================================================== */

/* --- Usage meter: disk / bandwidth / mailbox quota bars. --- */
.fused-meter + .fused-meter { margin-top: 0.9rem; }

.fused-meter-top {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    color: var(--fused-muted);
}

.fused-meter-top b {
    color: var(--fused-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fused-meter-track {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--fused-surface-soft);
    overflow: hidden;
}

.fused-meter-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--fused-purple);
}

.fused-meter-fill.is-cyan { background: var(--fused-cyan); }
.fused-meter-fill.is-ok { background: var(--fused-ok); }
.fused-meter-fill.is-warn { background: var(--fused-warn); }
.fused-meter-fill.is-muted { background: var(--fused-border-strong); }

/* --- Status dot: a small severity glyph for list rows and headers. --- */
.fused-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--fused-border-strong);
    vertical-align: middle;
}

.fused-dot.is-ok { background: var(--fused-ok); }
.fused-dot.is-warn { background: var(--fused-warn); }
.fused-dot.is-danger { background: var(--fused-danger); }

.fused-dot-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

/* --- Pill: a labelled status chip with a leading dot. Sits alongside — not
   replacing — Bootstrap's .badge and the invoice .label.status-* chips. --- */
.fused-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    color: var(--fused-muted);
    background: var(--fused-surface-soft);
}

.fused-pill.w-hidden {
    display: none;
}

.fused-pill::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
}

.fused-pill.is-ok { color: var(--fused-ok); background: rgba(var(--fused-ok-rgb), 0.14); }
.fused-pill.is-warn { color: var(--fused-warn); background: rgba(var(--fused-warn-rgb), 0.14); }
.fused-pill.is-danger { color: var(--fused-danger); background: rgba(var(--fused-danger-rgb), 0.14); }
.fused-pill.is-info { color: var(--fused-cyan); background: rgba(var(--fused-cyan-rgb), 0.14); }
.fused-pill.is-plain::before { display: none; }

html[data-fused-theme="light"] .fused-pill.is-info { color: #0e7490; }

/* --- Collapsible group: the paid/unpaid, active/inactive separator. Works
   both as a standalone header + body and as a table-section header where the
   body is the following <tr> rows inside a tbody toggled .is-collapsed. --- */
body.fused-whmcs .fused-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.8rem 0.25rem;
    border: 0;
    background: transparent;
    color: var(--fused-muted);
    font: inherit;
    cursor: pointer;
    transition: color 140ms ease;
}

body.fused-whmcs .fused-group:hover { color: var(--fused-text); }

.fused-group-chevron {
    width: 0.8rem;
    height: 0.8rem;
    flex-shrink: 0;
    transition: transform 160ms ease;
}

.fused-group[aria-expanded="true"] .fused-group-chevron { transform: rotate(90deg); }

.fused-group-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    white-space: nowrap;
}

.fused-group-count {
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: var(--fused-surface-soft);
    color: var(--fused-muted);
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
}

.fused-group-rule {
    flex: 1;
    height: 1px;
    background: var(--fused-border);
    transition: background 140ms ease;
}

body.fused-whmcs .fused-group:hover .fused-group-rule { background: var(--fused-border-strong); }

.fused-group-body[hidden] { display: none; }

.fused-group-row td { background: var(--fused-surface-soft); padding: 0 1rem; border-top: 0; }
.fused-group-row td .fused-group { padding: 0.55rem 0; }
tbody + tbody .fused-group-row td { border-top: 1px solid var(--fused-border); }
tbody.is-collapsed tr:not(.fused-group-row) { display: none; }

/* --- Detail page scaffolding: back link + heading row. --- */
.fused-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fused-muted);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.fused-back-link:hover { color: var(--fused-text); }
.fused-back-link i, .fused-back-link svg { width: 0.85rem; height: 0.85rem; }

.fused-detail-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.75rem 0 1.25rem;
}

.fused-detail-head h1 {
    font-size: 1.5rem;
    margin: 0;
}

.fused-detail-head .fused-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* --- Key/value rows for registration / server-info panels. --- */
.fused-kv {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.85rem;
}

.fused-kv + .fused-kv { border-top: 1px solid var(--fused-border); }
.fused-kv > span:first-child { color: var(--fused-muted); }
.fused-kv > span:last-child { color: var(--fused-text); text-align: right; }

/* --- Banner: a prominent contextual notice (suspended package, mail paused).
   Heavier than Bootstrap's .alert, sits inside the content column. --- */
.fused-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: var(--fused-radius);
    border: 1px solid rgba(var(--fused-danger-rgb), 0.4);
    background: rgba(var(--fused-danger-rgb), 0.1);
    color: var(--fused-text);
    margin-bottom: 1rem;
}

.fused-banner > i, .fused-banner > svg {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.1rem;
    color: var(--fused-danger);
}

.fused-banner.is-info {
    border-color: rgba(var(--fused-cyan-rgb), 0.4);
    background: rgba(var(--fused-cyan-rgb), 0.1);
}

.fused-banner.is-info > i, .fused-banner.is-info > svg { color: var(--fused-cyan); }
.fused-banner .fused-banner-body { flex: 1; font-size: 0.88rem; }

/* --- Toasts: transient confirmations. flashmessage.tpl renders a plain
   .alert banner (the no-JS fallback); fused-theme.js promotes it to a
   fixed, dismissible, auto-expiring toast by adding .fused-flash-toast. --- */
.fused-flash {
    position: relative;
}

.fused-flash-toast {
    position: fixed;
    top: 4.75rem;
    right: 1rem;
    z-index: 1080;
    max-width: min(24rem, calc(100vw - 2rem));
    margin: 0;
    box-shadow: var(--fused-shadow);
    animation: fusedToastIn 180ms ease-out;
}

.fused-flash-toast + .fused-flash-toast { margin-top: 0.5rem; }

.fused-flash-close {
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.6;
    cursor: pointer;
}

.fused-flash-close:hover { opacity: 1; }
.fused-flash-toast.is-leaving { animation: fusedToastOut 180ms ease-in forwards; }

.fused-toast-stack {
    position: fixed;
    top: 4.75rem;
    right: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

body.fused-whmcs .fused-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: min(24rem, calc(100vw - 2rem));
    padding: 0.7rem 1rem;
    border-radius: var(--fused-radius);
    border: 1px solid var(--fused-border);
    background: var(--fused-surface);
    color: var(--fused-text);
    box-shadow: var(--fused-shadow);
    font-size: 0.85rem;
    animation: fusedToastIn 180ms ease-out;
}

.fused-toast > i, .fused-toast > svg { color: var(--fused-ok); flex-shrink: 0; }

@keyframes fusedToastIn {
    from { opacity: 0; transform: translateY(-0.5rem); }
}

@keyframes fusedToastOut {
    to { opacity: 0; transform: translateY(-0.5rem); }
}

@media (prefers-reduced-motion: reduce) {
    .fused-group-chevron,
    .fused-flash-toast,
    .fused-flash-toast.is-leaving,
    body.fused-whmcs .fused-toast {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   Dashboard (P2)

   clientareahome.tpl: a status strip (network + security posture) between the
   count tiles and the WHMCS home panels, a "needs your attention" card driven
   by $clientAlerts, and a quick-actions row. The panels themselves keep the
   framework's two-column layout.
   ========================================================================== */

.fused-home-status {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

body.fused-whmcs a.fused-home-status-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--fused-border);
    border-radius: var(--fused-radius);
    background: var(--fused-surface);
    box-shadow: var(--fused-shadow);
    color: var(--fused-text);
    text-decoration: none;
    transition: border-color 140ms ease;
}

body.fused-whmcs a.fused-home-status-item:hover {
    border-color: var(--fused-border-strong);
    color: var(--fused-text);
    text-decoration: none;
}

.fused-home-status-label {
    color: var(--fused-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.fused-home-status-value {
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
}

.fused-home-status-item > .fused-home-status-caret {
    color: var(--fused-muted);
    font-size: 0.7rem;
    flex-shrink: 0;
}

.fused-attention {
    margin-bottom: 1.5rem;
}

.fused-attention .fused-attention-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fused-warn);
}

body.fused-whmcs .fused-attention .card {
    border-color: rgba(var(--fused-warn-rgb), 0.4);
    margin-bottom: 0;
}

.fused-attention .list-group-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.fused-attention .list-group-item > i {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.fused-attention .list-group-item .fused-attention-danger { color: var(--fused-danger); }
.fused-attention .list-group-item .fused-attention-warning { color: var(--fused-warn); }
.fused-attention .list-group-item .fused-attention-info { color: var(--fused-cyan); }

.fused-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 700px) {
    .fused-home-status { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Hosting (P3)

   Services index (clientareaproducts.tpl) gets a status dot in each row;
   DataTables is untouched. The service detail
   (clientareaproductdetails.tpl) had no veil styling at all — it fell
   through to the vendor Bootstrap-Six look. This section brings the overview
   card, the nested info tabs, the module client area, the resource-usage
   meters and the addon cards onto veil surfaces.
   ========================================================================== */

/* Services index status dot: nudge it onto the label baseline. */
#tableServicesList .fused-dot,
#tableEmailServicesList .fused-dot {
    margin-right: 0.4rem;
}

/* --- Service detail: overview area --- */
body.fused-whmcs #tabOverview > .card,
body.fused-whmcs #tabOverview .product-details-tab-container,
body.fused-whmcs .module-client-area .card {
    background: var(--fused-surface);
    border: 1px solid var(--fused-border);
    border-radius: var(--fused-radius);
    color: var(--fused-text);
}

/* .product-details-tab-container ships a hardcoded Bootstrap `bg-white`
   class in the markup — override it so the panel isn't a white slab on the
   dark theme. */
body.fused-whmcs .product-details-tab-container.bg-white {
    background: var(--fused-surface) !important;
}

body.fused-whmcs .product-details-tab-container {
    padding: 1.25rem;
    margin-top: 0;
    border-top-left-radius: 0;
}

/* The fallback overview card (products with no module client area). */
body.fused-whmcs .product-details .product-status {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
}

body.fused-whmcs .product-details .product-icon {
    text-align: left !important;
}

body.fused-whmcs .product-details .product-icon .fa-stack {
    display: none;
}

body.fused-whmcs .product-details .product-icon h3 {
    font-size: 1.25rem;
    font-weight: 650;
    margin: 0;
}

body.fused-whmcs .product-details .product-icon h4 {
    font-size: 0.85rem;
    color: var(--fused-muted);
    margin: 0.1rem 0 0;
}

body.fused-whmcs .product-details .product-status-text {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    color: var(--fused-muted);
    background: var(--fused-surface-soft);
}

body.fused-whmcs .product-details .product-status-active .product-status-text {
    color: var(--fused-ok);
    background: rgba(var(--fused-ok-rgb), 0.14);
}

body.fused-whmcs .product-details .product-status-suspended .product-status-text,
body.fused-whmcs .product-details .product-status-pending .product-status-text {
    color: var(--fused-warn);
    background: rgba(var(--fused-warn-rgb), 0.14);
}

body.fused-whmcs .product-details .product-status-terminated .product-status-text,
body.fused-whmcs .product-details .product-status-cancelled .product-status-text,
body.fused-whmcs .product-details .product-status-fraud .product-status-text {
    color: var(--fused-danger);
    background: rgba(var(--fused-danger-rgb), 0.14);
}

/* The right-hand billing column: turn the centered h4 + value stack into
   tidy key/value rows without touching the markup. */
body.fused-whmcs .product-details .col-md-6.text-center {
    text-align: left !important;
}

body.fused-whmcs .product-details .col-md-6.text-center h4 {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fused-muted);
    font-weight: 600;
    margin: 0.9rem 0 0.1rem;
}

body.fused-whmcs .product-details .col-md-6.text-center h4:first-child {
    margin-top: 0;
}

body.fused-whmcs .product-actions-wrapper {
    margin-top: 1rem;
    gap: 0.5rem;
}

/* --- Nested info tabs (domain / manage / config) --- */
body.fused-whmcs #tabOverview .nav-tabs {
    border-bottom-color: var(--fused-border);
}

body.fused-whmcs #tabOverview .nav-tabs .nav-link {
    color: var(--fused-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: 0.6rem 0.9rem;
}

body.fused-whmcs #tabOverview .nav-tabs .nav-link:hover {
    color: var(--fused-text);
}

body.fused-whmcs #tabOverview .nav-tabs .nav-link.active {
    color: var(--fused-text);
    background: transparent;
    border-bottom-color: var(--fused-purple);
}

/* Info rows inside those tabs: label / value pairs. The markup is a
   Bootstrap .row with .col-sm-5 (label) + .col-sm-7 (value); restyle it to
   read like .fused-kv. */
body.fused-whmcs .product-details-tab-container > .row,
body.fused-whmcs #configoptions > .row {
    margin: 0;
    padding: 0.55rem 0;
    font-size: 0.88rem;
}

body.fused-whmcs .product-details-tab-container > .row + .row {
    border-top: 1px solid var(--fused-border);
}

body.fused-whmcs .product-details-tab-container > .row .col-sm-5,
body.fused-whmcs .product-details-tab-container > .row .col-sm-7 {
    text-align: left !important;
    padding: 0 0.5rem;
}

body.fused-whmcs .product-details-tab-container > .row .col-sm-5 strong {
    color: var(--fused-muted);
    font-weight: 600;
}

/* --- Resource-usage meters (replaces the jquery.knob dials) --- */
.fused-resource-usage {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 40rem;
    margin: 0 auto;
    text-align: left;
}

.fused-resource-usage h4 {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fused-muted);
    font-weight: 600;
    margin: 0 0 0.5rem;
}

@media (max-width: 560px) {
    .fused-resource-usage { grid-template-columns: 1fr; }
}

/* --- Addon cards --- */
body.fused-whmcs #tabAddons .card {
    background: var(--fused-surface);
    border: 1px solid var(--fused-border);
}

body.fused-whmcs #tabAddons .card-header,
body.fused-whmcs #tabAddons .card-footer {
    background: var(--fused-surface-soft);
    border-color: var(--fused-border);
}

/* ==========================================================================
   Domains & Invoices (P4)

   Both index pages get the same treatment as services: a status dot per row,
   on top of the untouched DataTables + sidebar
   filters. The domain detail overview (clientareadomaindetails.tpl) had no
   veil styling — its h5-label / value rows and the "Do Today" list are
   restyled here without touching markup.
   ========================================================================== */

#tableDomainsList .fused-dot,
#tableInvoicesList .fused-dot,
#tableTicketsList .fused-dot {
    margin-right: 0.4rem;
}

/* --- Domain detail overview --- */
body.fused-whmcs #tabOverview .row.mb-3 {
    margin: 0;
    padding: 0.6rem 0;
    border-top: 1px solid var(--fused-border);
}

body.fused-whmcs #tabOverview .row.mb-3:first-of-type {
    border-top: 0;
}

body.fused-whmcs #tabOverview .row.mb-3 > [class*="col-"] {
    padding: 0 0.5rem;
}

body.fused-whmcs #tabOverview .row.mb-3 h5 {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fused-muted);
    font-weight: 600;
    margin: 0 0 0.15rem;
}

/* "Do Today" — turn the bare bullet list into a clean action list. */
body.fused-whmcs #tabOverview > .card .card-body > h3.card-title + ul {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body.fused-whmcs #tabOverview > .card .card-body > h3.card-title + ul > li {
    margin: 0;
}

body.fused-whmcs #tabOverview > .card .card-body > h3.card-title + ul > li > a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--fused-border);
    border-radius: var(--fused-radius);
    background: var(--fused-surface-soft);
    color: var(--fused-text);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

body.fused-whmcs #tabOverview > .card .card-body > h3.card-title + ul > li > a:hover {
    border-color: var(--fused-border-strong);
    text-decoration: none;
}

/* A second .card-title inside the same card (the "Do Today" heading) needs
   top margin to separate it from the info rows above. */
body.fused-whmcs #tabOverview > .card .card-body > h3.card-title ~ h3.card-title {
    margin-top: 1.5rem;
}

/* ==========================================================================
   Security (P5)

   user-security.tpl is already card-based, so this is a light touch: the
   two-factor current-state text becomes a .fused-pill next to the heading,
   and the "we recommend two-factor" alert is scoped to only show while 2FA
   is off (the template change). The native WHMCS enable/disable modal flow
   and its already-veil-styled .modal are unchanged.
   ========================================================================== */

.fused-security-intro {
    color: var(--fused-muted);
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

.fused-security-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

body.fused-whmcs .fused-security-head .card-title {
    margin: 0;
}

/* clientareasecurity.tpl (SSO): tidy the toggle + status-text row. */
body.fused-whmcs #frmSingleSignOn .p-2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ==========================================================================
   Index pages as card-rows (P8)

   The base .table-list treatment lays compact lists out as card rows. Primary
   account lists override it below with visible table headings, while this
   remains the fallback for secondary lists. DataTables still owns search,
   sorting, filtering, and paging underneath.
   ========================================================================== */

body.fused-whmcs .table-list > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

body.fused-whmcs .table-list,
body.fused-whmcs .table-list > tbody {
    display: block;
    width: 100%;
}

body.fused-whmcs .table-list > tbody > tr {
    display: flex;
    /* Top-aligned so the leading icons and the trailing meta (date / status)
       line up with the primary line — the domain — rather than the middle of
       the two-line name stack. Per-cell nudges below re-centre the glyphs. */
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--fused-border-soft);
    cursor: pointer;
    position: relative;
}

body.fused-whmcs .table-list > tbody > tr:first-child {
    border-top: 0;
}

body.fused-whmcs .table-list > tbody > tr:hover,
body.fused-whmcs .table-list > tbody > tr:hover > td {
    background: var(--fused-surface-soft) !important;
}

body.fused-whmcs .table-list > tbody > tr > td {
    display: block;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 0.85rem;
    color: var(--fused-muted);
}

/* Leading icon cell (SSL indicator / bulk checkbox): shrink, never grow. */
body.fused-whmcs .table-list > tbody > tr > td:first-child {
    flex: 0 0 auto;
}

body.fused-whmcs .table-list > tbody > tr > td:first-child:empty {
    display: none;
}

/* Trailing cells sit right, tabular, don't grow. */
body.fused-whmcs .table-list > tbody > tr > td {
    flex: 0 0 auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Vertical alignment against the primary (domain) line --- */

/* The bulk checkbox column (Domains). */
body.fused-whmcs #tableDomainsList > tbody > tr > td:first-child {
    margin-top: 0.2rem;
}

/* The SSL / lock indicator column — one taller-than-the-line glyph. */
body.fused-whmcs #tableServicesList > tbody > tr > td:first-child,
body.fused-whmcs #tableEmailServicesList > tbody > tr > td:first-child,
body.fused-whmcs #tableDomainsList > tbody > tr > td:nth-child(2) {
    margin-top: -0.15rem;
}

body.fused-whmcs #tableServicesList > tbody > tr > td:first-child img,
body.fused-whmcs #tableEmailServicesList > tbody > tr > td:first-child img,
body.fused-whmcs #tableDomainsList > tbody > tr > td:nth-child(2) img {
    display: block;
}

/* Trailing meta (price / date / status) baselines with the domain line. */
body.fused-whmcs #tableServicesList > tbody > tr > td:not(:first-child):not(:nth-child(2)),
body.fused-whmcs #tableEmailServicesList > tbody > tr > td:not(:first-child):not(:nth-child(2)),
body.fused-whmcs #tableDomainsList > tbody > tr > td:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
    margin-top: 0.1rem;
}

/* Row caret sits on the domain line too. */
body.fused-whmcs #tableServicesList > tbody > tr::after,
body.fused-whmcs #tableEmailServicesList > tbody > tr::after,
body.fused-whmcs #tableDomainsList > tbody > tr::after {
    margin-top: 0.35rem;
}

/* The identifier / name cell grows to fill. Its position differs per table:
   Services col 2, Domains col 3, Invoices col 1, Tickets col 2. */
body.fused-whmcs #tableServicesList > tbody > tr > td:nth-child(2),
body.fused-whmcs #tableEmailServicesList > tbody > tr > td:nth-child(2),
body.fused-whmcs #tableDomainsList > tbody > tr > td:nth-child(3),
body.fused-whmcs #tableInvoicesList > tbody > tr > td:nth-child(1),
body.fused-whmcs #tableTicketsList > tbody > tr > td:nth-child(2) {
    flex: 1 1 12rem;
    min-width: 0;
    text-align: left;
}

body.fused-whmcs .table-list > tbody > tr > td strong,
body.fused-whmcs #tableServicesList > tbody > tr > td:nth-child(2) > a:first-child,
body.fused-whmcs #tableEmailServicesList > tbody > tr > td:nth-child(2) > a:first-child,
body.fused-whmcs #tableDomainsList > tbody > tr > td:nth-child(3) > a:first-child,
body.fused-whmcs #tableInvoicesList > tbody > tr > td:nth-child(1),
body.fused-whmcs #tableTicketsList .ticket-subject {
    font-family: var(--fused-font-display);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--fused-text);
}

body.fused-whmcs #tableServicesList > tbody > tr > td:nth-child(2) > strong,
body.fused-whmcs #tableServicesList > tbody > tr > td:nth-child(2) > a:first-child,
body.fused-whmcs #tableEmailServicesList > tbody > tr > td:nth-child(2) > strong,
body.fused-whmcs #tableEmailServicesList > tbody > tr > td:nth-child(2) > a:first-child,
body.fused-whmcs #tableDomainsList > tbody > tr > td:nth-child(3) > a:first-child {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sub-line: the package name under the domain / small text. */
body.fused-whmcs .table-list > tbody > tr > td small,
body.fused-whmcs .table-list > tbody > tr > td .fused-row-sub,
body.fused-whmcs #tableDomainsList > tbody > tr > td:nth-child(3) > small {
    display: block;
    color: var(--fused-muted);
    font-size: 0.78rem;
    font-weight: 400;
}

/* Row caret — these rows navigate on click. */
body.fused-whmcs .table-list > tbody > tr::after {
    content: "";
    flex: 0 0 auto;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 1.5px solid var(--fused-faint);
    border-top: 1.5px solid var(--fused-faint);
    transform: rotate(45deg);
    margin-left: 0.15rem;
}

/* WHMCS status label: strip its blocky background so it reads as a word
   next to the .fused-dot from P3-P6. */
body.fused-whmcs .table-list .label.status {
    background: transparent !important;
    color: var(--fused-muted) !important;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: none;
}

/* DataTables responsive child row (very narrow screens): keep it plain. */
body.fused-whmcs .table-list > tbody > tr.child {
    display: block;
    cursor: default;
}

body.fused-whmcs .table-list > tbody > tr.child::after {
    display: none;
}

body.fused-whmcs .table-list > tbody > tr > td.dataTables_empty {
    flex: 1 1 100%;
    text-align: center;
}

/* ==========================================================================
   Headed list tables (P14)

   Hosting / Email / Domains / Invoices / Support use real tables with
   lightweight sortable column headers. Invoices in particular need the
   "Invoice Date / Due Date / Amount" context.
   ID selectors outrank the `.table-list` rules above; `!important` is only
   used where the card block used it.
   ========================================================================== */

body.fused-whmcs #tableInvoicesList,
body.fused-whmcs #tableTicketsList,
body.fused-whmcs #tableServicesList,
body.fused-whmcs #tableDomainsList,
body.fused-whmcs #tableEmailServicesList {
    display: table;
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* Keep each heading paired with its data at narrow widths. These tables opt
   out of DataTables Responsive column removal and scroll as a single unit
   only when their intrinsic width no longer fits the viewport. */
body.fused-whmcs .fused-headed-table-container {
    container-type: inline-size;
    container-name: fused-headed-table;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.fused-whmcs #tableDomainsList .fused-domain-autorenew-heading-icon {
    display: none;
}

body.fused-whmcs #tableDomainsList .fused-domain-due-heading-compact,
body.fused-whmcs #tableDomainsList .fused-domain-due-compact,
body.fused-whmcs #tableTicketsList .fused-ticket-updated-heading-compact,
body.fused-whmcs #tableTicketsList .fused-ticket-updated-compact {
    display: none;
}

/* Respond to the space the table actually receives. Viewport breakpoints are
   unreliable here because the persistent sidebar and browser zoom both alter
   the content width independently. */
@container fused-headed-table (max-width: 820px) {
    body.fused-whmcs #tableInvoicesList > thead > tr > th,
    body.fused-whmcs #tableTicketsList > thead > tr > th,
    body.fused-whmcs #tableServicesList > thead > tr > th,
    body.fused-whmcs #tableDomainsList > thead > tr > th,
    body.fused-whmcs #tableEmailServicesList > thead > tr > th {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
        letter-spacing: 0.05em;
    }

    body.fused-whmcs #tableInvoicesList > tbody > tr > td,
    body.fused-whmcs #tableTicketsList > tbody > tr > td,
    body.fused-whmcs #tableServicesList > tbody > tr > td,
    body.fused-whmcs #tableDomainsList > tbody > tr > td,
    body.fused-whmcs #tableEmailServicesList > tbody > tr > td {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    body.fused-whmcs #tableInvoicesList > tbody > tr:not(.fused-group-row) > td:last-child::after,
    body.fused-whmcs #tableTicketsList > tbody > tr:not(.fused-group-row) > td:last-child::after,
    body.fused-whmcs #tableServicesList > tbody > tr:not(.fused-group-row) > td:last-child::after,
    body.fused-whmcs #tableDomainsList > tbody > tr:not(.fused-group-row) > td:last-child::after,
    body.fused-whmcs #tableEmailServicesList > tbody > tr:not(.fused-group-row) > td:last-child::after {
        content: none;
        display: none;
    }

    body.fused-whmcs #tableDomainsList .fused-domain-autorenew-label,
    body.fused-whmcs #tableDomainsList .fused-domain-autorenew-heading-label {
        display: none;
    }

    body.fused-whmcs #tableDomainsList .fused-domain-autorenew-heading-icon {
        display: inline-block;
    }

    body.fused-whmcs #tableDomainsList .fused-domain-due-heading-full,
    body.fused-whmcs #tableDomainsList .fused-domain-due-full {
        display: none;
    }

    body.fused-whmcs #tableDomainsList .fused-domain-due-heading-compact,
    body.fused-whmcs #tableDomainsList .fused-domain-due-compact {
        display: inline;
    }

    body.fused-whmcs #tableTicketsList .fused-ticket-updated-heading-full,
    body.fused-whmcs #tableTicketsList .fused-ticket-updated-full {
        display: none;
    }

    body.fused-whmcs #tableTicketsList .fused-ticket-updated-heading-compact,
    body.fused-whmcs #tableTicketsList .fused-ticket-updated-compact {
        display: inline;
    }
}

body.fused-whmcs #tableInvoicesList > tbody,
body.fused-whmcs #tableTicketsList > tbody,
body.fused-whmcs #tableServicesList > tbody,
body.fused-whmcs #tableDomainsList > tbody,
body.fused-whmcs #tableEmailServicesList > tbody {
    display: table-row-group;
}

body.fused-whmcs #tableInvoicesList > thead,
body.fused-whmcs #tableTicketsList > thead,
body.fused-whmcs #tableServicesList > thead,
body.fused-whmcs #tableDomainsList > thead,
body.fused-whmcs #tableEmailServicesList > thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
}

body.fused-whmcs #tableInvoicesList > thead > tr > th,
body.fused-whmcs #tableTicketsList > thead > tr > th,
body.fused-whmcs #tableServicesList > thead > tr > th,
body.fused-whmcs #tableDomainsList > thead > tr > th,
body.fused-whmcs #tableEmailServicesList > thead > tr > th {
    padding: 0.6rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--fused-border);
    background: var(--fused-surface-soft);
    color: var(--fused-faint);
    font-family: var(--fused-font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}

body.fused-whmcs #tableInvoicesList > tbody > tr,
body.fused-whmcs #tableTicketsList > tbody > tr,
body.fused-whmcs #tableServicesList > tbody > tr,
body.fused-whmcs #tableDomainsList > tbody > tr,
body.fused-whmcs #tableEmailServicesList > tbody > tr {
    display: table-row;
    padding: 0;
    border: 0;
    cursor: pointer;
}

body.fused-whmcs #tableInvoicesList > tbody > tr:hover,
body.fused-whmcs #tableInvoicesList > tbody > tr:hover > td,
body.fused-whmcs #tableTicketsList > tbody > tr:hover,
body.fused-whmcs #tableTicketsList > tbody > tr:hover > td,
body.fused-whmcs #tableServicesList > tbody > tr:hover,
body.fused-whmcs #tableServicesList > tbody > tr:hover > td,
body.fused-whmcs #tableDomainsList > tbody > tr:hover,
body.fused-whmcs #tableDomainsList > tbody > tr:hover > td,
body.fused-whmcs #tableEmailServicesList > tbody > tr:hover,
body.fused-whmcs #tableEmailServicesList > tbody > tr:hover > td {
    background: var(--fused-surface-soft) !important;
}

body.fused-whmcs #tableInvoicesList > tbody > tr > td,
body.fused-whmcs #tableTicketsList > tbody > tr > td,
body.fused-whmcs #tableServicesList > tbody > tr > td,
body.fused-whmcs #tableDomainsList > tbody > tr > td,
body.fused-whmcs #tableEmailServicesList > tbody > tr > td {
    display: table-cell !important;
    flex: none;
    margin: 0;
    padding: 0.65rem 1rem !important;
    border: 0 !important;
    border-top: 1px solid var(--fused-border-soft) !important;
    background: transparent !important;
    text-align: left;
    vertical-align: middle;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--fused-muted);
}

/* First data column reads as the row identifier. */
body.fused-whmcs #tableInvoicesList > tbody > tr > td:first-child,
body.fused-whmcs #tableTicketsList > tbody > tr > td:first-child,
body.fused-whmcs #tableServicesList > tbody > tr > td:nth-child(2),
body.fused-whmcs #tableEmailServicesList > tbody > tr > td:nth-child(2),
body.fused-whmcs #tableDomainsList > tbody > tr > td:nth-child(3) > a:first-child {
    color: var(--fused-text);
    font-family: var(--fused-font-display);
    font-weight: 600;
}

/* Amount / total values remain right-aligned beneath the centered header. */
body.fused-whmcs #tableInvoicesList > tbody > tr > td:nth-child(4) {
    text-align: right;
}

body.fused-whmcs #tableInvoicesList > tbody > tr > td:nth-child(4) {
    color: var(--fused-text);
}

body.fused-whmcs #tableDomainsList .fused-domain-autorenew-state {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--fused-faint);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

body.fused-whmcs #tableDomainsList .fused-domain-autorenew-state.is-enabled {
    color: var(--fused-ok);
}

body.fused-whmcs #tableDomainsList .fused-domain-autorenew-state.is-disabled {
    color: var(--fused-warn);
}

/* The generic card-row caret becomes an anonymous extra table cell after these
   lists switch back to real table rows. Suppress that ghost column; the
   status-cell caret immediately below is the only navigation affordance. */
body.fused-whmcs #tableInvoicesList > tbody > tr::after,
body.fused-whmcs #tableTicketsList > tbody > tr::after,
body.fused-whmcs #tableServicesList > tbody > tr::after,
body.fused-whmcs #tableDomainsList > tbody > tr::after,
body.fused-whmcs #tableEmailServicesList > tbody > tr::after {
    content: none;
    display: none;
}

/* Trailing caret in the last (status) cell. */
body.fused-whmcs #tableInvoicesList > tbody > tr > td:last-child,
body.fused-whmcs #tableTicketsList > tbody > tr > td:last-child,
body.fused-whmcs #tableServicesList > tbody > tr > td:last-child,
body.fused-whmcs #tableDomainsList > tbody > tr > td:last-child,
body.fused-whmcs #tableEmailServicesList > tbody > tr > td:last-child {
    position: relative;
    padding-right: 2rem !important;
    white-space: nowrap;
}

body.fused-whmcs #tableInvoicesList > tbody > tr:not(.fused-group-row) > td:last-child::after,
body.fused-whmcs #tableTicketsList > tbody > tr:not(.fused-group-row) > td:last-child::after,
body.fused-whmcs #tableServicesList > tbody > tr:not(.fused-group-row) > td:last-child::after,
body.fused-whmcs #tableDomainsList > tbody > tr:not(.fused-group-row) > td:last-child::after,
body.fused-whmcs #tableEmailServicesList > tbody > tr:not(.fused-group-row) > td:last-child::after {
    content: "";
    position: absolute;
    right: 0.9rem;
    top: 50%;
    width: 0.4rem;
    height: 0.4rem;
    margin-top: -0.3rem;
    border-right: 1.5px solid var(--fused-faint);
    border-top: 1.5px solid var(--fused-faint);
    transform: rotate(45deg);
}

/* Collapsible section header rows in a real table. */
body.fused-whmcs #tableInvoicesList > tbody > tr.fused-group-row,
body.fused-whmcs #tableDomainsList > tbody > tr.fused-group-row,
body.fused-whmcs #tableEmailServicesList > tbody > tr.fused-group-row {
    display: table-row;
    background: var(--fused-surface-soft);
    cursor: default;
}

body.fused-whmcs #tableInvoicesList > tbody > tr.fused-group-row > td,
body.fused-whmcs #tableDomainsList > tbody > tr.fused-group-row > td,
body.fused-whmcs #tableEmailServicesList > tbody > tr.fused-group-row > td {
    padding: 0.35rem 1rem !important;
    border-top: 1px solid var(--fused-border) !important;
}

body.fused-whmcs #tableInvoicesList > tbody > tr.fused-group-row:first-child > td,
body.fused-whmcs #tableDomainsList > tbody > tr.fused-group-row:first-child > td,
body.fused-whmcs #tableEmailServicesList > tbody > tr.fused-group-row:first-child > td {
    border-top: 0 !important;
}

/* Nested-thead artefact (DataTables sometimes clones) stays hidden. */
body.fused-whmcs #tableInvoicesList .w-hidden,
body.fused-whmcs #tableTicketsList .w-hidden,
body.fused-whmcs #tableServicesList .w-hidden,
body.fused-whmcs #tableDomainsList .w-hidden,
body.fused-whmcs #tableEmailServicesList .w-hidden {
    display: none;
}

/* --- Toolbar + pager to match the mockup --- */
body.fused-whmcs .dataTables_wrapper .listtable {
    padding: 0.9rem 1rem;
}

body.fused-whmcs .dataTables_wrapper .listtable .dataTables_filter label .form-control {
    border-radius: var(--fused-radius-sm);
    border-color: var(--fused-border);
    background: var(--fused-surface-soft) !important;
}

body.fused-whmcs .dataTables_wrapper .dataTables_paginate {
    /* DataTables floats this right and lets it shrink to the buttons' width;
       that pulls it up alongside the collapsed wrapper and the border-top
       renders as a stub beside the last row. Force it to a full-width block
       that clears the (hidden) info/length floats. */
    float: none;
    clear: both;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    /* Left-aligned so the buttons clear the floating "Chat with us" widget
       that sits in the bottom-right corner on every page. */
    justify-content: flex-start;
    gap: 0.4rem;
    margin-top: 0;
    padding: 1rem 1rem 0.9rem;
    border-top: 1px solid var(--fused-border);
}

/* Contain the pager's float so it can never escape the table card. */
body.fused-whmcs .dataTables_wrapper::after {
    content: "";
    display: block;
    clear: both;
}

body.fused-whmcs .dataTables_wrapper .dataTables_length {
    margin-top: 0;
    padding-top: 0.35rem;
}

body.fused-whmcs .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.35rem 0.7rem;
    border-radius: var(--fused-radius-sm);
    border: 1px solid var(--fused-border) !important;
    background: var(--fused-surface-soft) !important;
    color: var(--fused-text) !important;
    font-size: 0.8rem;
}

body.fused-whmcs .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--fused-purple) !important;
    border-color: var(--fused-purple) !important;
    color: #fff !important;
}

body.fused-whmcs .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.4;
}

body.fused-whmcs .dataTables_wrapper .fused-paid-pagination[hidden] {
    display: none !important;
}

body.fused-whmcs .dataTables_wrapper .fused-paid-pagination {
    flex-wrap: wrap;
}

body.fused-whmcs .fused-paid-pagination-summary {
    min-width: 9.5rem;
    color: var(--fused-muted);
    font-size: 0.8rem;
    text-align: center;
}

@media (max-width: 575.98px) {
    body.fused-whmcs .fused-paid-pagination-summary {
        flex: 1 1 100%;
        min-width: 0;
        text-align: left;
    }
}

/* --- Sidebar status filters as chips --- */
body.fused-whmcs .sidebar .view-filter-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem;
}

body.fused-whmcs .sidebar .view-filter-btns .list-group-item {
    border: 1px solid var(--fused-border);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--fused-muted);
    background: var(--fused-surface-soft);
    width: auto;
}

body.fused-whmcs .sidebar .view-filter-btns .list-group-item .sidebar-menu-item-icon-wrapper {
    display: none;
}

body.fused-whmcs .sidebar .view-filter-btns .list-group-item.active {
    background: rgba(var(--fused-purple-rgb), 0.14);
    border-color: var(--fused-purple);
    color: var(--fused-purple-ink);
}

/* ==========================================================================
   Detail pages as a panel stack (P9)

   WHMCS renders the service / domain detail as one big card with a nested
   tab strip. This gives the logical blocks (status, billing, server info,
   metrics, module client area) the mockup's stacked-panel separation and
   left-aligns the framework's centered content — CSS only.
   ========================================================================== */

/* Closed services retain their status and sidebar context without offering actions. */
body.fused-whmcs .fused-service-sidebar-disabled {
    filter: grayscale(1);
    opacity: 0.55;
}

body.fused-whmcs #tableServicesList > tbody > tr.fused-service-closed,
body.fused-whmcs #tableEmailServicesList > tbody > tr.fused-service-closed {
    cursor: default;
}

body.fused-whmcs #tableServicesList > tbody > tr.fused-service-closed:hover,
body.fused-whmcs #tableServicesList > tbody > tr.fused-service-closed:hover > td,
body.fused-whmcs #tableEmailServicesList > tbody > tr.fused-service-closed:hover,
body.fused-whmcs #tableEmailServicesList > tbody > tr.fused-service-closed:hover > td {
    background: transparent !important;
}

/* Consistent gap between the stacked sections in the overview tab. */
body.fused-whmcs #tabOverview > .card,
body.fused-whmcs #tabOverview > section.card,
body.fused-whmcs #tabOverview .fused-email-metrics {
    margin-bottom: 1rem;
}

/* Fallback overview card (products with no module client area): the two
   columns become divided panels rather than a centered stack. */
body.fused-whmcs .product-details > .row {
    margin: 0;
}

body.fused-whmcs .product-details > .row > .col-md-6 {
    padding: 0.25rem 1.25rem;
}

body.fused-whmcs .product-details > .row > .col-md-6:first-child {
    border-right: 1px solid var(--fused-border);
}

@media (max-width: 767.98px) {
    body.fused-whmcs .product-details > .row > .col-md-6:first-child {
        border-right: 0;
        border-bottom: 1px solid var(--fused-border);
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
}

/* Left-align the framework's centered nested panes and give them room. */
body.fused-whmcs #tabOverview .tab-pane.text-center,
body.fused-whmcs .product-details-tab-container .tab-pane {
    text-align: left;
}

body.fused-whmcs #metrics,
body.fused-whmcs #resourceusage,
body.fused-whmcs #configoptions {
    padding: 1.25rem;
}

/* The nested tab strip reads as the panel's header. */
body.fused-whmcs #tabOverview .responsive-tabs-sm {
    margin-bottom: 0;
    background: var(--fused-surface-soft);
    border: 1px solid var(--fused-border);
    border-bottom: 0;
    border-radius: var(--fused-radius) var(--fused-radius) 0 0;
    padding: 0 0.4rem;
}

body.fused-whmcs .product-details-tab-container {
    border: 1px solid var(--fused-border);
    border-radius: 0 0 var(--fused-radius) var(--fused-radius);
}

/* cPanel module client area: veil surface, left-aligned, tighter gutters. */
/* WHMCS renders this separately from the generic product-details template. */
body.fused-whmcs #tabOverview #cPanelAdditionalInfoPanel {
    display: none;
}

/* Stretch the adjacent summary cards; retain natural heights when stacked. */
@media (min-width: 768px) {
    body.fused-whmcs #tabOverview .row > .col-md-6:has(> #cPanelPackagePanel),
    body.fused-whmcs #tabOverview .row > .col-md-6:has(> #cPanelUsagePanel) {
        display: flex;
        flex-direction: column;
    }

    body.fused-whmcs #tabOverview .col-md-6 > #cPanelPackagePanel,
    body.fused-whmcs #tabOverview .col-md-6 > #cPanelUsagePanel {
        flex: 1;
    }

    body.fused-whmcs #tabOverview .col-md-6 > #cPanelPackagePanel > .card-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

body.fused-whmcs .module-client-area {
    text-align: left;
}

body.fused-whmcs .module-client-area > .row {
    margin-left: -0.4rem;
    margin-right: -0.4rem;
}

/* The SSL / visit-site action row at the bottom of the domain info tab. */
body.fused-whmcs #tabOverview #domain > p:last-of-type,
body.fused-whmcs #domain .fused-visit-website {
    margin-top: 0.5rem;
}

/* ==========================================================================
   Invoice paid / unpaid section headers (P10)

   fused-theme.js inserts <tr class="fused-inv-group fused-group-row"> rows
   into the invoices DataTable whenever the status label changes. They must
   opt out of the P8 flex-row card treatment and read as the mockup's
   collapsible group separator.
   ========================================================================== */

body.fused-whmcs .table-list > tbody > tr.fused-inv-group {
    display: block;
    padding: 0;
    border-top: 1px solid var(--fused-border);
    background: var(--fused-surface-soft) !important;
    cursor: default;
}

body.fused-whmcs .table-list > tbody > tr.fused-inv-group:first-child {
    border-top: 0;
}

body.fused-whmcs .table-list > tbody > tr.fused-inv-group::after {
    display: none;
}

body.fused-whmcs .table-list > tbody > tr.fused-inv-group > td {
    display: block;
    padding: 0 1rem !important;
    text-align: left;
    background: transparent !important;
}

body.fused-whmcs .table-list > tbody > tr.fused-inv-group:hover,
body.fused-whmcs .table-list > tbody > tr.fused-inv-group:hover > td {
    background: var(--fused-surface-soft) !important;
}

/* ==========================================================================
   In-page index toolbar (P11)

   On Services / Email / Domains list pages (body.fused-index-page) the WHMCS
   filter-sidebar column is dropped in header.tpl and fused-theme.js builds
   toolbar over the DataTable: chips (from the status column) and an in-page
   search. DataTables' own search box is hidden; its pager (restyled in P8)
   stays as Prev/Next.
   ========================================================================== */

body.fused-index-page .dataTables_wrapper .listtable .dataTables_filter,
body.fused-index-page .dataTables_wrapper .listtable .dataTables_info,
body.fused-index-page .dataTables_wrapper .dataTables_length {
    display: none;
}

body.fused-index-page .dataTables_wrapper .listtable {
    padding: 0;
    border-bottom: 0;
}

/* Mockup pager = Prev / Next only; drop the numbered buttons + ellipsis. */
body.fused-index-page .dataTables_wrapper .dataTables_paginate .paginate_button:not(.previous):not(.next) {
    display: none;
}

.fused-index-toolbar {
    /* Always a full-width block inside the flex .listtable so the internal
       wrap has a definite width to work against (otherwise the row overflows
       and .listtable's overflow:hidden clips the trailing chips). */
    flex: 1 1 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--fused-border);
}

.fused-list-search {
    display: flex;
    flex: 1 1 13rem;
    min-width: 11rem;
    max-width: 24rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--fused-border);
    border-radius: var(--fused-radius-sm);
    background: var(--fused-surface-soft);
    color: var(--fused-faint);
}

.fused-list-search > i {
    font-size: 0.8rem;
}

.fused-list-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--fused-text);
    font-size: 0.85rem;
    outline: none;
}

.fused-list-search input::placeholder {
    color: var(--fused-faint);
}

.fused-list-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.fused-index-toolbar .fused-index-chips {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.fused-chip {
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--fused-border);
    border-radius: 999px;
    background: var(--fused-surface-soft);
    color: var(--fused-muted);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.fused-chip:hover {
    color: var(--fused-text);
}

.fused-chip.is-active {
    background: rgba(var(--fused-purple-rgb), 0.14);
    border-color: var(--fused-purple);
    color: var(--fused-purple-ink);
}

/* full-width content once the filter sidebar is gone */
body.fused-index-page .primary-content {
    width: 100%;
}

/* ==========================================================================
   Dashboard chart / activity / security score (P12)

   clientareahome.tpl: a two-panel row below the quick actions. The bandwidth
   chart is a placeholder trend; the activity list and the security score in
   the status strip are real (fused-home-signals.php).
   ========================================================================== */

.fused-home-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.fused-home-panels > .fused-home-panel:only-child {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .fused-home-panels {
        grid-template-columns: 1fr;
    }
}

body.fused-whmcs .fused-home-panel {
    margin: 0;
}

.fused-home-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.fused-home-panel-head h3 {
    font-size: 0.95rem;
}

.fused-home-chart {
    display: block;
    width: 100%;
    height: 6rem;
}

.fused-home-chart-grid {
    stroke: var(--fused-border-soft);
    stroke-width: 1;
}

.fused-home-chart-area {
    fill: url(#fusedChartFill);
}

.fused-home-chart-line {
    fill: none;
    stroke: var(--fused-cyan);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fused-home-chart-dot {
    fill: var(--fused-cyan);
}

.fused-home-panel-foot {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: var(--fused-faint);
}

.fused-feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fused-feed-item {
    display: flex;
    gap: 0.7rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--fused-border-soft);
    font-size: 0.83rem;
}

.fused-feed-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.fused-feed-dot {
    flex: 0 0 auto;
    width: 0.45rem;
    height: 0.45rem;
    margin-top: 0.4rem;
    border-radius: 50%;
    background: var(--fused-cyan);
}

.fused-feed-body {
    min-width: 0;
    color: var(--fused-text);
}

.fused-feed-body time {
    display: block;
    margin-top: 0.1rem;
    color: var(--fused-faint);
    font-size: 0.72rem;
}

.fused-feed-empty {
    margin: 0;
    color: var(--fused-muted);
    font-size: 0.85rem;
}

/* Dashboard account lists. */
.fused-home-account-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .fused-home-account-panels {
        grid-template-columns: 1fr;
    }
}

.fused-home-account-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--fused-border);
    border-radius: var(--fused-radius);
    background: var(--fused-surface);
    box-shadow: var(--fused-shadow);
    overflow: hidden;
}

.fused-home-account-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--fused-border);
}

.fused-home-account-panel-header h2 {
    margin: 0;
    font-family: var(--fused-font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.fused-home-account-panel-header a {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 600;
}

.fused-home-account-panel-list {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.fused-home-account-panel-item,
body.fused-whmcs .fused-home-account-panel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.85rem 1.1rem;
    color: var(--fused-text);
    text-decoration: none;
    transition: background-color 140ms ease;
}

.fused-home-account-panel-item + .fused-home-account-panel-item {
    border-top: 1px solid var(--fused-border);
}

.fused-home-account-panel-item:hover,
.fused-home-account-panel-item:focus {
    background: var(--fused-surface-soft);
    color: var(--fused-text);
    text-decoration: none;
}

.fused-home-account-panel-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.fused-home-account-panel-item-body strong {
    overflow: hidden;
    font-size: 0.88rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fused-home-account-panel-item-body > span {
    color: var(--fused-muted);
    font-size: 0.75rem;
}

.fused-home-account-panel-item > i {
    flex: 0 0 auto;
    color: var(--fused-faint);
    font-size: 0.7rem;
}

.fused-home-account-alert {
    color: var(--fused-warn);
    font-weight: 600;
}

.fused-home-account-alert.is-danger {
    color: var(--fused-danger);
}

.fused-home-account-panel-empty {
    margin: 0;
    padding: 1.1rem;
    color: var(--fused-muted);
    font-size: 0.82rem;
}