/* Show all badges when task row is expanded */
        .task-row.expanded .task-metadata .task-meta-badge {
            display: inline-flex;
        }

        .task-meta-badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            font-size: var(--font-size-xs);
            font-weight: 500;
            white-space: nowrap;
            opacity: 0.85;
            transition: opacity var(--transition-fast);
        }

        .task-row:hover .task-meta-badge {
            opacity: 1;
        }

        .task-meta-badge svg {
            width: var(--icon-xs);
            height: var(--icon-xs);
            flex-shrink: 0;
            display: inline-block;
        }

        .meta-schedule {
            background: transparent;
            color: var(--text-tertiary);
        }

        .meta-schedule svg {
            stroke: var(--text-tertiary);
        }

        .meta-schedule.overdue {
            background: transparent;
            color: var(--color-red-text);
            font-size: var(--font-size-12);
            font-weight: 600;
        }

        .meta-schedule.overdue svg {
            stroke: var(--color-red);
        }

        .meta-deadline {
            background: transparent;
            color: var(--text-tertiary);
        }

        .meta-deadline svg {
            stroke: var(--text-tertiary);
        }

        .meta-deadline.overdue {
            background: transparent;
            color: var(--color-red-text);
            font-size: var(--font-size-12);
            font-weight: 600;
        }

        .meta-deadline.overdue svg {
            stroke: var(--color-red);
        }

        .meta-deadline.due-today {
            background: transparent;
            color: var(--color-amber-text);
            font-size: var(--font-size-12);
            font-weight: 600;
        }

        .meta-deadline.due-today svg {
            stroke: var(--color-amber);
        }

        .meta-duration {
            background: transparent;
            color: var(--text-tertiary);
        }

        .meta-duration svg {
            stroke: var(--text-tertiary);
        }

        .meta-tags {
            display: inline-flex;
            gap: 4px;
            align-items: center;
            flex-wrap: nowrap;
            overflow: hidden;
            background: none;
            padding: 0;
        }

        .tag-pill {
            display: inline-flex;
            align-items: center;
            border-radius: var(--radius-sm);
            padding: 2px 6px;
            font-size: var(--font-size-xs);
            font-weight: 500;
            line-height: 1.3;
            white-space: nowrap;
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            background: transparent;
            border: 1px solid var(--border-medium);
            color: var(--text-tertiary);
        }

        .tag-overflow {
            display: inline-flex;
            align-items: center;
            border-radius: var(--radius-sm);
            padding: 2px 6px;
            font-size: var(--font-size-2xs);
            font-weight: 600;
            background: var(--surface-hover, rgba(107, 114, 128, 0.12));
            color: var(--text-secondary, #6B7280);
        }

        .meta-repeat {
            background: transparent;
            color: var(--text-tertiary);
        }

        .meta-repeat svg {
            stroke: var(--text-tertiary);
        }

        .meta-notes {
            background: transparent;
            color: var(--text-tertiary);
        }

        .meta-notes svg {
            stroke: var(--text-tertiary);
        }

        .meta-project {
            background: transparent;
            border: none;
            color: var(--accent-blue);
            font-size: var(--font-size-12);
            font-weight: 600;
        }

        .meta-project svg {
            stroke: var(--accent-blue);
        }

        .meta-area {
            background: transparent;
            border: none;
            color: var(--text-tertiary);
        }

        .meta-area svg {
            stroke: var(--text-tertiary);
        }

        .meta-area-suggest {
            border: 1px dashed var(--suggest-color, #4A90D9);
            color: var(--suggest-color, #4A90D9);
            background: transparent;
            gap: 4px;
        }
        .meta-area-suggest .area-suggest-accept,
        .meta-area-suggest .area-suggest-dismiss {
            border: none;
            background: transparent;
            color: inherit;
            cursor: pointer;
            font-size: var(--font-size-xs);
            line-height: 1;
            padding: 2px 4px;
            border-radius: var(--radius-sm);
            min-width: 20px;
            min-height: 20px;
        }
        .meta-area-suggest .area-suggest-accept:hover { background: rgba(74,144,217,0.15); }
        .meta-area-suggest .area-suggest-dismiss:hover { background: rgba(0,0,0,0.06); }
        @media (prefers-reduced-motion: no-preference) {
            .meta-area-suggest { transition: opacity var(--duration-fast) var(--ease-in-out); }
        }

        /* Meeting source badge */
        .meta-meeting {
            background: transparent;
            color: var(--text-tertiary);
        }

        .meta-meeting svg {
            stroke: var(--text-tertiary);
        }

        .meta-meeting.clickable {
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .meta-meeting.clickable:hover {
            background: var(--surface-hover);
            border-radius: var(--radius-sm);
        }

        /* Task source badge (email, slack, teams) */
        .task-meta-badge.meta-source {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: transparent;
            color: var(--text-tertiary);
        }

        .task-meta-badge.meta-source svg {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
            stroke: var(--text-tertiary);
        }

        /* ========================================
           UNIFIED BADGE COMPONENT SYSTEM
           Base .badge class to replace .task-meta-badge
           with consistent styling
           ======================================== */

        /* Base badge component - works with .meta-* variant classes */
        .badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            padding: 3px 8px;
            border-radius: var(--radius-sm);
            font-size: var(--font-size-xs);
            font-weight: 500;
            white-space: nowrap;
            transition: filter var(--transition-fast);
        }

        .badge svg {
            width: var(--icon-xs);
            height: var(--icon-xs);
            flex-shrink: 0;
        }

        .badge:hover {
            filter: brightness(0.95);
            cursor: pointer;
        }

        /* Badge size variants */
        .badge-sm {
            padding: 2px 6px;
            font-size: var(--font-size-2xs);
        }

        .badge-lg {
            padding: 4px 10px;
            font-size: var(--font-size-sm);
        }

        /* Make existing .task-meta-badge compatible with unified system */
        .task-meta-badge {
            /* Inherits from base styles above */
        }

        /* .modal-meta-item removed — toolbar active states replace info display */

        /* ========================================
           UNIFIED BUTTON COMPONENT SYSTEM
           Standard button sizes and padding for consistency
           ======================================== */

        /* Icon button base */
        .btn-icon {
            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);
        }

        .btn-icon:hover {
            background: var(--surface-hover);
            color: var(--text-secondary);
        }

        .btn-icon:active {
            background: var(--surface-active);
            transform: scale(0.95);
        }

        /* Icon button size variants */
        .btn-icon-sm {
            width: var(--btn-sm);
            height: var(--btn-sm);
        }

        .btn-icon-md {
            width: var(--btn-md);
            height: var(--btn-md);
        }

        .btn-icon-lg {
            width: var(--btn-lg);
            height: var(--btn-lg);
        }

        /* Text button base */
        .btn-text {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            font-family: var(--font-family);
            font-weight: 500;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            white-space: nowrap;
        }

        /* Text button size variants */
        .btn-text-sm {
            padding: var(--btn-padding-sm);
            font-size: var(--font-size-sm);
        }

        .btn-text-md {
            padding: var(--btn-padding-md);
            font-size: var(--font-size-base);
        }

        .btn-text-lg {
            padding: var(--btn-padding-lg);
            font-size: var(--font-size-lg);
        }

        /* Button color variants removed - consolidated definition exists at line 9855 */

        .btn-primary:active,
        .btn-secondary:active,
        .btn-danger:active {
            transform: scale(0.97);
        }

        .btn-secondary {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .btn-secondary:hover {
            background: var(--bg-tertiary);
        }

        .btn-danger {
            background: var(--color-red-fill);
            color: white;
            border: none;
            padding: var(--space-2) var(--space-4);
            border-radius: var(--radius-md);
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .btn-danger:hover {
            background: var(--color-red-fill-hover);
        }

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

        /* Darker on hover, the same direction as the light theme. #E04555 went
           LIGHTER, which is the wrong way under white label text: it measured
           4.08:1 against the rest state's 4.53 and the light hover's 5.61. A
           danger button's background IS its text's surface, so brightening it
           to feel raised on a dark page costs exactly the contrast the label
           needs. #C82333 is 5.61. */
        [data-theme="dark"] .btn-danger:hover {
            background: var(--color-red-fill-hover);
        }