/* ============================================
   TaskForm Component Styles
   ============================================ */

.task-form {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-16);
  margin-bottom: var(--space-32);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-card-border);
  animation: slideUp 0.4s var(--ease-standard);
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(var(--space-10)); }
  to { opacity: 1; transform: translateY(0); }
}

.task-input {
  width: 100%;
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  font-size: var(--font-size-md);
  font-family: var(--font-family-base);
  color: var(--color-text);
  background-color: var(--color-surface);
  transition: all var(--duration-normal) var(--ease-standard);
  outline: none;
}

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

.task-input:focus-visible {
  box-shadow: var(--focus-ring);
}

.form-expanded {
  margin-top: var(--space-16);
  animation: slideDown var(--duration-normal) var(--ease-standard);
}

@keyframes slideDown {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 300px; }
}

.description-input {
  width: 100%;
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  color: var(--color-text);
  background-color: var(--color-surface);
  resize: vertical;
  min-height: 80px;
  transition: all var(--duration-normal) var(--ease-standard);
  outline: none;
}

.description-input:focus {
  border-color: var(--color-primary);
  outline: var(--focus-outline);
  outline-offset: 0;
}

.description-input:focus-visible {
  box-shadow: var(--focus-ring);
}

.form-actions {
  display: flex;
  gap: var(--space-10);
  margin-top: var(--space-12);
}

.form-actions .btn {
  flex: 1;
}

/* Responsive styles for mobile portrait (480px and below) */
@media (max-width: 480px) {
  .task-form {
    padding: var(--space-12);
    margin-bottom: var(--space-20);
    border-radius: var(--radius-md);
  }

  .task-input {
    padding: var(--space-10);
    font-size: var(--font-size-base);
  }

  .description-input {
    padding: var(--space-10);
    font-size: var(--font-size-sm);
    min-height: 60px;
  }

  .form-expanded {
    margin-top: var(--space-12);
  }

  .form-actions {
    flex-direction: column;
    gap: var(--space-8);
    margin-top: var(--space-10);
  }

  .form-actions .btn {
    width: 100%;
    padding: var(--space-10) var(--space-12);
    font-size: var(--font-size-sm);
  }
}