/**
 * Ghost Gym - Desktop Offcanvas Styles
 * Transforms mobile bottom sheets into appropriate desktop surfaces.
 *
 * Tier 1 (default): Centered dialog (580px) — confirmations, menus, small forms
 * Tier 2 (.offcanvas-desktop-wide): Wide centered dialog (720px) — detail panels, complex editors
 * Tier P (.offcanvas-desktop-popover): Anchored popover (340px) — filters, quick menus
 *
 * @version 1.0.0
 * @date 2026-02-17
 */

/* ============================================
   TIER 1: CENTERED DIALOG (DEFAULT)
   All .offcanvas-bottom become centered modals
   ============================================ */

.desktop-view .offcanvas.offcanvas-bottom {
    right: auto;
    left: 50%;
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    width: 580px;
    max-width: 90vw;
    max-height: 85vh;
    height: auto;
    border: none;
    border-top: none;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.desktop-view .offcanvas.offcanvas-bottom.show:not(.hiding),
.desktop-view .offcanvas.offcanvas-bottom.showing {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.desktop-view .offcanvas.offcanvas-bottom.hiding {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
}

.desktop-view .offcanvas.offcanvas-bottom .offcanvas-body {
    overflow-y: auto;
    max-height: calc(85vh - 140px);
}

/* ============================================
   TIER 2: WIDE CENTERED DIALOG
   Complex forms: exercise group editor, import wizard, reorder
   ============================================ */

.desktop-view .offcanvas.offcanvas-bottom.offcanvas-desktop-wide {
    width: 720px;
}


/* ============================================
   TIER P: ANCHORED POPOVER
   Compact dropdown anchored near trigger button — filters, quick menus
   JS sets inline top/left/height; CSS handles appearance + animation
   ============================================ */

.desktop-view .offcanvas.offcanvas-bottom.offcanvas-desktop-popover {
    /* Override Tier 1 centering — JS sets final top/left inline */
    left: auto;
    right: 16px;
    top: 80px;
    bottom: auto;
    /* Override inline height="85vh" from HTML template */
    height: auto !important;
    width: 340px;
    max-width: calc(100vw - 32px);
    max-height: 70vh;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
    transform: scale(0.95) translateY(-4px);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.desktop-view .offcanvas.offcanvas-bottom.offcanvas-desktop-popover.show:not(.hiding),
.desktop-view .offcanvas.offcanvas-bottom.offcanvas-desktop-popover.showing {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.desktop-view .offcanvas.offcanvas-bottom.offcanvas-desktop-popover.hiding {
    transform: scale(0.95) translateY(-4px);
    opacity: 0;
}

.desktop-view .offcanvas.offcanvas-bottom.offcanvas-desktop-popover .offcanvas-body {
    overflow-y: auto;
}

/* Hide backdrop for popover-tier offcanvas on desktop */
body:has(.offcanvas-desktop-popover.show) > .offcanvas-backdrop {
    opacity: 0 !important;
}

/* ============================================
   DARK MODE
   ============================================ */

[data-bs-theme="dark"].desktop-view .offcanvas.offcanvas-bottom {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"].desktop-view .offcanvas.offcanvas-bottom.offcanvas-desktop-popover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ============================================
   SIDEBAR DIM WHEN OVERLAY IS OPEN
   Dim sidebar behind editor/detail offcanvas, but not
   lightweight prompts like workout-selection.
   ============================================ */

@media (min-width: 1200px) {
    body:has(.offcanvas-desktop-wide.show) #layout-menu {
        opacity: 0.3;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .desktop-view .offcanvas.offcanvas-bottom,
    .desktop-view .offcanvas.offcanvas-bottom.offcanvas-desktop-popover {
        transition: none;
    }
}