/**
 * posterActionMenu.css - Styles for Menu-Style Poster Action Overlay
 *
 * Companion styles for posterActionMenu.js
 * Uses same color scheme as posterActionOverlay.css for consistency
 */

/* ============================================
   OVERLAY CONTAINER
   ============================================ */
.pam-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
    overflow: visible; /* Allow menu to escape poster bounds */
}

/* Hover zone - only middle third of poster triggers menu */
.pam-hover-zone {
    position: absolute;
    top: 33%;
    left: 0;
    right: 0;
    height: 34%;
    pointer-events: auto;
    cursor: pointer;
}

/* ============================================
   MENU TRIGGER (three dots icon) - Only shown on touch/mobile devices
   ============================================ */
.pam-trigger {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: none;  /* Hidden on desktop */
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    pointer-events: auto;
    z-index: 100;  /* Above other poster elements */
}

/* Touch/Mobile devices - show trigger and use modal instead of dropdown */
/* Use multiple detection methods for better compatibility */

/* Method 1: No hover capability (most touch devices) */
@media (hover: none) {
    .pam-trigger {
        display: flex;
        opacity: 0.8;
    }
    .pam-dropdown {
        display: none !important;
    }
    .pam-overlay {
        pointer-events: none;
    }
    .pam-overlay .pam-trigger {
        pointer-events: auto;
    }
}

/* Method 2: Coarse pointer (touch screens) */
@media (pointer: coarse) {
    .pam-trigger {
        display: flex;
        opacity: 0.8;
    }
    .pam-dropdown {
        display: none !important;
    }
    .pam-overlay {
        pointer-events: none;
    }
    .pam-overlay .pam-trigger {
        pointer-events: auto;
    }
}

/* Method 3: Small screens (fallback for mobile) */
@media (max-width: 768px) {
    .pam-trigger {
        display: flex;
        opacity: 0.8;
    }
    .pam-dropdown {
        display: none !important;
    }
    .pam-overlay {
        pointer-events: none;
    }
    .pam-overlay .pam-trigger {
        pointer-events: auto;
    }
}

/* ============================================
   MOBILE MENU MODAL - Full screen overlay for touch devices
   ============================================ */
.pam-mobile-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1060; /* Stacked modal level - above Bootstrap modals (1055) */
    align-items: center;
    justify-content: center;
}

.pam-mobile-modal.pam-show {
    display: flex;
}

.pam-mobile-modal-content {
    background: rgba(33, 37, 41, 0.98);
    border-radius: 12px;
    min-width: 300px;
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.pam-mobile-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pam-mobile-modal-title {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.pam-mobile-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.pam-mobile-modal-close:hover {
    color: #fff;
}

.pam-mobile-modal-body {
    padding: 8px 0;
}


/* ============================================
   DROPDOWN MENU
   ============================================ */
.pam-dropdown {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 1040; /* Below Bootstrap modal backdrop (1050) */
}

.pam-dropdown.pam-show {
    opacity: 1;
    pointer-events: auto;
}

.pam-menu {
    background: rgba(33, 37, 41, 0.95);
    border-radius: 8px;
    min-width: 190px;
    padding: 6px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

/* Allow poster container to show overflow when menu is open */
.pao-container:hover {
    overflow: visible !important;
}

/* Ensure card doesn't clip the menu */
.pao-container:hover .pam-dropdown {
    z-index: 1000;
}

/* ============================================
   MENU ITEMS
   ============================================ */
.pam-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: #e9ecef;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pam-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.pam-item i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

/* Action-specific icon colors - MUST match posterActionOverlay color scheme */
.pam-item[data-action="details"] i { color: #6c757d; }
.pam-item[data-action="trailer"] i { color: #dc3545; }
.pam-item[data-action="viewing"] i { color: #0d6efd; }      /* Blue - viewing family */
.pam-item[data-action="watchlist"] i { color: #0dcaf0; }    /* Cyan - viewing family */
.pam-item[data-action="owned"] i { color: #198754; }        /* Green - owning family */
.pam-item[data-action="collection"] i { color: #198754; }   /* Green - owning family */
.pam-item[data-action="want"] i { color: #14b8a6; }         /* Teal - owning family */
.pam-item[data-action="review"] i { color: #f59e0b; }       /* Orange - standalone */
.pam-item[data-action="view_reviews"] i { color: #0dcaf0; } /* Cyan - info/view */
.pam-item[data-action="riyl"] i { color: #6f42c1; }         /* Purple */
.pam-item[data-action="view_recommendations"] i { color: #a78bfa; } /* Light purple */
.pam-item[data-action="favorite"] i { color: #dc3545; }     /* Red */

/* Active state for toggles - each keeps its own color */
.pam-item.pam-active {
    background: rgba(255, 255, 255, 0.08);
}

/* Active states maintain action-specific colors (filled icons) */
.pam-item.pam-active[data-action="owned"] i { color: #198754; }
.pam-item.pam-active[data-action="collection"] i { color: #198754; }
.pam-item.pam-active[data-action="viewing"] i { color: #0d6efd; }
.pam-item.pam-active[data-action="watchlist"] i { color: #0dcaf0; }
.pam-item.pam-active[data-action="want"] i { color: #14b8a6; }
.pam-item.pam-active[data-action="review"] i { color: #f59e0b; }
.pam-item.pam-active[data-action="riyl"] i { color: #6f42c1; }
.pam-item.pam-active[data-action="favorite"] i { color: #dc3545; }

/* ============================================
   DIVIDER
   ============================================ */
.pam-divider {
    height: 2px;
    background: rgba(255, 255, 255, 0.25);
    margin: 8px 12px;
}

/* ============================================
   OVERFLOW SUBMENU
   ============================================ */
.pam-overflow-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: var(--mv-text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pam-overflow-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
}

.pam-overflow-trigger i:first-child {
    width: 20px;
    text-align: center;
}

.pam-overflow-trigger .pam-chevron {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.pam-overflow-count {
    background: rgba(255, 255, 255, 0.2);
    color: #adb5bd;
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 4px;
}

.pam-overflow-menu {
    display: none;
}

.pam-overflow-menu.pam-show {
    display: block;
}

/* ============================================
   STATUS INDICATORS (top-left corner)
   ============================================ */
.pam-status-indicators {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    z-index: 5;
    pointer-events: none;
}

.pam-indicator {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    background: rgba(0, 0, 0, 0.6);
}

/* Indicator colors - MUST match posterActionOverlay.css exactly */
/* Owned - Green (owning family) */
.pam-indicator.pam-owned {
    background: rgba(25, 135, 84, 0.85);
    color: white;
}

/* Watched - Blue (viewing family) */
.pam-indicator.pam-watched {
    background: rgba(13, 110, 253, 0.85);
    color: white;
}

/* Watchlist - Cyan (viewing family) */
.pam-indicator.pam-watchlist {
    background: rgba(13, 202, 240, 0.85);
    color: #000;
}

/* Want List - Teal (owning family) */
.pam-indicator.pam-want {
    background: rgba(20, 184, 166, 0.85);
    color: white;
}

/* Reviewed - Orange (standalone) */
.pam-indicator.pam-review {
    background: rgba(245, 158, 11, 0.85);
    color: white;
}

/* RIYL/Recommendations - Purple */
.pam-indicator.pam-riyl {
    background: rgba(111, 66, 193, 0.85);
    color: white;
}

/* ============================================
   QUICK ACTION BUTTONS (opt-in row alongside 3-dot trigger)
   ============================================ */
.pam-quick-actions {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;  /* Hidden on desktop by default */
    align-items: center;
    gap: 6px;
    pointer-events: auto;
    z-index: 100;
}

.pam-quick-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    color: white;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    padding: 0;
}

.pam-quick-btn:active {
    transform: scale(0.9);
}

/* Active state: colored background for the action (semi-transparent) */
.pam-quick-btn.pam-quick-active[data-action="viewing"] {
    background: rgba(13, 110, 253, 0.55);
}
.pam-quick-btn.pam-quick-active[data-action="watchlist"] {
    background: rgba(13, 202, 240, 0.55);
    color: #000;
}
.pam-quick-btn.pam-quick-active[data-action="owned"] {
    background: rgba(25, 135, 84, 0.55);
}
.pam-quick-btn.pam-quick-active[data-action="want"] {
    background: rgba(20, 184, 166, 0.55);
}
.pam-quick-btn.pam-quick-active[data-action="review"] {
    background: rgba(245, 158, 11, 0.55);
}

/* 3-dot menu button in quick actions row */
.pam-quick-menu-btn {
    background: rgba(0, 0, 0, 0.45);
}

/* Touch/Mobile - show quick actions (same breakpoints as .pam-trigger) */
@media (hover: none) {
    .pam-quick-actions {
        display: flex;
    }
    /* When quick actions are present, hide the standalone trigger */
    .pam-has-quick-actions .pam-trigger {
        display: none !important;
    }
    .pam-overlay.pam-has-quick-actions {
        pointer-events: none;
    }
    .pam-has-quick-actions .pam-quick-actions {
        pointer-events: auto;
    }
}

@media (pointer: coarse) {
    .pam-quick-actions {
        display: flex;
    }
    .pam-has-quick-actions .pam-trigger {
        display: none !important;
    }
    .pam-overlay.pam-has-quick-actions {
        pointer-events: none;
    }
    .pam-has-quick-actions .pam-quick-actions {
        pointer-events: auto;
    }
}

@media (max-width: 768px) {
    .pam-quick-actions {
        display: flex;
    }
    .pam-has-quick-actions .pam-trigger {
        display: none !important;
    }
    .pam-overlay.pam-has-quick-actions {
        pointer-events: none;
    }
    .pam-has-quick-actions .pam-quick-actions {
        pointer-events: auto;
    }
}

/* ============================================
   WATCHED INDICATOR - Clickable for viewing popover
   ============================================ */
.pam-indicator.pam-watched {
    pointer-events: auto;
    cursor: pointer;
}

/* ============================================
   VIEWING POPOVER (shows viewing dates)
   ============================================ */
.pam-viewing-popover {
    position: absolute;
    z-index: 1070;
    background: rgba(33, 37, 41, 0.97);
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 140px;
    max-width: 220px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    color: #e9ecef;
    font-size: 0.8rem;
}

.pam-vp-loading {
    text-align: center;
    padding: 4px 0;
    color: var(--mv-text-muted);
}

.pam-vp-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pam-vp-row {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.pam-vp-method {
    color: var(--mv-text-muted);
    font-size: 0.7rem;
}

.pam-vp-empty {
    color: var(--mv-text-muted);
    text-align: center;
    padding: 4px 0;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 576px) {
    .pam-menu {
        min-width: 160px;
    }

    .pam-item {
        padding: 10px 12px;
    }

    .pam-trigger {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }

    .pam-quick-btn {
        width: 30px;
        height: 30px;
        font-size: 0.875rem;
    }

    .pam-quick-actions {
        gap: 5px;
    }
}