:host,
:root {
    /* Spacing tokens based on core structural variables */
    --px-spacing-block-1: calc(var(--px-block-spacing-vertical) * .5);
    --px-spacing-inline-1: calc(var(--px-block-spacing-horizontal) * .5);
    --px-spacing-block-2: var(--px-block-spacing-vertical);
    --px-spacing-inline-2: var(--px-block-spacing-horizontal);
    --px-spacing-block-3: calc(var(--px-block-spacing-vertical) * 1.5);
    --px-spacing-inline-3: calc(var(--px-block-spacing-horizontal) * 1.5);

    /* Core Utility Color Variables */
    --px-primary-rgb: 60 113 247;
    --px-secondary-rgb: 93 107 137;
    --px-success-rgb: 40 167 69;
    --px-danger-rgb: 209 59 59;
    --px-warning-rgb: 255 193 7;
    --px-info-rgb: 13 202 240;
    --px-light-rgb: 248 249 250;
    --px-dark-rgb: 33 37 41;
    --px-black-rgb: 0 0 0;
    --px-white-rgb: 255 255 255;

    --px-warning: #ffc107;
    --px-info: #0dcaf0;
    --px-light: #f8f9fa;
    --px-dark: #212529;
    --px-black: #000;
    --px-white: #fff;

    /* Semantic Text Emphasis Tokens (Light Mode Defaults) */
    --px-primary-text-emphasis: #052c65;
    --px-secondary-text-emphasis: #2b2f32;
    --px-success-text-emphasis: #0a3622;
    --px-danger-text-emphasis: #58151c;
    --px-warning-text-emphasis: #664d03;
    --px-info-text-emphasis: #055160;
    --px-light-text-emphasis: #495057;
    --px-dark-text-emphasis: #212529; /* Optimized for higher readability contrast */

    --px-body-color: var(--px-color, #212529);
    --px-body-emphasis-color: #000;
    --px-body-secondary-color: rgba(33, 37, 41, .75);
    --px-body-tertiary-color: rgba(33, 37, 41, .5);
    --px-text-opacity: 1;
}

/* ==========================================================================
   Global Dark Theme Token Strategy
   ========================================================================== */

@media only screen and (prefers-color-scheme: dark) {
    :host(:not([data-theme])),
    :root:not([data-theme]) {
        --px-primary-text-emphasis: #6ea8fe;
        --px-secondary-text-emphasis: #a7acb1;
        --px-success-text-emphasis: #75b798;
        --px-danger-text-emphasis: #ea868f;
        --px-warning-text-emphasis: #ffda6a;
        --px-info-text-emphasis: #6edff6;
        --px-light-text-emphasis: #f8f9fa;
        --px-dark-text-emphasis: #dee2e6;
        --px-body-color: var(--px-color, #dee2e6);
        --px-body-emphasis-color: #fff;
        --px-body-secondary-color: rgba(222, 226, 230, .75);
        --px-body-tertiary-color: rgba(222, 226, 230, .5);
    }
}

[data-theme="dark"] {
    --px-primary-text-emphasis: #6ea8fe;
    --px-secondary-text-emphasis: #a7acb1;
    --px-success-text-emphasis: #75b798;
    --px-danger-text-emphasis: #ea868f;
    --px-warning-text-emphasis: #ffda6a;
    --px-info-text-emphasis: #6edff6;
    --px-light-text-emphasis: #f8f9fa;
    --px-dark-text-emphasis: #dee2e6;
    --px-body-color: var(--px-color, #dee2e6);
    --px-body-emphasis-color: #fff;
    --px-body-secondary-color: rgba(222, 226, 230, .75);
    --px-body-tertiary-color: rgba(222, 226, 230, .5);
}

/* ==========================================================================
   Margin Utility Helpers (Logical Properties)
   ========================================================================== */

.m-0 {
    margin: 0 !important;
}

.mt-0 {
    margin-block-start: 0 !important;
}

.mb-0 {
    margin-block-end: 0 !important;
}

.my-0 {
    margin-block: 0 !important;
}

.ms-0 {
    margin-inline-start: 0 !important;
}

.me-0 {
    margin-inline-end: 0 !important;
}

.mx-0 {
    margin-inline: 0 !important;
}

.m-1 {
    margin: var(--px-spacing-block-1) var(--px-spacing-inline-1) !important;
}

.mt-1 {
    margin-block-start: var(--px-spacing-block-1) !important;
}

.mb-1 {
    margin-block-end: var(--px-spacing-block-1) !important;
}

.my-1 {
    margin-block: var(--px-spacing-block-1) !important;
}

.ms-1 {
    margin-inline-start: var(--px-spacing-inline-1) !important;
}

.me-1 {
    margin-inline-end: var(--px-spacing-inline-1) !important;
}

.mx-1 {
    margin-inline: var(--px-spacing-inline-1) !important;
}

.m-2 {
    margin: var(--px-spacing-block-2) var(--px-spacing-inline-2) !important;
}

.mt-2 {
    margin-block-start: var(--px-spacing-block-2) !important;
}

.mb-2 {
    margin-block-end: var(--px-spacing-block-2) !important;
}

.my-2 {
    margin-block: var(--px-spacing-block-2) !important;
}

.ms-2 {
    margin-inline-start: var(--px-spacing-inline-2) !important;
}

.me-2 {
    margin-inline-end: var(--px-spacing-inline-2) !important;
}

.mx-2 {
    margin-inline: var(--px-spacing-inline-2) !important;
}

.m-3 {
    margin: var(--px-spacing-block-3) var(--px-spacing-inline-3) !important;
}

.mt-3 {
    margin-block-start: var(--px-spacing-block-3) !important;
}

.mb-3 {
    margin-block-end: var(--px-spacing-block-3) !important;
}

.my-3 {
    margin-block: var(--px-spacing-block-3) !important;
}

.ms-3 {
    margin-inline-start: var(--px-spacing-inline-3) !important;
}

.me-3 {
    margin-inline-end: var(--px-spacing-inline-3) !important;
}

.mx-3 {
    margin-inline: var(--px-spacing-inline-3) !important;
}

.mx-auto {
    margin-inline: auto !important;
}

/* ==========================================================================
   Padding Utility Helpers (Logical Properties)
   ========================================================================== */

.p-0 {
    padding: 0 !important;
}

.pt-0 {
    padding-block-start: 0 !important;
}

.pb-0 {
    padding-block-end: 0 !important;
}

.py-0 {
    padding-block: 0 !important;
}

.ps-0 {
    padding-inline-start: 0 !important;
}

.pe-0 {
    padding-inline-end: 0 !important;
}

.px-0 {
    padding-inline: 0 !important;
}

.p-1 {
    padding: var(--px-spacing-block-1) var(--px-spacing-inline-1) !important;
}

.pt-1 {
    padding-block-start: var(--px-spacing-block-1) !important;
}

.pb-1 {
    padding-block-end: var(--px-spacing-block-1) !important;
}

.py-1 {
    padding-block: var(--px-spacing-block-1) !important;
}

.ps-1 {
    padding-inline-start: var(--px-spacing-inline-1) !important;
}

.pe-1 {
    padding-inline-end: var(--px-spacing-inline-1) !important;
}

.px-1 {
    padding-inline: var(--px-spacing-inline-1) !important;
}

.p-2 {
    padding: var(--px-spacing-block-2) var(--px-spacing-inline-2) !important;
}

.pt-2 {
    padding-block-start: var(--px-spacing-block-2) !important;
}

.pb-2 {
    padding-block-end: var(--px-spacing-block-2) !important;
}

.py-2 {
    padding-block: var(--px-spacing-block-2) !important;
}

.ps-2 {
    padding-inline-start: var(--px-spacing-inline-2) !important;
}

.pe-2 {
    padding-inline-end: var(--px-spacing-inline-2) !important;
}

.px-2 {
    padding-inline: var(--px-spacing-inline-2) !important;
}

.p-3 {
    padding: var(--px-spacing-block-3) var(--px-spacing-inline-3) !important;
}

.pt-3 {
    padding-block-start: var(--px-spacing-block-3) !important;
}

.pb-3 {
    padding-block-end: var(--px-spacing-block-3) !important;
}

.py-3 {
    padding-block: var(--px-spacing-block-3) !important;
}

.ps-3 {
    padding-inline-start: var(--px-spacing-inline-3) !important;
}

.pe-3 {
    padding-inline-end: var(--px-spacing-inline-3) !important;
}

.px-3 {
    padding-inline: var(--px-spacing-inline-3) !important;
}


/* Gap utilities */
.gap-0 {
    gap: 0 !important;
}

.gap-1 {
    gap: var(--px-spacing-inline-1) !important;
}

.gap-2 {
    gap: var(--px-spacing-inline-2) !important;
}

.gap-3 {
    gap: var(--px-spacing-inline-3) !important;
}

/* ==========================================================================
   Typography State Helpers (Optimized Fallbacks)
   ========================================================================== */

.text-primary {
    color: rgb(var(--px-primary-rgb) / var(--px-text-opacity)) !important;
}

.text-primary-emphasis {
    color: var(--px-primary-text-emphasis) !important;
}

.text-secondary {
    color: rgb(var(--px-secondary-rgb) / var(--px-text-opacity)) !important;
}

.text-secondary-emphasis {
    color: var(--px-secondary-text-emphasis) !important;
}

.text-success {
    color: rgb(var(--px-success-rgb) / var(--px-text-opacity)) !important;
}

.text-success-emphasis {
    color: var(--px-success-text-emphasis) !important;
}

.text-danger {
    color: rgb(var(--px-danger-rgb) / var(--px-text-opacity)) !important;
}

.text-danger-emphasis {
    color: var(--px-danger-text-emphasis) !important;
}

.text-warning {
    color: rgb(var(--px-warning-rgb) / var(--px-text-opacity)) !important;
}

.text-warning-emphasis {
    color: var(--px-warning-text-emphasis) !important;
}

.text-info {
    color: rgb(var(--px-info-rgb) / var(--px-text-opacity)) !important;
}

.text-info-emphasis {
    color: var(--px-info-text-emphasis) !important;
}

.text-light {
    color: rgb(var(--px-light-rgb) / var(--px-text-opacity)) !important;
}

.text-light-emphasis {
    color: var(--px-light-text-emphasis) !important;
}

.text-dark {
    color: rgb(var(--px-dark-rgb) / var(--px-text-opacity)) !important;
}

.text-dark-emphasis {
    color: var(--px-dark-text-emphasis) !important;
}

.text-body {
    color: var(--px-body-color) !important;
}

.text-body-emphasis {
    color: var(--px-body-emphasis-color) !important;
}

.text-body-secondary {
    color: var(--px-body-secondary-color) !important;
}

.text-body-tertiary {
    color: var(--px-body-tertiary-color) !important;
}

.text-black {
    color: rgb(var(--px-black-rgb) / var(--px-text-opacity)) !important;
}

.text-white {
    color: rgb(var(--px-white-rgb) / var(--px-text-opacity)) !important;
}

.text-start {
    text-align: left !important;
}

.text-end {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}


/* ==========================================================================
   Structural Layout & Sizing Utilities
   ========================================================================== */

/* Display States */
.d-none {
    display: none !important;
}

.d-inline {
    display: inline !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-block {
    display: block !important;
}

.d-grid {
    display: grid !important;
}

.d-inline-grid {
    display: inline-grid !important;
}

.d-table {
    display: table !important;
}

.d-table-row {
    display: table-row !important;
}

.d-table-cell {
    display: table-cell !important;
}

.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

/* Flexbox Drivers */
.flex-fill {
    flex: 1 1 auto !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-row-reverse {
    flex-direction: row-reverse !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.flex-grow-0 {
    flex-grow: 0 !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.flex-shrink-1 {
    flex-shrink: 1 !important;
}

/* Flexbox Alignments */
.align-items-start {
    align-items: flex-start !important;
}

.align-items-center {
    align-items: center !important;
}

.align-items-end {
    align-items: flex-end !important;
}

.align-items-stretch {
    align-items: stretch !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-around {
    justify-content: space-around !important;
}

.justify-content-evenly {
    justify-content: space-evenly !important;
}

/* Floats & Positioning */
.float-start {
    float: left !important;
    float: inline-start !important;
}

.float-end {
    float: right !important;
    float: inline-end !important;
}

.float-none {
    float: none !important;
}

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

.position-static {
    position: static !important;
}

.position-relative {
    position: relative !important;
}

.position-absolute {
    position: absolute !important;
}

.position-fixed {
    position: fixed !important;
}

.position-sticky {
    position: sticky !important;
}

.top-0 {
    top: 0 !important;
}

.end-0 {
    right: 0 !important;
    inset-inline-end: 0 !important;
}

.bottom-0 {
    bottom: 0 !important;
}

.start-0 {
    left: 0 !important;
    inset-inline-start: 0 !important;
}

/* Dimensional Sizing Layout Matrix */
.w-20 {
    width: 20% !important;
}

.w-25 {
    width: 25% !important;
}

.w-30 {
    width: 30% !important;
}

.w-40 {
    width: 40% !important;
}

.w-50 {
    width: 50% !important;
}

.w-60 {
    width: 60% !important;
}

.w-75 {
    width: 75% !important;
}

.w-80 {
    width: 80% !important;
}

.w-100 {
    width: 100% !important;
}

.w-auto {
    width: auto !important;
}

.mw-100 {
    max-width: 100% !important;
}

.vw-100 {
    width: 100vw !important;
}

.min-vw-100 {
    min-width: 100vw !important;
}

@media (max-width: 575.98px) {
    .w-20, .w-25, .w-30, .w-40, .w-50, .w-60, .w-75, .w-80 {
        width: 100% !important;
    }
}

.h-25 {
    height: 25% !important;
}

.h-50 {
    height: 50% !important;
}

.h-75 {
    height: 75% !important;
}

.h-100 {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

.mh-100 {
    max-height: 100% !important;
}

.vh-100 {
    height: 100vh !important;
}

.min-vh-100 {
    min-height: 100vh !important;
}

/* ==========================================================================
   Responsive Mobile-First Breakpoint Matrix
   ========================================================================== */

/* SM Breakpoint (576px up) */
@media (min-width: 576px) {
    .d-sm-none {
        display: none !important;
    }

    .d-sm-inline {
        display: inline !important;
    }

    .d-sm-inline-block {
        display: inline-block !important;
    }

    .d-sm-block {
        display: block !important;
    }

    .d-sm-grid {
        display: grid !important;
    }

    .d-sm-flex {
        display: flex !important;
    }

    .d-sm-inline-flex {
        display: inline-flex !important;
    }
}

/* MD Breakpoint (768px up) */
@media (min-width: 768px) {
    .d-md-none {
        display: none !important;
    }

    .d-md-inline {
        display: inline !important;
    }

    .d-md-inline-block {
        display: inline-block !important;
    }

    .d-md-block {
        display: block !important;
    }

    .d-md-grid {
        display: grid !important;
    }

    .d-md-flex {
        display: flex !important;
    }

    .d-md-inline-flex {
        display: inline-flex !important;
    }
}

/* LG Breakpoint (992px up) */
@media (min-width: 992px) {
    .d-lg-none {
        display: none !important;
    }

    .d-lg-inline {
        display: inline !important;
    }

    .d-lg-inline-block {
        display: inline-block !important;
    }

    .d-lg-block {
        display: block !important;
    }

    .d-lg-grid {
        display: grid !important;
    }

    .d-lg-flex {
        display: flex !important;
    }

    .d-lg-inline-flex {
        display: inline-flex !important;
    }
}

/* XL Breakpoint (1200px up) */
@media (min-width: 1200px) {
    .d-xl-none {
        display: none !important;
    }

    .d-xl-inline {
        display: inline !important;
    }

    .d-xl-inline-block {
        display: inline-block !important;
    }

    .d-xl-block {
        display: block !important;
    }

    .d-xl-grid {
        display: grid !important;
    }

    .d-xl-flex {
        display: flex !important;
    }

    .d-xl-inline-flex {
        display: inline-flex !important;
    }
}

/* XXL Breakpoint (1400px up) */
@media (min-width: 1400px) {
    .d-xxl-none {
        display: none !important;
    }

    .d-xxl-inline {
        display: inline !important;
    }

    .d-xxl-inline-block {
        display: inline-block !important;
    }

    .d-xxl-block {
        display: block !important;
    }

    .d-xxl-grid {
        display: grid !important;
    }

    .d-xxl-flex {
        display: flex !important;
    }

    .d-xxl-inline-flex {
        display: inline-flex !important;
    }
}

.pagination.pagination {
    --px-pagination-padding-x: .95rem;
    --px-pagination-padding-y: .72rem;
    --px-pagination-font-size: 1rem;
    --px-pagination-color: #1473ff;
    --px-pagination-bg: #fff;
    --px-pagination-border-color: #dfe4ea;
    --px-pagination-hover-color: #0b5ed7;
    --px-pagination-hover-bg: #f8fafc;
    --px-pagination-active-color: #fff;
    --px-pagination-active-bg: #1473ff;
    --px-pagination-active-border-color: #1473ff;
    --px-pagination-disabled-color: #667085;
    --px-pagination-disabled-bg: #edf0f3;
    --px-pagination-disabled-border-color: #dfe4ea;
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    padding-left: 0;
    margin: 1.5rem auto 0;
    list-style: none;
    border-radius: .45rem
}

[data-theme=dark] .pagination.pagination {
    --px-pagination-color: #7db5ff;
    --px-pagination-bg: #1c212b;
    --px-pagination-border-color: #2a3140;
    --px-pagination-hover-color: #d8e9ff;
    --px-pagination-hover-bg: #202838;
    --px-pagination-active-color: #fff;
    --px-pagination-active-bg: #1473ff;
    --px-pagination-active-border-color: #4d9aff;
    --px-pagination-disabled-color: #7b8495;
    --px-pagination-disabled-bg: #171b24;
    --px-pagination-disabled-border-color: #202632
}

@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) .pagination.pagination {
        --px-pagination-color: #7db5ff;
        --px-pagination-bg: #1c212b;
        --px-pagination-border-color: #2a3140;
        --px-pagination-hover-color: #d8e9ff;
        --px-pagination-hover-bg: #202838;
        --px-pagination-active-color: #fff;
        --px-pagination-active-bg: #1473ff;
        --px-pagination-active-border-color: #4d9aff;
        --px-pagination-disabled-color: #7b8495;
        --px-pagination-disabled-bg: #171b24;
        --px-pagination-disabled-border-color: #202632
    }
}

.pagination .page-item {
    display: inline-flex;
    margin: 0 !important;
    padding: 0 !important
}

.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: var(--px-pagination-padding-y) var(--px-pagination-padding-x);
    color: var(--px-pagination-color);
    line-height: 1;
    text-decoration: none;
    background: var(--px-pagination-bg);
    border: 1px solid var(--px-pagination-border-color);
    border-radius: 0;
    box-shadow: none;
    margin: 0 !important
}

.pagination .page-item + .page-item .page-link {
    margin-left: -1px
}

.pagination .page-item + .page-item {
    margin-left: -1px !important
}

.pagination .page-item:first-child .page-link {
    border-top-left-radius: .45rem;
    border-bottom-left-radius: .45rem
}

.pagination .page-item:last-child .page-link {
    border-top-right-radius: .45rem;
    border-bottom-right-radius: .45rem
}

.pagination .page-link:hover {
    z-index: 2;
    color: var(--px-pagination-hover-color);
    background: var(--px-pagination-hover-bg)
}

.pagination .page-item.active > .page-link, .pagination .page-item.active > span.page-link {
    z-index: 3;
    color: var(--px-pagination-active-color);
    background: var(--px-pagination-active-bg);
    border-color: var(--px-pagination-active-border-color)
}

.pagination .page-item.disabled > .page-link, .pagination .page-item.disabled > span.page-link {
    color: var(--px-pagination-disabled-color);
    pointer-events: none;
    background: var(--px-pagination-disabled-bg);
    border-color: var(--px-pagination-disabled-border-color);
    opacity: 1
}

/* Safe utility compatibility helpers. */
.align-middle {
    vertical-align: middle !important;
}

.text-nowrap {
    white-space: nowrap !important;
}

.rounded {
    border-radius: var(--px-border-radius) !important;
}

.modal-lg:not(dialog) {
    width: min(64rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
}

dialog.modal-lg {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* CMS compatibility utilities. */
.lead {
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--px-muted-color, #6b7280)
}

.small {
    font-size: .875rem
}

.form-group {
    margin-block-end: 1rem
}

.invalid-feedback {
    display: block;
    margin-block-start: .25rem;
    color: var(--px-danger, #b42318);
    font-size: .875rem
}

.field-error {
    display: block;
    margin-block-start: .25rem;
    color: var(--px-danger, #b42318);
    font-size: .875rem
}

.notify:empty {
    display: none
}

.dropdown-end {
    inset-inline-end: 0;
    inset-inline-start: auto
}

.font-monospace {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

.min-150 {
    min-width: 150px
}

.min-h-76 {
    min-height: 76px
}

/* Form rows: desktop label/control layout, stacked on small screens. */
.form-row {
    display: flex;
    gap: var(--px-spacing-inline-2);
    align-items: flex-start;
    margin: 0 0 var(--px-spacing-block-2);
    padding: 0;
    border: 0
}

.form-row > label {
    flex: 0 0 12rem;
    margin: .55rem 0 0;
    font-weight: 600
}

.form-row > div {
    flex: 1;
    min-width: 0
}

.form-row small {
    display: block;
    margin-top: .35rem
}

@media (max-width: 768px) {
    .form-row {
        display: block
    }

    .form-row > label {
        display: block;
        margin: 0 0 .35rem
    }
}

.badge {
    --px-badge-padding-x: 0.65em;
    --px-badge-padding-y: 0.35em;
    --px-badge-font-size: 0.75em;
    --px-badge-font-weight: 700;
    --px-badge-color: #fff;
    --px-badge-bg: #6c757d;
    --px-badge-border-radius: var(--px-border-radius);

    display: inline-block;
    padding: var(--px-badge-padding-y) var(--px-badge-padding-x);
    font-size: var(--px-badge-font-size);
    font-weight: var(--px-badge-font-weight);
    line-height: 1;
    color: var(--px-badge-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: var(--px-badge-bg);
    border-radius: var(--px-badge-border-radius);
}

.badge:empty {
    display: none;
}

.badge-success {
    --px-badge-bg: #198754;
}

.badge-warning {
    --px-badge-bg: #ffc107;
    --px-badge-color: #111;
}

.badge-danger {
    --px-badge-bg: #dc3545;
}

.badge-info {
    --px-badge-bg: #0dcaf0;
    --px-badge-color: #111;
}

.badge-muted {
    --px-badge-bg: #6c757d;
}

@media (min-width: 992px) {
    .d-lg-table {
        display: table !important;
    }

    .d-lg-table-row {
        display: table-row !important;
    }

    .d-lg-table-cell {
        display: table-cell !important;
    }
}

@media (min-width: 576px) {
    .d-sm-table-cell {
        display: table-cell !important;
    }

    .d-sm-table-row {
        display: table-row !important;
    }

    .d-sm-table {
        display: table !important;
    }
}