/* ── cosmos-slideover — panels rendered by PanelHost ─────────────────────────
   PanelHost renders these directly into the component tree.
   --has-child is set in Razor markup; the JS observer only re-kicks the enter
   animation.                                                                   */

@keyframes cosmos-slideover-enter {
    from { transform: translateX(100%); }
    to   { transform: translateX(0);    }
}

.cosmos-slideover {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    width: 760px;
    max-width: 100vw;
    height: 100vh;
    border-radius: 0;
    background: #ffffff !important;
    color: #1f2226;
    box-shadow: -4px 0 24px rgba(11, 33, 56, 0.18);
    z-index: 1051;
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Enter-from-right on DOM insertion */
    animation: cosmos-slideover-enter .28s cubic-bezier(0.32, 0.72, 0, 1) both;
    /* Bidirectional transition for --has-child slide-aside */
    transition: transform .28s cubic-bezier(0.32, 0.72, 0, 1),
                opacity    .25s ease,
                filter     .25s ease;
    transform: translateX(0);
    opacity: 1;
    filter: saturate(1);
}

/* Width variants */
.cosmos-slideover.cosmos-slideover--w-wide  { width: 960px;  }
.cosmos-slideover.cosmos-slideover--w-xwide { width: 1120px; }
.cosmos-slideover.cosmos-slideover--picker  { width: 820px;  }
.cosmos-slideover.cosmos-slideover--confirm { width: 480px;  }

/* Parent panel recedes when a child is open — transition reverses on pop.    */
.cosmos-slideover.cosmos-slideover--has-child {
    transform: translateX(-60px);
    opacity: .6;
    filter: saturate(.7);
    pointer-events: none;
}

/* cosmos-panel-content fill rules (duplicate the scoped PanelHost.razor.css
   so any unscoped context picks them up too).                                 */
.cosmos-slideover .cosmos-panel-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Picker and Confirm: remove horizontal padding from the content wrapper so
   the footer can stretch edge-to-edge. Horizontal spacing is applied directly
   to the content area and the footer instead.                                 */

.cosmos-slideover.cosmos-slideover--picker .cosmos-panel-content {
    padding: 1rem 0 0;
}
.cosmos-slideover.cosmos-slideover--picker .cosmos-panel-content > *:first-child {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 1.375rem;
}

/* A picker that supplies its own .cosmos-panel-header keeps that header fixed at
   the top. Without this, the first-child grow rule above inflates the header to
   fill the panel and pushes the real content (grid) to the bottom. The header's
   sibling content area (e.g. .cosmos-dialog-sections, which is itself flex:1)
   provides the growable, scrollable region instead.                            */
.cosmos-slideover.cosmos-slideover--picker .cosmos-panel-content > .cosmos-panel-header {
    flex: 0 0 auto;
    overflow: visible;
    padding: 1rem 1.375rem;
}

.cosmos-slideover.cosmos-slideover--confirm .cosmos-panel-content {
    padding: 1.5rem 0 0;
    overflow-y: auto;
}
.cosmos-slideover.cosmos-slideover--confirm .cosmos-panel-content > *:first-child {
    flex: 1;
    padding: 0 1.375rem;
}

/* Shared footer rule: grey background, full-width, buttons right-aligned —
   matches the SlideOverDialog .footer style used by edit dialogs.            */
.cosmos-slideover.cosmos-slideover--picker .cosmos-panel-content > *:last-child:not(:only-child),
.cosmos-slideover.cosmos-slideover--confirm .cosmos-panel-content > *:last-child:not(:only-child) {
    flex-shrink: 0;
    padding: .875rem 1.375rem;
    border-top: 1px solid var(--cosmos-grey-tone-reflective-grey-opaque-45, #e6e7ea);
    background: var(--cosmos-grey-tone-reflective-grey-opaque-20, #f8f9fa);
    justify-content: flex-end;
    gap: .5rem;
}