/* ========================================
           UNIFIED TIMELINE ITEM COMPONENT SYSTEM
           Base structure for timeline tasks and events
           with consistent padding, sizing, and typography
           ======================================== */

        /* Base timeline item (used by both tasks and events) */
        .timeline-item-base {
            position: absolute;
            left: 4px;
            right: 4px;
            border-radius: var(--radius-sm);
            padding: var(--space-half) var(--space-1-5);
            font-size: var(--font-size-xs);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 1px;
            transition: all var(--transition-fast);
        }

        /* Timeline item time label */
        .timeline-item-time {
            font-size: var(--font-size-2xs);
            font-weight: 600;
        }

        /* Timeline item title */
        .timeline-item-title {
            font-size: var(--font-size-xs);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Timeline task variant (interactive, white background) */
        .timeline-item.interactive {
            background: white;
            border: 1px solid var(--border-medium);
            border-left: 3px solid var(--accent-blue);
            cursor: pointer;
            box-shadow: var(--shadow-sm);
            z-index: 2;
        }

        .timeline-item.interactive:hover {
            box-shadow: var(--shadow-md);
        }

        .timeline-item.interactive .timeline-item-time {
            color: var(--accent-blue);
        }

        /* Timeline event variant (display-only, colored background) */
        .timeline-item.display-only {
            background: var(--accent-blue-focus);
            border-left: 3px solid var(--accent-blue);
            z-index: 1;
        }

        .timeline-item.display-only .timeline-item-time {
            opacity: 0.7;
        }

        /* Dragging state */
        .timeline-item.dragging {
            opacity: 0.5;
        }

        .timeline-item.dragging .timeline-item-time {
            opacity: 0;
        }

        /* Week view timeline items (compact variant) */
        .timeline-item.week-view {
            padding: var(--space-1-5) var(--space-2);
            box-shadow: var(--shadow-1);
        }

        .timeline-item.week-view:hover {
            border-color: #D0D5DD;
            box-shadow: var(--shadow-1);
            z-index: 10;
        }

        /* Color variants for calendar events */
        .timeline-item.calendar-blue { border-left-color: #007AFF; background: rgba(0, 122, 255, 0.15); }
        .timeline-item.calendar-purple { border-left-color: #AF52DE; background: rgba(175, 82, 222, 0.15); }
        .timeline-item.calendar-green { border-left-color: #34C759; background: rgba(52, 199, 89, 0.15); }
        .timeline-item.calendar-red { border-left-color: #FF3B30; background: rgba(255, 59, 48, 0.15); }
        .timeline-item.calendar-orange { border-left-color: #FF9500; background: rgba(255, 149, 0, 0.15); }
        .timeline-item.calendar-yellow { border-left-color: #FFCC00; background: rgba(255, 204, 0, 0.15); }

        .task-title {
            font-family: var(--font-family);
            font-size: var(--font-size-base);
            font-weight: 500;
            color: var(--text-primary);
            display: inline-flex;
            align-items: center;
            gap: var(--space-1-5);
            max-width: 100%;
            min-width: 0;
            line-height: 20px; /* Match checkbox height for vertical alignment */
        }

        .task-title-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0;
            flex-shrink: 1;
        }

        .task-note-icon {
            width: 14px;
            height: 14px;
            color: var(--text-tertiary);
            flex-shrink: 0;
            opacity: 0.6;
            margin-left: 6px;
        }

        /* Priority Badge */
        .task-priority-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-2xs);
            font-weight: 700;
            padding: 2px 5px;
            border-radius: var(--radius-sm);
            text-transform: uppercase;
            letter-spacing: 0.3px;
            flex-shrink: 0;
        }

        .priority-p1,
        .badge.priority-p1 {
            background: transparent;
            color: var(--badge-priority-p1);
        }

        .priority-p2,
        .badge.priority-p2 {
            background: transparent;
            color: var(--badge-priority-p2);
        }

        .week-timeline-title .task-priority-badge,
        .task-right-col .task-priority-badge {
            font-size: var(--font-size-2xs);
            padding: 1px 4px;
            margin-left: 4px;
            align-self: center;
        }

        .priority-p3,
        .badge.priority-p3 {
            background: transparent;
            color: var(--badge-priority-p3);
        }

        /* Task Actions Area - Always visible, contains both meta and quick actions */
        .task-actions-area {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin-left: auto;
        }

        /* Task Meta (visible when set) */
        .task-meta {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        .task-meta-item {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            font-size: var(--font-size-12);
            color: var(--text-tertiary);
            padding: var(--space-half) var(--space-1-5);
            border-radius: var(--radius-sm);
            background: rgba(0, 0, 0, 0.04);
        }

        .task-meta-item svg {
            width: 12px;
            height: 12px;
        }

        .task-meta-item.tag {
            background: var(--accent-blue-opacity-10);
            color: var(--accent-blue);
        }

        .task-meta-item.deadline {
            background: rgba(255, 149, 0, 0.1);
            color: var(--color-amber-text);
        }

        .task-meta-item.repeat {
            background: rgba(88, 86, 214, 0.1);
            color: #5856D6;
        }

        /* Quick Actions - Only visible on hover */
        .quick-actions {
            display: flex;
            align-items: center;
            gap: 2px;
            opacity: 0;
            transition: opacity var(--transition-fast);
        }

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

        .quick-action-btn {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            color: var(--text-tertiary);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
            position: relative;
        }

        .quick-action-btn:hover {
            background: rgba(0, 0, 0, 0.05);
            color: var(--text-secondary);
        }

        .quick-action-btn.has-value {
            color: var(--accent-blue);
            background: var(--accent-blue-opacity-12);
        }

        .quick-action-btn.has-value:hover {
            background: var(--accent-blue-opacity-20);
            color: var(--accent-blue);
        }

        .quick-action-btn.has-value svg {
            stroke-width: 2;
        }

        .quick-action-btn svg {
            width: 18px;
            height: 18px;
        }

        /* Hide less common quick actions to reduce clutter */
        /* Keep only: Schedule, Project, Priority visible */
        /* Hide: Duration, Deadline, Tags, Repeat, Area */
        .quick-action-btn[data-action="duration"],
        .quick-action-btn[data-action="deadline"],
        .quick-action-btn[data-action="tags"],
        .quick-action-btn[data-action="repeat"],
        .quick-action-btn[data-action="area"] {
            display: none;
        }

        /* Show hidden actions when task row is focused or being edited */
        .task-row.expanded .quick-action-btn[data-action="duration"],
        .task-row.expanded .quick-action-btn[data-action="deadline"],
        .task-row.expanded .quick-action-btn[data-action="tags"],
        .task-row.expanded .quick-action-btn[data-action="repeat"],
        .task-row.expanded .quick-action-btn[data-action="area"] {
            display: flex;
        }

        /* Quick actions: flex sibling of .task-content in .task-row.
         * Always in layout (visibility:hidden) so they reserve space and
         * chips/title never extend into the button zone. No size jump on hover. */
        .task-quick-actions {
            display: inline-flex;
            visibility: hidden;
            opacity: 0;
            pointer-events: none;
            align-items: center;
            gap: var(--space-half);
            flex-shrink: 0;
            align-self: center;
            border-radius: var(--radius-sm);
            transition: opacity 0.15s ease, visibility 0.15s linear;
        }

        .task-row:hover .task-quick-actions,
        .task-row.dropdown-active .task-quick-actions {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
        }


        /* Dropdown Menu */
        .dropdown {
            position: fixed;
            background: var(--bg-card);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-medium);
            box-shadow: var(--shadow-lg);
            padding: var(--space-1-5);
            min-width: 180px;
            z-index: var(--z-sticky);
            opacity: 0;
            transform: translateY(-8px);
            pointer-events: none;
            transition: all var(--transition-fast);
        }

        .dropdown.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            gap: var(--space-2-5);
            padding: var(--space-2-5) var(--space-3);
            border-radius: var(--radius-sm);
            font-size: var(--font-size-14);
            color: var(--text-primary);
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .dropdown-item:hover {
            background: var(--accent-blue-light);
        }

        .dropdown-item svg {
            width: 16px;
            height: 16px;
            color: var(--text-secondary);
        }

        .dropdown-divider {
            height: 1px;
            background: var(--border-light);
            margin: 6px 0;
        }

        /* Modal Overlay */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: var(--modal-overlay-bg);
            z-index: var(--z-layer-raised);
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--transition-smooth);
        }

        .modal-overlay.visible {
            opacity: 1;
            pointer-events: auto;
        }

        /* Task Modal */
        .task-modal {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.95);
            /* Match the event modal's centred size for consistency across all
             * centred modals (event/note-minimised are 884px wide). */
            width: 884px;
            min-height: 580px;
            max-height: 85vh;
            overflow: hidden;
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-medium);
            box-shadow: var(--shadow-2xl);
            z-index: calc(var(--z-layer-menu) + 3);
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--duration-normal) var(--ease-in-out), transform var(--duration-normal) var(--ease-in-out);
            display: flex;
            flex-direction: column;
        }

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

        .task-modal.fullscreen {
            width: calc(100vw - 68px);
            height: 100vh;
            max-height: 100vh;
            border-radius: 0;
            left: 68px;
            top: 0;
            transition: opacity var(--transition-smooth);
        }

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

        /* Modal Header */
        .modal-header {
            display: flex;
            align-items: flex-start;
            padding: var(--space-7) var(--space-7) var(--space-5);
            gap: var(--space-4);
            border-bottom: 1px solid var(--border-light);
        }

        .modal-header-actions {
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }