:root {
    --alfa-bg-canvas: #0e1014;
    --alfa-bg-surface: #16181d;
    --alfa-bg-surface-raised: #1d2026;
    --alfa-bg-raised: var(--alfa-bg-surface-raised);
    --alfa-bg-input: #252830;
    --alfa-bg-table-header: #1d2026;
    --alfa-bg-row-alt: #1a1d23;
    --alfa-bg-row-hover: #22262e;
    --alfa-border-default: #333640;
    --alfa-border-strong: #4d525e;
    --alfa-border-subtle: color-mix(in srgb, var(--alfa-border-default) 46%, transparent);
    --alfa-text-primary: #f5f5f7;
    --alfa-text-secondary: #a6abb5;
    --alfa-text-disabled: #666b75;
    --alfa-accent: #4f9efa;
    --alfa-accent-hover: #6bb2ff;
    --alfa-accent-active: #3880e0;
    --alfa-state-selected: #29476b;
    --alfa-state-hover: #21242b;
    --alfa-success: #27ae60;
    --alfa-warning: #f2c94c;
    --alfa-danger: #eb5759;
    --alfa-space-4: 4px;
    --alfa-space-8: 8px;
    --alfa-space-12: 12px;
    --alfa-space-16: 16px;
    --alfa-space-24: 24px;
    --alfa-radius-sm: 4px;
    --alfa-radius-md: 8px;
    --alfa-radius-full: 999px;
    --alfa-font-body: 13px;
    --alfa-font-small: 12px;
    --alfa-font-caption: 11.5px;
    --alfa-control-sm: 34px;
    --alfa-control-md: 36px;
    --alfa-icon-button-size: 36px;
    --alfa-topbar-height: 44px;
    --alfa-toolbar-height: 44px;
    --alfa-context-toolbar-height: var(--alfa-toolbar-height);
    /* Capa compartida para Action Menu: backdrop 1998, panel 1999. */
    --alfa-z-action-menu-backdrop: 1998;
    --alfa-z-action-menu: 1999;
    --alfa-z-modal: 2100;
    --alfa-z-notification: 2200;
}

.shell.shell--alfa-design {
    width: 100%;
    max-width: none;
    height: 100dvh;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    margin-inline: 0;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--alfa-bg-canvas);
    transform: none;
}

.shell.shell--alfa-design .shell__main {
    grid-column: 1;
    width: 100%;
    max-width: none;
    height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-inline: 0;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 !important;
    transform: none;
}

.shell.shell--alfa-design .shell__header {
    display: none;
}

.alfa-app-topbar {
    position: relative;
    z-index: 1910;
    flex: 0 0 var(--alfa-topbar-height);
    width: 100%;
    max-width: none;
    min-width: 0;
    height: var(--alfa-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--alfa-space-16);
    margin-inline: 0;
    padding: 0 var(--alfa-space-16);
    border-bottom: 1px solid var(--alfa-border-default);
    border-radius: 0;
    background: var(--alfa-bg-surface);
    box-sizing: border-box;
    color: var(--alfa-text-primary);
    transform: none;
}

.alfa-app-topbar__brand,
.alfa-app-topbar__global-actions,
.alfa-app-topbar__nav {
    display: flex;
    align-items: center;
    min-width: 0;
}

.alfa-app-topbar__brand {
    gap: 28px;
}

.alfa-app-topbar__logo {
    height: var(--alfa-topbar-height);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    color: var(--alfa-text-primary);
    text-decoration: none;
}

.alfa-app-topbar__logo-mark {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 28px;
    border-radius: 6px;
    background: var(--alfa-accent);
    color: var(--alfa-text-primary);
    font-size: 17px;
    line-height: 1;
}

.alfa-app-topbar__brand-copy {
    display: grid;
    line-height: 1;
}

.alfa-app-topbar__brand-copy strong {
    font-size: 15px;
    font-weight: 600;
}

.alfa-app-topbar__brand-copy small {
    margin-top: 2px;
    color: var(--alfa-text-secondary);
    font-size: var(--alfa-font-small);
    font-weight: 500;
}

.alfa-app-topbar__nav {
    gap: 26px;
    overflow-x: auto;
    scrollbar-width: none;
}

.alfa-app-topbar__nav::-webkit-scrollbar {
    display: none;
}

.alfa-app-topbar__nav-item {
    height: var(--alfa-topbar-height);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--alfa-text-secondary);
    font: inherit;
    font-size: var(--alfa-font-body);
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
}

.alfa-app-topbar__nav-item:hover,
.alfa-app-topbar__nav-item.is-active {
    border-bottom-color: var(--alfa-accent);
    background: transparent;
    color: var(--alfa-text-primary);
}

.alfa-app-topbar__nav-item.is-disabled {
    color: var(--alfa-text-disabled);
    pointer-events: none;
}

.alfa-app-topbar__global-actions {
    justify-content: flex-end;
    gap: 6px;
}

.alfa-app-topbar__history {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
    padding-right: 18px;
    border-right: 1px solid var(--alfa-border-default);
}

.alfa-app-topbar__global-icon {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: var(--alfa-bg-surface-raised);
    color: var(--alfa-text-secondary);
    font: inherit;
    font-size: 17px;
    text-decoration: none;
    cursor: pointer;
}

.alfa-app-topbar__global-icon:hover,
.alfa-app-topbar__global-icon:focus-visible {
    background: color-mix(in srgb, var(--alfa-accent) 10%, transparent);
    color: var(--alfa-accent-hover);
    outline: 1px solid color-mix(in srgb, var(--alfa-accent) 72%, transparent);
}

.alfa-app-topbar__global-icon:disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

.alfa-app-topbar__global-icon.is-active,
.alfa-app-topbar__global-icon[aria-current="true"] {
    color: var(--alfa-accent);
}

.alfa-app-topbar__chip {
    max-width: min(280px, 32vw);
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--alfa-space-8);
    border: 1px solid var(--alfa-border-default);
    border-radius: var(--alfa-radius-sm);
    background: var(--alfa-bg-surface-raised);
    color: var(--alfa-text-primary);
    font-size: var(--alfa-font-small);
    line-height: 16px;
    white-space: nowrap;
}

.alfa-app-topbar__chip span:not(.alfa-app-topbar__avatar) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alfa-app-topbar__avatar {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--alfa-radius-full);
    background: var(--alfa-state-selected);
    color: var(--alfa-text-primary);
    font-size: var(--alfa-font-small);
    font-weight: 700;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design {
    position: relative;
    inset: auto;
    z-index: 1900;
    flex: 0 0 var(--alfa-context-toolbar-height);
    width: 100%;
    max-width: none;
    min-width: 0;
    height: var(--alfa-context-toolbar-height);
    min-height: 0;
    grid-template-columns: minmax(96px, auto) minmax(280px, 1fr) auto auto;
    grid-template-areas: "actions search pagination view";
    gap: var(--alfa-space-8);
    margin-inline: 0;
    padding: 0 var(--alfa-space-16);
    border-bottom: 1px solid var(--alfa-border-default);
    border-radius: 0;
    background: var(--alfa-bg-surface-raised);
    box-sizing: border-box;
    box-shadow: none;
    backdrop-filter: none;
    transform: none;
}

/* El header legacy sin búsqueda fuerza dos filas con !important. En el shell piloto
   Record/Edit/New deben conservar la Context Toolbar única de 44px. */
.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--no-search {
    height: var(--alfa-context-toolbar-height) !important;
    min-height: 0 !important;
    grid-template-columns: auto minmax(0, 1fr) auto 0 !important;
    grid-template-areas: "actions search pagination view" !important;
    row-gap: 0 !important;
    padding-block: 0 !important;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--no-search .main-page-header__actions {
    grid-area: actions !important;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--no-search .main-page-header__pagination {
    grid-area: pagination !important;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--no-search .main-page-header__view {
    grid-area: view !important;
}

/* Record mantiene acciones y navegación dentro de una única Context Toolbar de 44px. */
.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--record {
    height: 44px !important;
    min-height: 44px !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "actions filler pagination" !important;
    align-items: center !important;
    gap: var(--alfa-space-8) !important;
    padding: 0 var(--alfa-space-16) !important;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--record .main-page-header__actions {
    grid-area: actions !important;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--record .main-page-header__pagination {
    grid-area: pagination !important;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--record .main-page-header__search,
.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--record .main-page-header__view {
    display: none !important;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__nav,
.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__context {
    display: none;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__actions {
    grid-area: actions;
    justify-content: flex-start;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__search {
    grid-area: search;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__pagination {
    grid-area: pagination;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__view {
    grid-area: view;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--compact-context {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "nav context actions" !important;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--compact-context .main-page-header__nav,
.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--compact-context .main-page-header__context {
    display: flex;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--compact-context .main-page-header__nav {
    grid-area: nav;
    padding-right: var(--alfa-space-8);
    border-right: 1px solid var(--alfa-border-default);
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--compact-context .main-page-header__context {
    grid-area: context;
    min-width: 0;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--compact-context .main-page-header__context h1 {
    overflow: hidden;
    margin: 0;
    color: var(--alfa-text-primary);
    font-size: var(--alfa-font-body);
    font-weight: 600;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--compact-context .main-page-header__breadcrumb,
.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--compact-context .main-page-header__search,
.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--compact-context .main-page-header__view,
.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--compact-context .main-page-header__pagination {
    display: none !important;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--compact-context .main-page-header__actions {
    grid-area: actions !important;
    justify-content: flex-end;
}

.shell.shell--alfa-design.shell--collapsed .main-page-header.main-page-header--alfa-design,
.shell.shell--alfa-design.shell--direct .main-page-header.main-page-header--alfa-design,
.shell.shell--alfa-design.shell--top-only .main-page-header.main-page-header--alfa-design {
    left: 0;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design + .main-page-header__spacer {
    display: none;
}

.shell.shell--alfa-design .shell__content {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    min-width: 0;
    display: flex;
    margin-inline: 0;
    box-sizing: border-box;
    overflow: hidden;
    padding: var(--alfa-space-16);
    background: var(--alfa-bg-canvas);
}

.shell.shell--alfa-design .shell__content > * {
    min-height: 0;
}

/* Páginas legacy migradas a AlfaDesign (Compras/Ventas/Contabilidad/Caja y Bancos) que todavía
   usan el wrapper genérico .page-grid como raíz -- sin esto, .page-grid no declara su propia
   altura/scroll y bajo .shell__content (flex + overflow:hidden) el contenido queda sin forma de
   bajar con mouse ni teclado. Al estar scopeado a .shell--alfa-design, no afecta absolutamente
   nada a los módulos que siguen en el shell legacy (ahí .shell--alfa-design nunca está presente). */
.shell.shell--alfa-design .shell__content > .page-grid {
    height: 100%;
    overflow-y: auto;
}

.shell.shell--alfa-design.shell--direct .alfa-app-topbar__nav,
.shell.shell--alfa-design.shell--direct .alfa-app-topbar__global-icon {
    display: none;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__context h1 {
    color: var(--alfa-text-primary);
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__breadcrumb {
    display: none;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__icon-btn,
.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__overflow summary,
.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__view-btn,
.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__action {
    min-height: var(--alfa-control-md);
    height: var(--alfa-control-md);
    border-color: var(--alfa-border-default);
    border-radius: var(--alfa-radius-sm);
    background: var(--alfa-bg-surface);
    color: var(--alfa-text-primary);
    box-shadow: none;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__icon-btn,
.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__overflow summary {
    width: var(--alfa-icon-button-size);
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__pagination .main-page-header__icon-btn {
    width: var(--alfa-control-sm);
    min-height: var(--alfa-control-sm);
    height: var(--alfa-control-sm);
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__action {
    padding: 0 var(--alfa-space-8);
    font-size: var(--alfa-font-body);
    font-weight: 500;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__action--primary {
    border-color: var(--alfa-accent);
    background: var(--alfa-accent);
    color: #0e1014;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__action--danger {
    border-color: var(--alfa-danger);
    background: transparent;
    color: var(--alfa-danger);
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__view {
    flex: 0 0 auto;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__view-btn {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    font-size: var(--alfa-font-small);
    font-weight: 600;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__view-label {
    display: inline !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__view-btn.is-active {
    border-color: var(--alfa-accent);
    background: var(--alfa-state-selected);
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__search {
    justify-self: center;
    width: 100%;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__search .smart-search {
    width: min(100%, 460px) !important;
    max-width: 480px !important;
    min-width: 320px;
    display: block;
}

.shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__search .smart-search__bar {
    width: 100%;
    height: 36px;
    min-height: 36px;
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--alfa-border-default);
    border-radius: 6px;
    background: var(--alfa-bg-input);
}

.shell.shell--alfa-design .smart-search__bar:hover {
    border-color: var(--alfa-border-strong);
}

.shell.shell--alfa-design .smart-search__bar:focus-within,
.shell.shell--alfa-design .smart-search__bar.is-open {
    border-color: var(--alfa-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--alfa-accent) 22%, transparent);
}

.shell.shell--alfa-design .smart-search__search-icon,
.shell.shell--alfa-design .smart-search__filter-button,
.shell.shell--alfa-design .smart-search__toggle {
    flex: 0 0 36px;
    width: 36px;
    height: 34px;
}

.shell.shell--alfa-design .smart-search__search-icon {
    display: grid;
    place-items: center;
    border-right: 1px solid var(--alfa-border-default);
    background: transparent;
    color: var(--alfa-accent-hover);
    font-size: 16px;
}

.shell.shell--alfa-design .smart-search__filter-button {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-right: 1px solid var(--alfa-border-default);
    background: transparent;
    color: var(--alfa-text-secondary);
    font-size: 16px;
    cursor: pointer;
}

.shell.shell--alfa-design .smart-search__filter-button:hover,
.shell.shell--alfa-design .smart-search__filter-button:focus-visible,
.shell.shell--alfa-design .smart-search__filter-button.is-active {
    background: color-mix(in srgb, var(--alfa-accent) 14%, transparent);
    color: var(--alfa-accent-hover);
    outline: 0;
}

.shell.shell--alfa-design .smart-search__active-filters {
    min-width: 0;
    max-width: 180px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    overflow: hidden;
}

.shell.shell--alfa-design .smart-search__active-filters:empty {
    display: none;
}

.shell.shell--alfa-design .smart-search__active-filter {
    min-width: 0;
    max-width: 104px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    padding: 0 4px 0 8px;
    border: 1px solid color-mix(in srgb, var(--alfa-accent) 24%, var(--alfa-border-default));
    border-radius: 5px;
    background: color-mix(in srgb, var(--alfa-state-selected) 42%, var(--alfa-bg-input));
    color: var(--alfa-text-primary);
    font-size: var(--alfa-font-caption);
    font-weight: 500;
    cursor: pointer;
}

.shell.shell--alfa-design .smart-search__active-filter:hover,
.shell.shell--alfa-design .smart-search__active-filter:focus-visible {
    background: color-mix(in srgb, var(--alfa-state-selected) 60%, var(--alfa-bg-input));
    outline: 0;
}

.shell.shell--alfa-design .smart-search__active-filter-remove {
    width: 18px;
    height: 22px;
    display: grid;
    place-items: center;
    flex: 0 0 18px;
    border-radius: 4px;
    font-size: 14px;
}

.shell.shell--alfa-design .smart-search__active-filter > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell.shell--alfa-design .smart-search__more-filters {
    height: 24px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 7px;
    border-radius: 5px;
    background: var(--alfa-state-hover);
    color: var(--alfa-text-secondary);
    font-size: var(--alfa-font-caption);
}

.shell.shell--alfa-design .smart-search__active-filter:hover .smart-search__active-filter-remove {
    background: color-mix(in srgb, var(--alfa-text-primary) 10%, transparent);
}

.shell.shell--alfa-design .smart-search__bar > input {
    flex: 1 1 auto;
    height: 34px;
    min-width: 0;
    padding: 0 9px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--alfa-text-primary);
    font-size: var(--alfa-font-body);
    line-height: 18px;
    outline: 0;
}

.shell.shell--alfa-design .smart-search__bar > input::placeholder {
    color: var(--alfa-text-secondary);
    opacity: 0.82;
}

.shell.shell--alfa-design .smart-search__toggle {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--alfa-border-default);
    border-radius: 0;
    background: var(--alfa-bg-surface-raised);
    color: var(--alfa-text-secondary);
    font-size: 15px;
    cursor: pointer;
}

.shell.shell--alfa-design .smart-search__toggle:hover,
.shell.shell--alfa-design .smart-search__toggle:focus-visible,
.shell.shell--alfa-design .smart-search__bar.is-open .smart-search__toggle {
    background: var(--alfa-state-hover);
    color: var(--alfa-accent-hover);
    outline: 0;
}

.shell.shell--alfa-design .smart-search__panel {
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    width: min(860px, calc(100vw - 32px));
    max-height: min(70vh, 520px);
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 8px 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px;
    border-color: var(--alfa-border-default);
    border-radius: 8px;
    background: var(--alfa-bg-surface-raised);
    color: var(--alfa-text-primary);
    font-size: var(--alfa-font-small);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.shell.shell--alfa-design .smart-search__column {
    gap: 2px !important;
    padding: 0 12px !important;
    min-width: 0;
}

.shell.shell--alfa-design .smart-search__column:first-child {
    padding-left: 0 !important;
}

.shell.shell--alfa-design .smart-search__column:nth-child(3) {
    padding-right: 0 !important;
}

.shell.shell--alfa-design .smart-search__column:last-child {
    padding-right: 0 !important;
}

.shell.shell--alfa-design .smart-search__column + .smart-search__column {
    border-left-color: var(--alfa-border-default);
}

.shell.shell--alfa-design .smart-search h4 {
    min-height: 28px;
    margin: 0 0 4px;
    gap: 6px;
    color: var(--alfa-text-primary);
    font-size: var(--alfa-font-small);
    font-weight: 600;
}

.shell.shell--alfa-design .smart-search h4 i {
    color: var(--alfa-accent-hover);
    font-size: 14px;
}

.shell.shell--alfa-design .smart-search__column > button,
.shell.shell--alfa-design .smart-option {
    min-height: 30px;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: var(--alfa-font-small);
    line-height: 16px;
}

.shell.shell--alfa-design .smart-search__column button:hover,
.shell.shell--alfa-design .smart-option:hover {
    background: var(--alfa-state-hover);
}

.shell.shell--alfa-design .smart-search__column button:focus-visible,
.shell.shell--alfa-design .smart-option:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--alfa-accent) 76%, transparent);
    outline-offset: -2px;
}

.shell.shell--alfa-design .smart-option.is-active {
    background: color-mix(in srgb, var(--alfa-state-selected) 58%, var(--alfa-bg-surface-raised));
    color: var(--alfa-accent-hover);
}

.shell.shell--alfa-design .smart-option.is-active::before {
    content: "✓";
    margin-right: 6px;
    color: var(--alfa-accent-hover);
}

.shell.shell--alfa-design .smart-search__inline {
    gap: 4px;
    margin-top: 4px;
}

.shell.shell--alfa-design .smart-search__inline label {
    font-size: var(--alfa-font-caption);
}

.shell.shell--alfa-design .smart-search select,
.shell.shell--alfa-design .smart-search input[type="text"],
.shell.shell--alfa-design .smart-search input[type="date"] {
    height: 32px;
    border-color: var(--alfa-border-default);
    border-radius: 6px;
    background: var(--alfa-bg-input);
    color: var(--alfa-text-primary);
    padding: 0 8px;
    font-size: var(--alfa-font-small);
}

.shell.shell--alfa-design .smart-search select:focus-visible,
.shell.shell--alfa-design .smart-search input[type="text"]:focus-visible,
.shell.shell--alfa-design .smart-search input[type="date"]:focus-visible {
    border-color: var(--alfa-accent);
    outline: 2px solid color-mix(in srgb, var(--alfa-accent) 24%, transparent);
    outline-offset: 1px;
}

.shell.shell--alfa-design .smart-search__column .actions {
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    margin-top: 6px;
    padding-right: 2px;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.shell.shell--alfa-design .smart-search__column .actions .btn {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 30px;
    height: 30px;
    padding: 0 10px;
    font-size: var(--alfa-font-small);
}

.shell.shell--alfa-design .smart-search__column .actions .btn--primary {
    border-color: var(--alfa-accent);
    background: var(--alfa-accent);
    color: var(--alfa-bg-canvas);
}

.shell.shell--alfa-design .smart-search__column .actions .btn--primary:hover,
.shell.shell--alfa-design .smart-search__column .actions .btn--primary:focus-visible {
    border-color: var(--alfa-accent-hover);
    background: var(--alfa-accent-hover);
}

.shell.shell--alfa-design .smart-search__custom {
    grid-column: 1 / -1;
    grid-template-columns: 140px 165px minmax(120px, 1fr) 120px;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 0 0;
    border-top: 1px solid var(--alfa-border-default);
    background: transparent;
}

.shell.shell--alfa-design .smart-search__custom h4 {
    grid-column: 1 / -1;
    margin: 0;
}

.shell.shell--alfa-design .smart-search__custom select,
.shell.shell--alfa-design .smart-search__custom input,
.shell.shell--alfa-design .smart-search__custom .btn {
    width: 100%;
    height: 32px;
    min-height: 32px;
    padding-block: 0;
    font-size: var(--alfa-font-small);
}

.main-page-header__pagination {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--alfa-space-4);
    min-width: 0;
    color: var(--alfa-text-secondary);
    font-size: var(--alfa-font-small);
    line-height: 16px;
    white-space: nowrap;
}

.main-page-header__pagination-label {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-page-header__pagination-page {
    min-width: 56px;
    height: var(--alfa-control-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--alfa-space-8);
    border: 1px solid var(--alfa-border-default);
    border-radius: var(--alfa-radius-sm);
    background: var(--alfa-bg-surface);
    color: var(--alfa-text-primary);
    font-size: var(--alfa-font-small);
}

@media (max-width: 1100px) {
    .shell.shell--alfa-design {
        --alfa-topbar-height: 40px;
        --alfa-toolbar-height: 40px;
    }

    .alfa-app-topbar {
        gap: var(--alfa-space-8);
        padding-inline: var(--alfa-space-12);
    }

    .alfa-app-topbar__brand {
        gap: var(--alfa-space-16);
    }

    .alfa-app-topbar__logo {
        gap: var(--alfa-space-8);
    }

    .alfa-app-topbar__brand-copy small {
        display: block;
        margin-top: 1px;
        font-size: 10.5px;
        line-height: 11px;
    }

    .alfa-app-topbar__nav {
        gap: var(--alfa-space-12);
    }

    .alfa-app-topbar__global-actions {
        gap: var(--alfa-space-4);
    }

    .alfa-app-topbar__chip {
        height: 30px;
        max-width: min(210px, 24vw);
    }

    .shell.shell--alfa-design .main-page-header.main-page-header--alfa-design {
        grid-template-columns: minmax(88px, auto) minmax(240px, 1fr) auto auto;
        gap: var(--alfa-space-4);
        padding-inline: var(--alfa-space-12);
    }

    .shell.shell--alfa-design .main-page-header.main-page-header--alfa-design.main-page-header--record {
        height: var(--alfa-context-toolbar-height) !important;
        min-height: var(--alfa-context-toolbar-height) !important;
        gap: var(--alfa-space-4) !important;
        padding-inline: var(--alfa-space-12) !important;
    }

    .shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__pagination-label {
        display: none;
    }

    .shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__search .smart-search {
        width: min(100%, 360px) !important;
        min-width: 300px;
        max-width: 380px !important;
    }

    .shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__search .smart-search__bar {
        height: 34px;
        min-height: 34px;
    }

    .shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__view-label {
        display: none !important;
    }

    .shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__view-btn {
        width: var(--alfa-icon-button-size) !important;
        min-width: var(--alfa-icon-button-size) !important;
        max-width: var(--alfa-icon-button-size) !important;
        flex: 0 0 var(--alfa-icon-button-size) !important;
        gap: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .shell.shell--alfa-design .smart-search__active-filters {
        max-width: 120px;
    }

    .shell.shell--alfa-design .smart-search__active-filter {
        max-width: 78px;
    }

    .shell.shell--alfa-design .smart-search__panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shell.shell--alfa-design .smart-search__panel--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shell.shell--alfa-design .smart-search__panel--standard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shell.shell--alfa-design .smart-search__panel--wide {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shell.shell--alfa-design .smart-search__panel--standard > .smart-search__section--location {
        order: 3;
    }

    .shell.shell--alfa-design .smart-search__panel--standard > .smart-search__section--group {
        order: 4;
    }

    .shell.shell--alfa-design .smart-search__panel--compact > .smart-search__section--actions,
    .shell.shell--alfa-design .smart-search__panel--standard > .smart-search__section--actions {
        display: contents;
    }

    .shell.shell--alfa-design .smart-search__panel--compact > .smart-search__section--actions > h4,
    .shell.shell--alfa-design .smart-search__panel--standard > .smart-search__section--actions > h4 {
        order: 5;
        grid-column: 1;
        grid-row: 2;
        min-height: 30px;
        margin: 0;
        padding: 0 12px;
        align-self: center;
    }

    .shell.shell--alfa-design .smart-search__panel--standard > .smart-search__section--actions > h4 {
        grid-row: 3;
    }

    .shell.shell--alfa-design .smart-search__panel--compact > .smart-search__section--actions > .smart-search__actions,
    .shell.shell--alfa-design .smart-search__panel--standard > .smart-search__section--actions > .smart-search__actions {
        order: 6;
        grid-column: 2;
        grid-row: 2;
        margin-top: 0;
        padding: 0 12px;
        align-self: center;
        justify-content: flex-start;
    }

    .shell.shell--alfa-design .smart-search__panel--standard > .smart-search__section--actions > .smart-search__actions {
        grid-row: 3;
    }

    .shell.shell--alfa-design .smart-search__custom {
        grid-column: 1 / -1;
        grid-template-columns: minmax(140px, 1fr) minmax(165px, 1fr);
    }

    .alfa-app-topbar__chip--base {
        max-width: 180px;
    }

    .alfa-app-topbar__global-icon {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 720px) {
    .shell.shell--alfa-design .smart-search__panel {
        grid-template-columns: 1fr;
    }

    .shell.shell--alfa-design .smart-search__column,
    .shell.shell--alfa-design .smart-search__column:first-child,
    .shell.shell--alfa-design .smart-search__column:nth-child(3),
    .shell.shell--alfa-design .smart-search__column:last-child {
        padding-inline: 0 !important;
    }

    .shell.shell--alfa-design .smart-search__column + .smart-search__column {
        padding-top: 8px !important;
        border-left: 0;
        border-top: 1px solid var(--alfa-border-default);
    }

    .shell.shell--alfa-design .smart-search__custom {
        grid-template-columns: 1fr;
    }
}

.alfa-data-view-footer {
    flex: 0 0 auto;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--alfa-space-12);
    padding: var(--alfa-space-4) var(--alfa-space-12);
    border-top: 1px solid var(--alfa-border-default);
    background: var(--alfa-bg-surface);
    color: var(--alfa-text-secondary);
}

.alfa-data-view-footer__summary {
    min-width: 0;
    overflow: hidden;
    color: var(--alfa-text-secondary);
    font-size: var(--alfa-font-small);
    font-weight: 500;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alfa-data-view-footer__controls {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--alfa-space-8);
}

.alfa-data-view-footer .alfa-data-view-footer__page-size {
    width: 132px;
    flex: 0 0 132px;
}

.alfa-data-view-footer .alfa-data-view-footer__page-size .alfa-select__control {
    height: var(--alfa-control-sm);
    min-height: var(--alfa-control-sm);
    font-size: var(--alfa-font-small);
}

@media (max-width: 760px) {
    .alfa-data-view-footer {
        min-height: 36px;
        flex-wrap: wrap;
    }

    .alfa-data-view-footer__summary {
        flex: 1 1 220px;
    }

    .alfa-data-view-footer .alfa-data-view-footer__page-size {
        width: 128px;
        flex-basis: 128px;
    }

    .shell.shell--alfa-design .shell__main {
        padding-inline: var(--alfa-space-8);
    }

    .alfa-app-topbar {
        padding-inline: var(--alfa-space-8);
    }

    .alfa-app-topbar__nav-item span,
    .alfa-app-topbar__chip span:not(.alfa-app-topbar__avatar) {
        display: none;
    }

    .shell.shell--alfa-design .main-page-header.main-page-header--alfa-design {
        grid-template-columns: auto minmax(80px, max-content) minmax(0, 1fr) auto;
        padding-inline: var(--alfa-space-8);
    }

    .shell.shell--alfa-design .main-page-header.main-page-header--alfa-design .main-page-header__pagination {
        display: none;
    }
}