/* ═══════════════════════════════════════════════════════
   Mobile-first responsive overhaul for EzReplay Pro
   ═══════════════════════════════════════════════════════ */

/* ── Mobile nav toggle button (visible only on mobile) ── */

.mobile-nav-toggle {
    all: unset;
    display: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background-color var(--ease-fast);
    z-index: 10;
}

.mobile-nav-toggle:hover {
    background-color: var(--color-secondary);
}

.mobile-nav-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
}

.mobile-nav-toggle svg line {
    stroke: var(--color-text);
    stroke-width: 2;
    stroke-linecap: round;
    transition: transform var(--ease-fast), opacity var(--ease-fast);
}

/* ── Mobile overlay backdrop ── */

.mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 900;
    opacity: 0;
    transition: opacity var(--ease-medium);
    pointer-events: none;
}

.mobile-nav-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}


/* ═══════════════════════════════════════════════════════
   Tablet breakpoint (< 1000px) — stack video/notes
   ═══════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
    .mainApp {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr;
    }

    .mainApp_videoContainerParent {
        max-height: 40vh;
    }

    .notes-resizer {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════════
   Mobile breakpoint (< 768px) — full mobile layout
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Show mobile nav toggle */
    .mobile-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Show backdrop on mobile */
    .mobile-nav-backdrop {
        display: block;
    }

    /* Grid becomes single column, nav is overlay */
    .allContainer {
        grid-template-columns: 1fr !important;
        transition: none;
    }

    .allContainer.navHidden {
        grid-template-columns: 1fr !important;
    }

    /* Nav becomes fixed overlay drawer */
    #navContainer {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 280px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 950 !important;
        transform: translateX(-100%) !important;
        transition: transform var(--ease-medium) ease !important;
        box-shadow: var(--shadow-lg) !important;
        overflow-y: auto !important;
    }

    #navContainer.mobile-open {
        transform: translateX(0) !important;
    }

    /* Override the desktop collapsed state on mobile */
    #navContainer.navContainerHidden {
        transform: translateX(-100%) !important;
    }

    #navContainer.navContainerHidden.mobile-open {
        transform: translateX(0);
        padding: var(--padding) !important;
    }

    #navContainer.navContainerHidden.mobile-open .navHeader_profileImgContainer,
    #navContainer.navContainerHidden.mobile-open .navHeader_profileContainer,
    #navContainer.navContainerHidden.mobile-open .navNotes,
    #navContainer.navContainerHidden.mobile-open .navButton span,
    #navContainer.navContainerHidden.mobile-open .betaMsgContainer {
        display: flex !important;
    }

    #navContainer.navContainerHidden.mobile-open .headCta {
        scale: 1 !important;
    }

    #navContainer.navContainerHidden.mobile-open .navButton {
        justify-content: flex-start !important;
    }

    /* Hide desktop toggle button on mobile */
    .toggleNavBtn {
        display: none !important;
    }

    /* Main content takes full width */
    .mainAppContainer {
        grid-column: 1;
    }

    .mainAppContainer header {
        padding-left: 8px;
    }

    /* Stack video and notes */
    .mainApp {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr;
        padding: 8px;
        gap: 8px;
    }

    .mainApp_videoContainerParent {
        max-height: 35vh;
    }

    /* Video controls — bigger tap targets */
    .videoControlsContainer {
        bottom: -36px;
        height: 36px;
    }

    .videoControlsContainer button {
        min-width: 36px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Notes container */
    .mainApp_notesContainer {
        padding: 10px;
        border-radius: var(--radius-sm);
    }

    /* Toolbar: scrollable, bigger buttons */
    .textEditorContainer {
        gap: 1px;
        padding: 3px;
        height: 38px;
        top: 10px;
        left: 10px;
        right: 10px;
    }

    .textEditorContainer button {
        min-width: 32px;
        min-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* Select video popup — full screen on mobile */
    #selectVideoPopup {
        align-items: flex-start;
        padding: 0;
    }

    .selectVideoPopup_selectionContainer {
        width: 100% !important;
        height: 100%;
        aspect-ratio: unset !important;
        border-radius: 0 !important;
        border: none !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .selectionContainer_VideoContainer {
        height: auto !important;
        min-height: 140px;
        padding: 20px;
    }

    .selectionContainer_VideoContainer video {
        width: 100% !important;
        height: 100% !important;
    }

    .selectionContainer {
        grid-template-rows: auto auto auto !important;
        padding-bottom: 20px;
    }

    .selectionBox {
        padding: 12px;
    }

    .selectionBox .rowBoxyt {
        flex-direction: column;
    }

    .selectionBox .input {
        height: 44px;
        font-size: 16px; /* prevents iOS zoom */
    }

    #uploadLocalBtn,
    #uploadNoteBtn {
        min-height: 80px;
    }

    .closePopupBtn {
        right: 10px !important;
        top: 10px !important;
        width: 36px;
        height: 36px !important;
        min-width: 36px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Fullscreen notes override for mobile */
    .mainApp.fullscreenNotes .mainApp_videoContainerParent {
        width: 35%;
        bottom: 8px;
        right: 8px;
    }

    /* History section on mobile — give it more room */
    #historySection {
        max-height: 60%;
    }

    /* Upload/save buttons — bigger tap area */
    .upload_notes_btn,
    .save_notes_btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Header logo hide text on very small */
    .headerLogo span {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════════
   Small phone breakpoint (< 480px)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 480px) {

    .mainApp {
        padding: 6px;
        gap: 6px;
    }

    .mainApp_videoContainerParent {
        max-height: 30vh;
    }

    .mainApp_notesContainer {
        padding: 8px;
        gap: 6px;
    }

    .textEditorContainer {
        height: 36px;
        top: 8px;
        left: 8px;
        right: 8px;
    }

    .notes {
        margin-top: calc(var(--gap) + 36px);
    }

    /* Select video popup — tighter */
    .selectionContainer_VideoContainer {
        min-height: 100px;
        padding: 16px;
    }

    .selectionContainer_VideoContainer .size-3 {
        font-size: 1.4rem !important;
    }

    .betaMsgContainer {
        flex-direction: column;
        gap: 6px;
        padding: 6px 10px;
    }
}