/* Unsectioned tasks drop zone */
        .unsectioned-drop-zone {
            min-height: 8px;
            border-radius: var(--radius-md);
            padding: 0 16px;
            margin: 0 -16px;
            overflow: visible;
        }

        /* Task row transitions for smooth reordering */
        /* Base task-row transition for smooth FLIP animations */
        .task-row {
            transition: transform var(--duration-slow) var(--ease-in-out), opacity var(--duration-normal) var(--ease-in-out);
            border-left: 3px solid var(--area-color, transparent);
            border-top-left-radius: var(--radius-sm);
            border-bottom-left-radius: var(--radius-sm);
        }

        /* Dropped task animation - subtle highlight pulse that works with FLIP */
        .task-row.just-dropped {
            animation: dropHighlight 0.5s var(--ease-in-out);
        }

        @keyframes dropHighlight {
            0% {
                background: var(--accent-blue-opacity-12);
                box-shadow: 0 0 0 1px var(--accent-blue-opacity-20);
            }
            100% {
                background: transparent;
                box-shadow: none;
            }
        }

        /* Premium settle animation for dropped task rows */
        .task-row-settling {
            animation: taskRowSettle var(--duration-slow) cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
            transition: none !important;
            opacity: 1 !important;
        }

        @keyframes taskRowSettle {
            0% {
                transform: scale(1.02) translateY(-2px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }
            50% {
                transform: scale(0.99) translateY(1px);
            }
            100% {
                transform: scale(1) translateY(0);
                box-shadow: none;
            }
        }

        /* Premium settle animation for timeline tasks */
        .timeline-task-settling {
            animation: timelineTaskSettle var(--duration-slow) cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
            transition: none !important;
            opacity: 1 !important;
        }

        @keyframes timelineTaskSettle {
            0% {
                transform: scale(1.02);
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
            }
            50% {
                transform: scale(0.98);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            }
        }

        /* Section header smooth transitions */
        .project-task-section-header {
            transition: transform var(--duration-slow) var(--ease-in-out), background var(--duration-normal) var(--ease-in-out), opacity var(--duration-normal) var(--ease-in-out);
        }

        .project-task-section-header.just-dropped {
            animation: dropHighlight 0.5s var(--ease-in-out);
        }

        /* Section container for FLIP animations */
        .project-task-section {
            transition: transform var(--duration-slow) var(--ease-in-out);
        }

        .project-task-section.flip-animate {
            transition: transform var(--duration-slow) var(--ease-in-out);
        }


        /* Drop zone styling when dragging */
        .section-tasks,
        .unsectioned-drop-zone {
            min-height: 20px;
        }

        /* Section heading content wrapper */
        .section-heading-content {
            display: flex;
            flex-direction: column;
            gap: var(--space-half);
            flex: 1;
            min-width: 0;
        }

        /* Section menu button (three dots) */
        .section-menu-btn {
            width: 24px;
            height: 24px;
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            opacity: 0;
            transition: all var(--transition-normal);
            flex-shrink: 0;
        }

        .project-task-section-header:hover .section-menu-btn {
            opacity: 1;
        }

        .section-menu-btn:hover {
            background: var(--accent-blue-light);
            color: var(--accent-blue);
        }

        .section-menu-btn svg {
            width: 16px;
            height: 16px;
        }

        /* Section actions container */
        .section-actions {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            margin-left: auto;
            flex-shrink: 0;
        }

        /* Section add task button */
        .section-add-task-btn {
            width: 24px;
            height: 24px;
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            opacity: 0;
            transition: all var(--transition-normal);
            flex-shrink: 0;
        }

        .project-task-section-header:hover .section-add-task-btn {
            opacity: 1;
        }

        .section-add-task-btn:hover {
            background: var(--accent-blue-light);
            color: var(--accent-blue);
        }

        .section-add-task-btn svg {
            width: 14px;
            height: 14px;
        }

        /* Inline task input row (section + button) */
        .inline-task-input-row {
            display: flex;
            align-items: center;
            padding: var(--space-2-5) var(--space-3);
            gap: var(--space-3);
            background: var(--bg-primary);
            border-radius: var(--radius-md);
            border: 1px dashed var(--border-medium);
            margin-bottom: var(--space-1);
            animation: fadeInUp var(--duration-normal) var(--ease-in-out);
        }

        .inline-task-title {
            flex: 1;
            font-family: var(--font-family);
            font-size: var(--font-size-base);
            color: var(--text-primary);
            outline: none;
            min-height: 20px;
        }

        .inline-task-title:empty::before {
            content: attr(data-placeholder);
            color: var(--text-tertiary);
            pointer-events: none;
        }

        /* Section description */
        .section-description {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            padding: 4px 0 0 0;
            line-height: 1.4;
        }

        .section-description.editing {
            outline: none;
            background: rgba(0, 0, 0, 0.02);
            border-radius: var(--radius-sm);
            padding: var(--space-1) var(--space-2);
            min-width: 200px;
        }

        .section-description.editing:empty::before {
            content: attr(data-placeholder);
            color: var(--text-tertiary);
            opacity: 0.6;
        }

        /* Section dropdown menu */
        .section-dropdown-menu {
            background: var(--bg-primary);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-2);
            padding: var(--space-1-5);
            min-width: 180px;
            z-index: calc(var(--z-layer-menu) + 1);
        }

        .section-menu-item {
            display: flex;
            align-items: center;
            gap: var(--space-2-5);
            width: 100%;
            padding: var(--space-2) var(--space-3);
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-primary);
            cursor: pointer;
            text-align: left;
            transition: background var(--transition-fast);
        }

        .section-menu-item:hover {
            background: rgba(0, 0, 0, 0.04);
        }

        .section-menu-item svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }

        .section-menu-item.danger {
            color: var(--color-red-text);
        }

        .section-menu-item.danger:hover {
            background: rgba(220, 53, 69, 0.08);
        }

        .section-menu-divider {
            height: 1px;
            background: var(--border-primary);
            margin: 6px 0;
        }

        /* Add Section button */
        .add-section-btn {
            display: flex;
            align-items: center;
            gap: var(--space-1-5);
            padding: 8px 0;
            margin-top: 12px;
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 400;
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .add-section-btn:hover {
            color: var(--accent-blue);
            background: var(--accent-blue-opacity-8);
        }

        .add-section-btn svg {
            width: 14px;
            height: 14px;
        }

        /* Completed Tasks Section (List View) */
        .completed-tasks-section {
            margin-top: 16px;
        }

        .completed-tasks-divider {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 4px;
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--text-tertiary);
            cursor: pointer;
            border-radius: var(--radius-sm);
            transition: background var(--transition-fast);
            user-select: none;
        }

        .completed-tasks-divider:hover {
            background: var(--bg-secondary);
            color: var(--text-secondary);
        }

        .completed-chevron {
            width: 14px;
            height: 14px;
            transition: transform var(--transition-fast);
        }

        .completed-section-collapsed .completed-chevron {
            transform: rotate(0deg);
        }

        .completed-tasks-section:not(.completed-section-collapsed) .completed-chevron,
        .board-completed-group:not(.completed-section-collapsed) .completed-chevron {
            transform: rotate(90deg);
        }

        .completed-section-collapsed .completed-tasks-group,
        .board-completed-group.completed-section-collapsed .completed-tasks-group {
            display: none;
        }

        .completed-task-row {
            opacity: 0.5;
        }

        .completed-task-row .task-title {
            text-decoration: line-through;
        }

        /* Board Completed Group */
        .board-completed-group {
            margin-top: 8px;
            border-top: 1px solid var(--border-light);
            padding-top: 8px;
        }

        .board-completed-group .completed-tasks-divider {
            padding: 4px 8px;
            font-size: var(--font-size-xs);
        }

        .board-completed-group .completed-tasks-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: 6px;
        }