/* Apex Thunder UI contract v0.2.3. One palette and one adapter for WHMCS/Bootstrap.
 * Keep layout/brand artwork in custom.css; change component colors HERE.
 * Scoped to the client content and invoice, never to the admin or payment iframe.
 */
:root {
    --ui-surface: #ffffff; --ui-soft: #edf2f8; --ui-text: #17243b;
    --ui-muted: #52627b; --ui-border: #c4cfdf; --ui-link: #1d4ed8;
    --ui-primary: #1d4ed8; --ui-primary-hover: #1e40af;
    --ui-success: #047857; --ui-danger: #b91c1c; --ui-info: #0369a1;
    --ui-warning: #facc15; --ui-warning-text: #422006;
    --ui-success-soft: #dcfce7; --ui-success-text: #065f46;
    --ui-danger-soft: #fee2e2; --ui-danger-text: #991b1b;
    --ui-warning-soft: #fff3cd; --ui-warning-ink: #78350f;
    --ui-info-soft: #e0f2fe; --ui-info-text: #075985;
    --ui-focus: #1d4ed8; --ui-radius: 10px;
}
html[data-apex-theme="dark"] {
    --ui-surface: #111b2b; --ui-soft: #1c2c43; --ui-text: #eef4ff;
    --ui-muted: #b4c4db; --ui-border: #405570; --ui-link: #a5ceff;
    --ui-success-soft: #11372b; --ui-success-text: #91f0bd;
    --ui-danger-soft: #441f2a; --ui-danger-text: #ffb8bd;
    --ui-warning-soft: #3b2b12; --ui-warning-ink: #ffda8a;
    --ui-info-soft: #12334d; --ui-info-text: #9bdefc;
    --ui-focus: #71d9ff;
}
@media screen {
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) {
        color: var(--ui-text);
    }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) a:not(.btn):not(.list-group-item) {
        color: var(--ui-link);
    }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .btn[class] {
        --ui-button-bg: var(--ui-soft); --ui-button-fg: var(--ui-text); --ui-button-border: var(--ui-border);
        background: var(--ui-button-bg) !important; color: var(--ui-button-fg) !important;
        border: 1px solid var(--ui-button-border) !important; border-radius: var(--ui-radius);
        text-shadow: none !important; box-shadow: none; font-weight: 650;
    }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .btn[class]:is(.btn-primary,.btn-success,.btn-danger,.btn-info,.btn-dark) {
        --ui-button-fg: #ffffff; --ui-button-border: transparent;
    }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .btn[class].btn-primary { --ui-button-bg: var(--ui-primary); }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .btn[class].btn-success { --ui-button-bg: var(--ui-success); }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .btn[class].btn-danger { --ui-button-bg: var(--ui-danger); }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .btn[class].btn-info { --ui-button-bg: var(--ui-info); }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .btn[class].btn-dark { --ui-button-bg: #24364c; }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .btn[class].btn-warning { --ui-button-bg: var(--ui-warning); --ui-button-fg: var(--ui-warning-text); }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .btn[class].btn-link { --ui-button-bg: transparent; --ui-button-fg: var(--ui-link); --ui-button-border: transparent; }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .btn[class*="btn-outline-"] { --ui-button-bg: transparent; --ui-button-border: currentColor; }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .btn[class].btn-outline-primary { --ui-button-fg: var(--ui-link); }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .btn[class].btn-outline-success { --ui-button-fg: var(--ui-success-text); }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .btn[class].btn-outline-danger { --ui-button-fg: var(--ui-danger-text); }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .btn[class].btn-outline-warning { --ui-button-fg: var(--ui-warning-ink); }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .btn[class].btn-outline-info { --ui-button-fg: var(--ui-info-text); }
    html[data-apex-theme] body.apex-theme #frmDomainHomepage #btnTransfer.btn-success { background: var(--ui-success) !important; color: #fff !important; border-color: var(--ui-success) !important; }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .btn[class]:hover:not(:disabled):not(.disabled) { filter: brightness(.94); }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .btn[class]:focus-visible {
        outline: 3px solid var(--ui-focus) !important; outline-offset: 3px; filter: none;
    }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .btn[class]:is(:disabled,.disabled) { opacity: .68; cursor: not-allowed; }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .btn[class] :is(i,span:not(.badge)) { color: inherit !important; }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) :is(.card,.panel,.modal-content,.well,.list-group-item) {
        background-color: var(--ui-surface) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important;
    }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) :is(.card-header,.card-footer,.panel-heading,.panel-footer) {
        background-color: var(--ui-soft) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important;
    }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) :is(.card-title,.panel-title) { color: var(--ui-text) !important; }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) :is(.text-muted,.help-block) { color: var(--ui-muted) !important; }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) :is(.form-control,.custom-select,.custom-file-label,.input-group-text,.md-editor,.md-input,.md-preview,.md-header,.md-footer) {
        background-color: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important;
    }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) :is(input,textarea)::placeholder { color: var(--ui-muted) !important; opacity: 1; }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) :is(input,textarea,select):focus { border-color: var(--ui-focus) !important; }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) :is(.form-control[readonly],.form-control:disabled),
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .custom-file-label::after { background-color: var(--ui-soft) !important; color: var(--ui-muted) !important; }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) :is(.is-invalid,[aria-invalid="true"]) { border-color: var(--ui-danger) !important; }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .table :is(th,td) {
        background-color: var(--ui-surface) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important;
    }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .table thead th,
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .table-striped tbody tr:nth-of-type(odd) > :is(th,td) { background-color: var(--ui-soft) !important; }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) :is(.alert,.badge,.label,.status) {
        --ui-tone-bg: var(--ui-soft); --ui-tone-fg: var(--ui-text);
        background-color: var(--ui-tone-bg) !important; color: var(--ui-tone-fg) !important; border-color: currentColor;
    }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) :is(.alert-success,.badge-success,.label-success,.status-active,.status-paid) { --ui-tone-bg: var(--ui-success-soft); --ui-tone-fg: var(--ui-success-text); }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) :is(.alert-warning,.badge-warning,.label-warning,.status-pending,.status-unpaid) { --ui-tone-bg: var(--ui-warning-soft); --ui-tone-fg: var(--ui-warning-ink); }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) :is(.alert-danger,.alert-error,.badge-danger,.label-danger,.status-suspended,.status-overdue) { --ui-tone-bg: var(--ui-danger-soft); --ui-tone-fg: var(--ui-danger-text); }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) :is(.alert-info,.badge-info,.label-info,.status-answer) { --ui-tone-bg: var(--ui-info-soft); --ui-tone-fg: var(--ui-info-text); }
    html[data-apex-theme] body.apex-theme :is(#main-body, #order-standard_cart, .invoice-container) .alert a:not(.btn) { color: inherit !important; text-decoration: underline; }
    html[data-apex-theme] body.apex-theme .invoice-status :is(.paid,.unpaid,.cancelled,.refunded,.collections,.draft) { border-radius: var(--ui-radius); }
    html[data-apex-theme] body.apex-theme .invoice-status .paid { background: var(--ui-success-soft) !important; color: var(--ui-success-text) !important; }
    html[data-apex-theme] body.apex-theme .invoice-status .unpaid { background: var(--ui-warning-soft) !important; color: var(--ui-warning-ink) !important; }
}
.apex-dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block-end: 18px; }
.apex-dashboard-heading h2 { margin: 0; font-size: 1.5rem; }
.apex-dashboard .card-title { font-size: 1.15rem; }
.apex-dashboard-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.apex-dashboard-metrics .card { min-width: 0; margin-block-end: 16px; }
.apex-dashboard-metrics .card-body { padding: 20px; }
.apex-dashboard-metrics a { display: block; margin-block-start: 10px; font-size: .85rem; }
.apex-metric { display: block; font-size: clamp(1.2rem,2.5vw,1.8rem); line-height: 1.3; overflow-wrap: anywhere; }
.apex-service-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.apex-service-name { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.apex-service-name small { display: block; }
.apex-captcha-fields { display: flex; align-items: center; gap: 16px; margin-block: 12px; flex-wrap: wrap; }
.apex-captcha-fields img { border-radius: 8px; max-width: 100%; object-fit: contain; }
.apex-captcha-fields input[type="text"] { max-width: 150px; text-transform: uppercase; letter-spacing: .25em; font-family: monospace; }
.apex-honeypot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 767.98px) {
    .apex-dashboard-metrics { grid-template-columns: 1fr; gap: 0; }
    .apex-dashboard-heading { align-items: flex-start; flex-direction: column; }
    .apex-service-row > .btn { margin-inline-start: auto; }
}