/* An order's package photo tiles (Views/Orders/_PackagePhotoTile.cshtml, package-photos.js): Details' packing table and
   the order's quick view, which opens from any page, so _Layout loads this sheet everywhere. A 30px thumbnail; staff open
   its menu. v3.css gives the tile its glass ("A package's photo tile"). */

/* The menu drops out of the cell. */
td.mm-col-thumb {
    overflow: visible;
}

.package-photo-actions {
    position: relative;
    display: inline-block;
}

.package-photo-thumb-trigger {
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    vertical-align: middle;
}

    .package-photo-thumb-trigger:not(:disabled) {
        cursor: pointer;
    }

    .package-photo-thumb-trigger:focus-visible {
        border-radius: 6px;
        outline: 2px solid var(--mm-accent);
        outline-offset: 2px;
    }

.package-photo-thumb-slot {
    display: inline-grid;
    line-height: 1;
}

.package-photo-thumb-btn,
.package-photo-thumb-placeholder {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border: 1px solid var(--mm-line);
    border-radius: 6px;
    background: #f5f7fb;
    color: var(--mm-muted);
    font-size: .8rem;
}

.package-photo-actions[data-can-manage="true"] .package-photo-thumb-trigger:hover .package-photo-thumb-placeholder {
    border-color: var(--mm-accent);
    color: var(--mm-accent);
}

.package-photo-thumb-spinner {
    width: .85rem;
    height: .85rem;
    border-width: .14em;
}

.package-photo-thumb-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A photo on its way to OneDrive shows at once, veiled under a spinner (.is-saving); one whose upload failed keeps
   showing, with a red line and badge (.is-failed). */
.package-photo-thumb-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .55);
    color: var(--mm-accent);
}

html[data-v3-scene="night"] .package-photo-thumb-overlay {
    background: rgba(10, 16, 28, .55);
    color: #7fb2ff;
}

.package-photo-thumb-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    display: grid;
    place-items: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bs-danger, #dc3545);
    box-shadow: 0 0 0 1px #fff;
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

/* At v3's weight (v3.css, "A package's photo tile"), which sets the tile's line in every scene. */
.package-photo-thumb-btn.is-failed,
body.shell-v3.v3:not(#_) .package-photo-thumb-btn.is-failed,
html[data-v3-scene="night"] body.shell-v3.v3:not(#_) .package-photo-thumb-btn.is-failed {
    border-color: rgba(220, 53, 69, .75);
}

/* The photo opened (Details' #packagePhotoModal, the quick view's lightbox) as the supplier's map card (suppliers.css):
   etched glass, a hairline 3px off the photo, its corners the card's (18px, 16px in v3's glass windows) and the photo's
   4px less, so the two curves run parallel. The hairline is an outline, whose corners follow the photo's grown by the
   offset; it needs the photo's box to be the photo (no object-fit), which both viewers keep. */
.package-photo-view {
    display: block;
    border-radius: 14px;
    outline: 1px solid var(--mm-line);
    outline-offset: 3px;
}

/* A phone's card is 14px (modal-modern.css, "Small screens"); v3's glass card stays 16px. */
@media (max-width: 575.98px) {
    .package-photo-view {
        border-radius: 10px;
    }
}

body.shell-v3.v3.v3-modal-glass:not(#_) .package-photo-view {
    border-radius: 12px;
}

/* The lightbox is always dark: a white hairline. */
.mm-lightbox .package-photo-view {
    outline-color: rgba(255, 255, 255, .3);
}

/* The photo's menu (view, add / replace, delete), a dropdown under the thumbnail. */
.package-photo-helper-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 9.5rem;
    padding: 4px;
    border: 1px solid var(--mm-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px -8px rgba(23, 43, 69, .25);
    text-align: left;
}

.package-photo-helper-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--mm-ink);
    font-size: .84rem;
    font-weight: 500;
    text-align: left;
}

    .package-photo-helper-btn:hover,
    .package-photo-helper-btn:focus-visible {
        background: rgba(16, 110, 234, .08);
        color: var(--mm-accent);
    }

    .package-photo-helper-remove:hover,
    .package-photo-helper-remove:focus-visible {
        background: rgba(180, 35, 24, .08);
        color: #b42318;
    }