/* /admin/upload — flush full-shell host + the AI upload card styling.
 *
 * Mirror of .adinv-flush-shell / .sg-flush-shell: the dfl uses every pixel of
 * AppShellMain, pinned beneath the ~70px header. The dfl is built statically in
 * layout() (both tabs always mounted — the fix for the "nonexistent Output"
 * crash), so it's a direct child here. */

.adup-flush-shell {
    position:   fixed;
    top:        var(--app-shell-header-offset, 56px);
    left:       var(--app-shell-navbar-offset, 0px);
    right:      0;
    bottom:     0;
    z-index:    10;
    background: var(--mantine-color-body);
    border-top: 1px solid var(--mantine-color-default-border);
    overflow:   hidden;
}

.adup-flush-shell > div > .flexlayout__layout,
.adup-flush-shell .flexlayout__layout {
    height: 100%;
    width:  100%;
}

/* Selectable shipping-rate cards (dmc.CheckboxCard). The checked card reads as
 * a tidal-tinted, tidal-bordered row (the DashEcommerce green-selected look,
 * mapped to SailsBoard's tidal token); hover gives a subtle tint. Mirrors the
 * documented .checkboxcard-root pattern. */
.shipping-rate-card {
    transition: border-color 150ms ease, background-color 150ms ease;
    cursor: pointer;
}
.shipping-rate-card:hover {
    background-color: light-dark(
        var(--mantine-color-gray-0), var(--mantine-color-dark-6));
}
.shipping-rate-card[data-checked] {
    border-color: var(--mantine-color-tidal-filled);
    background-color: var(--mantine-color-tidal-light);
}

/* Live-preview image gallery — cap each slide to a uniform height so a mix of
 * portrait/landscape uploads all read the same size (object-fit: contain keeps
 * the whole image visible, letterboxed on a neutral tile). The thumbnail strip
 * is constrained to match. Targets react-image-gallery's class hooks. */
#adup-gallery .image-gallery-slide-wrapper {
    background: var(--mantine-color-default-hover);
    border-radius: var(--mantine-radius-md);
}
#adup-gallery .image-gallery-image {
    max-height: 300px;
    width: 100%;
    object-fit: contain;
}
#adup-gallery .image-gallery-thumbnail-image {
    height: 48px;
    object-fit: contain;
}

/* Sprite preview tile — checkerboard to read transparency, theme-token based
 * (no raw hex; the squares are the body + a hover tint, both scheme-aware). */
.adup-sprite-box {
    background: repeating-conic-gradient(
        var(--mantine-color-default-hover) 0% 25%,
        var(--mantine-color-body) 0% 50%) 50% / 10px 10px;
    border-radius: 8px;
    padding: 3px;
    display: inline-flex;
}

/* Clickable price-suggestion cards (Min / Listing / Max). The card itself is a
 * dmc.Paper with no n_clicks, so each is wrapped in an html.Div.adup-price-pick
 * carrying the click handler; this gives the hover affordance + lift so it
 * reads as pressable. Clicking sets the Listing Price (the _pick_price cb). */
.adup-price-pick {
    transition: transform 120ms ease;
}
.adup-price-pick:hover {
    transform: translateY(-2px);
}
.adup-price-pick:hover .mantine-Paper-root {
    border-color: var(--mantine-color-harbor-5);
    box-shadow: var(--mantine-shadow-sm);
}
.adup-price-pick:active {
    transform: translateY(0);
}