/*
 * Cloudberry component contract.
 *
 * This file is loaded after page-layout styles and is the authoritative source
 * for typography, actions, forms, cards, tables, tabs, alerts, and dialogs.
 * Page styles may position components, but must not redefine their appearance.
 */

/* Typography */
html.cb-ui body,
html.cb-public-ui body {
    font-family: var(--cb-font-body) !important;
    font-size: var(--cb-text-body) !important;
    line-height: var(--cb-line-body) !important;
}

html.cb-ui h1,
html.cb-ui h2,
html.cb-ui h3,
html.cb-ui h4,
html.cb-ui h5,
html.cb-ui h6,
html.cb-public-ui h1,
html.cb-public-ui h2,
html.cb-public-ui h3,
html.cb-public-ui h4,
html.cb-public-ui h5,
html.cb-public-ui h6 {
    font-family: var(--cb-font-display) !important;
    font-weight: 600;
    letter-spacing: -0.025em;
}

html.cb-ui .cb-display-title,
html.cb-public-ui .cb-display-title {
    margin: 0;
    font-size: var(--cb-text-display-title) !important;
    line-height: var(--cb-line-display-title) !important;
    letter-spacing: -0.045em;
}

html.cb-ui .cb-page-title,
html.cb-ui .page-title,
html.cb-public-ui .cb-page-title,
html.cb-public-ui .cb-public-title {
    margin: 0;
    font-size: var(--cb-text-page-title) !important;
    line-height: var(--cb-line-page-title) !important;
    font-weight: 600 !important;
    letter-spacing: -0.04em !important;
}

html.cb-ui .cb-section-title,
html.cb-public-ui .cb-section-title {
    margin: 0;
    font-size: var(--cb-text-section-title) !important;
    line-height: var(--cb-line-section-title) !important;
    letter-spacing: -0.03em;
}

html.cb-ui .card-title,
html.cb-ui .cb-card-title,
html.cb-public-ui .card-title,
html.cb-public-ui .cb-card-title {
    margin: 0;
    font-size: var(--cb-text-card-title) !important;
    line-height: var(--cb-line-card-title) !important;
    font-weight: 650 !important;
    letter-spacing: -0.02em !important;
}

html.cb-ui .modal-title,
html.cb-public-ui .modal-title {
    margin: 0;
    font-size: var(--cb-text-modal-title) !important;
    line-height: var(--cb-line-modal-title) !important;
    font-weight: 650 !important;
    letter-spacing: -0.025em !important;
}

html.cb-ui .form-label,
html.cb-public-ui .form-label {
    margin-bottom: 0.4rem;
    font-size: var(--cb-text-label) !important;
    line-height: var(--cb-line-label) !important;
    font-weight: 720 !important;
    letter-spacing: 0;
}

html.cb-ui .form-hint,
html.cb-ui .cb-supporting-text,
html.cb-ui small,
html.cb-public-ui .form-hint,
html.cb-public-ui .cb-supporting-text,
html.cb-public-ui small {
    font-size: var(--cb-text-supporting) !important;
    line-height: var(--cb-line-supporting) !important;
}

/* AI-assisted text actions follow the field they affect so the edit flow stays clear. */
html.cb-ui .cb-magic-rewrite-row,
html.cb-public-ui .cb-magic-rewrite-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--cb-space-2);
    margin-top: var(--cb-space-2);
}

html.cb-ui .cb-magic-rewrite-row [data-cb-action="ai"],
html.cb-public-ui .cb-magic-rewrite-row [data-cb-action="ai"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

html.cb-ui .cb-magic-rewrite-row [data-cb-action="ai"] svg,
html.cb-public-ui .cb-magic-rewrite-row [data-cb-action="ai"] svg {
    width: var(--cb-icon-standard);
    height: var(--cb-icon-standard);
    fill: none;
    stroke: currentColor;
}

html.cb-ui .cb-metadata,
html.cb-ui .page-pretitle,
html.cb-ui .cb-page-eyebrow,
html.cb-public-ui .cb-metadata,
html.cb-public-ui .cb-public-eyebrow {
    font-size: var(--cb-text-metadata) !important;
    line-height: var(--cb-line-metadata) !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
}

/* Page and section headers */
html.cb-ui .cb-page-header,
html.cb-public-ui .cb-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--cb-space-6);
    width: 100%;
    margin: 0 0 var(--cb-space-6);
}

/* The authenticated shell owns the visible page title in its persistent top bar.
   Shared page-header fragments remain in templates for compatibility, but are not
   rendered as a second title band above the operational content. */
html.cb-ui .page-wrapper [data-cb-page-header] {
    display: none !important;
}

.cb-page-header-copy {
    min-width: 0;
}

.cb-page-header-actions,
.cb-section-header-actions,
.cb-action-bar,
.cb-modal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cb-action-gap);
}

.cb-page-header-actions,
.cb-section-header-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
}

html.cb-ui .cb-page-description,
html.cb-public-ui .cb-page-description {
    max-width: 48rem;
    margin: var(--cb-space-2) 0 0;
    font-size: var(--cb-text-body);
    line-height: var(--cb-line-body);
}

.cb-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cb-space-4);
    margin-bottom: var(--cb-space-4);
}

.cb-section-description {
    max-width: 48rem;
    margin: var(--cb-space-1) 0 0;
    font-size: var(--cb-text-supporting);
    line-height: var(--cb-line-supporting);
}

.cb-action-bar {
    justify-content: flex-end;
    min-height: var(--cb-control-standard);
}

.cb-action-bar.is-sticky {
    position: sticky;
    top: calc(var(--cb-topbar-height) + var(--cb-space-2));
    z-index: 20;
    padding: var(--cb-space-2);
    border-radius: var(--cb-radius-md);
    backdrop-filter: blur(18px);
}

/* Legacy page toolbars are promoted into one shared, responsive action surface. */
html.cb-ui .cb-page-utility-bar {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 0 var(--cb-space-6);
    padding: var(--cb-space-3) var(--cb-space-4);
    background: var(--cb-surface-1-elevated);
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius-lg);
    box-shadow: var(--cb-shadow-sm);
}

html.cb-ui .cb-page-utility-bar > * {
    width: 100%;
}

/* Actions */
html.cb-ui .btn,
html.cb-public-ui .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cb-action-gap);
    min-height: var(--cb-control-standard) !important;
    padding: 0.625rem 0.95rem !important;
    border-width: 1px;
    border-radius: var(--cb-radius-md) !important;
    font-family: var(--cb-font-body) !important;
    font-size: var(--cb-text-supporting) !important;
    line-height: 1rem !important;
    font-weight: 720 !important;
    letter-spacing: 0 !important;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color var(--cb-motion-fast) var(--cb-ease),
        background-color var(--cb-motion-fast) var(--cb-ease),
        border-color var(--cb-motion-fast) var(--cb-ease),
        box-shadow var(--cb-motion-fast) var(--cb-ease),
        transform var(--cb-motion-fast) var(--cb-ease);
}

html.cb-ui .btn-lg,
html.cb-public-ui .btn-lg,
html.cb-ui [data-cb-action-size="prominent"],
html.cb-public-ui [data-cb-action-size="prominent"] {
    min-height: var(--cb-control-prominent) !important;
    padding-right: 1.15rem !important;
    padding-left: 1.15rem !important;
    font-size: var(--cb-text-body) !important;
}

html.cb-ui .btn-sm,
html.cb-public-ui .btn-sm,
html.cb-ui [data-cb-action-size="compact"],
html.cb-public-ui [data-cb-action-size="compact"] {
    min-height: var(--cb-control-standard) !important;
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
}

html.cb-ui .btn svg,
html.cb-public-ui .btn svg,
html.cb-ui [data-cb-icon-button] svg,
html.cb-public-ui [data-cb-icon-button] svg {
    flex: 0 0 auto;
    width: var(--cb-icon-standard);
    height: var(--cb-icon-standard);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

html.cb-ui [data-cb-icon-button],
html.cb-public-ui [data-cb-icon-button],
html.cb-ui .btn-icon,
html.cb-public-ui .btn-icon,
html.cb-ui .btn-close,
html.cb-public-ui .btn-close {
    display: inline-grid;
    place-items: center;
    width: var(--cb-control-standard) !important;
    min-width: var(--cb-control-standard) !important;
    height: var(--cb-control-standard) !important;
    min-height: var(--cb-control-standard) !important;
    padding: 0 !important;
    border-radius: var(--cb-radius-md) !important;
}

html.cb-ui .btn:hover:not(:disabled),
html.cb-public-ui .btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

html.cb-ui .btn:focus-visible,
html.cb-public-ui .btn:focus-visible,
html.cb-ui [data-cb-icon-button]:focus-visible,
html.cb-public-ui [data-cb-icon-button]:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.22rem var(--cb-blue-soft) !important;
}

html.cb-ui .btn:disabled,
html.cb-ui .btn.disabled,
html.cb-public-ui .btn:disabled,
html.cb-public-ui .btn.disabled {
    cursor: not-allowed;
    opacity: 0.52;
    transform: none;
}

/* Primary */
html.cb-ui .btn-primary,
html.cb-ui .btn[data-cb-action="primary"],
html.cb-public-ui .btn-primary,
html.cb-public-ui .btn[data-cb-action="primary"] {
    color: var(--cb-accent-foreground) !important;
    background: var(--cb-lime) !important;
    border-color: var(--cb-lime) !important;
    box-shadow: 0 10px 24px var(--cb-lime-soft) !important;
}

html.cb-ui .btn-primary:hover:not(:disabled),
html.cb-ui .btn[data-cb-action="primary"]:hover:not(:disabled),
html.cb-public-ui .btn-primary:hover:not(:disabled),
html.cb-public-ui .btn[data-cb-action="primary"]:hover:not(:disabled) {
    color: var(--cb-accent-foreground) !important;
    background: var(--cb-lime-strong) !important;
    border-color: var(--cb-lime-strong) !important;
}

/* View and information */
html.cb-ui .btn-outline-primary,
html.cb-ui .btn[data-cb-action="view"],
html.cb-public-ui .btn-outline-primary,
html.cb-public-ui .btn[data-cb-action="view"] {
    color: var(--cb-blue) !important;
    background: var(--cb-blue-soft) !important;
    border-color: var(--cb-blue) !important;
    box-shadow: none !important;
}

html.cb-ui .btn-outline-primary:hover:not(:disabled),
html.cb-ui .btn[data-cb-action="view"]:hover:not(:disabled),
html.cb-public-ui .btn-outline-primary:hover:not(:disabled),
html.cb-public-ui .btn[data-cb-action="view"]:hover:not(:disabled) {
    color: var(--cb-warm-50) !important;
    background: var(--cb-blue-soft) !important;
    border-color: var(--cb-blue) !important;
}

html.cb-public-ui .btn-outline-primary:hover:not(:disabled),
html.cb-public-ui .btn[data-cb-action="view"]:hover:not(:disabled) {
    color: var(--cb-ink) !important;
}

/* Edit, configure, manage, cancel, and quiet actions */
html.cb-ui .btn-secondary,
html.cb-ui .btn-light,
html.cb-ui .btn-outline-secondary,
html.cb-ui .btn[data-cb-action="edit"],
html.cb-ui .btn[data-cb-action="quiet"],
html.cb-public-ui .btn-secondary,
html.cb-public-ui .btn-light,
html.cb-public-ui .btn-outline-secondary,
html.cb-public-ui .btn[data-cb-action="edit"],
html.cb-public-ui .btn[data-cb-action="quiet"] {
    color: var(--cb-warm-200) !important;
    background: var(--cb-surface-control) !important;
    border-color: var(--cb-border-strong) !important;
    box-shadow: none !important;
}

html.cb-public-ui .btn-secondary,
html.cb-public-ui .btn-light,
html.cb-public-ui .btn-outline-secondary,
html.cb-public-ui .btn[data-cb-action="edit"],
html.cb-public-ui .btn[data-cb-action="quiet"] {
    color: var(--cb-ink) !important;
    background: var(--cb-public-control-bg) !important;
    border-color: var(--cb-public-control-border) !important;
}

html.cb-ui .btn[data-cb-action="edit"]:hover:not(:disabled),
html.cb-ui .btn[data-cb-action="quiet"]:hover:not(:disabled),
html.cb-ui .btn-outline-secondary:hover:not(:disabled),
html.cb-public-ui .btn[data-cb-action="edit"]:hover:not(:disabled),
html.cb-public-ui .btn[data-cb-action="quiet"]:hover:not(:disabled),
html.cb-public-ui .btn-outline-secondary:hover:not(:disabled) {
    color: var(--cb-warm-50) !important;
    background: var(--cb-surface-active) !important;
    border-color: var(--cb-border-hover) !important;
}

html.cb-public-ui .btn[data-cb-action="edit"]:hover:not(:disabled),
html.cb-public-ui .btn[data-cb-action="quiet"]:hover:not(:disabled),
html.cb-public-ui .btn-outline-secondary:hover:not(:disabled) {
    color: var(--cb-ink) !important;
}

/* AI */
html.cb-ui .btn[data-cb-action="ai"],
html.cb-public-ui .btn[data-cb-action="ai"] {
    color: var(--cb-action-contrast) !important;
    background: var(--cb-violet) !important;
    border-color: var(--cb-violet) !important;
    box-shadow: 0 10px 24px var(--cb-violet-soft) !important;
}

/* Positive transitions */
html.cb-ui .btn-success,
html.cb-ui .btn-outline-success,
html.cb-ui .btn[data-cb-action="success"],
html.cb-public-ui .btn-success,
html.cb-public-ui .btn-outline-success,
html.cb-public-ui .btn[data-cb-action="success"] {
    color: var(--cb-accent-foreground) !important;
    background: var(--cb-success) !important;
    border-color: var(--cb-success) !important;
    box-shadow: 0 10px 24px var(--cb-success-soft) !important;
}

/* Warning */
html.cb-ui .btn-warning,
html.cb-ui .btn-outline-warning,
html.cb-ui .btn[data-cb-action="warning"],
html.cb-public-ui .btn-warning,
html.cb-public-ui .btn-outline-warning,
html.cb-public-ui .btn[data-cb-action="warning"] {
    color: var(--cb-accent-foreground) !important;
    background: var(--cb-warning) !important;
    border-color: var(--cb-warning) !important;
    box-shadow: 0 10px 24px var(--cb-warning-soft) !important;
}

/* Destructive */
html.cb-ui .btn-danger,
html.cb-ui .btn-outline-danger,
html.cb-ui .btn[data-cb-action="danger"],
html.cb-public-ui .btn-danger,
html.cb-public-ui .btn-outline-danger,
html.cb-public-ui .btn[data-cb-action="danger"] {
    color: var(--cb-action-contrast) !important;
    background: var(--cb-danger) !important;
    border-color: var(--cb-danger) !important;
    box-shadow: 0 10px 24px var(--cb-danger-soft) !important;
}

html.cb-ui .btn-link,
html.cb-ui .btn[data-cb-action="link"],
html.cb-public-ui .btn-link,
html.cb-public-ui .btn[data-cb-action="link"] {
    min-height: var(--cb-control-standard) !important;
    color: var(--cb-blue) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.cb-button-loading {
    position: relative;
    pointer-events: none;
}

.cb-button-loading::before {
    content: "";
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cb-spin 650ms linear infinite;
}

@keyframes cb-spin {
    to { transform: rotate(360deg); }
}

/* Cards and panels */
html.cb-ui .card,
html.cb-ui .cb-panel,
html.cb-public-ui .card,
html.cb-public-ui .cb-panel {
    overflow-wrap: anywhere;
    border-radius: var(--cb-radius-lg) !important;
}

html.cb-ui .card-header,
html.cb-ui .card-footer,
html.cb-public-ui .card-header,
html.cb-public-ui .card-footer {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    padding: var(--cb-space-4) var(--cb-space-5);
}

html.cb-ui .card-body,
html.cb-public-ui .card-body {
    padding: var(--cb-space-5);
}

html.cb-ui .card-footer,
html.cb-public-ui .card-footer {
    justify-content: flex-end;
    gap: var(--cb-action-gap);
}

/* Forms */
html.cb-ui .form-control,
html.cb-ui .form-select,
html.cb-ui .input-group-text,
html.cb-public-ui .form-control,
html.cb-public-ui .form-select,
html.cb-public-ui .input-group-text {
    min-height: var(--cb-control-standard) !important;
    border-radius: var(--cb-radius-md) !important;
    font-family: var(--cb-font-body) !important;
    font-size: var(--cb-text-body) !important;
    line-height: var(--cb-line-body) !important;
}

html.cb-ui textarea.form-control,
html.cb-public-ui textarea.form-control {
    min-height: 7rem !important;
    resize: vertical;
}

html.cb-ui .input-group > .form-control:not(:first-child),
html.cb-ui .input-group > .form-select:not(:first-child),
html.cb-public-ui .input-group > .form-control:not(:first-child),
html.cb-public-ui .input-group > .form-select:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

html.cb-ui .input-group > .form-control:not(:last-child),
html.cb-ui .input-group > .form-select:not(:last-child),
html.cb-public-ui .input-group > .form-control:not(:last-child),
html.cb-public-ui .input-group > .form-select:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.cb-required-marker {
    margin-left: 0.2rem;
    color: var(--cb-danger);
}

.cb-field-error,
html.cb-ui .invalid-feedback,
html.cb-public-ui .invalid-feedback {
    display: block;
    margin-top: var(--cb-space-1);
    color: var(--cb-danger) !important;
    font-size: var(--cb-text-supporting);
    line-height: var(--cb-line-supporting);
    font-weight: 650;
}

.cb-form-errors {
    margin-bottom: var(--cb-space-4);
    padding: var(--cb-space-3) var(--cb-space-4);
    color: var(--cb-alert-danger-text);
    background: var(--cb-danger-soft);
    border: 1px solid var(--cb-danger);
    border-radius: var(--cb-radius-md);
}

/* Tables */
html.cb-ui .table,
html.cb-public-ui .table {
    font-size: var(--cb-text-supporting) !important;
    line-height: var(--cb-line-supporting) !important;
}

html.cb-ui .table > :not(caption) > * > *,
html.cb-public-ui .table > :not(caption) > * > * {
    padding: 0.72rem 0.85rem;
    vertical-align: middle;
}

html.cb-ui .table thead th,
html.cb-public-ui .table thead th {
    font-size: var(--cb-text-metadata) !important;
    line-height: var(--cb-line-metadata) !important;
    font-weight: 800 !important;
    letter-spacing: 0.075em !important;
    text-transform: uppercase;
}

.cb-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--cb-action-gap);
    min-width: max-content;
}

/* Tabs, badges, and alerts */
html.cb-ui .nav-tabs .nav-link,
html.cb-ui .nav-pills .nav-link,
html.cb-public-ui .nav-tabs .nav-link,
html.cb-public-ui .nav-pills .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--cb-control-standard) !important;
    padding: 0.55rem 0.85rem !important;
    border-radius: var(--cb-radius-md) !important;
    font-size: var(--cb-text-supporting) !important;
    line-height: 1rem !important;
    font-weight: 720 !important;
}

html.cb-ui .badge,
html.cb-public-ui .badge,
html.cb-ui .cb-status,
html.cb-public-ui .cb-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.75rem;
    padding: 0.3rem 0.55rem !important;
    border-radius: var(--cb-radius-pill) !important;
    font-size: var(--cb-text-metadata) !important;
    line-height: var(--cb-line-metadata) !important;
    font-weight: 760 !important;
    letter-spacing: 0.015em !important;
}

html.cb-ui .alert,
html.cb-public-ui .alert {
    padding: var(--cb-space-3) var(--cb-space-4);
    border-radius: var(--cb-radius-md) !important;
    font-size: var(--cb-text-supporting);
    line-height: var(--cb-line-supporting);
}

/* Dialogs */
html.cb-ui .modal-content,
html.cb-public-ui .modal-content {
    overflow: hidden;
    border-radius: var(--cb-radius-xl) !important;
}

html.cb-ui .modal-header,
html.cb-public-ui .modal-header {
    align-items: flex-start;
    min-height: 4rem;
    padding: var(--cb-space-4) var(--cb-space-5);
}

html.cb-ui .modal-body,
html.cb-public-ui .modal-body {
    padding: var(--cb-space-5);
}

html.cb-ui .modal-footer,
html.cb-public-ui .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--cb-action-gap);
    min-height: 4.25rem;
    padding: var(--cb-space-3) var(--cb-space-5);
}

.cb-modal-description {
    margin: var(--cb-space-1) 0 0;
    font-size: var(--cb-text-supporting);
    line-height: var(--cb-line-supporting);
}

/* Shared secure mutation confirmation dialog. */
body.modal-open-lock {
    overflow: hidden;
}

.change-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cb-space-4);
    background: var(--cb-overlay);
}

.change-confirm-card {
    width: min(100%, 31.25rem);
    overflow: hidden;
    color: var(--cb-warm-50);
    background: var(--cb-surface-popover);
    border: 1px solid var(--cb-border-strong);
    border-radius: var(--cb-radius-xl);
    box-shadow: var(--cb-shadow-lg);
}

.change-confirm-header {
    padding: var(--cb-space-4) var(--cb-space-5);
    color: var(--cb-warm-50);
    border-bottom: 1px solid var(--cb-border);
    font-family: var(--cb-font-display);
    font-size: var(--cb-text-modal-title);
    line-height: var(--cb-line-modal-title);
    font-weight: 650;
}

.change-confirm-body {
    padding: var(--cb-space-5);
}

.change-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--cb-action-gap);
    padding: var(--cb-space-3) var(--cb-space-5) var(--cb-space-5);
}

.change-confirm-keypad {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cb-action-gap);
    margin-top: var(--cb-space-3);
}

.change-confirm-keypad .btn {
    min-height: var(--cb-control-prominent) !important;
    font-size: var(--cb-text-modal-title) !important;
}

.change-confirm-pin-display {
    display: flex;
    align-items: center;
    min-height: var(--cb-control-prominent) !important;
    letter-spacing: 0.3rem;
    font-size: var(--cb-text-modal-title) !important;
    font-weight: 720;
    user-select: none;
}

.change-confirm-pin-display:focus {
    border-color: var(--cb-blue) !important;
    outline: 0;
    box-shadow: 0 0 0 0.22rem var(--cb-blue-soft) !important;
}

:root[data-cb-theme="warm"] .change-confirm-card,
:root[data-cb-theme="enterprise"] .change-confirm-card,
:root[data-cb-theme="minimal"] .change-confirm-card,
html.cb-public-ui .change-confirm-card {
    color: var(--cb-ink);
    background: var(--cb-public-card-bg);
    border-color: var(--cb-public-control-border);
}

:root[data-cb-theme="warm"] .change-confirm-header,
:root[data-cb-theme="enterprise"] .change-confirm-header,
:root[data-cb-theme="minimal"] .change-confirm-header,
html.cb-public-ui .change-confirm-header {
    color: var(--cb-ink);
    border-color: var(--cb-public-control-border);
}

/* Empty and loading states */
.cb-empty-state,
.cb-loading-state {
    display: grid;
    place-items: center;
    min-height: 12rem;
    padding: var(--cb-space-8);
    border-radius: var(--cb-radius-lg);
    text-align: center;
}

.cb-empty-state h2,
.cb-loading-state h2 {
    margin: var(--cb-space-3) 0 0;
    font-size: var(--cb-text-card-title);
    line-height: var(--cb-line-card-title);
}

.cb-empty-state p,
.cb-loading-state p {
    max-width: 34rem;
    margin: var(--cb-space-2) 0 0;
    font-size: var(--cb-text-supporting);
    line-height: var(--cb-line-supporting);
}

.cb-loading-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--cb-border-strong);
    border-right-color: var(--cb-blue);
    border-radius: 50%;
    animation: cb-spin 650ms linear infinite;
}

/* Kiosk controls never shrink below the touch standard. */
html.cb-ui .cb-app-shell.is-kiosk ~ .page-wrapper .btn,
html.cb-ui .cb-app-shell.is-kiosk ~ .page-wrapper [data-cb-icon-button],
html.cb-ui .cb-app-shell.is-kiosk ~ .page-wrapper .form-control,
html.cb-ui .cb-app-shell.is-kiosk ~ .page-wrapper .form-select {
    min-height: var(--cb-control-kiosk) !important;
}

@media (max-width: 767.98px) {
    :root {
        --cb-text-page-title: 1.625rem;
        --cb-line-page-title: 2rem;
        --cb-text-display-title: 2rem;
        --cb-line-display-title: 2.5rem;
        --cb-text-section-title: 1.25rem;
        --cb-line-section-title: 1.625rem;
    }

    html.cb-ui .cb-page-header,
    html.cb-public-ui .cb-page-header,
    .cb-section-header {
        align-items: stretch;
        flex-direction: column;
        gap: var(--cb-space-3);
    }

    .cb-page-header-actions,
    .cb-section-header-actions {
        justify-content: flex-start;
        width: 100%;
    }

    html.cb-ui .cb-page-utility-bar {
        align-items: stretch;
        padding: var(--cb-space-3);
    }

    html.cb-ui .cb-page-utility-bar .ms-auto {
        margin-left: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.cb-ui .btn,
    html.cb-public-ui .btn {
        transition: none;
    }

    html.cb-ui .btn:hover,
    html.cb-public-ui .btn:hover {
        transform: none;
    }
}