/* RouteApp brand integration and app-owned component rules.
 * Foundation values are generated from design-system/tokens/routeapp.tokens.json
 * into brand.tokens.css. Components in this file consume semantic tokens only.
 * The production shell uses one fixed RouteApp theme. */

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex/IBMPlexSans-Medium-Latin1.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex/IBMPlexSans-Bold-Latin1.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex/IBMPlexMono-Medium-Latin1.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

/* Bootstrap 5 semantic bridge. */
:root,
[data-bs-theme="light"] {
    --bs-primary: var(--routeapp-color-action-primary-default);
    --bs-primary-rgb: var(--routeapp-bootstrap-primary-rgb);
    --bs-secondary: var(--routeapp-color-action-secondary-default);
    --bs-secondary-rgb: var(--routeapp-bootstrap-secondary-rgb);
    --bs-success: var(--routeapp-color-status-success-standard);
    --bs-success-rgb: var(--routeapp-bootstrap-success-rgb);
    --bs-danger: var(--routeapp-color-status-error-standard);
    --bs-danger-rgb: var(--routeapp-bootstrap-danger-rgb);
    --bs-warning: var(--routeapp-color-status-warning-standard);
    --bs-warning-rgb: var(--routeapp-bootstrap-warning-rgb);
    --bs-info: var(--routeapp-color-status-information-standard);
    --bs-info-rgb: var(--routeapp-bootstrap-info-rgb);
    --bs-body-bg: var(--routeapp-color-surface-page);
    --bs-body-color: var(--routeapp-color-text-primary);
    --bs-heading-color: var(--routeapp-color-text-primary);
    --bs-link-color: var(--routeapp-color-link-default);
    --bs-link-hover-color: var(--routeapp-color-link-hover);
    --bs-border-color: var(--routeapp-color-border-default);
    --bs-secondary-bg: var(--routeapp-color-surface-subtle);
    --bs-secondary-color: var(--routeapp-color-text-secondary);
    --bs-font-sans-serif: var(--routeapp-typography-body-family);
    --bs-body-font-family: var(--routeapp-typography-body-family);
    --bs-body-font-size: var(--routeapp-typography-body-size);
    --bs-body-line-height: var(--routeapp-typography-body-line-height);
    --bs-border-radius: var(--routeapp-radius-control);
    --bs-border-radius-sm: var(--routeapp-radius-xs);
    --bs-border-radius-lg: var(--routeapp-radius-dialog);
    --bs-focus-ring-color: var(--routeapp-color-focus-ring);
}

body {
    color: var(--routeapp-color-text-primary);
    background-color: var(--routeapp-color-surface-page);
    font-family: var(--routeapp-typography-body-family);
    font-size: var(--routeapp-typography-body-size);
    line-height: var(--routeapp-typography-body-line-height);
}

.app-page {
    width: 100%;
}

.app-page > :last-child {
    margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--routeapp-color-text-primary);
}

a {
    color: var(--routeapp-color-link-default);
}

a:hover {
    color: var(--routeapp-color-link-hover);
}

.btn-primary {
    --bs-btn-color: var(--routeapp-color-action-primary-foreground);
    --bs-btn-bg: var(--routeapp-color-action-primary-default);
    --bs-btn-border-color: var(--routeapp-color-action-primary-default);
    --bs-btn-hover-color: var(--routeapp-color-action-primary-foreground);
    --bs-btn-hover-bg: var(--routeapp-color-action-primary-hover);
    --bs-btn-hover-border-color: var(--routeapp-color-action-primary-hover);
    --bs-btn-active-color: var(--routeapp-color-action-primary-foreground);
    --bs-btn-active-bg: var(--routeapp-color-action-primary-pressed);
    --bs-btn-active-border-color: var(--routeapp-color-action-primary-pressed);
    --bs-btn-disabled-color: var(--routeapp-color-text-secondary);
    --bs-btn-disabled-bg: var(--routeapp-color-surface-subtle);
    --bs-btn-disabled-border-color: var(--routeapp-color-border-default);
}

.form-control,
.form-select,
.form-check-input,
.btn {
    border-radius: var(--routeapp-radius-control);
}

.form-control::placeholder {
    color: var(--routeapp-color-text-supporting);
    opacity: 1;
}

.form-control:disabled,
.form-select:disabled,
.btn:disabled,
.btn.disabled {
    color: var(--routeapp-color-text-secondary);
    background-color: var(--routeapp-color-surface-subtle);
    border-color: var(--routeapp-color-border-default);
    opacity: 1;
}

.btn:focus-visible,
.btn-link.nav-link:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus-visible,
[tabindex]:focus-visible {
    border-color: var(--routeapp-color-focus-ring);
    outline: 2px solid var(--routeapp-color-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--routeapp-color-focus-contrast), 0 0 0 4px var(--routeapp-color-focus-ring);
}

.operational-reference {
    font-family: var(--routeapp-typography-reference-family);
    font-size: var(--routeapp-typography-reference-size);
    font-weight: var(--routeapp-typography-reference-weight);
    line-height: var(--routeapp-typography-reference-line-height);
}

.tabular-numerals {
    font-variant-numeric: tabular-nums;
    font-feature-settings: var(--routeapp-typography-tabular-numerals);
}

.app-icon {
    width: var(--routeapp-icon-md);
    height: var(--routeapp-icon-md);
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* App-owned Admin Portal shell. Syncfusion internals remain owned by its theme. */
.skip-link {
    color: var(--routeapp-color-text-inverse);
    background: var(--routeapp-color-surface-inverse);
    border: 2px solid var(--routeapp-color-focus-ring);
    border-radius: var(--routeapp-radius-control);
    box-shadow: var(--routeapp-elevation-2);
    font-weight: var(--routeapp-font-weight-semibold);
    text-decoration: none;
}

.app-topbar {
    color: var(--routeapp-color-text-inverse);
    background-color: var(--routeapp-color-surface-inverse);
    box-shadow: var(--routeapp-elevation-1);
}

.app-topbar__context,
.user-label,
.guest-label {
    color: var(--routeapp-color-text-inverse);
}

.app-topbar__context-title {
    font-size: var(--routeapp-font-size-md);
    font-weight: var(--routeapp-font-weight-semibold);
}

.user-label {
    font-weight: var(--routeapp-font-weight-medium);
}

.guest-label {
    padding: var(--routeapp-space-1) var(--routeapp-space-2);
    border: 1px solid color-mix(in srgb, var(--routeapp-color-text-inverse) 44%, transparent);
    border-radius: var(--routeapp-radius-full);
    font-size: var(--routeapp-font-size-xs);
    font-weight: var(--routeapp-font-weight-medium);
}

.shell-icon-button,
.app-signout-button {
    color: var(--routeapp-color-text-inverse);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--routeapp-radius-control);
    font: inherit;
    cursor: pointer;
}

.shell-icon-button:hover,
.app-signout-button:hover {
    color: var(--routeapp-color-text-inverse);
    background: color-mix(in srgb, var(--routeapp-color-text-inverse) 14%, transparent);
}

.shell-icon-button:active,
.app-signout-button:active {
    background: color-mix(in srgb, var(--routeapp-color-text-inverse) 22%, transparent);
}

.shell-icon-button:focus-visible,
.app-signout-button:focus-visible {
    outline: 2px solid var(--routeapp-color-focus-contrast);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--routeapp-color-focus-ring);
}

.app-sidebar {
    background-color: var(--routeapp-color-surface-content);
    border-right: var(--routeapp-border-default);
}

.app-sidebar__brand {
    background: var(--routeapp-color-surface-content);
    border-bottom: var(--routeapp-border-default);
}

.brand-lockup {
    border-radius: var(--routeapp-radius-control);
    text-decoration: none;
}

.app-topbar__guest-brand {
    border-radius: var(--routeapp-radius-control);
}

.app-topbar__guest-brand:focus-visible,
.brand-lockup:focus-visible {
    outline: 2px solid var(--routeapp-color-focus-ring);
    outline-offset: 4px;
}

.navigation-context {
    border-bottom: var(--routeapp-border-default);
}

.navigation-context__tenant {
    color: var(--routeapp-color-text-primary);
    font-size: var(--routeapp-font-size-sm);
    font-weight: var(--routeapp-font-weight-semibold);
}

.navigation-context__product {
    color: var(--routeapp-color-text-supporting);
    font-size: var(--routeapp-font-size-xs);
}

.navigation-link {
    color: var(--routeapp-color-text-primary);
    background: transparent;
    border: 0;
    border-radius: var(--routeapp-radius-control);
    font-family: inherit;
    font-size: var(--routeapp-font-size-sm);
    font-weight: var(--routeapp-font-weight-medium);
    line-height: var(--routeapp-font-line-height-sm);
    text-decoration: none;
    cursor: pointer;
}

.navigation-link:hover {
    color: var(--routeapp-color-text-primary);
    background: var(--routeapp-color-surface-subtle);
}

.navigation-link:focus-visible {
    color: var(--routeapp-color-text-primary);
    outline: 2px solid var(--routeapp-color-focus-ring);
    outline-offset: 1px;
    box-shadow: none;
}

.navigation-item.is-active > .navigation-link {
    color: var(--routeapp-color-action-primary-default);
    background: var(--routeapp-color-action-primary-subtle);
    font-weight: var(--routeapp-font-weight-semibold);
}

.navigation-item.is-active > .navigation-link::before {
    position: absolute;
    inset: var(--routeapp-space-2) auto var(--routeapp-space-2) 0;
    width: 3px;
    border-radius: var(--routeapp-radius-xs);
    background: var(--routeapp-color-action-primary-default);
    content: "";
}

.navigation-submenu {
    border-left: var(--routeapp-border-default);
}

.navigation-submenu .navigation-link {
    color: var(--routeapp-color-text-secondary);
    font-size: var(--routeapp-font-size-xs);
    font-weight: var(--routeapp-font-weight-regular);
}

.navigation-submenu .navigation-item.is-active > .navigation-link {
    color: var(--routeapp-color-action-primary-default);
    font-weight: var(--routeapp-font-weight-semibold);
}

.navigation-link__icon,
.navigation-link__chevron {
    color: var(--routeapp-color-text-supporting);
}

.navigation-item.is-active > .navigation-link .navigation-link__icon {
    color: var(--routeapp-color-action-primary-default);
}

.navigation-backdrop {
    background: color-mix(in srgb, var(--routeapp-color-graphite-950) 48%, transparent);
}

.navigation-collapsed .navigation-link {
    border: 1px solid transparent;
}

/* Supported component-root typography bridge for the Theme Studio output. */
.e-control {
    font-family: var(--routeapp-typography-body-family);
}

.e-success {
    color: var(--routeapp-color-status-success-standard);
}

.e-warning {
    color: var(--routeapp-color-status-warning-standard);
}

.e-error {
    color: var(--routeapp-color-status-error-standard);
}

.e-information {
    color: var(--routeapp-color-status-information-standard);
}

/* Actions */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--routeapp-space-2);
    min-height: var(--routeapp-control-height-default);
    padding: var(--routeapp-space-2) var(--routeapp-space-4);
    font-weight: var(--routeapp-font-weight-semibold);
}

.btn-sm,
.btn-compact {
    min-height: var(--routeapp-control-height-compact);
    padding: var(--routeapp-space-1) var(--routeapp-space-3);
    font-size: var(--routeapp-font-size-xs);
}

.btn-lg,
.btn-large {
    min-height: var(--routeapp-control-height-touch-min);
    padding: var(--routeapp-space-3) var(--routeapp-space-5);
    font-size: var(--routeapp-font-size-md);
}

.btn-secondary {
    --bs-btn-color: var(--routeapp-color-action-secondary-foreground);
    --bs-btn-bg: var(--routeapp-color-action-secondary-default);
    --bs-btn-border-color: var(--routeapp-color-action-secondary-default);
    --bs-btn-hover-color: var(--routeapp-color-action-secondary-foreground);
    --bs-btn-hover-bg: var(--routeapp-color-action-secondary-hover);
    --bs-btn-hover-border-color: var(--routeapp-color-action-secondary-hover);
    --bs-btn-active-color: var(--routeapp-color-action-secondary-foreground);
    --bs-btn-active-bg: var(--routeapp-color-graphite-950);
    --bs-btn-active-border-color: var(--routeapp-color-graphite-950);
}

.btn-tertiary,
.btn-outline-secondary {
    --bs-btn-color: var(--routeapp-color-text-primary);
    --bs-btn-bg: var(--routeapp-color-surface-content);
    --bs-btn-border-color: var(--routeapp-color-border-strong);
    --bs-btn-hover-color: var(--routeapp-color-text-primary);
    --bs-btn-hover-bg: var(--routeapp-color-surface-subtle);
    --bs-btn-hover-border-color: var(--routeapp-color-border-strong);
    --bs-btn-active-color: var(--routeapp-color-text-primary);
    --bs-btn-active-bg: var(--routeapp-color-stone-200);
    --bs-btn-active-border-color: var(--routeapp-color-border-strong);
}

.btn-danger,
.btn-destructive {
    --bs-btn-color: var(--routeapp-color-stone-white);
    --bs-btn-bg: var(--routeapp-color-status-error-standard);
    --bs-btn-border-color: var(--routeapp-color-status-error-standard);
    --bs-btn-hover-color: var(--routeapp-color-stone-white);
    --bs-btn-hover-bg: var(--routeapp-color-status-error-strong);
    --bs-btn-hover-border-color: var(--routeapp-color-status-error-strong);
    --bs-btn-active-color: var(--routeapp-color-stone-white);
    --bs-btn-active-bg: var(--routeapp-color-status-error-strong);
    --bs-btn-active-border-color: var(--routeapp-color-status-error-strong);
}

.btn-icon {
    display: inline-grid;
    width: var(--routeapp-control-height-default);
    min-width: var(--routeapp-control-height-default);
    padding: 0;
    place-items: center;
}

.btn-icon.btn-sm,
.btn-icon.btn-compact {
    width: var(--routeapp-control-height-compact);
    min-width: var(--routeapp-control-height-compact);
}

.btn.is-loading,
.btn[aria-busy="true"] {
    position: relative;
    gap: var(--routeapp-space-2);
    cursor: wait;
}

.btn.is-loading::before,
.btn[aria-busy="true"]::before {
    width: var(--routeapp-icon-sm);
    height: var(--routeapp-icon-sm);
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--routeapp-radius-full);
    animation: routeapp-spin var(--routeapp-motion-duration-slow) linear infinite;
    content: "";
}

.link-action,
.copy-reference-action {
    display: inline-flex;
    align-items: center;
    gap: var(--routeapp-space-1);
    min-height: var(--routeapp-control-height-compact);
    padding: 0 var(--routeapp-space-1);
    color: var(--routeapp-color-link-default);
    background: transparent;
    border: 0;
    border-radius: var(--routeapp-radius-control);
    font: inherit;
    font-weight: var(--routeapp-font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.link-action:hover,
.copy-reference-action:hover {
    color: var(--routeapp-color-link-hover);
}

/* Structure */
.app-page-header {
    padding-bottom: var(--routeapp-space-4);
    border-bottom: var(--routeapp-border-default);
}

.app-page-header__eyebrow,
.operational-summary-card__label,
.kpi-tile__label,
.sync-indicator__label,
.attachment-indicator__label {
    color: var(--routeapp-color-text-supporting);
    font-size: var(--routeapp-font-size-xs);
    font-weight: var(--routeapp-font-weight-semibold);
    letter-spacing: 0;
    text-transform: none;
}

.app-page-header__title,
.app-section-header__title {
    margin: 0;
}

.app-page-header__description,
.app-section-header__description {
    margin: var(--routeapp-space-1) 0 0;
    color: var(--routeapp-color-text-secondary);
}

.app-breadcrumb .breadcrumb {
    margin-bottom: var(--routeapp-space-3);
    font-size: var(--routeapp-font-size-xs);
}

.app-card,
.account-card,
.operational-summary-card,
.kpi-tile,
.filter-panel,
.summary-card,
.processing-result,
.approval-reason-panel,
.conflict-comparison,
.evidence-panel,
.import-result,
.export-monitor {
    background: var(--routeapp-color-surface-content);
    border: var(--routeapp-border-default);
    border-radius: var(--routeapp-radius-card);
    box-shadow: var(--routeapp-elevation-0);
}

/* Portal-wide Bootstrap card bridge. BRAND-005 keeps existing Razor and HTMX
 * boundaries while promoting every production card to the shared surface. */
.card {
    --bs-card-bg: var(--routeapp-color-surface-content);
    --bs-card-color: var(--routeapp-color-text-primary);
    --bs-card-border-color: var(--routeapp-color-border-default);
    --bs-card-border-radius: var(--routeapp-radius-card);
    --bs-card-box-shadow: var(--routeapp-elevation-0);
    background: var(--routeapp-color-surface-content);
    border: var(--routeapp-border-default);
    border-radius: var(--routeapp-radius-card);
    box-shadow: var(--routeapp-elevation-0);
}

.card-header,
.card-footer {
    background: var(--routeapp-color-surface-content);
    border-color: var(--routeapp-color-border-default);
}

.card.shadow,
.card.shadow-sm,
.card.shadow-lg {
    box-shadow: var(--routeapp-elevation-0) !important;
}

.account-shell::before {
    position: absolute;
    inset: var(--routeapp-space-6) calc(var(--routeapp-space-6) * -1) auto auto;
    width: var(--routeapp-space-12);
    height: var(--routeapp-space-12);
    border-top: 2px solid var(--routeapp-color-orange-700);
    border-right: 2px solid var(--routeapp-color-orange-700);
    content: "";
    pointer-events: none;
}

.account-card {
    position: relative;
    overflow: hidden;
}

.account-card__brand {
    min-height: var(--routeapp-space-16);
    background: var(--routeapp-color-graphite-900);
    border-bottom: 3px solid var(--routeapp-color-action-primary-default);
}

.account-context {
    margin-bottom: var(--routeapp-space-1);
    color: var(--routeapp-color-text-supporting);
    font-size: var(--routeapp-font-size-xs);
    font-weight: var(--routeapp-font-weight-semibold);
}

.account-security-note {
    color: var(--routeapp-color-text-supporting);
    border-top: var(--routeapp-border-default);
    font-size: var(--routeapp-font-size-xs);
}

.account-state-icon {
    width: var(--routeapp-icon-display-max);
    height: var(--routeapp-icon-display-max);
    margin-bottom: var(--routeapp-space-4);
    color: var(--routeapp-color-status-information-strong);
    background: var(--routeapp-color-status-information-light);
    border-radius: var(--routeapp-radius-full);
}

.app-card__header,
.app-card__footer {
    background: var(--routeapp-color-surface-content);
}

.app-card__header {
    border-bottom: var(--routeapp-border-default);
}

.app-card__footer {
    border-top: var(--routeapp-border-default);
}

.operational-summary-card__value,
.kpi-tile__value {
    margin-top: var(--routeapp-space-2);
    color: var(--routeapp-color-text-primary);
    font-size: var(--routeapp-font-size-heading-md);
    font-weight: var(--routeapp-font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.operational-summary-card__context,
.kpi-tile__context {
    margin: var(--routeapp-space-1) 0 0;
    color: var(--routeapp-color-text-secondary);
    font-size: var(--routeapp-font-size-xs);
}

.app-divider {
    border: 0;
    border-top: var(--routeapp-border-default);
    opacity: 1;
}

.nav-tabs.app-tabs {
    border-bottom-color: var(--routeapp-color-border-default);
}

.app-tabs .nav-link {
    color: var(--routeapp-color-text-secondary);
    border-radius: var(--routeapp-radius-control) var(--routeapp-radius-control) 0 0;
    font-weight: var(--routeapp-font-weight-semibold);
}

.app-tabs .nav-link.active {
    color: var(--routeapp-color-action-primary-default);
    border-color: var(--routeapp-color-border-default) var(--routeapp-color-border-default) var(--routeapp-color-surface-content);
}

.accordion.app-accordion {
    --bs-accordion-border-color: var(--routeapp-color-border-default);
    --bs-accordion-border-radius: var(--routeapp-radius-card);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 2px var(--routeapp-color-focus-contrast), 0 0 0 4px var(--routeapp-color-focus-ring);
    --bs-accordion-active-color: var(--routeapp-color-text-primary);
    --bs-accordion-active-bg: var(--routeapp-color-action-primary-subtle);
}

.detail-drawer,
.modal-content.app-dialog,
.app-dialog,
.popover,
.tooltip-inner {
    border-radius: var(--routeapp-radius-dialog);
}

.detail-drawer,
.modal-content.app-dialog,
dialog.app-dialog {
    color: var(--routeapp-color-text-primary);
    background: var(--routeapp-color-surface-content);
    border: var(--routeapp-border-default);
    box-shadow: var(--routeapp-elevation-3);
}

dialog.app-dialog {
    width: min(32rem, calc(100vw - (var(--routeapp-space-6) * 2)));
    max-width: 100%;
    padding: 0;
}

dialog.app-dialog::backdrop {
    background: color-mix(in srgb, var(--routeapp-color-graphite-950) 56%, transparent);
}

.app-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    width: 100%;
    height: 100%;
    padding: var(--routeapp-space-4);
    background: color-mix(in srgb, var(--routeapp-color-graphite-950) 56%, transparent);
}

.app-dialog--compact {
    width: min(100%, 28rem);
    max-height: calc(100vh - (var(--routeapp-space-8) * 2));
    overflow: auto;
}

.app-dialog__header {
    border-bottom: var(--routeapp-border-default);
}

.app-dialog__footer {
    border-top: var(--routeapp-border-default);
}

/* Forms */
.form-section {
    border-bottom: var(--routeapp-border-default);
}

.form-section:last-of-type {
    border-bottom: 0;
}

.form-section__title {
    margin-bottom: var(--routeapp-space-1);
    font-size: var(--routeapp-font-size-lg);
}

.form-section__description,
.field-helper,
.form-text {
    color: var(--routeapp-color-text-supporting);
    font-size: var(--routeapp-font-size-xs);
}

.form-control,
.form-select {
    min-height: var(--routeapp-control-height-default);
    color: var(--routeapp-color-text-primary);
    background-color: var(--routeapp-color-surface-content);
    border-color: var(--routeapp-color-border-strong);
}

textarea.form-control {
    min-height: 6rem;
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
    border-color: var(--routeapp-color-text-supporting);
}

.form-control[readonly],
.field-readonly {
    color: var(--routeapp-color-text-secondary);
    background: var(--routeapp-color-surface-subtle);
    border: var(--routeapp-border-default);
    border-radius: var(--routeapp-radius-control);
}

.form-control.is-warning,
.form-select.is-warning,
.field[data-field-state="warning"] .form-control,
.field[data-field-state="warning"] .form-select {
    border-color: var(--routeapp-color-status-warning-standard);
}

.field-warning,
.field-error,
.invalid-feedback {
    display: block;
    font-size: var(--routeapp-font-size-xs);
    font-weight: var(--routeapp-font-weight-medium);
}

.field-warning {
    color: var(--routeapp-color-status-warning-strong);
}

.field-error,
.invalid-feedback {
    color: var(--routeapp-color-status-error-strong);
}

.validation-summary-errors,
.validation-summary {
    padding: var(--routeapp-space-4);
    color: var(--routeapp-color-status-error-strong);
    background: var(--routeapp-color-status-error-light);
    border: 1px solid var(--routeapp-color-status-error-standard);
    border-radius: var(--routeapp-radius-control);
}

.validation-summary-valid {
    display: none;
}

.form-actions {
    border-top: var(--routeapp-border-default);
}

.upload-state {
    padding: var(--routeapp-space-3);
    color: var(--routeapp-color-text-secondary);
    background: var(--routeapp-color-surface-subtle);
    border: 1px dashed var(--routeapp-color-border-strong);
    border-radius: var(--routeapp-radius-control);
}

/* Data presentation */
.table.data-table {
    --bs-table-bg: var(--routeapp-color-surface-content);
    --bs-table-color: var(--routeapp-color-text-primary);
    --bs-table-border-color: var(--routeapp-color-border-default);
    margin-bottom: 0;
}

[data-cell-width="4"] { width: 4rem; }
[data-cell-width="5"] { width: 5rem; }
[data-cell-width="6"] { width: 6rem; }
[data-cell-width="7"] { width: 7rem; }
[data-cell-width="8"] { width: 8rem; }
[data-cell-width="10"] { width: 10rem; }
[data-cell-width="12"] { width: 12rem; }
[data-cell-width="14"] { width: 14rem; }
[data-cell-width="18"] { width: 18rem; max-width: 18rem; }

[data-map-surface="standard"] { min-height: 22.5rem; }
[data-map-surface="large"] { min-height: 26.25rem; }

.table-responsive:focus-visible {
    outline: 2px solid var(--routeapp-color-focus-ring);
    outline-offset: 2px;
}

.approval-queue-table {
    font-size: var(--routeapp-font-size-sm);
}

.list-group-item[aria-current="step"] {
    background: var(--routeapp-color-action-primary-subtle);
    border-left: 3px solid var(--routeapp-color-action-primary-default);
}

.data-table > thead > tr > th {
    color: var(--routeapp-color-text-secondary);
    background: var(--routeapp-color-surface-subtle);
    font-size: var(--routeapp-font-size-xs);
    font-weight: var(--routeapp-font-weight-semibold);
    vertical-align: middle;
}

.data-table > tbody > tr:hover > * {
    background: var(--routeapp-color-action-primary-subtle);
}

.cell-number,
.cell-currency {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cell-reference {
    font-family: var(--routeapp-typography-reference-family);
    font-size: var(--routeapp-typography-reference-size);
    font-variant-numeric: tabular-nums;
}

.filter-panel,
.filter-bar,
.bulk-action-bar {
    color: var(--routeapp-color-text-primary);
    background: var(--routeapp-color-surface-content);
    border: var(--routeapp-border-default);
    border-radius: var(--routeapp-radius-card);
}

.filter-bar,
.bulk-action-bar {
    padding: var(--routeapp-space-3);
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--routeapp-space-1);
    min-height: var(--routeapp-control-height-compact);
    padding: var(--routeapp-space-1) var(--routeapp-space-3);
    color: var(--routeapp-color-text-primary);
    background: var(--routeapp-color-action-primary-subtle);
    border: 1px solid var(--routeapp-color-orange-200);
    border-radius: var(--routeapp-radius-full);
    font-size: var(--routeapp-font-size-xs);
}

.pagination {
    --bs-pagination-color: var(--routeapp-color-link-default);
    --bs-pagination-border-color: var(--routeapp-color-border-default);
    --bs-pagination-hover-color: var(--routeapp-color-link-hover);
    --bs-pagination-hover-bg: var(--routeapp-color-surface-subtle);
    --bs-pagination-focus-color: var(--routeapp-color-link-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 2px var(--routeapp-color-focus-ring);
    --bs-pagination-active-color: var(--routeapp-color-action-primary-foreground);
    --bs-pagination-active-bg: var(--routeapp-color-action-primary-default);
    --bs-pagination-active-border-color: var(--routeapp-color-action-primary-default);
}

.data-state,
.empty-state {
    padding: var(--routeapp-space-6);
    color: var(--routeapp-color-text-secondary);
    background: var(--routeapp-color-surface-content);
    border: 1px dashed var(--routeapp-color-border-strong);
    border-radius: var(--routeapp-radius-card);
}

.empty-state__icon {
    display: grid;
    width: var(--routeapp-icon-display-max);
    height: var(--routeapp-icon-display-max);
    color: var(--routeapp-color-link-default);
    background: var(--routeapp-color-status-information-light);
    border-radius: var(--routeapp-radius-full);
    place-items: center;
}

.empty-state__title {
    margin: 0;
    color: var(--routeapp-color-text-primary);
    font-size: var(--routeapp-font-size-lg);
}

.empty-state__message {
    margin: 0;
}

/* Feedback, status dimensions, and domain review components */
[data-status-tone="success"] {
    --routeapp-status-strong: var(--routeapp-color-status-success-strong);
    --routeapp-status-standard: var(--routeapp-color-status-success-standard);
    --routeapp-status-light: var(--routeapp-color-status-success-light);
}

[data-status-tone="warning"] {
    --routeapp-status-strong: var(--routeapp-color-status-warning-strong);
    --routeapp-status-standard: var(--routeapp-color-status-warning-standard);
    --routeapp-status-light: var(--routeapp-color-status-warning-light);
}

[data-status-tone="error"] {
    --routeapp-status-strong: var(--routeapp-color-status-error-strong);
    --routeapp-status-standard: var(--routeapp-color-status-error-standard);
    --routeapp-status-light: var(--routeapp-color-status-error-light);
}

[data-status-tone="information"] {
    --routeapp-status-strong: var(--routeapp-color-status-information-strong);
    --routeapp-status-standard: var(--routeapp-color-status-information-standard);
    --routeapp-status-light: var(--routeapp-color-status-information-light);
}

[data-status-tone="pending"] {
    --routeapp-status-strong: var(--routeapp-color-status-pending-strong);
    --routeapp-status-standard: var(--routeapp-color-status-pending-standard);
    --routeapp-status-light: var(--routeapp-color-status-pending-light);
}

[data-status-tone="draft"] {
    --routeapp-status-strong: var(--routeapp-color-status-draft-strong);
    --routeapp-status-standard: var(--routeapp-color-status-draft-standard);
    --routeapp-status-light: var(--routeapp-color-status-draft-light);
}

[data-status-tone="returned"] {
    --routeapp-status-strong: var(--routeapp-color-status-returned-strong);
    --routeapp-status-standard: var(--routeapp-color-status-returned-standard);
    --routeapp-status-light: var(--routeapp-color-status-returned-light);
}

[data-status-tone="cancelled"] {
    --routeapp-status-strong: var(--routeapp-color-status-cancelled-strong);
    --routeapp-status-standard: var(--routeapp-color-status-cancelled-standard);
    --routeapp-status-light: var(--routeapp-color-status-cancelled-light);
}

[data-status-tone="offline"] {
    --routeapp-status-strong: var(--routeapp-color-status-offline-strong);
    --routeapp-status-standard: var(--routeapp-color-status-offline-standard);
    --routeapp-status-light: var(--routeapp-color-status-offline-light);
}

[data-status-tone="syncing"] {
    --routeapp-status-strong: var(--routeapp-color-status-syncing-strong);
    --routeapp-status-standard: var(--routeapp-color-status-syncing-standard);
    --routeapp-status-light: var(--routeapp-color-status-syncing-light);
}

[data-status-tone="conflict"] {
    --routeapp-status-strong: var(--routeapp-color-status-conflict-strong);
    --routeapp-status-standard: var(--routeapp-color-status-conflict-standard);
    --routeapp-status-light: var(--routeapp-color-status-conflict-light);
}

.status-badge--success {
    --routeapp-status-strong: var(--routeapp-color-status-success-strong);
    --routeapp-status-standard: var(--routeapp-color-status-success-standard);
    --routeapp-status-light: var(--routeapp-color-status-success-light);
}

.status-badge--warning {
    --routeapp-status-strong: var(--routeapp-color-status-warning-strong);
    --routeapp-status-standard: var(--routeapp-color-status-warning-standard);
    --routeapp-status-light: var(--routeapp-color-status-warning-light);
}

.status-badge--pending {
    --routeapp-status-strong: var(--routeapp-color-status-pending-strong);
    --routeapp-status-standard: var(--routeapp-color-status-pending-standard);
    --routeapp-status-light: var(--routeapp-color-status-pending-light);
}

.status-badge--error {
    --routeapp-status-strong: var(--routeapp-color-status-error-strong);
    --routeapp-status-standard: var(--routeapp-color-status-error-standard);
    --routeapp-status-light: var(--routeapp-color-status-error-light);
}

.status-badge--information {
    --routeapp-status-strong: var(--routeapp-color-status-information-strong);
    --routeapp-status-standard: var(--routeapp-color-status-information-standard);
    --routeapp-status-light: var(--routeapp-color-status-information-light);
}

.status-badge--neutral {
    --routeapp-status-strong: var(--routeapp-color-text-secondary);
    --routeapp-status-standard: var(--routeapp-color-border-strong);
    --routeapp-status-light: var(--routeapp-color-surface-subtle);
}

.surface-subtle {
    background: var(--routeapp-color-surface-subtle) !important;
}

.status-badge,
.sync-indicator,
.attachment-indicator {
    color: var(--routeapp-status-strong, var(--routeapp-color-text-secondary));
    background: var(--routeapp-status-light, var(--routeapp-color-surface-subtle));
    border: 1px solid var(--routeapp-status-standard, var(--routeapp-color-border-strong));
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--routeapp-space-1);
    min-height: 24px;
    padding: 2px var(--routeapp-space-2);
    border-radius: var(--routeapp-radius-full);
    font-size: var(--routeapp-font-size-xs);
    font-weight: var(--routeapp-font-weight-semibold);
    line-height: var(--routeapp-font-line-height-xs);
    white-space: nowrap;
}

.status-badge__icon {
    width: var(--routeapp-icon-xs);
    height: var(--routeapp-icon-xs);
}

.status-summary,
.sync-indicator,
.attachment-indicator {
    padding: var(--routeapp-space-3);
    border-radius: var(--routeapp-radius-control);
}

.processing-result,
.approval-reason-panel,
.conflict-comparison,
.import-result,
.export-monitor {
    border-left: 4px solid var(--routeapp-status-standard, var(--routeapp-color-border-strong));
}

.app-banner,
.app-toast {
    padding: var(--routeapp-space-3) var(--routeapp-space-4);
    color: var(--routeapp-status-strong, var(--routeapp-color-text-primary));
    background: var(--routeapp-status-light, var(--routeapp-color-surface-content));
    border: 1px solid var(--routeapp-status-standard, var(--routeapp-color-border-default));
    border-radius: var(--routeapp-radius-control);
}

.app-toast {
    box-shadow: var(--routeapp-elevation-2);
}

.alert {
    border-radius: var(--routeapp-radius-control);
}

.alert-info {
    --bs-alert-color: var(--routeapp-color-status-information-strong);
    --bs-alert-bg: var(--routeapp-color-status-information-light);
    --bs-alert-border-color: var(--routeapp-color-status-information-standard);
}

.alert-warning {
    --bs-alert-color: var(--routeapp-color-status-warning-strong);
    --bs-alert-bg: var(--routeapp-color-status-warning-light);
    --bs-alert-border-color: var(--routeapp-color-status-warning-standard);
}

.alert-danger {
    --bs-alert-color: var(--routeapp-color-status-error-strong);
    --bs-alert-bg: var(--routeapp-color-status-error-light);
    --bs-alert-border-color: var(--routeapp-color-status-error-standard);
}

.alert-success {
    --bs-alert-color: var(--routeapp-color-status-success-strong);
    --bs-alert-bg: var(--routeapp-color-status-success-light);
    --bs-alert-border-color: var(--routeapp-color-status-success-standard);
}

.skeleton {
    min-height: var(--routeapp-space-4);
    overflow: hidden;
    background: linear-gradient(90deg,
        var(--routeapp-color-surface-subtle) 25%,
        var(--routeapp-color-border-default) 37%,
        var(--routeapp-color-surface-subtle) 63%);
    background-size: 400% 100%;
    border-radius: var(--routeapp-radius-control);
    animation: routeapp-skeleton var(--routeapp-motion-duration-slow) var(--routeapp-motion-ease-standard) infinite;
}

.progress {
    --bs-progress-height: var(--routeapp-space-2);
    --bs-progress-bg: var(--routeapp-color-surface-subtle);
    --bs-progress-bar-bg: var(--routeapp-color-action-primary-default);
    border-radius: var(--routeapp-radius-xs);
}

.audit-timeline__item:not(:last-child)::before {
    position: absolute;
    top: var(--routeapp-space-4);
    bottom: calc(var(--routeapp-space-4) * -1);
    left: 5px;
    width: 2px;
    background: var(--routeapp-color-border-default);
    content: "";
}

.audit-timeline__marker {
    z-index: 1;
    background: var(--routeapp-status-standard, var(--routeapp-color-link-default));
    border: 2px solid var(--routeapp-color-surface-content);
    border-radius: var(--routeapp-radius-full);
    box-shadow: 0 0 0 1px var(--routeapp-color-border-strong);
}

.conflict-comparison__value {
    padding: var(--routeapp-space-3);
    background: var(--routeapp-color-surface-subtle);
    border-radius: var(--routeapp-radius-control);
}

.route-progress__count,
.import-result__count {
    padding: var(--routeapp-space-3);
    background: var(--routeapp-color-surface-subtle);
    border-radius: var(--routeapp-radius-control);
    font-variant-numeric: tabular-nums;
}

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

@keyframes routeapp-skeleton {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

@media print {
    body {
        font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
        color: var(--routeapp-color-text-primary);
        background: var(--routeapp-color-surface-content);
    }

    .app-page-header,
    .card,
    .app-card,
    .filter-panel,
    .data-table,
    .table {
        color: CanvasText;
        background: Canvas;
        border-color: CanvasText;
        box-shadow: none !important;
    }

    .status-badge {
        color: CanvasText;
        background: Canvas;
        border-color: CanvasText;
    }
}

@media (forced-colors: active) {
    .btn:focus-visible,
    .btn-link.nav-link:focus-visible,
    .form-control:focus,
    .form-select:focus,
    .form-check-input:focus-visible,
    .skip-link:focus,
    .shell-icon-button:focus-visible,
    .app-signout-button:focus-visible,
    .app-topbar__guest-brand:focus-visible,
    .brand-lockup:focus-visible,
    .navigation-link:focus-visible,
    [tabindex]:focus-visible {
        outline: 2px solid Highlight;
        box-shadow: none;
    }

    .navigation-item.is-active > .navigation-link {
        border: 1px solid Highlight;
    }

    .navigation-item.is-active > .navigation-link::before {
        background: Highlight;
    }

    .status-badge,
    .sync-indicator,
    .attachment-indicator,
    .app-banner,
    .app-toast,
    .processing-result,
    .approval-reason-panel,
    .conflict-comparison,
    .import-result,
    .export-monitor {
        border-color: CanvasText;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn.is-loading::before,
    .btn[aria-busy="true"]::before,
    .skeleton {
        animation: none;
    }
}