:root {
   --color-red-50: oklch(97.1% 0.013 17.38);
   --color-red-100: oklch(93.6% 0.032 17.717);
   --color-red-200: oklch(88.5% 0.062 18.334);
   --color-red-500: oklch(63.7% 0.237 25.331);
   --color-red-600: oklch(57.7% 0.245 27.325);
   --color-orange-100: oklch(95.4% 0.038 75.164);
   --color-orange-500: oklch(70.5% 0.213 47.604);
   --color-orange-600: oklch(64.6% 0.222 41.116);
   --color-amber-50: oklch(98.7% 0.022 95.277);
   --color-amber-100: oklch(96.2% 0.059 95.617);
   --color-amber-200: oklch(92.4% 0.12 95.746);
   --color-amber-400: oklch(82.8% 0.189 84.429);
   --color-amber-500: oklch(76.9% 0.188 70.08);
   --color-amber-600: oklch(66.6% 0.179 58.318);
   --color-amber-700: oklch(55.5% 0.163 48.998);
   --color-emerald-50: oklch(97.9% 0.021 166.113);
   --color-emerald-100: oklch(95% 0.052 163.051);
   --color-emerald-200: oklch(90.5% 0.093 164.15);
   --color-emerald-500: oklch(69.6% 0.17 162.48);
   --color-emerald-600: oklch(59.6% 0.145 163.225);
   --color-emerald-700: oklch(50.8% 0.118 165.612);
   --color-blue-50: oklch(97% 0.014 254.604);
   --color-blue-500: oklch(62.3% 0.214 259.815);
   --color-blue-600: oklch(54.6% 0.245 262.881);
   --color-indigo-50: oklch(96.2% 0.018 272.314);
   --color-indigo-500: oklch(58.5% 0.233 277.117);
   --color-indigo-600: oklch(51.1% 0.262 276.966);
   --color-indigo-700: oklch(45.7% 0.24 277.023);
   --color-purple-600: oklch(55.8% 0.288 302.321);
   --color-rose-500: oklch(64.5% 0.246 16.439);
   --color-slate-50: oklch(98.4% 0.003 247.858);
   --color-slate-100: oklch(96.8% 0.007 247.896);
   --color-slate-200: oklch(92.9% 0.013 255.508);
   --color-slate-300: oklch(86.9% 0.022 252.894);
   --color-slate-400: oklch(70.4% 0.04 256.788);
   --color-slate-500: oklch(55.4% 0.046 257.417);
   --color-slate-600: oklch(44.6% 0.043 257.281);
   --color-slate-700: oklch(37.2% 0.044 257.287);
   --color-slate-800: oklch(27.9% 0.041 260.031);
   --color-slate-900: oklch(20.8% 0.042 265.755);
   --color-black: #000;
   --color-white: #fff;

   --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   --blur-sm: 8px;

   --transition-duration: 0.15s;
   --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.bg-stat-100 {
   background-color: var(--color-slate-100);
}
.bg-slate-300 {
   background-color: var(--color-slate-300);
}
.bg-slate-100 {
   background-color: var(--color-slate-100);
}
.bg-amber-50 {
   background-color: var(--color-amber-50);
}
.bg-amber-500 {
   background-color: var(--color-amber-500);
}
.bg-amber-700 {
   background-color: var(--color-amber-700);
}
.bg-amber-100 {
   background-color: var(--color-amber-100);
}
.bg-emerald-50 {
   background-color: var(--color-emerald-50);
}
.bg-emerald-100 {
   background-color: var(--color-emerald-100);
}
.bg-blue-50 {
   background-color: var(--color-blue-50);
}
.bg-blue-500 {
   background-color: var(--color-blue-500);
}
.bg-orange-100 {
   background-color: var(--color-orange-100);
}
.bg-red-50 {
   background-color: var(--color-red-50);
}
.bg-red-100 {
   background-color: var(--color-red-100);
}
.bg-red-500 {
   background-color: var(--color-red-500);
}

.text-slate-100 {
   color: var(--color-slate-100);
}
.text-slate-500 {
   color: var(--color-slate-500);
}
.text-slate-400 {
   color: var(--color-slate-400);
}
.text-slate-500 {
   color: var(--color-slate-500);
}
.text-slate-800 {
   color: var(--color-slate-800);
}
.text-slate-600 {
   color: var(--color-slate-600);
}
.text-amber-100 {
   color: var(--color-amber-100);
}
.text-amber-500 {
   color: var(--color-amber-500);
}
.text-amber-600 {
   color: var(--color-amber-600);
}
.text-amber-700 {
   color: var(--color-amber-700);
}
.text-emerald-500 {
   color: var(--color-emerald-500);
}
.text-emerald-600 {
   color: var(--color-emerald-600);
}
.text-blue-600 {
   color: var(--color-blue-600);
}
.text-orange-600 {
   color: var(--color-orange-600);
}
.text-red-500 {
   color: var(--color-red-500);
}
.text-red-600 {
   color: var(--color-red-600);
}

.border-red-600 {
   border-color: var(--color-red-500) !important;
}
.border-slate-100 {
   border-color: var(--color-slate-100);
}

.fs-10 {
   font-size: 0.625rem;
}
.fs-12 {
   font-size: 0.75rem;
}
.fs-14 {
   font-size: 0.875rem;
}
.w-7 {
   width: 7px;
}
.h-7 {
   height: 7px;
}

.resize-none {
   resize: none;
}

.completed {
   text-decoration: line-through;
}

.main-card {
   min-height: 500px;
   border-color: oklch(92.573% 0.01273 255.643 / 0.702);
}
.task-card {
   border-color: var(--color-slate-100);
   transition: all var(--transition-duration) var(--transition-timing-function);

   &:hover {
      box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
      border-color: var(--color-slate-200);
      .top-bar-btns {
         opacity: 1 !important;
         transition: all var(--transition-duration) var(--transition-timing-function);
      }
   }
   .top-bar-btns {
      transition: all var(--transition-duration) var(--transition-timing-function);
   }
   .edit-btn {
      transition: all var(--transition-duration) var(--transition-timing-function);
      &:hover {
         color: var(--color-indigo-500);
         background-color: var(--color-indigo-50);
      }
   }
   .delete-btn {
      transition: all var(--transition-duration) var(--transition-timing-function);
      &:hover {
         color: var(--color-red-500);
         background-color: var(--color-red-50);
      }
   }
   .status-btn {
      transition: all var(--transition-duration) var(--transition-timing-function);
      &:hover {
         transform: scale(105%);
         &[data-status='in-progress'] {
            background-color: var(--color-amber-200) !important;
            color: var(--color-amber-700);
         }
         &[data-status='completed'] {
            background-color: var(--color-emerald-200);
            color: var(--color-emerald-700) !important;
         }
         &[data-status='todo'] {
            background-color: var(--color-slate-200);
            color: var(--color-slate-700);
         }
      }
   }
}

.toast-notification {
   position: fixed;
   top: 20px;
   right: 20px;
   background-color: #419c72;
   color: #fff;
   padding: 14px 18px;
   border-radius: 8px;
   font-size: 14px;
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);

   opacity: 0;
   transform: translateX(110%);
   transition: all 0.4s ease;

   z-index: 9999;
}
.toast-notification.show {
   opacity: 1;
   transform: translateX(0);
}