/* Company-system semantic tokens and reusable UI primitives. */
:root {
    --color-primary: #176b78;
    --color-primary-hover: #115762;
    --color-primary-subtle: #e8f2f2;
    --color-primary-border: #9fc6ca;
    --color-primary-rgb: 23, 107, 120;
    --color-text: #111827;
    --color-muted: #66758a;
    --color-border: #dce4ef;
    --color-surface: #ffffff;
    --color-surface-subtle: #f7f9fc;
    --color-page: #eef2f7;
    --color-success: #087b5c;
    --color-warning: #b45309;
    --color-danger: #b91c1c;
    --color-info: #1d4ed8;
    --font-family-ui: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
    --font-size-caption: 0.75rem;
    --font-size-data: 0.75rem;
    --font-size-body: 0.8125rem;
    --font-size-section-title: 0.9375rem;
    --font-size-page-title: 1.125rem;
    --line-height-tight: 1.25;
    --line-height-compact: 1.4;
    --line-height-body: 1.5;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.875rem;
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.05);
    --control-height-sm: 1.875rem;
    --control-height-md: 2.25rem;
    --table-row-height: 2.5rem;
    --focus-ring: 0 0 0 3px rgba(23, 107, 120, 0.26);

    /* Maintained compatibility aliases for the existing enterprise modules. */
    --erp-border: var(--color-border);
    --erp-bg: var(--color-page);
    --erp-surface: var(--color-surface);
    --erp-surface-soft: var(--color-surface-subtle);
    --erp-text: var(--color-text);
    --erp-muted: var(--color-muted);
    --erp-primary: var(--color-primary);
    --erp-shadow: var(--shadow-card);

    /* Bootstrap compatibility: semantic primary is owned by this file. */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 23, 107, 120;
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary-hover);
}

.app-shell {
    font-family: var(--font-family-ui);
    color: var(--color-text);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

.ui-workspace-status {
    position: fixed;
    inset-block-start: 4rem;
    inset-inline-end: var(--space-4);
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-inline-size: min(32rem, calc(100vw - 2rem));
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.ui-workspace-status[hidden] {
    display: none;
}

.ui-workspace-status[data-state="error"] {
    border-color: var(--color-danger);
}

.ui-workspace-status button {
    flex-shrink: 0;
}

form.ui-inline-save-form {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.ui-inline-save-form > input:not([type="hidden"]),
.ui-inline-save-form > select,
.ui-inline-save-form > .ui-date-control {
    flex: 1 1 0%;
    min-inline-size: 0;
    inline-size: 0;
}

.ui-inline-save-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.5rem;
    min-block-size: var(--control-height-sm);
    inline-size: 1.5rem;
    color: var(--color-muted);
    font-size: var(--font-size-caption);
}

.ui-inline-save-status[data-state="saved"] {
    color: var(--color-success);
}

.ui-inline-save-status[data-state="error"],
.ui-inline-save-status[data-state="conflict"] {
    color: var(--color-danger);
}

.ui-inline-save-status .btn {
    padding: 0;
    font-size: inherit;
}

/* 共享富文本框（`shared/rich_text.ts`）：工具条 + 可编辑面，配一个隐藏 textarea 承载提交值。 */
.ui-rich-text {
    display: grid;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 0.5rem);
    background: var(--color-surface, #fff);
    overflow: hidden;
}

.ui-rich-text:focus-within {
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 3px var(--color-primary-soft, rgba(37, 99, 235, 0.16));
}

.ui-rich-text__toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted, #f8fafc);
}

.ui-rich-text__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    background: none;
    color: var(--color-muted);
    font-size: 0.9375rem;
    line-height: 1;
    cursor: pointer;
}

.ui-rich-text__button:hover {
    background: var(--color-surface, #fff);
    border-color: var(--color-border);
    color: var(--color-text, #0f172a);
}

.ui-rich-text__button.is-active {
    background: var(--color-primary-soft, rgba(37, 99, 235, 0.16));
    border-color: var(--color-primary, #2563eb);
    color: var(--color-primary, #2563eb);
}

.ui-rich-text__surface {
    min-block-size: 6.5rem;
    max-block-size: 24rem;
    padding: 0.625rem 0.75rem;
    overflow-y: auto;
    outline: none;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text, #0f172a);
    overflow-wrap: anywhere;
}

.ui-rich-text__surface:empty::before {
    content: attr(data-placeholder);
    color: var(--color-muted);
    pointer-events: none;
}

.ui-rich-text__surface p,
.ui-rich-text__surface div {
    margin: 0 0 0.375rem;
}

.ui-rich-text__surface ul,
.ui-rich-text__surface ol {
    margin: 0 0 0.375rem;
    padding-inline-start: 1.375rem;
}

.btn {
    text-align: center;
}

button.btn,
a.btn,
label.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    line-height: 1.2;
}

.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-focus-shadow-rgb: 23, 107, 120;
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: 23, 107, 120;
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-disabled-color: var(--color-primary);
}

/* Dataset or mode navigation belongs immediately below its filter bar. */
.ui-section-tabs {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
    min-height: 34px;
    padding: 4px 7px 0;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-bottom-color: #c9d5e3;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--color-surface-subtle);
    scrollbar-width: thin;
}

.ui-section-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #c9d5e3;
    border-bottom: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: #405166;
    background: var(--color-surface);
    font-size: var(--font-size-data);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.ui-section-tab:hover {
    border-color: #8fb8bd;
    color: var(--color-primary-hover);
    background: #f2f8f8;
}

.ui-section-tab.is-active,
.ui-section-tab[aria-current="page"] {
    border-color: var(--color-primary);
    color: #fff;
    background: var(--color-primary);
}

.ui-section-tab:focus-visible {
    position: relative;
    z-index: 1;
    outline: 0;
    box-shadow: var(--focus-ring);
}

/* Sibling page navigation in the global titlebar uses a quieter segmented form. */
.ui-context-tabs {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.ui-context-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    border-radius: var(--radius-sm);
    color: #405166;
    font-size: var(--font-size-data);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ui-context-tab:hover {
    color: var(--color-primary-hover);
    background: #e8f2f2;
}

.ui-context-tab.is-active,
.ui-context-tab[aria-current="page"] {
    color: #fff;
    background: var(--color-primary);
}

.ui-context-tab:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.ui-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
}

.ui-page-header__copy {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.ui-page-header h1,
.ui-page-header h2 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-page-title);
    font-weight: 800;
    line-height: var(--line-height-tight);
}

.ui-page-header p {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

.ui-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.ui-form-field {
    display: grid;
    flex: 1 1 10rem;
    gap: var(--space-1);
    min-width: 0;
}

.ui-form-field > span,
.ui-form-field > label {
    color: var(--color-muted);
    font-size: var(--font-size-data);
    font-weight: 700;
}

.ui-form-field .form-control,
.ui-form-field .form-select {
    min-height: var(--control-height-md);
    border-color: var(--color-border);
    border-radius: var(--radius-sm);
}

.ui-form-field .form-control:focus,
.ui-form-field .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.ui-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 1.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: var(--font-size-caption);
    font-weight: 750;
}

.ui-status-badge--success { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 15%, var(--color-surface)); }
.ui-status-badge--warning { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 15%, var(--color-surface)); }
.ui-status-badge--danger { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 15%, var(--color-surface)); }
.ui-status-badge--info { color: var(--color-info); background: color-mix(in srgb, var(--color-info) 15%, var(--color-surface)); }
.ui-status-badge--neutral { color: var(--color-muted); background: var(--color-border); }

.ui-data-table {
    width: 100%;
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-data);
    line-height: var(--line-height-compact);
}

.ui-data-table th {
    height: var(--table-row-height);
    color: var(--color-muted);
    background: var(--color-surface-subtle);
}

.ui-data-table td {
    min-height: var(--table-row-height);
    border-color: var(--color-border);
}

.ui-type-scale {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.ui-type-scale > div {
    display: grid;
    grid-template-columns: minmax(10rem, 0.45fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.ui-type-scale span {
    color: var(--color-muted);
    font-size: var(--font-size-body);
}

.ui-type-scale__page { font-size: var(--font-size-page-title); line-height: var(--line-height-tight); }
.ui-type-scale__section { font-size: var(--font-size-section-title); line-height: var(--line-height-tight); }
.ui-type-scale__body { font-size: var(--font-size-body); line-height: var(--line-height-body); }
.ui-type-scale__data { font-size: var(--font-size-data); line-height: var(--line-height-compact); }
.ui-type-scale__caption { font-size: var(--font-size-caption); line-height: var(--line-height-compact); }

.ui-empty-state {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-7) var(--space-4);
    color: var(--color-muted);
    text-align: center;
}

.ui-empty-state > i {
    color: var(--color-primary);
    font-size: 1.5rem;
}

.ui-skeleton {
    display: block;
    min-height: 0.75rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--color-border) 25%, var(--color-surface-subtle) 50%, var(--color-border) 75%);
    background-size: 200% 100%;
    animation: ui-skeleton-pulse 1.4s ease-in-out infinite;
}

.ui-auth-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

/* Shared date controls: the native input remains the no-JS fallback. */
.ui-date-control {
    --ui-date-control-trigger-height: var(--control-height-md);
    --ui-date-control-font-size: inherit;
    --ui-date-control-line-height: inherit;
    --ui-date-control-padding-left: 0.75rem;
    --ui-date-control-padding-right: 0.75rem;
    --ui-date-control-border-radius: var(--radius-sm);
    position: relative;
    display: block;
    min-width: 0;
}
.ui-date-control--sm {
    --ui-date-control-trigger-height: var(--control-height-sm);
    --ui-date-control-font-size: 0.875rem;
    --ui-date-control-padding-left: 0.5rem;
    --ui-date-control-padding-right: 0.5rem;
}
.ui-date-control__native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; }
.ui-date-control__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    height: var(--ui-date-control-trigger-height);
    min-height: var(--ui-date-control-trigger-height);
    padding: 0 var(--ui-date-control-padding-right) 0 var(--ui-date-control-padding-left);
    border: 1px solid var(--color-border);
    border-radius: var(--ui-date-control-border-radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--ui-date-control-font-size);
    line-height: var(--ui-date-control-line-height);
    text-align: left;
}
.ui-date-control__trigger [data-date-control-label] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-date-control__trigger > i { flex: 0 0 auto; }
.ui-date-control__trigger:focus-visible, .ui-date-control__trigger:hover { border-color: var(--color-primary); }
.ui-date-control__trigger[aria-invalid="true"] { border-color: var(--color-danger); }
.ui-date-control__trigger:disabled { cursor: not-allowed; opacity: 0.65; }
.ui-date-control__panel { position: fixed; z-index: var(--z-dropdown, 1050); display: grid; gap: var(--space-2); width: min(292px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: var(--space-2); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--color-border-strong, var(--color-border)); border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--shadow-card); }
.ui-date-control__panel[hidden] { display: none; }
.ui-date-control__outer-nav, .ui-date-control__inner-nav { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; gap: var(--space-1); align-items: center; }
.ui-date-control__outer-nav button, .ui-date-control__inner-nav button, .ui-date-control__days button, .ui-date-control__months button { min-width: 0; min-height: 36px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); }
.ui-date-control__outer-nav button:hover, .ui-date-control__inner-nav button:hover, .ui-date-control__days button:hover, .ui-date-control__months button:hover, .ui-date-control__outer-nav button:focus-visible, .ui-date-control__inner-nav button:focus-visible, .ui-date-control__days button:focus-visible, .ui-date-control__months button:focus-visible { border-color: var(--color-primary); color: var(--color-primary); }
.ui-date-control__outer-nav strong, .ui-date-control__inner-nav strong { text-align: center; }
.ui-date-control__weekdays, .ui-date-control__days, .ui-date-control__months { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
.ui-date-control__weekdays { color: var(--color-muted); font-size: var(--font-size-caption); text-align: center; }
.ui-date-control__months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-date-control__days button.is-outside { color: var(--color-muted); opacity: 0.58; }
.ui-date-control__days button.is-current:not(.is-selected), .ui-date-control__months button.is-current:not(.is-selected) { border-color: var(--color-primary); background: var(--color-primary-subtle); color: var(--color-primary); }
.ui-date-control__days button.is-selected, .ui-date-control__months button.is-selected { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary, #fff); font-weight: 700; }
.ui-date-control__days button:disabled, .ui-date-control__months button:disabled { cursor: not-allowed; opacity: 0.45; }
.ui-date-control__time { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: center; color: var(--color-muted); font-size: var(--font-size-caption); }
.ui-date-control__time :is(input, select) { min-height: 36px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.ui-date-control__time-selects { display: flex; align-items: center; gap: var(--space-1); }
.ui-date-control__time-selects select { flex: 1 1 0; min-width: 0; padding: 0 var(--space-1); }
.ui-date-control__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-1); border-top: 1px solid var(--color-border); }
.ui-date-control__footer-links { display: flex; align-items: center; gap: var(--space-2); }
.ui-date-control__footer button { min-height: 36px; padding: 0 var(--space-2); border: 0; background: transparent; color: var(--color-primary); font-weight: 600; }
.ui-date-control__footer button:hover, .ui-date-control__footer button:focus-visible { text-decoration: underline; }
.ui-date-control__footer .ui-date-control__confirm { min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-on-primary, #fff); }
.ui-date-control__footer .ui-date-control__confirm:hover, .ui-date-control__footer .ui-date-control__confirm:focus-visible { text-decoration: none; opacity: 0.9; }
.ui-date-control__confirm:disabled { cursor: not-allowed; opacity: 0.5; }

/* Shared searchable multi-select: the native <select multiple> stays the no-JS form control. */
.ui-multiselect {
    position: relative;
    display: block;
    min-width: 0;
}
.ui-multiselect__native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; }
.ui-multiselect__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--control-height-sm);
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: var(--line-height-tight);
    text-align: left;
}
.ui-multiselect__trigger:hover, .ui-multiselect__trigger:focus-visible, .ui-multiselect__trigger[aria-expanded="true"] { border-color: var(--color-primary); }
.ui-multiselect__trigger [data-ui-multiselect-label] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-multiselect__trigger > i { flex: 0 0 auto; }
.ui-multiselect__panel { position: fixed; inset: unset; z-index: var(--z-dropdown, 1050); display: grid; gap: var(--space-1); width: min(280px, calc(100vw - 24px)); max-height: min(22rem, calc(100dvh - 24px)); padding: var(--space-2); overflow: hidden; border: 1px solid var(--color-border-strong, var(--color-border)); border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--shadow-card); }
.ui-multiselect__panel[hidden] { display: none; }
.ui-multiselect__actions { display: flex; justify-content: flex-end; gap: var(--space-1); }
.ui-multiselect__actions button { min-height: 1.75rem; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-primary-hover); font-size: var(--font-size-caption); }
.ui-multiselect__actions button:hover, .ui-multiselect__actions button:focus-visible { background: var(--color-primary-subtle); outline: none; }
.ui-multiselect__options { display: grid; gap: 2px; max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; }
.ui-multiselect__option { display: flex; align-items: center; gap: var(--space-2); min-height: 2.25rem; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: var(--font-size-data); }
.ui-multiselect__option:hover { background: var(--color-surface-subtle); }
.ui-multiselect__option[hidden] { display: none; }
.ui-multiselect__option input { flex: 0 0 auto; width: 1rem; height: 1rem; margin: 0; accent-color: var(--color-primary); }
.ui-multiselect__option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-multiselect__empty { padding: var(--space-2); color: var(--color-muted); font-size: var(--font-size-caption); text-align: center; }
.ui-multiselect__empty[hidden] { display: none; }

/* Shared searchable single select: the native <select> stays the submitted value;
   the panel is drawn in-page so a long option list cannot spill out of a modal. */
.ui-select-search {
    position: relative;
    display: block;
    min-width: 0;
}
.ui-select-search__native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; }
.ui-select-search__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--control-height-sm);
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: var(--line-height-tight);
    text-align: left;
}
.ui-select-search__trigger:hover, .ui-select-search__trigger:focus-visible, .ui-select-search__trigger[aria-expanded="true"] { border-color: var(--color-primary); }
.ui-select-search__trigger[aria-invalid="true"] { border-color: var(--color-danger); }
.ui-select-search__trigger:disabled { cursor: not-allowed; opacity: 0.65; }
.ui-select-search__trigger > [data-ui-select-search-label] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select-search__trigger > i { flex: 0 0 auto; }
.ui-select-search.is-empty .ui-select-search__trigger > [data-ui-select-search-label] { color: var(--color-muted); }
/* Above Bootstrap's modal (1055): the panel lives inside a dialog, so it has to win the stacking order. */
.ui-select-search__panel {
    position: fixed;
    inset: unset;
    z-index: var(--z-modal-dropdown, 1070);
    display: grid;
    gap: var(--space-1);
    max-width: calc(100vw - 24px);
    max-height: min(20rem, calc(100dvh - 24px));
    padding: var(--space-2);
    overflow: hidden;
    border: 1px solid var(--color-border-strong, var(--color-border));
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}
.ui-select-search__panel[hidden] { display: none; }
.ui-select-search__options { display: grid; gap: 2px; max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; }
.ui-select-search__option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 var(--space-2);
    align-items: baseline;
    min-height: 2.25rem;
    padding: var(--space-1) var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font-size: var(--font-size-data);
    text-align: left;
}
.ui-select-search__option[hidden] { display: none; }
.ui-select-search__option:hover, .ui-select-search__option.is-active { background: var(--color-surface-subtle); }
.ui-select-search__option[aria-selected="true"] { color: var(--color-primary); font-weight: 600; }
.ui-select-search__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select-search__meta { color: var(--color-muted); font-size: var(--font-size-caption); white-space: nowrap; }
.ui-select-search__note { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--font-size-caption); }
.ui-select-search__empty { padding: var(--space-2); color: var(--color-muted); font-size: var(--font-size-caption); text-align: center; }
.ui-select-search__empty[hidden] { display: none; }

/* 可搜索下拉已是全站默认控件（base.html 自动绑定），移动端同样要满足
   16px 字号 / 44px 触控高度；原生 select 的移动端规则作用不到自绘触发按钮。 */
@media (max-width: 767.98px) {
    .ui-select-search__trigger {
        min-height: 44px;
        font-size: 16px;
    }
    .ui-select-search__option {
        min-height: 44px;
        font-size: 16px;
    }
    .ui-select-search__panel .form-control {
        min-height: 44px;
        font-size: 16px;
    }
}

@keyframes ui-skeleton-pulse {
    to { background-position-x: -200%; }
}
@media (prefers-reduced-motion: reduce) {
    .ui-skeleton { animation: none; }
}

@media (max-width: 767.98px) {
    .ui-page-header { align-items: stretch; flex-direction: column; }
    .ui-filter-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-filter-bar__actions { grid-column: 1 / -1; }
    .ui-type-scale > div { grid-template-columns: 1fr; gap: var(--space-1); }

    /* Context tabs are direct touch navigation on mobile, not compact desktop chips. */
    .ui-context-tab { min-height: 44px; }

    /* Canonical mobile form contract: controls remain readable and thumb-safe. */
    .ui-form-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
    .ui-filter-bar :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        min-height: 44px;
        height: 44px;
        font-size: 16px;
    }

    .ui-filter-bar :is(button, a.btn, .btn),
    .ui-filter-bar__actions :is(button, a.btn, .btn) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        height: 44px;
        font-size: 16px;
    }

    .ui-date-control__trigger {
        height: max(44px, var(--ui-date-control-trigger-height));
        min-height: 44px;
        font-size: 16px;
    }

    .ui-date-control__panel {
        width: min(366px, calc(100vw - 24px));
    }

    .ui-date-control__outer-nav,
    .ui-date-control__inner-nav {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
    }

    .ui-date-control__outer-nav button,
    .ui-date-control__inner-nav button,
    .ui-date-control__days button,
    .ui-date-control__months button,
    .ui-date-control__time :is(input, select),
    .ui-date-control__footer button {
        min-height: 44px;
    }

    .ui-inline-save-status {
        flex-basis: 3rem;
        inline-size: 3rem;
        min-block-size: 44px;
    }

    .ui-inline-save-status .btn {
        min-inline-size: 44px;
        min-block-size: 44px;
    }

    .ui-multiselect__option,
    .ui-multiselect__actions button {
        min-height: 44px;
    }
}
.ui-command-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    inline-size: min(100%, 30rem);
    min-inline-size: 0;
    block-size: 2.75rem;
    /* flex-basis 必须是 auto：命令反馈会被追加到 form 末尾，而弹窗里的 form 是
       column 方向的 flex 容器，写死 30rem 的 basis 会变成 30rem 高（480px）的空
       白块，把弹窗页脚和内容整个撑开（2026-10-22 奖品弹窗保存后底部突然拉长）。
       auto 在横向工具条里取 inline-size，在纵向容器里取 block-size。 */
    flex: 0 1 auto;
    font-size: var(--font-size-caption, 0.75rem);
    color: var(--color-muted);
}

.ui-command-status > span {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-command-status > a,
.ui-command-status > button {
    flex-shrink: 0;
    min-block-size: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ui-command-status [hidden] { display: none; }

/* Inline command feedback must not reserve layout before it has anything to say.
   The injected status element starts as an empty 2.75rem box; in compact action
   rows that stretched page-titlebar forms to ~71px and pushed their buttons out
   of the 56px bar (buttons appeared misaligned and clipped). */
.ui-command-status:not(:has(> span:not(:empty))):not(:has(> a:not([hidden]))):not(:has(> button:not([hidden]))) {
    display: none;
}

/* Inside page-action toolbars keep feedback on the action row instead of letting
   its default block size stretch the fixed-height title bar. */
.app-page-titlebar__actions .ui-command-status {
    block-size: auto;
    inline-size: auto;
    flex: 0 1 auto;
    max-inline-size: 18rem;
}