/* CSS Variables - TODO Application Design System */
:root {
  --font-size: 14px;
  --background: #ffffff;
  --foreground: oklch(0.145 0 0);
  --card: #ffffff;
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: #030213;
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.95 0.0058 264.53);
  --secondary-foreground: #030213;
  --muted: #ececf0;
  --muted-foreground: #717182;
  --accent: #e9ebef;
  --accent-foreground: #030213;
  --destructive: #d4183d;
  --destructive-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --input: transparent;
  --input-background: #f3f3f5;
  --ring: oklch(0.708 0 0);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: #030213;
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  --glass-background: rgba(0, 0, 0, 0.2);
  --glass-text-color: rgba(0, 0, 0, 0.7);
  --glass-shadow-shallow: 10px 10px 17px rgba(0, 0, 0, 0.3);
  --glass-shadow-depth: 20px 20px 30px rgba(0, 0, 0, 0.3);
  --glass-blur-shallow: blur(3px) saturate(120%);
  --glass-blur-depth: blur(5px) saturate(130%);
  
  /* TODO App specific colors */
  --success: #10b981;
  --success-foreground: #ffffff;
  --warning: #f59e0b;
  --warning-foreground: #ffffff;
  --error: #ef4444;
  --error-foreground: #ffffff;
  
  /* Priority colors - Enhanced with background variants */
  --priority-high: #ef4444;      /* Red for High priority */
  --priority-high-bg: rgba(239, 68, 68, 0.1);
  --priority-high-border: rgba(239, 68, 68, 0.3);
  --priority-medium: #f59e0b;    /* Orange for Medium priority */
  --priority-medium-bg: rgba(245, 158, 11, 0.1);
  --priority-medium-border: rgba(245, 158, 11, 0.3);
  --priority-low: #10b981;       /* Green for Low priority */
  --priority-low-bg: rgba(16, 185, 129, 0.1);
  --priority-low-border: rgba(16, 185, 129, 0.3);
  --priority-none: #6b7280;      /* Gray for No priority */
  --priority-none-bg: rgba(107, 114, 128, 0.1);
  --priority-none-border: rgba(107, 114, 128, 0.3);

  /* Checkbox states */
  --checkbox-unchecked: #6b7280;
  --checkbox-checked: #10b981;

  --accent-primary: black;
}

/* Base Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Ensure proper cursor for interactive elements */
button, 
.task-item,
.nav-button,
[onclick],
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
  cursor: pointer !important;
}

html {
  font-size: var(--font-size);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}

/* Loading Overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-spinner {
  text-align: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--border);
  border-top: 4px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Auth Error Overlay */
.auth-error-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
}

.auth-error-content {
  background: var(--card);
  padding: 2rem;
  border-radius: var(--radius);
  text-align: center;
  max-width: 400px;
  margin: 1rem;
}

.auth-retry-btn {
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  margin-top: 1rem;
}

.auth-retry-btn:hover {
  opacity: 0.9;
}

/* Main app container */
.app-container {
  height: 100vh;
  display: flex;
  background-color: var(--background);
  overflow: visible;
}

/* Navigation Sidebar */
.navigation-sidebar {
  width: 16rem;
  height: 100vh;
  background-color: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: width 0.3s ease;
  overflow: visible;
}

.navigation-sidebar.collapsed {
  width: 5.5rem;
}

.nav-collapse-toggle {
  position: absolute;
  top: 1rem;
  right: -20px;
  width: 36px;
  height: 36px;
  background: var(--glass-background);
  backdrop-filter: var(--glass-blur-shallow);
  -webkit-backdrop-filter: var(--glass-blur-shallow);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: all 0.2s ease;
  color: var(--glass-text-color);
  box-shadow: var(--glass-shadow-shallow);
}

.navigation-sidebar.collapsed .nav-collapse-toggle {
  right: -20px;
  background: var(--glass-background);
  backdrop-filter: var(--glass-blur-shallow);
  -webkit-backdrop-filter: var(--glass-blur-shallow);
  color: var(--glass-text-color);
  box-shadow: var(--glass-shadow-shallow);
}

.navigation-sidebar.collapsed .nav-collapse-toggle:hover {
box-shadow: var(--glass-shadow-depth);
backdrop-filter: var(--glass-blur-depth);
-webkit-backdrop-filter: var(--glass-blur-depth);
}

.nav-collapse-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
  fill: currentColor;
}

.nav-collapse-toggle:hover {
  transform: translateY(-2px) scale(1.05);
  background: var(--glass-background);
  color: var(--glass-text-color);
  backdrop-filter: var(--glass-blur-depth);
  -webkit-backdrop-filter: var(--glass-blur-depth);
  box-shadow: var(--glass-shadow-depth);
}

.navigation-sidebar.collapsed .collapse-arrow {
    transform: scaleX(-1);
    transform-origin: center;
}

.navigation-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: opacity 0.2s ease;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.navigation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.navigation-title {
  color: var(--sidebar-foreground);
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  height: 2.125rem;
  display: flex;
  align-items: center;
  transition: opacity 0.3s ease;
}

.navigation-sidebar.collapsed .navigation-title {
  opacity: 0;
  height: 2.125rem;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.navigation-sidebar.collapsed .nav-button span {
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, width 0.3s ease;
}

.navigation-sidebar.collapsed .nav-count {
  opacity: 0;
  width: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.navigation-sidebar.collapsed .user-info {
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, width 0.3s ease;
}

.navigation-sidebar.collapsed .chevron-icon {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.add-task-btn {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--sidebar-border);
  background-color: var(--success);
  color: var(--success-foreground);
  border-radius: 0.375rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.add-task-btn:hover {
  background-color: var(--success);
  opacity: 0.9;
  transform: scale(1.05);
}

.add-task-icon {
  width: 1rem;
  height: 1rem;
}

.navigation-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.project-overflow {
    width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.nav-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.5rem;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  background: transparent;
  position: relative;
  color: var(--sidebar-foreground);
}

.nav-button:hover {
    background-color: var(--sidebar-accent-foreground);
    color: var(--sidebar-primary-foreground);
    opacity: 80%;
}

.nav-button-active {
  background-color: var(--sidebar-primary);
  color: var(--sidebar-primary-foreground);
}

.calendar-view-toggle:hover {
  background: var(--glass-background);
  color: var(--foreground);
  transform: scale(1.05);
}

.calendar-view-toggle.active {
  background: var(--primary);
  color: var(--primary-foreground);
}

/* Glass button calendar toggle active state - black highlighted with transparency and blur */
.glass-button.calendar-view-toggle.active {
  background: rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: var(--glass-blur-shallow) !important;
  -webkit-backdrop-filter: var(--glass-blur-shallow) !important;
  color: rgba(255, 255, 255, 1) !important;
}

/* Match calendar button icon color and behavior with other glass buttons */
.glass-button.calendar-view-toggle {
  color: var(--glass-text-color);
}

.glass-button.calendar-view-toggle:hover {
  color: var(--glass-text-color);
  backdrop-filter: var(--glass-blur-depth) !important;
  -webkit-backdrop-filter: var(--glass-blur-depth) !important;
  /* Allow normal glass button hover effects (scale, background, etc.) */
}

.glass-button.calendar-view-toggle.active:hover {
  background: rgba(0, 0, 0, 0.25) !important;
  color: var(--glass-text-color);
}

/* Fix icon fill bug - remove transitions and fill effects */
.glass-button.calendar-view-toggle svg,
.glass-button#searchToggleBtn svg {
  fill: none !important;
  transition: none !important;
}

.glass-button.calendar-view-toggle:hover svg,
.glass-button#searchToggleBtn:hover svg {
  fill: none !important;
}

.calendar-view-toggle svg {
  width: 24px;
  height: 24px;
}

/* Calendar View Styles */
.calendar-view {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.calendar-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--muted-foreground);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
}

.calendar-nav-btn:hover {
  background: var(--muted);
  color: var(--foreground);
}

.calendar-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--foreground);
  margin: 0;
}

/* Week View Styles */
.week-view-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.week-header {
  display: flex;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
}

.time-header {
  width: 80px;
  min-width: 80px;
  flex-shrink: 0;
  padding: 0.75rem 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-align: center;
  border-right: 1px solid var(--border);
}

.week-days-header {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}

.week-day-name {
  background: var(--muted);
  color: var(--muted-foreground);
  font-weight: 600;
  font-size: 0.875rem;
  text-align: center;
  padding: 0.75rem 0.5rem;
  border-right: 1px solid var(--border);
}

.week-day-name:last-child {
  border-right: none;
}

.week-day-name.today {
  background: var(--primary);
  color: var(--primary-foreground);
}

.week-body {
  display: flex;
  flex-direction: column;
  max-height: 600px;
  overflow-y: auto;
}

.time-row {
  display: flex;
  border-bottom: 1px solid var(--border);
  min-height: 30px;
  position: relative;
}

.time-row:last-child {
  border-bottom: none;
}

/* Make hour boundaries (00 minute marks) more prominent */
.time-row[data-minute="0"] {
  border-top: 1px solid rgba(0, 0, 0, 0.25);
}

.time-slot {
  width: 80px;
  min-width: 80px;
  flex-shrink: 0;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: var(--foreground);
  font-weight: 500;
  text-align: center;
  border-right: 2px solid var(--border);
  background: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Add a visual line indicator extending from hour marks */
.time-row[data-minute="0"] .time-slot::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
  height: 2px;
  z-index: 1;
}

.week-day-column {
  flex: 1;
  border-right: 1px solid var(--border);
  background: var(--background);
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.week-day-column:last-child {
  border-right: none;
}

.week-day-column:hover {
  background: var(--muted);
}

.week-day-column.today {
  background: var(--accent);
}

.week-tasks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.25rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.25rem;
  overflow: hidden;
}

.week-task {
  background: var(--accent);
  color: var(--accent-foreground);
  padding: 0.25rem 0.375rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.65rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 18px;
  flex: 1 1 auto;
}

/* When there are multiple tasks in the same slot, limit individual task width */
.week-tasks.multiple-tasks .week-task {
  flex: 0 1 auto;
  max-width: calc(20% - 0.25rem);
  min-width: 60px;
}

.week-task:hover {
  background: var(--primary);
  color: var(--primary-foreground);
}

.week-task.priority-high {
  background: var(--priority-high-bg);
  border-left: 3px solid var(--priority-high);
  color: var(--priority-high);
}

.week-task.priority-medium {
  background: var(--priority-medium-bg);
  border-left: 3px solid var(--priority-medium);
  color: var(--priority-medium);
}

.week-task.priority-low {
  background: var(--priority-low-bg);
  border-left: 3px solid var(--priority-low);
  color: var(--priority-low);
}

.week-task.completed {
  opacity: 0.6;
  text-decoration: line-through;
}

.week-task.overdue {
  background: var(--destructive);
  color: var(--destructive-foreground);
  border-left: 3px solid var(--destructive);
}

.week-task-more {
  background: var(--muted);
  color: var(--muted-foreground);
  font-style: italic;
  cursor: pointer;
  text-align: center;
  border: 1px dashed var(--border);
}

.week-task-more:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}

.week-task-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* Allow flexbox to shrink below content size */
}

/* Ensure titles are visible in multiple task scenarios */
.week-tasks.multiple-tasks .week-task-title {
  min-width: 30px; /* Minimum readable width for titles */
}

.week-task-time {
  font-size: 0.65rem;
  opacity: 0.8;
  font-style: italic;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Calendar task checkbox */
.week-task-checkbox {
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 0.25rem;
}

.week-task-checkbox:checked {
  accent-color: var(--success);
}

/* Current time indicator */
.current-time-indicator {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--destructive) 10%,
    var(--destructive) 90%,
    transparent 100%);
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.current-time-indicator::before {
  content: '';
  position: absolute;
  left: 0;
  top: -4px;
  width: 10px;
  height: 10px;
  background: var(--destructive);
  border-radius: 50%;
  border: 2px solid var(--background);
}

.current-time-label {
  position: absolute;
  left: 15px;
  top: -10px;
  background: var(--destructive);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.nav-button-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: gap 0.3s ease;
}

.nav-icon {
  width: 16px;
  height: 16px;
  opacity: 0.8;
}

.nav-button span {
  font-size: 0.9rem;
  white-space: nowrap;
}

.nav-count {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  transition: all 0.2s ease;
  background-color: var(--muted);
  padding: 0.125rem 0.375rem;
  border-radius: calc(var(--radius) - 2px);
  min-width: 1.5rem;
  text-align: center;
}

.nav-button-active .nav-count {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--sidebar-primary-foreground);
}

.views-section {
  margin-bottom: 2rem;
}

.views-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
}

.views-list .nav-button {
  margin-bottom: 0.125rem;
}

/* User Section */
.user-section {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  border-top: 1px solid var(--sidebar-border);
  position: relative;
  transition: opacity 0.2s ease;
  min-height: auto;
}

.user-details {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--sidebar-foreground);
}

.user-details:hover {
  background-color: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.user-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.avatar-icon {
  width: 1rem;
  height: 1rem;
  color: var(--muted-foreground);
}

.user-info {
  flex: 1;
  text-align: left;
  transition: opacity 0.2s ease, width 0.3s ease;
}

.user-name {
  color: var(--sidebar-foreground);
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
}

.user-email {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.chevron-icon {
  width: 1rem;
  height: 1rem;
  color: var(--muted-foreground);
  transition: opacity 0.2s ease;
}

.user-details.open .chevron-icon {
  transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu {
  position: absolute;
  top: auto;
  bottom: 60px;
  right: 0;
  left: auto;
  width: 224px;
  background-color: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  visibility: hidden;
  opacity: 0;
  z-index: 1000;
  transform: translateY(10px) scale(0.95);
  transition: all 0.15s ease-out;
}

.dropdown-menu.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--popover-foreground);
  transition: background-color 0.2s ease;
  text-align: left;
}

.dropdown-item:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.dropdown-item-destructive {
  color: var(--destructive);
}

.dropdown-item-destructive:hover {
  background-color: var(--destructive);
  color: var(--destructive-foreground);
}

.dropdown-icon {
  width: 1rem;
  height: 1rem;
}

.dropdown-separator {
  height: 1px;
  background-color: var(--border);
  margin: 0.25rem 0;
}

/* Main Content */
.main-content {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
}

.task-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.task-header h1 {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--foreground);
}

.task-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.task-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bulk-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--accent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bulk-action-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  color: var(--muted-foreground);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.bulk-action-btn:hover {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

.bulk-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bulk-action-btn:disabled:hover {
  background: var(--card);
  color: var(--muted-foreground);
  border-color: var(--border);
}

.bulk-selection-count {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  font-weight: 500;
}

/* Sort and View Controls with Glass-morphism */
.task-view-controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 250, 252, 0.98) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: calc(var(--radius) + 0.25rem);
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05),
              0 2px 4px rgba(0, 0, 0, 0.03),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.task-view-controls:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08),
              0 2px 6px rgba(0, 0, 0, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: rgba(203, 213, 225, 0.9);
}

.control-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}

/* Add subtle separator between control groups */
.control-group:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(148, 163, 184, 0.2) 20%,
    rgba(148, 163, 184, 0.2) 80%,
    transparent);
}

.control-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  white-space: nowrap;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.sort-button-group,
.view-button-group {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: linear-gradient(135deg,
    rgba(241, 245, 249, 0.8) 0%,
    rgba(248, 250, 252, 0.6) 100%);
  border: 1px solid rgba(226, 232, 240, 0.5);
  border-radius: calc(var(--radius));
  padding: 0.25rem;
  box-shadow: inset 0 1px 3px rgba(148, 163, 184, 0.1);
  transition: all 0.3s ease;
}

.sort-button-group:hover,
.view-button-group:hover {
  background: linear-gradient(135deg,
    rgba(241, 245, 249, 0.9) 0%,
    rgba(248, 250, 252, 0.7) 100%);
  box-shadow: inset 0 1px 4px rgba(148, 163, 184, 0.15);
}

.sort-btn,
.view-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: calc(var(--radius) - 0.125rem);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

/* Subtle ripple effect on click */
.sort-btn::before,
.view-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.sort-btn:active::before,
.view-btn:active::before {
  width: 200px;
  height: 200px;
}

.sort-btn:hover,
.view-btn:hover {
  background: linear-gradient(135deg,
    rgba(241, 245, 249, 0.8) 0%,
    rgba(226, 232, 240, 0.6) 100%);
  color: var(--foreground);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.sort-btn-active,
.view-btn-active {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(248, 250, 252, 1) 100%);
  color: var(--foreground);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1),
              0 1px 3px rgba(0, 0, 0, 0.05),
              inset 0 1px 0 rgba(255, 255, 255, 1);
  font-weight: 600;
}

/* Color coding for sort types */
.sort-btn[data-sort="priority"].sort-btn-active {
  background: linear-gradient(135deg,
    rgba(239, 68, 68, 0.08) 0%,
    rgba(252, 165, 165, 0.05) 100%);
  border: 1px solid rgba(239, 68, 68, 0.15);
  color: rgb(220, 38, 38);
}

.sort-btn[data-sort="date"].sort-btn-active {
  background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.08) 0%,
    rgba(147, 197, 253, 0.05) 100%);
  border: 1px solid rgba(59, 130, 246, 0.15);
  color: rgb(29, 78, 216);
}

.sort-btn[data-sort="created"].sort-btn-active {
  background: linear-gradient(135deg,
    rgba(34, 197, 94, 0.08) 0%,
    rgba(134, 239, 172, 0.05) 100%);
  border: 1px solid rgba(34, 197, 94, 0.15);
  color: rgb(21, 128, 61);
}

/* Hover states for colored buttons */
.sort-btn[data-sort="priority"]:hover {
  background: linear-gradient(135deg,
    rgba(239, 68, 68, 0.1) 0%,
    rgba(252, 165, 165, 0.06) 100%);
}

.sort-btn[data-sort="date"]:hover {
  background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.1) 0%,
    rgba(147, 197, 253, 0.06) 100%);
}

.sort-btn[data-sort="created"]:hover {
  background: linear-gradient(135deg,
    rgba(34, 197, 94, 0.1) 0%,
    rgba(134, 239, 172, 0.06) 100%);
}

.sort-btn svg,
.view-btn svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

/* Sort direction indicators */
.sort-btn {
  position: relative;
  padding-right: 1.75rem; /* Make room for the arrow indicator */
}

.sort-btn::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Show arrow only for active sort button */
.sort-btn-active::after {
  opacity: 0.5;
}

/* Ascending arrow (pointing up) */
.sort-btn.sort-asc::after {
  border-bottom: 6px solid currentColor;
  border-top: none;
}

/* Descending arrow (pointing down) */
.sort-btn.sort-desc::after {
  border-top: 6px solid currentColor;
  border-bottom: none;
}

/* Enhanced hover state with arrow animation */
.sort-btn-active:hover::after {
  opacity: 1;
  animation: arrowPulse 0.6s ease infinite;
}

@keyframes arrowPulse {
  0%, 100% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(-40%);
  }
}

/* Arrow animation when direction changes */
.sort-btn.sort-asc.sort-btn-active::after,
.sort-btn.sort-desc.sort-btn-active::after {
  animation: arrowBounce 0.3s ease;
}

@keyframes arrowBounce {
  0% {
    transform: translateY(-50%) scale(0.8);
    opacity: 0;
  }
  50% {
    transform: translateY(-50%) scale(1.2);
  }
  100% {
    transform: translateY(-50%) scale(1);
    opacity: 0.5;
  }
}

/* Responsive adjustments for sort/view controls */
@media (max-width: 768px) {
  .task-view-controls {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }

  .control-group {
    justify-content: center;
    width: 100%;
  }

  /* Hide separators on mobile */
  .control-group:not(:last-child)::after {
    display: none;
  }

  .sort-button-group,
  .view-button-group {
    flex: 1;
    justify-content: center;
    width: 100%;
  }

  .sort-btn,
  .view-btn {
    flex: 1;
    justify-content: center;
  }

  .control-label {
    width: 100%;
    text-align: center;
    margin-bottom: 0.25rem;
  }
}

/* Title section with search button */
.title-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  position: relative;
}

/* Header actions container */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  max-width: 600px;
}

/* Task creation input moved to glass floating input */

.search-toggle-btn {
  background: none;
  border: none;
  padding: 0.5rem;
  border-radius: calc(var(--radius) - 0.125rem);
  cursor: pointer;
  color: var(--muted-foreground);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
}

.search-toggle-btn:hover {
  background: var(--accent);
  color: var(--foreground);
}

.search-toggle-btn:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Search wrapper with animation */
.search-wrapper {
  position: absolute;
  right: 60px;
  top: 2.8rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transition: all 0.3s ease;
  overflow: hidden;
  max-height: 0;
  z-index: 5;
}

.search-wrapper.show {
  opacity: 1;
  // transform: translateY(-50%) translateX(0);
  max-height: 60px;
}

.search-input {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--input-background);
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
}

.search-close-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  border-radius: calc(var(--radius) - 0.125rem);
  cursor: pointer;
  color: var(--muted-foreground);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-close-btn:hover {
  background: var(--accent);
  color: var(--foreground);
}

.search-close-btn:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Top Progress Indicator */
.top-progress-indicator {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  padding: 1rem 1.5rem;
  max-width: 400px;
  width: 90vw;
  animation: slideInFromTop 0.3s ease-out;
}

.top-progress-indicator.success {
  border-color: var(--success);
  background: linear-gradient(135deg, var(--card) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.top-progress-indicator.error {
  border-color: var(--error);
  background: linear-gradient(135deg, var(--card) 0%, rgba(239, 68, 68, 0.05) 100%);
}

.progress-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.progress-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--muted);
  border-top: 2px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.progress-icon.success svg {
  color: var(--success);
}

.progress-icon.error svg {
  color: var(--error);
}

.progress-message {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--foreground);
}

@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Enhanced Task Creation Input - moved to glass floating input */

/* Primary task input styles removed - using glass floating input instead */





.natural-language-create-btn,
.natural-language-close-btn {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.natural-language-create-btn {
  background-color: var(--success);
  color: var(--success-foreground);
  border-color: var(--success);
}

.natural-language-create-btn:hover {
  background-color: var(--success);
  opacity: 0.9;
  transform: scale(1.05);
}

.natural-language-close-btn {
  background: var(--card);
  color: var(--muted-foreground);
}

.natural-language-close-btn:hover {
  background: var(--accent);
  color: var(--foreground);
}

.natural-language-create-btn:focus,
.natural-language-close-btn:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.natural-language-preview {
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
  margin-top: 0.5rem;
}

.preview-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.preview-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.preview-label {
  font-weight: 500;
  color: var(--muted-foreground);
  min-width: 4rem;
}

.preview-value {
  color: var(--foreground);
  flex: 1;
}

.task-header {
  margin-bottom: 1.5rem;
}

.task-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--foreground);
}

/* Task list */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.task-item {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.task-item:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  background-color: var(--accent);
 }

.task-item.completed {
  opacity: 0.7;
}

.task-item.overdue {
  border-color: var(--error);
  background: rgba(239, 68, 68, 0.05);
}

/* Priority indicators are now handled through "!" characters in title */

/* Task item structure - matches design */
.task-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.task-checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1;
}

.task-checkbox {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  margin-top: 0.2rem;
  accent-color: var(--success);
  cursor: pointer;
  border-radius: 0.25rem;
  flex-shrink: 0;
}

.task-checkbox.checked {
  background: var(--checkbox-checked);
  border-color: var(--checkbox-checked);
  color: white;
}

.task-checkbox svg {
  width: 12px;
  height: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.task-checkbox.checked svg {
  opacity: 1;
}

/* Bulk selection checkbox */
.bulk-select-checkbox {
  width: 16px;
  height: 16px;
  border: 2px solid var(--muted-foreground);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.bulk-select-checkbox:hover {
  border-color: var(--primary);
}

.bulk-select-checkbox.checked {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.bulk-select-checkbox svg {
  width: 10px;
  height: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.bulk-select-checkbox.checked svg {
  opacity: 1;
}

/* Task item with bulk selection */
.task-item.bulk-mode {
  padding-left: 0.75rem;
}

.task-item.bulk-selected {
  background: rgba(3, 2, 19, 0.05);
  border-color: var(--primary);
}

.task-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.task-item-title {
  font-weight: 600;
  color: var(--card-foreground);
  margin: 0;
  line-height: 1.4;
  transition: all 0.2s ease;
}

.task-item.completed .task-item-title {
  text-decoration: line-through;
  color: var(--muted-foreground);
}

.task-item-description {
  color: var(--muted-foreground);
  margin: 0;
  line-height: 1.5;
  font-size: 0.875rem;
}

.task-item.completed .task-item-description {
  color: var(--muted-foreground);
  opacity: 0.8;
}

/* Markdown content styling */
.task-description.markdown-content {
  line-height: 1.5;
}

.task-description.markdown-content strong {
  font-weight: 600;
  color: var(--foreground);
}

.task-description.markdown-content em {
  font-style: italic;
}

.task-description.markdown-content code {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.125rem 0.25rem;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.85em;
}

.task-description.markdown-content a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.task-description.markdown-content a:hover {
  border-bottom-color: var(--primary);
}

.task-description.markdown-content ul,
.task-description.markdown-content ol {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.task-description.markdown-content li {
  margin: 0.25rem 0;
}

.task-description.markdown-content ul {
  list-style-type: disc;
}

.task-description.markdown-content ol {
  list-style-type: decimal;
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.task-priority {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
}

.task-priority.high {
  background: var(--priority-high-bg);
  color: var(--priority-high);
  border: 1px solid var(--priority-high-border);
}

.task-priority.medium {
  background: var(--priority-medium-bg);
  color: var(--priority-medium);
  border: 1px solid var(--priority-medium-border);
}

.task-priority.low {
  background: var(--priority-low-bg);
  color: var(--priority-low);
  border: 1px solid var(--priority-low-border);
}

.task-priority.none {
  background: var(--priority-none-bg);
  color: var(--priority-none);
  border: 1px solid var(--priority-none-border);
}

.task-due-date {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--muted-foreground);
}

.task-due-date.overdue {
  color: var(--error);
  font-weight: 500;
}

/* Task Groups - Priority-based groupings */
.task-group {
  margin-bottom: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  scroll-margin-top: 1rem; /* Add space when scrolling to group */
}

.task-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  border-bottom: 1px solid transparent;
}

.task-group-header:hover {
  background: var(--accent);
}

.task-group-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  color: var(--foreground);
}

.task-group-icon {
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
}

.task-group-name {
  font-size: 0.9rem;
  font-weight: 600;
}

.task-group-count {
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  min-width: 1.5rem;
  text-align: center;
}

.task-group-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--muted-foreground);
  transition: all 0.3s ease;
}

.task-group-toggle svg {
  transition: transform 0.3s ease;
}

.task-group.collapsed .task-group-toggle svg {
  transform: rotate(-90deg);
}

.task-group-content {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease,
              padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  opacity: 1;
  padding: 0.5rem;
}

/* Inner container wrapper for smooth grid animation */
.task-group-content > .task-group-inner {
  min-height: 0;
  overflow: hidden;
}

.task-group.collapsed .task-group-content {
  grid-template-rows: 0fr;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.task-group.expanded .task-group-content {
  grid-template-rows: 1fr;
  padding: 0.5rem;
  opacity: 1;
}

/* Smooth slide-in animation for task items within groups */
.task-group.expanded .task-group-content .task-item {
  animation: slideInFromTop 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
  transform: translateY(-10px);
}

/* Staggered animation delays for sequential appearance */
.task-group.expanded .task-group-content .task-item:nth-child(1) { animation-delay: 0.05s; }
.task-group.expanded .task-group-content .task-item:nth-child(2) { animation-delay: 0.08s; }
.task-group.expanded .task-group-content .task-item:nth-child(3) { animation-delay: 0.11s; }
.task-group.expanded .task-group-content .task-item:nth-child(4) { animation-delay: 0.14s; }
.task-group.expanded .task-group-content .task-item:nth-child(5) { animation-delay: 0.17s; }
.task-group.expanded .task-group-content .task-item:nth-child(6) { animation-delay: 0.20s; }
.task-group.expanded .task-group-content .task-item:nth-child(7) { animation-delay: 0.23s; }
.task-group.expanded .task-group-content .task-item:nth-child(8) { animation-delay: 0.26s; }
.task-group.expanded .task-group-content .task-item:nth-child(n+9) { animation-delay: 0.29s; }

/* Smooth slide animation keyframes */
@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.task-group.expanded .task-group-header {
  border-bottom-color: var(--border);
}

/* Priority-specific group styling */
.task-group-overdue {
  border-color: var(--priority-high);
  border-width: 2px;
}

.task-group-overdue .task-group-header {
  background: var(--priority-high-bg);
  border-color: var(--priority-high-border);
}

.task-group-overdue .task-group-title {
  color: var(--priority-high);
}

.task-group-overdue .task-group-count {
  background: var(--priority-high);
  color: white;
}

.task-group-high .task-group-count {
  background: var(--priority-high);
  color: white;
}

.task-group-medium .task-group-count {
  background: var(--priority-medium);
  color: white;
}

.task-group-low .task-group-count {
  background: var(--priority-low);
  color: white;
}

.task-group-none .task-group-count {
  background: var(--priority-none);
  color: white;
}

/* Task group inner wrapper for grid animation */
.task-group-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Task items within groups have reduced spacing */
.task-group-content .task-item {
  margin-bottom: 0;
}

.task-group-content .task-item:last-child {
  margin-bottom: 0;
}

/* Overdue task emphasis within groups */
.task-group-overdue .task-item {
  border-color: var(--priority-high-border);
  background: var(--priority-high-bg);
}

.task-group-overdue .task-item:hover {
  background: rgba(239, 68, 68, 0.15);
}

/* Enhanced priority indicators for grouped view */
.task-group .priority-indicator {
  font-size: 0.9rem;
  margin-right: 0.5rem;
  opacity: 0.8;
}

/* Mobile responsive adjustments for task groups */
@media (max-width: 768px) {
  .task-group {
    margin-bottom: 1rem;
  }

  .task-group-header {
    padding: 0.625rem 0.75rem;
  }

  .task-group-title {
    gap: 0.5rem;
  }

  .task-group-name {
    font-size: 0.85rem;
  }

  .task-group-count {
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
  }

  .task-group.expanded .task-group-content {
    padding: 0.375rem;
  }
}

.task-due-date svg {
  width: 12px;
  height: 12px;
}

.task-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-right: 0.75rem;
  margin-top: 1.2rem;
}

.task-project {
  font-weight: 500;
  color: var(--primary);
}

.task-time {
  color: var(--muted-foreground);
}

.task-footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.task-footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.task-item-actions {
  align-items: center;
  gap: 0.25rem;
  opacity: 1;
}

.task-item-edit, .task-item-flag {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  color: var(--muted-foreground);
  transition: all 0.2s ease;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.task-item-edit:hover {
  color: var(--primary);
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.task-item-flag:hover {
  color: var(--foreground);
}

.task-item-flag.flagged {
  color: #f59e0b;
}

/* Priority indicator styling */
.priority-indicator {
  color: var(--muted-foreground);
  font-weight: 600;
  cursor: pointer;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
  margin-right: 0.5rem;
}

.menu-high {
  color: var(--priority-high);
}

.priority-indicator.priority-high {
  color: var(--priority-high);
}
.menu-medium {
  color: var(--priority-medium);
}
.priority-indicator.priority-medium {
  color: var(--priority-medium);
}
.menu-low {
  color: var(--priority-low);
}
.priority-indicator.priority-low {
  color: var(--priority-low);
}

.priority-indicator:hover {
  background-color: var(--accent);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted-foreground);
}

.empty-icon {
  width: 48px;
  height: 48px;
  color: var(--muted-foreground);
  margin: 0 auto 1rem;
}

.empty-state h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--foreground);
}

.empty-add-btn {
  background: var(--success);
  color: var(--success-foreground);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  margin-top: 1rem;
  transition: opacity 0.2s ease;
}

.empty-add-btn:hover {
  opacity: 0.9;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: var(--card);
  border-radius: var(--radius);
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px var(--glass-background);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.modal-overlay.open .modal-content {
  transform: scale(1);
}

.add-task-modal,
.edit-task-modal {
  width: 500px;
}

.view-task-modal {
  width: 450px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--foreground);
}

.modal-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted-foreground);
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: var(--accent);
  color: var(--foreground);
}

.modal-description {
  padding: 0 1.5rem;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.modal-body {
  padding: 0 1.5rem 1.5rem;
}

/* Form Styles */
.add-task-form,
.edit-task-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.input-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--foreground);
}

.input-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.25rem;
  line-height: 1.3;
}

.input-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.input-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.preview-toggle {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.2s ease;
}

.preview-toggle:hover {
  background: var(--accent);
  color: var(--foreground);
}

.preview-toggle.active {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

/* Auto-save status indicator */
.auto-save-status {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.auto-save-status.visible {
  opacity: 1;
  transform: translateX(0);
}

.auto-save-status.saving {
  color: var(--warning);
}

.auto-save-status.saved {
  color: var(--success);
}

.auto-save-status.unsaved {
  color: var(--warning);
}

.auto-save-status.error {
  color: var(--error);
}

.auto-save-status .auto-save-icon {
  width: 12px;
  height: 12px;
  stroke-width: 2;
}

.auto-save-status.saving .auto-save-icon {
  animation: auto-save-spin 1s linear infinite;
}

@keyframes auto-save-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.markdown-preview {
  min-height: 4rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.markdown-preview:empty::before {
  content: "Nothing to preview";
  color: var(--muted-foreground);
  font-style: italic;
}

/* Enhanced markdown preview styling */
.markdown-preview strong {
  font-weight: 600;
  color: var(--foreground);
}

.markdown-preview em {
  font-style: italic;
}

.markdown-preview code {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.125rem 0.25rem;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.85em;
}

.markdown-preview a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.markdown-preview a:hover {
  border-bottom-color: var(--primary);
}

.markdown-preview ul,
.markdown-preview ol {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.markdown-preview li {
  margin: 0.25rem 0;
}

.markdown-preview ul {
  list-style-type: disc;
}

.markdown-preview ol {
  list-style-type: decimal;
}

.task-title-input,
.task-input,
.task-select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--input-background);
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}

.task-title-input:focus,
.task-input:focus,
.task-select:focus {
  outline: none;
  border-color: var(--primary);
}

.task-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--input-background);
  font-size: 0.9rem;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.task-textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.task-textarea.error {
  border-color: var(--destructive);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

.task-textarea.warning {
  border-color: var(--warning, #f59e0b);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.1);
}

.char-counter {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  text-align: right;
  margin-top: 0.25rem;
  transition: color 0.2s ease;
}

.char-counter.warning {
  color: var(--warning, #f59e0b);
  font-weight: 500;
}

.char-counter.error {
  color: var(--destructive);
  font-weight: 500;
}

.form-row {
  display: flex;
  gap: 1rem;
}

.form-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-row-triple {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
}

/* View Modal Styles */
.view-field {
  margin-bottom: 1.5rem;
}

.view-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.view-label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.view-content {
  padding: 0.75rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--text);
  min-height: 1.2rem;
  line-height: 1.4;
}

.priority-badge,
.status-badge {
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.priority-badge.priority-high {
  background: var(--priority-high-bg);
  color: var(--priority-high);
}

.priority-badge.priority-medium {
  background: var(--priority-medium-bg);
  color: var(--priority-medium);
}

.priority-badge.priority-low {
  background: var(--priority-low-bg);
  color: var(--priority-low);
}

.status-badge.status-open {
  background: var(--success-bg);
  color: var(--success);
}

.status-badge.status-completed {
  background: var(--muted-bg);
  color: var(--muted);
}

/* Priority Select Styling */
.task-select.priority-select {
  position: relative;
  background-image: none;
  padding-right: 2.5rem;
}

.task-select.priority-select option {
  padding: 0.5rem 0.75rem;
  font-weight: 500;
}

.task-select.priority-select option[value="HIGH"] {
  background: var(--priority-high-bg);
  color: var(--priority-high);
}

.task-select.priority-select option[value="MEDIUM"] {
  background: var(--priority-medium-bg);
  color: var(--priority-medium);
}

.task-select.priority-select option[value="LOW"] {
  background: var(--priority-low-bg);
  color: var(--priority-low);
}

.task-select.priority-select option[value="NONE"] {
  background: var(--priority-none-bg);
  color: var(--priority-none);
}

/* Priority select color indicator */
.priority-select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.priority-select-wrapper::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}

/*.priority-select-wrapper.priority-high::before {
  background: var(--priority-high);
}

.priority-select-wrapper.priority-medium::before {
  background: var(--priority-medium);
}

.priority-select-wrapper.priority-low::before {
  background: var(--priority-low);
}

.priority-select-wrapper.priority-none::before {
  background: var(--priority-none);
}*/

.priority-select-wrapper .task-select {
  padding-left: 2rem;
}

/* Navigation Priority Filter Buttons */
.nav-button[data-priority] {
  position: relative;
}

.nav-button[data-priority]::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.8;
}

.nav-button[data-priority="high"]::before {
  background: var(--priority-high);
}

.nav-button[data-priority="medium"]::before {
  background: var(--priority-medium);
}

.nav-button[data-priority="low"]::before {
  background: var(--priority-low);
}

/* Bulk Priority Modal Enhancements */
.bulk-priority-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 0.5rem;
  background: var(--card);
}

.bulk-priority-option:hover {
  border-color: var(--primary);
  background: var(--accent);
}

.bulk-priority-option.selected {
  border-color: var(--primary);
  background: rgba(3, 2, 19, 0.05);
}

.bulk-priority-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bulk-priority-indicator.high {
  background: var(--priority-high);
}

.bulk-priority-indicator.medium {
  background: var(--priority-medium);
}

.bulk-priority-indicator.low {
  background: var(--priority-low);
}

.bulk-priority-indicator.none {
  background: var(--priority-none);
}

.bulk-priority-label {
  flex: 1;
  font-weight: 500;
  color: var(--foreground);
}

/* Button Styles */
.add-btn,
.save-btn,
.delete-btn,
.complete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.add-btn,
.save-btn {
  background: var(--success);
  color: var(--success-foreground);
}

.add-btn:hover,
.save-btn:hover {
  opacity: 0.9;
}

.delete-btn {
  background: var(--destructive);
  color: var(--destructive-foreground);
}

.delete-btn:hover {
  opacity: 0.9;
}

.complete-btn {
  background: var(--primary);
  color: var(--primary-foreground);
}

.complete-btn:hover {
  opacity: 0.9;
}

.complete-btn.reopen {
  background: var(--warning);
  color: var(--warning-foreground);
}

.add-btn:disabled,
.save-btn:disabled,
.delete-btn:disabled,
.complete-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-loading {
  display: none;
}

.add-btn.loading .btn-text,
.save-btn.loading .btn-text,
.delete-btn.loading .btn-text,
.complete-btn.loading .btn-text {
  display: none;
}

.add-btn.loading .btn-loading,
.save-btn.loading .btn-loading,
.delete-btn.loading .btn-loading,
.complete-btn.loading .btn-loading {
  display: inline;
}

/* Form Loading States */
.form-loading input:not(.modal-close),
.form-loading textarea,
.form-loading select {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Progress Bar in Close Button */
.modal-close.progress-mode {
  cursor: default !important;
  background: transparent !important;
  border: none !important;
  padding: 4px !important;
  opacity: 1 !important;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close.progress-mode:hover {
  background: transparent !important;
}

.task-creation-progress {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: block;
}

/* Glass Input Progress Spinner */
.glass-progress-mode {
  cursor: default !important;
  background: transparent !important;
}

.glass-progress-mode:hover {
  background: transparent !important;
}

.glass-progress-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-top: 2px solid rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: block;
}

/* Ensure modal has relative positioning for the progress indicator */
.modal-content {
  position: relative;
}

.modal-overlay.form-loading .modal-header {
  position: relative;
}

/* Hide mobile menu toggle on desktop */
.mobile-menu-toggle {
  display: none;
}

.task-header-top-row {
  display: contents;
}

/* Responsive Design */
@media (max-width: 768px) {
  .navigation-sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    bottom: 0;
    z-index: 100;
    transition: left 0.3s ease;
  }

  .navigation-sidebar.open {
    left: 0;
  }

  /* Mobile Menu Toggle Button */
  .mobile-menu-toggle {
    display: block;
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: calc(var(--radius) - 0.125rem);
    cursor: pointer;
    color: var(--foreground);
    transition: all 0.2s ease;
    margin-right: 1rem;
  }

  .mobile-menu-toggle:hover {
    background: var(--accent);
  }

  .mobile-menu-toggle:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  /* Mobile Navigation Backdrop */
  .mobile-nav-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 90;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .mobile-nav-backdrop.show {
    display: block;
    opacity: 1;
  }

  /* Hide desktop collapse toggle on mobile */
  .nav-collapse-toggle {
    display: none;
  }

  .main-content {
    padding: 1rem;
  }

  .task-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .task-header-top-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    width: 100%;
  }

  .title-section {
    justify-content: space-between;
    position: static;
    flex: 1;
  }

  .search-wrapper {
    position: static;
    right: auto;
    top: auto;
    justify-content: center;
    transform: none;
  }

  .search-wrapper.show {
    transform: none;
  }

  .natural-language-wrapper {
    position: static;
    right: auto;
    left: auto;
    top: auto;
    margin: 0.5rem 0;
    border-radius: var(--radius);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
  }

  .natural-language-input {
    font-size: 0.875rem;
    padding: 0.625rem 0.875rem;
  }

  .natural-language-actions {
    flex-direction: row;
    gap: 0.5rem;
  }

  .natural-language-create-btn,
  .natural-language-close-btn {
    width: 2.25rem;
    height: 2.25rem;
  }

  .preview-content {
    gap: 0.375rem;
  }

  .preview-field {
    font-size: 0.8rem;
    gap: 0.5rem;
  }

  .preview-label {
    min-width: 3rem;
  }

  .search-input {
    min-width: 250px;
    max-width: 350px;
  }

  .form-row-split {
    grid-template-columns: 1fr;
  }

  .form-row-triple {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .modal-content {
    margin: 1rem;
    max-width: calc(100vw - 2rem);
  }

  .add-task-modal,
  .edit-task-modal {
    width: 100%;
  }

  .task-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .task-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
  }

  .task-item .task-action-btn {
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .task-header-row {
    flex-direction: column;
    gap: 0.5rem;
  }

  .task-checkbox {
    align-self: flex-start;
  }
}

/* Collapsed Sidebar Styles */
.navigation-sidebar.collapsed .navigation-header {
  justify-content: center;
}

.navigation-sidebar.collapsed .navigation-title {
  display: none;
}

.navigation-sidebar.collapsed .projects-title {
    // display: none;
}

.navigation-sidebar.collapsed .nav-button span,
.navigation-sidebar.collapsed .nav-count,
.navigation-sidebar.collapsed .views-title,
.navigation-sidebar.collapsed .user-info,
.navigation-sidebar.collapsed .chevron-icon {
  // display: none;
}

.navigation-sidebar.collapsed .nav-button {
  justify-content: center;
}

.navigation-sidebar.collapsed .nav-button-content {
  justify-content: center;
}

.navigation-sidebar.collapsed .user-details {
  justify-content: center;
}

/* Focus states for accessibility */
.nav-button:focus,
.task-checkbox:focus,
.task-action-btn:focus,
.add-task-btn:focus,
.modal-close:focus,
.add-btn:focus,
.save-btn:focus,
.delete-btn:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Project Management Styles */
.project-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.task-project-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--input-background);
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
  cursor: pointer;
}

.task-project-input:focus {
  outline: none;
  border-color: var(--primary);
}

.project-popup-btn {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--muted-foreground);
  transition: color 0.2s ease;
}

.project-popup-btn:hover {
  color: var(--foreground);
}

.project-popup {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
  display: none;
}

.project-popup.show {
  display: block;
}

.project-search-wrapper {
  padding: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.project-search-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--input-background);
  font-size: 0.85rem;
}

.project-search-input:focus {
  outline: none;
  border-color: var(--primary);
}

.project-options {
  padding: 0.25rem;
}

.project-option {
  display: block;
  width: 100%;
  padding: 0.5rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.85rem;
  border-radius: calc(var(--radius) - 2px);
  transition: background-color 0.2s ease;
}

.project-option:hover {
  background: var(--accent);
}

.project-option.selected {
  background: var(--primary);
  color: var(--primary-foreground);
}

/* Projects Section Styles */
.projects-section {
  margin-top: 1.5rem;
}

.projects-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
}

.projects-list {
  margin-bottom: 0.125rem;
}

.project-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  margin-bottom: 0.125rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: var(--sidebar-foreground);
  text-decoration: none;
  font-size: 0.85rem;
}

.project-item:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.project-item.active {
  background: var(--sidebar-primary);
  color: var(--sidebar-primary-foreground);
}

.project-item-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.project-icon {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.project-count {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  background: var(--muted);
  padding: 0.125rem 0.375rem;
  border-radius: 0.75rem;
  min-width: 1.25rem;
  text-align: center;
}

.nav-count.count-updated {
  background: var(--primary);
  color: var(--primary-foreground);
  transform: scale(1.1);
  transition: all 0.3s ease;
}

.project-count.count-updated {
  background: var(--primary);
  color: var(--primary-foreground);
  transform: scale(1.1);
  transition: all 0.3s ease;
}

/* Project Management Enhancements */
.projects-empty {
  text-align: center;
  padding: 1rem;
  color: var(--muted-foreground);
}

.projects-empty p {
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}

.create-project-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  border-radius: var(--radius);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.create-project-btn:hover {
  background: color-mix(in srgb, var(--primary) 90%, black);
  transform: translateY(-1px);
}

.projects-header {
  padding: 0 0.5rem 0.5rem 0.5rem;
  border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: 0.5rem;
}

.project-nav-item {
  flex: 1;
  margin-bottom: 0;
}

.project-color-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.project-name {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-stats {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.overdue-badge {
  background: var(--destructive);
  color: var(--destructive-foreground);
  font-size: 0.65rem;
  padding: 0.125rem 0.25rem;
  border-radius: 0.5rem;
  font-weight: 600;
}

/* Project Navigation Wrapper with Delete Button */
.project-nav-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 0.125rem;
}

.project-nav-wrapper:hover .project-delete-btn {
  opacity: 1;
  visibility: visible;
}

project-nav-wrapper:hover #completedCount {
    visibility: hidden;
}

.project-delete-btn {
  position: absolute;
  right: 0.51rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--sidebar-primary);
  border: none;
  color: var(--sidebar-primary-foreground);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.project-delete-btn:hover {
  background: var(--destructive);
  color: var(--destructive-foreground);
  opacity: 1 !important;
}

.project-delete-btn:focus {
  opacity: 1;
  visibility: visible;
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.project-delete-btn svg {
  width: 14px;
  height: 14px;
}

/* Project Option Enhancements */
.project-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  cursor: pointer;
  border-radius: calc(var(--radius) - 2px);
  transition: background-color 0.2s ease;
}

.project-option:hover {
  background: var(--accent);
}

.project-option.selected {
  background: var(--primary);
  color: var(--primary-foreground);
}

.project-option-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.project-option-content {
  flex: 1;
  min-width: 0;
}

.project-option-name {
  font-weight: 500;
  margin-bottom: 0.125rem;
}

.project-option-description {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-option.selected .project-option-description {
  color: color-mix(in srgb, var(--primary-foreground) 80%, transparent);
}

.project-option-stats {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-weight: 500;
}

.project-option.selected .project-option-stats {
  color: var(--primary-foreground);
}

.project-option-create {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  cursor: pointer;
  border-radius: calc(var(--radius) - 2px);
  transition: background-color 0.2s ease;
  color: var(--primary);
  font-weight: 500;
  border-top: 1px solid var(--border);
}

.project-option-create:hover {
  background: var(--accent);
}

.project-option-create svg {
  width: 14px;
  height: 14px;
}

/* Project Autocomplete Styles */
.project-autocomplete-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

.task-project-autocomplete {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--input-background);
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}

.task-project-autocomplete:focus {
  outline: none;
  border-color: var(--primary);
}

.project-autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  z-index: 100;
  max-height: 250px;
  overflow-y: auto;
  margin-top: 0.25rem;
}

.project-autocomplete-options {
  padding: 0.25rem;
}

.project-options-section {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
}

.project-options-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.project-autocomplete-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  cursor: pointer;
  border-radius: calc(var(--radius) - 2px);
  transition: background-color 0.2s ease;
}

.project-autocomplete-option:hover,
.project-autocomplete-option.highlighted {
  background: var(--accent);
}

.project-autocomplete-option.project-create-option {
  color: var(--primary);
  font-weight: 500;
}

.project-autocomplete-option.project-create-option:hover,
.project-autocomplete-option.project-create-option.highlighted {
  background: var(--primary);
  color: var(--primary-foreground);
}

.project-option-content {
  flex: 1;
  min-width: 0;
}

.project-option-name {
  font-weight: 500;
  margin-bottom: 0.125rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.project-option-description,
.project-option-tasks {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-create-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Project Modal Styles */
.project-create-modal, .project-edit-modal {
  max-width: 500px;
}


.color-preset {
  width: 32px;
  height: 32px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.color-preset:hover {
  border-color: var(--ring);
  transform: scale(1.1);
}

.color-preset.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary);
}


/* Recurring Task Configuration Styles */
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.task-checkbox-input {
  opacity: 0;
  position: absolute;
  width: 1px;
  height: 1px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  user-select: none;
}

.checkbox-icon {
  width: 16px;
  height: 16px;
  color: var(--muted-foreground);
  transition: color 0.2s ease;
}

.task-checkbox-input:checked + .checkbox-label .checkbox-icon {
  color: var(--primary);
}

.recurring-options {
  background: var(--accent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-top: 0.5rem;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.weekdays-selector {
  margin-top: 1rem;
}

.weekdays-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.weekday-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.weekday-option input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  width: 1px;
  height: 1px;
}

.weekday-option span {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.2s ease;
  background: var(--card);
}

.weekday-option input:checked + span {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

.weekday-option:hover span {
  border-color: var(--primary);
}

.custom-options {
  margin-top: 1rem;
}

.interval-unit-text {
  font-size: 0.9rem;
  color: var(--muted-foreground);
  font-weight: 500;
  padding: 0.75rem 0;
}

/* Form Row Split Enhancement */
.form-row-split .input-group:first-child {
  flex: 1;
}

.form-row-split .input-group:last-child {
  flex: 1;
}

/* Timezone Display Styles */
.user-timezone {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
}

.user-timezone::before {
  content: "🌍";
  margin-right: 0.25rem;
  font-size: 0.7rem;
}

/* Timezone Settings Modal */
.timezone-settings-modal {
  width: 100%;
  max-width: 500px;
}

/* Timezone dropdown styles matching priority dropdown */
.timezone-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.timezone-text {
  font-size: 0.9rem;
  font-weight: 500;
}

.timezone-preview {
  background: var(--muted);
  border-radius: var(--radius);
  padding: 1rem;
  margin: 1rem 0;
  border: 1px solid var(--border);
}

.timezone-preview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.timezone-preview-item:last-child {
  margin-bottom: 0;
}

.preview-label {
  font-size: 0.9rem;
  color: var(--muted-foreground);
  font-weight: 500;
}

.preview-time,
.preview-timezone {
  font-size: 0.9rem;
  color: var(--foreground);
  font-weight: 600;
  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
}

.preview-time {
  color: var(--primary);
}

/* Task Due Date with Timezone */
.task-due-date {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted-foreground);
}

.task-due-date.overdue {
  color: var(--destructive);
}

.task-due-date svg {
  flex-shrink: 0;
}

/* Enhanced timezone display in task modals */
.timezone-hint {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.25rem;
  font-style: italic;
}

/* Responsive timezone display */
@media (max-width: 768px) {
  .user-timezone {
    font-size: 0.7rem;
  }

  .timezone-preview {
    padding: 0.75rem;
  }

  .timezone-preview-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .preview-time,
  .preview-timezone {
    font-size: 0.85rem;
  }
}

/* Navigation collapsed state */
.navigation-sidebar.collapsed .user-timezone {
  display: none;
}

/* Print styles */
@media print {
  .navigation-sidebar,
  .task-actions,
  .task-controls,
  .project-popup,
  .recurring-options,
  .timezone-settings-modal {
    display: none;
  }

  .main-content {
    padding: 0;
  }

  .task-item {
    break-inside: avoid;
    border: 1px solid #ccc;
    margin-bottom: 0.5rem;
  }

  .user-timezone {
    display: none;
  }
}

/* Natural Language Parsing Styles */
.natural-language-section {
  background: linear-gradient(135deg, var(--accent) 0%, rgba(233, 235, 239, 0.5) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.natural-language-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.natural-language-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 0.125rem);
  background: var(--background);
  color: var(--foreground);
  font-size: var(--font-size);
  transition: all 0.2s ease;
}

.natural-language-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(3, 2, 19, 0.1);
}

.natural-language-input::placeholder {
  color: var(--muted-foreground);
  font-style: italic;
}

.natural-language-parse-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 1rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  border-radius: calc(var(--radius) - 0.125rem);
  font-size: var(--font-size);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.natural-language-parse-btn:hover {
  background: oklch(0.2 0 0);
  transform: translateY(-1px);
}

.natural-language-parse-btn:active {
  transform: translateY(0);
}

.natural-language-parse-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.natural-language-preview {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 0.125rem);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.preview-title {
  font-weight: 600;
  color: var(--foreground);
}

.preview-confidence {
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}

.preview-confidence.high {
  background: var(--success);
  color: var(--success-foreground);
}

.preview-confidence.medium {
  background: var(--warning);
  color: var(--warning-foreground);
}

.preview-confidence.low {
  background: var(--muted);
  color: var(--muted-foreground);
}

.preview-content {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.preview-item {
  display: flex;
  color: var(--foreground);
  font-size: 0.875rem;
}

.preview-item strong {
  min-width: 80px;
  font-weight: 600;
  color: var(--muted-foreground);
}

.preview-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.preview-apply-btn,
.preview-create-btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 0.125rem);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.preview-apply-btn {
  background: var(--background);
  color: var(--foreground);
}

.preview-apply-btn:hover {
  background: var(--accent);
}

.preview-create-btn {
  background: var(--success);
  color: var(--success-foreground);
  border-color: var(--success);
}

.preview-create-btn:hover {
  background: #059669;
  border-color: #059669;
}


/* Natural Language Loading State */
.natural-language-parse-btn.loading {
  position: relative;
  color: transparent;
}

.natural-language-parse-btn.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Responsive Task Creation and Progress */
@media (max-width: 768px) {
  .top-progress-indicator {
    top: 0.5rem;
    width: 95vw;
    padding: 0.875rem 1.25rem;
  }

  .progress-message {
    font-size: 0.85rem;
  }

  .header-actions {
    flex-direction: column;
    gap: 0.5rem;
    max-width: none;
  }

  .search-toggle-btn {
    order: 2;
    align-self: flex-end;
  }

  /* task-creation-wrapper removed - using glass floating input */
}

/* Responsive Natural Language */
@media (max-width: 768px) {
  .natural-language-wrapper {
    flex-direction: column;
    align-items: stretch;
  }

  .natural-language-parse-btn {
    justify-content: center;
  }

  .preview-actions {
    flex-direction: column;
  }

  .preview-apply-btn,
  .preview-create-btn {
    justify-content: center;
  }
}

/* Delete Project Confirmation Modal Styles */
.delete-project-modal {
  max-width: 600px;
  width: 95%;
}

.warning-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--warning);
  font-weight: 500;
  background: var(--warning-bg, rgba(245, 158, 11, 0.1));
  padding: 0.75rem 1rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--warning-border, rgba(245, 158, 11, 0.3));
  margin-bottom: 1.5rem;
}

.warning-text svg {
  flex-shrink: 0;
}

.delete-project-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.project-info-section h3,
.confirmation-section h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}

.project-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  background: var(--muted);
  border-radius: calc(var(--radius) - 2px);
}

.stat-label {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  font-weight: 500;
}

.stat-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--foreground);
}

.confirmation-section p {
  color: var(--muted-foreground);
  margin-bottom: 1rem;
}

.validation-message {
  font-size: 0.875rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0;
  min-height: 1.5rem;
}

.validation-message.error {
  color: var(--destructive);
}

.validation-message.success {
  color: var(--success);
}

.open-tasks-warning {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}

.warning-box {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--destructive-bg, rgba(212, 24, 61, 0.1));
  padding: 1rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--destructive-border, rgba(212, 24, 61, 0.3));
  margin-bottom: 1rem;
}

.warning-box svg {
  color: var(--destructive);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.warning-box strong {
  color: var(--destructive);
  font-weight: 600;
}

.warning-box p {
  margin: 0.5rem 0 0 0;
  color: var(--muted-foreground);
}

.reassignment-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  transition: all 0.2s ease;
}

.radio-option:hover {
  background: var(--accent);
}

.radio-option input[type="radio"] {
  margin: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.radio-label {
  font-weight: 500;
  color: var(--foreground);
  flex: 1;
}

.reassignment-details {
  padding: 1rem;
  background: var(--accent);
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--border);
}

.reassignment-details .input-group {
  margin-bottom: 0;
}

/* Responsive adjustments for delete modal */
@media (max-width: 768px) {
  .delete-project-modal {
    max-width: none;
    width: 100%;
    margin: 1rem;
  }
  
  .project-stats-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .warning-box {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .radio-group {
    gap: 0.75rem;
  }
}


/* Screen reader support */
.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;
}

/* Focus trap for modals */
.modal-overlay[aria-hidden="false"] {
  display: flex;
}

.modal-overlay[aria-hidden="true"] {
  display: none;
}

/* ========================================
   Reusable Dropdown Components
   ======================================== */

/* Base Dropdown Wrapper */
.dropdown-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Dropdown Trigger (Input/Button) */
.dropdown-trigger {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--input-background);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.dropdown-trigger:focus {
  outline: none;
  border-color: var(--primary);
}

.dropdown-trigger.dropdown-open {
  border-color: var(--primary);
}

/* Dropdown Arrow/Chevron */
.dropdown-chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
  color: var(--muted-foreground);
}

.dropdown-trigger.dropdown-open .dropdown-chevron {
  transform: rotate(180deg);
}

/* Dropdown Menu Container */
.dropdown-menu-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  z-index: 100;
  max-height: 250px;
  overflow-y: auto;
  margin-top: 0.25rem;
  display: none;
}

.dropdown-menu-container.open {
  display: block;
}

/* Dropdown Menu Content */
.dropdown-menu-content {
  padding: 0.25rem;
}

/* Dropdown Options Section */
.dropdown-section {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
}

.dropdown-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Dropdown Option Item */
.dropdown-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  cursor: pointer;
  border-radius: calc(var(--radius) - 2px);
  transition: background-color 0.2s ease;
  color: var(--foreground);
}

.dropdown-option:hover,
.dropdown-option.highlighted {
  background: var(--accent);
  color: var(--accent-foreground);
}

.dropdown-option.selected {
  background: var(--primary);
  color: var(--primary-foreground);
}

.dropdown-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dropdown-option.disabled:hover {
  background: transparent;
}

/* Dropdown Option Content */
.dropdown-option-content {
  flex: 1;
  min-width: 0;
}

.dropdown-option-title {
  font-weight: 500;
  margin-bottom: 0.125rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dropdown-option-description {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  line-height: 1.3;
}

/* Dropdown Option Icon */
.dropdown-option-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* Dropdown Option Badge/Count */
.dropdown-option-badge {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  background: var(--muted);
  padding: 0.125rem 0.375rem;
  border-radius: 0.75rem;
  min-width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}

/* Special Option Types */
.dropdown-option.create-option {
  color: var(--primary);
  font-weight: 500;
}

.dropdown-option.create-option:hover,
.dropdown-option.create-option.highlighted {
  background: var(--primary);
  color: var(--primary-foreground);
}

.dropdown-option.destructive-option {
  color: var(--destructive);
}

.dropdown-option.destructive-option:hover,
.dropdown-option.destructive-option.highlighted {
  background: var(--destructive);
  color: var(--destructive-foreground);
}

/* Search/Filter Input in Dropdown */
.dropdown-search {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--input-background);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.dropdown-search:focus {
  outline: none;
  border-color: var(--primary);
}



@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Dropdown Separator */
.dropdown-separator {
  height: 1px;
  background-color: var(--border);
  margin: 0.25rem 0;
}

/* Multi-select specific styles */
.dropdown-option.multi-select {
  padding-left: 2.5rem;
  position: relative;
}

.dropdown-option-checkbox {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .dropdown-menu-container {
    max-height: 200px;
  }
  
  .dropdown-option {
    padding: 0.625rem 0.5rem;
  }
  
  .dropdown-option-title {
    font-size: 0.9rem;
  }
  
  .dropdown-option-description {
    font-size: 0.75rem;
  }
}

/* Priority-specific dropdown styles */
.priority-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.priority-option-none .dropdown-option-icon {
  color: var(--muted-foreground);
}

.priority-option-low .dropdown-option-icon {
  color: #10b981; /* Green */
}

.priority-option-medium .dropdown-option-icon {
  color: #f59e0b; /* Orange */
}

.priority-option-high .dropdown-option-icon {
  color: #ef4444; /* Red */
}

.dropdown-trigger[data-value="NONE"] .priority-text {
  color: var(--muted-foreground);
}

.dropdown-trigger[data-value="LOW"] .priority-text {
  color: #10b981;
  font-weight: 500;
}

.dropdown-trigger[data-value="MEDIUM"] .priority-text {
  color: #f59e0b;
  font-weight: 500;
}

.dropdown-trigger[data-value="HIGH"] .priority-text {
  color: #ef4444;
  font-weight: 500;
}


/* ================================
   Enhanced Settings Styles
   ================================ */

.settings-input-group {
  margin-bottom: 1.5rem;
}

.settings-label {
  display: block;
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.settings-dropdown-trigger {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  color: var(--foreground);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.settings-dropdown-trigger:hover {
  border-color: var(--primary);
}

.settings-dropdown-trigger:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.settings-input-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.25rem;
  font-style: italic;
}

/* ================================
   Toggle Switch Styles
   ================================ */

.toggle-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
}

.toggle-label-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.toggle-switch-wrapper {
  flex-shrink: 0;
}

/* Hide the default checkbox */
.toggle-switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Toggle switch container */
.toggle-switch-label {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  cursor: pointer;
  user-select: none;
}

/* Toggle switch background track */
.toggle-switch-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

/* Toggle switch knob/circle */
.toggle-switch-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 2px;
  top: 2px;
  background-color: white;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Checked state - background */
.toggle-switch-input:checked + .toggle-switch-label .toggle-switch-slider {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* Checked state - knob position */
.toggle-switch-input:checked + .toggle-switch-label .toggle-switch-slider::before {
  transform: translateX(24px);
  background-color: white;
}

/* Hover states */
.toggle-switch-label:hover .toggle-switch-slider {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.toggle-switch-input:checked + .toggle-switch-label:hover .toggle-switch-slider {
  box-shadow: 0 0 0 3px rgba(3, 2, 19, 0.1);
}

/* Focus states for accessibility */
.toggle-switch-input:focus + .toggle-switch-label .toggle-switch-slider {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Disabled state */
.toggle-switch-input:disabled + .toggle-switch-label {
  opacity: 0.5;
  cursor: not-allowed;
}

.toggle-switch-input:disabled + .toggle-switch-label .toggle-switch-slider {
  cursor: not-allowed;
}

/* Active/pressed state */
.toggle-switch-label:active .toggle-switch-slider::before {
  width: 22px;
}

.toggle-switch-input:checked + .toggle-switch-label:active .toggle-switch-slider::before {
  transform: translateX(20px);
  width: 22px;
}

/* Master toggle special styling */
#emailNotificationsToggle:checked + .toggle-switch-label .toggle-switch-slider {
  background-color: var(--success);
  border-color: var(--success);
}

#emailNotificationsToggle:checked + .toggle-switch-label:hover .toggle-switch-slider {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Dependent toggles styling when disabled */
.toggle-setting.disabled {
  opacity: 0.6;
}

.toggle-setting.disabled .toggle-switch-input {
  pointer-events: none;
}

.toggle-setting.disabled .toggle-switch-label {
  cursor: not-allowed;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .toggle-setting {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .toggle-switch-wrapper {
    align-self: flex-end;
  }
}

.week-start-display,
.timezone-display {
  display: flex;
  align-items: center;
  flex: 1;
}

.week-start-text,
.timezone-text {
  font-size: 0.9rem;
}

.settings-save-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

.settings-save-btn {
  min-width: 140px;
  padding: 0.75rem 1.5rem;
}

/* Responsive settings */
@media (max-width: 768px) {
  .settings-save-section {
    justify-content: stretch;
  }
  
  .settings-save-btn {
    width: 100%;
  }
  
  .settings-input-group {
    margin-bottom: 1.25rem;
  }
}

/* ================================
   Calendar Toggle Button Styles
   ================================ */

.title-with-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}

.calendar-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  color: var(--foreground);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.calendar-toggle-btn:hover {
  background: var(--accent);
  border-color: var(--primary);
}

.calendar-toggle-btn.active {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

.calendar-toggle-btn:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}


/* Responsive calendar toggle */
@media (max-width: 768px) {
  .title-with-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  
  .calendar-toggle-btn {
    justify-content: center;
    padding: 0.75rem 1rem;
  }
}

@media (max-width: 480px) {
  .calendar-toggle-btn {
    padding: 0.5rem;
    min-width: 40px;
    justify-content: center;
  }
}

/* Week view responsive adjustments */
@media (max-width: 768px) {
  .time-header,
  .time-slot {
    width: 60px;
    min-width: 60px;
    font-size: 0.6875rem;
    padding: 0.375rem 0.25rem;
  }
  
  .week-body {
    max-height: 500px;
  }
}

@media (max-width: 480px) {
  .time-header,
  .time-slot {
    width: 50px;
    min-width: 50px;
    font-size: 0.625rem;
    padding: 0.25rem;
  }
  
  .week-body {
    max-height: 400px;
  }
}

/* Glass Design Button Styles - Apple-inspired translucent design */
.glass-button {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--glass-background);
    backdrop-filter: blur(3px) saturate(120%);
    -webkit-backdrop-filter: blur(3px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: var(--glass-shadow-shallow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    padding: 0;
    margin-bottom: 16px;
}

.glass-button:hover {
    transform: translateY(-2px) scale(1.05);
    background: --var(--glass-background)
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    box-shadow: var(--glass-shadow-depth);
}

.glass-button:active {
    transform: translateY(-1px) scale(1.02);
    background: rgba(255, 255, 255, 0.2);
}


.glass-button:focus {
    outline: none;
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.12),
        0 3px 10px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 0 2px rgba(59, 130, 246, 0.5);
}

.glass-button svg {
    width: 24px;
    height: 24px;
    /*fill: rgba(255, 255, 255, 0.9);*/
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    transition: all 0.2s ease;
}

.glass-button:hover svg {
    fill: rgba(255, 255, 255, 1);
}

/* Main Content Transition */
.main-content {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-content.search-active,
.main-content.task-active {
    /* opacity: 0.3;*/
    transform: scale(0.98);
   /* filter: blur(2px); */
}

/* Floating Buttons Container */
.floating-buttons-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glass Task Input */
.glass-task-input-container {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(3px) saturate(120%);
    -webkit-backdrop-filter: blur(3px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0;
    padding: 0;
    height: 48px;
    width: 0;
    overflow: hidden;
    box-shadow: none;
    opacity: 1;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-task-input-container.show {
    width: 525px;
    padding: 0 16px;
    border-radius: 24px;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Search button animation when task input is active */
#searchToggleBtn {
    transform: translateX(0); /* Explicit default position */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Only apply on desktop - mobile uses absolute positioning */
@media (min-width: 769px) {
    .floating-buttons-container.task-input-active #searchToggleBtn {
        /*transform: translateX(-10px);  Move left by input width (525px) to maintain same gap */
    }

    /* Ensure explicit reset when not active */
    .floating-buttons-container:not(.task-input-active) #searchToggleBtn {
        transform: translateX(10);
    }
}

.glass-task-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: rgba(0, 0, 0, 0.9);
    font-size: 14px;
    padding: 0;
    margin-right: 8px;
}

.glass-task-input::placeholder {
    color: rgba(0, 0, 0, 0.6);
}

.glass-task-close {
    background: none;
    border: none;
    color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.glass-task-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.9);
    transform: scale(1.05);
}

/* Glass Search Input */
.glass-search-input-container {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(3px) saturate(120%);
    -webkit-backdrop-filter: blur(3px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0;
    padding: 0;
    height: 48px;
    width: 0;
    overflow: hidden;
    box-shadow: none;
    opacity: 1;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-search-input-container.show {
    width: 300px;
    padding: 0 16px;
    border-radius: 24px;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Responsive task and search containers for mobile devices */
@media (max-width: 768px) {
    .glass-task-input-container {
        position: fixed;
        top: auto;
        bottom: 90px; /* Position above the buttons - same as search input */
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        margin: 0;
        width: 0;
    }
    
    .glass-task-input-container.show {
        width: calc(100vw - 32px); /* Full width minus margins */
        max-width: 400px; /* Reasonable max width */
    }
    
    .glass-search-input-container {
        position: fixed;
        top: auto;
        bottom: 90px; /* Position above the buttons */
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        margin: 0;
        width: 0;
    }
    
    .glass-search-input-container.show {
        width: calc(100vw - 32px); /* Full width minus margins */
        max-width: 400px; /* Reasonable max width */
    }
}

@media (max-width: 480px) {
    .floating-buttons-container {
        right: 16px; /* Reduce right margin on mobile */
        gap: 12px; /* Tighter gap between buttons */
    }
    
    .glass-task-input-container {
        position: fixed;
        top: auto;
        bottom: 90px; /* Position above the buttons - same as search input */
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        margin: 0;
        width: 0;
    }
    
    .glass-task-input-container.show {
        width: calc(100vw - 24px); /* Full width with minimal margins */
        max-width: 350px; /* Reasonable max width for small screens */
    }
    
    .glass-search-input-container {
        position: fixed;
        top: auto;
        bottom: 90px; /* Position above the buttons */
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        margin: 0;
        width: 0;
    }
    
    .glass-search-input-container.show {
        width: calc(100vw - 24px); /* Full width with minimal margins */
        max-width: 350px; /* Reasonable max width for small screens */
    }
}

/* Animation no longer needed - using width transition instead */

.glass-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: rgba(0, 0, 0, 0.9);
    font-size: 14px;
    padding: 0;
    margin-right: 8px;
}

.glass-search-input::placeholder {
    color: rgba(0, 0, 0, 0.6);
}

.glass-search-close {
    background: none;
    border: none;
    color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.glass-search-close:hover {
    color: rgba(0, 0, 0, 1);
    background: rgba(0, 0, 0, 0.1);
}

/* Floating Button Sizes */
.glass-floating-button {
    width: 56px;
        height: 56px;
}


.glass-floating-button svg {
    width: 24px;
    height: 24px;
}

/* Glass button adaptations for existing elements */
.search-toggle-btn.glass-style,
.calendar-view-toggle.glass-style {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(255, 255, 255, 0.9);
}

.search-toggle-btn.glass-style:hover,
.calendar-view-toggle.glass-style:hover {
    transform: translateY(-2px) scale(1.05);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 6px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 1);
}

.search-toggle-btn.glass-style:active,
.calendar-view-toggle.glass-style:active {
    transform: translateY(-1px) scale(1.02);
    background: rgba(255, 255, 255, 0.2);
}

/* Unified Glass Textbox Components - Apple-inspired translucent design */
.glass-unified-textbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--glass-background);
    backdrop-filter: var(--glass-blur-shallow);
    -webkit-backdrop-filter: var(--glass-blur-shallow);
    box-shadow: var(--glass-shadow-shallow);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 16px;
    overflow: hidden;
}

/* Add subtle directional black borders */
.glass-unified-textbox::before {
    content: '';
    position: absolute;
    top: -0.5px;
    left: -0.5px;
    right: -0.5px;
    bottom: -0.5px;
    border-radius: 50%;
    /* border: 1px solid transparent;
    border-top: 1px solid var(--glass-background);
    border-right: 1px solid rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-left: 1px solid rgba(0, 0, 0, 0.15); */
    pointer-events: none;
}

.glass-unified-textbox:hover {
    transform: translateY(-2px) scale(1.05);
    background: var(--glass-background);
    backdrop-filter: var(--glass-blur-depth);
    -webkit-backdrop-filter: var(--glass-blur-depth);
    box-shadow: var(--glass-shadow-depth);
}

.glass-unified-textbox:active {
    transform: translateY(-1px) scale(1.02);
    background: rgba(255, 255, 255, 0.2);
}

/* Expanded state */
.glass-unified-textbox.expanded {
    width: 400px;
    border-radius: 28px;
    justify-content: flex-start;
    padding: 0 16px;
    cursor: text;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.glass-unified-textbox.expanded::before {
    border-radius: 28px;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    border-right: 1px solid var(--glass-background);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.glass-unified-textbox.expanded:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.12),
        0 3px 10px rgba(0, 0, 0, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.glass-unified-textbox.expanded:hover::before {
    border-top: 1px solid var(--glass-background);
    border-right: 1px solid rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    border-left: 1px solid rgba(0, 0, 0, 0.18);
}

.glass-unified-textbox.expanded:active {
    transform: none;
    background: rgba(255, 255, 255, 0.15);
}

/* Icon styling */
.glass-textbox-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.glass-textbox-icon svg {
    width: 24px;
    height: 24px;
    color: var(--glass-text-color);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    transition: all 0.2s ease;
}

.glass-unified-textbox:hover .glass-textbox-icon svg {
    color: var(--glass-text-color);
}

.glass-add-textbox .glass-textbox-icon svg {
    width: 24px;
    height: 24px;
}

/* Input field styling */
.glass-unified-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: rgba(0, 0, 0, 0.9);
    font-size: 14px;
    padding: 0;
    margin-left: 12px;
    margin-right: 8px;
    width: 0;
    opacity: 0;
    transition: all 0.3s ease;
}

.glass-unified-textbox.expanded .glass-unified-input {
    width: auto;
    opacity: 1;
}

.glass-unified-input::placeholder {
    color: rgba(0, 0, 0, 0.6);
}

/* Close button styling */
.glass-unified-close {
    background: none;
    border: none;
    color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    opacity: 0;
}

.glass-unified-textbox.expanded .glass-unified-close {
    opacity: 1;
}

.glass-unified-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.9);
    transform: scale(1.05);
}

/* Progress spinner for add task */
.glass-progress-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.spinner-ring {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-top: 2px solid rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Progress mode styling */
.glass-unified-textbox.progress-mode {
    cursor: default !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.glass-unified-textbox.progress-mode:hover {
    transform: none !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Hide icon and close button in progress mode */
.glass-unified-textbox.progress-mode .glass-textbox-icon,
.glass-unified-textbox.progress-mode .glass-unified-close {
    opacity: 0;
}

.glass-unified-textbox.progress-mode .glass-progress-spinner {
    opacity: 1;
}

/* Responsive Design
@media (max-width: 768px) {
    .glass-unified-textbox.expanded {
        position: fixed;
        width: calc(100vw - 32px);
        max-width: 400px;
        left: 50%;
        transform: translateX(-50%);
        bottom: 90px;
        z-index: 1000;
    }
    
    .glass-unified-textbox.expanded:hover {
        transform: translateX(-50%);
    }
}*/

@media (max-width: 480px) {
    .glass-unified-textbox.expanded {
        width: calc(100vw - 95px);
        max-width: 350px;
    }
}

/* Focus states */
.glass-unified-textbox:focus-within {
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.12),
        0 3px 10px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 0 2px rgba(59, 130, 246, 0.5);
}

/* ===== Help Modal Styles ===== */
.help-modal {
    max-width: 900px;
    width: 90vw;
    height: 700px;
    max-height: 90vh;
}

.help-modal-body {
    display: flex;
    height: calc(100% - 120px);
    gap: 0;
    padding: 0;
}

.help-sidebar {
    width: 200px;
    min-width: 200px;
    background: var(--surface-secondary);
    border-right: 1px solid var(--border-color);
    padding: 1rem 0;
}

.help-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.help-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    width: 100%;
}

.help-nav-item:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.help-nav-item.help-nav-active {
    background: var(--accent-primary);
    color: white;
}

.help-nav-item svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.help-content {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
}

.help-section {
    display: none;
}

.help-section.help-section-active {
    display: block;
}

.help-section-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.help-section-header h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
}

.help-section-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* MCP Configuration Panel */
.mcp-config-panel {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.config-section {
    background: var(--surface-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.config-section-title {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.config-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.config-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.config-label {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.config-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.config-value code {
    background: var(--surface-primary);
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Code", "Droid Sans Mono", "Courier New", monospace;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
    background: var(--surface-hover);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    min-width: 32px;
    height: 32px;
}

.copy-btn:hover {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.copy-btn svg {
    width: 14px;
    height: 14px;
}

/* MCP Tools Grid */
.mcp-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.mcp-tool-card {
    background: var(--surface-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1rem;
    transition: all 0.2s ease;
}

.mcp-tool-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tool-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.tool-header svg {
    color: var(--accent-primary);
    width: 16px;
    height: 16px;
}

.tool-name {
    font-weight: 600;
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Code", "Droid Sans Mono", "Courier New", monospace;
    font-size: 0.9rem;
}

.tool-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Integration Example */
.integration-example {
    margin-top: 1rem;
}

.integration-example h5 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-weight: 600;
}

.example-description {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.code-block {
    position: relative;
    background: var(--surface-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.code-block pre {
    margin: 0;
    padding: 1rem;
    background: transparent;
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Code", "Droid Sans Mono", "Courier New", monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    overflow-x: auto;
}

.copy-btn-large {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-hover);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
}

.copy-btn-large:hover {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.copy-btn-large svg {
    width: 16px;
    height: 16px;
}

/* Resources List */
.resources-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.resource-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.resource-item:hover {
    border-color: var(--accent-primary);
    background: var(--surface-hover);
}

.resource-item svg {
    color: var(--accent-primary);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.resource-item a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
}

.resource-item a:hover {
    color: var(--accent-primary);
}

/* MCP Tools Listing */
.tools-category {
    margin-bottom: 2rem;
}

.tools-category-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent-primary);
}

.tools-category-title svg {
    color: var(--accent-primary);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.tools-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tool-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: var(--surface-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.tool-item:hover {
    border-color: var(--accent-primary);
    background: var(--surface-hover);
    transform: translateX(2px);
}

.tool-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Code", "Droid Sans Mono", "Courier New", monospace;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-primary);
    background: none;
    border: none;
    padding: 0;
}

.tool-description {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
}

.tool-params {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Code", "Droid Sans Mono", "Courier New", monospace;
}

/* MCP Tools Table Styles */
.mcp-tools-table-wrapper {
    overflow-x: auto;
    margin-top: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.mcp-tools-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-primary);
    font-size: 0.85rem;
}

.mcp-tools-table thead {
    background: var(--accent-primary);
    color: white;
}

.mcp-tools-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
}

.mcp-tools-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.mcp-tools-table tbody tr {
    transition: background-color 0.15s ease;
}

.mcp-tools-table tbody tr:hover {
    background: var(--surface-hover);
}

.mcp-tools-table tbody tr:last-child td {
    border-bottom: none;
}

.mcp-tools-table code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Code", "Droid Sans Mono", "Courier New", monospace;
    font-size: 0.85em;
    background: var(--card-bg);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    color: var(--accent-primary);
}

.param-item {
    margin: 0.25rem 0;
    line-height: 1.6;
}

.param-subitem {
    margin: 0.25rem 0 0.25rem 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Response details styling */
.response-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.response-format {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--accent-primary);
    margin-bottom: 0.25rem;
}

.response-example {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Code", "Droid Sans Mono", "Courier New", monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-wrap: break-word;
    max-width: 100%;
    overflow-x: auto;
}

.response-example:not(:last-child) {
    margin-bottom: 0.25rem;
}

.required {
    color: #dc2626;
    font-weight: 700;
    margin-left: 0.125rem;
}

.enum {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Code", "Droid Sans Mono", "Courier New", monospace;
    color: #7c2d12;
    background: #fef3c7;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-size: 0.8em;
    font-weight: 500;
}

.response-type {
    color: var(--text-secondary);
    font-size: 0.85em;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
    .help-modal {
        width: 95vw;
        height: 600px;
    }
    
    .help-modal-body {
        flex-direction: column;
    }
    
    .help-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 0.75rem 0;
    }
    
    .help-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 0 1rem;
        gap: 0.5rem;
    }
    
    .help-nav-item {
        white-space: nowrap;
        min-width: auto;
        padding: 0.5rem 1rem;
    }
    
    .help-content {
        padding: 1rem;
    }
    
    .mcp-tools-grid {
        grid-template-columns: 1fr;
    }

    .api-endpoints-grid {
        grid-template-columns: 1fr;
    }

    /* Make MCP tables scrollable on mobile */
    .mcp-tools-table {
        font-size: 0.75rem;
    }

    .mcp-tools-table th,
    .mcp-tools-table td {
        padding: 0.5rem 0.75rem;
    }

    .param-item,
    .param-subitem {
        font-size: 0.75rem;
    }
}

/* API Documentation Panel Styles */
.api-docs-panel {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.api-explorer-info {
    margin-top: 1rem;
}

.api-description {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.api-link-container {
    margin-top: 1.5rem;
}

.api-link-item {
    background: var(--surface-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1rem;
    transition: all 0.2s ease;
}

.api-link-item:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.api-link-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.api-link-header svg {
    color: var(--accent-primary);
}

.api-link-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.api-link-description {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.api-link-actions {
    margin-top: 1rem;
}

.api-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--accent-primary);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.api-link-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    color: black;
}

.api-link-btn svg {
    width: 14px;
    height: 14px;
}

/* API Endpoints Grid */
.api-endpoints-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.api-endpoint-card {
    background: var(--surface-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1rem;
    transition: all 0.2s ease;
}

.api-endpoint-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.endpoint-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.http-method {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 60px;
    text-align: center;
}

.http-method.get {
    background: #10B981;
    color: white;
}

.http-method.post {
    background: #3B82F6;
    color: white;
}

.http-method.put {
    background: #F59E0B;
    color: white;
}

.http-method.delete {
    background: #EF4444;
    color: white;
}

.endpoint-path {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Code", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Code", "Droid Sans Mono", "Courier New", monospace;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: var(--surface-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    border: 1px solid var(--border-color);
}

.endpoint-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Auth Info Styles */
.auth-info {
    margin-top: 1rem;
}

.auth-example {
    margin-top: 1.5rem;
}

.auth-example h5 {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Completed Tasks Section Styles */
.completed-tasks-section {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.completed-tasks-header {
    margin: 0 0 0.5rem 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
}

.completed-tasks-toggle-button {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--surface-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    color: var(--foreground);
}

.completed-tasks-toggle-button:hover {
    background: var(--surface-tertiary);
    border-color: var(--border-hover);
}

.completed-tasks-toggle-button .nav-icon {
    transition: transform 0.2s ease;
}

.completed-tasks-toggle-button .nav-icon.collapsed {
    transform: rotate(0deg);
}

.completed-tasks-toggle-button .nav-icon.expanded {
    transform: rotate(90deg);
}

.completed-tasks-title {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--foreground);
}

.completed-tasks-container {
    border-left: 2px solid var(--border-color);
    margin-left: 0.5rem;
    padding-left: 1rem;
}

/* Mobile responsive adjustments for completed section */
@media (max-width: 768px) {
    .completed-tasks-section {
        margin-top: 1.5rem;
    }

    .completed-tasks-toggle-button {
        padding: 0.5rem 0.75rem;
    }

    .completed-tasks-container {
        margin-left: 0.25rem;
        padding-left: 0.75rem;
    }
}

/* ========================================
   ENERGY VISUALIZATION STYLES
   ======================================== */

/* Energy container and positioning */
.task-energy {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Energy icon styling */
.energy-icon {
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.energy-icon svg {
    transition: all 0.2s ease;
}

.energy-icon:hover {
    background-color: var(--primary);
    transform: scale(1.1);
}

.energy-icon:hover svg {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

/* Heat map colors - Fibonacci energy levels grouped by intensity */
/* Green base (0,1,2) → Yellow base (3,5) → Orange base (8) → Red base (13,21) */

/* Low energy - Green base */
.energy-icon[data-energy="0"] {
    color: #16a34a; /* Dark green stroke */
}
.energy-icon[data-energy="0"] .energy-path {
    fill: #86efac; /* Light green fill */
    stroke: #16a34a;
    stroke-width: 1;
}

.energy-icon[data-energy="1"] {
    color: #15803d; /* Darker green stroke */
}
.energy-icon[data-energy="1"] .energy-path {
    fill: #4ade80; /* Medium green fill */
    stroke: #15803d;
    stroke-width: 1;
}

.energy-icon[data-energy="2"] {
    color: #14532d; /* Very dark green stroke */
}
.energy-icon[data-energy="2"] .energy-path {
    fill: #22c55e; /* Bright green fill */
    stroke: #14532d;
    stroke-width: 1;
}

/* Medium-low energy - Yellow base */
.energy-icon[data-energy="3"] {
    color: #ca8a04; /* Dark yellow stroke */
}
.energy-icon[data-energy="3"] .energy-path {
    fill: #fef08a; /* Light yellow fill */
    stroke: #ca8a04;
    stroke-width: 1;
}

.energy-icon[data-energy="5"] {
    color: #a16207; /* Amber brown stroke */
}
.energy-icon[data-energy="5"] .energy-path {
    fill: #fde047; /* Bright yellow fill */
    stroke: #a16207;
    stroke-width: 1;
}

/* Medium-high energy - Orange base */
.energy-icon[data-energy="8"] {
    color: #c2410c; /* Dark orange stroke */
}
.energy-icon[data-energy="8"] .energy-path {
    fill: #fdba74; /* Light orange fill */
    stroke: #c2410c;
    stroke-width: 1;
}

/* High energy - Red base */
.energy-icon[data-energy="13"] {
    color: #b91c1c; /* Dark red stroke */
}
.energy-icon[data-energy="13"] .energy-path {
    fill: #fca5a5; /* Light red fill */
    stroke: #b91c1c;
    stroke-width: 1;
}

.energy-icon[data-energy="21"] {
    color: #7f1d1d; /* Very dark red stroke */
}
.energy-icon[data-energy="21"] .energy-path {
    fill: #f87171; /* Medium red fill */
    stroke: #7f1d1d;
    stroke-width: 1;
}

/* Energy controls container */
.energy-controls {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    background: white;
    padding: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.energy-controls.visible {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(-5px);
}

/* Energy control buttons */
.energy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    background: white;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #6b7280;
}

.energy-btn:hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
    transform: scale(1.05);
}

.energy-btn:active {
    transform: scale(0.95);
}

.energy-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.energy-btn:disabled:hover {
    background-color: white;
    border-color: #e5e7eb;
    transform: scale(1);
}

/* Energy picker popup */
.energy-picker {
    display: flex;
    gap: 0.5rem;
    background: white;
    padding: 0.75rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e7eb;
}

.energy-level-btn {
    min-width: 80px;
    padding: 0.5rem 0.75rem;
    border: 2.5px solid #e5e7eb;
    border-radius: 0.375rem;
    background: white;
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 600;
    font-size: 0.875rem;
    color: #6b7280;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.energy-level-btn .energy-value {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
}

.energy-level-btn .energy-label {
    font-size: 0.625rem;
    font-weight: 500;
    opacity: 0.75;
    line-height: 1;
    text-align: center;
}

/* Energy level specific border colors matching flash icon colors */
/* Green base (0,1,2) → Yellow base (3,5) → Orange base (8) → Red base (13,21) */

/* Low energy - Green base */
.energy-level-btn[data-energy="0"] {
    border-color: #22c55e;
    color: #22c55e;
}

.energy-level-btn[data-energy="1"] {
    border-color: #16a34a;
    color: #16a34a;
}

.energy-level-btn[data-energy="2"] {
    border-color: #15803d;
    color: #15803d;
}

/* Medium-low energy - Yellow base */
.energy-level-btn[data-energy="3"] {
    border-color: #facc15;
    color: #facc15;
}

.energy-level-btn[data-energy="5"] {
    border-color: #eab308;
    color: #eab308;
}

/* Medium-high energy - Orange base */
.energy-level-btn[data-energy="8"] {
    border-color: #f97316;
    color: #f97316;
}

/* High energy - Red base */
.energy-level-btn[data-energy="13"] {
    border-color: #ef4444;
    color: #ef4444;
}

.energy-level-btn[data-energy="21"] {
    border-color: #dc2626;
    color: #dc2626;
}

.energy-level-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    transform: scale(1.05);
}

.energy-level-btn.active {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.energy-level-btn.active .energy-label {
    opacity: 1;
}

.energy-level-btn:active {
    transform: scale(0.95);
}

/* ============================================
   NLP Help Modal Styles
   ============================================ */

.nlp-help-overlay {
    position: fixed;
    bottom: 140px;  /* Increased spacing to match button separation pattern */
    right: 32px;
    z-index: 999;
    pointer-events: none;  /* Non-clickable */
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nlp-help-overlay.visible {
    opacity: 1;
    transform: translateY(0);
}

.nlp-help-content {
    background: var(--glass-background);  /* Glass theme background */
    backdrop-filter: var(--glass-blur-depth);
    -webkit-backdrop-filter: var(--glass-blur-depth);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 16px;
    width: 380px;
    max-height: 500px;
    overflow-y: auto;
    box-shadow: var(--glass-shadow-depth);
}

.nlp-help-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.nlp-help-icon {
    font-size: 20px;
}

.nlp-help-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--glass-text-color);  /* Glass theme text color */
}

.nlp-help-body {
    margin-bottom: 0;
}

.nlp-examples-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nlp-example-item {
    background: rgba(255, 255, 255, 0.05);  /* Glass theme subtle highlight */
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--glass-text-color);  /* Glass theme text color */
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    line-height: 1.4;
    transition: all 0.2s ease;
}

.nlp-example-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.nlp-example-item .example-emoji {
    margin-right: 6px;
    font-size: 14px;
    flex-shrink: 0;
}

.nlp-example-item .example-text {
    flex: 1;
}

.nlp-example-item .example-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 6px;
    flex-shrink: 0;
}

.nlp-example-item .badge-pro {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.nlp-help-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);  /* Glass theme border */
    text-align: center;
}

.nlp-help-hint {
    font-size: 12px;
    font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .nlp-help-overlay {
        right: 16px;
        bottom: 180px;  /* Position higher on mobile to avoid overlap with search button */
    }

    .nlp-help-content {
        width: calc(100vw - 32px);
        max-width: 380px;
    }
}

/* Additional mobile adjustment for smaller screens */
@media (max-width: 480px) {
    .nlp-help-overlay {
        right: 16px;
        bottom: 200px;  /* Even higher spacing on very small screens */
    }

    .nlp-help-content {
        width: calc(100vw - 32px);
        max-width: 340px;
        max-height: 400px;  /* Reduce max height on mobile */
    }
}

/* ================================
   Working Hours Dual Slider
   ================================ */

.working-hours-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 0;
}

.working-hours-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    border: 1px solid var(--border-light);
}

.working-hours-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.working-hours-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.working-hours-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}

.working-hours-separator {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 300;
}

/* Dual Slider Container */
.dual-slider-container {
    position: relative;
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    padding-bottom: 20px;
}

/* Slider Track */
.dual-slider-track {
    position: absolute;
    width: 100%;
    height: 6px;
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.08) 0%,
        rgba(0, 0, 0, 0.08) 100%);
    border-radius: 3px;
    pointer-events: none;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Active Range Between Sliders */
.dual-slider-range {
    position: absolute;
    height: 6px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-hover));
    border-radius: 3px;
    transition: all 0.1s ease;
}

/* Time Marker Lines */
.slider-marker {
    position: absolute;
    width: 2px;
    height: 16px;
    background: rgba(0, 0, 0, 0.2);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.slider-marker::after {
    content: attr(data-label);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    font-weight: 500;
}

.slider-marker-start {
    left: 0;
}

.slider-marker-middle {
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.slider-marker-end {
    right: 0;
}

/* Base Slider Styles */
.dual-slider {
    position: absolute;
    width: 100%;
    height: 50px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
}

.dual-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--bg-primary);
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dual-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    border-width: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dual-slider::-webkit-slider-thumb:active {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.dual-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--bg-primary);
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dual-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
    border-width: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dual-slider::-moz-range-thumb:active {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Remove default track styling */
.dual-slider::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
}

.dual-slider::-moz-range-track {
    background: transparent;
    border: none;
}

/* Layer sliders properly */
.dual-slider-start {
    z-index: 3;
}

.dual-slider-end {
    z-index: 4;
}

/* Focus states for accessibility */
.dual-slider:focus {
    outline: none;
}

.dual-slider:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.dual-slider:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .working-hours-display {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .dual-slider-track {
        background: linear-gradient(to right,
            rgba(0, 0, 0, 0.12) 0%,
            rgba(0, 0, 0, 0.12) 100%);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .slider-marker {
        background: rgba(255, 255, 255, 0.3);
    }

    .dual-slider::-webkit-slider-thumb {
        background: var(--bg-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .dual-slider::-moz-range-thumb {
        background: var(--bg-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .working-hours-display {
        gap: 12px;
        padding: 12px;
    }

    .working-hours-value {
        font-size: 18px;
    }

    .dual-slider::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }

    .dual-slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }
}