/* TaskNotes Plugin Styles */

/* 
   This file is automatically generated by the build process.
   To modify styles, edit the source files in the styles/ directory.
   
   Source files:
   
   Core System:
   - styles/variables.css: CSS custom properties and design system variables
   - styles/utilities.css: Scoped utility classes for layout, spacing, typography, and states
   - styles/base.css: Basic styles, animations, card components, and layout
   
   BEM Component Files:
   - styles/task-card-bem.css: TaskCard component with proper BEM scoping
   - styles/task-inline-widget.css: Inline task widget for editor with proper BEM scoping
   - styles/note-card-bem.css: NoteCard component with proper BEM scoping
   - styles/filter-bar-bem.css: FilterBar component with proper BEM scoping
   - styles/modal-bem.css: Modal components with proper BEM scoping
   
   BEM View Files:
   - styles/task-list-view.css: TaskListView component with proper BEM scoping
   - styles/calendar-view.css: CalendarView component with proper BEM scoping
   - styles/kanban-view.css: KanbanView component with proper BEM scoping
   - styles/agenda-view.css: AgendaView component with proper BEM scoping
   - styles/pomodoro-view.css: PomodoroView component with proper BEM scoping
   - styles/pomodoro-stats-view.css: PomodoroStatsView component with proper BEM scoping
   - styles/settings-view.css: SettingsView component with proper BEM scoping
   
   Run 'npm run build-css' to regenerate this file.
*/


/* ===== VARIABLES.CSS ===== */
/* Material 3 Expressive Design System Variables (2025) */
:root {
    /* ================================================
       SPACING SYSTEM - Optimized 4dp Grid Base for Compact Design
       ================================================ */
    
    /* Material 3 Expressive spacing tokens - more compact for desktop */
    --cs-spacing-xs: 2px;    /* 0.5 units - tighter for compact design */
    --cs-spacing-sm: 4px;    /* 1 unit - reduced base grid */
    --cs-spacing-md: 8px;    /* 2 units - more compact */
    --cs-spacing-lg: 12px;   /* 3 units - reduced from 24px */
    --cs-spacing-xl: 16px;   /* 4 units - more compact */
    --cs-spacing-xxl: 24px;  /* 6 units - significantly reduced */
    
    /* ================================================
       MATERIAL 3 EXPRESSIVE ELEVATION SYSTEM
       ================================================ */
    
    /* Enhanced elevation shadows with more personality and depth */
    --cs-elevation-0: none;
    --cs-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
    --cs-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
    --cs-elevation-3: 0 3px 6px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.08);
    --cs-elevation-4: 0 4px 8px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
    --cs-elevation-5: 0 6px 12px rgba(0, 0, 0, 0.12), 0 6px 18px rgba(0, 0, 0, 0.08);
    
    /* Removed expressive shadow variants - rely on standard elevation system */
    
    /* Surface container colors for elevation */
    --cs-surface-container-lowest: var(--background-primary);
    --cs-surface-container-low: var(--background-primary-alt);
    --cs-surface-container: var(--background-secondary);
    --cs-surface-container-high: var(--background-secondary-alt);
    --cs-surface-container-highest: var(--background-modifier-cover);
    
    /* ================================================
       MATERIAL 3 EXPRESSIVE TYPOGRAPHY SCALE
       ================================================ */
    
    /* Display - More expressive and compact for desktop use */
    --cs-text-display-large: 2.75rem;   /* 44px - reduced from 56px */
    --cs-text-display-medium: 2.25rem;  /* 36px - reduced from 45px */
    --cs-text-display-small: 1.875rem;  /* 30px - reduced from 36px */
    
    /* Headlines - Optimized for desktop density */
    --cs-text-headline-large: 1.75rem;    /* 28px - reduced from 32px */
    --cs-text-headline-medium: 1.5rem;    /* 24px - reduced from 28px */
    --cs-text-headline-small: 1.25rem;    /* 20px - reduced from 24px */
    
    /* Titles - Compact yet readable */
    --cs-text-title-large: 1.125rem;   /* 18px - reduced from 22px */
    --cs-text-title-medium: 0.875rem;  /* 14px - reduced from 16px */
    --cs-text-title-small: 0.75rem;    /* 12px - reduced from 14px */
    
    /* Body - Optimized for readability and compactness */
    --cs-text-body-large: 0.875rem;    /* 14px - reduced from 16px */
    --cs-text-body-medium: 0.75rem;    /* 12px - reduced from 14px */
    --cs-text-body-small: 0.6875rem;   /* 11px - slightly reduced */
    
    /* Labels - Compact component text */
    --cs-text-label-large: 0.75rem;    /* 12px - reduced from 14px */
    --cs-text-label-medium: 0.6875rem; /* 11px - slightly reduced */
    --cs-text-label-small: 0.625rem;   /* 10px - more compact */
    
    /* Legacy typography for compatibility */
    --cs-text-xs: var(--cs-text-label-small);
    --cs-text-sm: var(--cs-text-label-medium);
    --cs-text-base: var(--cs-text-body-medium);
    --cs-text-md: var(--cs-text-body-large);
    --cs-text-lg: var(--cs-text-title-medium);
    --cs-text-xl: var(--cs-text-title-large);
    --cs-text-2xl: var(--cs-text-headline-small);
    
    /* ================================================
       EXPRESSIVE BORDER RADIUS SYSTEM
       ================================================ */
    
    /* Material 3 Expressive corner radius tokens - more dynamic and personality-driven */
    --cs-radius-xs: 2px;    /* Extra small - more subtle */
    --cs-radius-sm: 6px;    /* Small - slightly more rounded */
    --cs-radius-md: 10px;   /* Medium - more organic feel */
    --cs-radius-lg: 14px;   /* Large - enhanced personality */
    --cs-radius-xl: 20px;   /* Extra large - more expressive */
    --cs-radius-xxl: 28px;  /* Extra extra large - bold expression */
    --cs-radius-full: 50%;  /* Full/pill - unchanged */
    
    /* Removed expressive radius variations - keep consistent radius system */
    
    /* ================================================
       COMPACT COMPONENT SIZING
       ================================================ */
    
    /* Touch targets - Optimized for desktop with compact design */
    --cs-touch-target: 36px;     /* Reduced from 48px for compactness */
    --cs-touch-target-lg: 44px;  /* Reduced from 56px */
    --cs-touch-target-dense: 28px;  /* More compact dense layouts */
    
    /* Button heights - More compact for desktop */
    --cs-button-height-sm: 24px;  /* Reduced from 32px */
    --cs-button-height-md: 32px;  /* Reduced from 40px */
    --cs-button-height-lg: var(--cs-touch-target);
    
    /* Input heights - Compact but usable */
    --cs-input-height-sm: 24px;   /* Reduced from 32px */
    --cs-input-height-md: 32px;   /* Reduced from 40px */
    --cs-input-height-lg: var(--cs-touch-target);
    
    /* Icon sizes - Proportionally adjusted */
    --cs-icon-sm: 14px;   /* Reduced from 16px */
    --cs-icon-md: 20px;   /* Reduced from 24px */
    --cs-icon-lg: 28px;   /* Reduced from 32px */
    
    /* ================================================
       EXPRESSIVE MOTION PHYSICS SYSTEM
       ================================================ */
    
    /* Material 3 Expressive motion tokens - enhanced with spatial springs */
    --cs-motion-duration-instant: 25ms;   /* Near-instant feedback */
    --cs-motion-duration-short1: 75ms;    /* Very quick interactions */
    --cs-motion-duration-short2: 120ms;   /* Quick interactions */
    --cs-motion-duration-short3: 180ms;   /* Standard interactions */
    --cs-motion-duration-short4: 240ms;   /* Slightly longer interactions */
    --cs-motion-duration-medium1: 300ms;  /* Medium duration */
    --cs-motion-duration-medium2: 360ms;  /* Medium-long duration */
    --cs-motion-duration-medium3: 420ms;  /* Longer interactions */
    --cs-motion-duration-medium4: 480ms;  /* Long interactions */
    --cs-motion-duration-long1: 540ms;    /* Very long interactions */
    --cs-motion-duration-long2: 600ms;    /* Extra long */
    
    /* Enhanced easing curves for more natural, physics-based motion */
    --cs-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
    --cs-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --cs-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
    --cs-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
    --cs-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --cs-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
    --cs-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    
    /* Simplified motion system - keep only essential easing curves */
    --cs-motion-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.1);
    
    /* Simplified transition tokens */
    --cs-transition-instant: var(--cs-motion-duration-instant) var(--cs-motion-easing-standard);
    --cs-transition-fast: var(--cs-motion-duration-short2) var(--cs-motion-easing-standard);
    --cs-transition-normal: var(--cs-motion-duration-short3) var(--cs-motion-easing-spring);
    --cs-transition-slow: var(--cs-motion-duration-medium1) var(--cs-motion-easing-emphasized);
    
    /* ================================================
       STATE SYSTEM
       ================================================ */
    
    /* Opacity values for different states */
    --cs-state-hover: 0.08;
    --cs-state-focus: 0.12;
    --cs-state-pressed: 0.16;
    --cs-state-dragged: 0.16;
    --cs-state-disabled: 0.38;
    
    /* ================================================
       Z-INDEX SYSTEM
       ================================================ */
    
    /* Layer hierarchy for proper stacking */
    --cs-z-base: 0;
    --cs-z-sticky: 100;
    --cs-z-fixed: 200;
    --cs-z-overlay: 300;
    --cs-z-dropdown: 1000;
    --cs-z-tooltip: 2000;
    --cs-z-modal: 3000;
    --cs-z-notification: 4000;
    
    /* Simplified Color System - Rely more on theme colors */
    /* Only define colors when theme doesn't provide suitable alternatives */
    
    /* Blue scale for notes and information */
    --cs-blue-100: rgba(59, 130, 246, 0.1);  /* Light blue background for scheduled tasks */
    --cs-blue-300: var(--color-blue, #60a5fa);
    --cs-blue-400: var(--color-blue, #3b82f6);
    --cs-blue-500: var(--color-blue, #2563eb);
    
    /* Purple scale for special items */
    --cs-purple-100: rgba(139, 92, 246, 0.1);  /* Light purple background for daily notes */
    --cs-purple-300: var(--color-purple, #a78bfa);
    --cs-purple-400: var(--color-purple, #8b5cf6);
    --cs-purple-500: var(--color-purple, #7c3aed);
    
    /* Use theme's muted colors */
    --cs-gray-100: rgba(107, 114, 128, 0.1);  /* Light gray background for archived tasks */
    --cs-gray-300: var(--background-modifier-border);
    --cs-gray-400: var(--background-modifier-border-hover);
    --cs-gray-500: var(--text-muted);
    --cs-gray-600: var(--text-faint);
    
    /* Red and green gradient colors for due dates and completed tasks */
    --cs-red-100: rgba(239, 68, 68, 0.1);    /* Light red background for due tasks */
    --cs-green-100: rgba(34, 197, 94, 0.1);  /* Light green background for completed tasks */
    
    /* Fixed semantic usage for UI elements (not user-customizable) */
    /* Notes heatmap - blue intensities for calendar */
    --cs-color-notes-light: var(--cs-blue-300);
    --cs-color-notes-medium: var(--cs-blue-400);
    --cs-color-notes-heavy: var(--cs-blue-500);
    
    /* Special item colors (daily notes, recurring) */
    --cs-color-daily-note: var(--cs-purple-300);
    --cs-color-recurring: var(--cs-purple-400);
    
    /* Archived/inactive content */
    --cs-color-archived: var(--cs-gray-500);
    
    /* Note: Status and Priority colors are user-customizable via settings */
    /* They are injected as CSS variables: --status-{value}-color and --priority-{value}-color */
    /* Default fallbacks for when custom colors aren't loaded yet */
    --cs-color-status-fallback: var(--text-muted);
    --cs-color-priority-fallback: var(--text-muted);
    
    /* Legacy component sizing - using updated values from above */
    
    /* Z-index scale */
    --cs-z-dropdown: 1000;
    --cs-z-modal: 2000;
    --cs-z-tooltip: 3000;
    
    /* Shadow system */
    --cs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --cs-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
    --cs-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
    --cs-shadow-xl: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* ================================================
   TASKNOTES PLUGIN SCOPED VARIABLES
   ================================================ */

.tasknotes-plugin {
    /* ================================================
       SCOPED THEME INTEGRATION
       ================================================ */
    
    /* Base & Text Colors - Map to Obsidian theme variables */
    --tn-bg-primary: var(--background-primary);
    --tn-bg-secondary: var(--background-secondary);
    --tn-bg-primary-alt: var(--background-primary-alt, var(--background-primary));
    --tn-bg-secondary-alt: var(--background-secondary-alt, var(--background-secondary));
    --tn-text-normal: var(--text-normal);
    --tn-text-muted: var(--text-muted);
    --tn-text-faint: var(--text-faint);
    --tn-text-accent: var(--interactive-accent);

    /* Borders & Dividers - Map to Obsidian theme variables */
    --tn-border-color: var(--background-modifier-border);
    --tn-border-color-hover: var(--background-modifier-border-hover);
    --tn-border-color-focus: var(--background-modifier-border-focus);
    --tn-border-color-interactive: var(--interactive-accent);

    /* Interactive States - Map to Obsidian theme variables */
    --tn-interactive-normal: var(--interactive-normal);
    --tn-interactive-hover: color-mix(in srgb, var(--tn-interactive-accent) 8%, transparent);
    --tn-interactive-accent: var(--interactive-accent);
    --tn-interactive-accent-hover: var(--interactive-accent-hover);
    --tn-interactive-success: var(--interactive-success);

    /* Semantic Colors - Use Obsidian's color palette when available */
    --tn-color-success: var(--color-green, #00aa00);
    --tn-color-warning: var(--color-yellow, #ffa500);
    --tn-color-error: var(--color-red, #ff0000);
    --tn-color-info: var(--color-blue, #0066cc);
    --tn-color-overdue: var(--color-red, #ff0000);

    /* ================================================
       SCOPED SPACING SYSTEM (inherit from design system)
       ================================================ */
    
    --tn-spacing-xs: var(--cs-spacing-xs);
    --tn-spacing-sm: var(--cs-spacing-sm);
    --tn-spacing-md: var(--cs-spacing-md);
    --tn-spacing-lg: var(--cs-spacing-lg);
    --tn-spacing-xl: var(--cs-spacing-xl);
    --tn-spacing-xxl: var(--cs-spacing-xxl);

    /* ================================================
       SCOPED TYPOGRAPHY SYSTEM (inherit from design system)
       ================================================ */
    
    --tn-font-size-xs: var(--cs-text-label-small);
    --tn-font-size-sm: var(--cs-text-label-medium);
    --tn-font-size-md: var(--cs-text-body-medium);
    --tn-font-size-lg: var(--cs-text-body-large);
    --tn-font-size-xl: var(--cs-text-title-medium);
    --tn-font-size-2xl: var(--cs-text-title-large);

    /* Typography weights and styles */
    --tn-font-weight-normal: 400;
    --tn-font-weight-medium: 500;
    --tn-font-weight-semibold: 600;
    --tn-font-weight-bold: 700;

    /* ================================================
       SCOPED BORDERS & SHADOWS (inherit from design system)
       ================================================ */
    
    --tn-radius-xs: var(--cs-radius-xs);
    --tn-radius-sm: var(--cs-radius-sm);
    --tn-radius-md: var(--cs-radius-md);
    --tn-radius-lg: var(--cs-radius-lg);
    --tn-radius-xl: var(--cs-radius-xl);
    --tn-radius-full: var(--cs-radius-full);

    --tn-shadow-light: var(--cs-elevation-1);
    --tn-shadow-medium: var(--cs-elevation-2);
    --tn-shadow-strong: var(--cs-elevation-3);
    --tn-shadow-hover: var(--cs-elevation-4);

    /* ================================================
       SCOPED MOTION SYSTEM (inherit from design system)
       ================================================ */
    
    --tn-transition-fast: var(--cs-transition-fast);
    --tn-transition-normal: var(--cs-transition-normal);
    --tn-transition-slow: var(--cs-transition-slow);

    /* ================================================
       SCOPED COMPONENT SIZING (inherit from design system)
       ================================================ */
    
    --tn-button-height-sm: var(--cs-button-height-sm);
    --tn-button-height-md: var(--cs-button-height-md);
    --tn-button-height-lg: var(--cs-button-height-lg);
    
    --tn-input-height-sm: var(--cs-input-height-sm);
    --tn-input-height-md: var(--cs-input-height-md);
    --tn-input-height-lg: var(--cs-input-height-lg);

    --tn-icon-sm: var(--cs-icon-sm);
    --tn-icon-md: var(--cs-icon-md);
    --tn-icon-lg: var(--cs-icon-lg);

    /* ================================================
       SCOPED Z-INDEX SYSTEM (inherit from design system)
       ================================================ */
    
    --tn-z-base: var(--cs-z-base);
    --tn-z-sticky: var(--cs-z-sticky);
    --tn-z-dropdown: var(--cs-z-dropdown);
    --tn-z-modal: var(--cs-z-modal);
    --tn-z-tooltip: var(--cs-z-tooltip);
    --tn-z-notification: var(--cs-z-notification);

    /* ================================================
       PLUGIN-SPECIFIC VARIABLES
       ================================================ */
    
    /* Status & Priority colors are dynamically injected by StatusManager & PriorityManager */
    /* These are fallbacks for when dynamic colors aren't loaded yet */
    --tn-color-status-fallback: var(--tn-text-muted);
    --tn-color-priority-fallback: var(--tn-text-muted);
    
    /* Special component colors */
    --tn-color-archived: var(--cs-color-archived);
    --tn-color-daily-note: var(--cs-color-daily-note);
    --tn-color-recurring: var(--cs-color-recurring);
    
    /* Calendar and heatmap colors */
    --tn-color-notes-light: var(--cs-color-notes-light);
    --tn-color-notes-medium: var(--cs-color-notes-medium);
    --tn-color-notes-heavy: var(--cs-color-notes-heavy);
}

/* ===== UTILITIES.CSS ===== */
/* ================================================
   TASKNOTES SCOPED UTILITY CLASSES
   ================================================ 
   
   This file contains a comprehensive set of utility classes for the
   ChronoSync/TaskNotes plugin. All utilities are properly scoped under
   .tasknotes-plugin and follow the established naming conventions.
   
   Naming Convention: .tn-{property}-{value}
   All utilities use --tn- CSS variables for consistency
   
   Categories:
   - Layout Utilities (flexbox, grid, positioning)
   - Spacing Utilities (margin, padding, gap)
   - Typography Utilities (text alignment, font styles)
   - Display Utilities (visibility, display types)
   - Background & Border Utilities
   - State Utilities (hover, focus, loading)
   - Animation Utilities
   
   ================================================ */

/* ================================================
   LAYOUT UTILITIES - FLEXBOX
   ================================================ */

.tasknotes-plugin .tn-flex {
    display: flex;
}

.tasknotes-plugin .tn-flex-inline {
    display: inline-flex;
}

/* Flex Direction */
.tasknotes-plugin .tn-flex-row {
    flex-direction: row;
}

.tasknotes-plugin .tn-flex-col {
    flex-direction: column;
}

.tasknotes-plugin .tn-flex-row-reverse {
    flex-direction: row-reverse;
}

.tasknotes-plugin .tn-flex-col-reverse {
    flex-direction: column-reverse;
}

/* Flex Wrap */
.tasknotes-plugin .tn-flex-wrap {
    flex-wrap: wrap;
}

.tasknotes-plugin .tn-flex-nowrap {
    flex-wrap: nowrap;
}

.tasknotes-plugin .tn-flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

/* Justify Content */
.tasknotes-plugin .tn-justify-start {
    justify-content: flex-start;
}

.tasknotes-plugin .tn-justify-end {
    justify-content: flex-end;
}

.tasknotes-plugin .tn-justify-center {
    justify-content: center;
}

.tasknotes-plugin .tn-justify-between {
    justify-content: space-between;
}

.tasknotes-plugin .tn-justify-around {
    justify-content: space-around;
}

.tasknotes-plugin .tn-justify-evenly {
    justify-content: space-evenly;
}

/* Align Items */
.tasknotes-plugin .tn-items-start {
    align-items: flex-start;
}

.tasknotes-plugin .tn-items-end {
    align-items: flex-end;
}

.tasknotes-plugin .tn-items-center {
    align-items: center;
}

.tasknotes-plugin .tn-items-baseline {
    align-items: baseline;
}

.tasknotes-plugin .tn-items-stretch {
    align-items: stretch;
}

/* Align Self */
.tasknotes-plugin .tn-self-auto {
    align-self: auto;
}

.tasknotes-plugin .tn-self-start {
    align-self: flex-start;
}

.tasknotes-plugin .tn-self-end {
    align-self: flex-end;
}

.tasknotes-plugin .tn-self-center {
    align-self: center;
}

.tasknotes-plugin .tn-self-stretch {
    align-self: stretch;
}

/* Flex Growth and Shrink */
.tasknotes-plugin .tn-flex-1 {
    flex: 1 1 0%;
}

.tasknotes-plugin .tn-flex-auto {
    flex: 1 1 auto;
}

.tasknotes-plugin .tn-flex-initial {
    flex: 0 1 auto;
}

.tasknotes-plugin .tn-flex-none {
    flex: none;
}

.tasknotes-plugin .tn-grow {
    flex-grow: 1;
}

.tasknotes-plugin .tn-grow-0 {
    flex-grow: 0;
}

.tasknotes-plugin .tn-shrink {
    flex-shrink: 1;
}

.tasknotes-plugin .tn-shrink-0 {
    flex-shrink: 0;
}

/* Common Flex Combinations */
.tasknotes-plugin .tn-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tasknotes-plugin .tn-flex-between {
    display: flex;
    justify-content: space-between;
}

.tasknotes-plugin .tn-flex-around {
    display: flex;
    justify-content: space-around;
}

.tasknotes-plugin .tn-flex-evenly {
    display: flex;
    justify-content: space-evenly;
}

.tasknotes-plugin .tn-flex-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tasknotes-plugin .tn-flex-col-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ================================================
   LAYOUT UTILITIES - GRID
   ================================================ */

.tasknotes-plugin .tn-grid {
    display: grid;
}

.tasknotes-plugin .tn-grid-inline {
    display: inline-grid;
}

/* Grid Template Columns */
.tasknotes-plugin .tn-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Grid Template Rows */
.tasknotes-plugin .tn-grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
}

/* Grid Column Span */
.tasknotes-plugin .tn-col-span-1 {
    grid-column: span 1 / span 1;
}

.tasknotes-plugin .tn-col-span-2 {
    grid-column: span 2 / span 2;
}

.tasknotes-plugin .tn-col-span-3 {
    grid-column: span 3 / span 3;
}

.tasknotes-plugin .tn-col-span-4 {
    grid-column: span 4 / span 4;
}

.tasknotes-plugin .tn-col-span-full {
    grid-column: 1 / -1;
}

/* Grid Row Span */
.tasknotes-plugin .tn-row-span-1 {
    grid-row: span 1 / span 1;
}

.tasknotes-plugin .tn-row-span-2 {
    grid-row: span 2 / span 2;
}

.tasknotes-plugin .tn-row-span-3 {
    grid-row: span 3 / span 3;
}

.tasknotes-plugin .tn-row-span-full {
    grid-row: 1 / -1;
}

/* ================================================
   LAYOUT UTILITIES - POSITIONING
   ================================================ */

.tasknotes-plugin .tn-static {
    position: static;
}

.tasknotes-plugin .tn-fixed {
    position: fixed;
}

.tasknotes-plugin .tn-absolute {
    position: absolute;
}

.tasknotes-plugin .tn-relative {
    position: relative;
}

.tasknotes-plugin .tn-sticky {
    position: sticky;
}

/* Positioning Values */
.tasknotes-plugin .tn-inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.tasknotes-plugin .tn-top-0 {
    top: 0;
}

.tasknotes-plugin .tn-right-0 {
    right: 0;
}

.tasknotes-plugin .tn-bottom-0 {
    bottom: 0;
}

.tasknotes-plugin .tn-left-0 {
    left: 0;
}

.tasknotes-plugin .tn-top-auto {
    top: auto;
}

.tasknotes-plugin .tn-right-auto {
    right: auto;
}

.tasknotes-plugin .tn-bottom-auto {
    bottom: auto;
}

.tasknotes-plugin .tn-left-auto {
    left: auto;
}

/* ================================================
   SPACING UTILITIES - MARGIN
   ================================================ */

/* All sides */
.tasknotes-plugin .tn-m-0 {
    margin: 0;
}

.tasknotes-plugin .tn-m-xs {
    margin: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-m-sm {
    margin: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-m-md {
    margin: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-m-lg {
    margin: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-m-xl {
    margin: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-m-auto {
    margin: auto;
}

/* Horizontal */
.tasknotes-plugin .tn-mx-0 {
    margin-left: 0;
    margin-right: 0;
}

.tasknotes-plugin .tn-mx-xs {
    margin-left: var(--tn-spacing-xs);
    margin-right: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-mx-sm {
    margin-left: var(--tn-spacing-sm);
    margin-right: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-mx-md {
    margin-left: var(--tn-spacing-md);
    margin-right: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-mx-lg {
    margin-left: var(--tn-spacing-lg);
    margin-right: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-mx-xl {
    margin-left: var(--tn-spacing-xl);
    margin-right: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Vertical */
.tasknotes-plugin .tn-my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.tasknotes-plugin .tn-my-xs {
    margin-top: var(--tn-spacing-xs);
    margin-bottom: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-my-sm {
    margin-top: var(--tn-spacing-sm);
    margin-bottom: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-my-md {
    margin-top: var(--tn-spacing-md);
    margin-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-my-lg {
    margin-top: var(--tn-spacing-lg);
    margin-bottom: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-my-xl {
    margin-top: var(--tn-spacing-xl);
    margin-bottom: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

/* Individual sides */
.tasknotes-plugin .tn-mt-0 {
    margin-top: 0;
}

.tasknotes-plugin .tn-mt-xs {
    margin-top: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-mt-sm {
    margin-top: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-mt-md {
    margin-top: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-mt-lg {
    margin-top: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-mt-xl {
    margin-top: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-mt-auto {
    margin-top: auto;
}

.tasknotes-plugin .tn-mr-0 {
    margin-right: 0;
}

.tasknotes-plugin .tn-mr-xs {
    margin-right: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-mr-sm {
    margin-right: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-mr-md {
    margin-right: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-mr-lg {
    margin-right: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-mr-xl {
    margin-right: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-mr-auto {
    margin-right: auto;
}

.tasknotes-plugin .tn-mb-0 {
    margin-bottom: 0;
}

.tasknotes-plugin .tn-mb-xs {
    margin-bottom: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-mb-sm {
    margin-bottom: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-mb-md {
    margin-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-mb-lg {
    margin-bottom: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-mb-xl {
    margin-bottom: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-mb-auto {
    margin-bottom: auto;
}

.tasknotes-plugin .tn-ml-0 {
    margin-left: 0;
}

.tasknotes-plugin .tn-ml-xs {
    margin-left: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-ml-sm {
    margin-left: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-ml-md {
    margin-left: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-ml-lg {
    margin-left: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-ml-xl {
    margin-left: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-ml-auto {
    margin-left: auto;
}

/* ================================================
   SPACING UTILITIES - PADDING
   ================================================ */

/* All sides */
.tasknotes-plugin .tn-p-0 {
    padding: 0;
}

.tasknotes-plugin .tn-p-xs {
    padding: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-p-sm {
    padding: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-p-md {
    padding: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-p-lg {
    padding: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-p-xl {
    padding: var(--tn-spacing-xl);
}

/* Horizontal */
.tasknotes-plugin .tn-px-0 {
    padding-left: 0;
    padding-right: 0;
}

.tasknotes-plugin .tn-px-xs {
    padding-left: var(--tn-spacing-xs);
    padding-right: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-px-sm {
    padding-left: var(--tn-spacing-sm);
    padding-right: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-px-md {
    padding-left: var(--tn-spacing-md);
    padding-right: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-px-lg {
    padding-left: var(--tn-spacing-lg);
    padding-right: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-px-xl {
    padding-left: var(--tn-spacing-xl);
    padding-right: var(--tn-spacing-xl);
}

/* Vertical */
.tasknotes-plugin .tn-py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.tasknotes-plugin .tn-py-xs {
    padding-top: var(--tn-spacing-xs);
    padding-bottom: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-py-sm {
    padding-top: var(--tn-spacing-sm);
    padding-bottom: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-py-md {
    padding-top: var(--tn-spacing-md);
    padding-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-py-lg {
    padding-top: var(--tn-spacing-lg);
    padding-bottom: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-py-xl {
    padding-top: var(--tn-spacing-xl);
    padding-bottom: var(--tn-spacing-xl);
}

/* Individual sides */
.tasknotes-plugin .tn-pt-0 {
    padding-top: 0;
}

.tasknotes-plugin .tn-pt-xs {
    padding-top: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-pt-sm {
    padding-top: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-pt-md {
    padding-top: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-pt-lg {
    padding-top: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-pt-xl {
    padding-top: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-pr-0 {
    padding-right: 0;
}

.tasknotes-plugin .tn-pr-xs {
    padding-right: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-pr-sm {
    padding-right: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-pr-md {
    padding-right: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-pr-lg {
    padding-right: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-pr-xl {
    padding-right: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-pb-0 {
    padding-bottom: 0;
}

.tasknotes-plugin .tn-pb-xs {
    padding-bottom: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-pb-sm {
    padding-bottom: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-pb-md {
    padding-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-pb-lg {
    padding-bottom: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-pb-xl {
    padding-bottom: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-pl-0 {
    padding-left: 0;
}

.tasknotes-plugin .tn-pl-xs {
    padding-left: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-pl-sm {
    padding-left: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-pl-md {
    padding-left: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-pl-lg {
    padding-left: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-pl-xl {
    padding-left: var(--tn-spacing-xl);
}

/* ================================================
   SPACING UTILITIES - GAP
   ================================================ */

.tasknotes-plugin .tn-gap-0 {
    gap: 0;
}

.tasknotes-plugin .tn-gap-xs {
    gap: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-gap-sm {
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-gap-md {
    gap: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-gap-lg {
    gap: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-gap-xl {
    gap: var(--tn-spacing-xl);
}

/* Column Gap */
.tasknotes-plugin .tn-gap-x-0 {
    column-gap: 0;
}

.tasknotes-plugin .tn-gap-x-xs {
    column-gap: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-gap-x-sm {
    column-gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-gap-x-md {
    column-gap: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-gap-x-lg {
    column-gap: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-gap-x-xl {
    column-gap: var(--tn-spacing-xl);
}

/* Row Gap */
.tasknotes-plugin .tn-gap-y-0 {
    row-gap: 0;
}

.tasknotes-plugin .tn-gap-y-xs {
    row-gap: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-gap-y-sm {
    row-gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-gap-y-md {
    row-gap: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-gap-y-lg {
    row-gap: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-gap-y-xl {
    row-gap: var(--tn-spacing-xl);
}

/* ================================================
   DISPLAY UTILITIES
   ================================================ */

.tasknotes-plugin .tn-block {
    display: block;
}

.tasknotes-plugin .tn-inline-block {
    display: inline-block;
}

.tasknotes-plugin .tn-inline {
    display: inline;
}

.tasknotes-plugin .tn-hidden {
    display: none !important;
}

.tasknotes-plugin .tn-table {
    display: table;
}

.tasknotes-plugin .tn-table-row {
    display: table-row;
}

.tasknotes-plugin .tn-table-cell {
    display: table-cell;
}

/* ================================================
   VISIBILITY UTILITIES
   ================================================ */

.tasknotes-plugin .tn-visible {
    visibility: visible;
}

.tasknotes-plugin .tn-invisible {
    visibility: hidden;
}

.tasknotes-plugin .tn-collapse {
    visibility: collapse;
}

/* ================================================
   TYPOGRAPHY UTILITIES
   ================================================ */

/* Text Alignment */
.tasknotes-plugin .tn-text-left {
    text-align: left;
}

.tasknotes-plugin .tn-text-center {
    text-align: center;
}

.tasknotes-plugin .tn-text-right {
    text-align: right;
}

.tasknotes-plugin .tn-text-justify {
    text-align: justify;
}

/* Font Weight */
.tasknotes-plugin .tn-font-thin {
    font-weight: 100;
}

.tasknotes-plugin .tn-font-light {
    font-weight: 300;
}

.tasknotes-plugin .tn-font-normal {
    font-weight: var(--tn-font-weight-normal);
}

.tasknotes-plugin .tn-font-medium {
    font-weight: var(--tn-font-weight-medium);
}

.tasknotes-plugin .tn-font-semibold {
    font-weight: var(--tn-font-weight-semibold);
}

.tasknotes-plugin .tn-font-bold {
    font-weight: var(--tn-font-weight-bold);
}

/* Font Size */
.tasknotes-plugin .tn-text-xs {
    font-size: var(--tn-font-size-xs);
}

.tasknotes-plugin .tn-text-sm {
    font-size: var(--tn-font-size-sm);
}

.tasknotes-plugin .tn-text-base {
    font-size: var(--tn-font-size-md);
}

.tasknotes-plugin .tn-text-lg {
    font-size: var(--tn-font-size-lg);
}

.tasknotes-plugin .tn-text-xl {
    font-size: var(--tn-font-size-xl);
}

.tasknotes-plugin .tn-text-2xl {
    font-size: var(--tn-font-size-2xl);
}

/* Text Transform */
.tasknotes-plugin .tn-uppercase {
    text-transform: uppercase;
}

.tasknotes-plugin .tn-lowercase {
    text-transform: lowercase;
}

.tasknotes-plugin .tn-capitalize {
    text-transform: capitalize;
}

.tasknotes-plugin .tn-normal-case {
    text-transform: none;
}

/* Text Decoration */
.tasknotes-plugin .tn-underline {
    text-decoration: underline;
}

.tasknotes-plugin .tn-line-through {
    text-decoration: line-through;
}

.tasknotes-plugin .tn-no-underline {
    text-decoration: none;
}

/* Line Height */
.tasknotes-plugin .tn-leading-none {
    line-height: 1;
}

.tasknotes-plugin .tn-leading-tight {
    line-height: 1.25;
}

.tasknotes-plugin .tn-leading-snug {
    line-height: 1.375;
}

.tasknotes-plugin .tn-leading-normal {
    line-height: 1.5;
}

.tasknotes-plugin .tn-leading-relaxed {
    line-height: 1.625;
}

.tasknotes-plugin .tn-leading-loose {
    line-height: 2;
}

/* Text Colors */
.tasknotes-plugin .tn-text-normal {
    color: var(--tn-text-normal);
}

.tasknotes-plugin .tn-text-muted {
    color: var(--tn-text-muted);
}

.tasknotes-plugin .tn-text-faint {
    color: var(--tn-text-faint);
}

.tasknotes-plugin .tn-text-accent {
    color: var(--tn-text-accent);
}

.tasknotes-plugin .tn-text-success {
    color: var(--tn-color-success);
}

.tasknotes-plugin .tn-text-warning {
    color: var(--tn-color-warning);
}

.tasknotes-plugin .tn-text-error {
    color: var(--tn-color-error);
}

.tasknotes-plugin .tn-text-info {
    color: var(--tn-color-info);
}

/* ================================================
   BACKGROUND UTILITIES
   ================================================ */

.tasknotes-plugin .tn-bg-primary {
    background-color: var(--tn-bg-primary);
}

.tasknotes-plugin .tn-bg-secondary {
    background-color: var(--tn-bg-secondary);
}

.tasknotes-plugin .tn-bg-accent {
    background-color: var(--tn-interactive-accent);
}

.tasknotes-plugin .tn-bg-success {
    background-color: var(--tn-color-success);
}

.tasknotes-plugin .tn-bg-warning {
    background-color: var(--tn-color-warning);
}

.tasknotes-plugin .tn-bg-error {
    background-color: var(--tn-color-error);
}

.tasknotes-plugin .tn-bg-info {
    background-color: var(--tn-color-info);
}

.tasknotes-plugin .tn-bg-transparent {
    background-color: transparent;
}

/* ================================================
   BORDER UTILITIES
   ================================================ */

/* Border Width */
.tasknotes-plugin .tn-border-0 {
    border-width: 0;
}

.tasknotes-plugin .tn-border {
    border-width: 1px;
}

.tasknotes-plugin .tn-border-2 {
    border-width: 2px;
}

.tasknotes-plugin .tn-border-t {
    border-top-width: 1px;
}

.tasknotes-plugin .tn-border-r {
    border-right-width: 1px;
}

.tasknotes-plugin .tn-border-b {
    border-bottom-width: 1px;
}

.tasknotes-plugin .tn-border-l {
    border-left-width: 1px;
}

/* Border Style */
.tasknotes-plugin .tn-border-solid {
    border-style: solid;
}

.tasknotes-plugin .tn-border-dashed {
    border-style: dashed;
}

.tasknotes-plugin .tn-border-dotted {
    border-style: dotted;
}

.tasknotes-plugin .tn-border-none {
    border-style: none;
}

/* Border Color */
.tasknotes-plugin .tn-border-normal {
    border-color: var(--tn-border-color);
}

.tasknotes-plugin .tn-border-hover {
    border-color: var(--tn-border-color-hover);
}

.tasknotes-plugin .tn-border-accent {
    border-color: var(--tn-interactive-accent);
}

.tasknotes-plugin .tn-border-success {
    border-color: var(--tn-color-success);
}

.tasknotes-plugin .tn-border-warning {
    border-color: var(--tn-color-warning);
}

.tasknotes-plugin .tn-border-error {
    border-color: var(--tn-color-error);
}

.tasknotes-plugin .tn-border-transparent {
    border-color: transparent;
}

/* Border Radius */
.tasknotes-plugin .tn-rounded-none {
    border-radius: 0;
}

.tasknotes-plugin .tn-rounded-xs {
    border-radius: var(--tn-radius-xs);
}

.tasknotes-plugin .tn-rounded-sm {
    border-radius: var(--tn-radius-sm);
}

.tasknotes-plugin .tn-rounded {
    border-radius: var(--tn-radius-md);
}

.tasknotes-plugin .tn-rounded-md {
    border-radius: var(--tn-radius-md);
}

.tasknotes-plugin .tn-rounded-lg {
    border-radius: var(--tn-radius-lg);
}

.tasknotes-plugin .tn-rounded-xl {
    border-radius: var(--tn-radius-xl);
}

.tasknotes-plugin .tn-rounded-full {
    border-radius: var(--tn-radius-full);
}

/* Individual corner radius */
.tasknotes-plugin .tn-rounded-t-sm {
    border-top-left-radius: var(--tn-radius-sm);
    border-top-right-radius: var(--tn-radius-sm);
}

.tasknotes-plugin .tn-rounded-r-sm {
    border-top-right-radius: var(--tn-radius-sm);
    border-bottom-right-radius: var(--tn-radius-sm);
}

.tasknotes-plugin .tn-rounded-b-sm {
    border-bottom-left-radius: var(--tn-radius-sm);
    border-bottom-right-radius: var(--tn-radius-sm);
}

.tasknotes-plugin .tn-rounded-l-sm {
    border-top-left-radius: var(--tn-radius-sm);
    border-bottom-left-radius: var(--tn-radius-sm);
}

/* ================================================
   SHADOW UTILITIES
   ================================================ */

.tasknotes-plugin .tn-shadow-none {
    box-shadow: none;
}

.tasknotes-plugin .tn-shadow-light {
    box-shadow: var(--tn-shadow-light);
}

.tasknotes-plugin .tn-shadow {
    box-shadow: var(--tn-shadow-medium);
}

.tasknotes-plugin .tn-shadow-medium {
    box-shadow: var(--tn-shadow-medium);
}

.tasknotes-plugin .tn-shadow-strong {
    box-shadow: var(--tn-shadow-strong);
}

.tasknotes-plugin .tn-shadow-hover {
    box-shadow: var(--tn-shadow-hover);
}

/* ================================================
   OVERFLOW UTILITIES
   ================================================ */

.tasknotes-plugin .tn-overflow-auto {
    overflow: auto;
}

.tasknotes-plugin .tn-overflow-hidden {
    overflow: hidden;
}

.tasknotes-plugin .tn-overflow-visible {
    overflow: visible;
}

.tasknotes-plugin .tn-overflow-scroll {
    overflow: scroll;
}

.tasknotes-plugin .tn-overflow-x-auto {
    overflow-x: auto;
}

.tasknotes-plugin .tn-overflow-x-hidden {
    overflow-x: hidden;
}

.tasknotes-plugin .tn-overflow-x-scroll {
    overflow-x: scroll;
}

.tasknotes-plugin .tn-overflow-y-auto {
    overflow-y: auto;
}

.tasknotes-plugin .tn-overflow-y-hidden {
    overflow-y: hidden;
}

.tasknotes-plugin .tn-overflow-y-scroll {
    overflow-y: scroll;
}

/* ================================================
   SIZE UTILITIES
   ================================================ */

/* Width */
.tasknotes-plugin .tn-w-auto {
    width: auto;
}

.tasknotes-plugin .tn-w-full {
    width: 100%;
}

.tasknotes-plugin .tn-w-screen {
    width: 100vw;
}

.tasknotes-plugin .tn-w-min {
    width: min-content;
}

.tasknotes-plugin .tn-w-max {
    width: max-content;
}

.tasknotes-plugin .tn-w-fit {
    width: fit-content;
}

/* Specific widths */
.tasknotes-plugin .tn-w-0 {
    width: 0;
}

.tasknotes-plugin .tn-w-px {
    width: 1px;
}

.tasknotes-plugin .tn-w-1 {
    width: 0.25rem;
}

.tasknotes-plugin .tn-w-2 {
    width: 0.5rem;
}

.tasknotes-plugin .tn-w-4 {
    width: 1rem;
}

.tasknotes-plugin .tn-w-8 {
    width: 2rem;
}

.tasknotes-plugin .tn-w-12 {
    width: 3rem;
}

.tasknotes-plugin .tn-w-16 {
    width: 4rem;
}

.tasknotes-plugin .tn-w-20 {
    width: 5rem;
}

.tasknotes-plugin .tn-w-24 {
    width: 6rem;
}

/* Height */
.tasknotes-plugin .tn-h-auto {
    height: auto;
}

.tasknotes-plugin .tn-h-full {
    height: 100%;
}

.tasknotes-plugin .tn-h-screen {
    height: 100vh;
}

.tasknotes-plugin .tn-h-min {
    height: min-content;
}

.tasknotes-plugin .tn-h-max {
    height: max-content;
}

.tasknotes-plugin .tn-h-fit {
    height: fit-content;
}

/* Specific heights */
.tasknotes-plugin .tn-h-0 {
    height: 0;
}

.tasknotes-plugin .tn-h-px {
    height: 1px;
}

.tasknotes-plugin .tn-h-1 {
    height: 0.25rem;
}

.tasknotes-plugin .tn-h-2 {
    height: 0.5rem;
}

.tasknotes-plugin .tn-h-4 {
    height: 1rem;
}

.tasknotes-plugin .tn-h-8 {
    height: 2rem;
}

.tasknotes-plugin .tn-h-12 {
    height: 3rem;
}

.tasknotes-plugin .tn-h-16 {
    height: 4rem;
}

.tasknotes-plugin .tn-h-20 {
    height: 5rem;
}

.tasknotes-plugin .tn-h-24 {
    height: 6rem;
}

/* Min/Max Width */
.tasknotes-plugin .tn-min-w-0 {
    min-width: 0;
}

.tasknotes-plugin .tn-min-w-full {
    min-width: 100%;
}

.tasknotes-plugin .tn-max-w-xs {
    max-width: 20rem;
}

.tasknotes-plugin .tn-max-w-sm {
    max-width: 24rem;
}

.tasknotes-plugin .tn-max-w-md {
    max-width: 28rem;
}

.tasknotes-plugin .tn-max-w-lg {
    max-width: 32rem;
}

.tasknotes-plugin .tn-max-w-xl {
    max-width: 36rem;
}

.tasknotes-plugin .tn-max-w-full {
    max-width: 100%;
}

.tasknotes-plugin .tn-max-w-none {
    max-width: none;
}

/* Min/Max Height */
.tasknotes-plugin .tn-min-h-0 {
    min-height: 0;
}

.tasknotes-plugin .tn-min-h-full {
    min-height: 100%;
}

.tasknotes-plugin .tn-max-h-full {
    max-height: 100%;
}

.tasknotes-plugin .tn-max-h-screen {
    max-height: 100vh;
}

/* ================================================
   Z-INDEX UTILITIES
   ================================================ */

.tasknotes-plugin .tn-z-0 {
    z-index: 0;
}

.tasknotes-plugin .tn-z-10 {
    z-index: 10;
}

.tasknotes-plugin .tn-z-20 {
    z-index: 20;
}

.tasknotes-plugin .tn-z-30 {
    z-index: 30;
}

.tasknotes-plugin .tn-z-40 {
    z-index: 40;
}

.tasknotes-plugin .tn-z-50 {
    z-index: 50;
}

.tasknotes-plugin .tn-z-auto {
    z-index: auto;
}

.tasknotes-plugin .tn-z-sticky {
    z-index: var(--tn-z-sticky);
}

.tasknotes-plugin .tn-z-dropdown {
    z-index: var(--tn-z-dropdown);
}

.tasknotes-plugin .tn-z-modal {
    z-index: var(--tn-z-modal);
}

.tasknotes-plugin .tn-z-tooltip {
    z-index: var(--tn-z-tooltip);
}

/* ================================================
   CURSOR UTILITIES
   ================================================ */

.tasknotes-plugin .tn-cursor-auto {
    cursor: auto;
}

.tasknotes-plugin .tn-cursor-default {
    cursor: default;
}

.tasknotes-plugin .tn-cursor-pointer {
    cursor: var(--cursor);
}

.tasknotes-plugin .tn-cursor-wait {
    cursor: wait;
}

.tasknotes-plugin .tn-cursor-text {
    cursor: text;
}

.tasknotes-plugin .tn-cursor-move {
    cursor: move;
}

.tasknotes-plugin .tn-cursor-help {
    cursor: help;
}

.tasknotes-plugin .tn-cursor-not-allowed {
    cursor: not-allowed;
}

.tasknotes-plugin .tn-cursor-grab {
    cursor: grab;
}

.tasknotes-plugin .tn-cursor-grabbing {
    cursor: grabbing;
}

/* ================================================
   USER SELECT UTILITIES
   ================================================ */

.tasknotes-plugin .tn-select-none {
    user-select: none;
}

.tasknotes-plugin .tn-select-text {
    user-select: text;
}

.tasknotes-plugin .tn-select-all {
    user-select: all;
}

.tasknotes-plugin .tn-select-auto {
    user-select: auto;
}

/* ================================================
   POINTER EVENTS UTILITIES
   ================================================ */

.tasknotes-plugin .tn-pointer-events-none {
    pointer-events: none;
}

.tasknotes-plugin .tn-pointer-events-auto {
    pointer-events: auto;
}

/* ================================================
   TRANSITIONS UTILITIES
   ================================================ */

.tasknotes-plugin .tn-transition-none {
    transition: none;
}

.tasknotes-plugin .tn-transition-fast {
    transition: all var(--tn-transition-fast);
}

.tasknotes-plugin .tn-transition {
    transition: all var(--tn-transition-normal);
}

.tasknotes-plugin .tn-transition-slow {
    transition: all var(--tn-transition-slow);
}

.tasknotes-plugin .tn-transition-colors {
    transition: color var(--tn-transition-normal), background-color var(--tn-transition-normal), border-color var(--tn-transition-normal);
}

.tasknotes-plugin .tn-transition-opacity {
    transition: opacity var(--tn-transition-normal);
}

.tasknotes-plugin .tn-transition-transform {
    transition: transform var(--tn-transition-normal);
}

/* ================================================
   TRANSFORM UTILITIES
   ================================================ */

.tasknotes-plugin .tn-transform {
    transform: var(--tw-transform);
}

.tasknotes-plugin .tn-transform-none {
    transform: none;
}

/* Scale */
.tasknotes-plugin .tn-scale-0 {
    --tw-scale-x: 0;
    --tw-scale-y: 0;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

.tasknotes-plugin .tn-scale-50 {
    --tw-scale-x: 0.5;
    --tw-scale-y: 0.5;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

.tasknotes-plugin .tn-scale-75 {
    --tw-scale-x: 0.75;
    --tw-scale-y: 0.75;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

.tasknotes-plugin .tn-scale-90 {
    --tw-scale-x: 0.9;
    --tw-scale-y: 0.9;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

.tasknotes-plugin .tn-scale-95 {
    --tw-scale-x: 0.95;
    --tw-scale-y: 0.95;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

.tasknotes-plugin .tn-scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

.tasknotes-plugin .tn-scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

.tasknotes-plugin .tn-scale-110 {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

.tasknotes-plugin .tn-scale-125 {
    --tw-scale-x: 1.25;
    --tw-scale-y: 1.25;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

/* ================================================
   OPACITY UTILITIES
   ================================================ */

.tasknotes-plugin .tn-opacity-0 {
    opacity: 0;
}

.tasknotes-plugin .tn-opacity-25 {
    opacity: 0.25;
}

.tasknotes-plugin .tn-opacity-50 {
    opacity: 0.5;
}

.tasknotes-plugin .tn-opacity-75 {
    opacity: 0.75;
}

.tasknotes-plugin .tn-opacity-100 {
    opacity: 1;
}

/* ================================================
   STATE UTILITIES
   ================================================ */

/* Loading State */
.tasknotes-plugin .tn-loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.tasknotes-plugin .tn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: tn-spin 0.8s linear infinite;
}

/* Disabled State */
.tasknotes-plugin .tn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Interactive States */
.tasknotes-plugin .tn-hover-opacity:hover {
    opacity: 0.8;
}

.tasknotes-plugin .tn-hover-scale:hover {
    transform: scale(1.05);
}

.tasknotes-plugin .tn-hover-shadow:hover {
    box-shadow: var(--tn-shadow-hover);
}

/* Focus States */
.tasknotes-plugin .tn-focus-ring:focus {
    outline: 2px solid var(--tn-interactive-accent);
    outline-offset: 2px;
}

.tasknotes-plugin .tn-focus-ring:focus-visible {
    outline: 2px solid var(--tn-interactive-accent);
    outline-offset: 2px;
}

/* ================================================
   ANIMATION UTILITIES
   ================================================ */

.tasknotes-plugin .tn-animate-spin {
    animation: tn-spin 1s linear infinite;
}

.tasknotes-plugin .tn-animate-pulse {
    animation: tn-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.tasknotes-plugin .tn-animate-bounce {
    animation: tn-bounce 1s infinite;
}

.tasknotes-plugin .tn-animate-fade-in {
    animation: tn-fade-in 0.3s ease-out;
}

.tasknotes-plugin .tn-animate-slide-up {
    animation: tn-slide-up 0.3s ease-out;
}

/* Keyframes */
@keyframes tn-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes tn-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes tn-bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

@keyframes tn-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes tn-slide-up {
    0% { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* ================================================
   ACCESSIBILITY UTILITIES
   ================================================ */

/* Screen Reader Only */
.tasknotes-plugin .tn-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tasknotes-plugin .tn-not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ================================================
   RESPONSIVE UTILITIES (MOBILE-FIRST)
   ================================================ */

/* Small screens (tablets, 768px and up) */
@media (min-width: 768px) {
    .tasknotes-plugin .tn-sm-block {
        display: block;
    }
    
    .tasknotes-plugin .tn-sm-hidden {
        display: none;
    }
    
    .tasknotes-plugin .tn-sm-flex {
        display: flex;
    }
    
    .tasknotes-plugin .tn-sm-grid {
        display: grid;
    }
    
    .tasknotes-plugin .tn-sm-flex-row {
        flex-direction: row;
    }
    
    .tasknotes-plugin .tn-sm-flex-col {
        flex-direction: column;
    }
    
    .tasknotes-plugin .tn-sm-text-left {
        text-align: left;
    }
    
    .tasknotes-plugin .tn-sm-text-center {
        text-align: center;
    }
    
    .tasknotes-plugin .tn-sm-text-right {
        text-align: right;
    }
}

/* Medium screens (desktops, 992px and up) */
@media (min-width: 992px) {
    .tasknotes-plugin .tn-md-block {
        display: block;
    }
    
    .tasknotes-plugin .tn-md-hidden {
        display: none;
    }
    
    .tasknotes-plugin .tn-md-flex {
        display: flex;
    }
    
    .tasknotes-plugin .tn-md-grid {
        display: grid;
    }
    
    .tasknotes-plugin .tn-md-flex-row {
        flex-direction: row;
    }
    
    .tasknotes-plugin .tn-md-flex-col {
        flex-direction: column;
    }
    
    .tasknotes-plugin .tn-md-text-left {
        text-align: left;
    }
    
    .tasknotes-plugin .tn-md-text-center {
        text-align: center;
    }
    
    .tasknotes-plugin .tn-md-text-right {
        text-align: right;
    }
}

/* Large screens (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .tasknotes-plugin .tn-lg-block {
        display: block;
    }
    
    .tasknotes-plugin .tn-lg-hidden {
        display: none;
    }
    
    .tasknotes-plugin .tn-lg-flex {
        display: flex;
    }
    
    .tasknotes-plugin .tn-lg-grid {
        display: grid;
    }
    
    .tasknotes-plugin .tn-lg-flex-row {
        flex-direction: row;
    }
    
    .tasknotes-plugin .tn-lg-flex-col {
        flex-direction: column;
    }
    
    .tasknotes-plugin .tn-lg-text-left {
        text-align: left;
    }
    
    .tasknotes-plugin .tn-lg-text-center {
        text-align: center;
    }
    
    .tasknotes-plugin .tn-lg-text-right {
        text-align: right;
    }
}

/* ================================================
   DARK MODE SUPPORT
   ================================================ */

/* Dark mode specific utilities */
.theme-dark .tasknotes-plugin .tn-dark-bg-primary {
    background-color: var(--tn-bg-primary);
}

.theme-dark .tasknotes-plugin .tn-dark-bg-secondary {
    background-color: var(--tn-bg-secondary);
}

.theme-dark .tasknotes-plugin .tn-dark-text-normal {
    color: var(--tn-text-normal);
}

.theme-dark .tasknotes-plugin .tn-dark-text-muted {
    color: var(--tn-text-muted);
}

.theme-dark .tasknotes-plugin .tn-dark-border-normal {
    border-color: var(--tn-border-color);
}

/* ================================================
   REDUCED MOTION SUPPORT
   ================================================ */

@media (prefers-reduced-motion: reduce) {
    .tasknotes-plugin .tn-transition-fast,
    .tasknotes-plugin .tn-transition,
    .tasknotes-plugin .tn-transition-slow,
    .tasknotes-plugin .tn-transition-colors,
    .tasknotes-plugin .tn-transition-opacity,
    .tasknotes-plugin .tn-transition-transform {
        transition: none !important;
    }
    
    .tasknotes-plugin .tn-animate-spin,
    .tasknotes-plugin .tn-animate-pulse,
    .tasknotes-plugin .tn-animate-bounce,
    .tasknotes-plugin .tn-animate-fade-in,
    .tasknotes-plugin .tn-animate-slide-up {
        animation: none !important;
    }
    
    .tasknotes-plugin .tn-hover-scale:hover {
        transform: none !important;
    }
}

/* ================================================
   HIGH CONTRAST SUPPORT
   ================================================ */

@media (prefers-contrast: high) {
    .tasknotes-plugin .tn-border {
        border-width: 2px;
    }
    
    .tasknotes-plugin .tn-focus-ring:focus,
    .tasknotes-plugin .tn-focus-ring:focus-visible {
        outline-width: 3px;
    }
}

/* ================================================
   BUTTON UTILITIES - SCOPED FOR SETTINGS ONLY
   ================================================ */

/* Base Button - Scoped to settings modal */
.mod-settings .tasknotes-plugin .tn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tn-spacing-sm);
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    border: none;
    border-radius: var(--tn-radius-md);
    background: transparent;
    color: var(--tn-text-normal);
    font-family: inherit;
    font-size: var(--tn-font-size-md);
    font-weight: var(--tn-font-weight-medium);
    line-height: 1;
    cursor: var(--cursor);
    user-select: none;
    text-decoration: none;
    outline: none;
    box-shadow: none;
    transition: all var(--tn-transition-fast);
    min-height: var(--tn-button-height-md);
}

.mod-settings .tasknotes-plugin .tn-btn:hover {
    background: var(--tn-interactive-hover);
    border: none;
    box-shadow: none;
}

.mod-settings .tasknotes-plugin .tn-btn:active {
    opacity: 0.8;
    border: none;
    box-shadow: none;
}

.mod-settings .tasknotes-plugin .tn-btn:focus-visible {
    outline: 2px solid var(--tn-interactive-accent);
    outline-offset: 2px;
    border: none;
    box-shadow: none;
}

.mod-settings .tasknotes-plugin .tn-btn:disabled {
    opacity: var(--cs-state-disabled);
    cursor: not-allowed;
    pointer-events: none;
    border: none;
    box-shadow: none;
}

/* Button Sizes */
.mod-settings .tasknotes-plugin .tn-btn--sm {
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    font-size: var(--tn-font-size-sm);
    min-height: var(--tn-button-height-sm);
    border-radius: var(--tn-radius-sm);
}

.mod-settings .tasknotes-plugin .tn-btn--lg {
    padding: var(--tn-spacing-md) var(--tn-spacing-lg);
    font-size: var(--tn-font-size-lg);
    font-weight: var(--tn-font-weight-semibold);
    min-height: var(--tn-button-height-lg);
    border-radius: var(--tn-radius-lg);
}

/* Button Variants */
.mod-settings .tasknotes-plugin .tn-btn--primary {
    background: var(--tn-interactive-accent);
    color: var(--text-on-accent);
}

.mod-settings .tasknotes-plugin .tn-btn--primary:hover {
    background: var(--tn-interactive-accent-hover);
}

.mod-settings .tasknotes-plugin .tn-btn--secondary {
    background: var(--tn-interactive-normal);
    color: var(--tn-text-normal);
}

.mod-settings .tasknotes-plugin .tn-btn--secondary:hover {
    background: var(--tn-interactive-hover);
}

.mod-settings .tasknotes-plugin .tn-btn--ghost {
    background: transparent;
    color: var(--tn-text-muted);
}

.mod-settings .tasknotes-plugin .tn-btn--ghost:hover {
    background: var(--tn-interactive-hover);
    color: var(--tn-text-normal);
}

.mod-settings .tasknotes-plugin .tn-btn--danger {
    background: transparent;
    color: var(--tn-color-error);
}

.mod-settings .tasknotes-plugin .tn-btn--danger:hover {
    background: var(--tn-color-error);
    color: var(--tn-bg-primary);
}

.mod-settings .tasknotes-plugin .tn-btn--success {
    background: transparent;
    color: var(--tn-color-success);
}

.mod-settings .tasknotes-plugin .tn-btn--success:hover {
    background: var(--tn-color-success);
    color: var(--tn-bg-primary);
}

/* Icon-only buttons */
.mod-settings .tasknotes-plugin .tn-btn--icon {
    width: var(--tn-button-height-md);
    height: var(--tn-button-height-md);
    padding: 0;
    border-radius: var(--tn-radius-md);
}

.mod-settings .tasknotes-plugin .tn-btn--icon.tn-btn--sm {
    width: var(--tn-button-height-sm);
    height: var(--tn-button-height-sm);
    border-radius: var(--tn-radius-sm);
}

.mod-settings .tasknotes-plugin .tn-btn--icon.tn-btn--lg {
    width: var(--tn-button-height-lg);
    height: var(--tn-button-height-lg);
    border-radius: var(--tn-radius-lg);
}

/* Pill buttons */
.mod-settings .tasknotes-plugin .tn-btn--pill {
    border-radius: var(--tn-radius-full);
}

/* Full width buttons */
.mod-settings .tasknotes-plugin .tn-btn--full {
    width: 100%;
}

/* Button Groups */
.mod-settings .tasknotes-plugin .tn-btn-group {
    display: flex;
    gap: var(--tn-spacing-xs);
}

.mod-settings .tasknotes-plugin .tn-btn-group .tn-btn {
    flex: 1;
}

.mod-settings .tasknotes-plugin .tn-btn-group--attached {
    gap: 0;
}

.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn {
    border-radius: 0;
}

.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn:first-child {
    border-radius: var(--tn-radius-md) 0 0 var(--tn-radius-md);
}

.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn:last-child {
    border-radius: 0 var(--tn-radius-md) var(--tn-radius-md) 0;
}

.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn:only-child {
    border-radius: var(--tn-radius-md);
}

/* Loading state */
.mod-settings .tasknotes-plugin .tn-btn--loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.mod-settings .tasknotes-plugin .tn-btn--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: tn-spin 0.8s linear infinite;
}


/* ================================================
   CODEMIRROR WIDGET UTILITIES
   ================================================ */

/**
 * Widget Cursor Fix
 *
 * Minimal fix for CodeMirror widget artifacts.
 * Only prevents editing inside widgets and hides visual artifacts.
 * Does NOT hide the editor cursor to preserve normal editing experience.
 *
 * Fixes:
 * - Prevents text selection inside widgets
 * - Prevents contenteditable behavior
 * - Hides widget buffer image artifacts
 *
 * Trade-offs:
 * - Cursor may appear next to widgets (acceptable for normal editing UX)
 * - Widget buffer artifacts are hidden
 *
 * Usage: Add .cm-widget-cursor-fix to your widget container element
 */
.cm-widget-cursor-fix {
    /* Prevent text selection and editing inside widget */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    /* Prevent contenteditable behavior */
    -webkit-user-modify: read-only;
    -moz-user-modify: read-only;

    /* Ensure no text cursor appears inside widget elements */
    caret-color: transparent;
}

/* Hide CodeMirror widgetBuffer image artifacts only */
.cm-content > .cm-line:has(.cm-widget-cursor-fix) img.cm-widgetBuffer {
    display: none !important;
}


/* ===== BASE.CSS ===== */
/* Reduced motion support - scope to TaskNotes components only */
@media (prefers-reduced-motion: reduce) {
    .tasknotes-container *,
    .tasknotes-card *,
    .tasknotes-button * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Button click feedback - scope to TaskNotes buttons only */
.tasknotes-container button:active:not(:disabled),
.tasknotes-button:active:not(:disabled) {
    transform: scale(0.98);
}

/* Performance optimization animations */
@keyframes tn-task-flash {
    0% { 
        background-color: var(--interactive-accent-hover); 
        transform: scale(1.02);
    }
    100% { 
        background-color: transparent; 
        transform: scale(1);
    }
}

@keyframes tn-task-pulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.8; 
        transform: scale(1.01);
    }
}

@keyframes tn-task-fade-in {
    0% { 
        opacity: 0; 
        transform: translateY(-4px);
    }
    100% { 
        opacity: 1; 
        transform: translateY(0);
    }
}

@keyframes tn-tracking-pulse {
    0%, 100% { 
        opacity: 0.3;
        transform: scale(1);
    }
    50% { 
        opacity: 0.6;
        transform: scale(1.01);
    }
}

/* Task update animations */
.tasknotes-plugin .task-flash {
    animation: tn-task-flash 1500ms ease-out;
}

.tasknotes-plugin .task-pulse {
    animation: tn-task-pulse 1000ms ease-in-out;
}

.tasknotes-plugin .task-fade-in {
    animation: tn-task-fade-in 300ms ease-out;
}







/* ===== TASK-CARD-BEM.CSS ===== */
/* =================================================================
   TASKCARD COMPONENT - BEM NAMING CONVENTION & PROPER SCOPING
   ================================================================= */

/* All TaskCard styles are scoped under .tasknotes-plugin for proper isolation */

.tasknotes-plugin .task-card {
    /* Layout & Structure */
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;

    /* Spacing & Sizing - Refined spacing for better visual breathing room */
    padding: var(--tn-spacing-md) var(--tn-spacing-lg);
    margin-bottom: 1px;

    /* Visual Styling - Subtle depth with minimal shadow */
    background-color: transparent;
    border: none;
    border-radius: var(--tn-radius-xs);
    box-shadow: none;

    /* Interactions & Accessibility - Smooth transitions */
    transition: all var(--tn-transition-fast);
    outline: none;
    role: listitem;
    tabindex: 0;
}

.tasknotes-plugin .task-card:hover {
    background-color: var(--background-modifier-hover);
}

/* Prevent parent hover when hovering over subtasks or blocking tasks */
.tasknotes-plugin .task-card:has(.task-card__subtasks:hover, .task-card__blocking:hover) {
    background-color: transparent;
    box-shadow: none;
}

.tasknotes-plugin .task-card:focus {
    background-color: var(--background-modifier-hover);
    outline: 2px solid var(--background-modifier-border-focus);
    outline-offset: -2px;
}

.tasknotes-plugin .task-card:focus:not(:focus-visible) {
    outline: none;
}

.tasknotes-plugin .task-card:last-child {
    margin-bottom: 0;
}

/* Remove border radius for cleaner list appearance */
.tasknotes-plugin .task-card:first-child,
.tasknotes-plugin .task-card:last-child,
.tasknotes-plugin .task-card:first-child:last-child {
    border-radius: 0;
}

/* =================================================================
   TASKCARD ELEMENTS (BEM __element)
   ================================================================= */

.tasknotes-plugin .task-card__main-row {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
    width: 100%;
    position: relative;
}

.tasknotes-plugin .task-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tasknotes-plugin .task-card__title {
    font-size: var(--tn-font-size-lg);
    font-weight: 400;
    line-height: 1.4;
    color: var(--tn-text-normal);
    margin: 0;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    transition: color var(--tn-transition-fast);
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .task-card__title-text {
    flex: 1;
    min-width: 0;
}

.tasknotes-plugin .task-card__metadata {
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-muted);
    line-height: 1.3;
    margin: 0;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 0;
}

.tasknotes-plugin .task-card__metadata-item {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
    white-space: nowrap;
}

.tasknotes-plugin .task-card__metadata-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
    padding: 3px 8px;
    border-radius: var(--tn-radius-md);
    font-size: var(--tn-font-size-sm);
    line-height: 1.2;
    font-weight: 500;
    background: var(--background-secondary);
    color: var(--text-muted);
    border: 1px solid var(--background-modifier-border);
    transition: background var(--tn-transition-fast), border-color var(--tn-transition-fast);
}

.tasknotes-plugin .task-card__metadata-pill:hover {
    background: var(--background-modifier-hover);
    border-color: var(--background-modifier-border-hover);
}

.tasknotes-plugin .task-card__metadata-pill--blocked {
    background: color-mix(in srgb, var(--tn-color-error) 75%, var(--tn-bg-primary));
    color: var(--tn-bg-primary);
    border-color: color-mix(in srgb, var(--tn-color-error) 85%, var(--tn-bg-primary));
    padding-inline: var(--tn-spacing-md);
}

.tasknotes-plugin .task-card__metadata-pill--blocked:hover {
    background: var(--tn-color-error);
    color: var(--tn-bg-primary);
    border-color: var(--tn-color-error);
}

.tasknotes-plugin .task-card__metadata-pill--blocking {
    background: transparent;
    color: var(--tn-color-error);
    border-color: color-mix(in srgb, var(--tn-color-error) 70%, transparent);
}


.tasknotes-plugin .task-card__tag {
    background: var(--tn-bg-secondary);
    color: var(--tn-text-muted);
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    border-radius: var(--tn-radius-xs);
    font-size: var(--tn-font-size-sm);
    font-weight: 400;
    border: none;
    white-space: nowrap;
}

.tasknotes-plugin .task-card__due-date {
    color: var(--tn-color-success);
    font-size: var(--tn-font-size-sm);
    font-weight: 400;
    padding: var(--tn-spacing-xs) var(--tn-spacing-xs);
    border-radius: var(--tn-radius-xs);
    background: color-mix(in srgb, var(--tn-color-success) 15%, var(--tn-bg-primary));
}

.tasknotes-plugin .task-card__due-date--overdue {
    color: var(--tn-color-error);
    background: color-mix(in srgb, var(--tn-color-error) 15%, var(--tn-bg-primary));
}

.tasknotes-plugin .task-card__due-date--today {
    color: var(--tn-color-warning);
    background: color-mix(in srgb, var(--tn-color-warning) 15%, var(--tn-bg-primary));
}

.tasknotes-plugin .task-card__priority-badge {
    display: none; /* Hide priority badges in favor of dots */
}

/* Simplified info display - no progressive disclosure for Todoist style */

/* Drag handle indicator */
.tasknotes-plugin .task-card__drag-handle {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: repeating-linear-gradient(
        to bottom,
        var(--tn-text-faint) 0px,
        var(--tn-text-faint) 2px,
        transparent 2px,
        transparent 4px
    );
    opacity: 0;
    transition: opacity var(--tn-transition-fast);
    border-radius: var(--tn-radius-xs);
}

.tasknotes-plugin .task-card[draggable="true"]:hover .task-card__drag-handle {
    opacity: 0.5;
}

.tasknotes-plugin .task-card[draggable="true"]:active .task-card__drag-handle {
    opacity: 0.8;
}

/* Container queries for adaptive layouts */
@container (max-width: 300px) {
    .tasknotes-plugin .task-card {
        padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    }

    .tasknotes-plugin .task-card__quick-actions {
        gap: 2px;
    }

    .tasknotes-plugin .task-card__quick-action {
        width: 20px;
        height: 20px;
    }

    .tasknotes-plugin .task-card__metadata {
        gap: var(--tn-spacing-xs);
    }
}

.tasknotes-plugin .task-card__status-dot {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid color-mix(in srgb, var(--tn-border-color) 80%, transparent);
    background-color: transparent;
    transition: all var(--tn-transition-fast);
    position: relative;
    box-shadow: none;
}

.tasknotes-plugin .task-card__status-dot:hover {
    background-color: color-mix(in srgb, var(--next-status-color, var(--tn-interactive-accent)) 30%, transparent);
    border-color: var(--next-status-color, var(--tn-interactive-accent));
}

/* Completed status - filled circle with status color */
.tasknotes-plugin .task-card--completed > .task-card__main-row .task-card__status-dot {
    background-color: var(--current-status-color, var(--tn-color-success));
    border-color: var(--current-status-color, var(--tn-color-success));
    box-shadow: none;
    position: relative;
}

.tasknotes-plugin .task-card--completed > .task-card__main-row .task-card__status-dot:hover {
    background-color: color-mix(in srgb, var(--next-status-color, var(--tn-interactive-accent)) 50%, var(--current-status-color, var(--tn-color-success)));
    border-color: var(--next-status-color, var(--tn-interactive-accent));
}

/* Completion animation - subtle pulse when task is completed */
@keyframes status-complete {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--current-status-color, var(--tn-color-success)) 40%, transparent);
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--current-status-color, var(--tn-color-success)) 0%, transparent);
    }
    100% {
        transform: scale(1);
        box-shadow: none;
    }
}

.tasknotes-plugin .task-card--completed.task-card--just-completed > .task-card__main-row .task-card__status-dot {
    animation: status-complete 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Status dot with icon mode - uses Lucide icons from theme */
.tasknotes-plugin .task-card__status-dot--icon {
    border: none;
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tasknotes-plugin .task-card__status-dot--icon svg {
    width: 18px;
    height: 18px;
    color: var(--current-status-color, var(--tn-text-muted));
    stroke-width: 2;
}

.tasknotes-plugin .task-card__status-dot--icon:hover svg {
    color: var(--next-status-color, var(--tn-interactive-accent));
}

/* Completed state for icon mode */
.tasknotes-plugin .task-card--completed > .task-card__main-row .task-card__status-dot--icon {
    background-color: transparent;
}

.tasknotes-plugin .task-card--completed > .task-card__main-row .task-card__status-dot--icon svg {
    color: var(--current-status-color, var(--tn-color-success));
}

.tasknotes-plugin .task-card--completed > .task-card__main-row .task-card__status-dot--icon:hover svg {
    color: var(--next-status-color, var(--tn-interactive-accent));
}

/* =================================================================
   BADGE AREA - Groups secondary indicators (recurring, reminder, project)
   ================================================================= */

.tasknotes-plugin .task-card__badges {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
    flex-shrink: 0;
}

/* Hide badges container when empty */
.tasknotes-plugin .task-card__badges:empty {
    display: none;
}

.tasknotes-plugin .task-card__recurring-indicator {
    width: 14px;
    height: 14px;
    color: var(--tn-text-muted);
    opacity: 0.7;
    display: none; /* Hidden by default, shown via modifier */
    align-items: center;
    justify-content: center;
    transition: all var(--tn-transition-fast);
    border-radius: var(--tn-radius-sm);
    flex-shrink: 0;
}

.tasknotes-plugin .task-card__recurring-indicator:hover {
    opacity: 1;
    color: var(--interactive-accent);
    background: var(--background-modifier-hover);
}

.tasknotes-plugin .task-card__recurring-indicator svg {
    width: 14px;
    height: 14px;
}

/* Recurrence instance statistics pills */
.tasknotes-plugin .task-card__metadata-pill--completed-instances {
    color: var(--text-success);
}

.tasknotes-plugin .task-card__metadata-pill--skipped-instances {
    color: var(--text-muted);
    opacity: 0.7;
}

/* Reminder indicator */
.tasknotes-plugin .task-card__reminder-indicator {
    width: 14px;
    height: 14px;
    color: var(--tn-text-muted);
    opacity: 0.7;
    transition: all var(--tn-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tn-radius-sm);
    flex-shrink: 0;
}

.tasknotes-plugin .task-card__reminder-indicator:hover {
    opacity: 1;
    color: var(--interactive-accent);
    background: var(--background-modifier-hover);
}

.tasknotes-plugin .task-card__reminder-indicator svg {
    width: 14px;
    height: 14px;
}

/* Project indicator */
.tasknotes-plugin .task-card__project-indicator {
    width: 14px;
    height: 14px;
    color: var(--tn-text-muted);
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tn-radius-sm);
    transition: all var(--tn-transition-fast);
    flex-shrink: 0;
}

.tasknotes-plugin .task-card__project-indicator:hover {
    opacity: 1;
    color: var(--interactive-accent);
    background: var(--background-modifier-hover);
}

.tasknotes-plugin .task-card__project-indicator svg {
    width: 14px;
    height: 14px;
}

/* Chevron for expandable subtasks */
.tasknotes-plugin .task-card__chevron {
    width: 14px;
    height: 14px;
    color: var(--tn-text-muted);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tn-radius-sm);
    transition: all var(--tn-transition-fast);
    flex-shrink: 0;
}

.tasknotes-plugin .task-card__chevron:hover {
    opacity: 1;
    color: var(--interactive-accent);
    background: var(--background-modifier-hover);
}

/* In left mode, chevrons are always visible (like group chevrons) */
.tasknotes-plugin .task-card.task-card--chevron-left .task-card__chevron {
    opacity: 1;
    position: absolute;
    left: calc(-1 * var(--tn-spacing-lg) - 14px);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
}

.tasknotes-plugin .task-card:hover .task-card__chevron {
    opacity: 1;
}

.tasknotes-plugin .task-card__chevron svg {
    width: 14px;
    height: 14px;
    transition: transform var(--tn-transition-fast);
}

.tasknotes-plugin .task-card__chevron--expanded svg {
    transform: rotate(90deg);
}

/* Blocking toggle */
.tasknotes-plugin .task-card__blocking-toggle {
    width: 14px;
    height: 14px;
    color: var(--tn-text-muted);
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--tn-transition-fast), background var(--tn-transition-fast), opacity var(--tn-transition-fast);
    border-radius: var(--tn-radius-sm);
    flex-shrink: 0;
}

.tasknotes-plugin .task-card__blocking-toggle:hover {
    opacity: 1;
    color: var(--interactive-accent);
    background: var(--background-modifier-hover);
}

.tasknotes-plugin .task-card__blocking-toggle svg {
    width: 14px;
    height: 14px;
}

.tasknotes-plugin .task-card__blocking-toggle--expanded {
    color: var(--interactive-accent);
    opacity: 1;
}

.tasknotes-plugin .task-card__blocking-toggle.is-hidden {
    display: none;
}

/* Left-position variant for subtask chevron */
.tasknotes-plugin .task-card.task-card--chevron-left {
    /* Reserve gutter for chevron plus spacing */
    padding-left: calc(var(--tn-spacing-lg) + 20px);
}

/* Ensure nested cards in left mode also reserve chevron gutter */
.tasknotes-plugin .task-card__subtasks .task-card.task-card--chevron-left {
    padding-left: calc(var(--tn-spacing-md) + 20px);
}

.tasknotes-plugin .task-card__subtasks {
    margin-left: 24px;
    margin-top: 6px;
    border-left: 2px solid color-mix(in srgb, var(--tn-border-color) 40%, transparent);
    padding-left: 14px;
    position: relative;
    z-index: 1;
}

.tasknotes-plugin .task-card__subtasks::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--tn-interactive-accent) 30%, transparent),
        transparent
    );
    opacity: 0;
    transition: opacity var(--tn-transition-fast);
}

.tasknotes-plugin .task-card:hover .task-card__subtasks::before {
    opacity: 1;
}

.tasknotes-plugin .task-card__subtasks .task-card {
    margin-bottom: 3px;
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
}

.tasknotes-plugin .task-card__subtasks .task-card:last-child {
    margin-bottom: 0;
}

.tasknotes-plugin .task-card--subtask {
    background: color-mix(in srgb, var(--tn-bg-secondary) 25%, transparent);
    border-radius: var(--tn-radius-sm);
    backdrop-filter: blur(2px);
}

.tasknotes-plugin .task-card__blocking {
    margin-left: 24px;
    margin-top: 6px;
    border-left: 2px dashed color-mix(in srgb, var(--tn-color-error) 30%, transparent);
    padding-left: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    z-index: 1;
}

.tasknotes-plugin .task-card__blocking::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--tn-color-error) 30%, transparent),
        transparent
    );
    opacity: 0;
    transition: opacity var(--tn-transition-fast);
}

.tasknotes-plugin .task-card:hover .task-card__blocking::before {
    opacity: 1;
}

.tasknotes-plugin .task-card--dependency {
    background: color-mix(in srgb, var(--tn-color-error) 4%, transparent);
    border-radius: var(--tn-radius-sm);
    border-left: 2px solid color-mix(in srgb, var(--tn-color-error) 20%, transparent);
    padding-left: calc(var(--tn-spacing-md) - 2px);
}

.tasknotes-plugin .task-card__blocking-loading,
.tasknotes-plugin .task-card__blocking-empty {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    font-style: italic;
}

.tasknotes-plugin .task-card--subtask:hover {
    background: color-mix(in srgb, var(--tn-interactive-hover) 60%, var(--tn-bg-secondary));
}

.tasknotes-plugin .task-card__subtasks-loading {
    margin-left: 20px;
    margin-top: 4px;
    padding: var(--tn-spacing-sm);
    color: var(--tn-text-muted);
    font-size: var(--tn-font-size-sm);
    font-style: italic;
}

.tasknotes-plugin .task-card__context-menu {
    width: 14px;
    height: 14px;
    color: var(--tn-text-faint);
    opacity: 0;
    transition: all var(--tn-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tn-radius-sm);
    flex-shrink: 0;
    margin-left: auto;
}

.tasknotes-plugin .task-card__context-menu:hover {
    color: var(--tn-text-normal);
    background: var(--tn-interactive-hover);
}

.tasknotes-plugin .task-card:hover .task-card__context-menu {
    opacity: 0.6;
}

.tasknotes-plugin .task-card__context-menu:hover {
    opacity: 1 !important;
}

.tasknotes-plugin .task-card__context-menu svg {
    width: 14px;
    height: 14px;
}

/* Quick actions removed for Todoist-style simplicity */

/* =====================================================================
   HOVER CONTEXT MENU INTERACTIONS
   ===================================================================== */


/* Enhanced priority dot hover for context menu */
.tasknotes-plugin .task-card__priority-dot {
    transition: all var(--tn-transition-fast);
    box-shadow: none;
}

.tasknotes-plugin .task-card__priority-dot:hover {
    opacity: 0.8;
}

/* Hoverable date text elements */
.tasknotes-plugin .task-card__metadata-date {
    transition: all var(--tn-transition-fast);
    border-radius: var(--tn-radius-sm);
    padding: 3px 6px;
    margin: -3px -6px;
    position: relative;
}

.tasknotes-plugin .task-card__metadata-date:hover {
    background: var(--background-modifier-hover);
    color: var(--interactive-accent);
}

.tasknotes-plugin .task-card__metadata-date--due:hover {
    background: color-mix(in srgb, var(--tn-color-error) 12%, transparent);
    color: var(--tn-color-error);
}

.tasknotes-plugin .task-card__metadata-date--scheduled:hover {
    background: color-mix(in srgb, var(--tn-color-info) 12%, transparent);
    color: var(--tn-color-info);
}

/* Overdue due dates - use the hover background color for text */
.tasknotes-plugin .task-card__metadata-date--overdue {
    color: var(--tn-color-error);
}

/* Past scheduled dates - use the hover background color for text */
.tasknotes-plugin .task-card__metadata-date--past {
    color: var(--tn-color-info);
}

/* Project links */
.tasknotes-plugin .task-card__project-link {
    color: var(--interactive-accent);
    text-decoration: none;
    transition: all var(--tn-transition-fast);
    border-radius: var(--tn-radius-sm);
    padding: 2px 4px;
    margin: -2px -4px;
    display: inline-block;
    position: relative;
    z-index: 1;
}

.tasknotes-plugin .task-card__project-link:hover,
.tasknotes-plugin .task-card__project-link:focus {
    background: var(--background-modifier-hover);
    color: var(--interactive-accent-hover);
    outline: none;
    box-shadow: 0 2px 4px color-mix(in srgb, var(--tn-shadow-color, black) 8%, transparent);
}

.tasknotes-plugin .task-card__project-link:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--interactive-accent) 30%, transparent),
                0 2px 4px color-mix(in srgb, var(--tn-shadow-color, black) 8%, transparent);
}

.tasknotes-plugin .task-card__project-link.internal-link {
    /* Ensure consistent styling with Obsidian's internal links */
    color: var(--link-color);
}

.tasknotes-plugin .task-card__project-link.internal-link:hover,
.tasknotes-plugin .task-card__project-link.internal-link:focus {
    color: var(--link-color-hover);
}


/* =================================================================
   TASKCARD MODIFIERS (BEM --modifier)
   ================================================================= */

/* Completion State - Use theme colors */
.tasknotes-plugin .task-card--completed > .task-card__main-row {
    opacity: 0.6;
}

.tasknotes-plugin .task-card--completed > .task-card__main-row .task-card__title {
    text-decoration: line-through;
    color: var(--tn-text-muted);
}

/* Skipped State - Muted appearance for skipped recurring instances */
.tasknotes-plugin .task-card--skipped {
    opacity: 0.5;
}

.tasknotes-plugin .task-card--skipped > .task-card__main-row .task-card__title {
    text-decoration: line-through;
    color: var(--text-muted);
}

.tasknotes-plugin .task-card--skipped > .task-card__main-row .task-card__status-dot {
    background-color: rgba(128, 128, 128, 0.4);
    border-color: var(--text-faint);
    border-style: dashed;
}

/* Archived State */
.tasknotes-plugin .task-card--archived {
    opacity: 0.5;
    background-color: transparent;
}

/* Active Time Tracking */
.tasknotes-plugin .task-card--actively-tracked {
    position: relative;
}

.tasknotes-plugin .task-card--actively-tracked::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid var(--tn-color-info);
    border-radius: var(--tn-radius-xs);
    opacity: 0.6;
    animation: pulse-tracking 2s infinite;
}

@keyframes pulse-tracking {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.3; }
}

/* Recurring Task */
.tasknotes-plugin .task-card--recurring .task-card__recurring-indicator {
    display: flex;
}

/* Skipped recurring instance styling */
.tasknotes-plugin .recurring-skipped,
.tasknotes-plugin .task-card--recurring-skipped {
    opacity: 0.6;
}

.tasknotes-plugin .recurring-skipped .task-card__title,
.tasknotes-plugin .task-card--recurring-skipped .task-card__title {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Priority indicators - Use user's priority settings */
.tasknotes-plugin .task-card__priority-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--priority-color, transparent);
    margin: 0 var(--tn-spacing-xs);
}

/* Dynamic priority colors using CSS variables set by PriorityManager */
/* Use child combinator (>) to prevent subtasks from inheriting parent priority styling */
.tasknotes-plugin .task-card[data-priority] > .task-card__main-row .task-card__priority-dot {
    background-color: var(--current-priority-color, var(--tn-text-muted));
}

/* Fallback priority colors using existing system */
/* Use child combinator (>) to prevent subtasks from inheriting parent priority styling */
.tasknotes-plugin .task-card--priority-high > .task-card__main-row .task-card__priority-dot {
    background-color: var(--priority-high-color, var(--tn-color-error));
}

.tasknotes-plugin .task-card--priority-medium > .task-card__main-row .task-card__priority-dot {
    background-color: var(--priority-medium-color, var(--tn-interactive-accent));
}

.tasknotes-plugin .task-card--priority-normal > .task-card__main-row .task-card__priority-dot {
    background-color: var(--priority-normal-color, var(--tn-interactive-accent));
}

.tasknotes-plugin .task-card--priority-low > .task-card__main-row .task-card__priority-dot {
    background-color: var(--priority-low-color, var(--tn-text-muted));
}

/* Status colors - Use dynamic status colors from user settings */
/* Use child combinator (>) to prevent subtasks from inheriting parent status styling */
.tasknotes-plugin .task-card[data-status] > .task-card__main-row .task-card__status-dot {
    border-color: var(--current-status-color, var(--tn-border-color));
}


/* Minimal animations - Use theme colors */
.tasknotes-plugin .task-card--updated {
    background-color: var(--tn-interactive-hover);
    transition: background-color var(--tn-transition-fast);
}

/* =================================================================
   RESPONSIVE DESIGN
   ================================================================= */

/* Mobile & Touch Devices - Use theme colors */
@media (pointer: coarse) {
    .tasknotes-plugin .task-card {
        padding: 12px 16px;
        min-height: 44px;
        margin-bottom: 2px;
    }

    .tasknotes-plugin .task-card:active {
        background-color: var(--tn-interactive-hover);
    }

    /* Larger touch targets */
    .tasknotes-plugin .task-card__context-menu {
        width: 24px;
        height: 24px;
        opacity: 1;
    }

    .tasknotes-plugin .task-card__context-menu svg {
        width: 16px;
        height: 16px;
    }

    /* Larger status dots for touch */
    .tasknotes-plugin .task-card__status-dot {
        width: 18px;
        height: 18px;
    }
}

/* High density displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .tasknotes-plugin .task-card {
        border-left-width: 1px;
    }

    .tasknotes-plugin .task-card::before {
        width: 1px;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .tasknotes-plugin .task-card,
    .tasknotes-plugin .task-card *,
    .tasknotes-plugin .task-card::before,
    .tasknotes-plugin .task-card::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .tasknotes-plugin .task-card--dragging {
        animation: none;
    }
}

/* Print styles */
@media print {
    .tasknotes-plugin .task-card {
        break-inside: avoid;
        page-break-inside: avoid;
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    .tasknotes-plugin .task-card__quick-actions,
    .tasknotes-plugin .task-card__context-menu,
    .tasknotes-plugin .task-card__enhanced-info {
        display: none !important;
    }
}

/* Compact mode for smaller screens - Todoist style */
@media (max-width: 768px) {
    .tasknotes-plugin .task-card {
        padding: 10px 14px;
    }

    .tasknotes-plugin .task-card__content {
        gap: 1px;
    }

    .tasknotes-plugin .task-card__title {
        font-size: 13px;
    }

    .tasknotes-plugin .task-card__metadata {
        font-size: 11px;
    }
}

/* =================================================================
   TASKCARD DRAG AND DROP STATES
   ================================================================= */

/* Draggable task cards */
.tasknotes-plugin .task-card[draggable="true"] {
    transition: all var(--tn-transition-fast);
}

.tasknotes-plugin .task-card[draggable="true"]:hover {
    cursor: grab;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--tn-shadow-color) 15%, transparent);
}

.tasknotes-plugin .task-card[draggable="true"]:active {
    cursor: grabbing;
    transform: scale(0.98) rotate(1deg);
}

/* Enhanced dragging state */
.tasknotes-plugin .task-card--dragging {
    opacity: 0.8;
    transform: rotate(5deg) scale(1.02);
    cursor: grabbing;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--tn-shadow-color) 30%, transparent),
                0 0 0 1px color-mix(in srgb, var(--tn-interactive-accent) 50%, transparent);
    transition: none;
    animation: drag-pulse 2s infinite ease-in-out;
}

@keyframes drag-pulse {
    0%, 100% {
        box-shadow: 0 8px 32px color-mix(in srgb, var(--tn-shadow-color) 30%, transparent),
                    0 0 0 1px color-mix(in srgb, var(--tn-interactive-accent) 50%, transparent);
    }
    50% {
        box-shadow: 0 12px 40px color-mix(in srgb, var(--tn-shadow-color) 40%, transparent),
                    0 0 0 2px color-mix(in srgb, var(--tn-interactive-accent) 70%, transparent);
    }
}

/* Drag preview ghost */
.tasknotes-plugin .task-card--drag-ghost {
    opacity: 0.3;
    transform: scale(0.95);
    transition: all var(--tn-transition-fast);
    pointer-events: none;
    filter: blur(1px);
}

/* Drop zone feedback */
.tasknotes-plugin .task-card--drop-target {
    border: 2px dashed var(--tn-interactive-accent);
    background: color-mix(in srgb, var(--tn-interactive-accent) 5%, var(--tn-bg-primary));
    transform: scale(1.02);
    transition: all var(--tn-transition-fast);
}

.tasknotes-plugin .task-card--drop-target::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: var(--tn-radius-sm);
    background: linear-gradient(
        45deg,
        transparent 25%,
        color-mix(in srgb, var(--tn-interactive-accent) 10%, transparent) 25%,
        color-mix(in srgb, var(--tn-interactive-accent) 10%, transparent) 50%,
        transparent 50%,
        transparent 75%,
        color-mix(in srgb, var(--tn-interactive-accent) 10%, transparent) 75%
    );
    background-size: 8px 8px;
    animation: drop-zone-shimmer 1s linear infinite;
    z-index: -1;
}

@keyframes drop-zone-shimmer {
    0% { background-position: 0 0; }
    100% { background-position: 8px 8px; }
}

/* =================================================================
   LAYOUT MODIFIERS - Inline Mode for Task Link Widgets
   ================================================================= */

/* Inline layout - single line, compact display for editor task links */
.tasknotes-plugin .task-card--layout-inline {
    /* Use inline display to respect line boundaries */
    display: inline !important;

    /* Minimal padding - no indentation needed in inline mode */
    padding: 2px 0;
    margin: 0;
    margin-bottom: 0;

    /* Visual style - transparent background */
    background-color: transparent;
    border: none;
    border-radius: 0;

    /* Size constraints */
    min-height: auto;

    /* Prevent text from breaking into multiple lines */
    white-space: nowrap;

    /* Force inline behavior */
    vertical-align: baseline;
}

.tasknotes-plugin .task-card--layout-inline:hover {
    background-color: transparent;
}

/* Disable drag cursor for inline tasks - they're not draggable */
.tasknotes-plugin .task-card--layout-inline[draggable="true"]:hover {
    cursor: default;
    transform: none;
    box-shadow: none;
}

.tasknotes-plugin .task-card--layout-inline[draggable="true"]:active {
    cursor: default;
    transform: none;
}

/* Remove chevron gutter padding in inline mode */
.tasknotes-plugin .task-card--layout-inline,
.tasknotes-plugin .task-card--layout-inline.task-card--chevron-left {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Main row in inline mode - horizontal layout */
.tasknotes-plugin .task-card--layout-inline .task-card__main-row {
    display: inline !important;
    vertical-align: baseline;
}

/* Content in inline mode - horizontal, truncated */
.tasknotes-plugin .task-card--layout-inline .task-card__content {
    display: inline !important;
    vertical-align: baseline;
}

/* Title in inline mode - truncate with ellipsis */
.tasknotes-plugin .task-card--layout-inline .task-card__title {
    display: inline !important;
    font-size: inherit; /* Use editor's font size */
    font-weight: 400;
    margin: 0;
    vertical-align: baseline;
}

/* Title text in inline mode - ensure ellipsis works */
.tasknotes-plugin .task-card--layout-inline .task-card__title-text {
    display: inline !important;
    vertical-align: baseline;
}

/* Metadata in inline mode - stays on same line, scrolls if needed */
.tasknotes-plugin .task-card--layout-inline .task-card__metadata {
    display: inline-block !important;
    font-size: var(--tn-font-size-sm);
    margin: 0;
    padding: 0;
    vertical-align: text-bottom;
    position: relative;
    top: -0.15em;
    white-space: nowrap;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

/* Only apply spacing and min-width when metadata has content - prevents blank space when empty */
.tasknotes-plugin .task-card--layout-inline .task-card__metadata:not(:empty) {
    margin-left: 0.5em;
    min-width: min(30%, 300px);
}

.tasknotes-plugin .task-card--layout-inline .task-card__metadata:hover {
    scrollbar-width: thin;
    scrollbar-color: var(--background-modifier-border) transparent;
}

.tasknotes-plugin .task-card--layout-inline .task-card__metadata::-webkit-scrollbar {
    height: 0;
}

.tasknotes-plugin .task-card--layout-inline .task-card__metadata:hover::-webkit-scrollbar {
    height: 4px;
}

.tasknotes-plugin .task-card--layout-inline .task-card__metadata::-webkit-scrollbar-track {
    background: transparent;
}

.tasknotes-plugin .task-card--layout-inline .task-card__metadata::-webkit-scrollbar-thumb {
    background: var(--background-modifier-border);
    border-radius: 2px;
}

/* Wrapper for metadata items in inline mode */
.tasknotes-plugin .task-card--layout-inline .task-card__metadata > * {
    display: inline;
    vertical-align: baseline;
}

.tasknotes-plugin .task-card--layout-inline .task-card__metadata > *:last-child {
    margin-right: 0 !important;
}

/* Smaller status dot in inline mode */
.tasknotes-plugin .task-card--layout-inline .task-card__status-dot {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.25em;
    border-width: 1.5px;
    vertical-align: baseline;
    transform: translateY(0.1em);
}

/* Smaller priority dot in inline mode */
.tasknotes-plugin .task-card--layout-inline .task-card__priority-dot {
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    margin: 0 0.25em 0 0;
    border-width: 1.5px;
    vertical-align: baseline;
    transform: translateY(0.05em);
}

/* Compact indicators in inline mode */
.tasknotes-plugin .task-card--layout-inline .task-card__recurring-indicator,
.tasknotes-plugin .task-card--layout-inline .task-card__reminder-indicator {
    display: inline-block;
    position: static;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.15em;
    vertical-align: baseline;
}

/* Compact context menu in inline mode */
.tasknotes-plugin .task-card--layout-inline .task-card__context-menu {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    padding: 0;
    vertical-align: baseline;
}

/* Compact date displays in inline mode */
.tasknotes-plugin .task-card--layout-inline .task-card__metadata-date {
    display: inline;
    font-size: var(--tn-font-size-sm);
    padding: 0;
    margin: 0 0.75em 0 0;
    vertical-align: baseline;
}

/* Metadata property in inline mode */
.tasknotes-plugin .task-card--layout-inline .task-card__metadata-property {
    display: inline;
    font-size: var(--tn-font-size-sm);
    padding: 0;
    margin: 0 0.75em 0 0;
    vertical-align: baseline;
}

/* Metadata pills in inline mode */
.tasknotes-plugin .task-card--layout-inline .task-card__metadata-pill {
    display: inline;
    margin: 0 0.75em 0 0;
    vertical-align: baseline;
}

/* Metadata separators in inline mode */
.tasknotes-plugin .task-card--layout-inline .task-card__metadata-separator {
    display: inline;
    vertical-align: baseline;
}

/* SVG icons in inline mode - ensure they don't affect line height */
.tasknotes-plugin .task-card--layout-inline svg {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    vertical-align: baseline;
    transform: translateY(0.1em);
}

/* Hide subtask-related elements in inline mode */
.tasknotes-plugin .task-card--layout-inline .task-card__subtasks,
.tasknotes-plugin .task-card--layout-inline .task-card__blocking {
    display: none;
}

/* Ensure inline cards don't have bottom margin */
.tasknotes-plugin .task-card--layout-inline:last-child {
    margin-bottom: 0;
}

/* =================================================================
   COMPACT LAYOUT (for future use)
   ================================================================= */

/* Compact layout - smaller padding but still vertical */
.tasknotes-plugin .task-card--layout-compact {
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
}

.tasknotes-plugin .task-card--layout-compact .task-card__main-row {
    gap: var(--tn-spacing-xs);
}

.tasknotes-plugin .task-card--layout-compact .task-card__title {
    font-size: var(--tn-font-size-sm);
}

.tasknotes-plugin .task-card--layout-compact .task-card__metadata {
    font-size: var(--tn-font-size-xs);
    gap: var(--tn-spacing-xs);
}

.tasknotes-plugin .task-card--layout-compact .task-card__status-dot {
    width: 14px;
    height: 14px;
}

.tasknotes-plugin .task-card--layout-compact .task-card__priority-dot {
    width: 8px;
    height: 8px;
    margin: 0 var(--tn-spacing-xs);
}

.tasknotes-plugin .task-card--layout-compact .task-card__badges {
    gap: 2px;
}

.tasknotes-plugin .task-card--layout-compact .task-card__recurring-indicator,
.tasknotes-plugin .task-card--layout-compact .task-card__reminder-indicator,
.tasknotes-plugin .task-card--layout-compact .task-card__project-indicator,
.tasknotes-plugin .task-card--layout-compact .task-card__chevron,
.tasknotes-plugin .task-card--layout-compact .task-card__blocking-toggle {
    width: 12px;
    height: 12px;
}

.tasknotes-plugin .task-card--layout-compact .task-card__context-menu {
    width: 12px;
    height: 12px;
}

/* =================================================================
   SELECTION MODE STYLES
   ================================================================= */


/* Selected task card styling */
.tasknotes-plugin .task-card--selected {
    background-color: color-mix(in srgb, var(--interactive-accent) 15%, transparent);
    border-radius: var(--tn-radius-sm);
}

.tasknotes-plugin .task-card--selected:hover {
    background-color: color-mix(in srgb, var(--interactive-accent) 20%, transparent);
}

/* Primary selected task (first selected) gets a border */
.tasknotes-plugin .task-card--selected-primary {
    box-shadow: inset 0 0 0 2px var(--interactive-accent);
}


/* Selection indicator floating badge */
.tasknotes-plugin .tn-selection-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--interactive-accent);
    color: var(--text-on-accent);
    padding: 8px 16px;
    border-radius: var(--tn-radius-md);
    font-size: var(--tn-font-size-sm);
    font-weight: 500;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--tn-shadow-color, black) 20%, transparent);
    z-index: 100;
    display: none;
    animation: tn-selection-indicator-appear 0.2s ease-out;
    transition: background-color var(--tn-transition-fast);
}

.tasknotes-plugin .tn-selection-indicator:hover {
    background-color: var(--interactive-accent-hover);
}

@keyframes tn-selection-indicator-appear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Kanban card wrapper selection state */
.tasknotes-plugin .kanban-view__card-wrapper--selected {
    background-color: color-mix(in srgb, var(--interactive-accent) 15%, transparent);
    border-radius: var(--tn-radius-sm);
}

/* Primary selected kanban card wrapper gets a border */
.tasknotes-plugin .kanban-view__card-wrapper--selected-primary {
    box-shadow: inset 0 0 0 2px var(--interactive-accent);
}


/* ===== TASK-INLINE-WIDGET.CSS ===== */
/* =================================================================
   INLINE TASK WIDGET STYLES - BEM NAMING CONVENTION & PROPER SCOPING
   ================================================================= */

/* All inline task widget styles are scoped under .tasknotes-plugin for proper isolation */

/* =================================================================
   INLINE TASK LINK WIDGET WRAPPER
   ================================================================= */

/* Wrapper for inline task link widgets - ensures proper inline display with bullets */
.tasknotes-plugin.tasknotes-inline-widget {
    display: inline !important;
    vertical-align: baseline;
    line-height: inherit;
    /* Prevent wrapper from causing line breaks */
    white-space: normal;
}

/* =================================================================
   INLINE TASK PREVIEW STYLES (Editor Widgets)
   ================================================================= */

/* Standalone inline task preview widget */
.tasknotes-plugin .task-inline-preview {
    /* Layout - inline flexbox for proper element alignment */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;

    /* Typography - match editor font */
    font-size: var(--editor-font-size, 16px);
    font-family: var(--editor-font-family, var(--font-interface));

    /* Visual styling - clean text appearance */
    padding: 2px 4px;

    /* Interactivity */
    cursor: var(--cursor);

    /* Prevent text selection issues */
    user-select: none;
    -webkit-user-select: none;

    /* Ensure proper vertical alignment with text */
    vertical-align: baseline;
    line-height: 1.4;
}

/* Hide when cursor is on the same line */
.tasknotes-plugin .task-inline-preview.task-inline-preview--cursor-hidden {
    display: none;
}


/* Status indicator dot - match task card styling */
.tasknotes-plugin .task-inline-preview__status-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--tn-border-color);
    background-color: transparent;
    transition: all 0.2s ease;
    cursor: var(--cursor);
    position: relative;
    flex-shrink: 0;
    margin-right: 6px; /* More gap between status and priority */
    transform: translateY(2px); /* Lower the status circle slightly for better visual alignment */
}

.tasknotes-plugin .task-inline-preview__status-dot:hover {
    border-color: var(--tn-text-muted);
    box-shadow: 0 0 6px rgba(100, 149, 237, 0.4);
    transform: translateY(2px) scale(1.1); /* Maintain the lowered position while scaling */
}

/* Priority indicator dot - filled solid circle */
.tasknotes-plugin .task-inline-preview__priority-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--tn-text-muted);
    border: none;
    flex-shrink: 0;
    margin-right: 6px; /* Gap between priority and title */
    cursor: var(--cursor);
}

/* Date info styling */
.tasknotes-plugin .task-inline-preview__date {
    opacity: 0.7;
    font-size: 0.9em;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
    vertical-align: baseline;
}

/* Clickable date styling */
.tasknotes-plugin .task-inline-preview__date--clickable {
    cursor: var(--cursor);
    border-radius: 3px;
    padding: 1px 3px;
    transition: all 0.15s ease;
}

.tasknotes-plugin .task-inline-preview__date--clickable:hover {
    opacity: 1;
    background-color: var(--background-modifier-hover);
    transform: translateY(-1px);
}

/* Date icon styling */
.tasknotes-plugin .task-inline-preview__date-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    margin-right: 6px;
    transition: opacity 0.15s ease;
    vertical-align: baseline;
}

/* Fix Lucide icon alignment within date icons */
.tasknotes-plugin .task-inline-preview__date-icon svg {
    vertical-align: baseline;
    width: 12px;
    height: 12px;
}

.tasknotes-plugin .task-inline-preview__date--clickable:hover .task-inline-preview__date-icon {
    opacity: 1;
    filter: brightness(1.3);
}

/* Recurring indicator styling */
.tasknotes-plugin .task-inline-preview__recurring-indicator {
    opacity: 0.6;
    cursor: var(--cursor);
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    padding: 1px 3px;
    transition: all 0.15s ease;
    flex-shrink: 0;
    vertical-align: baseline;
    margin-right: 2px;
}

/* Fix Lucide icon alignment within recurring indicator */
.tasknotes-plugin .task-inline-preview__recurring-indicator svg {
    vertical-align: baseline;
    width: 12px;
    height: 12px;
}

.tasknotes-plugin .task-inline-preview:hover .task-inline-preview__recurring-indicator {
    opacity: 0.8;
}

.tasknotes-plugin .task-inline-preview__recurring-indicator:hover {
    opacity: 1;
    color: var(--interactive-accent);
    transform: translateY(-1px);
    filter: brightness(1.3);
}

/* Pencil icon styling */
.tasknotes-plugin .task-inline-preview__pencil {
    opacity: 0;
    cursor: var(--cursor);
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    padding: 1px 3px;
    transition: all 0.15s ease;
    flex-shrink: 0;
    vertical-align: baseline;
}

/* Fix Lucide icon alignment within pencil icon */
.tasknotes-plugin .task-inline-preview__pencil svg {
    vertical-align: baseline;
    width: 12px;
    height: 12px;
}

.tasknotes-plugin .task-inline-preview:hover .task-inline-preview__pencil {
    opacity: 0.8;
}

.tasknotes-plugin .task-inline-preview__pencil:hover {
    opacity: 1;
    transform: translateY(-1px);
    filter: brightness(1.3);
}

/* Hover state */
.tasknotes-plugin .task-inline-preview:hover {
    background-color: var(--background-modifier-hover);
}

/* Completed task styling with maximum specificity */
.tasknotes-plugin span.task-inline-preview.task-inline-preview--completed span.task-inline-preview__title,
.tasknotes-plugin.task-inline-preview.task-inline-preview--completed .task-inline-preview__title,
.tasknotes-plugin .task-inline-preview--completed .task-inline-preview__title {
    text-decoration: line-through;
    opacity: 0.7;
    color: var(--text-muted);
}

/* Completed task title hover effect */
.tasknotes-plugin .task-inline-preview--completed .task-inline-preview__title:hover {
    color: var(--interactive-accent);
    opacity: 0.9;
}

.tasknotes-plugin span.task-inline-preview.task-inline-preview--completed,
.tasknotes-plugin.task-inline-preview.task-inline-preview--completed,
.tasknotes-plugin .task-inline-preview--completed {
    opacity: 0.8;
}

/* =================================================================
   INSTANT CONVERT BUTTON STYLES
   ================================================================= */

/* Convert button for checkbox tasks - High specificity to override browser defaults */
.tasknotes-plugin button.instant-convert-button {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Sizing */
    width: 15px;
    height: 15px;
    margin-left: 8px;
    padding: 0;
    
    /* Visual styling */
    background: transparent;
    color: var(--text-muted);
    border: none !important;
    box-shadow: none;
    border-radius: 3px;
    
    /* Interactivity */
    cursor: var(--cursor);
    opacity: 0.6;
    transition: all 0.15s ease;
    
    /* Reset button styles */
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
    box-sizing: border-box;
    outline: none;
    text-decoration: none;
    vertical-align: baseline;
}

.tasknotes-plugin button.instant-convert-button:hover {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    opacity: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tasknotes-plugin button.instant-convert-button:active {
    transform: scale(0.95);
}

.tasknotes-plugin button.instant-convert-button:focus {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 1px;
}

/* Icon inside the convert button */
.tasknotes-plugin .instant-convert-button__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}

.tasknotes-plugin .instant-convert-button__icon svg {
    width: 12px;
    height: 12px;
}

/* =================================================================
   ADDITIONAL INLINE TASK PREVIEW ELEMENTS
   ================================================================= */

/* Completed status styling - filled circle with checkmark */
.tasknotes-plugin .task-inline-preview--completed .task-inline-preview__status-dot {
    background-color: var(--current-status-color, var(--tn-color-success));
    border-color: var(--current-status-color, var(--tn-color-success));
    color: var(--tn-text-on-accent);
    font-size: 9px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Task title */
.tasknotes-plugin .task-inline-preview__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-normal);
    font-weight: 500;
    margin: 0;
    min-width: 0; /* Allow flex shrinking */
    max-width: min(600px, 80vw); /* Responsive max-width for longer titles */
    flex-shrink: 1; /* Allow shrinking if needed */
    vertical-align: baseline;
    cursor: var(--cursor);
    transition: color 0.15s ease;
    border-radius: 2px;
    padding: 1px 2px;
    margin: -1px -2px;
}

/* Task title hover effect */
.tasknotes-plugin .task-inline-preview__title:hover {
    color: var(--interactive-accent);
    background-color: var(--background-modifier-hover);
}

/* Priority indicator */
.tasknotes-plugin .task-inline-preview__priority {
    font-weight: bold;
    font-size: 0.85em;
    flex-shrink: 0;
    margin-left: 3px;
    margin-right: 1px;
}

/* Priority border colors */
.tasknotes-plugin .task-inline-preview.task-inline-preview--priority-high {
    border-left-color: var(--color-red);
    border-left-width: 4px;
}

.tasknotes-plugin .task-inline-preview.task-inline-preview--priority-medium {
    border-left-color: var(--color-orange);
    border-left-width: 3px;
}

.tasknotes-plugin .task-inline-preview.task-inline-preview--priority-low {
    border-left-color: var(--color-blue);
}

/* Pencil menu icon */
.tasknotes-plugin .task-inline-preview__menu-icon {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.15s ease;
    cursor: var(--cursor);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1px;
    padding: 0;
    margin-left: 1px;
}

.tasknotes-plugin .task-inline-preview__menu-icon:hover {
    opacity: 1;
    background-color: var(--background-modifier-hover);
}

.tasknotes-plugin .task-inline-preview:hover .task-inline-preview__menu-icon {
    opacity: 0.8;
}

/* =================================================================
   THEME-SPECIFIC ADJUSTMENTS
   ================================================================= */

/* Theme-specific adjustments */
.theme-dark .tasknotes-plugin .task-inline-preview {
    background-color: var(--background-secondary);
    border-color: var(--background-modifier-border);
}

.theme-light .tasknotes-plugin .task-inline-preview {
    background-color: var(--background-secondary);
    border-color: var(--background-modifier-border);
}

/* =================================================================
   ANIMATIONS
   ================================================================= */

/* Animation for appearance */
.tasknotes-plugin .task-inline-preview {
    animation: tn-fadeInTaskPreview 0.2s ease-out;
}

@keyframes tn-fadeInTaskPreview {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =================================================================
   RESPONSIVE DESIGN
   ================================================================= */

/* Responsive adjustments */
@media (max-width: 768px) {
    .tasknotes-plugin .task-inline-preview {
        max-width: 200px;
        padding: 2px 4px;
        gap: 6px;
        font-size: calc(var(--editor-font-size, 16px) * 0.9);
    }
    
    .tasknotes-plugin .task-inline-preview__status-dot {
        width: 16px;
        height: 16px;
    }
    
    .tasknotes-plugin .task-inline-preview__menu-icon {
        width: 14px;
        height: 14px;
    }
}

/* =================================================================
   READING MODE SPECIFIC STYLES
   ================================================================= */

/* Reading mode task preview adjustments */
.tasknotes-plugin .task-inline-preview--reading-mode {
    /* Ensure proper display in reading mode context */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    
    /* Better visual integration with reading mode */
    padding: 3px 8px;
    border-radius: 4px;
    background-color: var(--background-modifier-hover);
    border: 1px solid var(--background-modifier-border);
    
    /* Smooth transitions */
    transition: all 0.15s ease;
}

.tasknotes-plugin .task-inline-preview--reading-mode:hover {
    background-color: var(--background-modifier-hover-active);
    border-color: var(--interactive-accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Reading mode title styling */
.tasknotes-plugin .task-inline-preview--reading-mode .task-inline-preview__title {
    font-weight: 500;
    color: var(--text-normal);
}

/* Reading mode date styling */
.tasknotes-plugin .task-inline-preview--reading-mode .task-inline-preview__date {
    font-size: 0.85em;
    opacity: 0.8;
}

/* Reading mode icon adjustments */
.tasknotes-plugin .task-inline-preview--reading-mode .task-inline-preview__date-icon {
    width: 11px;
    height: 11px;
    margin-right: 3px;
}

.tasknotes-plugin .task-inline-preview--reading-mode .task-inline-preview__pencil {
    width: 11px;
    height: 11px;
    opacity: 0.5;
}

.tasknotes-plugin .task-inline-preview--reading-mode:hover .task-inline-preview__pencil {
    opacity: 0.9;
}

/* =================================================================
   TASK INLINE PREVIEW DRAG AND DROP STATES
   ================================================================= */

/* Dragging state for task inline preview widgets */
.tasknotes-plugin .task-inline-preview--dragging {
    opacity: 0.6;
    transform: scale(0.95);
    cursor: grabbing;
    z-index: 1000;
    pointer-events: none;
}

/* Drag cursor for draggable task inline preview widgets */
.tasknotes-plugin .task-inline-preview[draggable="true"] {
    cursor: grab;
}

.tasknotes-plugin .task-inline-preview[draggable="true"]:active {
    cursor: grabbing;
}


/* ===== NOTE-CARD-BEM.CSS ===== */
/* =================================================================
   NOTECARD COMPONENT - BEM NAMING CONVENTION & PROPER SCOPING
   ================================================================= */

/* All NoteCard styles are scoped under .tasknotes-plugin for proper isolation */

.tasknotes-plugin .note-card {
    /* Layout & Structure */
    display: flex;
    align-items: flex-start;
    gap: 0;
    position: relative;
    
    /* Spacing & Sizing - Todoist compact style */
    padding: var(--tn-spacing-md) var(--tn-spacing-lg);
    margin-bottom: 1px;
    
    /* Visual Styling - Todoist minimal style */
    background-color: transparent;
    border: none;
    border-radius: 0;
    border-left: 3px solid transparent; /* Transparent by default */
    
    /* Interactions & Accessibility - Simplified */
    cursor: var(--cursor);
    transition: background-color var(--tn-transition-fast);
    outline: none;
    role: listitem;
    tabindex: 0;
}

.tasknotes-plugin .note-card:hover {
    background-color: var(--tn-interactive-hover);
}

.tasknotes-plugin .note-card:focus {
    background-color: var(--tn-interactive-hover);
    outline: 1px solid var(--tn-border-color);
    outline-offset: -1px;
}

.tasknotes-plugin .note-card:focus:not(:focus-visible) {
    outline: none;
}

.tasknotes-plugin .note-card:last-child {
    margin-bottom: 0;
}

/* Daily note specific styling */
.tasknotes-plugin .note-card--daily {
    border-left: 3px solid var(--tn-interactive-accent); /* Purple left border for daily notes only */
}

/* Ensure all note card titles match task card titles exactly */
.tasknotes-plugin .note-card__title,
.tasknotes-plugin .tn-card__title,
.tasknotes-plugin .note-card--daily .note-card__title,
.tasknotes-plugin .note-card--daily-note .note-card__title {
    font-size: var(--tn-font-size-lg) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

/* Remove border radius for cleaner list appearance */
.tasknotes-plugin .note-card:first-child,
.tasknotes-plugin .note-card:last-child,
.tasknotes-plugin .note-card:first-child:last-child {
    border-radius: 0;
}

/* =================================================================
   NOTECARD ELEMENTS (BEM __element)
   ================================================================= */

.tasknotes-plugin .note-card__main-row {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: 100%;
}

.tasknotes-plugin .note-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    flex-shrink: 0;
    color: var(--tn-text-muted);
    align-self: center;
    opacity: 0.7;
}

.tasknotes-plugin .note-card__icon svg {
    width: 16px;
    height: 16px;
}

.tasknotes-plugin .note-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tasknotes-plugin .note-card__title {
    font-size: var(--tn-font-size-lg);
    font-weight: 400;
    line-height: 1.3;
    color: var(--tn-text-normal);
    margin: 0;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    transition: color var(--tn-transition-fast);
}

.tasknotes-plugin .note-card__divider {
    height: 1px;
    background: var(--tn-border-color);
    margin: var(--tn-spacing-xs) 0;
    opacity: 0.6;
}

.tasknotes-plugin .note-card__tags {
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-muted);
    line-height: 1.2;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--tn-spacing-xs);
}

.tasknotes-plugin .note-card__tag {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--tn-spacing-xs);
    border-radius: var(--tn-radius-xs);
    background: var(--tn-bg-secondary);
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-muted);
    border: 1px solid var(--tn-border-color);
    transition: all var(--tn-transition-fast);
}

.tasknotes-plugin .note-card__tag:hover {
    background: var(--tn-interactive-hover);
    color: var(--tn-text-normal);
}

.tasknotes-plugin .note-card__tags-text {
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-muted);
    line-height: 1.2;
    margin: 0;
    font-style: italic;
}

.tasknotes-plugin .note-card__metadata {
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-faint);
    line-height: 1.2;
    margin: 0;
    opacity: 0.8;
}

.tasknotes-plugin .note-card__preview {
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-muted);
    line-height: 1.3;
    margin-top: var(--tn-spacing-xs);
    max-height: 2.6em; /* Approximately 2 lines */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tasknotes-plugin .note-card__badge {
    position: absolute;
    top: var(--tn-spacing-md);
    right: var(--tn-spacing-md);
    padding: 2px var(--tn-spacing-xs);
    border-radius: var(--tn-radius-xs);
    font-size: var(--tn-font-size-xs);
    font-weight: var(--tn-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 2;
    opacity: 0.8;
    transition: opacity var(--tn-transition-fast);
}

.tasknotes-plugin .note-card:hover .note-card__badge {
    opacity: 1;
}

/* =================================================================
   NOTECARD MODIFIERS (BEM --modifier)
   ================================================================= */

/* Compact Layout */
.tasknotes-plugin .note-card--compact {
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
}

.tasknotes-plugin .note-card--compact .note-card__content {
    gap: 2px;
}

.tasknotes-plugin .note-card--compact .note-card__title {
    font-size: var(--tn-font-size-sm);
}

.tasknotes-plugin .note-card--compact .note-card__preview {
    display: none; /* Hide preview in compact mode */
}

/* Daily Note Variant */
.tasknotes-plugin .note-card--daily-note {
    border-left-color: var(--tn-color-daily-note);
    background: transparent; /* Keep consistent with other note cards */
}

.tasknotes-plugin .note-card--daily-note .note-card__badge {
    background: var(--tn-color-daily-note);
    color: var(--tn-bg-primary);
}

/* Shadow Variants - Disabled for consistency with task cards */
.tasknotes-plugin .note-card--shadow-light:hover {
    box-shadow: none;
}

.tasknotes-plugin .note-card--shadow-medium:hover {
    box-shadow: none;
}

.tasknotes-plugin .note-card--shadow-strong:hover {
    box-shadow: none;
}

/* Update Animation */
.tasknotes-plugin .note-card--updated {
    animation: note-card-update 1.2s ease-out;
}

@keyframes note-card-update {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--tn-color-info) 40%, transparent);
        border-color: var(--tn-border-color);
    }
    50% {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--tn-color-info) 30%, transparent);
        border-left-color: var(--tn-color-info);
    }
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--tn-color-info) 0%, transparent);
        border-color: var(--tn-border-color);
    }
}

/* =================================================================
   SHARED BASE CARD STYLES
   ================================================================= */

/* Base card component that can be shared between TaskCard and NoteCard */
.tasknotes-plugin .tn-card {
    /* Common card styling */
    display: flex;
    align-items: flex-start;
    gap: 0;
    position: relative;
    padding: var(--tn-spacing-md) var(--tn-spacing-lg);
    margin-bottom: 0;
    background-color: var(--tn-bg-primary);
    border: none;
    border-bottom: 1px solid var(--tn-border-color);
    border-radius: 0;
    cursor: var(--cursor);
    transition: background-color var(--tn-transition-fast);
}

.tasknotes-plugin .tn-card:hover {
    background-color: var(--tn-interactive-hover);
}

.tasknotes-plugin .tn-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xs);
    min-width: 0;
}

.tasknotes-plugin .tn-card__title {
    font-size: var(--tn-font-size-lg);
    font-weight: 400;
    line-height: 1.3;
    color: var(--tn-text-normal);
    margin: 0;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    transition: color var(--tn-transition-fast);
}

/* =================================================================
   RESPONSIVE DESIGN
   ================================================================= */

/* Touch-specific adjustments */
@media (pointer: coarse) {
    .tasknotes-plugin .note-card {
        padding: var(--tn-spacing-lg) var(--tn-spacing-xl);
        min-height: 44px;
    }
    
    .tasknotes-plugin .note-card:hover {
        transform: none;
    }
    
    .tasknotes-plugin .note-card:active {
        transform: scale(0.98);
        transition: transform 0.1s;
    }
    
    .tasknotes-plugin .note-card__badge {
        padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
        font-size: var(--tn-font-size-sm);
    }
}



/* ===== FILTER-BAR-BEM.CSS ===== */
/* =================================================================
   ADVANCED FILTER BAR COMPONENT - BEM NAMING CONVENTION & PROPER SCOPING
   ================================================================= */

/* All FilterBar styles are scoped under .tasknotes-plugin for proper isolation */

/* Main Container */
.tasknotes-plugin .advanced-filter-bar {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-md);
    margin-bottom: var(--tn-spacing-lg);
}

/* Top Controls (Filter Icon + Search + Templates Button) */
.tasknotes-plugin .filter-bar__top-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative; /* Set as positioning context for the dropdown */
    z-index: 10; /* Ensure this container is on top of the filter box below */
    isolation: isolate; /* Create a new stacking context */
    container-type: inline-size; /* Enable container queries */
}


/* Filter toggle base (positioning for badge) */
.tasknotes-plugin .filter-bar__filter-toggle {
  position: relative; /* context for badge */
}

/* Active filter badge dot */
.tasknotes-plugin .filter-bar__filter-toggle.has-active-filters::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #a78bfa; /* subtle purple */
}

/* Icon + Text Button Styling */
.tasknotes-plugin .filter-bar__top-controls .has-text-icon {
  display: flex !important;
  align-items: center;
  gap: 3px;
  padding: 2px 6px !important;
  min-height: var(--input-height);
  border-radius: var(--radius-s);
  width: auto !important; /* Override any fixed width */
}

.tasknotes-plugin .filter-bar__top-controls .has-text-icon .button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.tasknotes-plugin .filter-bar__top-controls .has-text-icon .button-icon svg {
  width: 16px;
  height: 16px;
}

.tasknotes-plugin .filter-bar__top-controls .has-text-icon .button-text {
  white-space: nowrap;
  font-size: var(--font-ui-small);
  line-height: 1;
}

/* Override button-specific hover states for consistent text+icon button behavior */
.tasknotes-plugin .filter-bar__top-controls .has-text-icon:hover {
  background: var(--interactive-hover) !important;
  color: var(--text-normal) !important;
}

/* Clear all button in Filter section header */
.tasknotes-plugin .filter-bar__clear-filters {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-spacing-xs);
  margin-left: var(--tn-spacing-sm);
  padding: 2px 6px;
  border-radius: var(--radius-s);
  border: 1px solid var(--color-grey-tint);
  background-color: var(--color-grey-base);
  color: var(--text-normal);
  font-size: var(--font-ui-small);
}
.tasknotes-plugin .filter-bar__clear-filters:hover {
  background-color: var(--interactive-hover);
}
.tasknotes-plugin .filter-bar__clear-filters svg {
  width: 16px; height: 16px;
}

/* Clear all filters button in Filter section header - matches Save button style exactly */
.tasknotes-plugin .filter-bar__clear-all-button {
  /* Ensure identical sizing and alignment with Save button */
  width: var(--input-height);
  height: var(--input-height);
  min-width: var(--input-height);
  min-height: var(--input-height);
  padding: 0;
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;
}

/* Ensure the icon is properly centered */
.tasknotes-plugin .filter-bar__clear-all-button svg {
  width: 16px;
  height: 16px;
}

/* Close modal button - matches other buttons exactly but with transparent background */
.tasknotes-plugin .filter-bar__close-modal-button {
  /* Identical sizing to Clear and Save buttons */
  width: var(--input-height);
  height: var(--input-height);
  min-width: var(--input-height);
  min-height: var(--input-height);
  padding: 0;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;
  /* Transparent background */
  background: transparent !important;
  border: none !important;
}

/* Ensure the close icon is properly centered */
.tasknotes-plugin .filter-bar__close-modal-button svg {
  width: 16px;
  height: 16px;
}

/* Natural Language Date Input Enhancement */
.tasknotes-plugin .filter-date-input-container {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
    width: 100%;
}

.tasknotes-plugin .filter-date-text-input {
    flex: 1;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Date input validation states - subtle styling */
.tasknotes-plugin .filter-date-text-input.is-valid {
    border-left: 2px solid var(--color-green);
    background-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(var(--color-green-rgb), 0.15);
}

.tasknotes-plugin .filter-date-text-input.is-invalid {
    border-left: 2px solid var(--color-red);
    background-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(var(--color-red-rgb), 0.15);
}

.tasknotes-plugin .filter-date-text-input.is-empty {
    border-left: none;
    background-color: transparent;
    box-shadow: none;
}

.tasknotes-plugin .filter-date-help-button {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--text-muted);
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    cursor: var(--cursor);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.tasknotes-plugin .filter-date-help-button:hover {
    background: var(--interactive-hover);
    color: var(--text-normal);
    border-color: var(--text-normal);
}

.filter-date-help-tooltip {
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    padding: var(--tn-spacing-sm);
    box-shadow: var(--shadow-s);
    min-width: 200px;
    max-width: 300px;
    font-size: var(--font-ui-smaller);
}

.filter-date-help-tooltip h4 {
    margin: 0 0 var(--tn-spacing-xs) 0;
    color: var(--text-normal);
    font-weight: var(--font-semibold);
}

.filter-date-help-tooltip ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.filter-date-help-tooltip li {
    padding: 2px var(--tn-spacing-xs);
    color: var(--text-muted);
    background: var(--background-modifier-hover);
    border-radius: var(--radius-s);
    font-family: var(--font-monospace);
    font-size: 11px;
}

.tasknotes-plugin .filter-bar__filter-toggle {
    padding: var(--tn-spacing-xs);
    background: transparent;
    border: none;
    border-radius: var(--radius-s);
    color: var(--text-muted);
    cursor: var(--cursor);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tn-button-height-md);
    height: var(--tn-button-height-md);
    transition: all 0.2s ease;
    box-shadow: none;
}

.tasknotes-plugin .filter-bar__filter-toggle:hover {
    background: var(--interactive-hover) !important;
    color: var(--text-normal);
}

.tasknotes-plugin .filter-bar__filter-toggle--active {
    background: var(--interactive-accent-tint);
    color: var(--color-accent);
    box-shadow: none;
}

.tasknotes-plugin .filter-bar__templates-button {
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    background: transparent;
    border: none;
    border-radius: var(--radius-s);
    color: var(--text-muted);
    cursor: var(--cursor);
    font-size: var(--font-ui-small);
    font-weight: 500;
    transition: all 0.2s ease;
    height: var(--tn-button-height-md); /* Consistent height */
    box-shadow: none;
}

.tasknotes-plugin .filter-bar__templates-button:hover {
    background: var(--interactive-hover) !important;
    color: var(--text-normal);
    transform: none;
    box-shadow: none;
}

.tasknotes-plugin .filter-bar__templates-button--active {
    background: var(--interactive-accent-tint);
    color: var(--color-accent);
    box-shadow: none;
}

.tasknotes-plugin .filter-bar__templates-button--saved-view-active {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border: none;
    box-shadow: 0 0 0 1px var(--color-accent);
}

/* Search Input */
.tasknotes-plugin .filter-bar__search-input {
    flex: 1;
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: var(--font-ui-small);
    transition: all 0.2s ease;
    height: var(--tn-button-height-md); /* Consistent height */
    min-width: 0 !important; /* Override any default min-width */
    width: auto; /* Allow natural width */
}

.tasknotes-plugin .filter-bar__search-input:focus {
    outline: 1px solid var(--color-accent);
    border-color: var(--color-accent);
}

.tasknotes-plugin .filter-bar__search-input::placeholder {
    color: var(--text-muted);
    font-style: italic;
}

/* Main Filter Box (collapsible popup) */
.tasknotes-plugin .filter-bar__main-box {
    position: absolute;
    top: calc(100% + 4px); /* Position below the top controls with a small gap */
    left: auto; /* Let it position dynamically */
    right: auto; /* Let it position dynamically */
    width: 500px; /* Default preferred width */
    max-width: 600px; /* Maximum preferred width */
    min-width: 400px; /* Minimum usable width */
    z-index: 1000; /* High z-index */
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-lg);
    padding: var(--tn-spacing-lg);
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 80vh;
    overflow-y: auto;
}

.tasknotes-plugin .filter-bar__main-box--collapsed {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    pointer-events: none; /* Prevent interaction when hidden */
}

/* =================================================================
   VIEW SELECTOR SECTION
   ================================================================= */

.tasknotes-plugin .filter-bar__view-selector-dropdown {
    position: absolute;
    top: 100%;
    right: 0; /* Default align to right of the container */
    left: auto;
    min-width: 240px;
    max-width: 320px;
    z-index: 1000; /* Ensure it's on top */
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    max-height: 400px;
    overflow-y: auto;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Left-aligned variant for Views-left configuration */
.tasknotes-plugin .filter-bar__view-selector-dropdown.filter-bar__view-selector-dropdown--left {
    left: 0;
    right: auto;
}

.tasknotes-plugin .filter-bar__view-selector-dropdown--hidden {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    pointer-events: none;
}

.tasknotes-plugin .filter-bar__view-section {
    padding: var(--tn-spacing-md);
}

.tasknotes-plugin .filter-bar__view-section:not(:last-child) {
    border-bottom: none;
}

.tasknotes-plugin .filter-bar__view-section-header {
    font-weight: 600; /* Slightly stronger for better hierarchy */
    font-size: var(--font-ui-small);
    color: var(--text-normal);
    text-transform: none; /* Normal case */
    letter-spacing: 0; /* Natural spacing */
    margin-bottom: var(--tn-spacing-sm);
    padding-bottom: var(--tn-spacing-xs);
}

.tasknotes-plugin .filter-bar__view-item-container {
    display: flex;
    align-items: center;
    border-radius: var(--radius-s);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 2px 0;
    position: relative;
    overflow: hidden;
}

.tasknotes-plugin .filter-bar__view-item-container:hover {
    background: var(--background-modifier-hover);
    transform: translateX(2px);
}

/* Drag and drop styles */
.tasknotes-plugin .filter-bar__view-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: var(--tn-spacing-xs);
    color: var(--text-faint);
    cursor: grab;
    font-size: 14px;
    user-select: none;
    opacity: 0;
    transition: all 0.2s ease;
    border-radius: var(--radius-s);
    position: relative;
}

.tasknotes-plugin .filter-bar__view-drag-handle::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    box-shadow:
        0 -4px 0 currentColor,
        0 4px 0 currentColor;
}

.tasknotes-plugin .filter-bar__view-item-container:hover .filter-bar__view-drag-handle {
    opacity: 1;
}

.tasknotes-plugin .filter-bar__view-drag-handle:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
    transform: scale(1.05);
}

.tasknotes-plugin .filter-bar__view-drag-handle:active {
    cursor: grabbing;
    transform: scale(0.95);
}

.tasknotes-plugin .filter-bar__view-item-container--dragging {
    opacity: 0.8;
    transform: scale(1.02);
    background: var(--background-modifier-hover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-s);
    z-index: 1000;
    transition: none;
}

.tasknotes-plugin .filter-bar__view-item-container--placeholder {
    opacity: 0.5;
    background: var(--interactive-accent-tint);
    border: 2px dashed var(--color-accent);
    border-radius: var(--radius-s);
    pointer-events: none;
    min-height: 30px;
    transition: all 0.2s ease;
    animation: placeholderPulse 1s ease-in-out infinite;
}

@keyframes placeholderPulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.7;
    }
}

.tasknotes-plugin .filter-bar__view-item {
    flex: 1;
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    background: none;
    border: none !important;
    box-shadow: none;
    outline: none;
    color: var(--text-normal);
    text-align: left;
    justify-content: flex-start;
    cursor: var(--cursor);
    font-size: var(--font-ui-small);
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.tasknotes-plugin .filter-bar__view-item--active {
    color: var(--text-on-accent);
}

.tasknotes-plugin .filter-bar__view-item-container--active {
    background: var(--interactive-accent);
    border-radius: var(--radius-s);
    border: none;
}

.tasknotes-plugin .filter-bar__view-item-container--active:hover {
    background: var(--interactive-accent-hover);
    transform: translateX(2px);
}

.tasknotes-plugin .filter-bar__view-delete {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-muted);
    cursor: var(--cursor);
    padding: var(--tn-spacing-xs);
    border-radius: var(--radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-right: var(--tn-spacing-xs);
}

.tasknotes-plugin .filter-bar__view-delete:hover {
    background: var(--background-modifier-hover);
    color: var(--text-error);
}

.tasknotes-plugin .filter-bar__view-action {
    display: block;
    width: 100%;
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    background: none;
    border: none;
    color: var(--color-accent);
    text-align: left;
    cursor: var(--cursor);
    border-radius: var(--radius-s);
    font-size: var(--font-ui-small);
    font-weight: 500;
    transition: all 0.2s ease;
    margin: 2px 0;
}

.tasknotes-plugin .filter-bar__view-action:hover {
    background: var(--interactive-accent-tint);
}

.tasknotes-plugin .filter-bar__view-empty-message {
    padding: var(--tn-spacing-lg);
    color: var(--text-muted);
    font-size: var(--font-ui-small);
    text-align: center;
    background: var(--background-modifier-hover);
    margin: var(--tn-spacing-sm);
}

/* =================================================================
   COLLAPSIBLE FILTER SECTIONS
   ================================================================= */

.tasknotes-plugin .filter-bar__section {
    margin-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .filter-bar__section:last-child {
    margin-bottom: 0;
}

.tasknotes-plugin .filter-bar__section--hidden {
    display: none;
}

.tasknotes-plugin .filter-bar__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    border-radius: var(--radius-s);
    transition: all 0.2s ease;
    margin-bottom: 2px;
}

.tasknotes-plugin .filter-bar__section-header-main {
    display: flex;
    align-items: center;
    flex-grow: 1;
    cursor: var(--cursor);
    padding: var(--tn-spacing-sm) 0;
}

.tasknotes-plugin .filter-bar__section-header-main:hover {
    background: var(--interactive-hover);
}

.tasknotes-plugin .filter-bar__section-header-main::before {
    content: "▼";
    margin-right: var(--tn-spacing-xs);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 10px;
    color: var(--text-muted);
}

.tasknotes-plugin .filter-bar__section-header--collapsed .filter-bar__section-header-main::before {
    transform: rotate(-90deg);
}

.tasknotes-plugin .filter-bar__section-header-actions {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);

    padding-right: var(--tn-spacing-sm);
}

.tasknotes-plugin .filter-bar__save-button {
    /* Remove individual styles - use tn-btn tn-btn--icon tn-btn--ghost classes */
    padding: 4px;
}

.tasknotes-plugin .filter-bar__save-button svg {
    width: 16px;
    height: 16px;
}

/* Expand/Collapse all group buttons - Add pointer cursor but keep good hover */
.tasknotes-plugin .filter-bar__expand-groups,
.tasknotes-plugin .filter-bar__collapse-groups {
    padding: var(--tn-spacing-xs);
    background: transparent;
    border: none;
    border-radius: var(--radius-s);
    color: var(--text-muted);
    cursor: pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tn-button-height-md);
    height: var(--tn-button-height-md);
    transition: all 0.2s ease;
    box-shadow: none;
}

.tasknotes-plugin .filter-bar__expand-groups:hover,
.tasknotes-plugin .filter-bar__collapse-groups:hover {
    background: var(--interactive-hover);
    color: var(--text-normal);
}

.tasknotes-plugin .filter-bar__expand-groups svg,
.tasknotes-plugin .filter-bar__collapse-groups svg {
    width: 16px;
    height: 16px;
}

.tasknotes-plugin .filter-bar__section-title {
    font-weight: 500; /* Slightly lighter */
    font-size: var(--font-ui-small); /* Consistent size */
    color: var(--text-muted); /* Muted for subtlety */
    text-transform: none; /* Normal case */
    letter-spacing: 0; /* Natural spacing */
}

.tasknotes-plugin .filter-bar__active-view-name {
    font-weight: 400;
    font-size: var(--font-ui-smaller);
    color: var(--text-accent);
    margin-left: var(--tn-spacing-xs);
    font-style: italic;
}

.tasknotes-plugin .filter-bar__section-content {
    padding: var(--tn-spacing-md);
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    opacity: 1;
    max-height: 1000px; /* Large enough for content */
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tasknotes-plugin .filter-bar__section-content--collapsed {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
}

/* =================================================================
   FILTER BUILDER SECTION
   ================================================================= */

.tasknotes-plugin .filter-bar__filter-builder {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-md);
}

/* Filter Groups and Conditions */
.tasknotes-plugin .filter-bar__group {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-sm);
    padding: var(--tn-spacing-md);
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border); /* Subtle border for grouping */
    border-radius: var(--radius-m);
    position: relative;
}

/* Remove styling for the top-level group to blend with its container */
.tasknotes-plugin .filter-bar__filter-builder > .filter-bar__group {
    background: transparent;
    border: none;
    padding: 0;
}

.tasknotes-plugin .filter-bar__group .filter-bar__group {
    background: var(--background-secondary-alt);
    border-color: var(--background-modifier-border-hover);
}

.tasknotes-plugin .filter-bar__group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--tn-spacing-sm);
}

.tasknotes-plugin .filter-bar__conjunction {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .filter-bar__conjunction .dropdown {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    height: 28px;
    color: var(--text-normal);
    font-size: var(--font-ui-small);
    border-radius: var(--radius-s);
    transition: background-color 0.2s ease;
}

.tasknotes-plugin .filter-bar__conjunction .dropdown:hover {
    background-color: var(--background-modifier-hover);
}

.tasknotes-plugin .filter-bar__conjunction-text {
    font-size: var(--font-ui-small);
    color: var(--text-normal);
}

.tasknotes-plugin .filter-bar__children {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-sm);
    margin-left: 0;
}

.tasknotes-plugin .filter-bar__condition .dropdown,
.tasknotes-plugin .filter-bar__condition .text-input {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: var(--tn-spacing-xs);
    height: 28px;
    max-width: 200px;
    flex: 1;
}

.tasknotes-plugin .filter-bar__condition .dropdown:hover,
.tasknotes-plugin .filter-bar__condition .text-input:hover {
    background-color: var(--background-modifier-hover);
}

.tasknotes-plugin .filter-bar__condition {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
    padding: var(--tn-spacing-xs) 0; /* Let parent padding handle horizontal space */
    background: transparent; /* No background */
    border: 1px; /* No border */
    border-radius: 0;
    flex-wrap: wrap;
    transition: background-color 0.2s ease;
}

.tasknotes-plugin .filter-bar__condition:hover {
    background-color: var(--background-modifier-hover);
}

.tasknotes-plugin .filter-bar__condition-prefix {
    font-size: var(--font-ui-small);
    color: var(--text-muted);
    font-weight: 500;
    text-align: right;
    min-width: 50px; /* More flexible width */
    padding-right: var(--tn-spacing-sm);
}

.tasknotes-plugin .filter-bar__value-input {
    border: none; /* No borders on inputs */
    background: transparent; /* Transparent background */
    padding: var(--tn-spacing-xs);
    border-radius: var(--radius-s);
    color: var(--text-normal);
    font-size: var(--font-ui-small);
	width: auto;
    height: 28px;
    transition: background-color 0.2s ease;
}

.tasknotes-plugin .filter-bar__property-select:hover,
.tasknotes-plugin .filter-bar__operator-select:hover,
.tasknotes-plugin .filter-bar__value-input:hover {
    background-color: var(--background-modifier-hover);
}

.tasknotes-plugin .filter-bar__property-select:focus,
.tasknotes-plugin .filter-bar__operator-select:focus,
.tasknotes-plugin .filter-bar__value-input:focus {
    background-color: var(--background-modifier-hover);
    outline: none;
}

/* A more specific rule to override default component styles within the value container */
.tasknotes-plugin .filter-bar__value-container .text-input,
.tasknotes-plugin .filter-bar__value-container .dropdown .select-input {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    height: 26px;
}

.tasknotes-plugin .filter-bar__value-container .text-input:focus {
    box-shadow: none;
}

.tasknotes-plugin .filter-bar__value-container {
    display: flex;
    align-items: center;
    gap: 0; /* No gap for combined look */
    flex: 1;
	width: 100%;
    border-radius: var(--radius-s);
    padding: 0 var(--tn-spacing-xs);
    transition: all 0.2s ease;
}

.tasknotes-plugin .filter-bar__value-input {
    border: none;
    background: transparent;
    padding: var(--tn-spacing-xs);
    color: var(--text-normal);
    font-size: var(--font-ui-small);
    width: 100%;
    height: 28px;
}

.tasknotes-plugin .filter-bar__value-input:focus {
    outline: none;
    box-shadow: none;
}

.tasknotes-plugin .filter-bar__delete-button {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-muted);
    cursor: var(--cursor);
    padding: var(--tn-spacing-xs);
    border-radius: var(--radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-left: auto;
}

.tasknotes-plugin .filter-bar__delete-button:hover {
    background: var(--background-modifier-hover);
    color: var(--text-error);
}

.tasknotes-plugin .filter-bar__group-actions {
    display: flex;
    gap: var(--tn-spacing-md);
    margin-top: var(--tn-spacing-sm);
    border-top: none;
    padding-top: 0;
}

.tasknotes-plugin .filter-bar__action-button {
    padding: var(--tn-spacing-xs);
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-muted);
    cursor: var(--cursor);
    font-size: var(--font-ui-small);
    border-radius: var(--radius-s);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
}

.tasknotes-plugin .filter-bar__action-button:hover {
    background-color: var(--background-modifier-hover);
    color: var(--text-normal);
}

.tasknotes-plugin .filter-bar__action-button svg {
    width: 14px;
    height: 14px;
}

/* =================================================================
   DISPLAY & ORGANIZATION SECTION
   ================================================================= */

.tasknotes-plugin .filter-bar__display-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tn-spacing-md);
    align-items: center;
}

.tasknotes-plugin .filter-bar__sort-container,
.tasknotes-plugin .filter-bar__group-container {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .filter-bar__label {
    font-size: var(--font-ui-small);
    color: var(--text-normal);
    font-weight: 500;
}

.tasknotes-plugin .filter-bar__sort-container .dropdown,
.tasknotes-plugin .filter-bar__group-container .dropdown {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    height: 28px;
    color: var(--text-normal);
    font-size: var(--font-ui-small);
    min-width: 120px;
    border-radius: var(--radius-s);
    transition: background-color 0.2s ease;
}

.tasknotes-plugin .filter-bar__sort-container .dropdown:hover,
.tasknotes-plugin .filter-bar__group-container .dropdown:hover {
    background-color: var(--background-modifier-hover);
}

.tasknotes-plugin .filter-bar__sort-direction {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: var(--tn-spacing-xs);
    height: 28px;
    width: 30px;
    border-radius: var(--radius-s);
    color: var(--text-accent);
    cursor: var(--cursor);
    font-size: 16px;
    font-weight: 700;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tasknotes-plugin .filter-bar__sort-direction:hover {
    background-color: var(--background-modifier-hover);
    color: var(--text-accent-hover);
    transform: scale(1.1);
}

/* =================================================================
   VIEW OPTIONS SECTION
   ================================================================= */

.tasknotes-plugin .filter-bar__view-options {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .filter-bar__view-option {
    display: flex;
    align-items: center;
}

.tasknotes-plugin .filter-bar__view-option-label {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
    cursor: var(--cursor);
    font-size: var(--font-ui-small);
    color: var(--text-normal);
}

.tasknotes-plugin .filter-bar__view-option-checkbox {
    margin: 0;
}

.tasknotes-plugin .filter-bar__view-option-text {
    user-select: none;
}

/* =================================================================
   RESPONSIVE DESIGN
   ================================================================= */

/* Hide button text on narrow panes (container width-based responsiveness) */
@container (max-width: 500px) {
    .tasknotes-plugin .filter-bar__top-controls .has-text-icon .button-text {
        display: none !important;
    }
    
    .tasknotes-plugin .filter-bar__top-controls .has-text-icon {
        padding: 2px 4px !important;
        min-width: var(--input-height);
        justify-content: center;
    }
    
    /* Hide Views button text and show only chevron icon */
    .tasknotes-plugin .filter-bar__templates-button {
        padding: 2px 4px !important;
        min-width: var(--input-height);
        justify-content: center;
        width: var(--input-height);
        font-size: 0 !important; /* Hide text */
    }
    
    .tasknotes-plugin .filter-bar__templates-button .filter-bar__chevron-container {
        display: flex !important;
    }
    
    /* Adjust search input to take more space when buttons are icon-only */
    .tasknotes-plugin .filter-bar__search-input {
        flex-grow: 2;
        min-width: 0 !important; /* Force override any inherited min-width */
        flex-basis: 0; /* Start from zero width and grow */
    }
}

/* Fallback for browsers without container query support */
@media (max-width: 700px) {
    .tasknotes-plugin .filter-bar__top-controls .has-text-icon .button-text {
        display: none !important;
    }
    
    .tasknotes-plugin .filter-bar__top-controls .has-text-icon {
        padding: 2px 4px !important;
        min-width: var(--input-height);
        justify-content: center;
    }
    
    /* Hide Views button text and show only chevron icon */
    .tasknotes-plugin .filter-bar__templates-button {
        padding: 2px 4px !important;
        min-width: var(--input-height);
        justify-content: center;
        width: var(--input-height);
        font-size: 0 !important; /* Hide text */
    }
    
    .tasknotes-plugin .filter-bar__templates-button .filter-bar__chevron-container {
        display: flex !important;
    }
    
    /* Adjust search input to take more space when buttons are icon-only */
    .tasknotes-plugin .filter-bar__search-input {
        flex-grow: 2;
        min-width: 0 !important; /* Force override any inherited min-width */
        flex-basis: 0; /* Start from zero width and grow */
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    .tasknotes-plugin .advanced-filter-bar {
        padding: var(--tn-spacing-sm);
        gap: var(--tn-spacing-sm);
    }

    .tasknotes-plugin .filter-bar__condition {
        flex-direction: column;
        align-items: stretch;
        gap: var(--tn-spacing-xs);
    }

    .tasknotes-plugin .filter-bar__display-controls {
        flex-direction: column;
        align-items: stretch;
        gap: var(--tn-spacing-sm);
    }

    .tasknotes-plugin .filter-bar__sort-container,
    .tasknotes-plugin .filter-bar__group-container {
        justify-content: space-between;
    }

    .tasknotes-plugin .filter-bar__children {
        margin-left: 0;
    }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .tasknotes-plugin .filter-bar__condition {
        flex-wrap: wrap;
    }

    .tasknotes-plugin .filter-bar__value-container {
        min-width: 120px;
    }
}

/* =================================================================
   ACCESSIBILITY & FOCUS STATES
   ================================================================= */

.tasknotes-plugin .filter-bar__property-select:focus,
.tasknotes-plugin .filter-bar__operator-select:focus,
.tasknotes-plugin .filter-bar__conjunction-select:focus,
.tasknotes-plugin .filter-bar__sort-select:focus,
.tasknotes-plugin .filter-bar__group-select:focus {
    outline: 1px solid var(--color-accent);
}

.tasknotes-plugin .filter-bar__delete-button:focus,
.tasknotes-plugin .filter-bar__action-button:focus,
.tasknotes-plugin .filter-bar__view-options-button:focus,
.tasknotes-plugin .filter-bar__section-header:focus,
.tasknotes-plugin .filter-bar__view-selector-button:focus {
    outline: 1px solid var(--color-accent);
}

/* =================================================================
   ERROR STATE STYLING
   ================================================================= */

.tasknotes-plugin .filter-bar-error {
    padding: var(--size-4-2);
    color: var(--text-muted);
    text-align: center;
    font-size: var(--font-ui-smaller);
    border-radius: var(--radius-s);
    background-color: var(--background-modifier-hover);
}

/* =================================================================
   DARK MODE COMPATIBILITY
   ================================================================= */

.theme-dark .tasknotes-plugin .filter-bar__main-box {
    background: var(--background-secondary-alt);
}

.theme-dark .tasknotes-plugin .filter-bar__group {
    background: var(--background-secondary);
}

.theme-dark .tasknotes-plugin .filter-bar__condition {
    background: var(--background-primary);
}

.theme-dark .tasknotes-plugin .filter-bar-error {
    background-color: var(--background-modifier-hover);
    color: var(--text-muted);
}

/* =================================================================
   HIGH CONTRAST MODE
   ================================================================= */

@media (prefers-contrast: high) {
    .tasknotes-plugin .advanced-filter-bar {
        border-width: 2px;
    }

    .tasknotes-plugin .filter-bar__condition,
    .tasknotes-plugin .filter-bar__group {
        border-width: 2px;
    }

    .tasknotes-plugin .filter-bar__property-select,
    .tasknotes-plugin .filter-bar__operator-select,
    .tasknotes-plugin .filter-bar__value-input {
        border-width: 2px;
    }
}

/* =================================================================
   BUTTON ICONS VIA CSS PSEUDO-ELEMENTS
   ================================================================= */

/* Add filter button - plus sign */
.tasknotes-plugin .filter-bar__add-filter::before {
    content: "+ ";
    margin-right: 4px;
    font-weight: bold;
    color: var(--color-accent);
}

/* Add filter group button - plus sign in circle */
.tasknotes-plugin .filter-bar__add-group::before {
    content: "⊕ ";
    margin-right: 4px;
    font-weight: bold;
    color: var(--color-accent);
}



/* ===== FILTER-HEADING.CSS ===== */
/* =================================================================
   FILTER HEADING COMPONENT
   ================================================================= */

/* All FilterHeading styles are scoped under .tasknotes-plugin for proper isolation */

/* Main Container */
.tasknotes-plugin .filter-heading {
    margin-top: var(--tn-spacing-lg);
    margin-bottom: var(--tn-spacing-lg);
}

/* Content wrapper with heading and count */
.tasknotes-plugin .filter-heading__content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: var(--tn-spacing-md);
}

/* Heading title */
.tasknotes-plugin .filter-heading__title {
    margin: 0;
    font-size: var(--font-ui-medium);
    font-weight: 600;
    color: var(--text-normal);
}

/* Count display */
.tasknotes-plugin .filter-heading__count {
    font-weight: 600;
    font-size: var(--font-ui-small);
    margin-left: 10px;
}

/* Divider line */
.tasknotes-plugin .filter-heading__divider {
    height: 1px;
    background-color: var(--background-modifier-border);
    margin-bottom: var(--tn-spacing-lg);
}


/* ===== SEARCH-BOX.CSS ===== */
/* Search Box Component - BEM Structure */

.tn-search-container {
	padding: 0;
	margin: 0;
	background: transparent;
	border: none;
}

.tn-search-box {
	padding: 0;
	padding-top: var(--size-4-3, 12px);
	background: transparent;
	border: none;
}

.tn-search-box__input-wrapper {
	display: flex;
	align-items: center;
	gap: var(--size-4-2, 8px);
	padding-left: var(--size-4-3, 12px);
	border: none;
}

.tn-search-box__icon {
	color: var(--text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.tn-search-box__icon svg {
	width: 16px;
	height: 16px;
}

.tn-search-box__input {
	flex: 1;
	padding: var(--size-4-2, 8px) var(--size-4-3, 12px);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m, 8px);
	background: var(--input-background, var(--background-primary));
	color: var(--text-normal);
	font-size: var(--font-ui-small, 13px);
	outline: none;
	min-width: 0;
	transition: border-color 0.2s ease;
}

.tn-search-box__input::placeholder {
	color: var(--text-muted);
	font-style: italic;
}

.tn-search-box__clear {
	background: transparent;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	padding: 0;
	font-size: 20px;
	line-height: 1;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-s, 4px);
	flex-shrink: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.2s ease;
}

.tn-search-box__clear.is-visible {
	opacity: 1;
	visibility: visible;
}

.tn-search-box__clear:hover {
	color: var(--text-normal);
	background-color: var(--background-modifier-hover);
}

.tn-search-box__clear:active {
	background-color: var(--background-modifier-active-hover);
}

/* Focus styles for accessibility */
.tn-search-box__clear:focus-visible {
	outline: 2px solid var(--interactive-accent);
	outline-offset: 2px;
}

/* No results state */
.tn-search-no-results {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--size-4-8, 32px) var(--size-4-4, 16px);
	text-align: center;
	color: var(--text-muted);
}

.tn-search-no-results__text {
	font-size: var(--font-ui-medium, 14px);
	color: var(--text-normal);
	margin-bottom: var(--size-4-2, 8px);
}

.tn-search-no-results__hint {
	font-size: var(--font-ui-small, 13px);
	color: var(--text-muted);
}



/* ===== MODAL-BEM.CSS ===== */
/* =====================================================================
   MODAL COMPONENTS - BEM with TaskNotes Plugin Scoping
   ===================================================================== */

/* =====================================================================
   NATURAL LANGUAGE INPUT - MINIMALIST STYLES
   ===================================================================== */

.tasknotes-plugin .nl-input-container {
    margin-bottom: var(--size-4-3);
}

.tasknotes-plugin .nl-input {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    font-size: var(--tn-font-size-lg);
    line-height: 1.5;
    transition: border-color 0.2s ease;
}

.tasknotes-plugin .nl-input:focus {
    outline: none;
    border-color: var(--interactive-accent);
    box-shadow: none;
}

.tasknotes-plugin .nl-button-container {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    align-items: center;
}

.tasknotes-plugin .nl-quick-create-button {
    padding: 6px 16px;
    font-size: var(--tn-font-size-lg);
    font-weight: 500;
    border-radius: var(--radius-s);
    border: none;
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    cursor: var(--cursor);
    transition: all 0.2s ease;
}

.tasknotes-plugin .nl-quick-create-button:hover {
    background: var(--interactive-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tasknotes-plugin .nl-parse-button {
    padding: 6px 14px;
    font-size: var(--tn-font-size-md);
    font-weight: 500;
    border-radius: var(--radius-s);
    border: 1px solid var(--background-modifier-border);
    background: var(--background-primary);
    color: var(--tn-text-muted);
    cursor: var(--cursor);
    transition: all 0.2s ease;
}

.tasknotes-plugin .nl-parse-button:hover {
    background: var(--background-modifier-hover);
    color: var(--tn-text-normal);
    border-color: var(--interactive-accent);
}

.tasknotes-plugin .nl-show-detail-button {
    padding: 6px 8px;
    font-size: var(--tn-font-size-lg);
    font-weight: 600;
    border-radius: var(--radius-s);
    border: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
    color: var(--tn-text-muted);
    cursor: var(--cursor);
    transition: all 0.2s ease;
}

.tasknotes-plugin .nl-show-detail-button:hover {
    background: var(--background-modifier-hover);
    color: var(--tn-text-normal);
    border-color: var(--interactive-accent);
}

.tasknotes-plugin .nl-preview-container {
    margin-top: var(--size-4-1);
    padding: var(--size-4-1);
    background: var(--background-primary-alt);
    border-radius: var(--radius-s);
    border: 1px solid var(--background-modifier-border);
}

.tasknotes-plugin .nl-preview-item {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-muted);
}

.tasknotes-plugin .nl-preview-icon {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    opacity: 0.7;
}

.tasknotes-plugin .nl-preview-text-content {
    line-height: 1.3;
}

/* =====================================================================
   BASE MODAL CONTAINER STYLES
   ===================================================================== */

.tasknotes-plugin .due-date-modal,
.tasknotes-plugin .scheduled-date-modal,
.tasknotes-plugin .task-selector-modal {
    padding: var(--tn-spacing-xl);
    max-width: 580px;
    width: 100%;
    background: var(--tn-bg-primary);
    border-radius: var(--tn-radius-md);
    box-shadow: var(--tn-shadow-strong);
}

/* =====================================================================
   MODAL HEADERS AND HEADINGS
   ===================================================================== */

.tasknotes-plugin .due-date-modal .setting-item-heading,
.tasknotes-plugin .scheduled-date-modal .setting-item-heading {
    font-size: var(--tn-font-size-xl);
    font-weight: var(--tn-font-weight-semibold);
    color: var(--tn-text-normal);
    line-height: 1.3;
    border-bottom: 1px solid var(--tn-border-color);
    margin-bottom: var(--tn-spacing-lg);
    padding-bottom: var(--tn-spacing-md);
}

/* =====================================================================
   SHARED FORM COMPONENTS (BEM)
   ===================================================================== */

/* Form Group Container */
.tasknotes-plugin .modal-form__group {
    margin-bottom: var(--tn-spacing-lg);
    position: relative;
}

/* Form Labels */
.tasknotes-plugin .modal-form__label {
    display: block;
    font-size: var(--tn-font-size-lg);
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    margin-bottom: var(--tn-spacing-sm);
    line-height: 1.4;
}

/* Help Text */
.tasknotes-plugin .modal-form__help-text {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    margin-top: var(--tn-spacing-sm);
    line-height: 1.4;
    font-style: italic;
}

/* Input Container */
.tasknotes-plugin .modal-form__input-container {
    position: relative;
}

/* Base Input Styles */
.tasknotes-plugin .modal-form__input,
.tasknotes-plugin .modal-form__select {
    padding: var(--tn-spacing-md) var(--tn-spacing-lg);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    background: var(--tn-bg-primary);
    color: var(--tn-text-normal);
    font-family: inherit;
    font-size: var(--tn-font-size-lg);
    font-weight: var(--tn-font-weight-normal);
    line-height: 1.4;
    transition: border-color var(--tn-transition-fast);
    width: 100%;
    box-sizing: border-box;
    outline: none;
}

/* Make select elements taller to prevent dropdown option clipping */
.tasknotes-plugin .modal-form__select {
    padding: var(--tn-spacing-lg) var(--tn-spacing-lg);
    min-height: 44px;
    line-height: 1.6;
}

.tasknotes-plugin .modal-form__input:hover,
.tasknotes-plugin .modal-form__select:hover {
    border-color: var(--tn-border-color-hover);
}

.tasknotes-plugin .modal-form__input:focus,
.tasknotes-plugin .modal-form__select:focus {
    border-color: var(--interactive-accent);
    box-shadow: none;
    outline: none;
}

/* Input Modifiers */
.tasknotes-plugin .modal-form__input--textarea {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
}

.tasknotes-plugin .modal-form__input--title {
    font-weight: var(--tn-font-weight-medium);
}

.tasknotes-plugin .modal-form__input--number {
    width: 80px;
    flex-shrink: 0;
}

/* =====================================================================
   CHARACTER COUNTER COMPONENT
   ===================================================================== */

.tasknotes-plugin .modal-form__char-counter {
    position: absolute;
    top: calc(-1 * var(--tn-spacing-lg));
    right: 0;
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    font-weight: var(--tn-font-weight-normal);
    line-height: 1.4;
    pointer-events: none;
}

.tasknotes-plugin .modal-form__char-counter--warning {
    color: var(--tn-color-error);
    font-weight: var(--tn-font-weight-medium);
}

/* =====================================================================
   AUTOCOMPLETE COMPONENT
   ===================================================================== */

.tasknotes-plugin .modal-form__autocomplete {
    position: relative;
}

.tasknotes-plugin .modal-form__suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--tn-bg-primary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    box-shadow: var(--tn-shadow-strong);
    z-index: var(--tn-z-dropdown);
    max-height: 240px;
    overflow-y: auto;
    padding: var(--tn-spacing-sm) 0;
}

.tasknotes-plugin .modal-form__suggestion {
    padding: var(--tn-spacing-sm) var(--tn-spacing-lg);
    cursor: var(--cursor);
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-normal);
    line-height: 1.5;
    transition: background-color var(--tn-transition-fast);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.tasknotes-plugin .modal-form__suggestion:hover,
.tasknotes-plugin .modal-form__suggestion--selected {
    background: var(--tn-interactive-hover);
}

/* =====================================================================
   DATE/TIME INPUT COMPONENTS
   ===================================================================== */

/* DateTime Container */
.tasknotes-plugin .modal-form__datetime-container {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
    flex-wrap: wrap;
}

/* User-field date input: full width textbox; icon overlayed on the left */
.tasknotes-plugin .tn-date-control {
  position: relative;
  padding-left: 35px; /* reserve space for the icon to the left of the textbox */
}
.tasknotes-plugin .tn-date-control input[type="text"] {
  padding-left: 0; /* the padding-left is applied on the container */
}
.tasknotes-plugin .tn-date-control .user-field-date-picker-btn {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--tn-text-muted);
  z-index: 1;
}
.tasknotes-plugin .tn-date-control .user-field-date-picker-btn:hover {
  color: var(--text-normal);
}


/* Date and Time Input Modifiers */
.tasknotes-plugin .modal-form__input--date {
    flex: 1;
    min-width: 140px;
}

.tasknotes-plugin .modal-form__input--time {
    width: 120px;
    font-family: var(--tn-font-mono);
    flex-shrink: 0;
}

/* =====================================================================
   TIME ESTIMATE COMPONENT
   ===================================================================== */

.tasknotes-plugin .modal-form__time-estimate {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-md);
}

.tasknotes-plugin .modal-form__time-label {
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-muted);
    white-space: nowrap;
}

/* =====================================================================
   RECURRENCE COMPONENTS
   ===================================================================== */

.tasknotes-plugin .modal-form__recurrence {
    position: relative;
}

.tasknotes-plugin .modal-form__recurrence-options {
    margin-top: var(--tn-spacing-lg);
    padding: var(--tn-spacing-lg);
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-md);
}

.tasknotes-plugin .modal-form__recurrence-label {
    font-size: var(--tn-font-size-md);
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    margin-bottom: var(--tn-spacing-md);
}

/* Interval Input Components */
.tasknotes-plugin .modal-form__interval-container {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
    margin: var(--tn-spacing-md) 0;
    padding: var(--tn-spacing-md);
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
}

.tasknotes-plugin .modal-form__interval-label {
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-normal);
    font-weight: var(--tn-font-weight-medium);
    white-space: nowrap;
}

.tasknotes-plugin .modal-form__input--interval {
    width: 80px !important;
    min-width: 60px;
    flex-shrink: 0;
    text-align: center;
}

.tasknotes-plugin .modal-form__interval-unit {
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-normal);
    font-weight: var(--tn-font-weight-medium);
    white-space: nowrap;
}

/* RRule Options Container */
.tasknotes-plugin .modal-form__rrule-options {
    margin: var(--tn-spacing-md) 0;
}

/* RRule Labels */
.tasknotes-plugin .modal-form__rrule-label {
    display: block;
    font-size: var(--tn-font-size-md);
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    margin-bottom: var(--tn-spacing-sm);
}

/* Monthly and Yearly Options */
.tasknotes-plugin .modal-form__monthly-mode,
.tasknotes-plugin .modal-form__yearly-options {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-md);
}

.tasknotes-plugin .modal-form__radio-option {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
    flex-wrap: nowrap;
}

.tasknotes-plugin .modal-form__radio-option input[type="radio"] {
    width: auto;
    height: auto;
    flex: none;
    margin: 0;
}

.tasknotes-plugin .modal-form__select--position,
.tasknotes-plugin .modal-form__select--weekday,
.tasknotes-plugin .modal-form__select--month {
    width: auto;
    min-width: 120px;
    flex-shrink: 0;
}

.tasknotes-plugin .modal-form__input--day {
    width: 60px;
    text-align: center;
}

.tasknotes-plugin .modal-form__yearly-label {
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-normal);
    white-space: nowrap;
}

/* =====================================================================
   DETAILED FORM CONTAINER (TaskCreationModal specific)
   ===================================================================== */

.tasknotes-plugin .detailed-form-container {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-lg);
    width: 100%;
    box-sizing: border-box;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-in-out;
}

.tasknotes-plugin .detailed-form-container.hidden {
    display: none;
}




/* End Condition Options */
.tasknotes-plugin .modal-form__end-condition {
    margin: var(--tn-spacing-md) 0;
    padding: var(--tn-spacing-md);
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
}

.tasknotes-plugin .modal-form__end-options {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-sm);
    margin-top: var(--tn-spacing-md);
}

.tasknotes-plugin .modal-form__input--count {
    width: 80px;
    text-align: center;
}

.tasknotes-plugin .modal-form__count-label {
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-normal);
    white-space: nowrap;
}

/* RRule Summary */
.tasknotes-plugin .modal-form__rrule-summary {
    margin-top: var(--tn-spacing-md);
    padding: var(--tn-spacing-md);
    background: var(--tn-bg-primary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
}

.tasknotes-plugin .modal-form__rrule-text {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    font-style: italic;
    line-height: 1.4;
}

/* Days of Week Grid */
.tasknotes-plugin .modal-form__days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--tn-spacing-md);
    margin-top: var(--tn-spacing-md);
    padding: var(--tn-spacing-lg);
    background: var(--tn-bg-primary);
    border-radius: var(--tn-radius-sm);
    border: 1px solid var(--tn-border-color);
}

.tasknotes-plugin .modal-form__day-checkbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tn-spacing-sm);
    cursor: var(--cursor);
}

.tasknotes-plugin .modal-form__day-input {
    margin: 0;
    cursor: var(--cursor);
    width: auto;
    height: auto;
    flex: none;
}

.tasknotes-plugin .modal-form__day-label {
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: var(--cursor);
    user-select: none;
    line-height: 1;
}

/* =====================================================================
   BUTTON COMPONENTS
   ===================================================================== */

.tasknotes-plugin .modal-form__buttons {
    display: flex;
    gap: var(--tn-spacing-lg);
    justify-content: flex-end;
    align-items: center;
    margin-top: var(--tn-spacing-xxl);
    padding-top: var(--tn-spacing-lg);
    border-top: 1px solid var(--tn-border-color);
}

/* Buttons use shared tn-btn system; no modal-specific overrides here */

/* Tertiary Button (Open note, etc.) */
.tasknotes-plugin .modal-form__button--tertiary {
    background: transparent;
    color: var(--tn-interactive-accent);
    border: none;
    padding: var(--tn-spacing-md);
}

.tasknotes-plugin .modal-form__button--tertiary:hover {
    background: var(--tn-interactive-hover);
    color: var(--tn-interactive-accent-hover);
}

/* Quick Date Buttons */
.tasknotes-plugin .modal-form__quick-actions {
    display: flex;
    gap: var(--tn-spacing-md);
    flex-wrap: wrap;
    margin-top: var(--tn-spacing-md);
}

.tasknotes-plugin .modal-form__button--quick-date {
    flex: 1;
    min-width: 0;
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    background: var(--tn-bg-secondary);
    color: var(--tn-text-normal);
    border: 1px solid var(--tn-border-color);
    font-size: var(--tn-font-size-sm);
}

.tasknotes-plugin .modal-form__button--quick-date:hover {
    background: var(--tn-interactive-hover);
    border-color: var(--tn-border-color-hover);
}

.tasknotes-plugin .modal-form__button--quick-date--clear {
    background: var(--tn-bg-primary);
    color: var(--tn-text-muted);
}

.tasknotes-plugin .modal-form__button--quick-date--clear:hover {
    background: var(--tn-interactive-hover);
    color: var(--tn-text-normal);
}



/* =====================================================================
   QUICK DATE MODALS SPECIFIC
   ===================================================================== */

.tasknotes-plugin .due-date-modal__task-title,
.tasknotes-plugin .scheduled-date-modal__task-title {
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-normal);
    margin-bottom: var(--tn-spacing-lg);
    padding: var(--tn-spacing-md) var(--tn-spacing-lg);
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    font-weight: var(--tn-font-weight-medium);
}

/* =====================================================================
   TASK SELECTOR MODAL SPECIFIC
   ===================================================================== */

.tasknotes-plugin .task-selector-modal__suggestion {
    padding: var(--tn-spacing-md);
    border-radius: var(--tn-radius-sm);
    border-left: 3px solid transparent;
    transition: all var(--tn-transition-fast);
}

.tasknotes-plugin .task-selector-modal__suggestion:hover {
    background: var(--tn-interactive-hover);
}

.tasknotes-plugin .task-selector-modal__title {
    margin-bottom: var(--tn-spacing-xs);
}

.tasknotes-plugin .task-selector-modal__task-title {
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    font-size: var(--tn-font-size-md);
}

.tasknotes-plugin .task-selector-modal__task-title--completed {
    text-decoration: line-through;
    color: var(--tn-text-muted);
}

.tasknotes-plugin .task-selector-modal__task-title--high-priority {
    color: var(--tn-color-error);
    border-left-color: var(--tn-color-error);
}

.tasknotes-plugin .task-selector-modal__task-title--low-priority {
    color: var(--tn-text-muted);
}

.tasknotes-plugin .task-selector-modal__meta {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
}

.tasknotes-plugin .task-selector-modal__due-date {
    padding: 2px var(--tn-spacing-xs);
    border-radius: var(--tn-radius-sm);
    background: var(--tn-bg-secondary);
    font-size: var(--tn-font-size-xs);
}

.tasknotes-plugin .task-selector-modal__due-date--overdue {
    background: rgba(var(--tn-color-error), 0.1);
    color: var(--tn-color-error);
}

.tasknotes-plugin .task-selector-modal__due-date--today {
    background: rgba(var(--tn-color-warning), 0.1);
    color: var(--tn-color-warning);
}

.tasknotes-plugin .task-selector-modal__contexts {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
}

.tasknotes-plugin .task-selector-modal__context-tag {
    padding: 1px var(--tn-spacing-xs);
    border-radius: var(--tn-radius-sm);
    background: var(--tn-bg-secondary);
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-muted);
}

.tasknotes-plugin .task-selector-modal__status {
    padding: 2px var(--tn-spacing-xs);
    border-radius: var(--tn-radius-sm);
    font-size: var(--tn-font-size-xs);
    text-transform: capitalize;
    background: var(--tn-bg-secondary);
    color: var(--tn-text-normal);
}

/* =====================================================================
   ERROR STATES
   ===================================================================== */

.tasknotes-plugin .modal-form__error {
    padding: var(--tn-spacing-md) var(--tn-spacing-lg);
    margin: var(--tn-spacing-md) 0;
    background: rgba(var(--tn-color-error), 0.1);
    border: 1px solid var(--tn-color-error);
    border-radius: var(--tn-radius-sm);
    color: var(--tn-color-error);
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
}

/* =====================================================================
   RESPONSIVE DESIGN
   ===================================================================== */

@media (max-width: 768px) {
    .tasknotes-plugin .due-date-modal,
    .tasknotes-plugin .scheduled-date-modal {
        padding: var(--tn-spacing-lg);
        max-width: 92vw;
    }

    .tasknotes-plugin .modal-form__buttons {
        flex-direction: column;
        gap: var(--tn-spacing-md);
    }

    .tasknotes-plugin .modal-form__button {
        width: 100%;
        justify-content: center;
    }

    .tasknotes-plugin .modal-form__days-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--tn-spacing-sm);
    }

    .tasknotes-plugin .modal-form__quick-actions {
        flex-direction: column;
    }

    .tasknotes-plugin .modal-form__button--quick-date {
        flex: none;
    }
}

/* =====================================================================
   ACCESSIBILITY ENHANCEMENTS
   ===================================================================== */

/* Focus styles are defined above - removed duplicate conflicting rules */

/* Screen reader only text */
.tasknotes-plugin .modal-form__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
   ICS NOTE CREATION MODAL
   ===================================================================== */

.tasknotes-plugin .ics-note-creation-modal {
    width: 600px;
    max-width: 90vw;
}

.tasknotes-plugin .ics-event-preview {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: var(--size-4-3);
    margin-bottom: var(--size-4-3);
}

.tasknotes-plugin .ics-event-preview h3 {
    margin: 0 0 var(--size-4-2) 0;
    color: var(--tn-interactive-accent);
}

.tasknotes-plugin .event-details > div {
    margin-bottom: var(--size-4-1);
    font-size: var(--tn-font-size-md);
    line-height: 1.4;
}

/* Align all modal setting controls to the right edge of the column */
.tasknotes-plugin .modal .setting-item .setting-item-control {
  flex: none;
  text-align: end;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--size-4-2);
}


.tasknotes-plugin .content-type-selector .setting-item-control {
    display: flex;
    gap: var(--size-4-2);
}

.tasknotes-plugin .content-type-buttons button {
    padding: var(--size-4-1) var(--size-4-3);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: var(--background-primary);
    color: var(--tn-text-normal);
    cursor: var(--cursor);
    transition: all 0.2s ease;
}

.tasknotes-plugin .content-type-buttons button:hover {
    background: var(--background-modifier-hover);
}

.tasknotes-plugin .content-type-buttons button.mod-cta {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border-color: var(--interactive-accent);
}

.tasknotes-plugin .content-preview {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: var(--size-4-3);
    margin: var(--size-4-3) 0;
}

.tasknotes-plugin .content-preview h4 {
    margin: 0 0 var(--size-4-2) 0;
    color: var(--tn-interactive-accent);
}

.tasknotes-plugin .preview-details > div {
    margin-bottom: var(--size-4-1);
    font-size: var(--tn-font-size-md);
}

.tasknotes-plugin .template-variables {
    margin-top: var(--size-4-3);
}

.tasknotes-plugin .template-variables h5 {
    margin: 0 0 var(--size-4-2) 0;
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tasknotes-plugin .variables-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-4-1);
}

.tasknotes-plugin .template-variable {
    background: var(--background-modifier-border);
    color: var(--tn-text-muted);
    padding: 2px var(--size-4-1);
    border-radius: var(--radius-s);
    font-size: var(--tn-font-size-sm);
    font-family: var(--font-monospace);
}

.tasknotes-plugin .modal-button-container {
    display: flex;
    justify-content: flex-end;
    gap: var(--size-4-2);
    margin-top: var(--size-4-4);
    padding-top: var(--size-4-3);
    border-top: 1px solid var(--background-modifier-border);
}

/* =====================================================================
   ICS EVENT INFO MODAL
   ===================================================================== */

.tasknotes-plugin .ics-event-info-modal {
    width: 700px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    z-index: 1000;
}

.tasknotes-plugin .ics-event-info-modal .modal-content {
    padding: var(--size-4-4);
    box-sizing: border-box;
}

.tasknotes-plugin .ics-event-info-modal * {
    box-sizing: border-box;
}

.tasknotes-plugin .ics-event-info-modal .modal-header h2 {
    margin: 0 0 var(--size-4-4) 0;
    color: var(--tn-interactive-accent);
}

.tasknotes-plugin .event-details-section,
.tasknotes-plugin .related-notes-section,
.tasknotes-plugin .action-buttons-section {
    margin-bottom: var(--size-4-4);
    padding-bottom: var(--size-4-3);
    border-bottom: 1px solid var(--background-modifier-border);
}

.tasknotes-plugin .event-details-section:last-of-type,
.tasknotes-plugin .related-notes-section:last-of-type,
.tasknotes-plugin .action-buttons-section:last-of-type {
    border-bottom: none;
}

.tasknotes-plugin .event-details-section h3,
.tasknotes-plugin .related-notes-section h3,
.tasknotes-plugin .action-buttons-section h3 {
    margin: 0 0 var(--size-4-3) 0;
    font-size: var(--tn-font-size-lg);
    color: var(--tn-text-normal);
}

.tasknotes-plugin .event-details-grid {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-2);
}

.tasknotes-plugin .detail-row {
    display: flex;
    align-items: flex-start;
    gap: var(--size-4-2);
    font-size: var(--tn-font-size-md);
    margin-bottom: var(--size-4-2);
    line-height: 1.4;
    clear: both;
    overflow: hidden;
}

.tasknotes-plugin .detail-row strong {
    min-width: 120px;
    flex-shrink: 0;
    color: var(--tn-text-muted);
    font-weight: 500;
}

.tasknotes-plugin .detail-row span {
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.tasknotes-plugin .detail-row.description-row {
    flex-direction: column;
    gap: var(--size-4-1);
}

.tasknotes-plugin .description-content {
    background: var(--background-secondary);
    padding: var(--size-4-2);
    border-radius: var(--radius-s);
    border: 1px solid var(--background-modifier-border);
    font-style: italic;
    white-space: pre-wrap;
}

.tasknotes-plugin .external-link {
    color: var(--interactive-accent);
    text-decoration: none;
}

.tasknotes-plugin .external-link:hover {
    text-decoration: underline;
}

.tasknotes-plugin .empty-state {
    text-align: center;
    color: var(--tn-text-muted);
    font-style: italic;
    padding: var(--size-4-4);
    background: var(--background-secondary);
    border-radius: var(--radius-s);
    border: 1px solid var(--background-modifier-border);
}

.tasknotes-plugin .related-notes-list {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-2);
}

.tasknotes-plugin .related-note-item {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: var(--size-4-3);
    transition: background-color 0.2s ease;
}

.tasknotes-plugin .related-note-item:hover {
    background: var(--background-modifier-hover);
}

.tasknotes-plugin .note-header {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
    margin-bottom: var(--size-4-1);
}

.tasknotes-plugin .note-icon {
    font-size: var(--tn-font-size-lg);
    opacity: 0.7;
}

.tasknotes-plugin .note-header .internal-link {
    color: var(--tn-text-normal);
    text-decoration: none;
    font-weight: 500;
    flex: 1;
}

.tasknotes-plugin .note-header .internal-link:hover {
    color: var(--interactive-accent);
    text-decoration: underline;
}

.tasknotes-plugin .note-metadata {
    display: flex;
    gap: var(--size-4-2);
    font-size: var(--tn-font-size-sm);
}

.tasknotes-plugin .note-status,
.tasknotes-plugin .note-priority {
    background: var(--background-modifier-border);
    padding: 2px var(--size-4-1);
    border-radius: var(--radius-s);
    color: var(--tn-text-muted);
}

.tasknotes-plugin .action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-4-2);
}


.tasknotes-plugin .close-button-container {
    display: flex;
    justify-content: center;
    margin-top: var(--size-4-4);
    padding-top: var(--size-4-3);
    border-top: 1px solid var(--background-modifier-border);
}

/* =====================================================================
   ICS NOTE LINK MODAL (Fuzzy Selector)
   ===================================================================== */

.tasknotes-plugin .ics-note-link-suggestion {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-1);
    padding: var(--size-4-2);
}

.tasknotes-plugin .note-link-name {
    font-weight: 500;
    color: var(--tn-text-normal);
}

.tasknotes-plugin .note-link-path {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    font-style: italic;
}



/* ===== TASK-MODAL.CSS ===== */
/* =====================================================================
   TASK MODAL - Google Keep/Todoist Inspired
   ===================================================================== */

/* Fix suggestion text truncation */
.suggestion-item .nlp-suggest-text {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    width: auto;
}

/* =====================================================================
   EMBEDDABLE MARKDOWN EDITOR
   ===================================================================== */

.details-markdown-editor {
    margin-bottom: var(--size-4-3);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    overflow: hidden;
    min-height: 200px;
    max-height: 400px;
}

.details-markdown-editor .task-details-editor {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
}

/* Make the editor container scrollable */
.details-markdown-editor .cm-editor {
    height: 100%;
    min-height: 200px;
    max-height: 400px;
}

.details-markdown-editor .cm-scroller {
    overflow: auto;
    max-height: 400px;
    padding-top: var(--size-4-2);
    padding-bottom: var(--size-4-2);
}

/* Style the editor content */
.details-markdown-editor .cm-content {
    padding-left: var(--size-4-2) !important;
    padding-right: var(--size-4-2) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-family: var(--font-text);
    font-size: var(--font-ui-medium);
    line-height: var(--line-height-normal);
}

/* Ensure the editor line doesn't add extra padding */
/* .details-markdown-editor .cm-line { */
/*     padding-left: 0 !important; */
/*     padding-right: 0 !important; */
/* } */

/* Placeholder styling */
.details-markdown-editor .cm-placeholder {
    color: var(--text-faint);
    font-style: italic;
}

/* =====================================================================
   NLP MARKDOWN EDITOR
   ===================================================================== */

.nl-markdown-editor {
    margin-bottom: var(--size-4-2);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    overflow: visible;
    min-height: 80px;
    max-height: 200px;
    background: transparent;
    transition: all 0.2s ease;
}

.nl-markdown-editor .nlp-editor {
    min-height: 80px;
    max-height: 200px;
    overflow-y: auto;
}

.nl-markdown-editor .cm-editor {
    height: 100%;
    min-height: 80px;
    max-height: 200px;
    background: transparent;
	overflow: visible;
}

/* Focus state for NLP editor - match old nl-input styling */
.nl-markdown-editor:focus-within {
    border-color: var(--interactive-accent);
    background: transparent;
    box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
}

.nl-markdown-editor:focus-within .cm-editor {
    background: transparent;
}

.nl-markdown-editor .cm-scroller {
    overflow: auto;
    max-height: 200px;
    padding-top: var(--size-4-3);
    padding-bottom: var(--size-4-3);
}

.nl-markdown-editor .cm-content {
    padding-left: var(--size-4-2) !important;
    padding-right: var(--size-4-2) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-family: var(--font-text);
    font-size: var(--font-ui-medium);
    line-height: 1.5;
}


.nl-markdown-editor .cm-placeholder {
    color: var(--text-muted);
    font-style: italic;
}


/* =====================================================================
   CODEMIRROR AUTOCOMPLETE STYLING (for NLP triggers)
   Scoped to TaskNotes modals only
   ===================================================================== */

/* Main autocomplete tooltip - scoped to TaskNotes modals */
.tasknotes-plugin .cm-tooltip-autocomplete {
    background-color: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-s);
    padding: var(--size-4-1);
    font-family: var(--font-ui);
    font-size: var(--font-ui-small);
	z-index: 9999;
    max-height: 300px;
    overflow-y: auto;
}

/* Autocomplete list */
.tasknotes-plugin .cm-tooltip-autocomplete ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Individual completion option */
.tasknotes-plugin .cm-tooltip-autocomplete li {
    padding: var(--size-4-2) var(--size-4-3);
    cursor: var(--cursor);
    border-radius: var(--radius-s);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-4-2);
}

/* Hovered option */
.tasknotes-plugin .cm-tooltip-autocomplete li:hover,
.tasknotes-plugin .cm-tooltip-autocomplete li[aria-selected="true"] {
    background-color: var(--background-modifier-hover);
}

/* Selected option */
.tasknotes-plugin .cm-tooltip-autocomplete li[aria-selected="true"] {
    background-color: var(--background-modifier-active-hover);
}

/* Completion label (main text) */
.tasknotes-plugin .cm-completionLabel {
    flex: 1;
    color: var(--text-normal);
    font-weight: 500;
}

/* Completion info (right side) */
.tasknotes-plugin .cm-completionInfo {
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    font-weight: normal;
}

/* Completion detail (description) */
.tasknotes-plugin .cm-completionDetail {
    color: var(--text-faint);
    font-size: var(--font-ui-smaller);
    margin-left: var(--size-4-2);
}

/* Icon for different completion types */
.tasknotes-plugin .cm-completionIcon {
    width: 16px;
    height: 16px;
    margin-right: var(--size-4-2);
    color: var(--text-muted);
}

/* Match highlighting in completion */
.tasknotes-plugin .cm-completionMatchedText {
    text-decoration: underline;
    color: var(--color-accent);
}

.tasknotes-plugin.minimalist-task-modal {
    /* Modal container adjustments */
}

/* Modal header with TaskNotes icon */
.modal-header-container {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
    margin-bottom: var(--size-4-3);
}

.modal-header-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    color: var(--color-accent);
    width: 20px;
    height: 20px;
}

.modal-header-icon svg {
    width: 20px !important;
    height: 20px !important;
    color: var(--color-accent);
}

/* User fields section styling */
.user-fields-separator {
    margin-top: var(--size-4-4);
    border-top: 0.5px solid var(--background-modifier-border);
    padding-top: var(--size-4-3);
}

/* Section separator between field groups */
.tasknotes-plugin .task-modal__section-separator {
    border: none;
    border-top: 0.5px solid var(--background-modifier-border);
    margin: var(--size-4-3) 0;
}

.detail-label-section {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.9em;
    margin-bottom: var(--size-4-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-header-icon .svg-icon {
    width: 20px !important;
    height: 20px !important;
}

.modal-header-icon .tasknotes-simple {
    width: 20px !important;
    height: 20px !important;
    color: var(--color-accent) !important;
}

.modal-header-title {
    font-size: var(--font-ui-larger);
    font-weight: var(--font-weight-bold);
    color: var(--text-normal);
}

.tasknotes-plugin.minimalist-task-modal .modal-content {
    padding: 0;
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-l);
    min-width: 480px;
    max-width: 600px;
}

.tasknotes-plugin .minimalist-modal-container {
    padding: var(--size-4-4);
    background: var(--modal-background);
}

/* Override shadow variable inside the modal, then re-apply outer shadow explicitly */
.theme-light .tasknotes-plugin.minimalist-task-modal,
.theme-dark .tasknotes-plugin.minimalist-task-modal {
    --shadow-l: none;
}

/* Re-apply outer shadow to the modal element itself */
.tasknotes-plugin.minimalist-task-modal > .modal {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* =====================================================================
   TITLE INPUT - PRIMARY FOCUS
   ===================================================================== */

.tasknotes-plugin .title-input-container {
    margin-bottom: var(--size-4-3);
}

.tasknotes-plugin .title-input {
    width: 100%;
    padding: var(--size-4-2) var(--size-4-1);
    font-size: var(--font-ui-large);
    font-weight: 500;
    line-height: 1.4;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-normal);
    resize: none;
    min-height: 44px;
    transition: all 0.2s ease;
}

.tasknotes-plugin .title-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.tasknotes-plugin .title-input:focus,
.tasknotes-plugin .title-input:active,
.tasknotes-plugin .title-input:focus-visible {
    background: var(--background-modifier-hover);
    border-radius: var(--radius-s);
    outline: none;
    box-shadow: none;
}

/* =====================================================================
   ACTION BAR - ICON-BASED CONTROLS
   ===================================================================== */

.tasknotes-plugin .action-bar {
    display: flex;
    align-items: center;
    gap: var(--size-4-1);
    margin-bottom: var(--size-4-3);
    padding: var(--size-4-1) 0;
}

.tasknotes-plugin .action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-s);
    cursor: var(--cursor);
    transition: all 0.2s ease;
    position: relative;
}

.tasknotes-plugin .action-icon:hover {
    background: var(--background-modifier-hover);
    transform: translateY(-1px);
}

.tasknotes-plugin .action-icon .icon {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.tasknotes-plugin .action-icon:hover .icon {
    color: var(--text-normal);
}

/* Active state for icons when they have values - only show the dot */
.tasknotes-plugin .action-icon.has-value {
    /* Remove full background colorization */
}

.tasknotes-plugin .action-icon.has-value::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border: 2px solid var(--background-primary);
    border-radius: 50%;
}

/* =====================================================================
   DETAILS SECTION - PROGRESSIVE DISCLOSURE
   ===================================================================== */

.tasknotes-plugin .details-container {
    transition: all 0.3s ease;
    transform-origin: top;
}

.tasknotes-plugin .detail-label {
    font-size: var(--font-ui-small);
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--size-4-1);
    margin-top: var(--size-4-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tasknotes-plugin .detail-label:first-child {
    margin-top: 0;
}

.tasknotes-plugin .title-input-detailed {
    width: 100%;
    padding: var(--size-4-2);
    font-size: var(--font-ui-medium);
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text-normal);
    transition: all 0.2s ease;
}

.tasknotes-plugin .title-input-detailed:focus,
.tasknotes-plugin .title-input-detailed:active,
.tasknotes-plugin .title-input-detailed:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: var(--interactive-accent);
    background: transparent;
}

.tasknotes-plugin .title-input-detailed::placeholder {
    color: var(--text-muted);
}

.tasknotes-plugin .details-input {
    width: 100%;
    min-height: 80px;
    padding: var(--size-4-2);
    font-size: var(--font-ui-medium);
    line-height: 1.5;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text-normal);
    resize: vertical;
    transition: all 0.2s ease;
}

.tasknotes-plugin .details-input:focus {
    outline: none;
    border-color: var(--interactive-accent);
    background: transparent;
}

.tasknotes-plugin .details-input::placeholder {
    color: var(--text-muted);
}


/* =====================================================================
   ADDITIONAL FIELDS - SETTINGS STYLE
   ===================================================================== */

.tasknotes-plugin .details-container .setting-item {
    border: none;
    padding: var(--size-4-2) 0;
}

.tasknotes-plugin .details-container .setting-item-name {
    font-size: var(--font-ui-small);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tasknotes-plugin .details-container .setting-item-control input {
    background: transparent;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: var(--size-4-1) var(--size-4-2);
    font-size: var(--font-ui-medium);
    transition: all 0.2s ease;
}

.tasknotes-plugin .details-container .setting-item-control input:focus {
    border-color: var(--interactive-accent);
    background: transparent;
    outline: none;
}

/* =====================================================================
   OPEN NOTE BUTTON (IN BUTTON BAR)
   ===================================================================== */

.tasknotes-plugin .open-note-button {
    padding: var(--size-4-2) var(--size-4-3);
    font-weight: 500;
    border: 1px solid var(--interactive-accent);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--interactive-accent);
    cursor: var(--cursor);
    transition: all 0.2s ease;
    min-width: 80px;
}

.tasknotes-plugin .open-note-button:hover {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border: 1px solid var(--interactive-accent);
}

.tasknotes-plugin .open-note-button:active {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border: 1px solid var(--interactive-accent);
}

.tasknotes-plugin .open-note-button:focus-visible {
	box-shadow: 0 0 0 3px var(--background-modifier-border-focus);
}

.tasknotes-plugin .archive-button:focus-visible {
	box-shadow: 0 0 0 3px var(--background-modifier-border-focus);
}

/* =====================================================================
   MODAL BUTTON CONTAINER - Native Obsidian style
   ===================================================================== */

/* Use native modal-button-container class */
.modal.mod-tasknotes .modal-button-container {
    display: flex;
    gap: var(--size-4-2);
}

/* Push Save/Cancel buttons to the right on desktop only */
body:not(.is-mobile) .modal.mod-tasknotes .modal-button-container .mod-cta {
    margin-left: auto;
}

/* =====================================================================
   MODAL EXPANSION ANIMATION
   ===================================================================== */

.tasknotes-plugin.minimalist-task-modal .modal-content {
    transition: all 0.3s ease;
}

.tasknotes-plugin.minimalist-task-modal.expanded .modal-content {
    min-height: 400px;
}

/* =====================================================================
   RESPONSIVE DESIGN
   ===================================================================== */

@media (max-width: 600px) {
    .tasknotes-plugin.minimalist-task-modal .modal-content {
        min-width: 90vw;
        max-width: 90vw;
    }

    .tasknotes-plugin .minimalist-modal-container {
        padding: var(--size-4-3);
    }

    .tasknotes-plugin .action-bar {
        flex-wrap: wrap;
        gap: var(--size-4-2);
    }

    .modal.mod-tasknotes .modal-button-container {
        flex-direction: column;
    }

    .modal.mod-tasknotes .modal-button-container button {
        width: 100%;
    }

    /* Reset margin for small screens on desktop too */
    .modal.mod-tasknotes .modal-button-container .mod-cta {
        margin-left: 0;
    }
}

/* =====================================================================
   SPLIT LAYOUT - BASE STYLES (mobile/narrow screens)
   On narrow screens, content flows vertically with details below title
   ===================================================================== */

/* Split content wrapper - use flex column for ordering on narrow screens */
.tasknotes-plugin.minimalist-task-modal .modal-split-content {
    display: flex;
    flex-direction: column;
}

/* Left column: contains title, action bar, and form fields */
.tasknotes-plugin.minimalist-task-modal .modal-split-left {
    display: contents;
}

/* Title input container - first item */
.tasknotes-plugin.minimalist-task-modal .modal-split-left .title-input-container,
.tasknotes-plugin.minimalist-task-modal .modal-split-left .nl-markdown-editor {
    order: 1;
}

/* Action bar - second item */
.tasknotes-plugin.minimalist-task-modal .modal-split-left .action-bar {
    order: 2;
}

/* Right column: contains details editor - appears after action bar on narrow screens */
.tasknotes-plugin.minimalist-task-modal .modal-split-right {
    order: 3;
}

/* Details container (form fields) - after the details editor on narrow screens */
.tasknotes-plugin.minimalist-task-modal .modal-split-left .details-container {
    order: 4;
}

/* Additional sections (completions calendar, metadata) - last */
.tasknotes-plugin.minimalist-task-modal .modal-split-left .completions-calendar-container,
.tasknotes-plugin.minimalist-task-modal .modal-split-left .metadata-container {
    order: 5;
}

/* Hide empty right column indicator on narrow screens */
.tasknotes-plugin.minimalist-task-modal .modal-split-right:empty {
    display: none;
}

/* =====================================================================
   SPLIT LAYOUT - WIDE SCREENS (900px+)
   Details field appears on the right when modal is expanded
   Only applies when split-layout-enabled class is present (controlled by setting)
   ===================================================================== */

@media (min-width: 900px) {
    /* Widen modal for split layout when expanded */
    /* Target both .modal (modalEl) and .modal-content for max compatibility */
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal,
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded.modal {
        width: 850px;
        max-width: 90vw;
    }

    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-content {
        min-width: 100%;
        max-width: 100%;
        padding: 0;
    }

    /* Main container - no padding on right for edge-to-edge details */
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .minimalist-modal-container {
        display: flex;
        flex-direction: column;
        padding-right: 0;
    }

    /* Split content wrapper - holds left and right columns side by side */
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-content {
        display: flex;
        flex-direction: row;
        flex: 1;
        min-height: 0;
        gap: 0;
    }

    /* Left column - reset display:contents and use flex column */
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left {
        flex: 0 0 380px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        padding-right: var(--size-4-4);
        overflow-y: auto;
        max-height: 70vh;
    }

    /* Reset ordering for split layout - elements flow naturally in their DOM order */
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .title-input-container,
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .nl-markdown-editor,
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .action-bar,
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .details-container,
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .completions-calendar-container,
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left .metadata-container,
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right {
        order: unset;
    }

    /* Right column - details editor takes full height, edge to edge */
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        border-left: 1px solid var(--background-modifier-border);
        margin: calc(-1 * var(--size-4-4)) 0;
        margin-right: calc(-1 * var(--size-4-4));
        border-radius: 0;
        max-height: 70vh;
        overflow: hidden;
    }

    /* Hide empty right column on wide screens too */
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right:empty {
        display: none;
    }

    /* When right column is empty, left column takes full width */
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right:empty ~ .modal-split-left,
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-content:has(.modal-split-right:empty) .modal-split-left {
        flex: 1;
        padding-right: 0;
    }

    /* Details label in right column */
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right .detail-label {
        margin: 0;
        padding: var(--size-4-3) var(--size-4-4);
        border-bottom: 1px solid var(--background-modifier-border);
    }

    /* Make details editor fill the right column completely */
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right .details-markdown-editor {
        flex: 1;
        min-height: 0;
        max-height: none;
        display: flex;
        flex-direction: column;
        border: none;
        border-radius: 0;
        margin: 0;
        overflow: hidden;
    }

    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right .details-markdown-editor .cm-editor {
        flex: 1;
        max-height: none;
        border-radius: 0;
        min-height: 0;
    }

    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right .details-markdown-editor .cm-scroller {
        max-height: none;
        overflow-y: auto;
    }

    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-right .details-markdown-editor .task-details-editor {
        max-height: none;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    /* Button container needs proper positioning */
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-button-container {
        padding-right: var(--size-4-4);
    }
}

/* =====================================================================
   SPLIT LAYOUT - EXTRA WIDE SCREENS (1200px+)
   Modal expands to 1100px on larger screens
   ===================================================================== */

@media (min-width: 1200px) {
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal,
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded.modal {
        width: 1100px;
    }

    /* Left column gets more space on wider screens */
    .tasknotes-plugin.minimalist-task-modal.split-layout-enabled.expanded .modal-split-left {
        flex: 0 0 480px;
    }
}

/* =====================================================================
   ACCESSIBILITY ENHANCEMENTS
   ===================================================================== */

.tasknotes-plugin .action-icon:focus-visible {
	outline: none;
	box-shadow: 0 0 0 1px var(--interactive-accent);
	transition: box-shadow 0.15s ease;
}

.tasknotes-plugin .details-input:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 1px;
}

/* =====================================================================
   METADATA SECTION - FOR EDIT MODAL
   ===================================================================== */

.tasknotes-plugin .metadata-container {
    margin-top: var(--size-4-3);
    padding-top: var(--size-4-3);
    border-top: 0.5px solid var(--background-modifier-border);
}

.tasknotes-plugin .metadata-content {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-1);
}

.tasknotes-plugin .metadata-item {
    display: flex;
    align-items: center;
    font-size: var(--font-ui-small);
}

.tasknotes-plugin .metadata-key {
    color: var(--text-muted);
    font-weight: 500;
    min-width: 80px;
}

.tasknotes-plugin .metadata-value {
    color: var(--text-normal);
    font-family: var(--font-monospace);
}

/* =====================================================================
   AUTOCOMPLETE STYLING
   ===================================================================== */

.tasknotes-plugin .autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-top: none;
    border-radius: 0 0 var(--radius-s) var(--radius-s);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.tasknotes-plugin .autocomplete-suggestion {
    padding: 8px 12px;
    cursor: var(--cursor);
    border-bottom: 1px solid var(--background-modifier-border-hover);
    font-size: var(--font-ui-small);
    color: var(--text-normal);
    transition: background-color 0.1s ease;
}

.tasknotes-plugin .autocomplete-suggestion:hover {
    background: var(--background-modifier-hover);
}

.tasknotes-plugin .autocomplete-suggestion:last-child {
    border-bottom: none;
}

/* =====================================================================
   NLP INPUT STYLING UPDATES
   ===================================================================== */

.tasknotes-plugin .nl-input {
    width: 100%;
    padding: var(--size-4-3) var(--size-4-2);
    font-weight: 400;
    line-height: 1.5;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text-normal);
    resize: vertical;
    min-height: 80px;
    transition: all 0.2s ease;
}

.tasknotes-plugin .nl-input:focus {
    outline: none;
    border-color: var(--interactive-accent);
    background: transparent;
    box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
}

.tasknotes-plugin .nl-input::placeholder {
    color: var(--text-muted);
    font-style: italic;
}

/* =====================================================================
   COMPLETIONS CALENDAR SECTION
   ===================================================================== */

.tasknotes-plugin .completions-calendar-container {
    margin-top: var(--size-4-3);
    padding-top: var(--size-4-3);
    border-top: 0.5px solid var(--background-modifier-border);
}

.tasknotes-plugin .completions-calendar-content {
    max-width: 200px;
    margin: 0 auto;
}

/* =====================================================================
   RECURRING CALENDAR COMPONENT - BEM & MINIMALIST
   ===================================================================== */

.tasknotes-plugin .metadata-item--calendar {
    flex-direction: column;
    align-items: flex-start;
}

.tasknotes-plugin .recurring-calendar {
    margin-top: var(--size-4-1);
    font-size: var(--font-ui-small);
    width: 100%;
    max-width: 200px;
}

.tasknotes-plugin .recurring-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--size-4-1);
}

.tasknotes-plugin .recurring-calendar__nav {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: var(--cursor);
    font-size: 14px;
    padding: 2px 4px;
    transition: color 0.1s ease;
}

.tasknotes-plugin .recurring-calendar__nav:hover {
    color: var(--text-normal);
}

.tasknotes-plugin .recurring-calendar__month {
    font-size: var(--font-ui-small);
    color: var(--text-normal);
    font-weight: 500;
}

.tasknotes-plugin .recurring-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.tasknotes-plugin .recurring-calendar__day {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-faint);
    border-radius: 2px;
}

.tasknotes-plugin .recurring-calendar__day--faded {
    color: var(--text-faint);
    opacity: 0.4;
}

.tasknotes-plugin .recurring-calendar__day--clickable {
    cursor: var(--cursor);
    transition: all 0.1s ease;
}

.tasknotes-plugin .recurring-calendar__day--clickable:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.tasknotes-plugin .recurring-calendar__day--recurring {
    color: var(--text-normal);
    border: 1px solid var(--text-muted);
}

.tasknotes-plugin .recurring-calendar__day--recurring:hover {
    border-color: var(--interactive-accent);
    color: var(--interactive-accent);
    background: var(--background-modifier-hover);
}

.tasknotes-plugin .recurring-calendar__day--completed {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border: 1px solid var(--interactive-accent);
}

.tasknotes-plugin .recurring-calendar__day--completed:hover {
    background: var(--interactive-accent-hover);
}

.tasknotes-plugin .recurring-calendar__day--skipped {
    background: rgba(128, 128, 128, 0.3);
    color: var(--text-muted);
    border: 1px solid var(--text-faint);
    text-decoration: line-through;
}

.tasknotes-plugin .recurring-calendar__day--skipped:hover {
    background: rgba(128, 128, 128, 0.4);
    border-color: var(--text-muted);
}

.tasknotes-plugin .nl-preview-container {
    margin-top: var(--size-4-2);
    padding: var(--size-4-2);
    background: var(--background-primary-alt);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    display: none;
}

.tasknotes-plugin .nl-preview-item {
    display: flex;
    align-items: center;
	word-break: break-all;
    margin-bottom: var(--size-4-1);
    font-size: var(--font-ui-small);
}

.tasknotes-plugin .nl-preview-item:last-child {
    margin-bottom: 0;
}

.tasknotes-plugin .nl-preview-label {
    min-width: 80px;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: var(--size-4-2);
}

.tasknotes-plugin .nl-preview-value {
    color: var(--text-normal);
    flex: 1;
}

/* =====================================================================
   DARK MODE ADJUSTMENTS
   ===================================================================== */

.theme-dark .tasknotes-plugin .action-icon.has-value::after {
    border-color: var(--background-primary-alt);
}

.theme-dark .tasknotes-plugin .autocomplete-suggestions {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

/* NLP Auto-suggestion specific styles */
.tasknotes-plugin .nlp-suggest-icon {
    display: inline-block;
    font-weight: 600;
    color: var(--interactive-accent);
    margin-right: var(--size-2-2);
    min-width: 14px;
}

.tasknotes-plugin .nlp-suggest-text {
    color: var(--text-normal);
}

/* NLP Project Suggestion Styles - Rich Metadata Display (Textarea-based suggester in TaskCreationModal) */
.tasknotes-plugin .nlp-suggest-project__filename {
    font-weight: var(--font-weight-medium);
    color: var(--text-normal);
    font-size: var(--font-ui-small);
    margin-bottom: 2px;
}

.tasknotes-plugin .nlp-suggest-project__meta {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.4;
}

.tasknotes-plugin .nlp-suggest-project__meta-label {
    color: var(--text-muted);
    font-weight: 500;
    margin-right: 4px;
}

.tasknotes-plugin .nlp-suggest-project__meta-value {
    color: var(--text-normal);
}

/* CodeMirror Project Suggestion Styles - Rich Metadata Display */
.tasknotes-plugin .cm-tooltip-autocomplete .cm-project-suggestion {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--size-4-1) 0;
}

.tasknotes-plugin .cm-tooltip-autocomplete .cm-project-suggestion__name {
    font-weight: var(--font-weight-medium);
    color: var(--text-normal);
    font-size: var(--font-ui-small);
}

.tasknotes-plugin .cm-tooltip-autocomplete .cm-project-suggestion__meta {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    line-height: 1.4;
}

.tasknotes-plugin .cm-tooltip-autocomplete .cm-project-suggestion__meta-label {
    color: var(--text-muted);
    font-weight: 500;
    margin-right: 4px;
}

.tasknotes-plugin .cm-tooltip-autocomplete .cm-project-suggestion__meta-value {
    color: var(--text-normal);
}

/* =====================================================================
   PROJECT SELECTION UI
   ===================================================================== */

.tasknotes-plugin .task-projects-list {
    margin-top: var(--size-4-2);
    border: none;
    border-radius: var(--radius-s);
    max-height: 150px;
    overflow-y: auto;
}

.tasknotes-plugin .task-projects-empty {
    padding: var(--size-4-3);
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    border: none;
    font-size: var(--font-ui-small);
}

.tasknotes-plugin .task-project-item {
    display: flex;
    align-items: center;
    padding: var(--size-4-2);
    border: none;
    gap: var(--size-4-2);
    border-radius: var(--radius-s);
    transition: background-color 0.2s ease;
}

.tasknotes-plugin .task-project-item:hover {
    background-color: var(--background-modifier-hover);
}

.tasknotes-plugin .task-project-info {
    flex: 1;
    min-width: 0;
}

.tasknotes-plugin .task-project-name {
    display: block;
    font-weight: var(--font-weight-medium);
    color: var(--text-normal);
    font-size: var(--font-ui-small);
}

.tasknotes-plugin .task-project-item--unresolved {
    border: 1px solid var(--color-orange);
    background: color-mix(in srgb, var(--color-orange) 12%, var(--background-secondary));
}

.tasknotes-plugin .task-project-item--unresolved .task-project-name {
    color: var(--color-orange);
}

/* Make clickable project names in edit modal look and behave like links */
.tasknotes-plugin .clickable-project .internal-link {
    color: var(--link-color);
    text-decoration: none;
    cursor: var(--cursor);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-ui-small);
    border-radius: var(--radius-xs);
    padding: 1px 2px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.tasknotes-plugin .clickable-project .internal-link:hover {
    background-color: var(--background-modifier-hover);
    color: var(--link-color-hover);
    text-decoration: underline;
}

/* Remove the default + prefix for clickable projects since they're now clearly links */
.tasknotes-plugin .clickable-project .internal-link::before {
    content: '+';
    color: var(--text-muted);
    margin-right: 2px;
}

/* Style dependency items the same way when rendered as internal links */
.tasknotes-plugin .clickable-dependency .task-dependency-link {
    color: var(--link-color);
    text-decoration: none;
    cursor: var(--cursor);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-ui-small);
    border-radius: var(--radius-xs);
    padding: 1px 2px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.tasknotes-plugin .clickable-dependency .task-dependency-link:hover {
    background-color: var(--background-modifier-hover);
    color: var(--link-color-hover);
    text-decoration: underline;
}

.tasknotes-plugin .task-project-path {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Use consistent button system for project remove button */
.tasknotes-plugin .task-project-remove {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-muted);
    font-size: 16px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.tasknotes-plugin .task-project-remove:hover {
    background: var(--tn-color-error);
    color: var(--tn-bg-primary);
    border: none;
    box-shadow: none;
}

/* =====================================================================
   PROJECT SELECT MODAL
   ===================================================================== */

/* Use consistent button system for project suggestions */
.tasknotes-plugin .project-suggestion {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: var(--size-4-2);
    border-radius: var(--radius-s);
}

.tasknotes-plugin .project-suggestion:hover {
    background: var(--tn-interactive-hover);
    border: none;
    box-shadow: none;
}

.tasknotes-plugin .project-name {
    font-weight: var(--font-weight-medium);
    color: var(--text-normal);
}

.tasknotes-plugin .project-path {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    margin-top: 2px;
}


/* ===== REMINDER-MODAL.CSS ===== */
/* =====================================================================
   REMINDER MODAL - Consistent with Task Modal Styling
   ===================================================================== */

.tasknotes-plugin .tasknotes-reminder-modal {
    max-width: 600px;
    min-width: 480px;
    min-height: 400px;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-l);
}

/* =====================================================================
   HEADER SECTION
   ===================================================================== */

.tasknotes-plugin .reminder-modal__header {
    padding: var(--size-4-4) var(--size-4-4) var(--size-4-3);
    border-bottom: 1px solid var(--background-modifier-border);
}

.tasknotes-plugin .reminder-modal__header h2 {
    margin: 0 0 var(--size-4-1) 0;
    font-size: var(--font-ui-large);
    font-weight: 600;
    color: var(--text-normal);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tasknotes-plugin .reminder-modal__task-title {
    font-size: var(--font-ui-medium);
    font-weight: 500;
    color: var(--interactive-accent);
    display: block;
    margin-bottom: var(--size-4-1);
}

.tasknotes-plugin .reminder-modal__task-dates {
    font-size: var(--font-ui-small);
    color: var(--text-muted);
    font-style: italic;
}

/* =====================================================================
   CONTENT AREA
   ===================================================================== */

.tasknotes-plugin .reminder-modal__content {
    flex: 1;
    padding: var(--size-4-4);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--size-4-3);
}

/* Section Styling - Match Task Modal Details */
.tasknotes-plugin .reminder-modal__section {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-2);
}

.tasknotes-plugin .reminder-modal__section-header {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
}

.tasknotes-plugin .reminder-modal__section-header h3 {
    margin: 0;
    font-size: var(--font-ui-small);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tasknotes-plugin .reminder-modal__reminder-count {
    font-size: var(--font-ui-small);
    color: var(--text-muted);
    font-weight: 400;
}

/* Empty State - Match Task Modal Secondary Background */
.tasknotes-plugin .reminder-modal__empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--size-4-3);
    text-align: center;
    background: var(--background-secondary);
    border-radius: var(--radius-s);
    border: 1px dashed var(--background-modifier-border);
}

.tasknotes-plugin .reminder-modal__empty-icon {
    width: 24px;
    height: 24px;
    color: var(--text-faint);
    margin-bottom: var(--size-4-2);
}

.tasknotes-plugin .reminder-modal__empty-text {
    font-size: var(--font-ui-small);
    color: var(--text-muted);
    font-weight: 500;
}

/* =====================================================================
   REMINDER CARDS - Match Task Modal Item Styling
   ===================================================================== */

.tasknotes-plugin .reminder-modal__reminder-list {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-2);
}

.tasknotes-plugin .reminder-modal__reminder-card {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
    padding: var(--size-4-2);
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    transition: all 0.2s ease;
}

.tasknotes-plugin .reminder-modal__reminder-card:hover {
    border-color: var(--interactive-accent);
    background: var(--background-primary);
}

.tasknotes-plugin .reminder-modal__reminder-icon {
    width: 16px;
    height: 16px;
    color: var(--interactive-accent);
    flex-shrink: 0;
}

.tasknotes-plugin .reminder-modal__reminder-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--size-4-1);
}

.tasknotes-plugin .reminder-modal__reminder-primary {
    font-weight: 500;
    color: var(--text-normal);
    font-size: var(--font-ui-medium);
}

.tasknotes-plugin .reminder-modal__reminder-description {
    font-size: var(--font-ui-small);
    color: var(--interactive-accent);
    font-style: italic;
}

.tasknotes-plugin .reminder-modal__reminder-actions {
    display: flex;
    flex-shrink: 0;
}

.tasknotes-plugin .reminder-modal__action-btn {
    padding: var(--size-4-1);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-s);
}

.tasknotes-plugin .reminder-modal__action-btn:hover {
    color: var(--text-error);
    background: var(--background-modifier-hover);
}

/* =====================================================================
   QUICK ACTIONS - Icon-Based Controls Like Task Modal
   ===================================================================== */

.tasknotes-plugin .reminder-modal__quick-actions {
    padding: var(--size-4-2);
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    margin-bottom: var(--size-4-3);
}

.tasknotes-plugin .reminder-modal__quick-buttons {
    display: flex;
    gap: var(--size-4-1);
    justify-content: space-between;
}

.tasknotes-plugin .reminder-modal__quick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-4-1);
    padding: var(--size-4-1) var(--size-4-2);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--font-ui-small);
    color: var(--text-muted);
    flex: 1;
    min-width: 0;
    border-radius: var(--radius-s);
}

.tasknotes-plugin .reminder-modal__quick-btn:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
    transform: translateY(-1px);
}

.tasknotes-plugin .reminder-modal__quick-btn-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tasknotes-plugin .reminder-modal__quick-btn-label {
    font-weight: 500;
}

/* =====================================================================
   FORM STYLING - Match Task Modal Input Styles
   ===================================================================== */

.tasknotes-plugin .reminder-modal__form {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-2);
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: var(--size-4-3);
    margin-top: var(--size-4-2);
}

.tasknotes-plugin .reminder-modal__type-selector {
    display: flex;
    background: var(--background-primary);
    border-radius: var(--radius-s);
    padding: 2px;
    border: 1px solid var(--background-modifier-border);
}

.tasknotes-plugin .reminder-modal__type-tab {
    flex: 1;
    padding: var(--size-4-1) var(--size-4-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.2s ease;
    text-align: center;
    font-size: var(--font-ui-small);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tasknotes-plugin .reminder-modal__type-tab--active {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
}

.tasknotes-plugin .reminder-modal__type-tab:not(.reminder-modal__type-tab--active):hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.tasknotes-plugin .relative-fields,
.tasknotes-plugin .absolute-fields {
    padding: var(--size-4-2);
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    display: flex;
    flex-direction: column;
    gap: var(--size-4-2);
    margin-top: var(--size-4-2);
}

.tasknotes-plugin .absolute-fields {
    display: none;
}

/* Form controls - Match Task Modal Details Section */
.tasknotes-plugin .reminder-modal__form .setting-item {
    padding: var(--size-4-2) 0;
    border: none;
}

.tasknotes-plugin .reminder-modal__form .setting-item-name {
    font-size: var(--font-ui-small);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tasknotes-plugin .reminder-modal__form .setting-item-control input,
.tasknotes-plugin .reminder-modal__form .setting-item-control select {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: var(--size-4-1) var(--size-4-2);
    font-size: var(--font-ui-medium);
    transition: all 0.2s ease;
}

.tasknotes-plugin .reminder-modal__form .setting-item-control input:focus,
.tasknotes-plugin .reminder-modal__form .setting-item-control select:focus {
    border-color: var(--interactive-accent);
    background: var(--background-primary);
    outline: none;
}

.tasknotes-plugin .reminder-add-btn {
    align-self: flex-start;
    padding: var(--size-4-2) var(--size-4-3);
    background: var(--tn-interactive-accent, var(--interactive-accent));
    color: var(--text-on-accent);
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: var(--font-ui-medium);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-4-1);
    border-radius: var(--radius-s);
    min-width: 80px;
}

.tasknotes-plugin .reminder-add-btn:hover {
    background: var(--tn-interactive-accent-hover, var(--interactive-accent-hover));
    box-shadow: none;
}

.tasknotes-plugin .reminder-add-btn:disabled,
.tasknotes-plugin .reminder-add-btn--loading {
    opacity: 0.6;
    cursor: not-allowed;
}

.tasknotes-plugin .reminder-add-btn--loading .reminder-add-btn-icon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* =====================================================================
   ACTION BUTTONS - Match Task Modal Button Container
   ===================================================================== */

.tasknotes-plugin .reminder-modal__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--size-4-2);
    margin-top: var(--size-4-4);
    padding: var(--size-4-3) var(--size-4-4);
    border-top: 1px solid var(--background-modifier-border);
}

.tasknotes-plugin .reminder-modal__save-btn,
.tasknotes-plugin .reminder-modal__cancel-btn {
    padding: var(--size-4-2) var(--size-4-3);
    font-weight: 500;
    font-size: var(--font-ui-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-s);
    min-width: 80px;
}

.tasknotes-plugin .reminder-modal__save-btn {
    background: var(--tn-interactive-accent, var(--interactive-accent));
    color: var(--text-on-accent);
    box-shadow: none;
}

.tasknotes-plugin .reminder-modal__save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--background-modifier-border);
    color: var(--text-muted);
}

.tasknotes-plugin .reminder-modal__save-btn:not(:disabled):hover {
    background: var(--tn-interactive-accent-hover, var(--interactive-accent-hover));
    box-shadow: none;
}

.tasknotes-plugin .reminder-modal__cancel-btn {
    background: transparent;
    color: var(--text-muted);
    box-shadow: none;
}

.tasknotes-plugin .reminder-modal__cancel-btn:hover {
    background: var(--tn-interactive-hover, var(--background-modifier-hover));
    box-shadow: none;
}

/* =====================================================================
   RESPONSIVE DESIGN - Match Task Modal Breakpoints
   ===================================================================== */

@media (max-width: 600px) {
    .tasknotes-plugin .tasknotes-reminder-modal {
        min-width: 90vw;
        max-width: 90vw;
        min-height: 60vh;
        max-height: 90vh;
    }
    
    .tasknotes-plugin .reminder-modal__quick-buttons {
        flex-wrap: wrap;
        gap: var(--size-4-2);
    }
    
    .tasknotes-plugin .reminder-modal__actions {
        flex-direction: column;
        gap: var(--size-4-2);
    }
    
    .tasknotes-plugin .reminder-modal__save-btn,
    .tasknotes-plugin .reminder-modal__cancel-btn {
        width: 100%;
    }
    
    .tasknotes-plugin .reminder-modal__shortcuts {
        order: -1;
    }
}

/* =====================================================================
   DARK MODE ADJUSTMENTS - Match Task Modal
   ===================================================================== */

.theme-dark .tasknotes-plugin .tasknotes-reminder-modal {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* =====================================================================
   BACKWARD COMPATIBILITY
   ===================================================================== */
.reminder-section {
    margin-bottom: var(--size-4-6);
}

.reminder-section h3 {
    margin-bottom: var(--size-4-3);
    color: var(--text-normal);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.no-reminders {
    padding: var(--size-4-4);
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    background: var(--background-secondary);
    border-radius: var(--radius-m);
}

.reminder-list {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-2);
}

.reminder-item {
    display: flex;
    align-items: flex-start;
    gap: var(--size-4-3);
    padding: var(--size-4-3);
    background: var(--background-secondary);
    border-radius: var(--radius-m);
    border: 1px solid var(--border-color);
}

.reminder-item__content {
    flex: 1;
}

.reminder-item__timing {
    font-weight: var(--font-weight-semibold);
    color: var(--text-normal);
    margin-bottom: var(--size-4-1);
}

.reminder-item__description {
    font-size: var(--font-size-sm);
    color: var(--text-accent);
    margin-bottom: var(--size-4-1);
    font-style: italic;
}

.reminder-item__details {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.reminder-item__actions {
    display: flex;
    gap: var(--size-4-1);
}

.reminder-item__remove-btn {
    padding: var(--size-4-1);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: var(--radius-s);
    transition: all 0.2s ease;
}

.reminder-item__remove-btn:hover {
    background: var(--background-modifier-error);
    color: var(--text-error);
}

.reminder-form {
    padding: var(--size-4-4);
    background: var(--background-secondary);
    border-radius: var(--radius-m);
    border: 1px solid var(--border-color);
}

/* Modal button styling */
.modal-button-container {
    display: flex;
    justify-content: flex-end;
    gap: var(--size-4-2);
    margin-top: var(--size-4-6);
    padding-top: var(--size-4-4);
    border-top: 1px solid var(--border-color);
}

/* =====================================================================
   REMINDER DEFAULTS SECTION - Settings Tab Styling
   ===================================================================== */

.tasknotes-plugin .reminder-defaults-section {
    margin-bottom: var(--size-4-4);
    padding: var(--size-4-3);
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
}

.tasknotes-plugin .reminder-defaults-list {
    margin-bottom: var(--size-4-3);
}

/* Empty State */
.tasknotes-plugin .reminder-defaults-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--size-4-3);
    text-align: center;
    background: var(--background-primary);
    border-radius: var(--radius-s);
    border: 1px dashed var(--background-modifier-border);
}

.tasknotes-plugin .reminder-defaults-empty-icon {
    width: 24px;
    height: 24px;
    color: var(--text-faint);
    margin-bottom: var(--size-4-2);
}

.tasknotes-plugin .reminder-defaults-empty-text {
    font-size: var(--font-ui-small);
    color: var(--text-muted);
    font-weight: 500;
}

/* Reminder Items */
.tasknotes-plugin .reminder-defaults-items {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-2);
}

.tasknotes-plugin .reminder-defaults-card {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
    padding: var(--size-4-2);
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    transition: all 0.2s ease;
}

.tasknotes-plugin .reminder-defaults-card:hover {
    border-color: var(--interactive-accent);
    background: var(--background-secondary);
}

.tasknotes-plugin .reminder-defaults-icon {
    width: 16px;
    height: 16px;
    color: var(--interactive-accent);
    flex-shrink: 0;
}

.tasknotes-plugin .reminder-defaults-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--size-4-1);
}

.tasknotes-plugin .reminder-defaults-primary {
    font-weight: 500;
    color: var(--text-normal);
    font-size: var(--font-ui-medium);
}

.tasknotes-plugin .reminder-defaults-description {
    font-size: var(--font-ui-small);
    color: var(--interactive-accent);
    font-style: italic;
}

.tasknotes-plugin .reminder-defaults-actions {
    display: flex;
    flex-shrink: 0;
}

.tasknotes-plugin .reminder-defaults-remove-btn {
    padding: var(--size-4-1);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-s);
}

.tasknotes-plugin .reminder-defaults-remove-btn:hover {
    color: var(--text-error);
    background: var(--background-modifier-hover);
}

/* Form Styling */
.tasknotes-plugin .reminder-defaults-form {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-2);
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: var(--size-4-3);
    margin-top: var(--size-4-3);
}

.tasknotes-plugin .reminder-defaults-form-header {
    margin: 0 0 var(--size-4-2) 0;
    font-size: var(--font-ui-small);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Type Selector */
.tasknotes-plugin .reminder-defaults-type-selector {
    display: flex;
    background: var(--background-secondary);
    border-radius: var(--radius-s);
    padding: 2px;
    border: 1px solid var(--background-modifier-border);
    margin-bottom: var(--size-4-2);
}

.tasknotes-plugin .reminder-defaults-type-tab {
    flex: 1;
    padding: var(--size-4-1) var(--size-4-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.2s ease;
    text-align: center;
    font-size: var(--font-ui-small);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tasknotes-plugin .reminder-defaults-type-tab--active {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
}

.tasknotes-plugin .reminder-defaults-type-tab:not(.reminder-defaults-type-tab--active):hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

/* Form Fields */
.tasknotes-plugin .reminder-defaults-relative-fields,
.tasknotes-plugin .reminder-defaults-absolute-fields {
    padding: var(--size-4-2);
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    display: flex;
    flex-direction: column;
    gap: var(--size-4-2);
    margin-bottom: var(--size-4-2);
}

.tasknotes-plugin .reminder-defaults-absolute-fields {
    display: none;
}

/* Form controls - Match Task Modal Details Section */
.tasknotes-plugin .reminder-defaults-form .setting-item {
    padding: var(--size-4-2) 0;
    border: none;
}

.tasknotes-plugin .reminder-defaults-form .setting-item-name {
    font-size: var(--font-ui-small);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tasknotes-plugin .reminder-defaults-form .setting-item-control input,
.tasknotes-plugin .reminder-defaults-form .setting-item-control select {
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: var(--size-4-1) var(--size-4-2);
    font-size: var(--font-ui-medium);
    transition: all 0.2s ease;
}

.tasknotes-plugin .reminder-defaults-form .setting-item-control input:focus,
.tasknotes-plugin .reminder-defaults-form .setting-item-control select:focus {
    border-color: var(--interactive-accent);
    background: var(--background-secondary);
    outline: none;
}

/* Add Button */
.tasknotes-plugin .reminder-defaults-add-btn {
    align-self: flex-start;
    padding: var(--size-4-2) var(--size-4-3);
    background: var(--tn-interactive-accent, var(--interactive-accent));
    color: var(--text-on-accent);
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: var(--font-ui-medium);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-4-1);
    border-radius: var(--radius-s);
    min-width: 120px;
}

.tasknotes-plugin .reminder-defaults-add-btn:hover {
    background: var(--tn-interactive-accent-hover, var(--interactive-accent-hover));
    box-shadow: none;
}

.tasknotes-plugin .reminder-defaults-add-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.tasknotes-plugin .reminder-defaults-add-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.tasknotes-plugin .reminder-defaults-add-text {
    font-weight: 500;
}

/* ===== DATE-PICKER.CSS ===== */
/* =====================================================================
   DATE PICKER MODAL - Enhanced Input Styling
   ===================================================================== */

/* Date picker modal container */
.date-picker-modal {
    font-family: var(--font-interface);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    padding: var(--size-4-4);
    box-shadow: var(--shadow-l);
    z-index: 1000;
    min-width: 320px;
    max-width: 400px;
}

/* Modal header */
.date-picker-modal__header {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
    margin-bottom: var(--size-4-4);
    padding-bottom: var(--size-4-2);
    border-bottom: 1px solid var(--background-modifier-border);
}

.date-picker-modal__header-icon {
    color: var(--interactive-accent);
    display: flex;
    align-items: center;
}

.date-picker-modal__header-title {
    margin: 0;
    font-size: var(--font-ui-large);
    font-weight: 600;
    color: var(--text-normal);
}

/* Input sections */
.date-picker-modal__section {
    margin-bottom: var(--size-4-3);
}

.date-picker-modal__section--buttons {
    margin-bottom: var(--size-4-4);
}

.date-picker-modal__label {
    display: flex;
    align-items: center;
    gap: var(--size-4-1);
    margin-bottom: var(--size-4-2);
    font-size: var(--font-ui-small);
    font-weight: 500;
    color: var(--text-muted);
}

.date-picker-modal__label-icon {
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.date-picker-modal__input-container {
    position: relative;
}

.date-picker-modal__input {
    width: 100%;
    padding: var(--size-4-3) var(--size-4-2);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: var(--font-ui-medium);
    cursor: var(--cursor);
    color-scheme: dark light;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.date-picker-modal__input:focus {
    border-color: var(--interactive-accent);
    box-shadow: 0 0 0 2px rgba(var(--interactive-accent), 0.2);
}

.date-picker-modal__input:hover {
    border-color: var(--background-modifier-border-hover);
}

/* Button section */
.date-picker-modal__buttons {
    display: flex;
    gap: var(--size-4-2);
    justify-content: flex-end;
    padding-top: var(--size-4-3);
    border-top: 1px solid var(--background-modifier-border);
}

.date-picker-modal__button {
    padding: var(--size-4-2) var(--size-4-4);
    border-radius: var(--radius-s);
    cursor: var(--cursor);
    font-size: var(--font-ui-medium);
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
}

.date-picker-modal__button--primary {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
}

.date-picker-modal__button--primary:hover {
    background: var(--interactive-accent-hover);
    transform: translateY(-1px);
}

.date-picker-modal__button--secondary {
    background: var(--background-secondary);
    color: var(--text-normal);
    border: 1px solid var(--background-modifier-border);
}

.date-picker-modal__button--secondary:hover {
    background: var(--background-modifier-hover);
}

/* Enhanced date and time input styling */
.date-picker-modal input[type="date"],
.date-picker-modal input[type="time"] {
    /* Reset browser defaults */
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
    
    /* Make the entire input clickable */
    position: relative;
    overflow: hidden;
    
    /* Ensure consistent sizing */
    box-sizing: border-box;
    height: 44px;
    line-height: 1.4;
}

/* Date input specific styling */
.date-picker-modal input[type="date"] {
    /* Improve positioning consistency */
    position: relative;
    /* Ensure text is properly aligned */
    text-align: left;
    /* Add padding to make room for icon on the right */
    padding-right: 32px;
}

/* Webkit browsers (Chrome, Safari, Edge) */
.date-picker-modal input[type="date"]::-webkit-datetime-edit,
.date-picker-modal input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.date-picker-modal input[type="date"]::-webkit-datetime-edit-text,
.date-picker-modal input[type="date"]::-webkit-datetime-edit-month-field,
.date-picker-modal input[type="date"]::-webkit-datetime-edit-day-field,
.date-picker-modal input[type="date"]::-webkit-datetime-edit-year-field {
    /* Make the date text clickable */
    cursor: var(--cursor);
    color: var(--text-normal);
    font-size: var(--font-ui-medium);
    font-family: var(--font-interface);
}

.date-picker-modal input[type="date"]::-webkit-calendar-picker-indicator {
    /* Position the calendar icon on the right, consistently with time input */
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: var(--cursor);
    opacity: 0.7;
    width: 16px;
    height: 16px;
    background: none;
    color: var(--text-muted);
    /* Ensure the icon is clickable */
    pointer-events: auto;
}

.date-picker-modal input[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
    color: var(--text-normal);
}

/* Time input specific styling - add consistent padding */
.date-picker-modal input[type="time"] {
    /* Add padding to make room for icon on the right */
    padding-right: 32px;
    text-align: left;
}

.date-picker-modal input[type="time"]::-webkit-datetime-edit,
.date-picker-modal input[type="time"]::-webkit-datetime-edit-fields-wrapper,
.date-picker-modal input[type="time"]::-webkit-datetime-edit-text,
.date-picker-modal input[type="time"]::-webkit-datetime-edit-hour-field,
.date-picker-modal input[type="time"]::-webkit-datetime-edit-minute-field,
.date-picker-modal input[type="time"]::-webkit-datetime-edit-ampm-field {
    /* Make the time text clickable */
    cursor: var(--cursor);
    color: var(--text-normal);
    font-size: var(--font-ui-medium);
    font-family: var(--font-interface);
}

.date-picker-modal input[type="time"]::-webkit-calendar-picker-indicator {
    /* Position the clock icon on the right, same as date input */
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: var(--cursor);
    opacity: 0.7;
    width: 16px;
    height: 16px;
    background: none;
    color: var(--text-muted);
    /* Ensure the icon is clickable */
    pointer-events: auto;
}

.date-picker-modal input[type="time"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
    color: var(--text-normal);
}

/* Firefox specific styling */
@-moz-document url-prefix() {
    .date-picker-modal input[type="date"],
    .date-picker-modal input[type="time"] {
        /* Firefox doesn't have the same issue but ensure consistency */
        cursor: var(--cursor);
    }
}

/* Focus states */
.date-picker-modal input[type="date"]:focus,
.date-picker-modal input[type="time"]:focus {
    outline: none;
    border-color: var(--interactive-accent);
    box-shadow: 0 0 0 2px rgba(var(--interactive-accent), 0.2);
}

/* Hover states */
.date-picker-modal input[type="date"]:hover,
.date-picker-modal input[type="time"]:hover {
    border-color: var(--background-modifier-border-hover);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .date-picker-modal input[type="date"],
    .date-picker-modal input[type="time"] {
        color-scheme: dark;
    }
}

/* Light mode support */
@media (prefers-color-scheme: light) {
    .date-picker-modal input[type="date"],
    .date-picker-modal input[type="time"] {
        color-scheme: light;
    }
}

/* Accessibility improvements */
.date-picker-modal input[type="date"]:focus-visible,
.date-picker-modal input[type="time"]:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
}

/* Ensure consistent appearance across browsers */
.date-picker-modal input[type="date"]::-ms-clear,
.date-picker-modal input[type="time"]::-ms-clear {
    display: none;
}

.date-picker-modal input[type="date"]::-ms-reveal,
.date-picker-modal input[type="time"]::-ms-reveal {
    display: none;
}

/* ===== TASK-SELECTOR-WITH-CREATE-MODAL.CSS ===== */
/* ================================================
   TASK SELECTOR WITH CREATE MODAL
   ================================================ */

/* Modal container adjustments */
.task-selector-with-create-modal .prompt {
    display: flex;
    flex-direction: column;
}

/* ================================================
   TASK CARD STYLING WITHIN MODAL
   ================================================ */

/* Remove task card hover/background styling - let suggestion item handle it */
.task-selector-with-create-modal .task-card {
    background: transparent !important;
    box-shadow: none !important;
    padding: var(--tn-spacing-sm) 0;
    margin: 0;
}

.task-selector-with-create-modal .task-card:hover {
    background: transparent !important;
}

/* Hide context menu icon in modal suggestions */
.task-selector-with-create-modal .task-card__context-menu {
    display: none;
}

/* Hide badges container in modal for cleaner look */
.task-selector-with-create-modal .task-card__badges {
    display: none;
}

/* ================================================
   CREATE FOOTER - Fixed at bottom of modal
   ================================================ */

.task-selector-create-footer {
    display: flex;
    align-items: flex-start;
    gap: var(--tn-spacing-md);
    padding: var(--tn-spacing-md) var(--tn-spacing-lg);
    background: var(--background-secondary);
    border-top: 1px solid var(--background-modifier-border);
    margin-top: auto;
    min-height: 60px;
}

.task-selector-create-footer__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-accent);
    flex-shrink: 0;
    opacity: 0.8;
    margin-top: 2px;
}

.task-selector-create-footer__icon svg {
    width: 20px;
    height: 20px;
}

.task-selector-create-footer__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-sm);
}

/* ================================================
   TITLE LINE
   ================================================ */

.task-selector-create-footer__title-line {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
}

.task-selector-create-footer__title {
    font-weight: 600;
    font-size: var(--tn-font-size-md);
    color: var(--text-normal);
    line-height: 1.3;
    /* Allow wrapping for long titles */
    word-break: break-word;
}

/* ================================================
   METADATA CHIPS
   ================================================ */

.task-selector-create-footer__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: var(--tn-spacing-xs);
}

.task-selector-create-footer__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: var(--tn-font-size-xs);
    font-weight: 500;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
}

.task-selector-create-footer__chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.task-selector-create-footer__chip-icon svg {
    width: 12px;
    height: 12px;
}

.task-selector-create-footer__chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chip type variants */
.task-selector-create-footer__chip--due {
    background-color: hsla(0, 70%, 50%, 0.15);
    color: hsl(0, 70%, 45%);
}

.task-selector-create-footer__chip--scheduled {
    background-color: hsla(200, 70%, 50%, 0.15);
    color: hsl(200, 70%, 40%);
}

.task-selector-create-footer__chip--priority {
    background-color: hsla(35, 90%, 50%, 0.15);
    color: hsl(35, 90%, 40%);
}

.task-selector-create-footer__chip--status {
    background-color: hsla(270, 50%, 50%, 0.15);
    color: hsl(270, 50%, 45%);
}

.task-selector-create-footer__chip--context {
    background-color: hsla(160, 60%, 45%, 0.15);
    color: hsl(160, 60%, 35%);
}

.task-selector-create-footer__chip--project {
    background-color: hsla(220, 70%, 50%, 0.15);
    color: hsl(220, 70%, 45%);
}

.task-selector-create-footer__chip--tag {
    background-color: hsla(280, 60%, 50%, 0.15);
    color: hsl(280, 60%, 45%);
}

.task-selector-create-footer__chip--recurrence {
    background-color: hsla(180, 60%, 45%, 0.15);
    color: hsl(180, 60%, 35%);
}

.task-selector-create-footer__chip--estimate {
    background-color: hsla(45, 80%, 50%, 0.15);
    color: hsl(45, 80%, 35%);
}

.task-selector-create-footer__chip--details {
    background-color: hsla(0, 0%, 50%, 0.15);
    color: var(--text-muted);
}

.task-selector-create-footer__chip--userfield {
    background-color: hsla(300, 40%, 50%, 0.15);
    color: hsl(300, 40%, 40%);
}

/* ================================================
   HINT LINE
   ================================================ */

.task-selector-create-footer__hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.task-selector-create-footer__shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 5px;
    border-radius: 3px;
    background-color: var(--background-modifier-border);
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 500;
    font-family: var(--font-monospace);
}

.task-selector-create-footer__hint-text {
    font-size: var(--tn-font-size-xs);
    color: var(--text-faint);
}

/* ================================================
   DARK THEME ADJUSTMENTS
   ================================================ */

.theme-dark .task-selector-create-footer {
    background: var(--background-secondary-alt);
}

.theme-dark .task-selector-create-footer__shortcut {
    background-color: var(--background-modifier-form-field);
}

/* Dark theme chip adjustments for better visibility */
.theme-dark .task-selector-create-footer__chip--due {
    background-color: hsla(0, 70%, 60%, 0.2);
    color: hsl(0, 70%, 65%);
}

.theme-dark .task-selector-create-footer__chip--scheduled {
    background-color: hsla(200, 70%, 60%, 0.2);
    color: hsl(200, 70%, 65%);
}

.theme-dark .task-selector-create-footer__chip--priority {
    background-color: hsla(35, 90%, 60%, 0.2);
    color: hsl(35, 90%, 65%);
}

.theme-dark .task-selector-create-footer__chip--status {
    background-color: hsla(270, 50%, 60%, 0.2);
    color: hsl(270, 50%, 70%);
}

.theme-dark .task-selector-create-footer__chip--context {
    background-color: hsla(160, 60%, 55%, 0.2);
    color: hsl(160, 60%, 60%);
}

.theme-dark .task-selector-create-footer__chip--project {
    background-color: hsla(220, 70%, 60%, 0.2);
    color: hsl(220, 70%, 70%);
}

.theme-dark .task-selector-create-footer__chip--tag {
    background-color: hsla(280, 60%, 60%, 0.2);
    color: hsl(280, 60%, 70%);
}

.theme-dark .task-selector-create-footer__chip--recurrence {
    background-color: hsla(180, 60%, 55%, 0.2);
    color: hsl(180, 60%, 60%);
}

.theme-dark .task-selector-create-footer__chip--estimate {
    background-color: hsla(45, 80%, 60%, 0.2);
    color: hsl(45, 80%, 65%);
}

.theme-dark .task-selector-create-footer__chip--details {
    background-color: hsla(0, 0%, 60%, 0.2);
    color: var(--text-muted);
}

.theme-dark .task-selector-create-footer__chip--userfield {
    background-color: hsla(300, 40%, 60%, 0.2);
    color: hsl(300, 40%, 70%);
}

/* ================================================
   RESPONSIVE ADJUSTMENTS
   ================================================ */

@media (max-width: 480px) {
    .task-selector-create-footer {
        padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    }

    .task-selector-create-footer__icon {
        width: 28px;
        height: 28px;
    }

    .task-selector-create-footer__icon svg {
        width: 16px;
        height: 16px;
    }

    .task-selector-create-footer__title {
        font-size: var(--tn-font-size-sm);
    }

    .task-selector-create-footer__chip {
        max-width: 120px;
        padding: 2px 6px;
    }

    .task-selector-create-footer__meta {
        gap: 4px;
    }
}


/* ===== FILE-SELECTOR-MODAL.CSS ===== */
/* ================================================
   FILE SELECTOR MODAL
   ================================================ */

/* ================================================
   SUGGESTION STYLING
   ================================================ */

.file-selector-suggestion {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--tn-spacing-xs) 0;
}

.file-selector-suggestion__name {
    font-weight: 500;
    font-size: var(--tn-font-size-md);
    color: var(--text-normal);
}

.file-selector-suggestion__title,
.file-selector-suggestion__aliases {
    font-size: var(--tn-font-size-sm);
    color: var(--text-muted);
}

.file-selector-suggestion__path {
    font-size: var(--tn-font-size-xs);
    color: var(--text-faint);
}

/* ================================================
   CREATE FOOTER
   ================================================ */

.file-selector-create-footer {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-md);
    padding: var(--tn-spacing-md) var(--tn-spacing-lg);
    background: var(--background-secondary);
    border-top: 1px solid var(--background-modifier-border);
    margin-top: auto;
}

.file-selector-create-footer__content {
    flex: 1;
    min-width: 0;
}

.file-selector-create-footer__title-line {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
}

.file-selector-create-footer__shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    border-radius: 3px;
    background-color: var(--background-modifier-border);
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 500;
    font-family: var(--font-monospace);
}

.file-selector-create-footer__hint-text {
    font-size: var(--tn-font-size-sm);
    color: var(--text-faint);
}

.file-selector-create-footer__filename {
    font-size: var(--tn-font-size-sm);
    color: var(--text-normal);
    font-weight: 500;
}

/* ================================================
   DARK THEME ADJUSTMENTS
   ================================================ */

.theme-dark .file-selector-create-footer {
    background: var(--background-secondary-alt);
}

.theme-dark .file-selector-create-footer__shortcut {
    background-color: var(--background-modifier-form-field);
}


/* ===== UNSCHEDULED-TASKS-SELECTOR-MODAL.CSS ===== */
/* Unscheduled Tasks Selector - Task Styling Only */
.unscheduled-tasks-selector__content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.unscheduled-tasks-selector__title {
    font-weight: 500;
    color: var(--text-normal);
    margin-bottom: 0.5rem;
    line-height: 1.3;
    flex: 1;
}

.unscheduled-tasks-selector__title mark {
    background: var(--text-selection);
    color: var(--text-normal);
    padding: 0.1em 0.2em;
    border-radius: 2px;
}

.unscheduled-tasks-selector__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.25rem;
}

.unscheduled-tasks-selector__priority {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.unscheduled-tasks-selector__priority.priority-high {
    background: var(--color-red);
    color: white;
}

.unscheduled-tasks-selector__priority.priority-normal {
    background: var(--color-yellow);
    color: var(--text-normal);
}

.unscheduled-tasks-selector__priority.priority-low {
    background: var(--color-green);
    color: white;
}

.unscheduled-tasks-selector__due {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.unscheduled-tasks-selector__due.overdue {
    color: var(--color-red);
    font-weight: 500;
}

.unscheduled-tasks-selector__due.due-today {
    color: var(--color-orange);
    font-weight: 500;
}

.unscheduled-tasks-selector__time-estimate {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--background-modifier-border);
    padding: 0.125rem 0.375rem;
    border-radius: 8px;
}

.unscheduled-tasks-selector__contexts {
    font-size: 0.75rem;
    color: var(--text-accent);
    background: var(--background-modifier-border);
    padding: 0.125rem 0.375rem;
    border-radius: 8px;
}

.unscheduled-tasks-selector__projects {
    font-size: 0.75rem;
    color: var(--text-accent);
    background: var(--background-modifier-border);
    padding: 0.125rem 0.375rem;
    border-radius: 8px;
}

/* Project Links - for [[Note Name]] format projects */
.unscheduled-tasks-selector__project-link {
    color: var(--link-color);
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 4px;
    padding: 1px 2px;
    margin: -1px -2px;
    cursor: var(--cursor);
}

.unscheduled-tasks-selector__project-link:hover {
    background: var(--background-modifier-hover);
    text-decoration: underline;
    color: var(--link-color-hover);
}

.unscheduled-tasks-selector__schedule-icon {
    color: var(--text-muted);
    opacity: 0.7;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

/* ===== TASK-ACTION-PALETTE-MODAL.CSS ===== */
/* Task Action Palette Modal */

.task-action-palette-modal {
    --palette-item-height: 60px;
    --palette-icon-size: 18px;
    --palette-gap: 12px;
    --palette-border-radius: 8px;
}

/* Override default modal width for the action palette */
.task-action-palette-modal .modal {
    width: min(600px, 90vw);
    max-height: 70vh;
}

/* Suggestion item styling */
.task-action-palette__suggestion {
    display: flex;
    align-items: center;
    gap: var(--palette-gap);
    padding: var(--palette-gap);
    border-radius: var(--palette-border-radius);
    min-height: var(--palette-item-height);
    cursor: var(--cursor);
    transition: background-color 0.15s ease;
}

.task-action-palette__suggestion:hover {
    background-color: var(--background-modifier-hover);
}

.suggestion-item.is-selected .task-action-palette__suggestion {
    background-color: var(--background-modifier-accent);
    color: var(--text-on-accent);
}

/* Icon styling */
.task-action-palette__icon {
    flex-shrink: 0;
    width: var(--palette-icon-size);
    height: var(--palette-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.suggestion-item.is-selected .task-action-palette__icon {
    color: var(--text-on-accent);
}

.task-action-palette__icon svg {
    width: var(--palette-icon-size);
    height: var(--palette-icon-size);
}

/* Content area */
.task-action-palette__content {
    flex: 1;
    min-width: 0; /* Allow text to truncate */
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Title styling */
.task-action-palette__title {
    font-weight: 500;
    font-size: var(--font-ui-medium);
    line-height: 1.3;
    color: var(--text-normal);
    margin: 0;
}

.suggestion-item.is-selected .task-action-palette__title {
    color: var(--text-on-accent);
}

/* Description styling */
.task-action-palette__description {
    font-size: var(--font-ui-small);
    line-height: 1.3;
    color: var(--text-muted);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggestion-item.is-selected .task-action-palette__description {
    color: var(--text-on-accent);
    opacity: 0.7;
}

/* Badge area */
.task-action-palette__badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Category badge styling */
.task-action-palette__category {
    font-size: var(--font-ui-smaller);
    padding: 3px 8px;
    border-radius: calc(var(--palette-border-radius) / 2);
    background-color: var(--background-modifier-border);
    color: var(--text-muted);
    text-transform: capitalize;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.suggestion-item.is-selected .task-action-palette__category {
    background-color: var(--text-on-accent);
    color: var(--text-accent);
    opacity: 0.9;
}

/* Category-specific colors - theme aware */
.task-action-palette__category--status {
    background-color: var(--color-blue);
    color: var(--text-on-accent);
}

.task-action-palette__category--priority {
    background-color: var(--color-orange);
    color: var(--text-on-accent);
}

.task-action-palette__category--dates {
    background-color: var(--color-green);
    color: var(--text-on-accent);
}

.task-action-palette__category--tracking {
    background-color: var(--color-purple);
    color: var(--text-on-accent);
}

.task-action-palette__category--organization {
    background-color: var(--color-yellow);
    color: var(--text-normal);
}

.task-action-palette__category--other {
    background-color: var(--background-modifier-border);
    color: var(--text-muted);
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .task-action-palette-modal .modal {
        width: 95vw;
        max-height: 80vh;
    }
    
    .task-action-palette__suggestion {
        padding: 8px;
        gap: 8px;
        min-height: 50px;
    }
    
    .task-action-palette__description {
        font-size: var(--font-ui-smaller);
    }
    
    .task-action-palette__category {
        font-size: 10px;
        padding: 2px 6px;
    }
}


/* Focus and accessibility */
.task-action-palette__suggestion:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
}

/* Animation for smooth appearance */
.task-action-palette-modal .suggestion-container {
    animation: fadeInUp 0.2s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== TIME-ENTRY-EDITOR-MODAL.CSS ===== */
/* =====================================================================
   TIME ENTRY EDITOR MODAL
   ===================================================================== */

.time-entry-editor-modal .modal {
    width: auto;
    max-width: 800px;
}

.time-entry-editor-modal .modal-content {
    width: 600px;
    max-width: 90vw;
}

.time-entry-editor-modal__entries {
    margin-bottom: var(--size-4-4);
    max-height: 60vh;
    overflow-y: auto;
}

.time-entry-editor-modal__empty {
    text-align: center;
    padding: var(--size-4-8);
    color: var(--text-muted);
    font-style: italic;
}

/* =====================================================================
   TIME ENTRY ITEM
   ===================================================================== */

.time-entry-editor-modal__entry {
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    padding: var(--size-4-3);
    margin-bottom: var(--size-4-3);
    background: var(--background-secondary);
    transition: all 0.2s ease;
}

.time-entry-editor-modal__entry:hover {
    border-color: var(--interactive-accent);
    background: var(--background-primary);
}

.time-entry-editor-modal__entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--size-4-2);
}

.time-entry-editor-modal__entry-date {
    font-weight: 600;
    color: var(--text-normal);
    font-size: var(--font-ui-medium);
}

.time-entry-editor-modal__delete-button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: var(--cursor);
    padding: var(--size-4-1);
    border-radius: var(--radius-s);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.time-entry-editor-modal__delete-button:hover {
    background: var(--background-modifier-error);
    color: var(--text-error);
}

.time-entry-editor-modal__delete-button svg {
    width: 16px;
    height: 16px;
}

/* =====================================================================
   TIME INPUT FIELDS
   ===================================================================== */

.time-entry-editor-modal__time-container {
    margin-top: var(--size-4-2);
}

.time-entry-editor-modal__time-container .setting-item {
    border: none;
    padding: var(--size-4-2) 0;
}

.time-entry-editor-modal__time-container .setting-item-name {
    font-size: var(--font-ui-small);
    font-weight: 600;
    color: var(--text-muted);
}

.time-entry-editor-modal__time-container .setting-item-control input,
.time-entry-editor-modal__time-container .setting-item-control textarea {
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: var(--size-4-1) var(--size-4-2);
    font-size: var(--font-ui-medium);
    transition: all 0.2s ease;
    width: 100%;
}

.time-entry-editor-modal__datetime-input {
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: var(--size-4-1) var(--size-4-2);
    font-size: var(--font-ui-medium);
    transition: all 0.2s ease;
    width: 100%;
    color: var(--text-normal);
    font-family: var(--font-interface);
}

.time-entry-editor-modal__datetime-input:focus {
    border-color: var(--interactive-accent);
    outline: none;
}

.time-entry-editor-modal__time-container .setting-item-control input:focus,
.time-entry-editor-modal__time-container .setting-item-control textarea:focus {
    border-color: var(--interactive-accent);
    outline: none;
}

.time-entry-editor-modal__time-container .setting-item-control textarea {
    resize: vertical;
    font-family: var(--font-text);
}

.time-entry-editor-modal__duration-info {
    margin-top: var(--size-4-1);
    padding: var(--size-4-1) var(--size-4-2);
    background: var(--background-primary-alt);
    border-radius: var(--radius-s);
    font-size: var(--font-ui-small);
    color: var(--text-muted);
}

/* =====================================================================
   FOOTER
   ===================================================================== */

.time-entry-editor-modal__add-button-container {
    margin-bottom: var(--size-4-4);
    padding-bottom: var(--size-4-3);
    border-bottom: 1px solid var(--background-modifier-border);
}

.time-entry-editor-modal__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--size-4-3);
    border-top: 1px solid var(--background-modifier-border);
}

.time-entry-editor-modal__total {
    font-weight: 600;
    font-size: var(--font-ui-large);
    color: var(--text-normal);
}

.time-entry-editor-modal__buttons {
    display: flex;
    gap: var(--size-4-2);
}

.time-entry-editor-modal__buttons button {
    min-width: 80px;
}

/* =====================================================================
   DARK MODE ADJUSTMENTS
   ===================================================================== */

.theme-dark .time-entry-editor-modal__entry {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.theme-dark .time-entry-editor-modal__entry:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* =====================================================================
   RESPONSIVE DESIGN
   ===================================================================== */

@media (max-width: 700px) {
    .time-entry-editor-modal .modal-content {
        width: 90vw;
    }

    .time-entry-editor-modal__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--size-4-3);
    }

    .time-entry-editor-modal__buttons {
        width: 100%;
        flex-direction: column;
    }

    .time-entry-editor-modal__buttons button {
        width: 100%;
    }
}


/* ===== RELATIONSHIPS.CSS ===== */
/*
 * Relationships Widget
 *
 * Styles for the unified relationships widget that displays subtasks, projects,
 * blocked-by, and blocking relationships in notes via DOM manipulation
 * in live preview mode. Uses BEM methodology.
 */

.tasknotes-relationships-widget {
    display: block !important;
    width: 100% !important;
    margin: 1.5em 0 2em 0;
    padding: 1em;
    border: 1px dashed var(--background-modifier-border-hover);
    border-radius: var(--radius-s);
    clear: both;
    z-index: 10; /* Higher z-index to allow dropdowns to appear above other content */

    /* Allow filter dropdowns to extend beyond widget boundaries */
    overflow: visible !important;
}

.tasknotes-plugin .relationships__bases-container {
    width: 100%;
    min-height: 50px;
}

.tasknotes-plugin .relationships__error {
    color: var(--text-error);
    padding: 1em;
    text-align: center;
    font-size: 0.9em;
}

/* Responsive design */
@media (max-width: 768px) {
    .tasknotes-plugin .tasknotes-relationships-widget {
        margin: 1em 0;
        padding: 0.8em;
    }
}

/* Dark mode adjustments */
.theme-dark .tasknotes-plugin .tasknotes-relationships-widget {
    background-color: var(--background-secondary);
    border-color: var(--background-modifier-border);
}


/* ===== TASK-CARD-NOTE-WIDGET.CSS ===== */
/* Task Card Note Widget - minimal widget for inline task cards in notes */

.task-card-note-widget {
    display: block;
    border-radius: var(--radius-s);
    border: 1px solid var(--background-modifier-border);
    margin: var(--cs-spacing-md) 0;
    padding: var(--cs-spacing-sm);
}

.task-card-note-widget__card {
    /* Reset margins for the inner task card */
    margin: 0 !important;
}

/* ===== TASK-LIST-VIEW.CSS ===== */
/* ================================================
   TASK LIST VIEW - BEM STRUCTURE
   ================================================ */

/* Task List View Container - Root Block */
.tasknotes-plugin .task-list-view {
    padding: var(--tn-spacing-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    gap: var(--tn-spacing-sm);
    max-width: 100%;
}

/* Task List View Header */
.tasknotes-plugin .task-list-view__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tn-spacing-sm) 0;
    border-bottom: 1px solid var(--tn-border-color);
    margin-bottom: var(--tn-spacing-sm);
}

.tasknotes-plugin .task-list-view__title {
    font-size: var(--tn-font-size-xl);
    font-weight: var(--tn-font-weight-semibold);
    color: var(--tn-text-normal);
    margin: 0;
}

.tasknotes-plugin .task-list-view__actions {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
}

/* Use consistent button system with primary accent background preserved */
.tasknotes-plugin .task-list-view__add-button {
    background: var(--tn-interactive-accent);
    color: var(--text-on-accent);
    border: none;
    box-shadow: none;
}

.tasknotes-plugin .task-list-view__add-button:hover {
    background: var(--tn-interactive-accent-hover);
    box-shadow: none;
}

/* Filter Bar Container */
.tasknotes-plugin .task-list-view__filter-container {
    margin-bottom: var(--tn-spacing-md);
}

/* Task List Container */
.tasknotes-plugin .task-list-view__tasks {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xs);
    flex: 1;
    min-height: 0;
}

.tasknotes-plugin .task-list {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xs);
    flex: 1;
    min-height: 0;
}


/* Loading Indicator */
.tasknotes-plugin .task-list-view__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tn-spacing-sm);
    padding: var(--tn-spacing-lg);
    color: var(--tn-text-muted);
    font-size: var(--tn-font-size-md);
    font-style: italic;
    font-weight: 400;
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-md);
    margin-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .task-list-view__loading.is-hidden {
    display: none;
}

.tasknotes-plugin .task-list-view__loading::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, var(--tn-text-muted) 0.3, transparent);
    border-top: 2px solid var(--tn-text-muted);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

/* Task Group Section */
.tasknotes-plugin .task-list-view__group {
    margin-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .task-list-view__group-header {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
    justify-content: flex-start;
    padding: var(--tn-spacing-md) 0 var(--tn-spacing-sm);
    margin-bottom: var(--tn-spacing-sm);
    border-bottom: 1px solid var(--tn-border-color);
    position: relative;
    font-size: var(--tn-font-size-lg);
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    letter-spacing: 0.01em;
    line-height: 1.4;
    cursor: var(--cursor);
}

/* Count element within task list group headers */
.tasknotes-plugin .task-list-view__group-header .agenda-view__item-count {
    margin-left: auto;
    margin-right: 0;
}


/* Right side of group header: count + subgroup actions */
.tasknotes-plugin .task-list-view__group-header { display:flex; align-items:center; }
.tasknotes-plugin .task-group-right { margin-left:auto; display:flex; align-items:center; gap: var(--tn-spacing-xs); }

/* Override count margin when inside right-side container */
.tasknotes-plugin .task-group-right .agenda-view__item-count { margin-left: 0; margin-right: 0; }

/* Chevron/toggle styles (match preview-all) */
.tasknotes-plugin .task-group-header { cursor: var(--cursor); }
.task-group-header { display: flex; align-items: center; justify-content: flex-start; gap: var(--tn-spacing-xs); }
.tasknotes-plugin .task-group-toggle svg,  .task-group-toggle .chevron, .task-group-toggle .chevron path { color: var(--tn-text-normal); }
.tasknotes-plugin .task-group-toggle svg,  .task-group-toggle .chevron path { stroke: currentColor; }
.tasknotes-plugin .task-group.is-collapsed .task-group-toggle svg,
.tasknotes-plugin .task-group.is-collapsed .task-group-toggle .chevron { transform: rotate(0deg); }
.tasknotes-plugin .task-group-toggle { display: contents; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: var(--tn-spacing-xs); border: none; background: transparent; color: var(--tn-text-normal); font-size: 14px; line-height: 1; }
.tasknotes-plugin .task-group-toggle .chevron { transition: transform var(--tn-transition-fast); }
.tasknotes-plugin .task-group .task-group-toggle .chevron,
.tasknotes-plugin .task-group .task-group-toggle svg { transform: rotate(90deg); }
.tasknotes-plugin .task-group.is-collapsed .task-cards { display: none; }

/* Subgroup styles and chevron behavior */
.tasknotes-plugin .task-subgroups-container { margin-left: var(--tn-spacing-lg); }
.tasknotes-plugin .task-subgroup-header { display:flex; align-items:center; gap: var(--tn-spacing-xs); cursor: pointer; padding: 2px 0; font-size: var(--tn-font-size-lg); font-weight: var(--tn-font-weight-medium); }
.tasknotes-plugin .task-subgroup-header .agenda-view__item-count { margin-left: auto; }
.tasknotes-plugin .task-subgroup-toggle { display: contents; align-items:center; justify-content:center; width:16px; height:16px; border:none; background:transparent; color: var(--tn-text-normal); font-size: 12px; line-height: 1; }
.tasknotes-plugin .task-subgroup-toggle .chevron { transition: transform var(--tn-transition-fast); }
.tasknotes-plugin .task-subgroup .task-subgroup-toggle .chevron,
.tasknotes-plugin .task-subgroup .task-subgroup-toggle svg { transform: rotate(90deg); }
.tasknotes-plugin .task-subgroup.is-collapsed .task-subgroup-toggle .chevron,
.tasknotes-plugin .task-subgroup.is-collapsed .task-subgroup-toggle svg { transform: rotate(0deg); }
.tasknotes-plugin .task-subgroup.is-collapsed .task-cards { display: none; }
.tasknotes-plugin .task-group.is-collapsed .task-subgroups-container { display: none; }

/* Per-group subgroup actions */
.tasknotes-plugin .task-subgroup-actions { display:flex; align-items:center; gap: 4px; margin-left: 0; }
.tasknotes-plugin .task-subgroup-action { border:none; background:transparent; color: var(--tn-text-muted); cursor: var(--cursor); padding: 0; }
.tasknotes-plugin .task-subgroup-action:hover { color: var(--tn-text-normal); }


.tasknotes-plugin .task-list-view__project-link {
    color: var(--tn-text-normal);
    text-decoration: none;
    cursor: var(--cursor);
    transition: color 0.2s ease;
}

.tasknotes-plugin .task-list-view__project-link:hover {
    color: var(--tn-interactive-accent);
    text-decoration: underline;
}

.tasknotes-plugin .task-list-view__group-content {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xs);
}

/* Empty State */
.tasknotes-plugin .task-list-view__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--tn-spacing-xl);
    text-align: center;
    color: var(--tn-text-muted);
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-md);
    margin: var(--tn-spacing-lg) 0;
}

.tasknotes-plugin .task-list-view__empty-title {
    font-size: var(--tn-font-size-lg);
    font-weight: var(--tn-font-weight-medium);
    margin-bottom: var(--tn-spacing-sm);
    color: var(--tn-text-normal);
}

.tasknotes-plugin .task-list-view__empty-description {
    font-size: var(--tn-font-size-lg);
    line-height: 1.6;
    max-width: 400px;
}

/* Task Item Container (wraps task cards) */
.tasknotes-plugin .task-list-view__task-item {
    position: relative;
    background: var(--tn-bg-primary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    transition: all var(--tn-transition-fast);
    overflow: hidden;
}

.tasknotes-plugin .task-list-view__task-item:hover {
    background: var(--tn-interactive-hover);
    border-color: var(--tn-border-color-hover);
    transform: translateY(-1px);
    box-shadow: var(--tn-shadow-medium);
}

.tasknotes-plugin .task-list-view__task-item:focus-within {
    border-color: var(--tn-interactive-accent);
    box-shadow: none;
}

/* Task Item States */
.tasknotes-plugin .task-list-view__task-item--completed {
    opacity: 0.7;
    background: var(--tn-bg-secondary);
}

.tasknotes-plugin .task-list-view__task-item--overdue {
    border-left: 4px solid var(--tn-color-error);
    background: color-mix(in srgb, var(--tn-color-error) 0.05, var(--tn-bg-primary));
}

.tasknotes-plugin .task-list-view__task-item--due-today {
    border-left: 4px solid var(--tn-interactive-accent);
    background: color-mix(in srgb, var(--tn-interactive-accent) 0.05, var(--tn-bg-primary));
}

.tasknotes-plugin .task-list-view__task-item--archived {
    opacity: 0.5;
    background: transparent;
}

/* Task Item Priority Indicators */
.tasknotes-plugin .task-list-view__task-item--priority-high {
    border-left: 3px solid var(--tn-color-error);
}

.tasknotes-plugin .task-list-view__task-item--priority-normal {
    border-left: 3px solid var(--tn-interactive-accent);
}

.tasknotes-plugin .task-list-view__task-item--priority-low {
    border-left: 3px solid var(--tn-text-muted);
}

/* Task Update Animation */
.tasknotes-plugin .task-list-view__task-item--updating {
    animation: task-update 1.5s ease;
}

@keyframes task-update {
    0% {
        background-color: var(--tn-bg-primary);
        transform: scale(1);
    }
    20% {
        background-color: var(--tn-interactive-accent-hover);
        transform: scale(1.02);
    }
    100% {
        background-color: var(--tn-bg-primary);
        transform: scale(1);
    }
}


/* Responsive Design */
@media (max-width: 768px) {
    .tasknotes-plugin .task-list-view {
        padding: var(--tn-spacing-xs);
        gap: var(--tn-spacing-xs);
    }

    .tasknotes-plugin .task-list-view__header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--tn-spacing-sm);
    }

    .tasknotes-plugin .task-list-view__actions {
        justify-content: center;
    }

    .tasknotes-plugin .task-list-view__add-button {
        width: 100%;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .tasknotes-plugin .task-list-view__group-header {
        font-size: var(--tn-font-size-md);
        padding: var(--tn-spacing-sm) 0 var(--tn-spacing-xs);
    }

    .tasknotes-plugin .task-list-view__empty {
        padding: var(--tn-spacing-lg);
    }

    .tasknotes-plugin .task-list-view__empty-title {
        font-size: var(--tn-font-size-md);
    }

    .tasknotes-plugin .task-list-view__empty-description {
        font-size: var(--tn-font-size-sm);
    }
}


/* ===== CALENDAR-VIEW.CSS ===== */
/* ================================================
   CALENDAR VIEW & MINI-CALENDAR VIEW - BEM STRUCTURE
   ================================================ */

/* Calendar View Container - Root Block */
.tasknotes-plugin .calendar-view,
.tasknotes-plugin .mini-calendar-view {
    padding: var(--tn-spacing-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    gap: var(--tn-spacing-sm);
    max-width: 100%;
}

/* Calendar Controls Container */
.tasknotes-plugin .calendar-view__controls,
.tasknotes-plugin .mini-calendar-view__controls {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--tn-spacing-sm);
    padding: var(--tn-spacing-xs);
    background: var(--tn-bg-secondary);
    border-radius: var(--tn-radius-sm);
    gap: var(--tn-spacing-xs);
    border: 1px solid var(--tn-border-color);
}

/* Calendar Header */
.tasknotes-plugin .calendar-view__header,
.tasknotes-plugin .mini-calendar-view__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--tn-spacing-md);
    padding: var(--tn-spacing-sm) 0;
    gap: var(--tn-spacing-md);
}

/* Use consistent button system for view selector */
.tasknotes-plugin .calendar-view__view-selector,
.tasknotes-plugin .mini-calendar-view__view-selector {
    /* margin-right: var(--tn-spacing-md); */
    /* min-width: 120px; */
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    border: none;
    box-shadow: none;
    border-radius: var(--tn-radius-sm);
    background: transparent;
    color: var(--tn-text-normal);
    font-size: var(--tn-font-size-sm);
    cursor: var(--cursor);
    transition: all var(--tn-transition-fast);
}

.tasknotes-plugin .calendar-view__view-selector:hover,
.tasknotes-plugin .mini-calendar-view__view-selector:hover {
    background: var(--tn-interactive-hover);
    box-shadow: none;
}

.tasknotes-plugin .calendar-view__view-selector:focus,
.tasknotes-plugin .mini-calendar-view__view-selector:focus {
    outline: 2px solid var(--tn-interactive-accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* Calendar Navigation Section */
.tasknotes-plugin .calendar-view__navigation,
.tasknotes-plugin .mini-calendar-view__navigation {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
}

/* Calendar Month Display */
.tasknotes-plugin .calendar-view__month-display,
.tasknotes-plugin .mini-calendar-view__month-display {
    font-weight: 500;
    font-size: var(--tn-font-size-lg);
    /* min-width: 140px; */
    text-align: center;
    padding-inline: 5px;
    color: var(--tn-text-normal);
}

.tasknotes-plugin .calendar-view__nav-button,
.tasknotes-plugin .mini-calendar-view__nav-button {
    width: 32px;
    height: 32px;
    font-size: 16px;
    font-weight: 500;
    border: none;
    box-shadow: none;
    background: transparent;
}

.tasknotes-plugin .calendar-view__today-button,
.tasknotes-plugin .mini-calendar-view__today-button {
    margin-left: auto;
    border: none;
    box-shadow: none;
    background: transparent;
    font-weight: normal;
    opacity: 0.7;
    transition: opacity var(--tn-transition-fast);
    cursor: var(--cursor);
    border-radius: var(--tn-radius-sm);
    font-size: var(--tn-font-size-lg);
}

.tasknotes-plugin .calendar-view__today-button:hover,
.tasknotes-plugin .mini-calendar-view__today-button:hover {
    background-color: var(--tn-interactive-hover);
    color: var(--tn-text-normal);
    opacity: 1;
}

/* Loading Indicator */
.tasknotes-plugin .calendar-view__loading,
.tasknotes-plugin .mini-calendar-view__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tn-spacing-sm);
    padding: var(--tn-spacing-lg);
    color: var(--tn-text-muted);
    font-size: var(--tn-font-size-md);
    font-style: italic;
    font-weight: 400;
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-md);
    margin-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .calendar-view__loading::before,
.tasknotes-plugin .mini-calendar-view__loading::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, var(--tn-text-muted) 0.3, transparent);
    border-top: 2px solid var(--tn-text-muted);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

/* Calendar Grid Container */
.tasknotes-plugin .calendar-view__grid-container,
.tasknotes-plugin .mini-calendar-view__grid-container {
    margin-bottom: var(--tn-spacing-md);
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* Calendar Grid */
.tasknotes-plugin .calendar-view__grid,
.tasknotes-plugin .mini-calendar-view__grid {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: var(--tn-spacing-sm);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    overflow: hidden;
    role: grid;
}

/* Calendar Grid Header Row */
.tasknotes-plugin .calendar-view__grid-header,
.tasknotes-plugin .mini-calendar-view__grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--tn-bg-secondary);
    role: row;
}

/* Calendar Week Row */
.tasknotes-plugin .calendar-view__week,
.tasknotes-plugin .mini-calendar-view__week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    role: row;
}

/* Calendar Day Header (Sun, Mon, etc.) */
.tasknotes-plugin .calendar-view__day-header,
.tasknotes-plugin .mini-calendar-view__day-header {
    text-align: center;
    font-weight: 500;
    font-size: var(--tn-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--tn-spacing-xs);
    color: var(--tn-text-muted);
    background: var(--tn-bg-secondary);
    border: none;
    role: columnheader;
}

/* Calendar Day Cell - consistent styling */
.tasknotes-plugin .calendar-view__day,
.tasknotes-plugin .mini-calendar-view__day {
    position: relative;
    min-height: 2rem;
    padding: var(--tn-spacing-xs);
    text-align: center;
    cursor: var(--cursor);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--tn-bg-primary);
    border: none;
    transition: all var(--tn-transition-fast);
    font-size: var(--tn-font-size-sm);
    font-weight: 500;
    role: gridcell;
}

.tasknotes-plugin .calendar-view__day:hover,
.tasknotes-plugin .mini-calendar-view__day:hover {
    background-color: var(--tn-interactive-hover);
    transform: none;
    box-shadow: none;
}

/* Calendar Day - Today State */
.tasknotes-plugin .calendar-view__day--today,
.tasknotes-plugin .mini-calendar-view__day--today {
    background: var(--tn-interactive-hover) !important;
    color: var(--tn-interactive-accent);
    font-weight: 600;
    box-shadow: none;
    position: relative;
}

.tasknotes-plugin .calendar-view__day--today::after,
.tasknotes-plugin .mini-calendar-view__day--today::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--tn-interactive-accent);
}

/* Calendar Day - Selected State */
.tasknotes-plugin .calendar-view__day--selected,
.tasknotes-plugin .mini-calendar-view__day--selected {
    border: 1px solid var(--tn-interactive-accent);
    font-weight: 500;
    background-color: color-mix(in srgb, var(--tn-interactive-accent) 12%, transparent);
    box-shadow: none;
}

/* Selected but not today */
.tasknotes-plugin .calendar-view__day--selected:not(.calendar-view__day--today),
.tasknotes-plugin .mini-calendar-view__day--selected:not(.mini-calendar-view__day--today) {
    background-color: var(--tn-bg-secondary);
}

/* Selected and today */
.tasknotes-plugin .calendar-view__day--today.calendar-view__day--selected,
.tasknotes-plugin .mini-calendar-view__day--today.mini-calendar-view__day--selected {
    box-shadow: none;
}

/* Calendar Day - Outside Month */
.tasknotes-plugin .calendar-view__day--outside-month,
.tasknotes-plugin .mini-calendar-view__day--outside-month {
    color: var(--tn-text-faint);
    background-color: transparent;
    opacity: 0.3;
}

/* Selected state overrides content indicator borders */
.tasknotes-plugin .calendar-view__day--selected.calendar-view__day--has-notes,
.tasknotes-plugin .calendar-view__day--selected.calendar-view__day--has-tasks,
.tasknotes-plugin .calendar-view__day--selected.calendar-view__day--has-daily-note,
.tasknotes-plugin .mini-calendar-view__day--selected.mini-calendar-view__day--has-notes,
.tasknotes-plugin .mini-calendar-view__day--selected.mini-calendar-view__day--has-tasks,
.tasknotes-plugin .mini-calendar-view__day--selected.mini-calendar-view__day--has-daily-note {
    border: 1px solid var(--tn-interactive-accent);
}

/* Day Indicators Container (for dots/markers) */
.tasknotes-plugin .calendar-view__day-indicators,
.tasknotes-plugin .mini-calendar-view__day-indicators {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: 2px;
}

/* Individual Day Indicator */
.tasknotes-plugin .calendar-view__day-indicator,
.tasknotes-plugin .mini-calendar-view__day-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    margin: var(--tn-spacing-xs);
}

.tasknotes-plugin .calendar-view__day-indicator--notes,
.tasknotes-plugin .mini-calendar-view__day-indicator--notes {
    background-color: var(--tn-interactive-accent);
}

.tasknotes-plugin .calendar-view__day-indicator--tasks,
.tasknotes-plugin .mini-calendar-view__day-indicator--tasks {
    background-color: var(--tn-color-error);
}

.tasknotes-plugin .calendar-view__day-indicator--important,
.tasknotes-plugin .mini-calendar-view__day-indicator--important {
    background-color: var(--tn-color-warning);
}

/* Content Indicators (Notes, Tasks, Daily Notes) */
.tasknotes-plugin .calendar-view__content-indicator,
.tasknotes-plugin .mini-calendar-view__content-indicator {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all var(--tn-transition-fast);
}

.tasknotes-plugin .calendar-view__content-indicator--notes,
.tasknotes-plugin .mini-calendar-view__content-indicator--notes {
    bottom: 4px;
    left: 30%;
    transform: translateX(-50%);
}

.tasknotes-plugin .calendar-view__content-indicator--tasks,
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks {
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.tasknotes-plugin .calendar-view__content-indicator--daily-note,
.tasknotes-plugin .mini-calendar-view__content-indicator--daily-note {
    bottom: 4px;
    left: 70%;
    transform: translateX(-50%);
}

/* Hover effects for content indicators */
.tasknotes-plugin .calendar-view__day:hover .calendar-view__content-indicator,
.tasknotes-plugin .mini-calendar-view__day:hover .mini-calendar-view__content-indicator {
    transform: translateX(-50%) scale(1.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Notes Indicators - Different intensities */
.tasknotes-plugin .calendar-view__content-indicator--notes-few,
.tasknotes-plugin .mini-calendar-view__content-indicator--notes-few {
    background: var(--tn-color-notes-light);
    width: 6px;
    height: 6px;
}

.tasknotes-plugin .calendar-view__content-indicator--notes-some,
.tasknotes-plugin .mini-calendar-view__content-indicator--notes-some {
    background: var(--tn-color-notes-medium);
    width: 8px;
    height: 8px;
}

.tasknotes-plugin .calendar-view__content-indicator--notes-many,
.tasknotes-plugin .mini-calendar-view__content-indicator--notes-many {
    background: var(--tn-color-notes-heavy);
    width: 10px;
    height: 10px;
}

/* Task Indicators - Different states */
.tasknotes-plugin .calendar-view__content-indicator--tasks-due,
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-due {
    background: var(--tn-color-error);
    width: 8px;
    height: 8px;
}

.tasknotes-plugin .calendar-view__content-indicator--tasks-completed,
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-completed {
    background: var(--tn-color-success);
    width: 8px;
    height: 8px;
}

.tasknotes-plugin .calendar-view__content-indicator--tasks-scheduled,
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-scheduled {
    background: var(--tn-interactive-accent);
    width: 8px;
    height: 8px;
}

.tasknotes-plugin .calendar-view__content-indicator--tasks-archived,
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-archived {
    background: var(--tn-color-archived);
    width: 8px;
    height: 8px;
    opacity: 0.8;
}

/* Daily Note Indicator */
.tasknotes-plugin .calendar-view__content-indicator--daily-note,
.tasknotes-plugin .mini-calendar-view__content-indicator--daily-note {
    background-color: var(--tn-color-daily-note);
    width: 7px;
    height: 7px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Hover tooltip for indicators */
.tasknotes-plugin .calendar-view__content-indicator:hover::after,
.tasknotes-plugin .mini-calendar-view__content-indicator:hover::after {
    content: attr(aria-label);
    position: absolute;
    background: var(--tn-bg-primary);
    color: var(--tn-text-normal);
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    border-radius: var(--tn-radius-sm);
    font-size: var(--tn-font-size-xs);
    white-space: nowrap;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--tn-z-tooltip);
    box-shadow: var(--tn-shadow-medium);
    pointer-events: none;
    border: 1px solid var(--tn-border-color);
}

/* Day Content State Modifiers */
.tasknotes-plugin .calendar-view__day--has-content,
.tasknotes-plugin .mini-calendar-view__day--has-content {
    font-weight: 500;
    background-color: transparent;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid var(--tn-border-color);
    border-left: 1px solid transparent;
}

/* Notes Content Indicators */
.tasknotes-plugin .calendar-view__day--has-notes-few,
.tasknotes-plugin .mini-calendar-view__day--has-notes-few {
    border-left: var(--tn-spacing-xs) solid var(--tn-color-notes-light);
    background: linear-gradient(to right, var(--cs-blue-100), transparent);
}

.tasknotes-plugin .calendar-view__day--has-notes-some,
.tasknotes-plugin .mini-calendar-view__day--has-notes-some {
    border-left: var(--tn-spacing-xs) solid var(--tn-color-notes-medium);
    background: linear-gradient(to right, var(--cs-blue-100), transparent);
}

.tasknotes-plugin .calendar-view__day--has-notes-many,
.tasknotes-plugin .mini-calendar-view__day--has-notes-many {
    border-left: var(--tn-spacing-xs) solid var(--tn-color-notes-heavy);
    background: linear-gradient(to right, var(--cs-blue-100), transparent);
}

/* Tasks Content Indicators */
.tasknotes-plugin .calendar-view__day--has-tasks,
.tasknotes-plugin .mini-calendar-view__day--has-tasks {
    border-left: var(--tn-spacing-xs) solid var(--tn-color-error);
    background: linear-gradient(to right, var(--cs-red-100), transparent);
}

.tasknotes-plugin .calendar-view__day--has-scheduled-tasks,
.tasknotes-plugin .mini-calendar-view__day--has-scheduled-tasks {
    border-left: var(--tn-spacing-xs) solid var(--tn-interactive-accent);
    background: linear-gradient(to right, var(--cs-blue-100), transparent);
}

.tasknotes-plugin .calendar-view__day--has-completed-tasks,
.tasknotes-plugin .mini-calendar-view__day--has-completed-tasks {
    border-left: var(--tn-spacing-xs) solid var(--tn-color-success);
    background: linear-gradient(to right, var(--cs-green-100), transparent);
}

.tasknotes-plugin .calendar-view__day--has-archived-tasks,
.tasknotes-plugin .mini-calendar-view__day--has-archived-tasks {
    border-left: var(--tn-spacing-xs) solid var(--tn-color-archived);
    background: linear-gradient(to right, var(--cs-gray-100), transparent);
}

/* Daily Note Content Indicator */
.tasknotes-plugin .calendar-view__day--has-daily-note,
.tasknotes-plugin .mini-calendar-view__day--has-daily-note {
    border-left: var(--tn-spacing-xs) solid var(--tn-color-daily-note);
    background: linear-gradient(to right, var(--cs-purple-100), transparent);
}

/* Enhanced hover effects for content indicators */
.tasknotes-plugin .calendar-view__day--has-content:hover,
.tasknotes-plugin .mini-calendar-view__day--has-content:hover {
    border-left-width: var(--tn-spacing-sm);
    transform: translateX(1px);
}

/* Mini calendar minimalist adjustments */
.tasknotes-plugin .mini-calendar-view {
    padding: var(--tn-spacing-xs);
    gap: var(--tn-spacing-xs);
}

.tasknotes-plugin .mini-calendar-view__controls {
    padding: 0;
    gap: var(--tn-spacing-xs);
    background: transparent;
    border: none;
    box-shadow: none;
}

.tasknotes-plugin .mini-calendar-view__header {
    padding: 0;
    margin-bottom: var(--tn-spacing-xs);
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .mini-calendar-view__navigation {
    gap: var(--tn-spacing-xs);
}

.tasknotes-plugin .mini-calendar-view__legend {
    margin-top: var(--tn-spacing-sm);
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-muted);
}

.tasknotes-plugin .mini-calendar-view__legend-summary {
    cursor: var(--cursor);
    list-style: none;
    padding: calc(var(--tn-spacing-xs) * 0.25) 0;
}

.tasknotes-plugin .mini-calendar-view__legend[open] .mini-calendar-view__legend-summary {
    color: var(--tn-text-normal);
}

.tasknotes-plugin .mini-calendar-view__legend-section {
    display: flex;
    flex-direction: column;
    gap: calc(var(--tn-spacing-xs) * 0.5);
    margin-top: calc(var(--tn-spacing-xs) * 0.75);
}

.tasknotes-plugin .mini-calendar-view__legend-item {
    display: flex;
    align-items: center;
    gap: calc(var(--tn-spacing-xs) * 0.5);
}

.tasknotes-plugin .mini-calendar-view__legend-section-title {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tn-text-muted);
}

.tasknotes-plugin .mini-calendar-view__legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tasknotes-plugin .mini-calendar-view__legend-dot--due {
    background-color: var(--tn-color-error);
}

.tasknotes-plugin .mini-calendar-view__legend-dot--scheduled {
    background-color: var(--tn-interactive-accent);
}

.tasknotes-plugin .mini-calendar-view__legend-dot--completed {
    background-color: var(--tn-text-muted);
}

.tasknotes-plugin .mini-calendar-view__legend-dot--notes {
    background-color: var(--tn-color-notes-medium);
}

.tasknotes-plugin .mini-calendar-view__legend-dot--daily {
    background-color: var(--tn-color-daily-note);
}

.tasknotes-plugin .mini-calendar-view__legend-label {
    line-height: 1.1;
}

.tasknotes-plugin .mini-calendar-view__legend-interaction {
    display: flex;
    gap: var(--tn-spacing-xs);
    align-items: baseline;
}

.tasknotes-plugin .mini-calendar-view__legend-action {
    font-weight: 600;
    color: var(--tn-text-muted);
    min-width: 96px;
    white-space: nowrap;
}

.tasknotes-plugin .mini-calendar-view__legend-description {
    color: var(--tn-text-muted);
    flex: 1;
}

.tasknotes-plugin .mini-calendar-view__nav-button {
    width: var(--tn-button-height-sm);
    height: var(--tn-button-height-sm);
    font-size: var(--tn-font-size-lg);
    color: var(--tn-text-muted);
}

.tasknotes-plugin .mini-calendar-view__nav-button:hover {
    color: var(--tn-text-normal);
}

.tasknotes-plugin .mini-calendar-view__view-selector {
    padding: 0;
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
}

.tasknotes-plugin .mini-calendar-view__view-selector:hover,
.tasknotes-plugin .mini-calendar-view__view-selector:focus {
    background: transparent;
    color: var(--tn-text-normal);
}

.tasknotes-plugin .mini-calendar-view__view-selector:focus-visible {
    outline: 1px solid var(--tn-interactive-accent);
    outline-offset: 2px;
}

.tasknotes-plugin .mini-calendar-view__month-display {
    font-weight: 600;
    font-size: var(--tn-font-size-md);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tn-text-muted);
}

.tasknotes-plugin .mini-calendar-view__grid-container {
    margin-bottom: 0;
}

.tasknotes-plugin .mini-calendar-view__grid {
    border: none;
    border-radius: 0;
    background: transparent;
    gap: 1px;
    outline: none;
}

.tasknotes-plugin .mini-calendar-view__grid:focus {
    outline: none;
}

.tasknotes-plugin .mini-calendar-view__grid-header {
    background: transparent;
}

.tasknotes-plugin .mini-calendar-view__day-header {
    background: transparent;
    color: var(--tn-text-muted);
    letter-spacing: 0.08em;
    padding: calc(var(--tn-spacing-xs) * 0.75) 0;
}

.tasknotes-plugin .mini-calendar-view__week {
    gap: 1px;
}

.tasknotes-plugin .mini-calendar-view__day {
    background: transparent;
    border-radius: var(--tn-radius-sm);
    min-height: 2.25rem;
    border: none;
    transition: border-color var(--tn-transition-fast), background-color var(--tn-transition-fast), color var(--tn-transition-fast);
}

.tasknotes-plugin .mini-calendar-view__day:hover {
    background: color-mix(in srgb, var(--tn-interactive-hover) 25%, transparent);
}

.tasknotes-plugin .mini-calendar-view__day--today {
    background: none !important;
    color: var(--tn-text-on-accent);
}

.tasknotes-plugin .mini-calendar-view__day--today::after {
    bottom: 6px;
    background: color-mix(in srgb, var(--tn-interactive-accent) 85%, transparent);
}

.tasknotes-plugin .mini-calendar-view__day--selected {
    background: color-mix(in srgb, var(--tn-interactive-accent) 20%, transparent);
    border: 1px solid var(--tn-interactive-accent);
}

.tasknotes-plugin .mini-calendar-view__day--today.mini-calendar-view__day--selected {
    background: color-mix(in srgb, var(--tn-interactive-accent) 25%, transparent);
}

.tasknotes-plugin .mini-calendar-view__day--outside-month {
    opacity: 0.45;
}

.tasknotes-plugin .mini-calendar-view__day--has-content,
.tasknotes-plugin .mini-calendar-view__day--has-notes-few,
.tasknotes-plugin .mini-calendar-view__day--has-notes-some,
.tasknotes-plugin .mini-calendar-view__day--has-notes-many,
.tasknotes-plugin .mini-calendar-view__day--has-tasks,
.tasknotes-plugin .mini-calendar-view__day--has-scheduled-tasks,
.tasknotes-plugin .mini-calendar-view__day--has-completed-tasks,
.tasknotes-plugin .mini-calendar-view__day--has-daily-note {
    background: transparent;
}

.tasknotes-plugin .mini-calendar-view__day--has-content:hover {
    transform: none;
}

.tasknotes-plugin .mini-calendar-view__day-indicators {
    margin-top: 4px;
    gap: 4px;
}

.tasknotes-plugin .mini-calendar-view__content-indicator {
    width: 6px;
    height: 6px;
    bottom: 6px;
    box-shadow: none;
}

.tasknotes-plugin .mini-calendar-view__day:hover .mini-calendar-view__content-indicator {
    transform: translateX(-50%);
    box-shadow: none;
}

.tasknotes-plugin .mini-calendar-view__content-indicator--notes-some,
.tasknotes-plugin .mini-calendar-view__content-indicator--notes-many {
    width: 7px;
    height: 7px;
}

.tasknotes-plugin .mini-calendar-view__content-indicator--notes-many {
    width: 8px;
    height: 8px;
}

.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-due,
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-completed,
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-scheduled,
.tasknotes-plugin .mini-calendar-view__content-indicator--tasks-archived,
.tasknotes-plugin .mini-calendar-view__content-indicator--daily-note {
    width: 6px;
    height: 6px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .tasknotes-plugin .calendar-view,
    .tasknotes-plugin .mini-calendar-view {
        padding: var(--tn-spacing-xs);
        gap: var(--tn-spacing-xs);
    }
    
    .tasknotes-plugin .calendar-view__controls,
    .tasknotes-plugin .mini-calendar-view__controls {
        padding: var(--tn-spacing-xs);
    }
    
    .tasknotes-plugin .calendar-view__nav-button,
    .tasknotes-plugin .mini-calendar-view__nav-button {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    
    .tasknotes-plugin .calendar-view__day,
    .tasknotes-plugin .mini-calendar-view__day {
        min-height: 1.8rem;
        font-size: var(--tn-font-size-xs);
    }
}

@media (max-width: 480px) {
    .tasknotes-plugin .calendar-view__header,
    .tasknotes-plugin .mini-calendar-view__header {
        flex-direction: column;
        gap: var(--tn-spacing-sm);
        align-items: stretch;
    }
    
    .tasknotes-plugin .calendar-view__navigation,
    .tasknotes-plugin .mini-calendar-view__navigation {
        justify-content: center;
    }
    
    .tasknotes-plugin .calendar-view__month-display,
    .tasknotes-plugin .mini-calendar-view__month-display {
        font-size: var(--tn-font-size-md);
        min-width: auto;
    }
    
    .tasknotes-plugin .calendar-view__day,
    .tasknotes-plugin .mini-calendar-view__day {
        min-height: 1.5rem;
        padding: var(--tn-spacing-xs);
    }
    
    .tasknotes-plugin .calendar-view__content-indicator,
    .tasknotes-plugin .mini-calendar-view__content-indicator {
        width: 6px;
        height: 6px;
    }
}

/* Mini Calendar Specific Indicators */
.tasknotes-plugin .note-indicator,
.tasknotes-plugin .task-indicator,
.tasknotes-plugin .daily-note-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.tasknotes-plugin .note-indicator.few-notes {
    background-color: var(--tn-color-notes-light);
}

.tasknotes-plugin .note-indicator.some-notes {
    background-color: var(--tn-color-notes-medium);
}

.tasknotes-plugin .note-indicator.many-notes {
    background-color: var(--tn-color-notes-heavy);
}

.tasknotes-plugin .task-indicator.due-tasks {
    background-color: var(--tn-color-error);
}

.tasknotes-plugin .task-indicator.completed-tasks {
    background-color: var(--tn-text-muted);
}

.tasknotes-plugin .task-indicator.scheduled-tasks {
    background-color: var(--tn-interactive-accent);
}

.tasknotes-plugin .daily-note-indicator {
    background-color: var(--tn-color-daily-note);
}

/* Cache Loading Indicator */
.tasknotes-plugin .cache-loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tn-spacing-sm);
    padding: var(--tn-spacing-lg);
    color: var(--tn-text-muted);
    font-size: var(--tn-font-size-md);
    font-style: italic;
    font-weight: 400;
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-md);
    margin-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .cache-loading-indicator::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, var(--tn-text-muted) 0.3, transparent);
    border-top: 2px solid var(--tn-text-muted);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ================================================
   MINI CALENDAR DRAG AND DROP STATES
   ================================================ */

/* Drag over state for mini calendar days */
.tasknotes-plugin .mini-calendar-view__day--dragover {
    background-color: var(--tn-interactive-accent-hover) !important;
    border-color: var(--tn-interactive-accent) !important;
    color: var(--tn-text-on-accent) !important;
    transform: scale(1.1);
    box-shadow: var(--tn-shadow-light);
    z-index: 10;
    border: 2px solid var(--tn-interactive-accent);
    border-radius: var(--tn-radius-sm);
}

/* ================================================
   MINI CALENDAR WEEK NUMBERS & SELECTION
   ================================================ */

/* Update grid layout to include week number column */
.tasknotes-plugin .mini-calendar-view__grid-header {
    grid-template-columns: 40px repeat(7, 1fr);
}

.tasknotes-plugin .mini-calendar-view__week {
    grid-template-columns: 40px repeat(7, 1fr);
}

/* Week number header cell */
.tasknotes-plugin .mini-calendar-view__week-header {
    text-align: center;
    font-weight: 500;
    font-size: var(--tn-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--tn-spacing-xs);
    color: var(--tn-text-muted);
    background: var(--tn-bg-secondary);
    border: none;
}

/* Week number cell */
.tasknotes-plugin .mini-calendar-week-number {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--tn-font-size-xs);
    font-weight: 600;
    color: var(--tn-text-muted);
    background: var(--tn-bg-secondary);
    cursor: var(--cursor);
    transition: all var(--tn-transition-fast);
    border-right: 1px solid var(--tn-border-color);
}

.tasknotes-plugin .mini-calendar-week-number:hover {
    background: var(--tn-interactive-hover);
    color: var(--tn-interactive-accent);
}

/* ================================================
   MINI CALENDAR NOTE PREVIEW TOOLTIP
   ================================================ */

.mini-calendar-note-preview {
    position: absolute;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    padding: var(--size-4-3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    max-width: 300px;
    min-width: 200px;
    z-index: 1000;
    pointer-events: none;
    backdrop-filter: blur(8px);
}

.mini-calendar-note-preview .preview-header {
    font-weight: 600;
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-normal);
    margin-bottom: var(--tn-spacing-xs);
    padding-bottom: var(--tn-spacing-xs);
    border-bottom: 1px solid var(--tn-border-color);
}

.mini-calendar-note-preview .preview-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--tn-font-size-xs);
}

.mini-calendar-note-preview .preview-list li {
    padding: var(--tn-spacing-xs) 0;
    color: var(--tn-text-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-calendar-note-preview .preview-note-title {
    color: var(--tn-text-normal);
}

.mini-calendar-note-preview .preview-note-type {
    color: var(--tn-text-muted);
    font-size: var(--tn-font-size-xs);
    font-style: italic;
}

.mini-calendar-note-preview .preview-more {
    color: var(--tn-text-muted);
    font-style: italic;
    margin-top: var(--tn-spacing-xs);
}

/* ================================================
   MINI CALENDAR HEAT MAP INTENSITY
   ================================================ */

/* Heat map intensity levels (GitHub contributions style) */
.tasknotes-plugin .mini-calendar-view__day--intensity-none {
    /* Default background, no change */
}

.tasknotes-plugin .mini-calendar-view__day--intensity-low {
    background: color-mix(in srgb, var(--tn-interactive-accent) 25%, var(--tn-bg-primary)) !important;
}

.tasknotes-plugin .mini-calendar-view__day--intensity-medium {
    background: color-mix(in srgb, var(--tn-interactive-accent) 40%, var(--tn-bg-primary)) !important;
}

.tasknotes-plugin .mini-calendar-view__day--intensity-high {
    background: color-mix(in srgb, var(--tn-interactive-accent) 55%, var(--tn-bg-primary)) !important;
}

.tasknotes-plugin .mini-calendar-view__day--intensity-very-high {
    background: color-mix(in srgb, var(--tn-interactive-accent) 70%, var(--tn-bg-primary)) !important;
    color: var(--tn-text-on-accent);
    font-weight: 600;
}

/* Preserve hover effect on heat map days */
.tasknotes-plugin .mini-calendar-view__day--intensity-low:hover,
.tasknotes-plugin .mini-calendar-view__day--intensity-medium:hover,
.tasknotes-plugin .mini-calendar-view__day--intensity-high:hover,
.tasknotes-plugin .mini-calendar-view__day--intensity-very-high:hover {
    background: color-mix(in srgb, var(--tn-interactive-accent) 35%, var(--tn-interactive-hover)) !important;
}


/* ===== ADVANCED-CALENDAR-VIEW.CSS ===== */
/* Advanced Calendar View Styles */
.advanced-calendar-view {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ICS Event Styles */
.fc-event[data-ics-event="true"] {
    opacity: 0.9;
    border-radius: 4px;
}

/* Only apply calendar emoji to ICS events in non-list views */
.fc-daygrid-event[data-ics-event="true"]:before,
.fc-timegrid-event[data-ics-event="true"]:before {
    content: "📅";
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    opacity: 0.7;
}

.fc-event[data-ics-event="true"]:hover {
    opacity: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ICS Event Info Modal */
.ics-event-description {
    max-height: 100px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 0.9em;
    margin-top: 0.25rem;
    padding: 0.5rem;
    background: var(--background-secondary);
    border-radius: 4px;
}

/* ICS Context Menu */
.ics-event-context-menu {
    font-size: 0.9em;
}

.ics-context-menu-item:hover {
    background-color: var(--background-modifier-hover) !important;
}

/* Timeblock Help Text */
.advanced-calendar-view__help-text {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--background-secondary);
    border-radius: 4px;
    border-left: 3px solid var(--color-accent);
}

/* Event Type Specific Styles */

/* Timeblock Events */
.fc-timeblock-event,
.fc-event[data-event-type="timeblock"] {
    opacity: 0.65;
    border-radius: 4px;
    border-width: 1px !important;
    border-style: solid !important;
    transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.fc-timeblock-event:hover,
.fc-event[data-event-type="timeblock"]:hover {
    opacity: 0.90;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-0.5px);
}

/* Time Entry Events - Recorded time with distinctive dashed border */
.fc-event[data-event-type="timeEntry"] {
    opacity: 0.9;
    border-radius: 4px;
    border-width: 2px !important;
    border-style: dashed !important; /* Dashed border to differentiate from solid timeblocks */
    background: repeating-linear-gradient(
        45deg,
        rgba(16, 185, 129, 0.08),
        rgba(16, 185, 129, 0.08) 10px,
        rgba(16, 185, 129, 0.15) 10px,
        rgba(16, 185, 129, 0.15) 20px
    ) !important; /* Subtle diagonal stripes in green */
    border-color: #10b981 !important; /* Green to indicate "completed/recorded" time */
}

.fc-event[data-event-type="timeEntry"] .fc-event-time,
.fc-event[data-event-type="timeEntry"] .fc-event-title {
    color: #059669 !important; /* Darker green for better readability */
    font-weight: 500;
}

.fc-event[data-event-type="timeEntry"]:hover {
    opacity: 1;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
    border-style: solid !important; /* Solid border on hover for clarity */
}

/* Dark mode adjustments for time entries */
.theme-dark .fc-event[data-event-type="timeEntry"] {
    background: repeating-linear-gradient(
        45deg,
        rgba(52, 211, 153, 0.1),
        rgba(52, 211, 153, 0.1) 10px,
        rgba(52, 211, 153, 0.18) 10px,
        rgba(52, 211, 153, 0.18) 20px
    ) !important;
    border-color: #34d399 !important; /* Lighter green for dark mode */
}

.theme-dark .fc-event[data-event-type="timeEntry"] .fc-event-time,
.theme-dark .fc-event[data-event-type="timeEntry"] .fc-event-title {
    color: #6ee7b7 !important; /* Even lighter green for text in dark mode */
}

/* Task Events */
.fc-task-event {
    border-radius: 4px;
    border-width: 1px !important;
}

.fc-task-event:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ICS Events - only in non-list views */
.fc-daygrid-event.fc-ics-event,
.fc-timegrid-event.fc-ics-event {
    border-radius: 4px;
    border-width: 2px !important;
    border-style: solid !important;
}

.fc-daygrid-event.fc-ics-event:hover,
.fc-timegrid-event.fc-ics-event:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Recurring Events */
.fc-recurring-event {
    border-style: dashed !important;
}

/* Completed Events */
.fc-completed-event {
    opacity: 0.7;
}

/* Timeblock Modal Styles */
.timeblock-creation-modal .modal-content {
    max-width: 500px;
}

.timeblock-date-display {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--background-secondary);
    border-radius: 6px;
    text-align: center;
}

.timeblock-time-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.timeblock-modal-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.timeblock-help-text {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--background-secondary);
    border-radius: 4px;
    line-height: 1.4;
}

.timeblock-help-text code {
    background: var(--background-primary);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
}

/* Attachment Selection Styles */
.timeblock-attachments-list {
    margin-top: 0.5rem;
    min-height: 2rem;
}

.timeblock-attachments-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.9em;
    padding: 0.5rem;
    text-align: center;
    background: var(--background-secondary);
    border-radius: 4px;
}

.timeblock-attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    background: var(--background-secondary);
    border-radius: 4px;
    border: 1px solid var(--background-modifier-border);
}

.timeblock-attachment-item:hover {
    background: var(--background-modifier-hover);
}

.timeblock-attachment-info {
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

.timeblock-attachment-name {
    font-weight: 500;
    color: var(--text-normal);
    display: block;
}

.timeblock-attachment-path {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-top: 0.2rem;
    word-break: break-all;
}

.timeblock-attachment-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2em;
    cursor: var(--cursor);
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.timeblock-attachment-remove:hover {
    background: var(--background-modifier-error);
    color: var(--text-on-accent);
}

/* Attachment Suggestion Modal Styles */
.attachment-suggestion {
    padding: 0.5rem;
}

.attachment-name {
    font-weight: 500;
    color: var(--text-normal);
}

.attachment-path {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

/* Timeblock Info Modal */
.timeblock-description {
    max-height: 100px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 0.9em;
    margin-top: 0.25rem;
    padding: 0.5rem;
    background: var(--background-secondary);
    border-radius: 4px;
}

.timeblock-attachments {
    margin-top: 0.5rem;
}

.timeblock-attachment-item {
    margin-bottom: 0.25rem;
}

.timeblock-attachment-item .internal-link {
    color: var(--link-color);
    text-decoration: none;
    cursor: var(--cursor);
}

.timeblock-attachment-item .internal-link:hover {
    text-decoration: underline;
}

/* ICS Subscription Settings */
.ics-subscription-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.settings-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.settings-status-indicator.enabled {
    background-color: var(--text-success);
}

.settings-status-indicator.enabled.error {
    background-color: var(--text-error);
}

.settings-status-indicator.disabled {
    background-color: var(--text-muted);
}

.ics-subscription-info {
    flex: 1;
    min-width: 0;
}

.ics-subscription-name {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.ics-subscription-url {
    font-size: 0.85em;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.ics-subscription-meta {
    font-size: 0.8em;
    color: var(--text-muted);
}

.ics-subscription-error {
    font-size: 0.8em;
    color: var(--text-error);
    margin-top: 0.25rem;
}

.ics-subscription-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.ics-subscription-actions button {
    background: transparent;
    color: var(--text-normal);
    border: none;
    box-shadow: none;
    font-size: 0.8em;
}

.ics-subscription-actions button:hover {
    background: var(--tn-interactive-hover);
}

.ics-subscription-toggle.enabled {
    color: var(--text-success);
    border-color: var(--text-success);
}

.ics-subscription-toggle.disabled {
    color: var(--text-muted);
    border-color: var(--text-muted);
}

.ics-subscription-delete {
    color: var(--text-error) !important;
    border-color: var(--text-error) !important;
}

.ics-subscription-delete:hover {
    background: var(--text-error) !important;
    color: white !important;
}

/* ICS Subscription Forms */
.ics-add-subscription-form,
.ics-edit-form {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-secondary);
}

.ics-form-row,
.ics-edit-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ics-form-row-multi,
.ics-edit-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.ics-form-group,
.ics-edit-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 120px;
}

.ics-form-label,
.ics-edit-label {
    min-width: 80px;
    font-weight: 500;
    flex-shrink: 0;
}

.ics-form-input,
.ics-edit-input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--background-modifier-border);
    border-radius: 3px;
    background: var(--background-primary);
    color: var(--text-normal);
}

.ics-form-color,
.ics-edit-color {
    width: 40px;
    height: 30px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 3px;
    cursor: var(--cursor);
}

.ics-form-number,
.ics-edit-number {
    width: 80px;
    padding: 0.5rem;
    border: 1px solid var(--background-modifier-border);
    border-radius: 3px;
    background: var(--background-primary);
    color: var(--text-normal);
}

.ics-form-checkbox-label,
.ics-edit-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: var(--cursor);
}

.ics-form-checkbox,
.ics-edit-checkbox {
    margin: 0;
}

.ics-form-button,
.ics-edit-button {
    background: transparent;
    color: var(--text-normal);
    border: none;
    box-shadow: none;
    margin-right: 0.5rem;
}

.ics-form-button:hover,
.ics-edit-button:hover {
    background: var(--tn-interactive-hover);
}

.ics-form-button.mod-cta,
.ics-edit-button.mod-cta {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border: none;
    box-shadow: none;
}

.ics-form-button.mod-cta:hover,
.ics-edit-button.mod-cta:hover {
    background: var(--interactive-accent-hover);
    box-shadow: none;
}

.ics-edit-buttons {
    justify-content: flex-start;
    margin-top: 0.5rem;
}

.ics-subscription-editing {
    background: var(--background-secondary);
    border-color: var(--interactive-accent);
}

.advanced-calendar-view__container {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.advanced-calendar-view__header {
    padding: 0.5rem 1rem;
    background: var(--background-primary);
    flex-shrink: 0;
}

.advanced-calendar-view__main-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.advanced-calendar-view__main-row .filter-bar-container {
    flex: 1;
    min-width: 300px;
}

.advanced-calendar-view__controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.advanced-calendar-view__schedule-tasks-btn {
    padding: 0.4rem 0.8rem;
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: 6px;
    cursor: var(--cursor);
    font-size: 0.85rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.advanced-calendar-view__schedule-tasks-btn:hover {
    background: var(--interactive-accent-hover);
}

.advanced-calendar-view__calendar-container {
    flex: 1;
    overflow: auto;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--tn-radius-md);
    min-height: 0;
}

/* FullCalendar overrides - Minimalist & Clean */
.advanced-calendar-view .fc {
    height: 100%;
    width: 100%;
    font-family: var(--font-interface);
}

/* Ensure calendar table expands to fill container width */
.advanced-calendar-view .fc-view-harness {
    width: 100%;
}

.advanced-calendar-view .fc-scrollgrid {
    width: 100% !important;
}

.advanced-calendar-view .fc-scrollgrid-sync-table {
    width: 100% !important;
}

/* Remove outer borders only */
.advanced-calendar-view .fc-theme-standard .fc-scrollgrid {
    border: none;
}

/* Light dividers for clean look */
.advanced-calendar-view .fc-col-header-cell {
    border-bottom: 1px solid var(--background-modifier-border);
    border-top: 1px solid var(--background-modifier-border);
}

.advanced-calendar-view .fc-daygrid-day {
    border-right: 1px solid var(--background-modifier-border-hover);
    border-bottom: 1px solid var(--background-modifier-border-hover);
}

.advanced-calendar-view .fc-timegrid-slot {
    border-bottom: 1px solid var(--background-modifier-border-hover);
}

.advanced-calendar-view .fc-timegrid-col {
    border-right: 1px solid var(--background-modifier-border-hover);
}

/* Header toolbar styling */
.advanced-calendar-view .fc-header-toolbar {
	flex-wrap: wrap;
    padding: 0;
    border-bottom: 1px solid var(--background-modifier-border);
    background: transparent;
}

/* Calendar title styling - smaller and minimalist */
.advanced-calendar-view .fc-toolbar-title {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-muted);
    margin: 0;
    padding: 0.3rem 0.6rem;
}

.advanced-calendar-view .fc-toolbar-chunk {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.advanced-calendar-view .fc-toolbar.fc-header-toolbar {
    margin-bottom: 0;
}

/* Remove all borders from FullCalendar buttons */
.advanced-calendar-view .fc-button,
.advanced-calendar-view .fc-button-primary,
.advanced-calendar-view .fc-button-secondary,
.advanced-calendar-view .fc-prev-button,
.advanced-calendar-view .fc-next-button,
.advanced-calendar-view .fc-today-button,
.advanced-calendar-view .fc-dayGridMonth-button,
.advanced-calendar-view .fc-timeGridWeek-button,
.advanced-calendar-view .fc-timeGridDay-button,
.advanced-calendar-view .fc-listWeek-button {
    border: none !important;
    box-shadow: none !important;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 400;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* Hover states for all FC buttons */
.advanced-calendar-view .fc-button:hover:not(:disabled),
.advanced-calendar-view .fc-button-primary:hover:not(:disabled),
.advanced-calendar-view .fc-button-secondary:hover:not(:disabled),
.advanced-calendar-view .fc-prev-button:hover:not(:disabled),
.advanced-calendar-view .fc-next-button:hover:not(:disabled) {
    background: var(--tn-interactive-hover);
    color: var(--text-normal);
    border: none !important;
    box-shadow: none !important;
}

.advanced-calendar-view .fc-button-primary:disabled {
    background: transparent;
    color: var(--text-faint);
    opacity: 0.5;
}

/* Active state for FC buttons (currently selected view) */
.advanced-calendar-view .fc-button-active,
.advanced-calendar-view .fc-button.fc-button-active {
    background: var(--interactive-accent) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-on-accent) !important;
}

/* Use consistent button system for today button */
.advanced-calendar-view .fc-today-button {
    background: var(--interactive-accent);
    border: none;
    box-shadow: none;
    color: var(--text-on-accent);
}

.advanced-calendar-view .fc-today-button:hover:not(:disabled) {
    background: var(--interactive-accent-hover);
    box-shadow: none;
}

/* Clean today styling */
.advanced-calendar-view .fc-daygrid-day.fc-day-today {
    background: color-mix(in srgb, var(--interactive-accent) 8%, var(--background-primary)) !important;
    border: 2px solid var(--interactive-accent);
    position: relative;
}

.advanced-calendar-view .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    font-weight: 600;
    color: var(--interactive-accent) !important;
}

/* Fix today styling specifically for multi-month (year) view */
.advanced-calendar-view .fc-multimonth-daygrid .fc-daygrid-day.fc-day-today {
    background: color-mix(in srgb, var(--interactive-accent) 8%, var(--background-primary)) !important;
    border: 2px solid var(--interactive-accent) !important;
}

.advanced-calendar-view .fc-multimonth-daygrid .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    font-weight: 600;
    color: var(--interactive-accent) !important;
}

.advanced-calendar-view .fc-daygrid-day.fc-day-today::before {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background: var(--interactive-accent);
    border-radius: 50%;
    z-index: 1;
}

/* Header cells */
.advanced-calendar-view .fc-col-header-cell {
    background: var(--background-primary) !important;
    color: var(--text-muted) !important;
    font-weight: 400;
    font-size: 0.75rem;
    /* text-transform: lowercase; */
    letter-spacing: 0;
    padding: 0.5rem 0.5rem;
}

/* Day cells - ensure proper theme colors */
.advanced-calendar-view .fc-daygrid-day {
    background: var(--background-primary) !important;
    color: var(--text-normal) !important;
}

/* Multi-month (year view) styling - minimalist */
.advanced-calendar-view .fc-multimonth-daygrid .fc-daygrid-day {
    background: var(--background-primary) !important;
    color: var(--text-normal) !important;
}

/* Multi-month month headers */
.advanced-calendar-view .fc-multimonth-header {
    background: transparent !important;
    color: var(--text-normal) !important;
    border-bottom: 1px solid var(--divider-color);
}

.advanced-calendar-view .fc-multimonth-title {
    background: transparent !important;
    color: var(--text-normal) !important;
    font-weight: 500;
    padding: 0.5rem;
}

/* Multi-month day headers (Mon, Tue, etc.) */
.advanced-calendar-view .fc-multimonth .fc-col-header-cell {
    background: transparent !important;
    color: var(--text-muted) !important;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Day numbers */
.advanced-calendar-view .fc-daygrid-day-number {
    color: var(--text-normal) !important;
    font-weight: 400;
    font-size: 0.9rem;
    padding: 0.5rem;
}

/* List view day headers - minimalist */
.advanced-calendar-view .fc-list-day-cushion {
    background: transparent !important;
    color: var(--text-normal) !important;
    font-weight: 500;
    border-bottom: 1px solid var(--divider-color);
    padding: 0.5rem 0.25rem;
}

.advanced-calendar-view .fc-list-day {
    background: transparent !important;
}

.advanced-calendar-view .fc-list-table th {
    background: var(--background-secondary-alt) !important;
}

/* Clean event styling */
.advanced-calendar-view .fc-event {
    border-radius: 6px;
    border: 1px solid;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    cursor: var(--cursor);
}

.advanced-calendar-view .fc-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.advanced-calendar-view .fc-event-title {
    font-weight: 500;
    line-height: 1.3;
	text-decoration: inherit;
}

/* Time grid specific styles */
.advanced-calendar-view .fc-timegrid-slot {
    height: 3rem;
}

.advanced-calendar-view .fc-timegrid-slot-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 0.5rem;
}

.advanced-calendar-view .fc-timegrid-axis {
    width: 4rem;
}


/* More events link */
.advanced-calendar-view .fc-more-link {
    color: var(--interactive-accent);
    font-size: 0.75rem;
    font-weight: 500;
}

.advanced-calendar-view .fc-more-link:hover {
    color: var(--interactive-accent-hover);
}

/* Current time indicator (red line) */
.advanced-calendar-view .fc-timegrid-now-indicator-line {
    border-color: #ff0000;
    border-width: 1px;
}

.advanced-calendar-view .fc-timegrid-now-indicator-arrow {
    border-color: #ff0000;
}

/* Mobile collapse toggle - hidden by default */
.advanced-calendar-view__mobile-toggle {
    display: none;
    padding: 0.5rem 1rem;
}

.advanced-calendar-view__collapse-btn {
    background: var(--interactive-normal);
    color: var(--text-normal);
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    cursor: var(--cursor);
    transition: all 0.2s ease;
}

.advanced-calendar-view__collapse-btn:hover {
    background: var(--interactive-hover);
}

/* Responsive design */
@media (max-width: 1200px) {
    .advanced-calendar-view__main-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .advanced-calendar-view__main-row .filter-bar-container {
        min-width: unset;
    }
    
    .advanced-calendar-view__controls {
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    /* Show mobile toggle on small screens */
    .advanced-calendar-view__mobile-toggle {
        display: block;
    }
    
    /* Hide main row by default on mobile when collapsed */
    .advanced-calendar-view__main-row.collapsed {
        display: none;
    }
    
    .advanced-calendar-view__main-row.expanded {
        display: flex;
    }
    
    .advanced-calendar-view__controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    
    .advanced-calendar-view__schedule-tasks-btn {
        align-self: center;
    }
    
    .advanced-calendar-view__calendar-container {
        padding: 0.5rem;
    }
    
    /* Reduce header padding on mobile */
    .advanced-calendar-view__header {
        padding: 0.25rem 0.5rem;
    }
}

/* Today highlighting disabled */
.hide-today-highlight .fc-unthemed td.fc-today {
    background: inherit;
}

.hide-today-highlight .fc-daygrid-day.fc-day-today {
    background: inherit !important;
    border: none !important;
}

.hide-today-highlight .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    font-weight: 400;
    color: var(--text-normal);
}

.hide-today-highlight .fc-daygrid-day.fc-day-today::before {
    display: none;
}

.hide-today-highlight .fc-timegrid-col.fc-day-today {
    background: inherit !important;
    border: none !important;
}

/* ICS Refresh Button - Match exact styling of other FullCalendar buttons */
.advanced-calendar-view .fc-refreshICS-button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    padding: 0.3rem 0.6rem !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.advanced-calendar-view .fc-refreshICS-button .fc-icon,
.advanced-calendar-view .fc-refreshICS-button .fc-button-label {
    color: var(--text-muted) !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    line-height: 1.2;
    display: inline;
    visibility: visible;
}

/* Hover state - match other buttons exactly */
.advanced-calendar-view .fc-refreshICS-button:hover:not(:disabled) {
    background: var(--tn-interactive-hover) !important;
    color: var(--text-normal) !important;
    border: none !important;
    box-shadow: none !important;
}

.advanced-calendar-view .fc-refreshICS-button:hover:not(:disabled) .fc-icon,
.advanced-calendar-view .fc-refreshICS-button:hover:not(:disabled) .fc-button-label {
    color: var(--text-normal) !important;
}

/* Active/Focus state - match other buttons */
.advanced-calendar-view .fc-refreshICS-button:active,
.advanced-calendar-view .fc-refreshICS-button:focus {
    background: var(--tn-interactive-hover) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--text-normal) !important;
}

/* Disabled state - match other buttons */
.advanced-calendar-view .fc-refreshICS-button:disabled {
    background: transparent !important;
    color: var(--text-faint) !important;
    opacity: 0.5 !important;
    border: none !important;
    box-shadow: none !important;
}

/* ===== CLEAN LIST VIEW STYLING - NO INHERITANCE ===== */

/* Base styling for ALL list events - completely independent from calendar views */
.fc-list-event {
    /* Reset any inherited styling from calendar views */
    opacity: 1 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Consistent light hover background for ALL list events */
.fc-list-event:hover {
    background-color: var(--background-modifier-hover) !important;
}

/* Fix time element color on hover in list view */
.fc-list-event:hover .fc-list-event-time {
    color: inherit !important;
    background-color: transparent !important;
}

.fc-list-event .fc-list-event-time {
    /* Consistent time styling for all events */
    font-size: inherit !important;
    color: inherit !important;
    font-weight: inherit !important;
    vertical-align: top;
}

.fc-list-event .fc-list-event-title {
    /* Base title styling - clean and consistent */
    padding: 8px 12px;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    display: table-cell;
    vertical-align: top;
}


.fc-list-event .fc-list-event-dot {
    /* Standard dot styling for all events */
    border: inherit !important;
    background: inherit !important;
}

/* ===== TASK-SPECIFIC ENHANCEMENTS ===== */

/* Task events get ONLY functional enhancements - NO visual styling differences */
.fc-list-event.fc-list-task-card .fc-list-event-title {
    /* Keep base styling identical to ICS events - no background, borders, or shadows */
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Remove task-specific hover - now handled by base .fc-list-event:hover */

/* Hide default FullCalendar dot for tasks since we have custom indicators */
.fc-list-event.fc-list-task-card .fc-list-event-dot {
    display: none;
}

/* Style the status dot in graphic column */
.fc-list-event-status-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

/* Prevent graphic column from getting hover background */
.fc-list-event:hover .fc-list-event-graphic {
    background-color: transparent !important;
}

/* Task title row with indicators on same line */
.fc-list-task-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-bottom: 4px;
}

/* Metadata spacing without separators */
.fc-list-task-metadata > span {
    display: block;
    margin: 2px 0;
}

/* Status and priority dots */
.fc-list-task-status-dot,
.fc-list-task-priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid currentColor;
    background-color: transparent;
    flex-shrink: 0;
}

.fc-list-task-priority-dot {
    cursor: var(--cursor);
}

.fc-list-task-priority-dot {
    background-color: var(--priority-color, currentColor);
}

/* Recurring indicator styling */
.fc-list-task-recurring-indicator {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.7;
    cursor: var(--cursor);
}

.fc-list-task-recurring-indicator:hover {
    opacity: 1;
}

.fc-list-task-status-dot {
    border-color: var(--current-status-color, var(--text-muted));
}

/* Recurring indicator */
.fc-list-task-recurring-indicator {
    font-size: 12px;
    opacity: 0.8;
    flex-shrink: 0;
}

/* Task title */
.fc-list-task-title {
    font-weight: 500 !important;
    color: var(--text-normal) !important;
    font-size: 14px !important;
    flex-grow: 1;
}

/* Task metadata */
.fc-list-task-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.fc-list-task-metadata > span {
    background-color: var(--background-secondary);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
}

.fc-list-task-projects {
    background-color: rgba(var(--color-blue-rgb, 13 110 253), 0.1) !important;
    color: var(--color-blue) !important;
}

.fc-list-task-contexts {
    background-color: rgba(var(--color-green-rgb, 25 135 84), 0.1) !important;
    color: var(--color-green) !important;
}

.fc-list-task-tags {
    background-color: rgba(var(--color-purple-rgb, 102 16 242), 0.1) !important;
    color: var(--color-purple) !important;
}

.fc-list-task-time-estimate {
    background-color: rgba(var(--color-orange-rgb, 255 159 67), 0.1) !important;
    color: var(--color-orange) !important;
}

.fc-list-task-metadata-separator {
    color: var(--text-faint);
    font-weight: 300;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .fc-list-task-metadata {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .fc-list-task-title-row {
        gap: 4px;
    }
}

/* Animation for newly added events */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fc-list-event.fc-list-task-card[data-newly-added] {
    animation: slideInUp 0.3s ease-out;
}

/* Dark mode fixes for FullCalendar popover ("+more" popup) */
.theme-dark .advanced-calendar-view .fc-popover {
    background: var(--background-primary) !important;
    border: 1px solid var(--background-modifier-border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.theme-dark .advanced-calendar-view .fc-popover-header {
    background: var(--background-secondary) !important;
    border-bottom: 1px solid var(--background-modifier-border) !important;
}

.theme-dark .advanced-calendar-view .fc-popover-title {
    color: var(--text-normal) !important;
}

.theme-dark .advanced-calendar-view .fc-popover-close {
    color: var(--text-muted) !important;
}

.theme-dark .advanced-calendar-view .fc-popover-close:hover {
    color: var(--text-normal) !important;
    background: var(--background-modifier-hover) !important;
}

.theme-dark .advanced-calendar-view .fc-popover-body {
    background: var(--background-primary) !important;
    color: var(--text-normal) !important;
}

/* Dark mode fixes for timeGrid more link (eventMaxStack) */
.advanced-calendar-view .fc-timegrid-more-link {
    color: var(--text-normal);
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    margin-top: 2px;
}

.advanced-calendar-view .fc-timegrid-more-link:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.theme-dark .advanced-calendar-view .fc-timegrid-more-link {
    background: var(--background-secondary);
    color: var(--text-normal);
    border-color: var(--background-modifier-border);
}

.theme-dark .advanced-calendar-view .fc-timegrid-more-link:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}


/* ===== KANBAN-VIEW.CSS ===== */
/* ================================================
   KANBAN VIEW - BEM STRUCTURE
   ================================================ */

/* Kanban View Container - Root Block */
.tasknotes-plugin .kanban-view {
    padding: var(--tn-spacing-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    gap: var(--tn-spacing-sm);
    max-width: 100%;
}

/* Kanban Header */
.tasknotes-plugin .kanban-view__header {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-md);
    padding-bottom: var(--tn-spacing-md);
    border-bottom: 1px solid var(--tn-border-color);
    flex-shrink: 0;
}

.tasknotes-plugin .kanban-view__filter-container {
    margin-bottom: var(--tn-spacing-sm);
}

.tasknotes-plugin .kanban-view__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tn-spacing-md);
    flex-wrap: wrap;
}

.tasknotes-plugin .kanban-view__actions-left {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .kanban-view__actions-right {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
}

/* Use consistent button system with primary accent background preserved */
.tasknotes-plugin .kanban-view__new-task-button {
    background: var(--tn-interactive-accent);
    color: var(--text-on-accent);
    border: none;
    box-shadow: none;
    white-space: nowrap;
}

.tasknotes-plugin .kanban-view__new-task-button:hover {
    background: var(--tn-interactive-accent-hover);
    box-shadow: none;
}

.tasknotes-plugin .kanban-view__new-task-button:active {
    opacity: 0.8;
}

/* Stats Container */
.tasknotes-plugin .kanban-view__stats {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-muted);
    font-weight: 400;
}

.tasknotes-plugin .kanban-view__stats-simple {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    font-weight: 400;
}

/* Board Container */
.tasknotes-plugin .kanban-view__board-container {
    flex: 1;
    overflow: hidden;
    background: var(--tn-bg-secondary);
    border-radius: var(--tn-radius-md);
    min-height: 0;
}

/* Board */
.tasknotes-plugin .kanban-view__board {
    display: flex;
    height: 100%;
    overflow-x: auto;
    padding: var(--tn-spacing-md);
    gap: var(--tn-spacing-md);
    min-height: 0;
    flex-wrap: nowrap;
}

/* Board Scrollbar */
.tasknotes-plugin .kanban-view__board::-webkit-scrollbar {
    height: 8px;
}

.tasknotes-plugin .kanban-view__board::-webkit-scrollbar-track {
    background: var(--tn-bg-secondary);
}

.tasknotes-plugin .kanban-view__board::-webkit-scrollbar-thumb {
    background: var(--tn-border-color);
    border-radius: 4px;
}

.tasknotes-plugin .kanban-view__board::-webkit-scrollbar-thumb:hover {
    background: var(--tn-text-muted);
}

/* Loading Indicator */
.tasknotes-plugin .kanban-view__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tn-spacing-sm);
    padding: var(--tn-spacing-lg);
    color: var(--tn-text-muted);
    font-size: var(--tn-font-size-md);
    font-style: italic;
    font-weight: 400;
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-md);
    margin: var(--tn-spacing-md);
}

.tasknotes-plugin .kanban-view__loading::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, var(--tn-text-muted) 0.3, transparent);
    border-top: 2px solid var(--tn-text-muted);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

/* Error State */
.tasknotes-plugin .kanban-view__error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tn-spacing-lg);
    color: var(--tn-color-error);
    background: color-mix(in srgb, var(--tn-color-error) 0.05, var(--tn-bg-secondary));
    border: 1px solid color-mix(in srgb, var(--tn-color-error) 0.3, transparent);
    border-radius: var(--tn-radius-md);
    font-size: var(--tn-font-size-md);
    font-weight: var(--tn-font-weight-medium);
    margin: var(--tn-spacing-md);
}

/* ================================================
   KANBAN COLUMNS
   ================================================ */

/* Column */
.tasknotes-plugin .kanban-view__column {
    min-width: 200px;
    max-width: 500px;
    flex-shrink: 0;
    background: var(--tn-bg-primary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-md);
    display: flex;
    flex-direction: column;
    height: fit-content;
    max-height: calc(100vh - 200px);
    transition: all var(--tn-transition-fast);
}

.tasknotes-plugin .kanban-view__column--dragover {
    border-color: var(--tn-interactive-accent);
    transform: scale(1.02);
    box-shadow: var(--tn-shadow-medium);
}

/* Column header dragover state (for column reordering) */
.tasknotes-plugin .kanban-view__column-header--dragover {
    background: var(--tn-interactive-hover);
    border: 2px solid var(--tn-interactive-accent);
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tasknotes-plugin .kanban-view__column--uncategorized {
    opacity: 0.8;
    border: 1px dashed var(--tn-text-muted);
}

.tasknotes-plugin .kanban-view__column--uncategorized .kanban-view__column-header {
    background: var(--tn-border-color);
}

.tasknotes-plugin .kanban-view__column--column-drop-target {
    background: var(--tn-interactive-hover);
    border: 2px dashed var(--tn-interactive-accent);
    transform: scale(1.02);
    transition: all var(--tn-transition-medium);
    box-shadow: var(--tn-shadow-medium);
    position: relative;
}

.tasknotes-plugin .kanban-view__column--column-drop-target .kanban-view__column-header {
    background: transparent;
    border: none;
}

.tasknotes-plugin .kanban-view__column--column-drop-target::before {
    content: "Drop here to reorder column";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--tn-interactive-accent);
    color: var(--tn-text-on-accent);
    padding: var(--tn-spacing-xs) var(--tn-spacing-md);
    border-radius: var(--tn-radius-sm);
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
    z-index: 1000;
    pointer-events: none;
    white-space: nowrap;
}

/* Column Header */
.tasknotes-plugin .kanban-view__column-header {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    border-bottom: 1px solid var(--tn-border-color);
    background: var(--tn-bg-secondary);
    border-radius: var(--tn-radius-md) var(--tn-radius-md) 0 0;
    cursor: grab;
    user-select: none;
    transition: all var(--tn-transition-fast);
}

.tasknotes-plugin .kanban-view__column-header:active {
    cursor: grabbing;
}

.tasknotes-plugin .kanban-view__column-header--dragging {
    opacity: 0.5;
    transform: rotate(2deg);
    box-shadow: var(--tn-shadow-medium);
}

/* Drag Handle */
.tasknotes-plugin .kanban-view__drag-handle {
    color: var(--tn-text-muted);
    cursor: grab;
    font-size: var(--tn-font-size-sm);
    opacity: 0.5;
    transition: opacity var(--tn-transition-fast);
    flex-shrink: 0;
}

.tasknotes-plugin .kanban-view__column-header:hover .kanban-view__drag-handle,
.tasknotes-plugin .kanban-view__column-header-cell:hover .kanban-view__drag-handle {
    opacity: 1;
}

.tasknotes-plugin .kanban-view__drag-handle:active {
    cursor: grabbing;
}

.tasknotes-plugin .kanban-view__column-title {
    font-weight: var(--tn-font-weight-semibold);
    font-size: var(--tn-font-size-lg);
    color: var(--tn-text-normal);
    line-height: 1.2;
    margin: 0;
}

.tasknotes-plugin .kanban-view__column-count {
    color: var(--tn-text-muted);
    font-size: var(--tn-font-size-xs);
    line-height: 1.2;
    font-weight: 400;
    margin: 0;
}

/* Column Body */
.tasknotes-plugin .kanban-view__column-body {
    padding: var(--tn-spacing-sm);
    min-height: 100px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xs);
}

.tasknotes-plugin .kanban-view__column-body--dragover {
    background: var(--tn-interactive-hover);
    position: relative;
}

.tasknotes-plugin .kanban-view__column-body--dragover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--tn-interactive-accent) 0.1, transparent);
    border: 2px dashed var(--tn-interactive-accent);
    border-radius: var(--tn-radius-md);
    pointer-events: none;
}

/* Column Body Scrollbar */
.tasknotes-plugin .kanban-view__column-body::-webkit-scrollbar {
    width: 6px;
}

.tasknotes-plugin .kanban-view__column-body::-webkit-scrollbar-track {
    background: var(--tn-bg-secondary);
    border-radius: 3px;
}

.tasknotes-plugin .kanban-view__column-body::-webkit-scrollbar-thumb {
    background: var(--tn-border-color);
    border-radius: 3px;
}

.tasknotes-plugin .kanban-view__column-body::-webkit-scrollbar-thumb:hover {
    background: var(--tn-text-muted);
}

/* Empty Column */
.tasknotes-plugin .kanban-view__column-empty {
    text-align: center;
    color: var(--tn-text-muted);
    font-style: italic;
    font-size: var(--tn-font-size-sm);
    padding: var(--tn-spacing-lg);
    border: 2px dashed var(--tn-border-color);
    border-radius: var(--tn-radius-md);
    background: var(--tn-bg-secondary);
    transition: all var(--tn-transition-fast);
    margin: var(--tn-spacing-xs);
}

.tasknotes-plugin .kanban-view__column-empty:hover {
    border-color: var(--tn-interactive-accent);
    background: var(--tn-interactive-hover);
}

.tasknotes-plugin .kanban-view__column--dragover .kanban-view__column-empty {
    border-color: var(--tn-interactive-accent);
    background: var(--tn-interactive-accent-hover);
    color: var(--tn-text-on-accent);
}

/* ================================================
   KANBAN TASK CARDS
   ================================================ */

/* Cards container (used for non-virtualized columns) */
.tasknotes-plugin .kanban-view__cards {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xs);
    overflow-y: auto; /* Allow vertical scrolling */
    flex: 1; /* Fill available space in column */
    min-height: 0; /* Allow container to shrink and enable scrolling */
}

/* Dragging state for card wrappers */
.tasknotes-plugin .kanban-view__card-wrapper[draggable="true"]:hover {
    cursor: grab;
}

.tasknotes-plugin .kanban-view__card-wrapper[draggable="true"]:active {
    cursor: grabbing;
}

/* ================================================
   RESPONSIVE DESIGN
   ================================================ */

@media (max-width: 768px) {
    .tasknotes-plugin .kanban-view {
        padding: var(--tn-spacing-xs);
        gap: var(--tn-spacing-xs);
    }
    
    .tasknotes-plugin .kanban-view__header {
        padding-bottom: var(--tn-spacing-sm);
        gap: var(--tn-spacing-sm);
    }
    
    .tasknotes-plugin .kanban-view__actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--tn-spacing-sm);
    }
    
    .tasknotes-plugin .kanban-view__actions-left,
    .tasknotes-plugin .kanban-view__actions-right {
        justify-content: center;
        width: 100%;
    }
    
    .tasknotes-plugin .kanban-view__new-task-button {
        width: 100%;
        max-width: 300px;
    }
    
    .tasknotes-plugin .kanban-view__board {
        padding: var(--tn-spacing-sm);
        gap: var(--tn-spacing-sm);
    }
    
}

@media (max-width: 480px) {
    .tasknotes-plugin .kanban-view {
        padding: var(--tn-spacing-xs);
    }

    .tasknotes-plugin .kanban-view__board {
        padding: var(--tn-spacing-xs);
        gap: var(--tn-spacing-xs);
    }
    
    .tasknotes-plugin .kanban-view__column-header {
        padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    }
    
    .tasknotes-plugin .kanban-view__column-body {
        padding: var(--tn-spacing-xs);
    }
    
    .tasknotes-plugin .kanban-view__new-task-button {
        font-size: var(--tn-font-size-xs);
        padding: 0 var(--tn-spacing-md);
    }
}

/* ===== AGENDA-VIEW.CSS ===== */
/* ================================================
   AGENDA VIEW - BEM STRUCTURE
   ================================================ */

/* Agenda View Container - Root Block */
.tasknotes-plugin .agenda-view {
    padding: var(--tn-spacing-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    gap: var(--tn-spacing-sm);
    max-width: 100%;
}

/* Agenda View Controls */
.tasknotes-plugin .agenda-view__controls {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-md);
    margin-bottom: var(--tn-spacing-md);
}

/* Header Section */
.tasknotes-plugin .agenda-view__header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tn-spacing-lg) var(--tn-spacing-md);
    margin-bottom: var(--tn-spacing-lg);
    position: relative;
    background: transparent;
}

.tasknotes-plugin .agenda-view__header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.tasknotes-plugin .agenda-view__nav-section {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
}

.tasknotes-plugin .agenda-view__title-section {
    flex: 1;
    display: flex;
    justify-content: center;
    margin: 0 var(--tn-spacing-lg);
}

.tasknotes-plugin .agenda-view__actions-section {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .agenda-view__period-title {
    font-size: var(--tn-font-size-xl);
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.tasknotes-plugin .agenda-view__nav-button {
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: var(--tn-font-weight-medium);
}

.tasknotes-plugin .agenda-view__nav-button:active {
    opacity: 0.8;
}

/* Filter Bar Container */
.tasknotes-plugin .agenda-view__filter-container {
    margin-bottom: var(--tn-spacing-md);
}

/* Settings Section */
.tasknotes-plugin .agenda-view__settings {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tn-spacing-md);
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-md);
    gap: var(--tn-spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--tn-spacing-md);
    box-shadow: var(--tn-shadow-light);
}

.tasknotes-plugin .agenda-view__settings-left {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .agenda-view__settings-right {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-md);
}

/* Period Selector */
.tasknotes-plugin .agenda-view__period-select {
    appearance: none;
    padding: var(--tn-spacing-sm) var(--tn-spacing-xl) var(--tn-spacing-sm) var(--tn-spacing-md);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    background: var(--tn-bg-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--tn-spacing-sm) center;
    background-repeat: no-repeat;
    background-size: 16px;
    color: var(--tn-text-normal);
    font-family: inherit;
    font-size: var(--tn-font-size-md);
    font-weight: 400;
    min-width: 120px;
    min-height: var(--tn-input-height-md);
    cursor: var(--cursor);
    transition: all var(--tn-transition-fast);
}

.tasknotes-plugin .agenda-view__period-select:hover {
    border-color: var(--tn-border-color-hover);
    background-color: var(--tn-interactive-hover);
}

.tasknotes-plugin .agenda-view__period-select:focus {
    outline: none;
    border-color: var(--tn-interactive-accent);
    background-color: color-mix(in srgb, var(--tn-interactive-accent) 0.1, var(--tn-bg-primary));
}

/* Today Button */
.tasknotes-plugin .agenda-view__today-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tn-spacing-xs);
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    border: none;
    border-radius: var(--tn-radius-md);
    background: transparent;
    color: var(--tn-text-muted);
    font-family: inherit;
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
    line-height: 1.25;
    height: var(--tn-button-height-md);
    cursor: var(--cursor);
    user-select: none;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--tn-transition-fast);
    overflow: hidden;
    box-shadow: none;
}

.tasknotes-plugin .agenda-view__today-button:hover {
    background: var(--tn-interactive-hover);
    color: var(--tn-text-normal);
}

.tasknotes-plugin .agenda-view__today-button:focus-visible {
    outline: 2px solid var(--tn-interactive-accent);
    outline-offset: 2px;
}

.tasknotes-plugin .agenda-view__today-button:active {
    background: var(--tn-interactive-active);
    transform: translateY(1px);
}

/* Toggle Controls */
.tasknotes-plugin .agenda-view__toggle {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
    cursor: var(--cursor);
    user-select: none;
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-normal);
    padding: var(--tn-spacing-sm);
    border-radius: var(--tn-radius-sm);
    transition: background-color var(--tn-transition-fast);
}

.tasknotes-plugin .agenda-view__toggle:hover {
    background: var(--tn-interactive-hover);
}


/* Content Area */
.tasknotes-plugin .agenda-view__content {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-sm);
    flex: 1;
    min-height: 0;
}

/* Loading Indicator */
.tasknotes-plugin .agenda-view__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tn-spacing-sm);
    padding: var(--tn-spacing-lg);
    color: var(--tn-text-muted);
    font-size: var(--tn-font-size-md);
    font-style: italic;
    font-weight: 400;
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-md);
    margin-bottom: var(--tn-spacing-md);
    box-shadow: var(--tn-shadow-light);
}

.tasknotes-plugin .agenda-view__loading::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, var(--tn-text-muted) 0.3, transparent);
    border-top: 2px solid var(--tn-text-muted);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

/* Day Section */
.tasknotes-plugin .agenda-view__day {
    margin-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .agenda-view__day-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--tn-spacing-sm);
    padding: var(--tn-spacing-md) 0 var(--tn-spacing-sm);
    margin-bottom: var(--tn-spacing-sm);
    border-bottom: 1px solid var(--tn-border-color);
    position: relative;
    cursor: var(--cursor);
}

/* Day section container (like task groups) */
.tasknotes-plugin .agenda-view__day-section {
    margin-bottom: var(--tn-spacing-md);
}

/* Day items container */
.tasknotes-plugin .agenda-view__day-items {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xs);
}

/* Collapsed state */
.tasknotes-plugin .agenda-view__day-section.is-collapsed .agenda-view__day-items {
    display: none;
}

/* Chevron/toggle styles for agenda day headers (consistent with TaskList view) */
.tasknotes-plugin .agenda-view__day-header .task-group-toggle {
    display: contents;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: var(--tn-spacing-xs);
    border: none;
    background: transparent;
    color: var(--tn-text-normal);
    font-size: 14px;
    line-height: 1;
}

.tasknotes-plugin .agenda-view__day-header .task-group-toggle svg,
.tasknotes-plugin .agenda-view__day-header .task-group-toggle .chevron,
.tasknotes-plugin .agenda-view__day-header .task-group-toggle .chevron path {
    color: var(--tn-text-normal);
}

.tasknotes-plugin .agenda-view__day-header .task-group-toggle svg,
.tasknotes-plugin .agenda-view__day-header .task-group-toggle .chevron path {
    stroke: currentColor;
}

.tasknotes-plugin .agenda-view__day-header .task-group-toggle .chevron {
    transition: transform var(--tn-transition-fast);
}

.tasknotes-plugin .agenda-view__day-section .task-group-toggle .chevron,
.tasknotes-plugin .agenda-view__day-section .task-group-toggle svg {
    transform: rotate(90deg);
}

.tasknotes-plugin .agenda-view__day-section.is-collapsed .task-group-toggle svg,
.tasknotes-plugin .agenda-view__day-section.is-collapsed .task-group-toggle .chevron {
    transform: rotate(0deg);
}

.tasknotes-plugin .agenda-view__day-header-text {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .agenda-view__day-name {
    font-size: var(--tn-font-size-lg);
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.tasknotes-plugin .agenda-view__day-name--today {
    background: var(--tn-interactive-accent);
    color: var(--tn-bg-primary);
    padding: var(--tn-spacing-xs) var(--tn-spacing-md);
    border-radius: var(--tn-radius-md);
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    min-height: 28px;
    box-shadow: var(--tn-shadow-light);
}

.tasknotes-plugin .agenda-view__day-date {
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-muted);
    font-weight: 400;
    letter-spacing: 0.01em;
}

.tasknotes-plugin .agenda-view__item-count {
    background: none;
    color: var(--text-muted);
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: var(--tn-font-size-xs);
    font-weight: var(--tn-font-weight-medium);
    line-height: 1.2;
    display: inline-flex;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    text-align: center;
}

/* Day Content */
.tasknotes-plugin .agenda-view__day-content {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xs);
}

.tasknotes-plugin .agenda-view__day-content--flat {
    gap: var(--tn-spacing-xs);
}


/* Empty States */
.tasknotes-plugin .agenda-view__empty {
    padding: var(--tn-spacing-xl) var(--tn-spacing-lg);
    text-align: center;
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-md);
    margin: var(--tn-spacing-lg) 0;
    box-shadow: var(--tn-shadow-light);
}

.tasknotes-plugin .agenda-view__empty-title {
    margin: 0 0 var(--tn-spacing-md) 0;
    color: var(--tn-text-normal);
    font-size: var(--tn-font-size-lg);
    font-weight: var(--tn-font-weight-medium);
    line-height: 1.3;
}

.tasknotes-plugin .agenda-view__empty-description {
    margin: 0 0 var(--tn-spacing-md) 0;
    color: var(--tn-text-muted);
    font-size: var(--tn-font-size-md);
    line-height: 1.5;
    font-weight: 400;
}

.tasknotes-plugin .agenda-view__empty-description:last-child {
    margin-bottom: 0;
}

.tasknotes-plugin .agenda-view__empty-tip {
    font-style: italic;
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-muted);
    margin-top: var(--tn-spacing-sm);
}

.tasknotes-plugin .agenda-view__empty-tip span {
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    font-style: normal;
}

/* Error States */
.tasknotes-plugin .agenda-view__error {
    padding: var(--tn-spacing-lg);
    text-align: center;
    color: var(--tn-color-error);
    background: color-mix(in srgb, var(--tn-color-error) 0.05, var(--tn-bg-secondary));
    border: 1px solid color-mix(in srgb, var(--tn-color-error) 0.3, transparent);
    border-radius: var(--tn-radius-md);
    font-size: var(--tn-font-size-md);
    font-weight: var(--tn-font-weight-medium);
    line-height: 1.5;
    box-shadow: var(--tn-shadow-light);
}


.tasknotes-plugin .agenda-view .tasks-container {
    margin-bottom: var(--tn-spacing-xs);
}

/* Note Date Display in Flat List */
.tasknotes-plugin .agenda-view__note-date {
    display: inline-block;
    margin-left: var(--tn-spacing-sm);
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    background: var(--tn-bg-secondary);
    border-radius: var(--tn-radius-sm);
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-muted);
    font-weight: var(--tn-font-weight-medium);
}

/* Responsive Design */
@media (max-width: 768px) {
    .tasknotes-plugin .agenda-view {
        padding: var(--tn-spacing-xs);
    }
    
    .tasknotes-plugin .agenda-view__header-content {
        flex-direction: column;
        gap: var(--tn-spacing-md);
    }
    
    .tasknotes-plugin .agenda-view__title-section {
        order: -1;
        margin: 0;
    }
    
    .tasknotes-plugin .agenda-view__period-title {
        font-size: var(--tn-font-size-lg);
    }
    
    .tasknotes-plugin .agenda-view__nav-section,
    .tasknotes-plugin .agenda-view__actions-section {
        justify-content: center;
    }
    
    .tasknotes-plugin .agenda-view__nav-button {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }
    
    .tasknotes-plugin .agenda-view__settings {
        flex-direction: column;
        align-items: stretch;
        gap: var(--tn-spacing-sm);
    }
    
    .tasknotes-plugin .agenda-view__settings-left,
    .tasknotes-plugin .agenda-view__settings-right {
        justify-content: space-between;
        width: 100%;
    }
    
    .tasknotes-plugin .agenda-view__settings-right {
        gap: var(--tn-spacing-sm);
    }
    
    .tasknotes-plugin .agenda-view__day-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--tn-spacing-xs);
    }
    
    .tasknotes-plugin .agenda-view__day-header-text {
        width: 100%;
        justify-content: space-between;
    }
    
    .tasknotes-plugin .agenda-view__item-count {
        align-self: flex-end;
    }
}

@media (max-width: 480px) {
    .tasknotes-plugin .agenda-view__header-content {
        gap: var(--tn-spacing-xs);
    }
    
    .tasknotes-plugin .agenda-view__period-title {
        font-size: var(--tn-font-size-md);
        min-width: 120px;
    }
    
    .tasknotes-plugin .agenda-view__nav-button {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
    
    .tasknotes-plugin .agenda-view__settings-left,
    .tasknotes-plugin .agenda-view__settings-right {
        flex-direction: column;
        align-items: stretch;
    }
    
    .tasknotes-plugin .agenda-view__toggle {
        justify-content: space-between;
    }
}

/* ===== POMODORO-VIEW.CSS ===== */
/* ================================================
   POMODORO VIEW - BEM STRUCTURE
   ================================================ */

/* Pomodoro View Container - Root Block */
.tasknotes-plugin .pomodoro-view {
    padding: var(--tn-spacing-xl);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    gap: var(--tn-spacing-xl);
    max-width: 100%;
    align-items: center;
    justify-content: center;
    background: var(--tn-bg-primary);
    min-height: 100vh;

	button {
		cursor: var(--cursor);
	}

}

/* ================================================
   TIMER SECTION - Main Timer Display
   ================================================ */

/* Timer Section Container */
.tasknotes-plugin .pomodoro-view__timer-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--tn-spacing-md);
    padding: var(--tn-spacing-lg) 0;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* Progress Circle Container */
.tasknotes-plugin .pomodoro-view__progress-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

/* Progress SVG */
.tasknotes-plugin .pomodoro-view__progress-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

/* Progress Circle Elements */
.tasknotes-plugin .pomodoro-view__progress-circle {
    transition: stroke-dashoffset 0.5s ease;
    stroke: var(--tn-interactive-accent);
    stroke-width: 6;
    fill: none;
}

.tasknotes-plugin .pomodoro-view__progress-circle--work {
    stroke: var(--tn-status-in-progress-color, var(--tn-interactive-accent));
}

.tasknotes-plugin .pomodoro-view__progress-circle--short-break {
    stroke: var(--tn-priority-medium-color, var(--tn-color-success));
}

.tasknotes-plugin .pomodoro-view__progress-circle--long-break {
    stroke: var(--tn-priority-high-color, var(--tn-interactive-accent));
}

.tasknotes-plugin .pomodoro-view__progress-circle--warning {
    stroke: var(--tn-color-error) !important;
    animation: tn-progress-pulse 1s infinite;
}

@keyframes tn-progress-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Timer Display Overlay */
.tasknotes-plugin .pomodoro-view__timer-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tn-spacing-xs);
    pointer-events: none;
}

/* Timer Display */
.tasknotes-plugin .pomodoro-view__timer-display {
    font-size: 3.5rem;
    color: var(--tn-text-normal);
    text-align: center;
    font-family: var(--tn-font-mono);
    letter-spacing: 0.05em;
    transition: color var(--tn-transition-fast);
    font-weight: var(--tn-font-weight-bold);
    margin-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .pomodoro-view__timer-display--warning {
    color: var(--tn-color-error);
    animation: tn-timer-pulse 2s infinite;
}

@keyframes tn-timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Status Display */
.tasknotes-plugin .pomodoro-view__status {
    font-size: var(--tn-font-size-xl);
    font-weight: var(--tn-font-weight-medium);
    text-align: center;
    color: var(--tn-text-muted);
    text-transform: capitalize;
    margin-bottom: var(--tn-spacing-lg);
    order: -1;
}

.tasknotes-plugin .pomodoro-view__status--work {
    color: var(--tn-status-in-progress-color, var(--tn-interactive-accent));
}

.tasknotes-plugin .pomodoro-view__status--short-break {
    color: var(--tn-priority-medium-color, var(--tn-color-success));
}

.tasknotes-plugin .pomodoro-view__status--long-break {
    color: var(--tn-priority-high-color, var(--tn-interactive-accent));
}

.tasknotes-plugin .pomodoro-view__status--paused {
    color: var(--tn-color-warning);
}

/* ================================================
   TASK DISPLAY SECTION
   ================================================ */

/* Task Display Container */
.tasknotes-plugin .pomodoro-view__task-display {
    min-height: 40px;
    min-width: 200px;
    width: auto;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tn-spacing-sm);
    background: transparent;
    border-radius: var(--tn-radius-sm);
    border: none;
    overflow: hidden;
    max-height: 100px;
    opacity: 1;
    transform: translateY(0);
    transition: all var(--tn-transition-medium);
}

/* Hide task display when empty with slide animation */
.tasknotes-plugin .pomodoro-view__task-display:empty {
    max-height: 0;
    opacity: 0;
    transform: translateY(-20px);
    margin: 0 auto;
    padding: 0 var(--tn-spacing-md);
    min-height: 0;
}

.tasknotes-plugin .pomodoro-view__task-display--no-task {
    max-height: 0;
    opacity: 0;
    transform: translateY(-20px);
    margin: 0 auto;
    padding: 0 var(--tn-spacing-md);
    min-height: 0;
}

/* Current Task Content */
.tasknotes-plugin .pomodoro-view__current-task {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tn-spacing-xs);
    text-align: center;
}

.tasknotes-plugin .pomodoro-view__task-title {
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-muted);
    font-weight: var(--tn-font-weight-medium);
    max-width: 400px;
    word-wrap: break-word;
    text-align: center;
}

/* ================================================
   TASK SELECTOR SECTION
   ================================================ */

/* Task Selector Container */
.tasknotes-plugin .pomodoro-view__task-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tn-spacing-md);
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* Task Buttons Container */
.tasknotes-plugin .pomodoro-view__task-buttons {
    display: flex;
    gap: var(--tn-spacing-sm);
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
}

/* Use consistent button system for task select button */
.tasknotes-plugin .pomodoro-view__task-select-button {
    background: transparent;
    color: var(--tn-text-normal);
    border: none;
    box-shadow: none;
    flex: 1;
    white-space: nowrap;
}

.tasknotes-plugin .pomodoro-view__task-select-button:hover {
    background: var(--tn-interactive-hover);
    border: none;
    box-shadow: none;
}

.tasknotes-plugin .pomodoro-view__task-select-button--no-task {
    color: var(--tn-text-muted);
    font-style: italic;
}

/* Use consistent button system for task clear button */
.tasknotes-plugin .pomodoro-view__task-clear-button {
    background: transparent;
    color: var(--tn-text-normal);
    border: none;
    box-shadow: none;
    flex: 1;
    white-space: nowrap;
}

.tasknotes-plugin .pomodoro-view__task-clear-button:hover {
    background: var(--tn-interactive-hover);
    border: none;
    box-shadow: none;
}

.tasknotes-plugin .pomodoro-view__task-clear-button--hidden {
    display: none;
}

/* Task Card Container */
.tasknotes-plugin .pomodoro-view__task-card-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.tasknotes-plugin .pomodoro-view__task-card-container--empty {
    display: none;
}

/* Task card styling within pomodoro view */
.tasknotes-plugin .pomodoro-view__task-card-container .task-card {
    margin: 0;
    border-radius: var(--tn-radius-lg);
    box-shadow: none;
    transition: none;
}

.tasknotes-plugin .pomodoro-view__task-card-container .task-card:hover {
    /* No hover effects - keep task card static */
}


/* ================================================
   CONTROL SECTION - Main Controls Container
   ================================================ */

/* Control Section Container */
.tasknotes-plugin .pomodoro-view__control-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--tn-spacing-md);
    padding: var(--tn-spacing-md);
    border: none;
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
}

/* Primary Controls Container */
.tasknotes-plugin .pomodoro-view__primary-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--tn-spacing-md);
    padding: var(--tn-spacing-sm) 0;
    min-height: var(--tn-button-height-lg);
    width: 100%;
    flex-wrap: wrap;
}

/* Primary Control Buttons */
/* Use consistent button system with primary accent background preserved */
.tasknotes-plugin .pomodoro-view__start-button {
    background: var(--tn-interactive-accent);
    color: var(--text-on-accent);
    border: none;
    box-shadow: none;
    min-width: 200px;
}

.tasknotes-plugin .pomodoro-view__start-button:hover {
    background: var(--tn-interactive-accent-hover);
    box-shadow: none;
}

/* Remove all borders and shadows from other pomodoro buttons */
.tasknotes-plugin .pomodoro-view__pause-button,
.tasknotes-plugin .pomodoro-view__stop-button,
.tasknotes-plugin .pomodoro-view__skip-break-button,
.tasknotes-plugin .pomodoro-view__time-adjust-button {
    border: none;
    box-shadow: none;
}

.tasknotes-plugin .pomodoro-view__pause-button:hover,
.tasknotes-plugin .pomodoro-view__stop-button:hover,
.tasknotes-plugin .pomodoro-view__skip-break-button:hover,
.tasknotes-plugin .pomodoro-view__time-adjust-button:hover {
    box-shadow: none;
}

.tasknotes-plugin .pomodoro-view__pause-button {
    min-width: 200px;
}

.tasknotes-plugin .pomodoro-view__stop-button {
    min-width: 120px;
}

/* Skip Break Button */
.tasknotes-plugin .pomodoro-view__skip-break-button {
    min-width: 120px;
}

/* Time Adjustment Controls */
.tasknotes-plugin .pomodoro-view__time-controls {
    display: flex;
    gap: var(--tn-spacing-md);
    align-items: center;
    justify-content: center;
    margin-top: var(--tn-spacing-sm);
    pointer-events: auto; /* Re-enable pointer events for the buttons */
}

/* Use consistent button system for time adjust buttons */
.tasknotes-plugin .pomodoro-view__time-adjust-button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    color: var(--tn-text-normal);
    border: none;
    box-shadow: none;
}

.tasknotes-plugin .pomodoro-view__time-adjust-button:hover {
    background: var(--tn-interactive-hover);
    border: none;
    box-shadow: none;
}

.tasknotes-plugin .pomodoro-view__time-adjust-button:focus {
    outline: none;
}

/* Button States */
.tasknotes-plugin .pomodoro-view__start-button--loading {
    opacity: 0.7;
    cursor: not-allowed;
}

.tasknotes-plugin .pomodoro-view__start-button--hidden,
.tasknotes-plugin .pomodoro-view__pause-button--hidden,
.tasknotes-plugin .pomodoro-view__stop-button--hidden,
.tasknotes-plugin .pomodoro-view__skip-break-button--hidden,
.tasknotes-plugin .pomodoro-view__time-adjust-button--hidden {
    display: none;
}


/* ================================================
   STATISTICS SECTION
   ================================================ */

/* Statistics Section Container */
.tasknotes-plugin .pomodoro-view__stats-section {
    border: none;
    padding: var(--tn-spacing-md) 0;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Statistics Grid */
.tasknotes-plugin .pomodoro-view__stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--tn-spacing-sm);
}

/* Individual Stat */
.tasknotes-plugin .pomodoro-view__stat {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
    padding: 0;
    background: transparent;
    border: none;
    text-align: center;
}

.tasknotes-plugin .pomodoro-view__stat--clickable {
    cursor: var(--cursor);
    padding: var(--tn-spacing-xs);
    border-radius: var(--tn-radius-sm);
    transition: all var(--tn-transition-fast);
}

.tasknotes-plugin .pomodoro-view__stat--clickable:hover {
    background: var(--tn-interactive-hover);
    border: none;
    box-shadow: none;
}

.tasknotes-plugin .pomodoro-view__stat-value {
    font-size: var(--tn-font-size-lg);
    font-weight: var(--tn-font-weight-bold);
    color: var(--tn-interactive-accent);
    margin: 0;
}

.tasknotes-plugin .pomodoro-view__stat-label {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    font-weight: var(--tn-font-weight-medium);
    margin: 0;
}

/* ================================================
   RESPONSIVE DESIGN
   ================================================ */

@media (max-width: 768px) {
    .tasknotes-plugin .pomodoro-view {
        padding: var(--tn-spacing-md);
        gap: var(--tn-spacing-md);
    }
    
    .tasknotes-plugin .pomodoro-view__progress-container {
        width: 250px;
        height: 250px;
    }
    
    .tasknotes-plugin .pomodoro-view__timer-display {
        font-size: 2.5rem;
    }
    
    .tasknotes-plugin .pomodoro-view__control-section {
        gap: var(--tn-spacing-md);
        padding: var(--tn-spacing-md);
        max-width: 100%;
    }
    
    .tasknotes-plugin .pomodoro-view__primary-controls {
        flex-direction: column;
        align-items: center;
        gap: var(--tn-spacing-sm);
    }
    
    .tasknotes-plugin .pomodoro-view__start-button,
    .tasknotes-plugin .pomodoro-view__pause-button,
    .tasknotes-plugin .pomodoro-view__stop-button {
        width: 100%;
        max-width: 250px;
    }
    
    .tasknotes-plugin .pomodoro-view__stats {
        flex-direction: column;
        gap: var(--tn-spacing-xs);
    }
}

@media (max-width: 480px) {
    .tasknotes-plugin .pomodoro-view__progress-container {
        width: 200px;
        height: 200px;
    }
    
    .tasknotes-plugin .pomodoro-view__timer-display {
        font-size: 2rem;
    }
}

/* ================================================
   ACCESSIBILITY & REDUCED MOTION
   ================================================ */

@media (prefers-reduced-motion: reduce) {
    .tasknotes-plugin .pomodoro-view__progress-circle,
    .tasknotes-plugin .pomodoro-view__timer-display,
    .tasknotes-plugin .pomodoro-view__task-display {
        transition: none;
    }
    
    .tasknotes-plugin .pomodoro-view__progress-circle--warning,
    .tasknotes-plugin .pomodoro-view__timer-display--warning {
        animation: none;
    }
}

/* Focus indicators for keyboard navigation */
.tasknotes-plugin .pomodoro-view__start-button:focus,
.tasknotes-plugin .pomodoro-view__pause-button:focus,
.tasknotes-plugin .pomodoro-view__stop-button:focus,
.tasknotes-plugin .pomodoro-view__skip-break-button:focus {
    outline: 2px solid var(--tn-interactive-accent);
    outline-offset: 2px;
}

/* Time adjust buttons have their own focus styling above */

/* ================================================
   RESPONSIVE DESIGN - Mobile & Narrow Panes
   ================================================ */

/* Extra responsive breakpoints for very granular control */
.tasknotes-plugin .pomodoro-view--tiny {
    padding: var(--tn-spacing-sm);
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .pomodoro-view.pomodoro-view--tiny .pomodoro-view__timer-overlay .pomodoro-view__timer-display {
    font-size: 2rem !important;
    font-weight: 700 !important;
}

.tasknotes-plugin .pomodoro-view--extra-narrow {
    padding: var(--tn-spacing-md);
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .pomodoro-view.pomodoro-view--extra-narrow .pomodoro-view__timer-overlay .pomodoro-view__timer-display {
    font-size: 2.2rem !important;
    font-weight: 650 !important;
}

/* Very narrow view (≤ 300px) - Minimal layout */
.tasknotes-plugin .pomodoro-view--very-narrow {
    padding: var(--tn-spacing-md);
    gap: var(--tn-spacing-md);
}

.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__status {
    font-size: var(--tn-font-size-sm);
    margin-bottom: var(--tn-spacing-xs);
}

.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__timer-section {
    padding: var(--tn-spacing-sm) 0;
}

.tasknotes-plugin .pomodoro-view.pomodoro-view--very-narrow .pomodoro-view__timer-overlay .pomodoro-view__timer-display {
    font-size: 2.5rem !important;
    font-weight: 600 !important;
}

.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__time-controls {
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__time-adjust-button {
    width: 32px;
    height: 32px;
    font-size: var(--tn-font-size-lg);
}

.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__task-selector {
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__task-buttons {
    flex-direction: column;
    gap: var(--tn-spacing-xs);
}

.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__task-select-button,
.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__task-clear-button {
    font-size: var(--tn-font-size-sm);
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
}

.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__primary-controls {
    flex-direction: column;
    gap: var(--tn-spacing-xs);
}

.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__start-button,
.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__pause-button,
.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__stop-button {
    width: 100%;
    max-width: 200px;
    font-size: var(--tn-font-size-sm);
    padding: var(--tn-spacing-sm);
}

.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__skip-break-button {
    font-size: var(--tn-font-size-sm);
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
}

.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__stats {
    font-size: var(--tn-font-size-xs);
}

/* Narrow view (≤ 400px) - Compact layout */
.tasknotes-plugin .pomodoro-view--narrow {
    padding: var(--tn-spacing-lg);
    gap: var(--tn-spacing-lg);
}

.tasknotes-plugin .pomodoro-view.pomodoro-view--narrow .pomodoro-view__timer-overlay .pomodoro-view__timer-display {
    font-size: 3rem !important;
    font-weight: 600 !important;
}

.tasknotes-plugin .pomodoro-view--narrow .pomodoro-view__time-controls {
    gap: var(--tn-spacing-md);
}

.tasknotes-plugin .pomodoro-view--narrow .pomodoro-view__time-adjust-button {
    width: 36px;
    height: 36px;
}

.tasknotes-plugin .pomodoro-view--narrow .pomodoro-view__task-buttons {
    flex-direction: column;
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .pomodoro-view--narrow .pomodoro-view__primary-controls {
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .pomodoro-view--narrow .pomodoro-view__start-button,
.tasknotes-plugin .pomodoro-view--narrow .pomodoro-view__pause-button,
.tasknotes-plugin .pomodoro-view--narrow .pomodoro-view__stop-button {
    font-size: var(--tn-font-size-md);
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
}

/* Small view (≤ 400px) - Enhanced compact layout */
.tasknotes-plugin .pomodoro-view--small {
    padding: var(--tn-spacing-lg);
    gap: var(--tn-spacing-md);
}

.tasknotes-plugin .pomodoro-view.pomodoro-view--small .pomodoro-view__timer-overlay .pomodoro-view__timer-display {
    font-size: 3.2rem !important;
    font-weight: 550 !important;
}

.tasknotes-plugin .pomodoro-view--small .pomodoro-view__primary-controls {
    gap: var(--tn-spacing-sm);
}

/* Medium-small view (≤ 500px) - Transitional layout */
.tasknotes-plugin .pomodoro-view--medium-small {
    padding: var(--tn-spacing-lg);
    gap: var(--tn-spacing-lg);
}

.tasknotes-plugin .pomodoro-view.pomodoro-view--medium-small .pomodoro-view__timer-overlay .pomodoro-view__timer-display {
    font-size: 3.6rem !important;
    font-weight: 500 !important;
}

/* Medium view (≤ 600px) - Standard responsive adjustments */
.tasknotes-plugin .pomodoro-view--medium {
    padding: var(--tn-spacing-xl);
    gap: var(--tn-spacing-xl);
}

.tasknotes-plugin .pomodoro-view.pomodoro-view--medium .pomodoro-view__timer-overlay .pomodoro-view__timer-display {
    font-size: 4rem !important;
    font-weight: 500 !important;
}

.tasknotes-plugin .pomodoro-view--medium .pomodoro-view__task-buttons {
    gap: var(--tn-spacing-md);
}

/* Wide view (> 600px) - Enhanced layout */
.tasknotes-plugin .pomodoro-view--wide {
    padding: var(--tn-spacing-xl);
    gap: var(--tn-spacing-xl);
}

.tasknotes-plugin .pomodoro-view.pomodoro-view--wide .pomodoro-view__timer-overlay .pomodoro-view__timer-display {
    font-size: 4.5rem !important;
    font-weight: 400 !important;
}

/* Task card responsiveness */
.tasknotes-plugin .pomodoro-view--very-narrow .task-card,
.tasknotes-plugin .pomodoro-view--narrow .task-card {
    font-size: var(--tn-font-size-sm);
}

.tasknotes-plugin .pomodoro-view--very-narrow .task-card__metadata,
.tasknotes-plugin .pomodoro-view--narrow .task-card__metadata {
    font-size: var(--tn-font-size-xs);
}

/* Hide less essential elements in very narrow views */
.tasknotes-plugin .pomodoro-view--very-narrow .task-card__context-menu {
    display: none;
}

/* Adjust progress circle stroke width for small sizes */
.tasknotes-plugin .pomodoro-view--very-narrow .pomodoro-view__progress-circle {
    stroke-width: 3;
}

.tasknotes-plugin .pomodoro-view--narrow .pomodoro-view__progress-circle {
    stroke-width: 4;
}


/* ===== POMODORO-STATS-VIEW.CSS ===== */
/* ================================================
   POMODORO STATS VIEW - BEM STRUCTURE
   ================================================ */

/* Pomodoro Stats View Container - Root Block */
.tasknotes-plugin .pomodoro-stats-view {
    padding: var(--tn-spacing-lg);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xl);
    height: 100%;
    overflow-y: auto;
}

/* ================================================
   STATS VIEW HEADER
   ================================================ */

/* Stats Header Container */
.tasknotes-plugin .pomodoro-stats-view__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--tn-border-color);
    padding-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .pomodoro-stats-view__title {
    font-size: var(--tn-font-size-xl);
    font-weight: var(--tn-font-weight-semibold);
    color: var(--tn-text-normal);
    margin: 0;
}

.tasknotes-plugin .pomodoro-stats-view__refresh-button {
    background: transparent;
    color: var(--tn-text-normal);
    border: none;
    box-shadow: none;
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
}

.tasknotes-plugin .pomodoro-stats-view__refresh-button:hover {
    background: var(--tn-interactive-hover);
}

/* ================================================
   STATS SECTIONS
   ================================================ */

/* Stats Section Container */
.tasknotes-plugin .pomodoro-stats-view__section {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-md);
}

.tasknotes-plugin .pomodoro-stats-view__section-title {
    font-size: var(--tn-font-size-lg);
    font-weight: var(--tn-font-weight-semibold);
    color: var(--tn-text-normal);
    margin: 0;
    padding-bottom: var(--tn-spacing-xs);
    border-bottom: 1px solid var(--tn-border-color);
}

/* ================================================
   OVERVIEW GRID
   ================================================ */

/* Overview Grid Container - Like TickTick */
.tasknotes-plugin .pomodoro-stats-view__overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--tn-spacing-lg);
}

/* Overview Card - Larger than regular stat cards */
.tasknotes-plugin .pomodoro-stats-view__overview-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--tn-spacing-xl);
    background: var(--tn-bg-secondary);
    border-radius: var(--tn-radius-lg);
    border: 1px solid var(--tn-border-color);
    transition: all var(--tn-transition-fast);
    min-height: 120px;
    justify-content: center;
}

.tasknotes-plugin .pomodoro-stats-view__overview-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tn-shadow-medium);
}

/* Overview Card Elements */
.tasknotes-plugin .pomodoro-stats-view__overview-value {
    font-size: 2.5rem;
    font-weight: var(--tn-font-weight-bold);
    color: var(--tn-interactive-accent);
    margin-bottom: var(--tn-spacing-xs);
    line-height: 1;
}

.tasknotes-plugin .pomodoro-stats-view__overview-label {
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-normal);
    font-weight: var(--tn-font-weight-semibold);
    margin-bottom: var(--tn-spacing-xs);
    line-height: 1.2;
}

.tasknotes-plugin .pomodoro-stats-view__overview-change {
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
    line-height: 1.2;
}

.tasknotes-plugin .pomodoro-stats-view__overview-change.positive {
    color: var(--tn-status-done-color, #10B981);
}

.tasknotes-plugin .pomodoro-stats-view__overview-change.negative {
    color: var(--tn-color-error);
}

/* ================================================
   STATS GRID
   ================================================ */

/* Stats Grid Container */
.tasknotes-plugin .pomodoro-stats-view__stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--tn-spacing-md);
}

/* Individual Stat Card */
.tasknotes-plugin .pomodoro-stats-view__stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--tn-spacing-lg);
    background: var(--tn-bg-secondary);
    border-radius: var(--tn-radius-lg);
    border: 1px solid var(--tn-border-color);
    text-align: center;
    transition: all var(--tn-transition-fast);
}

.tasknotes-plugin .pomodoro-stats-view__stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tn-shadow-medium);
}

/* Stat Card Elements */
.tasknotes-plugin .pomodoro-stats-view__stat-value {
    font-size: 2rem;
    font-weight: var(--tn-font-weight-bold);
    color: var(--tn-interactive-accent);
    margin-bottom: var(--tn-spacing-sm);
    line-height: 1;
}

.tasknotes-plugin .pomodoro-stats-view__stat-label {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    font-weight: var(--tn-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

/* ================================================
   RECENT SESSIONS
   ================================================ */

/* Recent Sessions Container */
.tasknotes-plugin .pomodoro-stats-view__recent-sessions {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-sm);
    max-height: 400px;
    overflow-y: auto;
}

/* No Sessions State */
.tasknotes-plugin .pomodoro-stats-view__no-sessions {
    padding: var(--tn-spacing-xl);
    text-align: center;
    color: var(--tn-text-muted);
    font-style: italic;
    background: var(--tn-bg-secondary);
    border-radius: var(--tn-radius-md);
    border: 1px solid var(--tn-border-color);
}

/* ================================================
   SESSION ITEM
   ================================================ */

/* Session Item Container */
.tasknotes-plugin .pomodoro-stats-view__session-item {
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    gap: var(--tn-spacing-md);
    align-items: center;
    padding: var(--tn-spacing-md);
    background: var(--tn-bg-secondary);
    border-radius: var(--tn-radius-sm);
    border: 1px solid var(--tn-border-color);
    transition: background-color var(--tn-transition-fast);
}

.tasknotes-plugin .pomodoro-stats-view__session-item:hover {
    background: var(--tn-interactive-hover);
}

/* Session Item Elements */
.tasknotes-plugin .pomodoro-stats-view__session-date {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    font-weight: var(--tn-font-weight-medium);
    min-width: 100px;
    font-family: var(--tn-font-mono);
}

.tasknotes-plugin .pomodoro-stats-view__session-duration {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-normal);
    font-weight: var(--tn-font-weight-semibold);
    font-family: var(--tn-font-mono);
    min-width: 60px;
}

/* Session Status Badge */
.tasknotes-plugin .pomodoro-stats-view__session-status {
    font-size: var(--tn-font-size-xs);
    font-weight: var(--tn-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    border-radius: var(--tn-radius-sm);
    min-width: 80px;
    text-align: center;
}

.tasknotes-plugin .pomodoro-stats-view__session-status--completed {
    background: var(--tn-status-done-color, #10B981);
    color: var(--tn-bg-primary);
}

.tasknotes-plugin .pomodoro-stats-view__session-status--interrupted {
    background: var(--tn-color-error);
    color: var(--tn-bg-primary);
}

/* Session Task */
.tasknotes-plugin .pomodoro-stats-view__session-task {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-normal);
    font-weight: var(--tn-font-weight-medium);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ================================================
   RESPONSIVE DESIGN
   ================================================ */

@media (max-width: 768px) {
    .tasknotes-plugin .pomodoro-stats-view {
        padding: var(--tn-spacing-md);
        gap: var(--tn-spacing-md);
    }
    
    .tasknotes-plugin .pomodoro-stats-view__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--tn-spacing-sm);
    }
    
    .tasknotes-plugin .pomodoro-stats-view__refresh-button {
        align-self: flex-end;
    }
    
    .tasknotes-plugin .pomodoro-stats-view__overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tasknotes-plugin .pomodoro-stats-view__stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tasknotes-plugin .pomodoro-stats-view__session-item {
        grid-template-columns: 1fr;
        gap: var(--tn-spacing-sm);
        text-align: center;
    }
    
    .tasknotes-plugin .pomodoro-stats-view__session-date,
    .tasknotes-plugin .pomodoro-stats-view__session-duration,
    .tasknotes-plugin .pomodoro-stats-view__session-task {
        min-width: auto;
        text-align: center;
    }
    
    .tasknotes-plugin .pomodoro-stats-view__session-status {
        justify-self: center;
    }
}

@media (max-width: 480px) {
    .tasknotes-plugin .pomodoro-stats-view {
        padding: var(--tn-spacing-sm);
    }
    
    .tasknotes-plugin .pomodoro-stats-view__overview-grid {
        grid-template-columns: 1fr;
    }
    
    .tasknotes-plugin .pomodoro-stats-view__stats-grid {
        grid-template-columns: 1fr;
    }
    
    .tasknotes-plugin .pomodoro-stats-view__overview-card {
        padding: var(--tn-spacing-lg);
        min-height: 100px;
    }
    
    .tasknotes-plugin .pomodoro-stats-view__overview-value {
        font-size: 2rem;
    }
    
    .tasknotes-plugin .pomodoro-stats-view__stat-card {
        padding: var(--tn-spacing-md);
    }
    
    .tasknotes-plugin .pomodoro-stats-view__stat-value {
        font-size: 1.5rem;
    }
    
    .tasknotes-plugin .pomodoro-stats-view__session-item {
        padding: var(--tn-spacing-sm);
    }
}

/* ================================================
   ACCESSIBILITY & REDUCED MOTION
   ================================================ */

@media (prefers-reduced-motion: reduce) {
    .tasknotes-plugin .pomodoro-stats-view__overview-card,
    .tasknotes-plugin .pomodoro-stats-view__stat-card,
    .tasknotes-plugin .pomodoro-stats-view__session-item,
    .tasknotes-plugin .pomodoro-stats-view__refresh-button {
        transition: none;
    }
    
    .tasknotes-plugin .pomodoro-stats-view__overview-card:hover,
    .tasknotes-plugin .pomodoro-stats-view__stat-card:hover {
        transform: none;
    }
}

/* Focus indicators for keyboard navigation */
.tasknotes-plugin .pomodoro-stats-view__refresh-button:focus {
    outline: 2px solid var(--tn-interactive-accent);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .tasknotes-plugin .pomodoro-stats-view__overview-card,
    .tasknotes-plugin .pomodoro-stats-view__stat-card,
    .tasknotes-plugin .pomodoro-stats-view__session-item {
        border-width: 2px;
    }
    
    .tasknotes-plugin .pomodoro-stats-view__session-status {
        border: 2px solid currentColor;
    }
}

/* ===== STATS-VIEW.CSS ===== */
/* ================================================
   STATISTICS VIEW - BEM STRUCTURE
   ================================================ */

/* Statistics View Container - Root Block */
.tasknotes-plugin .stats-view {
    padding: var(--tn-spacing-lg);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xl);
    height: 100%;
    overflow-y: auto;
}

/* ================================================
   STATS VIEW HEADER
   ================================================ */

/* Stats Header Container */
.tasknotes-plugin .stats-view__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--tn-border-color);
    padding-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .stats-view__title {
    font-size: var(--tn-font-size-xl);
    font-weight: var(--tn-font-weight-semibold);
    color: var(--tn-text-normal);
    margin: 0;
}

.tasknotes-plugin .stats-view__refresh-button {
    background: transparent;
    color: var(--tn-text-normal);
    border: none;
    box-shadow: none;
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
}

.tasknotes-plugin .stats-view__refresh-button:hover {
    background: var(--tn-interactive-hover);
}

/* ================================================
   STATS VIEW SECTIONS
   ================================================ */

/* Section Container */
.tasknotes-plugin .stats-view__section {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-md);
}

.tasknotes-plugin .stats-view__section .setting-item {
    border: none;
    padding: 0;
    margin: 0;
}

.tasknotes-plugin .stats-view__section .setting-item-name {
    font-size: var(--tn-font-size-lg);
    font-weight: var(--tn-font-weight-semibold);
    color: var(--tn-text-normal);
    margin-bottom: var(--tn-spacing-sm);
}

/* ================================================
   OVERVIEW GRID
   ================================================ */

/* Overview Grid Layout */
.tasknotes-plugin .stats-view__overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--tn-spacing-md);
    margin-top: var(--tn-spacing-sm);
}

/* Overview Card */
.tasknotes-plugin .stats-view__overview-card {
    background: var(--tn-background-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-border-radius-md);
    padding: var(--tn-spacing-md);
    text-align: center;
    transition: border-color 0.15s ease-in-out;
}

.tasknotes-plugin .stats-view__overview-card:hover {
    border-color: var(--tn-accent-color);
}

/* Overview Values */
.tasknotes-plugin .stats-view__overview-value {
    font-size: var(--tn-font-size-xxl);
    font-weight: var(--tn-font-weight-bold);
    color: var(--tn-accent-color);
    margin-bottom: var(--tn-spacing-xs);
    line-height: 1.2;
}

.tasknotes-plugin .stats-view__overview-label {
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ================================================
   STATS GRID
   ================================================ */

/* Stats Grid Layout */
.tasknotes-plugin .stats-view__stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--tn-spacing-md);
    margin-top: var(--tn-spacing-sm);
}

/* Stat Card */
.tasknotes-plugin .stats-view__stat-card {
    background: var(--tn-background-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-border-radius-md);
    padding: var(--tn-spacing-md);
    text-align: center;
    transition: all 0.15s ease-in-out;
}

.tasknotes-plugin .stats-view__stat-card:hover {
    border-color: var(--tn-accent-color);
}

/* Stat Values */
.tasknotes-plugin .stats-view__stat-value {
    font-size: var(--tn-font-size-xl);
    font-weight: var(--tn-font-weight-bold);
    color: var(--tn-text-normal);
    margin-bottom: var(--tn-spacing-xs);
    line-height: 1.2;
}

.tasknotes-plugin .stats-view__stat-label {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ================================================
   PROJECT STATS
   ================================================ */

/* Projects Container */
.tasknotes-plugin .stats-view__projects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--tn-spacing-md);
    margin-top: var(--tn-spacing-sm);
}

/* Project Item */
.tasknotes-plugin .stats-view__project-item {
    background: var(--tn-background-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-border-radius-md);
    padding: var(--tn-spacing-md);
    transition: all 0.15s ease-in-out;
}

.tasknotes-plugin .stats-view__project-item:hover {
    border-color: var(--tn-accent-color);
}

/* Project Header */
.tasknotes-plugin .stats-view__project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--tn-spacing-sm);
}

.tasknotes-plugin .stats-view__project-name {
    font-size: var(--tn-font-size-md);
    font-weight: var(--tn-font-weight-semibold);
    color: var(--tn-text-normal);
}

/* Project Content Grid */
.tasknotes-plugin .stats-view__project-content-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--tn-spacing-md);
    align-items: center;
}

/* Progress Circle */
.tasknotes-plugin .stats-view__progress-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tn-spacing-xs);
    padding: var(--tn-spacing-sm);
}

.tasknotes-plugin .stats-view__progress-circle-svg {
    transform: rotate(-90deg);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.tasknotes-plugin .stats-view__progress-circle-bg {
    fill: none;
    stroke: var(--background-modifier-border);
    stroke-width: 4;
    opacity: 0.3;
}

.tasknotes-plugin .stats-view__progress-circle-fg {
    fill: none;
    stroke: var(--interactive-accent);
    stroke-width: 4;
    stroke-linecap: round;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(1.1);
    opacity: 1;
}

/* Hover effect for progress circle */
.tasknotes-plugin .stats-view__project-item:hover .stats-view__progress-circle-fg {
    stroke-width: 5;
    filter: brightness(1.2) saturate(1.1);
}

.tasknotes-plugin .stats-view__progress-circle-text {
    font-size: 14px;
    font-weight: var(--tn-font-weight-bold);
    fill: var(--tn-text-normal);
    transform: rotate(90deg);
    transform-origin: center;
    text-anchor: middle;
    dominant-baseline: central;
}

.tasknotes-plugin .stats-view__progress-label {
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-muted);
    font-weight: var(--tn-font-weight-medium);
    text-align: center;
}

/* Stats Container */
.tasknotes-plugin .stats-view__stats-container {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-sm);
}

/* Project Stats Container */
.tasknotes-plugin .stats-view__project-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tn-spacing-md);
}

/* Individual Project Stat */
.tasknotes-plugin .stats-view__project-stat {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    background: var(--tn-background-primary);
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    border-radius: var(--tn-border-radius-sm);
    border: 1px solid var(--tn-border-color);
    white-space: nowrap;
}

/* ================================================
   NO DATA STATE
   ================================================ */

.tasknotes-plugin .stats-view__no-data {
    text-align: center;
    padding: var(--tn-spacing-xl);
    color: var(--tn-text-muted);
    font-style: italic;
}

/* More Projects Indicator */
.tasknotes-plugin .stats-view__more-projects {
    text-align: center;
    color: var(--tn-text-muted);
    font-style: italic;
    padding: var(--tn-spacing-sm);
    border-top: 1px solid var(--tn-border-color);
    margin-top: var(--tn-spacing-sm);
}

/* ================================================
   RESPONSIVE DESIGN
   ================================================ */

/* Mobile adjustments */
@media (max-width: 768px) {
    .tasknotes-plugin .stats-view {
        padding: var(--tn-spacing-md);
        gap: var(--tn-spacing-lg);
    }
    
    .tasknotes-plugin .stats-view__overview-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: var(--tn-spacing-sm);
    }
    
    .tasknotes-plugin .stats-view__stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: var(--tn-spacing-sm);
    }
    
    .tasknotes-plugin .stats-view__project-stats {
        flex-direction: column;
        gap: var(--tn-spacing-sm);
    }
}

/* ================================================
   DARK MODE ADJUSTMENTS
   ================================================ */

.theme-dark .tasknotes-plugin .stats-view__overview-card,
.theme-dark .tasknotes-plugin .stats-view__stat-card,
.theme-dark .tasknotes-plugin .stats-view__project-item {
    background: var(--tn-background-secondary);
    border-color: var(--tn-border-color);
}

.theme-dark .tasknotes-plugin .stats-view__project-stat {
    background: var(--tn-background-modifier-border);
}

/* ================================================
   PROGRESS BARS
   ================================================ */

.tasknotes-plugin .stats-view__progress-bar {
    width: 100%;
    height: 8px;
    background: var(--tn-background-modifier-border);
    border-radius: 4px;
    overflow: hidden;
    margin-top: var(--tn-spacing-xs);
    position: relative;
}

.tasknotes-plugin .stats-view__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--tn-accent-color), var(--color-accent-2, var(--tn-accent-color)));
    border-radius: 4px;
    transition: width 0.6s ease-out;
    position: relative;
}

.tasknotes-plugin .stats-view__progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ================================================
   VISUAL ENHANCEMENTS
   ================================================ */

/* Enhanced cards with gradients */
.tasknotes-plugin .stats-view__overview-card {
    background: linear-gradient(135deg, var(--tn-background-secondary), var(--tn-background-primary));
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-border-radius-lg);
    padding: var(--tn-spacing-lg);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tasknotes-plugin .stats-view__overview-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tn-accent-color), var(--color-accent-2, var(--tn-accent-color)));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tasknotes-plugin .stats-view__overview-card:hover::before {
    opacity: 1;
}

.tasknotes-plugin .stats-view__overview-card:hover {
    border-color: var(--tn-accent-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Enhanced overview values with animation */
.tasknotes-plugin .stats-view__overview-value {
    font-size: var(--tn-font-size-xxl);
    font-weight: var(--tn-font-weight-bold);
    color: var(--tn-accent-color);
    margin-bottom: var(--tn-spacing-xs);
    line-height: 1.2;
    animation: countUp 0.8s ease-out;
}

@keyframes countUp {
    0% { 
        opacity: 0;
        transform: scale(0.8);
    }
    100% { 
        opacity: 1;
        transform: scale(1);
    }
}

/* Enhanced project items */
.tasknotes-plugin .stats-view__project-item {
    background: linear-gradient(135deg, var(--tn-background-secondary), var(--tn-background-primary));
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-border-radius-lg);
    padding: var(--tn-spacing-lg);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Special styling for "No Project" items */
.tasknotes-plugin .stats-view__project-item--no-project {
    background: linear-gradient(135deg, var(--tn-background-modifier-border), var(--tn-background-secondary));
    border: 1px dashed var(--tn-text-muted);
    opacity: 0.8;
}

.tasknotes-plugin .stats-view__project-item--no-project::before {
    background: linear-gradient(90deg, var(--tn-text-muted), var(--color-base-60));
    opacity: 0.3;
}

.tasknotes-plugin .stats-view__project-item--no-project:hover {
    border-color: var(--tn-text-muted);
    opacity: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.tasknotes-plugin .stats-view__project-item--no-project .stats-view__project-name {
    color: var(--tn-text-muted);
    font-style: italic;
}


.tasknotes-plugin .stats-view__project-item--no-project .stats-view__time-bar-fill {
    background: linear-gradient(90deg, var(--color-base-60), var(--color-base-70));
}

.tasknotes-plugin .stats-view__project-item--no-project .stats-view__progress-circle-fg {
    stroke: var(--color-base-60);
}

.tasknotes-plugin .stats-view__project-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--tn-accent-color);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tasknotes-plugin .stats-view__project-item:hover::before {
    opacity: 1;
}

.tasknotes-plugin .stats-view__project-item:hover {
    border-color: var(--tn-accent-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Time visualization bars */
.tasknotes-plugin .stats-view__time-bar {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
    margin: var(--tn-spacing-xs) 0;
}

.tasknotes-plugin .stats-view__time-bar-visual {
    flex: 1;
    height: 6px;
    background: var(--tn-background-modifier-border);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.tasknotes-plugin .stats-view__time-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-green), var(--color-blue));
    border-radius: 3px;
    transition: width 0.8s ease-out;
}

.tasknotes-plugin .stats-view__time-bar-label {
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-muted);
    white-space: nowrap;
    min-width: 60px;
    text-align: right;
}

/* Insight cards */
.tasknotes-plugin .stats-view__insight-card {
    background: linear-gradient(135deg, var(--color-accent-2, var(--tn-accent-color)), var(--tn-accent-color));
    color: var(--text-on-accent);
    border-radius: var(--tn-border-radius-lg);
    padding: var(--tn-spacing-lg);
    margin: var(--tn-spacing-md) 0;
    position: relative;
    overflow: hidden;
}

.tasknotes-plugin .stats-view__insight-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tasknotes-plugin .stats-view__insight-card:hover::before {
    opacity: 1;
}

.tasknotes-plugin .stats-view__insight-title {
    font-weight: var(--tn-font-weight-bold);
    margin-bottom: var(--tn-spacing-xs);
}

.tasknotes-plugin .stats-view__insight-text {
    font-size: var(--tn-font-size-sm);
    opacity: 0.9;
}

/* ================================================
   LOADING STATE
   ================================================ */

.tasknotes-plugin .stats-view__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tn-spacing-xl);
    color: var(--tn-text-muted);
}

.tasknotes-plugin .stats-view__loading::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid var(--tn-border-color);
    border-top-color: var(--tn-accent-color);
    border-radius: 50%;
    margin-right: var(--tn-spacing-sm);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360px);
    }
}

/* ================================================
   FILTER CONTROLS
   ================================================ */

.tasknotes-plugin .stats-view__filters {
    margin-top: var(--tn-spacing-sm);
}

.tasknotes-plugin .stats-view__filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--tn-spacing-md);
    align-items: end;
}

.tasknotes-plugin .stats-view__filter-item {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xs);
}

.tasknotes-plugin .stats-view__filter-label {
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
}

.tasknotes-plugin .stats-view__filter-select,
.tasknotes-plugin .stats-view__filter-input {
    padding: var(--tn-spacing-sm);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-border-radius-sm);
    background: var(--tn-background-primary);
    color: var(--tn-text-normal);
    font-size: var(--tn-font-size-sm);
}

.tasknotes-plugin .stats-view__filter-select:focus,
.tasknotes-plugin .stats-view__filter-input:focus {
    outline: none;
    border-color: var(--tn-accent-color);
    box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.2);
}

.tasknotes-plugin .stats-view__custom-dates {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--tn-spacing-md);
    margin-top: var(--tn-spacing-sm);
}

.tasknotes-plugin .stats-view__date-input-container {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xs);
    flex: 1;
}

.tasknotes-plugin .stats-view__date-label {
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
}

.tasknotes-plugin .stats-view__date-input {
    padding: var(--tn-spacing-sm);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-border-radius-sm);
    background: var(--tn-background-primary);
    color: var(--tn-text-normal);
    font-size: var(--tn-font-size-sm);
}

.tasknotes-plugin .stats-view__filter-buttons {
    display: flex;
    gap: var(--tn-spacing-sm);
    align-items: end;
}

.tasknotes-plugin .stats-view__filter-button {
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-border-radius-sm);
    background: var(--tn-background-primary);
    color: var(--tn-text-normal);
    font-size: var(--tn-font-size-sm);
    cursor: var(--cursor);
    transition: all 0.2s ease;
}

.tasknotes-plugin .stats-view__filter-button:hover {
    background: var(--tn-interactive-hover);
}

.tasknotes-plugin .stats-view__filter-button--reset {
    border-color: var(--color-red);
    color: var(--color-red);
}

.tasknotes-plugin .stats-view__filter-button--reset:hover {
    background: var(--color-red);
    color: var(--text-on-accent);
}

/* ================================================
   INTERACTIVE ELEMENTS
   ================================================ */

/* Clickable project items */
.tasknotes-plugin .stats-view__project-item--clickable {
    cursor: var(--cursor);
    transition: all 0.2s ease;
}

.tasknotes-plugin .stats-view__project-item--clickable:hover {
    background: var(--tn-interactive-hover);
}

.tasknotes-plugin .stats-view__click-indicator {
    font-size: var(--tn-font-size-lg);
    color: var(--tn-text-muted);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tasknotes-plugin .stats-view__project-item--clickable:hover .stats-view__click-indicator {
    opacity: 1;
}

/* ================================================
   SPARKLINES & TRENDS
   ================================================ */

.tasknotes-plugin .stats-view__trend-container {
    margin: var(--tn-spacing-sm) 0;
    padding: var(--tn-spacing-sm);
    background: var(--tn-background-modifier-border);
    border-radius: var(--tn-border-radius-sm);
}

.tasknotes-plugin .stats-view__trend-label {
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-muted);
    margin-bottom: var(--tn-spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tasknotes-plugin .stats-view__sparkline {
    height: 20px;
}

.tasknotes-plugin .stats-view__sparkline-svg {
    width: 100%;
    height: 100%;
    color: var(--tn-accent-color);
}

/* ================================================
   MODAL STYLES
   ================================================ */

/* Modal styles - no plugin scope needed since modals are appended to document.body */
.stats-view__modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--layer-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tn-spacing-lg, 16px);
}

.stats-view__modal {
    background: var(--tn-background-primary, var(--background-primary));
    border-radius: var(--tn-border-radius-lg, 8px);
    max-width: 800px;
    max-height: 80vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.stats-view__modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tn-spacing-lg, 16px);
    border-bottom: 1px solid var(--tn-border-color, var(--background-modifier-border));
}

.stats-view__modal-title {
    font-size: var(--tn-font-size-lg, 18px);
    font-weight: var(--tn-font-weight-bold, 600);
    color: var(--tn-text-normal, var(--text-normal));
}

.stats-view__modal-close {
    background: none;
    border: none;
    font-size: var(--tn-font-size-xl, 20px);
    color: var(--tn-text-muted, var(--text-muted));
    cursor: var(--cursor);
    padding: var(--tn-spacing-xs, 4px);
    border-radius: var(--tn-border-radius-sm, 4px);
    transition: all 0.2s ease;
}

.stats-view__modal-close:hover {
    background: var(--tn-interactive-hover, var(--interactive-hover));
    color: var(--tn-text-normal, var(--text-normal));
}

.stats-view__modal-content {
    padding: var(--tn-spacing-lg, 16px);
    overflow-y: auto;
    flex: 1;
}

/* ================================================
   DRILL-DOWN CONTENT
   ================================================ */

/* Drill-down styles - no plugin scope needed since content is in modal */
.stats-view__drilldown-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--tn-spacing-md, 12px);
    margin-bottom: var(--tn-spacing-xl, 24px);
}

.stats-view__drilldown-card {
    background: var(--tn-background-secondary, var(--background-secondary));
    border: 1px solid var(--tn-border-color, var(--background-modifier-border));
    border-radius: var(--tn-border-radius-md, 6px);
    padding: var(--tn-spacing-md, 12px);
    text-align: center;
}

.stats-view__drilldown-value {
    font-size: var(--tn-font-size-xl, 20px);
    font-weight: var(--tn-font-weight-bold, 600);
    color: var(--tn-accent-color, var(--interactive-accent));
    margin-bottom: var(--tn-spacing-xs, 4px);
}

.stats-view__drilldown-label {
    font-size: var(--tn-font-size-sm, 12px);
    color: var(--tn-text-muted, var(--text-muted));
}

.stats-view__drilldown-section {
    margin-bottom: var(--tn-spacing-xl, 24px);
}

.stats-view__drilldown-heading {
    font-size: var(--tn-font-size-md, 14px);
    font-weight: var(--tn-font-weight-semibold, 500);
    color: var(--tn-text-normal, var(--text-normal));
    margin-bottom: var(--tn-spacing-md, 12px);
    padding-bottom: var(--tn-spacing-xs, 4px);
    border-bottom: 1px solid var(--tn-border-color, var(--background-modifier-border));
}

/* ================================================
   ACTIVITY CHART
   ================================================ */

/* Activity chart styles - no plugin scope needed since content is in modal */
.stats-view__bar-chart {
    display: flex;
    align-items: end;
    gap: 2px;
    height: 50px;
    padding: var(--tn-spacing-sm, 8px);
    background: var(--tn-background-secondary, var(--background-secondary));
    border-radius: var(--tn-border-radius-sm, 4px);
    overflow-x: auto;
}

.stats-view__bar-container {
    display: flex;
    align-items: end;
    flex-shrink: 0;
}

.stats-view__bar {
    width: 6px;
    background: linear-gradient(to top, var(--tn-accent-color, var(--interactive-accent)), var(--color-accent-2, var(--tn-accent-color, var(--interactive-accent))));
    border-radius: 1px 1px 0 0;
    min-height: 1px;
    transition: opacity 0.2s ease;
}

.stats-view__bar:hover {
    opacity: 0.7;
}

/* ================================================
   TASK LISTS IN DRILL-DOWN
   ================================================ */

.tasknotes-plugin .stats-view__recent-tasks,
.tasknotes-plugin .stats-view__task-list {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-sm);
    max-height: 400px;
    overflow-y: auto;
}

.tasknotes-plugin .stats-view__recent-task {
    background: var(--tn-background-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-border-radius-sm);
    padding: var(--tn-spacing-sm);
    cursor: var(--cursor);
    transition: all 0.2s ease;
}

.tasknotes-plugin .stats-view__recent-task:hover {
    border-color: var(--tn-accent-color);
    background: var(--tn-interactive-hover);
}

.tasknotes-plugin .stats-view__task-title {
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    margin-bottom: var(--tn-spacing-xs);
}

.tasknotes-plugin .stats-view__task-meta {
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-muted);
}

/* Section headers and task filters */
.tasknotes-plugin .stats-view__section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .stats-view__task-filters {
    display: flex;
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .stats-view__task-count {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    margin-bottom: var(--tn-spacing-sm);
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    background: var(--tn-background-modifier-border);
    border-radius: var(--tn-border-radius-sm);
    text-align: center;
}

/* ================================================
   RESPONSIVE ENHANCEMENTS
   ================================================ */

@media (max-width: 768px) {
    .tasknotes-plugin .stats-view__overview-card,
    .tasknotes-plugin .stats-view__project-item {
        padding: var(--tn-spacing-md);
    }
    
    .tasknotes-plugin .stats-view__time-bar-label {
        min-width: 50px;
    }
    
    .tasknotes-plugin .stats-view__filter-grid {
        grid-template-columns: 1fr;
    }
    
    .tasknotes-plugin .stats-view__custom-dates {
        flex-direction: column;
    }
    
    .tasknotes-plugin .stats-view__filter-buttons {
        justify-content: stretch;
    }
    
    .tasknotes-plugin .stats-view__filter-button {
        flex: 1;
    }
}

/* ===== SETTINGS-VIEW.CSS ===== */
/* ================================================
   SETTINGS VIEW - MINIMAL CLEAN STRUCTURE
   ================================================ */

/* ================================================
   SETTINGS HEADER
   ================================================ */

.tasknotes-plugin .settings-header {
    display: flex;
    justify-content: flex-start;
    margin-bottom: var(--tn-spacing-md);
    margin-top: calc(-1 * var(--tn-spacing-sm));
}

.tasknotes-plugin .settings-header-link {
    display: inline-flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
    color: var(--text-accent);
    text-decoration: none;
    font-size: var(--font-ui-small);
}

.tasknotes-plugin .settings-header-link:hover {
    text-decoration: underline;
}

.tasknotes-plugin .settings-header-link::after {
    content: "↗";
    font-size: 0.85em;
}

/* ================================================
   TAB NAVIGATION
   ================================================ */

/* Tab Navigation Container */
.tasknotes-plugin .settings-view__tab-nav {
    display: flex;
    gap: var(--tn-spacing-xs);
    margin-bottom: var(--tn-spacing-lg);
    border-bottom: 1px solid var(--tn-border-color);
    padding-bottom: var(--tn-spacing-sm);
    overflow-x: auto;
    white-space: nowrap;
}

.tasknotes-plugin .settings-view__tab-button {
    white-space: nowrap;
    flex-shrink: 0;
}

.tasknotes-plugin .settings-view__tab-button--active,
.tasknotes-plugin .settings-view__tab-button.is-active {
    background: var(--interactive-accent) !important;
    color: var(--text-on-accent) !important;
}

/* ================================================
   TAB CONTENT
   ================================================ */

/* Tab Contents Container */
.tasknotes-plugin .settings-view__tab-contents {
    position: relative;
    min-height: 400px;
}

/* Tab Content Panel */
.tasknotes-plugin .settings-view__tab-content {
    display: none;
}

.tasknotes-plugin .settings-view__tab-content--active {
    display: block;
    animation: tn-settings-fade-in 0.2s ease-in-out;
}

@keyframes tn-settings-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================
   TASKNOTES SETTINGS CARD SYSTEM - CLEAN MINIMAL BASE
   ================================================ */

/* Base Card */
.tasknotes-settings__card {
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: visible;
}

.tasknotes-settings__card:hover {
    border-color: var(--interactive-accent);
}

/* Card Header */
.tasknotes-settings__card-header {
    padding: 12px 16px;
    background: var(--background-secondary);
    border-bottom: 1px solid var(--background-modifier-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.tasknotes-settings__card-header--with-drag-handle {
    padding-left: 40px;
}

.tasknotes-settings__card-info {
    flex: 1;
    min-width: 0;
}

.tasknotes-settings__card-primary-text {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-normal);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tasknotes-settings__card-secondary-text {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    display: block;
    margin-top: 2px;
}

.tasknotes-settings__card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tasknotes-settings__card-color-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 12px;
    border: 2px solid var(--background-primary);
    box-shadow: 0 0 0 1px var(--background-modifier-border);
}

/* Card Content */
.tasknotes-settings__card-content {
    padding: 16px;
}

.tasknotes-settings__card-config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tasknotes-settings__card-config-row:last-child {
    margin-bottom: 0;
}

.tasknotes-settings__card-config-label {
    min-width: 80px;
    font-weight: 500;
    color: var(--text-normal);
    font-size: 13px;
    margin-right: 12px;
}

/* Card Inputs */
.tasknotes-settings__card-input {
    padding: 8px 12px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-modifier-form-field);
    color: var(--text-normal);
    font-size: 13px;
    line-height: 1.4;
    min-height: 32px;
}

/* Select dropdowns need extra styling */
.tasknotes-settings__card-input[type="select"],
select.tasknotes-settings__card-input {
    padding: 6px 12px;
    line-height: 1.5;
    min-height: 34px;
}

.tasknotes-settings__card-input[type="text"],
.tasknotes-settings__card-input[type="url"],
.tasknotes-settings__card-input[type="email"] {
    flex: 0 1 auto;
    min-width: 150px;
}

.tasknotes-settings__card-input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}

.tasknotes-settings__card-input[type="color"] {
    width: 40px;
    height: 32px;
    padding: 2px;
}

.tasknotes-settings__card-input[type="number"] {
    width: 80px;
}

.tasknotes-settings__card-input:focus {
    outline: none;
    border-color: var(--interactive-accent);
}

/* Card Actions */
.tasknotes-settings__card-actions {
    padding: 12px 16px;
    background: var(--background-modifier-form-field);
    border-top: 1px solid var(--background-modifier-border);
    display: flex;
    gap: 8px;
}

.tasknotes-settings__card-action-btn {
    padding: 8px 16px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: 13px;
    font-weight: 500;
    cursor: var(--cursor);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tasknotes-settings__card-action-btn:hover {
    background: var(--background-modifier-hover);
}

.tasknotes-settings__card-action-btn--primary {
    background: none;
    color: var(--text-on-accent);
    border-color: var(--interactive-accent);
}

.tasknotes-settings__card-action-btn--primary:hover {
    background: var(--interactive-accent-hover);
}

.tasknotes-settings__card-action-btn--delete {
    background: var(--color-red);
    color: white;
    border-color: var(--color-red);
}

/* Header Actions */
.tasknotes-settings__card-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tasknotes-settings__card-header-btn {
    width: 20px;
    height: 20px;
    border: none !important;
    background: transparent;
    color: var(--text-muted);
    cursor: var(--cursor);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    outline: none !important;
    padding: 0;
}

.tasknotes-settings__card-header-btn:focus {
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

.tasknotes-settings__card-header-btn:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.tasknotes-settings__card-header-btn--delete:hover {
    background: var(--color-red);
    color: white;
}

/* Status Badges */
.tasknotes-settings__card-status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    background: var(--background-modifier-border);
    color: var(--text-muted);
}

.tasknotes-settings__card-status-badge--active {
    background: var(--color-green);
    color: white;
}

.tasknotes-settings__card-status-badge--inactive {
    background: var(--color-red);
    color: white;
}

.tasknotes-settings__card-info-badge {
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    background: var(--background-modifier-border);
    color: var(--text-muted);
    white-space: nowrap;
}

/* Selected Project Items (chips) */
.default-projects-list-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.tasknotes-settings__project-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 12px;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 16px;
    font-size: 12px;
    color: var(--text-normal);
    transition: all 0.15s ease;
}

.tasknotes-settings__project-item:hover {
    background: var(--background-modifier-hover);
    border-color: var(--background-modifier-border-hover);
}

.tasknotes-settings__project-item span {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tasknotes-settings__project-item button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.tasknotes-settings__project-item button:hover {
    background: var(--background-modifier-error);
    color: var(--text-on-accent);
}

.tasknotes-settings__project-item button svg {
    width: 12px;
    height: 12px;
}

/* Drag Handle */
.tasknotes-settings__card-drag-handle {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 16px;
    cursor: grab;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.tasknotes-settings__card-drag-handle:hover {
    opacity: 1;
    background: var(--background-modifier-hover);
}

.tasknotes-settings__card-drag-handle:active {
    cursor: grabbing;
}

/* Drag States */
.tasknotes-settings__card--draggable {
    cursor: grab;
}

.tasknotes-settings__card--dragging {
    opacity: 0.7;
    transform: rotate(1deg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--interactive-accent);
}

.tasknotes-settings__card--drag-over-top {
    border-top: 2px solid var(--interactive-accent);
}

.tasknotes-settings__card--drag-over-bottom {
    border-bottom: 2px solid var(--interactive-accent);
}

/* Empty state for card containers */
.tasknotes-plugin .settings-view .tasknotes-settings__empty-state {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    background: var(--background-modifier-form-field);
    border: 1px dashed var(--background-modifier-border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.tasknotes-plugin .settings-view .tasknotes-settings__empty-icon {
    display: flex;
    align-items: center;
    opacity: 0.6;
}

.tasknotes-plugin .settings-view .tasknotes-settings__empty-text {
    flex: 1;
}

/* ================================================
   COLLAPSIBLE CARD FUNCTIONALITY
   ================================================ */

/* Collapsible card support */
.tasknotes-settings__card--collapsible {
    transition: all 0.2s ease;
}

.tasknotes-settings__card--collapsible .tasknotes-settings__card-content,
.tasknotes-settings__card--collapsible .tasknotes-settings__card-actions {
    transition: all 0.2s ease;
    overflow: hidden;
}

/* Collapsed state - hide content and actions */
.tasknotes-settings__card--collapsed .tasknotes-settings__card-content {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    border: none;
}

.tasknotes-settings__card--collapsed .tasknotes-settings__card-actions {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    border: none;
}

/* Collapse button styling */
.tasknotes-settings__card-collapse-btn {
    opacity: 0.7;
    transition: all 0.2s ease;
}

.tasknotes-settings__card-collapse-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Visual indicator for collapsed cards */
.tasknotes-settings__card--collapsed {
    opacity: 0.9;
}

/* Clickable header styling */
.tasknotes-settings__card-header--clickable {
    cursor: var(--cursor);
    user-select: none;
}

.tasknotes-settings__card-header--clickable:hover {
    background: var(--background-modifier-hover);
}

/* ================================================
   WEBHOOK MODAL STYLES
   ================================================ */

.tasknotes-webhook-modal {
    max-width: 800px;
    padding: var(--tn-spacing-lg);
}

.tasknotes-webhook-modal-header {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-md);
    margin-bottom: var(--tn-spacing-lg);
    padding-bottom: var(--tn-spacing-md);
    border-bottom: 1px solid var(--background-modifier-border);
}

.tasknotes-webhook-modal-icon {
    color: var(--interactive-accent);
    font-size: 1.5rem;
}

.tasknotes-webhook-modal-title {
    margin: 0;
    color: var(--text-normal);
    font-size: 1.25rem;
    font-weight: 600;
}

.tasknotes-webhook-modal-section {
    margin-bottom: var(--tn-spacing-xl);
}

.tasknotes-webhook-modal-subsection-header {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
    margin-bottom: var(--tn-spacing-md);
}

.tasknotes-webhook-modal-subsection-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-normal);
}

.tasknotes-webhook-events-list .setting-item {
    padding: var(--tn-spacing-sm) 0;
    border-bottom: 1px solid var(--background-modifier-border);
}

.tasknotes-webhook-events-list .setting-item:last-child {
    border-bottom: none;
}

.tasknotes-webhook-transform-help {
    margin-top: var(--tn-spacing-md);
    padding: var(--tn-spacing-md);
    background: var(--background-secondary);
    border-radius: var(--tn-radius-sm);
    border-left: 3px solid var(--interactive-accent);
}

.tasknotes-webhook-help-header {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
    margin-bottom: var(--tn-spacing-sm);
    font-weight: 500;
    color: var(--text-normal);
}

.tasknotes-webhook-help-list {
    margin: var(--tn-spacing-sm) 0;
    padding-left: var(--tn-spacing-lg);
    color: var(--text-muted);
    font-size: var(--tn-font-size-sm);
}

.tasknotes-webhook-help-list li {
    margin-bottom: var(--tn-spacing-xs);
}

.tasknotes-webhook-help-example {
    margin-top: var(--tn-spacing-sm);
    font-size: var(--tn-font-size-sm);
    color: var(--text-muted);
}

.tasknotes-webhook-modal-buttons {
    display: flex;
    gap: var(--tn-spacing-sm);
    justify-content: flex-end;
    margin-top: var(--tn-spacing-xl);
    padding-top: var(--tn-spacing-md);
    border-top: 1px solid var(--background-modifier-border);
}

.tasknotes-webhook-modal-btn {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
    padding: var(--tn-spacing-sm) var(--tn-spacing-lg);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--tn-radius-sm);
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: var(--tn-font-size-sm);
    font-weight: 500;
    cursor: var(--cursor);
    transition: all 0.2s ease;
}

.tasknotes-webhook-modal-btn:hover {
    background: var(--background-modifier-hover);
    border-color: var(--interactive-accent);
}

.tasknotes-webhook-modal-btn.save {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border-color: var(--interactive-accent);
}

.tasknotes-webhook-modal-btn.save:hover {
    background: var(--interactive-accent-hover);
    border-color: var(--interactive-accent-hover);
}

.tasknotes-webhook-modal-btn.cancel {
    background: transparent;
}

.tasknotes-webhook-modal-btn.cancel:hover {
    background: var(--background-modifier-hover);
}

.tasknotes-webhook-modal-btn-icon {
    font-size: 0.9rem;
    line-height: 1;
}

/* Webhook Secret Notice */
.tasknotes-webhook-secret-notice {
    text-align: center;
    padding: var(--tn-spacing-xl);
}

.tasknotes-webhook-secret-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tn-spacing-sm);
    margin-bottom: var(--tn-spacing-lg);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--interactive-accent);
}

.tasknotes-webhook-secret-content {
    margin-bottom: var(--tn-spacing-lg);
}

.tasknotes-webhook-secret-content p {
    margin-bottom: var(--tn-spacing-md);
    color: var(--text-normal);
}

.tasknotes-webhook-secret-code {
    display: block;
    background: var(--background-modifier-form-field);
    padding: var(--tn-spacing-md);
    border-radius: var(--tn-radius-sm);
    font-family: var(--font-monospace);
    font-size: var(--tn-font-size-sm);
    word-break: break-all;
    user-select: all;
    border: 1px solid var(--background-modifier-border);
    margin: var(--tn-spacing-md) 0;
    cursor: var(--cursor);
}

.tasknotes-webhook-secret-code:hover {
    background: var(--background-modifier-hover);
    border-color: var(--interactive-accent);
}

/* ================================================
   HELPER TEXT & WARNING SECTIONS
   ================================================ */

/* Help sections with lists */
.tasknotes-settings__help-section {
    background: var(--background-secondary);
    border-radius: 6px;
    padding: 16px;
    margin: 12px 0;
}

.tasknotes-settings__help-section h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-normal);
}

.tasknotes-settings__help-section ul {
    margin: 0;
    padding-left: 20px;
}

.tasknotes-settings__help-section li {
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

.tasknotes-settings__help-note {
    margin: 12px 0 0 0;
    padding: 12px;
    background: var(--background-modifier-form-field);
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-muted);
    border: 1px solid var(--background-modifier-border);
}

/* Warning sections */
.tasknotes-settings__warning {
    background: rgba(var(--color-red-rgb), 0.1);
    border: 1px solid rgba(var(--color-red-rgb), 0.3);
    border-radius: 6px;
    padding: 16px;
    margin: 12px 0;
    font-size: 13px;
    color: var(--text-normal);
    line-height: 1.4;
}

.tasknotes-settings__warning strong {
    color: var(--color-red);
}

/* ================================================
   FIELD MAPPING TABLE - CARD STYLE
   ================================================ */

.tasknotes-settings__table {
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    overflow: hidden;
    margin: 16px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.tasknotes-settings__table-header {
    background: var(--background-secondary);
    color: var(--text-normal);
    font-weight: 600;
    font-size: 13px;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--background-modifier-border);
    position: sticky;
    top: 0;
    z-index: 1;
}

.tasknotes-settings__table-header:first-child {
    min-width: 140px;
    width: 35%;
}

.tasknotes-settings__table-header:last-child {
    width: 65%;
}

.tasknotes-settings__table-row {
    transition: background-color 0.2s ease;
}

.tasknotes-settings__table-row:nth-child(even) {
    background: var(--background-modifier-form-field);
}

.tasknotes-settings__table-row:hover {
    background: var(--background-modifier-hover);
}

.tasknotes-settings__table-cell {
    padding: 12px 16px;
    border-bottom: 1px solid var(--background-modifier-border);
    vertical-align: middle;
    font-size: 13px;
}

.tasknotes-settings__table-cell:first-child {
    font-weight: 500;
    color: var(--text-normal);
    background: var(--background-modifier-form-field);
}

.tasknotes-settings__table-cell:last-child {
    background: inherit;
}

/* Remove border from last row */
.tasknotes-settings__table-row:last-child .tasknotes-settings__table-cell {
    border-bottom: none;
}

/* Field mapping input styling */
.field-mapping-input {
    width: 100%;
} 

.field-mapping-input:hover {
    border-color: var(--interactive-hover);
}

.field-mapping-input::placeholder {
    color: var(--text-faint);
    font-style: italic;
    opacity: 0.7;
}

/* ================================================
   DEFAULT VISIBLE PROPERTIES STYLING
   ================================================ */

.tasknotes-settings__properties-container {
    margin: 16px 0;
}

.tasknotes-settings__property-group {
    margin-bottom: 20px;
}

.tasknotes-settings__property-group-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--background-modifier-border);
}

.tasknotes-settings__property-toggles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.tasknotes-settings__property-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.tasknotes-settings__property-checkbox {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: var(--cursor);
}

.tasknotes-settings__property-label {
    font-size: 13px;
    color: var(--text-normal);
    cursor: var(--cursor);
    flex: 1;
    line-height: 1.3;
}

.tasknotes-settings__property-label:hover {
    color: var(--text-accent);
}

/* ================================================
   COLLAPSIBLE SECTIONS
   ================================================ */

.tasknotes-settings__collapsible-header {
    cursor: var(--cursor);
    padding: 8px 12px;
    margin: -8px -12px 12px -12px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    user-select: none;
}

.tasknotes-settings__collapsible-header:hover {
    background: var(--background-modifier-hover);
}

.tasknotes-settings__collapsible-header-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tasknotes-settings__collapsible-icon {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    font-family: monospace;
    line-height: 1;
}

.tasknotes-settings__collapsible-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-normal);
    margin: 0;
}

.tasknotes-settings__collapsible-content {
    transition: all 0.2s ease;
}

/* Nested collapsible sections (e.g., filter settings within custom fields) */
.tasknotes-settings__collapsible-section {
    margin-top: 12px;
}

.tasknotes-settings__collapsible-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: var(--cursor);
    padding: 8px 12px;
    margin: 0 -12px 12px -12px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    user-select: none;
}

.tasknotes-settings__collapsible-section-header:hover {
    background: var(--background-modifier-hover);
}

.tasknotes-settings__collapsible-section-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tasknotes-settings__collapsible-section-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.tasknotes-settings__filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}

.tasknotes-settings__filter-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.tasknotes-settings__collapsible-section-chevron {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.tasknotes-settings__collapsible-section-chevron svg {
    width: 16px;
    height: 16px;
}

.tasknotes-settings__collapsible-section-content {
    max-height: none;
    opacity: 1;
    overflow: visible;
}

/* Collapsed state */
.tasknotes-settings__collapsible-section--collapsed .tasknotes-settings__collapsible-section-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
}

.tasknotes-settings__collapsible-section--collapsed .tasknotes-settings__collapsible-section-chevron {
    transform: rotate(-90deg);
}

/* ================================================
   ICON INPUT WITH SUGGESTIONS
   ================================================ */

/* Icon input container with preview */
.tasknotes-plugin .icon-input-container {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
    flex: 1;
}

.tasknotes-plugin .icon-input-preview {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--tn-radius-sm);
    background: var(--background-modifier-hover);
    flex-shrink: 0;
}

.tasknotes-plugin .icon-input-preview svg {
    width: 16px;
    height: 16px;
    color: var(--text-normal);
}

.tasknotes-plugin .icon-input {
    flex: 1;
    min-width: 0;
}

/* Icon suggestion dropdown items */
.suggestion-item.icon-suggestion-item {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
    padding: var(--size-4-1) var(--size-4-2);
}

.icon-suggestion-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.icon-suggestion-preview svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

.icon-suggestion-text {
    color: var(--text-normal);
    font-size: var(--font-ui-small);
}

/* Highlight matched icon in suggestions */
.suggestion-item.icon-suggestion-item.is-selected .icon-suggestion-preview svg {
    color: var(--text-on-accent);
}

.suggestion-item.icon-suggestion-item.is-selected .icon-suggestion-text {
    color: var(--text-on-accent);
}

/* ================================================
   ACCESSIBILITY & REDUCED MOTION
   ================================================ */

@media (prefers-reduced-motion: reduce) {
    .tasknotes-plugin .settings-view__tab-content--active {
        animation: none;
    }
    
    .tasknotes-settings__card,
    .tasknotes-settings__card-drag-handle {
        transition: none;
    }
}

/* ===== WEBHOOK-SETTINGS.CSS ===== */
/* 
 * Webhook Settings UI Styles
 * Modern, clean styling for the webhook configuration interface
 */

/* Webhook Container */
.tasknotes-webhooks-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

/* Empty State */
.tasknotes-webhooks-empty-state {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem;
  background: var(--background-modifier-form-field);
  border: 1px dashed var(--background-modifier-border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.tasknotes-webhooks-empty-icon {
  display: flex;
  align-items: center;
  opacity: 0.6;
}

.tasknotes-webhooks-empty-text {
  flex: 1;
}

/* Webhook Card */
.tasknotes-webhook-card {
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  transition: all 0.2s ease;
}

.tasknotes-webhook-card:hover {
  border-color: var(--interactive-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Webhook Header */
.tasknotes-webhook-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--background-secondary);
  border-bottom: 1px solid var(--background-modifier-border);
}

.tasknotes-webhook-url-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.tasknotes-webhook-url-icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.tasknotes-webhook-url {
  font-family: var(--font-monospace);
  font-size: 0.85rem;
  color: var(--text-normal);
  font-weight: 500;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.tasknotes-webhook-status-section {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.tasknotes-webhook-status-indicator {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 500;
}

.tasknotes-webhook-status-indicator.active {
  background: var(--color-green-rgb);
  background: rgba(var(--color-green-rgb), 0.15);
  color: var(--color-green);
}

.tasknotes-webhook-status-indicator.inactive {
  background: var(--color-red-rgb);
  background: rgba(var(--color-red-rgb), 0.15);
  color: var(--color-red);
}

.tasknotes-webhook-status-icon {
  display: flex;
  align-items: center;
}

.tasknotes-webhook-status-text {
  font-weight: 500;
}

/* Webhook Content */
.tasknotes-webhook-content {
  padding: 1rem 1.25rem;
}

.tasknotes-webhook-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
}

.tasknotes-webhook-detail-row:last-child {
  margin-bottom: 0;
}

.tasknotes-webhook-detail-row.warning {
  background: rgba(var(--color-yellow-rgb), 0.1);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.tasknotes-webhook-detail-icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  margin-top: 1px;
  flex-shrink: 0;
}

.tasknotes-webhook-detail-label {
  font-weight: 500;
  color: var(--text-normal);
  min-width: 5rem;
  flex-shrink: 0;
}

.tasknotes-webhook-detail-value {
  color: var(--text-muted);
  word-break: break-all;
  flex: 1;
}

.tasknotes-webhook-detail-warning {
  color: var(--color-yellow);
  font-weight: 500;
}

/* Webhook Statistics */
.tasknotes-webhook-stats {
  display: flex;
  gap: 1rem;
}

.tasknotes-webhook-stat-success,
.tasknotes-webhook-stat-failure {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
}

.tasknotes-webhook-stat-success {
  color: var(--color-green);
}

.tasknotes-webhook-stat-failure {
  color: var(--color-red);
}

.tasknotes-webhook-stat-icon {
  display: flex;
  align-items: center;
}

/* Webhook Actions */
.tasknotes-webhook-actions {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: var(--background-modifier-form-field);
  border-top: 1px solid var(--background-modifier-border);
}

.tasknotes-webhook-action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  background: var(--background-primary);
  color: var(--text-normal);
  font-size: 0.85rem;
  cursor: var(--cursor);
  transition: all 0.2s ease;
}

.tasknotes-webhook-action-btn:hover {
  background: var(--background-modifier-hover);
  border-color: var(--interactive-accent);
}

.tasknotes-webhook-action-btn.enable {
  background: var(--color-green);
  color: white;
  border-color: var(--color-green);
}

.tasknotes-webhook-action-btn.enable:hover {
  background: var(--color-green);
  opacity: 0.9;
}

.tasknotes-webhook-action-btn.disable {
  background: var(--color-orange);
  color: white;
  border-color: var(--color-orange);
}

.tasknotes-webhook-action-btn.disable:hover {
  background: var(--color-orange);
  opacity: 0.9;
}

.tasknotes-webhook-action-btn.delete {
  background: var(--color-red);
  color: white;
  border-color: var(--color-red);
}

.tasknotes-webhook-action-btn.delete:hover {
  background: var(--color-red);
  opacity: 0.9;
}

.tasknotes-webhook-action-icon {
  display: flex;
  align-items: center;
}

.tasknotes-webhook-action-text {
  font-weight: 500;
}

/* Webhook Modal */
.tasknotes-webhook-modal .modal {
  width: auto;
  max-width: 700px;
}

.tasknotes-webhook-modal .modal-content {
  width: 600px;
  max-width: 90vw;
  box-sizing: border-box;
}

.tasknotes-webhook-modal * {
  box-sizing: border-box;
  max-width: 100%;
}

/* Better styling for Settings in modal */
.tasknotes-webhook-modal .setting-item {
  padding: 1rem;
  margin-bottom: 0.75rem;
  background: var(--background-modifier-form-field);
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.tasknotes-webhook-modal .setting-item:hover {
  border-color: var(--interactive-accent);
  background: var(--background-modifier-hover);
}

.tasknotes-webhook-modal .setting-item:last-child {
  margin-bottom: 0;
}

.tasknotes-webhook-modal .setting-item-info {
  margin-right: 1rem;
}

.tasknotes-webhook-modal .setting-item-name {
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: var(--text-normal);
}

.tasknotes-webhook-modal .setting-item-description {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.tasknotes-webhook-modal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--background-modifier-border);
}

.tasknotes-webhook-modal-icon {
  display: flex;
  align-items: center;
  color: var(--interactive-accent);
  padding: 0.5rem;
  background: rgba(var(--interactive-accent-rgb), 0.1);
  border-radius: 8px;
}

.tasknotes-webhook-modal-title {
  margin: 0;
  color: var(--text-normal);
  font-size: 1.4rem;
  font-weight: 600;
}

.tasknotes-webhook-modal-section {
  margin-bottom: 2rem;
  width: 100%;
  overflow: hidden;
}

.tasknotes-webhook-modal-subsection-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--background-modifier-border-hover);
}

.tasknotes-webhook-modal-subsection-header span {
  color: var(--interactive-accent);
  padding: 0.25rem;
  background: rgba(var(--interactive-accent-rgb), 0.1);
  border-radius: 4px;
}

.tasknotes-webhook-modal-subsection-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-normal);
}


/* Events List */
.tasknotes-webhook-events-list {
  margin-top: 1rem;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}


/* Transform Help */
.tasknotes-webhook-transform-help {
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  padding: 1.25rem;
  margin-top: 1rem;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.tasknotes-webhook-help-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.tasknotes-webhook-help-list {
  margin: 0.75rem 0;
  padding-left: 1.25rem;
}

.tasknotes-webhook-help-list li {
  margin-bottom: 0.5rem;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.tasknotes-webhook-help-example {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--background-modifier-border);
  font-size: 0.9rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Modal Buttons */
.tasknotes-webhook-modal-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--background-modifier-border);
  flex-wrap: wrap;
}

.tasknotes-webhook-modal-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-primary);
  color: var(--text-normal);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: var(--cursor);
  transition: all 0.2s ease;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tasknotes-webhook-modal-btn:hover {
  background: var(--background-modifier-hover);
  border-color: var(--interactive-accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.tasknotes-webhook-modal-btn.cancel {
  background: var(--background-secondary);
  border-color: var(--background-modifier-border-hover);
}

.tasknotes-webhook-modal-btn.cancel:hover {
  background: var(--background-modifier-hover);
}

.tasknotes-webhook-modal-btn.save {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}

.tasknotes-webhook-modal-btn.save:hover {
  background: var(--interactive-accent-hover);
  border-color: var(--interactive-accent-hover);
}

.tasknotes-webhook-modal-btn-icon {
  display: flex;
  align-items: center;
}

/* Secret Notice */
.tasknotes-webhook-secret-notice {
  padding: 1rem;
}

.tasknotes-webhook-secret-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-weight: 500;
  color: var(--color-green);
}

.tasknotes-webhook-secret-content {
  font-size: 0.9rem;
  line-height: 1.4;
}

.tasknotes-webhook-secret-code {
  background: var(--background-modifier-form-field);
  border: 1px solid var(--background-modifier-border);
  border-radius: 3px;
  padding: 0.2rem 0.4rem;
  font-family: var(--font-monospace);
  font-size: 0.85rem;
  margin: 0 0.25rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .tasknotes-webhook-modal .modal-content {
    width: 95vw;
  }
  
  .tasknotes-webhook-card {
    margin: 0 -0.5rem;
  }
  
  .tasknotes-webhook-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .tasknotes-webhook-url-section {
    width: 100%;
  }
  
  .tasknotes-webhook-modal-buttons {
    flex-direction: column;
  }
  
  .tasknotes-webhook-modal-btn {
    width: 100%;
    justify-content: center;
  }
  
  .tasknotes-webhook-stats {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Dark theme adjustments */
.theme-dark .tasknotes-webhook-card:hover {
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

/* Accessibility improvements */
.tasknotes-webhook-action-btn:focus,
.tasknotes-webhook-modal-btn:focus {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
}

/* Animation for status changes */
.tasknotes-webhook-status-indicator {
  transition: all 0.3s ease;
}

.tasknotes-webhook-card {
  transition: all 0.2s ease, transform 0.2s ease;
}

.tasknotes-webhook-card:hover {
  transform: translateY(-1px);
}

/* ===== STATUS-BAR.CSS ===== */
/* TaskNotes Status Bar Styles */

.tasknotes-status-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: transparent;
    transition: background-color 0.2s ease;
    min-width: 0; /* Allow text truncation */
}

.tasknotes-status-bar:hover {
    background: var(--background-modifier-hover);
}

.tasknotes-status-icon {
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}

.tasknotes-status-text {
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted);
    max-width: 200px; /* Limit width to prevent status bar from being too wide */
}

.tasknotes-status-bar:hover .tasknotes-status-text {
    color: var(--text-normal);
}

/* Responsive behavior for smaller screens */
@media (max-width: 768px) {
    .tasknotes-status-text {
        max-width: 120px;
    }
}

/* Dark theme adjustments */
.theme-dark .tasknotes-status-bar {
    color: var(--text-muted);
}

.theme-dark .tasknotes-status-bar:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

/* Light theme adjustments */
.theme-light .tasknotes-status-bar {
    color: var(--text-muted);
}

.theme-light .tasknotes-status-bar:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

/* ===== BASES-VIEWS.CSS ===== */
/* ================================================
   BASES VIEWS - TaskNotes Integration Styles
   ================================================ */

/* ================================================
   CUSTOM NEW TASK BUTTON
   Toggle between native and TaskNotes "New" button
   ================================================ */

/* Hide TaskNotes button by default */
.tn-bases-new-task-btn {
	display: none;
}

/* When a TaskNotes view is active: show our button, hide native */
.tasknotes-view-active .tn-bases-new-task-btn {
	display: flex;
}

.tasknotes-view-active .bases-toolbar-new-item-menu {
	display: none;
}

/* Bases TaskNotes List View Container */
.tn-bases-tasknotes-list {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xs);
    width: 100%;
    padding: var(--tn-spacing-sm);
}

/* Task Group Section (matches TaskListView structure) */
.tn-bases-tasknotes-list .task-section.task-group {
    margin-bottom: var(--tn-spacing-md);
}

/* Group Header */
.tn-bases-tasknotes-list .task-group-header {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
    justify-content: flex-start;
    padding: var(--tn-spacing-xs) var(--tn-spacing-md) var(--tn-spacing-xs) var(--tn-spacing-sm);
    margin-bottom: var(--tn-spacing-sm);
    border-bottom: 1px solid var(--tn-border-color);
    position: relative;
    font-size: var(--tn-font-size-lg);
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    letter-spacing: 0.01em;
    line-height: 1.4;
    cursor: var(--cursor);
}

/* Count element within group headers */
.tn-bases-tasknotes-list .task-group-header .agenda-view__item-count {
    margin-left: auto;
    margin-right: 0;
}

/* Toggle button for groups */
.tn-bases-tasknotes-list .task-group-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--tn-text-normal);
    font-size: 14px;
    line-height: 1;
    cursor: var(--cursor);
    padding: 0;
}

/* Default expanded state - chevron pointing down */
.tn-bases-tasknotes-list .task-group .task-group-toggle svg {
    color: var(--tn-text-normal);
    transition: transform 0.2s ease;
    transform: rotate(90deg) !important;
}

/* Collapsed state - chevron pointing right */
.tn-bases-tasknotes-list .task-group.is-collapsed .task-group-toggle svg {
    transform: rotate(0deg) !important;
}

/* Hide task cards when collapsed */
.tn-bases-tasknotes-list .task-group.is-collapsed .task-cards {
    display: none;
}

/* Sub-group header styling */
.tn-tasknoteTaskList .task-group[data-level="sub"] {
    padding-left: 16px; /* Subtle indentation */
    margin-bottom: var(--tn-spacing-sm);
}

.tn-tasknoteTaskList .task-group[data-level="sub"] .task-group-header {
    font-size: 0.95em;
    font-weight: 500; /* Less bold than primary */
    color: var(--tn-text-muted);
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
}

.tn-tasknoteTaskList .task-group[data-level="sub"] .task-group-toggle {
    opacity: 0.8; /* Slightly more subtle chevron */
}

.tn-tasknoteTaskList .task-group[data-level="sub"] .task-group-toggle svg {
    width: 14px;
    height: 14px;
}

/* Task cards container */
.tn-bases-tasknotes-list .tasks-container.task-cards {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xs);
    padding-left: var(--tn-spacing-md);
}

/* Empty state */
.tn-bases-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--tn-spacing-xl);
    text-align: center;
    color: var(--tn-text-muted);
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-md);
    margin: var(--tn-spacing-lg) 0;
}

/* Kanban Board Styles */
.tn-bases-kanban-board {
    display: flex;
    gap: var(--tn-spacing-md);
    overflow-x: auto;
    padding: var(--tn-spacing-sm);
    min-height: 400px;
}

.tn-bases-kanban-column {
    flex: 0 0 280px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-md);
    overflow: hidden;
}

.tn-bases-kanban-column-header {
    padding: var(--tn-spacing-md);
    background: var(--tn-bg-primary);
    border-bottom: 1px solid var(--tn-border-color);
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tn-bases-kanban-column-name {
    font-size: var(--tn-font-size-md);
}

.tn-bases-kanban-column-count {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    background: var(--tn-bg-secondary);
    padding: 2px 8px;
    border-radius: var(--tn-radius-sm);
}

.tn-bases-kanban-tasks {
    flex: 1;
    padding: var(--tn-spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xs);
    overflow-y: auto;
}

/* Drag and drop styles */
.tn-bases-kanban-tasks.drag-over {
    background: var(--tn-interactive-hover);
    border: 2px dashed var(--tn-interactive-accent);
    border-radius: var(--tn-radius-sm);
}

/* Bases Calendar List View - minimalist styling */
.fc-event-default-list {
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    margin: var(--tn-spacing-xs) 0;
    background: transparent;
    border: none;
    border-radius: var(--tn-radius-sm);
}

/* Style FullCalendar list view structure */
#bases-calendar .fc-list {
    background: transparent;
}

#bases-calendar .fc-list-table {
    background: transparent;
}

#bases-calendar .fc-list-event {
    background: transparent;
    border: none;
}

#bases-calendar .fc-list-event:hover {
    background: var(--tn-interactive-hover);
}

#bases-calendar .fc-list-day-cushion {
    background: transparent;
    padding: var(--tn-spacing-sm) var(--tn-spacing-xs);
    border-bottom: 1px solid var(--tn-divider-color);
    font-weight: var(--tn-font-weight-medium);
}

#bases-calendar .fc-list-day {
    background: transparent;
}

/* Override FullCalendar's bright white border color in dark mode */
.theme-dark #bases-calendar.fc-theme-standard {
    --fc-border-color: var(--background-modifier-border);
}

/* Responsive design for Bases views */
@media (max-width: 768px) {
    .tn-bases-kanban-board {
        gap: var(--tn-spacing-sm);
    }

    .tn-bases-kanban-column {
        flex: 0 0 240px;
        min-width: 240px;
    }
}

@media (max-width: 480px) {
    .tn-bases-tasknotes-list .task-group-header {
        font-size: var(--tn-font-size-md);
        padding: var(--tn-spacing-sm) 0 var(--tn-spacing-xs);
    }

    .tn-bases-kanban-column {
        flex: 0 0 200px;
        min-width: 200px;
    }
}

/* ================================================
   SWIMLANE KANBAN LAYOUT
   ================================================ */

/* Board with swimlanes - use CSS Grid instead of flexbox */
.kanban-view__board--swimlanes {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: auto;
    padding: var(--tn-spacing-sm);
    min-height: 400px;
}

/* Each swimlane row */
.kanban-view__swimlane-row {
    display: grid;
    /* First column is the swimlane label with fixed width, rest are kanban columns */
    grid-template-columns: var(--kanban-swimlane-label-width, 120px);
    grid-auto-columns: var(--kanban-column-width, 280px);
    grid-auto-flow: column;
    gap: 1px;
    background: var(--tn-border-color);
    border: 1px solid var(--tn-border-color);
    border-bottom: none;
    min-width: max-content;
}

/* Last row gets bottom border */
.kanban-view__swimlane-row:last-child {
    border-bottom: 1px solid var(--tn-border-color);
}

/* Header row styling */
.kanban-view__swimlane-row--header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--tn-bg-primary);
    font-weight: var(--tn-font-weight-semibold);
}

/* Swimlane label cell (leftmost column) */
.kanban-view__swimlane-label {
    background: var(--tn-bg-secondary);
    padding: var(--tn-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xs);
    align-items: flex-start;
    justify-content: center;
    border-right: 1px solid var(--tn-border-color);
    position: sticky;
    left: 0;
    z-index: 5;
}

/* Swimlane title */
.kanban-view__swimlane-title {
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    font-size: var(--tn-font-size-md);
}

/* Swimlane task count */
.kanban-view__swimlane-count {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    background: var(--tn-bg-primary);
    padding: 2px 6px;
    border-radius: var(--tn-radius-sm);
}

/* Column header cell in header row */
.kanban-view__column-header-cell {
    background: var(--tn-bg-secondary);
    padding: var(--tn-spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: grab;
    user-select: none;
    transition: all var(--tn-transition-fast);
    gap: var(--tn-spacing-xs);
}

.kanban-view__column-header-cell:active {
    cursor: grabbing;
}

.kanban-view__column-header-cell--dragging {
    opacity: 0.5;
    transform: rotate(2deg);
    box-shadow: var(--tn-shadow-medium);
}

.kanban-view__column-header-cell .kanban-view__column-title {
    font-size: var(--tn-font-size-md);
    font-weight: var(--tn-font-weight-semibold);
    color: var(--tn-text-normal);
}

/* Individual swimlane column cells (data cells) */
.kanban-view__swimlane-column {
    background: var(--tn-bg-primary);
    padding: var(--tn-spacing-sm);
    min-height: 100px;
    max-height: var(--kanban-swimlane-max-height, 600px);
    display: flex;
    flex-direction: column;
}

/* Tasks container within each cell */
.kanban-view__swimlane-column .kanban-view__tasks-container {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xs);
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Drag over state for swimlane cells */
.kanban-view__swimlane-column--dragover {
    background: var(--tn-interactive-hover);
    outline: 2px dashed var(--tn-interactive-accent);
    outline-offset: -2px;
}

/* Responsive adjustments for swimlanes */
@media (max-width: 1200px) {
    .kanban-view__swimlane-row > :first-child {
        width: 150px;
        min-width: 150px;
    }

    .kanban-view__swimlane-label {
        padding: var(--tn-spacing-sm);
    }
}

@media (max-width: 768px) {
    .kanban-view__swimlane-row > :first-child {
        width: 120px;
        min-width: 120px;
    }

    .kanban-view__swimlane-title {
        font-size: var(--tn-font-size-sm);
    }

    .kanban-view__column-header-cell .kanban-view__column-title {
        font-size: var(--tn-font-size-sm);
    }
}