/**
 * ============================================================================
 * MUAADH FULLVIEW — Image viewer with zoom/pan/swipe
 * ============================================================================
 *
 * Component rules extracted from muaadh-core.css in Phase 3 Wave 3
 * (2026-05-13).
 *
 * Paired with: resources/js/modules/muaadh-fullview.js (DOM builder + behavior)
 *
 * Owns:
 *   - .muaadh-fullview-bg / -wrap / -frame (chrome)
 *   - .muaadh-fullview-topbar / -zoom-controls / -zoom-action / -zoom-level
 *   - .muaadh-fullview-viewport / -img / -loader / -spinner
 *   - .muaadh-fullview-nav / -nav--prev / --next
 *   - .muaadh-fullview-counter
 *   - state modifiers: --zoomed, --active, --open
 *
 * Loaded on every page via shell layouts. The fullview itself is created
 * lazily by JS (only when an image is clicked to enlarge), but the styles
 * must be present at load time so the modal renders correctly on first
 * trigger without a flash of unstyled content.
 * ============================================================================
 */

   FULLVIEW  (muaadh-fullview.js — image viewer with zoom/pan/swipe)
   ----------------------------------------------------------------------------
   DOM model created in JS (build()):
     .muaadh-fullview-bg                      ← dim backdrop
     .muaadh-fullview-wrap                    ← full-viewport flex centerer
       .muaadh-fullview-frame                 ← THE modal box (sized by JS)
         .muaadh-fullview-topbar
           .muaadh-fullview-zoom-controls
             .muaadh-fullview-zoom-action × 3   (− / Fit / +)
             .muaadh-fullview-zoom-level
           .muaadh-fullview-close-action
         .muaadh-fullview-viewport
           img.muaadh-fullview-img
           .muaadh-fullview-loader > .muaadh-fullview-spinner
         .muaadh-fullview-nav.muaadh-fullview-nav--prev
         .muaadh-fullview-nav.muaadh-fullview-nav--next
         .muaadh-fullview-counter             ← "n / N"

   State classes toggled by JS:
     .muaadh-fullview-viewport--zoomed        ← zoom > 1
     .muaadh-fullview-loader--active          ← image fetching

   Why the rewrite (this file, 2026-05-08):
     - .muaadh-fullview-nav had no base rule (only :hover, --prev, --next),
       so the nav buttons rendered without position/size → layout glitch.
     - .muaadh-fullview-viewport--zoomed appeared twice with conflicting
       declarations; consolidated.
     - Frame used position:fixed + transform:translate(-50%,-50%) — every
       width/height change in JS forced sub-pixel re-centering, visible
       as the open-jump. Replaced with .muaadh-fullview-wrap as a flex
       container so centering tracks JS resizes for free.
     - Counter/nav lived OUTSIDE the frame (negative offsets) — clipped
       once the frame got `overflow: hidden`. Moved inside.
     - mfp-bg/mfp-wrap renamed to muaadh-fullview-bg/muaadh-fullview-wrap
       (Phase 13, 2026-05-10) — final Magnific Popup vendor naming dropped.
   ============================================================================ */
@keyframes muaadh-fullview-spin { to { transform: rotate(360deg); } }

/* Backdrop — fully opaque-ish overlay so the cards/panels behind don't
   bleed through and clash visually with the open photo. Owner flagged
   the previous setup (rgba 0.5 × opacity 0.8 = effective 0.4) as
   "الكروت في تعارض" — clarified 2026-05-19. */
.muaadh-fullview-bg {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(0, 0, 0, 0.85);
}

/* Full-viewport wrapper — flex centers the frame; centering tracks JS resizes */
.muaadh-fullview-wrap {
    position: fixed;
    inset: 0;
    z-index: 1091;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

/* Frame — JS sets inline width/height after probing image natural dims */
.muaadh-fullview-frame {
    position: relative;
    /* Fallback before JS sizes — sits inside the [MIN, MAX] envelope */
    width: 600px;
    height: 450px;
    min-width: 400px;
    min-height: 300px;
    max-width: min(95vw, 1200px);
    max-height: min(90vh, 750px);
    background: var(--theme-card-bg);
    border: var(--chassis-border-normal) solid var(--theme-border);
    border-radius: var(--chassis-radius);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;  /* keeps nav + counter inside the rounded corners */
}

/* ─── Topbar ────────────────────────────────────────────────────── */
.muaadh-fullview-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: var(--space-1-5) var(--space-2-5);
    background: var(--theme-card-bg);
    border-bottom: var(--chassis-border-thin) solid var(--theme-border);
}
.muaadh-fullview-zoom-controls {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.muaadh-fullview-zoom-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-control-sm);
    height: var(--size-control-sm);
    padding: 0;
    background: none;
    border: var(--chassis-border-thin) solid var(--theme-border);
    border-radius: var(--chassis-radius-sm);
    color: var(--theme-text);
    font-size: var(--text-xs);
    font-weight: var(--theme-font-semibold);
    cursor: pointer;
    transition: background var(--chassis-duration-fast) ease;
}
.muaadh-fullview-zoom-action:hover { background: var(--theme-overlay-light); }
.muaadh-fullview-zoom-level {
    min-width: 42px;
    text-align: center;
    font-size: var(--text-xs);
    font-weight: var(--theme-font-semibold);
    color: var(--theme-text);
    user-select: none;
}
.muaadh-fullview-close-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-control-md);
    height: var(--size-control-md);
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--chassis-radius-sm);
    color: var(--theme-text);
    cursor: pointer;
    transition: background var(--chassis-duration-fast) ease,
                color      var(--chassis-duration-fast) ease;
}
.muaadh-fullview-close-action:hover {
    background: rgba(220, 53, 69, 0.1);
    color: var(--action-danger);
}

/* ─── Viewport (image area, becomes scrollable when zoomed) ────── */
.muaadh-fullview-viewport {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-bg-body);
    overflow: hidden;
}
.muaadh-fullview-viewport--zoomed {
    overflow: auto;
    align-items: flex-start;
    justify-content: flex-start;
    cursor: grab;
}
.muaadh-fullview-viewport::-webkit-scrollbar       { width: 14px; height: 14px; }
.muaadh-fullview-viewport::-webkit-scrollbar-track { background: var(--theme-bg-body); }
.muaadh-fullview-viewport::-webkit-scrollbar-thumb {
    background: var(--theme-border);
    border-radius: 5px;
    border: var(--chassis-border-normal) solid var(--theme-bg-body);
}
.muaadh-fullview-viewport::-webkit-scrollbar-thumb:hover { background: var(--theme-text-muted); }

/* ─── Image ────────────────────────────────────────────────────── */
.muaadh-fullview-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    object-fit: contain;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    /* JS sets opacity 0 in show(), 1 in img.load → soft fade-in
       once the frame has been sized by the probe path. */
    transition: opacity 0.12s ease-out;
}
.muaadh-fullview-viewport--zoomed .muaadh-fullview-img {
    max-width: none;
    max-height: none;
    margin: 0;
    cursor: grab;
}

/* ─── Loader (covers viewport while image is fetching) ─────────── */
.muaadh-fullview-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--theme-bg-body);
}
.muaadh-fullview-loader--active { display: flex; }
.muaadh-fullview-spinner {
    width: var(--size-control-md);
    height: var(--size-control-md);
    border: var(--chassis-border-thick) solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: var(--chassis-radius-circle);
    animation: muaadh-fullview-spin .7s linear infinite;
}

/* ─── Navigation buttons (multi-image only) ───────────────────── */
.muaadh-fullview-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    border-radius: 50%;
    color: var(--theme-text-white);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background var(--chassis-duration-fast) ease;
}
.muaadh-fullview-nav:hover  { background: rgba(0, 0, 0, 0.8); }
.muaadh-fullview-nav--prev  { left: 12px; }
.muaadh-fullview-nav--next  { right: 12px; }

/* ─── Counter (image n of N — multi-image only) ────────────────── */
.muaadh-fullview-counter {
    position: absolute;
    bottom: 12px;
    left: 50%;
    z-index: 3;
    padding: var(--space-1) 14px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: var(--chassis-radius-lg);
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-sm);
    font-weight: var(--theme-font-medium);
    white-space: nowrap;
    user-select: none;
    transform: translateX(-50%);
}