/* ============================================================================
   INBOX CARD ROWS + ACTIVITY PANEL
   ============================================================================ */

/* Main column — holds top bar + scrollable canvas */
.inbox-main-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---- Card-style task rows ---- */
/* Scoped to inbox, today, and area views — project view excluded */

/* Grey background on scrollable task containers */
.inbox-main-canvas,
.today-tasks,
.area-tasks-container,
.project-tasks-container {
    background: var(--bg-secondary);
}

/* Task list spacing */
.inbox-view .task-list,
.today-view .task-list,
.area-view .task-list,
.tasks-view .task-list {
    padding: var(--space-2) var(--space-4);
    gap: var(--space-2);
}

/* Card task rows */
.inbox-view .task-row,
.today-view .task-row,
.area-view .task-row,
.tasks-view .task-row,
.project-modal-main .task-row,
.area-modal-main .task-row {
    background: var(--bg-card);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-left: 3px solid var(--area-color, rgba(0, 0, 0, 0.04));
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-4); /* 46px a row: 8px + the 28px quick actions + 8px + border (was 62px) */
    align-items: center;
    box-shadow: var(--shadow-1);
}

/* Card hover transition — exclude rows mid-animation so animation classes own the transition */
.inbox-view .task-row:not(.task-entering):not(.task-animate):not(.collapsing):not(.collapsed),
.today-view .task-row:not(.task-entering):not(.task-animate):not(.collapsing):not(.collapsed),
.area-view .task-row:not(.task-entering):not(.task-animate):not(.collapsing):not(.collapsed),
.tasks-view .task-row:not(.task-entering):not(.task-animate):not(.collapsing):not(.collapsed),
.project-modal-main .task-row:not(.task-entering):not(.task-animate):not(.collapsing):not(.collapsed),
.area-modal-main .task-row:not(.task-entering):not(.task-animate):not(.collapsing):not(.collapsed) {
    transition: box-shadow var(--duration-normal) var(--ease-in-out),
                transform var(--duration-normal) var(--ease-in-out),
                border-color var(--duration-normal) var(--ease-in-out),
                background var(--duration-fast) var(--ease-in-out);
}

.inbox-view .task-row:hover,
.today-view .task-row:hover,
.area-view .task-row:hover,
.tasks-view .task-row:hover,
.project-modal-main .task-row:hover,
.area-modal-main .task-row:hover {
    background: var(--bg-card);
    border-color: #4A90D9;
    border-left-color: var(--area-color, #4A90D9); /* preserve Area edge on hover */
    box-shadow: var(--shadow-2);
    transform: translateY(-1px) scale(1.002);
}

/* New task input — dashed border card */
/* Exclude .today-tasks-header .new-task-row — it lives inline with sort controls */
.inbox-view .new-task-row,
.today-view .new-task-row:not(.today-tasks-header .new-task-row),
.area-view .new-task-row,
.tasks-view .new-task-row,
.project-modal-main .new-task-row,
.area-modal-main .new-task-row {
    background: var(--bg-card);
    border: 1.5px dashed rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-4); /* matches the task cards */
    border-bottom: none;
    transition: border-color var(--duration-normal) var(--ease-in-out),
                box-shadow var(--duration-normal) var(--ease-in-out),
                border-style var(--duration-fast) var(--ease-in-out);
}

.inbox-view .new-task-row:focus-within,
.today-view .new-task-row:not(.today-tasks-header .new-task-row):focus-within,
.area-view .new-task-row:focus-within,
.tasks-view .new-task-row:focus-within,
.project-modal-main .new-task-row:focus-within,
.area-modal-main .new-task-row:focus-within {
    border-style: solid;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.1);
    opacity: 1;
}

/* Flatten task-content: title, chips, actions on one row */
.inbox-view .task-content,
.today-view .task-content,
.area-view .task-content,
.tasks-view .task-content,
.project-modal-main .task-content,
.area-modal-main .task-content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-2); /* 8px row gap gives breathing room when chips wrap below title */
}

/* Chips row: wrap below title when space is tight.
   flex-shrink:0 prevents squishing; flex-basis:240px sets the wrap trigger. */
.inbox-view .task-metadata,
.today-view .task-metadata,
.area-view .task-metadata,
.tasks-view .task-metadata {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 0 240px;
    gap: var(--space-2) var(--space-2);
}

/* When >2 chips, force metadata below the title instead of inline */
.inbox-view .task-content.chips-below .task-metadata,
.today-view .task-content.chips-below .task-metadata,
.area-view .task-content.chips-below .task-metadata,
.tasks-view .task-content.chips-below .task-metadata,
.project-modal-main .task-content.chips-below .task-metadata,
.area-modal-main .task-content.chips-below .task-metadata {
    flex: 0 0 100%;
}

/* Project modal is narrower — use a smaller wrap threshold */
.project-modal-main .task-metadata,
.area-modal-main .task-metadata {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 0 160px;
    gap: var(--space-2) var(--space-2);
}

.inbox-view .task-quick-actions,
.today-view .task-quick-actions,
.area-view .task-quick-actions,
.tasks-view .task-quick-actions,
.project-modal-main .task-quick-actions,
.area-modal-main .task-quick-actions {
    margin-left: auto;
}

.inbox-view .task-row .checkbox-wrapper,
.today-view .task-row .checkbox-wrapper,
.area-view .task-row .checkbox-wrapper,
.tasks-view .task-row .checkbox-wrapper,
.project-modal-main .task-row .checkbox-wrapper,
.area-modal-main .task-row .checkbox-wrapper {
    align-self: center;
}

/* Area page tasks — the same card rows as a project's, spaced the same */
.area-modal-main .area-tasks-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
}

/* Project tasks container — horizontal padding for card rows */
.project-modal-main .project-tasks-container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    scrollbar-width: none; /* Firefox */
}

.project-modal-main .project-tasks-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Project section tasks — reset negative margin, add gap between card rows */
.project-modal-main .section-tasks {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    margin: 0;
}

.project-modal-main .unsectioned-drop-zone {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0;
    margin: 0;
}