/* System-wide containment contract: content stays inside its owning surface. */
:root {
    --system-container-width: 100%;
    --system-container-gap: clamp(10px, 1.25vw, 18px);
}

.app-shell main,
#pageHost,
.module-page,
.workspace-card,
.settings-content,
.settings-grid,
.mvc-grid,
.security-workspace,
.transaction-list-card {
    width: var(--system-container-width);
    min-width: 0;
    max-width: 100%;
}

:where(#pageHost, .module-page, .workspace-card, .settings-content, .settings-grid, .mvc-grid) > * {
    min-width: 0;
    max-width: 100%;
}

:where(.workspace-card, .settings-content, .modal, .form-grid, .settings-grid)
    :where(input, select, textarea, .search, .field, .searchable-select) {
    min-width: 0;
    max-width: 100%;
}

:where(.workspace-card, .settings-content, .modal, .form-grid, .settings-grid)
    :where(input, select, textarea) {
    width: 100%;
}

:where(.workspace-card, .settings-content, .settings-grid)
    :where(.ag-root-wrapper, .table-scroll, .grid-scroll, .responsive-table) {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

/* Filters use the available content width, not the browser width plus sidebar. */
@media screen {
    .workspace-card:has(> :is(.mvc-grid, .ag-theme-quartz, .ag-styled-root)) {
        padding: 0;
    }

    .workspace-card:has(> :is(.mvc-grid, .ag-theme-quartz, .ag-styled-root)) > :not(.mvc-grid, .ag-theme-quartz, .ag-styled-root) {
        margin: 10px;
    }

    .workspace-card > :is(.mvc-grid, .ag-theme-quartz, .ag-styled-root) {
        margin: 0;
        border-radius: inherit;
    }
}

.employee-directory-toolbar {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    width: 100%;
    min-width: 0;
}

.employee-directory-toolbar > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 600px) {
    .employee-directory-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .employee-directory-toolbar > .search {
        grid-column: 1 / -1;
    }
}

/* Search is one control: the icon area must not expose a second input surface. */
.app-shell .search {
    min-height: var(--control-height);
    padding: 0 12px;
    overflow: hidden;
    color: var(--control-placeholder);
    border: 1px solid var(--control-border);
    border-radius: var(--control-radius);
    background: var(--control-bg);
}

.app-shell .search input:not([type='checkbox']):not([type='radio']) {
    width: 100%;
    min-width: 0;
    height: calc(var(--control-height) - 2px);
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-shell .search:focus-within {
    border-color: var(--control-focus);
    box-shadow: 0 0 0 3px var(--control-focus-ring);
}