/* Collapsed: hide the whole header (title + expand-all + toggle) so its
           controls never bleed past the 44px rail. The rail itself is the
           click-to-expand affordance. */
        .backlog-drawer.collapsed .backlog-drawer-header {
            display: none;
        }

        .backlog-drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-3) var(--space-4);
            border-bottom: 1px solid var(--border-light);
            height: 48px;
            box-sizing: border-box;
        }

        .backlog-drawer-title {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 600;
            color: var(--text-secondary);
            margin: 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            flex: 1;
        }

        .backlog-expand-all {
            background: none;
            border: none;
            padding: var(--space-1);
            cursor: pointer;
            color: var(--text-tertiary);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-sm);
            transition: all var(--transition-fast);
            margin-right: 4px;
        }

        .backlog-expand-all:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        .backlog-expand-all svg {
            width: 16px;
            height: 16px;
        }

        .backlog-drawer.collapsed .backlog-expand-all {
            display: none;
        }

        .backlog-drawer-toggle {
            background: none;
            border: none;
            padding: var(--space-1);
            cursor: pointer;
            color: var(--text-tertiary);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-sm);
            transition: all var(--transition-fast);
        }

        .backlog-drawer-toggle:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        .backlog-drawer-toggle:focus-visible {
            outline: var(--focus-outline);
            outline-offset: var(--focus-outline-offset);
        }

        .backlog-drawer-toggle svg {
            width: 16px;
            height: 16px;
        }

        .backlog-drawer.collapsed .backlog-drawer-toggle svg {
            transform: rotate(180deg);
        }

        .backlog-drawer-content {
            flex: 1;
            overflow-y: auto;
            padding: var(--space-3);
            transition: background var(--transition-fast);
        }

        .backlog-drawer-content.drag-over {
            background: var(--accent-blue-opacity-5);
        }

        .backlog-drawer.drop-target {
            background: var(--bg-hover);
            outline: 2px dashed var(--accent-blue);
            outline-offset: -2px;
        }

        .backlog-drawer.drop-target .backlog-drawer-content {
            pointer-events: none;
        }

        @media (prefers-reduced-motion: reduce) {
            .backlog-drawer { transition: none; }
            .backlog-drawer.anim-open .backlog-drawer-content { animation: none; }
        }

        /* Collapsed rail: a 44px vertical "BACKLOG" affordance + count badge. */
        .backlog-rail {
            display: none;
            flex: 1;                /* fill the full collapsed column so the WHOLE
                                       bar is the click target, not just the label */
            flex-direction: column;
            align-items: center;
            gap: var(--space-2);
            padding-top: var(--space-3);
            cursor: pointer;
        }
        .backlog-drawer.collapsed .backlog-rail { display: flex; }
        .backlog-rail-label {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            font-size: var(--font-size-12);
            letter-spacing: 0.08em;
            color: var(--text-secondary);
            text-transform: uppercase;
        }
        .backlog-rail-count {
            min-width: 20px;
            padding: 2px 6px;
            border-radius: var(--radius-lg);
            background: var(--accent-fill);
            color: #fff;
            font-size: var(--font-size-xs);
            text-align: center;
        }
        .backlog-section {
            margin-bottom: 20px;
        }

        .backlog-section.section-collapsed {
            margin-bottom: 4px;
        }

        .backlog-section.section-collapsed .backlog-section-header-collapsible {
            margin-bottom: 0;
        }

        /* Smooth height transitions for collapsible content */
        .backlog-section .backlog-tasks {
            max-height: 5000px;
            overflow: hidden;
            transition: max-height var(--duration-slow) var(--ease-in-out), opacity var(--duration-normal) var(--ease-in-out);
            opacity: 1;
        }

        .backlog-section.section-collapsed .backlog-tasks {
            max-height: 0;
            opacity: 0;
        }

        .backlog-section-header {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
            padding: 0;
        }

        .backlog-section-header-collapsible {
            display: flex;
            align-items: center;
            gap: var(--space-1-5);
            cursor: pointer;
            padding: var(--space-1-5) var(--space-1);
            margin: 0 -4px 8px -4px;
            border-radius: var(--radius-sm);
            transition: background var(--transition-fast);
        }

        .backlog-section-header-collapsible:hover {
            background: var(--bg-hover);
        }

        .backlog-section-arrow {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
            transition: transform var(--transition-normal);
        }

        .backlog-section.section-collapsed .backlog-section-arrow {
            transform: rotate(-90deg);
        }

        .backlog-section-title {
            flex: 1;
        }

        .backlog-section-count {
            font-size: var(--font-size-2xs);
            font-weight: 500;
            color: var(--text-tertiary);
            background: var(--bg-tertiary);
            padding: var(--space-half) var(--space-1-5);
            border-radius: var(--radius-md);
            min-width: 18px;
            text-align: center;
        }

        .backlog-section-groups {
            margin-left: 4px;
        }

        .backlog-task-item {
            background: var(--bg-primary);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-sm);
            padding: var(--space-2) var(--space-2-5);
            margin-bottom: 4px;
            cursor: grab;
            transition: all var(--transition-fast);
        }

        .backlog-task-item:hover {
            background: var(--bg-hover);
            border-color: var(--border-medium);
        }

        .backlog-task-item.dragging {
            opacity: 0.5;
            cursor: grabbing;
        }

        .backlog-task-title {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 4px;
            word-wrap: break-word;
            overflow-wrap: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .backlog-task-meta {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }

        .backlog-task-meta .overdue-text {
            color: var(--color-red-text);
            font-weight: 500;
        }

        .backlog-group-header {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: 8px 0;
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: background var(--transition-fast);
            border-radius: var(--radius-sm);
            margin: 0;
        }

        .backlog-group-header:hover {
            background: var(--bg-hover);
        }

        .backlog-group-arrow {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            transition: transform var(--transition-normal);
        }

        .backlog-group.collapsed .backlog-group-arrow {
            transform: rotate(-90deg);
        }

        .backlog-group-header .area-icon {
            width: 20px;
            height: 20px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .backlog-group-header .area-icon svg {
            color: white;
        }

        .backlog-group-name {
            flex: 1;
        }

        .backlog-group-count {
            font-weight: normal;
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            min-width: 18px;
            text-align: right;
            margin-right: var(--space-1);
        }

        .backlog-group-tasks {
            padding-left: 0;
        }

        .today-view * {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .today-view *::-webkit-scrollbar {
            display: none;
        }

        .today-tasks {
            flex: 1;
            overflow-y: auto;
            position: relative;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE/Edge */
        }

        .today-tasks::-webkit-scrollbar {
            display: none; /* Chrome/Safari/Opera */
        }


        .today-tasks.drag-over {
            background: var(--accent-blue-opacity-3);
        }

        /* Pointer-based drag system (for Tauri WebKit compatibility) */
        .pointer-drop-highlight {
            outline: none !important;
            background: var(--accent-blue-opacity-3) !important;
            box-shadow: inset 0 0 0 2px var(--accent-blue-opacity-20) !important;
            border-radius: var(--radius-md) !important;
        }

        .pointer-drag-source {
            cursor: grabbing !important;
        }

        .pointer-drag-preview {
            cursor: grabbing;
            font-weight: 500;
            color: var(--text-primary);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .pointer-drag-preview .preview-title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 200px;
            display: block;
        }

        .task-row.dragging {
            opacity: 0.4;
            transform: scale(0.98);
            transition: opacity var(--duration-fast) var(--ease-in-out), transform var(--duration-fast) var(--ease-in-out);
        }

        .backlog-task-item.dragging {
            opacity: 0.4;
            transform: scale(0.98);
        }

        .today-tasks-header {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            border-bottom: 1px solid var(--border-light);
            margin-bottom: var(--space-2);
            height: 48px;
            box-sizing: border-box;
            padding: 0 var(--space-4);
        }

        .today-tasks-header .new-task-row {
            flex: 1;
            border-bottom: none;
            margin-bottom: 0;
            padding-left: 18px !important; /* Match card left padding */
        }

        .today-tasks-header .sort-dropdown-container {
            flex-shrink: 0;
        }