/* ==========================================================================
   Eternet DataGrid – Global Styles
   ==========================================================================
   Include via: <link href="_content/Eternet.Web.UI/eternet-datagrid.css" rel="stylesheet" />
   All classes use BEM naming. Override any rule in your app CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grid Container – Custom Properties (defaults)
   -------------------------------------------------------------------------- */
.eternet-grid-container {
    --datagrid-filter-width: 26.5rem;
    --datagrid-side-panel-width: var(--datagrid-filter-width);
    --datagrid-side-panel-surface:
        linear-gradient(180deg,
            color-mix(in srgb, var(--neutral-layer-2) 95%, black 5%) 0%,
            color-mix(in srgb, var(--neutral-layer-1) 98%, black 2%) 100%);
    --datagrid-side-panel-border:
        color-mix(in srgb, var(--neutral-stroke-divider) 60%, transparent 40%);
    --datagrid-side-panel-header-border:
        color-mix(in srgb, var(--neutral-stroke-divider) 70%, transparent 30%);
    --datagrid-side-panel-shadow:
        inset 1px 0 0 rgba(255, 255, 255, 0.04), -8px 0 24px rgba(0, 0, 0, 0.15);
    --datagrid-side-panel-header-padding: 0.75rem 0.75rem 0.6rem;
    --datagrid-side-panel-subtle-surface:
        color-mix(in srgb, var(--neutral-layer-2) 80%, black 20%);
}

.eternet-grid-state {
    min-height: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--neutral-foreground-rest);
}

.eternet-grid-state--empty {
    opacity: 0.86;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Side Panel Shell
   -------------------------------------------------------------------------- */
.grid-side-panel {
    width: 100%;
    min-width: var(--datagrid-side-panel-width, var(--datagrid-filter-width));
    max-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--datagrid-side-panel-surface);
    border-left: 1px solid var(--datagrid-side-panel-border);
    box-shadow: var(--datagrid-side-panel-shadow);
}

.grid-side-panel__header {
    display: flex;
    width: 100%;
    padding: var(--datagrid-side-panel-header-padding, 1rem 1rem 0.95rem);
    border-bottom: 1px solid var(--datagrid-side-panel-header-border);
    align-items: flex-start;
    gap: 0.5rem;
}

.grid-side-panel__intro {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.grid-side-panel__title {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.grid-side-panel__description {
    max-width: 28rem;
    color: var(--neutral-foreground-rest);
    font-size: 0.8rem;
    line-height: 1.4;
    opacity: 0.8;
}

.grid-side-panel__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.15rem;
}

.grid-side-panel__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    color: var(--neutral-foreground-rest);
    font-size: 0.75rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--neutral-layer-3) 90%, black 10%);
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 50%, transparent 50%);
}

.grid-side-panel__pill--accent {
    color: var(--accent-foreground-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 10%, transparent 90%);
    border-color: color-mix(in srgb, var(--accent-fill-rest) 25%, transparent 75%);
}

.grid-side-panel__pill-label {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
}

.grid-side-panel__body {
    display: flex;
    flex: 1;
    min-height: 0;
    min-width: 0;
    padding: 0.75rem;
    overflow: hidden;
    flex-direction: column;
    width: 100%;
}

.grid-side-panel__footer {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--datagrid-side-panel-header-border);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--datagrid-side-panel-surface) 90%, transparent 10%) 0%,
        var(--datagrid-side-panel-surface) 100%);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}

.grid-side-panel__header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    flex-wrap: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */
.grid-toolbar {
    padding: 0.75rem 0 0.35rem;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.grid-toolbar__cluster,
.grid-toolbar__workspace,
.grid-toolbar__workspace-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex-wrap: wrap;
}

.grid-toolbar__cluster--query {
    flex: 1 1 40rem;
}

.grid-toolbar__surface {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--neutral-layer-2) 84%, black 16%);
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 76%, transparent 24%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.grid-toolbar__surface--query {
    flex: 1 1 auto;
    width: 100%;
    padding: 0.4rem 0.55rem;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.grid-toolbar__surface--crud {
    padding-inline-end: 0.45rem;
}

.grid-toolbar__action::part(control),
.grid-toolbar__icon-action::part(control),
.filter-panel__action::part(control),
.grid-filter-shell__clear::part(control),
.column-filter__add-button::part(control) {
    border-radius: 9px;
    transition: background-color 160ms ease, border-color 160ms ease,
                color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.grid-toolbar__action::part(control) {
    min-height: 2rem;
    padding: 0.34rem 0.7rem;
    font-weight: 600;
    letter-spacing: 0.005em;
}

.filter-panel__action::part(control) {
    min-height: 2.1rem;
    padding: 0.42rem 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.filter-panel__action--apply::part(control) {
    min-width: 5.6rem;
}

.grid-toolbar__action--apply::part(control) {
    min-width: 0;
    box-shadow: none;
}

.grid-toolbar__action--crud::part(control) {
    min-width: 0;
}

.grid-toolbar__action--danger::part(control) {
    border-color: color-mix(in srgb, var(--error-foreground-rest, #ffb4ab) 28%, transparent 72%);
}

.grid-toolbar__icon-action::part(control) {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.28rem;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.grid-filter-shell__clear::part(control) {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.34rem;
    background: color-mix(in srgb, var(--neutral-layer-2) 86%, black 14%);
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 70%, transparent 30%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.grid-toolbar__icon-action:hover::part(control) {
    background: color-mix(in srgb, var(--neutral-layer-2) 88%, black 12%);
    border-color: color-mix(in srgb, var(--neutral-stroke-rest) 64%, transparent 36%);
}

.grid-filter-shell__clear:hover::part(control) {
    background: color-mix(in srgb, var(--neutral-layer-3) 86%, black 14%);
    border-color: color-mix(in srgb, var(--accent-fill-rest) 44%, transparent 56%);
}

.grid-toolbar__search {
    flex: 1 1 18rem;
    min-width: 14rem;
}

.grid-toolbar__search-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.grid-toolbar__search-input--native {
    height: 2rem;
    padding: 0 0.75rem;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-input-rest);
    border: 1px solid var(--neutral-stroke-input-rest);
    border-radius: 4px;
    font: inherit;
    outline: none;
}

.grid-toolbar__search-input--native::placeholder {
    color: var(--neutral-foreground-hint);
}

.grid-toolbar__search-input--native:focus {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

.grid-toolbar__query-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: max-content;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.grid-toolbar__divider--query {
    align-self: stretch;
    height: auto;
}

.grid-toolbar__case-switch {
    flex-shrink: 0;
}

.grid-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    width: max-content;
    min-width: max-content;
}

.grid-toolbar__workspace {
    justify-content: flex-end;
    gap: 0.75rem;
}

.grid-toolbar__workspace-actions {
    gap: 0.25rem;
    padding: 0.28rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--neutral-layer-2) 84%, black 16%);
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 76%, transparent 24%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.grid-toolbar__active-view {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: nowrap;
    max-width: min(22rem, 48vw);
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--neutral-layer-2) 84%, black 16%);
    border: 1px solid color-mix(in srgb, var(--accent-fill-rest) 45%, var(--neutral-stroke-rest) 55%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.grid-toolbar__active-view-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--neutral-foreground-hint);
}

.grid-toolbar__active-view-name {
    display: inline-block;
    overflow: hidden;
    max-width: 13rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
    color: var(--neutral-foreground-rest);
}

.grid-toolbar__divider {
    height: 20px;
}

.grid-toolbar fluent-divider {
    opacity: 0.45;
}

@media (max-width: 960px) {
    .grid-toolbar__cluster--query {
        flex-basis: 100%;
    }

    .grid-toolbar__workspace {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .grid-toolbar__surface--query {
        border-radius: 8px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .grid-toolbar__search {
        min-width: 0;
        flex-basis: 100%;
    }

    .grid-toolbar__query-actions {
        width: 100%;
        min-width: 0;
    }

    .grid-toolbar__search-input,
    .grid-toolbar__active-view {
        width: 100%;
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Column Selector Panel
   -------------------------------------------------------------------------- */
.column-panel__controls {
    padding: 0.75rem 0.75rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.column-panel__bulk-actions {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--neutral-layer-2) 60%, transparent 40%);
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 50%, transparent 50%);
    justify-content: space-between;
}

.column-panel__search {
    width: 100%;
}

.column-panel__list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
}

.column-panel__list [role='list'] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.column-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.65rem;
    border-radius: 6px;
    cursor: grab;
    transition: background-color 140ms ease, border-color 140ms ease,
                opacity 140ms ease, transform 140ms ease;
    background: color-mix(in srgb, var(--neutral-layer-2) 80%, black 20%);
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 60%, transparent 40%);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.02);
}

.column-item:hover {
    background: color-mix(in srgb, var(--neutral-layer-2) 90%, black 10%);
}

.column-item:focus {
    outline: 2px solid color-mix(in srgb, var(--accent-fill-rest) 80%, transparent 20%);
    outline-offset: -2px;
}

.column-item:active {
    cursor: grabbing;
}

.column-item.dragging {
    opacity: 0.58;
    transform: scale(0.985);
}

.column-item.drag-target {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--accent-fill-rest) 60%, transparent 40%);
    background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent 88%);
}

.column-panel__drag-handle {
    margin-right: 0.25rem;
    color: var(--neutral-foreground-rest);
    cursor: grab;
}

.column-panel__checkbox {
    flex: 1;
}

.column-panel__footer-shell {
    padding-top: 0;
}

.column-panel__footer-button {
    border-radius: 8px;
}

.column-panel__footer-button--ghost {
    margin-left: auto;
}

/* --------------------------------------------------------------------------
   Preset Manager
   -------------------------------------------------------------------------- */
.preset-manager {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.preset-manager__save-row {
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--neutral-layer-2) 60%, transparent 40%);
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 50%, transparent 50%);
}

.preset-manager__save-input {
    flex: 1;
}

.preset-manager__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent-foreground-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 18%, transparent 82%);
    border: 1px solid color-mix(in srgb, var(--accent-fill-rest) 35%, transparent 65%);
}

.preset-manager__badge--snapshot {
    color: color-mix(in srgb, var(--warning-foreground-rest, #f9dd8d) 92%, white 8%);
    background: color-mix(in srgb, var(--warning-fill-rest, #73510d) 18%, transparent 82%);
    border-color: color-mix(in srgb, var(--warning-fill-rest, #73510d) 40%, transparent 60%);
}

.preset-manager__summary,
.preset-manager__meta-line,
.preset-manager__meta-cell {
    color: var(--neutral-foreground-rest);
}

.preset-manager__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    padding-right: 0.25rem;
    padding-bottom: 0.75rem;
}

.preset-manager__card {
    padding: 0.65rem 0.75rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--neutral-layer-2) 80%, black 20%);
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 60%, transparent 40%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05),
                inset 1px 1px 0 rgba(255, 255, 255, 0.02);
    transition: background 160ms ease, border-color 160ms ease;
}

.preset-manager__card:hover {
    background: color-mix(in srgb, var(--neutral-layer-2) 90%, black 10%);
}

.preset-manager__card--default {
    border-color: color-mix(in srgb, var(--accent-fill-rest) 42%, var(--neutral-stroke-rest) 58%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-fill-rest) 18%, transparent 82%);
}

.preset-manager__card--snapshot {
    background: color-mix(in srgb, var(--warning-fill-rest, #73510d) 8%, var(--neutral-layer-2) 92%);
}

.preset-manager__card-main {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.preset-manager__card-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
}

.preset-manager__card-title-block {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.preset-manager__card-meta-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.preset-manager__card-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 650;
}

.preset-manager__rename-input {
    max-width: 24rem;
}

.preset-manager__summary {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
}

.preset-manager__meta-cell {
    min-width: 7.5rem;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    justify-content: flex-start;
}

.preset-manager__meta-line--muted {
    font-size: 0.75rem;
}

.preset-manager__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.preset-manager__empty-state {
    padding: 3rem 1rem;
}

.preset-manager__empty-copy {
    text-align: center;
    color: var(--neutral-foreground-rest);
}

.preset-manager__empty-title {
    display: block;
    margin-bottom: 0.5rem;
}

.preset-manager__empty-subtitle {
    color: var(--neutral-foreground-rest);
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   Filter Panel
   -------------------------------------------------------------------------- */
.filter-panel__footer-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.filter-panel__action::part(control) {
    min-width: 7rem;
}

.filter-panel__action--clear::part(control) {
    min-height: 2.2rem;
    background: color-mix(in srgb, var(--neutral-layer-2) 84%, black 16%);
    border-color: color-mix(in srgb, var(--neutral-stroke-rest) 72%, transparent 28%);
}

.filter-panel__action--apply::part(control) {
    min-height: 2.2rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05),
                0 6px 14px rgba(0, 0, 0, 0.12);
}

/* --------------------------------------------------------------------------
   Advanced Filter Panel
   -------------------------------------------------------------------------- */
.advanced-filter-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
}

.advanced-filter-panel__list {
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-right: 0.1rem;
}

.advanced-filter-panel__item {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.advanced-filter-panel__item .grid-filter-shell {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.advanced-filter-panel__item--active .grid-filter-shell--panel {
    border-color: color-mix(in srgb, var(--accent-fill-rest) 56%, var(--neutral-stroke-rest) 44%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-fill-rest) 18%, transparent 82%);
}

/* --------------------------------------------------------------------------
   Column Filter (add-filter buttons)
   -------------------------------------------------------------------------- */
.column-filter--adder {
    width: 100%;
    min-width: 0;
}

.column-filter--editor {
    width: 100%;
    min-width: 0;
}

.column-filter__add-button {
    width: 100%;
    justify-content: flex-start;
    border-radius: 8px;
    text-align: left;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    background: transparent;
    border: none;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.column-filter__add-button::part(control) {
    width: 100%;
    min-height: 2.45rem;
    justify-content: flex-start;
    padding: 0.68rem 0.95rem;
    color: var(--neutral-foreground-rest);
    background: color-mix(in srgb, var(--neutral-layer-2) 72%, black 28%);
    border: 1px dashed color-mix(in srgb, var(--neutral-stroke-rest) 46%, transparent 54%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

.column-filter__add-button:hover::part(control) {
    color: var(--accent-foreground-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 12%, var(--neutral-layer-2) 88%);
    border-color: color-mix(in srgb, var(--accent-fill-rest) 60%, transparent 40%);
    border-style: solid;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-fill-rest) 12%, transparent 88%),
                0 8px 18px rgba(0, 0, 0, 0.08);
}

.column-filter__add-button:active::part(control) {
    transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   Filter Shell (shared between popover and panel modes)
   -------------------------------------------------------------------------- */
.grid-filter-shell {
    outline: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    min-width: 0;
}

.grid-filter-shell--popover {
    min-width: min(25rem, calc(100vw - 1.5rem));
    max-width: min(29rem, calc(100vw - 1.5rem));
    padding: 1rem;
    border-radius: 9px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--neutral-layer-2) 85%, transparent 15%) 0%,
        color-mix(in srgb, var(--neutral-layer-1) 90%, transparent 10%) 100%);
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 50%, transparent 50%);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25),
                inset 1px 1px 0 rgba(255, 255, 255, 0.05);
}

.grid-filter-shell--panel {
    min-width: 0;
    max-width: 100%;
    padding: 0.6rem 0.7rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--neutral-layer-2) 80%, black 20%);
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 60%, transparent 40%);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.02);
}

.grid-filter-shell__header {
    align-items: center;
    gap: 0.55rem;
}

.grid-filter-shell__title {
    letter-spacing: 0.01em;
}

.grid-filter-shell__clear {
    flex-shrink: 0;
}

.grid-filter-shell__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    width: 100%;
}

.grid-filter-shell__section,
.grid-filter-string__conditions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
    width: 100%;
}

.grid-filter-shell__field-label {
    font-size: 0.71rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
}

.grid-filter-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: end;
    min-width: 0;
}

.grid-filter-range__item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.grid-filter-range__item .grid-filter-shell__field-label {
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: none;
    color: color-mix(in srgb, var(--neutral-foreground-rest) 72%, transparent 28%);
}

.grid-filter-shell__field,
.grid-filter-shell fluent-select,
.grid-filter-shell fluent-text-field,
.grid-filter-shell fluent-number-field,
.grid-filter-shell fluent-date-picker,
.grid-filter-shell fluent-tabs {
    width: 100%;
    min-width: 0;
}

.grid-filter-shell__field--native-number {
    box-sizing: border-box;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--control-corner-radius);
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font: inherit;
}

.grid-filter-shell__field--native-number:focus {
    border-color: var(--accent-fill-rest);
    outline: 1px solid var(--accent-fill-rest);
    outline-offset: -1px;
}

.grid-filter-guid__multi-values {
    box-sizing: border-box;
    min-height: 4.5rem;
    max-height: 11rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--control-corner-radius);
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 0.78rem;
    line-height: 1.45;
    resize: vertical;
}

.grid-filter-guid__multi-values:focus {
    border-color: var(--accent-fill-rest);
    outline: 1px solid var(--accent-fill-rest);
    outline-offset: -1px;
}

.grid-filter-shell__tabs {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.grid-filter-shell__tab-panel {
    padding-top: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
    min-width: 0;
}

.grid-filter-shell__footer {
    padding-top: 0.65rem;
    border-top: 1px solid color-mix(in srgb, var(--neutral-stroke-divider) 82%, transparent 18%);
}

.grid-filter-shell--panel .grid-filter-shell__footer {
    display: none;
}

.grid-filter-shell__footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.grid-filter-shell__validation {
    color: var(--error-foreground-rest, #ffb4ab);
    font-size: 0.8rem;
    line-height: 1.45;
}

.grid-filter-helper {
    color: var(--neutral-foreground-rest);
    font-size: 0.8rem;
    line-height: 1.45;
}

.grid-filter-helper--error {
    color: var(--error-foreground-rest, #ffb4ab);
}

.grid-filter-shell__radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: stretch;
    min-width: 0;
}

.grid-filter-shell fluent-radio-group {
    align-items: stretch;
    min-width: 0;
}

.grid-filter-enum {
    gap: 0.75rem;
}

.grid-filter-enum__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.grid-filter-enum__reset {
    border: 0;
    background: transparent;
    color: var(--accent-foreground-rest);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
}

.grid-filter-enum__reset:hover {
    color: color-mix(in srgb, var(--accent-foreground-rest) 82%, white 18%);
}

.grid-filter-enum__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-height: 16rem;
    overflow: auto;
    padding-right: 0.15rem;
}

.grid-filter-enum__option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 45%, transparent 55%);
    background: color-mix(in srgb, var(--neutral-layer-2) 82%, transparent 18%);
    color: var(--neutral-foreground-rest);
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.grid-filter-enum__option:hover {
    border-color: color-mix(in srgb, var(--accent-stroke-control-rest) 48%, var(--neutral-stroke-rest) 52%);
    background: color-mix(in srgb, var(--neutral-layer-3) 85%, transparent 15%);
}

.grid-filter-enum__option:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-fill-rest) 65%, white 35%);
    outline-offset: 2px;
}

.grid-filter-enum__option--selected {
    border-color: color-mix(in srgb, var(--accent-stroke-control-rest) 72%, transparent 28%);
    background: color-mix(in srgb, var(--accent-fill-rest) 18%, var(--neutral-layer-2) 82%);
    color: var(--accent-foreground-rest);
}

.grid-filter-enum__indicator {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 55%, transparent 45%);
    background: transparent;
    flex-shrink: 0;
}

.grid-filter-enum__option--selected .grid-filter-enum__indicator {
    border-color: color-mix(in srgb, var(--accent-fill-rest) 78%, transparent 22%);
    background: var(--accent-fill-rest);
}

.grid-filter-enum__text {
    white-space: nowrap;
}

.grid-filter-string__condition-inputs {
    display: contents;
}

.grid-filter-choice {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
    padding: 0.05rem 0;
    min-width: 0;
}

.grid-filter-string__condition {
    display: grid;
    grid-template-columns: minmax(6.9rem, 7.75rem) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.65rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--neutral-layer-2) 70%, black 30%);
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 40%, transparent 60%);
}

.grid-filter-string__condition > * {
    min-width: 0;
}

.grid-filter-shell--panel .grid-filter-string__condition {
    grid-template-columns: minmax(6.6rem, 7.4rem) minmax(0, 1fr) auto auto;
    background: color-mix(in srgb, var(--neutral-layer-3) 60%, transparent 40%);
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 30%, transparent 70%);
}

.grid-filter-choice__field {
    margin-top: 0;
    padding-left: 0;
    min-width: 0;
}

.grid-filter-string__condition-tools,
.grid-filter-string__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.grid-filter-string__condition-tools {
    display: contents;
}

.grid-filter-string__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
    min-width: max-content;
    white-space: nowrap;
}

.grid-filter-string__toggle-label {
    font-size: 0.76rem;
    color: var(--neutral-foreground-rest);
}

.grid-filter-string__condition fluent-select,
.grid-filter-string__condition fluent-text-field {
    min-width: 0;
}

.grid-filter-string__actions {
    padding-top: 0;
}

@media (max-width: 480px) {
    .grid-filter-range {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.6rem;
    }

    .grid-filter-choice {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.4rem;
    }

    .grid-filter-string__condition {
        grid-template-columns: minmax(0, 1fr);
    }

    .grid-filter-string__condition-inputs,
    .grid-filter-string__condition-tools {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
    }

    .grid-filter-string__condition-tools {
        justify-content: space-between;
    }
}

@media (max-width: 640px) {
    .grid-filter-shell--popover {
        min-width: min(100vw - 1rem, 26rem);
        max-width: min(100vw - 1rem, 26rem);
        padding: 0.85rem;
    }

    .grid-filter-choice__field {
        padding-left: 0;
    }
}

/* --------------------------------------------------------------------------
   Detail Panel
   -------------------------------------------------------------------------- */
.detail-panel-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--neutral-layer-2);
}

.detail-panel-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: var(--neutral-layer-1);
}

.detail-panel-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
}

.detail-panel-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
}

.eternet-grid-container.allow-cell-overflow .fluent-data-grid td {
    overflow: visible !important;
}