/**
 * Nexum -- client area template stylesheet
 *
 * Every colour comes from the --nx-* design tokens: css/nexum-defaults.css holds the defaults and the
 * page prints the company's own after it (built by the Nexum plugin from the Theme Customizer).
 * Dark mode only re-points those tokens (html.nx-dark), so light and dark can never drift apart.
 *
 * @copyright Provonic  https://provonic.com
 */

/* ============================================================ 1. BASE ===== */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--nx-bg);
    color: var(--nx-text);
    font-family: var(--nx-font);
    font-size: var(--nx-font-size);
    font-weight: var(--nx-font-weight);
    line-height: var(--nx-line-height, 1.6);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 0 0 var(--nx-space-2);
    color: var(--nx-heading);
    font-family: var(--nx-font-heading);
    font-weight: var(--nx-heading-weight);
    line-height: 1.25;
}

h1, .h1 { font-size: 1.9rem; }
h2, .h2 { font-size: 1.6rem; }
h3, .h3 { font-size: 1.35rem; }
h4, .h4 { font-size: 1.15rem; }
h5, .h5 { font-size: 1.02rem; }
h6, .h6 { font-size: 0.92rem; }

p { margin: 0 0 var(--nx-space-3); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--nx-primary);
    text-decoration: none;
    transition: color var(--nx-transition);
}

a:hover,
a:focus {
    color: var(--nx-primary-hover);
    text-decoration: none;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--nx-primary);
    outline-offset: 2px;
}

hr {
    border: 0;
    border-top: 1px solid var(--nx-divider);
    margin: var(--nx-space-4) 0;
}

small, .small { font-size: 0.85em; }

code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

code {
    background: var(--nx-surface-2);
    color: var(--nx-on-primary-soft);
    padding: 0.15em 0.45em;
    border-radius: var(--nx-radius-sm);
    font-size: 0.88em;
}

pre {
    background: var(--nx-surface-2);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    padding: var(--nx-space-3);
    overflow-x: auto;
}

address {
    font-style: normal;
    margin: 0;
}

img { max-width: 100%; height: auto; }

::selection {
    background: var(--nx-primary-solid);
    color: var(--nx-on-primary);
}

::placeholder { color: var(--nx-input-placeholder); opacity: 1; }

/* Scrollbars follow the palette instead of the OS default */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--nx-border-strong) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
    background: var(--nx-border-strong);
    border-radius: 999px;
    border: 2px solid var(--nx-bg);
}

*::-webkit-scrollbar-thumb:hover { background: var(--nx-text-faint); }

/* Bootstrap text/background helpers, re-pointed at the palette */
.text-muted { color: var(--nx-text-muted) !important; }
.text-primary { color: var(--nx-primary) !important; }
.text-success { color: var(--nx-success) !important; }
.text-danger { color: var(--nx-danger) !important; }
.text-warning { color: var(--nx-warning) !important; }
.text-info { color: var(--nx-info) !important; }
.text-secondary { color: var(--nx-text-muted) !important; }
.text-dark { color: var(--nx-heading) !important; }
.text-body { color: var(--nx-text) !important; }
.text-white { color: #fff !important; }

.bg-light { background-color: var(--nx-surface-2) !important; }
.bg-white { background-color: var(--nx-surface) !important; }
.bg-primary { background-color: var(--nx-primary-solid) !important; color: var(--nx-on-primary) !important; }
.bg-success { background-color: var(--nx-success-solid) !important; color: var(--nx-on-success) !important; }
.bg-danger { background-color: var(--nx-danger-solid) !important; color: var(--nx-on-danger) !important; }
.bg-warning { background-color: var(--nx-warning-solid) !important; color: var(--nx-on-warning) !important; }
.bg-info { background-color: var(--nx-info-solid) !important; color: var(--nx-on-info) !important; }

.border { border-color: var(--nx-border) !important; }
.border-top { border-top-color: var(--nx-border) !important; }
.border-bottom { border-bottom-color: var(--nx-border) !important; }
.border-left { border-left-color: var(--nx-border) !important; }
.border-right { border-right-color: var(--nx-border) !important; }

/* ======================================================== 2. LAYOUT ======= */

.container,
.container-md,
.container-fluid {
    width: 100%;
    max-width: var(--nx-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--nx-space-3);
    padding-right: var(--nx-space-3);
}

.nx-shell {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-width: 0;
}

.nx-main {
    flex: 1 0 auto;
    padding: var(--nx-space-5) 0 var(--nx-space-6);
}

.nx-page-title {
    padding: var(--nx-space-4) 0 0;
}

.nx-page-title h1 {
    margin: 0;
    font-size: 1.55rem;
}

.nx-footer {
    flex-shrink: 0;
    padding: var(--nx-space-4) 0;
    border-top: 1px solid var(--nx-divider);
    background: var(--nx-surface);
    color: var(--nx-text-muted);
    font-size: 0.875rem;
    text-align: center;
}

.nx-footer p { margin: 0; }

/* Sidebar layout ---------------------------------------------------------- */

body.nx-nav-sidebar { flex-direction: row; }

.nx-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--nx-sidebar-width);
    display: flex;
    flex-direction: column;
    background: var(--nx-header-bg);
    border-right: 1px solid var(--nx-divider);
    z-index: 1040;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nx-sidebar-brand {
    display: flex;
    align-items: center;
    min-height: var(--nx-header-height);
    padding: 0 var(--nx-space-3);
    border-bottom: 1px solid var(--nx-divider);
    flex-shrink: 0;
}

.nx-sidebar-brand img { max-height: 38px; width: auto; }

.nx-sidebar-nav {
    padding: var(--nx-space-3) var(--nx-space-2);
    flex: 1 1 auto;
}

body.nx-nav-sidebar .nx-shell {
    margin-left: var(--nx-sidebar-width);
    max-width: calc(100% - var(--nx-sidebar-width));
}

.nx-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--nx-overlay);
    z-index: 1035;
}

@media (max-width: 991.98px) {
    .nx-sidebar {
        transform: translateX(-100%);
        transition: transform var(--nx-transition);
    }

    body.nx-sidebar-open .nx-sidebar { transform: translateX(0); }
    body.nx-sidebar-open .nx-sidebar-backdrop { display: block; }

    body.nx-nav-sidebar .nx-shell {
        margin-left: 0;
        max-width: 100%;
    }
}

/* ==================================================== 3. HEADER & NAV ===== */

.nx-topbar {
    background: var(--nx-header-bg);
    color: var(--nx-header-text);
    border-bottom: 1px solid var(--nx-divider);
    position: relative;
    z-index: 1030;
}

body.nx-sticky .nx-topbar {
    position: sticky;
    top: 0;
}

.nx-topbar-inner {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    min-height: var(--nx-header-height);
}

.nx-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--nx-header-text);
    font-weight: 700;
    font-size: 1.05rem;
}

.nx-brand:hover { color: var(--nx-header-text); }
.nx-brand img { max-height: 38px; width: auto; }

.nx-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 0 9px;
    background: transparent;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    cursor: pointer;
    flex-shrink: 0;
}

.nx-nav-toggle span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--nx-header-text);
    transition: transform var(--nx-transition), opacity var(--nx-transition);
}

/* Top navigation ---------------------------------------------------------- */

.nx-topnav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: var(--nx-space-3);
}

.nx-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.nx-menu-item { position: relative; }

.nx-menu-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: var(--nx-radius);
    color: var(--nx-header-muted);
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--nx-transition), color var(--nx-transition);
}

.nx-menu-link:hover,
.nx-menu-item.show > .nx-menu-link {
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
}

.nx-menu-item.active > .nx-menu-link {
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
    font-weight: 600;
}

.nx-menu-link .nx-caret {
    font-size: 9px;
    opacity: 0.65;
    margin-left: 2px;
}

body.nx-no-nav-icons .nx-menu-link > i:first-child,
body.nx-no-nav-icons .nx-sidenav-link > i:first-child { display: none; }

/* Header actions ---------------------------------------------------------- */

.nx-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.nx-action { position: relative; }

.nx-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    min-width: 38px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--nx-header-text);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--nx-transition), color var(--nx-transition), border-color var(--nx-transition);
}

.nx-action-btn:hover,
.nx-action.show > .nx-action-btn {
    background: var(--nx-surface-hover);
    border-color: var(--nx-border);
    color: var(--nx-primary);
}

.nx-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: var(--nx-primary-solid);
    color: var(--nx-on-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
}

.nx-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.nx-theme-toggle .nx-icon-dark { display: none; }
body#whmp-dark-mode .nx-theme-toggle .nx-icon-light { display: none; }
body#whmp-dark-mode .nx-theme-toggle .nx-icon-dark { display: inline-block; }

/* Sidebar navigation ------------------------------------------------------ */

.nx-sidenav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nx-sidenav-item + .nx-sidenav-item { margin-top: 2px; }

.nx-sidenav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--nx-radius);
    color: var(--nx-header-muted);
    font-weight: 500;
    transition: background var(--nx-transition), color var(--nx-transition);
}

.nx-sidenav-link > i:first-child {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.nx-sidenav-link:hover {
    background: var(--nx-surface-hover);
    color: var(--nx-primary);
}

.nx-sidenav-item.active > .nx-sidenav-link {
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
    font-weight: 600;
}

.nx-sidenav-link .nx-caret {
    margin-left: auto;
    font-size: 9px;
    opacity: 0.6;
    transition: transform var(--nx-transition);
}

.nx-sidenav-item.open > .nx-sidenav-link .nx-caret { transform: rotate(180deg); }

.nx-sidenav-sub {
    list-style: none;
    margin: 2px 0 4px;
    padding: 0 0 0 30px;
    display: none;
}

.nx-sidenav-item.open > .nx-sidenav-sub,
.nx-sidenav-item.active > .nx-sidenav-sub { display: block; }

.nx-sidenav-sub a {
    display: block;
    padding: 7px 12px;
    border-radius: var(--nx-radius-sm);
    color: var(--nx-text-muted);
    font-size: 0.92em;
}

.nx-sidenav-sub a:hover { background: var(--nx-surface-hover); color: var(--nx-primary); }
.nx-sidenav-sub a.active { color: var(--nx-primary); font-weight: 600; }

/* Header dropdowns -------------------------------------------------------- */

.nx-topbar .dropdown-menu,
.nx-sidebar .dropdown-menu {
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    box-shadow: var(--nx-shadow-lg);
    padding: 6px;
    margin-top: 8px;
    min-width: 210px;
}

.nx-topbar .dropdown-item,
.nx-sidebar .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: var(--nx-radius-sm);
    color: var(--nx-text);
    font-weight: 500;
}

.nx-topbar .dropdown-item:hover,
.nx-topbar .dropdown-item.active,
.nx-sidebar .dropdown-item:hover {
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
}

.nx-topbar .dropdown-divider,
.nx-sidebar .dropdown-divider {
    border-top-color: var(--nx-divider);
    margin: 5px 0;
}

/* Staff impersonation banner --------------------------------------------- */

.nx-staff-banner {
    background: var(--nx-info-soft);
    color: var(--nx-on-info-soft);
    border-bottom: 1px solid var(--nx-info-border);
    padding: 9px 0;
    font-size: 0.875rem;
}

.nx-staff-banner .container { display: flex; align-items: center; gap: 8px; }
.nx-staff-banner a { color: inherit; font-weight: 700; text-decoration: underline; margin-left: auto; }

/* Responsive -------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .nx-nav-toggle { display: flex; }

    body.nx-nav-top .nx-topnav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--nx-space-2);
        padding: var(--nx-space-3);
        background: var(--nx-surface);
        border-bottom: 1px solid var(--nx-border);
        box-shadow: var(--nx-shadow-lg);
        max-height: calc(100vh - var(--nx-header-height));
        overflow-y: auto;
        display: none;
    }

    body.nx-nav-top .nx-topnav.show { display: flex; }

    body.nx-nav-top .nx-menu {
        flex-direction: column;
        align-items: stretch;
    }

    body.nx-nav-top .nx-menu-link { justify-content: flex-start; }

    body.nx-nav-top .nx-actions {
        margin-left: 0;
        flex-wrap: wrap;
        border-top: 1px solid var(--nx-divider);
        padding-top: var(--nx-space-2);
    }

    body.nx-nav-top .nx-topnav .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        box-shadow: none;
        border: 0;
        border-left: 2px solid var(--nx-border);
        border-radius: 0;
        margin: 2px 0 2px 12px;
        padding-left: 8px;
    }

    body.nx-sticky .nx-topbar { position: relative; }
}

@media (min-width: 992px) {
    body.nx-nav-sidebar .nx-nav-toggle { display: none; }
}

/* ======================================================== 4. CARDS ======== */

.card,
.card-blesta,
.panel {
    position: relative;
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    margin-bottom: var(--nx-space-4);
    min-width: 0;
}

body.nx-cards-elevated .card,
body.nx-cards-elevated .panel {
    border-color: var(--nx-divider);
    box-shadow: var(--nx-shadow-sm);
}

body.nx-cards-flat .card,
body.nx-cards-flat .panel {
    border-color: transparent;
    box-shadow: none;
    background: var(--nx-surface-2);
}

body.nx-cards-bordered .card,
body.nx-cards-bordered .panel {
    border-color: var(--nx-border-strong);
    box-shadow: none;
}

.card-header,
.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--nx-space-2);
    padding: var(--nx-space-3) var(--nx-space-4);
    background: transparent;
    border-bottom: 1px solid var(--nx-divider);
    border-radius: var(--nx-radius-lg) var(--nx-radius-lg) 0 0;
    color: var(--nx-heading);
    font-family: var(--nx-font-heading);
    font-weight: var(--nx-heading-weight);
    font-size: 1.02rem;
    min-width: 0;
}

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6,
.card-title {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.card-body,
.panel-body { padding: var(--nx-space-4); min-width: 0; }

.card-footer,
.panel-footer {
    padding: var(--nx-space-3) var(--nx-space-4);
    background: transparent;
    border-top: 1px solid var(--nx-divider);
    border-radius: 0 0 var(--nx-radius-lg) var(--nx-radius-lg);
}

.card-content { min-width: 0; }

.card > .list-group:first-child .list-group-item:first-child { border-top: 0; }

/* Widget header extras ---------------------------------------------------- */

/* Widget filters ---------------------------------------------------------- */

.widget_filter_form {
    background: var(--nx-surface-2);
    border-bottom: 1px solid var(--nx-divider);
    padding: var(--nx-space-3) var(--nx-space-4);
    margin: 0;
}

.card-body > .widget_filter_form:first-child {
    margin: calc(var(--nx-space-4) * -1) calc(var(--nx-space-4) * -1) var(--nx-space-4);
    border-radius: 0;
}

/* ======================================================= 5. BUTTONS ======= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: var(--nx-control-height);
    padding: 0 var(--nx-space-3);
    border: 1px solid transparent;
    border-radius: var(--nx-radius-btn);
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--nx-transition), border-color var(--nx-transition),
                color var(--nx-transition), box-shadow var(--nx-transition);
}

.btn:focus,
.btn.focus { box-shadow: 0 0 0 3px var(--nx-input-focus-ring); outline: 0; }

.btn.disabled,
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-lg { height: calc(var(--nx-control-height) + 8px); padding: 0 var(--nx-space-4); font-size: 1rem; }
.btn-sm { height: var(--nx-control-height-sm); padding: 0 var(--nx-space-2); font-size: 0.84rem; }
.btn-xs { height: 28px; padding: 0 10px; font-size: 0.78rem; gap: 5px; }
.btn-block { display: flex; width: 100%; }
.btn-block + .btn-block { margin-top: 8px; }

.btn i { font-size: 0.92em; }

/* Solid (default) */
.btn-primary { background: var(--nx-primary-solid); border-color: var(--nx-primary-solid); color: var(--nx-on-primary); }
.btn-primary:hover { background: var(--nx-primary-solid-hover); border-color: var(--nx-primary-solid-hover); color: var(--nx-on-primary); }

.btn-secondary { background: var(--nx-secondary); border-color: var(--nx-secondary); color: var(--nx-on-secondary); }
.btn-secondary:hover { background: var(--nx-secondary-hover); border-color: var(--nx-secondary-hover); color: var(--nx-on-secondary); }

.btn-success { background: var(--nx-success-solid); border-color: var(--nx-success-solid); color: var(--nx-on-success); }
.btn-success:hover { background: var(--nx-success); border-color: var(--nx-success); color: var(--nx-on-success); filter: brightness(0.93); }

.btn-danger { background: var(--nx-danger-solid); border-color: var(--nx-danger-solid); color: var(--nx-on-danger); }
.btn-danger:hover { background: var(--nx-danger); border-color: var(--nx-danger); color: var(--nx-on-danger); filter: brightness(0.93); }

.btn-warning { background: var(--nx-warning-solid); border-color: var(--nx-warning-solid); color: var(--nx-on-warning); }
.btn-warning:hover { background: var(--nx-warning); border-color: var(--nx-warning); color: var(--nx-on-warning); filter: brightness(0.93); }

.btn-info { background: var(--nx-info-solid); border-color: var(--nx-info-solid); color: var(--nx-on-info); }
.btn-info:hover { background: var(--nx-info); border-color: var(--nx-info); color: var(--nx-on-info); filter: brightness(0.93); }

.btn-light,
.btn-default {
    background: var(--nx-surface-2);
    border-color: var(--nx-border);
    color: var(--nx-text);
}

.btn-light:hover,
.btn-default:hover {
    background: var(--nx-surface-hover);
    border-color: var(--nx-border-strong);
    color: var(--nx-primary);
}

.btn-dark { background: var(--nx-heading); border-color: var(--nx-heading); color: var(--nx-surface); }

.btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--nx-primary);
    height: auto;
    padding: 0;
    font-weight: 600;
}

.btn-link:hover { color: var(--nx-primary-hover); text-decoration: underline; }

.btn-outline-primary { background: transparent; border-color: var(--nx-primary); color: var(--nx-primary); }
.btn-outline-primary:hover { background: var(--nx-primary-solid); color: var(--nx-on-primary); }
.btn-outline-secondary { background: transparent; border-color: var(--nx-border-strong); color: var(--nx-text); }
.btn-outline-secondary:hover { background: var(--nx-surface-hover); border-color: var(--nx-primary); color: var(--nx-primary); }
.btn-outline-success { background: transparent; border-color: var(--nx-success); color: var(--nx-success); }
.btn-outline-success:hover { background: var(--nx-success-solid); color: var(--nx-on-success); }
.btn-outline-danger { background: transparent; border-color: var(--nx-danger); color: var(--nx-danger); }
.btn-outline-danger:hover { background: var(--nx-danger-solid); color: var(--nx-on-danger); }
.btn-outline-info { background: transparent; border-color: var(--nx-info); color: var(--nx-info); }
.btn-outline-info:hover { background: var(--nx-info-solid); color: var(--nx-on-info); }
.btn-outline-warning { background: transparent; border-color: var(--nx-warning); color: var(--nx-warning); }
.btn-outline-warning:hover { background: var(--nx-warning-solid); color: var(--nx-on-warning); }

/* Soft button style */
body.nx-btn-soft .btn-primary { background: var(--nx-primary-soft); border-color: transparent; color: var(--nx-on-primary-soft); }
body.nx-btn-soft .btn-primary:hover { background: var(--nx-primary-solid); color: var(--nx-on-primary); }
body.nx-btn-soft .btn-success { background: var(--nx-success-soft); border-color: transparent; color: var(--nx-on-success-soft); }
body.nx-btn-soft .btn-success:hover { background: var(--nx-success-solid); color: var(--nx-on-success); filter: none; }
body.nx-btn-soft .btn-danger { background: var(--nx-danger-soft); border-color: transparent; color: var(--nx-on-danger-soft); }
body.nx-btn-soft .btn-danger:hover { background: var(--nx-danger-solid); color: var(--nx-on-danger); filter: none; }
body.nx-btn-soft .btn-info { background: var(--nx-info-soft); border-color: transparent; color: var(--nx-on-info-soft); }
body.nx-btn-soft .btn-info:hover { background: var(--nx-info-solid); color: var(--nx-on-info); filter: none; }
body.nx-btn-soft .btn-warning { background: var(--nx-warning-soft); border-color: transparent; color: var(--nx-on-warning-soft); }
body.nx-btn-soft .btn-warning:hover { background: var(--nx-warning-solid); color: var(--nx-on-warning); filter: none; }

/* Outline button style */
body.nx-btn-outline .btn-primary { background: transparent; border-color: var(--nx-primary); color: var(--nx-primary); }
body.nx-btn-outline .btn-primary:hover { background: var(--nx-primary-solid); color: var(--nx-on-primary); }
body.nx-btn-outline .btn-success { background: transparent; border-color: var(--nx-success); color: var(--nx-success); }
body.nx-btn-outline .btn-success:hover { background: var(--nx-success-solid); color: var(--nx-on-success); filter: none; }
body.nx-btn-outline .btn-danger { background: transparent; border-color: var(--nx-danger); color: var(--nx-danger); }
body.nx-btn-outline .btn-danger:hover { background: var(--nx-danger-solid); color: var(--nx-on-danger); filter: none; }

.btn-group { display: inline-flex; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-top-left-radius: var(--nx-radius-btn); border-bottom-left-radius: var(--nx-radius-btn); }
.btn-group > .btn:last-child { border-top-right-radius: var(--nx-radius-btn); border-bottom-right-radius: var(--nx-radius-btn); }
.btn-group > .btn + .btn { margin-left: -1px; }
.btn-group > .btn:hover { z-index: 2; }

.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.3em;
    vertical-align: 0.16em;
    content: "";
    border-top: 0.32em solid;
    border-right: 0.32em solid transparent;
    border-left: 0.32em solid transparent;
}

.caret { display: none; }

/* ======================================================= 6. DROPDOWNS ===== */

.dropdown-menu {
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-shadow-lg);
    padding: 5px;
    color: var(--nx-text);
    font-size: 0.94rem;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: var(--nx-radius-sm);
    color: var(--nx-text);
    white-space: nowrap;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--nx-primary-solid);
    color: var(--nx-on-primary);
}

.dropdown-divider { border-top-color: var(--nx-divider); margin: 5px 0; }
.dropdown-header { color: var(--nx-text-faint); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 10px 4px; }

/* Legacy <ul class="dropdown-menu"><li><a> markup */
.dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: var(--nx-radius-sm);
    color: var(--nx-text);
    white-space: nowrap;
}

.dropdown-menu > li > a:hover {
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
}

/* ========================================================= 7. FORMS ======= */
/*
 * Native inputs are restyled in place. No markup or behaviour is replaced, so
 * every Blesta/plugin script that reads .val(), :checked or .change() keeps
 * working exactly as before.
 */

label {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--nx-heading);
    font-weight: 600;
    font-size: 0.9rem;
}

.form-group { margin-bottom: var(--nx-space-3); }
.form-group:last-child { margin-bottom: 0; }

.form-control,
input[type="text"]:not(.nx-native),
input[type="email"]:not(.nx-native),
input[type="password"]:not(.nx-native),
input[type="number"]:not(.nx-native),
input[type="search"]:not(.nx-native),
input[type="tel"]:not(.nx-native),
input[type="url"]:not(.nx-native),
input[type="date"]:not(.nx-native),
textarea:not(.nx-native),
select:not(.nx-native) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: var(--nx-control-height);
    padding: 0 var(--nx-space-2);
    background-color: var(--nx-input-bg);
    background-clip: padding-box;
    border: 1px solid var(--nx-input-border);
    border-radius: var(--nx-radius);
    color: var(--nx-input-text);
    font-family: inherit;
    font-size: 0.94rem;
    line-height: 1.5;
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
    appearance: none;
    -webkit-appearance: none;
}

textarea,
textarea.form-control {
    min-height: 110px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.6;
    resize: vertical;
}

.form-control:focus,
input:not(.nx-native):focus,
textarea:not(.nx-native):focus,
select:not(.nx-native):focus {
    background-color: var(--nx-input-bg);
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px var(--nx-input-focus-ring);
    color: var(--nx-input-text);
    outline: 0;
}

.form-control:disabled,
.form-control[readonly],
input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--nx-input-disabled-bg);
    color: var(--nx-text-muted);
    cursor: not-allowed;
}

.form-control-sm,
.input-sm { min-height: var(--nx-control-height-sm); font-size: 0.86rem; }

.form-control-lg { min-height: calc(var(--nx-control-height) + 8px); font-size: 1rem; }

.form-text,
.help-block {
    display: block;
    margin-top: 6px;
    color: var(--nx-text-muted);
    font-size: 0.84rem;
    font-weight: 400;
}

/* Select ------------------------------------------------------------------ */

select:not([multiple]):not([size]):not(.nx-native),
select.form-control:not([multiple]):not([size]),
.custom-select {
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23808a9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 15px;
    cursor: pointer;
}

select[multiple],
select[size] {
    padding: 6px;
    height: auto;
}

select option {
    background: var(--nx-surface);
    color: var(--nx-text);
}

/* Checkbox and radio ------------------------------------------------------ */

input[type="checkbox"]:not(.nx-native),
input[type="radio"]:not(.nx-native) {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    padding: 0;
    flex: 0 0 18px;
    vertical-align: -3px;
    background: var(--nx-input-bg);
    border: 1.5px solid var(--nx-border-strong);
    cursor: pointer;
    transition: background var(--nx-transition), border-color var(--nx-transition),
                box-shadow var(--nx-transition);
    background-repeat: no-repeat;
    background-position: center;
}

input[type="checkbox"]:not(.nx-native) { border-radius: var(--nx-radius-sm); }
input[type="radio"]:not(.nx-native) { border-radius: 50%; }

input[type="checkbox"]:not(.nx-native):hover,
input[type="radio"]:not(.nx-native):hover { border-color: var(--nx-primary); }

input[type="checkbox"]:not(.nx-native):focus-visible,
input[type="radio"]:not(.nx-native):focus-visible {
    box-shadow: 0 0 0 3px var(--nx-input-focus-ring);
    outline: 0;
}

input[type="checkbox"]:not(.nx-native):checked {
    background-color: var(--nx-primary-solid);
    border-color: var(--nx-primary-solid);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
    background-size: 13px;
}

input[type="radio"]:not(.nx-native):checked {
    background-color: var(--nx-primary-solid);
    border-color: var(--nx-primary-solid);
    box-shadow: inset 0 0 0 3.5px var(--nx-input-bg);
}

input[type="checkbox"]:not(.nx-native):disabled,
input[type="radio"]:not(.nx-native):disabled {
    background-color: var(--nx-input-disabled-bg);
    border-color: var(--nx-border);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Rows built from a bare label wrapping the control */
.radio,
.checkbox {
    position: relative;
    margin-bottom: 6px;
}

.radio label,
.checkbox label,
.form-check-label,
label.nx-choice {
    display: flex;
    align-items: flex-start;
    gap: 0;
    font-weight: 500;
    color: var(--nx-text);
    cursor: pointer;
    margin-bottom: 0;
}

.radio label > input,
.checkbox label > input { margin-top: 2px; }

/* Bootstrap custom-control markup */
.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 28px;
}

.custom-control-input {
    position: absolute;
    left: 0;
    top: 2px;
    z-index: 1;
    width: 18px;
    height: 18px;
    opacity: 0;
    margin: 0;
}

.custom-control-label {
    position: relative;
    margin-bottom: 0;
    font-weight: 500;
    color: var(--nx-text);
    cursor: pointer;
}

.custom-control-label::before {
    position: absolute;
    top: 2px;
    left: -28px;
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    background: var(--nx-input-bg);
    border: 1.5px solid var(--nx-border-strong);
    border-radius: var(--nx-radius-sm);
    transition: background var(--nx-transition), border-color var(--nx-transition);
}

.custom-radio .custom-control-label::before { border-radius: 50%; }

.custom-control-label::after {
    position: absolute;
    top: 2px;
    left: -28px;
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background: var(--nx-primary-solid);
    border-color: var(--nx-primary-solid);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: none;
    box-shadow: inset 0 0 0 3.5px var(--nx-input-bg);
    border-radius: 50%;
}

.custom-control-input:focus-visible ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px var(--nx-input-focus-ring);
}

/* Switch ------------------------------------------------------------------ */

.nx-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
}

.nx-switch input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 42px;
    height: 24px;
    flex: 0 0 42px;
    margin: 0;
    border-radius: 999px;
    background: var(--nx-border-strong);
    border: 0;
    position: relative;
    transition: background var(--nx-transition);
}

.nx-switch input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform var(--nx-transition);
}

.nx-switch input[type="checkbox"]:checked { background: var(--nx-primary-solid); }
.nx-switch input[type="checkbox"]:checked::after { transform: translateX(18px); }

/* File input -------------------------------------------------------------- */

input[type="file"] {
    display: block;
    width: 100%;
    padding: 9px 10px;
    background: var(--nx-input-bg);
    border: 1px dashed var(--nx-border-strong);
    border-radius: var(--nx-radius);
    color: var(--nx-text-muted);
    font-size: 0.9rem;
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 7px 14px;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.86rem;
    cursor: pointer;
}

input[type="file"]:hover { border-color: var(--nx-primary); }

/* Range ------------------------------------------------------------------- */

input[type="range"] {
    width: 100%;
    accent-color: var(--nx-primary);
}

/* Input groups ------------------------------------------------------------ */

.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > .form-control { flex: 1 1 auto; width: 1%; min-width: 0; }

.input-group-prepend,
.input-group-append { display: flex; }

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0 var(--nx-space-2);
    background: var(--nx-surface-2);
    border: 1px solid var(--nx-input-border);
    color: var(--nx-text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

.input-group > .input-group-prepend > * { border-radius: var(--nx-radius) 0 0 var(--nx-radius); border-right: 0; }
.input-group > .input-group-append > * { border-radius: 0 var(--nx-radius) var(--nx-radius) 0; border-left: 0; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Validation -------------------------------------------------------------- */

.is-invalid,
.form-control.error,
input.error,
select.error,
textarea.error {
    border-color: var(--nx-danger) !important;
}

.invalid-feedback,
.error_message,
span.error {
    display: block;
    margin-top: 5px;
    color: var(--nx-danger);
    font-size: 0.84rem;
}

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

legend {
    font-family: var(--nx-font-heading);
    font-weight: var(--nx-heading-weight);
    font-size: 1.05rem;
    color: var(--nx-heading);
    margin-bottom: var(--nx-space-2);
}

/* ======================================================== 8. TABLES ======= */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--nx-text);
}

.table th,
.table td {
    padding: var(--nx-space-2) var(--nx-space-3);
    border-top: 0;
    border-bottom: 1px solid var(--nx-divider);
    vertical-align: middle;
}

.table thead th {
    background: var(--nx-surface-2);
    border-bottom: 1px solid var(--nx-border);
    color: var(--nx-text-muted);
    font-size: 0.79rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.table thead th a { color: inherit; }
.table thead th a:hover { color: var(--nx-primary); }

.table thead th a.asc::after,
.table thead th a.desc::after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.table thead th a.asc::after { border-bottom: 5px solid currentColor; }
.table thead th a.desc::after { border-top: 5px solid currentColor; }

.table tbody tr:last-child > td { border-bottom: 0; }

.table-striped tbody tr:nth-of-type(odd),
.table-striped-alt tbody tr:nth-of-type(even) { background: var(--nx-surface-2); }

.table-hover tbody tr:hover { background: var(--nx-surface-hover); }

.table .expand { cursor: pointer; }
.table .expand_details > td { padding: 0; border-bottom: 0; }
.table .subtable { background: var(--nx-surface-2); }
.table .subtable .table { background: transparent; }
.table .subtable thead th { background: transparent; }

.card > .table-responsive > .table > thead th:first-child,
.card > .table-responsive > .table > tbody td:first-child { padding-left: var(--nx-space-4); }

.card > .table-responsive > .table > thead th:last-child,
.card > .table-responsive > .table > tbody td:last-child { padding-right: var(--nx-space-4); }

/* ===================================================== 9. LIST GROUP ====== */

.list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: var(--nx-radius);
}

.list-group-item {
    position: relative;
    display: block;
    padding: var(--nx-space-3);
    background: var(--nx-surface);
    border: 1px solid var(--nx-divider);
    color: var(--nx-text);
}

.list-group-item + .list-group-item { border-top-width: 0; }
.list-group-item:first-child { border-radius: var(--nx-radius) var(--nx-radius) 0 0; }
.list-group-item:last-child { border-radius: 0 0 var(--nx-radius) var(--nx-radius); }
.list-group-item:only-child { border-radius: var(--nx-radius); }

.list-group-flush > .list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

.list-group-flush > .list-group-item:first-child { border-top: 0; }
.list-group-flush > .list-group-item:last-child { border-bottom: 0; }

a.list-group-item,
.list-group-item-action { color: var(--nx-text); transition: background var(--nx-transition), color var(--nx-transition); }

a.list-group-item:hover,
.list-group-item-action:hover {
    background: var(--nx-surface-hover);
    color: var(--nx-primary);
    z-index: 1;
}

.list-group-item.active {
    background: var(--nx-primary-soft);
    border-color: var(--nx-divider);
    color: var(--nx-on-primary-soft);
    font-weight: 600;
    z-index: 2;
}

.list-group-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--nx-primary);
}

/* Secondary page navigation ---------------------------------------------- */

.nx-side-nav { margin-bottom: var(--nx-space-4); }

.nx-side-nav .list-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

/* ==================================================== 10. NEXUM LISTS ===== */

.nexum-list .list-group-item { padding: 0; }

.list-group-item-content {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    padding: var(--nx-space-3);
    min-width: 0;
}

.graphic-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--nx-radius);
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
    font-size: 17px;
}

.graphic-item i { color: inherit; }

.list-group-item-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 220px;
    min-width: 0;
    color: inherit;
}

a.list-group-item-name:hover { color: var(--nx-primary); }

.list-group-item-fullname {
    font-weight: 600;
    color: var(--nx-heading);
    overflow-wrap: anywhere;
}

.list-group-item-group {
    color: var(--nx-text-muted);
    font-weight: 400;
    margin-left: 6px;
}

.text-domain {
    color: var(--nx-text-muted);
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.list-group-item-date {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
    min-width: 110px;
}

.list-group-item-status { flex: 0 0 auto; }

.list-group-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
}

.nexum-list-item-details {
    border-top: 1px solid var(--nx-divider);
    background: var(--nx-surface-2);
    padding: var(--nx-space-3);
}

.nexum-list-item-details:empty { display: none; }

.transaction_applied { cursor: pointer; }

.invoice_applied.expanded i,
.transaction_applied.expanded .list-group-item-actions i { transform: rotate(180deg); }

.invoice_applied i,
.transaction_applied .list-group-item-actions i { transition: transform var(--nx-transition); }

/* Sort chips -------------------------------------------------------------- */

.nexum-list-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 0 var(--nx-space-3);
}

.nexum-list-toolbar-label { color: var(--nx-text-faint); font-size: 0.8rem; }

.nexum-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border: 1px solid var(--nx-border);
    border-radius: 999px;
    background: var(--nx-surface-2);
    color: var(--nx-text-muted);
    font-size: 0.79rem;
    font-weight: 600;
}

.nexum-sort:hover { border-color: var(--nx-primary); color: var(--nx-primary); }

.nexum-sort.active {
    background: var(--nx-primary-soft);
    border-color: transparent;
    color: var(--nx-on-primary-soft);
}

.nexum-sort.asc::after,
.nexum-sort.desc::after {
    content: "";
    display: inline-block;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
}

.nexum-sort.asc::after { border-bottom: 4.5px solid currentColor; }
.nexum-sort.desc::after { border-top: 4.5px solid currentColor; }

@media (max-width: 767.98px) {
    .list-group-item-content { flex-wrap: wrap; }
    .list-group-item-name { flex-basis: 100%; }
    .list-group-item-date { min-width: 0; }
    .list-group-item-actions { margin-left: 0; width: 100%; }
    .list-group-item-actions .btn { flex: 1 1 auto; }
}

/* ==================================================== 11. DASHBOARD ======= */

.tiles { margin-bottom: var(--nx-space-2); }

.tiles > [class*="col-"] { margin-bottom: var(--nx-space-3); }

.tile {
    position: relative;
    display: block;
    height: 100%;
    border-radius: var(--nx-radius-lg);
    color: inherit;
    overflow: hidden;
    transition: transform var(--nx-transition), box-shadow var(--nx-transition);
}

a.tile:hover { color: inherit; transform: translateY(-2px); }
body.nx-cards-elevated a.tile:hover { box-shadow: var(--nx-shadow-md); }

.tile-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    height: 100%;
    min-height: 104px;
    padding: var(--nx-space-3) var(--nx-space-4);
    background: var(--nx-surface);
    border: 1px solid var(--nx-divider);
    border-radius: var(--nx-radius-lg);
    /* Set so cards carrying an admin chosen background can flip their own text */
    color: var(--nx-text);
}

body.nx-cards-elevated .tile-content { box-shadow: var(--nx-shadow-sm); }
body.nx-cards-flat .tile-content { border-color: transparent; box-shadow: none; background: var(--nx-surface-2); }

.tile-stat {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    color: inherit;
    font-family: var(--nx-font-heading);
}

.tile-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: inherit;
    opacity: 0.72;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tile-icon-absolute {
    position: absolute;
    top: var(--nx-space-3);
    right: var(--nx-space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--nx-radius);
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
    font-size: 15px;
}

/* Cards that carry an admin chosen background colour */
.tile-content.nx-tile-colored { border-color: transparent; }
.tile-content.nx-tile-colored .tile-icon-absolute {
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
}

body.nx-tiles-stat .tile-content { min-height: 92px; }
body.nx-tiles-stat .tile-stat { font-size: 1.5rem; }

body.nx-tiles-minimal .tile-content {
    min-height: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: var(--nx-space-2) 0;
}

body.nx-tiles-minimal .tile-icon-absolute { display: none; }

/* ======================================================= 12. PORTAL ======= */

.portal-box,
.nx-portal-box { margin-bottom: var(--nx-space-3); }

.portal-box .card,
.nx-portal-box .card { height: 100%; text-align: center; margin-bottom: 0; }

.portal-box .card-body i,
.portal-box .card-body .fas,
.portal-box .card-body .far { color: var(--nx-primary); }

/* ======================================================= 13. ALERTS ======= */

.alert {
    position: relative;
    padding: var(--nx-space-3) var(--nx-space-4);
    margin-bottom: var(--nx-space-3);
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: var(--nx-radius);
    font-size: 0.92rem;
}

.alert p:last-child { margin-bottom: 0; }
.alert a { color: inherit; font-weight: 700; text-decoration: underline; }

.alert-info,
.alert-notice {
    background: var(--nx-info-soft);
    border-color: var(--nx-info-border);
    border-left-color: var(--nx-info);
    color: var(--nx-on-info-soft);
}

.alert-success {
    background: var(--nx-success-soft);
    border-color: var(--nx-success-border);
    border-left-color: var(--nx-success);
    color: var(--nx-on-success-soft);
}

.alert-danger,
.alert-error {
    background: var(--nx-danger-soft);
    border-color: var(--nx-danger-border);
    border-left-color: var(--nx-danger);
    color: var(--nx-on-danger-soft);
}

.alert-warning {
    background: var(--nx-warning-soft);
    border-color: var(--nx-warning-border);
    border-left-color: var(--nx-warning);
    color: var(--nx-on-warning-soft);
}

.alert-secondary,
.alert-light {
    background: var(--nx-surface-2);
    border-color: var(--nx-border);
    border-left-color: var(--nx-border-strong);
    color: var(--nx-text);
}

.alert .close,
.close {
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    opacity: 0.6;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    text-shadow: none;
}

.close:hover { opacity: 1; color: inherit; }

.alert-dismissible { padding-right: var(--nx-space-6); }
.alert-dismissible .close { position: absolute; top: var(--nx-space-3); right: var(--nx-space-3); }

/* ======================================================= 14. BADGES ======= */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: middle;
}

.badge-primary { background: var(--nx-primary-soft); color: var(--nx-on-primary-soft); }
.badge-secondary { background: var(--nx-surface-3); color: var(--nx-text-muted); }
.badge-success { background: var(--nx-success-soft); color: var(--nx-on-success-soft); }
.badge-danger { background: var(--nx-danger-soft); color: var(--nx-on-danger-soft); }
.badge-warning { background: var(--nx-warning-soft); color: var(--nx-on-warning-soft); }
.badge-info { background: var(--nx-info-soft); color: var(--nx-on-info-soft); }
.badge-light { background: var(--nx-surface-2); color: var(--nx-text-muted); }
.badge-dark { background: var(--nx-heading); color: var(--nx-surface); }
.badge-default { background: var(--nx-surface-3); color: var(--nx-text-muted); }

.badge-pill { border-radius: 999px; }

/* Counters inside widget tabs */

.nx-menu-link .badge { font-size: 0.7rem; }

/* =================================================== 15. PAGINATION ======= */

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: flex-end;
}

.page-item .page-link,
.pagination li a,
.pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    color: var(--nx-text);
    font-size: 0.88rem;
    font-weight: 600;
}

.page-item .page-link:hover,
.pagination li a:hover {
    background: var(--nx-surface-hover);
    border-color: var(--nx-primary);
    color: var(--nx-primary);
}

.page-item.active .page-link,
.pagination li.active a,
.pagination li.active span {
    background: var(--nx-primary-solid);
    border-color: var(--nx-primary-solid);
    color: var(--nx-on-primary);
}

.page-item.disabled .page-link,
.pagination li.disabled a,
.pagination li.disabled span {
    background: var(--nx-surface-2);
    color: var(--nx-text-faint);
    cursor: not-allowed;
}

/* ========================================================= 16. TABS ======= */

.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid var(--nx-divider);
    padding-left: 0;
    margin-bottom: var(--nx-space-3);
    list-style: none;
}

.nav-tabs .nav-link,
.nav-tabs > li > a {
    display: block;
    padding: 10px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--nx-radius-sm) var(--nx-radius-sm) 0 0;
    background: transparent;
    color: var(--nx-text-muted);
    font-weight: 600;
}

.nav-tabs .nav-link:hover,
.nav-tabs > li > a:hover { background: var(--nx-surface-hover); color: var(--nx-primary); }

.nav-tabs .nav-link.active,
.nav-tabs > li.active > a {
    background: transparent;
    border-bottom-color: var(--nx-primary);
    color: var(--nx-primary);
}

.nav-pills .nav-link { border-radius: var(--nx-radius); color: var(--nx-text-muted); font-weight: 600; }
.nav-pills .nav-link.active { background: var(--nx-primary-solid); color: var(--nx-on-primary); }

.tab-content > .tab-pane { padding-top: var(--nx-space-2); }

/* ======================================================== 17. MODALS ====== */

.modal-backdrop { background: var(--nx-overlay); }
.modal-backdrop.show { opacity: 1; }

.modal-content {
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    box-shadow: var(--nx-shadow-xl);
    color: var(--nx-text);
}

.modal-header {
    align-items: center;
    padding: var(--nx-space-3) var(--nx-space-4);
    border-bottom: 1px solid var(--nx-divider);
    border-radius: var(--nx-radius-xl) var(--nx-radius-xl) 0 0;
}

.modal-header h5,
.modal-title { margin: 0; font-size: 1.05rem; }

.modal-body { padding: var(--nx-space-4); }

.modal-footer {
    gap: 8px;
    padding: var(--nx-space-3) var(--nx-space-4);
    border-top: 1px solid var(--nx-divider);
    border-radius: 0 0 var(--nx-radius-xl) var(--nx-radius-xl);
}

.modal-footer:empty { display: none; }

/* ====================================================== 18. TOOLTIPS ====== */

.tooltip-inner {
    background: var(--nx-heading);
    color: var(--nx-surface);
    border-radius: var(--nx-radius-sm);
    padding: 6px 10px;
    font-size: 0.82rem;
}

.bs-tooltip-top .arrow::before { border-top-color: var(--nx-heading); }
.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--nx-heading); }
.bs-tooltip-left .arrow::before { border-left-color: var(--nx-heading); }
.bs-tooltip-right .arrow::before { border-right-color: var(--nx-heading); }

.popover {
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-shadow-lg);
}

.popover-header { background: var(--nx-surface-2); border-bottom-color: var(--nx-divider); color: var(--nx-heading); }
.popover-body { color: var(--nx-text); }

/* ==================================================== 19. AUTH PAGES ====== */

.whmp-login-box,
.nx-auth-card {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: var(--nx-space-5);
    background: var(--nx-surface);
    border: 1px solid var(--nx-divider);
    border-radius: var(--nx-radius-xl);
    box-shadow: var(--nx-shadow-lg);
}

.whmp-login-logo,
.nx-auth-logo { text-align: center; margin-bottom: var(--nx-space-3); }
.whmp-login-logo img,
.nx-auth-logo img { max-height: 52px; width: auto; }

.whmp-login-title,
.nx-auth-title { text-align: center; margin-bottom: var(--nx-space-4); }
.whmp-login-title h4 { margin-bottom: 4px; }

.whmp-empty-state,
.nx-empty {
    text-align: center;
    padding: var(--nx-space-6) var(--nx-space-3);
    color: var(--nx-text-muted);
}

.whmp-empty-state i,
.nx-empty i { color: var(--nx-text-faint); }

/* ==================================================== 20. UTILITIES ======= */

.nx-visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nx-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1100;
    padding: 10px 16px;
    background: var(--nx-primary-solid);
    color: var(--nx-on-primary);
    border-radius: 0 0 var(--nx-radius) 0;
}

.nx-skip-link:focus { left: 0; color: var(--nx-on-primary); }

.fa-spin { animation: nx-spin 1s linear infinite; }

@keyframes nx-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Blesta injects this wrapper around ajax loaded widgets */
.widget_box, .widget { min-width: 0; }

/* Keep long content from forcing horizontal page scroll */
.row { min-width: 0; }
[class*="col-"] { min-width: 0; }

@media print {
    .nx-topbar,
    .nx-sidebar,
    .nx-footer,
    .nx-staff-banner,
    .list-group-item-actions,
    .nexum-list-toolbar { display: none !important; }

    body { background: #fff; color: #000; }
    .card { border: 1px solid #ccc; box-shadow: none; }
}

/* ============================================== 21. ACCOUNT SUMMARY ======= */

.card-client-details { overflow: hidden; }

.nx-client-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--nx-space-4) var(--nx-space-3);
    text-align: center;
    background: var(--nx-gradient);
    color: var(--nx-on-gradient);
}

.nx-summary-solid .nx-client-head { background: var(--nx-primary-solid); }

.nx-summary-plain .nx-client-head {
    background: var(--nx-surface-2);
    color: var(--nx-text);
    border-bottom: 1px solid var(--nx-divider);
}

.nx-client-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    margin-bottom: 2px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
    color: inherit;
    font-family: var(--nx-font-heading);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
}

.nx-summary-plain .nx-client-avatar {
    background: var(--nx-primary-solid);
    box-shadow: none;
    color: var(--nx-on-primary);
}

.nx-client-avatar img { width: 100%; height: 100%; object-fit: cover; }

.nx-client-name {
    font-family: var(--nx-font-heading);
    font-size: 1.05rem;
    font-weight: var(--nx-heading-weight);
    line-height: 1.3;
    color: inherit;
}

.nx-client-company { font-size: 0.86rem; opacity: 0.9; }

.nx-client-id {
    margin-top: 2px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.nx-summary-plain .nx-client-id { background: var(--nx-surface-3); color: var(--nx-text-muted); }

.nx-client-body {
    padding: var(--nx-space-3);
    font-size: 0.86rem;
    color: var(--nx-text-muted);
    text-align: center;
}

.nx-client-body address { margin: 0; line-height: 1.7; }
.nx-client-body address:empty { display: none; }

.nx-client-email {
    display: inline-block;
    margin-top: 8px;
    overflow-wrap: anywhere;
}

.nx-client-numbers {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    line-height: 1.7;
}

.nx-client-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 var(--nx-space-3) var(--nx-space-3);
}

/* Side by side when they fit; one under the other in a narrow column (e.g. the left sidebar layout) */
.nx-client-actions .btn { flex: 1 1 auto; white-space: nowrap; }

.card-client-contacts .card-header i { color: var(--nx-primary); }

.list-options .list-group-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.list-options .list-group-item i { flex-shrink: 0; color: var(--nx-text-faint); }
.list-options .list-group-item p { margin: 0; font-size: 0.86rem; }

.amounts .list-group-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.currency_value { font-weight: 700; color: var(--nx-heading); }

/* =========================================== 22. LEGACY CLASS SUPPORT ===== */
/*
 * Older markup (or a partially deployed template) uses these class names. They
 * are mapped onto the same tokens so the page still renders correctly instead of
 * falling back to unstyled Bootstrap.
 */

.header,
.nexum-topbar,
.nav-content {
    background: var(--nx-header-bg);
    color: var(--nx-header-text);
    border-bottom: 1px solid var(--nx-divider);
}

.nexum-nav,
.whmp-nav,
#main-navbar {
    background: transparent;
}

.nexum-topbar-inner,
.header-right {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    min-height: var(--nx-header-height);
}

.nexum-nav-list,
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nexum-nav-link,
.navbar-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: var(--nx-radius);
    color: var(--nx-header-muted);
    font-weight: 500;
    white-space: nowrap;
}

.nexum-nav-link:hover,
.navbar-nav .nav-link:hover,
.nexum-nav-item.active > .nexum-nav-link,
.navbar-nav .nav-item.active > .nav-link {
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
}

.nexum-actions,
.nexum-account { display: flex; align-items: center; gap: 6px; }

.nexum-avatar,
.client-avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: var(--nx-primary-solid);
    color: var(--nx-on-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.nexum-footer,
.footer {
    padding: var(--nx-space-4) 0;
    border-top: 1px solid var(--nx-divider);
    background: var(--nx-surface);
    color: var(--nx-text-muted);
    font-size: 0.875rem;
    text-align: center;
}

.nexum-staff-banner {
    background: var(--nx-info-soft);
    color: var(--nx-on-info-soft);
    border-bottom: 1px solid var(--nx-info-border);
    padding: 9px 0;
    font-size: 0.875rem;
}

.client-avatar {
    display: flex;
    justify-content: center;
    padding: var(--nx-space-4) var(--nx-space-3) 0;
}

.client-avatar img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; }

.client-address,
.client-numbers { color: var(--nx-text-muted); font-size: 0.86rem; }
.client-numbers { list-style: none; margin: 8px 0 0; padding: 0; }

/* The page title bar reads its colour from the tokens, not Blesta's theme.css */
.title,
.whmp-page-title {
    background: var(--nx-surface);
    border-bottom: 1px solid var(--nx-divider);
    padding: var(--nx-space-4) 0 0;
}

.title h1,
.title h3 {
    margin: 0;
    color: var(--nx-heading);
    font-size: 1.55rem;
}

.nx-page-title { background: transparent; border-bottom: 0; }

/* ====================================== 23. BLESTA theme.css OVERRIDES ==== */
/*
 * Blesta generates theme.css from Settings > Company > Look and Feel > Themes and
 * loads it before this file. A few of its rules out-specify or !important the
 * component styles above, which produced clashing colours (purple card headers on
 * a blue palette). Those exact rules are neutralised here so the Nexum palette
 * owns its own components; everything theme.css touches that Nexum does not style
 * still applies.
 */

.card.card-blesta > .card-header,
.card-blesta > .card-header {
    background: transparent;
    color: var(--nx-heading);
}

.title,
.title h3,
.title h1 {
    color: var(--nx-heading);
}

a.list-group-item:hover,
a.list-group-item:focus,
.list-group.list-options a.list-group-item:hover,
.list-group.list-options a.list-group-item:focus {
    background-color: var(--nx-surface-hover) !important;
    color: var(--nx-primary);
}

a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
    background-color: var(--nx-primary-soft) !important;
    color: var(--nx-on-primary-soft);
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: var(--nx-surface-hover) !important;
}

.list-group-item.credits {
    color: var(--nx-text) !important;
}

.list-group-item h4 {
    color: var(--nx-heading) !important;
}

.top-focus-box {
    background-color: var(--nx-surface-2) !important;
}

/* Blesta paints the body and links from theme.css too */
body { background: var(--nx-bg); }

/* ================================== 24. MODERN REFRESH & FIXES =========== */

/* -- Readable brand colour ------------------------------------------------ */
/*
 * --nx-primary is the exact brand colour and is used for fills and accents.
 * Text sitting directly on a card uses --nx-primary-readable, which is the same
 * hue nudged until it clears 4.5:1, so links and active tabs never wash out.
 */

a { color: var(--nx-primary-readable); }
a:hover, a:focus { color: var(--nx-primary-hover); }

.nav-tabs .nav-link.active,
.nav-tabs > li.active > a,
.nav-tabs li a.active {
    color: var(--nx-primary-readable);
    background: transparent;
    border-bottom-color: var(--nx-primary);
}

.nav-tabs .nav-link,
.nav-tabs > li > a { background: transparent; }

.nav-tabs .nav-link:hover,
.nav-tabs > li > a:hover { color: var(--nx-primary-readable); }

.list-group-item.active,
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus { color: var(--nx-on-primary-soft); }

.nexum-sort:hover,
.table thead th a:hover,
a.list-group-item-name:hover,
.list-options .list-group-item:hover { color: var(--nx-primary-readable); }

.text-primary { color: var(--nx-primary-readable) !important; }

/* -- Widget header action buttons ---------------------------------------- */
/*
 * NexumWidgetClient renders "Make Payment" / "Open Ticket" as .btn.btn-sm with
 * no colour class, which left them invisible. Give them a real appearance.
 */

.card-header .btn:not([class*="btn-"]) {
    background: var(--nx-primary-soft);
    border-color: transparent;
    color: var(--nx-on-primary-soft);
    font-weight: 600;
}

/* -- One caret only ------------------------------------------------------- */
/*
 * Menu links render an explicit chevron icon, so Bootstrap's ::after triangle
 * has to be suppressed on those specific elements or both show.
 */

.nx-menu-link.dropdown-toggle::after,
.nx-action-btn.dropdown-toggle::after,
.nx-sidenav-link::after { display: none; }

/* -- Cards ---------------------------------------------------------------- */

.card,
.panel {
    border-radius: var(--nx-radius-lg);
    overflow: hidden;
}

body.nx-cards-elevated .card,
body.nx-cards-elevated .panel {
    border-color: var(--nx-border);
    box-shadow: var(--nx-shadow-sm);
}

/* A one pixel highlight along the top edge reads as light falling on the card */
body.nx-cards-elevated .card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--nx-sheen);
    pointer-events: none;
    z-index: 1;
}

body.nx-cards-flat .card::before,
body.nx-cards-bordered .card::before { display: none; }

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--nx-divider);
}

/* -- Buttons -------------------------------------------------------------- */

.btn-primary:focus,
.btn-primary.focus { box-shadow: 0 0 0 3px var(--nx-primary-glow); }

.btn-primary:hover { box-shadow: 0 2px 10px var(--nx-primary-glow); }

.btn-light,
.btn-default {
    background: var(--nx-surface-2);
    border-color: var(--nx-border);
    color: var(--nx-text);
}

.btn-light:hover,
.btn-default:hover {
    background: var(--nx-surface-3);
    border-color: var(--nx-border-strong);
    color: var(--nx-primary-readable);
}

/* -- Forms ---------------------------------------------------------------- */

input[type="file"]::file-selector-button {
    background: var(--nx-primary-solid);
    color: var(--nx-on-primary);
}

.custom-select {
    background-color: var(--nx-input-bg);
    border-color: var(--nx-input-border);
    color: var(--nx-input-text);
}

.custom-file-label,
.custom-file-label::after {
    background-color: var(--nx-input-bg);
    border-color: var(--nx-input-border);
    color: var(--nx-input-text);
}

.input-group-text {
    background: var(--nx-surface-2);
    border-color: var(--nx-input-border);
    color: var(--nx-text-muted);
}

/* Blesta renders a small helper trigger inside some inputs */
.input-group-append .btn,
.input-group-prepend .btn {
    background: var(--nx-surface-2);
    border-color: var(--nx-input-border);
    color: var(--nx-text-muted);
}

.input-group-append .btn:hover,
.input-group-prepend .btn:hover {
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
}

/* -- Tables --------------------------------------------------------------- */

.table,
.table td,
.table th {
    background-color: transparent;
    border-color: var(--nx-divider);
    color: var(--nx-text);
}

.table thead th {
    background: var(--nx-surface-2);
    border-color: var(--nx-border);
    color: var(--nx-text-muted);
}

.table-curved,
.table-curved td,
.table-curved th { background-color: transparent; }

/* -- Widget filter bar ---------------------------------------------------- */

form.widget_filter_form,
.widget_filter_form,
.well {
    background: var(--nx-surface-2) !important;
    border: 0;
    border-bottom: 1px solid var(--nx-divider);
    box-shadow: none;
    color: var(--nx-text);
}

/* -- Alerts / message boxes ---------------------------------------------- */

.alert-info a,
.alert-success a,
.alert-danger a,
.alert-warning a { color: inherit; }

/* Blesta's CMS content block on the portal page */
.well p,
.well li,
.well h1, .well h2, .well h3, .well h4 { color: var(--nx-text); }

/* -- Portal boxes --------------------------------------------------------- */

.portal-box .card-body h3,
.portal-box .card-body h4,
.nx-portal-box .card-body h3 { color: var(--nx-heading); }

.portal-box .card-body i,
.portal-box .card-body .fas,
.portal-box .card-body .far,
.portal-box .card-body .fab {
    color: var(--nx-primary-readable);
    font-size: 2.1rem;
    margin-bottom: var(--nx-space-2);
}

/* -- Tiles ---------------------------------------------------------------- */

.tile-content {
    border-radius: var(--nx-radius-lg);
    overflow: hidden;
}

.tile-content:not(.nx-tile-colored) .tile-stat { color: var(--nx-heading); }
.tile-content:not(.nx-tile-colored) .tile-title { color: var(--nx-text-muted); opacity: 1; }

.tile-content.nx-tile-colored .tile-stat,
.tile-content.nx-tile-colored .tile-title { color: inherit; }

/* -- Account summary, fully themed --------------------------------------- */
/*
 * The body no longer stays white under a coloured header: it sits on a tinted
 * surface so the card reads as one object.
 */

.nx-summary-gradient .nx-client-body,
.nx-summary-solid .nx-client-body {
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
}

.nx-summary-gradient .nx-client-body a,
.nx-summary-solid .nx-client-body a { color: var(--nx-on-primary-soft); font-weight: 600; }

.nx-summary-gradient .nx-client-actions,
.nx-summary-solid .nx-client-actions {
    background: var(--nx-primary-soft);
    padding-top: var(--nx-space-2);
}

.nx-client-head {
    position: relative;
    z-index: 1;
    padding-bottom: var(--nx-space-4);
}

/* Soft glow behind the avatar for depth */
.nx-client-head::after {
    content: "";
    position: absolute;
    top: -40%;
    left: 50%;
    width: 180px;
    height: 180px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.card-client-details { border-radius: var(--nx-radius-lg); }

/* -- Staff banner --------------------------------------------------------- */

.nx-staff-banner { border-bottom-color: var(--nx-border); }

/* -- Dropdown menus ------------------------------------------------------- */

.dropdown-menu {
    background: var(--nx-surface);
    border-color: var(--nx-border);
    box-shadow: var(--nx-shadow-lg);
}

/* -- Modals --------------------------------------------------------------- */

.modal-content {
    background: var(--nx-surface);
    border-color: var(--nx-border);
}

/* -- Pagination ----------------------------------------------------------- */

.page-item .page-link,
.pagination li a,
.pagination li span {
    background: var(--nx-surface);
    border-color: var(--nx-border);
    color: var(--nx-text);
}

.page-item.disabled .page-link { background: var(--nx-surface-2); color: var(--nx-text-faint); }

/* -- Progress / misc ------------------------------------------------------ */

.progress { background: var(--nx-surface-3); }
.img-thumbnail { background: var(--nx-surface-2); border-color: var(--nx-border); }
.breadcrumb { background: var(--nx-surface-2); border-radius: var(--nx-radius); }
.close { color: var(--nx-text); }
hr { border-top-color: var(--nx-divider); }

/* ============================== 25. BLESTA PLUGIN COMPATIBILITY ========== */
/*
 * Large parts of the client area are rendered by Blesta's own plugins (CMS
 * portal, order forms, knowledgebase, downloads, documents). Their stylesheets
 * are injected after this one, so their colours are neutralised by
 * tools/tokenize_css.php. What follows gives those components the same shape,
 * spacing and elevation as the rest of the theme.
 *
 * Everything here is presentation only: no markup or class name is expected to
 * change, so every plugin's JavaScript keeps working untouched.
 */

/* -- CMS portal ----------------------------------------------------------- */

.thanks blockquote,
blockquote {
    padding: var(--nx-space-3) var(--nx-space-4) !important;
    margin: 0 0 var(--nx-space-4) !important;
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    border-left: 3px solid var(--nx-primary) !important;
    border-right: 0 !important;
    border-radius: var(--nx-radius-lg) !important;
    box-shadow: var(--nx-shadow-sm) !important;
    color: var(--nx-text) !important;
    font-size: 0.94rem !important;
}

.thanks blockquote h1,
.thanks blockquote h2,
.thanks blockquote h3,
.thanks blockquote h4 { color: var(--nx-heading) !important; }

.thanks blockquote a { color: var(--nx-primary-readable) !important; font-weight: 600 !important; }

.portal-box { margin-bottom: var(--nx-space-3) !important; }

.portal-box .card {
    height: 100% !important;
    margin-bottom: 0 !important;
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius-lg) !important;
    transition: transform var(--nx-transition), box-shadow var(--nx-transition),
                border-color var(--nx-transition) !important;
}

.portal-box .card:hover {
    background: var(--nx-surface) !important;
    border-color: var(--nx-primary) !important;
    transform: translateY(-3px) !important;
    box-shadow: var(--nx-shadow-md) !important;
}

.portal-box .card .card-body { padding: var(--nx-space-4) var(--nx-space-3) !important; text-align: center !important; }

.portal-box a { color: inherit !important; display: block !important; height: 100% !important; }
.portal-box a:hover { color: inherit !important; }

.portal-box i,
.portal-box .fas,
.portal-box .far,
.portal-box .fab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 auto var(--nx-space-2) !important;
    border-radius: var(--nx-radius-lg) !important;
    background: var(--nx-primary-soft) !important;
    color: var(--nx-on-primary-soft) !important;
    font-size: 22px !important;
    transition: background var(--nx-transition), color var(--nx-transition) !important;
}

.portal-box .card:hover i,
.portal-box .card:hover .fas,
.portal-box .card:hover .far {
    background: var(--nx-primary-solid) !important;
    color: var(--nx-on-primary) !important;
}

.portal-box h4 {
    margin-bottom: 6px !important;
    color: var(--nx-heading) !important;
    font-size: 1.02rem !important;
}

.portal-box p {
    margin: 0 !important;
    color: var(--nx-text-muted) !important;
    font-size: 0.88rem !important;
}

/* -- Order form: sections and steps --------------------------------------- */

.section-title {
    margin: 0 0 var(--nx-space-3) !important;
    padding-bottom: var(--nx-space-2) !important;
    border-bottom: 1px solid var(--nx-divider) !important;
}

.section-title h3,
.section-title h4 {
    margin: 0 !important;
    color: var(--nx-heading) !important;
    font-size: 1.12rem !important;
}

.card-steps {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--nx-space-2) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: var(--nx-space-4) !important;
}

.card-steps .nav-link,
.card-steps a {
    border-radius: 999px !important;
    background: var(--nx-surface-2) !important;
    border: 1px solid var(--nx-border) !important;
    color: var(--nx-text-muted) !important;
    padding: 7px 15px !important;
    font-weight: 600 !important;
    font-size: 0.86rem !important;
}

.card-steps .nav-link.active,
.card-steps a.active,
.card-steps li.active a {
    background: var(--nx-primary-solid) !important;
    border-color: transparent !important;
    color: var(--nx-on-primary) !important;
}

/* -- Order form: packages ------------------------------------------------- */

.package-groups,
.package-boxes,
.package-list { margin-bottom: var(--nx-space-3) !important; }

.package,
.package-item,
.package-block {
    position: relative !important;
    height: 100% !important;
    padding: var(--nx-space-4) !important;
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius-lg) !important;
    box-shadow: var(--nx-shadow-sm) !important;
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition),
                transform var(--nx-transition) !important;
}

.package:hover,
.package-item:hover,
.package-block:hover {
    border-color: var(--nx-primary) !important;
    box-shadow: var(--nx-shadow-md) !important;
    transform: translateY(-2px) !important;
}

.package.selected,
.package-item.selected,
.package-block.active,
.package-selected {
    border-color: var(--nx-primary) !important;
    box-shadow: 0 0 0 3px var(--nx-primary-glow) !important;
}

.package-name,
.package h3,
.package h4,
.package-block h3 {
    color: var(--nx-heading) !important;
    font-family: var(--nx-font-heading) !important;
}

.package-description,
.package p { color: var(--nx-text-muted) !important; font-size: 0.9rem !important; }

.package .price,
.package-item .price,
.package-slider .package-selected h3 {
    color: var(--nx-primary-readable) !important;
    font-weight: 700 !important;
}

.instructions { color: var(--nx-text-muted) !important; font-size: 0.88rem !important; }

/* Bootstrap-slider used by the wizard template */
.package-slider .slider-track,
.package-slider .slider-track-high,
.package-slider .slider-track-low { background: var(--nx-surface-3) !important; }

.package-slider .slider-selection { background: var(--nx-primary-solid) !important; }

.package-slider .slider-handle {
    background: var(--nx-primary-solid) !important;
    border: 2px solid var(--nx-surface) !important;
    box-shadow: var(--nx-shadow-sm) !important;
}

/* -- Order form: cart and totals ------------------------------------------ */

.card-order,
.cart-summary,
.totals-box,
.order-listing {
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius-lg) !important;
    box-shadow: var(--nx-shadow-sm) !important;
    overflow: hidden !important;
}

.card-order .table,
.cart-summary .table,
.totals .table { margin-bottom: 0 !important; background: transparent !important; }

.card-order .table > thead > tr > th,
.cart-summary .table > thead > tr > th {
    background: var(--nx-surface-2) !important;
    border-color: var(--nx-border) !important;
    color: var(--nx-text-muted) !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.card-order .table > tbody > tr > td,
.cart-summary .table > tbody > tr > td {
    border-color: var(--nx-divider) !important;
    color: var(--nx-text) !important;
}

.card-order .total-due,
.totals-box .total-due,
.total-due {
    padding: var(--nx-space-3) var(--nx-space-4) !important;
    background: var(--nx-primary-soft) !important;
    color: var(--nx-on-primary-soft) !important;
    border-top: 1px solid var(--nx-border) !important;
}

.card-order .total-due h4,
.total-due h4 { margin: 0 !important; color: inherit !important; font-weight: 700 !important; }

.order-row,
.order-details-cell,
.order-details-content { border-color: var(--nx-divider) !important; color: var(--nx-text) !important; }

/* -- Order form: payment -------------------------------------------------- */

.payment_type,
.gateway,
.payment_buttons {
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius) !important;
    padding: var(--nx-space-3) !important;
    margin-bottom: var(--nx-space-2) !important;
    transition: border-color var(--nx-transition), background var(--nx-transition) !important;
}

.payment_type:hover,
.gateway:hover { border-color: var(--nx-primary) !important; background: var(--nx-surface-hover) !important; }

.gateway-logo { max-height: 34px !important; width: auto !important; }

.currency,
.currency-selector { color: var(--nx-text-muted) !important; }
.currency form * { color: inherit !important; }

.currency_value { color: var(--nx-heading) !important; font-weight: 700 !important; }

/* Terms of service block */
.terms,
#tos,
.tos {
    background: var(--nx-surface-2) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius) !important;
    padding: var(--nx-space-3) !important;
    color: var(--nx-text) !important;
}

/* -- Order form: signup / login ------------------------------------------- */

.signup_form,
.login_form,
.continue_form,
.confirm,
.credit_confirm { color: var(--nx-text) !important; }

.signup_form legend,
.login_form legend { color: var(--nx-heading) !important; }

.package_options,
.package_options .form-group { color: var(--nx-text) !important; }

.input-group-addon {
    display: flex !important;
    align-items: center !important;
    padding: 0 var(--nx-space-2) !important;
    background: var(--nx-surface-2) !important;
    border: 1px solid var(--nx-input-border) !important;
    color: var(--nx-text-muted) !important;
}

.help-block,
.instructions,
.noindent { color: var(--nx-text-muted) !important; }

.order-tooltip { color: var(--nx-text-faint) !important; }

/* -- Knowledgebase (support manager) -------------------------------------- */

.kb-category,
.kb-article,
.knowledgebase .card {
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius-lg) !important;
}

.kb-category:hover,
.kb-article:hover { border-color: var(--nx-primary) !important; }

.knowledgebase h1,
.knowledgebase h2,
.knowledgebase h3 { color: var(--nx-heading) !important; }

.breadcrumbs .breadcrumb,
.breadcrumb {
    background: var(--nx-surface-2) !important;
    border-radius: var(--nx-radius) !important;
    color: var(--nx-text-muted) !important;
}

.breadcrumb a { color: var(--nx-primary-readable) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--nx-text-faint) !important; }

/* -- Support tickets ------------------------------------------------------ */

.ticket-reply,
.ticket_reply,
.reply {
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius-lg) !important;
    margin-bottom: var(--nx-space-3) !important;
}

.ticket-reply.staff,
.reply.staff { border-left: 3px solid var(--nx-primary) !important; }

.ticket-reply .reply-header,
.reply-header {
    background: var(--nx-surface-2) !important;
    border-bottom: 1px solid var(--nx-divider) !important;
    color: var(--nx-text-muted) !important;
}

/* -- Downloads and documents ---------------------------------------------- */

.download-category,
.download-item,
.document-item {
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius) !important;
}

/* -- Generic plugin scaffolding ------------------------------------------- */
/*
 * Plugins commonly reuse these Bootstrap 3 era wrappers. Give them the theme's
 * surface treatment so nothing renders as a bare white slab.
 */

.well,
.panel-default,
.jumbotron,
.thumbnail {
    background: var(--nx-surface-2) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius-lg) !important;
    color: var(--nx-text) !important;
    box-shadow: none !important;
}

.panel-default > .panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--nx-divider) !important;
    color: var(--nx-heading) !important;
}

.page-header {
    border-bottom: 1px solid var(--nx-divider) !important;
    margin: 0 0 var(--nx-space-4) !important;
    padding-bottom: var(--nx-space-2) !important;
}

.page-header h1,
.page-header h2 { color: var(--nx-heading) !important; }

/* Anything a plugin renders inside a widget keeps the theme's text colour */
.widget_box,
.widget,
.widget_content { color: var(--nx-text) !important; }

/* ================================================= 26. NEXUM 2.1 ADDITIONS ===== */

/* -- Dark mode logo: shown instead of the main logo in dark mode, when one is set -- */
.nx-logo-dark { display: none; }
html.nx-dark .nx-brand .nx-logo-dark { display: inline-block; }
html.nx-dark .nx-brand .nx-logo-main.nx-has-dark { display: none; }

/* -- Footer ----------------------------------------------------------------- */
.nx-footer-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-3);
    padding-bottom: var(--nx-space-3);
    margin-bottom: var(--nx-space-3);
    border-bottom: 1px solid var(--nx-divider, rgba(15, 23, 42, 0.07));
}
.nx-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-2) var(--nx-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.nx-footer-links a {
    color: var(--nx-text-muted, #64748b);
    font-weight: 500;
}
.nx-footer-links a:hover,
.nx-footer-links a:focus {
    color: var(--nx-primary-readable, #4f46e5);
    text-decoration: none;
}
.nx-footer-payments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.nx-footer-payments-label {
    margin-right: 4px;
    font-size: 0.85rem;
    color: var(--nx-text-muted, #64748b);
}
.nx-footer-payments img {
    display: block;
    width: 48px;
    height: 30px;
    border-radius: 5px;
}
.nx-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-2) var(--nx-space-4);
}
.nx-footer-bottom .nx-footer-powered {
    margin: 0;
    font-size: 0.85rem;
    color: var(--nx-text-muted, #64748b);
}
.nx-footer-bottom .nx-language-footer .nx-action-btn {
    color: var(--nx-text-muted, #64748b);
}
@media (max-width: 767.98px) {
    .nx-footer-top,
    .nx-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* -- Sign-in, password and maintenance pages ------------------------------- */
.nx-auth {
    display: flex;
    min-height: 100vh;
}
.nx-auth-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--nx-space-6) 0;
}
.nx-auth-main > .container { width: 100%; }
/* The sign-in views ask for a narrow column; inside the Nexum layout the card sets its own width */
.nx-auth .row.login > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}
.nx-auth-brand-inline {
    display: block;
    margin: 0 auto var(--nx-space-4);
    text-align: center;
}
.nx-auth-brand-inline img { max-height: 48px; width: auto; }
.nx-auth-aside {
    flex: 0 0 42%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--nx-space-5);
    padding: var(--nx-space-6);
    background: var(--nx-gradient, linear-gradient(135deg, #6366f1 0%, #4f46e5 100%));
    color: var(--nx-on-gradient, #ffffff);
}
.nx-auth-aside .nx-auth-brand img {
    max-height: 44px;
    width: auto;
    filter: brightness(0) invert(1);
}
.nx-auth-copy h2 {
    margin-bottom: var(--nx-space-3);
    font-size: 2rem;
    color: var(--nx-on-gradient, #ffffff);
}
.nx-auth-copy p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--nx-on-gradient, #ffffff);
    opacity: 0.9;
}
.nx-auth-company {
    font-size: 0.85rem;
    opacity: 0.75;
}
.nx-auth-split .nx-auth-brand-inline { display: none; }
@media (max-width: 991.98px) {
    .nx-auth-aside { display: none; }
    .nx-auth-split .nx-auth-brand-inline { display: block; }
}
.nx-auth-page .nx-footer { display: none; }

/* -- Dashboard banners ------------------------------------------------------ */
.nx-banners {
    position: relative;
    margin-bottom: var(--nx-space-4);
    border-radius: var(--nx-radius-lg, 18px);
    overflow: hidden;
    box-shadow: var(--nx-shadow-md, 0 4px 12px rgba(15, 23, 42, 0.08));
}
.nx-banners.nx-hidden { display: none; }
.nx-banner {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-4);
    min-height: 140px;
    padding: var(--nx-space-5) calc(var(--nx-space-6) + 8px);
    background: var(--nx-gradient, linear-gradient(135deg, #6366f1 0%, #4f46e5 100%));
    color: #ffffff;
}
.nx-banner.active {
    display: flex;
    animation: nx-banner-in 0.35s ease;
}
@keyframes nx-banner-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}
.nx-banner-title {
    margin: 0 0 6px;
    font-size: 1.35rem;
    color: #ffffff;
}
.nx-banner-text {
    margin: 0;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.9);
}
.nx-banner-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--nx-radius-btn, 12px);
    background: rgba(255, 255, 255, 0.95);
    color: #111827;
    font-weight: 600;
    white-space: nowrap;
}
.nx-banner-button:hover,
.nx-banner-button:focus {
    background: #ffffff;
    color: #111827;
    text-decoration: none;
}
.nx-banner-nav,
.nx-banner-close {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    cursor: pointer;
}
.nx-banner-nav:hover,
.nx-banner-close:hover,
.nx-banner-nav:focus,
.nx-banner-close:focus {
    background: rgba(255, 255, 255, 0.32);
    outline: none;
}
.nx-banner-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.nx-banner-next { right: 10px; top: 50%; transform: translateY(-50%); }
.nx-banner-close { top: 10px; right: 10px; width: 28px; height: 28px; }
.nx-banners .nx-banner-close ~ .nx-banner-next,
.nx-banners .nx-banner-next { right: 10px; }
.nx-banner-dots {
    position: absolute;
    left: 50%;
    bottom: 10px;
    display: flex;
    gap: 6px;
    transform: translateX(-50%);
}
.nx-banner-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
}
.nx-banner-dot.active { background: #ffffff; }
@media (max-width: 767.98px) {
    .nx-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--nx-space-4) var(--nx-space-5) calc(var(--nx-space-5) + 10px);
    }
    .nx-banner-nav { display: none; }
}

/* -- Page gutters: Blesta zeroes the padding of ".header .container"; every Nexum band keeps the same
      side gutter as the page content, so the logo, the page title and the footer line up with it ----- */
.nx-topbar .container,
.nx-page-title .container,
.nx-staff-banner .container,
.nx-footer .container {
    padding-left: var(--nx-space-3);
    padding-right: var(--nx-space-3);
}

/* -- Status tabs of Blesta's list widgets (Open / Closed, Active / Pending ...) ------------------- */
.card-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-2);
    margin: 0 0 var(--nx-space-3);
}
.card-nav > .clearfix { display: none; }
.card-nav > .float-left,
.card-nav > .float-right { float: none !important; }
.card-nav > .float-right {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}
.card-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 4px;
    list-style: none;
    font-size: 0.85rem;
    background: var(--nx-surface-2, #f8fafc);
    border: 1px solid var(--nx-divider, rgba(15, 23, 42, 0.07));
    border-radius: var(--nx-radius, 12px);
}
.card-links > li { display: block; }
.card-links > li + li::before { display: none; content: none; }
.card-links > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: calc(var(--nx-radius, 12px) - 4px);
    color: var(--nx-text-muted, #64748b);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--nx-transition, 0.18s ease), color var(--nx-transition, 0.18s ease);
}
.card-links > li > a:hover,
.card-links > li > a:focus {
    color: var(--nx-heading, #0f172a);
    background: var(--nx-surface-hover, rgba(15, 23, 42, 0.04));
    text-decoration: none;
}
.card-links > li.active > a {
    color: var(--nx-on-primary-soft, #3730a3);
    background: var(--nx-primary-soft, #eef2ff);
    font-weight: 600;
}
.card-links .badge {
    min-width: 20px;
    padding: 2px 6px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    border-radius: 999px;
    color: var(--nx-text-muted, #64748b);
    background: var(--nx-surface-3, #e2e8f0);
}
.card-links > li.active .badge {
    color: var(--nx-on-primary, #ffffff);
    background: var(--nx-primary-solid, #4f46e5);
}

/* -- Expandable rows (service info, applied payments, quotation invoices) ------------------------
      Blesta's script reveals the details row as display: block, which shrinks it to its content;
      it is drawn as a real table row so it spans the whole table. ---------------------------------- */
.table tr.expand_details[style*="block"] { display: table-row !important; }
.table > tbody > tr.expand_details > td {
    padding: var(--nx-space-3) var(--nx-space-4);
    background: var(--nx-surface-2, #f8fafc);
    border-top: 1px solid var(--nx-divider, rgba(15, 23, 42, 0.07));
}
.table > tbody > tr.expand_details > td .table { margin-bottom: 0; }

/* The sign-in layout runs edge to edge */
.nx-auth-page .nx-main { padding: 0; }