/* ===========================
   Base Layout
=========================== */
body {
  font-family: var(--font-body);
  background: radial-gradient(circle at 20% 30%, #141820, #0f1116 60%, #0b0d10);
  color: var(--clr-text-main);
  min-height: 100vh;
  padding: 20px;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  background-attachment: fixed;
}

/* ===========================
   Main Container
=========================== */
.container {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  justify-content: flex-start;
  background: linear-gradient(
    145deg,
    rgba(30, 34, 42, 0.9),
    rgba(24, 28, 34, 0.95)
  );
  backdrop-filter: blur(8px);
  min-height: 100vh;
  min-width: 100%;
  color: var(--clr-text-main);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: background-color var(--transition-speed),
    box-shadow var(--transition-speed), transform var(--transition-speed);
}

/* subtle interactive depth */
.container:hover {
  transform: scale(1.002);
}

/* ===========================
   Header
=========================== */
header {
  background: linear-gradient(
    90deg,
    rgba(58, 80, 107, 0.8) 0%,
    rgba(11, 19, 43, 0.8) 100%
  );
  width: 100%;
  text-align: center;
  color: var(--clr-accent);
  font-weight: 600;
  letter-spacing: 1px;
  padding: 1rem 0;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);

  top: 0;
  z-index: 10;
}

/* glowing underline accent for header text */
header::after {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  margin: 0.5rem auto 0;
  background: linear-gradient(
    90deg,
    var(--clr-accent) 0%,
    var(--clr-accent-strong) 100%
  );
  border-radius: 2px;
}

/* ===========================
   Footer
=========================== */
footer {
  margin-top: auto;
  background: linear-gradient(
    90deg,
    rgba(34, 40, 49, 0.8),
    rgba(24, 28, 34, 0.9)
  );
  color: var(--clr-text-muted);
  text-align: center;
  width: 100%;
  font-size: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.75rem 0;
  border-radius: 0 0 var(--radius) var(--radius);
  backdrop-filter: blur(5px);
}

/* ===========================
   Content Elements
=========================== */
h1 {
  color: var(--clr-accent);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-shadow: 0 0 10px rgba(0, 173, 181, 0.25);
}

h3 {
  margin-bottom: 1rem;
  color: var(--clr-text-main);
}

/* ===========================
   Task Columns
=========================== */
.task-column {
  display: flex;
  flex-direction: column;
  height: 350px;
  background: linear-gradient(
    145deg,
    rgba(34, 40, 49, 0.95),
    rgba(26, 30, 37, 0.95)
  );
  margin: 0.5rem;
  padding: 0.75rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-elevate);
  transition: transform var(--transition-speed),
    box-shadow var(--transition-speed), background var(--transition-speed);
  position: relative;
  overflow: hidden;
}

/* subtle animated light sweep on hover */
.task-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0)
  );
  transform: skewX(-25deg);
  transition: left 0.8s ease;
}

.task-column:hover::before {
  left: 125%;
}

.task-column:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* ===========================
   Tasks List
=========================== */
.tasks-list {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 0.7rem;
  scrollbar-width: thin;
  scrollbar-color: var(--clr-accent) rgba(255, 255, 255, 0.05);
}

/* Custom scrollbar for Chrome/Edge */
.tasks-list::-webkit-scrollbar {
  width: 6px;
}
.tasks-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}
.tasks-list::-webkit-scrollbar-thumb {
  background-color: var(--clr-accent);
  border-radius: 10px;
}

/* ===========================
   Task Elements
=========================== */
.task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color var(--transition-speed), transform 0.15s ease;
  border-radius: var(--radius);
}

.task:hover {
  background-color: rgba(255, 255, 255, 0.03);
  transform: scale(1.01);
}

.task span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 0.5rem;
  color: var(--clr-text-main);
  transition: color var(--transition-speed);
}

.task.completed span {
  text-decoration: line-through;
  opacity: 0.6;
  color: var(--clr-text-muted);
}

/* ===========================
   Icons & Actions
=========================== */
.icon-wrapper {
  flex: 0 0 40px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-wrapper i {
  width: 100%;
  text-align: center;
  cursor: pointer;
  transition: transform var(--transition-speed), opacity var(--transition-speed);
}

.icon-wrapper .fa-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  color: var(--clr-accent-strong);
  opacity: 0.85;
  filter: drop-shadow(0 0 4px rgba(6, 214, 160, 0.3));
}

.icon-wrapper .fa-check {
  position: absolute;
  left: 52%;
  top: 45%;
  transform: translate(-50%, -50%);
  font-size: 0.25em;
  color: #fff;
  opacity: 0;
  transition: opacity var(--transition-speed);
}

.icon-wrapper:hover .fa-check,
.task.completed .fa-check {
  opacity: 1;
}

/* trash icon */
.task .fa-trash {
  position: relative;
  flex: 0 0 auto;
  margin-left: 0.6rem;
  color: var(--clr-text-muted);
  font-size: 0.55rem;
  opacity: 0.6;
  cursor: pointer;
  left: -3em;
  transition: transform var(--transition-speed), opacity var(--transition-speed),
    color var(--transition-speed);
}

.fa-trash:hover {
  opacity: 1;
  transform: scale(1.15);
  color: var(--clr-accent-strong);
}

/* ===========================
   Add Task Input
=========================== */
.add-task {
  width: 100%;
  background: rgba(30, 34, 42, 0.9);
  color: var(--clr-text-main);
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color var(--transition-speed),
    background var(--transition-speed);
}

.add-task:focus {
  outline: none;
  border-color: var(--clr-accent);
  background: rgba(30, 34, 42, 1);
  box-shadow: 0 0 8px rgba(0, 173, 181, 0.25);
}
.task span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* increased right padding so contenteditable text never reaches the trash icon */
  padding-right: 3rem; /* <-- changed from 0.5rem */
  color: var(--clr-text-main);
  transition: color var(--transition-speed);
}

/* ===========================
   Utility
=========================== */
.task-actions {
  margin: 0.5rem;
}
.version {
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  font-size: 0.3rem;
}

/* Responsive / Mobile adjustments */
@media (max-width: 768px) {
  /* stack columns vertically */
  .task-board {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .task-column {
    height: auto; /* let content define height */
    min-height: 120px;
    padding: 0.6rem;
    margin: 0.4rem 0;
  }

  /* make the lists scrollable but touch-friendly */
  .tasks-list {
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 0.4rem;
  }

  /* task layout: allow wrapping text and bigger touch targets */
  .task {
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem;
  }

  /* allow text to wrap on small screens */
  .task span {
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
    padding-right: 0.5rem;
    font-size: 0.75rem;
  }

  /* icon column slightly bigger for finger taps */
  .icon-wrapper {
    flex: 0 0 34px;
    width: 24px;
    height: 24px;
    border-radius: 8px;
  }

  .icon-wrapper i {
    padding: 8px; /* larger hit area */
    font-size: 0.75rem;
  }

  h3 {
    font-size: 0.9rem;
  }

  .icon-wrapper .fa-circle {
    font-size: 0.95rem;
    left: 50%;
    top: 50%;
  }
  .icon-wrapper .fa-check {
    font-size: 0.55rem;
    left: 50%;
    top: 50%;
  }

  /* keep trash in normal flow on mobile (no negative offset) */
  .task .fa-trash {
    position: relative;
    flex: 0 0 28px; /* reserve a fixed slot for the trash icon */
    margin-left: 0.6rem;
    color: var(--clr-text-muted);
    font-size: 0.9rem; /* larger readable size */
    opacity: 0.6;
    cursor: pointer;
    left: auto; /* remove negative offset that caused overlap */
    transition: transform var(--transition-speed),
      opacity var(--transition-speed), color var(--transition-speed);
  }

  /* slightly larger spacing for header/footer on phones */
  header,
  footer {
    padding: 0.75rem 0.5rem;
    font-size: 0.95rem;
  }
}

/* Small phones — tighten further */
@media (max-width: 420px) {
  .icon-wrapper {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
  }
  .icon-wrapper i {
    padding: 6px;
  }
  .task span {
    font-size: 0.95rem;
  }
  .tasks-list {
    max-height: 50vh;
  }
}