/* 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/notes-view.css: NotesView 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: var(--interactive-hover);
    --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: pointer;
}

.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;
    }
}

/* ===== 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;
    align-items: flex-start;
    gap: 0;
    position: relative;
    
    /* Spacing & Sizing - Todoist compact style */
    padding: 8px 16px;
    margin-bottom: 1px;
    
    /* Visual Styling - Todoist minimal style */
    background-color: transparent;
    border: none;
    border-radius: 0;
    
    /* Interactions & Accessibility - Simplified */
    cursor: pointer;
    transition: background-color var(--tn-transition-fast);
    will-change: background-color;
    outline: none;
    role: listitem;
    tabindex: 0;
}

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

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

.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__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tasknotes-plugin .task-card__title {
    font-size: 14px;
    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 0.2s ease;
}

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

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

.tasknotes-plugin .task-card__metadata-separator {
    color: var(--tn-text-faint);
    opacity: 0.5;
    font-size: 0.8em;
}

.tasknotes-plugin .task-card__tag {
    background: var(--tn-bg-secondary);
    color: var(--tn-text-muted);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 400;
    border: none;
    white-space: nowrap;
}

.tasknotes-plugin .task-card__due-date {
    color: var(--tn-color-success);
    font-size: 11px;
    font-weight: 400;
    padding: 1px 4px;
    border-radius: 2px;
    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: 2px;
}

.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: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
    border: 2px solid var(--tn-border-color);
    background-color: transparent;
    transition: all 0.2s ease;
    align-self: center;
    cursor: pointer;
    position: relative;
}

.tasknotes-plugin .task-card__status-dot:hover {
    border-color: var(--tn-text-muted);
    box-shadow: 0 0 8px rgba(100, 149, 237, 0.5);
    transform: scale(1.1);
}

/* Completed status - filled circle with status color */
.tasknotes-plugin .task-card--completed .task-card__status-dot {
    background-color: var(--current-status-color, var(--tn-color-success));
    border-color: var(--current-status-color, var(--tn-color-success));
}

.tasknotes-plugin .task-card__recurring-indicator {
    position: absolute;
    top: 8px;
    right: 26px;
    width: 16px;
    height: 16px;
    color: var(--tn-text-muted);
    opacity: 0.8;
    z-index: 1;
    display: none; /* Hidden by default, shown via modifier */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 3px;
    padding: 2px;
    margin: -2px;
}

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

.tasknotes-plugin .task-card__recurring-indicator svg {
    width: 100%;
    height: 100%;
}

.tasknotes-plugin .task-card__project-indicator {
    position: absolute;
    top: 8px;
    right: 44px; /* Position after recurring indicator */
    width: 16px;
    height: 16px;
    color: var(--tn-text-muted);
    opacity: 0.8;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-s);
    padding: 2px;
    cursor: pointer;
    transition: all var(--tn-transition-fast);
}

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

.tasknotes-plugin .task-card__project-indicator svg {
    width: 100%;
    height: 100%;
}

.tasknotes-plugin .task-card__context-menu {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    color: var(--tn-text-faint);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 2px;
}

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

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

.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 0.2s ease;
}

.tasknotes-plugin .task-card__priority-dot:hover {
    transform: scale(1.2);
    border-width: 3px;
    box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
}

/* Hoverable date text elements */
.tasknotes-plugin .task-card__metadata-date {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: var(--radius-s);
    padding: 2px 4px;
    margin: -2px -4px;
    position: relative;
}

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

.tasknotes-plugin .task-card__metadata-date--due:hover {
    background: rgba(220, 38, 127, 0.1);
    color: var(--color-red);
}

.tasknotes-plugin .task-card__metadata-date--scheduled:hover {
    background: rgba(8, 109, 221, 0.1);
    color: var(--color-blue);
}

/* Project links */
.tasknotes-plugin .task-card__project-link {
    color: var(--interactive-accent);
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: var(--radius-s);
    padding: 1px 2px;
    margin: -1px -2px;
    cursor: pointer;
    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);
    text-decoration: underline;
    color: var(--interactive-accent-hover);
    outline: none;
}

.tasknotes-plugin .task-card__project-link:focus {
    box-shadow: 0 0 0 2px var(--interactive-accent);
}

.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 {
    opacity: 0.6;
}

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

/* 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;
}

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

/* Dynamic priority colors using CSS variables set by PriorityManager */
.tasknotes-plugin .task-card[data-priority] .task-card__priority-dot {
    background-color: var(--current-priority-color, var(--tn-text-muted));
}

/* Fallback priority colors using existing system */
.tasknotes-plugin .task-card--priority-high .task-card__priority-dot {
    background-color: var(--priority-high-color, var(--tn-color-error));
}

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

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

/* Status colors - Use dynamic status colors from user settings */
.tasknotes-plugin .task-card[data-status] .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 0.3s ease;
}

/* =================================================================
   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;
    }
}

/* =================================================================
   LEGACY COMPATIBILITY - DEPRECATED
   
   Keep existing classes for backward compatibility but prefer BEM structure above.
   These will be removed in a future version.
   ================================================================= */

/* DEPRECATED - Use .task-card instead */
.tasknotes-plugin .tasknotes-card.task-card {
    /* Inherit new styles */
}

/* DEPRECATED - Use .task-card__content instead */
.tasknotes-plugin .task-card .task-content {
    /* Map to new BEM structure */
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xs);
    min-width: 0;
}

/* DEPRECATED - Use .task-card__title instead */
.tasknotes-plugin .task-card .task-title {
    font-size: var(--tn-font-size-lg);
    font-weight: var(--tn-font-weight-normal);
    line-height: 1.3;
    color: var(--tn-text-normal);
    margin: 0;
    word-wrap: break-word;
}

/* DEPRECATED - Use .task-card__title.task-card--completed instead */
.tasknotes-plugin .task-card .task-title.completed {
    text-decoration: line-through;
    color: var(--tn-text-muted);
}

/* DEPRECATED - Use .task-card__metadata instead */
.tasknotes-plugin .task-card .task-metadata-line {
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-muted);
    line-height: 1.2;
    margin: 0;
}

/* DEPRECATED - Use .task-card__status-dot instead */
.tasknotes-plugin .task-card .status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: var(--tn-radius-full);
    margin-right: var(--tn-spacing-sm);
    margin-top: 4px;
    flex-shrink: 0;
    background-color: var(--tn-text-muted);
}

/* DEPRECATED - Use .task-card__recurring-indicator instead */
.tasknotes-plugin .task-card .recurring-indicator {
    position: absolute;
    top: var(--tn-spacing-md);
    right: 32px;
    width: 14px;
    height: 14px;
    color: var(--tn-text-muted);
    opacity: 0.7;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* DEPRECATED - Use .task-card__context-menu instead */
.tasknotes-plugin .task-card .task-context-icon {
    position: absolute;
    top: var(--tn-spacing-md);
    right: var(--tn-spacing-md);
    width: 16px;
    height: 16px;
    color: var(--tn-text-muted);
    cursor: pointer;
    opacity: 0;
    transition: all var(--tn-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: var(--tn-radius-xs);
}

.tasknotes-plugin .task-card .task-context-icon:hover {
    color: var(--tn-text-normal);
    background: var(--tn-interactive-hover);
    transform: scale(1.1);
}

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

/* =================================================================
   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; }
}




/* ===== 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 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: pointer;
    
    /* 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-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--tn-border-color);
    background-color: transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin-right: 6px; /* More gap between status and priority */
    vertical-align: baseline;
}

.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: scale(1.1);
}

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

/* 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: pointer;
    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: pointer;
    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: pointer;
    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;
    border-radius: 3px;
    
    /* Interactivity */
    cursor: pointer;
    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;
    transform: scale(1.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: 250px; /* Give more room for task titles */
    flex-shrink: 1; /* Allow shrinking if needed */
    vertical-align: baseline;
    cursor: pointer;
    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: pointer;
    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 */
    padding: var(--tn-spacing-md) var(--tn-spacing-lg);
    margin-bottom: 0;
    
    /* Visual Styling */
    background-color: var(--tn-bg-primary);
    border: none;
    border-bottom: 1px solid var(--tn-border-color);
    border-radius: 0;
    border-left: 3px solid transparent; /* For potential categorization */
    
    /* Interactions */
    cursor: pointer;
    transition: background-color var(--tn-transition-fast),
                border-color var(--tn-transition-fast),
                transform var(--tn-transition-fast),
                box-shadow var(--tn-transition-fast);
    will-change: transform, box-shadow;
}

.tasknotes-plugin .note-card:hover {
    background-color: var(--tn-interactive-hover);
    transform: translateY(-1px);
    box-shadow: var(--tn-shadow-light);
}

/* 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__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xs);
    min-width: 0;
}

.tasknotes-plugin .note-card__title {
    font-size: var(--tn-font-size-md);
    font-weight: var(--tn-font-weight-normal);
    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: linear-gradient(
        135deg,
        var(--tn-bg-primary) 0%,
        color-mix(in srgb, var(--tn-color-daily-note) 3%, var(--tn-bg-primary)) 100%
    );
}

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

/* Shadow Variants */
.tasknotes-plugin .note-card--shadow-light:hover {
    box-shadow: var(--tn-shadow-light);
}

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

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

/* 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: pointer;
    transition: background-color var(--tn-transition-fast),
                border-color var(--tn-transition-fast),
                transform var(--tn-transition-fast),
                box-shadow var(--tn-transition-fast);
    will-change: transform, box-shadow;
}

.tasknotes-plugin .tn-card:hover {
    background-color: var(--tn-interactive-hover);
    transform: translateY(-1px);
    box-shadow: var(--tn-shadow-light);
}

.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-md);
    font-weight: var(--tn-font-weight-normal);
    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: var(--tn-spacing-sm);
    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 */
}

/* 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: pointer;
    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: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transition: all 0.2s ease;
}

.tasknotes-plugin .filter-bar__filter-toggle:hover {
    background: var(--interactive-hover);
    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: pointer;
    font-size: var(--font-ui-small);
    font-weight: 500;
    transition: all 0.2s ease;
    height: 32px; /* Consistent height */
}

.tasknotes-plugin .filter-bar__templates-button:hover {
    background: var(--interactive-hover);
    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;
}

/* 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;
    min-width: 200px;
    height: 32px; /* Consistent height */
}

.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: 0; /* Align to left edge near the filter button */
    right: 10px; /* Add some margin from the right edge */
    width: auto; /* Let it size itself */
    max-width: 600px; /* Maximum preferred width */
    min-width: 300px; /* 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; /* Align to the right of the container */
    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);
}

.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;
    color: var(--text-normal);
    text-align: left;
    cursor: pointer;
    font-size: var(--font-ui-small);
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.tasknotes-plugin .filter-bar__view-delete {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-muted);
    cursor: pointer;
    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: pointer;
    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: pointer;
    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 {
    padding-right: var(--tn-spacing-sm);
}

.tasknotes-plugin .filter-bar__save-button {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.tasknotes-plugin .filter-bar__save-button:hover {
    background: var(--interactive-hover);
    color: var(--text-normal);
}

.tasknotes-plugin .filter-bar__save-button 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__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: pointer;
    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: pointer;
    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-muted);
    cursor: pointer;
    font-size: var(--font-ui-small);
    transition: background-color 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-normal);
}

/* =================================================================
   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: pointer;
    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
   ================================================================= */

/* 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);
}



/* ===== 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(--font-ui-medium);
    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(--font-ui-medium);
    font-weight: 500;
    border-radius: var(--radius-s);
    border: none;
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    cursor: pointer;
    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(--font-ui-small);
    font-weight: 500;
    border-radius: var(--radius-s);
    border: 1px solid var(--background-modifier-border);
    background: var(--background-primary);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tasknotes-plugin .nl-parse-button:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
    border-color: var(--interactive-accent);
}

.tasknotes-plugin .nl-show-detail-button {
    padding: 6px 8px;
    font-size: var(--font-ui-medium);
    font-weight: 600;
    border-radius: var(--radius-s);
    border: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tasknotes-plugin .nl-show-detail-button:hover {
    background: var(--background-modifier-hover);
    color: var(--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(--font-ui-small);
    color: var(--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: pointer;
    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;
}

/* 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: pointer;
}

.tasknotes-plugin .modal-form__day-input {
    margin: 0;
    cursor: pointer;
    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: pointer;
    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);
}

/* Base Button */
.tasknotes-plugin .modal-form__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tn-spacing-sm);
    padding: var(--tn-spacing-md) var(--tn-spacing-lg);
    border-radius: var(--tn-radius-md);
    font-family: inherit;
    font-size: var(--tn-font-size-lg);
    font-weight: var(--tn-font-weight-medium);
    cursor: pointer;
    user-select: none;
    transition: all var(--tn-transition-fast);
    border: none;
    outline: none;
    min-height: var(--tn-button-height-md);
}

/* Primary Button (Submit actions) */
.tasknotes-plugin .modal-form__button--primary {
    background: var(--tn-interactive-accent);
    color: var(--text-on-accent);
    border: 1px solid var(--tn-interactive-accent);
}

.tasknotes-plugin .modal-form__button--primary:hover {
    background: var(--tn-interactive-accent-hover);
    border-color: var(--tn-interactive-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--tn-shadow-hover);
}

.tasknotes-plugin .modal-form__button--primary:active {
    transform: translateY(0);
    box-shadow: var(--tn-shadow-light);
}

/* Secondary Button (Cancel, etc.) */
.tasknotes-plugin .modal-form__button--secondary {
    background: transparent;
    color: var(--tn-text-normal);
    border: 1px solid var(--tn-border-color);
}

.tasknotes-plugin .modal-form__button--secondary:hover {
    background: var(--tn-interactive-hover);
    border-color: var(--tn-border-color-hover);
    transform: translateY(-1px);
}

.tasknotes-plugin .modal-form__button--secondary:active {
    transform: translateY(0);
}

/* 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;
}



/* ===== TASK-MODAL.CSS ===== */
/* =====================================================================
   TASK MODAL - Google Keep/Todoist Inspired
   ===================================================================== */

.tasknotes-plugin .minimalist-task-modal {
    /* Modal container adjustments */
}

.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);
}

/* =====================================================================
   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 {
    background: var(--background-modifier-hover);
    border-radius: var(--radius-s);
}

/* =====================================================================
   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: pointer;
    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: var(--background-secondary);
    color: var(--text-normal);
    transition: all 0.2s ease;
}

.tasknotes-plugin .title-input-detailed:focus {
    outline: none;
    border-color: var(--interactive-accent);
    background: var(--background-primary);
}

.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: var(--background-secondary);
    color: var(--text-normal);
    resize: vertical;
    transition: all 0.2s ease;
}

.tasknotes-plugin .details-input:focus {
    outline: none;
    border-color: var(--interactive-accent);
    background: var(--background-primary);
}

.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: 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 .details-container .setting-item-control input:focus {
    border-color: var(--interactive-accent);
    background: var(--background-primary);
    outline: none;
}

/* =====================================================================
   OPEN NOTE BUTTON (IN BUTTON BAR)
   ===================================================================== */

.tasknotes-plugin .open-note-button {
    padding: var(--size-4-2) var(--size-4-3);
    font-size: var(--font-ui-medium);
    font-weight: 500;
    border: 1px solid var(--interactive-accent);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--interactive-accent);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.tasknotes-plugin .open-note-button:hover {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tasknotes-plugin .open-note-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.tasknotes-plugin .button-spacer {
    flex: 1;
}

/* =====================================================================
   ACTION BUTTONS
   ===================================================================== */

.tasknotes-plugin .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);
}

.tasknotes-plugin .save-button {
    padding: var(--size-4-2) var(--size-4-4);
    font-size: var(--font-ui-medium);
    font-weight: 600;
    border: none;
    border-radius: var(--radius-s);
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.tasknotes-plugin .save-button:hover {
    background: var(--interactive-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tasknotes-plugin .cancel-button {
    padding: var(--size-4-2) var(--size-4-4);
    font-size: var(--font-ui-medium);
    font-weight: 500;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: var(--background-primary);
    color: var(--text-normal);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.tasknotes-plugin .cancel-button:hover {
    background: var(--background-modifier-hover);
    border-color: var(--interactive-accent);
}

/* =====================================================================
   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);
    }
    
    .tasknotes-plugin .button-container {
        flex-direction: column;
    }
    
    .tasknotes-plugin .save-button,
    .tasknotes-plugin .cancel-button {
        width: 100%;
    }
}

/* =====================================================================
   ACCESSIBILITY ENHANCEMENTS
   ===================================================================== */

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

.tasknotes-plugin .title-input:focus-visible,
.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: 1px 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: pointer;
    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: var(--background-secondary);
    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: var(--background-primary);
    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: 1px 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: pointer;
    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: pointer;
    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 .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;
    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 .minimalist-task-modal .modal-content {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.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);
}

/* =====================================================================
   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-path {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tasknotes-plugin .task-project-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.tasknotes-plugin .task-project-remove:hover {
    background-color: var(--background-modifier-error);
    color: var(--text-on-accent);
}

/* =====================================================================
   PROJECT SELECT MODAL
   ===================================================================== */

.tasknotes-plugin .project-suggestion {
    display: flex;
    flex-direction: column;
    padding: var(--size-4-2);
    border: none;
    border-radius: var(--radius-s);
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.tasknotes-plugin .project-suggestion:hover {
    background-color: var(--background-modifier-hover);
}

.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;
}


/* ===== 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: pointer;
    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: pointer;
    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: pointer;
    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: pointer;
    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: pointer;
    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: pointer;
    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: pointer;
    }
}

/* 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-MODAL.CSS ===== */
/* ================================================
   TASK SELECTOR - TASK STYLING ONLY
   ================================================ */

/* ================================================
   TITLE SECTION
   ================================================ */

/* Title Container */
.task-selector-modal__title {
    margin-bottom: var(--tn-spacing-xs);
}

/* Task Title Text */
.task-selector-modal__task-title {
    font-weight: 500;
    font-size: var(--tn-font-size-sm);
    color: var(--text-normal);
    line-height: 1.4;
}

/* Priority Modifiers */
.task-selector-modal__task-title--high-priority {
    color: var(--tn-color-priority-high);
    font-weight: 600;
}

.task-selector-modal__task-title--low-priority {
    color: var(--tn-color-priority-low);
    font-weight: 400;
    opacity: 0.8;
}

/* ================================================
   METADATA SECTION
   ================================================ */

/* Meta Container */
.task-selector-modal__meta {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
    flex-wrap: wrap;
    font-size: var(--tn-font-size-xs);
    color: var(--text-muted);
    line-height: 1.3;
}

/* ================================================
   DUE DATE DISPLAY
   ================================================ */

/* Base Due Date */
.task-selector-modal__due-date {
    padding: 2px 6px;
    border-radius: var(--tn-border-radius-sm);
    background-color: var(--background-modifier-border);
    color: var(--text-muted);
    font-size: var(--tn-font-size-xs);
    font-weight: 500;
    white-space: nowrap;
}

/* Due Date Modifiers */
.task-selector-modal__due-date--overdue {
    background-color: var(--tn-color-status-error-bg);
    color: var(--tn-color-status-error);
    border: 1px solid var(--tn-color-status-error);
}

.task-selector-modal__due-date--today {
    background-color: var(--tn-color-status-warning-bg);
    color: var(--tn-color-status-warning);
    border: 1px solid var(--tn-color-status-warning);
}

/* ================================================
   CONTEXTS SECTION
   ================================================ */

/* Contexts Container */
.task-selector-modal__contexts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

/* Individual Context Tags */
.task-selector-modal__context-tag {
    padding: 2px 4px;
    border-radius: var(--tn-border-radius-sm);
    background-color: var(--tn-color-context-bg);
    color: var(--tn-color-context);
    font-size: var(--tn-font-size-xs);
    font-weight: 500;
    white-space: nowrap;
}

.task-selector-modal__context-tag::before {
    content: '@';
    opacity: 0.7;
    margin-right: 1px;
}

/* ================================================
   PROJECTS SECTION
   ================================================ */

/* Projects Container */
.task-selector-modal__projects {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

/* Individual Project Tags */
.task-selector-modal__project-tag {
    padding: 2px 4px;
    border-radius: var(--tn-border-radius-sm);
    background-color: var(--tn-color-project-bg, var(--background-modifier-border));
    color: var(--tn-color-project, var(--text-accent));
    font-size: var(--tn-font-size-xs);
    font-weight: 500;
    white-space: nowrap;
}

.task-selector-modal__project-tag::before {
    content: '+';
    opacity: 0.7;
    margin-right: 1px;
}

/* Project Links - for [[Note Name]] format projects */
.task-selector-modal__project-link {
    color: var(--link-color);
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: var(--tn-border-radius-sm);
    padding: 1px 2px;
    margin: -1px -2px;
    cursor: pointer;
}

.task-selector-modal__project-link:hover {
    background: var(--background-modifier-hover);
    text-decoration: underline;
    color: var(--link-color-hover);
}

/* ================================================
   STATUS DISPLAY
   ================================================ */

/* Status Badge */
.task-selector-modal__status {
    padding: 2px 6px;
    border-radius: var(--tn-border-radius-sm);
    background-color: var(--background-modifier-border);
    color: var(--text-muted);
    font-size: var(--tn-font-size-xs);
    font-weight: 500;
    text-transform: capitalize;
    white-space: nowrap;
}

/* ================================================
   THEME ADJUSTMENTS
   ================================================ */

/* Improve contrast in dark themes */
.theme-dark .task-selector-modal__due-date {
    background-color: var(--background-modifier-form-field);
}

.theme-dark .task-selector-modal__context-tag {
    background-color: var(--background-modifier-form-field);
}

.theme-dark .task-selector-modal__project-tag {
    background-color: var(--background-modifier-form-field);
}

.theme-dark .task-selector-modal__status {
    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: pointer;
}

.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: pointer;
    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);
    }
}

/* ===== PROJECT-NOTE-SUBTASKS.CSS ===== */
/* 
 * Project Note Subtasks Component
 * 
 * Styles for the subtask display area that appears in project notes
 * via CodeMirror decorations in live preview mode. Uses BEM methodology.
 */

.project-note-subtasks.project-subtasks-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;
    position: relative;
    z-index: 1;
    
    /* Prevent cursor and editing issues */
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: default;
    
    /* Prevent contenteditable behavior */
    -webkit-user-modify: read-only;
    -moz-user-modify: read-only;
    
    /* Ensure no text cursor appears */
    caret-color: transparent;
    outline: none;
}

/* Hide CodeMirror cursor when it's adjacent to our widget */
.cm-line:has(.project-note-subtasks) .cm-cursor,
.cm-line:has(.project-note-subtasks) + .cm-line .cm-cursor {
    display: none !important;
}

/* Alternative approach - hide cursor specifically around widget */
.project-note-subtasks + .cm-cursor,
.project-note-subtasks ~ .cm-cursor {
    display: none !important;
}

/* Hide cursor when widget is in focus context */
.cm-focused .cm-line:has(.project-note-subtasks) .cm-cursor {
    display: none !important;
}

/* More specific cursor hiding using new class and data attribute */
.cm-line:has(.project-subtasks-widget) .cm-cursor,
.cm-line:has([data-widget-type="project-subtasks"]) .cm-cursor {
    display: none !important;
}

/* Hide any cursor that appears after our widget */
.project-subtasks-widget ~ .cm-cursor,
[data-widget-type="project-subtasks"] ~ .cm-cursor {
    display: none !important;
}

/* Ensure widget creates proper isolation from editor cursor */
.project-subtasks-widget {
    isolation: isolate;
    z-index: 10;
    position: relative;
}

/* Hide cursor in the entire editor when widget is present and focused */
.cm-editor:has(.project-subtasks-widget) .cm-cursor {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Comprehensive cursor hiding - use as fallback */
.cm-content:has(.project-subtasks-widget) .cm-cursor,
.cm-scroller:has(.project-subtasks-widget) .cm-cursor {
    display: none !important;
}

/* Target cursor by position relative to widget */
.project-subtasks-widget + * .cm-cursor,
.project-subtasks-widget ~ * .cm-cursor {
    display: none !important;
}

.tasknotes-plugin .project-note-subtasks__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.8em 0;
}

.tasknotes-plugin .project-note-subtasks__title {
    display: flex;
    align-items: center;
    font-size: 1.1em;
    font-weight: 600;
    margin: 0;
    color: var(--text-normal);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    transition: color 0.2s ease;
    
    /* Prevent text cursor and editing */
    caret-color: transparent;
    outline: none;
    -webkit-user-modify: read-only;
    -moz-user-modify: read-only;
}

.tasknotes-plugin .project-note-subtasks__new-btn {
    background: none;
    color: var(--text-muted);
    border: none;
    padding: 0.2em 0.4em;
    font-size: 0.8em;
    font-weight: 400;
    cursor: pointer;
    transition: color 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.tasknotes-plugin .project-note-subtasks__new-btn:hover {
    color: var(--text-normal);
}

.tasknotes-plugin .project-note-subtasks__title:hover {
    color: var(--text-accent);
}

.tasknotes-plugin .project-note-subtasks__title::before {
    content: "▼";
    margin-right: 0.5em;
    font-size: 0.8em;
    transition: transform 0.2s ease;
    color: var(--text-muted);
}

.tasknotes-plugin .project-note-subtasks__title.collapsed::before {
    transform: rotate(-90deg);
}

.tasknotes-plugin .project-note-subtasks__list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 1;
    
    /* Prevent cursor and selection issues */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    caret-color: transparent;
}

.tasknotes-plugin .project-note-subtasks__list.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
}

.tasknotes-plugin .project-note-subtasks__task {
    /* Task card wrapper */
    margin-bottom: 0.3em;
    
    /* Prevent cursor and selection issues */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    caret-color: transparent;
}

.tasknotes-plugin .project-note-subtasks__task .task-card {
    /* Enhance task card for subtask display */
    background-color: var(--background-primary);
    border-left: 3px solid var(--accent-color);
    padding: 0.6em 0.8em;
    border-radius: var(--radius-s);
    transition: all 0.2s ease;
}

.tasknotes-plugin .project-note-subtasks__task .task-card:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tasknotes-plugin .project-note-subtasks__task .task-card--completed {
    opacity: 0.7;
    border-left-color: var(--text-muted);
}

.tasknotes-plugin .project-note-subtasks__task .task-card--completed:hover {
    opacity: 0.9;
}

/* Responsive design */
@media (max-width: 768px) {
    .tasknotes-plugin .project-note-subtasks {
        margin: 1em 0;
        padding: 0.8em;
    }
    
    .tasknotes-plugin .project-note-subtasks__title {
        font-size: 1em;
        margin-bottom: 0.6em;
    }
    
    .tasknotes-plugin .project-note-subtasks__list {
        gap: 0.3em;
    }
    
    .tasknotes-plugin .project-note-subtasks__task .task-card {
        padding: 0.5em 0.6em;
    }
}

/* Dark mode adjustments */
.theme-dark .tasknotes-plugin .project-note-subtasks {
    background-color: var(--background-secondary);
    border-color: var(--background-modifier-border);
}

.theme-dark .tasknotes-plugin .project-note-subtasks__task .task-card {
    background-color: var(--background-primary);
    border-left-color: var(--accent-color);
}

.theme-dark .tasknotes-plugin .project-note-subtasks__task .task-card--completed {
    border-left-color: var(--text-muted);
}


/* ===== 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);
}

.tasknotes-plugin .task-list-view__add-button {
    padding: var(--tn-spacing-xs) var(--tn-spacing-md);
    background: var(--tn-interactive-accent);
    color: var(--tn-bg-primary);
    border: none;
    border-radius: var(--tn-radius-sm);
    font-size: var(--tn-font-size-md);
    font-weight: var(--tn-font-weight-medium);
    cursor: pointer;
    transition: all var(--tn-transition-fast);
    min-height: var(--tn-button-height-md);
}

.tasknotes-plugin .task-list-view__add-button:hover {
    background: var(--tn-interactive-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--tn-shadow-medium);
}

.tasknotes-plugin .task-list-view__add-button:active {
    transform: translateY(0);
    box-shadow: var(--tn-shadow-light);
}

/* 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 {
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    margin: var(--tn-spacing-sm) 0 var(--tn-spacing-xs);
    background: var(--tn-bg-secondary);
    border-radius: var(--tn-radius-md);
    font-weight: var(--tn-font-weight-medium);
    font-size: var(--tn-font-size-md);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tn-text-normal);
    border: 1px solid var(--tn-border-color);
    line-height: 1.4;
}

.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-xs);
        padding: 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);
}

/* Calendar View Type Select */
.tasknotes-plugin .calendar-view__view-selector,
.tasknotes-plugin .mini-calendar-view__view-selector {
    margin-right: var(--tn-spacing-md);
    min-width: 120px;
    padding: 4px 8px;
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    background: var(--tn-bg-primary);
    color: var(--tn-text-normal);
    font-size: var(--tn-font-size-sm);
    cursor: pointer;
    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);
    border-color: var(--tn-border-color-hover);
}

.tasknotes-plugin .calendar-view__view-selector:focus,
.tasknotes-plugin .mini-calendar-view__view-selector:focus {
    border-color: var(--tn-interactive-accent);
    outline: 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;
    color: var(--tn-text-normal);
}

/* Calendar Navigation Buttons */
.tasknotes-plugin .calendar-view__nav-button,
.tasknotes-plugin .mini-calendar-view__nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    background: var(--tn-bg-primary);
    color: var(--tn-text-normal);
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: all var(--tn-transition-fast);
}

.tasknotes-plugin .calendar-view__nav-button:hover,
.tasknotes-plugin .mini-calendar-view__nav-button:hover {
    background: var(--tn-interactive-hover);
    border-color: var(--tn-border-color-hover);
}

.tasknotes-plugin .calendar-view__nav-button:active,
.tasknotes-plugin .mini-calendar-view__nav-button:active {
    background: var(--tn-interactive-accent);
    color: var(--tn-bg-primary);
}

.tasknotes-plugin .calendar-view__nav-button--prev,
.tasknotes-plugin .mini-calendar-view__nav-button--prev {
    /* Specific styling for previous button if needed */
}

.tasknotes-plugin .calendar-view__nav-button--next,
.tasknotes-plugin .mini-calendar-view__nav-button--next {
    /* Specific styling for next button if needed */
}

/* Today Button */
.tasknotes-plugin .calendar-view__today-button,
.tasknotes-plugin .mini-calendar-view__today-button {
    margin-left: auto;
    background: transparent;
    color: var(--tn-text-muted);
    padding: 4px 12px;
    font-size: var(--tn-font-size-xs);
    min-height: 24px;
    border: none;
    font-weight: normal;
    opacity: 0.7;
    transition: opacity var(--tn-transition-fast);
    cursor: pointer;
    border-radius: var(--tn-radius-sm);
}

.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-bottom: 1px solid var(--tn-border-color);
    role: columnheader;
}

/* Calendar Day Cell */
.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: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--tn-bg-primary);
    border-bottom: 1px solid var(--tn-border-color);
    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);
    border-color: transparent;
    transform: none;
    box-shadow: none;
}

/* Calendar Day - Today State */
.tasknotes-plugin .calendar-view__day--today,
.tasknotes-plugin .mini-calendar-view__day--today {
    background: color-mix(in srgb, var(--tn-interactive-accent) 8%, transparent) !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: 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: 2px;
}

.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: 4px 8px;
    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);
}

/* 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: 2px;
    }
    
    .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-color-success);
}

.tasknotes-plugin .task-indicator.scheduled-tasks {
    background-color: var(--tn-interactive-accent);
}

.tasknotes-plugin .task-indicator.archived-tasks {
    background-color: var(--tn-color-archived);
    opacity: 0.8;
}

.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);
}

/* ===== 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;
}

.fc-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.9;
    border-radius: 6px;
    border-width: 2px !important;
    border-style: solid !important;
}

.fc-timeblock-event:hover,
.fc-event[data-event-type="timeblock"]:hover {
    opacity: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

/* 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 */
.fc-ics-event {
    border-radius: 4px;
    border-width: 2px !important;
    border-style: solid !important;
}

.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: pointer;
    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: pointer;
}

.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 {
    padding: 0.25rem 0.5rem;
    font-size: 0.8em;
    border: 1px solid var(--background-modifier-border);
    border-radius: 3px;
    background: var(--background-primary);
    color: var(--text-normal);
    cursor: pointer;
}

.ics-subscription-actions button:hover {
    background: var(--background-modifier-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: pointer;
}

.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: pointer;
}

.ics-form-checkbox,
.ics-edit-checkbox {
    margin: 0;
}

.ics-form-button,
.ics-edit-button {
    padding: 0.5rem 1rem;
    border: 1px solid var(--background-modifier-border);
    border-radius: 3px;
    background: var(--background-primary);
    color: var(--text-normal);
    cursor: pointer;
    margin-right: 0.5rem;
}

.ics-form-button:hover,
.ics-edit-button:hover {
    background: var(--background-modifier-hover);
}

.ics-form-button.mod-cta,
.ics-edit-button.mod-cta {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border-color: var(--interactive-accent);
}

.ics-form-button.mod-cta:hover,
.ics-edit-button.mod-cta:hover {
    background: var(--interactive-accent-hover);
}

.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: pointer;
    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;
    min-height: 0;
}

/* FullCalendar overrides - Minimalist & Clean */
.advanced-calendar-view .fc {
    height: 100%;
    font-family: var(--font-interface);
}

/* 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);
}

.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 {
    margin-bottom: 0.5rem;
    padding: 0;
    border: none;
    background: transparent;
}

.advanced-calendar-view .fc-toolbar-chunk {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Minimal button styling */
.advanced-calendar-view .fc-button-primary {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 400;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.advanced-calendar-view .fc-button-primary:hover:not(:disabled) {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.advanced-calendar-view .fc-button-primary:disabled {
    background: transparent;
    color: var(--text-faint);
    opacity: 0.5;
}

.advanced-calendar-view .fc-button-active {
    background: var(--interactive-accent) !important;
    border-color: var(--interactive-accent) !important;
    color: var(--text-on-accent) !important;
}

.advanced-calendar-view .fc-today-button {
    background: var(--interactive-accent);
    border-color: var(--interactive-accent);
    color: var(--text-on-accent);
}

.advanced-calendar-view .fc-today-button:hover:not(:disabled) {
    background: var(--interactive-accent-hover);
    border-color: var(--interactive-accent-hover);
}

/* Clean today styling */
.advanced-calendar-view .fc-daygrid-day.fc-day-today {
    background: color-mix(in srgb, var(--interactive-accent) 8%, transparent) !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);
}

.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);
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.75rem;
    text-transform: lowercase;
    letter-spacing: 0;
    padding: 0.5rem 0.5rem;
}

/* Day numbers */
.advanced-calendar-view .fc-daygrid-day-number {
    color: var(--text-normal);
    font-weight: 400;
    font-size: 0.9rem;
    padding: 0.5rem;
}

/* 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: pointer;
}

.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;
}

/* 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;
}

/* Scrollbar styling */
.advanced-calendar-view .fc-scroller {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-bg);
}

.advanced-calendar-view .fc-scroller::-webkit-scrollbar {
    width: 8px;
}

.advanced-calendar-view .fc-scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-bg);
}

.advanced-calendar-view .fc-scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg);
    border-radius: 4px;
}

.advanced-calendar-view .fc-scroller::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-bg-hover);
}

/* 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: pointer;
    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 in FullCalendar Toolbar */
.advanced-calendar-view .fc-refreshICS-button {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    color: var(--text-normal);
    transition: all 0.2s ease;
    font-weight: normal;
    font-size: 13px;
    padding: 4px 8px;
}

.advanced-calendar-view .fc-refreshICS-button .fc-icon,
.advanced-calendar-view .fc-refreshICS-button .fc-button-label {
    color: var(--text-normal);
    font-size: 13px;
    line-height: 1.2;
    display: inline;
    visibility: visible;
}

.advanced-calendar-view .fc-refreshICS-button:hover {
    background: var(--background-modifier-hover);
    border-color: var(--background-modifier-border-hover);
    color: var(--text-normal);
}

.advanced-calendar-view .fc-refreshICS-button:hover .fc-icon,
.advanced-calendar-view .fc-refreshICS-button:hover .fc-button-label {
    color: var(--text-normal);
}

.advanced-calendar-view .fc-refreshICS-button:focus {
    box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
}

/* Ensure button content is visible and matches other FC buttons */
.advanced-calendar-view .fc-refreshICS-button,
.advanced-calendar-view .fc-refreshICS-button * {
    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);
}

/* New Task Button */
.tasknotes-plugin .kanban-view__new-task-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tn-spacing-sm);
    padding: 0 var(--tn-spacing-lg);
    border: none;
    border-radius: var(--tn-radius-md);
    background: var(--tn-interactive-accent);
    color: var(--tn-text-on-accent);
    font-family: inherit;
    font-size: var(--tn-font-size-md);
    font-weight: var(--tn-font-weight-medium);
    line-height: 1.25;
    min-height: var(--tn-button-height-md);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--tn-transition-fast);
    overflow: hidden;
}

.tasknotes-plugin .kanban-view__new-task-button:hover {
    background: var(--tn-interactive-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--tn-shadow-medium);
}

.tasknotes-plugin .kanban-view__new-task-button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--tn-interactive-accent) 0.5, transparent);
    outline-offset: 2px;
}

.tasknotes-plugin .kanban-view__new-task-button:active {
    background: var(--tn-interactive-accent);
    transform: translateY(0);
    box-shadow: var(--tn-shadow-light);
}

/* 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: 280px;
    max-width: 350px;
    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);
}

.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;
    flex-direction: column;
    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);
}

.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
   ================================================ */


/* ================================================
   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);
    }
    
    .tasknotes-plugin .kanban-view__column {
        min-width: 240px;
        max-width: 280px;
    }
}

@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 {
        min-width: 200px;
        max-width: 240px;
    }
    
    .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);
    border-bottom: 1px solid var(--tn-border-color);
    margin-bottom: var(--tn-spacing-lg);
    position: relative;
    background: var(--tn-bg-primary);
}

.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;
}

/* Navigation Buttons */
.tasknotes-plugin .agenda-view__nav-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tn-button-height-lg);
    height: var(--tn-button-height-lg);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--tn-text-normal);
    font-size: 1.25rem;
    font-weight: var(--tn-font-weight-medium);
    cursor: pointer;
    user-select: none;
    transition: all var(--tn-transition-fast);
    overflow: hidden;
}

.tasknotes-plugin .agenda-view__nav-button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--tn-transition-fast);
}

.tasknotes-plugin .agenda-view__nav-button:hover::before {
    opacity: 0.1;
}

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

.tasknotes-plugin .agenda-view__nav-button:active {
    transform: scale(0.95);
}

.tasknotes-plugin .agenda-view__nav-button:active::before {
    opacity: 0.15;
}

.tasknotes-plugin .agenda-view__nav-button--prev {
    /* Specific styling for previous button if needed */
}

.tasknotes-plugin .agenda-view__nav-button--next {
    /* Specific styling for next button if needed */
}

/* 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: pointer;
    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: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-md);
    background: var(--tn-bg-primary);
    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: pointer;
    user-select: none;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--tn-transition-fast);
    overflow: hidden;
}

.tasknotes-plugin .agenda-view__today-button:hover {
    background: var(--tn-interactive-hover);
    border-color: var(--tn-border-color-hover);
    color: var(--tn-text-normal);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tasknotes-plugin .agenda-view__today-button:focus-visible {
    outline: 2px solid var(--tn-interactive-accent);
    outline-offset: 2px;
    border-color: var(--tn-interactive-accent);
}

.tasknotes-plugin .agenda-view__today-button:active {
    background: var(--tn-interactive-active);
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Toggle Controls */
.tasknotes-plugin .agenda-view__toggle {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
    cursor: pointer;
    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: space-between;
    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;
}

.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: var(--tn-bg-secondary);
    color: var(--tn-text-normal);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-md);
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    font-size: var(--tn-font-size-xs);
    font-weight: var(--tn-font-weight-medium);
    line-height: 1.2;
    display: inline-flex;
    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;
    }
}

/* ===== NOTES-VIEW.CSS ===== */
/* ================================================
   NOTES VIEW - BEM STRUCTURE
   ================================================ */

/* Notes View Container - Root Block */
.tasknotes-plugin .notes-view {
    padding: var(--tn-spacing-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    gap: var(--tn-spacing-sm);
    max-width: 100%;
}

/* Notes View Header */
.tasknotes-plugin .notes-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 .notes-view__title {
    font-size: var(--tn-font-size-xl);
    font-weight: var(--tn-font-weight-semibold);
    color: var(--tn-text-normal);
    margin: 0;
    line-height: 1.3;
}

.tasknotes-plugin .notes-view__date {
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-muted);
    font-weight: var(--tn-font-weight-normal);
}

.tasknotes-plugin .notes-view__actions {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .notes-view__refresh-button {
    padding: var(--tn-spacing-xs) var(--tn-spacing-md);
    background: var(--tn-bg-secondary);
    color: var(--tn-text-normal);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
    cursor: pointer;
    transition: all var(--tn-transition-fast);
    min-height: var(--tn-button-height-md);
}

.tasknotes-plugin .notes-view__refresh-button:hover {
    background: var(--tn-interactive-hover);
    border-color: var(--tn-border-color-hover);
    transform: translateY(-1px);
    box-shadow: var(--tn-shadow-light);
}

.tasknotes-plugin .notes-view__refresh-button:active {
    transform: translateY(0);
    box-shadow: none;
}

.tasknotes-plugin .notes-view__refresh-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.tasknotes-plugin .notes-view__refresh-button.is-loading {
    opacity: 0.7;
    cursor: progress;
}

/* Notes List Container */
.tasknotes-plugin .notes-view__list {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-sm);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Loading Indicator */
.tasknotes-plugin .notes-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 .notes-view__loading.is-hidden {
    display: none;
}

.tasknotes-plugin .notes-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;
}

/* Notes Container */
.tasknotes-plugin .notes-view__container {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xs);
}

/* Empty State */
.tasknotes-plugin .notes-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 .notes-view__empty-icon {
    font-size: 2rem;
    margin-bottom: var(--tn-spacing-md);
    opacity: 0.6;
}

.tasknotes-plugin .notes-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 .notes-view__empty-description {
    font-size: var(--tn-font-size-md);
    line-height: 1.6;
    max-width: 400px;
}

/* Note Item Container (wraps note cards) */
.tasknotes-plugin .notes-view__note-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 .notes-view__note-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 .notes-view__note-item:focus-within {
    border-color: var(--tn-interactive-accent);
    box-shadow: none;
}

/* Note Item Types */
.tasknotes-plugin .notes-view__note-item--daily-note {
    border-left: 4px solid var(--tn-color-daily-note);
    background: color-mix(in srgb, var(--tn-color-daily-note) 0.05, var(--tn-bg-primary));
}

.tasknotes-plugin .notes-view__note-item--has-tasks {
    border-left: 4px solid var(--tn-color-warning);
    background: color-mix(in srgb, var(--tn-color-warning) 0.05, var(--tn-bg-primary));
}

.tasknotes-plugin .notes-view__note-item--recently-modified {
    border-left: 4px solid var(--tn-interactive-accent);
    background: color-mix(in srgb, var(--tn-interactive-accent) 0.05, var(--tn-bg-primary));
}

/* Notes View Specific NoteCard Overrides */
.tasknotes-plugin .notes-view .note-card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.tasknotes-plugin .notes-view .note-card:hover {
    transform: none;
    box-shadow: none;
}

/* Stats Summary */
.tasknotes-plugin .notes-view__stats {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-md);
    padding: var(--tn-spacing-sm);
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    margin-bottom: var(--tn-spacing-md);
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
}

.tasknotes-plugin .notes-view__stats-item {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
}

.tasknotes-plugin .notes-view__stats-count {
    font-weight: var(--tn-font-weight-semibold);
    color: var(--tn-text-normal);
}

/* Responsive Design */
@media (max-width: 768px) {
    .tasknotes-plugin .notes-view {
        padding: var(--tn-spacing-xs);
        gap: var(--tn-spacing-xs);
    }
    
    .tasknotes-plugin .notes-view__header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--tn-spacing-sm);
    }
    
    .tasknotes-plugin .notes-view__actions {
        justify-content: center;
    }
    
    .tasknotes-plugin .notes-view__refresh-button {
        width: 100%;
        max-width: 200px;
    }
    
    .tasknotes-plugin .notes-view__stats {
        flex-direction: column;
        align-items: stretch;
        gap: var(--tn-spacing-sm);
    }
}

@media (max-width: 480px) {
    .tasknotes-plugin .notes-view__title {
        font-size: var(--tn-font-size-lg);
    }
    
    .tasknotes-plugin .notes-view__date {
        font-size: var(--tn-font-size-sm);
    }
    
    .tasknotes-plugin .notes-view__empty {
        padding: var(--tn-spacing-lg);
    }
    
    .tasknotes-plugin .notes-view__empty-title {
        font-size: var(--tn-font-size-md);
    }
    
    .tasknotes-plugin .notes-view__empty-description {
        font-size: var(--tn-font-size-sm);
    }
}

/* ===== 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;
}

/* ================================================
   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, #10B981);
}

.tasknotes-plugin .pomodoro-view__progress-circle--long-break {
    stroke: var(--tn-priority-high-color, #3B82F6);
}

.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, #10B981);
}

.tasknotes-plugin .pomodoro-view__status--long-break {
    color: var(--tn-priority-high-color, #3B82F6);
}

.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-sm);
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* Task Select Button */
.tasknotes-plugin .pomodoro-view__task-select-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--tn-spacing-sm) var(--tn-spacing-lg);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-lg);
    background: var(--tn-bg-secondary);
    color: var(--tn-text-normal);
    cursor: pointer;
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-normal);
    transition: all var(--tn-transition-fast);
    min-height: var(--tn-button-height-sm);
    width: 100%;
    max-width: 300px;
}

.tasknotes-plugin .pomodoro-view__task-select-button:hover {
    background: var(--tn-interactive-hover);
    border-color: var(--tn-border-color-hover);
}

.tasknotes-plugin .pomodoro-view__task-select-button--no-task {
    color: var(--tn-text-muted);
    font-style: italic;
}


/* ================================================
   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 */
.tasknotes-plugin .pomodoro-view__start-button {
    min-width: 200px;
    padding: var(--tn-spacing-lg) var(--tn-spacing-xl);
    background: var(--tn-interactive-accent);
    color: var(--tn-bg-primary);
    border: 2px solid var(--tn-interactive-accent);
    border-radius: var(--tn-radius-lg);
    font-size: var(--tn-font-size-lg);
    font-weight: var(--tn-font-weight-semibold);
    cursor: pointer;
    transition: all var(--tn-transition-fast);
    min-height: var(--tn-button-height-lg);
}

.tasknotes-plugin .pomodoro-view__start-button:hover {
    background: var(--tn-interactive-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--tn-shadow-medium);
}

.tasknotes-plugin .pomodoro-view__pause-button {
    min-width: 200px;
    padding: var(--tn-spacing-lg) var(--tn-spacing-xl);
    background: transparent;
    color: var(--tn-interactive-accent);
    border: 2px solid var(--tn-interactive-accent);
    border-radius: var(--tn-radius-lg);
    font-size: var(--tn-font-size-lg);
    font-weight: var(--tn-font-weight-semibold);
    cursor: pointer;
    transition: all var(--tn-transition-fast);
    min-height: var(--tn-button-height-lg);
}

.tasknotes-plugin .pomodoro-view__pause-button:hover {
    background: var(--tn-interactive-accent);
    color: var(--tn-bg-primary);
    transform: translateY(-1px);
    box-shadow: var(--tn-shadow-medium);
}

.tasknotes-plugin .pomodoro-view__stop-button {
    min-width: 120px;
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    background: transparent;
    color: var(--tn-text-muted);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-md);
    font-size: var(--tn-font-size-md);
    font-weight: var(--tn-font-weight-medium);
    cursor: pointer;
    transition: all var(--tn-transition-fast);
    min-height: var(--tn-button-height-md);
}

.tasknotes-plugin .pomodoro-view__stop-button:hover {
    background: var(--tn-color-error);
    color: var(--tn-bg-primary);
    border-color: var(--tn-color-error);
    transform: translateY(-1px);
    box-shadow: var(--tn-shadow-medium);
}

/* Skip Break Button */
.tasknotes-plugin .pomodoro-view__skip-break-button {
    min-width: 120px;
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    background: transparent;
    color: var(--tn-text-muted);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-md);
    font-size: var(--tn-font-size-md);
    font-weight: var(--tn-font-weight-medium);
    cursor: pointer;
    transition: all var(--tn-transition-fast);
    min-height: var(--tn-button-height-md);
}

.tasknotes-plugin .pomodoro-view__skip-break-button:hover {
    background: var(--tn-interactive-hover);
    border-color: var(--tn-interactive-accent);
    color: var(--tn-interactive-accent);
}

/* 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 */
}

.tasknotes-plugin .pomodoro-view__time-adjust-button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    color: var(--tn-text-muted);
    border: none;
    cursor: pointer;
    font-size: var(--tn-font-size-md);
    font-weight: var(--tn-font-weight-normal);
    transition: all var(--tn-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}

.tasknotes-plugin .pomodoro-view__time-adjust-button:hover {
    background: var(--tn-bg-secondary);
    color: var(--tn-interactive-accent);
    opacity: 1;
    transform: scale(1.1);
}

.tasknotes-plugin .pomodoro-view__time-adjust-button:focus {
    outline: none;
    background: var(--tn-bg-secondary);
    color: var(--tn-interactive-accent);
    opacity: 1;
}

/* 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: pointer;
    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);
    transform: translateY(-1px);
}

.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,
.tasknotes-plugin .pomodoro-view__task-select-button:focus {
    outline: 2px solid var(--tn-interactive-accent);
    outline-offset: 2px;
}

/* Time adjust buttons have their own focus styling above */


/* ===== 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;
}

/* Refresh Button */
.tasknotes-plugin .pomodoro-stats-view__refresh-button {
    padding: var(--tn-spacing-xs) var(--tn-spacing-md);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    background: var(--tn-bg-primary);
    color: var(--tn-text-normal);
    cursor: pointer;
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
    transition: all var(--tn-transition-fast);
    min-height: var(--tn-button-height-md);
}

.tasknotes-plugin .pomodoro-stats-view__refresh-button:hover {
    background: var(--tn-interactive-hover);
    border-color: var(--tn-interactive-accent);
}

/* ================================================
   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-text-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-text-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;
    }
}

/* ===== SETTINGS-VIEW.CSS ===== */
/* ================================================
   SETTINGS VIEW - BEM STRUCTURE
   ================================================ */

/* Settings Container - Root Block */
.tasknotes-plugin .settings-view {
    padding: var(--tn-spacing-md);
    height: 100%;
    overflow-y: auto;
    background: var(--tn-bg-primary);
}

/* ================================================
   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;
}

/* Tab Button */
.tasknotes-plugin .settings-view__tab-button {
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    background: var(--tn-bg-secondary);
    color: var(--tn-text-muted);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    cursor: pointer;
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
    transition: all var(--tn-transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
    min-height: var(--tn-button-height-md);
}

.tasknotes-plugin .settings-view__tab-button:hover {
    background: var(--tn-interactive-hover);
    color: var(--tn-text-normal);
    border-color: var(--tn-interactive-accent);
}

.tasknotes-plugin .settings-view__tab-button--active {
    background: var(--tn-interactive-accent);
    color: var(--tn-bg-primary);
    border-color: var(--tn-interactive-accent);
}

/* ================================================
   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);
    }
}

/* ================================================
   WARNING AND HELP SECTIONS
   ================================================ */

/* Warning Box */
.tasknotes-plugin .settings-view__warning {
    background: var(--tn-bg-error);
    border: 1px solid var(--tn-text-error);
    border-radius: var(--tn-radius-sm);
    padding: var(--tn-spacing-md);
    margin-bottom: var(--tn-spacing-lg);
    color: var(--tn-text-error);
    font-size: var(--tn-font-size-sm);
    line-height: 1.4;
}

.tasknotes-plugin .settings-view__warning-icon {
    font-weight: var(--tn-font-weight-bold);
    margin-right: var(--tn-spacing-xs);
}

/* Help Section */
.tasknotes-plugin .settings-view__help-section {
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    padding: var(--tn-spacing-md);
    margin-bottom: var(--tn-spacing-lg);
}

.tasknotes-plugin .settings-view__help-title {
    margin: 0 0 var(--tn-spacing-sm) 0;
    color: var(--tn-text-normal);
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-semibold);
}

.tasknotes-plugin .settings-view__help-list {
    margin: 0;
    padding-left: var(--tn-spacing-md);
    color: var(--tn-text-muted);
    font-size: var(--tn-font-size-sm);
    line-height: 1.4;
}

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

.tasknotes-plugin .settings-view__help-note {
    margin: var(--tn-spacing-sm) 0 0 0;
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-muted);
    font-style: italic;
}

/* Validation Note */
.tasknotes-plugin .settings-view__validation-note {
    margin: var(--tn-spacing-md) 0 0 0;
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-muted);
    font-style: italic;
    padding: var(--tn-spacing-sm);
    background: var(--tn-bg-secondary);
    border-radius: var(--tn-radius-sm);
    border-left: 3px solid var(--tn-interactive-accent);
}

/* ================================================
   FIELD MAPPING TABLE
   ================================================ */

/* Field Mapping Table */
.tasknotes-plugin .settings-view__table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--tn-spacing-md) 0;
    background: var(--tn-bg-primary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    overflow: hidden;
}

.tasknotes-plugin .settings-view__table-header {
    background: var(--tn-bg-secondary);
    color: var(--tn-text-normal);
    font-weight: var(--tn-font-weight-semibold);
    font-size: var(--tn-font-size-sm);
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--tn-border-color);
}

.tasknotes-plugin .settings-view__table-cell {
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    border-bottom: 1px solid var(--tn-border-color-hover);
    vertical-align: middle;
}

.tasknotes-plugin .settings-view__table-row:last-child .settings-view__table-cell {
    border-bottom: none;
}

.tasknotes-plugin .settings-view__table-row:hover {
    background: var(--tn-interactive-hover);
}

.tasknotes-plugin .settings-view__table-input {
    width: 100%;
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-xs);
    background: var(--tn-bg-primary);
    color: var(--tn-text-normal);
    font-size: var(--tn-font-size-sm);
    transition: border-color var(--tn-transition-fast);
}

.tasknotes-plugin .settings-view__table-input:focus {
    outline: none;
    border-color: var(--interactive-accent);
}

/* ================================================
   STATUS AND PRIORITY LISTS
   ================================================ */

/* List Headers Row */
.tasknotes-plugin .settings-view__list-headers {
    display: grid;
    grid-template-columns: 24px 1fr 1fr 80px 1fr 40px;
    gap: var(--tn-spacing-sm);
    padding: var(--tn-spacing-sm) 0;
    margin-bottom: var(--tn-spacing-xs);
    align-items: center;
    font-weight: var(--tn-font-weight-semibold);
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tasknotes-plugin .settings-view__column-header {
    text-align: center;
}

.tasknotes-plugin .settings-view__header-spacer {
    /* Empty spacer for alignment */
}

/* List Container */
.tasknotes-plugin .settings-view__list {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-xs);
    margin-bottom: var(--tn-spacing-lg);
}

/* ================================================
   LIST ITEM ROW
   ================================================ */

/* Item Row Container */
.tasknotes-plugin .settings-view__item-row {
    display: grid;
    grid-template-columns: 24px 1fr 1fr 80px 1fr 40px;
    gap: var(--tn-spacing-sm);
    align-items: center;
    padding: var(--tn-spacing-sm);
    background: var(--tn-bg-primary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    transition: all var(--tn-transition-fast);
}

.tasknotes-plugin .settings-view__item-row:hover {
    background: var(--tn-interactive-hover);
    border-color: var(--tn-interactive-accent);
}

/* Color Indicator */
.tasknotes-plugin .settings-view__color-indicator {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--indicator-color, var(--tn-text-muted));
    border: 2px solid var(--tn-bg-primary);
    box-shadow: 0 0 0 1px var(--tn-border-color);
    flex-shrink: 0;
}

/* ================================================
   FORM INPUTS
   ================================================ */

/* General Input Styling */
.tasknotes-plugin .settings-view__input {
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-xs);
    background: var(--tn-bg-primary);
    color: var(--tn-text-normal);
    font-size: var(--tn-font-size-sm);
    transition: border-color var(--tn-transition-fast);
    min-height: var(--tn-input-height-sm);
}

.tasknotes-plugin .settings-view__input:focus {
    outline: none;
    border-color: var(--interactive-accent);
}

/* Specific Input Types */
.tasknotes-plugin .settings-view__input--value,
.tasknotes-plugin .settings-view__input--label {
    width: 100%;
}

.tasknotes-plugin .settings-view__input--color {
    width: 60px;
    height: 32px;
    padding: 2px;
    cursor: pointer;
    border-radius: var(--tn-radius-xs);
}

.tasknotes-plugin .settings-view__input--weight {
    width: 70px;
    text-align: center;
}

/* ================================================
   CHECKBOX - removed custom styling
   ================================================ */

/* ================================================
   BUTTONS
   ================================================ */

/* Delete Button */
.tasknotes-plugin .settings-view__delete-button {
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    background: var(--tn-bg-error);
    color: var(--tn-text-error);
    border: 1px solid var(--tn-text-error);
    border-radius: var(--tn-radius-xs);
    font-size: var(--tn-font-size-xs);
    font-weight: var(--tn-font-weight-medium);
    cursor: pointer;
    transition: all var(--tn-transition-fast);
    white-space: nowrap;
    min-height: var(--tn-button-height-sm);
}

.tasknotes-plugin .settings-view__delete-button:hover {
    background: var(--tn-text-error);
    color: var(--tn-bg-primary);
}

/* Add Button */
.tasknotes-plugin .settings-view__add-button {
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    background: var(--tn-interactive-accent);
    color: var(--tn-bg-primary);
    border: 1px solid var(--tn-interactive-accent);
    border-radius: var(--tn-radius-sm);
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
    cursor: pointer;
    transition: all var(--tn-transition-fast);
    min-height: var(--tn-button-height-md);
}

.tasknotes-plugin .settings-view__add-button:hover {
    background: var(--tn-interactive-accent-hover);
}

/* Reset Button */
.tasknotes-plugin .settings-view__reset-button {
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    background: var(--tn-text-warning);
    color: var(--tn-bg-primary);
    border: 1px solid var(--tn-text-warning);
    border-radius: var(--tn-radius-sm);
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
    cursor: pointer;
    transition: all var(--tn-transition-fast);
    min-height: var(--tn-button-height-md);
}

.tasknotes-plugin .settings-view__reset-button:hover {
    background: var(--tn-text-warning);
    opacity: 0.9;
}

/* ================================================
   OBSIDIAN SETTING ITEMS (SCOPED)
   ================================================ */

/* Properly scoped settings styling - only affects TaskNotes settings */
.tasknotes-plugin .settings-view .setting-item {
    border: none;
    border-bottom: 1px solid var(--tn-border-color-hover);
    padding: var(--tn-spacing-md) 0;
    margin-bottom: 0;
}

.tasknotes-plugin .settings-view .setting-item:last-child {
    border-bottom: none;
}

.tasknotes-plugin .settings-view .setting-item-info {
    flex-grow: 1;
}

.tasknotes-plugin .settings-view .setting-item-name {
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    font-size: var(--tn-font-size-base);
    margin-bottom: var(--tn-spacing-xs);
}

.tasknotes-plugin .settings-view .setting-item-description {
    color: var(--tn-text-muted);
    font-size: var(--tn-font-size-sm);
    line-height: 1.4;
    margin: 0;
}

.tasknotes-plugin .settings-view .setting-item-control {
    flex-shrink: 0;
    margin-left: var(--tn-spacing-md);
}

/* Heading styles */
.tasknotes-plugin .settings-view .setting-item.setting-item-heading {
    padding-top: var(--tn-spacing-lg);
    margin-top: var(--tn-spacing-lg);
    border-top: 1px solid var(--tn-border-color);
    border-bottom: none;
    padding-bottom: var(--tn-spacing-sm);
}

.tasknotes-plugin .settings-view .setting-item.setting-item-heading:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.tasknotes-plugin .settings-view .setting-item-heading .setting-item-name {
    font-size: var(--tn-font-size-lg);
    font-weight: var(--tn-font-weight-semibold);
    color: var(--tn-text-normal);
    margin-bottom: 0;
}

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

@media (max-width: 768px) {
    .tasknotes-plugin .settings-view {
        padding: var(--tn-spacing-sm);
    }
    
    .tasknotes-plugin .settings-view__tab-nav {
        gap: var(--tn-spacing-xs);
    }
    
    .tasknotes-plugin .settings-view__tab-button {
        padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
        font-size: var(--tn-font-size-xs);
    }
    
    .tasknotes-plugin .settings-view__list-headers {
        grid-template-columns: 20px 1fr 1fr 60px 80px 32px;
        gap: var(--tn-spacing-xs);
    }
    
    .tasknotes-plugin .settings-view__item-row {
        grid-template-columns: 20px 1fr 1fr 60px 80px 32px;
        gap: var(--tn-spacing-xs);
        padding: var(--tn-spacing-xs);
    }
    
    .tasknotes-plugin .settings-view__input--color {
        width: 50px;
        height: 28px;
    }
    
    .tasknotes-plugin .settings-view__input--weight {
        width: 60px;
    }
    
    .tasknotes-plugin .settings-view__table {
        font-size: var(--tn-font-size-sm);
    }
    
    .tasknotes-plugin .settings-view__table-header,
    .tasknotes-plugin .settings-view__table-cell {
        padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    }
}

@media (max-width: 480px) {
    .tasknotes-plugin .settings-view__list-headers,
    .tasknotes-plugin .settings-view__item-row {
        grid-template-columns: 1fr;
        gap: var(--tn-spacing-xs);
        text-align: center;
    }
    
    .tasknotes-plugin .settings-view__color-indicator {
        justify-self: center;
    }
    
    .tasknotes-plugin .settings-view__input--color {
        justify-self: center;
    }
    
    .tasknotes-plugin .settings-view__delete-button {
        justify-self: center;
        max-width: 80px;
    }
}

/* ================================================
   ACCESSIBILITY & REDUCED MOTION
   ================================================ */

@media (prefers-reduced-motion: reduce) {
    .tasknotes-plugin .settings-view__tab-button,
    .tasknotes-plugin .settings-view__item-row,
    .tasknotes-plugin .settings-view__input,
    .tasknotes-plugin .settings-view__delete-button,
    .tasknotes-plugin .settings-view__add-button,
    .tasknotes-plugin .settings-view__reset-button {
        transition: none;
    }
    
    .tasknotes-plugin .settings-view__tab-content--active {
        animation: none;
    }
}

/* Focus indicators for keyboard navigation */
.tasknotes-plugin .settings-view__tab-button:focus,
.tasknotes-plugin .settings-view__input:focus,
.tasknotes-plugin .settings-view__table-input:focus,
.tasknotes-plugin .settings-view__delete-button:focus,
.tasknotes-plugin .settings-view__add-button:focus,
.tasknotes-plugin .settings-view__reset-button:focus {
    outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .tasknotes-plugin .settings-view__item-row,
    .tasknotes-plugin .settings-view__table {
        border-width: 2px;
    }
    
    .tasknotes-plugin .settings-view__color-indicator {
        border-width: 3px;
    }
    
    .tasknotes-plugin .settings-view__input,
    .tasknotes-plugin .settings-view__table-input {
        border-width: 2px;
    }
}

/* Dark mode adjustments */
.theme-dark .tasknotes-plugin .settings-view__color-indicator {
    box-shadow: 0 0 0 1px var(--tn-border-color-hover);
}

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

.theme-dark .tasknotes-plugin .settings-view__item-row {
    border-color: var(--tn-border-color-hover);
}

/* ================================================
   ICS SUBSCRIPTION FORM STYLES
   ================================================ */

/* ICS Form Containers */
.tasknotes-plugin .ics-add-subscription-form {
    margin-top: var(--tn-spacing-md);
    padding: var(--tn-spacing-md);
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-md);
}

.tasknotes-plugin .ics-form-row {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-md);
    margin-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .ics-form-row:last-child {
    margin-bottom: 0;
}

.tasknotes-plugin .ics-form-row-multi {
    flex-wrap: wrap;
    gap: var(--tn-spacing-lg);
}

.tasknotes-plugin .ics-form-row-hidden {
    display: none;
}

/* ICS Form Labels */
.tasknotes-plugin .ics-form-label {
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    white-space: nowrap;
    min-width: 80px;
}

/* ICS Form Inputs */
.tasknotes-plugin .ics-form-input {
    flex: 1;
    padding: var(--tn-spacing-sm);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    background: var(--tn-bg-primary);
    color: var(--tn-text-normal);
    font-size: var(--tn-font-size-sm);
}

.tasknotes-plugin .ics-form-select {
    flex: 1;
    padding: var(--tn-spacing-sm);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    background: var(--tn-bg-primary);
    color: var(--tn-text-normal);
    font-size: var(--tn-font-size-sm);
}

.tasknotes-plugin .ics-form-number {
    width: 80px;
    padding: var(--tn-spacing-sm);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    background: var(--tn-bg-primary);
    color: var(--tn-text-normal);
    font-size: var(--tn-font-size-sm);
}

.tasknotes-plugin .ics-form-color {
    width: 40px;
    height: 32px;
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    background: var(--tn-bg-primary);
    cursor: pointer;
}

/* ICS Form Groups */
.tasknotes-plugin .ics-form-group {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
}

/* ICS Form Checkboxes */
.tasknotes-plugin .ics-form-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
    cursor: pointer;
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-normal);
}

.tasknotes-plugin .ics-form-checkbox {
    margin: 0;
}

/* ICS Form Buttons */
.tasknotes-plugin .ics-form-button {
    padding: var(--tn-spacing-sm) var(--tn-spacing-lg);
    background: var(--tn-interactive-accent);
    color: var(--tn-text-on-accent);
    border: none;
    border-radius: var(--tn-radius-sm);
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
    cursor: pointer;
    transition: background-color var(--tn-transition-fast);
}

.tasknotes-plugin .ics-form-button:hover {
    background: var(--tn-interactive-accent-hover);
}

.tasknotes-plugin .ics-form-button:disabled {
    background: var(--tn-bg-muted);
    color: var(--tn-text-muted);
    cursor: not-allowed;
}

/* ================================================
   ICS SUBSCRIPTION LIST STYLES
   ================================================ */

/* ICS Subscription Row */
.tasknotes-plugin .ics-subscription-row {
    display: flex;
    align-items: flex-start;
    gap: var(--tn-spacing-md);
    padding: var(--tn-spacing-md);
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-md);
    margin-bottom: var(--tn-spacing-sm);
}

/* ICS Subscription Info */
.tasknotes-plugin .ics-subscription-info {
    flex: 1;
    min-width: 0;
}

.tasknotes-plugin .ics-subscription-name {
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    margin-bottom: var(--tn-spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
}

.tasknotes-plugin .ics-subscription-type-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: var(--tn-font-weight-bold);
    text-transform: uppercase;
    border-radius: var(--tn-radius-xs);
    line-height: 1;
}

.tasknotes-plugin .ics-subscription-type-badge.remote {
    background: var(--tn-color-blue-bg);
    color: var(--tn-color-blue);
}

.tasknotes-plugin .ics-subscription-type-badge.local {
    background: var(--tn-color-green-bg);
    color: var(--tn-color-green);
}

.tasknotes-plugin .ics-subscription-url {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    margin-bottom: var(--tn-spacing-xs);
    word-break: break-all;
}

.tasknotes-plugin .ics-subscription-meta {
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-faint);
}

.tasknotes-plugin .ics-subscription-error {
    font-size: var(--tn-font-size-xs);
    color: var(--tn-color-red);
    margin-top: var(--tn-spacing-xs);
}

/* ICS Subscription Actions */
.tasknotes-plugin .ics-subscription-actions {
    display: flex;
    flex-direction: row;
    gap: var(--tn-spacing-xs);
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.tasknotes-plugin .ics-subscription-toggle,
.tasknotes-plugin .ics-subscription-refresh,
.tasknotes-plugin .ics-subscription-edit,
.tasknotes-plugin .ics-subscription-delete {
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    font-size: var(--tn-font-size-xs);
    cursor: pointer;
    transition: all var(--tn-transition-fast);
    white-space: nowrap;
    min-width: 60px;
    text-align: center;
}

.tasknotes-plugin .ics-subscription-toggle.enabled {
    background: var(--tn-color-green-bg);
    color: var(--tn-color-green);
    border-color: var(--tn-color-green);
}

.tasknotes-plugin .ics-subscription-toggle.disabled {
    background: var(--tn-bg-muted);
    color: var(--tn-text-muted);
}

.tasknotes-plugin .ics-subscription-refresh {
    background: var(--tn-color-blue-bg);
    color: var(--tn-color-blue);
    border-color: var(--tn-color-blue);
}

.tasknotes-plugin .ics-subscription-refresh:hover {
    background: var(--tn-color-blue);
    color: var(--tn-text-on-accent);
}

.tasknotes-plugin .ics-subscription-edit {
    background: var(--tn-bg-secondary);
    color: var(--tn-text-normal);
}

.tasknotes-plugin .ics-subscription-edit:hover {
    background: var(--tn-interactive-hover);
    border-color: var(--tn-border-color-hover);
}

.tasknotes-plugin .ics-subscription-delete {
    background: var(--tn-color-red-bg);
    color: var(--tn-color-red);
    border-color: var(--tn-color-red);
}

.tasknotes-plugin .ics-subscription-delete:hover {
    background: var(--tn-color-red);
    color: var(--tn-text-on-accent);
}

/* ===== 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);
}