/**
 * WP QuickPWA — Enhancement Styles
 * Covers: skeleton/shimmer loaders, pull-to-refresh spinner,
 *         dark-mode CSS variables, page-transition overlay,
 *         exit-confirmation dialog, wake-lock dot, and dark-mode toggle.
 *
 * @package WP QuickPWA
 * @since   1.1.0
 */

/* =========================================================
   1. CSS Custom Properties (light + dark)
   ========================================================= */
:root {
    --wpqp-bg:            #ffffff;
    --wpqp-surface:       #f5f5f5;
    --wpqp-text:          #1a1a1a;
    --wpqp-text-muted:    #666666;
    --wpqp-border:        #e0e0e0;
    --wpqp-accent:        #007cba;
    --wpqp-accent-dark:   #005a87;
    --wpqp-shimmer-base:  #e0e0e0;
    --wpqp-shimmer-shine: #f5f5f5;
    --wpqp-shadow:        rgba(0, 0, 0, 0.12);
    --wpqp-radius:        8px;
    --wpqp-transition:    0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode via OS preference — applies when no manual override is set */
@media (prefers-color-scheme: dark) {
    :root:not([data-wpqp-theme="light"]) {
        --wpqp-bg:            #121212;
        --wpqp-surface:       #1e1e1e;
        --wpqp-text:          #e8e8e8;
        --wpqp-text-muted:    #9e9e9e;
        --wpqp-border:        #2e2e2e;
        --wpqp-accent:        #4db8ff;
        --wpqp-accent-dark:   #007cba;
        --wpqp-shimmer-base:  #2a2a2a;
        --wpqp-shimmer-shine: #3a3a3a;
        --wpqp-shadow:        rgba(0, 0, 0, 0.4);
    }
}

/* Dark mode via JS-set attribute (manual or auto) */
[data-wpqp-theme="dark"] {
    --wpqp-bg:            #121212;
    --wpqp-surface:       #1e1e1e;
    --wpqp-text:          #e8e8e8;
    --wpqp-text-muted:    #9e9e9e;
    --wpqp-border:        #2e2e2e;
    --wpqp-accent:        #4db8ff;
    --wpqp-accent-dark:   #007cba;
    --wpqp-shimmer-base:  #2a2a2a;
    --wpqp-shimmer-shine: #3a3a3a;
    --wpqp-shadow:        rgba(0, 0, 0, 0.4);
}

/* =========================================================
   2. Page Transition Overlay (View Transitions API fallback)
   Mobile / touch devices only — no transitions on desktop.
   ========================================================= */
@media (pointer: coarse) {
    #wpqp-page-transition {
        position: fixed;
        inset: 0;
        background: var(--wpqp-bg);
        z-index: 999998;
        pointer-events: none;
        opacity: 0;
        transition: opacity var(--wpqp-transition);
    }

    #wpqp-page-transition.wpqp-transition-out {
        opacity: 1;
        pointer-events: all;
    }
}

/* Native View Transitions API — cross-fade (touch devices only) */
@media (pointer: coarse) {
    @supports (view-transition-name: none) {
        ::view-transition-old(root) {
            animation: wpqp-vt-fade-out 0.22s ease-out forwards;
        }
        ::view-transition-new(root) {
            animation: wpqp-vt-fade-in 0.22s ease-in forwards;
        }

        @keyframes wpqp-vt-fade-out {
            to { opacity: 0; transform: translateY(-6px); }
        }
        @keyframes wpqp-vt-fade-in {
            from { opacity: 0; transform: translateY(6px); }
        }
    }
}

/* =========================================================
   3. Pull-to-Refresh Indicator
   ========================================================= */
#wpqp-ptr-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-72px);
    width: 44px;
    height: 44px;
    background: var(--wpqp-bg);
    border-radius: 50%;
    box-shadow: 0 2px 12px var(--wpqp-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999997;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0;
}

#wpqp-ptr-indicator.wpqp-ptr-pulling {
    opacity: 1;
}

#wpqp-ptr-indicator.wpqp-ptr-ready {
    transform: translateX(-50%) translateY(16px);
    opacity: 1;
}

#wpqp-ptr-indicator.wpqp-ptr-refreshing {
    transform: translateX(-50%) translateY(16px);
    opacity: 1;
}

.wpqp-ptr-spinner {
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--wpqp-border);
    border-top-color: var(--wpqp-accent);
    border-radius: 50%;
    transition: transform 0.1s linear;
}

.wpqp-ptr-refreshing .wpqp-ptr-spinner {
    animation: wpqp-spin 0.7s linear infinite;
}

@keyframes wpqp-spin {
    to { transform: rotate(360deg); }
}

/* =========================================================
   4. Skeleton / Shimmer Placeholders
   ========================================================= */
.wpqp-skeleton {
    background: var(--wpqp-shimmer-base);
    border-radius: var(--wpqp-radius);
    overflow: hidden;
    position: relative;
}

.wpqp-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--wpqp-shimmer-shine) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: wpqp-shimmer 1.4s ease-in-out infinite;
}

@keyframes wpqp-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* Preset skeleton shapes */
.wpqp-skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
    border-radius: 4px;
}

.wpqp-skeleton-title {
    height: 1.6em;
    width: 60%;
    margin-bottom: 0.75em;
    border-radius: 4px;
}

.wpqp-skeleton-image {
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    border-radius: var(--wpqp-radius);
}

.wpqp-skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Page-level loading overlay */
#wpqp-loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--wpqp-bg);
    z-index: 999996;
    display: none;
    flex-direction: column;
    padding: 24px;
    gap: 16px;
    overflow: hidden;
}

#wpqp-loading-overlay.wpqp-loading-active {
    display: flex;
}

.wpqp-loading-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.wpqp-loading-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* =========================================================
   5. Navigation Exit-Confirmation Dialog
   ========================================================= */
#wpqp-exit-dialog {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 999999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

#wpqp-exit-dialog.wpqp-dialog-open {
    opacity: 1;
    pointer-events: all;
}

.wpqp-exit-dialog-sheet {
    background: var(--wpqp-bg);
    border-radius: 20px 20px 0 0;
    padding: 24px 24px 40px;
    width: 100%;
    max-width: 480px;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
}

#wpqp-exit-dialog.wpqp-dialog-open .wpqp-exit-dialog-sheet {
    transform: translateY(0);
}

.wpqp-exit-dialog-sheet h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--wpqp-text);
}

.wpqp-exit-dialog-sheet p {
    margin: 0 0 24px;
    color: var(--wpqp-text-muted);
    font-size: 14px;
}

.wpqp-exit-dialog-actions {
    display: flex;
    gap: 12px;
}

.wpqp-exit-btn {
    flex: 1;
    padding: 13px;
    border-radius: 12px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.wpqp-exit-btn:active { opacity: 0.75; }

.wpqp-exit-btn-stay {
    background: var(--wpqp-accent);
    color: #fff;
}

.wpqp-exit-btn-leave {
    background: var(--wpqp-surface);
    color: var(--wpqp-text);
}

/* =========================================================
   6. Dark-Mode Toggle Button (optional floating button)
   ========================================================= */
#wpqp-dark-toggle {
    position: fixed;
    bottom: 80px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--wpqp-surface);
    border: 1px solid var(--wpqp-border);
    box-shadow: 0 2px 8px var(--wpqp-shadow);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    font-size: 20px;
    transition: background var(--wpqp-transition), transform 0.15s;
    /* Hidden by default; JS sets display:flex when in standalone mode */
    display: none;
}

#wpqp-dark-toggle:active {
    transform: scale(0.9);
}

/* =========================================================
   7. Wake-Lock Status Indicator (subtle dot)
   ========================================================= */
#wpqp-wakelock-indicator {
    position: fixed;
    top: 12px;
    left: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4caf50;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 9998;
    pointer-events: none;
}

#wpqp-wakelock-indicator.wpqp-wakelock-active {
    opacity: 1;
}

/* =========================================================
   8. Responsive & Accessibility Helpers
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .wpqp-skeleton::after,
    .wpqp-ptr-refreshing .wpqp-ptr-spinner {
        animation: none !important;
    }

    #wpqp-page-transition,
    #wpqp-ptr-indicator,
    .wpqp-exit-dialog-sheet {
        transition: none !important;
    }
}