/* Mobile layout. Loaded after the shared desktop styles. */
.mobile-bottom-nav,
.sidebar-backdrop,
.sidebar-close,
.new-video-label-short {
    display: none;
}

.main-content,
.content-area {
    min-width: 0;
}

.agenda-toolbar {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.agenda-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.agenda-filters .form-select {
    flex: 1 1 160px;
    width: auto;
    min-width: 0;
}

.agenda-results-summary {
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.agenda-search {
    max-width: none;
}

.version-actions {
    min-width: 0;
    flex-wrap: wrap;
}

.version-actions .form-select {
    width: auto;
    min-width: 88px;
}

.comment-compose {
    align-items: flex-end;
}

.comment-compose textarea {
    min-height: 76px;
}

.comment-item:focus-within .comment-actions {
    opacity: 1;
}

@media (hover: none), (pointer: coarse) {
    .comment-actions,
    .delivery-comment-actions {
        opacity: 1;
    }
}

@media (max-width: 1024px) {
    .sidebar {
        left: 0;
        height: 100vh;
        height: 100dvh;
        width: min(300px, calc(100vw - 48px));
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
        visibility: hidden;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .sidebar.open {
        visibility: visible;
        transform: translateX(0);
    }

    .sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }

    .sidebar-close {
        display: inline-flex;
        flex-shrink: 0;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 90;
        border: 0;
        background: rgba(0, 0, 0, 0.45);
    }

    .sidebar-open .sidebar-backdrop {
        display: block;
    }

    .sidebar .nav-item {
        min-height: 48px;
    }
}

@media (max-width: 768px) {
    .app-container {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .header {
        height: auto;
        min-height: 60px;
        gap: 0.375rem;
        padding: max(0.5rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) 0.5rem max(0.75rem, env(safe-area-inset-left));
    }

    .header-title {
        flex: 1;
        min-width: 0;
        font-size: 1rem;
        overflow-wrap: anywhere;
        line-height: 1.35;
    }

    .header-actions {
        gap: 0.25rem;
        flex-shrink: 0;
    }

    .header .btn,
    .sync-badge,
    .theme-toggle-btn {
        min-width: 44px;
        min-height: 44px;
        height: 44px;
    }

    .header #new-video-btn {
        padding: 0 0.625rem;
        gap: 0.25rem;
    }

    .new-video-label {
        display: none;
    }

    .header-actions .btn-primary span.new-video-label-short {
        display: inline;
    }

    .header .btn-icon-left {
        margin: 0;
    }

    .content-area {
        overflow: visible;
        padding: 1rem max(0.75rem, env(safe-area-inset-right)) calc(84px + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    }

    .mobile-bottom-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        position: fixed;
        inset: auto 0 0;
        z-index: 60;
        background: var(--color-bg-secondary);
        border-top: 1px solid var(--color-border);
        padding: 0.375rem env(safe-area-inset-right) max(0.375rem, env(safe-area-inset-bottom)) env(safe-area-inset-left);
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        min-height: 52px;
        border: 0;
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--color-text-secondary);
        font: inherit;
        font-size: 0.6875rem;
        cursor: pointer;
    }

    .mobile-nav-item svg {
        width: 22px;
        height: 22px;
    }

    .mobile-nav-item.active {
        background: var(--color-accent-glow);
        color: var(--color-accent);
        font-weight: 700;
    }

    .btn,
    .tab,
    .gantt-tab,
    .zoom-btn,
    .comment-tab,
    .comment-timecode {
        min-height: 44px;
        touch-action: manipulation;
    }

    .btn-icon,
    .table-actions .btn,
    .vd-link-actions .btn {
        min-width: 44px;
    }

    .form-input,
    .form-select,
    .form-textarea,
    .filter-group .form-select {
        font-size: 16px;
        min-height: 44px;
        max-width: 100%;
    }

    .form-input,
    .form-textarea {
        scroll-margin-block: 5rem;
    }

    .stat-cards {
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .stat-cards .card {
        padding: 0.625rem 0.75rem !important;
    }

    .stat-cards .card > div:last-child {
        font-size: 1.375rem !important;
        line-height: 1.3;
    }

    .tabs {
        max-width: 100%;
        gap: 0;
        margin-bottom: 1rem;
    }

    .tab {
        flex: 1 0 auto;
        padding-inline: 0.75rem;
        font-size: 0.8125rem;
    }

    .agenda-toolbar {
        padding: 0.75rem;
    }

    .agenda-filters .form-select {
        flex-basis: 40%;
    }

    .agenda-item {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 0.375rem 0.625rem;
        padding: 0.875rem 0.75rem;
    }

    .agenda-date {
        min-width: 0;
    }

    .agenda-title {
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.5;
    }

    .agenda-side {
        grid-column: 2;
        align-items: flex-start;
    }

    .agenda-side:empty {
        display: none;
    }

    .agenda-badges .badge {
        font-size: 0.75rem;
    }

    .badge {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .modal-overlay {
        padding: 0;
    }

    .modal-overlay .modal {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        border: 0;
        overflow: hidden;
    }

    #video-form-modal .modal,
    #video-detail-modal .modal,
    .modal-overlay .modal-fullscreen {
        height: 100vh;
        height: 100dvh;
    }

    .modal-header {
        flex: 0 0 auto;
        gap: 0.5rem;
        padding: max(0.625rem, env(safe-area-inset-top)) 0.875rem 0.625rem;
    }

    .modal-title {
        min-width: 0;
        font-size: 1rem;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .modal-close {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        font-size: 1.5rem;
    }

    .modal-body,
    .modal-fullscreen .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 1rem max(0.875rem, env(safe-area-inset-right)) 1rem max(0.875rem, env(safe-area-inset-left));
        overflow-wrap: anywhere;
    }

    .modal-footer {
        flex: 0 0 auto;
        flex-wrap: wrap;
        padding: 0.625rem 0.875rem max(0.625rem, env(safe-area-inset-bottom));
        background: var(--color-bg-card);
    }

    .modal-footer > .flex {
        flex-wrap: wrap;
    }

    .detail-footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail-footer .spacer {
        display: none;
    }

    .detail-footer .fw {
        grid-column: 1 / -1;
    }

    #delivery-review-modal .detail-footer {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #delivery-review-modal .detail-footer > span {
        grid-column: span 2;
    }

    #delivery-review-modal .detail-footer .btn {
        padding-inline: 0.375rem;
        gap: 0.25rem;
        font-size: 0.8125rem;
    }

    .vd-grid > div,
    .vd-link-row,
    .table-cards td > * {
        min-width: 0;
    }

    .vd-link-row {
        align-items: flex-start;
        padding: 0.75rem;
    }

    .vd-link-main {
        display: grid;
        gap: 0.375rem;
    }

    .vd-link-main .badge {
        justify-self: start;
    }

    .vd-link-url {
        display: block;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .vd-link-actions {
        flex-direction: column;
    }

    .delivery-review-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .version-selector-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem;
        margin-bottom: 0;
    }

    .version-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .version-actions .form-select {
        width: auto;
        min-width: 72px !important;
    }

    .review-timecode-row,
    .comment-compose {
        flex-wrap: wrap;
    }

    .comment-compose textarea {
        flex: 1 1 100%;
        min-width: 0;
        resize: vertical;
    }

    .comment-compose .btn {
        margin-left: auto;
        min-width: 88px;
    }

    .delivery-comment-section {
        min-width: 0;
        max-height: none;
    }

    .comment-list {
        overflow: visible;
    }

    .comment-panel-header {
        padding: 0.5rem;
    }

    .comment-tab {
        flex: 1;
        justify-content: center;
        min-width: 0;
        padding: 0.375rem;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .comment-body,
    .comment-author {
        overflow-wrap: anywhere;
    }

    .comment-actions {
        flex-wrap: wrap;
        opacity: 1;
    }

    .comment-actions .btn {
        flex: 1;
        padding-inline: 0.375rem;
        font-size: 0.75rem;
    }

    .table-cards td {
        overflow-wrap: anywhere;
    }

    .table-cards .table-actions {
        flex-wrap: wrap;
    }

    .calendar-container {
        padding: 0;
    }

    .calendar-header,
    .calendar-legend {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .calendar-title {
        font-size: 1.125rem;
    }

    .calendar-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .calendar-day,
    .calendar-weekday-header {
        min-width: 0;
        padding: 0.25rem;
    }

    .calendar-event {
        min-height: 36px;
        padding-inline: 0.25rem;
    }

    .gantt-scroll-wrapper {
        max-width: 100%;
    }

    .gantt-view-tabs {
        flex: 1 1 100%;
    }

    .gantt-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .toast-container {
        left: 0.75rem;
        right: 0.75rem;
        top: calc(72px + env(safe-area-inset-top));
        bottom: auto;
        max-width: none;
        pointer-events: none;
    }

    .toast {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        font-size: 0.8125rem;
        padding: 0.75rem 1rem;
    }
}

@media (max-width: 360px) {
    .header-actions .btn-primary span.new-video-label-short {
        display: none;
    }
}