/*!
 * Hostenix client area design system
 *
 * Loaded by structure.pdt AFTER application.min.css and the Blesta-generated
 * theme CSS, and BEFORE the admin "Custom CSS" block, so:
 *   - it overrides stock Blesta + generated theme styles, and
 *   - admin Custom CSS (Settings > Look and Feel) can still override it.
 *
 * Design tokens mirror the hostenix.com site (src/styles/tokens.css); the
 * client-area surfaces (section 19) are taken from its card/panel components.
 * !important is used only where something else already uses it or loads later:
 * the generated theme CSS (css/theme.css), Bootstrap utilities, application.css
 * `!important` paddings, and (logged-in canvas/alerts/light fills) the admin
 * Custom CSS that loads after this file.
 *
 * Sections
 *   1.  Font
 *   2.  Tokens
 *   3.  Base / typography
 *   4.  Accessibility helpers
 *   5.  Header + navigation
 *   6.  Page title + layout
 *   7.  Footer
 *   8.  Surfaces: cards / panels / wells (shared dark defaults)
 *   9.  List groups (shared defaults)
 *  10.  Tables (separators, not grids)
 *  11.  Forms
 *  12.  Buttons
 *  13.  Alerts (shared defaults)
 *  14.  Badges + utilities
 *  15.  Dropdowns
 *  16.  Navs / tabs / pagination
 *  17.  Modals / popovers / tooltips
 *  18.  Misc Blesta widgets (datepicker, dropzone, loading, progress)
 *  19.  Client area design layer (logged-in only, screen only):
 *       canvas, title, card surface, widgets, metric cards + grid,
 *       account column, secondary nav, notifications, buttons, forms,
 *       tabs/pagination/badges, dropdowns/modals, light-surface overrides,
 *       responsive
 *  20.  Authentication shell
 *  21.  Responsive (auth shell + footer)
 *  22.  Motion / forced colors
 *  23.  Print
 */

/* ==========================================================================
   1. Font: Plus Jakarta Sans (SIL OFL 1.1, see ../webfonts/PlusJakartaSans-OFL.txt)
   Same face as hostenix.com, self-hosted from the template. Inter (bundled
   with Blesta) is the fallback.
   ========================================================================== */
@font-face {
    font-family: "Plus Jakarta Sans Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("../webfonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations"),
         url("../webfonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Plus Jakarta Sans Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("../webfonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations"),
         url("../webfonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Tokens
   ========================================================================== */
:root {
    /* Surfaces (hostenix.com) */
    --hx-bg: #010d1a;
    --hx-bg-deep: #000914;
    --hx-surface: #021a35;
    --hx-surface-2: #03264d;
    --hx-surface-raised: #041224;
    --hx-input-bg: #01142a;
    --hx-border: #0b2440;
    --hx-border-strong: #14365c;

    /* Brand (hostenix.com) */
    --hx-primary: #0b8bfe;
    --hx-primary-hi: #0a6fd6;
    --hx-primary-lo: #0866c8;
    --hx-accent-text: #1e8fff;
    --hx-accent-soft: #5cb0ff;
    --hx-glow: #0151cc;
    --hx-glow-deep: #02489f;

    /* Text (hostenix.com, plus a brighter body tone for dense app data) */
    --hx-text: #ffffff;
    --hx-text-body: #c3d1e1;
    --hx-text-muted: #8ea3bc;
    --hx-text-subtle: #6f87a3;

    /* Status (hostenix.com) + dark-surface text variants */
    --hx-ok: #34c77b;
    --hx-warn: #f2b33d;
    --hx-down: #ef5350;
    --hx-ok-text: #6fe0a5;
    --hx-warn-text: #f7c96b;
    --hx-down-text: #ff8f8c;
    --hx-info-text: #8cc8ff;
    --hx-danger-solid: #c93633;
    --hx-danger-solid-hover: #b32d2a;

    /* Type */
    --hx-font: "Plus Jakarta Sans Variable", "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Shape & depth (hostenix.com) */
    --hx-radius-sm: 6px;
    --hx-radius: 8px;
    --hx-radius-md: 12px;
    --hx-radius-lg: 16px;
    --hx-glow-btn: 0 8px 28px -6px rgba(11, 139, 254, 0.55);
    --hx-glow-btn-hover: 0 12px 36px -6px rgba(11, 139, 254, 0.75);
    --hx-shadow-card: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
    --hx-shadow-pop: 0 0 0 1px var(--hx-border-strong), 0 30px 60px -20px rgba(0, 0, 0, 0.85), 0 0 60px -30px rgba(11, 139, 254, 0.6);
    --hx-focus-ring: 0 0 0 3px rgba(11, 139, 254, 0.35);
    --hx-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Client-area surfaces, taken from hostenix.com components:
       .hplan / .specs__panel (card), .pricing__card (tinted panel),
       .cprow / .cpanel__people (low-contrast blue hairlines), .specs__panel:hover (glow) */
    --hx-card-bg: linear-gradient(180deg, #03172f 0%, #020e1d 100%);
    --hx-card-bg-tint: radial-gradient(120% 70% at 0% 0%, rgba(11, 60, 130, 0.22), transparent 55%), linear-gradient(180deg, #03172f 0%, #020e1d 100%);
    --hx-card-shadow: 0 24px 48px -30px rgba(0, 0, 0, 0.8);
    --hx-card-glow: 0 0 60px -30px rgba(11, 139, 254, 0.6);
    --hx-line: rgba(92, 176, 255, 0.075);
    --hx-line-strong: rgba(92, 176, 255, 0.18);
    --hx-divider: rgba(92, 176, 255, 0.06);
    /* Card depth without outlines: soft inner top highlight + deep drop shadow */
    --hx-card-depth: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 28px 56px -30px rgba(0, 0, 0, 0.9);
    --hx-gutter: 12px;
}

/* ==========================================================================
   3. Base / typography
   ========================================================================== */
html {
    color-scheme: dark;
    scrollbar-color: var(--hx-border-strong) var(--hx-bg);
    -webkit-text-size-adjust: 100%;
}

html,
body {
    font-size: 0.9375rem;
}

/* application.css: `body, .panel .panel-heading .panel-title` + theme.css: `body` */
body {
    background-color: var(--hx-bg);
    color: var(--hx-text-body);
    font-family: var(--hx-font);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Sticky footer layout; the canvas color/glow is in section 19.1 */
body.hx-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.panel .panel-heading .panel-title {
    background: transparent;
    color: var(--hx-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--hx-text);
    font-family: var(--hx-font);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* theme.css: `a, a:hover` */
a,
a:hover {
    color: var(--hx-accent-text);
}

a:hover,
a:focus {
    color: var(--hx-accent-soft);
}

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

address > strong,
strong,
b {
    color: inherit;
}

code {
    color: var(--hx-info-text);
}

pre {
    padding: 0.85rem 1rem;
    color: var(--hx-text-body);
    background: var(--hx-bg-deep);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius);
}

::selection {
    background: rgba(11, 139, 254, 0.35);
    color: #ffffff;
}

/* application.css sets 12px labels */
label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--hx-text-body);
}

a.highlight,
a:hover.highlight {
    color: var(--hx-down-text);
}

/* ==========================================================================
   4. Accessibility helpers
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--hx-accent-text);
    outline-offset: 2px;
}

.hx-skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 2000;
    padding: 0.6rem 1rem;
    color: #ffffff;
    font-weight: 700;
    background: var(--hx-primary-lo);
    border-radius: var(--hx-radius);
}

.hx-skip-link:hover,
.hx-skip-link:focus {
    top: 1rem;
    color: #ffffff;
    text-decoration: none;
}

#hx-main:focus {
    outline: none;
}

/* ==========================================================================
   5. Header + navigation
   Markup: header.hx-site-header > [.header.hx-utility] + .nav-content > nav.navbar
   Hooks preserved: #main-navbar, .navbar-toggler, data-toggle, #language_selector,
   #language_switcher, .language_code
   ========================================================================== */
.hx-site-header {
    position: relative;
    z-index: 1030;
    background: rgba(1, 13, 26, 0.94);
    border-bottom: 1px solid var(--hx-border);
}

/* Utility strip: staff-as-client notice / language selector.
   theme.css styles `.header` with a gradient. */
.hx-site-header .header {
    padding: 0;
    background: var(--hx-bg-deep);
    border-bottom: 1px solid var(--hx-border);
}

.hx-site-header .hx-utility__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 2.25rem;
    padding-left: 15px;
    padding-right: 15px;
}

.hx-site-header .header .badge {
    margin: 0.35rem 0;
    padding: 0.35em 0.85em;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Staff "logged in as client" indicator: theme.css forces .badge-info with !important */
.hx-site-header .header .badge-info {
    color: var(--hx-warn-text) !important;
    background-color: rgba(242, 179, 61, 0.12) !important;
    border: 1px solid rgba(242, 179, 61, 0.4);
}

.hx-site-header .header .badge a,
.hx-site-header .header .badge a:hover {
    color: var(--hx-warn-text);
}

.hx-site-header .top-nav {
    margin: 0;
}

/* theme.css: `.top-nav .dropdown a.dropdown-toggle` with !important */
.hx-site-header .top-nav .dropdown a.dropdown-toggle,
.hx-site-header .top-nav .dropdown a.dropdown-toggle:focus {
    color: var(--hx-text-muted) !important;
    font-size: 0.8125rem;
}

.hx-site-header .top-nav .dropdown a.dropdown-toggle:hover {
    color: var(--hx-text) !important;
}

/* theme.css: `.nav-content nav.navbar` gradient */
.hx-site-header .nav-content nav.navbar {
    min-height: 4rem;
    padding: 0.6rem 0;
    background: transparent;
}

.hx-site-header .nav-content .container-md.hx-navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
}

.hx-navbar .logo {
    width: auto;
    margin: 0;
    margin-inline-end: 2rem;
}

.hx-brand,
.hx-brand:hover,
.hx-brand:focus {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--hx-text);
    text-decoration: none;
}

.hx-brand__mark {
    display: block;
    width: 26px;
    height: 26px;
}

.hx-brand__text {
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hx-site-header .nav-content .navbar .navbar-toggler {
    margin: 0;
    margin-inline-start: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--hx-border-strong);
    border-radius: var(--hx-radius);
}

/* Top-level links. theme.css forces colors with !important. */
.hx-site-header .nav-content nav.navbar .navbar-nav > li > a,
.hx-site-header .nav-content nav.navbar .navbar-nav > li > a.nav-link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.8rem;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--hx-radius);
    text-decoration: none;
    transition: color 0.2s var(--hx-ease), background-color 0.2s var(--hx-ease), box-shadow 0.2s var(--hx-ease);
}

.hx-site-header .nav-content nav.navbar .navbar-nav > li > a:hover,
.hx-site-header .nav-content nav.navbar .navbar-nav > li > a:focus,
.hx-site-header .nav-content nav.navbar .navbar-nav > .show > a,
.hx-site-header .nav-content nav.navbar .navbar-nav > .open > a {
    color: var(--hx-text) !important;
    background-color: rgba(11, 139, 254, 0.08);
}

.hx-site-header .nav-content nav.navbar .navbar-nav > .active > a,
.hx-site-header .nav-content nav.navbar .navbar-nav > .active > a:hover,
.hx-site-header .nav-content nav.navbar .navbar-nav > .active > a:focus {
    color: var(--hx-text) !important;
    background-color: rgba(11, 139, 254, 0.12);
    box-shadow: inset 0 -2px 0 var(--hx-primary);
}

.hx-site-header .nav-content .navbar-nav > li > a > i {
    color: var(--hx-accent-soft);
    font-size: 0.875em;
}

.hx-site-header .nav-content .navbar-nav .nav-link:focus-visible,
.hx-site-header .nav-content .navbar-nav .dropdown-item:focus-visible {
    outline: 2px solid var(--hx-accent-text);
    outline-offset: 0;
}

/* Dropdown items in the navbar (theme.css forces mobile colors with !important) */
.hx-site-header .nav-content .navbar-nav .dropdown-menu a.dropdown-item,
.hx-site-header .nav-content .navbar-nav ul.dropdown-menu li a {
    color: var(--hx-text-body) !important;
    font-size: 0.875rem;
}

.hx-site-header .nav-content .navbar-nav .dropdown-menu a.dropdown-item:hover,
.hx-site-header .nav-content .navbar-nav .dropdown-menu a.dropdown-item:focus,
.hx-site-header .nav-content .navbar-nav ul.dropdown-menu li a:hover,
.hx-site-header .nav-content .navbar-nav ul.dropdown-menu li a:focus {
    color: var(--hx-text) !important;
    background: rgba(11, 139, 254, 0.12);
}

.hx-site-header .nav-content .navbar-nav .dropdown-menu i {
    color: var(--hx-accent-soft);
}

.hx-avatar {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--hx-accent-soft);
    font-size: 0.75rem;
    background: linear-gradient(180deg, #03305f, #011a37);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(30, 143, 255, 0.4);
}

.hx-site-header .nav-content .navbar-nav > li > a > .hx-avatar i {
    color: inherit;
}

@media (min-width: 768px) {
    .hx-site-header {
        position: sticky;
        top: 0;
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
    }

    .hx-navbar .hx-navbar__primary {
        gap: 0.15rem;
    }

    .hx-navbar .hx-navbar__account {
        margin-inline-start: auto;
    }

    .hx-site-header .nav-content .navbar-nav .dropdown-menu {
        margin-top: 0.5rem;
    }
}

@media (max-width: 767.98px) {
    .hx-site-header .nav-content nav.navbar {
        padding: 0.6rem 0;
    }

    .hx-navbar .navbar-collapse {
        margin-top: 0.75rem;
        border-top: 1px solid var(--hx-border);
    }

    .hx-navbar .navbar-collapse.show,
    .hx-navbar .navbar-collapse.collapsing {
        padding-top: 0.5rem;
    }

    .hx-site-header .nav-content nav.navbar .navbar-nav > li > a {
        padding: 0.75rem 0.5rem;
    }

    .hx-site-header .nav-content nav.navbar .navbar-nav > .active > a {
        box-shadow: inset 3px 0 0 var(--hx-primary);
    }

    .hx-navbar .hx-navbar__account {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--hx-border);
    }

    .hx-site-header .nav-content .navbar-nav .dropdown-menu {
        padding-left: 1.25rem;
        box-shadow: none;
    }
}

/* ==========================================================================
   6. Page title + layout
   ========================================================================== */
/* application.css + theme.css: `.title` is a fixed-height light gradient band.
   Structural reset here; spacing/type/colour are in section 19.2. */
.hx-app .title {
    height: auto;
    background: transparent;
}

.hx-app .title .container-md {
    padding-left: 15px;
    padding-right: 15px;
}

/* theme.css: `.title h3` (inline, offset by margins) */
.hx-app .title h3 {
    display: block;
    margin: 0;
}

.hx-app .hx-content {
    flex: 1 0 auto;
    width: 100%;
    padding-bottom: 3rem;
}

/* ==========================================================================
   7. Footer
   ========================================================================== */
.hx-footer {
    min-height: 0;
    margin-top: 2rem;
    padding: 1.75rem 0;
    font-size: 0.8125rem;
    background: var(--hx-bg-deep);
    border-top: 1px solid var(--hx-border);
}

.hx-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    padding-left: 15px;
    padding-right: 15px;
}

.hx-footer__copy {
    margin: 0;
    color: var(--hx-text-subtle);
}

.hx-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hx-footer__links a {
    color: var(--hx-text-muted);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.hx-footer__links a:hover,
.hx-footer__links a:focus {
    color: var(--hx-text);
    text-decoration: none;
}

/* ==========================================================================
   8. Surfaces: cards / panels / wells (shared dark defaults)
   Bootstrap 4 `.card*` and Bootstrap 3 `.panel*` are both styled.
   The client-area design (section 19) refines these for logged-in pages.
   ========================================================================== */
.card,
.panel,
.well,
.jumbotron {
    color: var(--hx-text-body);
    background-color: var(--hx-surface);
    border: 1px solid var(--hx-line);
    border-radius: var(--hx-radius-lg);
}

.panel {
    margin-bottom: 1.25rem;
    box-shadow: var(--hx-shadow-card);
}

/* application.css + theme.css paint `.card-blesta > .card-header` as a dark gradient strip */
.card-header,
.panel-heading,
.card-blesta > .card-header,
.panel .card-blesta > .panel-heading {
    width: auto;
    margin: 0;
    padding: 1rem 1.25rem;
    color: var(--hx-text);
    font-weight: 700;
    background: transparent;
    border-bottom: 1px solid var(--hx-divider);
}

.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5,
.panel-heading h1, .panel-heading h2, .panel-heading h3, .panel-heading h4, .panel-heading h5 {
    margin: 0;
    color: var(--hx-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
}

.card-body,
.panel .panel-body {
    padding: 1rem 1.25rem;
}

.card-body h4,
.panel .panel-body h4 {
    color: var(--hx-text);
    border-bottom-color: var(--hx-divider);
}

.card-footer,
.panel-footer {
    color: var(--hx-text-muted);
    background: transparent;
    border-top: 1px solid var(--hx-divider);
}

.card-title {
    color: var(--hx-text);
}

.card-subtitle,
.card-text {
    color: var(--hx-text-muted);
}

.panel-pad h4 {
    color: var(--hx-text-muted);
}

.col-border {
    border-right-color: var(--hx-divider);
}

/* theme.css: `.top-focus-box` with !important */
.top-focus-box {
    background-color: rgba(11, 139, 254, 0.06) !important;
    border-radius: var(--hx-radius-md);
}

.breadcrumb,
.breadcrumbs .breadcrumb {
    background-color: transparent;
}

/* ==========================================================================
   9. List groups (shared defaults; navigation styling lives in section 19)
   ========================================================================== */
.list-group {
    border-radius: var(--hx-radius-md);
}

.list-group-item {
    color: var(--hx-text-body);
    background-color: transparent;
    border-color: var(--hx-divider);
}

.list-group-item-action,
a.list-group-item {
    color: var(--hx-text-body);
    transition: background-color 0.15s, color 0.15s;
}

.list-group-item i {
    color: var(--hx-accent-soft);
}

/* theme.css: hover/active backgrounds with !important */
.list-group.list-options a.list-group-item:hover,
.list-group.list-options a.list-group-item:focus,
a.list-group-item:hover,
a.list-group-item:focus,
.list-group-item-action:hover,
.list-group-item-action:focus {
    color: var(--hx-text);
    background-color: rgba(255, 255, 255, 0.035) !important;
}

.list-group.list-options .list-group-item:hover {
    color: var(--hx-text);
}

.list-group-item.active,
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
    z-index: 2;
    color: var(--hx-text);
    background-color: rgba(11, 139, 254, 0.14) !important;
    border-color: var(--hx-divider);
}

/* theme.css: `.list-group-item h4` and `.list-group-item.credits` with !important */
.list-group-item h4 {
    color: var(--hx-text) !important;
}

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

.list-group-item-text {
    color: var(--hx-text-muted);
}

/* ==========================================================================
   10. Tables: separators, not grids
   Row dividers only, muted uppercase headers, generous padding, no stripes.
   ========================================================================== */
/* application.css: `table { border: 1px solid #e1e1e1 }` */
table,
.table {
    border: 0;
}

.table {
    margin-bottom: 0;
    color: var(--hx-text-body);
    background-color: transparent;
}

.table td,
.table th,
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 0.9rem 1rem;
    vertical-align: middle;
    border: 0;
    border-top: 1px solid var(--hx-divider);
}

.table > thead > tr > th,
.table thead th,
.table .thead-light th {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    color: var(--hx-text-subtle);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    background: transparent;
    border-top: 0;
    border-bottom: 1px solid var(--hx-line);
}

.table > thead + tbody > tr:first-child > td,
.table > thead + tbody > tr:first-child > th {
    border-top: 0;
}

.table > thead > tr > th > a,
.table > thead > tr > th > a:hover,
.table > thead > tr > th > a:focus {
    color: var(--hx-text-subtle);
    text-decoration: none;
}

.table > thead > tr > th > a:hover,
.table > thead > tr > th > a:focus,
.table > thead > tr > th > a.asc,
.table > thead > tr > th > a.desc {
    color: var(--hx-text);
}

.table td a:not(.btn) {
    font-weight: 600;
}

/* application.css `.table-curved`: per-cell borders + rounded corners */
.table-curved,
.table-curved td,
.table-curved th,
.table-curved tbody > tr > td,
.table-curved tbody > tr > td:first-child {
    border-left: 0;
    border-radius: 0 !important;
}

/* application.css paints striped cells white / #f9f9f9; separators replace stripes */
.table-striped tbody tr:nth-of-type(odd),
.table-striped-alt tbody tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-child(2n+1) > td,
.table-striped-alt > tbody > tr:nth-child(2n+1) > td,
.table-striped > tbody > tr:nth-child(2n+1) > th,
.table-striped-alt > tbody > tr:nth-child(2n+1) > th,
.table-striped > tbody > tr:nth-child(2n) > td,
.table-striped > tbody > tr:nth-child(2n) > th,
.table-striped-alt > tbody > tr:nth-child(2n) > td,
.table-striped-alt > tbody > tr:nth-child(2n) > th,
.table-striped-alt > tbody > tr:nth-child(4n+3) > td,
.table-striped-alt > tbody > tr:nth-child(4n+3) > th {
    background-color: transparent;
}

/* theme.css: `.table-hover > tbody > tr:hover > td` with !important */
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    color: var(--hx-text);
    background-color: rgba(11, 139, 254, 0.05) !important;
}

.table-hover tbody tr:hover {
    color: var(--hx-text);
}

tr.expand td:last-of-type::after {
    color: var(--hx-text-subtle);
    font-size: 0.75rem;
}

tr.expand.expanded > td {
    color: var(--hx-text);
}

/* Expanded detail rows: an inset well */
.table > tbody > tr.expand_details > td,
.table > tbody > tr.expand_details > td:hover {
    padding: 1rem 1.25rem;
    background-color: rgba(0, 9, 20, 0.45) !important;
    border-top: 0;
}

.table .table {
    background-color: transparent;
}

.table .table td,
.table .table th {
    padding: 0.6rem 0.75rem;
}

.table.multi_heading .email_header {
    background-color: rgba(255, 255, 255, 0.025);
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border: 1px solid var(--hx-divider);
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   11. Forms
   ========================================================================== */
.form-control,
.custom-select,
.custom-file-label,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"] {
    color: var(--hx-text);
    background-color: var(--hx-input-bg);
    border: 1px solid var(--hx-border-strong);
    border-radius: var(--hx-radius);
}

.form-control,
.custom-select {
    height: auto;
    min-height: 2.75rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.9375rem;
    transition: border-color 0.15s var(--hx-ease), box-shadow 0.15s var(--hx-ease), background-color 0.15s;
}

.form-control-sm,
.input-sm,
.custom-select-sm {
    min-height: 2.1rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.8125rem;
}

.form-control::placeholder {
    color: var(--hx-text-subtle);
    opacity: 1;
}

.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus,
input:focus {
    color: var(--hx-text);
    background-color: #021b36;
    border-color: var(--hx-primary);
    outline: 0;
    box-shadow: var(--hx-focus-ring);
}

.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
    color: var(--hx-text-muted);
    background-color: rgba(255, 255, 255, 0.03);
    opacity: 1;
}

.form-control-plaintext {
    color: var(--hx-text);
}

/* Light chevron for Bootstrap custom selects (stock SVG is dark) */
.custom-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%238ea3bc' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
}

select option,
select optgroup {
    color: var(--hx-text);
    background-color: var(--hx-surface);
}

/* Chrome / Safari autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--hx-text);
    -webkit-box-shadow: 0 0 0 1000px var(--hx-input-bg) inset;
    caret-color: var(--hx-text);
    transition: background-color 9999s ease-in-out 0s;
}

.input-group-text,
.input-group-addon {
    color: var(--hx-text-muted);
    background-color: var(--hx-surface-2);
    border-color: var(--hx-border-strong);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--hx-primary);
}

.checkbox label,
.radio label,
.checkbox-inline,
.radio-inline,
.form-check-label {
    color: var(--hx-text-body);
    font-size: 0.875rem;
    font-weight: 500;
}

.custom-control-label::before {
    background-color: var(--hx-input-bg);
    border-color: var(--hx-border-strong);
}

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

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: var(--hx-focus-ring);
}

.help-block,
.form-text,
small.text-muted {
    color: var(--hx-text-muted);
}

legend {
    color: var(--hx-text);
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.has-error .form-control {
    border-color: var(--hx-down);
}

.invalid-feedback,
.has-error .help-block {
    color: var(--hx-down-text);
}

/* ==========================================================================
   12. Buttons
   theme.css sets every .btn-* color with !important, so overrides must too.
   ========================================================================== */
.btn {
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--hx-radius);
    transition: background-color 0.2s var(--hx-ease), border-color 0.2s var(--hx-ease), box-shadow 0.25s var(--hx-ease), filter 0.2s var(--hx-ease), color 0.2s;
}

.btn:focus,
.btn.focus {
    box-shadow: var(--hx-focus-ring);
}

.btn:focus-visible {
    outline: 2px solid var(--hx-accent-text);
    outline-offset: 2px;
}

.btn-lg {
    font-size: 1rem;
    border-radius: var(--hx-radius);
}

.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: var(--hx-radius-sm);
}

/* Bootstrap 3 size kept for stock Blesta markup */
.btn-xs,
.btn-group-xs > .btn {
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: var(--hx-radius-sm);
}

/* Primary action. Blesta uses .btn-success for primary submits, so it shares
   the Hostenix CTA style; green stays for success badges/alerts/text. */
.btn-primary,
.btn-success {
    color: #ffffff !important;
    background-color: var(--hx-primary-lo) !important;
    background-image: linear-gradient(180deg, var(--hx-primary-hi), var(--hx-primary-lo));
    border-color: var(--hx-primary-lo) !important;
    box-shadow: var(--hx-glow-btn), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-primary:hover,
.btn-success:hover,
.btn-primary:focus,
.btn-success:focus {
    color: #ffffff !important;
    background-color: var(--hx-primary-hi) !important;
    border-color: var(--hx-primary-hi) !important;
    filter: brightness(1.08);
    box-shadow: var(--hx-glow-btn-hover), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-primary:disabled,
.btn-primary.disabled,
.btn-success:disabled,
.btn-success.disabled {
    background-color: var(--hx-primary-lo) !important;
    filter: none;
    box-shadow: none;
    opacity: 0.55;
}

/* Secondary / neutral: Hostenix "outline" button */
.btn-light,
.btn-default,
.btn-secondary,
.btn-outline-secondary,
.btn-outline-light,
.btn-outline-dark {
    color: var(--hx-text) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--hx-border-strong) !important;
}

.btn-light:hover,
.btn-light:focus,
.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-secondary:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover,
.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle {
    color: var(--hx-text) !important;
    background-color: rgba(11, 139, 254, 0.1) !important;
    border-color: var(--hx-primary) !important;
}

.btn-light:disabled,
.btn-light.disabled,
.btn-secondary:disabled,
.btn-secondary.disabled {
    background-color: rgba(255, 255, 255, 0.03) !important;
    opacity: 0.55;
}

.btn-info {
    color: var(--hx-info-text) !important;
    background-color: rgba(11, 139, 254, 0.14) !important;
    border-color: rgba(11, 139, 254, 0.4) !important;
}

.btn-info:hover,
.btn-info:focus {
    color: #ffffff !important;
    background-color: rgba(11, 139, 254, 0.26) !important;
    border-color: var(--hx-primary) !important;
}

.btn-warning {
    color: #1d1300 !important;
    background-color: var(--hx-warn) !important;
    border-color: var(--hx-warn) !important;
}

.btn-warning:hover,
.btn-warning:focus {
    color: #1d1300 !important;
    background-color: #f5c060 !important;
    border-color: #f5c060 !important;
}

.btn-danger {
    color: #ffffff !important;
    background-color: var(--hx-danger-solid) !important;
    border-color: var(--hx-danger-solid) !important;
}

.btn-danger:hover,
.btn-danger:focus {
    color: #ffffff !important;
    background-color: var(--hx-danger-solid-hover) !important;
    border-color: var(--hx-danger-solid-hover) !important;
}

.btn-outline-primary,
.btn-outline-info {
    color: var(--hx-info-text) !important;
    background-color: transparent !important;
    border-color: rgba(11, 139, 254, 0.55) !important;
}

.btn-outline-primary:hover,
.btn-outline-info:hover {
    color: #ffffff !important;
    background-color: rgba(11, 139, 254, 0.14) !important;
    border-color: var(--hx-primary) !important;
}

.btn-outline-success {
    color: var(--hx-ok-text) !important;
    background-color: transparent !important;
    border-color: rgba(52, 199, 123, 0.55) !important;
}

.btn-outline-warning {
    color: var(--hx-warn-text) !important;
    background-color: transparent !important;
    border-color: rgba(242, 179, 61, 0.55) !important;
}

.btn-outline-danger {
    color: var(--hx-down-text) !important;
    background-color: transparent !important;
    border-color: rgba(239, 83, 80, 0.55) !important;
}

.btn-outline-success:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.btn-link,
.btn-link:hover,
.btn-link:focus {
    color: var(--hx-accent-text);
}

.close,
.close:hover {
    color: var(--hx-text);
    text-shadow: none;
    opacity: 0.6;
}

.close:hover,
.close:focus {
    opacity: 1;
}

/* ==========================================================================
   13. Alerts (shared defaults; logged-in notifications live in section 19)
   ========================================================================== */
.alert {
    padding: 0.85rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--hx-radius-md);
}

.alert a:not(.btn) {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.alert .close {
    color: inherit;
}

.alert-success {
    color: #a6ecc6;
    background: rgba(52, 199, 123, 0.1);
    border-color: rgba(52, 199, 123, 0.35);
}

.alert-danger {
    color: #ffc2c0;
    background: rgba(239, 83, 80, 0.1);
    border-color: rgba(239, 83, 80, 0.4);
}

.alert-warning {
    color: #f9dc9f;
    background: rgba(242, 179, 61, 0.1);
    border-color: rgba(242, 179, 61, 0.4);
}

.alert-info,
.alert-primary {
    color: #b3d9ff;
    background: rgba(11, 139, 254, 0.1);
    border-color: rgba(11, 139, 254, 0.35);
}

.alert-secondary,
.alert-light,
.alert-dark {
    color: var(--hx-text-body);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--hx-border-strong);
}

.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert strong {
    color: inherit;
}

/* ==========================================================================
   14. Badges + utilities
   theme.css sets .badge-*, .bg-*, .text-*, .border-* with !important.
   ========================================================================== */
.badge {
    font-weight: 600;
    border-radius: 999px;
}

.badge:not([class*="badge-"]) {
    color: var(--hx-text-body);
    background-color: rgba(255, 255, 255, 0.08);
}

.badge-primary,
.badge-info {
    color: var(--hx-info-text) !important;
    background-color: rgba(11, 139, 254, 0.18) !important;
}

.badge-success {
    color: var(--hx-ok-text) !important;
    background-color: rgba(52, 199, 123, 0.16) !important;
}

.badge-warning {
    color: var(--hx-warn-text) !important;
    background-color: rgba(242, 179, 61, 0.16) !important;
}

.badge-danger {
    color: var(--hx-down-text) !important;
    background-color: rgba(239, 83, 80, 0.16) !important;
}

.badge-secondary,
.badge-light,
.badge-dark,
.label-currency {
    color: var(--hx-text-body) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.text-primary,
.text-info {
    color: var(--hx-accent-soft) !important;
}

.text-success {
    color: var(--hx-ok-text) !important;
}

.text-warning {
    color: var(--hx-warn-text) !important;
}

.text-danger {
    color: var(--hx-down-text) !important;
}

.text-secondary,
.text-muted {
    color: var(--hx-text-muted) !important;
}

.text-dark,
.text-body {
    color: var(--hx-text-body) !important;
}

.text-black-50 {
    color: rgba(255, 255, 255, 0.55) !important;
}

.bg-primary,
.bg-info {
    background-color: var(--hx-primary-lo) !important;
}

.bg-success {
    background-color: #1c8a52 !important;
}

.bg-warning {
    background-color: var(--hx-warn) !important;
}

.bg-danger {
    background-color: var(--hx-danger-solid) !important;
}

.bg-secondary {
    background-color: var(--hx-border-strong) !important;
}

.bg-dark {
    background-color: var(--hx-bg-deep) !important;
}

.bg-light {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.bg-white {
    background-color: var(--hx-surface) !important;
}

.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-light,
.border-secondary,
.border-dark {
    border-color: var(--hx-border) !important;
}

.border-primary,
.border-info {
    border-color: var(--hx-primary) !important;
}

.border-success {
    border-color: var(--hx-ok) !important;
}

.border-warning {
    border-color: var(--hx-warn) !important;
}

.border-danger {
    border-color: var(--hx-down) !important;
}

/* ==========================================================================
   15. Dropdowns (Bootstrap 4 `.dropdown-item` and Bootstrap 3 `ul > li > a`)
   ========================================================================== */
.dropdown-menu {
    padding: 0.4rem;
    color: var(--hx-text-body);
    font-size: 0.875rem;
    background-color: var(--hx-surface-raised);
    border: 1px solid var(--hx-border-strong);
    border-radius: var(--hx-radius-md);
    box-shadow: var(--hx-shadow-pop);
}

.dropdown-item,
ul.dropdown-menu > li > a {
    display: block;
    clear: both;
    padding: 0.5rem 0.75rem;
    color: var(--hx-text-body);
    white-space: nowrap;
    border-radius: var(--hx-radius);
    text-decoration: none;
}

.dropdown-item:focus,
.dropdown-item:hover,
.dropdown-item:active,
.dropdown-item.active,
ul.dropdown-menu li a:focus,
ul.dropdown-menu li a:hover,
ul.dropdown-menu li a:active {
    color: var(--hx-text);
    background: rgba(11, 139, 254, 0.12);
    text-decoration: none;
}

.dropdown-item i,
ul.dropdown-menu > li > a i {
    color: var(--hx-accent-soft);
}

.dropdown-divider,
ul.dropdown-menu > li.divider {
    border-top-color: var(--hx-border);
}

.dropdown-header {
    color: var(--hx-text-subtle);
}

/* ==========================================================================
   16. Navs / tabs / pagination
   ========================================================================== */
.nav-tabs {
    border-bottom-color: var(--hx-border);
}

.nav-tabs .nav-link,
.nav-tabs > li > a {
    color: var(--hx-text-muted);
    border-radius: var(--hx-radius) var(--hx-radius) 0 0;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    color: var(--hx-text);
    border-color: transparent;
    background-color: rgba(255, 255, 255, 0.03);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--hx-text);
    background-color: var(--hx-surface);
    border-color: var(--hx-border) var(--hx-border) var(--hx-surface);
}

.nav-pills .nav-link {
    color: var(--hx-text-muted);
    border-radius: var(--hx-radius);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.nav-pills > li.active > a {
    color: #ffffff;
    background-color: var(--hx-primary-lo);
}

.page-link,
div.pagination ul.pagination li a {
    color: var(--hx-text-body);
    background-color: transparent;
    border-color: var(--hx-border);
}

.page-link:hover,
.page-link:focus,
div.pagination ul.pagination li a:hover {
    color: var(--hx-text);
    background-color: rgba(11, 139, 254, 0.1);
    border-color: var(--hx-border-strong);
}

.page-item:first-child .page-link {
    border-radius: var(--hx-radius) 0 0 var(--hx-radius);
}

.page-item:last-child .page-link {
    border-radius: 0 var(--hx-radius) var(--hx-radius) 0;
}

/* theme.css + application.css active page */
.pagination .page-item.active .page-link,
div.pagination ul.pagination li.active .page-link,
div.pagination ul.pagination li.active a {
    color: #ffffff;
    background: linear-gradient(180deg, var(--hx-primary-hi), var(--hx-primary-lo));
    border-color: var(--hx-primary-lo);
}

.page-item.disabled .page-link {
    color: var(--hx-text-subtle);
    background-color: transparent;
    border-color: var(--hx-border);
}

/* ==========================================================================
   17. Modals / popovers / tooltips
   ========================================================================== */
.modal-content {
    color: var(--hx-text-body);
    background-color: var(--hx-surface);
    border: 1px solid var(--hx-border-strong);
    border-radius: var(--hx-radius-lg);
    box-shadow: var(--hx-shadow-pop);
}

.modal-header {
    border-bottom-color: var(--hx-border);
}

.modal-header h5,
.modal-title,
.global_modal_title {
    color: var(--hx-text);
    font-weight: 700;
}

.modal-footer {
    border-top-color: var(--hx-border);
}

.modal-backdrop.show {
    background-color: var(--hx-bg-deep);
    opacity: 0.75;
}

.popover {
    font-family: var(--hx-font);
    background-color: var(--hx-surface-2);
    border-color: var(--hx-border-strong);
    border-radius: var(--hx-radius);
}

.popover-header {
    color: var(--hx-text);
    background-color: rgba(255, 255, 255, 0.04);
    border-bottom-color: var(--hx-border-strong);
}

.popover-body {
    color: var(--hx-text-body);
}

.bs-popover-top > .arrow::after,
.bs-popover-auto[x-placement^="top"] > .arrow::after {
    border-top-color: var(--hx-surface-2);
}

.bs-popover-right > .arrow::after,
.bs-popover-auto[x-placement^="right"] > .arrow::after {
    border-right-color: var(--hx-surface-2);
}

.bs-popover-bottom > .arrow::after,
.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
    border-bottom-color: var(--hx-surface-2);
}

.bs-popover-left > .arrow::after,
.bs-popover-auto[x-placement^="left"] > .arrow::after {
    border-left-color: var(--hx-surface-2);
}

.bs-popover-top > .arrow::before,
.bs-popover-auto[x-placement^="top"] > .arrow::before {
    border-top-color: var(--hx-border-strong);
}

.bs-popover-right > .arrow::before,
.bs-popover-auto[x-placement^="right"] > .arrow::before {
    border-right-color: var(--hx-border-strong);
}

.bs-popover-bottom > .arrow::before,
.bs-popover-auto[x-placement^="bottom"] > .arrow::before {
    border-bottom-color: var(--hx-border-strong);
}

.bs-popover-left > .arrow::before,
.bs-popover-auto[x-placement^="left"] > .arrow::before {
    border-left-color: var(--hx-border-strong);
}

.tooltip {
    font-family: var(--hx-font);
}

.tooltip-inner {
    color: var(--hx-text);
    background-color: var(--hx-bg-deep);
    border: 1px solid var(--hx-border-strong);
    border-radius: var(--hx-radius-sm);
}

/* ==========================================================================
   18. Misc Blesta widgets
   ========================================================================== */
/* bootstrap-datepicker */
.datepicker.dropdown-menu {
    color: var(--hx-text-body);
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused,
.datepicker table tr td span:hover,
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
    color: var(--hx-text);
    background: rgba(11, 139, 254, 0.14);
}

.datepicker table tr td.old,
.datepicker table tr td.new,
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    color: var(--hx-text-subtle);
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td span.active,
.datepicker table tr td.today {
    color: #ffffff;
    background: var(--hx-primary-lo);
    background-image: none;
    border-color: var(--hx-primary-lo);
    text-shadow: none;
}

/* Dropzone (file uploads) */
.dropzone .dz-message {
    color: var(--hx-text-muted);
    border-color: var(--hx-border-strong);
    border-radius: var(--hx-radius-md);
}

.dropzone .dz-preview.dz-file-preview .dz-image,
.dropzone .dz-preview .dz-image {
    background: var(--hx-surface-2);
    border-color: var(--hx-border);
}

/* Ajax loading overlay */
.loading_container {
    background-color: rgba(1, 13, 26, 0.6);
}

.progress {
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
}

.progress-bar {
    color: #ffffff;
    background-color: var(--hx-primary-lo);
}

/* ==========================================================================
   19. Client area design layer (logged-in pages only: body.hx-app)

   Built from hostenix.com components:
     card surface   .hplan / .specs__panel  linear-gradient(180deg, #03172f, #020e1d)
     tinted panel   .pricing__card          radial blue tint + deep navy gradient
     top hairline   .plans__shared::before
     hover          border rgba(30,143,255,.4) + 0 0 60px -30px blue glow
     labels         0.6875–0.75rem / 700 / 0.12–0.16em / uppercase / muted
     numbers        800 weight, -0.04em tracking
     icon tiles     .cprow__icon / .spec__icon (navy gradient, soft blue ring)
     lists          dividers between rows (.feature + .feature), not boxes

   Everything here is scoped to `.hx-app`, so the authentication shell
   (body.hx-auth-page) is unaffected. `!important` is used only where
   theme.css / Bootstrap utilities / admin Custom CSS would otherwise win
   (canvas, alerts, light utility fills, list-group states, stat-card padding).
   Rules are wrapped in @media screen so print (section 23) stays white.
   ========================================================================== */
@media screen {

    /* ---- 19.1 Canvas ---------------------------------------------------- */
    html:root {
        background-color: var(--hx-bg) !important;
    }

    html body.hx-app {
        color: var(--hx-text-body);
        background-color: var(--hx-bg) !important;
        background-image: radial-gradient(1200px 520px at 10% -14%, rgba(1, 81, 204, 0.18), transparent 62%) !important;
        background-repeat: no-repeat !important;
    }

    .hx-app .hx-content,
    .hx-app .hx-content > .row,
    .hx-app .title,
    .hx-app .title .container-md {
        background: transparent !important;
    }

    /* Site container width (75rem) on large screens */
    @media (min-width: 1200px) {
        .hx-app .container-md {
            max-width: 1260px;
        }
    }

    /* Wider, consistent gutters (application.css uses 10px) */
    .hx-app .hx-content .row {
        margin-left: calc(var(--hx-gutter) * -1);
        margin-right: calc(var(--hx-gutter) * -1);
    }

    .hx-app .hx-content [class*="col-"] {
        padding-left: var(--hx-gutter);
        padding-right: var(--hx-gutter);
    }

    /* ---- 19.2 Page title ------------------------------------------------ */
    .hx-app .title {
        margin-bottom: 2rem;
        padding: 2.75rem 0 0;
    }

    .hx-app .title h3 {
        color: var(--hx-text) !important;
        font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.375rem);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.03em;
    }

    /* ---- 19.3 Base card surface (all logged-in cards/panels) ------------- */
    .hx-app .card,
    .hx-app .panel {
        color: var(--hx-text-body);
        background: var(--hx-card-bg);
        border: 1px solid var(--hx-line);
        border-radius: var(--hx-radius-lg);
        box-shadow: var(--hx-card-depth);
    }

    /* Cards nested inside cards (totals, invoice address boxes, …): quiet insets */
    .hx-app .card .card,
    .hx-app .panel .card,
    .hx-app .card .panel {
        background: rgba(255, 255, 255, 0.025);
        border-color: var(--hx-divider);
        border-radius: var(--hx-radius-md);
        box-shadow: none;
    }

    /* ---- 19.4 Widgets (WidgetClient: .card.card-blesta) ------------------
       Header and body read as ONE card: no header strip, no divider, one
       surface, top hairline accent. */
    /* Surface, hairline, radius and depth are forced so generic card rules
       (theme.css / admin Custom CSS) can't re-outline widgets (1.3.1).
       The account column (#my-info) flattens its own cards with ID specificity. */
    .hx-app .card-blesta {
        position: relative;
        margin-bottom: 2rem;
        overflow: visible;
        background: var(--hx-card-bg) !important;
        border: 1px solid var(--hx-line) !important;
        border-radius: var(--hx-radius-lg) !important;
        box-shadow: var(--hx-card-depth) !important;
    }

    /* No rectangles inside a widget: sections are separated by spacing only */
    .hx-app .card-blesta .card-header,
    .hx-app .card-blesta .card-body,
    .hx-app .card-blesta .card-footer,
    .hx-app .card-blesta .panel-heading,
    .hx-app .card-blesta .panel-body,
    .hx-app .card-blesta .panel-footer {
        border: 0 !important;
    }

    .hx-app .card-blesta .card,
    .hx-app .card-blesta .panel,
    .hx-app .card-blesta .well {
        background: rgba(255, 255, 255, 0.025) !important;
        border: 0 !important;
        border-radius: var(--hx-radius-md) !important;
        box-shadow: none !important;
    }

    .hx-app .card-blesta .table > thead > tr > th {
        border-bottom-color: var(--hx-divider);
    }

    .hx-app .card-blesta::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(92, 176, 255, 0.5), transparent);
        pointer-events: none;
    }

    .hx-app .card-blesta > .card-header,
    .hx-app .panel .card-blesta > .panel-heading {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem 1rem;
        padding: 1.6rem 1.75rem 0.6rem;
        color: var(--hx-text) !important;
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        background: transparent !important;
        border: 0 !important;
    }

    .hx-app .card-blesta > .card-header::after {
        content: none;
    }

    .hx-app .card-blesta > .card-header h1,
    .hx-app .card-blesta > .card-header h2,
    .hx-app .card-blesta > .card-header h3,
    .hx-app .card-blesta > .card-header h4,
    .hx-app .card-blesta > .card-header h5 {
        font-size: 1.0625rem;
        letter-spacing: -0.01em;
    }

    .hx-app .card-blesta > .card-header > [class*="float-"] {
        float: none !important;
    }

    .hx-app .card-blesta > .card-body {
        padding: 0.85rem 1.75rem 1.75rem;
    }

    .hx-app .card-blesta > .card-footer {
        padding: 0.25rem 1.75rem 1.5rem;
        background: transparent !important;
    }

    /* Widget sub-navigation (Open / Closed, Active / Pending, …): soft segmented tabs */
    .hx-app .card-nav,
    .hx-app .panel-nav {
        margin: 0 0 1rem;
    }

    .hx-app .card-links,
    .hx-app .panel-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        margin: 0 0 1rem;
        padding: 0;
        font-size: 0.8125rem;
    }

    .hx-app .card-nav .card-links,
    .hx-app .panel-nav .panel-links {
        margin: 0;
    }

    .hx-app .card-links > li,
    .hx-app .panel-links > li {
        display: block;
        color: var(--hx-text-muted);
    }

    .hx-app .card-links > li + li:before,
    .hx-app .panel-links > li + li:before {
        content: none;
    }

    .hx-app .card-links > li > a,
    .hx-app .panel-links > li > a {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.4rem 0.8rem;
        color: var(--hx-text-muted);
        font-weight: 600;
        text-decoration: none;
        border-radius: var(--hx-radius);
        transition: color 0.2s var(--hx-ease), background-color 0.2s var(--hx-ease);
    }

    .hx-app .card-links > li > a:hover,
    .hx-app .card-links > li > a:focus,
    .hx-app .panel-links > li > a:hover {
        color: var(--hx-text);
        background: rgba(255, 255, 255, 0.04);
    }

    .hx-app .card-links > li.active > a,
    .hx-app .card-links > .active a,
    .hx-app .panel-links > li.active > a {
        color: var(--hx-text);
        background: rgba(11, 139, 254, 0.14);
    }

    .hx-app .card-links .badge,
    .hx-app .panel-links .badge,
    .hx-app .card-links .label,
    .hx-app .panel-links .label {
        min-width: 1.4rem;
        padding: 0.15rem 0.45rem;
        color: var(--hx-text-body);
        font-size: 0.6875rem;
        font-weight: 700;
        line-height: 1.3;
        background-color: rgba(255, 255, 255, 0.07);
        border-radius: 999px;
    }

    .hx-app .card-links > li.active .badge,
    .hx-app .card-links > .active .badge {
        color: #ffffff;
        background-color: rgba(11, 139, 254, 0.45);
    }

    /* Filters panel (WidgetClient::buildFilters): a quiet inset */
    .hx-app form.widget_filter_form {
        margin: 0 0 1.25rem;
        padding: 1rem 1rem 0.25rem;
        background: rgba(255, 255, 255, 0.025);
        border: 0;
        border-radius: var(--hx-radius-md);
    }

    /* Tables run edge to edge inside widgets so they feel part of the card */
    .hx-app .card-blesta > .card-body > .table-responsive,
    .hx-app .card-blesta > .card-body > form > .table-responsive {
        width: calc(100% + 3.5rem);
        margin-left: -1.75rem;
        margin-right: -1.75rem;
    }

    .hx-app .card-blesta > .card-body > .table-responsive > .table > * > tr > :first-child,
    .hx-app .card-blesta > .card-body > form > .table-responsive > .table > * > tr > :first-child {
        padding-left: 1.75rem;
    }

    .hx-app .card-blesta > .card-body > .table-responsive > .table > * > tr > :last-child,
    .hx-app .card-blesta > .card-body > form > .table-responsive > .table > * > tr > :last-child {
        padding-right: 1.75rem;
    }

    .hx-app .card-blesta > .card-body > .table-responsive:last-child {
        margin-bottom: -1rem;
    }

    /* Empty states ("There are no invoices …"): calm dashed placeholder */
    .hx-app .card-blesta .card-body > .alert-info:not(.w-100),
    .hx-app .card-blesta .card-body > div > .alert-info:not(.w-100) {
        margin: 0.25rem 0 0;
        padding: 1.75rem 1rem;
        color: var(--hx-text-muted) !important;
        text-align: center;
        background: rgba(255, 255, 255, 0.015) !important;
        border: 1px dashed var(--hx-line) !important;
        border-radius: var(--hx-radius-md);
        box-shadow: none;
    }

    /* Pagination inside widgets */
    .hx-app .card-blesta .pagination {
        margin-top: 1.25rem;
        margin-bottom: 0;
    }

    /* ---- 19.5 Dashboard metric cards (client_main_card.pdt) --------------
       Markup:  .row.cards > .col-md-N > [a] > .card[style] > .card-content >
                .card-value + .card-label
       Blesta writes each card's colors INLINE as
           style="background: #xxx !important; color: #yyy !important"
       which no stylesheet can override. So:
         - the card has NO border/shadow of its own (border: 0),
         - `isolation: isolate` + `::before { z-index:-1 }` paints the Hostenix
           surface and hairline OVER the inline background,
         - `clip-path` trims the card's outer 1px ring so no anti-aliased edge
           pixel of the inline colour can show (see note on .cards .card),
         - shadow and hover lift live on the grid column instead,
         - value/label colors are set directly, beating the inherited color. */
    .hx-app .row.cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        margin: 0 0 2rem;
    }

    .hx-app .row.cards > [class*="col-"] {
        width: auto;
        max-width: none;
        flex: none;
        padding: 0;
    }

    .hx-app .row.cards > [class*="col-"] > a {
        display: block;
        height: 100%;
        color: inherit;
        text-decoration: none;
        border-radius: var(--hx-radius-lg);
    }

    .hx-app .row.cards > [class*="col-"] > a:focus {
        outline: none;
    }

    .hx-app .row.cards > [class*="col-"] > a:focus-visible {
        outline: 2px solid var(--hx-accent-text);
        outline-offset: 3px;
    }

    /* The column carries the depth (shadow, hover lift/glow) because the card
       itself is clipped below, and clip-path would also clip its own shadow. */
    .hx-app .row.cards > [class*="col-"] {
        border-radius: var(--hx-radius-lg);
        box-shadow: var(--hx-card-shadow);
        transition: transform 0.25s var(--hx-ease), box-shadow 0.25s var(--hx-ease);
    }

    .hx-app .row.cards > [class*="col-"]:has(> a:hover),
    .hx-app .row.cards > [class*="col-"]:has(> a:focus-visible) {
        transform: translateY(-3px);
        box-shadow: var(--hx-card-shadow), var(--hx-card-glow);
    }

    /* 1.3.1: covering the inline colour with an overlay alone left an
       anti-aliased fringe of it at the rounded edges (the overlay and the
       inline background are rasterised separately, and on separate layers
       while the hover transform runs). clip-path removes the card's outermost
       1px ring, the only place the inline colour could appear, and the
       ::before surface fills everything that remains, so nothing leaks. */
    .hx-app .cards .card {
        position: relative;
        isolation: isolate;
        display: flex;
        align-items: flex-end;
        height: 100%;
        min-height: 8.25rem;
        margin: 0;
        padding: 1.35rem 1.4rem !important; /* application.css: `.cards .card { padding: 1rem !important }` */
        font-family: var(--hx-font);
        border: 0;
        border-radius: var(--hx-radius-lg);
        box-shadow: none;
        overflow: visible;
        -webkit-clip-path: inset(1px round calc(var(--hx-radius-lg) - 1px));
        clip-path: inset(1px round calc(var(--hx-radius-lg) - 1px));
    }

    .hx-app .cards .card::before {
        content: "";
        position: absolute;
        inset: -2px;
        z-index: -1;
        /* concentric with the clip (16px box, 1px clip inset → 15px; 2px outset → 18px),
           so the surface contains the visible area at the corners too */
        border-radius: calc(var(--hx-radius-lg) + 2px);
        background:
            radial-gradient(130% 110% at 100% 0%, rgba(11, 90, 224, 0.16), transparent 55%),
            linear-gradient(180deg, #03172f 0%, #020e1d 100%);
        /* hairline: the outer 3px are clipped, so a 4px inset ring shows as 1px */
        box-shadow: inset 0 0 0 4px var(--hx-line);
        transition: box-shadow 0.25s var(--hx-ease);
    }

    .hx-app .cards .card::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 18%;
        right: 18%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(92, 176, 255, 0.55), transparent);
        opacity: 0.6;
        pointer-events: none;
        transition: opacity 0.25s var(--hx-ease);
    }

    .hx-app .cards a:hover .card::before,
    .hx-app .cards a:focus-visible .card::before {
        box-shadow: inset 0 0 0 4px rgba(30, 143, 255, 0.4);
    }

    .hx-app .cards a:hover .card::after,
    .hx-app .cards a:focus-visible .card::after {
        opacity: 1;
    }

    /* Label on top, big number below (markup order is value → label) */
    .hx-app .cards .card .card-content {
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        gap: 0.85rem;
        width: 100%;
    }

    .hx-app .cards .card .card-content .card-value {
        margin: 0;
        color: var(--hx-text);
        font-size: clamp(2rem, 1.7rem + 0.9vw, 2.625rem);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.04em;
        font-variant-numeric: tabular-nums;
    }

    .hx-app .cards .card .card-content .card-label {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        color: var(--hx-text-muted);
        font-size: 0.6875rem;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        transition: color 0.2s var(--hx-ease);
    }

    /* Restrained blue detail: a small glowing dot before every label */
    .hx-app .cards .card .card-content .card-label::before {
        content: "";
        flex: none;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--hx-primary);
        box-shadow: 0 0 8px rgba(11, 139, 254, 0.8);
    }

    .hx-app .cards a:hover .card .card-label,
    .hx-app .cards a:focus-visible .card .card-label {
        color: var(--hx-text);
    }

    /* Grid: mobile 2-up (odd last card spans) · 576–991px 3-up with the last
       row stretched to fill · ≥992px all cards on ONE row (≤6 cards). */
    @media (max-width: 575.98px) {
        .hx-app .row.cards > [class*="col-"]:last-child:nth-child(odd) {
            grid-column: 1 / -1;
        }
    }

    @media (min-width: 576px) and (max-width: 991.98px) {
        .hx-app .row.cards {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }

        .hx-app .row.cards > [class*="col-"] {
            grid-column: span 2;
        }

        /* last row of 2 → two halves */
        .hx-app .row.cards > [class*="col-"]:nth-last-child(2):nth-child(3n+1),
        .hx-app .row.cards > [class*="col-"]:last-child:nth-child(3n+2) {
            grid-column: span 3;
        }

        /* last row of 1 → full width */
        .hx-app .row.cards > [class*="col-"]:last-child:nth-child(3n+1) {
            grid-column: 1 / -1;
        }
    }

    @media (min-width: 992px) {
        .hx-app .row.cards {
            grid-template-columns: none;
            grid-auto-flow: column;
            grid-auto-columns: minmax(0, 1fr);
        }

        /* More than six cards: wrap instead of squeezing */
        .hx-app .row.cards:has(> [class*="col-"]:nth-child(7)) {
            grid-auto-flow: row;
            grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
        }

        .hx-app .cards .card {
            min-height: 8.75rem;
        }
    }

    @media (min-width: 992px) and (max-width: 1199.98px) {
        .hx-app .cards .card {
            padding: 1.2rem 1.1rem !important;
        }

        .hx-app .cards .card .card-content .card-label {
            letter-spacing: 0.1em;
        }
    }

    /* ---- 19.6 Account column (client_main_myinfo.pdt: #my-info) ----------
       One account card: the column draws a single tinted surface (::before)
       and the stock cards/lists inside become sections separated by hairline
       dividers. Markup and JS hooks (#managed_accounts, .amounts) untouched. */
    .hx-app #my-info {
        position: relative;
        isolation: isolate;
        align-self: flex-start;
        margin-bottom: 2rem;
        padding-bottom: 0.5rem;
    }

    .hx-app #my-info::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: var(--hx-gutter);
        right: var(--hx-gutter);
        z-index: -1;
        background: var(--hx-card-bg-tint);
        border: 1px solid var(--hx-line);
        border-radius: var(--hx-radius-lg);
        box-shadow: var(--hx-card-depth);
    }

    .hx-app #my-info::after {
        content: "";
        position: absolute;
        top: 0;
        left: calc(var(--hx-gutter) + 15%);
        right: calc(var(--hx-gutter) + 15%);
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(92, 176, 255, 0.55), transparent);
        pointer-events: none;
    }

    /* Sections: every stock surface inside the column is flattened so only the
       ONE account surface (#my-info::before) is visible. Forced with !important
       because generic card/list rules from theme.css or admin Custom CSS would
       otherwise re-box each section (1.3.1). */
    .hx-app #my-info > .card {
        position: relative;
        margin: 0;
        overflow: visible;
    }

    .hx-app #my-info .card,
    .hx-app #my-info .card-header,
    .hx-app #my-info .card-body,
    .hx-app #my-info .card-footer,
    .hx-app #my-info .list-group,
    .hx-app #my-info .list-group-item {
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .hx-app #my-info > .card::before {
        content: none;
    }

    /* Inset hairline dividers between sections (not edge to edge) */
    .hx-app #my-info > .list-options,
    .hx-app #my-info .amounts > .list-group {
        position: relative;
    }

    .hx-app #my-info > .card + .card::before,
    .hx-app #my-info > .list-options:has(> .list-group-item)::before,
    .hx-app #my-info .amounts > .list-group::before,
    .hx-app #my-info > .list-group.list-options > .list-group-item + .list-group-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 1.5rem;
        right: 1.5rem;
        height: 1px;
        background: var(--hx-divider);
        pointer-events: none;
    }

    /* Section eyebrows ("Client #1500", "Contacts", …) */
    .hx-app #my-info > .card > .card-header {
        display: block;
        padding: 1.4rem 1.5rem 0.35rem;
        color: var(--hx-text-subtle) !important;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        background: transparent !important;
        border: 0 !important;
    }

    .hx-app #my-info > .card:first-child > .card-header {
        padding-top: 1.6rem;
        color: var(--hx-accent-text) !important;
    }

    .hx-app #my-info > .card > .card-body {
        padding: 0.4rem 1.5rem 1rem;
    }

    .hx-app #my-info > .card > .card-footer {
        padding: 0 1.5rem 1.4rem !important;
        background: transparent !important;
        border: 0 !important;
    }

    /* Profile block */
    .hx-app #my-info address {
        margin: 0;
        color: var(--hx-text-muted);
        font-size: 0.875rem;
        line-height: 1.65;
        overflow-wrap: anywhere;
    }

    .hx-app #my-info address > strong {
        display: inline-block;
        margin-bottom: 0.3rem;
        color: var(--hx-text);
        font-size: 1.1875rem;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: -0.015em;
    }

    .hx-app #my-info address hr {
        margin: 0.9rem 0;
        border-top-color: var(--hx-divider);
    }

    .hx-app #my-info address a {
        color: var(--hx-accent-text);
        font-weight: 600;
    }

    /* Understated section actions ("Change", "Add Contact"): soft ghost
       buttons, no outline, so they don't read as more boxes */
    .hx-app #my-info .card-footer .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        width: auto;
        padding: 0.45rem 0.9rem;
        font-size: 0.8125rem;
    }

    .hx-app #my-info .btn {
        color: var(--hx-text) !important;
        background-color: rgba(255, 255, 255, 0.045) !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    .hx-app #my-info .btn:hover,
    .hx-app #my-info .btn:focus,
    .hx-app #my-info .btn.active {
        color: var(--hx-text) !important;
        background-color: rgba(11, 139, 254, 0.14) !important;
        border-color: transparent !important;
    }

    .hx-app #my-info .card-footer .btn i {
        color: var(--hx-accent-soft);
        font-size: 0.8em;
    }

    /* Contacts / managed accounts lists */
    .hx-app #my-info .list-group {
        margin: 0;
        border-radius: 0;
    }

    .hx-app #my-info > .card .list-group-item {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.5rem 1.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        background: transparent;
        border: 0;
    }

    .hx-app #my-info > .card .list-group-item > i:first-child {
        display: inline-grid;
        flex: none;
        place-items: center;
        width: 30px;
        height: 30px;
        color: var(--hx-accent-soft);
        font-size: 0.75rem;
        background: rgba(11, 139, 254, 0.1);
        border-radius: 9px;
    }

    .hx-app #my-info > .card .list-group-item:first-child {
        margin-top: 0.25rem;
    }

    .hx-app #my-info > .card .list-group + .card-footer {
        padding-top: 0.75rem !important;
    }

    /* Empty state inside the account card: plain muted text, no box */
    .hx-app #my-info .alert {
        margin: 0;
        padding: 0 !important;
        color: var(--hx-text-subtle) !important;
        font-size: 0.875rem;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .hx-app #my-info .alert::before {
        content: none !important;
    }

    .hx-app #my-info #managed_accounts .card-footer {
        padding: 0.25rem 1.5rem 1rem !important;
    }

    /* Billing preferences (invoice delivery / auto-debit) */
    .hx-app #my-info > .list-group.list-options {
        margin: 0 !important; /* .mb-3 is !important */
        border: 0;
        border-radius: 0;
    }

    .hx-app #my-info > .list-group.list-options > .list-group-item {
        padding: 1rem 1.5rem !important; /* application.css forces 1rem top/bottom with !important */
        color: var(--hx-text-body);
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    .hx-app #my-info .list-group-item-text {
        margin: 0;
        padding-right: 1.75rem;
        color: var(--hx-text-muted);
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    .hx-app #my-info > .list-options .list-group-item > i {
        margin-top: 0.15rem;
        color: var(--hx-accent-soft);
        font-size: 1rem;
    }

    /* Account credit (client_main_getcurrencyamounts.pdt, loaded into .amounts) */
    .hx-app #my-info .amounts > .list-group {
        margin: 0;
        padding: 0.75rem 0 0.25rem;
        border: 0;
        border-radius: 0;
    }

    .hx-app #my-info .amounts .list-group-item {
        padding: 0.45rem 1.5rem !important;
        color: var(--hx-text-muted) !important;
        font-size: 0.875rem;
        background: transparent !important; /* .bg-light is !important */
        border: 0;
        border-radius: 0;
    }

    .hx-app #my-info .amounts .list-group-item.credits {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.25rem 0.75rem;
    }

    .hx-app #my-info .amounts .list-group-item.credits .currency_value {
        color: var(--hx-text);
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        font-variant-numeric: tabular-nums;
    }

    /* Currency switcher row */
    .hx-app #my-info .amounts .list-group-item.credits .btn {
        padding: 0.2rem 0.6rem;
        font-size: 0.75rem;
    }

    .hx-app #my-info .amounts a.list-group-item {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        margin: 0.35rem 0 0.75rem;
        color: var(--hx-accent-text) !important;
        font-weight: 600;
    }

    .hx-app #my-info .amounts a.list-group-item:hover,
    .hx-app #my-info .amounts a.list-group-item:focus {
        color: var(--hx-accent-soft) !important;
        background: transparent !important;
    }

    .hx-app #my-info .list-group-item-action:hover,
    .hx-app #my-info .list-group-item-action:focus,
    .hx-app #my-info > .list-options > a.list-group-item:hover,
    .hx-app #my-info > .list-options > a.list-group-item:focus {
        color: var(--hx-text);
        background-color: rgba(255, 255, 255, 0.03) !important;
    }

    /* ---- 19.7 Secondary navigation (structure.pdt col-md-3 list-group and
       the *_navigation.pdt menus): soft menu on one surface ---------------- */
    .hx-app .hx-content .col-md-3 > .list-group:not(.list-options) {
        margin-bottom: 1.75rem;
        padding: 0.5rem;
        background: var(--hx-card-bg);
        border: 1px solid var(--hx-line);
        border-radius: var(--hx-radius-lg);
        box-shadow: var(--hx-card-shadow);
    }

    .hx-app .hx-content .col-md-3 > .list-group:not(.list-options) > .list-group-item {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        margin: 0 0 2px;
        padding: 0.65rem 0.85rem;
        color: var(--hx-text-body);
        font-size: 0.875rem;
        font-weight: 500;
        background: transparent;
        border: 0;
        border-radius: 10px;
    }

    .hx-app .hx-content .col-md-3 > .list-group:not(.list-options) > .list-group-item:last-child {
        margin-bottom: 0;
    }

    .hx-app .hx-content .col-md-3 > .list-group:not(.list-options) > .list-group-item.active {
        color: var(--hx-text);
        background-color: rgba(11, 139, 254, 0.14) !important;
        box-shadow: inset 0 0 0 1px rgba(30, 143, 255, 0.28);
    }

    .hx-app .hx-content .col-md-3 > .list-group:not(.list-options) > .list-group-item.active i {
        color: var(--hx-text);
    }

    /* ---- 19.8 Notifications (alerts) --------------------------------------
       Dark surface with a faint semantic wash, soft semantic border, light
       text. Blesta flash messages (message.pdt → `.alert.w-100`) also get a
       status icon tile. `!important` beats theme.css / admin Custom CSS. */
    .hx-app .alert {
        position: relative;
        margin-bottom: 1.25rem;
        padding: 0.9rem 1.1rem;
        color: var(--hx-text-body) !important;
        font-size: 0.9rem;
        line-height: 1.55;
        border: 1px solid;
        border-radius: var(--hx-radius-md);
        box-shadow: none;
    }

    .hx-app .alert strong,
    .hx-app .alert b,
    .hx-app .alert h4,
    .hx-app .alert h5 {
        color: var(--hx-text) !important;
        font-weight: 700;
    }

    .hx-app .alert a:not(.btn) {
        color: var(--hx-text) !important;
        text-decoration-color: rgba(255, 255, 255, 0.35);
        text-underline-offset: 3px;
    }

    .hx-app .alert-warning {
        background: linear-gradient(90deg, rgba(242, 179, 61, 0.09), rgba(242, 179, 61, 0.02) 70%), var(--hx-card-bg) !important;
        border-color: rgba(242, 179, 61, 0.24) !important;
    }

    .hx-app .alert-danger {
        background: linear-gradient(90deg, rgba(239, 83, 80, 0.09), rgba(239, 83, 80, 0.02) 70%), var(--hx-card-bg) !important;
        border-color: rgba(239, 83, 80, 0.26) !important;
    }

    .hx-app .alert-success {
        background: linear-gradient(90deg, rgba(52, 199, 123, 0.08), rgba(52, 199, 123, 0.02) 70%), var(--hx-card-bg) !important;
        border-color: rgba(52, 199, 123, 0.24) !important;
    }

    .hx-app .alert-info,
    .hx-app .alert-primary {
        background: linear-gradient(90deg, rgba(11, 139, 254, 0.08), rgba(11, 139, 254, 0.02) 70%), var(--hx-card-bg) !important;
        border-color: rgba(30, 143, 255, 0.22) !important;
    }

    .hx-app .alert-secondary,
    .hx-app .alert-light,
    .hx-app .alert-dark {
        background: var(--hx-card-bg) !important;
        border-color: var(--hx-line) !important;
    }

    .hx-app .alert .close {
        position: absolute;
        top: 0.8rem;
        right: 0.9rem;
        margin: 0;
        padding: 0.15rem 0.35rem;
        color: var(--hx-text-muted);
        font-size: 1.25rem;
        line-height: 1;
        opacity: 0.8;
        border-radius: var(--hx-radius-sm);
    }

    .hx-app .alert .close:hover,
    .hx-app .alert .close:focus {
        color: var(--hx-text);
        opacity: 1;
    }

    /* Flash messages: notification layout with icon tile */
    .hx-app .alert.w-100 {
        margin-bottom: 1.75rem;
        padding: 1.1rem 3rem 1.1rem 4.1rem;
        border-radius: var(--hx-radius-lg);
        box-shadow: var(--hx-card-shadow);
    }

    .hx-app .alert.w-100::before {
        position: absolute;
        top: 1rem;
        left: 1.1rem;
        display: grid;
        place-items: center;
        width: 2.1rem;
        height: 2.1rem;
        font-family: "Font Awesome 5 Free";
        font-size: 0.875rem;
        font-weight: 900;
        line-height: 1;
        border-radius: 10px;
    }

    .hx-app .alert-warning.w-100::before {
        content: "\f071"; /* exclamation-triangle */
        color: var(--hx-warn);
        background: rgba(242, 179, 61, 0.12);
        box-shadow: inset 0 0 0 1px rgba(242, 179, 61, 0.3);
    }

    .hx-app .alert-danger.w-100::before {
        content: "\f06a"; /* exclamation-circle */
        color: var(--hx-down);
        background: rgba(239, 83, 80, 0.12);
        box-shadow: inset 0 0 0 1px rgba(239, 83, 80, 0.3);
    }

    .hx-app .alert-success.w-100::before {
        content: "\f00c"; /* check */
        color: var(--hx-ok);
        background: rgba(52, 199, 123, 0.12);
        box-shadow: inset 0 0 0 1px rgba(52, 199, 123, 0.3);
    }

    .hx-app .alert-info.w-100::before {
        content: "\f129"; /* info */
        color: var(--hx-accent-soft);
        background: rgba(11, 139, 254, 0.12);
        box-shadow: inset 0 0 0 1px rgba(30, 143, 255, 0.3);
    }

    .hx-app .alert.w-100 > strong:first-of-type {
        display: inline-block;
        margin-bottom: 0.15rem;
        font-size: 0.9688rem;
    }

    .hx-app .alert p {
        margin: 0;
    }

    .hx-app .alert p:has(> .btn) {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.85rem;
    }

    /* Restrained buttons inside notifications (message.pdt uses .btn-{type}) */
    .hx-app .alert .btn {
        padding: 0.45rem 0.9rem;
        font-size: 0.8125rem;
        box-shadow: none;
    }

    .hx-app .alert .btn-warning {
        color: var(--hx-warn-text) !important;
        background-color: rgba(242, 179, 61, 0.12) !important;
        border-color: rgba(242, 179, 61, 0.4) !important;
    }

    .hx-app .alert .btn-warning:hover,
    .hx-app .alert .btn-warning:focus {
        color: #1d1300 !important;
        background-color: var(--hx-warn) !important;
        border-color: var(--hx-warn) !important;
    }

    .hx-app .alert .btn-danger {
        color: var(--hx-down-text) !important;
        background-color: rgba(239, 83, 80, 0.12) !important;
        border-color: rgba(239, 83, 80, 0.4) !important;
    }

    .hx-app .alert .btn-danger:hover,
    .hx-app .alert .btn-danger:focus {
        color: #ffffff !important;
        background-color: var(--hx-danger-solid) !important;
        border-color: var(--hx-danger-solid) !important;
    }

    .hx-app .alert .btn-info {
        color: var(--hx-info-text) !important;
        background-color: rgba(11, 139, 254, 0.12) !important;
        border-color: rgba(30, 143, 255, 0.4) !important;
    }

    /* message.pdt falls back to a generic warning glyph on every button */
    .hx-app .alert.w-100 .btn .fa-exclamation-triangle {
        display: none;
    }

    /* ---- 19.9 Buttons (logged-in refinements) --------------------------- */
    .hx-app .btn {
        padding: 0.55rem 1.05rem;
        line-height: 1.35;
        border-radius: var(--hx-radius);
    }

    .hx-app .btn-sm,
    .hx-app .btn-group-sm > .btn {
        padding: 0.42rem 0.8rem;
        font-size: 0.8125rem;
        border-radius: var(--hx-radius);
    }

    .hx-app .btn-xs,
    .hx-app .btn-group-xs > .btn {
        padding: 0.32rem 0.65rem;
        font-size: 0.75rem;
        line-height: 1.4;
        border-radius: 7px;
    }

    /* Secondary: dark translucent with a low-contrast border */
    .hx-app .btn-light,
    .hx-app .btn-default,
    .hx-app .btn-secondary,
    .hx-app .btn-outline-secondary,
    .hx-app .btn-outline-light,
    .hx-app .btn-outline-dark {
        color: var(--hx-text) !important;
        background-color: rgba(255, 255, 255, 0.035) !important;
        border-color: var(--hx-line-strong) !important;
    }

    .hx-app .btn-light:hover,
    .hx-app .btn-light:focus,
    .hx-app .btn-default:hover,
    .hx-app .btn-default:focus,
    .hx-app .btn-secondary:hover,
    .hx-app .btn-secondary:focus,
    .hx-app .btn-outline-secondary:hover,
    .hx-app .btn-outline-light:hover,
    .hx-app .btn-outline-dark:hover,
    .hx-app .btn-light:not(:disabled):not(.disabled):active,
    .hx-app .btn-light:not(:disabled):not(.disabled).active,
    .hx-app .show > .btn-light.dropdown-toggle {
        color: var(--hx-text) !important;
        background-color: rgba(11, 139, 254, 0.1) !important;
        border-color: rgba(30, 143, 255, 0.45) !important;
    }

    .hx-app .btn i {
        opacity: 0.9;
    }

    .hx-app .btn-light i,
    .hx-app .btn-default i,
    .hx-app .btn-secondary i {
        color: var(--hx-accent-soft);
    }

    /* Small primaries (Pay, Make Payment) keep the brand gradient with less glow */
    .hx-app .btn-sm.btn-primary,
    .hx-app .btn-sm.btn-success,
    .hx-app .btn-xs.btn-primary,
    .hx-app .btn-xs.btn-success {
        box-shadow: 0 6px 18px -8px rgba(11, 139, 254, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }

    .hx-app .btn-primary i,
    .hx-app .btn-success i {
        color: inherit;
    }

    /* ---- 19.10 Forms (logged-in refinements) ---------------------------- */
    .hx-app .form-control,
    .hx-app .custom-select {
        background-color: rgba(1, 13, 26, 0.55);
        border-color: var(--hx-line-strong);
    }

    .hx-app .form-control:focus,
    .hx-app .custom-select:focus {
        background-color: rgba(1, 13, 26, 0.75);
        border-color: var(--hx-primary);
    }

    .hx-app .input-group-text {
        background-color: rgba(255, 255, 255, 0.04);
        border-color: var(--hx-line-strong);
    }

    .hx-app label {
        color: var(--hx-text-muted);
        font-weight: 600;
    }

    /* ---- 19.11 Tabs / pagination / badges ------------------------------- */
    .hx-app .nav-tabs {
        gap: 0.25rem;
        border-bottom: 1px solid var(--hx-divider);
    }

    .hx-app .nav-tabs .nav-link,
    .hx-app .nav-tabs > li > a {
        padding: 0.7rem 1rem;
        color: var(--hx-text-muted);
        font-weight: 600;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: inset 0 -2px 0 transparent;
    }

    .hx-app .nav-tabs .nav-link:hover,
    .hx-app .nav-tabs > li > a:hover {
        color: var(--hx-text);
        background: transparent;
    }

    .hx-app .nav-tabs .nav-link.active,
    .hx-app .nav-tabs .nav-item.show .nav-link,
    .hx-app .nav-tabs > li.active > a,
    .hx-app .nav-tabs > li.active > a:hover,
    .hx-app .nav-tabs > li.active > a:focus {
        color: var(--hx-text);
        background: transparent;
        box-shadow: inset 0 -2px 0 var(--hx-primary);
    }

    .hx-app .pagination {
        gap: 0.3rem;
    }

    .hx-app .page-link,
    .hx-app div.pagination ul.pagination li a {
        min-width: 2.25rem;
        padding: 0.45rem 0.7rem;
        text-align: center;
        background-color: transparent;
        border: 0;
        border-radius: var(--hx-radius) !important;
    }

    .hx-app .badge {
        padding: 0.3em 0.65em;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.01em;
    }

    /* ---- 19.12 Dropdowns / modals --------------------------------------- */
    .hx-app .dropdown-menu {
        padding: 0.4rem;
        background-color: rgba(4, 18, 36, 0.98);
        border: 0;
        border-radius: var(--hx-radius-md);
        box-shadow: var(--hx-shadow-pop);
    }

    .hx-app .modal-content {
        background: var(--hx-card-bg);
        border: 1px solid var(--hx-line-strong);
        border-radius: var(--hx-radius-lg);
    }

    .hx-app .modal-header,
    .hx-app .modal-footer {
        padding: 1.1rem 1.5rem;
        border-color: var(--hx-divider);
    }

    .hx-app .modal-body {
        padding: 1.25rem 1.5rem;
    }

    /* ---- 19.13 Light stock surfaces → Hostenix surfaces -----------------
       theme.css / Bootstrap set these with !important. */
    .hx-app .bg-light,
    .hx-app .bg-white,
    .hx-app .well,
    .hx-app .jumbotron {
        color: var(--hx-text-body);
        background-color: rgba(255, 255, 255, 0.025) !important;
    }

    .hx-app .well,
    .hx-app .jumbotron {
        border: 1px solid var(--hx-divider);
        border-radius: var(--hx-radius-md);
    }

    .hx-app .table-light,
    .hx-app .table-light > td,
    .hx-app .table-light > th,
    .hx-app .thead-light th,
    .hx-app .table .thead-light th {
        color: var(--hx-text-subtle);
        background-color: transparent !important;
        border-color: var(--hx-line) !important;
    }

    /* Semantic fills → tints (status only; never big bright blocks) */
    .hx-app .bg-success:not(.progress-bar):not(.badge) {
        background-color: rgba(52, 199, 123, 0.12) !important;
    }

    .hx-app .bg-warning:not(.progress-bar):not(.badge) {
        background-color: rgba(242, 179, 61, 0.12) !important;
    }

    .hx-app .bg-danger:not(.progress-bar):not(.badge) {
        background-color: rgba(239, 83, 80, 0.12) !important;
    }

    .hx-app .bg-info:not(.progress-bar):not(.badge),
    .hx-app .bg-primary:not(.progress-bar):not(.badge) {
        background-color: rgba(11, 139, 254, 0.12) !important;
    }

    .hx-app .bg-secondary:not(.progress-bar):not(.badge) {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }

    /* Bootstrap contextual table rows (pastel by default) */
    .hx-app .table-success,
    .hx-app .table-success > td,
    .hx-app .table-success > th {
        background-color: rgba(52, 199, 123, 0.08) !important;
    }

    .hx-app .table-warning,
    .hx-app .table-warning > td,
    .hx-app .table-warning > th {
        background-color: rgba(242, 179, 61, 0.08) !important;
    }

    .hx-app .table-danger,
    .hx-app .table-danger > td,
    .hx-app .table-danger > th {
        background-color: rgba(239, 83, 80, 0.08) !important;
    }

    .hx-app .table-info,
    .hx-app .table-info > td,
    .hx-app .table-info > th,
    .hx-app .table-primary,
    .hx-app .table-primary > td,
    .hx-app .table-primary > th {
        background-color: rgba(11, 139, 254, 0.08) !important;
    }

    .hx-app .table-active,
    .hx-app .table-active > td,
    .hx-app .table-active > th,
    .hx-app .table-secondary,
    .hx-app .table-secondary > td,
    .hx-app .table-secondary > th {
        background-color: rgba(255, 255, 255, 0.04) !important;
    }

    /* Bootstrap contextual list-group items (pastel by default) */
    .hx-app .list-group-item-success {
        color: var(--hx-ok-text);
        background-color: rgba(52, 199, 123, 0.08);
    }

    .hx-app .list-group-item-warning {
        color: var(--hx-warn-text);
        background-color: rgba(242, 179, 61, 0.08);
    }

    .hx-app .list-group-item-danger {
        color: var(--hx-down-text);
        background-color: rgba(239, 83, 80, 0.08);
    }

    .hx-app .list-group-item-info,
    .hx-app .list-group-item-primary {
        color: var(--hx-info-text);
        background-color: rgba(11, 139, 254, 0.08);
    }

    .hx-app .list-group-item-secondary,
    .hx-app .list-group-item-light,
    .hx-app .list-group-item-dark {
        color: var(--hx-text-body);
        background-color: rgba(255, 255, 255, 0.03);
    }

    /* ---- 19.14 Responsive ----------------------------------------------- */
    /* Dashboard below 992px: content first, then the account card full width.
       Stock markup hides #my-info below 768px (.d-none .d-md-block); it is
       shown again so account details stay reachable on phones. */
    @media (max-width: 991.98px) {
        .hx-app #my-info,
        .hx-app #my-info.d-none {
            display: block !important;
            order: 2;
            flex: 0 0 100%;
            max-width: 100%;
        }

        .hx-app .right_content {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }

    @media (max-width: 767.98px) {
        .hx-app .title {
            margin-bottom: 1.5rem;
            padding-top: 2rem;
        }

        .hx-app .card-blesta > .card-header {
            padding: 1.2rem 1.15rem 0.4rem;
        }

        .hx-app .card-blesta > .card-body {
            padding: 0.6rem 1.15rem 1.25rem;
        }

        .hx-app .card-blesta > .card-body > .table-responsive,
        .hx-app .card-blesta > .card-body > form > .table-responsive {
            width: calc(100% + 2.3rem);
            margin-left: -1.15rem;
            margin-right: -1.15rem;
        }

        .hx-app .card-blesta > .card-body > .table-responsive > .table > * > tr > :first-child,
        .hx-app .card-blesta > .card-body > form > .table-responsive > .table > * > tr > :first-child {
            padding-left: 1.15rem;
        }

        .hx-app .card-blesta > .card-body > .table-responsive > .table > * > tr > :last-child,
        .hx-app .card-blesta > .card-body > form > .table-responsive > .table > * > tr > :last-child {
            padding-right: 1.15rem;
        }

        .hx-app .alert.w-100 {
            padding: 1rem 2.6rem 1rem 3.6rem;
        }

        .hx-app .alert.w-100::before {
            left: 0.9rem;
        }

        .hx-app .cards .card {
            min-height: 7.25rem;
            padding: 1.1rem 1.15rem !important;
        }
    }
}

/* ==========================================================================
   20. Authentication shell (structure.pdt when $show_header is false)
   ========================================================================== */
/* AUTH-ONLY. Every selector in this section is either an `hx-auth*` class
   (rendered only by the auth branch of structure.pdt and client_login*.pdt)
   or is prefixed with `body.hx-auth-page`, so nothing here can reach
   logged-in pages (body.hx-app). Shared form/button rules (sections 11–13)
   are NOT edited; the auth versions are scoped overrides below.

   Surfaces reuse the approved client-area tokens (--hx-card-bg, --hx-line,
   --hx-divider, --hx-card-depth). Card surface rules are forced with
   !important because a later stylesheet (most likely admin Custom CSS) was
   painting a light outline on the auth card in 1.3.1. */
body.hx-auth-page {
    background-color: var(--hx-bg-deep);
    overflow-x: hidden;
}

.hx-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
}

/* ---- Left: brand panel ------------------------------------------------- */
.hx-auth__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(2rem, 1rem + 3vw, 4rem);
    overflow: hidden;
    /* hostenix.com atmosphere: the pricing-card tint (top) + hero glow (bottom, .hx-auth__glow) */
    background:
        radial-gradient(70% 45% at 100% 0%, rgba(11, 60, 130, 0.16), transparent 60%),
        linear-gradient(180deg, var(--hx-bg) 0%, #010b17 100%);
    border-inline-end: 1px solid rgba(92, 176, 255, 0.05);
}

.hx-auth__brand > *:not(.hx-auth__glow) {
    position: relative;
    z-index: 1;
}

.hx-auth__glow {
    position: absolute;
    left: -16rem;
    bottom: -20rem;
    width: 46rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(1, 81, 204, 0.34), rgba(2, 72, 159, 0.1) 45%, transparent 68%);
    filter: blur(40px);
    pointer-events: none;
}

/* Structural divider: barely-there, fading at both ends */
.hx-auth__brand::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: -1px;
    width: 1px;
    background: linear-gradient(180deg, transparent 10%, rgba(92, 176, 255, 0.1) 50%, transparent 90%);
}

.hx-brand--lg .hx-brand__mark {
    width: 32px;
    height: 32px;
}

.hx-brand--lg .hx-brand__text {
    font-size: 1.1875rem;
}

.hx-auth__pitch {
    max-width: 27rem;
}

.hx-eyebrow {
    margin: 0 0 1rem;
    color: var(--hx-accent-text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hx-auth__headline {
    margin: 0;
    color: var(--hx-text);
    font-size: clamp(2rem, 1.3rem + 1.8vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.hx-auth__support {
    max-width: 23rem;
    margin: 1.25rem 0 0;
    color: var(--hx-text-muted);
    font-size: 1.0625rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.hx-auth__site-link,
.hx-auth__site-link:hover {
    align-self: flex-start;
    color: var(--hx-text-subtle);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.hx-auth__site-link:hover,
.hx-auth__site-link:focus {
    color: var(--hx-text);
}

/* ---- Right: form column ------------------------------------------------ */
.hx-auth__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 3rem 1.5rem 1.5rem;
    /* faint atmospheric lift behind the card so both halves carry weight */
    background:
        radial-gradient(55% 45% at 50% 45%, rgba(1, 81, 204, 0.08), transparent 70%),
        var(--hx-bg-deep);
}

.hx-auth-page .hx-content {
    width: 100%;
    max-width: 27.5rem;
    margin-top: auto;
    margin-bottom: auto;
    padding: 0;
}

/* application.css: `.row.login { padding-top: 10% }` */
.hx-auth-page .row.login {
    margin: 0;
    padding: 0;
}

.hx-auth__col {
    padding-left: 0;
    padding-right: 0;
}

/* ---- Auth card (also .panel/.panel-blesta for stock compatibility) ----- */
body.hx-auth-page .panel.hx-auth-card {
    position: relative;
    margin: 0;
    padding: 2.25rem 2.25rem 2rem;
    overflow: visible;
    color: var(--hx-text-body);
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(11, 60, 130, 0.2), transparent 60%),
        var(--hx-card-bg) !important;
    border: 1px solid rgba(92, 176, 255, 0.09) !important;
    border-radius: var(--hx-radius-lg) !important;
    box-shadow: var(--hx-card-depth), 0 0 100px -50px rgba(11, 139, 254, 0.45) !important;
}

/* top hairline (hostenix.com .plans__shared::before) */
body.hx-auth-page .panel.hx-auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(92, 176, 255, 0.55), transparent);
    pointer-events: none;
}

.hx-auth-card .panel-body,
.hx-auth-card .card-content {
    padding: 0;
    background: transparent;
    border: 0;
}

.hx-auth-card__head {
    margin-bottom: 1.75rem;
}

.hx-auth-card__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
    color: var(--hx-accent-text);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hx-auth-card__title {
    margin: 0 0 0.5rem;
    color: var(--hx-text);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.hx-auth-card__lead {
    margin: 0;
    color: var(--hx-text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.hx-auth-card fieldset {
    margin: 0;
}

/* ---- Form controls (auth-scoped; logged-in forms keep sections 11/19) -- */
.hx-auth-card .form-group {
    margin-bottom: 1.25rem;
}

body.hx-auth-page .hx-auth-card label {
    margin-bottom: 0.5rem;
    color: var(--hx-text-body);
    font-size: 0.8125rem;
    font-weight: 600;
}

body.hx-auth-page .hx-auth-card .form-control {
    min-height: 3rem;
    padding: 0.7rem 0.95rem;
    color: var(--hx-text);
    font-size: 0.9375rem;
    background-color: #010f20;
    border: 1px solid rgba(92, 176, 255, 0.14);
    border-radius: var(--hx-radius);
    box-shadow: none;
    transition: border-color 0.2s var(--hx-ease), box-shadow 0.2s var(--hx-ease), background-color 0.2s;
}

body.hx-auth-page .hx-auth-card .form-control:hover {
    border-color: rgba(92, 176, 255, 0.22);
}

body.hx-auth-page .hx-auth-card .form-control:focus {
    background-color: #011224;
    border-color: rgba(11, 139, 254, 0.75);
    box-shadow: 0 0 0 3px rgba(11, 139, 254, 0.16);
}

body.hx-auth-page .hx-auth-card .form-control::placeholder {
    color: var(--hx-text-subtle);
    opacity: 0.8;
}

/* Autofill matches the input surface exactly */
body.hx-auth-page .hx-auth-card input:-webkit-autofill,
body.hx-auth-page .hx-auth-card input:-webkit-autofill:hover,
body.hx-auth-page .hx-auth-card input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--hx-text);
    -webkit-box-shadow: 0 0 0 1000px #010f20 inset;
}

/* Remember me: understated custom checkbox (native input, restyled) */
.hx-auth-card__remember {
    margin: 0.15rem 0 0;
}

body.hx-auth-page .hx-auth-card__remember label {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    color: var(--hx-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
}

body.hx-auth-page .hx-auth-card__remember input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    display: inline-grid;
    place-content: center;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    background-color: #010f20;
    border: 1px solid rgba(92, 176, 255, 0.22);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

body.hx-auth-page .hx-auth-card__remember input[type="checkbox"]::after {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    background: #ffffff;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transition: transform 0.15s var(--hx-ease);
}

body.hx-auth-page .hx-auth-card__remember input[type="checkbox"]:checked {
    background-color: var(--hx-primary-lo);
    border-color: var(--hx-primary-lo);
}

body.hx-auth-page .hx-auth-card__remember input[type="checkbox"]:checked::after {
    transform: scale(1);
}

body.hx-auth-page .hx-auth-card__remember input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 139, 254, 0.3);
}

body.hx-auth-page .hx-auth-card__remember label:hover {
    color: var(--hx-text-body);
}

.hx-auth-card__captcha {
    max-width: 100%;
    margin-top: 1.25rem;
}

/* ---- Buttons ----------------------------------------------------------- */
body.hx-auth-page .hx-auth-card .btn-block {
    min-height: 3rem;
    font-size: 0.9375rem;
    border-radius: var(--hx-radius);
}

/* Primary: hostenix.com .btn--primary gradient, restrained glow */
body.hx-auth-page .hx-auth-card .hx-auth-card__submit {
    margin-top: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.005em;
    box-shadow: 0 10px 24px -12px rgba(11, 139, 254, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: filter 0.2s var(--hx-ease), box-shadow 0.25s var(--hx-ease), transform 0.2s var(--hx-ease);
}

body.hx-auth-page .hx-auth-card .hx-auth-card__submit:hover {
    filter: brightness(1.07);
    box-shadow: 0 14px 30px -12px rgba(11, 139, 254, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

body.hx-auth-page .hx-auth-card .hx-auth-card__submit:active {
    transform: translateY(0);
}

body.hx-auth-page .hx-auth-card .hx-auth-card__submit:focus-visible {
    outline: 2px solid var(--hx-accent-soft);
    outline-offset: 3px;
}

/* Secondary ("Return to login" on the forgot/reset views): soft ghost */
body.hx-auth-page .hx-auth-card .btn-light {
    color: var(--hx-text-body) !important;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

body.hx-auth-page .hx-auth-card .btn-light:hover,
body.hx-auth-page .hx-auth-card .btn-light:focus {
    color: var(--hx-text) !important;
    background-color: rgba(11, 139, 254, 0.12) !important;
    border-color: transparent !important;
}

body.hx-auth-page .hx-auth-card .btn-block + .btn-block {
    margin-top: 0.75rem;
}

body.hx-auth-page .hx-auth-card .btn-block .fas {
    margin-inline-end: 0.4rem;
    font-size: 0.875em;
    opacity: 0.85;
}

/* ---- Messages inside the card (errors, notices) ------------------------ */
body.hx-auth-page .hx-auth-card .alert {
    margin-bottom: 1.5rem;
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 10px;
}

/* ---- Recovery links: secondary to the primary action ------------------- */
body.hx-auth-page .panel-footer.hx-auth-card__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 1.75rem;
    padding: 1.25rem 0 0;
    font-size: 0.8125rem;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--hx-divider) !important;
    border-radius: 0 !important;
}

.hx-auth-card__links a {
    color: var(--hx-accent-soft);
    font-weight: 500;
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.hx-auth-card__links a:hover,
.hx-auth-card__links a:focus {
    color: var(--hx-text);
    text-decoration: underline;
    text-decoration-color: rgba(92, 176, 255, 0.4);
}

/* ---- Secondary navigation under the card / page footer ----------------- */
.hx-auth__back {
    margin: 1.75rem 0 0;
    text-align: center;
    font-size: 0.8125rem;
}

.hx-auth__back a {
    color: var(--hx-text-subtle);
    text-decoration: none;
    transition: color 0.2s;
}

.hx-auth__back a:hover,
.hx-auth__back a:focus {
    color: var(--hx-text);
}

.hx-auth__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 1.5rem;
    width: 100%;
    margin-top: 2.5rem;
    color: var(--hx-text-subtle);
    font-size: 0.75rem;
}

.hx-auth__footer p {
    margin: 0;
}

.hx-auth__footer .hx-footer__links {
    gap: 0.4rem 1.25rem;
}

.hx-auth__footer .hx-footer__links a {
    color: var(--hx-text-subtle);
}

.hx-auth__footer .hx-footer__links a:hover,
.hx-auth__footer .hx-footer__links a:focus {
    color: var(--hx-text);
}

/* ==========================================================================
   21. Responsive
   ========================================================================== */
@media (min-width: 992px) {
    .hx-auth {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    }

    .hx-auth__brand,
    .hx-auth__main {
        min-height: 100vh;
    }

    .hx-auth__brand {
        position: sticky;
        top: 0;
        max-height: 100vh;
    }
}

@media (max-width: 991.98px) {
    /* Compact branding bar */
    .hx-auth__brand {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.25rem;
        border-inline-end: 0;
        border-bottom: 1px solid rgba(92, 176, 255, 0.06);
    }

    .hx-auth__brand::after,
    .hx-auth__pitch {
        display: none;
    }

    .hx-auth__glow {
        left: auto;
        right: -10rem;
        top: -16rem;
        bottom: auto;
        width: 26rem;
        opacity: 0.8;
    }

    .hx-auth__site-link {
        align-self: center;
    }

    .hx-auth__main {
        padding: 2rem 1rem 1.25rem;
    }
}

/* Tablet: comfortable card width under the compact branding bar */
@media (min-width: 576px) and (max-width: 991.98px) {
    .hx-auth__main {
        padding-top: 3.5rem;
    }
}

@media (max-width: 575.98px) {
    body.hx-auth-page .panel.hx-auth-card {
        padding: 1.75rem 1.35rem 1.5rem;
    }

    .hx-auth-card__title {
        font-size: 1.5rem;
    }

    .hx-brand--lg .hx-brand__text {
        font-size: 1.0625rem;
    }

    .hx-footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* reCAPTCHA / hCaptcha widgets are a fixed 304px wide */
@media (max-width: 400px) {
    .hx-auth-card__captcha .g-recaptcha,
    .hx-auth-card__captcha .h-captcha {
        transform: scale(0.8);
        transform-origin: 0 0;
    }
}

/* ==========================================================================
   22. Motion / forced colors
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *:not(.fa-spin),
    *:not(.fa-spin)::before,
    *:not(.fa-spin)::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .hx-app .row.cards > [class*="col-"]:has(> a:hover),
    .hx-app .row.cards > [class*="col-"]:has(> a:focus-visible) {
        transform: none;
    }
}

@media (forced-colors: active) {
    .btn,
    .card,
    .panel,
    .form-control,
    .dropdown-menu {
        border: 1px solid CanvasText;
    }
}

/* ==========================================================================
   23. Print: readable on white (theme.css is screen-only)
   ========================================================================== */
@media print {
    html {
        color-scheme: light;
    }

    *,
    *::before,
    *::after {
        color: #000000 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
    }

    html,
    body,
    body.hx-app,
    body.hx-auth-page {
        display: block;
        min-height: 0;
        background: #ffffff !important;
        font-size: 11pt;
    }

    .hx-site-header,
    .hx-footer,
    .hx-skip-link,
    .hx-auth__brand,
    .hx-auth__footer,
    .modal,
    .modal-backdrop,
    .loading_container,
    .navbar,
    .pagination,
    .btn,
    .btn-group,
    .dropdown-menu,
    #hx-main > .row > .col-md-3:first-child,
    tr.expand td:last-of-type::after {
        display: none !important;
    }

    #hx-main > .row > .col-md-3:first-child + .col-md-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .hx-app .title {
        margin: 0 0 12pt;
        padding: 0;
    }

    .card,
    .panel,
    .well,
    .alert,
    .list-group-item,
    .table,
    .table td,
    .table th,
    table,
    .form-control {
        border-color: #bbbbbb !important;
    }

    .card,
    .panel,
    tr,
    img {
        page-break-inside: avoid;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    .table-responsive {
        overflow: visible !important;
    }

    .table-responsive .table td,
    .table-responsive .table th {
        white-space: normal;
    }
}