.ui-button {
    min-height: var(--ctb-control-height);
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--ctb-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: transparent;
    color: var(--ctb-color-text);
    cursor: pointer;
    font: inherit;
    font-weight: 620;
    text-decoration: none;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        color 120ms ease;
}

.ui-button:focus-visible,
.ui-icon-button:focus-visible,
.ui-input:focus-visible,
.ui-select:focus-visible,
.ui-textarea:focus-visible,
.ui-checkbox:focus-visible,
.ui-radio:focus-visible {
    outline: 3px solid var(--ctb-focus-ring);
    outline-offset: 1px;
}

.ui-button:disabled,
.ui-button[aria-disabled="true"],
.ui-icon-button:disabled {
    opacity: 0.52;
    cursor: default;
}

.ui-button--primary {
    background: var(--ctb-color-primary);
    border-color: var(--ctb-color-primary);
    color: var(--ctb-color-surface);
}

.ui-button--primary:hover:not(:disabled) {
    background: var(--ctb-color-primary-hover);
    border-color: var(--ctb-color-primary-hover);
}

.ui-button--secondary {
    background: var(--ctb-color-surface);
    border-color: var(--ctb-color-border-strong);
    color: var(--ctb-color-text);
}

.ui-button--secondary:hover:not(:disabled) {
    background: var(--ctb-color-surface-soft);
}

.ui-button--danger {
    background: var(--ctb-color-danger);
    border-color: var(--ctb-color-danger);
    color: var(--ctb-color-surface);
}

.ui-button--danger:hover:not(:disabled) {
    background: var(--ctb-color-danger-hover);
    border-color: var(--ctb-color-danger-hover);
}

.ui-button--text {
    padding-right: 8px;
    padding-left: 8px;
    color: var(--ctb-color-primary);
}

.ui-button--text:hover:not(:disabled) {
    background: var(--ctb-color-primary-soft);
}

.ui-button--compact {
    min-height: 32px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 12px;
}

.ui-button.is-loading {
    cursor: progress;
}

.ui-icon-button {
    width: var(--ctb-control-height);
    height: var(--ctb-control-height);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--ctb-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--ctb-color-muted);
    cursor: pointer;
}

.ui-icon-button:hover:not(:disabled) {
    background: var(--ctb-color-surface-soft);
    color: var(--ctb-color-text);
}

.ui-card {
    border: 1px solid var(--ctb-color-border);
    border-radius: var(--ctb-radius-md);
    overflow: hidden;
    background: var(--ctb-color-surface);
}

.ui-card--compact .ui-card__header,
.ui-card--compact .ui-card__body {
    padding: 14px 16px;
}

.ui-card--flush .ui-card__body {
    padding: 0;
}

.ui-card__header {
    min-height: 58px;
    padding: 16px var(--ctb-card-padding-x);
    border-bottom: 1px solid var(--ctb-color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.ui-card__heading {
    min-width: 0;
}

.ui-card__title {
    margin: 0;
    color: var(--ctb-color-text);
    font-size: 15px;
    font-weight: 650;
}

.ui-card__subtitle {
    margin: 3px 0 0;
    color: var(--ctb-color-muted);
    font-size: 12px;
}

.ui-card__body {
    padding: var(--ctb-card-padding-y) var(--ctb-card-padding-x);
}

.ui-alert {
    padding: 12px 14px;
    border: 1px solid var(--ctb-color-border);
    border-radius: var(--ctb-radius-md);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
}

.ui-alert__mark {
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
    font-weight: 700;
}

.ui-alert--info {
    border-color: var(--ctb-color-primary-soft-border);
    background: var(--ctb-color-info-soft);
    color: var(--ctb-color-info);
}

.ui-alert--success {
    border-color: var(--ctb-color-success-border);
    background: var(--ctb-color-success-soft);
    color: var(--ctb-color-success);
}

.ui-alert--warning {
    border-color: var(--ctb-color-warning-border);
    background: var(--ctb-color-warning-soft);
    color: var(--ctb-color-warning);
}

.ui-alert--danger {
    border-color: var(--ctb-color-danger-border);
    background: var(--ctb-color-danger-soft);
    color: var(--ctb-color-danger);
}

.ui-badge {
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ctb-color-border);
    color: var(--ctb-color-text-secondary);
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
}

.ui-badge--success {
    background: var(--ctb-color-success-soft);
    color: var(--ctb-color-success);
}

.ui-badge--warning {
    background: var(--ctb-color-warning-soft);
    color: var(--ctb-color-warning);
}

.ui-badge--danger {
    background: var(--ctb-color-danger-soft);
    color: var(--ctb-color-danger);
}

.ui-badge--info {
    background: var(--ctb-color-info-soft);
    color: var(--ctb-color-info);
}

.ui-badge--neutral {
    background: var(--ctb-color-surface-muted);
    color: var(--ctb-color-text-secondary);
}

.ui-empty-state {
    min-height: 260px;
    padding: 38px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ui-empty-state__icon {
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ctb-color-primary-soft);
    color: var(--ctb-color-primary);
    font-weight: 750;
}

.ui-empty-state__title {
    margin: 0 0 6px;
    color: var(--ctb-color-text);
    font-size: 16px;
    font-weight: 650;
}

.ui-empty-state__message {
    max-width: 520px;
    margin: 0;
    color: var(--ctb-color-muted);
}

.ui-empty-state__actions {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ui-field {
    display: grid;
    align-content: start;
    gap: 6px;
}

.ui-field + .ui-field {
    margin-top: 16px;
}

.ui-label {
    color: var(--ctb-color-text-secondary);
    font-size: 12px;
    font-weight: 650;
}

.ui-required {
    color: var(--ctb-color-danger);
}

.ui-input,
.ui-select,
.ui-textarea {
    width: 100%;
    border: 1px solid var(--ctb-color-border-strong);
    border-radius: var(--ctb-radius-sm);
    background: var(--ctb-color-surface);
    color: var(--ctb-color-text);
    font: inherit;
}

.ui-input,
.ui-select {
    height: var(--ctb-control-height);
    min-height: var(--ctb-control-height);
    padding: 0 11px;
}

.ui-textarea {
    min-height: 96px;
    padding: 9px 11px;
    resize: vertical;
}

.ui-input:hover:not(:disabled),
.ui-select:hover:not(:disabled),
.ui-textarea:hover:not(:disabled) {
    border-color: var(--ctb-color-border-strong);
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
    border-color: var(--ctb-color-primary);
}

.ui-input:disabled,
.ui-select:disabled,
.ui-textarea:disabled {
    background: var(--ctb-color-surface-muted);
    color: var(--ctb-color-muted-soft);
}

.ui-help {
    color: var(--ctb-color-muted);
    font-size: 11px;
}

.ui-error {
    color: var(--ctb-color-danger);
    font-size: 11px;
}

.ui-field.has-error .ui-input,
.ui-field.has-error .ui-select,
.ui-field.has-error .ui-textarea {
    border-color: var(--ctb-color-danger-accent);
}

.ui-choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ctb-color-text-secondary);
}

.ui-checkbox,
.ui-radio {
    width: 16px;
    height: 16px;
    accent-color: var(--ctb-color-primary);
}

.ui-modal-backdrop {
    position: fixed;
    z-index: 1000;
    inset: 0;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    background: var(--ctb-overlay-backdrop);
}

.ui-modal {
    width: min(100%, 620px);
    flex: 0 0 auto;
    max-height: none;
    margin-block: auto;
    border: 1px solid var(--ctb-color-border);
    border-radius: var(--ctb-radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ctb-color-surface);
    box-shadow: var(--ctb-shadow-modal);
}

.ui-modal--small {
    width: min(100%, 440px);
}

.ui-modal--medium {
    width: min(100%, 620px);
}

.ui-modal--large {
    width: min(100%, 860px);
}

.ui-modal__header {
    flex: 0 0 auto;
    min-height: 58px;
    padding: 13px 16px 13px 20px;
    border-bottom: 1px solid var(--ctb-color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ui-modal__title {
    margin: 0;
    color: var(--ctb-color-text);
    font-size: 16px;
    font-weight: 650;
}

.ui-modal__body {
    min-height: 0;
    padding: 20px;
    overflow: visible;
}

.ui-modal__footer {
    flex: 0 0 auto;
    min-height: 62px;
    padding: 12px 16px;
    border-top: 1px solid var(--ctb-color-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.ui-flex-spacer {
    flex: 1 1 auto;
}

body.ui-modal-open {
    overflow: hidden;
}

.ui-toast-region {
    position: fixed;
    z-index: 1100;
    top: 18px;
    right: 18px;
    width: min(360px, calc(100vw - 36px));
    display: grid;
    gap: 8px;
    pointer-events: none;
}

.ui-toast {
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid var(--ctb-color-border);
    border-radius: var(--ctb-radius-md);
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
    background: var(--ctb-color-surface);
    box-shadow: var(--ctb-shadow-menu);
    pointer-events: auto;
}

.ui-toast__mark {
    width: 22px;
    text-align: center;
    font-weight: 750;
}

.ui-toast__message {
    color: var(--ctb-color-text-secondary);
    font-size: 13px;
}

.ui-toast--success .ui-toast__mark {
    color: var(--ctb-color-success);
}

.ui-toast--danger .ui-toast__mark {
    color: var(--ctb-color-danger);
}

.ui-toast--warning .ui-toast__mark {
    color: var(--ctb-color-warning);
}

.ui-toast--info .ui-toast__mark {
    color: var(--ctb-color-info);
}

@media (max-width: 680px) {
    .ui-modal-backdrop {
        padding: 12px;
    }

    .ui-modal__body {
        padding: 16px;
    }

    .ui-modal__footer {
        flex-wrap: wrap;
    }

}

@media (prefers-reduced-motion: reduce) {
    .ui-button {
        transition: none;
    }
}


/* CTB-03.1 — reusable settings/form layout */

.ui-settings-stack {
    display: grid;
    gap: 18px;
}

.ui-form-grid {
    display: grid;
    gap: 16px;
}

.ui-form-grid + .ui-form-grid,
.ui-form-grid + .ui-field,
.ui-field + .ui-form-grid {
    margin-top: 16px;
}

.ui-form-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-form-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-form-grid__wide {
    grid-column: 1 / -1;
}

/* Fields inside a grid are aligned by the grid itself; sibling vertical spacing must not offset column 2. */
.ui-form-grid > .ui-field + .ui-field {
    margin-top: 0;
}

.ui-form-actions {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--ctb-color-border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ui-field--medium {
    max-width: 520px;
}

.ui-field--compact {
    width: min(220px, 100%);
}

.ui-password-requirements {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--ctb-color-border);
    border-radius: var(--ctb-radius-md);
    background: var(--ctb-color-surface-soft);
    color: var(--ctb-color-text-tertiary);
    font-size: 12px;
}

.ui-password-requirements strong {
    display: block;
    margin-bottom: 5px;
    color: var(--ctb-color-text-secondary);
}

.ui-password-requirements ul {
    margin: 0;
    padding-left: 18px;
}

.ui-card__body > .ui-alert {
    margin-bottom: 16px;
}

@media (max-width: 680px) {
    .ui-form-grid--2 {
        grid-template-columns: 1fr;
    }

    .ui-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-form-actions .ui-button {
        width: 100%;
    }
}

/* CTB-02.5 — transient notifications aligned with app container */

.ui-toast-region {
    top: calc(
        var(--ctb-layout-header-height, 68px)
        + var(--ctb-layout-nav-height, 48px)
        + 14px
    );
    right: max(
        var(--ctb-layout-gutter, 24px),
        calc(
            (
                100vw
                - var(--ctb-layout-container-max, 1320px)
            )
            / 2
        )
    );
    width: min(
        340px,
        calc(
            100vw
            - (
                var(--ctb-layout-gutter, 24px)
                * 2
            )
        )
    );
}

.ui-toast {
    min-height: 44px;
}

@media (max-width: 680px) {
    .ui-toast-region {
        top: calc(
            var(--ctb-layout-header-height, 60px)
            + 10px
        );
        right: var(--ctb-layout-gutter, 14px);
        left: var(--ctb-layout-gutter, 14px);
        width: auto;
    }
}

/* CTB-03.2 — reusable form sections inside one card */

.ui-form-section + .ui-form-section {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--ctb-color-border);
}

.ui-form-section__heading {
    margin-bottom: 16px;
}

.ui-form-section__heading h3 {
    margin: 0;
    color: var(--ctb-color-text-strong);
    font-size: 14px;
    font-weight: 680;
}

.ui-form-section__heading p {
    margin: 4px 0 0;
    color: var(--ctb-color-muted);
    font-size: 12px;
    line-height: 1.5;
}

/* CTB-03.3 — fiscal settings */

.ui-choice-group {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.ui-choice-group > .ui-label {
    width: 100%;
    margin-bottom: 2px;
}

.ui-choice-group + .ui-field {
    margin-top: 16px;
}

.ui-form-grid--compact {
    max-width: 620px;
}

@media (max-width: 680px) {
    .ui-choice-group {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}


/* CTB-03.4.1 — centralized settings home */

.ui-settings-home {
    display: grid;
    gap: 18px;
}

.ui-settings-links {
    display: grid;
    gap: 8px;
}

.ui-settings-link {
    min-height: 58px;
    padding: 11px 12px;
    border: 1px solid var(--ctb-color-border);
    border-radius: var(--ctb-radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--ctb-color-surface);
    color: var(--ctb-color-text);
    text-decoration: none;
}

.ui-settings-link:hover:not(.is-disabled) {
    border-color: var(--ctb-color-border-strong);
    background: var(--ctb-color-surface-soft);
}

.ui-settings-link:focus-visible {
    outline: 3px solid var(--ctb-focus-ring-soft);
    outline-offset: 1px;
}

.ui-settings-link > span:first-child {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.ui-settings-link strong {
    font-size: 13px;
    font-weight: 650;
}

.ui-settings-link small {
    color: var(--ctb-color-muted);
    font-size: 12px;
}

.ui-settings-link.is-disabled {
    color: var(--ctb-color-muted);
    cursor: default;
}

@media (max-width: 680px) {
    .ui-settings-link {
        align-items: flex-start;
    }
}


/* CTB-04.1 — currencies, rates and reusable price calculator */

.ui-currencies {
    display: grid;
    gap: 18px;
}

.ui-currency-base {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
    gap: 24px;
    align-items: start;
}

.ui-currency-base > div:first-child {
    display: grid;
    gap: 5px;
}

.ui-currency-base > div:first-child strong {
    color: var(--ctb-color-text);
    font-size: 18px;
    font-weight: 700;
}

.ui-currency-base > div:first-child small,
.ui-price-calculator__summary small {
    color: var(--ctb-color-muted);
    font-size: 12px;
    line-height: 1.5;
}

.ui-currency-base__action {
    display: grid;
    gap: 7px;
}

.ui-inline-control,
.ui-money-input {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(100px, auto);
    gap: 8px;
}

.ui-money-input {
    grid-template-columns: 96px minmax(0, 1fr);
}

.ui-price-calculator {
    max-width: 760px;
    display: grid;
    gap: 12px;
}

.ui-price-calculator__row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.ui-price-calculator__summary {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--ctb-color-border);
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px 14px;
    align-items: baseline;
    justify-content: start;
}

.ui-price-calculator__summary strong {
    color: var(--ctb-color-primary);
    font-size: 18px;
}

.ui-price-calculator__summary small {
    grid-column: 1 / -1;
}

.ui-form-note {
    margin: 0 0 14px;
    color: var(--ctb-color-text);
    font-size: 13px;
    font-weight: 650;
}

.ui-empty-state--compact {
    min-height: 160px;
}

@media (max-width: 760px) {
    .ui-currency-base,
    .ui-price-calculator__row {
        grid-template-columns: 1fr;
    }
}

/* Structural primitives — shared by configuration and future business modules. */

.ui-stack {
    display: grid;
    gap: var(--ctb-space-4);
}

.ui-stack--sm {
    gap: var(--ctb-space-2);
}

.ui-stack--lg {
    gap: 18px;
}

.ui-cluster {
    display: flex;
    align-items: center;
    gap: var(--ctb-space-4);
}

.ui-cluster--between {
    justify-content: space-between;
}

.ui-cluster--end {
    justify-content: flex-end;
}

.ui-cluster--wrap {
    flex-wrap: wrap;
}

/* Mixed form controls/actions align against the control baseline, never against the label block. */
.ui-cluster--form-end {
    align-items: flex-end;
}

.ui-cluster--form-end > .ui-button {
    flex: 0 0 auto;
}

/* Tax-rule behavior that is genuinely domain-specific. */
.ui-tax-rule-advanced {
    margin-top: 18px;
    padding-top: 2px;
}

.ui-tax-rule-form .ui-form-section:first-child {
    padding-top: 0;
}

.ui-tax-rule-form [data-tax-rule-step] {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}



@media (max-width: 620px) {
    .ui-cluster--responsive {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Shared form and summary primitives — one visual grammar across business modules. */
.ui-form {
    width: 100%;
    min-width: 0;
}

.ui-check-row,
.ui-check {
    min-height: var(--ctb-control-height);
    display: inline-flex;
    align-items: center;
    gap: var(--ctb-space-2);
    color: var(--ctb-color-text-secondary);
    font-size: 13px;
    cursor: pointer;
}

.ui-check-row > span,
.ui-check > span {
    line-height: 1.35;
}

.ui-form-grid + .ui-check-row,
.ui-form-grid + .ui-check {
    margin-top: var(--ctb-space-4);
}


.ui-content-inset {
    padding-right: var(--ctb-card-padding-x);
    padding-left: var(--ctb-card-padding-x);
}

.ui-content-block-inset {
    padding-top: var(--ctb-space-3);
    padding-bottom: var(--ctb-space-3);
}

.ui-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ctb-space-4);
    align-items: start;
}

.ui-overview-grid > .ui-card {
    min-width: 0;
}

@media (max-width: 920px) {
    .ui-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .ui-content-inset {
        padding-right: var(--ctb-space-2);
        padding-left: var(--ctb-space-2);
    }
}

.ui-detail-grid,
.ui-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--ctb-space-3);
}

.ui-detail-grid > .ui-detail-item,
.ui-summary-item {
    min-width: 0;
    min-height: 76px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--ctb-color-border);
    border-radius: var(--ctb-radius-md);
    display: grid;
    align-content: center;
    gap: var(--ctb-space-1);
    background: var(--ctb-color-surface-soft);
}

.ui-detail-grid > .ui-detail-item dt,
.ui-summary-item__label {
    color: var(--ctb-color-muted);
    font-size: 11px;
    font-weight: 650;
}

.ui-detail-grid > .ui-detail-item dd {
    margin: 0;
}

.ui-detail-grid > .ui-detail-item dd > strong,
.ui-summary-item__value {
    color: var(--ctb-color-text);
    font-size: 16px;
    font-weight: 720;
}

.ui-filter-grid {
    display: grid;
    grid-template-columns: minmax(120px, 160px) repeat(2, minmax(150px, 220px)) minmax(max-content, 1fr);
    gap: var(--ctb-space-3) var(--ctb-space-4);
    align-items: end;
}

.ui-filter-grid__label {
    min-height: var(--ctb-control-height);
    display: flex;
    align-items: center;
    color: var(--ctb-color-text);
    font-size: 13px;
    font-weight: 680;
}

.ui-filter-grid__action {
    align-self: end;
    justify-self: start;
}

.ui-form-section__head {
    margin-bottom: var(--ctb-space-4);
}

.ui-form-section__head h3,
.ui-form-section__head strong {
    margin: 0;
    color: var(--ctb-color-text-strong);
    font-size: 14px;
    font-weight: 680;
}

.ui-empty-state__description {
    margin: 0;
    max-width: 560px;
    color: var(--ctb-color-muted);
    font-size: 13px;
    line-height: 1.5;
}

.ui-table-cell--emphasis {
    color: var(--ctb-color-text);
    font-weight: 680;
}

/* Guided flows — reusable stepper, actions and review summary. */

.ui-stepper {
    margin-bottom: var(--ctb-space-5);
    padding-bottom: var(--ctb-space-4);
    border-bottom: 1px solid var(--ctb-color-border);
}

.ui-stepper__list {
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--ctb-space-2);
    overflow-x: auto;
    list-style: none;
}

.ui-stepper__item {
    padding: 6px 9px;
    border-radius: var(--ctb-radius-sm);
    display: block;
    color: var(--ctb-color-muted);
    font-size: 11px;
    white-space: nowrap;
}

.ui-stepper__item.is-current {
    background: var(--ctb-color-primary-soft);
    color: var(--ctb-color-primary);
    font-weight: 700;
}

.ui-stepper__item.is-complete {
    color: var(--ctb-color-text);
}

.ui-stepper__meta {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ctb-space-3);
    color: var(--ctb-color-muted);
    font-size: 11px;
}


.ui-review-list {
    margin: 0;
    display: grid;
    gap: 0;
}

.ui-review-list > div {
    padding: 10px 0;
    border-bottom: 1px solid var(--ctb-color-border);
    display: grid;
    grid-template-columns: minmax(130px, 0.38fr) minmax(0, 1fr);
    gap: var(--ctb-space-4);
}

.ui-review-list > div:last-child {
    border-bottom: 0;
}

.ui-review-list dt {
    color: var(--ctb-color-muted);
    font-size: 12px;
    font-weight: 650;
}

.ui-review-list dd {
    margin: 0;
    color: var(--ctb-color-text);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 620px) {
    .ui-stepper__meta {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-review-list > div {
        grid-template-columns: 1fr;
        gap: var(--ctb-space-1);
    }
}

/* Reusable anchored action menus. Panels are rendered in the top layer/body, never inside clipped table overflow. */
.ui-action-menu__panel {
    position: fixed;
    z-index: 1200;
    min-width: 172px;
    max-width: min(280px, calc(100vw - 16px));
    margin: 0;
    padding: var(--ctb-space-1);
    border: 1px solid var(--ctb-color-border);
    border-radius: var(--ctb-radius-md);
    background: var(--ctb-color-surface);
    box-shadow: var(--ctb-shadow-menu-strong);
}

.ui-action-menu__panel[hidden] {
    display: none;
}

.ui-action-menu__panel:popover-open {
    display: block;
}

.ui-action-menu-trigger[aria-expanded="true"] {
    border-color: var(--ctb-color-primary-soft-border);
    background: var(--ctb-color-primary-soft);
    color: var(--ctb-color-primary);
}

.ui-action-menu__item {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--ctb-radius-sm);
    display: flex;
    align-items: center;
    background: transparent;
    color: var(--ctb-color-text-secondary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ui-action-menu__item:hover,
.ui-action-menu__item:focus-visible {
    background: var(--ctb-color-surface-hover);
    color: var(--ctb-color-text);
    outline: 0;
}

.ui-action-menu__item--danger {
    color: var(--ctb-color-danger);
}

.ui-action-menu__item--danger:hover,
.ui-action-menu__item--danger:focus-visible {
    background: var(--ctb-color-danger-soft);
    color: var(--ctb-color-danger-hover);
}

/* Reusable native color input: same control height, specialized inner padding only. */
.ui-input--color {
    padding: 4px;
    cursor: pointer;
}

/* CTB-PR-03 — checklist sin viewport vertical interno; crece con el formulario. */
.ui-check-list {
    min-height: var(--ctb-control-height);
    padding: 10px 12px;
    border: 1px solid var(--ctb-color-border-strong);
    border-radius: var(--ctb-radius-sm);
    background: var(--ctb-color-surface);
    display: grid;
    gap: 8px;
}

.ui-check-list:empty::before {
    content: 'No hay opciones disponibles.';
    color: var(--ctb-color-muted);
    font-size: 12px;
}

.ui-attribute-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
}

@media (max-width: 680px) {
    .ui-attribute-option-grid {
        grid-template-columns: 1fr;
    }
}

.ui-tabs--form {
    gap: var(--ctb-space-5);
}

.ui-tabs--form > .ui-tabs__list {
    padding-inline: 0;
}

.ui-tabs--form > .ui-tabs__panel > .ui-form-section:first-child {
    padding-top: 0;
}

/* CTB-07.5.4A — hierarchical category selector inside catalog item forms. */
.ui-catalog-category-tree-head {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ctb-space-2);
}

.ui-catalog-category-tree-actions {
    display: flex;
    align-items: center;
    gap: var(--ctb-space-1);
}

/* CTB-PR-03 — el árbol crece con el formulario; el scroll pertenece a la página/overlay. */
.ui-catalog-category-tree {
    padding: 8px 10px;
    border: 1px solid var(--ctb-color-border-strong);
    border-radius: var(--ctb-radius-sm);
    background: var(--ctb-color-surface);
}

.ui-catalog-category-tree:empty::before {
    content: 'No hay categorías disponibles.';
    color: var(--ctb-color-muted);
    font-size: 12px;
}

.ui-catalog-category-tree__item {
    min-width: 0;
}

.ui-catalog-category-tree__row {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ui-catalog-category-tree__children {
    margin-left: 13px;
    padding-left: 14px;
    border-left: 1px solid var(--ctb-color-border);
}

.ui-catalog-category-tree__toggle,
.ui-catalog-category-tree__toggle-spacer {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}

.ui-catalog-category-tree__toggle {
    padding: 0;
    border: 0;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: transparent;
    color: var(--ctb-color-muted);
    cursor: pointer;
}

.ui-catalog-category-tree__toggle:hover,
.ui-catalog-category-tree__toggle:focus-visible {
    background: var(--ctb-color-surface-hover);
    color: var(--ctb-color-text);
    outline: 0;
}

.ui-catalog-category-tree__toggle span {
    display: block;
    font-size: 20px;
    line-height: 1;
    transition: transform 120ms ease;
}

.ui-catalog-category-tree__toggle.is-expanded span {
    transform: rotate(90deg);
}

.ui-catalog-category-tree__choice {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ctb-color-text-secondary);
    font-size: 13px;
    cursor: pointer;
}

.ui-catalog-category-tree__choice span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-catalog-category-tree__choice:has(input:checked) {
    color: var(--ctb-color-text);
    font-weight: 650;
}

.ui-catalog-category-tree__choice:has(input:disabled) {
    color: var(--ctb-color-muted);
    cursor: not-allowed;
}

@media (max-width: 680px) {
    .ui-catalog-category-tree-head {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* CTB-14.8.1 — cross-module responsive form normalization. */
@media (max-width: 860px) {
    .ui-form-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-filter-grid {
        grid-template-columns: minmax(110px, 140px) repeat(2, minmax(0, 1fr));
    }

    .ui-filter-grid__action {
        grid-column: 2 / -1;
    }
}

@media (max-width: 620px) {
    .ui-form-grid--3,
    .ui-filter-grid {
        grid-template-columns: 1fr;
    }

    .ui-filter-grid__label,
    .ui-filter-grid__action {
        grid-column: auto;
    }

    .ui-filter-grid__label {
        min-height: auto;
        padding-top: var(--ctb-space-2);
    }

    .ui-cluster--form-end {
        align-items: stretch;
    }
}

@media (max-width: 680px) {
    .ui-card__header,
    .ui-card__body {
        padding-left: var(--ctb-space-4);
        padding-right: var(--ctb-space-4);
    }
}