/**
 * ============================================================================
 * MUAADH IMAGE — Image utilities + Upload component
 * ============================================================================
 *
 * Two cohesive image-related clusters extracted from muaadh-core.css in
 * Phase 3 Wave 7 (2026-05-13).
 *
 * Owns:
 *   1. Image utility classes (size + object-fit presets)
 *        .muaadh-image-thumb / -table / -table-sm
 *        .muaadh-image-preview / -preview--h200 / -preview--h300
 *        .muaadh-image-grid / -grid--h100 / -grid--h150
 *
 *   2. Image taxonomy (consumes --chassis-image-* tokens)
 *        .muaadh-image--logo / -brand-tile / -catalog-vehicle / -item-tile
 *        .muaadh-image--brand-inline / -tag-logo / -avatar-sm / -avatar-md
 *        .muaadh-image--icon-sm / -in-dialog-main / -in-dialog-thumb
 *
 *   3. Image upload component (operator file pickers)
 *        .muaadh-image-upload + __trigger / __input
 *
 * Loaded on every page via shell layouts.
 * ============================================================================
 */

/* ============================================================================
 * SECTION 1: IMAGE UTILITIES + TAXONOMY
 * ============================================================================ */
/* Object Fit */
/* Common Image Sizes */
.muaadh-image-thumb { max-width: var(--size-img-xl); max-height: var(--size-img-xl); object-fit: contain; }
.muaadh-image-table { max-width: var(--size-img-md); height: auto; object-fit: contain; }
/* Invoice/store logo — used in printable + on-screen invoice headers.
   Replaces inline `style="max-height:45-50px; max-width:140-150px"`. */
.muaadh-invoice-logo { max-height: var(--size-img-md); max-width: var(--size-img-xl); object-fit: contain; }
/* Fixed-size square thumbnails (table rows, dashboard cards).
   Replace inline `style="width:Npx; height:Npx; object-fit:cover"`. */
.muaadh-thumbnail-fixed { object-fit: cover; flex-shrink: 0; }
.muaadh-thumbnail-fixed--50 { width: var(--size-img-md); height: var(--size-img-md); }
.muaadh-thumbnail-fixed--80 { width: var(--size-img-lg); height: var(--size-img-lg); }
/* Fixed-size circular avatars (checkout courier picks, shipment avatars).
   Replace inline `style="width:35-45px; height:35-45px; border-radius:50%"`. */
.muaadh-avatar-circle { object-fit: cover; flex-shrink: 0; border-radius: 50%; }
.muaadh-avatar-circle--45 { width: var(--size-img-md); height: var(--size-img-md); }
/* Bounded image preview (verification docs, trust-badge previews).
   Replace inline `style="max-width:100%; max-height:Npx; border:..."` with theme-aware borders. */
.muaadh-image-preview {
    max-width: 100%;
    height: auto;
    border: var(--chassis-border-thin) solid var(--theme-border-light);
    border-radius: var(--chassis-radius);
}
.muaadh-image-preview--h200 { max-height: var(--size-img-xl); }
.muaadh-image-preview--h300 { max-height: calc(var(--size-img-xl) * 1.4); }
/* Fluid Image */
.muaadh-img-fluid { max-width: 100%; height: auto; }
/* Grid-cell image — fills column width, contains the image, with capped
   max-height variants for photo galleries. Replaces inline
   `style="max-height:Npx; object-fit:contain; width:100%"` on JS-injected
   <img> elements in catalog-item/images and merchant-item/images. */
.muaadh-image-grid       { width: 100%; object-fit: contain; }
.muaadh-image-grid--h100 { max-height: var(--size-img-lg); }
.muaadh-image-grid--h150 { max-height: calc(var(--size-img-lg) * 1.5); }
/* Progress bar height variants — used by shipment status cards.
   Replaces inline `style="height: 8px|10px"` on `.muaadh-progress`. */
.muaadh-progress--thin   { height: 8px; }
.muaadh-progress--medium { height: 10px; }
/* Smaller table-cell image (catalog rows that need 50×50 contain). */
.muaadh-image-table-sm { max-width: var(--size-img-md); max-height: var(--size-img-md); object-fit: contain; }
/* Site branding logo (homepage topbar + footer). Conservative fallback —
   actual sizing is enforced by parent wrappers (.muaadh-shell-topbar__logo img
   max-height:32px, .muaadh-shell-footer__logo img max-height:40px). This
   class adds safe defaults so the markup is self-documenting and the image
   stays bounded if used outside a constrained wrapper. Per
   docs/page-analyses/01-homepage.md (approved 2026-05-07). */
.muaadh-image--logo { display: block; height: var(--chassis-image-logo-h); width: auto; max-width: 100%; object-fit: contain; }

/* ═══════════════════════════════════════════════════════════════
   IMAGE TAXONOMY (2026-05-08) — unified card-image classes.
   All sizes flow through theme tokens (operator-controlled via
   admin panel). One canonical class per usage type.
   Per owner directive: one truth, no chaos.
   ═══════════════════════════════════════════════════════════════ */
.muaadh-image--brand-tile        { width: var(--chassis-image-brand-card);  height: var(--chassis-image-brand-card);  object-fit: contain; display: block; }
.muaadh-image--catalog-vehicle   { width: var(--chassis-image-catalog-vehicle); aspect-ratio: 4 / 3; object-fit: contain; display: block; margin: 0 auto; }
.muaadh-image--item-tile         { width: var(--chassis-image-item-card);   aspect-ratio: 1 / 1; object-fit: contain; display: block; }
.muaadh-image--brand-inline      { height: var(--chassis-image-brand-inline-h); width: auto; max-width: var(--chassis-image-brand-inline-w); object-fit: contain; display: inline-block; }
.muaadh-image--tag-logo          { width: var(--chassis-image-tag-logo);    height: var(--chassis-image-tag-logo);    object-fit: contain; display: block; }
.muaadh-image--avatar-sm         { width: var(--chassis-image-avatar-sm);   height: var(--chassis-image-avatar-sm);   object-fit: cover; border-radius: 50%; display: block; }
.muaadh-image--avatar-md         { width: var(--chassis-image-avatar-md);   height: var(--chassis-image-avatar-md);   object-fit: cover; border-radius: 50%; display: block; }
.muaadh-image--icon-sm           { width: var(--chassis-image-icon-sm);     height: var(--chassis-image-icon-sm);     object-fit: contain; display: inline-block; }
.muaadh-image--in-dialog-main    { width: 100%; max-height: var(--chassis-image-modal-main-max); object-fit: contain; display: block; }
.muaadh-image--in-dialog-thumb   { width: var(--chassis-image-modal-thumb); height: var(--chassis-image-modal-thumb); object-fit: contain; display: block; }


/* ============================================================================
 * SECTION 2: IMAGE UPLOAD COMPONENT
 * ============================================================================ */
.muaadh-image-upload {
    position: relative;
    display: inline-block;
    border: var(--chassis-border-normal) dashed var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--chassis-duration-quick);
}
.muaadh-image-upload:hover { border-color: var(--action-primary); }
.muaadh-image-upload--large { width: var(--size-img-xl); height: var(--size-img-lg); }
.muaadh-image-upload--small { width: var(--size-img-lg); height: var(--size-img-lg); }
.muaadh-image-upload--circle { width: var(--size-img-lg); height: var(--size-img-lg); border-radius: 50%; }
.muaadh-image-upload__preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.muaadh-image-upload__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.muaadh-image-upload__trigger {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.03);
    cursor: pointer;
    transition: background var(--chassis-duration-quick);
}
.muaadh-image-upload__trigger:hover { background: rgba(0, 0, 0, 0.08); }
.muaadh-image-upload__input { position: absolute; opacity: 0; width: 0; height: 0; }