/* APEX shared UI — the only owner of interactive component appearance.
   Edit the tokens below for system-wide changes. Module CSS owns layout only.
   This first-declared layer intentionally outranks legacy !important rules;
   zero-specificity component selectors keep variants and states in source order.
   No DOM rewriting or JavaScript initialization is needed.
   Scope excludes navigation, hidden inputs, choice controls and printed labels. */
@layer apexPrimitives {
    :where(:root) {
        --apex-ui-surface: #ffffff !important;
        --apex-ui-sunken: #f7f9fb !important;
        --apex-ui-ink: #142233 !important;
        --apex-ui-field-ink: #0f172a !important;
        --apex-ui-card-ink: #14213e !important;
        --apex-ui-secondary: #3b4b5c !important;
        --apex-ui-muted: #647384 !important;
        --apex-ui-border: rgb(186 212 218 / .74) !important;
        --apex-ui-border-strong: #bed6dc !important;
        --apex-ui-card-shadow: 0 16px 38px rgba(15, 23, 42, .07) !important;
        --apex-ui-field-shadow: inset 0 1px 0 rgba(22, 25, 23, .03) !important;
        --apex-ui-control-transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease !important;
        --apex-ui-brand: #0f766e !important;
        --apex-ui-brand-hover: #0b5d57 !important;
        --apex-ui-brand-soft: #e7f4f2 !important;
        --apex-ui-danger: #b42318 !important;
        --apex-ui-danger-soft: #fdeceb !important;
        --apex-ui-danger-border: #f1c7c3 !important;
        --apex-ui-warning: #9a5b06 !important;
        --apex-ui-warning-soft: #fdf3e1 !important;
        --apex-ui-success: #15803d !important;
        --apex-ui-success-soft: #e8f6ec !important;
        --apex-ui-info: #1d4ed8 !important;
        --apex-ui-info-soft: #eaf0fd !important;
        --apex-ui-control-height: 46px !important;
        --apex-ui-control-compact: 36px !important;
        --apex-ui-control-entry: 42px !important;
        --apex-ui-control-radius: 10px !important;
        --apex-ui-radius-compact: 8px !important;
        --apex-ui-card-radius: 8px !important;
        --apex-ui-card-workspace-radius: 8px !important;
        --apex-ui-summary-radius: 16px !important;
        --apex-ui-ledger-radius: 12px !important;
        --apex-ui-choice-radius: 13px !important;
        --apex-ui-review-radius: 18px !important;
        --apex-ui-hero-radius: 19px !important;
        --apex-ui-control-font: 13px !important;
        --apex-ui-control-mobile-font: 16px !important;
        --apex-ui-button-font: 13px !important;
        --apex-ui-button-small-font: 12px !important;
        --apex-ui-table-font: 13px !important;
        --apex-ui-table-head-font: 12px !important;
        --apex-ui-button-height: 38px !important;
        --apex-ui-button-small-height: 30px !important;
        --apex-ui-button-padding: 7px 14px !important;
        --apex-ui-button-small-padding: 4px 10px !important;
        --apex-ui-table-padding: 9px 12px !important;
        --apex-ui-card-head-padding: 14px 18px !important;
        --apex-ui-card-body-padding: 16px 18px !important;
    }

    /* Approved accounting tokens now resolve to the same central palette. */
    :where(.acc) {
        --acc-ink: var(--apex-ui-ink) !important;
        --acc-soft-ink: var(--apex-ui-secondary) !important;
        --acc-muted: var(--apex-ui-muted) !important;
        --acc-surface: var(--apex-ui-surface) !important;
        --acc-sunken: var(--apex-ui-sunken) !important;
        --acc-line: var(--apex-ui-border) !important;
        --acc-line-strong: var(--apex-ui-border-strong) !important;
        --acc-brand: var(--apex-ui-brand) !important;
        --acc-brand-ink: var(--apex-ui-brand-hover) !important;
        --acc-brand-soft: var(--apex-ui-brand-soft) !important;
        --acc-red: var(--apex-ui-danger) !important;
        --acc-red-soft: var(--apex-ui-danger-soft) !important;
        --acc-amber: var(--apex-ui-warning) !important;
        --acc-amber-soft: var(--apex-ui-warning-soft) !important;
        --acc-green: var(--apex-ui-success) !important;
        --acc-green-soft: var(--apex-ui-success-soft) !important;
        --acc-blue: var(--apex-ui-info) !important;
        --acc-blue-soft: var(--apex-ui-info-soft) !important;
        --acc-radius: var(--apex-ui-card-radius) !important;
    }

    /* Density is a supported variant, never a private page pixel adjustment. */
    :where(.acc, [data-apex-density="compact"]) {
        --apex-field-height: var(--apex-ui-control-compact);
        --apex-field-radius: var(--apex-ui-radius-compact);
        --apex-field-padding: 6px 10px;
        --apex-textarea-height: 64px;
        --apex-textarea-padding: 6px 10px;
        --apex-button-line-height: 1.65;
    }
    :where(.tre-entry) {
        --apex-field-height: var(--apex-ui-control-entry);
    }
    :where(.vc-details, .je-editor, .tr-issue, .tr-settlement, [data-apex-density="comfortable"]) {
        --apex-field-height: var(--apex-ui-control-height);
        --apex-field-radius: var(--apex-ui-control-radius);
        --apex-field-padding: 0 12px;
        --apex-textarea-height: 76px;
    }
    :where(.je-editor, .tr-issue, .tr-settlement) { --apex-textarea-height: 88px; }
    :where(.vc-details) { --apex-textarea-height: 40px; }

    /* FIELD: native and Web Forms controls, including dynamically added rows. */
    :where(:where(.erp-main, .apex-standalone-page, .label-toolbar) :is(
        input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"]),
        select, textarea, .apex-ui-input
    )) {
        box-sizing: border-box !important;
        min-width: 0 !important;
        min-height: var(--apex-field-height, var(--apex-ui-control-height)) !important;
        margin-block: 0 !important;
        border: 1px solid var(--apex-ui-border-strong) !important;
        border-radius: var(--apex-field-radius, var(--apex-ui-control-radius)) !important;
        background-color: var(--apex-ui-surface) !important;
        background-image: none !important;
        color: var(--apex-ui-field-ink) !important;
        font-family: inherit !important;
        font-size: var(--apex-ui-control-font) !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        box-shadow: var(--apex-ui-field-shadow) !important;
        transition: var(--apex-ui-control-transition) !important;
        padding: var(--apex-field-padding, 0 12px) !important;
    }
    :where(.erp-main .acc :is(input, select, textarea):not([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"])) { font-weight: inherit !important; }
    :where(.erp-main .acc :is(input, textarea):not([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"])) { line-height: 1.65 !important; }
    :where(.apex-ui-input) { inline-size: 100% !important; }
    :where(.apex-ui-field) { display: grid !important; align-content: start; gap: 6px !important; min-width: 0 !important; }
    :where(.apex-ui-field > span) { font-size: 12px !important; font-weight: 650 !important; color: var(--apex-ui-secondary) !important; }
    :where(:where(.erp-main, .apex-standalone-page, .label-toolbar) :is(input:not([type="file"]), select:not([multiple]):not([size])):not([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"])) {
        height: var(--apex-field-height, var(--apex-ui-control-height)) !important;
    }
    :where(:where(.erp-main, .apex-standalone-page) textarea:not([hidden])) {
        height: auto !important;
        min-height: var(--apex-textarea-height, 88px) !important;
        padding: var(--apex-textarea-padding, 10px 12px) !important;
        border-radius: var(--apex-ui-radius-compact) !important;
        resize: vertical;
    }
    :where(:where(.erp-main, .apex-standalone-page) select:not([multiple])) { appearance: auto !important; }
    :where(:where(.erp-main, .apex-standalone-page) select[multiple]) { padding-block: 8px !important; }
    :where(:where(.erp-main, .apex-standalone-page) :is(input, textarea))::placeholder { color: var(--apex-ui-muted) !important; opacity: 1 !important; }
    :where(:where(.erp-main, .apex-standalone-page) :is(input, select, textarea):not([type="hidden"], [type="checkbox"], [type="radio"]):is([readonly], :disabled)) {
        background-color: var(--apex-ui-sunken) !important;
        color: var(--apex-ui-secondary) !important;
    }
    :where(:where(.erp-main, .apex-standalone-page) :is(input, select, textarea):not([type="hidden"]):focus) {
        outline: 2px solid var(--apex-ui-brand) !important;
        outline-offset: 2px !important;
        border-color: var(--apex-ui-brand) !important;
    }
    :where(:where(.erp-main, .apex-standalone-page) :is(input, select, textarea):is([aria-invalid="true"], .is-invalid, .input-validation-error)) {
        border-color: var(--apex-ui-danger) !important;
        outline-color: var(--apex-ui-danger) !important;
    }
    :where(:where(.erp-main, .apex-standalone-page) input:is([type="checkbox"], [type="radio"])) { accent-color: var(--apex-ui-brand); }

    /* Select2 is an adapter to FIELD, not a second input design. */
    :where(.erp-main .select2-selection) {
        min-height: var(--apex-field-height, var(--apex-ui-control-height)) !important;
        border: 1px solid var(--apex-ui-border-strong) !important;
        border-radius: var(--apex-field-radius, var(--apex-ui-control-radius)) !important;
        background: var(--apex-ui-surface) !important;
        color: var(--apex-ui-field-ink) !important;
        transition: var(--apex-ui-control-transition) !important;
    }
    :where(.erp-main .select2-selection--single) { height: var(--apex-field-height, var(--apex-ui-control-height)) !important; }
    :where(.erp-main .select2-selection__rendered) { color: var(--apex-ui-field-ink) !important; font-size: var(--apex-ui-control-font) !important; }
    :where(.erp-main .select2-selection--single :is(.select2-selection__rendered, .select2-selection__arrow)) { line-height: calc(var(--apex-field-height, var(--apex-ui-control-height)) - 2px) !important; height: calc(var(--apex-field-height, var(--apex-ui-control-height)) - 2px) !important; }
    :where(.erp-main .select2-container--focus .select2-selection) { outline: 2px solid var(--apex-ui-brand) !important; outline-offset: 2px !important; }
    /* Keep Select2's native backing control visually hidden and accessible. */
    :where(.erp-main :is(input, select, textarea).select2-hidden-accessible[aria-hidden="true"]) {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        min-height: 1px !important;
        min-width: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        border: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
    }
    :where(.erp-main .select2-search--inline :is(input, textarea).select2-search__field) {
        height: var(--apex-ui-button-small-height) !important;
        min-height: var(--apex-ui-button-small-height) !important;
        border: 0 !important;
        background: transparent !important;
        padding: 0 4px !important;
    }
    :where(.erp-main .select2-container--disabled .select2-selection) {
        background: var(--apex-ui-sunken) !important;
        color: var(--apex-ui-secondary) !important;
        opacity: .5 !important;
    }
    :where(.erp-main .select2-container--disabled .select2-selection__rendered) { color: var(--apex-ui-secondary) !important; }
    :where(.select2-dropdown .select2-search__field) {
        min-height: var(--apex-ui-control-height) !important;
        border: 1px solid var(--apex-ui-border-strong) !important;
        border-radius: var(--apex-ui-control-radius) !important;
        background: var(--apex-ui-surface) !important;
        color: var(--apex-ui-field-ink) !important;
        font-family: inherit !important;
        font-size: var(--apex-ui-control-font) !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        padding: 6px 12px !important;
        transition: var(--apex-ui-control-transition) !important;
    }
    :where(.select2-dropdown .select2-search__field:focus-visible) { outline: 2px solid var(--apex-ui-brand) !important; outline-offset: 2px; }
    :where(.erp-main :is(.studio-invalid, .has-error) :is(input, select, textarea, .select2-selection),
    .erp-main .was-validated :is(input, select, textarea):invalid,
    .erp-main :is(select[aria-invalid="true"], select.is-invalid) + .select2-container .select2-selection) { border-color: var(--apex-ui-danger) !important; }

    /* BUTTON: registered legacy names remain compatible with existing events. */
    :where(:where(.erp-main, .apex-auth-page, .apex-standalone-page, .label-toolbar) :is(.apex-ui-button, .btn:not(.btn-close), .acc-btn, .apex-action-control, .proc-btn, .proj-btn, .mfg-btn, .fg-btn, .qc-btn, .site-btn, .toffice-btn, .thub-btn, .claim-btn, .claims-btn, .sales-btn, .tech-btn, .ep-btn, .et-btn, .et-page-btn, .ntf-btn, .clients-btn, .profile-btn, .employee-action-btn, .arc-btn, .na-btn, .nr-btn, .agenda-btn, .c360-btn, .cscc-btn, .apex-button, .label-btn)) {
        box-sizing: border-box !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: var(--apex-ui-button-height) !important;
        height: auto !important;
        padding: var(--apex-ui-button-padding) !important;
        border: 1px solid var(--apex-ui-border-strong) !important;
        border-radius: var(--apex-ui-radius-compact) !important;
        background: var(--apex-button-bg, var(--apex-ui-surface)) !important;
        color: var(--apex-button-ink, var(--apex-ui-ink)) !important;
        font-family: inherit !important;
        font-size: var(--apex-ui-button-font) !important;
        font-weight: 650 !important;
        white-space: nowrap;
        line-height: var(--apex-button-line-height, 1.5) !important;
        text-decoration: none !important;
        box-shadow: none !important;
        transform: none !important;
        transition: var(--apex-ui-control-transition) !important;
        cursor: pointer;
    }
    :where(:where(.erp-main, .apex-auth-page, .apex-standalone-page, .label-toolbar) :is(.apex-ui-button--primary, .btn-primary, .btn-success, .acc-btn--primary, .thub-btn--primary, .apex-action-control--primary, .proc-btn.primary, .proj-btn.primary, .mfg-btn.primary, .fg-btn.primary, .qc-btn.primary, .site-btn.primary, .toffice-btn.primary, .claim-btn.primary, .claims-btn.primary, .sales-btn.primary, .tech-btn.primary, .fg-btn, .apex-button.primary, .label-btn.primary)) {
        --apex-button-bg: var(--apex-ui-brand);
        --apex-button-ink: #ffffff;
        border-color: var(--apex-ui-brand) !important;
    }
    :where(:where(.erp-main, .apex-auth-page, .apex-standalone-page) :is(.apex-ui-button--danger, .acc-btn--danger, .btn-outline-danger, .proj-btn.danger, .proc-btn.danger)) {
        --apex-button-ink: var(--apex-ui-danger);
        --apex-button-bg: var(--apex-ui-surface);
        border-color: var(--apex-ui-danger-border) !important;
    }
    :where(.erp-main .btn-danger) { --apex-button-bg: var(--apex-ui-danger); --apex-button-ink: #ffffff; border-color: var(--apex-ui-danger) !important; }
    :where(.erp-main :is(.proc-btn.warning, .proj-btn.warning, .mfg-btn.warning, .qc-btn.warning, .site-btn.warn, .toffice-btn.warning, .btn-warning)) {
        --apex-button-bg: var(--apex-ui-warning-soft);
        --apex-button-ink: var(--apex-ui-warning);
        border-color: var(--apex-ui-warning) !important;
    }
    :where(.erp-main .acc-btn) { width: auto !important; }
    :where(.erp-main :is(.acc-btn--quiet, .btn-link)) { --apex-button-bg: transparent; --apex-button-ink: var(--apex-ui-secondary); border-color: transparent !important; }
    :where(.erp-main :is(.acc-btn--small, .btn-sm, .apex-ui-button--small)) { min-height: var(--apex-ui-button-small-height) !important; padding: var(--apex-ui-button-small-padding) !important; font-size: var(--apex-ui-button-small-font) !important; }
    :where(:where(.erp-main, .apex-auth-page, .apex-standalone-page, .label-toolbar) :is(.apex-ui-button, .btn, .acc-btn, .apex-action-control, .proc-btn, .proj-btn, .mfg-btn, .fg-btn, .qc-btn, .site-btn, .toffice-btn, .thub-btn, .claim-btn, .claims-btn, .sales-btn, .tech-btn, .ep-btn, .et-btn, .ntf-btn, .apex-button, .label-btn):hover:not(:disabled, [aria-disabled="true"], .disabled)) {
        filter: brightness(.96);
        border-color: var(--apex-ui-brand) !important;
    }
    :where(:where(.erp-main, .apex-auth-page, .apex-standalone-page, .label-toolbar) :is(a, button, input[type="submit"]):focus-visible) { outline: 2px solid var(--apex-ui-brand) !important; outline-offset: 3px !important; }
    :where(:where(.erp-main, .apex-auth-page, .apex-standalone-page, .label-toolbar) :is(button, input, select, textarea, .btn, .acc-btn, .apex-ui-button):is(:disabled, [aria-disabled="true"], .disabled)) { opacity: .5 !important; cursor: not-allowed !important; }

    /* CARD: surface only; module grid, summary borders and card behavior stay. */
    :where(.apex-ui-card) { border: 1px solid var(--apex-ui-border) !important; }
    :where(.apex-ui-card__head) { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px !important; }
    :where(.apex-ui-card__head h2) { margin: 0 !important; font-size: 15px !important; font-weight: 700 !important; color: inherit !important; }
    :where(:where(.erp-main, .apex-standalone-page) :is(.apex-ui-card, .card, .apex-card, .apex-panel, .acc-card, .proc-panel, .proj-panel, .mfg-panel, .fg-panel, .qc-panel, .site-panel, .toffice-panel, .thub-card, .report-card, .compact-card, .dd-card, .arc-panel, .c360-panel, .cscc-panel, .claims-panel, .et-panel, .ep-panel, .et-card, .ntf-panel, .ntf-card, .sales-panel, .tech-panel, .agenda-panel, .rpt-panel, .rpt-card, .tb-panel, .tb-filter-panel, .fs-panel, .employees-panel, .employee-card, .section-card, .form-card, .content-card, .payment-card, .period-card, .rule-card, .policy-card, .violation-card, .record-card, .qc-card, .project-grid-card, .agenda-card, .c360-card, .employee-profile-card, .profile-card, .detail-card, .dashboard-card, .erp-card, .chart-card, .preview-card, .table-card, .tree-card, .security-card, .info-card, .new-acc-card, .apex-error-shell)) {
        min-width: 0;
        background-color: var(--apex-ui-surface) !important;
        background-image: none !important;
        color: var(--apex-ui-card-ink) !important;
        border-color: var(--apex-ui-border) !important;
        border-radius: var(--apex-card-radius, var(--apex-ui-card-radius)) !important;
        box-shadow: var(--apex-ui-card-shadow) !important;
        transition: var(--apex-ui-control-transition) !important;
    }
    :where(.tre-workspace) { --apex-card-radius: var(--apex-ui-card-workspace-radius); }
    /* Approved voucher variants share the same owner, keeping their identities. */
    :where(.erp-main .vc-choice__card > span) { border-radius: var(--apex-ui-choice-radius) !important; }
    :where(.erp-main .vc-progress) { border-radius: var(--apex-ui-choice-radius) !important; }
    :where(.erp-main .vc-ledger__sides section) { border-radius: var(--apex-ui-ledger-radius) !important; }
    :where(.erp-main .vc-review) { border-radius: var(--apex-ui-review-radius) !important; }
    :where(.erp-main .tre-entry__summary) { border-radius: var(--apex-ui-summary-radius) !important; }
    :where(.erp-main .tre-entry__hero) { border-radius: var(--apex-ui-hero-radius) !important; }
    :where(.erp-main .thub-work) {
        background: var(--apex-ui-surface) !important;
        border-color: var(--apex-ui-border) !important;
        border-inline-start-color: var(--tone, var(--apex-ui-border)) !important;
        border-radius: var(--apex-ui-card-radius) !important;
        box-shadow: none !important;
    }
    :where(:where(.erp-main, .apex-standalone-page) :is(.apex-ui-card__head, .apex-card__head, .acc-card__head, .proc-panel-head, .proj-panel-head, .mfg-panel-head, .fg-panel-head, .qc-panel-head, .site-panel-head, .toffice-panel-head, .card-header, .report-card-header, .compact-card-header)) {
        padding: var(--apex-ui-card-head-padding) !important;
        background: transparent !important;
        color: var(--apex-ui-card-ink) !important;
        border-bottom: 1px solid var(--apex-ui-border) !important;
    }
    :where(:where(.erp-main, .apex-standalone-page) :is(.apex-ui-card__body, .apex-card__body, .acc-card__body, .proc-panel-body, .proj-panel-body, .mfg-panel-body, .fg-panel-body, .qc-panel-body, .site-panel-body, .toffice-panel-body, .card-body, .report-card-body, .compact-card-body)) { padding: var(--apex-ui-card-body-padding) !important; }
    :where(.erp-main :is(.acc-card__body--flush, .apex-ui-card__body--flush)) { padding: 0 !important; }

    /* TABLE: data grids only. Layout tables/choice lists retain their layout. */
    :where(.erp-main :is(table:has(> thead), table:has(> tbody > tr > th), table.apex-table, table.acc-table, table.table, table.apex-ui-table, table.proc-table, table.proj-table, table.mfg-table, table.fg-table, table.qc-table, table.site-table, table.toffice-table, table.thub-table, table.erp-table, table.self-table):not([role="presentation"])) {
        width: 100%;
        border-collapse: collapse !important;
        font-size: var(--apex-ui-table-font) !important;
        background: transparent !important;
    }
    :where(.erp-main :is(table:has(> thead), table:has(> tbody > tr > th), table.apex-table, table.acc-table, table.table, table.apex-ui-table, table.proc-table, table.proj-table, table.mfg-table, table.fg-table, table.qc-table, table.site-table, table.toffice-table, table.thub-table, table.erp-table, table.self-table):not([role="presentation"]) > :is(thead, tbody, tfoot) > tr > :is(th, td)) {
        padding: var(--apex-ui-table-padding) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--apex-ui-border) !important;
        vertical-align: middle;
    }
    :where(.erp-main :is(table:has(> thead), table:has(> tbody > tr > th), table.apex-table, table.acc-table, table.table, table.apex-ui-table, table.proc-table, table.proj-table, table.mfg-table, table.fg-table, table.qc-table, table.site-table, table.toffice-table, table.thub-table, table.erp-table, table.self-table):not([role="presentation"]) > :is(thead, tbody, tfoot) > tr > th) {
        background: var(--apex-ui-sunken) !important;
        color: var(--apex-ui-muted) !important;
        font-size: var(--apex-ui-table-head-font) !important;
        font-weight: 650 !important;
        box-shadow: none !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }
    :where(.erp-main :is(.apex-table-shell, .table-responsive, .acc-table-wrap, .proc-table-wrap, .proj-table-wrap, .mfg-table-wrap, .fg-table-wrap, .qc-table-wrap, .site-table-wrap, .toffice-table-wrap, .apex-ui-table-wrap)) { min-width: 0 !important; max-width: 100% !important; overflow-x: auto !important; }
    @media (max-width: 767px) {
        :where(.erp-main .acc-reconcile-shell) { overflow: visible !important; }
    }

    /* Login uses the same FIELD surface inside its existing icon wrapper. */
    :where(.apex-auth-page .control) {
        min-height: var(--apex-ui-control-height) !important;
        background: var(--apex-ui-surface) !important;
        border: 1px solid var(--apex-ui-border-strong) !important;
        border-radius: var(--apex-ui-control-radius) !important;
    }
    :where(.apex-auth-page .control:focus-within) { outline: 2px solid var(--apex-ui-brand) !important; outline-offset: 2px; }
    :where(.apex-auth-page .control input) { min-height: var(--apex-ui-control-height) !important; color: var(--apex-ui-field-ink) !important; background: transparent !important; }

    @media (max-width: 680px) {
        :where(.erp-main .select2-selection__rendered) { font-size: var(--apex-ui-control-mobile-font) !important; }
        :where(.select2-dropdown .select2-search__field) { font-size: var(--apex-ui-control-mobile-font) !important; }
        :where(.erp-main .acc-entry-lines table.acc-lines tbody tr td) { padding: 0 !important; border: 0 !important; }
        :where(.erp-main .acc-entry-lines .acc-col-x button) { min-height: 44px !important; min-width: 44px; }
        :where(.erp-main .je-editor > .acc-form-actions > .acc-btn) { min-height: 46px !important; }
        :where(.erp-main :is(input, select, textarea):not([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"])) { font-size: var(--apex-ui-control-mobile-font) !important; }
    }
    @media (prefers-reduced-motion: reduce) {
        :where(.erp-main :is(input, select, textarea, .btn, .acc-btn, .apex-ui-button, .select2-selection, .apex-panel, .apex-card, .acc-card, .apex-ui-card), .select2-dropdown .select2-search__field) { transition: none !important; }
    }
    :where(.apex-request-progress) {
        position: fixed; inset-inline-start: 20px; bottom: 20px; z-index: 2147482000;
        display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 40px);
        padding: 12px 18px !important; min-height: 46px !important;
        color: var(--apex-ui-field-ink) !important; background: var(--apex-ui-surface) !important;
        border: 1px solid var(--apex-ui-border-strong) !important; border-radius: var(--apex-ui-control-radius) !important;
        box-shadow: var(--apex-ui-card-shadow) !important; font-size: 14px !important;
    }
    :where(.apex-request-progress[hidden], .apex-request-error[hidden]) { display: none !important; }
    :where(.apex-request-progress__spinner) {
        flex: 0 0 20px; width: 20px; height: 20px !important;
        border: 2px solid var(--apex-ui-border-strong) !important; border-top-color: var(--apex-ui-brand) !important;
        border-radius: 50% !important; animation: apex-request-spin .8s linear infinite;
    }
    :where(.apex-request-error) {
        position: fixed; inset-inline-start: 20px; bottom: 20px; z-index: 2147482001;
        max-width: min(560px, calc(100vw - 40px)); padding: 14px 18px !important;
        color: #7a271a !important; background: #fffbfa !important;
        border: 1px solid #b42318 !important; border-radius: var(--apex-ui-control-radius) !important;
    }
    @keyframes apex-request-spin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { :where(.apex-request-progress__spinner) { animation: none; } }
    @media print {
        :where(#ApexAsyncProgress, .apex-request-progress, .apex-request-error) { display: none !important; }
        :where(.erp-main :is(.apex-ui-card, .apex-card, .acc-card)) { box-shadow: none !important; break-inside: avoid; }
    }
}

/* Common role navigation and screen help: required by both core and full pages. */
@layer apexPrimitives {
:where(body nav.wg-tabs) {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    overflow: visible !important;
}
:where(.wg-tabs__mine) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
}
:where(.wg-tabs__role) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 34px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: var(--apex-ui-subtle, #eef5f9) !important;
    color: var(--apex-ui-cyan, #0f766e) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
:where(.wg-tabs__role:hover) { text-decoration: underline !important; }
:where(.wg-tabs__more) { border-top: 1px dashed var(--apex-ui-line, #dbe6ee) !important; padding-top: 6px !important; }
:where(.wg-tabs__more > summary) {
    cursor: pointer !important;
    width: max-content !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    color: var(--apex-ui-muted, #64748b) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}
:where(.wg-tabs__more > summary:hover) { background: var(--apex-ui-subtle, #eef5f9) !important; color: var(--apex-ui-text, #0f172a) !important; }
:where(.wg-tabs__group) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 6px !important;
    padding: 6px 0 0 !important;
}
:where(.wg-tabs__group > span) {
    min-width: 170px !important;
    color: var(--apex-ui-muted, #64748b) !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
}
:where(.wg-help) {
    margin: 0 0 12px !important;
    border: 1px solid color-mix(in srgb, var(--apex-ui-cyan, #0f766e) 25%, var(--apex-ui-line, #dbe6ee) 75%) !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--apex-ui-cyan, #0f766e) 5%, var(--apex-ui-panel, #fff) 95%) !important;
    color: var(--apex-ui-text, #0f172a) !important;
}
:where(.wg-help > summary) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 12px !important;
    cursor: pointer !important;
    list-style: none !important;
    font-size: 13px !important;
}
:where(.wg-help > summary)::-webkit-details-marker { display: none !important; }
:where(.wg-help > summary > .bi) { color: var(--apex-ui-cyan, #0f766e) !important; font-size: 16px !important; }
:where(.wg-help__purpose) { flex: 1 !important; font-weight: 700 !important; line-height: 1.6 !important; }
:where(.wg-help__more) { color: var(--apex-ui-cyan, #0f766e) !important; font-size: 12px !important; font-weight: 800 !important; white-space: nowrap !important; }
:where(.wg-help[open] .wg-help__more)::after { content: " ▲" !important; }
:where(.wg-help__body) { padding: 0 12px 12px !important; }
:where(.wg-help dl), :where(.wg-card dl) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
}
:where(.wg-help dl > div), :where(.wg-card dl > div) {
    padding: 8px 10px !important;
    border-radius: 6px !important;
    background: var(--apex-ui-panel, #fff) !important;
    border: 1px solid var(--apex-ui-line, #dbe6ee) !important;
}
:where(.wg-help dt), :where(.wg-card dt) { color: var(--apex-ui-muted, #64748b) !important; font-size: 11.5px !important; font-weight: 800 !important; margin-bottom: 2px !important; }
:where(.wg-help dd), :where(.wg-card dd) { margin: 0 !important; font-size: 12.5px !important; line-height: 1.6 !important; }
:where(.wg-help__next) { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; margin-bottom: 8px !important; }
:where(.wg-help__next > span) { color: var(--apex-ui-muted, #64748b) !important; font-size: 12px !important; font-weight: 800 !important; }
:where(.wg-next) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    border: 1px solid var(--apex-ui-line, #dbe6ee) !important;
    background: var(--apex-ui-panel, #fff) !important;
    color: var(--apex-ui-text, #0f172a) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}
:where(.wg-next:hover) { border-color: var(--apex-ui-cyan, #0f766e) !important; color: var(--apex-ui-cyan, #0f766e) !important; }
:where(.wg-help__where) { margin: 0 !important; color: var(--apex-ui-muted, #64748b) !important; font-size: 12px !important; }
:where(.wg-help__where a) { color: var(--apex-ui-cyan, #0f766e) !important; font-weight: 800 !important; }


@media (max-width: 640px) {
 :where(.wg-tabs__group > span) { min-width: 100% !important; }
 :where(.wg-help > summary) { flex-wrap: wrap !important; }
}
}