/*! -------------------------------VIBE Coded for reference------------------------------------- */

/* Reset and base styles */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   background: linear-gradient(135deg, #d4d4d4 0%, #d0d0d0 100%);
   min-height: 100vh;
   color: #2c3e50;
   line-height: 1.6;
}

/*! Header styles */
header {
   padding: 0.5rem 0;
   text-align: center;
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.75rem;
   width: 100%;
}

header h1 {
   font-size: 1.5rem;
   font-weight: 700;
   color: #2c3e50;
   margin-bottom: 0.5rem;
   letter-spacing: -0.5px;
}

header img {
   width: 86px;
   height: auto;
   opacity: 1;
}
.headerContainer {
   background-color: #0000000a;
   border-radius: 16px;
   backdrop-filter: blur(12px);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0.25rem;
   position: sticky;
   top: 0;
   z-index: 1000;
   padding: 0.25rem 0.5rem;
}

/*! Main container */
main {
   max-width: 600px;
   margin: 0 auto;
   padding: 2rem 1rem;
}

.app {
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(10px);
   border-radius: 16px;
   padding: 2rem;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.2);
}

/*! Live text styles */

#liveText {
   text-align: center;
   font-weight: 500;
   font-size: 1.25rem;
   margin: 0.75rem 1rem;
   min-height: 1rem;
   padding: 0.5rem;
   border-radius: 25px;
   transition: all 0.3s ease;
   /* position: sticky;
   top: 7.5rem;
   z-index: 10;
   backdrop-filter: blur(8px); */
   text-shadow: rgba(0, 0, 0, 0.144) 1px 1px 1px;
   width: 100%;
}

.blueLiveText {
   background: radial-gradient(circle, rgba(39, 142, 174, 0.2), rgba(255, 255, 255, 0.1));
   color: #278eae;
   /* border: 1px solid #278eae2c; */
}

.greenLiveText {
   background: radial-gradient(circle, rgba(39, 174, 96, 0.2), rgba(255, 255, 255, 0.1));
   color: #27ae60;
   /* border: 1px solid rgba(39, 174, 96, 0.2); */
}

.redLiveText {
   background: radial-gradient(circle, rgba(231, 76, 60, 0.2), rgba(255, 255, 255, 0.1));
   color: #e74c3c;
   /* border: 1px solid rgba(231, 76, 60, 0.2); */
}

/* Task filter and sorter styles */
.taskFilter-and-sorter {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
   gap: 1rem;
   margin-bottom: 1.5rem;
   width: 100%;
}
.filters {
   width: 100%;
   display: flex;
   gap: 1rem;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   padding: 0.5rem;
}
.filters label:hover {
   background: rgba(52, 152, 219, 0.08);
   border-radius: 6px;
   cursor: pointer;
   transition: background 0.2s;
}
.sorter {
   display: flex;
   gap: 1rem;
   align-items: center;
   width: 100%;
   padding: 0.5rem;
}

/* Form styles */
#newTaskForm {
   display: flex;
   gap: 0.75rem;
   margin: 0.75rem 1rem;
   width: 100%;
}

#newTaskInput {
   flex: 1;
   flex-shrink: 1;
   padding: 0.875rem 2.5rem;
   border: 2px solid #e9ecef;
   border-radius: 12px;
   font-size: 1rem;
   background: #ffffff;
   transition: all 0.3s ease;
   outline: none;
   font-family: inherit;
}

#newTaskInput:focus {
   border-color: #5dade2;
   box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.1);
   transform: translateY(-1px);
}

#newTaskInput::placeholder {
   color: #95a5a6;
   font-style: italic;
}

#addTaskBtn {
   background: #fcfcfc66;
   border: 1px solid rgba(52, 73, 94, 0.1);
   border-radius: 8px;
   width: fit-content;
   height: fit-content;
   cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
   padding: 1px 2px;
}

#addTaskBtn:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(52, 152, 219, 0.35);
}

#addTaskBtn:active {
   transform: translateY(0);
}

#addTaskBtn img {
   width: 50px;
   height: auto;
   filter: saturate(0.9);
}

/* Task list styles */
#savedTasksUL {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
}

.savedTask {
   background: #ffffff;
   border: 1px solid rgba(52, 73, 94, 0.1);
   border-radius: 12px;
   padding: 0.5rem 1rem;
   display: flex;
   align-items: center;
   gap: 0.75rem;
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
}

.savedTask:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
   border-color: rgba(52, 73, 94, 0.15);
}

.savedTask::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 3px;
   height: 100%;
   background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
   opacity: 0;
   transition: opacity 0.3s ease;
}

.savedTask:hover::before {
   opacity: 1;
}

/* Checkbox styles */
.savedTaskCheckbox {
   width: 20px;
   height: 20px;
   border: 2px solid #bdc3c7;
   border-radius: 50%;
   background: #ffffff;
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
   appearance: none;
   outline: none;
   flex-shrink: 0;
}

.savedTaskCheckbox:checked {
   background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
   border-color: #27ae60;
}

.savedTaskCheckbox:checked::after {
   content: "✓";
   position: absolute;
   color: white;
   font-size: 12px;
   font-weight: bold;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.savedTaskCheckbox:hover {
   border-color: #2980b9;
   box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.12);
}

/* Task content styles */
.savedTaskContent {
   flex: 1;
   background: transparent;
   border: none;
   font-size: 1rem;
   color: #2c3e50;
   outline: none;
   padding: 0.25rem 0;
   font-family: inherit;
   transition: all 0.3s ease;
}

.savedTaskContent:not([readonly]) {
   background: rgba(52, 152, 219, 0.05);
   border: 1px solid rgba(52, 152, 219, 0.2);
   border-radius: 6px;
   padding: 0.5rem;
}

.checkedTask {
   text-decoration: line-through;
   opacity: 0.6;
   color: #7f8c8d;
   box-shadow: 0 4px 12px rgba(41, 121, 255, 0.07);
}

/* Button styles */
.editSavedTaskBtn,
.deleteSavedTaskBtn {
   background: #fcfcfc;
   border: 1px solid rgba(52, 73, 94, 0.1);
   border-radius: 8px;
   width: fit-content;
   height: fit-content;
   cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
   padding: 4px 10px;
}

.editSavedTaskBtn:hover {
   background: rgba(52, 152, 219, 0.1);
   border-color: rgba(52, 152, 219, 0.3);
   transform: translateY(-1px);
}

.deleteSavedTaskBtn:hover {
   background: rgba(231, 76, 60, 0.1);
   border-color: rgba(231, 76, 60, 0.3);
   transform: translateY(-1px);
}

.editSavedTaskBtn img,
.deleteSavedTaskBtn img {
   width: 32px;
   height: 32px;
   opacity: 0.8;
   transition: opacity 0.3s ease;
   filter: saturate(0.8);
}

.editSavedTaskBtn:hover img,
.deleteSavedTaskBtn:hover img {
   opacity: 1;
}

/* Responsive design */
@media (max-width: 480px) {
   main {
      padding: 1rem;
   }

   .app {
      padding: 1.5rem;
   }

   header h1 {
      font-size: 1.5rem;
   }

   #newTaskForm {
      /* flex-direction: column; */
      gap: 0.5rem;
   }

   #addTaskBtn {
      width: fit-content;
      /* height: 44px; */
   }

   .savedTask {
      padding: 0.75rem;
      gap: 0.5rem;
   }

   .savedTaskContent {
      font-size: 0.9rem;
   }
}

/* Subtle animations */
@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.savedTask {
   animation: fadeIn 0.5s ease-out;
}

/* Focus improvements for accessibility */
button:focus-visible,
input:focus-visible {
   outline: 2px solid #3498db;
   outline-offset: 2px;
}

/* Smooth scrolling */
html {
   scroll-behavior: smooth;
}

/* Empty state styling */
#savedTasksUL:empty::after {
   content: "No tasks yet. Add your first task above!";
   display: block;
   text-align: center;
   color: #95a5a6;
   font-style: italic;
   padding: 3rem 0.5rem;
   border: 2px dashed #e9ecef;
   border-radius: 12px;
   margin-top: 1rem;
}