/* Archive task uncomplete animation */
        .archive-task-row.uncompleting {
            opacity: 0.6;
        }

        .archive-task-row.uncompleting .archive-checkbox {
            background: transparent;
            border-color: var(--border-medium);
        }

        .archive-task-row.uncompleting .archive-checkbox svg {
            opacity: 0;
        }

        .archive-task-row.uncompleted {
            animation: taskComplete var(--duration-slow) var(--ease-in-out) forwards;
        }

        .archive-task-row.collapsing {
            transition: height var(--duration-slow) var(--ease-in-out),
                        padding var(--duration-slow) var(--ease-in-out),
                        margin var(--duration-slow) var(--ease-in-out),
                        opacity var(--duration-fast) var(--ease-in-out);
            overflow: hidden;
            pointer-events: none;
            opacity: 0;
        }

        .archive-task-row.collapsed {
            height: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin: 0 !important;
        }

        /* Flat Table Header */
        .tasks-table-header {
            display: grid;
            grid-template-columns: 32px 1fr 104px 160px 120px 100px;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            border-bottom: 1px solid var(--border-light);
            margin-bottom: 4px;
        }

        .tasks-table-header span {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-tertiary);
            letter-spacing: 0.5px;
        }

        .tasks-table-header span:first-child {
            /* Checkbox column - no label */
        }

        /* Flat Task Row */
        .flat-task-row {
            display: grid;
            grid-template-columns: 32px 1fr 104px 160px 120px 100px;
            gap: var(--space-2);
            padding: 12px 16px;
            align-items: center;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .flat-task-row:hover {
            background: var(--accent-blue-light);
        }

        .flat-task-row .task-title {
            font-family: var(--font-family);
            font-size: var(--font-size-base);
            font-weight: 500;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .flat-task-row .task-project,
        .flat-task-row .task-area,
        .flat-task-row .task-when {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .flat-task-row .task-project:hover,
        .flat-task-row .task-area:hover {
            color: var(--accent-blue);
            text-decoration: underline;
        }

        .flat-task-row .task-unassigned {
            color: var(--text-tertiary);
        }

        .flat-task-row.someday {
            opacity: 0.6;
        }

        .flat-task-row.someday:hover {
            opacity: 0.8;
        }

        .flat-task-row .flat-quick-actions {
            display: flex;
            gap: var(--space-half);
            opacity: 0;
            transition: opacity var(--transition-fast);
            min-width: 104px;
        }

        .flat-task-row:hover .flat-quick-actions {
            opacity: 1;
        }

        /* Flat Project Row */
        .flat-project-row {
            display: grid;
            grid-template-columns: 36px 1fr 140px 80px 100px;
            gap: var(--space-2);
            padding: var(--space-3);
            align-items: center;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .flat-project-row:hover {
            background: var(--accent-blue-light);
        }

        .flat-project-icon {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-sm);
            background: linear-gradient(135deg, var(--accent-fill) 0%, var(--accent-fill-hover) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .flat-project-icon svg {
            width: 16px;
            height: 16px;
        }

        .flat-project-name {
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            font-weight: 500;
            color: var(--text-primary);
        }

        .flat-project-area {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
        }

        .flat-project-area:hover {
            color: var(--accent-blue);
            text-decoration: underline;
        }

        .flat-project-progress {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
        }

        .flat-project-deadline {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
        }

        /* Flat Area Row */
        .flat-area-row {
            display: grid;
            grid-template-columns: 36px 1fr 120px 100px;
            gap: var(--space-2);
            padding: var(--space-3);
            align-items: center;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .flat-area-row:hover {
            background: var(--accent-blue-light);
        }

        .flat-area-icon {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-16);
        }

        .flat-area-name {
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            font-weight: 500;
            color: var(--text-primary);
        }

        .flat-area-projects,
        .flat-area-tasks {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
        }

        /* Projects Table Header */
        .projects-table-header {
            display: grid;
            grid-template-columns: 36px 1fr 140px 80px 100px;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            border-bottom: 1px solid var(--border-light);
            margin-bottom: 4px;
        }

        .projects-table-header span {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-tertiary);
            letter-spacing: 0.5px;
        }


        /* Add New Row */
        .add-new-row {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-3);
            margin-top: 8px;
            border: 1px dashed var(--border-medium);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            color: var(--text-tertiary);
            font-family: var(--font-family);
            font-size: var(--font-size-14);
        }

        .add-new-row:hover {
            border-color: var(--accent-blue);
            color: var(--accent-blue);
            background: var(--accent-blue-light);
        }

        .add-new-row svg {
            width: 16px;
            height: 16px;
        }

        /* Inline Project/Area creation row in table format */
        .inline-add-project-row,
        .inline-add-area-row {
            display: grid;
            align-items: center;
            padding: var(--space-2-5) var(--space-3);
            margin-bottom: 4px;
            border-bottom: 1px solid var(--border-light);
            background: transparent;
            gap: var(--space-3);
            opacity: 0.6;
            transition: opacity var(--transition-fast);
        }

        .inline-add-project-row:hover,
        .inline-add-area-row:hover,
        .inline-add-project-row:focus-within,
        .inline-add-area-row:focus-within {
            opacity: 1;
        }

        .inline-add-project-row {
            grid-template-columns: 32px 1fr auto;
        }

        .inline-add-area-row {
            grid-template-columns: 32px 1fr auto;
        }

        .inline-add-icon {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-sm);
            color: var(--text-tertiary);
        }

        .inline-add-project-row .inline-add-icon svg {
            width: 18px;
            height: 18px;
        }

        .inline-add-area-row .inline-add-icon {
            background: #F5F5F5;
            color: var(--text-tertiary);
        }

        .inline-add-area-row .inline-add-icon svg {
            width: 16px;
            height: 16px;
        }

        .inline-add-input {
            border: none;
            outline: none;
            background: transparent;
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            color: var(--text-primary);
            width: 100%;
        }

        .inline-add-input::placeholder {
            color: var(--text-tertiary);
        }

        .inline-add-hint {
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
            text-align: right;
        }

        /* Active Filter Badge */
        .active-filter-badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1-5);
            padding: var(--space-1) var(--space-2-5);
            background: var(--accent-blue-light);
            color: var(--accent-blue);
            border-radius: var(--radius-sm);
            font-family: var(--font-family);
            font-size: var(--font-size-12);
            font-weight: 500;
            margin-left: 12px;
        }

        .active-filter-badge button {
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            color: var(--accent-blue);
            display: flex;
            align-items: center;
        }

        .active-filter-badge button:hover {
            color: var(--text-primary);
        }

        .active-filter-badge svg {
            width: 14px;
            height: 14px;
        }

        /* Project Modal - matches task modal */
        .project-modal {
            display: none;
            position: fixed;
            background: var(--bg-card);
            z-index: calc(var(--z-layer-raised) + 1);
            flex-direction: column;
            overflow: hidden;
        }

        .project-modal.visible {
            opacity: 1;
            pointer-events: auto;
            transform: translate(-50%, -50%) scale(1);
        }

        .project-modal.fullscreen {
            left: 68px;
            right: 0;
            top: 0;
            height: 100vh;
            max-height: 100vh;
            border-radius: 0;
            transform: none;
        }

        .project-modal.fullscreen.visible {
            transform: none;
        }

        /* Expanded mode - shows projects column on left */
        /* Position: 68px sidebar + 220px projects panel = 288px */
        .project-modal.expanded {
            left: 288px;
            right: 0;
            top: 0;
            height: 100vh;
            max-height: 100vh;
            max-width: none;
            border-radius: 0;
            transform: none;
            box-shadow: none;
            border: none;
            border-left: 1px solid var(--border-light);
            transition: left var(--duration-normal) var(--ease-in-out),
                        opacity var(--transition-smooth);
        }

        .project-modal.expanded.visible {
            transform: none;
        }