/* Short meetings (16–30min): shrink content to fit the proportional
           slot height instead of clipping the title. Without this the base
           min-height:32px forces the card taller than its wrapper (e.g. a
           17min slot is ~19.8px @70px/hr), and .calendar-event's
           overflow:hidden clips the title's descenders. Mirrors the
           duration-15 treatment but keeps the duration label visible. */
        .event-card.duration-30:not(.is-task) {
            min-height: 0;
            padding: 1px 8px;
            justify-content: center;
        }

        .event-card.duration-30:not(.is-task) .event-title {
            font-size: var(--font-size-xs);
            line-height: 1.15;
            white-space: nowrap;
        }

        .event-card.duration-60 {
        }

        .event-card.duration-90 {
        }

        .event-card.duration-120 {
        }

        /* Task cards - compact styling for short durations */
        .event-card.is-task.duration-15,
        .event-card.is-task.duration-30 {
            padding: var(--space-1) var(--space-2);
            gap: var(--space-1-5);
            align-items: center;
        }

        .event-card.is-task.duration-15 > .event-duration,
        .event-card.is-task.duration-30 > .event-duration {
            top: 4px;
            right: 8px;
        }

        .event-card.is-task.duration-15 .event-title,
        .event-card.is-task.duration-30 .event-title {
            font-size: var(--font-size-12);
            line-height: 1.3;
        }

        .event-card.is-task.duration-15 .task-left-col .event-time-inline,
        .event-card.is-task.duration-30 .task-left-col .event-time-inline {
            font-size: var(--font-size-xs);
        }

        .event-card.is-task.duration-15 .task-left-col,
        .event-card.is-task.duration-30 .task-left-col {
            gap: var(--space-half);
        }


        .task-row[draggable="true"] {
            cursor: grab;
        }

        .task-row[draggable="true"]:active {
            cursor: grabbing;
        }


        /* Hidden drag preview element */
        .drag-preview-hidden {
            position: fixed;
            top: -1000px;
            left: -1000px;
            width: 280px;
            pointer-events: none;
            opacity: 0.95;
        }

        .drag-preview-content {
            background: white;
            border-left: 3px solid var(--accent-blue);
            padding: var(--space-3) var(--space-3-5);
            border-radius: var(--radius-sm);
            box-shadow: var(--shadow-2);
        }

        .drag-preview-title {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: #1F2937;
            line-height: 1.4;
            display: block;
        }

        /* Timeline drag styles */
        .calendar-timeline.drag-over {
            background: var(--accent-blue-bg);
        }

        .today-calendar.drag-over {
            background: #EEF4FB;
        }


        /* Draggable event cards */
        .event-card.is-task {
            cursor: grab;
            border-left: 1px solid #E5E5E5;
        }

        /* A scheduled task keeps its Area colour on the timeline. The neutral
           rule above is a border-left shorthand, which also reset the colour
           and width the Area edge needs — so it is restored explicitly here. */
        .has-area-color .event-card.is-task {
            border-left: 3px solid var(--calendar-color);
        }

        .event-card.is-task:active {
            cursor: grabbing;
        }

        /* Resize handle cursor must override parent grab cursor */
        .event-card.is-task .task-resize-handle {
            cursor: row-resize !important;
        }

        .calendar-event.dragging {
            opacity: 0.4;
        }

        .calendar-event[draggable="true"] {
            cursor: grab;
        }

        .calendar-event[draggable="true"]:active {
            cursor: grabbing;
        }

        .drop-indicator {
            display: none;
        }

        .drop-zone-indicator {
            display: none;
        }

        .drop-zone {
            display: none;
        }

        /* View switching with smooth transitions */
        .view-container {
            display: none;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity var(--duration-normal) var(--ease-in-out), transform var(--duration-normal) var(--ease-in-out);
            /* Ensure inactive views don't affect layout */
            visibility: hidden;
            height: 0;
            overflow: hidden;
        }

        .view-container.active {
            display: block;
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
            height: auto;
            overflow: visible;
        }

        .inbox-view.active {
            display: flex;
            flex-direction: row;
            height: 100%;
            overflow: hidden;
        }

        .today-view.active {
            display: flex;
            height: 100%;
            overflow: hidden;
        }

        /* Tasks view needs flex column for internal scrolling */
        .tasks-view.active {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
        }

        /* Archive view needs flex column for internal scrolling */
        .archive-view.active {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
        }

        /* Notes view needs proper height containment for internal scrolling */
        .tasks-view.active:has(.notes-page) {
            height: 100%;
            overflow: hidden;
        }

        .view-container.active .notes-page {
            height: 100%;
            overflow: hidden;
        }