/* =========================================================
   ENCBYT POPUP, DIALOG & OVERLAY SYSTEM — COMPLETE v7.0
   Path: frontend/pwa/css/popup.css
   Security: Strict CSP Compliant (Zero Inline Styles)
   Target Modules: dialog.js, context-menu.js, upload.js, spa.js
   Features: Clean dialog modal with side-by-side action buttons
   Fix: Attractive primary buttons with gradient + shadow
   ========================================================= */

:root {
    --popup-bg: #ffffff;
    --popup-border: #e2e8f0;
    --popup-text-main: #0f172a;
    --popup-text-muted: #64748b;
    --popup-primary: #2563eb;
    --popup-primary-hover: #1d4ed8;
    --popup-danger: #ef4444;
    --popup-danger-bg: #fee2e2;
    --popup-success: #10b981;
    --popup-shadow: 0 16px 40px rgba(15, 23, 42, 0.16), 0 2px 10px rgba(15, 23, 42, 0.06);
}

/* =========================================================
   1. DIALOG MODAL SYSTEM (dialog.js) — NON-BLOCKING
   ========================================================= */

.cv-dialog-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.35) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    pointer-events: auto !important;
    z-index: 100005 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    animation: cvOverlayFadeIn 0.18s ease;
}

@keyframes cvOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cv-dialog-box {
    background: var(--popup-bg) !important;
    border: 1px solid var(--popup-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--popup-shadow) !important;
    width: 100% !important;
    max-width: 440px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    pointer-events: auto !important;
    animation: cvDialogPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cvDialogPopIn {
    from { opacity: 0; transform: scale(0.94) translateY(-6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.cv-dialog-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    margin: 20px auto 0 auto !important;
    font-size: 24px !important;
    line-height: 1 !important;
    background: #f1f5f9 !important;
    border: 1px solid var(--popup-border) !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

.cv-dialog-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--popup-text-main) !important;
    margin: 14px 20px 0 20px !important;
    text-align: center !important;
    line-height: 1.35 !important;
    letter-spacing: -0.1px !important;
}

.cv-dialog-message {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--popup-text-muted) !important;
    line-height: 1.5 !important;
    margin: 8px 20px 0 20px !important;
    text-align: center !important;
    word-break: break-word !important;
}

.cv-dialog-input {
    width: calc(100% - 40px) !important;
    height: 42px !important;
    margin: 16px 20px 0 20px !important;
    padding: 0 12px !important;
    background: #ffffff !important;
    border: 1px solid var(--popup-border) !important;
    border-radius: 9px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    color: var(--popup-text-main) !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.cv-dialog-input:focus {
    border-color: var(--popup-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

.cv-dialog-input::placeholder {
    color: #94a3b8 !important;
}

/* =========================================================
   DIALOG ACTIONS (OK / Cancel side-by-side)
   ========================================================= */

.cv-dialog-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    margin-top: 20px !important;
    background: #f8fafc !important;
    border-top: 1px solid var(--popup-border) !important;
    box-sizing: border-box !important;
}

/* =========================================================
   DIALOG BUTTONS (attractive, modern)
   ========================================================= */

.cv-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    min-width: 96px !important;
    padding: 0 22px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    line-height: 1 !important;
    cursor: pointer !important;
    border: 1.5px solid var(--popup-border) !important;
    background: #ffffff !important;
    color: #334155 !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    letter-spacing: -0.1px !important;
    flex: 0 0 auto !important;
}

.cv-btn:active {
    transform: translateY(1px) !important;
}

.cv-btn:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

.cv-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
}

/* Cancel — subtle */
.cv-btn-cancel {
    background: #ffffff !important;
    border-color: var(--popup-border) !important;
    color: #475569 !important;
}

.cv-btn-cancel:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

/* Primary — gradient + shadow */
.cv-btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

.cv-btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35) !important;
}

.cv-btn-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35), 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

/* Danger — gradient + shadow */
.cv-btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important;
}

.cv-btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    border-color: #dc2626 !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35) !important;
}

.cv-btn-danger:focus-visible {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35), 0 4px 12px rgba(239, 68, 68, 0.25) !important;
}

/* =========================================================
   2. NATIVE CONTEXT MENU (context-menu.js)
   ========================================================= */

.custom-context-menu {
    position: fixed !important;
    z-index: 100000 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 5px !important;
    width: 200px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16) !important;
    animation: cvMenuPopIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top left;
}

@keyframes cvMenuPopIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.custom-context-menu.is-hidden {
    display: none !important;
}

.context-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background 0.1s ease, color 0.1s ease !important;
    letter-spacing: -0.1px !important;
}

.context-item i {
    width: 16px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    text-align: center !important;
    color: #64748b !important;
}

.context-item:hover {
    background: #eff6ff !important;
    color: var(--popup-primary) !important;
}

.context-item:hover i {
    color: var(--popup-primary) !important;
}

.context-item.primary {
    color: var(--popup-primary) !important;
    font-weight: 600 !important;
}

.context-item.primary i {
    color: var(--popup-primary) !important;
}

.context-item.danger {
    color: var(--popup-danger) !important;
}

.context-item.danger i {
    color: var(--popup-danger) !important;
}

.context-item.danger:hover {
    background: var(--popup-danger-bg) !important;
    color: var(--popup-danger) !important;
}

.context-item.disabled {
    opacity: 0.45 !important;
    cursor: default !important;
    pointer-events: none !important;
}

.context-divider {
    height: 1px !important;
    background: var(--popup-border) !important;
    margin: 4px 6px !important;
}

/* =========================================================
   3. VIEWPORT DRAG & DROP OVERLAY (upload.js)
   ========================================================= */

.drop-overlay {
    display: none !important;
}

body.dragging .drop-overlay {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.7) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
    animation: cvOverlayFadeIn 0.15s ease;
}

.drop-overlay-box {
    background: #ffffff !important;
    border: 2.5px dashed var(--popup-primary) !important;
    border-radius: 18px !important;
    padding: 42px 36px !important;
    text-align: center !important;
    max-width: 460px !important;
    width: 90% !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22) !important;
    pointer-events: none !important;
}

.drop-overlay-icon {
    font-size: 52px !important;
    color: var(--popup-primary) !important;
    margin-bottom: 14px !important;
    display: inline-block !important;
}

.drop-overlay-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--popup-text-main) !important;
    margin-bottom: 6px !important;
}

.drop-overlay-subtitle {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--popup-text-muted) !important;
    margin: 0 !important;
}

.quick-upload-zone.drag-active,
#quickUploadZone.drag-active {
    border-color: var(--popup-primary) !important;
    background: #eef2ff !important;
}

/* =========================================================
   4. FLOATING UPLOAD PANEL WIDGET
   ========================================================= */

#global-upload-panel,
#uploadProgressWidget,
.upload-panel-container {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    width: 360px !important;
    max-width: calc(100vw - 32px) !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid var(--popup-border) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.06) !important;
    overflow: hidden !important;
    z-index: 99990 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    animation: cvSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cvSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.upload-panel-container.u-hidden,
#global-upload-panel.is-hidden {
    display: none !important;
}

.upload-panel-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.upload-panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid var(--popup-border) !important;
}

.upload-panel-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.upload-panel-icon {
    font-size: 14px !important;
    color: var(--popup-primary) !important;
}

.upload-panel-header strong {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--popup-text-main) !important;
}

.upload-panel-close {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: var(--popup-text-muted) !important;
    font-size: 13px !important;
    padding: 4px 6px !important;
    border-radius: 6px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.upload-panel-close:hover {
    background: var(--popup-danger-bg) !important;
    color: var(--popup-danger) !important;
}

#upload-items {
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    background: #ffffff !important;
}

.upload-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    position: relative !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
}

.upload-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.upload-item-exit {
    opacity: 0 !important;
    transform: translateX(20px) !important;
    pointer-events: none !important;
}

.upload-item-info {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 12.5px !important;
    gap: 12px !important;
}

.upload-item-name-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.upload-item-name-wrap i {
    font-size: 13px !important;
    color: #64748b !important;
    flex-shrink: 0 !important;
}

.upload-item-name {
    font-weight: 500 !important;
    color: #0f172a !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.upload-status-text {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--popup-primary) !important;
    flex-shrink: 0 !important;
    font-variant-numeric: tabular-nums !important;
}

.upload-status-text.status-complete {
    color: var(--popup-success) !important;
}

.upload-status-text.status-error {
    color: var(--popup-danger) !important;
}

.upload-status-text.status-paused {
    color: #f59e0b !important;
}

.upload-status-text.status-saving {
    color: #f59e0b !important;
}

.upload-progress-track {
    width: 100% !important;
    height: 4px !important;
    background: #f1f5f9 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
}

.upload-progress-bar {
    height: 100% !important;
    /* ❌ removed `width: 0% !important` — it beat the inline width set by
       spa.js and pinned every transfer bar at 0%. Width is inline-driven. */
    background: var(--popup-primary) !important;
    border-radius: 999px !important;
    transition: width 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.upload-progress-bar.status-complete {
    background: var(--popup-success) !important;
}

.upload-progress-bar.status-error {
    background: var(--popup-danger) !important;
}

.upload-progress-bar.status-paused {
    background: #f59e0b !important;
}

.upload-progress-bar.status-saving {
    background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
}

.upload-progress-bar.status-saving::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
    animation: uploadShimmer 1s infinite !important;
}

.upload-item-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    font-variant-numeric: tabular-nums !important;
}

.upload-meta-size {
    color: #64748b !important;
}

.upload-meta-time {
    color: #94a3b8 !important;
    font-weight: 600 !important;
}

.upload-item-actions {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
    pointer-events: none !important;
}

.upload-item:hover .upload-item-actions {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.upload-action-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    background: #f1f5f9 !important;
    border: none !important;
    color: #475569 !important;
    cursor: pointer !important;
    font-size: 11px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    padding: 0 !important;
    outline: none !important;
}

.upload-action-btn:hover {
    background: #e2e8f0 !important;
    color: #1e293b !important;
}

.upload-action-btn.upload-action-cancel:hover {
    background: var(--popup-danger-bg) !important;
    color: var(--popup-danger) !important;
}

.upload-action-btn.u-hidden {
    display: none !important;
}

/* =========================================================
   5. FLOATING MEDIA PLAYER WIDGET (spa.js)
   ========================================================= */

#global-media-player,
.media-player-container {
    position: fixed !important;
    bottom: 24px !important;
    left: 24px !important;
    width: 360px !important;
    max-width: calc(100vw - 32px) !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid var(--popup-border) !important;
    box-shadow: var(--popup-shadow) !important;
    overflow: hidden !important;
    z-index: 99990 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    animation: cvSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.media-player-container.u-hidden,
#global-media-player.is-hidden {
    display: none !important;
}

.media-player-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    background: #ffffff !important;
}

.media-player-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid var(--popup-border) !important;
}

.media-player-icon {
    font-size: 18px !important;
    color: var(--popup-primary) !important;
}

.media-player-meta {
    flex: 1 !important;
    overflow: hidden !important;
}

.media-player-title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--popup-text-main) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.media-player-subtitle {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: var(--popup-text-muted) !important;
}

.media-player-close {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: var(--popup-text-muted) !important;
    font-size: 14px !important;
}

.media-player-close:hover {
    color: var(--popup-danger) !important;
}

.media-player-audio {
    width: 100% !important;
    padding: 10px !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.media-player-video {
    width: 100% !important;
    max-height: 200px !important;
    background: #000000 !important;
    outline: none !important;
}

/* =========================================================
   6. RESPONSIVE QUERIES
   ========================================================= */

@media (max-width: 768px) {
    #global-upload-panel,
    #uploadProgressWidget,
    .upload-panel-container {
        right: 16px !important;
        bottom: 16px !important;
        width: calc(100vw - 32px) !important;
    }

    #global-media-player,
    .media-player-container {
        left: 16px !important;
        bottom: 16px !important;
        width: calc(100vw - 32px) !important;
    }
}
/* --- Dark Mode Batch 2 --- */

[data-theme="dark"], body.dark-mode {
    background: #0b0f19 !important;
    color: #f9fafb !important;
}
[data-theme="dark"] .modal-content, [data-theme="dark"] .popup, body.dark-mode .modal-content, body.dark-mode .popup {
    background: #111827 !important;
    border: 1px solid #1f2937 !important;
    color: #f9fafb !important;
}