/* ── 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: var(--cosmos-surface) !important;
    color: var(--cosmos-fg);
    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-border);
    background: var(--cosmos-canvas);
    justify-content: flex-end;
    gap: .5rem;
}

/* ── .dialog-field-label — global unscoped definition ───────────────────────
   DialogField.razor.css defines this class as scoped, so it only applies
   inside the DialogField component. This declaration makes it available to
   any markup that uses the class directly (e.g. StockInfoEditor,
   PartSupplierEditor) without being wrapped in a DialogField.                */
.dialog-field-label {
    display: block !important;
    font-size: .72rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--cosmos-fg-subtle) !important;
    margin-bottom: .25rem !important;
    line-height: 1.3 !important;
}

/* Panel header — rendered by PanelHost from PanelEntry.Header.
   COPIED, deliberately, from AeroProX.Web/wwwroot/css/app.css rather than moved: a Common component
   must ship its own styling or another host renders it unstyled, and removing the rules from app.css
   risks regressing AeroProX's eleven self-rendered headers on stylesheet load order. Same reasoning
   as the global .dialog-field-label copy already in this file. */
.cosmos-panel-header {
    padding: 1rem 1.375rem;
    border-bottom: 1px solid var(--cosmos-border);
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}
.cosmos-panel-header-icon {
    width: 32px; height: 32px;
    border-radius: 7px;
    background: var(--cosmos-brand-soft);
    color: var(--cosmos-brand);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.cosmos-panel-header-text { flex: 1; min-width: 0; }
.cosmos-panel-header-eyebrow {
    font-size: .65rem; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--cosmos-fg-subtle);
    line-height: 1.2;
}
.cosmos-panel-header-title {
    font-size: 1rem; font-weight: 600;
    color: var(--cosmos-fg);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}