/* Shared workspace geometry; component appearance lives in App design resources. */
:where(.app-workspace, .app-ui) { min-width: 0; max-width: 100%; color: var(--app-color-text); }
:where(.app-workspace) > :first-child { margin-top: 0; }
:where(.app-workspace) :where(h1,h2,h3,p,dl) { margin-top: 0; }
:where(.app-workspace) :where(h2,h3) { line-height: 1.35; }
:where(.app-workspace) h2 { font-size: 1.15rem; }
:where(.app-panel, .app-workspace-panel) { padding: var(--app-panel-padding); }
:where(.app-panel-heading) { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: var(--app-space); }
:where(.app-panel-heading) h2 { margin: 0; }
:where(.app-form-grid, .app-profile-fields) { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--app-space); }
:where(.app-form-pair) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--app-space); min-width: 0; }
:where(.app-field-wide) { grid-column: 1 / -1; }
:where(.app-field-toggle) { display: flex; align-items: center; gap: .65rem; min-height: var(--app-control-height); }
:where(.app-form-actions) { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; padding-top: var(--app-space); margin-top: var(--app-space); border-top: 1px solid var(--app-color-border); }
:where(.app-form-actions) output { color: var(--app-color-text-muted); font-size: .85rem; }
:where(.app-form-actions[data-dirty="true"]) { position: sticky; bottom: 0; z-index: 4; padding: var(--app-space); background: var(--app-color-surface); box-shadow: var(--app-shadow); border-radius: var(--app-radius); }
:where(.app-form-actions[data-dirty="true"]) output { color: var(--app-color-link); }
:where(.app-address-grid) { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,23rem),1fr)); gap: var(--app-space); }
:where(.app-address-card) { padding: var(--app-panel-padding); align-self: start; }
:where(.app-address-card) h2 { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
:where(.app-address-card) h2 .fa { color: var(--app-color-primary); }
:where(.app-address-preview) { margin-bottom: var(--app-space); min-height: 4.5rem; }
:where(.app-address-preview) span { display: block; }
:where(.app-address-editor) { margin-top: var(--app-space); }
:where(.app-address-editor) > summary > .fa:last-child { display: none; }
:where(.app-address-card) .app-field-toggle { margin-bottom: var(--app-space); }
:where(.app-search-input) { position: relative; display: block; }
:where(.app-search-input) > .fa { position: absolute; top: 50%; left: .8rem; transform: translateY(-50%); color: var(--app-color-text-muted); pointer-events: none; }
:where(.app-search-input) > input { padding-left: 2.4rem; width: 100%; }
:where(.app-table-filter) output { align-self: center; color: var(--app-color-text-muted); font-size: .85rem; }
:where(.app-metrics) { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,13rem),1fr)); gap: var(--app-space); margin-bottom: var(--app-space); }
:where(.app-metric-action) { margin-left: auto; color: var(--app-color-link); }
:where(.app-item-name) { overflow-wrap: anywhere; }
:where(.app-item-sku,.app-muted) { color: var(--app-color-text-muted); font-size: .85rem; }
:where(.app-item-sku) { display: block; }
:where(.app-sr-only) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Suggestions use the existing native popover/controller and never change document flow. */
:where(.app-suggestions) { box-sizing: border-box; z-index: 10000; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--app-color-control-border); border-radius: var(--app-radius); background: var(--app-color-surface); color: var(--app-color-text); box-shadow: var(--app-shadow); padding: .25rem; }
:where(.app-suggestions) > button { display: block; text-align: left; width: 100%; min-height: 2.75rem; white-space: normal; padding: .7rem; border: 0; border-radius: var(--app-control-radius); background: transparent; color: inherit; cursor: pointer; }
:where(.app-suggestions) > button:where(:hover,[aria-selected="true"]) { background: var(--app-color-selection); color: var(--app-color-selection-text); }
:where(.app-suggestions) > button:where(:hover,[aria-selected="true"]) :where(.app-item-sku,.app-muted) { color: inherit; }
/* Existing validation adapters retain their focus targets and field paths. */
:where(.app-workspace) .UIAdminFormErrors { margin: 0 0 var(--app-space); padding: var(--app-space); border: 1px solid var(--app-color-error-border); border-inline-start-width: 4px; border-radius: var(--app-radius); background: var(--app-color-error-surface); color: var(--app-color-error-text); }
:where(.app-workspace) .UIAdminFormErrors ul { margin: .5rem 0 0; padding-left: 1.2rem; }
:where(.app-workspace) .UIAdminFormErrors button { min-height: 2.75rem; text-align: left; color: inherit; background: none; border: 0; padding: .25rem 0; cursor: pointer; text-decoration: underline; }
:where(.app-member-identity) { display: flex; align-items: center; gap: .75rem; min-width: 0; }
:where(.app-member-avatar) { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--app-radius); background: var(--app-color-surface-alternate); color: var(--app-color-link); font-weight: 700; }
:where(.app-member-copy) { min-width: 0; overflow-wrap: anywhere; }
:where(.app-member-identity) :where(strong,small) { display: block; }
:where(.app-member-identity) small { color: var(--app-color-text-muted); }
:where(.app-member-table) select { width: min(100%,17rem); }
:where(.app-member-actions) { text-align: right; }
:where(.app-member-actions) button + button { margin-left: .4rem; }
:where(.app-member-create) { width: min(43rem,calc(100vw - 2rem)); }
@media (max-width: 720px) {
    :where(.app-form-pair,.app-form-grid,.app-profile-fields) { grid-template-columns: minmax(0,1fr); }
    :where(.app-toolbar) > .app-toolbar-search { flex-basis: 100%; }
}

.app-table-filter { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.app-table-filter > label { display: flex; align-items: center; gap: .85rem; flex: 1 1 24rem; min-width: 0; margin: 0; }
.app-table-filter-label { white-space: nowrap; font-size: .8rem; }
.app-table-filter .app-search-input { flex: 1; min-width: 8rem; }
.app-table-filter > output { flex: none; white-space: nowrap; }
@media (max-width: 600px) { .app-table-filter > label { flex-wrap: wrap; gap: .35rem; } .app-table-filter-label { flex-basis: 100%; } }