/* ============================================
           TASK RESIZE HANDLE
           ============================================ */

        /* Resize handle - positioned at bottom of task cards */
        .task-resize-handle {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 16px;
            cursor: row-resize !important;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity var(--transition-fast);
            z-index: 10;
        }

        /* Ensure resize cursor shows for task resize handles in all contexts */
        .calendar-event .task-resize-handle,
        .week-timeline-task .task-resize-handle,
        .event-card .task-resize-handle {
            cursor: row-resize !important;
        }

        /* Show resize handle on hover */
        .calendar-event:hover .task-resize-handle,
        .week-timeline-task:hover .task-resize-handle,
        .task-resize-handle:hover {
            opacity: 1;
        }

        /* Visual indicator bar */
        .resize-handle-bar {
            width: 32px;
            height: 3px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: var(--radius-sm);
            transition: background var(--transition-fast), width var(--duration-fast) var(--ease-in-out);
        }

        .task-resize-handle:hover .resize-handle-bar {
            background: var(--accent-blue);
            width: 40px;
        }

        /* Active resize state - applied to card during resize */
        .calendar-event.resizing,
        .week-timeline-task.resizing {
            z-index: var(--z-layer-raised);
            box-shadow: var(--shadow-2);
        }

        .calendar-event.resizing .event-card {
            border-color: var(--accent-blue);
        }

        .week-timeline-task.resizing {
            border-color: var(--accent-blue);
        }

        /* Duration preview tooltip during resize */
        .resize-duration-preview {
            position: fixed;
            background: rgba(53, 122, 189, 0.12);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(53, 122, 189, 0.3);
            border-radius: var(--radius-sm);
            padding: var(--space-1) var(--space-2);
            font-size: var(--font-size-12);
            font-weight: 600;
            color: var(--accent-blue);
            box-shadow: var(--shadow-2);
            pointer-events: none;
            z-index: calc(var(--z-layer-top) - 1);
            white-space: nowrap;
        }

        .resize-duration-preview.conflict {
            border-color: rgba(239, 68, 68, 0.5);
            background: rgba(239, 68, 68, 0.15);
            color: var(--color-red-text);
        }

        /* Prevent text selection during resize */
        body.is-resizing {
            user-select: none;
            cursor: row-resize !important;
        }

        body.is-resizing * {
            cursor: row-resize !important;
        }

        /* Force resize cursor when hovering over resize handle (WebKit/Tauri fix) */
        body.resize-cursor-active,
        body.resize-cursor-active * {
            cursor: row-resize !important;
        }

        /* Calendar Timeline - Time-based absolute positioning */
        .calendar-timeline {
            position: relative;
            width: 100%;
            /* Height must cover full 24-hour grid (24 * 70px = 1680px) for clicks to register */
            min-height: 1680px;
            height: auto;
            padding: 0 0 40px 0;
            margin: 0;
            background: transparent;
            z-index: 1; /* Below timeline-header (z-index: 10) so header stays on top when scrolling */
        }

        /* Timeline Event Preview Highlight - shown when create modal is open */
        .timeline-event-preview {
            position: absolute;
            left: 80px;
            right: 12px;
            background: rgba(66, 133, 244, 0.15);
            border: 2px dashed var(--accent-blue);
            border-radius: var(--radius-md);
            pointer-events: none;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent-blue);
            font-size: var(--font-size-sm);
            font-weight: 500;
            opacity: 0;
            transition: opacity var(--duration-normal) var(--ease-in-out);
        }

        .timeline-event-preview.visible {
            opacity: 1;
        }

        /* Week view timeline preview */
        .week-day-timeline .timeline-event-preview {
            left: 4px;
            right: 4px;
        }

        /* Current Time Marker */
        .current-time-marker {
            position: absolute;
            left: 44px; /* Align with event content, past hour labels */
            right: 8px;
            height: 0;
            display: flex;
            align-items: center;
            pointer-events: none;
            z-index: 10;
        }

        .current-time-marker-dot {
            width: 8px;
            height: 8px;
            border-radius: var(--radius-circle);
            background-color: var(--color-red);
            flex-shrink: 0;
            margin-left: -4px; /* Center dot on left edge */
        }

        .current-time-marker-line {
            flex: 1;
            height: 1.5px;
            background-color: var(--color-red);
        }

        /* Week view current time marker */
        .week-day-timeline .current-time-marker {
            left: 0;
            right: 0;
        }

        .week-day-timeline .current-time-marker-dot {
            margin-left: 0;
        }

        /* Calendar Timeline Grid */
        .calendar-timeline-grid {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            pointer-events: none;
        }

        .calendar-hour-row {
            position: relative;
            border-top: 1px solid var(--border-light);
            box-sizing: border-box;
            flex-shrink: 0;
        }

        .calendar-hour-row:last-child {
            border-bottom: 1px solid var(--border-light);
        }

        .calendar-hour-label {
            position: absolute;
            top: 2px;
            left: 0;
            width: 36px;
            text-align: right;
            font-family: var(--font-family);
            font-size: var(--font-size-2xs);
            color: var(--text-tertiary);
            z-index: 0;
            pointer-events: none;
        }

        .calendar-event {
            position: absolute;
            left: 44px;
            right: 8px;
            cursor: grab;
            transition: transform var(--transition-fast);
            box-sizing: border-box;
            z-index: 2;
            overflow: hidden;
        }

        .calendar-event:active {
            cursor: grabbing;
        }

        .calendar-event:hover {
            /* No transform to prevent blurry text - card shadow handles the hover effect */
        }

        .event-card {
            position: relative;
            width: 100%;
            height: 100%;
            min-width: 0;
            background: #FFFFFF;
            border-radius: var(--radius-sm);
            border: 1px solid #E5E5E5;
            border-left: 3px solid var(--calendar-color, var(--accent-blue));
            border-top-left-radius: var(--radius-sm);
            border-bottom-left-radius: var(--radius-sm);
            padding: 4px 10px 5px 10px;
            box-shadow: var(--shadow-1);
            min-height: 32px;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            overflow: hidden;
        }

        /* Minimal padding on overlapping event cards for maximum content width */
        .calendar-event.overlapping .event-card {
            padding-left: 4px;
            padding-right: 3px;
        }

        .calendar-event.overlapping .event-card > .event-duration {
            right: 3px;
            font-size: var(--font-size-xs);
        }

        .calendar-event.overlapping .event-card:not(.is-task) > .event-content {
            padding-right: 26px;
        }

        /* Duration - top right for all cards */
        .event-card > .event-duration {
            position: absolute;
            top: 6px;
            right: 10px;
        }

        /* Content area avoids duration */
        .event-card:not(.is-task) > .event-content {
            padding-right: 40px;
        }

        .event-content {
            flex: 1;
            min-width: 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 2px;
            text-align: left;
        }

        .event-details {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            width: 100%;
            justify-content: space-between;
            flex-shrink: 0;
        }

        .event-time-inline {
            font-family: var(--font-family);
            font-size: var(--font-size-12);
            font-weight: 500;
            color: var(--text-secondary);
        }

        .event-icons {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: var(--space-1-5);
        }

        .event-icons svg {
            width: 14px;
            height: 14px;
            vertical-align: middle;
        }

        .event-icons .event-meeting-type svg {
            width: 14px;
            height: 14px;
        }

        .apple-calendar-badge {
            display: inline-block;
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0.6;
        }

        .status-connected {
            color: var(--color-green-text);
            font-weight: 600;
            font-size: var(--font-size-sm);
        }

        .status-warning {
            color: var(--color-amber-text); /* 5.0:1 on white — the amber text shade (Phase 9) */
            font-weight: 600;
            font-size: var(--font-size-sm);
        }

        /* One step deeper on the red ramp than the brand error, for the HOVER
           state — which is the only one of these two that paints.

           On .btn-secondary.btn-danger-text (Settings' Disconnect), the rest
           rule below loses: .btn-secondary sets `color: var(--text-primary)` at
           equal specificity and later in this file (:8738), so at rest the label
           is the ordinary dark text, not red. On hover, .btn-danger-text:hover
           is (0,2,0) and outranks it, so the red does paint — over #F5F5F5,
           because .btn-secondary:hover's background wins the same way. #DC2626
           measured 4.43 there, and these labels are small text.

           #C81E1E is 5.26 on that surface, and 5.40 on the plain #F8F8F8 the
           rest rule would use anywhere the label is NOT also .btn-secondary.
           The dark halves already clear AA at 6.03 / 7.50 and are untouched. */
        .btn-danger-text {
            color: var(--color-red-text);
        }

        .btn-danger-text:hover {
            color: var(--color-red-text);
            background: rgba(239, 68, 68, 0.08);
        }

        /* Dark mode overrides for Apple Calendar styles */
        /* `Settings.applyTheme` REMOVES `data-theme` for 'system', which is the
           default, so the explicit half alone leaves the default configuration
           on a dark OS painting the light amber #92400E on --bg-main #121212 —
           2.64:1. Both halves, identical declarations: the guarded media half
           outranks the explicit one at (0,3,0) vs (0,2,0), so any drift between
           them would silently win. Kept adjacent so a later `color` at equal
           specificity cannot slip between them. */
        [data-theme="dark"] .status-warning {
            color: var(--color-amber-text);
        }

        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) .status-warning {
                color: var(--color-amber-text);
            }
        }

        [data-theme="dark"] .btn-danger-text {
            color: var(--color-red-text);
        }

        [data-theme="dark"] .btn-danger-text:hover {
            color: var(--color-red-text);
            background: rgba(239, 68, 68, 0.15);
        }

        [data-theme="dark"] .apple-calendar-badge {
            opacity: 0.8;
        }

        .calendar-event:hover .event-card {
            box-shadow: var(--shadow-1);
            border-color: #D0D5DD;
        }