/* ── Task edit modal footer (all screen sizes) ── */
/* Topbar save button replaced by footer */
#edit-modal-save-btn {
    display: none;
}

.edit-modal-mobile-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--c-border);
    flex-shrink: 0;
}

.mobile-footer-cancel-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--c-border);
    border-radius: 7px;
    background: none;
    font-size: 14px;
    color: var(--c-text-2);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.mobile-footer-cancel-btn:hover {
    background: var(--c-hover);
}

.mobile-footer-save-btn {
    flex: 2;
    padding: 10px;
    border: none;
    border-radius: 7px;
    background: var(--c-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.mobile-footer-save-btn:hover {
    background: var(--c-accent-h);
}


        @media (max-width: 768px) {
            /* Toggle hidden on mobile — Browse button in bottom nav replaces it */
            .sidebar-toggle {
                display: none;
            }
        }

        /* Mobile/Tablet responsive */
        @media (max-width: 768px) {
            .sidebar {
                position: fixed;
                top: 0;
                left: 0;
                height: calc(100dvh - 56px);
                z-index: 3100;
                transform: translateX(-100%);
                margin-left: 0;
                box-shadow: 2px 0 8px rgba(0,0,0,0.15);
            }

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

            .main-content {
                width: 100%;
                padding: 0 24px 60px !important;
                --content-pad-x: 24px;
            }

            .top-bar-controls {
                top: 8px;
                right: 8px;
            }

            /* Remove 'View' text on mobile — icon only */
            .view-options-btn span:not(.view-badge) {
                display: none;
            }

            .view-options-btn {
                padding: 7px 9px;
            }


            .add-task-simple {
                padding: 12px;
                font-size: 14px;
            }

            /* #22 — add task form: prevent overflow on narrow screens */
            .add-task-expanded {
                box-sizing: border-box;
                width: 100%;
            }

            .task-options {
                flex-wrap: wrap;
            }

            .task-item {
                padding: 12px;
            }

            .task-checkbox {
                width: 18px;
                height: 18px;
            }

            .task-title {
                font-size: 14px;
            }

            .view-options-btn {
                padding: 6px 10px;
                font-size: 12px;
            }

            .inline-dropdown {
                max-width: calc(100vw - 40px);
                left: 20px !important;
                right: 20px;
            }

            #admin-panel, #settings-panel {
                padding: 0 12px 24px !important;
            }

            /* Edit modal: full viewport, compact title/desc, vertical options, subtasks at bottom */
            .task-edit-modal {
                background: none;
                overflow: hidden;
            }

            .task-edit-modal-content {
                width: 100%;
                height: 100dvh;
                max-height: 100dvh;
                border-radius: 0;
                margin: 0;
            }

            .task-edit-body {
                display: flex;
                flex-direction: column;
                overflow-y: auto;
                overflow-x: hidden;
            }

            .task-edit-main {
                flex-shrink: 0;
                padding: 16px 16px 0;
                overflow-y: visible;
                min-height: 0;
            }

            .task-edit-input {
                font-size: 14px;
            }

            /* Mirror must match the input's font size or highlights won't align */
            #edit-title-mirror {
                font-size: 14px;
                padding: 0;
            }

            /* Description field: larger tap target, no nested scroll (outer modal scrolls) */
            .description-placeholder {
                padding: 12px 0;
            }

            .task-edit-description,
            .description-wrap #task-description {
                max-height: none;
                overflow-y: visible;
            }

            /* Options: vertical list */
            .task-edit-sidebar {
                flex-shrink: 0;
                display: flex;
                flex-direction: column;
                width: 100%;
                border-left: none;
                border-top: 1px solid #e0e0e0;
                background: #f9f9f9;
                padding: 0;
                overflow-y: visible;
                min-height: 0;
            }

            .task-edit-sidebar-section {
                margin-bottom: 0;
                border-bottom: 1px solid #f0f0f0;
            }

            .task-edit-sidebar-section:last-child {
                border-bottom: none;
            }

            .task-edit-sidebar-label {
                display: none;
            }

            .task-edit-sidebar-btn {
                width: 100%;
                padding: 11px 16px;
                border: none;
                border-radius: 0;
                background: transparent;
                font-size: 13px;
                text-align: left;
            }

            /* Regular modals: shrink to visible area above on-screen keyboard */
            .modal-content {
                max-height: 70dvh;
                overflow-y: auto;
            }

            /* Subtasks at bottom */
            .subtasks-section {
                flex-shrink: 0;
                padding: 16px;
                border-top: 1px solid #e0e0e0;
                overflow-y: visible;
            }

            /* #23 — header at top of viewport; padding reserves space for fixed hamburger + view button */
            .header-wrapper {
                padding: 13px 52px;
            }

            .header-wrapper.scrolled {
                padding: 10px 52px;
            }

            .header h1 {
                font-size: 18px;
            }

            /* group-header sticky top matches mobile header-wrapper height */
            .group-header {
                top: 48px;
            }

            body.header-scrolled .group-header {
                top: 38px;
            }
        }

        @media (max-width: 480px) {
            .logo {
                font-size: 18px;
                margin-bottom: 20px;
            }

            .nav-item {
                padding: 6px 8px;
                font-size: 13px;
            }

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


            .task-actions {
                flex-direction: column;
                gap: 8px;
            }

            .btn {
                width: 100%;
            }

            .modal-content {
                width: 95%;
                max-width: none;
                max-height: 90vh;
            }

            .labels-list-view {
                margin-top: 4px;
            }
        }

        @media (max-width: 768px) {
            .calendar-view {
                padding-left: 8px;
                padding-right: 8px;
            }

            .calendar-grid {
                height: calc(100svh - 160px);
                min-height: 320px;
            }

            .calendar-day-header {
                font-size: 9px;
                padding: 4px 2px;
            }

            .calendar-day-num {
                font-size: 10px;
                width: 18px;
                height: 18px;
            }

            .calendar-task-pill {
                font-size: 9px;
                padding: 1px 3px;
            }
        }

        /* ── Mobile bottom nav ── */
        @media (max-width: 768px) {
            /* Show the nav bar */
            .mobile-bottom-nav {
                display: flex;
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                height: 56px;
                background: #fff;
                border-top: 1px solid #e8e8e8;
                z-index: 3150;
                align-items: stretch;
            }

            .mobile-nav-btn {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2px;
                background: none;
                border: none;
                font-size: 10px;
                color: #888;
                cursor: pointer;
                padding: 6px 4px;
                transition: color 0.15s;
            }

            .mobile-nav-btn.active {
                color: #4f46e5;
            }

            .mobile-nav-btn svg {
                flex-shrink: 0;
            }

            /* Inbox/Today/Upcoming sidebar items hidden on mobile — use bottom nav */
            .nav-item[data-view="inbox"],
            .nav-item[data-view="today"],
            .nav-item[data-view="upcoming"] {
                display: none;
            }

            /* Reserve space so content doesn't hide under bottom nav */
            .main-content {
                padding-bottom: 76px !important;
            }
        }

        /* ── Mobile board: snap + dots ── */
        @media (max-width: 768px) {
            /* Board snapping */
            .board-view {
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch;
                cursor: default;
            }

            .board-view.grabbing {
                cursor: default;
            }

            .board-column {
                flex: 0 0 calc(100vw - 48px);
                scroll-snap-align: start;
                max-height: 100%;
            }

            /* Dots indicator */
            .board-dots-container {
                display: flex;
                justify-content: center;
                gap: 6px;
                padding: 8px 0 4px;
            }

            .board-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #ccc;
                cursor: pointer;
                transition: background 0.2s;
            }

            .board-dot.active {
                background: #4f46e5;
            }
        }

/* ── Toast on mobile: sit above bottom nav ── */
@media (max-width: 768px) {
    #toast-container {
        bottom: 72px;
        left: 12px;
        right: 12px;
    }
    .toast {
        max-width: 100%;
    }

    /* Hover-only elements: always visible on touch devices */
    .nav-item-favorite,
    .nav-item-menu,
    .section-header-actions,
    .task-actions-icons,
    .task-delete,
    .label-item-actions,
    .subtask-delete,
    .label-row-btn {
        opacity: 0.5;
    }

    /* ── Gantt view ────────────────────────────────────────── */
    /* Shrink left panel to leave room for timeline */
    .gantt-left,
    .gantt-left-header {
        flex: 0 0 120px;
        min-width: 120px;
        max-width: 120px;
    }
    .gantt-row-label {
        max-width: 76px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    /* Hide assignee avatar to save space */
    .gantt-row-avatar { display: none; }

    /* Native touch scroll on timeline */
    .gantt-right {
        -webkit-overflow-scrolling: touch;
        cursor: default;
    }

    /* Compact toolbar buttons */
    .gantt-toolbar-btn,
    .gantt-zoom-btn {
        font-size: 11px;
        padding: 3px 7px;
    }

    /* Smaller bar labels */
    .gantt-bar-label {
        font-size: 10px;
        padding: 0 4px;
    }

    /* Show scroll progress indicator */
    .gantt-scroll-bar { display: block; }

    /* Tighten unscheduled section */
    .gantt-unscheduled {
        padding: 8px;
        font-size: 12px;
    }
    .gantt-unscheduled-item {
        font-size: 12px;
        padding: 3px 0;
    }
}