/* Explicit form components. Field scripts, visibility and financial grids stay owned
   by their page; adding ui-form alone never changes an input's geometry. */
.ui-form { color: var(--ui-text); }
.ui-form-stack { display: grid; gap: var(--ui-field-gap); }
.ui-form-width { width: 100%; max-width: 800px; }
.ui-section {
    min-width: 0; padding: var(--ui-section-padding);
    border: 1px solid var(--ui-border); border-radius: var(--ui-section-radius);
    background: var(--ui-surface);
}
.ui-section-title { margin: 0 0 12px; color: var(--ui-text); font-size: var(--ui-section-title-size); line-height: 1.35; }
.ui-section > :last-child { margin-bottom: 0; }
.ui-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-field-gap); }
.ui-field-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); align-items: end; }
.ui-entry-form { container: ui-entry / inline-size; }
.ui-field-grid--entry { grid-template-columns: minmax(0, 1fr); align-items: end; }
@container ui-entry (min-width: 44em) {
    .ui-field-grid--entry { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) auto; }
}
.ui-field-grid > *, .ui-field { min-width: 0; }
.ui-field-label { display: block; margin: 0 0 6px; color: var(--ui-muted); font-size: var(--ui-text-small); font-weight: 600; }
.ui-workspace .ui-field-control {
    box-sizing: border-box; width: 100%; min-width: 0; min-height: var(--ui-control-min-height);
    padding: var(--ui-control-padding-block) var(--ui-control-padding-inline); border: 1px solid var(--ui-border); border-radius: var(--ui-control-radius);
    color: var(--ui-text); background: var(--ui-surface);
    font: var(--ui-control-text-size)/var(--ui-line-height) var(--ui-font-reading);
}
/* Compatibility geometry for reviewed native controls. These rules only style
   existing controls; their IDs, values, forms and page controllers stay native. */
body.ui-workspace :is(.ss-display, .est-input-brand, .sort-input, .inv-input),
body.ui-workspace :is(.li-input, .li-type-btn, .li-map-ps, .li-qbo-item-sel, .li-qbo-acct-sel, .li-map-action, .li-row-action, .row-edit-input, .row-edit-select, .cv-search-input, .cv-btn, .ops-switch-btn, .dispatch-view-btn, .dispatch-ai-btn, .wo-view-btn, .summary-mode, .ui-catalog-type),
body.ui-workspace :is(.est-stickybar-primary, .est-stickybar-menu, .merge-chip),
body.ui-workspace :is(.vault-membership-access, .ops-audit-field, .wo-form-group) :is(input:not([type=checkbox]):not([type=radio]), select, button),
body.ui-workspace .form-group :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]), select:not([multiple])),
body.ui-workspace :is(.btn, .btn-cta):not(.btn-clock) {
    box-sizing: border-box;
    min-height: var(--ui-control-min-height);
    padding-block: var(--ui-control-padding-block);
    font-size: var(--ui-control-text-size);
    line-height: var(--ui-line-height);
}
body.ui-workspace .ss-display { padding-inline: var(--ui-control-padding-inline); }
/* Ordinary native fields without a component class use the same baseline.
   Specialized sliders, colour/file inputs, listboxes and multiline editors keep
   their own geometry. Page-family rules continue to own width and composition. */
body.ui-workspace :where(input:not([type]):not(.ui-select-native), input[type=text], input[type=search], input[type=number], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=date], input[type=time], input[type=datetime-local], select:not([multiple])) {
    min-height: var(--ui-control-min-height);
    padding-block: var(--ui-control-padding-block);
    font-size: var(--ui-control-text-size);
    line-height: var(--ui-line-height);
}
.ui-workspace .ui-field-control.data-mono { font-family: var(--ui-font-data); }
.ui-workspace .ui-field-control:disabled,
.ui-workspace .ui-field-control[readonly] { background: var(--ui-surface-muted); color: var(--ui-muted); }
body.dark.ui-workspace .ui-field-control { background-color: var(--ui-surface) !important; color-scheme: dark; }
body.dark.ui-workspace .ui-field-control:disabled,
body.dark.ui-workspace .ui-field-control[readonly] { background-color: var(--ui-surface-muted) !important; }
.ui-field-help { display: block; margin: 6px 0 0; color: var(--ui-muted); font-size: var(--ui-text-small); line-height: var(--ui-line-height); }
.ui-field-help--warning { color: var(--text-warning); }
.ui-inline-fields { display: flex; align-items: center; gap: 8px; }
.ui-inline-fields > select { flex: 1; min-width: 0; }
.ui-inline-fields > button { flex: none; }
.ui-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.ui-form-actions > form { margin: 0; }
.ui-form-actions--stretch > button { flex: 1 1 140px; }
.ui-form-feedback { color: var(--ui-muted); font-size: var(--ui-text-small); }
.ui-preview-surface { padding: 16px; background: var(--ui-surface-muted); border: 1px solid var(--ui-border); border-radius: var(--ui-control-radius); text-align: center; }
.ui-preview-surface p { overflow-wrap: anywhere; }
.ui-field-filter { max-width: 300px; margin-bottom: 24px; }
.ui-calculation-scroll { overflow-x: auto; }
.ui-calculation-scroll :where(input, select) { color: var(--ui-text); background: var(--ui-surface); }
body.dark.ui-workspace .ui-calculation-scroll :where(input, select) { background-color: var(--ui-surface) !important; }
.ui-card-list .ui-data-table { min-width: 960px; }
.ui-card-list .ui-data-table th:nth-child(2) { min-width: 220px; }
.ui-card-list .ui-data-table th:nth-child(3) { min-width: 130px; }
.ui-card-list .ui-data-table .ui-card-sort { width: 72px; }
/* Opt-in form overlays: page controllers keep display/open state and IDs. */
.ui-workspace .ui-dialog-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 1000; }
.ui-workspace .ui-form-dialog {
    box-sizing: border-box; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: min(400px, calc(100vw - 32px)); min-width: 0; max-width: none;
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; padding: 20px;
    background: var(--ui-surface); border: 2px solid var(--ui-focus); border-radius: var(--ui-control-radius);
    z-index: 1001; box-shadow: 0 16px 48px rgba(0,0,0,.2);
}
.ui-workspace .ui-form-dialog-backdrop {
    position: fixed; inset: 0; padding: 16px; background: rgba(0,0,0,.45); z-index: 1000;
    align-items: center; justify-content: center;
}
.ui-workspace .ui-form-dialog-backdrop > .ui-form-dialog {
    position: static; transform: none; width: min(480px, 100%); border-width: 1px;
}
.ui-workspace .ui-form-popover {
    box-sizing: border-box; min-width: 0; max-width: 100%; padding: 12px; white-space: normal;
    background: var(--ui-surface); border: 1px solid var(--ui-focus); border-radius: var(--ui-control-radius);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.ui-workspace .ui-form-action-bar { position: relative; }
/* Flat quick actions share the ordinary control's type, target size and focus. */
.ui-workspace .ui-form-action-bar .ui-button,
.ui-workspace .ui-table-action-menu > summary,
.ui-workspace .ui-table-action-panel .ui-button {
    border-radius: 0; background: transparent; border-color: transparent;
    color: var(--ui-text); box-shadow: none; transform: none;
}
.ui-workspace .ui-form-action-bar .ui-button:not(:disabled):hover,
.ui-workspace .ui-table-action-menu > summary:hover,
.ui-workspace .ui-table-action-panel .ui-button:not(:disabled):hover {
    background: var(--ui-surface-muted); text-decoration: underline; text-underline-offset: 4px;
}
.ui-workspace .ui-form-action-bar .ui-button:disabled,
.ui-workspace .ui-table-action-panel .ui-button:disabled {
    color: var(--ui-muted); background: transparent; opacity: .65; text-decoration: none;
}
.ui-workspace .ui-table-action-panel .ui-button--danger { color: var(--text-error); }
.ui-workspace .ui-flat-action-panel {
    border-radius: 0; border-color: var(--ui-border); box-shadow: 0 4px 12px rgba(0,0,0,.12);
    overflow-wrap: anywhere;
}
.ui-workspace .ui-flat-action-panel .sms-template-link {
    border: 0; border-bottom: 1px solid var(--ui-border); border-radius: 0;
    margin: 0; padding: 10px 0; color: var(--ui-text);
}
.ui-workspace .ui-flat-action-panel .sms-template-link:last-child { border-bottom: 0; }
.ui-workspace .ui-flat-action-panel .sms-template-link:hover { background: var(--ui-surface-muted); }
.ui-workspace .ui-flat-action-panel .sms-template-label { color: var(--ui-text); font-size: var(--ui-text-small); }
.ui-workspace .ui-flat-action-panel .sms-template-preview { color: var(--ui-muted); font-size: var(--ui-text-small); }
.ui-workspace .ui-form-action-menu { position: static; flex: 0 1 auto; max-width: 100%; min-width: 0; }
.ui-workspace .ui-form-action-menu[open] { flex-basis: 100%; }
.ui-workspace .ui-form-action-menu > .ui-form-popover {
    position: static; inset: auto; margin: 4px 0 0; width: min(360px, 100%); min-width: 0; max-width: 100%;
}
@media (min-width: 601px) {
    .ui-workspace .ui-form-action-bar[data-ui-action-menus-ready="anchored"] > .ui-form-action-menu { flex: 0 1 auto; }
    .ui-workspace .ui-form-action-bar[data-ui-action-menus-ready="anchored"] > .ui-form-action-menu > .ui-form-popover {
        position: absolute; top: var(--ui-action-menu-top, calc(100% + 4px)); left: var(--ui-action-menu-left, 12px); right: auto;
        margin: 0; width: min(360px, calc(100% - 24px));
    }
}
.ui-workspace .ui-form-popover--contact {
    position: static; inset: auto; margin: 4px 0 0; width: 100%; max-width: 580px; overflow-wrap: anywhere;
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; z-index: 10;
}
.ui-workspace .est-section:not([data-ui-contact-popovers-ready]) .ui-form-popover--contact :is(.ui-field-grid, .ui-form-permissions) {
    grid-template-columns: minmax(0, 1fr);
}
.ui-workspace [data-ui-contact-popovers-ready="anchored"] .ui-form-popover--contact {
    position: absolute; top: var(--ui-contact-top, 0); left: var(--ui-contact-left, 0); margin: 0;
    width: min(580px, var(--ui-contact-available, 100%));
}
.ui-form-permissions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px; font-size: var(--ui-text-small); }
@media (max-width: 600px) {
    .ui-section { padding: 16px; }
    .ui-field-grid { grid-template-columns: minmax(0, 1fr); }
    .ui-inline-fields { flex-wrap: wrap; }
    .ui-inline-fields > select { flex-basis: 100%; }
    .ui-workspace .ui-form-action-menu { flex-basis: 100%; }
    .ui-workspace .ui-form-action-menu > .ui-form-popover { width: 100%; }
}