/**
 * ============================================================================
 * MUAADH PHOTO — Image management UI (staging + persisted variants)
 * ============================================================================
 *
 * Photo grid + thumb manipulation component (19 rules) extracted from
 * muaadh-core.css in Phase 3 Wave 11 (2026-05-13).
 *
 * Pages consumed:
 *   - resources/views/merchant/my-item/images.blade.php (staging variant)
 *   - resources/views/operator/merchant-item/images.blade.php (persisted)
 *
 * Owns:
 *   - .muaadh-photo (base) + variants: --staging, --persisted
 *   - .muaadh-photo-order (ordering badge)
 *   - .muaadh-photo .muaadh-mark-primary (primary marker)
 *   - .muaadh-photo .muaadh-remove (remove trigger)
 *   - .muaadh-photo .muaadh-primary-indicator (active primary)
 *   - State modifiers: hover, --uploading, --deleting
 *
 * History note: this family was renamed in Phase H3 from library-style
 * names (photo-card, modal-photo-card, btn-action, btn-delete,
 * btn-primary-photo) to the unified muaadh-* identity.
 *
 * Loaded on every page via shell layouts. The photo UI appears only
 * on the two pages above; styles ride along to avoid a FOUC on first
 * navigation to those pages.
 * ============================================================================
 */

/* Catalog item photos — used by merchant/my-item/images.blade.php (staging variant)
   and operator/merchant-item/images.blade.php (persisted variant). Phase H3 rename
   from photo-card / modal-photo-card / btn-action / btn-delete / btn-primary-photo
   to the unified muaadh-* identity (no library-style names). */
.muaadh-photo--staging {
    position: relative;
}
.muaadh-photo--staging img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--chassis-radius);
    border: var(--chassis-border-normal) solid transparent;
    cursor: move;
}
.muaadh-photo--staging.muaadh-photo--primary img {
    border-color: var(--action-primary);
}
.muaadh-photo--staging .muaadh-photo-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 5px;
}
.muaadh-photo--staging .muaadh-action-icon {
    background: var(--theme-overlay-heavy);
    color: var(--theme-text-on-primary);
    border: none;
    border-radius: var(--chassis-radius-circle);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--text-xs);
}
.muaadh-photo--staging .muaadh-action-icon:hover {
    background: rgba(0, 0, 0, 0.8);
}
.muaadh-photo--staging .muaadh-remove:hover {
    background: rgba(var(--theme-danger-rgb), 0.9);
}
.muaadh-photo--staging .muaadh-mark-primary:hover {
    background: rgba(var(--theme-success-rgb), 0.9);
}
.muaadh-photo--staging .muaadh-primary-indicator {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background: var(--action-primary);
    color: var(--theme-text-on-primary);
    padding: 2px 6px;
    border-radius: var(--chassis-radius-sm);
    font-size: var(--text-xs);
}
.muaadh-photo--staging .muaadh-photo-order {
    position: absolute;
    top: 5px;
    left: 5px;
    background: var(--theme-overlay-heavy);
    color: var(--theme-text-on-primary);
    padding: 2px 6px;
    border-radius: var(--chassis-radius-sm);
    font-size: var(--text-xs);
}
.muaadh-photo--staging.sortable-ghost {
    opacity: 0.4;
}
/* Checkout Map Modal z-index - must match globalMapModal */
/* Dark backdrop */
.muaadh-photo {
    position: relative;
    margin-bottom: var(--space-5);
    cursor: move;
}
.muaadh-photo img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--chassis-radius-sm);
}
.muaadh-photo .muaadh-photo-actions {
    position: absolute;
    top: 5px;
    right: var(--space-5);
    display: flex;
    gap: 5px;
}
.muaadh-photo .muaadh-remove {
    background: rgba(var(--theme-danger-rgb), 0.9);
    color: var(--theme-text-on-primary);
    border: none;
    border-radius: var(--chassis-radius-circle);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.muaadh-photo .muaadh-remove:hover {
    background: var(--theme-danger);
}
.muaadh-photo .muaadh-primary-indicator {
    position: absolute;
    bottom: 5px;
    left: var(--space-5);
    background: rgba(var(--theme-success-rgb), 0.9);
    color: var(--theme-text-on-primary);
    padding: 2px var(--space-2);
    border-radius: var(--chassis-radius-xs);
    font-size: var(--text-xs);
}
.muaadh-photo.sortable-ghost {
    opacity: 0.4;
}
.muaadh-photo .muaadh-photo-order {
    position: absolute;
    top: 5px;
    left: var(--space-5);
    background: var(--theme-overlay-heavy);
    color: var(--theme-text-on-primary);
    padding: 2px var(--space-2);
    border-radius: var(--chassis-radius-xs);
    font-size: var(--text-xs);
}