/* ── 1. Grid container in swap mode ── */
.grid-stack.gs-swap-mode {
    cursor: crosshair;
}

    /* ── 2. Individual tiles — hover state in swap mode ── */
    .grid-stack.gs-swap-mode .gvp-videoBlocks {
        cursor: pointer;
        transition: outline 0.15s ease, box-shadow 0.15s ease;
    }

        .grid-stack.gs-swap-mode .gvp-videoBlocks:hover {
            outline: 2px solid rgba(54, 158, 211, 0.7);
            box-shadow: 0 0 0 4px rgba(54, 158, 211, 0.15);
            z-index: 10;
        }


/* ── 3. First tile selected (source being dragged) ── */
.gvp-videoBlocks.gs-swap-selected,
.spotlight-tile.gs-swap-selected {
    outline: 6px dashed #369ED3 !important;
    box-shadow: 0 0 0 4px rgba(54, 158, 211, 0.35) !important;
    z-index: 20 !important;
    opacity: 0.65;
    animation: gs-pulse 1.2s ease-in-out infinite;
}

@keyframes gs-pulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(54, 158, 211, 0.35);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(54, 158, 211, 0.15);
    }
}

/* ── 4. Drop target tile — 6px dashed outline + 30% blue overlay ── */
.gvp-videoBlocks.gs-swap-target,
.spotlight-tile.gs-swap-target {
    outline: 6px dashed #369ED3 !important;
    box-shadow: 0 0 0 4px rgba(54, 158, 211, 0.35) !important;
    z-index: 20 !important;
    position: relative;
}

    /* Semi-transparent blue overlay (30% opacity) on drop target */
    .gvp-videoBlocks.gs-swap-target::before,
    .spotlight-tile.gs-swap-target::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(54, 158, 211, 0.3); /* #369ED3 at 30% transparency */
        z-index: 55;
        pointer-events: none;
        border-radius: inherit;
        animation: gs-overlay-fade-in 0.2s ease-out;
    }

@keyframes gs-overlay-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Flash animation on successful drop */
@keyframes gs-flash {
    0% {
        background-color: rgba(54, 158, 211, 0.4);
    }

    100% {
        background-color: transparent;
    }
}

.gvp-videoBlocks.gs-swap-flash,
.spotlight-tile.gs-swap-flash {
    animation: gs-flash 0.35s ease-in-out;
}

/* ── 5. Swap-mode button in the nav ── */
.gv-nav-swap-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    height: 30px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    user-select: none;
}

/* Default (off) state */
.gv-nav-swap-btn {
    background: transparent;
    color: var(--nav-text, #cbd5e0);
    border-color: var(--nav-border, rgba(255, 255, 255, 0.2));
}

    .gv-nav-swap-btn:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    /* Active (on) state */
    .gv-nav-swap-btn.swap-active {
        background: transparent;
        color: var(--themeButton);
        border-color: var(--themeButton);
    }

        .gv-nav-swap-btn.swap-active .material-symbols-outlined {
            animation: gs-rotate 2s linear infinite;
        }

@keyframes gs-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ── 6. Swap preview card (floating) ── */

/* Swap preview panel */
#gs-swap-preview {
    position: fixed !important;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

    #gs-swap-preview.gs-swap-preview--visible {
        opacity: 1;
        transform: translateY(0);
    }

.gs-swap-preview-inner {
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 12px 16px;
    min-width: 180px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
}

.gs-swap-preview-icon {
    font-size: 24px;
    color: #007bff;
    text-align: center;
    margin-bottom: 8px;
}

.gs-swap-preview-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-swap-preview-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin-bottom: 8px;
}

.gs-swap-preview-arrows {
    display: flex;
    justify-content: center;
    gap: 4px;
    color: #007bff;
    margin: 8px 0;
}

    .gs-swap-preview-arrows span {
        font-size: 18px;
    }

.gs-swap-preview-hint {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    margin-top: 8px;
}

    .gs-swap-preview-hint kbd {
        background: rgba(255, 255, 255, 0.1);
        padding: 2px 6px;
        border-radius: 3px;
        font-family: inherit;
    }}
}

/* ── 7. GridStack drag placeholder ── */
.grid-stack-placeholder > .placeholder-content {
    border: 2px dashed #369ED3;
    border-radius: 4px;
    background: rgba(54, 158, 211, 0.08);
}

/* ─────────────────────────────────────────────────────────────
   Swap mode – drag overlay & cursor additions
   ───────────────────────────────────────────────────────────── */

/* Transparent overlay injected on each tile in swap mode.
   Sits above img/video children so drag events fire reliably.
   IMPORTANT: Leave room for resize handles (bottom-right corner) */
.gs-drag-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 20px;
    bottom: 20px;
    z-index: 50;
    background: transparent;
    -webkit-user-select: none;
    user-select: none;
}

/* When NOT in swap mode, no overlay blocking resize */
.grid-stack:not(.gs-swap-mode) .gs-drag-overlay {
    display: none;
}

/* ─────────────────────────────────────────────────────────────
   Widget Head & Lock Button Styles
   ───────────────────────────────────────────────────────────── */

/* Widget head bar - positioned at top-left */
.widget-head {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 99;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px;
    transition: opacity 0.15s ease;
    pointer-events: auto;
}

/* Show widget-head on tile hover */
.gvp-videoBlocks:hover .widget-head,
.spotlight-tile:hover .widget-head,
.grid-stack-item:hover .widget-head {
    opacity: 1;
}

/* Lock button styling */
.widget-lock-btn {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
}

    .widget-lock-btn .material-symbols-outlined {
        font-size: 18px;
    }

    .widget-lock-btn:hover {
        background: var(--btnHover) !important;
    }

/* Lock state visual feedback on the tile */
.gvp-videoBlocks.locked-size,
.spotlight-tile.locked-size {
    outline: var(--btnHover) !important;
}

.gvp-videoBlocks.locked-pinned,
.spotlight-tile.locked-pinned {
    outline: var(--btnHover) !important;
}

    .gvp-videoBlocks.locked-pinned .widget-lock-btn,
    .spotlight-tile.locked-pinned .widget-lock-btn {
        background: var(--btnHover) !important;
    }

/* ─────────────────────────────────────────────────────────────
   GridStack 10.x Resize Handles
   ───────────────────────────────────────────────────────────── */

/* Ensure tiles can be resized */
.grid-stack > .grid-stack-item {
    position: absolute;
    overflow: visible !important;
}

/* The resize handle element */
.grid-stack-item > .ui-resizable-handle,
.grid-stack-item > .gs-resizable-handle {
    position: absolute !important;
    z-index: 200 !important;
    pointer-events: auto !important;
}

/* Southeast corner handle (main resize handle) */
.grid-stack-item > .ui-resizable-se,
.grid-stack-item > .gs-resizable-se {
    width: 20px !important;
    height: 20px !important;
    right: 0 !important;
    bottom: 0 !important;
    cursor: se-resize !important;
    background: transparent;
}

/* Show resize indicator on hover */
.grid-stack-item:hover > .ui-resizable-se,
.grid-stack-item:hover > .gs-resizable-se {
    background: linear-gradient(135deg, transparent 60%, rgba(54, 158, 211, 0.6) 60%) !important;
}

/* East handle */
.grid-stack-item > .ui-resizable-e,
.grid-stack-item > .gs-resizable-e {
    width: 10px !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 20px !important;
    cursor: e-resize !important;
}

/* South handle */
.grid-stack-item > .ui-resizable-s,
.grid-stack-item > .gs-resizable-s {
    height: 10px !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 20px !important;
    cursor: s-resize !important;
}

/* Hide overlay when NOT in swap mode to allow normal GridStack interactions */
.grid-stack:not(.gs-swap-mode) .gs-drag-overlay {
    display: none !important;
}

/* Ensure content doesn't block resize handles */
.grid-stack-item-content {
    overflow: hidden;
    pointer-events: auto;
}

/* Make sure images/videos don't interfere with resize - ONLY during swap mode */
.grid-stack.gs-swap-mode .grid-stack-item-content img,
.grid-stack.gs-swap-mode .grid-stack-item-content video {
    pointer-events: none;
}

/* Re-enable pointer events when NOT in swap mode to allow clicks */
.grid-stack:not(.gs-swap-mode) .grid-stack-item-content img,
.grid-stack:not(.gs-swap-mode) .grid-stack-item-content video {
    pointer-events: auto;
}

/* Ensure images maintain proper aspect ratio and sizing */
.grid-stack-item-content img.grid-view,
.grid-stack-item-content video.grid-view {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* During swap mode, keep the same sizing */
.grid-stack.gs-swap-mode .grid-stack-item-content img.grid-view,
.grid-stack.gs-swap-mode .grid-stack-item-content video.grid-view {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ensure the content wrapper fills the tile properly */
.grid-stack-item > .grid-stack-item-content {
    position: relative;
    overflow: hidden;
    width: 100% !important;
    height: 100% !important;
}

/* Video container wrapper should also fill properly */
.video-container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Card */
.gs-swap-card-wrapper {
    width: 350px;
    background: #4a4d50;
    border-radius: 20px;
    padding: 15px 15px 10px;
    color: #fff;
}

.gs-swap-card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gs-swap-card-content {
    width: calc(100% - 70px);
}

/* Rows */
.gs-swap-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 10px 0;
}

    .gs-swap-row:last-child {
        padding-bottom: 0;
    }

/* Left text */
.gs-swap-preview-title {
    font-size: 16px;
    font-weight: 600;
}

.gs-swap-preview-sub {
    font-size: 12px;
    color: #bdbdbd;
    margin-top: 3px;
}

/* Right section */
.gs-swap-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Badge pills */
.gs-swap-badge {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.gs-swap-stream {
    background: #2f3133;
    color: #fff;
}

.gs-swap-rfp {
    background: #2f3133;
    color: #f5a623;
}

/* Divider */
.gs-swap-divider {
    height: 1px;
    background: #6a6d70;
    margin: 6px 0;
}

.gs-swap-arrows {
    max-width: 45px;
}

/* Footer */
.gs-swap-card-footer {
    text-align: center;
    font-size: 11px;
    color: #cfcfcf;
    margin-top: 8px;
}