/* Area Buttons */
.area-btn {
  background: rgb(30 41 59); /* slate-800 */
  color: rgb(148 163 184); /* slate-400 */
  border: 2px solid rgb(51 65 85); /* slate-700 */
}

.area-btn.active {
  background: rgb(99 102 241); /* brand/indigo-500 */
  color: white;
  border-color: rgb(99 102 241);
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.3);
}

/* Toast */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 100;
  animation: toast-in 0.3s ease-out;
  white-space: nowrap;
}

.toast.success {
  background: rgb(22 101 52); /* green-800 */
  color: rgb(187 247 208); /* green-200 */
}

.toast.error {
  background: rgb(127 29 29); /* red-900 */
  color: rgb(254 202 202); /* red-200 */
}

.toast.hidden {
  display: none;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Recent task items */
.recent-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgb(30 41 59);
  border-radius: 0.5rem;
  font-size: 0.8rem;
  color: rgb(148 163 184);
  animation: slide-in 0.3s ease-out;
}

.recent-item .badge {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}

.badge-privat { background: rgb(30 58 138); color: rgb(147 197 253); }
.badge-247 { background: rgb(88 28 135); color: rgb(216 180 254); }
.badge-bata { background: rgb(21 94 117); color: rgb(165 243 252); }

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Loading spinner on button */
.btn-loading {
  pointer-events: none;
  opacity: 0.7;
}

/* Select styling for dark mode */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  color: white;
}

select option {
  background: rgb(30 41 59);
  color: white;
}

/* Input sending state */
#todo-input.sending {
  opacity: 0.5;
  pointer-events: none;
}